@dfosco/storyboard-core 3.3.0 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "type": "module",
   "license": "MIT",
   "bin": {

package/src/CoreUIBar.svelte

@@ -48,7 +48,7 @@
   let canvasActive = $state(false)
   let activeCanvasName = $state('')
   let canvasZoom = $state(100)
-  const canvasToolbarConfig = (config as any).canvasToolbar || {}
+  const canvasToolbarConfig = $derived((config as any).canvasToolbar || {})
 
   const ZOOM_STEP = 10
   const ZOOM_MIN = 25
@@ -57,18 +57,21 @@
   // Roving tabindex: only one button in the toolbar is tabbable at a time
   let activeToolbarIndex = $state(-1)
 
-  const commandMenuConfig = isMenuHidden('command') ? null : config.menus?.command
-  const shortcutsConfig = (config as any).shortcuts || {}
+  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 || {})
 
   // Build ordered menu list from JSON key order (excluding command, which is always rightmost)
-  const allMenus = (config.menus || {}) as Record<string, any>
-  const orderedMenus = Object.entries(allMenus)
+  const allMenus = $derived((config.menus || {}) as Record<string, any>)
+  const orderedMenus = $derived(Object.entries(allMenus)
     .filter(([key]) => key !== 'command')
     .filter(([key]) => !isMenuHidden(key))
-    .map(([key, menu]) => ({ key, ...menu }))
+    .filter(([, menu]) => !menu.localOnly || isLocalDev)
+    .map(([key, menu]) => ({ key, ...menu })))
 
   // Discover menus with sidepanel property
-  const sidepanelMenus = orderedMenus.filter(menu => menu.sidepanel)
+  const sidepanelMenus = $derived(orderedMenus.filter(menu => menu.sidepanel))
 
   function menuVisibleInMode(menu: any, mode: string): boolean {
     if (!menu?.modes) return false

package/src/devtools-consumer.js

@@ -0,0 +1,28 @@
+/**
+ * Consumer-safe proxy for mountDevTools.
+ *
+ * Delegates to the compiled UI bundle (@dfosco/storyboard-core/ui-runtime)
+ * so consumers don't need svelte installed. The real mountDevTools in
+ * devtools.js imports svelte directly and is only usable in the source repo
+ * or via the compiled UI bundle.
+ */
+
+export async function mountDevTools(options = {}) {
+  const ui = await import('@dfosco/storyboard-core/ui-runtime')
+  return ui.mountDevTools(options)
+}
+
+export async function unmountDevTools() {
+  const ui = await import('@dfosco/storyboard-core/ui-runtime')
+  return ui.unmountDevTools()
+}
+
+/** @deprecated Use mountDevTools instead. */
+export function mountFlowDebug(options = {}) {
+  return mountDevTools(options)
+}
+
+/** @deprecated Use mountDevTools instead. */
+export function mountSceneDebug(options = {}) {
+  return mountDevTools(options)
+}

package/src/index.js

@@ -49,7 +49,9 @@ export { registerMode, unregisterMode, getRegisteredModes, getCurrentMode, activ
 export { initTools, setToolAction, setToolState, getToolState, getToolsForMode, subscribeToTools, getToolsSnapshot } from './modes.js'
 
 // Dev tools (vanilla JS, framework-agnostic)
-export { mountDevTools } from './devtools.js'
+// mountDevTools delegates to the compiled UI bundle so consumers
+// don't need svelte installed — svelte is bundled into ui-runtime.
+export { mountDevTools } from './devtools-consumer.js'
 export { mountFlowDebug } from './sceneDebug.js'
 // Deprecated alias
 export { mountSceneDebug } from './sceneDebug.js'

package/src/inspector/highlighter.js

@@ -4,23 +4,40 @@
  * Uses shiki/core with only the four languages the inspector needs,
  * avoiding the full shiki bundle that registers 200+ lazy-loaded
  * language chunks (which break in deployed/static environments).
+ *
+ * Import specifiers are computed via template literals so consumer
+ * bundlers (Rollup, esbuild) can't statically analyze them — they
+ * skip dynamic imports with variable specifiers instead of erroring.
+ * Returns null when shiki is unavailable.
  */
+
+// Variable indirection prevents any bundler from statically resolving
+const SHIKI = 'shiki'
+
 export async function createInspectorHighlighter() {
-  const [{ createHighlighterCore }, { createOnigurumaEngine }, tsx, jsx, javascript, typescript, githubDark, wasm] =
-    await Promise.all([
-      import('shiki/core'),
-      import('shiki/engine/oniguruma'),
-      import('shiki/dist/langs/tsx.mjs'),
-      import('shiki/dist/langs/jsx.mjs'),
-      import('shiki/dist/langs/javascript.mjs'),
-      import('shiki/dist/langs/typescript.mjs'),
-      import('shiki/dist/themes/github-dark.mjs'),
-      import('shiki/wasm'),
-    ])
+  try {
+    const [shikiCore, oniguruma, tsx, jsx, javascript, typescript, githubDark, wasm] =
+      await Promise.all([
+        import(/* @vite-ignore */ `${SHIKI}/core`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/engine/oniguruma`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/dist/langs/tsx.mjs`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/dist/langs/jsx.mjs`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/dist/langs/javascript.mjs`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/dist/langs/typescript.mjs`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/dist/themes/github-dark.mjs`).catch(() => null),
+        import(/* @vite-ignore */ `${SHIKI}/wasm`).catch(() => null),
+      ])
+
+    if (!shikiCore || !oniguruma || !tsx || !jsx || !javascript || !typescript || !githubDark || !wasm) {
+      return null
+    }
 
-  return createHighlighterCore({
-    themes: [githubDark.default],
-    langs: [tsx.default, jsx.default, javascript.default, typescript.default],
-    engine: createOnigurumaEngine(wasm),
-  })
+    return shikiCore.createHighlighterCore({
+      themes: [githubDark.default],
+      langs: [tsx.default, jsx.default, javascript.default, typescript.default],
+      engine: oniguruma.createOnigurumaEngine(wasm),
+    })
+  } catch {
+    return null
+  }
 }

package/src/vite/server-plugin.js

@@ -176,13 +176,32 @@ export default function storyboardServer() {
     },
 
     transformIndexHtml() {
-      if (clientScripts.length === 0) return []
+      const tags = []
 
-      return clientScripts.map((src) => ({
+      // Inject local dev flag so the UI can gate dev-only tools
+      tags.push({
         tag: 'script',
-        attrs: { type: 'module', src: base + src.replace(/^\//, '') },
-        injectTo: 'body',
-      }))
+        children: 'window.__SB_LOCAL_DEV__=true',
+        injectTo: 'head',
+      })
+
+      // Inject base path so the inspector UI can resolve static assets
+      // (e.g. inspector.json) when deployed under a subpath
+      tags.push({
+        tag: 'script',
+        children: `window.__STORYBOARD_BASE_PATH__=${JSON.stringify(base)}`,
+        injectTo: 'head',
+      })
+
+      for (const src of clientScripts) {
+        tags.push({
+          tag: 'script',
+          attrs: { type: 'module', src: base + src.replace(/^\//, '') },
+          injectTo: 'body',
+        })
+      }
+
+      return tags
     },
 
     // Build-time: emit a static JSON with source files so the inspector

package/src/workshop/features/createPrototype/CreatePrototypeForm.svelte

@@ -62,8 +62,8 @@
   const canSubmit = $derived(!!kebabName && !nameError && !submitting && (!isExternal || (!!externalUrl.trim() && !urlError)))
 
   const templateLabel = $derived(partial ? partials.find(p => p.name === partial)?.name ?? partial : 'No template')
-  const templates = $derived(partials.filter(p => p.directory === 'template'))
-  const recipes = $derived(partials.filter(p => p.directory === 'recipe'))
+  const templates = $derived(partials.filter(p => p.directory === 'template' || p.directory === 'templates'))
+  const recipes = $derived(partials.filter(p => p.directory === 'recipe' || p.directory === 'recipes'))
   let templateMenuOpen = $state(false)
 
   function getApiUrl() {

package/src/workshop/features/createPrototype/server.js

@@ -20,10 +20,12 @@ import path from 'node:path'
 
 const FLOW_SKELETON = JSON.stringify({ $global: [] }, null, 2) + '\n'
 
-/** Map partial directory value → source directory name */
-const DIR_MAP = {
-  recipe: 'recipes',
-  template: 'templates',
+/**
+ * Check whether a partial entry is a template (vs recipe).
+ * Accepts both singular and plural forms: "template" or "templates".
+ */
+function isTemplate(partialEntry) {
+  return partialEntry.directory === 'template' || partialEntry.directory === 'templates'
 }
 
 // ---------------------------------------------------------------------------
@@ -118,10 +120,9 @@ function generateBlankIndexJsx(componentName, title) {
  * @param {string} title - Human-readable title
  */
 function generateIndexJsx({ partialEntry, componentFile, componentName, title }) {
-  const typeDir = DIR_MAP[partialEntry.directory]
-  const importPath = `@/${typeDir}/${partialEntry.name}/${componentFile}`
+  const importPath = `@/${partialEntry.directory}/${partialEntry.name}/${componentFile}`
 
-  if (partialEntry.directory === 'template') {
+  if (isTemplate(partialEntry)) {
     return `import ${componentFile} from '${importPath}'
 
 export default function ${componentName}() {
@@ -303,16 +304,10 @@ export function createPrototypesHandler(ctx) {
       if (!partialEntry) {
         content = generateBlankIndexJsx(componentName, title)
       } else {
-        const typeDir = DIR_MAP[partialEntry.directory]
-        if (!typeDir) {
-          sendJson(res, 400, { error: `Invalid directory "${partialEntry.directory}". Must be "recipe" or "template".` })
-          return
-        }
-
-        const partialDir = path.join(root, 'src', typeDir, partialEntry.name)
+        const partialDir = path.join(root, 'src', partialEntry.directory, partialEntry.name)
         const componentFile = findComponentFile(partialDir)
         if (!componentFile) {
-          sendJson(res, 400, { error: `No .jsx or .tsx file found in src/${typeDir}/${partialEntry.name}/` })
+          sendJson(res, 400, { error: `No .jsx or .tsx file found in src/${partialEntry.directory}/${partialEntry.name}/` })
           return
         }
 

package/toolbar.config.json

@@ -34,6 +34,7 @@
       "icon": "iconoir/plus-circle",
       "meta": { "strokeWeight": 2, "scale": 1.1 },
       "modes": ["*"],
+      "localOnly": true,
       "menuWidth": "260px",
       "actions": [
         { "type": "header", "label": "Create" },