{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-popup",
  "title": "Stat popup",
  "description": "The character-stat inspect tooltip — the in-game flyout for the six stats (Weapons/Health/Class/Grenade/Super/Melee): a black header band (stat glyph, large name, \"Character Stat\" caption), the stat's description, labeled effect readouts (\"Health Per Orb\" / \"+62.3\"), the gold \"Enhanced Benefit\" section that unlocks above 100, and a value/max progress footer with a threshold tick at 100.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/bungie-image",
    "@engram/cn",
    "@engram/panel",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/stat-popup.tsx",
      "content": "import type { StatPopupProps as StatData } from \"@engram/core\";\nimport { cn } from \"../lib/cn.js\";\nimport { BungieImage } from \"./bungie-image.js\";\nimport { Panel } from \"./panel.js\";\n\nexport interface StatPopupProps extends StatData {\n  className?: string;\n}\n\n/** One labeled effect readout — \"Health Per Orb\" / \"+62.3\". */\nfunction ReadoutRow({ row }: { row: { label: string; value: string } }) {\n  return (\n    <div className=\"flex items-baseline justify-between gap-3 text-[13px]\">\n      <span className=\"text-engram-fg/90\">{row.label}</span>\n      <span className=\"font-engram-display font-semibold text-engram-fg tabular-nums\">\n        {row.value}\n      </span>\n    </div>\n  );\n}\n\n/**\n * The character-stat inspect tooltip — the in-game flyout for the six stats\n * (Weapons/Health/Class/Grenade/Super/Melee): a black header band (stat glyph,\n * large name, \"Character Stat\" caption), the stat's description, labeled effect\n * readouts (\"Health Per Orb\" / \"+62.3\"), the gold \"Enhanced Benefit\" section\n * that unlocks above 100, and a value/max progress footer with a threshold tick\n * at 100. Presentational only — pairs with {@link ItemHoverCard} exactly like\n * `PlugPopup` does.\n */\nexport function StatPopup({\n  name,\n  subtitle = \"Character Stat\",\n  icon,\n  description,\n  rows,\n  enhanced,\n  value,\n  max = 200,\n  className,\n}: StatPopupProps) {\n  const fill = Math.max(0, Math.min(1, value / max));\n  return (\n    <Panel\n      tone=\"glass\"\n      className={cn(\n        \"flex w-[320px] max-w-full flex-col border border-engram-border-strong\",\n        className,\n      )}\n    >\n      <header className=\"flex items-center gap-3 bg-black/85 px-4 py-3 text-white\">\n        {icon ? (\n          <BungieImage\n            src={icon}\n            alt=\"\"\n            aria-hidden\n            className=\"size-10 shrink-0 object-contain\"\n          />\n        ) : null}\n        <div className=\"flex min-w-0 flex-col\">\n          <h3 className=\"break-words font-engram-display font-bold text-2xl uppercase leading-[1.04] tracking-tight\">\n            {name}\n          </h3>\n          <p className=\"mt-0.5 text-[13px] opacity-80\">{subtitle}</p>\n        </div>\n      </header>\n\n      <div className=\"flex flex-col px-4 py-3.5\">\n        {description ? (\n          <p className=\"text-[13px] text-engram-fg/85 leading-relaxed\">\n            {description}\n          </p>\n        ) : null}\n\n        {rows && rows.length > 0 ? (\n          <div className={cn(\"flex flex-col gap-1.5\", description && \"mt-3\")}>\n            {rows.map((row) => (\n              <ReadoutRow key={row.label} row={row} />\n            ))}\n          </div>\n        ) : null}\n\n        {enhanced ? (\n          <div className=\"mt-3.5 flex flex-col gap-2 border-engram-border border-t pt-3\">\n            <h4 className=\"font-engram-display font-semibold text-[13px] text-engram-gold uppercase tracking-[0.08em]\">\n              {enhanced.heading ?? \"Enhanced Benefit\"}\n            </h4>\n            <p className=\"text-[13px] text-engram-muted leading-relaxed\">\n              {enhanced.description}\n            </p>\n            {enhanced.rows && enhanced.rows.length > 0 ? (\n              // The stat is above 100 — the benefit is live, so show its\n              // readouts instead of the activation line.\n              <div className=\"flex flex-col gap-1.5\">\n                {enhanced.rows.map((row) => (\n                  <ReadoutRow key={row.label} row={row} />\n                ))}\n              </div>\n            ) : enhanced.activation ? (\n              <p className=\"text-[13px] text-engram-fg/85\">\n                {enhanced.activation}\n              </p>\n            ) : null}\n          </div>\n        ) : null}\n\n        <div\n          className=\"relative mt-3.5 flex h-8 items-center overflow-hidden bg-black/45\"\n          role=\"progressbar\"\n          aria-label={name}\n          aria-valuenow={value}\n          aria-valuemin={0}\n          aria-valuemax={max}\n        >\n          <span\n            aria-hidden\n            className=\"absolute inset-y-0 left-0 bg-white/80\"\n            style={{ width: `${fill * 100}%` }}\n          />\n          {max > 100 ? (\n            // The enhanced-benefit threshold tick at stat level 100.\n            <span\n              aria-hidden\n              className=\"absolute inset-y-0 w-0.5 bg-white\"\n              style={{ left: `${(100 / max) * 100}%` }}\n            />\n          ) : null}\n          <span className=\"relative ml-auto pr-2.5 font-engram-display font-bold text-engram-fg text-lg tabular-nums\">\n            {value}/{max}\n          </span>\n        </div>\n      </div>\n    </Panel>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/stat-popup.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": [
    "stats"
  ],
  "type": "registry:component"
}