{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "emblem-banner",
  "title": "Emblem banner",
  "description": "The wide emblem banner (DIM model): the emblem's secondary banner art fills the tile (which Nameplate caps to the banner's aspect ratio) under a left→ right dark gradient so overlaid text stays legible. `children` render over the banner.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/emblem-banner.tsx",
      "content": "import { type EmblemRef, resolveImageRef } from \"@engram/core\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface EmblemBannerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  emblem: EmblemRef;\n  /** Pixel height. */\n  height?: number;\n}\n\n/**\n * The wide emblem banner (DIM model): the emblem's secondary banner art fills\n * the tile (which Nameplate caps to the banner's aspect ratio) under a left→\n * right dark gradient so overlaid text stays legible. `children` render over\n * the banner. Falls back to the square emblem icon.\n */\nexport function EmblemBanner({\n  emblem,\n  height = 84,\n  className,\n  style,\n  children,\n  ...props\n}: EmblemBannerProps) {\n  const bg = resolveImageRef(emblem.banner) ?? resolveImageRef(emblem.icon);\n  const overlay = resolveImageRef(emblem.overlay);\n  return (\n    <div\n      className={cn(\"relative overflow-hidden\", className)}\n      style={{\n        height,\n        backgroundColor: \"#0c0d10\",\n        backgroundImage: bg ? `url(\"${bg}\")` : undefined,\n        // Fill the tile edge-to-edge (Nameplate caps the width to the banner's\n        // aspect ratio, so this is at most a sub-pixel vertical crop, no gap).\n        backgroundSize: \"cover\",\n        backgroundPosition: \"left center\",\n        backgroundRepeat: \"no-repeat\",\n        ...style,\n      }}\n      {...props}\n    >\n      <span\n        aria-hidden\n        className=\"absolute inset-0\"\n        style={{\n          background:\n            \"linear-gradient(90deg, transparent 0 11%, rgba(6,8,11,0.5) 24%, rgba(6,8,11,0.3) 100%)\",\n        }}\n      />\n      {overlay ? (\n        <span\n          aria-hidden\n          className=\"absolute inset-0\"\n          style={{\n            backgroundImage: `url(\"${overlay}\")`,\n            // full height, preserve aspect ratio, anchored left\n            backgroundSize: \"auto 100%\",\n            backgroundPosition: \"left center\",\n            backgroundRepeat: \"no-repeat\",\n          }}\n        />\n      ) : null}\n      {children ? (\n        <div className=\"relative z-[1] flex h-full items-center\">\n          {children}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/emblem-banner.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"
}