{
  "id": "page-header",
  "name": "PageHeader",
  "level": "molecule",
  "status": "stable",
  "purpose": "The top of a page: its title, a line about it and its main actions.",
  "description": "**Purpose.** Orient the user at the top of a view. Composes breadcrumb, eyebrow, title (h1 by default), badge, description, actions and an optional Tabs row below. Renders a `<header>` landmark.\n\n**Size axis** (validated under `Foundations/Identity/Display Hierarchy`, Heading mapping per ADR-006):\n\n| Size | Title size | When to use |\n|---|---|---|\n| `sm` | Heading.md (24 px) | Settings sub-page where the breadcrumb already names the location. Title is technical, calm, secondary to the breadcrumb. |\n| `md` | Heading.lg (30 px) | **Default app page** — the consumer landed here directly; the title leads the page without shouting. Members, Deployments overview, Inbox. |\n| `lg` | Heading.display (48 px) | **Hero / product / marketing page** — landing surfaces, product overview, empty page top. Reserved; reach for it only when the title is meant to dominate. |\n\n**Composition slots** (rendered in this order, each optional except `title`): `breadcrumb` → `eyebrow` → `title` (+ optional `badge` inline) → `description` → `actions` (right-aligned) → `tabs` (below).\n\n**Patterns consulted**: `Patterns/Page Shells · PageHeader`, `Patterns/Navigation · BreadcrumbForLocation + TabsForLocalContext`, `Patterns/Information Architecture · MetadataAndActions`, `Patterns/Visual Priority · ActionHierarchy`.",
  "role": "surface",
  "import": "@rrios-forge/ui/molecules/page-header",
  "exports": [
    "PageHeader",
    "PAGE_HEADER_SIZES",
    "pageHeaderVariants",
    "PAGE_HEADER_PRESENTATIONS"
  ],
  "source": "packages/ui/src/molecules/page-header",
  "axes": [
    {
      "axis": "size",
      "part": null,
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md",
      "meaning": "Ergonomic scale, in three families (control, text, container)."
    },
    {
      "axis": "presentation",
      "part": null,
      "values": [
        "editorial",
        "title"
      ],
      "default": "editorial",
      "meaning": "How the same thing is staged."
    }
  ],
  "needs": [
    {
      "need": "Page header / section title",
      "answer": "`PageHeader` / `SectionHeader`"
    },
    {
      "need": "Controls that must stay in reach while the screen scrolls (filters, search, a view switch, section tabs) — or a selection's / a form's actions",
      "answer": "`PageShell.StickyBar` (ADR-045) under the `PageHeader`, `edge=\"bottom\"` for actions: at rest part of the page; pinned, it condenses onto glass and carries the page title small. One bar per edge; never hides focus"
    }
  ],
  "patterns": [],
  "a11yExceptions": [],
  "decisions": [
    {
      "id": "ADR-008",
      "title": "Layout layer: refined `Grid` + new `Container`"
    },
    {
      "id": "ADR-009",
      "title": "Editorial Frame: PageShell v3 + new `TopBar` molecule"
    },
    {
      "id": "ADR-010",
      "title": "PageShell v4: bottom dock + mobile floating bubble"
    },
    {
      "id": "ADR-014",
      "title": "PageShell: Apple Mail / macOS Big Sur visual register"
    },
    {
      "id": "ADR-016",
      "title": "NotificationCenter v2: Popover → Drawer + Provider/Hooks"
    },
    {
      "id": "ADR-022",
      "title": "The material family: `solid` and `vibrant`"
    },
    {
      "id": "ADR-029",
      "title": "The page gutter belongs outside the frame"
    },
    {
      "id": "ADR-044",
      "title": "Navigation is a rail that peeks"
    },
    {
      "id": "ADR-045",
      "title": "A screen's controls pin and condense"
    }
  ],
  "stories": [
    {
      "name": "Playground",
      "id": "components-molecules-pageheader--playground",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--playground",
      "frame": "/iframe.html?id=components-molecules-pageheader--playground&viewMode=story"
    },
    {
      "name": "With breadcrumb",
      "id": "components-molecules-pageheader--with-breadcrumb",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--with-breadcrumb",
      "frame": "/iframe.html?id=components-molecules-pageheader--with-breadcrumb&viewMode=story"
    },
    {
      "name": "With actions",
      "id": "components-molecules-pageheader--with-actions",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--with-actions",
      "frame": "/iframe.html?id=components-molecules-pageheader--with-actions&viewMode=story"
    },
    {
      "name": "With tabs",
      "id": "components-molecules-pageheader--with-tabs",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--with-tabs",
      "frame": "/iframe.html?id=components-molecules-pageheader--with-tabs&viewMode=story"
    },
    {
      "name": "Dense",
      "id": "components-molecules-pageheader--dense",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--dense",
      "frame": "/iframe.html?id=components-molecules-pageheader--dense&viewMode=story"
    },
    {
      "name": "Product page",
      "id": "components-molecules-pageheader--product-page",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--product-page",
      "frame": "/iframe.html?id=components-molecules-pageheader--product-page&viewMode=story"
    },
    {
      "name": "Settings page",
      "id": "components-molecules-pageheader--settings-page",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-pageheader--settings-page",
      "frame": "/iframe.html?id=components-molecules-pageheader--settings-page&viewMode=story"
    }
  ],
  "storyFile": "tooling/storybook/stories/components/molecules/page-header.stories.tsx"
}