@dfosco/storyboard-core 4.2.0-beta.3 → 4.2.0

package/src/tools/handlers/canvasAgents.js

@@ -0,0 +1,20 @@
+/**
+ * Canvas agents tool module — dropdown menu for adding agent widgets to canvas.
+ *
+ * Renders agent options from canvas.agents config. Only active on canvas pages
+ * when agents are configured.
+ */
+export const id = 'canvas-agents'
+
+export async function guard(_ctx) {
+  void _ctx
+  const { getConfig } = await import('@dfosco/storyboard-core')
+  const canvasConfig = getConfig('canvas')
+  const agents = canvasConfig?.agents
+  return agents && typeof agents === 'object' && Object.keys(agents).length > 0
+}
+
+export async function component() {
+  const mod = await import('../../CanvasAgentsMenu.jsx')
+  return mod.default
+}

package/src/tools/handlers/canvasToolbar.js

@@ -5,13 +5,13 @@
  * handler. The component() export returns the component matching the tool's
  * render type, resolved at load time via the toolConfig passed to component().
  */
-export const id = 'canvas-toolbar'
+import { getCanvasZoom } from '@dfosco/storyboard-core'
 
-const ZOOM_STEP = 10
-const ZOOM_MIN = 25
-const ZOOM_MAX = 200
+export const id = 'canvas-toolbar'
 
 export async function handler() {
+  const { min: ZOOM_MIN, max: ZOOM_MAX, step: ZOOM_STEP } = getCanvasZoom()
+
   return {
     zoomIn(currentZoom) {
       const next = Math.min(ZOOM_MAX, currentZoom + ZOOM_STEP)
@@ -42,10 +42,10 @@ export async function handler() {
 }
 
 const componentMap = {
-  'canvas-zoom':        () => import('../../CanvasZoomControl.svelte'),
-  'canvas-zoom-to-fit': () => import('../../CanvasZoomToFit.svelte'),
-  'canvas-undo-redo':   () => import('../../CanvasUndoRedo.svelte'),
-  'canvas-snap':        () => import('../../CanvasSnap.svelte'),
+  'canvas-zoom':        () => import('../../CanvasZoomControl.jsx'),
+  'canvas-zoom-to-fit': () => import('../../CanvasZoomToFit.jsx'),
+  'canvas-undo-redo':   () => import('../../CanvasUndoRedo.jsx'),
+  'canvas-snap':        () => import('../../CanvasSnap.jsx'),
 }
 
 export async function component(renderType) {

package/src/tools/handlers/commandPalette.js

@@ -0,0 +1,9 @@
+/**
+ * Command Palette tool — toolbar button that opens the ⌘K command palette.
+ */
+export const id = 'command-palette'
+
+export async function component() {
+  const mod = await import('../../CommandPaletteTrigger.jsx')
+  return mod.default
+}

package/src/tools/handlers/comments.js

@@ -6,11 +6,11 @@
 export const id = 'comments'
 
 export async function guard() {
-  const { isCommentsEnabled } = await import('../../comments/config.js')
+  const { isCommentsEnabled } = await import('@dfosco/storyboard-core')
   return isCommentsEnabled()
 }
 
 export async function component() {
-  const mod = await import('../../CommentsMenuButton.svelte')
+  const mod = await import('../../CommentsMenuButton.jsx')
   return mod.default
 }

package/src/tools/handlers/create.js

@@ -34,6 +34,6 @@ export async function guard(ctx) {
 }
 
 export async function component() {
-  const mod = await import('../../CreateMenuButton.svelte')
+  const mod = await import('../../CreateMenuButton.jsx')
   return mod.default
 }

package/src/tools/handlers/devtools.js

@@ -19,11 +19,11 @@ export async function handler(ctx) {
   let commentsAuth = null
   let prodMode = null
   let ff = null
-  try { loader = await import('../../loader.js') } catch { /* optional */ }
-  try { hm = await import('../../hideMode.js') } catch { /* optional */ }
+  try { loader = await import('@dfosco/storyboard-core') } catch { /* optional */ }
+  try { hm = await import('@dfosco/storyboard-core') } catch { /* optional */ }
   try { commentsAuth = await import('../../comments/auth.js') } catch { /* optional */ }
   try { prodMode = await import('../../prodMode.js') } catch { /* optional */ }
-  try { ff = await import('../../featureFlags.js') } catch { /* optional */ }
+  try { ff = await import('@dfosco/storyboard-core') } catch { /* optional */ }
 
   return {
     getChildren: () => {
@@ -100,6 +100,22 @@ export async function handler(ctx) {
           execute: () => { ff.toggleFlag('dev-logs') },
         })
       }
+      if (ff) {
+        children.push({
+          id: 'core/canvas-auto-reload',
+          label: 'Canvas auto-reload',
+          type: 'toggle',
+          active: ff.getFlag('canvas-auto-reload'),
+          execute: () => { ff.toggleFlag('canvas-auto-reload') },
+        })
+        children.push({
+          id: 'core/prototype-auto-reload',
+          label: 'Prototype auto-reload',
+          type: 'toggle',
+          active: ff.getFlag('prototype-auto-reload'),
+          execute: () => { ff.toggleFlag('prototype-auto-reload') },
+        })
+      }
       return children
     },
   }

package/src/tools/handlers/devtools.test.js

@@ -4,6 +4,14 @@ function getProdModeItem(children) {
   return children.find(item => item.id === 'core/prod-mode')
 }
 
+function getCanvasAutoReloadItem(children) {
+  return children.find(item => item.id === 'core/canvas-auto-reload')
+}
+
+function getPrototypeAutoReloadItem(children) {
+  return children.find(item => item.id === 'core/prototype-auto-reload')
+}
+
 describe('devtools production mode toggle', () => {
   const originalLocalDev = window.__SB_LOCAL_DEV__
 
@@ -47,3 +55,33 @@ describe('devtools production mode toggle', () => {
     expect(prodModeItem).toBeUndefined()
   })
 })
+
+describe('devtools canvas auto-reload toggle', () => {
+  beforeEach(() => {
+    window.history.replaceState({}, '', '/')
+  })
+
+  it('shows the toggle as inactive by default (guard ON)', async () => {
+    const devtools = await createDevtoolsHandler({})
+    const item = getCanvasAutoReloadItem(devtools.getChildren())
+
+    expect(item).toBeTruthy()
+    expect(item.type).toBe('toggle')
+    expect(item.active).toBe(false)
+  })
+})
+
+describe('devtools prototype auto-reload toggle', () => {
+  beforeEach(() => {
+    window.history.replaceState({}, '', '/')
+  })
+
+  it('shows the toggle as active by default (reloads enabled)', async () => {
+    const devtools = await createDevtoolsHandler({})
+    const item = getPrototypeAutoReloadItem(devtools.getChildren())
+
+    expect(item).toBeTruthy()
+    expect(item.type).toBe('toggle')
+    expect(item.active).toBe(true)
+  })
+})

package/src/tools/handlers/featureFlags.js

@@ -6,7 +6,7 @@
 export const id = 'feature-flags'
 
 export async function handler() {
-  const ff = await import('../../featureFlags.js')
+  const ff = await import('@dfosco/storyboard-core')
 
   return {
     getChildren: () =>

package/src/tools/handlers/flows.js

@@ -7,8 +7,8 @@
 export const id = 'flows'
 
 export async function handler(ctx) {
-  const loader = await import('../../loader.js')
-  const vf = await import('../../viewfinder.js')
+  const loader = await import('@dfosco/storyboard-core')
+  const vf = loader
   const { basePath = '/' } = ctx
 
   return {
@@ -63,6 +63,6 @@ export async function handler(ctx) {
 }
 
 export async function component() {
-  const mod = await import('../../ActionMenuButton.svelte')
+  const mod = await import('../../ActionMenuButton.jsx')
   return mod.default
 }

package/src/tools/handlers/hideChrome.js

@@ -0,0 +1,9 @@
+/**
+ * Hide Chrome tool — toolbar button that toggles toolbar/branch bar visibility.
+ */
+export const id = 'hide-chrome'
+
+export async function component() {
+  const mod = await import('../../HideChromeTrigger.jsx')
+  return mod.default
+}

package/src/tools/handlers/paletteTheme.js

@@ -0,0 +1,35 @@
+/**
+ * Palette Theme tool — theme submenu for the command palette.
+ *
+ * Returns theme options as children, plus a "Theme settings" entry
+ * that opens the toolbar Theme menu with the settings submenu expanded.
+ */
+export const id = 'palette-theme'
+
+export async function handler() {
+  const { themeState, setTheme, THEMES } = await import('@dfosco/storyboard-core')
+
+  return {
+    getChildren() {
+      const current = themeState.theme
+      return [
+        // Theme options
+        ...THEMES.map(t => ({
+          id: `theme:${t.value}`,
+          label: t.name,
+          type: 'toggle',
+          active: current === t.value,
+          execute: () => setTheme(t.value),
+        })),
+        // "Theme settings" opens the toolbar theme menu at the settings submenu
+        {
+          id: 'theme:settings',
+          label: 'Theme settings',
+          execute: () => {
+            document.dispatchEvent(new CustomEvent('storyboard:open-theme-settings'))
+          },
+        },
+      ]
+    },
+  }
+}

package/src/tools/handlers/theme.js

@@ -4,6 +4,6 @@
 export const id = 'theme'
 
 export async function component() {
-  const mod = await import('../../ThemeMenuButton.svelte')
+  const mod = await import('../../ThemeMenuButton.jsx')
   return mod.default
 }

package/src/tools/registry.js

@@ -7,16 +7,19 @@
 export const coreHandlers = {
   create:               () => import('./handlers/create.js'),
   theme:                () => import('./handlers/theme.js'),
+  'palette-theme':      () => import('./handlers/paletteTheme.js'),
   comments:             () => import('./handlers/comments.js'),
   flows:                () => import('./handlers/flows.js'),
-  docs:                 () => import('./handlers/docs.js'),
   inspector:            () => import('./handlers/inspector.js'),
   devtools:             () => import('./handlers/devtools.js'),
   'feature-flags':      () => import('./handlers/featureFlags.js'),
   autosync:             () => import('./handlers/autosync.js'),
   'canvas-add-widget':  () => import('./handlers/canvasAddWidget.js'),
+  'canvas-agents':      () => import('./handlers/canvasAgents.js'),
   'canvas-toolbar':     () => import('./handlers/canvasToolbar.js'),
   'hide-toolbars':      () => import('./handlers/hideToolbars.js'),
+  'command-palette':    () => import('./handlers/commandPalette.js'),
+  'hide-chrome':        () => import('./handlers/hideChrome.js'),
 }
 
 // Keep legacy export name for backward compatibility

package/src/tools/surfaces/commandList.js

@@ -1,10 +1,10 @@
 /**
- * Command List surface — items rendered inside the ⌘K command menu.
+ * Command Palette surface — items rendered inside the ⌘K command palette.
  *
  * Tools here appear as menu items, submenus, or links within
  * the command palette. They don't render as standalone buttons.
  */
-export const id = 'command-list'
-export const label = 'Command Menu'
+export const id = 'command-palette'
+export const label = 'Command Palette'
 export const position = 'overlay'
 export const renderTypes = ['link', 'submenu']

package/src/tools/surfaces/mainToolbar.js

@@ -1,11 +1,11 @@
 /**
- * Main Toolbar surface — the primary floating bar at bottom-right.
+ * Command Toolbar surface — the primary floating bar at bottom-right.
  *
  * Supports all standard render types. Tools appear in reverse JSON order
  * (first in config = leftmost in toolbar). The command menu button is
  * always the rightmost item and is not a tool.
  */
-export const id = 'main-toolbar'
-export const label = 'Main Toolbar'
+export const id = 'command-toolbar'
+export const label = 'Command Toolbar'
 export const position = 'bottom-right'
 export const renderTypes = ['button', 'menu', 'sidepanel', 'separator']

package/src/tools/surfaces/registry.js

@@ -7,13 +7,13 @@
  * To add a new surface:
  * 1. Create a definition file in this directory
  * 2. Export it from this registry
- * 3. Add rendering logic in CoreUIBar.svelte
+ * 3. Add rendering logic in CoreUIBar.jsx
  */
-export { id as mainToolbar } from './mainToolbar.js'
+export { id as commandToolbar } from './mainToolbar.js'
 export { id as canvasToolbar } from './canvasToolbar.js'
-export { id as commandList } from './commandList.js'
+export { id as commandPalette } from './commandList.js'
 
 /**
  * All surface IDs for validation.
  */
-export const SURFACE_IDS = ['main-toolbar', 'canvas-toolbar', 'command-list']
+export const SURFACE_IDS = ['command-toolbar', 'canvas-toolbar', 'command-palette']

package/src/ui/design-modes.ts

@@ -12,9 +12,9 @@
  */
 
 import { mountSveltePlugin, type PluginHandle } from '../svelte-plugin-ui/mount.js'
-import ModeSwitch from '../svelte-plugin-ui/components/ModeSwitch.svelte'
+import ModeSwitch from '../svelte-plugin-ui/components/ModeSwitch.jsx'
 // TODO: Re-enable after migrating devtools features into tool registry
-// import ToolbarShell from '../svelte-plugin-ui/components/ToolbarShell.svelte'
+// import ToolbarShell from '../svelte-plugin-ui/components/ToolbarShell.jsx'
 
 let handles: PluginHandle[] = []
 

package/src/ui/viewfinder.ts

@@ -15,7 +15,7 @@
  */
 
 import { mountSveltePlugin, type PluginHandle } from '../svelte-plugin-ui/mount.js'
-import Viewfinder from '../svelte-plugin-ui/components/Viewfinder.svelte'
+import Viewfinder from '../svelte-plugin-ui/components/Viewfinder.jsx'
 
 export interface ViewfinderProps {
   title?: string