@dfosco/storyboard-core 3.3.0 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "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,18 @@
   // 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 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 }))
+    .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,35 @@
  * 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).
+ *
+ * Each import() has .catch() so consumer bundlers (esbuild dep optimizer)
+ * treat them as runtime-fallible and don't fail at build time when shiki
+ * isn't installed. Returns null when shiki is unavailable.
  */
 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('shiki/core').catch(() => null),
+        import('shiki/engine/oniguruma').catch(() => null),
+        import('shiki/dist/langs/tsx.mjs').catch(() => null),
+        import('shiki/dist/langs/jsx.mjs').catch(() => null),
+        import('shiki/dist/langs/javascript.mjs').catch(() => null),
+        import('shiki/dist/langs/typescript.mjs').catch(() => null),
+        import('shiki/dist/themes/github-dark.mjs').catch(() => null),
+        import('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
+  }
 }