{
  "name": "PageHeader",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PageHeader.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "page-header",
  "elName": "PageHeader",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#page-header",
  "hasLiveDemo": false,
  "description": "Page header — the canonical \"eyebrow · title · summary · actions\"\nrhythm every product-app route reaches for. Wraps `.page-header` from\n`@magicblocksai/css`. Bakes the type scale, gap, mobile wrap behaviour,\nand the icon-in-h1 pattern so the rhythm stays consistent across\nroutes without hand-rolled CSS in every page.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "PageHeader",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PageHeaderProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PageHeader } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "eyebrow",
      "optional": true,
      "type": "ReactNode",
      "doc": "Small uppercase eyebrow above the title. Free-form — typically `\"Section · Subsection\"`."
    },
    {
      "name": "backLink",
      "optional": true,
      "type": "{ label: string",
      "doc": "Optional back link rendered above the eyebrow as `← Label` with normal text-link styling (NOT the mono-eyebrow treatment). For richer breadcrumbs, compose `<Breadcrumbs>` above the PageHeader directly. v1.61.0 (app-team R2)."
    },
    {
      "name": "href",
      "optional": false,
      "type": "string }",
      "doc": ""
    },
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Page title (renders as `<h1>`). When `onTitleSave` is set the title becomes click-to-edit and must be a `string`."
    },
    {
      "name": "onTitleSave",
      "optional": true,
      "type": "(next: string) => void | Promise<void>",
      "doc": "When set, the title becomes click-to-edit via the kit's `<InlineHeadline>` primitive. Receives the new string when the user commits a change (Enter or blur with a different value); may be async. Requires `title` to be a string — the kit dev-warns if it isn't. Reach for the standalone `<InlineHeadline>` when your page chrome doesn't fit the `<PageHeader>` shape (custom hero layouts, modal titles, etc.). v1.23.0 (Spark Round R22)."
    },
    {
      "name": "titlePlaceholder",
      "optional": true,
      "type": "ReactNode",
      "doc": "Placeholder shown when `title` is empty AND `onTitleSave` is set. Default `\"Untitled\"`. v1.23.0."
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional icon rendered before the title text. Use one of the kit's icon components or any 24–28px SVG."
    },
    {
      "name": "summary",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional summary line below the title (`color: var(--fg-soft)`)."
    },
    {
      "name": "metadata",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional horizontal metadata strip rendered between `summary` and `actions`. Use for avatar + agent + channel + started-at chips on detail pages. Hides cleanly when undefined. v1.60.0."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned action(s) — typically a primary `<Button>` or a `<ButtonGroup>` for split actions. Wraps to full width below the title at the mobile breakpoint."
    },
    {
      "name": "level",
      "optional": true,
      "type": "1 | 2 | 3",
      "doc": "Override the heading level. Default `1`. Use `2` when the page already has a higher-level title above (e.g. inside an `<AppShell>` topbar that renders the workspace name as h1)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the root `<header>`."
    }
  ],
  "classesUsed": [
    "mono",
    "page-header",
    "page-header-actions",
    "page-header-back",
    "page-header-eyebrow",
    "page-header-metadata",
    "page-header-summary",
    "page-header-text",
    "page-header-title",
    "page-header-title-icon",
    "page-header-title-text",
    "title"
  ],
  "examples": {
    "react": "<PageHeader\n    eyebrow=\"Sales\"\n    title=\"Deals\"\n    icon={<BriefcaseIcon size={26} />}\n    summary=\"42 open · $1.2M weighted\"\n    actions={<Button variant=\"primary\">+ New deal</Button>}\n  />",
    "html": "<div class=\"page-header-demo\">\n  <header class=\"page-header\">\n    <div class=\"page-header-text\">\n      <span class=\"page-header-eyebrow mono\">Sales</span>\n      <h1 class=\"page-header-title\">\n        <span class=\"page-header-title-icon\" aria-hidden=\"true\">\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7h18v12H3z\"/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/></svg>\n        </span>\n        <span class=\"page-header-title-text\">Deals</span>\n      </h1>\n      <p class=\"page-header-summary\">42 open &middot; $1.2M weighted</p>\n    </div>\n    <div class=\"page-header-actions\">\n      <button class=\"btn btn-primary\" type=\"button\">+ New deal</button>\n    </div>\n  </header>\n</div>",
    "css": ".mono { font-family: var(--f-mono); }\n\n.page-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--s-5);\n  flex-wrap: wrap;\n  margin-bottom: var(--s-6);\n  padding-bottom: var(--s-5);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.page-header-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n  flex-shrink: 0;\n}\n\n.page-header-back {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 13px; color: var(--fg-soft);\n  text-decoration: none;\n  margin-bottom: var(--s-1);\n}\n\n.page-header-eyebrow {\n  font: 500 11.5px/1 var(--f-mono);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--accent-text);\n}\n\n.page-header-metadata {\n  display: flex;\n  gap: var(--s-3);\n  align-items: center;\n  flex-wrap: wrap;\n  color: var(--fg-soft);\n  font-size: 13px;\n  margin-top: var(--s-2);\n}\n\n.page-header-summary {\n  margin: 0;\n  font: 400 14.5px/1.5 var(--f-body);\n  color: var(--fg-soft);\n  max-width: 64ch;\n}\n\n.page-header-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  min-width: 0;\n  flex: 1;\n}\n\n.page-header-title {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-3);\n  margin: 0;\n  font: 600 28px/1.2 var(--f-display);\n  letter-spacing: -0.015em;\n  color: var(--fg);\n}\n\n.page-header-title-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--accent-text);\n  flex-shrink: 0;\n}\n\n.page-header-title-text { min-width: 0; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}