{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-tile",
  "title": "Item tile",
  "description": "A full item tile: the layered ItemImage with a bottom element+power foot, and the signature Destiny white outline on hover.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/element-icon",
    "@engram/item-image",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/item-tile.tsx",
      "content": "import type { ItemTileProps as ItemTileData } from \"@engram/core\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { ElementIcon } from \"./element-icon.js\";\nimport { ItemImage } from \"./item-image.js\";\n\nexport interface ItemTileProps\n  extends ItemTileData,\n    Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  /** Pixel size (square). */\n  size?: number;\n  /** Status badge composited into the top-left corner (e.g. a tag dot). */\n  topLeft?: ReactNode;\n  /** Status badge in the top-right corner (e.g. lock / tracked / \"new\"). */\n  topRight?: ReactNode;\n  /** Status badge in the bottom-left corner (the foot holds element+power). */\n  bottomLeft?: ReactNode;\n  /** Completion progress 0–1 — a thin bar pinned across the bottom edge. */\n  progress?: number;\n  /** Color for the progress bar fill. Defaults to the accent token. */\n  progressColor?: string;\n}\n\n/**\n * A full item tile: the layered {@link ItemImage} with a bottom element+power\n * foot, and the signature Destiny white outline on hover. Corner slots\n * (`topLeft`/`topRight`/`bottomLeft`) and a `progress` bar let consumers\n * composite status badges (tag/lock/new/tracked/objective progress).\n */\nexport function ItemTile({\n  icon,\n  name,\n  rarity,\n  watermark,\n  tier,\n  intrinsicIcon,\n  masterwork,\n  crafted,\n  deepsight,\n  power,\n  element,\n  // ammo is part of the data contract but lives in the popup, not on the tile\n  ammo: _ammo,\n  size = 48,\n  topLeft,\n  topRight,\n  bottomLeft,\n  progress,\n  progressColor = \"var(--engram-accent)\",\n  className,\n  ...props\n}: ItemTileProps) {\n  // Foot proportions matched to Starside's tile (~0.15–0.18 of the square), so\n  // the right-aligned element + power never crowd the left tier bracket.\n  const elementSize = Math.round(size * 0.18);\n  const powerSize = Math.round(size * 0.16);\n  return (\n    <div\n      className={cn(\n        \"relative inline-block outline-2 outline-white/0 outline-offset-0 transition-[outline-color] hover:z-10 hover:outline-white\",\n        className,\n      )}\n      style={{ width: size, height: size }}\n      title={name}\n      {...props}\n    >\n      <ItemImage\n        icon={icon}\n        rarity={rarity}\n        watermark={watermark}\n        tier={tier}\n        intrinsicIcon={intrinsicIcon}\n        masterwork={masterwork}\n        crafted={crafted}\n        deepsight={deepsight}\n        size={size}\n      />\n      {element || power != null ? (\n        <div className=\"absolute inset-x-0 bottom-0 flex items-center justify-end gap-1 px-1.5 pt-2 pb-0.5\">\n          {element ? (\n            <ElementIcon element={element} size={elementSize} />\n          ) : null}\n          {power != null ? (\n            <span\n              className=\"font-engram-display font-bold text-white leading-none tabular-nums [text-shadow:0_1px_2px_#000]\"\n              style={{ fontSize: powerSize }}\n            >\n              {power}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {topLeft ? (\n        <div className=\"absolute top-0 left-0 leading-none\">{topLeft}</div>\n      ) : null}\n      {topRight ? (\n        <div className=\"absolute top-0 right-0 leading-none\">{topRight}</div>\n      ) : null}\n      {bottomLeft ? (\n        <div className=\"absolute bottom-0 left-0 leading-none\">\n          {bottomLeft}\n        </div>\n      ) : null}\n      {progress != null ? (\n        <div\n          className=\"absolute inset-x-0 bottom-0 h-[3px] bg-black/40\"\n          aria-hidden\n        >\n          <div\n            className=\"h-full\"\n            style={{\n              width: `${Math.max(0, Math.min(1, progress)) * 100}%`,\n              background: progressColor,\n            }}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/item-tile.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": [
    "item"
  ],
  "type": "registry:component"
}