{
  "name": "RoomHeader",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RoomHeader.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "room-header",
  "elName": "RoomHeader",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#room-header",
  "hasLiveDemo": false,
  "description": "The three-line room hero — eyebrow · display heading · lede — that opens\nevery agent-builder room. A thin composition of `<Eyebrow>` +\n`<Heading display>` + `<Lede>`; no actions slot (page actions live on\n`<RoomTabs trailing>`).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "RoomHeader",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RoomHeaderProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RoomHeader } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "eyebrow",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional mono-uppercase kicker above the title."
    },
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Room title. Rendered via `<Heading display>` — pass an `<em>` for the Fraunces-italic flourish, e.g. `title={<>Who Marcus <em>is</em>.</>}`."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional lede paragraph below the title."
    },
    {
      "name": "level",
      "optional": true,
      "type": "HeadingLevel",
      "doc": "Heading level for the title. Defaults to `2` — rooms sit under the page's `<PageHeader>` `<h1>`, so `<h2>` keeps the heading order clean. Override when the room hero is the top-most heading on its surface."
    }
  ],
  "classesUsed": [
    "room-header",
    "title"
  ],
  "examples": {
    "react": "<RoomHeader\n  eyebrow=\"Persona\"\n  title={<>Who Marcus <em>is</em>.</>}\n  description=\"Personas are reusable across agents.\"\n/>",
    "html": "<header class=\"room-header\">\n  <p class=\"eyebrow\">Persona</p>\n  <h2 class=\"display\">Who Marcus <em>is</em>.</h2>\n  <p class=\"lede\">Personas are reusable across agents — define the voice once, attach it anywhere.</p>\n</header>",
    "css": ".room-header {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}