@dfosco/storyboard-core 3.0.0 → 3.1.0

package/core-ui.config.json

@@ -16,6 +16,7 @@
       "trigger": "command",
       "icon": "iconoir/key-command",
       "meta": { "strokeWeight": 2 },
+      "default": true,
       "modes": ["*"],
       "actions": [
         { "type": "header", "label": "Command Menu" },
@@ -38,9 +39,10 @@
         { "type": "header", "label": "Create" },
         { "id": "workshop/create-prototype", "label": "New prototype", "type": "default", "modes": ["*"], "feature": "createPrototype" },
         { "id": "workshop/create-flow", "label": "New flow", "type": "default", "modes": ["*"], "feature": "createFlow" },
+        { "id": "workshop/create-canvas", "label": "New canvas", "type": "default", "modes": ["*"], "feature": "createCanvas" },
         { "type": "footer", "label": "Supported in local development" }
       ]
-    },    
+    },
     "flows": {
       "label": "Flows",
       "ariaLabel": "Switch flow",
@@ -64,10 +66,16 @@
     "inspector": {
       "ariaLabel": "Inspect components",
       "icon": "iconoir/square-dashed",
-      "excludeRoutes": ["^/$", "/viewfinder"],
+      "excludeRoutes": ["^/$", "/viewfinder", "/canvas/"],
       "meta": { "strokeWeight": 2, "scale": 1.1 },
       "modes": ["*"],
       "sidepanel": "inspector"
     }
+  },
+
+  "canvasToolbar": {
+    "icon": "iconoir/grid-plus",
+    "meta": { "strokeWeight": 2, "scale": 1.2 },
+    "menuWidth": "220px"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,9 @@
   "exports": {
     ".": "./src/index.js",
     "./core-ui.config.json": "./core-ui.config.json",
+    "./canvas/materializer": "./src/canvas/materializer.js",
     "./vite/server": "./src/vite/server-plugin.js",
+    "./comments/svelte": "./src/comments/ui/index.js",
     "./comments": "./src/comments/index.js",
     "./comments/ui/comments.css": "./src/comments/ui/comment-layout.css",
     "./comments/ui/comment-layout.css": "./src/comments/ui/comment-layout.css",

package/src/CanvasCreateMenu.svelte

@@ -0,0 +1,65 @@
+<!--
+  CanvasCreateMenu — CoreUIBar dropdown for adding widgets to the active canvas.
+  Dispatches custom events to bridge Svelte → React.
+  Only visible when a canvas page is active.
+-->
+
+<script lang="ts">
+  import { TriggerButton } from '$lib/components/ui/trigger-button/index.js'
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
+  import Icon from './svelte-plugin-ui/components/Icon.svelte'
+
+  interface Props {
+    config?: any
+    canvasName?: string
+    tabindex?: number
+  }
+
+  let { config = {}, canvasName = '', tabindex }: Props = $props()
+
+  const widgetTypes = [
+    { type: 'sticky-note', label: 'Sticky Note' },
+    { type: 'markdown', label: 'Markdown' },
+    { type: 'prototype', label: 'Prototype' },
+  ]
+
+  let menuOpen = $state(false)
+
+  function addWidget(type: string) {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', {
+      detail: { type, canvasName }
+    }))
+    menuOpen = false
+  }
+</script>
+
+<DropdownMenu.Root bind:open={menuOpen}>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <TriggerButton
+        active={menuOpen}
+        size="icon-xl"
+        aria-label={config.ariaLabel || 'Add widget'}
+        {tabindex}
+        {...props}
+      >
+        {#if config.icon}
+          <Icon name={config.icon} size={16} {...(config.meta || {})} />
+        {:else}
+          +
+        {/if}
+      </TriggerButton>
+    {/snippet}
+  </DropdownMenu.Trigger>
+
+  <DropdownMenu.Content side="top" align="start" sideOffset={16} class="min-w-[180px]" style={config.menuWidth ? `width: ${config.menuWidth}` : ''}>
+    <DropdownMenu.Label>Add to canvas</DropdownMenu.Label>
+    {#each widgetTypes as wt (wt.type)}
+      <DropdownMenu.Item onclick={() => addWidget(wt.type)}>
+        {wt.label}
+      </DropdownMenu.Item>
+    {/each}
+    <DropdownMenu.Separator />
+    <div class="px-2 py-1.5 text-xs text-muted-foreground">Supported in local development</div>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/CoreUIBar.svelte

@@ -26,6 +26,8 @@
   let { basePath = '/' }: Props = $props()
 
   let visible = $state(true)
+  // Hide the entire toolbar when loaded inside a prototype embed iframe
+  const isEmbed = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')
   let commandMenuOpen = $state(false)
   let ActionMenuButton: any = $state(null)
   let navVersion = $state(0)
@@ -38,6 +40,15 @@
   let commentsEnabled = $state(false)
   let SidePanel: any = $state(null)
   let toolbarEl: HTMLElement | null = $state(null)
+  let CanvasCreateMenu: any = $state(null)
+  let canvasActive = $state(false)
+  let activeCanvasName = $state('')
+  let canvasZoom = $state(100)
+  const canvasToolbarConfig = (coreUIConfig as any).canvasToolbar || {}
+
+  const ZOOM_STEP = 10
+  const ZOOM_MIN = 25
+  const ZOOM_MAX = 200
 
   // Roving tabindex: only one button in the toolbar is tabbable at a time
   let activeToolbarIndex = $state(-1)
@@ -150,7 +161,7 @@
       visible = !visible
       document.documentElement.classList.toggle('storyboard-chrome-hidden', !visible)
     }
-    // Configurable shortcut to open the command menu
+    // Configurable shortcut to open the command menu (works even when hidden)
     if (openKey && e.key === openKey && (e.metaKey || e.ctrlKey)) {
       e.preventDefault()
       commandMenuOpen = !commandMenuOpen
@@ -375,6 +386,17 @@
         SidePanel = mod.default
       }
     } catch {}
+
+    // Load canvas create menu
+    try {
+      const mod = await import('./CanvasCreateMenu.svelte')
+      CanvasCreateMenu = mod.default
+    } catch {}
+
+    // Listen for canvas mount/unmount events (React↔Svelte bridge)
+    document.addEventListener('storyboard:canvas:mounted', handleCanvasMounted)
+    document.addEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
+    document.addEventListener('storyboard:canvas:zoom-changed', handleZoomChanged)
   })
 
   onDestroy(() => {
@@ -382,8 +404,42 @@
     if (bumpNav) window.removeEventListener('popstate', bumpNav)
     if (origPushState) history.pushState = origPushState
     if (origReplaceState) history.replaceState = origReplaceState
+    document.removeEventListener('storyboard:canvas:mounted', handleCanvasMounted)
+    document.removeEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
+    document.removeEventListener('storyboard:canvas:zoom-changed', handleZoomChanged)
   })
 
+  function handleCanvasMounted(e: Event) {
+    canvasActive = true
+    const detail = (e as CustomEvent).detail
+    activeCanvasName = detail?.name || ''
+    canvasZoom = detail?.zoom ?? 100
+  }
+
+  function handleCanvasUnmounted() {
+    canvasActive = false
+    activeCanvasName = ''
+    canvasZoom = 100
+  }
+
+  function handleZoomChanged(e: Event) {
+    canvasZoom = (e as CustomEvent).detail?.zoom ?? canvasZoom
+  }
+
+  function canvasZoomIn() {
+    const next = Math.min(ZOOM_MAX, canvasZoom + ZOOM_STEP)
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: next } }))
+  }
+
+  function canvasZoomOut() {
+    const next = Math.max(ZOOM_MIN, canvasZoom - ZOOM_STEP)
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: next } }))
+  }
+
+  function canvasZoomReset() {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: 100 } }))
+  }
+
   // Flow info dialog state — driven by core/show-flow-info action
   let flowDialogOpen = $state(false)
   let flowName = $state('default')
@@ -398,48 +454,90 @@
   }
 </script>
 
-{#if visible}
+{#if !isEmbed}
+  {#if visible && canvasActive && CanvasCreateMenu}
+    <div
+      class="fixed bottom-6 left-6 z-[9999] font-sans flex items-center gap-3"
+      role="toolbar"
+      aria-label="Canvas toolbar"
+    >
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <CanvasCreateMenu config={canvasToolbarConfig} canvasName={activeCanvasName} tabindex={0} />
+        </Tooltip.Trigger>
+        <Tooltip.Content side="top">Add widget to canvas</Tooltip.Content>
+      </Tooltip.Root>
+
+      <div class="canvas-zoom-bar">
+        <button
+          class="canvas-zoom-btn"
+          onclick={canvasZoomOut}
+          disabled={canvasZoom <= ZOOM_MIN}
+          aria-label="Zoom out"
+          title="Zoom out"
+        >−</button>
+        <button
+          class="canvas-zoom-label"
+          onclick={canvasZoomReset}
+          aria-label="Reset zoom to 100%"
+          title="Reset to 100%"
+        >{canvasZoom}%</button>
+        <button
+          class="canvas-zoom-btn"
+          onclick={canvasZoomIn}
+          disabled={canvasZoom >= ZOOM_MAX}
+          aria-label="Zoom in"
+          title="Zoom in"
+        >+</button>
+      </div>
+    </div>
+  {/if}
   <div
     id="storyboard-controls"
     class="fixed bottom-6 right-6 z-[9999] font-sans flex items-end gap-3"
     data-core-ui-bar
     role="toolbar"
+    tabindex="0"
     aria-label="Storyboard controls"
     onkeydown={handleToolbarKeydown}
     bind:this={toolbarEl}
   >
-    {#each visibleMenus as menu, i (menu.key)}
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          {#if menu.sidepanel}
-            <TriggerButton
-              active={$sidePanelState.open && $sidePanelState.activeTab === menu.sidepanel}
-              size="icon-xl"
-              aria-label={menu.ariaLabel || menu.key}
-              tabindex={getTabindex(i)}
-              onfocus={() => { activeToolbarIndex = i }}
-              onclick={() => togglePanel(menu.sidepanel)}
-            >
-              <Icon name={menu.icon || menu.key} size={16} {...(menu.meta || {})} />
-            </TriggerButton>
-          {:else if menu.action}
-            <ActionMenuButton config={menu} tabindex={getTabindex(i)} />
-          {:else if menu.key === 'create'}
-            <CreateMenuButton features={createMenuFeatures} config={menu} tabindex={getTabindex(i)} />
-          {:else if menu.key === 'comments'}
-            <CommentsMenuButton config={menu} tabindex={getTabindex(i)} />
-          {/if}
-        </Tooltip.Trigger>
-        <Tooltip.Content side="top">{menu.ariaLabel || menu.key}</Tooltip.Content>
-      </Tooltip.Root>
-    {/each}
+    {#if visible}
+      {#each visibleMenus as menu, i (menu.key)}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#if menu.sidepanel}
+              <TriggerButton
+                active={$sidePanelState.open && $sidePanelState.activeTab === menu.sidepanel}
+                size="icon-xl"
+                aria-label={menu.ariaLabel || menu.key}
+                tabindex={getTabindex(i)}
+                onfocus={() => { activeToolbarIndex = i }}
+                onclick={() => togglePanel(menu.sidepanel)}
+              >
+                <Icon name={menu.icon || menu.key} size={16} {...(menu.meta || {})} />
+              </TriggerButton>
+            {:else if menu.action}
+              <ActionMenuButton config={menu} tabindex={getTabindex(i)} />
+            {:else if menu.key === 'create'}
+              <CreateMenuButton features={createMenuFeatures} config={menu} tabindex={getTabindex(i)} />
+            {:else if menu.key === 'comments'}
+              <CommentsMenuButton config={menu} tabindex={getTabindex(i)} />
+            {/if}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="top">{menu.ariaLabel || menu.key}</Tooltip.Content>
+        </Tooltip.Root>
+      {/each}
+    {/if}
     {#if commandMenuConfig}
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          <CommandMenu {basePath} bind:open={commandMenuOpen} bind:flowDialogOpen {flowName} {flowJson} {flowError} shortcuts={shortcutsConfig} tabindex={getTabindex(commandMenuIndex)} icon={commandMenuConfig.icon} iconMeta={commandMenuConfig.meta} />
-        </Tooltip.Trigger>
-        <Tooltip.Content side="top">Command Menu</Tooltip.Content>
-      </Tooltip.Root>
+      <div class={visible || commandMenuOpen ? '' : 'default-button-dimmed'}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <CommandMenu {basePath} bind:open={commandMenuOpen} bind:flowDialogOpen {flowName} {flowJson} {flowError} shortcuts={shortcutsConfig} tabindex={getTabindex(commandMenuIndex)} icon={commandMenuConfig.icon} iconMeta={commandMenuConfig.meta} />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="top">Command Menu</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
     {/if}
   </div>
 {/if}
@@ -448,3 +546,69 @@
   <SidePanel onClose={() => focusToolbarItem(activeToolbarIndex < 0 ? toolbarItemCount - 1 : activeToolbarIndex)} />
 {/if}
 
+<style>
+  .canvas-zoom-bar {
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    border: 1.5px solid var(--trigger-border, var(--color-slate-400));
+    background: var(--trigger-bg, var(--color-slate-100));
+    overflow: hidden;
+  }
+
+  .canvas-zoom-btn {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 32px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--trigger-text, var(--color-slate-600));
+    transition: background 120ms;
+  }
+
+  .canvas-zoom-btn:hover:not(:disabled) {
+    background: var(--trigger-bg-hover, var(--color-slate-300));
+  }
+
+  .canvas-zoom-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .canvas-zoom-label {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 48px;
+    height: 32px;
+    padding: 0 4px;
+    font-size: 11px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--trigger-text, var(--color-slate-600));
+    border-left: 1.5px solid var(--trigger-border, var(--color-slate-400));
+    border-right: 1.5px solid var(--trigger-border, var(--color-slate-400));
+    transition: background 120ms;
+  }
+
+  .canvas-zoom-label:hover {
+    background: var(--trigger-bg-hover, var(--color-slate-300));
+  }
+
+  .default-button-dimmed {
+    opacity: 0.3;
+    transition: opacity 200ms;
+  }
+
+  .default-button-dimmed:hover,
+  .default-button-dimmed:focus-within {
+    opacity: 1;
+  }
+</style>
+

package/src/InspectorPanel.svelte

@@ -34,6 +34,37 @@
   /** @type {{ owner: string, name: string } | null} */
   let repoInfo = $state(null)
 
+  /** @type {{ files: string[], sources: Record<string, string>, repo: { owner: string, name: string } | null } | null} */
+  let staticInspectorData = null
+
+  /**
+   * Load the build-time static inspector JSON (production only).
+   * Cached after the first successful fetch.
+   */
+  async function loadStaticData() {
+    if (staticInspectorData) return staticInspectorData
+    try {
+      const res = await fetch(`${import.meta.env.BASE_URL}_storyboard/inspector.json`)
+      if (res.ok) {
+        staticInspectorData = await res.json()
+        return staticInspectorData
+      }
+    } catch {}
+    return null
+  }
+
+  /**
+   * Fetch source file content — uses dev middleware in dev, static JSON in prod.
+   */
+  async function fetchSourceContent(filePath) {
+    if (import.meta.env.DEV) {
+      const res = await fetch(`/_storyboard/docs/source?path=${encodeURIComponent(filePath)}`)
+      return res.ok ? (await res.json())?.content || '' : ''
+    }
+    const data = await loadStaticData()
+    return data?.sources?.[filePath] || ''
+  }
+
   let mouseMode = null
 
   const hasSelection = $derived(componentInfo !== null)
@@ -155,11 +186,8 @@
 
   async function getHighlighter() {
     if (highlighter) return highlighter
-    const { createHighlighter } = await import('shiki')
-    highlighter = await createHighlighter({
-      themes: ['github-dark'],
-      langs: ['jsx', 'tsx', 'javascript', 'typescript'],
-    })
+    const { createInspectorHighlighter } = await import('./inspector/highlighter.js')
+    highlighter = await createInspectorHighlighter()
     return highlighter
   }
 
@@ -234,10 +262,9 @@
       sourceLoading = true
       sourcePath = path
       highlightedHtml = ''
-      fetch(`/_storyboard/docs/source?path=${encodeURIComponent(path)}`)
-        .then(r => r.ok ? r.json() : null)
-        .then(async (data) => {
-          sourceCode = data?.content || ''
+      fetchSourceContent(path)
+        .then(async (content) => {
+          sourceCode = content
           // Try the selected component first, then walk up the chain
           matchedLine = findComponentLine(sourceCode, componentInfo)
           if (matchedLine < 0 && componentChain.length > 0) {
@@ -336,20 +363,30 @@
     // Auto-start inspector mode
     startInspecting()
 
-    // Pre-fetch file list and repo info in parallel
-    try {
-      const [filesRes, repoRes] = await Promise.all([
-        fetch('/_storyboard/docs/files'),
-        fetch('/_storyboard/docs/repo'),
-      ])
-      if (filesRes.ok) {
-        const data = await filesRes.json()
+    // Pre-fetch file list and repo info
+    if (import.meta.env.DEV) {
+      // Dev: use live middleware endpoints
+      try {
+        const [filesRes, repoRes] = await Promise.all([
+          fetch('/_storyboard/docs/files'),
+          fetch('/_storyboard/docs/repo'),
+        ])
+        if (filesRes.ok) {
+          const data = await filesRes.json()
+          knownFiles = data.files || []
+        }
+        if (repoRes.ok) {
+          repoInfo = await repoRes.json()
+        }
+      } catch {}
+    } else {
+      // Production: load from static build-time JSON
+      const data = await loadStaticData()
+      if (data) {
         knownFiles = data.files || []
+        repoInfo = data.repo || null
       }
-      if (repoRes.ok) {
-        repoInfo = await repoRes.json()
-      }
-    } catch {}
+    }
   })
 
   onDestroy(() => {