@dfosco/storyboard-core 3.3.2 → 3.5.0

package/src/CoreUIBar.svelte

@@ -10,69 +10,184 @@
 -->
 
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
+  import { onMount, onDestroy, untrack } from 'svelte'
   import './core-ui-colors.css'
   import CommandMenu from './CommandMenu.svelte'
   import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
   import * as Tooltip from './lib/components/ui/tooltip/index.js'
   import Icon from './svelte-plugin-ui/components/Icon.svelte'
   import { modeState } from './svelte-plugin-ui/stores/modeStore.js'
-  import { sidePanelState, togglePanel, openPanel } from './stores/sidePanelStore.js'
-  import { initCommandActions, registerCommandAction, getActionChildren, isExcludedByRoute, setRoutingBasePath } from './commandActions.js'
+  import { sidePanelState, togglePanel } from './stores/sidePanelStore.js'
+  import { initCommandActions, registerCommandAction, getActionChildren, hasChildrenProvider, isExcludedByRoute, setRoutingBasePath } from './commandActions.js'
   import { isMenuHidden } from './uiConfig.js'
+  import { subscribeToToolbarConfig, getToolbarConfig } from './toolbarConfigStore.js'
+  import { initToolbarToolStates, getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates } from './toolStateStore.js'
   import defaultToolbarConfig from '../toolbar.config.json'
 
-  interface Props { basePath?: string; toolbarConfig?: any }
-  let { basePath = '/', toolbarConfig }: Props = $props()
+  interface Props { basePath?: string; toolbarConfig?: any; customHandlers?: Record<string, () => Promise<any>> }
+  let { basePath = '/', toolbarConfig, customHandlers = {} }: Props = $props()
 
-  // Use provided config (merged by mountStoryboardCore) or fall back to defaults
-  const config = $derived(toolbarConfig || defaultToolbarConfig)
+  // Reactive toolbar config — subscribes to the config store for prototype overrides.
+  // Falls back to the prop (for backward compat) or the bundled defaults.
+  let storeConfig = $state(getToolbarConfig())
+  let unsubConfig: (() => void) | null = null
+
+  $effect(() => {
+    unsubConfig = subscribeToToolbarConfig((cfg: any) => { storeConfig = cfg })
+    return () => { if (unsubConfig) unsubConfig() }
+  })
+
+  $effect(() => {
+    const unsub = subscribeToToolbarToolStates(() => { toolStateVersion++ })
+    return unsub
+  })
+
+  // Use store config if available, otherwise fall back to prop or defaults
+  const config = $derived(
+    (storeConfig && Object.keys(storeConfig).length > 0)
+      ? storeConfig
+      : (toolbarConfig || defaultToolbarConfig)
+  )
+
+  // Re-seed tool states whenever config changes (e.g. prototype override on navigation)
+  $effect(() => {
+    const tools = config.tools || {}
+    // untrack so the synchronous _notify() → toolStateVersion++ inside
+    // initToolbarToolStates doesn't get tracked as a dependency of this effect
+    untrack(() => initToolbarToolStates(tools, { isLocalDev }))
+  })
 
   let visible = $state(true)
   // Hide the entire toolbar when loaded inside a prototype embed iframe
   const isEmbed = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')
   let commandMenuOpen = $state(false)
-  let ActionMenuButton: any = $state(null)
+  let toolComponents: Record<string, any> = $state({})
+  let toolData: Record<string, any> = $state({})
   let navVersion = $state(0)
   let origPushState: typeof history.pushState
   let origReplaceState: typeof history.replaceState
   let bumpNav: () => void
-  let CreateMenuButton: any = $state(null)
-  let createMenuFeatures: any[] = $state([])
-  let CommentsMenuButton: any = $state(null)
-  let ThemeMenuButton: any = $state(null)
-  let commentsEnabled = $state(false)
   let SidePanel: any = $state(null)
   let toolbarEl: HTMLElement | null = $state(null)
-  let CanvasCreateMenu: any = $state(null)
   let canvasActive = $state(false)
   let activeCanvasName = $state('')
   let canvasZoom = $state(100)
-  const canvasToolbarConfig = $derived((config as any).canvasToolbar || {})
-
-  const ZOOM_STEP = 10
-  const ZOOM_MIN = 25
-  const ZOOM_MAX = 200
+  let toolStateVersion = $state(0)
 
   // Roving tabindex: only one button in the toolbar is tabbable at a time
   let activeToolbarIndex = $state(-1)
 
   const isLocalDev = typeof window !== 'undefined' && (window as any).__SB_LOCAL_DEV__ === true
 
-  const commandMenuConfig = $derived(isMenuHidden('command') ? null : config.menus?.command)
-  const shortcutsConfig = $derived((config as any).shortcuts || {})
+  /**
+   * Resolve a handler reference to a module loader function.
+   * Format: "core:name" → core registry, "custom:name" → client handlers
+   */
+  function resolveHandlerModule(
+    ref: string,
+    coreModules: Record<string, Function>,
+    custom: Record<string, () => Promise<any>>
+  ): Function | null {
+    const colonIdx = ref.indexOf(':')
+    if (colonIdx === -1) return coreModules[ref] || null
+    const prefix = ref.slice(0, colonIdx)
+    const name = ref.slice(colonIdx + 1)
+    if (prefix === 'core') return coreModules[name] || null
+    if (prefix === 'custom') return custom[name] || null
+    return null
+  }
+
+  // Resolve tools → menus compatibility layer.
+  // New config uses `tools` (flat map with toolbar target); legacy uses `menus`.
+  // When `tools` exists, derive the menus-compatible structures from it.
+  function resolveMenus(cfg: any): Record<string, any> {
+    if (cfg.tools) {
+      const result: Record<string, any> = {}
+      for (const [key, tool] of Object.entries(cfg.tools as Record<string, any>)) {
+        if (tool.surface === 'command-list' || tool.surface === 'canvas-toolbar') continue
+        // Map new render/toolbar fields to legacy menu fields for rendering compat
+        const menu: any = { ...tool }
+        if (tool.render === 'menu' && tool.handler) {
+          menu.action = tool.handler
+        }
+        result[key] = { ...menu, _toolId: key }
+      }
+      return result
+    }
+    return cfg.menus || {}
+  }
+
+  function resolveCommandConfig(cfg: any): any {
+    if (cfg.command) {
+      // Build command menu config from new schema
+      const actions: any[] = []
+      actions.push({ type: 'header', label: 'Command Menu' })
+
+      // Add command-list tools as actions
+      if (cfg.tools) {
+        for (const [toolKey, tool] of Object.entries(cfg.tools as Record<string, any>)) {
+          if (tool.surface !== 'command-list') continue
+          if (tool.render === 'separator') {
+            actions.push({ type: 'separator' })
+            continue
+          }
+          actions.push({
+            id: tool.handler || `core/${tool.label?.toLowerCase().replace(/\s+/g, '-')}`,
+            label: tool.label || tool.ariaLabel,
+            type: tool.render || 'default',
+            url: tool.url || null,
+            modes: tool.modes || ['*'],
+            toolKey,
+            localOnly: tool.localOnly || false,
+          })
+        }
+      }
+
+      return {
+        ariaLabel: 'Command Menu',
+        trigger: 'command',
+        icon: cfg.command.icon,
+        meta: cfg.command.meta,
+        default: true,
+        modes: ['*'],
+        actions,
+      }
+    }
+    return cfg.menus?.command || null
+  }
+
+  const commandMenuConfig = $derived(
+    isMenuHidden('command') ? null : resolveCommandConfig(config)
+  )
+  const shortcutsConfig = $derived({
+    ...((config as any).shortcuts || {}),
+    ...(config.command?.shortcut ? { openCommandMenu: config.command.shortcut } : {}),
+  })
 
   // Build ordered menu list from JSON key order (excluding command, which is always rightmost)
-  const allMenus = $derived((config.menus || {}) as Record<string, any>)
+  const allMenus = $derived(resolveMenus(config))
   const orderedMenus = $derived(Object.entries(allMenus)
     .filter(([key]) => key !== 'command')
     .filter(([key]) => !isMenuHidden(key))
-    .filter(([, menu]) => !menu.localOnly || isLocalDev)
+    .filter(([key]) => {
+      void toolStateVersion
+      return getToolbarToolState(key) !== 'disabled'
+    })
     .map(([key, menu]) => ({ key, ...menu })))
 
   // Discover menus with sidepanel property
   const sidepanelMenus = $derived(orderedMenus.filter(menu => menu.sidepanel))
 
+  // Canvas toolbar tools — only visible when a canvas page is active
+  const canvasMenus = $derived(
+    config.tools
+      ? Object.entries(config.tools as Record<string, any>)
+          .filter(([, tool]) => tool.surface === 'canvas-toolbar')
+          .filter(([, tool]) => !tool.localOnly || isLocalDev)
+          .map(([key, tool]) => ({ key, ...tool }))
+      : []
+  )
+
   function menuVisibleInMode(menu: any, mode: string): boolean {
     if (!menu?.modes) return false
     if (isExcludedByRoute(menu)) return false
@@ -84,21 +199,51 @@
     orderedMenus
       .filter(menu => {
         void navVersion
+        void toolStateVersion
+        const toolState = getToolbarToolState(menu.key)
+        if (toolState === 'hidden') return false
+        if (menu.render === 'separator') return true
         if (!menuVisibleInMode(menu, $modeState.mode)) return false
-        if (menu.action) return ActionMenuButton && getActionChildren(menu.action).length > 0
-        if (menu.key === 'create') return CreateMenuButton && createMenuFeatures.length > 0
-        if (menu.key === 'comments') return CommentsMenuButton && commentsEnabled
-        if (menu.key === 'theme') return !!ThemeMenuButton
+        if (menu.render === 'sidepanel') return true
+        // For tools with components, check if loaded
+        if (!toolComponents[menu.key]) return false
+        // For action-menu tools (those with a getChildren handler), hide when empty.
+        // Custom-component menus (e.g. ThemeMenuButton) render their own content.
+        const actionId = menu.handler || menu.action
+        if (actionId && menu.render === 'menu' && hasChildrenProvider(actionId)) {
+          return getActionChildren(actionId).length > 0
+        }
         return true
       })
       .reverse()
   )
 
+  // Clean separators: remove leading, trailing, and consecutive
+  const cleanedMenus = $derived.by(() => {
+    const result: typeof visibleMenus = []
+    for (const item of visibleMenus) {
+      if (item.render === 'separator') {
+        // Skip if first item or previous was also a separator
+        if (result.length === 0 || result[result.length - 1].render === 'separator') continue
+        result.push(item)
+      } else {
+        result.push(item)
+      }
+    }
+    // Remove trailing separator
+    while (result.length > 0 && result[result.length - 1].render === 'separator') result.pop()
+    return result
+  })
+
   // Total toolbar item count (visible menus + command menu if present)
-  const toolbarItemCount = $derived(visibleMenus.length + (commandMenuConfig ? 1 : 0))
+  const toolbarItemCount = $derived(
+    cleanedMenus.filter(m => m.render !== 'separator').length + (commandMenuConfig ? 1 : 0)
+  )
 
   // Command menu is always the last item (rightmost)
-  const commandMenuIndex = $derived(commandMenuConfig ? visibleMenus.length : -1)
+  const commandMenuIndex = $derived(
+    commandMenuConfig ? cleanedMenus.filter(m => m.render !== 'separator').length : -1
+  )
 
   function getTabindex(index: number): number {
     if (activeToolbarIndex < 0) {
@@ -174,20 +319,19 @@
       e.preventDefault()
       commandMenuOpen = !commandMenuOpen
     }
-    // Cmd+D — toggle documentation panel
-    if (e.key === 'd' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
-      const docsMenu = visibleMenus.find(m => m.sidepanel === 'docs')
-      if (docsMenu) {
-        e.preventDefault()
-        togglePanel('docs')
-      }
-    }
-    // Cmd+I — toggle inspector panel
-    if (e.key === 'i' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
-      const inspectorMenu = visibleMenus.find(m => m.sidepanel === 'inspector')
-      if (inspectorMenu) {
-        e.preventDefault()
-        togglePanel('inspector')
+    // Config-driven tool shortcuts (e.g. Cmd+D for docs, Cmd+I for inspector)
+    for (const menu of cleanedMenus) {
+      const shortcut = menu.shortcut
+      if (!shortcut?.key) continue
+      if (e.key === shortcut.key && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        const toolState = getToolbarToolState(menu.key)
+        // Inactive and disabled tools don't respond to shortcuts
+        if (toolState === 'inactive' || toolState === 'disabled') break
+        if (menu.sidepanel) {
+          e.preventDefault()
+          togglePanel(menu.sidepanel)
+        }
+        break
       }
     }
   }
@@ -196,210 +340,102 @@
     window.addEventListener('keydown', handleKeydown)
     setRoutingBasePath(basePath)
 
-    // Re-evaluate action menus on SPA navigation
-    bumpNav = () => { navVersion++ }
+    // Re-evaluate action menus and prototype toolbar config on SPA navigation
+    const { getPrototypeMetadata } = await import('./loader.js')
+    const { setPrototypeToolbarConfig, clearPrototypeToolbarConfig } = await import('./toolbarConfigStore.js')
+
+    function syncPrototypeToolbar() {
+      let pathname = window.location.pathname
+      const base = basePath.replace(/\/+$/, '')
+      if (base && pathname.startsWith(base)) pathname = pathname.slice(base.length)
+      const firstSegment = pathname.replace(/^\//, '').split('/')[0] || null
+      if (firstSegment) {
+        const meta = getPrototypeMetadata(firstSegment)
+        if (meta?.toolbarConfig) {
+          setPrototypeToolbarConfig(meta.toolbarConfig)
+        } else {
+          clearPrototypeToolbarConfig()
+        }
+      } else {
+        clearPrototypeToolbarConfig()
+      }
+    }
+
+    bumpNav = () => { navVersion++; syncPrototypeToolbar() }
     window.addEventListener('popstate', bumpNav)
     origPushState = history.pushState.bind(history)
     history.pushState = (...args: any[]) => { origPushState(...args); bumpNav() }
     origReplaceState = history.replaceState.bind(history)
     history.replaceState = (...args: any[]) => { origReplaceState(...args); bumpNav() }
 
+    // Apply prototype toolbar config for the initial route
+    syncPrototypeToolbar()
+
     // Seed the command action registry from config
     if (commandMenuConfig) {
       initCommandActions(commandMenuConfig)
     }
 
-    // Register core action handlers
-    registerCommandAction('core/viewfinder', () => {
-      window.location.href = basePath + 'viewfinder'
-    })
-
     // Register sidepanel toggle actions
     for (const menu of sidepanelMenus) {
-      registerCommandAction(`core/${menu.key}`, () => {
+      registerCommandAction(`core:${menu.key}`, () => {
         togglePanel(menu.sidepanel)
       })
     }
 
-    // Auto-open inspector panel if ?inspect= param is in the URL
-    try {
-      const inspectParam = new URL(window.location.href).searchParams.get('inspect')
-      if (inspectParam) {
-        openPanel('inspector')
-      }
-    } catch {}
+    // Load all tool modules from the registry
+    const { coreHandlers } = await import('./tools/registry.js')
+    const toolConfigs = config.tools || {}
+    const ctx = { basePath, showFlowInfoDialog }
 
-    // Register devtools submenu (show flow info, reset params, hide mode, logout)
-    {
-      let loader: any = null
-      let hm: any = null
-      let commentsAuth: any = null
-      try { loader = await import('./loader.js') } catch {}
-      try { hm = await import('./hideMode.js') } catch {}
-      try { commentsAuth = await import('./comments/auth.js') } catch {}
-
-      registerCommandAction('core/devtools', {
-        getChildren: () => {
-          const children: any[] = []
-          if (loader) {
-            children.push({
-              id: 'core/show-flow-info',
-              label: 'Show flow info',
-              type: 'default',
-              execute: () => {
-                const p = new URLSearchParams(window.location.search)
-                const name = p.get('flow') || p.get('scene') || 'default'
-                try {
-                  const data = loader.loadFlow(name)
-                  showFlowInfoDialog(name, JSON.stringify(data, null, 2), null)
-                } catch (e: any) {
-                  showFlowInfoDialog(name, '', e.message)
-                }
-              },
-            })
-          }
-          children.push({
-            id: 'core/reset-params',
-            label: 'Reset all params',
-            type: 'default',
-            execute: () => { window.location.hash = '' },
-          })
-          if (hm) {
-            children.push({
-              id: 'core/hide-mode',
-              label: 'Hide mode',
-              type: 'toggle',
-              active: hm.isHideMode(),
-              execute: () => {
-                if (hm.isHideMode()) hm.deactivateHideMode()
-                else hm.activateHideMode()
-              },
-            })
-          }
-          if (commentsAuth?.isAuthenticated()) {
-            children.push({
-              id: 'core/logout',
-              label: 'Logout (remove token)',
-              type: 'default',
-              execute: () => {
-                commentsAuth.clearToken()
-                console.log('[storyboard] Token removed')
-              },
-            })
-          }
-          return children
-        },
-      })
-    }
+    for (const [toolId, toolConfig] of Object.entries(toolConfigs as Record<string, any>)) {
+      // Skip non-tool entries (separators have no handler)
+      if (toolConfig.render === 'separator') continue
 
-    try {
-      const ff = await import('./featureFlags.js')
-      registerCommandAction('core/feature-flags', {
-        getChildren: () =>
-          ff.getFlagKeys().map((key: string) => ({
-            id: `flags/${key}`,
-            label: key,
-            type: 'toggle' as const,
-            active: ff.getFlag(key),
-            execute: () => ff.toggleFlag(key),
-          })),
-      })
-    } catch {}
+      // Skip disabled tools — don't load their modules at all
+      if (getToolbarToolState(toolId) === 'disabled') continue
 
-    // Register flow switcher action (dynamic — reads current prototype from URL)
-    try {
-      const loader = await import('./loader.js')
-      const vf = await import('./viewfinder.js')
-
-      registerCommandAction('core/flows', {
-        getChildren: () => {
-          let path = window.location.pathname
-          const base = basePath.replace(/\/+$/, '')
-          if (base && path.startsWith(base)) path = path.slice(base.length)
-          path = path.replace(/\/+$/, '') || '/'
-          const segments = path.split('/').filter(Boolean)
-          const proto = segments[0] || null
-          if (!proto) return []
-
-          // Detect active flow
-          const params = new URLSearchParams(window.location.search)
-          const explicit = params.get('flow') || params.get('scene')
-          let active: string
-          if (explicit) {
-            active = loader.resolveFlowName(proto, explicit)
-          } else {
-            const pageFlow = path === '/' ? 'index' : (path.split('/').pop() || 'index')
-            const scoped = loader.resolveFlowName(proto, pageFlow)
-            if (loader.flowExists(scoped)) active = scoped
-            else {
-              const protoFlow = loader.resolveFlowName(proto, proto)
-              active = loader.flowExists(protoFlow) ? protoFlow : 'default'
-            }
-          }
-
-          return loader.getFlowsForPrototype(proto).map((f: any) => {
-            const meta = vf.getFlowMeta(f.key)
-            return {
-              id: f.key,
-              label: meta?.title || f.name,
-              type: 'radio' as const,
-              active: f.key === active,
-              execute: () => { window.location.href = vf.resolveFlowRoute(f.key) },
-            }
-          })
-        },
-      })
-    } catch {}
+      // Resolve handler module via core:/custom: prefix
+      const handlerRef = toolConfig.handler || `core:${toolId}`
+      const loadModule = resolveHandlerModule(handlerRef, coreHandlers, customHandlers)
+      if (!loadModule) continue
 
-    // Load action menu button (used for any menu with an "action" reference)
-    try {
-      const mod = await import('./ActionMenuButton.svelte')
-      ActionMenuButton = mod.default
-    } catch {}
+      try {
+        const mod = await loadModule()
+        const toolCtx = { ...ctx, config: toolConfig }
 
-    // Load theme menu button
-    try {
-      const mod = await import('./ThemeMenuButton.svelte')
-      ThemeMenuButton = mod.default
-    } catch {}
+        // Run guard — skip if guard returns false
+        if (mod.guard) {
+          const ok = await mod.guard(toolCtx)
+          if (!ok) continue
+        }
 
-    // Load comments menu button
-    try {
-      const { isCommentsEnabled } = await import('./comments/config.js')
-      if (isCommentsEnabled()) {
-        commentsEnabled = true
-        const mod = await import('./CommentsMenuButton.svelte')
-        CommentsMenuButton = mod.default
-      }
-    } catch {}
+        // Run setup
+        if (mod.setup) {
+          const setupResult = await mod.setup(toolCtx)
+          if (setupResult) {
+            toolData[toolId] = setupResult
+          }
+        }
 
-    // Load create menu features
-    const createMenuConfig = allMenus.create
-    try {
-      if (createMenuConfig) {
-        const { features } = await import('./workshop/features/registry.js')
-
-        const createActions = Array.isArray(createMenuConfig.actions) ? createMenuConfig.actions : []
-        createMenuFeatures = createActions
-          .filter((a: any) => a.feature)
-          .map((a: any) => {
-            const feat = (features as Record<string, any>)[a.feature]
-            if (!feat || !feat.overlayId || !feat.overlay) return null
-            return {
-              name: feat.name,
-              label: a.label || feat.label,
-              overlayId: feat.overlayId,
-              overlay: feat.overlay,
-            }
-          })
-          .filter(Boolean)
+        // Register handler as command action
+        if (mod.handler) {
+          const handlerResult = await mod.handler(toolCtx)
+          const actionId = toolConfig.handler || `core:${toolId}`
+          // Store handler result in toolData for component access
+          if (handlerResult && !handlerResult.getChildren) {
+            toolData[toolId] = { ...(toolData[toolId] || {}), ...handlerResult }
+          }
+          registerCommandAction(actionId, handlerResult)
+        }
 
-        if (createMenuFeatures.length > 0) {
-          const mod = await import('./CreateMenuButton.svelte')
-          CreateMenuButton = mod.default
+        // Load component
+        if (mod.component) {
+          const component = await mod.component()
+          toolComponents[toolId] = component
         }
-      }
-    } catch {}
+      } catch { /* tool failed to load — skip gracefully */ }
+    }
 
     // Load side panel component
     try {
@@ -409,12 +445,6 @@
       }
     } catch {}
 
-    // Load canvas create menu
-    try {
-      const mod = await import('./CanvasCreateMenu.svelte')
-      CanvasCreateMenu = mod.default
-    } catch {}
-
     // Listen for canvas mount/unmount events (React↔Svelte bridge)
     document.addEventListener('storyboard:canvas:mounted', handleCanvasMounted)
     document.addEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
@@ -448,20 +478,6 @@
     canvasZoom = (e as CustomEvent).detail?.zoom ?? canvasZoom
   }
 
-  function canvasZoomIn() {
-    const next = Math.min(ZOOM_MAX, canvasZoom + ZOOM_STEP)
-    document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: next } }))
-  }
-
-  function canvasZoomOut() {
-    const next = Math.max(ZOOM_MIN, canvasZoom - ZOOM_STEP)
-    document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: next } }))
-  }
-
-  function canvasZoomReset() {
-    document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: 100 } }))
-  }
-
   // Flow info dialog state — driven by core/show-flow-info action
   let flowDialogOpen = $state(false)
   let flowName = $state('default')
@@ -477,41 +493,29 @@
 </script>
 
 {#if !isEmbed}
-  {#if visible && canvasActive && CanvasCreateMenu}
+  {#if visible && canvasActive && canvasMenus.length > 0}
     <div
       class="fixed bottom-6 left-6 z-[9999] font-sans flex items-center gap-3"
       role="toolbar"
       aria-label="Canvas toolbar"
     >
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          <CanvasCreateMenu config={canvasToolbarConfig} canvasName={activeCanvasName} tabindex={0} />
-        </Tooltip.Trigger>
-        <Tooltip.Content side="top">Add widget to canvas</Tooltip.Content>
-      </Tooltip.Root>
-
-      <div class="canvas-zoom-bar">
-        <button
-          class="canvas-zoom-btn"
-          onclick={canvasZoomOut}
-          disabled={canvasZoom <= ZOOM_MIN}
-          aria-label="Zoom out"
-          title="Zoom out"
-        >−</button>
-        <button
-          class="canvas-zoom-label"
-          onclick={canvasZoomReset}
-          aria-label="Reset zoom to 100%"
-          title="Reset to 100%"
-        >{canvasZoom}%</button>
-        <button
-          class="canvas-zoom-btn"
-          onclick={canvasZoomIn}
-          disabled={canvasZoom >= ZOOM_MAX}
-          aria-label="Zoom in"
-          title="Zoom in"
-        >+</button>
-      </div>
+      {#each canvasMenus as canvasTool (canvasTool.key)}
+        {#if toolComponents[canvasTool.key]}
+          {@const CanvasToolComponent = toolComponents[canvasTool.key]}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <CanvasToolComponent
+                config={canvasTool}
+                data={toolData[canvasTool.key]}
+                canvasName={activeCanvasName}
+                zoom={canvasZoom}
+                tabindex={0}
+              />
+            </Tooltip.Trigger>
+            <Tooltip.Content side="top">{canvasTool.ariaLabel || canvasTool.key}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+      {/each}
     </div>
   {/if}
   <div
@@ -525,32 +529,47 @@
     bind:this={toolbarEl}
   >
     {#if visible}
-      {#each visibleMenus as menu, i (menu.key)}
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {#if menu.sidepanel}
-              <TriggerButton
-                active={$sidePanelState.open && $sidePanelState.activeTab === menu.sidepanel}
-                size="icon-xl"
-                aria-label={menu.ariaLabel || menu.key}
-                tabindex={getTabindex(i)}
-                onfocus={() => { activeToolbarIndex = i }}
-                onclick={() => togglePanel(menu.sidepanel)}
-              >
-                <Icon name={menu.icon || menu.key} size={16} {...(menu.meta || {})} />
-              </TriggerButton>
-            {:else if menu.action}
-              <ActionMenuButton config={menu} tabindex={getTabindex(i)} />
-            {:else if menu.key === 'create'}
-              <CreateMenuButton features={createMenuFeatures} config={menu} tabindex={getTabindex(i)} />
-            {:else if menu.key === 'comments'}
-              <CommentsMenuButton config={menu} tabindex={getTabindex(i)} />
-            {:else if menu.key === 'theme'}
-              <ThemeMenuButton config={menu} tabindex={getTabindex(i)} />
-            {/if}
-          </Tooltip.Trigger>
-          <Tooltip.Content side="top">{menu.ariaLabel || menu.key}</Tooltip.Content>
-        </Tooltip.Root>
+      {#each cleanedMenus as menu, i (menu.key)}
+        {#if menu.render === 'separator'}
+          <div class="toolbar-separator" aria-hidden="true"></div>
+        {:else}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#if menu.render === 'sidepanel'}
+                {@const toolState = getToolbarToolState(menu.key)}
+                <TriggerButton
+                  active={$sidePanelState.open && $sidePanelState.activeTab === menu.sidepanel}
+                  inactive={toolState === 'inactive'}
+                  dimmed={toolState === 'dimmed'}
+                  localOnly={isToolbarToolLocalOnly(menu.key)}
+                  size="icon-xl"
+                  aria-label={menu.ariaLabel || menu.key}
+                  tabindex={getTabindex(i)}
+                  onfocus={() => { activeToolbarIndex = i }}
+                  onclick={() => togglePanel(menu.sidepanel)}
+                >
+                  <Icon name={menu.icon || menu.key} size={16} {...(menu.meta || {})} />
+                </TriggerButton>
+              {:else if toolComponents[menu.key]}
+                {@const toolState = getToolbarToolState(menu.key)}
+                {@const ToolComponent = toolComponents[menu.key]}
+                <span
+                  data-tool-state={toolState}
+                  data-local-only={isToolbarToolLocalOnly(menu.key) || undefined}
+                  class={toolState === 'inactive' ? 'tool-inactive' : toolState === 'dimmed' ? 'tool-dimmed' : ''}
+                >
+                  <ToolComponent
+                    config={menu}
+                    data={toolData[menu.key]}
+                    tabindex={getTabindex(i)}
+                    localOnly={isToolbarToolLocalOnly(menu.key)}
+                  />
+                </span>
+              {/if}
+            </Tooltip.Trigger>
+            <Tooltip.Content side="top">{menu.ariaLabel || menu.key}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
       {/each}
     {/if}
     {#if commandMenuConfig}
@@ -571,68 +590,52 @@
 {/if}
 
 <style>
-  .canvas-zoom-bar {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    border: 1.5px solid var(--trigger-border, var(--color-slate-400));
-    background: var(--trigger-bg, var(--color-slate-100));
-    overflow: hidden;
-  }
-
-  .canvas-zoom-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 32px;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--trigger-text, var(--color-slate-600));
-    transition: background 120ms;
+  .toolbar-separator {
+    width: 1px;
+    height: 20px;
+    background: var(--trigger-border, var(--color-slate-400));
+    opacity: 0.4;
+    flex-shrink: 0;
   }
 
-  .canvas-zoom-btn:hover:not(:disabled) {
-    background: var(--trigger-bg-hover, var(--color-slate-300));
-  }
-
-  .canvas-zoom-btn:disabled {
+  .default-button-dimmed {
     opacity: 0.3;
-    cursor: default;
+    transition: opacity 200ms;
   }
 
-  .canvas-zoom-label {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 48px;
-    height: 32px;
-    padding: 0 4px;
-    font-size: 11px;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    color: var(--trigger-text, var(--color-slate-600));
-    border-left: 1.5px solid var(--trigger-border, var(--color-slate-400));
-    border-right: 1.5px solid var(--trigger-border, var(--color-slate-400));
-    transition: background 120ms;
+  .default-button-dimmed:hover,
+  .default-button-dimmed:focus-within {
+    opacity: 1;
   }
 
-  .canvas-zoom-label:hover {
-    background: var(--trigger-bg-hover, var(--color-slate-300));
+  .tool-inactive {
+    opacity: 0.45;
+    pointer-events: none;
   }
-
-  .default-button-dimmed {
+  .tool-dimmed {
     opacity: 0.3;
     transition: opacity 200ms;
   }
-
-  .default-button-dimmed:hover,
-  .default-button-dimmed:focus-within {
+  .tool-dimmed:hover,
+  .tool-dimmed:focus-within {
     opacity: 1;
   }
+  [data-local-only] {
+    position: relative;
+  }
+  [data-local-only]::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 8px;
+    height: 8px;
+    background: hsl(137, 66%, 30%);
+    border-radius: 50%;
+    border: 2px solid var(--sc-border-color, transparent);
+    box-sizing: content-box;
+    pointer-events: none;
+    z-index: 1;
+  }
 </style>