{
  "name": "AgentBuilderPane",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/AgentBuilderPane.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "The main edit pane of the builder — header over a scrollable body, with an\noptional sticky footer. Exposed as `AgentBuilderShell.Pane`; render it as\nthe shell's child.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "AgentBuilderPane",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AgentBuilderPaneProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { AgentBuilderPane } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "head",
      "optional": true,
      "type": "ReactNode",
      "doc": "Pane header — typically a `PaneHeader`."
    },
    {
      "name": "foot",
      "optional": true,
      "type": "ReactNode",
      "doc": "Sticky footer content — e.g. a Planner `<Switch>`. Wrapped in `.ab-pane-foot`. Optional."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Pane body — the active section editor."
    }
  ],
  "classesUsed": [
    "ab-pane",
    "ab-pane-body",
    "ab-pane-foot"
  ],
  "examples": {
    "react": "<AgentBuilderShell.Pane\n  head={<PaneHeader title=\"Want Secret Deals?\" tabs={…} />}\n  foot={<><Switch defaultChecked={false} /> Planner</>}\n>\n  {jobs.map((j) => <JobCard key={j.id} kind={j.kind}>{j.text}</JobCard>)}\n</AgentBuilderShell.Pane>",
    "html": null,
    "css": ".ab-pane {\n  background: var(--bg);\n  display: flex; flex-direction: column;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.ab-pane-body {\n  padding: var(--s-5) var(--s-6) var(--s-6);\n  display: flex; flex-direction: column; gap: var(--s-4);\n  flex: 1; min-height: 0;\n}\n\n.ab-pane-foot {\n  margin-top: auto;\n  padding: var(--s-4) var(--s-6);\n  border-top: 1px solid var(--hair);\n  background: var(--bg-paper);\n  display: flex; align-items: center; gap: var(--s-3);\n  font: 500 13px/1 var(--f-body); color: var(--fg-soft);\n}"
  }
}