{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "strategy-bar",
  "title": "Strategy bar",
  "description": "A solver mix as one stacked bar with a legend, outlining the action the player chose.",
  "files": [
    {
      "path": "src/components/pokerstudy/strategy-bar.tsx",
      "content": "export interface StrategyBarItem {\n  label: string;\n  /** Frequency in [0, 1]. Items need not sum to 1; the bar normalizes. */\n  freq: number;\n  color: string;\n  /** Optional detail after the label, e.g. an EV like \"+1.2bb\". */\n  detail?: string;\n}\n\n/**\n * A solver mix as one stacked bar plus a legend. `highlight` outlines the\n * action the player chose, so feedback reads as \"you vs the solver\".\n */\nexport function StrategyBar({\n  items,\n  highlight,\n  className = \"\",\n}: {\n  items: StrategyBarItem[];\n  highlight?: string | null;\n  className?: string;\n}) {\n  const shown = items.filter((i) => i.freq > 0);\n  const total = shown.reduce((s, i) => s + i.freq, 0);\n  const summary = shown.map((i) => `${i.label} ${Math.round((i.freq / (total || 1)) * 100)}%`).join(\", \");\n\n  if (total === 0) return <div className={`h-5 w-full rounded bg-secondary ${className}`} />;\n\n  return (\n    <div role=\"group\" aria-label={summary} className={`flex flex-col gap-2 ${className}`}>\n      <div className=\"flex h-5 w-full overflow-hidden rounded bg-secondary\">\n        {shown.map((i) => (\n          <div\n            key={i.label}\n            style={{ flexGrow: i.freq, backgroundColor: i.color }}\n            className={highlight === i.label ? \"ring-2 ring-inset ring-white\" : undefined}\n          />\n        ))}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n        {shown.map((i) => (\n          <span key={i.label} className=\"flex items-center gap-1.5 text-xs\">\n            <span aria-hidden className=\"size-2.5 rounded-[2px]\" style={{ backgroundColor: i.color }} />\n            <span className=\"font-semibold tabular-nums text-foreground\">\n              {Math.round((i.freq / total) * 100)}%\n            </span>\n            <span\n              className={\n                highlight === i.label\n                  ? \"font-semibold text-foreground underline underline-offset-2\"\n                  : \"text-muted-foreground\"\n              }\n            >\n              {i.label}\n            </span>\n            {i.detail ? <span className=\"font-mono tabular-nums text-muted-foreground\">{i.detail}</span> : null}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pokerstudy/strategy-bar.tsx"
    }
  ],
  "type": "registry:component"
}