{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "benchmark-delta",
  "type": "registry:ui",
  "title": "BenchmarkDelta",
  "description": "Comparative system performance delta block showing baseline vs candidate metrics.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/benchmark-delta.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface BenchmarkItem {\n  name: string;\n  baselineLabel?: string;\n  baselineValue: number;\n  baselineDisplay: string;\n  candidateLabel?: string;\n  candidateValue: number;\n  candidateDisplay: string;\n  delta: string;\n  better?: \"higher\" | \"lower\";\n}\n\nexport interface BenchmarkDeltaProps extends React.HTMLAttributes<HTMLDivElement> {\n  benchmarks: BenchmarkItem[];\n}\n\nexport function BenchmarkDelta({\n  benchmarks,\n  className,\n  ...props\n}: BenchmarkDeltaProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-4 space-y-4 my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      {benchmarks.map((item, idx) => {\n        const maxVal = Math.max(item.baselineValue, item.candidateValue, 1);\n        const baselinePct = Math.min((item.baselineValue / maxVal) * 100, 100);\n        const candidatePct = Math.min((item.candidateValue / maxVal) * 100, 100);\n\n        const isPositive =\n          item.better === \"lower\"\n            ? item.candidateValue < item.baselineValue\n            : item.candidateValue > item.baselineValue;\n\n        return (\n          <div key={idx} className=\"space-y-2 pb-3 border-b border-border last:border-b-0 last:pb-0\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"font-mono text-xs font-medium text-foreground\">\n                {item.name}\n              </span>\n              <span\n                className={cn(\n                  \"font-mono text-xs font-medium px-1.5 py-0.5 rounded\",\n                  isPositive\n                    ? \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\"\n                    : \"bg-rose-500/10 text-rose-600 dark:text-rose-400\"\n                )}\n              >\n                {item.delta}\n              </span>\n            </div>\n\n            <div className=\"space-y-1.5\">\n              <div className=\"flex items-center gap-3\">\n                <span className=\"font-mono text-[11px] text-muted-foreground w-16 flex-shrink-0\">\n                  {item.baselineLabel ?? \"Baseline\"}\n                </span>\n                <div className=\"flex-1 h-3 rounded bg-muted overflow-hidden border border-border/50\">\n                  <div\n                    className=\"h-full bg-muted-foreground/40 rounded transition-all duration-300\"\n                    style={{ width: `${baselinePct}%` }}\n                  />\n                </div>\n                <span className=\"font-mono text-xs text-muted-foreground w-20 text-right flex-shrink-0\">\n                  {item.baselineDisplay}\n                </span>\n              </div>\n\n              <div className=\"flex items-center gap-3\">\n                <span className=\"font-mono text-[11px] font-medium text-foreground w-16 flex-shrink-0\">\n                  {item.candidateLabel ?? \"Candidate\"}\n                </span>\n                <div className=\"flex-1 h-3 rounded bg-muted overflow-hidden border border-border/50\">\n                  <div\n                    className=\"h-full bg-primary rounded transition-all duration-300\"\n                    style={{ width: `${candidatePct}%` }}\n                  />\n                </div>\n                <span className=\"font-mono text-xs font-medium text-primary w-20 text-right flex-shrink-0\">\n                  {item.candidateDisplay}\n                </span>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}