{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "ai-code-diff-viewer",
  "type": "registry:ui",
  "title": "AI Code Diff Inspector",
  "description": "Developer diff comparison view displaying green additions and red deletions generated by automated AI coding agents.",
  "category": "ai",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/ai/ai-code-diff-viewer/ai-code-diff-viewer.tsx",
      "type": "registry:ui",
      "target": "components/ui/ai-code-diff-viewer.tsx",
      "content": "import React from 'react';\nimport { GitDiff, CheckCircle } from '@phosphor-icons/react';\n\nconst DIFF_LINES = [\n  { type: 'ctx', oldNum: 14, newNum: 14, text: \"export function configureTheme() {\" },\n  { type: 'del', oldNum: 15, newNum: null, text: \"-  const fallback = 'dark';\" },\n  { type: 'add', oldNum: null, newNum: 15, text: \"+  const fallback = window.matchMedia('(prefers-color-scheme: dark)');\" },\n  { type: 'add', oldNum: null, newNum: 16, text: \"+  document.documentElement.classList.toggle('dark', fallback.matches);\" },\n  { type: 'ctx', oldNum: 16, newNum: 17, text: \"   return { status: 'active' };\" },\n  { type: 'ctx', oldNum: 17, newNum: 18, text: \"}\" },\n];\n\nexport const AiCodeDiffViewer: React.FC = () => {\n  return (\n    <div className=\"w-full max-w-md mx-auto rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-950 font-mono text-xs overflow-hidden shadow-xl\">\n      <div className=\"flex items-center justify-between px-3.5 py-2.5 bg-zinc-900 border-b border-white/10 text-zinc-300\">\n        <div className=\"flex items-center gap-2\">\n          <GitDiff size={14} className=\"text-indigo-400\" />\n          <span className=\"text-[11px] font-semibold text-zinc-200\">ThemeContext.tsx</span>\n        </div>\n        <div className=\"flex items-center gap-2 text-[10px]\">\n          <span className=\"text-emerald-400 font-bold\">+2</span>\n          <span className=\"text-rose-400 font-bold\">-1</span>\n        </div>\n      </div>\n\n      <div className=\"p-2 space-y-0.5 overflow-x-auto text-[11px] leading-relaxed\">\n        {DIFF_LINES.map((line, idx) => {\n          const isAdd = line.type === 'add';\n          const isDel = line.type === 'del';\n\n          return (\n            <div\n              key={idx}\n              className={`flex items-center px-2 py-0.5 rounded ${\n                isAdd\n                  ? 'bg-emerald-500/15 text-emerald-300'\n                  : isDel\n                  ? 'bg-rose-500/15 text-rose-300'\n                  : 'text-zinc-400'\n              }`}\n            >\n              <span className=\"w-6 text-[10px] text-zinc-600 select-none\">{line.newNum || line.oldNum}</span>\n              <span className=\"whitespace-pre\">{line.text}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}