{
  "name": "WorkspaceBar",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WorkspaceBar.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "workspace-bar",
  "elName": "WorkspaceBar",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#workspace-bar",
  "hasLiveDemo": false,
  "description": "The **optional** compact top bar for a `<WorkspaceShell>` (~48px). Sidebar-first\napps omit it entirely — the rail's bottom cluster already carries\nsettings / theme / profile. Apps that want a bar (e.g. a global search or a\nbreadcrumb, Spark-style) pass it as `<WorkspaceShell topbar={<WorkspaceBar …/>}>`.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WorkspaceBar",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WorkspaceBarProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WorkspaceBar } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Left zone — section title or breadcrumb."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right zone — action cluster (notifications, quick-add, etc.)."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Middle zone — typically a search / command field."
    }
  ],
  "classesUsed": [
    "title",
    "ws-bar",
    "ws-bar-actions",
    "ws-bar-mid",
    "ws-bar-title"
  ],
  "examples": {
    "react": "<WorkspaceBar title=\"Agents\" actions={<Button size=\"sm\">New agent</Button>} />",
    "html": "<div class=\"ws-bar\"><div class=\"ws-bar-title\">Agents</div><div class=\"ws-bar-actions\"><button type=\"button\" class=\"btn btn-primary\">New agent</button></div></div>",
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.ws-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n  height: 48px;\n  padding: 0 var(--s-4);\n  background: var(--bg-paper);\n  border-bottom: 1px solid var(--hair);\n}\n\n.ws-bar-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }\n\n.ws-bar-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }\n\n.ws-bar-title {\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  font: 600 14px/1 var(--f-body);\n  color: var(--fg);\n}"
  }
}