{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "app-header",
  "type": "registry:ui",
  "title": "App header",
  "description": "Top bar with title, status pill, region selector and actions.",
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "utils",
    "status-badge"
  ],
  "files": [
    {
      "path": "registry/blacksite/ui/app-header.tsx",
      "type": "registry:ui",
      "target": "components/ui/app-header.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown, Globe, HelpCircle, Maximize2, Minimize2, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { StatusBadge, type StatusBadgeProps } from \"@/registry/blacksite/ui/status-badge\";\n\ninterface AppHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Brand / nav slot on the far left. */\n  brand?: React.ReactNode;\n  /** App or workspace title. */\n  title?: React.ReactNode;\n  /** Subtitle (rendered after a slash). */\n  subtitle?: React.ReactNode;\n  /** Status pill shown next to the workspace label. */\n  status?: StatusBadgeProps[\"status\"];\n  statusLabel?: string;\n  /** Region / environment label (right side selector). */\n  region?: string;\n  user?: { name: string; avatarUrl?: string };\n  /** Right-side actions slot (overrides default window controls). */\n  actions?: React.ReactNode;\n  /** Show fake window controls (minimise / maximise / close). */\n  windowControls?: boolean;\n}\n\nconst AppHeader = React.forwardRef<HTMLElement, AppHeaderProps>(\n  (\n    {\n      className,\n      brand,\n      title,\n      subtitle,\n      status,\n      statusLabel,\n      region,\n      user,\n      actions,\n      windowControls = false,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"border-border flex h-10 items-center gap-3 border-b\",\n          \"bg-background-elevated text-foreground px-2\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex min-w-0 items-center gap-2\">\n          {brand}\n          {(title || subtitle) && (\n            <h1 className=\"text-mono text-foreground truncate text-[11px] tracking-[0.1em] uppercase\">\n              {title}\n              {subtitle && <span className=\"text-foreground-subtle\"> — {subtitle}</span>}\n            </h1>\n          )}\n        </div>\n\n        <div className=\"flex-1\" />\n\n        <div className=\"flex items-center gap-2\">\n          {user && (\n            <button\n              type=\"button\"\n              className=\"border-border text-mono hover:border-border-strong flex h-7 items-center gap-1.5 rounded-sm border px-2 text-[11px] tracking-[0.06em] uppercase\"\n            >\n              <span className=\"bg-foreground/10 grid size-4 place-items-center rounded-full text-[9px]\">\n                {user.name.slice(0, 1).toUpperCase()}\n              </span>\n              <span className=\"max-w-[120px] truncate\">{user.name}</span>\n            </button>\n          )}\n\n          {status && (\n            <div className=\"border-border flex h-7 items-center gap-1.5 rounded-sm border px-2\">\n              <span className=\"text-mono text-foreground-muted text-[10px] tracking-[0.08em] uppercase\">\n                Status\n              </span>\n              <StatusBadge status={status}>{statusLabel}</StatusBadge>\n            </div>\n          )}\n\n          {region && (\n            <button\n              type=\"button\"\n              className=\"border-border text-mono hover:border-border-strong flex h-7 items-center gap-1.5 rounded-sm border px-2 text-[11px] tracking-[0.06em] uppercase\"\n            >\n              <Globe className=\"text-foreground-muted size-3.5\" />\n              <span>{region}</span>\n              <ChevronDown className=\"text-foreground-subtle size-3\" />\n            </button>\n          )}\n\n          {actions}\n\n          {windowControls && (\n            <div className=\"ml-1 flex items-center gap-0.5\">\n              <button\n                type=\"button\"\n                aria-label=\"Help\"\n                disabled\n                className=\"hover:bg-accent text-foreground-muted hover:text-foreground grid size-7 place-items-center rounded-sm disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                <HelpCircle className=\"size-3.5\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Minimise\"\n                disabled\n                className=\"hover:bg-accent text-foreground-muted hover:text-foreground grid size-7 place-items-center rounded-sm disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                <Minimize2 className=\"size-3.5\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Maximise\"\n                disabled\n                className=\"hover:bg-accent text-foreground-muted hover:text-foreground grid size-7 place-items-center rounded-sm disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                <Maximize2 className=\"size-3.5\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Close\"\n                disabled\n                className=\"hover:bg-danger/20 text-foreground-muted hover:text-danger grid size-7 place-items-center rounded-sm disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                <X className=\"size-3.5\" />\n              </button>\n            </div>\n          )}\n        </div>\n      </header>\n    );\n  },\n);\nAppHeader.displayName = \"AppHeader\";\n\nexport { AppHeader };\n"
    }
  ]
}