@dfosco/storyboard-core 3.3.1 → 3.3.2

package/package.json

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

package/src/CoreUIBar.svelte

@@ -57,6 +57,8 @@
   // Roving tabindex: only one button in the toolbar is tabbable at a time
   let activeToolbarIndex = $state(-1)
 
+  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 || {})
 
@@ -65,6 +67,7 @@
   const orderedMenus = $derived(Object.entries(allMenus)
     .filter(([key]) => key !== 'command')
     .filter(([key]) => !isMenuHidden(key))
+    .filter(([, menu]) => !menu.localOnly || isLocalDev)
     .map(([key, menu]) => ({ key, ...menu })))
 
   // Discover menus with sidepanel property

package/src/inspector/highlighter.js

@@ -5,22 +5,27 @@
  * 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.
+ * 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() {
   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),
+        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) {

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" },