@dfosco/storyboard-core 3.3.1 → 3.4.0

package/src/CreateMenuButton.svelte

@@ -33,11 +33,15 @@
 
   interface Props {
     features?: CreateMenuFeature[]
+    data?: { features?: CreateMenuFeature[] }
     config?: CreateMenuConfig
     tabindex?: number
   }
 
-  let { features = [], config = { label: 'Create' }, tabindex }: Props = $props()
+  let { features: featuresProp = [], data, config = { label: 'Create' }, tabindex }: Props = $props()
+
+  // Support both direct `features` prop (legacy) and `data.features` (generic toolbar)
+  const features = $derived(featuresProp.length > 0 ? featuresProp : (data?.features || []))
 
   const menuWidth = $derived((config as any).menuWidth || null)
 
@@ -110,7 +114,7 @@
         <DropdownMenu.Separator />
       {:else if action.type === 'footer'}
         <DropdownMenu.Separator />
-        <div class="px-2 py-1.5 text-xs text-muted-foreground">{action.label}</div>
+        <div class="px-2 py-1.5 text-xs text-muted-foreground flex flex-row items-baseline"><span class="inline-flex w-2 h-2 rounded-full mr-1.5" style="background: hsl(137, 66%, 30%)"></span>Only available in dev environment</div>
       {:else if action._feature}
         <DropdownMenu.Item onclick={() => showOverlay(action._feature.overlayId)}>
           {action.label || action._feature.label}

package/src/InspectorPanel.svelte

@@ -109,21 +109,23 @@
     return null
   }
 
+  const _isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+
   /**
    * Fetch source file content — uses dev middleware in dev, static JSON in prod.
-   * Uses runtime detection (not import.meta.env.DEV) so this works in the
-   * pre-compiled UI bundle where compile-time env vars are baked in.
    */
   async function fetchSourceContent(filePath) {
-    // Try the dev middleware first — works when Vite server plugin is active
-    try {
-      const res = await fetch(`/_storyboard/docs/source?path=${encodeURIComponent(filePath)}`)
-      if (res.ok) {
-        const json = await res.json()
-        return json?.content || ''
-      }
-    } catch {}
-    // Fall back to static inspector JSON for deployed/production builds
+    // In local dev, use the live middleware (reads from disk)
+    if (_isLocalDev) {
+      try {
+        const res = await fetch(`/_storyboard/docs/source?path=${encodeURIComponent(filePath)}`)
+        if (res.ok) {
+          const json = await res.json()
+          return json?.content || ''
+        }
+      } catch {}
+    }
+    // In production (or if dev middleware failed), use static build-time JSON
     const data = await loadStaticData()
     return data?.sources?.[filePath] || ''
   }
@@ -343,7 +345,7 @@
                 lang: getLang(path),
                 theme: 'github-dark',
                 decorations: matchedLine > 0
-                  ? [{ start: { line: matchedLine - 1, character: 0 }, end: { line: matchedLine, character: 0 }, properties: { class: 'highlighted-line' } }]
+                  ? [{ start: { line: matchedLine - 1, character: 0 }, end: { line: matchedLine - 1, character: Infinity }, properties: { class: 'highlighted-line' } }]
                   : [],
               })
             } catch {
@@ -427,26 +429,28 @@
       onDeactivate: handleDeactivate,
     })
 
-    // Pre-fetch file list and repo info FIRST (needed for source resolution)
-    // Try dev middleware first, fall back to static JSON
+    // Pre-fetch file list and repo info
+    // In local dev, try dev middleware; in production, go straight to static JSON
     let filesLoaded = false
-    try {
-      const [filesRes, repoRes] = await Promise.all([
-        fetch('/_storyboard/docs/files'),
-        fetch('/_storyboard/docs/repo'),
-      ])
-      if (filesRes.ok) {
-        const data = await filesRes.json()
-        knownFiles = data.files || []
-        filesLoaded = true
-      }
-      if (repoRes.ok) {
-        repoInfo = await repoRes.json()
-      }
-    } catch {}
+    if (_isLocalDev) {
+      try {
+        const [filesRes, repoRes] = await Promise.all([
+          fetch('/_storyboard/docs/files'),
+          fetch('/_storyboard/docs/repo'),
+        ])
+        if (filesRes.ok) {
+          const data = await filesRes.json()
+          knownFiles = data.files || []
+          filesLoaded = true
+        }
+        if (repoRes.ok) {
+          repoInfo = await repoRes.json()
+        }
+      } catch {}
+    }
 
     if (!filesLoaded) {
-      // Fall back to static build-time JSON
+      // Use static build-time JSON
       const data = await loadStaticData()
       if (data) {
         knownFiles = data.files || []
@@ -572,9 +576,9 @@
                 {:else if sourceCode}
                   <div class="flex-1 min-h-0 overflow-y-auto source-scroll-container" bind:this={sourceContainer}>
                     {#if highlightedHtml}
-                      <div class="shiki-wrapper">{@html highlightedHtml}</div>
+                      <div class="code-wrapper line-numbers">{@html highlightedHtml}</div>
                     {:else}
-                      <pre class="m-0 text-xs leading-relaxed inspector-mono source-pre" style:color="#c9d1d9">{sourceCode}</pre>
+                      <pre class="m-0 text-xs leading-relaxed inspector-mono source-pre line-numbers"><code>{#each sourceCode.split('\n') as line, i}<span class="line{matchedLine > 0 && i + 1 === matchedLine ? ' highlighted-line' : ''}">{line}</span>{#if i < sourceCode.split('\n').length - 1}{'\n'}{/if}{/each}</code></pre>
                     {/if}
                   </div>
                 {:else}
@@ -627,9 +631,54 @@
   .source-pre {
     background: transparent;
     tab-size: 2;
+    padding: 12px 0;
+    color: #c9d1d9;
+    overflow-x: auto;
+  }
+
+  .source-pre code {
+    font-family: inherit;
+    display: block;
+  }
+
+  .source-pre .line {
+    padding: 0 12px 0 0;
+    display: inline-block;
+    width: 100%;
+    min-height: 1.5em;
+  }
+
+  .source-pre .line:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .source-pre :global(.highlighted-line) {
+    background: color-mix(in srgb, var(--color-purple, #7655a4) 20%, transparent);
+    border-left: 2px solid var(--color-purple, #7655a4);
+    padding-left: 10px;
+  }
+
+  /* Line numbers via CSS counters — works for both highlight.js and plain-text */
+  .line-numbers :global(code) {
+    counter-reset: line;
+  }
+
+  .line-numbers :global(.line) {
+    padding-left: 0 !important;
+  }
+
+  .line-numbers :global(.line::before) {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 3.5ch;
+    margin-right: 1.5ch;
+    text-align: right;
+    color: #484f58;
+    user-select: none;
   }
 
-  .shiki-wrapper :global(pre) {
+  .code-wrapper :global(pre) {
     margin: 0;
     padding: 12px 0;
     font-size: 12px;
@@ -640,25 +689,26 @@
     overflow-x: auto;
   }
 
-  .shiki-wrapper :global(code) {
+  .code-wrapper :global(code) {
     font-family: inherit;
     display: block;
   }
 
-  .shiki-wrapper :global(.line) {
-    padding: 0 12px;
+  .code-wrapper :global(.line) {
+    padding: 0 12px 0 0;
     display: inline-block;
     width: 100%;
     min-height: 1.5em;
   }
 
-  .shiki-wrapper :global(.line:hover) {
+  .code-wrapper :global(.line:hover) {
     background: rgba(255, 255, 255, 0.04);
   }
 
-  .shiki-wrapper :global(.highlighted-line) {
+  .code-wrapper :global(.highlighted-line) {
     background: color-mix(in srgb, var(--color-purple, #7655a4) 20%, transparent);
     border-left: 2px solid var(--color-purple, #7655a4);
+    padding-left: 10px;
   }
 
   /* Force dark chrome on the code block — independent of page theme */

package/src/SidePanel.svelte

@@ -320,7 +320,7 @@
     left: 0;
     right: 0;
     height: 3px;
-    background: var(--mode-color, var(--borderColor-default, var(--color-border, #d0d7de)));
+    /* background: var(--mode-color, var(--borderColor-default, var(--color-border, #d0d7de))); */
   }
 
   /* Drag handle — side mode (left edge, vertical) */

package/src/ThemeMenuButton.svelte

@@ -1,15 +1,15 @@
 <!--
   ThemeMenuButton — toolbar dropdown for switching the app color scheme.
 
-  Renders a radio group of theme options (System, Light, Dark, etc.)
-  and persists the selection via the themeStore.
+  Renders a radio group of theme options (System, Light, Dark, etc.),
+  followed by a separator and "Theme settings" submenu with sync toggles.
 -->
 
 <script lang="ts">
   import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
   import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
   import Icon from './svelte-plugin-ui/components/Icon.svelte'
-  import { themeState, setTheme, THEMES, type ThemeValue } from './stores/themeStore.js'
+  import { themeState, setTheme, THEMES, type ThemeValue, themeSyncState, setThemeSyncTarget, type ThemeSyncTargets } from './stores/themeStore.js'
 
   interface Props {
     config?: {
@@ -30,6 +30,11 @@
     setTheme(value)
     menuOpen = false
   }
+
+  function handleSyncToggle(e: Event, target: keyof ThemeSyncTargets) {
+    e.preventDefault()
+    setThemeSyncTarget(target, !$themeSyncState[target])
+  }
 </script>
 
 <DropdownMenu.Root bind:open={menuOpen}>
@@ -62,5 +67,32 @@
         </DropdownMenu.RadioItem>
       {/each}
     </DropdownMenu.RadioGroup>
+
+    <DropdownMenu.Separator />
+
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>Theme settings</DropdownMenu.SubTrigger>
+      <DropdownMenu.SubContent class="min-w-[180px]">
+        <DropdownMenu.Label>Apply theme to</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem
+          checked={$themeSyncState.prototype}
+          onSelect={(e) => handleSyncToggle(e, 'prototype')}
+        >
+          Prototype
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
+          checked={$themeSyncState.toolbar}
+          onSelect={(e) => handleSyncToggle(e, 'toolbar')}
+        >
+          Toolbar
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
+          checked={$themeSyncState.codeBoxes}
+          onSelect={(e) => handleSyncToggle(e, 'codeBoxes')}
+        >
+          Code boxes
+        </DropdownMenu.CheckboxItem>
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
   </DropdownMenu.Content>
 </DropdownMenu.Root>

package/src/commandActions.js

@@ -192,6 +192,8 @@ export function getActionsForMode(mode) {
       label: a.label,
       type: a.type || 'default',
       url: a.url || null,
+      toolKey: a.toolKey || null,
+      localOnly: a.localOnly || false,
       handler,
       active,
     }
@@ -224,6 +226,18 @@ export function getActionChildren(id) {
   return handler.getChildren()
 }
 
+/**
+ * Check if a handler provides dynamic children (getChildren).
+ * Used by CoreUIBar to distinguish action-menu tools (gate on children count)
+ * from custom-component menus (always visible, render their own content).
+ * @param {string} id
+ * @returns {boolean}
+ */
+export function hasChildrenProvider(id) {
+  const handler = _handlers.get(id)
+  return !!handler?.getChildren
+}
+
 // ---------------------------------------------------------------------------
 // Reactivity
 // ---------------------------------------------------------------------------

package/src/core-ui-colors.css

@@ -1,8 +1,10 @@
 /**
- * Core UI Colors — always light-mode.
+ * Core UI Colors — toolbar theme tokens.
  *
  * The CoreUIBar and its children (trigger buttons, dropdowns, menus)
- * are locked to light-mode colors regardless of the page's theme.
+ * default to light-mode colors. When the user enables toolbar theme sync,
+ * `data-sb-toolbar-theme` switches to the active theme and dark tokens
+ * are applied.
  *
  * These override the shadcn/Tailwind design tokens within the
  * [data-core-ui-bar] scope so that CSS custom-property dark-mode
@@ -16,6 +18,7 @@
  * classes) so its scoped CSS has full control over background/color.
  */
 
+/* Default: light tokens */
 [data-core-ui-bar],
 [data-slot="dropdown-menu-content"],
 [data-slot="dropdown-menu-sub-content"] {
@@ -37,3 +40,28 @@
   --color-border: hsl(214.3 31.8% 91.4%);
   --color-input: hsl(214.3 31.8% 91.4%);
 }
+
+/* Dark tokens — applied when toolbar syncs with a dark theme.
+ * Uses Primer-aligned colors (matching base.css --sb-* dark tokens)
+ * instead of generic shadcn dark values.
+ */
+:root[data-sb-toolbar-theme^="dark"] [data-core-ui-bar],
+:root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-content"],
+:root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-sub-content"] {
+  color-scheme: dark;
+
+  --color-background: #161b22;
+  --color-foreground: #e6edf3;
+  --color-popover: #161b22;
+  --color-popover-foreground: #e6edf3;
+  --color-primary: #e6edf3;
+  --color-primary-foreground: #161b22;
+  --color-secondary: #21262d;
+  --color-secondary-foreground: #e6edf3;
+  --color-muted: #21262d;
+  --color-muted-foreground: #8b949e;
+  --color-accent: #21262d;
+  --color-accent-foreground: #e6edf3;
+  --color-border: #30363d;
+  --color-input: #30363d;
+}

package/src/devtools.js

@@ -22,6 +22,8 @@ let skipLink = null
  * @param {object} [options]
  * @param {HTMLElement} [options.container=document.body] - Where to mount
  * @param {string} [options.basePath='/'] - Base URL path
+ * @param {object} [options.toolbarConfig] - Merged toolbar config
+ * @param {Record<string, () => Promise<any>>} [options.customHandlers] - Custom tool handlers
  */
 export async function mountDevTools(options = {}) {
   const container = options.container || document.body
@@ -108,7 +110,11 @@ export async function mountDevTools(options = {}) {
 
   instance = mount(CoreUIBar, {
     target: wrapper,
-    props: { basePath, toolbarConfig: options.toolbarConfig },
+    props: {
+      basePath,
+      toolbarConfig: options.toolbarConfig,
+      customHandlers: options.customHandlers,
+    },
   })
 }
 

package/src/index.js

@@ -68,7 +68,7 @@ export { resolveSceneRoute, getSceneMeta } from './viewfinder.js'
 export { initFeatureFlags, getFlag, setFlag, toggleFlag, getAllFlags, resetFlags, getFlagKeys, syncFlagBodyClasses } from './featureFlags.js'
 
 // Command actions (config-driven command menu entries)
-export { initCommandActions, registerCommandAction, unregisterCommandAction, setDynamicActions, clearDynamicActions, getActionsForMode, executeAction, getActionChildren, subscribeToCommandActions, getCommandActionsSnapshot, setRoutingBasePath, isExcludedByRoute } from './commandActions.js'
+export { initCommandActions, registerCommandAction, unregisterCommandAction, setDynamicActions, clearDynamicActions, getActionsForMode, executeAction, getActionChildren, hasChildrenProvider, subscribeToCommandActions, getCommandActionsSnapshot, setRoutingBasePath, isExcludedByRoute } from './commandActions.js'
 
 // Plugin configuration
 export { initPlugins, isPluginEnabled, getPluginsConfig } from './plugins.js'
@@ -76,5 +76,14 @@ export { initPlugins, isPluginEnabled, getPluginsConfig } from './plugins.js'
 // UI config (project-level chrome overrides)
 export { initUIConfig, isMenuHidden, getHiddenItems } from './uiConfig.js'
 
+// Tool registry (declarative tool system)
+export { initToolRegistry, registerToolModule, setToolComponent, setToolGuardResult, getToolComponent, getToolModule, getToolsForToolbar, getToolConfig, getAllToolConfigs, subscribeToToolRegistry, getToolRegistrySnapshot } from './toolRegistry.js'
+
+// Toolbar config store (reactive layered overrides: core → custom → prototype → user)
+export { initToolbarConfig, setPrototypeToolbarConfig, clearPrototypeToolbarConfig, getToolbarConfig, subscribeToToolbarConfig, getToolbarConfigSnapshot } from './toolbarConfigStore.js'
+
+// Toolbar tool state management (runtime state for toolbar tools)
+export { TOOL_STATES, initToolbarToolStates, setToolbarToolState, getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates, getToolbarToolStatesSnapshot } from './toolStateStore.js'
+
 // Comments system
 export { initCommentsConfig, getCommentsConfig, isCommentsEnabled } from './comments/config.js'

package/src/inspector/fiberWalker.js

@@ -50,6 +50,8 @@ function isUserComponent(fiber) {
 /**
  * Derive a human-readable name from a fiber's type.
  * Handles plain components, forwardRef, and memo wrappers.
+ * Skips minified names (single-char or generic) in favor of 'ForwardRef'/'Memo'
+ * so the caller can try walking up the tree for a better name.
  *
  * @param {object} fiber
  * @returns {string}
@@ -59,20 +61,43 @@ function getComponentName(fiber) {
   const t = fiber.type
   // Plain function/class
   if (typeof t === 'function') return t.displayName || t.name || 'Anonymous'
-  // forwardRef
+  // forwardRef / memo wrapper objects
   if (typeof t === 'object' && t !== null) {
     if (t.displayName) return t.displayName
-    if (typeof t.render === 'function') return t.render.displayName || t.render.name || 'ForwardRef'
-    // memo
+    // forwardRef: { render: fn }
+    if (typeof t.render === 'function') {
+      const name = t.render.displayName || t.render.name
+      return isUsableName(name) ? name : 'ForwardRef'
+    }
+    // memo: { type: ... }
     if (t.type) {
       const inner = t.type
-      if (typeof inner === 'function') return inner.displayName || inner.name || 'Memo'
-      if (typeof inner === 'object' && inner.render) return inner.render.displayName || inner.render.name || 'Memo'
+      if (typeof inner === 'function') {
+        const name = inner.displayName || inner.name
+        return isUsableName(name) ? name : 'Memo'
+      }
+      // memo(forwardRef)
+      if (typeof inner === 'object' && inner.render) {
+        if (inner.displayName) return inner.displayName
+        const name = inner.render.displayName || inner.render.name
+        return isUsableName(name) ? name : 'ForwardRef'
+      }
     }
   }
   return 'Unknown'
 }
 
+/**
+ * Check if a resolved component name is usable (not minified).
+ * Minified names are typically 1-2 chars or all lowercase short strings.
+ */
+function isUsableName(name) {
+  if (!name) return false
+  // Single-char names (e, t, r, n) are almost certainly minified
+  if (name.length <= 2) return false
+  return true
+}
+
 /**
  * Extract debug source info from a fiber (dev builds only).
  *
@@ -133,10 +158,28 @@ export function getComponentInfo(fiber) {
 
   if (!current) return null
 
+  let name = getComponentName(current)
+
+  // If we got a generic name (ForwardRef, Memo), try walking up
+  // to find the nearest ancestor with a real component name
+  if (name === 'ForwardRef' || name === 'Memo') {
+    let ancestor = current.return
+    while (ancestor) {
+      if (isUserComponent(ancestor)) {
+        const ancestorName = getComponentName(ancestor)
+        if (ancestorName !== 'ForwardRef' && ancestorName !== 'Memo' && ancestorName !== 'Unknown') {
+          name = ancestorName
+          break
+        }
+      }
+      ancestor = ancestor.return
+    }
+  }
+
   const ownerFiber = current._debugOwner ?? null
 
   return {
-    name: getComponentName(current),
+    name,
     props: current.memoizedProps ?? {},
     source: getDebugSource(current),
     owner: ownerFiber ? getComponentName(ownerFiber) : null,