{
  "name": "SectionHeader",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SectionHeader.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "section-header",
  "elName": "SectionHeader",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#section-header",
  "hasLiveDemo": false,
  "description": "The canonical inner-section header — back · eyebrow · title · subtitle ·\nactions · optional tabs. The one header every standard section reaches for;\nsupersedes the overlapping `<PageHeader>` and `<RoomTabs>` roles (both now\ndeprecated in favour of this). Purely declarative.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SectionHeader",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SectionHeaderProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SectionHeader } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Section title. Pass an `<em>` for the Fraunces-italic flourish."
    },
    {
      "name": "eyebrow",
      "optional": true,
      "type": "ReactNode",
      "doc": "Mono-uppercase kicker above the title."
    },
    {
      "name": "subtitle",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-line subtitle below the title."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned action cluster (buttons, menus)."
    },
    {
      "name": "tabs",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional tabs row beneath the title block (e.g. `<Tabs>` / `<LinkTabs>`)."
    },
    {
      "name": "back",
      "optional": true,
      "type": "{ href: string",
      "doc": "Back affordance — renders a leading chevron link."
    },
    {
      "name": "label",
      "optional": true,
      "type": "string }",
      "doc": ""
    },
    {
      "name": "level",
      "optional": true,
      "type": "HeadingLevel",
      "doc": "Heading level for the title. Default `1`. Use `2` for sub-sections."
    }
  ],
  "classesUsed": [
    "section-header",
    "section-header-actions",
    "section-header-back",
    "section-header-eyebrow",
    "section-header-main",
    "section-header-subtitle",
    "section-header-tabs",
    "section-header-text",
    "section-header-title",
    "title"
  ],
  "examples": {
    "react": "<SectionHeader\n  eyebrow=\"Build\"\n  title=\"Agents\"\n  subtitle=\"Design, test, and ship the agents that run your workspace.\"\n  back={{ href: \"/\" }}\n  actions={<Button variant=\"primary\">New agent</Button>}\n/>",
    "html": "<header class=\"section-header\"><div class=\"section-header-main\"><a class=\"section-header-back\" href=\"#\" aria-label=\"Back\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 3 L5 8 L10 13\"/></svg></a><div class=\"section-header-text\"><p class=\"section-header-eyebrow\">Build</p><h1 class=\"section-header-title\">Agents</h1><p class=\"section-header-subtitle\">Design, test, and ship the agents that run your workspace.</p></div><div class=\"section-header-actions\"><button type=\"button\" class=\"btn btn-primary\">New agent</button></div></div></header>",
    "css": ".section-header { display: flex; flex-direction: column; gap: var(--s-3); }\n\n.section-header-actions { flex: none; display: flex; align-items: center; gap: var(--s-2); }\n\n.section-header-back {\n  flex: none;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 32px; height: 32px;\n  border: 1px solid var(--hair); border-radius: var(--r-sm);\n  background: var(--bg-paper); color: var(--fg-soft);\n  cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);\n}\n\n.section-header-eyebrow {\n  margin: 0;\n  font: 600 11px/1 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase;\n  color: var(--fg-dim);\n}\n\n.section-header-main { display: flex; align-items: flex-start; gap: var(--s-4); }\n\n.section-header-subtitle { margin: 0; font: 400 14px/1.5 var(--f-body); color: var(--fg-soft); }\n\n.section-header-tabs { display: flex; align-items: center; gap: var(--s-1); }\n\n.section-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }\n\n.section-header-title { margin: 0; font: 700 24px/1.15 var(--f-display); color: var(--fg); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}