{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "code-diff-slider",
  "type": "registry:ui",
  "title": "Code Diff Slider",
  "description": "Interactive git code diff compare viewer with additions, deletions, unified slider wipes, and patch copying.",
  "category": "data",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/code-diff-slider/code-diff-slider.tsx",
      "type": "registry:ui",
      "target": "components/ui/code-diff-slider.tsx",
      "content": "import React, { useState } from 'react';\nimport { GitDiff, GitCommit, GitBranch, Copy, Check, ArrowsLeftRight } from '@phosphor-icons/react';\n\nexport interface CodeDiffSliderProps {\n  filename?: string;\n  beforeLabel?: string;\n  afterLabel?: string;\n  className?: string;\n}\n\ninterface DiffLine {\n  type: 'add' | 'del' | 'context';\n  oldNum?: number;\n  newNum?: number;\n  content: string;\n}\n\nconst SAMPLE_DIFF: DiffLine[] = [\n  { type: 'context', oldNum: 14, newNum: 14, content: \"export async function queryMesh(nodeId: string) {\" },\n  { type: 'context', oldNum: 15, newNum: 15, content: \"  const connection = await pool.acquire();\" },\n  { type: 'del', oldNum: 16, content: \"-  const raw = await connection.fetchTelemetry(nodeId);\" },\n  { type: 'del', oldNum: 17, content: \"-  return JSON.parse(raw.payload);\" },\n  { type: 'add', newNum: 16, content: \"+  // Zero-copy direct protobuf deserialization\" },\n  { type: 'add', newNum: 17, content: \"+  const buffer = await connection.streamBytes(nodeId);\" },\n  { type: 'add', newNum: 18, content: \"+  return TelemetryProto.decode(buffer);\" },\n  { type: 'context', oldNum: 18, newNum: 19, content: \"}\" },\n];\n\nexport const CodeDiffSlider: React.FC<CodeDiffSliderProps> = ({\n  filename = \"src/telemetry/mesh-client.ts\",\n  beforeLabel = \"v1.2.0 (Legacy)\",\n  afterLabel = \"v2.0.0 (Zero-Copy)\",\n  className = \"\"\n}) => {\n  const [sliderPos, setSliderPos] = useState(50);\n  const [copied, setCopied] = useState(false);\n  const [viewMode, setViewMode] = useState<'split' | 'unified'>('split');\n\n  const additions = SAMPLE_DIFF.filter(l => l.type === 'add').length;\n  const deletions = SAMPLE_DIFF.filter(l => l.type === 'del').length;\n\n  const handleCopy = () => {\n    const raw = SAMPLE_DIFF.map(l => l.content).join('\\n');\n    navigator.clipboard.writeText(raw);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div className={`w-full max-w-2xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white/95 dark:bg-[#08090e] p-6 shadow-2xl backdrop-blur-xl font-mono text-xs select-none ${className}`}>\n      {/* Diff Header */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-zinc-200/80 dark:border-white/5\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400\">\n            <GitDiff size={18} weight=\"bold\" />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <span className=\"font-bold text-zinc-900 dark:text-white text-sm\">{filename}</span>\n              <span className=\"flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] bg-zinc-100 dark:bg-white/5 text-zinc-400 border border-zinc-200 dark:border-white/10\">\n                <GitBranch size={10} />\n                <span>main</span>\n              </span>\n            </div>\n            <div className=\"flex items-center gap-3 text-[11px] text-zinc-400 mt-0.5\">\n              <span className=\"text-emerald-500 font-bold\">+{additions}</span>\n              <span className=\"text-rose-500 font-bold\">-{deletions}</span>\n              <span className=\"flex items-center gap-1 font-mono text-zinc-500\">\n                <GitCommit size={12} />\n                <span>8b3f21a</span>\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {/* Toggle view */}\n          <div className=\"flex items-center rounded-xl bg-zinc-100 dark:bg-white/5 p-1 border border-zinc-200 dark:border-white/10 text-[11px]\">\n            <button\n              onClick={() => setViewMode('split')}\n              className={`px-2.5 py-1 rounded-lg transition-colors cursor-pointer font-bold ${\n                viewMode === 'split' ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-xs' : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300'\n              }`}\n            >\n              Slider\n            </button>\n            <button\n              onClick={() => setViewMode('unified')}\n              className={`px-2.5 py-1 rounded-lg transition-colors cursor-pointer font-bold ${\n                viewMode === 'unified' ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-xs' : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300'\n              }`}\n            >\n              Unified\n            </button>\n          </div>\n\n          <button\n            onClick={handleCopy}\n            className=\"flex h-8 w-8 items-center justify-center rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors cursor-pointer\"\n            title=\"Copy patch diff\"\n          >\n            {copied ? <Check size={14} className=\"text-emerald-500\" /> : <Copy size={14} />}\n          </button>\n        </div>\n      </div>\n\n      {/* Main Diff Code Display */}\n      {viewMode === 'unified' ? (\n        <div className=\"my-5 rounded-2xl bg-zinc-50 dark:bg-black/60 border border-zinc-200 dark:border-white/10 overflow-hidden text-[11px]\">\n          {SAMPLE_DIFF.map((line, idx) => {\n            const isAdd = line.type === 'add';\n            const isDel = line.type === 'del';\n            return (\n              <div\n                key={idx}\n                className={`flex items-center px-3 py-1 font-mono transition-colors ${\n                  isAdd ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-l-2 border-emerald-500' :\n                  isDel ? 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-l-2 border-rose-500 line-through opacity-75' :\n                  'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100/50 dark:hover:bg-white/[0.02]'\n                }`}\n              >\n                <span className=\"w-8 shrink-0 text-zinc-400 text-[10px] select-none text-right pr-2\">\n                  {line.oldNum || ''}\n                </span>\n                <span className=\"w-8 shrink-0 text-zinc-400 text-[10px] select-none text-right pr-3\">\n                  {line.newNum || ''}\n                </span>\n                <span className=\"whitespace-pre truncate\">{line.content}</span>\n              </div>\n            );\n          })}\n        </div>\n      ) : (\n        <div className=\"relative my-5 rounded-2xl bg-zinc-50 dark:bg-black/60 border border-zinc-200 dark:border-white/10 overflow-hidden text-[11px]\">\n          {/* Subheader showing compare version names */}\n          <div className=\"flex items-center justify-between px-4 py-2 border-b border-zinc-200 dark:border-white/5 bg-zinc-100/50 dark:bg-white/[0.02] text-[10px] font-bold text-zinc-400 uppercase\">\n            <span className=\"text-rose-400\">{beforeLabel}</span>\n            <span className=\"text-emerald-400\">{afterLabel}</span>\n          </div>\n\n          <div className=\"p-3\">\n            {SAMPLE_DIFF.map((line, idx) => {\n              const isAdd = line.type === 'add';\n              const isDel = line.type === 'del';\n              return (\n                <div\n                  key={idx}\n                  className={`flex items-center px-2 py-1 font-mono rounded ${\n                    isAdd ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' :\n                    isDel ? 'bg-rose-500/15 text-rose-600 dark:text-rose-400' :\n                    'text-zinc-700 dark:text-zinc-300'\n                  }`}\n                >\n                  <span className=\"w-6 shrink-0 text-zinc-400 select-none font-bold\">\n                    {isAdd ? '+' : isDel ? '-' : ' '}\n                  </span>\n                  <span className=\"whitespace-pre truncate\">{line.content.replace(/^[+-]\\s*/, '')}</span>\n                </div>\n              );\n            })}\n          </div>\n\n          {/* Interactive slider controller */}\n          <div className=\"p-3 border-t border-zinc-200 dark:border-white/5 flex items-center gap-3\">\n            <ArrowsLeftRight size={14} className=\"text-zinc-400 shrink-0\" />\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={sliderPos}\n              onChange={(e) => setSliderPos(Number(e.target.value))}\n              className=\"w-full h-1.5 bg-zinc-200 dark:bg-white/10 rounded-lg appearance-none cursor-pointer accent-emerald-500\"\n              aria-label=\"Diff inspect slider\"\n            />\n            <span className=\"text-[10px] text-zinc-400 font-mono w-8 text-right\">{sliderPos}%</span>\n          </div>\n        </div>\n      )}\n\n      {/* Footer telemetry */}\n      <div className=\"flex items-center justify-between text-[11px] text-zinc-400 pt-2 border-t border-zinc-200/60 dark:border-white/5\">\n        <span>Parsed in 0.8ms</span>\n        <span className=\"font-semibold text-zinc-600 dark:text-zinc-300\">Clean Unified Patch</span>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}