{
  "name": "PaneHeader",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PaneHeader.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "The header of an `AgentBuilderShell.Pane`: optional collapse button,\nglyph + title + badge, a description line, and a `PaneTabs` strip.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PaneHeader",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PaneHeaderProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PaneHeader } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "The pane title (block / section name)."
    },
    {
      "name": "glyph",
      "optional": true,
      "type": "ReactNode",
      "doc": "Square accent glyph before the title."
    },
    {
      "name": "badge",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trailing badge beside the title — typically a `<Chip>`."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-line description under the title (may contain a learn-more link)."
    },
    {
      "name": "onCollapse",
      "optional": true,
      "type": "() => void",
      "doc": "When provided, renders the « collapse-rail button."
    },
    {
      "name": "collapseLabel",
      "optional": true,
      "type": "string",
      "doc": "Accessible label for the collapse button. Defaults to \"Collapse rail\"."
    },
    {
      "name": "tabs",
      "optional": true,
      "type": "ReactNode",
      "doc": "Tab strip — a `PaneTabs` node. Rendered below the description."
    }
  ],
  "classesUsed": [
    "ab-pane-collapse",
    "ab-pane-desc",
    "ab-pane-head",
    "ab-pane-title",
    "title"
  ],
  "examples": {
    "react": "<PaneHeader\n  glyph=\"◆\"\n  title=\"Want Secret Deals?\"\n  badge={<Chip tone=\"pink\">Advanced</Chip>}\n  description={<>Manage block settings. <a href=\"#\">More ↗</a></>}\n  onCollapse={collapseRail}\n  tabs={<PaneTabs defaultValue=\"jobs\">…</PaneTabs>}\n/>",
    "html": null,
    "css": ".ab-pane-collapse {\n  align-self: flex-start;\n  width: 26px; height: 26px; border-radius: 6px;\n  background: var(--bg-paper); border: 1px solid var(--hair);\n  color: var(--fg-soft); cursor: pointer;\n  font: 600 13px var(--f-mono);\n  margin: 0 0 var(--s-2);\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);\n}\n\n.ab-pane-desc {\n  font: 400 13px/1.5 var(--f-body); color: var(--fg-soft);\n  margin: 0;\n  max-width: 640px;\n}\n\n.ab-pane-head {\n  padding: var(--s-5) var(--s-6) 0;\n  display: flex; flex-direction: column; gap: var(--s-2);\n}\n\n.ab-pane-title {\n  display: flex; align-items: center; gap: var(--s-3);\n  font: 700 22px/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--fg);\n  margin: 0;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}