{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Intraline 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": "theme.style",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#apply-themes-correctly"
    },
    {
      "name": "truncateToWidth",
      "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 line-level changes hide a small textual edit."
  ],
  "category": "tools",
  "categoryLabel": "Tool and message output",
  "consequences": [
    "Small edits remain identifiable within changed lines.",
    "Incomplete or non-diff blocks need a plain fallback."
  ],
  "family": "presentation",
  "familyLabel": "Presentation",
  "id": "word-spotlight",
  "implementation": [
    "Keep parsing separate from terminal styling.",
    "Provide a fallback for incomplete or non-diff blocks."
  ],
  "intent": "Emphasize changed words inside parsed patch lines.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/word-spotlight.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "repoprompt-cli-diff-presentation",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/repoprompt-cli/index.ts",
          "lines": "1020-1085",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/repoprompt-cli/index.ts#L1020-L1085"
        }
      ],
      "repo": "dot314",
      "repoUrl": "https://github.com/nicobailon/dot314",
      "title": "Render patch output with compact and intra-line diff treatments"
    }
  ],
  "linkedFrom": [],
  "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/word-spotlight.md",
  "motivation": "Dot314's RepoPrompt CLI parser highlights small word changes inside patch lines.",
  "name": "Word Spotlight",
  "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": "theme.style",
      "role": "Styles text through semantic or concrete colours.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#apply-themes-correctly"
    },
    {
      "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": "Word comparison",
      "role": "Identifies changed spans before terminal styling.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "chooses the enclosing diff layout",
      "id": "hinge-diff",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/hinge-diff.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/hinge-diff.md",
      "name": "Hinge Diff",
      "url": "https://pi-tui.ratstack.sh/patterns/hinge-diff/"
    }
  ],
  "sampleCode": {
    "code": "// Word Spotlight: parse changed spans first, then emphasize only edited words.\nimport { Text, truncateToWidth, wrapTextWithAnsi } from \"@earendil-works/pi-tui\";\nimport { ToolExecutionComponent, type ToolRenderers } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nfunction compareWords(before: string, after: string) {\n  const left = before.split(\" \"), right = after.split(\" \");\n  let prefix = 0, suffix = 0;\n  while (prefix < left.length && prefix < right.length && left[prefix] === right[prefix]) prefix++;\n  while (suffix < left.length - prefix && suffix < right.length - prefix &&\n    left[left.length - 1 - suffix] === right[right.length - 1 - suffix]) suffix++;\n  return {\n    before: { words: left, start: prefix, end: left.length - suffix },\n    after: { words: right, start: prefix, end: right.length - suffix },\n  };\n}\nexport const story: PatternStory = {\n  id: \"word-spotlight\", title: \"Word Spotlight\", kind: \"component\",\n  apis: [\"ToolExecutionComponent\", \"ToolDefinition.renderResult\", \"theme.style\", \"truncateToWidth\"], rows: 12,\n  states: [\n    { id: \"changed\", label: \"Changed words\" },\n    { id: \"incomplete\", label: \"Incomplete patch\", steps: [{ type: \"action\", name: \"incomplete\" }] },\n    { id: \"plain\", label: \"Non-diff output\", steps: [{ type: \"action\", name: \"plain\" }] },\n  ],\n  setup({ theme, tui, action }) {\n    // The fixture parser deliberately accepts only a complete two-line patch.\n    let output = \"- keep four preview rows\\n+ keep eight preview rows\";\n    const renderers: ToolRenderers = {\n      renderCall: () => new Text(theme.fg(\"toolTitle\", \"patch_preview · preview limit\"), 0, 0),\n      renderResult() {\n        const [before, after, extra] = output.split(\"\\n\");\n        const comparison = before?.startsWith(\"- \") && after?.startsWith(\"+ \") && extra === undefined\n          ? compareWords(before.slice(2), after.slice(2)) : undefined;\n        return {\n          invalidate() {},\n          render(width) {\n            if (!comparison) return wrapTextWithAnsi(output, width).map(row => theme.fg(\"toolOutput\", row));\n            const highlight = (side: typeof comparison.before, sign: string) => {\n              const content = side.words.map((word, index) => index >= side.start && index < side.end\n                ? theme.style(word, { fg: sign === \"-\" ? \"toolDiffRemoved\" : \"toolDiffAdded\",\n                    bold: true, underline: true })\n                : theme.fg(\"muted\", word)).join(\" \");\n              return truncateToWidth(theme.fg(sign === \"-\" ? \"toolDiffRemoved\" : \"toolDiffAdded\", sign + \" \") +\n                content, width);\n            };\n            return [highlight(comparison.before, \"-\"), highlight(comparison.after, \"+\"),\n              theme.fg(\"dim\", \"Only changed words are emphasized\")];\n          },\n        };\n      },\n    };\n    const tool = new ToolExecutionComponent(\"patch_preview\", \"example-patch-1\", {},\n      undefined, renderers, tui, \"/workspace/example\");\n    tool.updateResult({ content: [], isError: false }, false);\n    action(\"incomplete\", () => {\n      output = \"- keep four preview rows\\nPatch still arriving…\";\n      tool.updateResult({ content: [], isError: false }, true); tui.requestRender();\n    });\n    action(\"plain\", () => {\n      output = \"Preview build complete. No patch supplied.\";\n      tool.updateResult({ content: [], isError: false }, false); tui.requestRender();\n    });\n    return tool;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/presentation/word-spotlight.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Word Spotlight, Changed words state, 40 columns, dark theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-40-dark.1968e898c3c4.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Word Spotlight, Changed words state, 40 columns, light theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-40-light.0cf534befb49.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Word Spotlight, Changed words state, 60 columns, dark theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-60-dark.498f87c53197.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Word Spotlight, Changed words state, 60 columns, light theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-60-light.b61a89243001.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Word Spotlight, Changed words state, 80 columns, dark theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-80-dark.b322a2c16949.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Word Spotlight, Changed words state, 80 columns, light theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-80-light.abb8b93d3374.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Word Spotlight, Changed words state, 120 columns, dark theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-120-dark.56516615c0ae.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Word Spotlight, Changed words state, 120 columns, light theme, 7 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": 308,
          "rows": 7,
          "still": "https://pi-tui.ratstack.sh/frames/word-spotlight/changed-120-light.41c4bf49a056.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a synthetic patch with changed-word emphasis.",
      "id": "changed",
      "label": "Changed words",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-40-dark.8b4fd20a17d4.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-40-light.d973ab3ac113.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-60-dark.dfccaa4be1bc.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-60-light.63b18ec1124d.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-80-dark.508c282fbca6.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-80-light.907121d001c4.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-120-dark.897087b7e920.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Word Spotlight, Incomplete patch 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/word-spotlight/incomplete-120-light.adedfe9c6484.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a plain fallback while the patch is incomplete.",
      "id": "incomplete",
      "label": "Incomplete patch",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-40-dark.992a673bb2a7.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-40-light.3977979404dd.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-60-dark.badf189423da.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-60-light.9c8d76186813.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-80-dark.b4be8857fcbc.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-80-light.a6824ff3a68b.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-120-dark.a0855cc589d0.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Word Spotlight, Non-diff output 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/word-spotlight/plain-120-light.bf9d2c022b04.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Render a non-diff block without pretending it is a patch.",
      "id": "plain",
      "label": "Non-diff output",
      "problems": []
    }
  ],
  "structure": "patch lines -> word comparison\ncomparison -> styled changed spans",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/word-spotlight/dark.727ad183e290.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/word-spotlight/light.945d480cf0e8.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/word-spotlight/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}