{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-page-header",
  "title": "Status Page Header",
  "description": "Presentation-only header chrome (brand, nav, actions). Routing-agnostic — apps inject their own Link component via asChild",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/blocks/status-page-header.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * StatusPageHeader — presentation-only header chrome.\n *\n * Compose with `StatusPageHeaderContent`, `StatusPageHeaderBrand`,\n * `StatusPageHeaderNav` (+ `Item`), and `StatusPageHeaderActions`. Embed\n * gating, route-aware active state, mobile menu shell, brand link target,\n * and tRPC fetch all stay in the wrapping app.\n */\nexport function StatusPageHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      data-slot=\"status-page-header\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport function StatusPageHeaderContent({\n  className,\n  ...props\n}: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      data-slot=\"status-page-header-content\"\n      className={cn(\n        \"mx-auto flex max-w-2xl items-center justify-between gap-3 px-3 py-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * StatusPageHeaderBrand — left-side fixed-width slot. Pass the brand button\n * (with link target) as children.\n */\nexport function StatusPageHeaderBrand({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-page-header-brand\"\n      className={cn(\"flex w-[150px] shrink-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * StatusPageHeaderBrandButton — outlined size-8 icon button that hosts the\n * brand link. Pass the actual link element as children via `asChild`.\n */\nexport function StatusPageHeaderBrandButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"status-page-header-brand-button\"\n      variant=\"outline\"\n      size=\"icon\"\n      className={cn(\"size-8 overflow-hidden\", className)}\n      asChild\n      {...props}\n    />\n  );\n}\n\n/**\n * StatusPageHeaderBrandFallback — letter-from-title typography used when no\n * page icon is present. Renders the first character of up to two words,\n * uppercased.\n */\nexport function StatusPageHeaderBrandFallback({\n  title,\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { title?: string }) {\n  const initials =\n    (title ?? \"\")\n      .trim()\n      .split(/\\s+/)\n      .filter(Boolean)\n      .map((word) => word.charAt(0))\n      .slice(0, 2)\n      .join(\"\")\n      .toUpperCase() || \"?\";\n  return (\n    <div\n      data-slot=\"status-page-header-brand-fallback\"\n      className={cn(\n        \"flex size-8 items-center justify-center font-mono\",\n        className,\n      )}\n      {...props}\n    >\n      {initials}\n    </div>\n  );\n}\n\n/**\n * StatusPageHeaderNav — desktop nav list. Compose with\n * `StatusPageHeaderNavItem` children.\n */\nexport function StatusPageHeaderNav({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"status-page-header-nav\"\n      className={cn(\"flex flex-row gap-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * StatusPageHeaderNavItem — single nav entry. Pass the link element via\n * `asChild`; the block renders the Button chrome and active styling.\n */\nexport function StatusPageHeaderNavItem({\n  isActive,\n  className,\n  ...props\n}: React.ComponentProps<typeof Button> & { isActive?: boolean }) {\n  return (\n    <li data-slot=\"status-page-header-nav-item\">\n      <Button\n        data-slot=\"status-page-header-nav-item-button\"\n        data-active={isActive ? \"true\" : undefined}\n        variant={isActive ? \"secondary\" : \"ghost\"}\n        size=\"sm\"\n        asChild\n        className={cn(\n          \"border\",\n          isActive ? \"border-input\" : \"border-transparent\",\n          className,\n        )}\n        {...props}\n      />\n    </li>\n  );\n}\n\n/**\n * StatusPageHeaderActions — right-side fixed-width cluster (subscribe,\n * contact, mobile-menu trigger). Pass actions as children; the block is\n * layout-only.\n */\nexport function StatusPageHeaderActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-page-header-actions\"\n      className={cn(\n        \"flex min-w-[150px] items-center justify-end gap-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/blocks/status-page-header.tsx"
    }
  ],
  "type": "registry:block"
}