{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-image",
  "title": "Item image",
  "description": "The layered Destiny item square: rarity-colored base, the item art, the season/tier watermark assembly (TierWatermark), the intrinsic glyph, then state chrome (masterwork frame + glow, crafted marker).",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/bungie-image",
    "@engram/cn",
    "@engram/tier-watermark",
    "@engram/token-utils",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/item-image.tsx",
      "content": "import type { ImageRef, Rarity } from \"@engram/core\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { rarityVar } from \"../lib/tokens.js\";\nimport { BungieImage } from \"./bungie-image.js\";\nimport { TierWatermark } from \"./tier-watermark.js\";\n\nexport interface ItemImageProps extends HTMLAttributes<HTMLDivElement> {\n  icon: ImageRef;\n  rarity: Rarity;\n  /** Clean season glyph (secondaryBackground) for the tier-watermark assembly. */\n  watermark?: ImageRef;\n  /** Gear tier (1–5) — drives the diamond count. */\n  tier?: number;\n  /** Intrinsic glyph — weapon frame or armor archetype — shown top-right. */\n  intrinsicIcon?: ImageRef;\n  masterwork?: boolean;\n  /** A crafted (\"Shaped\") weapon — the red crafted glyph, bottom-left. */\n  crafted?: boolean;\n  /** Deepsight Resonance — the red border + rising glow. */\n  deepsight?: boolean;\n  /** Pixel size (square). */\n  size?: number;\n}\n\n// Bungie's crafted (\"Shaped weapon\") chrome — full-tile transparent PNGs. The\n// background is a red vertical gradient rising from the bottom-left; the overlay\n// is the red crafted glyph that sits on top of it. Composited over the art at\n// full size, exactly as the game does.\nconst CRAFTED_BACKGROUND =\n  \"/img/destiny_content/items/crafted-icon-background.png\";\nconst CRAFTED_OVERLAY = \"/img/destiny_content/items/crafted-icon-overlay.png\";\n\n/**\n * The layered Destiny item square: rarity-colored base, the item art, the\n * season/tier watermark assembly ({@link TierWatermark}), the intrinsic glyph,\n * then state chrome (masterwork frame + glow, crafted marker).\n */\nexport function ItemImage({\n  icon,\n  rarity,\n  watermark,\n  tier,\n  intrinsicIcon,\n  masterwork,\n  crafted,\n  deepsight,\n  size = 48,\n  className,\n  style,\n  ...props\n}: ItemImageProps) {\n  return (\n    <div\n      className={cn(\"relative overflow-hidden\", className)}\n      style={{\n        width: size,\n        height: size,\n        background: rarityVar(rarity),\n        // Masterwork: the iconic bright gold frame + outer glow (in-game, a\n        // masterworked item's tile glows gold). Drawn as box-shadow OUTSIDE the\n        // art so it never eats the content; always present (transparent when not\n        // masterworked) so both states stay the exact same size.\n        boxShadow: masterwork\n          ? \"0 0 0 1.5px var(--engram-masterwork), 0 0 9px color-mix(in oklch, var(--engram-masterwork) 50%, transparent)\"\n          : \"0 0 0 1px transparent\",\n        ...style,\n      }}\n      {...props}\n    >\n      {/* base item art */}\n      <BungieImage\n        src={icon}\n        className=\"absolute inset-0 h-full w-full object-cover\"\n      />\n      {/* scrim + season crest + gear-tier diamonds, top-left corner. Gaps and\n          diamond size scale with the tile so a full tier-5 stack always fits\n          inside the square (it would otherwise spill past the bottom edge on\n          small tiles). */}\n      <TierWatermark\n        seasonIcon={watermark}\n        tier={tier}\n        glyphSize={Math.round(size * 0.22)}\n        diamondSize={Math.max(3, Math.round(size * 0.085))}\n        scrimWidth={Math.round(size * 0.3)}\n        crestGap={Math.max(1, Math.round(size * 0.04))}\n        diamondGap={Math.max(1, Math.round(size * 0.035))}\n      />\n      {/* intrinsic glyph (weapon frame / armor archetype), top-right corner */}\n      {intrinsicIcon ? (\n        <BungieImage\n          src={intrinsicIcon}\n          aria-hidden\n          className=\"absolute top-[2px] right-[2px] w-[23%] drop-shadow-[0_1px_2px_rgba(0,0,0,0.85)]\"\n        />\n      ) : null}\n      {/* masterwork: the gold sheen — a rising glow from the base plus a faint\n          full-tile gold wash (the in-game masterwork shimmer; the gold frame is\n          the root box-shadow). */}\n      {masterwork ? (\n        <span\n          aria-hidden\n          className=\"absolute inset-0\"\n          style={{\n            background:\n              \"radial-gradient(58% 46% at 50% 112%, color-mix(in oklch, var(--engram-masterwork) 60%, transparent), transparent 72%), linear-gradient(0deg, color-mix(in oklch, var(--engram-masterwork) 14%, transparent), transparent 55%)\",\n          }}\n        />\n      ) : null}\n      {/* deepsight resonance: the red border + rising red glow (extractable\n          red-border weapons), drawn in CSS so it needs no overlay asset. */}\n      {deepsight ? (\n        <span\n          aria-hidden\n          className=\"absolute inset-0\"\n          style={{\n            boxShadow:\n              \"inset 0 0 0 1.5px var(--engram-deepsight), inset 0 0 10px color-mix(in oklch, var(--engram-deepsight) 28%, transparent)\",\n            background:\n              \"radial-gradient(58% 44% at 50% 112%, color-mix(in oklch, var(--engram-deepsight) 45%, transparent), transparent 72%)\",\n          }}\n        />\n      ) : null}\n      {/* crafted (\"Shaped\") weapon: Bungie's crafted chrome — the red gradient\n          background then the crafted glyph on top, bottom-left. A marker, not a\n          border. Lifted above the tile's element/power foot gradient (z-10) so\n          the dark scrim doesn't wash it out — the glyph (bottom-left) and the\n          power readout (bottom-right) don't overlap. */}\n      {crafted ? (\n        <>\n          <BungieImage\n            src={{ path: CRAFTED_BACKGROUND }}\n            aria-hidden\n            className=\"absolute inset-0 z-10 h-full w-full object-fill\"\n          />\n          <BungieImage\n            src={{ path: CRAFTED_OVERLAY, alt: \"Crafted\" }}\n            className=\"absolute inset-0 z-10 h-full w-full object-fill\"\n          />\n        </>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/item-image.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"
}