{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-code-diff",
  "type": "registry:component",
  "title": "Code diff",
  "description": "A unified diff with tinted additions and removals, sized for chat.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/elements/code-diff.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { codeScroll, codeSurface, mono, paper } from \"./surfaces\";\n\nexport type DiffKind = \"context\" | \"added\" | \"removed\";\n\nexport interface DiffLine {\n  kind: DiffKind;\n  text: string;\n}\n\nconst GUTTER: Record<DiffKind, string> = {\n  context: \"\",\n  added: \"+\",\n  removed: \"−\",\n};\n\nexport function CodeDiff({\n  filename,\n  additions,\n  deletions,\n  lines,\n  cycle,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"filename\" | \"additions\" | \"deletions\" | \"lines\" | \"cycle\"\n> & {\n  filename: string;\n  additions: number;\n  deletions: number;\n  lines: readonly DiffLine[];\n  cycle: number;\n}) {\n  return (\n    <div\n      data-slot=\"code-diff\"\n      className={cn(\n        paper,\n        \"w-full max-w-md overflow-hidden rounded-2xl font-mono text-xs\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center justify-between px-4 pt-3 pb-2\">\n        <span className=\"text-foreground/90\">{filename}</span>\n        <span className={cn(mono, \"tabular-nums\")}>\n          <span className=\"text-emerald-600 dark:text-emerald-400\">\n            +{additions}\n          </span>{\" \"}\n          <span className=\"text-red-600 dark:text-red-400\">−{deletions}</span>\n        </span>\n      </div>\n      <div className={codeScroll}>\n        <div className={codeSurface}>\n          {lines.map((line, i) => (\n            <div\n              key={`${cycle}-${i}-${line.text}`}\n              className={cn(\n                \"fade-in animate-in fill-mode-both flex px-4 py-0.5 leading-relaxed whitespace-pre duration-300\",\n                line.kind === \"context\" && \"text-foreground/45\",\n                line.kind === \"added\" &&\n                  \"bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300\",\n                line.kind === \"removed\" &&\n                  \"bg-red-500/10 text-red-700 dark:text-red-300\",\n              )}\n              style={{ animationDelay: `${i * 60}ms` }}\n            >\n              <span className=\"w-4 shrink-0 select-none\">\n                {GUTTER[line.kind]}\n              </span>\n              <span>{line.text}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}