{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "claude-diff",
  "title": "Claude Diff",
  "description": "An inline edit hunk with tinted +/- rows, line numbers, and off-screen added/removed labels.",
  "files": [
    {
      "path": "registry/brainless/claude/claude-diff.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaudeDiff — Claude Code's inline edit hunk (the ⏺ Update / ⎿ summary + the\n * +/- lines). Added/removed rows carry semantic tinted backgrounds and an\n * off-screen \"added\"/\"removed\" label so the diff is legible without color.\n */\nexport type DiffLine = {\n  type: \"add\" | \"del\" | \"ctx\";\n  n?: number;\n  text: string;\n};\n\nconst GREEN = \"#4ea96f\";\n\nexport function ClaudeDiff({\n  file,\n  summary,\n  lines,\n  className,\n}: {\n  file: string;\n  summary?: string;\n  lines: DiffLine[];\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"min-w-0 font-mono text-[13px] leading-[1.55]\", className)}>\n      <div className=\"flex min-w-0 flex-wrap items-baseline gap-x-2\">\n        <span aria-hidden className=\"shrink-0\" style={{ color: GREEN }}>\n          ⏺\n        </span>\n        <span className=\"text-[#c0caf5]\">Update</span>\n        <span className=\"min-w-0 break-all\">\n          <span className=\"text-[#565f89]\">(</span>\n          <span className=\"text-[#7dcfff]\">{file}</span>\n          <span className=\"text-[#565f89]\">)</span>\n        </span>\n      </div>\n      {summary ? (\n        <div className=\"flex min-w-0 items-baseline gap-2 text-[#8b8fa3]\">\n          {/* invisible status glyph spacer: aligns ⎿ under \"Update\" */}\n          <span aria-hidden className=\"invisible shrink-0\">\n            ⏺\n          </span>\n          <span aria-hidden className=\"shrink-0\" style={{ color: \"#565f89\" }}>\n            ⎿\n          </span>\n          <span className=\"min-w-0 break-words\">{summary}</span>\n        </div>\n      ) : null}\n\n      <pre className=\"mt-1 min-w-0 overflow-x-auto rounded-none border border-[#202022] bg-[#101010] py-1.5 pl-2 pr-3\">\n        {lines.map((l, i) => {\n          const bg =\n            l.type === \"add\"\n              ? \"rgba(78, 169, 111,.10)\"\n              : l.type === \"del\"\n                ? \"rgba(247,118,142,.12)\"\n                : \"transparent\";\n          const mark = l.type === \"add\" ? \"+\" : l.type === \"del\" ? \"-\" : \" \";\n          const markColor =\n            l.type === \"add\" ? GREEN : l.type === \"del\" ? \"#f7768e\" : \"#565f89\";\n          return (\n            <div key={i} className=\"flex min-w-0\" style={{ background: bg }}>\n              <span\n                className=\"w-9 shrink-0 select-none pr-2 text-right\"\n                style={{ color: \"#3b3f52\" }}\n              >\n                {l.n ?? \"\"}\n              </span>\n              <span className=\"w-3 shrink-0 select-none\" style={{ color: markColor }}>\n                {mark}\n              </span>\n              <span\n                className=\"min-w-0 break-all\"\n                style={{\n                  color: l.type === \"ctx\" ? \"#8b8fa3\" : \"#c0caf5\",\n                }}\n              >\n                {l.type !== \"ctx\" ? (\n                  <span className=\"sr-only\">\n                    {l.type === \"add\" ? \"added: \" : \"removed: \"}\n                  </span>\n                ) : null}\n                {l.text}\n              </span>\n            </div>\n          );\n        })}\n      </pre>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/claude/claude-diff.tsx"
    }
  ],
  "type": "registry:ui"
}