{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tier-watermark",
  "title": "Tier watermark",
  "description": "The season/tier corner assembly shared by the item tile and the inspect popup header: a soft scrim, the season crest, and a colored diamond per gear tier — the diamonds and gradient are drawn in CSS (no baked-in Bungie asset margins), so the whole stack aligns precisely.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/bungie-image",
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/tier-watermark.tsx",
      "content": "import type { ImageRef } from \"@engram/core\";\nimport { cn } from \"../lib/cn.js\";\nimport { BungieImage } from \"./bungie-image.js\";\n\nconst MAX_TIER = 5;\n// Gear-tier diamond color: tier 5 is gold; tiers 2–4 are a light blue/purple.\nconst TIER_TOP_COLOR = \"var(--engram-gold)\";\nconst TIER_LOW_COLOR = \"#d8dcf2\";\n\nexport interface TierWatermarkProps {\n  /** Clean season glyph (`DestinyIconDefinition.secondaryBackground`). */\n  seasonIcon?: ImageRef;\n  /** Gear tier (1–5). Drawn as that many diamonds — gold at tier 5, light\n   *  blue/purple below; tier 1 (and untiered) shows none. */\n  tier?: number;\n  /** Corner the crest + diamonds sit in. Default top-left. */\n  corner?: \"top-left\" | \"top-right\";\n  /** Season crest width, px. */\n  glyphSize?: number;\n  /** Diamond edge length, px. */\n  diamondSize?: number;\n  /** Width of the top-to-bottom scrim strip down the crest's column, px. */\n  scrimWidth?: number;\n  /** Gap between the crest and the diamonds, px. */\n  crestGap?: number;\n  /** Gap between adjacent diamonds, px. Scaled down with the tile so a full\n   *  5-diamond stack never runs off the bottom edge on small tiles. */\n  diamondGap?: number;\n  className?: string;\n}\n\n/**\n * The season/tier corner assembly shared by the item tile and the inspect popup\n * header: a soft scrim, the season crest, and a colored diamond per gear tier —\n * the diamonds and gradient are drawn in CSS (no baked-in Bungie asset margins),\n * so the whole stack aligns precisely. Fills its positioned parent.\n */\nexport function TierWatermark({\n  seasonIcon,\n  tier = 0,\n  corner = \"top-left\",\n  glyphSize = 16,\n  diamondSize = 5,\n  scrimWidth = 32,\n  crestGap = 3,\n  diamondGap = 4,\n  className,\n}: TierWatermarkProps) {\n  const right = corner === \"top-right\";\n  // Diamond count = gear tier (tier 5 → 5); tier 1 and untiered show none.\n  const t = Math.round(tier);\n  const count = t <= 1 ? 0 : Math.min(t, MAX_TIER);\n  const diamondColor = t >= MAX_TIER ? TIER_TOP_COLOR : TIER_LOW_COLOR;\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className,\n      )}\n      aria-hidden\n    >\n      {/* a corner strip — a soft top-to-bottom scrim with the season crest\n          pinned to the top and the gear-tier diamonds a fixed gap below */}\n      <div\n        className={cn(\n          \"absolute inset-y-0 flex flex-col items-center pt-[2px]\",\n          right ? \"right-0\" : \"left-0\",\n        )}\n        style={{\n          width: scrimWidth,\n          gap: crestGap,\n          background:\n            \"linear-gradient(to bottom, rgba(8,9,11,0.42), transparent)\",\n        }}\n      >\n        {seasonIcon ? (\n          <BungieImage\n            src={seasonIcon}\n            className=\"block\"\n            style={{ width: glyphSize }}\n          />\n        ) : null}\n        {count > 0 ? (\n          <div\n            className=\"flex flex-col items-center\"\n            style={{ gap: diamondGap }}\n          >\n            {Array.from({ length: count }, (_, i) => (\n              <span\n                // biome-ignore lint/suspicious/noArrayIndexKey: fixed static pips\n                key={i}\n                className=\"rotate-45\"\n                style={{\n                  width: diamondSize,\n                  height: diamondSize,\n                  borderRadius: diamondSize * 0.14,\n                  background: diamondColor,\n                }}\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/tier-watermark.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"
}