{
  "name": "WorkspaceSwitcher",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WorkspaceSwitcher.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "workspace-switcher",
  "elName": "WorkspaceSwitcher",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#workspace-switcher",
  "hasLiveDemo": false,
  "description": "The workspace identity control at the top of a `<WorkspaceShell>` rail —\nletter-box (or uploaded-logo) avatar + workspace name + sub-line. Distinct\nfrom the MagicBlocks brand mark in `<SidebarHead>` above it: this is the\n*customer's* workspace. Opens a workspace switcher menu when wired\n(`onClick` / `href`). Collapsed mode shows the avatar only (the meta hides\nvia CSS off the `.app-shell[data-sidebar-mode]` ancestor).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WorkspaceSwitcher",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WorkspaceSwitcherProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WorkspaceSwitcher } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "ws-switcher",
    "ws-switcher-avatar",
    "ws-switcher-avatar-frame",
    "ws-switcher-badge",
    "ws-switcher-meta",
    "ws-switcher-name",
    "ws-switcher-sub"
  ],
  "examples": {
    "react": "<WorkspaceSwitcher name=\"Charlie Co.\" sub=\"Scale · US\" onClick={openSwitcher} />",
    "html": "<button type=\"button\" class=\"ws-switcher\" aria-label=\"Charlie Co.\"><span class=\"ws-switcher-avatar\" aria-hidden=\"true\">C</span><span class=\"ws-switcher-meta\"><span class=\"ws-switcher-name\">Charlie Co.</span><span class=\"ws-switcher-sub\">Scale · US</span></span></button>\n<button type=\"button\" class=\"ws-switcher\" aria-label=\"Acme Inc.\"><span class=\"ws-switcher-avatar-frame\"><span class=\"ws-switcher-avatar\" aria-hidden=\"true\">A</span><span class=\"ws-switcher-badge\"></span></span><span class=\"ws-switcher-meta\"><span class=\"ws-switcher-name\">Acme Inc.</span><span class=\"ws-switcher-sub\">Pro · EU</span></span></button>\n<button type=\"button\" class=\"ws-switcher\" aria-label=\"Globex\"><span class=\"ws-switcher-avatar-frame\"><span class=\"ws-switcher-avatar\" aria-hidden=\"true\">G</span><span class=\"ws-switcher-badge\">3</span></span><span class=\"ws-switcher-meta\"><span class=\"ws-switcher-name\">Globex</span><span class=\"ws-switcher-sub\">Scale · US</span></span></button>",
    "css": ".ws-switcher {\n  display: flex; align-items: center; gap: var(--s-2);\n  margin: var(--s-3) 0 var(--s-2); width: 100%;\n  padding: 0; background: transparent; border: 0; cursor: pointer;\n  border-radius: 8px; color: var(--fg); text-align: left; flex-shrink: 0;\n}\n\n.ws-switcher-avatar {\n  width: 32px; height: 32px; border-radius: 8px;\n  background: var(--accent-soft); color: var(--accent);\n  font: 700 14px/1 var(--f-display);\n  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--hair));\n  display: inline-flex; align-items: center; justify-content: center;\n  flex-shrink: 0; overflow: hidden; text-transform: uppercase;\n}\n\n.ws-switcher-avatar-frame { position: relative; display: inline-flex; flex-shrink: 0; }\n\n.ws-switcher-badge {\n  position: absolute; top: -3px; right: -3px;\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 8px; height: 8px; padding: 0 3px;\n  font: 700 9px/1 var(--f-mono); color: var(--on-accent);\n  background: var(--accent); border-radius: var(--r-pill);\n  box-shadow: 0 0 0 2px var(--bg-paper);\n}\n\n.ws-switcher-meta { display: none; flex-direction: column; gap: 2px; min-width: 0; }\n\n.ws-switcher-name { font: 600 13px/1.2 var(--f-body); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ws-switcher-sub { font: 500 10px/1 var(--f-mono); color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; }"
  }
}