{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slot-row",
  "title": "Slot row",
  "description": "A fixed-count row of AbilitySlots — the aspect or fragment block of a subclass, where the subclass fixes how many slots exist and some may be empty.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/ability-slot",
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/slot-row.tsx",
      "content": "import type { PlugProps } from \"@engram/core\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { type AbilityKind, AbilitySlot } from \"./ability-slot.js\";\n\nexport interface SlotRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total slots to render (fixed by the subclass — e.g. 2 aspects, 4 fragments). */\n  count: number;\n  /** Filled slots; positions past the array render empty. */\n  slots?: (PlugProps | null | undefined)[];\n  /** What these slots hold. */\n  kind?: AbilityKind;\n  /** Pixel size per slot. */\n  size?: number;\n  /** Fired with the slot index when a slot is clicked. */\n  onPick?: (index: number) => void;\n  /** Inspect content for a filled slot (e.g. a {@link PlugPopup}), shown on\n   *  hover — wires each slot to an {@link ItemHoverCard}. */\n  popup?: (plug: PlugProps, index: number) => ReactNode;\n}\n\n/**\n * A fixed-count row of {@link AbilitySlot}s — the aspect or fragment block of a\n * subclass, where the subclass fixes how many slots exist and some may be empty.\n */\nexport function SlotRow({\n  count,\n  slots = [],\n  kind = \"fragment\",\n  size = 40,\n  onPick,\n  popup,\n  className,\n  ...props\n}: SlotRowProps) {\n  return (\n    <div className={cn(\"flex flex-wrap gap-1.5\", className)} {...props}>\n      {Array.from({ length: count }, (_, i) => {\n        const plug = slots[i] ?? undefined;\n        return (\n          <AbilitySlot\n            // fixed-count positional slots — index is the stable identity\n            // biome-ignore lint/suspicious/noArrayIndexKey: positional slots, index is the identity\n            key={i}\n            plug={plug}\n            kind={kind}\n            size={size}\n            onPick={onPick ? () => onPick(i) : undefined}\n            popup={plug && popup ? popup(plug, i) : undefined}\n          />\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/slot-row.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"
}