{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gto-strategy-bar",
  "title": "GTO strategy bar",
  "description": "A solver node's action mix for one hand as a stacked bar with a legend, in the trainer's action colors.",
  "registryDependencies": [
    "https://www.pokerstudy.ai/r/trainer-types.json",
    "https://www.pokerstudy.ai/r/trainer-theme.json"
  ],
  "files": [
    {
      "path": "src/components/trainer/gto-strategy-bar.tsx",
      "content": "\"use client\";\n\nimport type { NodeAction } from \"@/lib/trainer/types\";\n\nimport { actionColor } from \"./theme\";\n\n/**\n * The solver's mix at a node as a single stacked bar plus a legend — the same\n * action colors the strategy grid uses, so a drill's feedback and a solve read\n * alike. The action the hero actually chose is outlined.\n */\nexport function GtoStrategyBar({\n  strategy,\n  actions,\n  highlightAction,\n}: {\n  strategy: Record<string, number>;\n  actions: NodeAction[];\n  highlightAction?: string | null;\n}) {\n  const entries = actions\n    .map((a) => ({ action: a.action, kind: a.kind, freq: strategy[a.action] ?? 0 }))\n    .filter((e) => e.freq > 0);\n  const total = entries.reduce((s, e) => s + e.freq, 0);\n\n  if (total === 0) {\n    return <div className=\"h-5 w-full rounded bg-secondary\" />;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"flex h-5 w-full overflow-hidden rounded bg-secondary\">\n        {entries.map((e) => (\n          <div\n            key={e.action}\n            style={{\n              flexGrow: e.freq,\n              backgroundColor: actionColor(e.kind, actionDisplayLabel(e.action, e.kind)),\n            }}\n            className={highlightAction === e.action ? \"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        {entries.map((e) => (\n          <span key={e.action} className=\"flex items-center gap-1.5 text-xs\">\n            <span\n              aria-hidden\n              className=\"size-2.5 rounded-[2px]\"\n              style={{\n                backgroundColor: actionColor(e.kind, actionDisplayLabel(e.action, e.kind)),\n              }}\n            />\n            <span className=\"font-semibold text-foreground\">\n              {Math.round((e.freq / total) * 100)}%\n            </span>\n            <span className=\"text-muted-foreground\">{actionDisplayLabel(e.action, e.kind)}</span>\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction actionDisplayLabel(action: string, kind: NodeAction[\"kind\"]): string {\n  switch (kind) {\n    case \"fold\":\n      return \"Fold\";\n    case \"call\":\n      return \"Call\";\n    case \"allin\":\n      return \"All-in\";\n    case \"raise\":\n      // `action` is the bet size (e.g. \"60%\" of pot); prefix it so the size\n      // reads as an action rather than another frequency.\n      return `Raise ${action}`;\n    default:\n      return action;\n  }\n}\n",
      "type": "registry:component",
      "target": "components/trainer/gto-strategy-bar.tsx"
    }
  ],
  "type": "registry:component"
}