{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "diff-view",
  "type": "registry:ui",
  "title": "Diff view",
  "description": "React code diff viewer that tints added lines green and removed lines red with plus and minus gutters, context lines and an optional filename header.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/diff-view.tsx",
      "type": "registry:ui",
      "target": "components/ui/diff-view.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Line = { type: \"add\" | \"del\" | \"ctx\"; text: string }\n\nfunction DiffView({\n  lines,\n  className,\n  filename,\n}: {\n  lines: Line[]\n  className?: string\n  filename?: string\n}) {\n  return (\n    <div data-slot=\"diff-view\" className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {filename ? (\n        <div className=\"border-b border-border bg-sunken px-3 py-2 font-mono text-[11px] text-fg-muted\">{filename}</div>\n      ) : null}\n      <pre className=\"overflow-auto bg-bg p-3 font-mono text-xs leading-relaxed\" role=\"region\" aria-label={filename ? `Diff for ${filename}` : \"Diff\"}>\n        {lines.map((l, i) => (\n          <div\n            key={i}\n            className={cn(\n              \"px-1\",\n              l.type === \"add\" && \"bg-success/10 text-fg\",\n              l.type === \"del\" && \"bg-danger/10 text-fg\",\n              l.type === \"ctx\" && \"text-fg-muted\"\n            )}\n          >\n            <span className=\"inline-block w-4 select-none text-fg-subtle\" aria-hidden>\n              {l.type === \"add\" ? \"+\" : l.type === \"del\" ? \"-\" : \" \"}\n            </span>\n            {l.text}\n          </div>\n        ))}\n      </pre>\n    </div>\n  )\n}\nexport { DiffView }\n"
    }
  ]
}