{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "title-bar",
  "title": "Title bar",
  "description": "The FUI title bar: a leading flag glyph, an uppercase tracked title, and an optional right-aligned count, on a subtle left-lit gradient with a fading underline — Destiny's in-game panel header.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/title-bar.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface TitleBarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  /** Right-aligned count / hint (e.g. \"04 / 10\"). */\n  count?: ReactNode;\n  /** Leading flag glyph. Pass `null` to hide it. */\n  flag?: ReactNode;\n}\n\n/**\n * The FUI title bar: a leading flag glyph, an uppercase tracked title, and an\n * optional right-aligned count, on a subtle left-lit gradient with a fading\n * underline — Destiny's in-game panel header. Layout-neutral (no margins).\n */\nexport function TitleBar({\n  title,\n  count,\n  flag = \"▸\",\n  className,\n  style,\n  ...props\n}: TitleBarProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center gap-2.5 border-engram-border border-b px-3.5 py-2\",\n        className,\n      )}\n      style={{\n        background:\n          \"linear-gradient(90deg, rgba(255,255,255,0.05), transparent 70%)\",\n        ...style,\n      }}\n      {...props}\n    >\n      {/* The Destiny section rule: a short bright gold cap under the title that\n          fades into a faint hairline. */}\n      <span\n        aria-hidden\n        className=\"absolute inset-x-0 -bottom-px h-px\"\n        style={{\n          background:\n            \"linear-gradient(90deg, var(--engram-gold) 0%, color-mix(in oklch, var(--engram-gold) 45%, transparent) 10%, color-mix(in oklch, var(--engram-fg) 16%, transparent) 22%, transparent 72%)\",\n        }}\n      />\n      {flag != null ? (\n        <span className=\"text-engram-accent-2\">{flag}</span>\n      ) : null}\n      <span className=\"font-engram-display font-bold text-[13px] text-engram-fg uppercase tracking-engram-label\">\n        {title}\n      </span>\n      {count != null ? (\n        <span className=\"ml-auto font-engram-display font-semibold text-[13px] text-engram-muted tabular-nums tracking-[0.08em]\">\n          {count}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/title-bar.tsx"
    }
  ],
  "meta": {
    "level": "atom"
  },
  "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": [
    "layout"
  ],
  "type": "registry:component"
}