{
  "name": "WorkspaceShell",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WorkspaceShell.tsx",
  "chapterTag": "10 Page Templates",
  "chapter": "11-patterns-and-specials.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "The batteries-included NextGen app shell. Composes the bare `<AppShell>` with a\nfully-assembled collapsible rail (brand · workspace switcher · grouped nav ·\nactions · settings · theme · user) and an **optional** compact `<WorkspaceBar>`.\nOwns the collapse toggle, so a drop-in usage needs zero wiring.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WorkspaceShell",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WorkspaceShellProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WorkspaceNavItemDef",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WorkspaceNavGroupDef",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WorkspaceActionDef",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WorkspaceShell } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "brand",
      "optional": false,
      "type": "ReactNode",
      "doc": "Brand slot for the rail head — typically `<Logo />`."
    },
    {
      "name": "workspace",
      "optional": true,
      "type": "{ name: string",
      "doc": "Workspace identity (switcher). Omit to hide the switcher."
    },
    {
      "name": "sub",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "avatar",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "href",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onSwitch",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "badge",
      "optional": true,
      "type": "boolean | ReactNode; }",
      "doc": "Unread / attention indicator on the workspace avatar — `true` = dot, a value = count. v4.2.0."
    },
    {
      "name": "nav",
      "optional": false,
      "type": "WorkspaceNavGroupDef[]",
      "doc": "Nav groups (section + items). Composed into the rail's `<WorkspaceNav>`."
    },
    {
      "name": "settings",
      "optional": true,
      "type": "{ href?: string",
      "doc": "Bottom-cluster Settings item. Omit to hide it."
    },
    {
      "name": "active",
      "optional": true,
      "type": "boolean",
      "doc": ""
    },
    {
      "name": "label",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode }",
      "doc": ""
    },
    {
      "name": "user",
      "optional": true,
      "type": "{ name: string",
      "doc": "Bottom-cluster user identity. Pass `menu` for sign-out etc."
    },
    {
      "name": "sub",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "avatar",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "href",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "menu",
      "optional": true,
      "type": "WorkspaceUserMenuItem[] }",
      "doc": ""
    },
    {
      "name": "theme",
      "optional": true,
      "type": "boolean",
      "doc": "Render the in-rail light/dark `<WorkspaceThemeToggle>` in the bottom cluster."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "WorkspaceActionDef[]",
      "doc": "Bottom-cluster action items (⌘K, Ask Sage, notifications) — imperative `onClick`s kept **in the rail**, so a sidebar-first app needs no top bar. v3.2.0."
    },
    {
      "name": "linkComponent",
      "optional": true,
      "type": "RailLinkComponent",
      "doc": "Router-aware link component, threaded to **every** rail link (switcher, nav, settings, user). Without it the rail uses raw `<a href>` (full-page reload in an SPA). See `RailLinkComponent`. v3.2.0."
    },
    {
      "name": "loading",
      "optional": true,
      "type": "boolean",
      "doc": "Global nav-loading affordance for a rail-only shell — renders a top-of-main progress sliver while `true`. Omit to render nothing. v3.2.0."
    },
    {
      "name": "topbar",
      "optional": true,
      "type": "ReactNode",
      "doc": "OPTIONAL compact top bar — typically a `<WorkspaceBar>`. Omit for rail-only (default)."
    },
    {
      "name": "defaultCollapsed",
      "optional": true,
      "type": "boolean",
      "doc": "Start collapsed (uncontrolled)."
    },
    {
      "name": "collapsed",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled collapsed state."
    },
    {
      "name": "onCollapsedChange",
      "optional": true,
      "type": "(collapsed: boolean) => void",
      "doc": "Fires when the rail collapse toggles."
    },
    {
      "name": "defaultMobileNavOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Start the mobile nav drawer open (uncontrolled). At ≤960px the rail becomes an off-canvas drawer; the shell renders its own hamburger and owns the open/close state. Pair `mobileNavOpen` / `onMobileNavOpenChange` (inherited from `<AppShell>`) for controlled mode. v4.7.0."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "The inner section — any view (a `SectionView`, an `<AgentBuilderShell>`, …)."
    }
  ],
  "classesUsed": [
    "app-shell-side-divider",
    "app-shell-side-spacer",
    "menu",
    "ws-mobile-trigger"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".app-shell-side-divider { width: 28px; height: 1px; background: var(--hair); margin: var(--s-2) auto; }\n\n.app-shell-side-spacer { flex: 1; min-height: var(--s-3); }\n\n.menu {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-2);\n  display: flex; flex-direction: column; gap: 2px;\n  box-shadow: var(--sh-3);\n  min-width: 260px;\n}\n\n.ws-mobile-trigger {\n  display: none;\n  position: fixed;\n  top: var(--s-3);\n  left: var(--s-3);\n  z-index: calc(var(--z-modal, 50) - 2);\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  color: var(--fg);\n  cursor: pointer;\n  box-shadow: var(--sh-1, 0 2px 6px -2px rgba(20, 25, 55, 0.18));\n}"
  }
}