{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loadout-card",
  "title": "Loadout card",
  "description": "A compact build summary: the subclass diamond + name, the equipped item tiles, an optional mod row, the stat tiers, and an action footer.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/character-stats",
    "@engram/cn",
    "@engram/item-tile",
    "@engram/plug",
    "@engram/subclass-diamond",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/loadout-card.tsx",
      "content": "import type {\n  ElementType,\n  ImageRef,\n  ItemTileProps as ItemTileData,\n  PlugProps,\n} from \"@engram/core\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { type CharacterStatItem, CharacterStats } from \"./character-stats.js\";\nimport { ItemTile } from \"./item-tile.js\";\nimport { Plug } from \"./plug.js\";\nimport { SubclassDiamond } from \"./subclass-diamond.js\";\n\nexport interface LoadoutSubclass {\n  icon?: ImageRef;\n  element?: ElementType;\n  super?: ImageRef;\n}\n\nexport interface LoadoutCardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  /** Build name / title. */\n  name?: ReactNode;\n  /** Subclass shown as a diamond beside the name. */\n  subclass?: LoadoutSubclass;\n  /** Equipped weapons + armor as tiles. */\n  items?: ItemTileData[];\n  /** Mod icons shown in a compact row. */\n  mods?: PlugProps[];\n  /** Stat block (tiers). */\n  stats?: CharacterStatItem[];\n  /** Action row (Equip / Share / Edit). */\n  footer?: ReactNode;\n}\n\n/**\n * A compact build summary: the subclass diamond + name, the equipped item tiles,\n * an optional mod row, the stat tiers, and an action footer. Composes the Phase 2\n * stat block with the Phase 3 subclass/slot atoms — the shareable loadout unit;\n * the consumer wires the optimizer/equip actions.\n */\nexport function LoadoutCard({\n  name,\n  subclass,\n  items,\n  mods,\n  stats,\n  footer,\n  className,\n  ...props\n}: LoadoutCardProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-engram-border bg-engram-surface\",\n        className,\n      )}\n      {...props}\n    >\n      {(subclass || name) != null ? (\n        <div className=\"flex items-center gap-3 border-engram-border border-b px-3 py-2.5\">\n          {subclass ? (\n            <SubclassDiamond\n              icon={subclass.icon}\n              element={subclass.element}\n              super={subclass.super}\n              size={40}\n            />\n          ) : null}\n          {name != null ? (\n            <span className=\"font-engram-display font-bold text-engram-fg uppercase tracking-engram-label\">\n              {name}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      <div className=\"flex flex-col gap-3 p-3\">\n        {items && items.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {items.map((it) => (\n              <ItemTile key={it.name} {...it} size={44} />\n            ))}\n          </div>\n        ) : null}\n\n        {mods && mods.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1\">\n            {mods.map((m) => (\n              <Plug key={m.hash} {...m} kind=\"mod\" size={28} />\n            ))}\n          </div>\n        ) : null}\n\n        {stats && stats.length > 0 ? <CharacterStats stats={stats} /> : 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-3 py-2.5\">\n          {footer}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/loadout-card.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": [
    "loadout"
  ],
  "type": "registry:component"
}