{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "perk-popup",
  "title": "Perk popup",
  "description": "The weapon-perk inspect flyout — the in-game trait tooltip, the weapon counterpart to ModPopup.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/panel",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/perk-popup.tsx",
      "content": "import type { PerkPopupProps as PerkData } from \"@engram/core\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { Panel } from \"./panel.js\";\n\nexport interface PerkPopupProps extends PerkData {\n  /** Action buttons (e.g. a Select button). */\n  footer?: ReactNode;\n  className?: string;\n}\n\nconst ENHANCED_GOLD = \"#f5c93f\";\n\n/** A small filled ▲ (CSS triangle) — the enhanced-trait marker. */\nfunction UpArrow({ size = 10, color }: { size?: number; color?: string }) {\n  return (\n    <span\n      aria-hidden\n      className=\"inline-block shrink-0\"\n      style={{\n        width: 0,\n        height: 0,\n        borderLeft: `${size / 2}px solid transparent`,\n        borderRight: `${size / 2}px solid transparent`,\n        borderBottom: `${size}px solid ${color ?? \"currentColor\"}`,\n      }}\n    />\n  );\n}\n\n/**\n * The weapon-perk inspect flyout — the in-game trait tooltip, the weapon\n * counterpart to {@link ModPopup}. A neutral header with the perk name and its\n * category (\"Trait\" / \"Enhanced Trait\" / \"Barrel\" …), the effect description,\n * and — for enhanced traits — a gold \"⬆ ENHANCEMENT\" block spelling out the\n * bonus. Presentational only; pairs with {@link ItemHoverCard} beside the item\n * popup like the other inspect popups.\n */\nexport function PerkPopup({\n  name,\n  subtitle,\n  enhanced,\n  description,\n  enhancement,\n  footer,\n  className,\n}: PerkPopupProps) {\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\n        className=\"flex flex-col justify-center px-4 py-3\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(180deg, var(--engram-raised-2) 0%, var(--engram-raised) 100%)\",\n        }}\n      >\n        <h3 className=\"break-words font-engram-display font-bold text-2xl text-engram-fg uppercase leading-[1.04] tracking-tight\">\n          {name}\n        </h3>\n        {subtitle ? (\n          <p className=\"mt-0.5 flex items-center gap-1 text-[13px] text-engram-muted\">\n            {enhanced ? <UpArrow size={9} color={ENHANCED_GOLD} /> : null}\n            {subtitle}\n          </p>\n        ) : null}\n      </header>\n\n      <div className=\"flex flex-col gap-3 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        {enhancement ? (\n          <div className=\"flex flex-col gap-1 border-engram-border border-t pt-3\">\n            <div\n              className=\"flex items-center gap-1.5 font-engram-display font-bold text-xs uppercase tracking-[0.08em]\"\n              style={{ color: ENHANCED_GOLD }}\n            >\n              <UpArrow size={11} />\n              Enhancement\n            </div>\n            <p className=\"text-[12.5px] text-engram-muted leading-relaxed\">\n              {enhancement}\n            </p>\n          </div>\n        ) : null}\n      </div>\n\n      {footer ? (\n        <div className=\"flex flex-wrap justify-end gap-2 border-engram-border border-t bg-white/[0.03] px-4 py-2.5\">\n          {footer}\n        </div>\n      ) : null}\n    </Panel>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/perk-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": [
    "socket"
  ],
  "type": "registry:component"
}