{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compare-cell",
  "title": "Compare cell",
  "description": "A stat cell for comparison tables: the value with a thin bar, colored by its `rank` (best = ok/green, worst = bad/red, mid = neutral).",
  "registryDependencies": [
    "@engram/cn",
    "@engram/segmented-bar",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/compare-cell.tsx",
      "content": "import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { SegmentedBar } from \"./segmented-bar.js\";\n\nexport type CompareRank = \"best\" | \"worst\" | \"mid\";\n\nexport interface CompareCellProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  value: number;\n  /** Bar maximum (the stat's ceiling). Default 100. */\n  max?: number;\n  /** Standing among the compared rows — colors the value + bar. */\n  rank?: CompareRank;\n  /** Hide the bar and show just the colored number. */\n  barless?: boolean;\n}\n\nconst RANK_COLOR: Record<CompareRank, string> = {\n  best: \"var(--engram-ok)\",\n  worst: \"var(--engram-bad)\",\n  mid: \"color-mix(in srgb, var(--engram-fg) 70%, transparent)\",\n};\n\n/**\n * A stat cell for comparison tables: the value with a thin bar, colored by its\n * `rank` (best = ok/green, worst = bad/red, mid = neutral). Drop into a\n * {@link DataTable} `renderCell` to highlight the winner in each stat column.\n */\nexport function CompareCell({\n  value,\n  max = 100,\n  rank = \"mid\",\n  barless = false,\n  className,\n  ...props\n}: CompareCellProps) {\n  const color = RANK_COLOR[rank];\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n      <span\n        className=\"w-8 shrink-0 text-right font-engram-display font-bold tabular-nums\"\n        style={{ color }}\n      >\n        {value}\n      </span>\n      {barless ? null : (\n        <SegmentedBar\n          value={value}\n          max={max}\n          color={color}\n          glow={false}\n          className=\"h-1.5 flex-1\"\n        />\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/compare-cell.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "table"
  ],
  "type": "registry:component"
}