{
  "name": "coverage-report",
  "type": "registry:ui",
  "title": "Coverage Report",
  "description": "Coverage per file, ranked by uncovered lines rather than by percentage. A 400-line file at 92% has 32 untested lines; a 12-line file at 60% has 5 — and percentage ranks the small one first.",
  "category": "Build & Perf",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "lib-motion",
    "lib-styles",
    "lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/coverage-report.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\nimport { useMemo, useState, type ComponentProps, type ReactNode } from 'react'\nimport { ChevronDown, ChevronRight } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { enterFade, growIn } from '@/lib/motion'\nimport { focusRing, interactive, radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Test coverage per file, with the uncovered lines named.\n *\n * Sorted by uncovered lines rather than by percentage. A 400-line file at 92%\n * has 32 untested lines; a 12-line file at 60% has 5. Percentage ranks the\n * small file first and that is exactly backwards for someone deciding what to\n * test next.\n *\n * Four metrics are kept apart. Statement coverage flatters: a file can hit\n * every statement and miss half its branches, which is where the bugs are.\n * Branch coverage is the one shown in the bar.\n *\n * The threshold is drawn as a line on each bar, so \"below target\" is visible\n * per row without reading numbers.\n */\nexport type CoverageFile = {\n  path: string\n  statements: number\n  branches: number\n  functions: number\n  lines: number\n  /** Line numbers with no coverage. */\n  uncovered?: number[]\n}\n\nfunction tone(value: number, threshold: number) {\n  if (value >= threshold) return 'var(--green)'\n  if (value >= threshold - 0.15) return 'var(--amber)'\n  return 'var(--destructive)'\n}\n\nfunction CoverageReport({\n  files,\n  threshold = 0.8,\n  metric = 'branches',\n  thresholdLabel = 'target',\n  uncoveredLabel = 'uncovered lines',\n  totalLabel = 'Total',\n  metricLabels = {\n    statements: 'Stmts',\n    branches: 'Branch',\n    functions: 'Funcs',\n    lines: 'Lines',\n  },\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  files: CoverageFile[]\n  /** Ratio 0–1. Drawn as a line on every bar. */\n  threshold?: number\n  /** Which metric the bar shows. Branches by default — statements flatter. */\n  metric?: 'statements' | 'branches' | 'functions' | 'lines'\n  thresholdLabel?: ReactNode\n  uncoveredLabel?: ReactNode\n  totalLabel?: ReactNode\n  metricLabels?: Record<'statements' | 'branches' | 'functions' | 'lines', ReactNode>\n}) {\n  const [open, setOpen] = useState<string | null>(null)\n\n  // Ranked by untested lines, not by percentage — that is the actionable order.\n  const rows = useMemo(\n    () =>\n      [...files].sort(\n        (a, b) => (b.uncovered?.length ?? 0) - (a.uncovered?.length ?? 0) || a[metric] - b[metric],\n      ),\n    [files, metric],\n  )\n\n  const totals = useMemo(() => {\n    if (files.length === 0) return null\n    const sum = (key: keyof Omit<CoverageFile, 'path' | 'uncovered'>) =>\n      files.reduce((total, file) => total + file[key], 0) / files.length\n    return {\n      statements: sum('statements'),\n      branches: sum('branches'),\n      functions: sum('functions'),\n      lines: sum('lines'),\n    }\n  }, [files])\n\n  const pct = (value: number) => `${Math.round(value * 100)}%`\n\n  return (\n    <div\n      data-slot=\"coverage-report\"\n      className={cn(enterFade, surface, radius.surface, 'flex flex-col overflow-hidden', className)}\n      {...props}\n    >\n      {totals && (\n        <div className=\"border-border flex flex-wrap items-center gap-x-4 gap-y-1 border-b p-3\">\n          <span className=\"text-sm font-medium\">{totalLabel}</span>\n          {(['statements', 'branches', 'functions', 'lines'] as const).map((key) => (\n            <span key={key} className=\"text-xs tabular-nums\">\n              <span className=\"text-muted-foreground\">{metricLabels[key]} </span>\n              <span style={{ color: tone(totals[key], threshold) }}>{pct(totals[key])}</span>\n            </span>\n          ))}\n          <span className=\"text-muted-foreground ms-auto text-xs\">\n            {thresholdLabel} {pct(threshold)}\n          </span>\n        </div>\n      )}\n\n      <ul className=\"divide-border/60 list-none divide-y\">\n        {rows.map((file) => {\n          const value = file[metric]\n          const expanded = open === file.path\n          const missing = file.uncovered ?? []\n\n          return (\n            <li key={file.path}>\n              <button\n                type=\"button\"\n                aria-expanded={expanded}\n                disabled={missing.length === 0}\n                onClick={() => setOpen(expanded ? null : file.path)}\n                className={cn(\n                  'flex w-full items-center gap-3 p-3 text-start',\n                  missing.length > 0 && interactive,\n                  focusRing,\n                )}\n              >\n                {missing.length > 0 ? (\n                  expanded ? (\n                    <ChevronDown className=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                  ) : (\n                    <ChevronRight className=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                  )\n                ) : (\n                  <span className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                )}\n\n                <span className=\"min-w-0 flex-1 truncate font-mono text-xs\">{file.path}</span>\n\n                {missing.length > 0 && (\n                  <Badge size=\"sm\" color={value >= threshold ? 'neutral' : 'amber'}>\n                    {missing.length}\n                  </Badge>\n                )}\n\n                <span className=\"relative hidden h-1.5 w-32 shrink-0 overflow-hidden rounded-full bg-[var(--secondary)] sm:block\">\n                  <span\n                    className={cn(growIn, 'absolute inset-y-0 start-0')}\n                    style={{ width: `${value * 100}%`, background: tone(value, threshold) }}\n                  />\n                  {/* The target, drawn per row so \"below\" needs no reading. */}\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"bg-foreground/40 absolute inset-y-0 w-px\"\n                    style={{ insetInlineStart: `${threshold * 100}%` }}\n                  />\n                </span>\n\n                <span\n                  className=\"w-10 shrink-0 text-end text-xs font-medium tabular-nums\"\n                  style={{ color: tone(value, threshold) }}\n                >\n                  {pct(value)}\n                </span>\n              </button>\n\n              {expanded && missing.length > 0 && (\n                <div className=\"bg-muted/30 border-border/60 border-t p-3\">\n                  <p className=\"text-muted-foreground mb-1.5 text-xs\">{uncoveredLabel}</p>\n                  <p className=\"font-mono text-xs break-words\">{missing.join(', ')}</p>\n                </div>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport { CoverageReport }\n"
    }
  ]
}