{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Adaptive diff"
  ],
  "animated": false,
  "apis": [
    {
      "name": "ToolDefinition.renderResult",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "truncateToWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "visibleWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "ToolExecutionComponent",
      "url": null
    }
  ],
  "applicability": [
    "Use this when edit output must remain useful in narrow terminals."
  ],
  "category": "tools",
  "categoryLabel": "Tool and message output",
  "consequences": [
    "One patch can have compact, unified or split presentation.",
    "A narrower layout shows less side-by-side context."
  ],
  "family": "presentation",
  "familyLabel": "Presentation",
  "id": "hinge-diff",
  "implementation": [
    "Do not force split panes where their columns do not fit.",
    "Keep pending preview reads safe and separate from applying an edit."
  ],
  "intent": "Choose compact, unified or split diff presentation from available width.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/hinge-diff.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "adaptive-diff-layout",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/pi-codex-apply-patch-display/diff-renderer.ts",
          "lines": "1210-1238",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/pi-codex-apply-patch-display/diff-renderer.ts#L1210-L1238"
        }
      ],
      "repo": "dot314",
      "repoUrl": "https://github.com/nicobailon/dot314",
      "title": "Choose diff layout from available width"
    },
    {
      "example": "adaptive-diff-layout",
      "moreRefs": 0,
      "refs": [
        {
          "file": "src/diff-renderer.ts",
          "lines": "1-35",
          "sha": "fca8c858",
          "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/diff-renderer.ts#L1-L35"
        },
        {
          "file": "src/diff-renderer.ts",
          "lines": "2390-2435",
          "sha": "fca8c858",
          "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/diff-renderer.ts#L2390-L2435"
        },
        {
          "file": "src/pending-diff-preview.ts",
          "lines": "1-35",
          "sha": "fca8c858",
          "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/pending-diff-preview.ts#L1-L35"
        },
        {
          "file": "src/pending-diff-preview.ts",
          "lines": "160-245",
          "sha": "fca8c858",
          "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/pending-diff-preview.ts#L160-L245"
        }
      ],
      "repo": "pi-tool-display",
      "repoUrl": "https://github.com/nicobailon/pi-tool-display",
      "title": "Choose diff layout from available width"
    }
  ],
  "linkedFrom": [
    {
      "how": "chooses the enclosing diff layout",
      "id": "word-spotlight",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/word-spotlight.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/word-spotlight.md",
      "name": "Word Spotlight",
      "url": "https://pi-tui.ratstack.sh/patterns/word-spotlight/"
    }
  ],
  "links": {
    "agentGuide": "https://pi-tui.ratstack.sh/llms.txt",
    "index": "https://pi-tui.ratstack.sh/patterns.md",
    "skill": "https://pi-tui.ratstack.sh/skills/build-pi-tui-component.md"
  },
  "mdUrl": "https://pi-tui.ratstack.sh/patterns/hinge-diff.md",
  "motivation": "Tool Display and Dot314 choose edit layouts when narrow terminals cannot support split output.",
  "name": "Hinge Diff",
  "participants": [
    {
      "name": "ToolDefinition.renderResult",
      "role": "Renders partial or final tool output.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#tool-rendering"
    },
    {
      "name": "truncateToWidth",
      "role": "Clips text to its allotted columns and can pad the result.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "visibleWidth",
      "role": "Measures rendered terminal columns rather than string length.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "Parsed patch",
      "role": "Supplies the same changes to several width-dependent layouts.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "uses the same width-driven rearrangement",
      "id": "hinge-panel",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/hinge-panel.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/hinge-panel.md",
      "name": "Hinge Panel",
      "url": "https://pi-tui.ratstack.sh/patterns/hinge-panel/"
    }
  ],
  "sampleCode": {
    "code": "// Hinge Diff: fold one parsed patch into split, unified or compact output.\nimport { Text, truncateToWidth, visibleWidth } from \"@earendil-works/pi-tui\";\nimport { ToolExecutionComponent, type ToolRenderers } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"hinge-diff\", title: \"Hinge Diff\", kind: \"component\",\n  apis: [\"ToolExecutionComponent\", \"ToolDefinition.renderResult\", \"truncateToWidth\", \"visibleWidth\"], rows: 16,\n  states: [\n    { id: \"wide\", label: \"Split when width permits\" },\n    { id: \"narrow\", label: \"Unified diff\", steps: [{ type: \"action\", name: \"narrow\" }] },\n    { id: \"compact\", label: \"Compact diff\", steps: [{ type: \"action\", name: \"compact\" }] },\n  ],\n  setup({ theme, tui, action }) {\n    const patch = [\n      { line: 8, before: \"const limit = 4;\", after: \"const limit = 8;\" },\n      { line: 9, before: \"return rows.slice(0, limit);\", after: \"return rows.slice(-limit);\" },\n    ];\n    let mode: \"adaptive\" | \"unified\" | \"compact\" = \"adaptive\";\n    const renderers: ToolRenderers = {\n      renderCall: () => new Text(theme.fg(\"toolTitle\", \"edit · src/preview.ts\"), 0, 0),\n      renderResult() {\n        return {\n          invalidate() {},\n          render(width) {\n            if (mode === \"compact\") return [\n              theme.fg(\"success\", \"2 lines changed · +2 / -2\"),\n              theme.fg(\"muted\", \"Expand to inspect the patch\"),\n            ];\n            const split = mode === \"adaptive\" && width >= 72;\n            const lines = [theme.fg(\"dim\", split ? \"Before  │  After\" : \"Unified · narrow-safe layout\")];\n            for (const row of patch) {\n              const before = row.line + \" - \" + row.before;\n              const after = row.line + \" + \" + row.after;\n              if (split) {\n                const leftWidth = Math.floor((width - 3) / 2);\n                const left = truncateToWidth(before, leftWidth, \"…\", true);\n                const rightWidth = width - visibleWidth(left) - 3;\n                lines.push(theme.fg(\"toolDiffRemoved\", left) + theme.fg(\"border\", \" │ \") +\n                  theme.fg(\"toolDiffAdded\", truncateToWidth(after, rightWidth)));\n              } else {\n                lines.push(theme.fg(\"toolDiffRemoved\", truncateToWidth(before, width)));\n                lines.push(theme.fg(\"toolDiffAdded\", truncateToWidth(after, width)));\n              }\n            }\n            return lines;\n          },\n        };\n      },\n    };\n    const tool = new ToolExecutionComponent(\"edit\", \"example-edit-1\", {},\n      undefined, renderers, tui, \"/workspace/example\");\n    tool.updateResult({ content: [], isError: false }, false);\n    action(\"narrow\", () => { mode = \"unified\"; tool.invalidate(); tui.requestRender(); });\n    action(\"compact\", () => { mode = \"compact\"; tool.invalidate(); tui.requestRender(); });\n    return tool;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/presentation/hinge-diff.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Hinge Diff, Split diff state, 40 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-40-dark.dc22451e030f.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Hinge Diff, Split diff state, 40 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-40-light.8d344a4dfc18.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Hinge Diff, Split diff state, 60 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-60-dark.54bd8dbc78d9.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Hinge Diff, Split diff state, 60 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-60-light.e6d58b2193f1.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Hinge Diff, Split diff state, 80 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-80-dark.af585414d81a.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Hinge Diff, Split diff state, 80 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-80-light.5449f89e134c.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Hinge Diff, Split diff state, 120 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-120-dark.a4634cd706dd.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Hinge Diff, Split diff state, 120 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/wide-120-light.939e3865f80d.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a synthetic before/after diff where both sides fit.",
      "id": "wide",
      "label": "Split diff",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Hinge Diff, Unified diff state, 40 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-40-dark.dc22451e030f.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Hinge Diff, Unified diff state, 40 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-40-light.8d344a4dfc18.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Hinge Diff, Unified diff state, 60 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-60-dark.54bd8dbc78d9.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Hinge Diff, Unified diff state, 60 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-60-light.e6d58b2193f1.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Hinge Diff, Unified diff state, 80 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-80-dark.7273b24e983d.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Hinge Diff, Unified diff state, 80 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-80-light.0080028c52c7.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Hinge Diff, Unified diff state, 120 columns, dark theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-120-dark.c446e221b1f6.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Hinge Diff, Unified diff state, 120 columns, light theme, 9 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/narrow-120-light.435e586e4722.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Switch the same patch to unified lines at narrow widths.",
      "id": "narrow",
      "label": "Unified diff",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Hinge Diff, Compact diff state, 40 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-40-dark.252a1e362401.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Hinge Diff, Compact diff state, 40 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-40-light.867cebae6b34.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Hinge Diff, Compact diff state, 60 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-60-dark.2e1197255aef.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Hinge Diff, Compact diff state, 60 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-60-light.93a1f4e6fdc1.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Hinge Diff, Compact diff state, 80 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-80-dark.e6d7125925a5.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Hinge Diff, Compact diff state, 80 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-80-light.a438b67c67ab.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Hinge Diff, Compact diff state, 120 columns, dark theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-120-dark.fbe015707776.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Hinge Diff, Compact diff state, 120 columns, light theme, 6 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 264,
          "rows": 6,
          "still": "https://pi-tui.ratstack.sh/frames/hinge-diff/compact-120-light.6c4e5b6040f6.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a compact summary with an explicit expansion hint.",
      "id": "compact",
      "label": "Compact diff",
      "problems": []
    }
  ],
  "structure": "parsed diff + width -> layout\nlayout -> compact / unified / split",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/hinge-diff/dark.c35dec654a66.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/hinge-diff/light.1376142030a1.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/hinge-diff/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}