{
  "name": "AgentBuilderHead",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/AgentBuilderHead.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "agent-frame",
  "elName": "Header + tab row",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#agent-frame",
  "hasLiveDemo": false,
  "description": "The agent builder topbar: back button · name + type chip · version +\nunsaved meta · trailing action pills. Pass it to `AgentBuilderShell`'s\n`head` slot (it spans the full grid width).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "AgentBuilderHead",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AgentBuilderHeadProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { AgentBuilderHead } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "name",
      "optional": false,
      "type": "ReactNode",
      "doc": "Agent name."
    },
    {
      "name": "typeChip",
      "optional": true,
      "type": "ReactNode",
      "doc": "Type chip beside the name — typically a `<Chip>` (e.g. \"Omnichannel\")."
    },
    {
      "name": "version",
      "optional": true,
      "type": "ReactNode",
      "doc": "Version affordance. A string/number renders in the `.ab-version` pill; a node (e.g. a `<VersionSwitcher>`) renders inline as-is (it brings its own chrome — and a block-level switcher can't be nested in the pill's `<span>` without invalid HTML)."
    },
    {
      "name": "unsaved",
      "optional": true,
      "type": "boolean",
      "doc": "Show the amber \"unsaved changes\" indicator."
    },
    {
      "name": "unsavedLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the unsaved label. Defaults to \"Unsaved changes\"."
    },
    {
      "name": "onBack",
      "optional": true,
      "type": "() => void",
      "doc": "When provided, renders the ‹ back button."
    },
    {
      "name": "backLabel",
      "optional": true,
      "type": "string",
      "doc": "Accessible label for the back button. Defaults to \"Back to agents\"."
    },
    {
      "name": "avatar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Leading actions slot — e.g. a collaborator `<Avatar>`."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trailing action pills — Share / Test / Save (`.ab-h-pill`)."
    },
    {
      "name": "density",
      "optional": true,
      "type": "\"default\" | \"compact\"",
      "doc": "Vertical density. `\"default\"` is the roomy topbar; `\"compact\"` tightens the padding + shrinks the back button / pills so the head reads ~44px instead of ~64px (frees space above the fold on every room). v2.4.0."
    }
  ],
  "classesUsed": [
    "ab-builder-head",
    "ab-builder-head-actions",
    "ab-builder-head-back",
    "ab-builder-head-meta",
    "ab-builder-head-name",
    "ab-builder-head-title",
    "ab-h-pill",
    "title"
  ],
  "examples": {
    "react": "<AgentBuilderHead\n  name=\"Winery Example\"\n  typeChip={<Chip tone=\"pink\">Omnichannel</Chip>}\n  version=\"Version 3 ▾\"\n  unsaved\n  onBack={() => nav('/agents')}\n  actions={<><button className=\"ab-h-pill\">Share</button>…</>}\n/>",
    "html": "<header class=\"ab-builder-head\"><div class=\"ab-builder-head-title\"><button type=\"button\" class=\"ab-builder-head-back\" aria-label=\"Back to agents\">‹</button><span class=\"ab-builder-head-name\">Acme Assistant<span class=\"chip\">website</span><span class=\"chip chip-green\">Live</span></span><span class=\"ab-builder-head-meta\"><span class=\"ab-version\">Draft · working copy ▾</span></span></div><div class=\"ab-builder-head-actions\"><button type=\"button\" class=\"ab-h-pill\">View conversations</button><button type=\"button\" class=\"ab-h-pill\">Save</button><button type=\"button\" class=\"ab-h-pill is-primary\">Publish</button></div></header>\n<nav class=\"tabs tabs-link ab-frame-tabs\" aria-label=\"Agent sections\"><a class=\"tab\" href=\"#\">Overview</a><a class=\"tab active\" aria-current=\"page\" href=\"#\">Journey</a><a class=\"tab\" href=\"#\">Knowledge</a><a class=\"tab\" href=\"#\">Channels</a><a class=\"tab\" href=\"#\">Settings</a></nav>",
    "css": ".ab-builder-head {\n  grid-column: 1 / -1;\n  display: flex; align-items: center; gap: var(--s-4);\n  padding: var(--s-3) var(--s-5);\n  background: var(--bg-paper);\n  border-bottom: 1px solid var(--hair);\n  flex-wrap: wrap;\n}\n\n.ab-builder-head-actions {\n  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2);\n}\n\n.ab-builder-head-back {\n  width: 28px; height: 28px; border-radius: 6px;\n  background: var(--bg-warm); color: var(--fg-soft);\n  display: inline-flex; align-items: center; justify-content: center;\n  font: 600 14px var(--f-mono); border: 0; cursor: pointer;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.ab-builder-head-meta {\n  display: inline-flex; align-items: center; gap: var(--s-3);\n  font: 500 11px/1 var(--f-mono); color: var(--fg-dim);\n}\n\n.ab-builder-head-name {\n  font: 700 18px/1.1 var(--f-display); color: var(--fg);\n  display: inline-flex; align-items: center; gap: var(--s-2);\n}\n\n.ab-builder-head-title { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }\n\n.ab-h-pill {\n  display: inline-flex; align-items: center; gap: var(--s-2);\n  font: 500 12px/1 var(--f-body); color: var(--fg-soft);\n  padding: 7px var(--s-3);\n  background: var(--bg); border: 1px solid var(--hair);\n  border-radius: var(--r-pill); cursor: pointer;\n  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}