{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "nameplate",
  "title": "Nameplate",
  "description": "A character/player nameplate (DIM model): the emblem banner sized to its own aspect ratio, with the name + subtitle over the dark band and a small gold power readout tucked into the top-right corner.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/emblem-banner",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/nameplate.tsx",
      "content": "import type { NameplateProps as NameplateData } from \"@engram/core\";\nimport type { HTMLAttributes } from \"react\";\nimport { EmblemBanner } from \"./emblem-banner.js\";\n\nexport interface NameplateProps\n  extends NameplateData,\n    Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  /** Pixel height. */\n  height?: number;\n}\n\n// Bungie emblem banner (secondarySpecial) is 474×96 — the tile follows its\n// aspect ratio so the outline hugs the banner art (DIM's $emblem model).\nconst BANNER_RATIO = 474 / 96;\n\n/**\n * A character/player nameplate (DIM model): the emblem banner sized to its own\n * aspect ratio, with the name + subtitle over the dark band and a small gold\n * power readout tucked into the top-right corner. Sizes scale with `height`.\n */\nexport function Nameplate({\n  name,\n  emblem,\n  class: guardianClass,\n  subtitle,\n  title,\n  power,\n  height = 84,\n  className,\n  style,\n  ...props\n}: NameplateProps) {\n  const nameFont = Math.round(height * 0.31);\n  const subFont = Math.max(10, Math.round(height * 0.143));\n  const powerFont = Math.round(height * 0.21);\n  const pico = Math.round(powerFont * 0.72);\n  // Natural width from the banner's aspect ratio (474×96) at this height; the\n  // plate fills its container up to this, so it never overflows a narrow column.\n  const maxWidth = Math.round(height * BANNER_RATIO);\n  // Inset the text past the emblem device on the left (it scales with height).\n  const textInset = Math.round(height * 1.1);\n  const sub = subtitle ?? guardianClass;\n  return (\n    <EmblemBanner\n      emblem={emblem}\n      height={height}\n      className={className}\n      style={{ width: \"100%\", maxWidth, ...style }}\n      {...props}\n    >\n      <div\n        className=\"relative flex h-full w-full flex-col justify-center pr-16\"\n        style={{ paddingLeft: textInset }}\n      >\n        <div\n          className=\"min-w-0 truncate font-engram-display font-bold text-white leading-none tracking-[0.02em] [text-shadow:0_1px_3px_rgba(0,0,0,0.85)]\"\n          style={{ fontSize: nameFont }}\n        >\n          {name}\n        </div>\n        {title || sub ? (\n          <div\n            className=\"mt-1.5 flex items-center gap-1.5 [text-shadow:0_1px_2px_rgba(0,0,0,0.85)]\"\n            style={{ fontSize: subFont }}\n          >\n            {title ? (\n              <span className=\"truncate font-engram-display font-semibold text-[#f5dc56]\">\n                {title}\n              </span>\n            ) : null}\n            {title && sub ? (\n              <span className=\"text-white/40\" aria-hidden>\n                ·\n              </span>\n            ) : null}\n            {sub ? <span className=\"truncate text-white/80\">{sub}</span> : null}\n          </div>\n        ) : null}\n        {power != null ? (\n          <div className=\"absolute top-1.5 right-3 flex items-center gap-1 text-[#f5dc56]\">\n            <svg\n              width={pico}\n              height={pico}\n              viewBox=\"0 0 32 32\"\n              fill=\"currentColor\"\n              role=\"img\"\n              aria-label=\"Power\"\n              className=\"[filter:drop-shadow(0_1px_2px_rgba(0,0,0,0.8))]\"\n            >\n              <path d=\"M22.962 8.863c-2.628-2.576-4.988-5.407-7.045-8.458l-0.123-0.193c-2.234 3.193-4.556 5.993-7.083 8.592l0.015-0.016c-2.645 2.742-5.496 5.245-8.542 7.499l-0.184 0.13c3.341 2.271 6.262 4.682 8.943 7.335l-0.005-0.005c2.459 2.429 4.71 5.055 6.731 7.858l0.125 0.182c4.324-6.341 9.724-11.606 15.986-15.649l0.219-0.133c-3.401-2.168-6.359-4.524-9.048-7.153l0.010 0.010zM18.761 18.998c-1.036 1.024-1.971 2.145-2.792 3.35l-0.050 0.078c-0.884-1.215-1.8-2.285-2.793-3.279l0 0c-1.090-1.075-2.28-2.055-3.552-2.923l-0.088-0.057c1.326-0.969 2.495-1.988 3.571-3.097l0.007-0.007c1.010-1.051 1.947-2.191 2.794-3.399l0.061-0.092c0.882 1.32 1.842 2.471 2.912 3.51l0.005 0.005c1.089 1.072 2.293 2.034 3.589 2.864l0.088 0.053c-1.412 0.905-2.641 1.891-3.754 2.994l0.002-0.002z\" />\n            </svg>\n            <b\n              className=\"font-engram-display font-bold leading-none tabular-nums [text-shadow:0_1px_3px_rgba(0,0,0,0.85)]\"\n              style={{ fontSize: powerFont }}\n            >\n              {power}\n            </b>\n          </div>\n        ) : null}\n      </div>\n    </EmblemBanner>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/nameplate.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": [
    "nameplate"
  ],
  "type": "registry:component"
}