{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-popup-header",
  "title": "Item popup header",
  "description": "The rarity-gradient header band: name on top, type + rarity on the lower line, and a top-right tier strip (TierWatermark) with the season glyph flush in the corner — the same assembly the item tile composites.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/tier-watermark",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/item-popup-header.tsx",
      "content": "import type { ImageRef, Rarity } from \"@engram/core\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { TierWatermark } from \"./tier-watermark.js\";\n\ninterface Band {\n  backgroundImage: string;\n  color: string;\n}\n\n// The signature Destiny tooltip header band: a near-flat rarity fill with a\n// subtle top sheen (the in-game header is a solid rarity color, not a diagonal\n// gradient). Legendary = purple, exotic = gold, others use their rarity color.\n// Text is white on every rarity; the bright top edge is reserved for masterworks.\nfunction band(rarity: Rarity): Band {\n  const c = `var(--engram-${rarity})`;\n  return {\n    backgroundImage: `linear-gradient(180deg, color-mix(in srgb, ${c} 78%, #fff 14%) 0%, ${c} 42%, color-mix(in srgb, ${c} 82%, #000 18%) 100%)`,\n    color: \"#ffffff\",\n  };\n}\n\nexport interface ItemPopupHeaderProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"color\"> {\n  name: string;\n  typeName?: string;\n  rarity: Rarity;\n  /** Clean season crest shown top-right. */\n  seasonIcon?: ImageRef;\n  /** Gear tier (1–5) — rendered as diamonds top-right. */\n  tier?: number;\n  /** Masterworked — shows a bright gold top edge (same gold for all rarities). */\n  masterwork?: boolean;\n}\n\n/** The rarity-gradient header band: name on top, type + rarity on the lower\n *  line, and a top-right tier strip ({@link TierWatermark}) with the season\n *  glyph flush in the corner — the same assembly the item tile composites. */\nexport function ItemPopupHeader({\n  name,\n  typeName,\n  rarity,\n  seasonIcon,\n  tier,\n  masterwork,\n  className,\n  style,\n  ...props\n}: ItemPopupHeaderProps) {\n  const b = band(rarity);\n  const rarityLabel = rarity[0].toUpperCase() + rarity.slice(1);\n  return (\n    <header\n      className={cn(\n        \"relative flex flex-col justify-center overflow-hidden px-4 py-3 pr-10\",\n        className,\n      )}\n      style={{\n        backgroundImage: b.backgroundImage,\n        color: b.color,\n        // Bright gold top edge only for masterworked items (same gold regardless\n        // of rarity); otherwise no edge.\n        boxShadow: masterwork\n          ? \"inset 0 2px 0 var(--engram-masterwork)\"\n          : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      <TierWatermark\n        seasonIcon={seasonIcon}\n        tier={tier}\n        corner=\"top-right\"\n        glyphSize={18}\n        diamondSize={5}\n        scrimWidth={22}\n        crestGap={4}\n      />\n\n      <h3 className=\"break-words font-engram-display font-bold text-2xl uppercase leading-[1.04] tracking-tight\">\n        {name}\n      </h3>\n      <div className=\"mt-0.5 flex items-baseline justify-between gap-3\">\n        {typeName ? (\n          <p className=\"text-[13px] opacity-80\">{typeName}</p>\n        ) : (\n          <span />\n        )}\n        <span className=\"font-engram-display text-[13px] tracking-[0.02em] opacity-55\">\n          {rarityLabel}\n        </span>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/item-popup-header.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"
}