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

package/src/comments/ui/commentWindow.js

@@ -1,13 +1,14 @@
 /**
- * Comment window — Svelte popup that shows a comment thread with replies and reactions.
+ * Comment window — React popup that shows a comment thread with replies and reactions.
  *
  * Opens when clicking a comment pin. Shows comment body, author, replies,
  * reply input, reactions, and supports drag-to-move.
  * Styled with Tachyons + sb-* custom classes for light/dark mode support.
  */
 
-import { mount, unmount } from 'svelte'
-import CommentWindowComponent from './CommentWindow.svelte'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import CommentWindowComponent from './CommentWindow.jsx'
 import { getCachedUser } from '../auth.js'
 import { saveDraft, replyDraftKey } from '../commentDrafts.js'
 import './comment-layout.css'
@@ -50,17 +51,17 @@ export function showCommentWindow(container, comment, discussion, callbacks = {}
 
   container.appendChild(win)
 
-  let instance = null
+  let root = null
 
   function destroy() {
-    // Save reply draft from DOM before Svelte unmounts
+    // Save reply draft from DOM before React unmounts
     const textarea = win.querySelector('textarea[placeholder="Reply…"]')
     const val = textarea?.value?.trim()
     if (val) {
       saveDraft(replyDraftKey(comment.id), { type: 'reply', text: textarea.value })
     }
 
-    if (instance) { unmount(instance); instance = null }
+    if (root) { root.unmount(); root = null }
     win.remove()
     if (activeWindow?.el === win) activeWindow = null
     const currentUrl = new URL(window.location.href)
@@ -69,17 +70,15 @@ export function showCommentWindow(container, comment, discussion, callbacks = {}
     callbacks.onClose?.()
   }
 
-  instance = mount(CommentWindowComponent, {
-    target: win,
-    props: {
-      comment,
-      discussion,
-      user,
-      winEl: win,
-      onClose: destroy,
-      onMove: () => callbacks.onMove?.(),
-    },
-  })
+  root = createRoot(win)
+  root.render(createElement(CommentWindowComponent, {
+    comment,
+    discussion,
+    user,
+    winEl: win,
+    onClose: destroy,
+    onMove: () => callbacks.onMove?.(),
+  }))
 
   // Adjust position to keep window within viewport
   requestAnimationFrame(() => {

package/src/comments/ui/commentsDrawer.js

@@ -1,13 +1,14 @@
 /**
- * Comments drawer — Svelte right-side panel listing all comments across all routes.
+ * Comments drawer — React right-side panel listing all comments across all routes.
  *
  * Opened from the DevTools "See all comments" menu item.
  * Clicking a comment navigates to its route and opens it.
  * Styled with Tachyons + sb-* custom classes for light/dark mode support.
  */
 
-import { mount, unmount } from 'svelte'
-import CommentsDrawerComponent from './CommentsDrawer.svelte'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import CommentsDrawerComponent from './CommentsDrawer.jsx'
 import { isAuthenticated } from '../auth.js'
 import { setCommentMode } from '../commentMode.js'
 import './comment-layout.css'
@@ -32,7 +33,7 @@ export async function openCommentsDrawer() {
   document.body.appendChild(backdrop)
   document.body.appendChild(drawer)
 
-  let instance = null
+  let root = null
 
   function onKeyDown(e) {
     if (e.key === 'Escape') {
@@ -44,28 +45,26 @@ export async function openCommentsDrawer() {
   }
   window.addEventListener('keydown', onKeyDown, true)
 
-  instance = mount(CommentsDrawerComponent, {
-    target: drawer,
-    props: {
-      onClose: closeCommentsDrawer,
-      onNavigate: (route, commentId) => {
-        closeCommentsDrawer()
-        if (window.location.pathname !== route) {
-          const navUrl = new URL(window.location.href)
-          navUrl.pathname = route
-          navUrl.searchParams.set('comment', commentId)
-          window.location.href = navUrl.toString()
-        } else {
-          const navUrl = new URL(window.location.href)
-          navUrl.searchParams.set('comment', commentId)
-          window.history.replaceState(null, '', navUrl.toString())
-          setCommentMode(true)
-        }
-      },
+  root = createRoot(drawer)
+  root.render(createElement(CommentsDrawerComponent, {
+    onClose: closeCommentsDrawer,
+    onNavigate: (route, commentId) => {
+      closeCommentsDrawer()
+      if (window.location.pathname !== route) {
+        const navUrl = new URL(window.location.href)
+        navUrl.pathname = route
+        navUrl.searchParams.set('comment', commentId)
+        window.location.href = navUrl.toString()
+      } else {
+        const navUrl = new URL(window.location.href)
+        navUrl.searchParams.set('comment', commentId)
+        window.history.replaceState(null, '', navUrl.toString())
+        setCommentMode(true)
+      }
     },
-  })
+  }))
 
-  activeDrawer = { backdrop, drawer, instance, onKeyDown }
+  activeDrawer = { backdrop, drawer, root, onKeyDown }
 }
 
 /**
@@ -76,8 +75,8 @@ export function closeCommentsDrawer() {
   if (activeDrawer.onKeyDown) {
     window.removeEventListener('keydown', activeDrawer.onKeyDown, true)
   }
-  if (activeDrawer.instance) {
-    unmount(activeDrawer.instance)
+  if (activeDrawer.root) {
+    activeDrawer.root.unmount()
   }
   activeDrawer.backdrop.remove()
   activeDrawer.drawer.remove()

package/src/comments/ui/composer.js

@@ -1,12 +1,13 @@
 /**
- * Comment composer — Svelte inline text input that appears at click position.
+ * Comment composer — React inline text input that appears at click position.
  *
  * Positioned absolutely within the comment overlay. Submits to the comments API.
  * Styled with Tachyons + sb-* custom classes for light/dark mode support.
  */
 
-import { mount, unmount } from 'svelte'
-import ComposerComponent from './Composer.svelte'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import ComposerComponent from './Composer.jsx'
 import { getCachedUser } from '../auth.js'
 import { saveDraft, clearDraft, composerDraftKey } from '../commentDrafts.js'
 import './comment-layout.css'
@@ -36,7 +37,7 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   // Stop click from propagating (prevents placing another composer)
   composer.addEventListener('click', (e) => e.stopPropagation())
 
-  let instance = null
+  let root = null
   let skipDraftSave = false
   const draftKey = composerDraftKey(route)
 
@@ -84,7 +85,7 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   }
 
   function destroy() {
-    // Save draft from DOM before Svelte unmounts (reactive state is unreliable after unmount)
+    // Save draft from DOM before React unmounts
     if (!skipDraftSave) {
       const textarea = composer.querySelector('textarea')
       const val = textarea?.value?.trim()
@@ -94,7 +95,7 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
     }
 
     window.removeEventListener('keydown', onEscape, true)
-    if (instance) { unmount(instance); instance = null }
+    if (root) { root.unmount(); root = null }
     composer.remove()
   }
 
@@ -109,25 +110,23 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   }
   window.addEventListener('keydown', onEscape, true)
 
-  instance = mount(ComposerComponent, {
-    target: composer,
-    props: {
-      user,
-      route,
-      onCancel: () => {
-        clearDraft(draftKey)
-        skipDraftSave = true
-        destroy()
-        callbacks.onCancel?.()
-      },
-      onSubmit: (text) => {
-        clearDraft(draftKey)
-        skipDraftSave = true
-        destroy()
-        callbacks.onSubmitOptimistic?.(text, pos.x, pos.y)
-      },
+  root = createRoot(composer)
+  root.render(createElement(ComposerComponent, {
+    user,
+    route,
+    onCancel: () => {
+      clearDraft(draftKey)
+      skipDraftSave = true
+      destroy()
+      callbacks.onCancel?.()
+    },
+    onSubmit: (text) => {
+      clearDraft(draftKey)
+      skipDraftSave = true
+      destroy()
+      callbacks.onSubmitOptimistic?.(text, pos.x, pos.y)
     },
-  })
+  }))
 
   applyPosition()
   // Auto-focus textarea after DOM is ready

package/src/comments/ui/index.js

@@ -1,8 +1,7 @@
 /**
- * Svelte UI exports for the comments system.
+ * React UI exports for the comments system.
  *
- * These require a Svelte peer dependency (^5.0.0).
- * Import from '@dfosco/storyboard-core/comments/svelte'.
+ * Import from '@dfosco/storyboard-core/comments/ui'.
  */
 
 // Mount

package/src/configSchema.js

@@ -15,10 +15,57 @@
  * @property {Record<string, string>} [propsMap] — static props merged into widget props
  */
 
+/**
+ * @typedef {object} CanvasTerminalConfig
+ * @property {boolean} [resizable]   — whether terminal widgets can be resized (default false)
+ * @property {number}  [defaultWidth]  — default width for new terminal widgets
+ * @property {number}  [defaultHeight] — default height for new terminal widgets
+ * @property {number}  [fontSize]    — terminal font size
+ * @property {string}  [fontFamily]  — terminal font family
+ * @property {string}  [prompt]      — shell prompt string
+ * @property {string|null} [startupCommand] — skip welcome screen: "copilot", "shell", or a custom command. null shows welcome.
+ * @property {object|null} [defaultStartupSequence] — sequence of steps to run after terminal opens
+ */
+
+/**
+ * @typedef {object} CanvasZoomConfig
+ * @property {number} min  — minimum zoom percentage (default 10)
+ * @property {number} max  — maximum zoom percentage (default 250)
+ * @property {number} step — zoom increment/decrement step (default 10)
+ */
+
 /**
  * @typedef {object} CanvasConfig
  * @property {PasteRule[]} pasteRules       — URL→widget conversion rules (evaluated in order, first match wins)
  * @property {{ embedBehavior: string, ghGuard: string }} github — GitHub-specific embed settings
+ * @property {CanvasTerminalConfig} [terminal] — terminal widget settings
+ * @property {Record<string, CanvasAgentConfig>} [agents] — per-agent overrides
+ * @property {CanvasZoomConfig} [zoom] — zoom min/max/step settings
+ */
+
+/**
+ * @typedef {object} CanvasAgentConfig
+ * @property {string}  [label]         — display label
+ * @property {string}  [icon]          — icon name
+ * @property {string}  [startupCommand] — command to run on startup
+ * @property {string}  [resumeCommand]  — command to browse/resume existing sessions (e.g. "copilot --resume")
+ * @property {string}  [postStartup]   — command sent after agent readiness (e.g. "/allow-all on")
+ * @property {string}  [readinessSignal] — tmux pane text that signals the agent is ready (fragile, prefer readinessFile)
+ * @property {boolean} [readinessFile]  — use a file-based SessionStart hook for readiness (writes --settings with hook, polls for signal file)
+ * @property {boolean} [resizable]     — override terminal resizability for this agent
+ * @property {number}  [defaultWidth]  — override default width
+ * @property {number}  [defaultHeight] — override default height
+ */
+
+/**
+ * @typedef {object} HotPoolConfig
+ * @property {boolean} [enabled]       — enable/disable all pools (default: true)
+ * @property {boolean} [verbose]       — log to Vite terminal (default: false)
+ * @property {number}  [default_pool_size]     — default baseline per pool (default: 1)
+ * @property {number}  [default_max_pool_size] — default surge cap per pool (default: 3)
+ * @property {boolean} [load_balancer] — enable auto-scaling (default: true)
+ * @property {number}  [load_balancer_cooldown_mins] — minutes idle before scale-down (default: 10)
+ * @property {Record<string, { pool_size?: number, max_pool_size?: number }>} [pools] — per-pool overrides (terminal, prompt, copilot, claude, codex)
  */
 
 /**
@@ -63,7 +110,7 @@
  * @property {boolean} enabled       — master toggle for customer mode
  * @property {boolean} hideChrome    — hides all toolbars (except canvas tools), branchbar, cmd+k, cmd+.
  * @property {boolean} hideHomepage  — removes the storyboard homepage (leaves empty page)
- * @property {string}  protoHomepage — internal /path that replaces homepage; redirects from / and /viewfinder
+ * @property {string}  protoHomepage — internal /path that replaces homepage; redirects from / and /workspace
  */
 
 /**
@@ -79,6 +126,7 @@
  * @property {{ hide?: string[] }} [ui]
  * @property {object}   [toolbar]
  * @property {CanvasConfig} [canvas]
+ * @property {HotPoolConfig} [hotPool]
  * @property {CommandPaletteConfig} [commandPalette]
  * @property {CustomerModeConfig} [customerMode]
  */
@@ -114,6 +162,16 @@ export const configDefaults = {
       embedBehavior: 'link-preview', // "link-preview" | "rich-embed"
       ghGuard: 'copy',               // "copy" | "link" | "off"
     },
+    zoom: {
+      min: 10,
+      max: 250,
+      step: 10,
+    },
+    terminal: {
+      resizable: false,
+      defaultWidth: 800,
+      defaultHeight: 450,
+    },
   },
   commandPalette: {
     providers: ['prototypes', 'flows', 'canvases', 'pages'],

package/src/configStore.js

@@ -0,0 +1,161 @@
+/**
+ * Unified Config Store — single source of truth for all storyboard configuration.
+ *
+ * Replaces the scattered init/store pattern with one reactive config object.
+ * Domain-specific stores (toolbarConfigStore, canvasConfig, etc.) become thin
+ * wrappers that delegate here — zero consumer changes needed.
+ *
+ * Override priority (lowest → highest):
+ *   core defaults → widgets → paste → toolbar → commandPalette → storyboard.config.json → prototype
+ *
+ * Framework-agnostic (zero npm dependencies).
+ */
+
+import { deepMerge } from './loader.js'
+
+// ---------------------------------------------------------------------------
+// Internal state
+// ---------------------------------------------------------------------------
+
+/** @type {object} Full merged config (set once at startup) */
+let _baseConfig = {}
+
+/** @type {Record<string, object>} Domain → prototype-level overrides */
+let _prototypeOverrides = {}
+
+/** @type {object} Final merged config (base + prototype overrides) */
+let _mergedConfig = {}
+
+/** @type {Set<Function>} */
+const _listeners = new Set()
+
+let _snapshotVersion = 0
+
+// ---------------------------------------------------------------------------
+// Initialization
+// ---------------------------------------------------------------------------
+
+/**
+ * Seed the unified config with the pre-merged config object.
+ * Called once at app startup (from the virtual module or mountStoryboardCore).
+ *
+ * @param {object} config - The unified config with all domains
+ */
+export function initConfig(config) {
+  _baseConfig = config || {}
+  _prototypeOverrides = {}
+  _recompute()
+}
+
+// ---------------------------------------------------------------------------
+// Domain access
+// ---------------------------------------------------------------------------
+
+/**
+ * Get the full merged config or a specific domain slice.
+ *
+ * @param {string} [domain] - Optional domain key (e.g. 'toolbar', 'canvas')
+ * @returns {object}
+ */
+export function getConfig(domain) {
+  if (!domain) return _mergedConfig
+  return _mergedConfig[domain] || {}
+}
+
+// ---------------------------------------------------------------------------
+// Prototype overrides
+// ---------------------------------------------------------------------------
+
+/**
+ * Set overrides for a specific domain from a prototype-local config file.
+ * Called on route change when entering a prototype with local config.
+ *
+ * @param {string} domain - Config domain (e.g. 'toolbar', 'widgets')
+ * @param {object} overrides - Prototype-level overrides to deep-merge
+ */
+export function setOverrides(domain, overrides) {
+  if (!overrides) return
+  _prototypeOverrides[domain] = overrides
+  _recompute()
+}
+
+/**
+ * Clear overrides for a specific domain.
+ *
+ * @param {string} domain
+ */
+export function clearOverrides(domain) {
+  if (!_prototypeOverrides[domain]) return
+  delete _prototypeOverrides[domain]
+  _recompute()
+}
+
+/**
+ * Clear all prototype overrides (e.g. when leaving a prototype).
+ */
+export function clearAllOverrides() {
+  if (Object.keys(_prototypeOverrides).length === 0) return
+  _prototypeOverrides = {}
+  _recompute()
+}
+
+// ---------------------------------------------------------------------------
+// Reactivity
+// ---------------------------------------------------------------------------
+
+/**
+ * Subscribe to config changes. Compatible with Svelte stores.
+ *
+ * @param {Function} callback - Called with the full merged config
+ * @returns {Function} Unsubscribe
+ */
+export function subscribeToConfig(callback) {
+  _listeners.add(callback)
+  callback(_mergedConfig)
+  return () => _listeners.delete(callback)
+}
+
+/**
+ * Snapshot version for useSyncExternalStore.
+ *
+ * @returns {string}
+ */
+export function getConfigSnapshot() {
+  return String(_snapshotVersion)
+}
+
+// ---------------------------------------------------------------------------
+// Internal
+// ---------------------------------------------------------------------------
+
+function _recompute() {
+  if (Object.keys(_prototypeOverrides).length === 0) {
+    _mergedConfig = _baseConfig
+  } else {
+    const result = { ..._baseConfig }
+    for (const [domain, overrides] of Object.entries(_prototypeOverrides)) {
+      result[domain] = result[domain]
+        ? deepMerge(result[domain], overrides)
+        : overrides
+    }
+    _mergedConfig = result
+  }
+  _snapshotVersion++
+  for (const cb of _listeners) {
+    try { cb(_mergedConfig) } catch (err) {
+      console.error('[storyboard] Error in config subscriber:', err)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Test helpers
+// ---------------------------------------------------------------------------
+
+export function _resetConfig() {
+  _baseConfig = {}
+  _prototypeOverrides = {}
+  _mergedConfig = {}
+  _listeners.clear()
+  _snapshotVersion = 0
+}

package/src/core-ui-colors.css

@@ -64,6 +64,12 @@
   --fgColor-muted: #656d76;
   --borderColor-default: #d1d9e0;
   --bgColor-neutral-muted: rgba(175, 184, 193, 0.2);
+
+  /* Slate palette tokens — used by trigger buttons and canvas toolbar */
+  --color-slate-100: oklch(96.8% .007 247.896);
+  --color-slate-300: oklch(86.9% .022 252.894);
+  --color-slate-400: oklch(70.4% .04 256.788);
+  --color-slate-600: oklch(44.6% .043 257.281);
 }
 
 /* Dark tokens — applied when toolbar syncs with a dark theme.
@@ -114,4 +120,10 @@
   --fgColor-muted: #8b949e;
   --borderColor-default: #30363d;
   --bgColor-neutral-muted: rgba(110, 118, 129, 0.2);
+
+  /* Slate palette tokens — dark equivalents */
+  --color-slate-100: oklch(20.8% .042 265.755);
+  --color-slate-300: oklch(29.3% .042 264.531);
+  --color-slate-400: oklch(44.6% .043 257.281);
+  --color-slate-600: oklch(70.4% .04 256.788);
 }

package/src/devtools.js

@@ -1,17 +1,17 @@
 /**
- * Storyboard Core UI Bar — Svelte-based floating toolbar.
+ * Storyboard Core UI Bar — React-based floating toolbar.
  *
- * Mounts the CoreUIBar Svelte component into the DOM.
+ * Mounts the CoreUIBar React component into the DOM.
  * Contains the command menu and mode-specific buttons (workshop, etc.).
- * Uses dynamic import() for the Svelte component to avoid
- * breaking non-Svelte test environments.
+ * Uses dynamic import() for the React component to avoid
+ * breaking non-React test environments.
  *
  * Usage:
  *   import { mountDevTools } from '@dfosco/storyboard-core'
  *   mountDevTools() // call once at app startup
  */
 
-let instance = null
+let root = null
 let wrapper = null
 let skipLink = null
 
@@ -35,8 +35,9 @@ export async function mountDevTools(options = {}) {
   // Skip mounting entirely when loaded inside a prototype embed iframe
   if (typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')) return
 
-  const { mount } = await import('svelte')
-  const { default: CoreUIBar } = await import('./CoreUIBar.svelte')
+  const { createElement } = await import('react')
+  const { createRoot } = await import('react-dom/client')
+  const { default: CoreUIBar } = await import('./CoreUIBar.jsx')
 
   // Inject skip link as the first child of <body> so it is the
   // first element in the tab order, regardless of where CoreUIBar
@@ -108,24 +109,21 @@ export async function mountDevTools(options = {}) {
   wrapper.id = 'sb-core-ui'
   container.appendChild(wrapper)
 
-  instance = mount(CoreUIBar, {
-    target: wrapper,
-    props: {
-      basePath,
-      toolbarConfig: options.toolbarConfig,
-      customHandlers: options.customHandlers,
-    },
-  })
+  root = createRoot(wrapper)
+  root.render(createElement(CoreUIBar, {
+    basePath,
+    toolbarConfig: options.toolbarConfig,
+    customHandlers: options.customHandlers,
+  }))
 }
 
 /**
  * Remove the Core UI Bar from the DOM.
  */
 export async function unmountDevTools() {
-  if (instance) {
-    const { unmount } = await import('svelte')
-    unmount(instance)
-    instance = null
+  if (root) {
+    root.unmount()
+    root = null
   }
   if (wrapper) { wrapper.remove(); wrapper = null }
   if (skipLink) { skipLink.remove(); skipLink = null }

package/src/devtools.test.js

@@ -1,16 +1,23 @@
 /**
  * Tests for devtools.js — command menu mount lifecycle.
- * Mocks the Svelte component to avoid jsdom lifecycle issues.
+ * Mocks the React component to avoid jsdom lifecycle issues.
  */
 
 import { vi } from 'vitest'
 
-vi.mock('svelte', () => ({
-  mount: vi.fn(() => ({})),
-  unmount: vi.fn(),
+const mockRender = vi.fn()
+const mockUnmount = vi.fn()
+const mockCreateRoot = vi.fn(() => ({ render: mockRender, unmount: mockUnmount }))
+
+vi.mock('react', () => ({
+  createElement: vi.fn((comp, props) => ({ comp, props })),
+}))
+
+vi.mock('react-dom/client', () => ({
+  createRoot: mockCreateRoot,
 }))
 
-vi.mock('./CommandMenu.svelte', () => ({ default: {} }))
+vi.mock('./CommandMenu.jsx', () => ({ default: () => null }))
 
 describe('mountDevTools', () => {
   let mountDevTools, unmountDevTools
@@ -19,11 +26,13 @@ describe('mountDevTools', () => {
     document.body.innerHTML = ''
     vi.resetModules()
 
-    vi.doMock('svelte', () => ({
-      mount: vi.fn(() => ({})),
-      unmount: vi.fn(),
+    vi.doMock('react', () => ({
+      createElement: vi.fn((comp, props) => ({ comp, props })),
+    }))
+    vi.doMock('react-dom/client', () => ({
+      createRoot: vi.fn(() => ({ render: vi.fn(), unmount: vi.fn() })),
     }))
-    vi.doMock('./CommandMenu.svelte', () => ({ default: {} }))
+    vi.doMock('./CommandMenu.jsx', () => ({ default: () => null }))
 
     const mod = await import('./devtools.js')
     mountDevTools = mod.mountDevTools