@dfosco/storyboard-core 3.7.0 → 3.8.0

package/package.json

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

package/src/ThemeMenuButton.svelte

@@ -25,6 +25,7 @@
   let { config = {}, tabindex = -1 }: Props = $props()
 
   let menuOpen = $state(false)
+  let canvasActive = $state(false)
 
   function handleSelect(value: ThemeValue) {
     setTheme(value)
@@ -35,6 +36,28 @@
     e.preventDefault()
     setThemeSyncTarget(target, !$themeSyncState[target])
   }
+
+  $effect(() => {
+    function handleCanvasMounted() {
+      canvasActive = true
+    }
+    function handleCanvasUnmounted() {
+      canvasActive = false
+    }
+    document.addEventListener('storyboard:canvas:mounted', handleCanvasMounted)
+    document.addEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
+
+    const state = (window as any).__storyboardCanvasBridgeState
+    canvasActive = state?.active === true
+    if (!canvasActive) {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:status-request'))
+    }
+
+    return () => {
+      document.removeEventListener('storyboard:canvas:mounted', handleCanvasMounted)
+      document.removeEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
+    }
+  })
 </script>
 
 <DropdownMenu.Root bind:open={menuOpen}>
@@ -74,12 +97,21 @@
       <DropdownMenu.SubTrigger>Theme settings</DropdownMenu.SubTrigger>
       <DropdownMenu.SubContent class="min-w-[180px]">
         <DropdownMenu.Label>Apply theme to</DropdownMenu.Label>
-        <DropdownMenu.CheckboxItem
-          checked={$themeSyncState.prototype}
-          onSelect={(e) => handleSyncToggle(e, 'prototype')}
-        >
-          Prototype
-        </DropdownMenu.CheckboxItem>
+        {#if canvasActive}
+          <DropdownMenu.CheckboxItem
+            checked={$themeSyncState.canvas}
+            onSelect={(e) => handleSyncToggle(e, 'canvas')}
+          >
+            Canvas
+          </DropdownMenu.CheckboxItem>
+        {:else}
+          <DropdownMenu.CheckboxItem
+            checked={$themeSyncState.prototype}
+            onSelect={(e) => handleSyncToggle(e, 'prototype')}
+          >
+            Prototype
+          </DropdownMenu.CheckboxItem>
+        {/if}
         <DropdownMenu.CheckboxItem
           checked={$themeSyncState.toolbar}
           onSelect={(e) => handleSyncToggle(e, 'toolbar')}

package/src/canvas/materializer.js

@@ -16,21 +16,70 @@
  */
 
 /**
- * Parse a JSONL string into an array of event objects.
- * Blank lines and lines that fail to parse are silently skipped.
+ * Split a text blob into top-level JSON object snippets.
+ * Supports strict JSONL and accidentally concatenated objects.
  *
- * @param {string} text - Raw JSONL file contents
+ * @param {string} text
+ * @returns {string[]}
+ */
+function splitJsonObjects(text) {
+  const chunks = []
+  let start = -1
+  let depth = 0
+  let inString = false
+  let escaped = false
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]
+
+    if (inString) {
+      if (escaped) {
+        escaped = false
+      } else if (ch === '\\') {
+        escaped = true
+      } else if (ch === '"') {
+        inString = false
+      }
+      continue
+    }
+
+    if (ch === '"') {
+      inString = true
+      continue
+    }
+
+    if (ch === '{') {
+      if (depth === 0) start = i
+      depth++
+      continue
+    }
+
+    if (ch === '}') {
+      if (depth > 0) depth--
+      if (depth === 0 && start >= 0) {
+        chunks.push(text.slice(start, i + 1))
+        start = -1
+      }
+    }
+  }
+
+  return chunks
+}
+
+/**
+ * Parse canvas event text into an array of event objects.
+ * Blank lines and malformed JSON snippets are skipped.
+ *
+ * @param {string} text - Raw canvas event file contents
  * @returns {object[]} Parsed event objects
  */
 export function parseCanvasJsonl(text) {
   const events = []
-  for (const line of text.split('\n')) {
-    const trimmed = line.trim()
-    if (!trimmed) continue
+  for (const snippet of splitJsonObjects(text || '')) {
     try {
-      events.push(JSON.parse(trimmed))
+      events.push(JSON.parse(snippet))
     } catch {
-      // Skip malformed lines
+      // Skip malformed snippets
     }
   }
   return events

package/src/canvas/materializer.test.js

@@ -22,6 +22,22 @@ describe('parseCanvasJsonl', () => {
     expect(events).toHaveLength(2)
   })
 
+  it('parses concatenated JSON objects on a single line', () => {
+    const text = '{"event":"canvas_created","title":"Test"}{"event":"source_updated","sources":[]}'
+    const events = parseCanvasJsonl(text)
+    expect(events).toHaveLength(2)
+    expect(events[0].event).toBe('canvas_created')
+    expect(events[1].event).toBe('source_updated')
+  })
+
+  it('handles braces inside JSON strings', () => {
+    const text = '{"event":"canvas_created","title":"A {title}"}{"event":"widget_added","widget":{"id":"w1","props":{"text":"x}"}}}'
+    const events = parseCanvasJsonl(text)
+    expect(events).toHaveLength(2)
+    expect(events[0].title).toBe('A {title}')
+    expect(events[1].widget.props.text).toBe('x}')
+  })
+
   it('returns empty array for empty input', () => {
     expect(parseCanvasJsonl('')).toEqual([])
     expect(parseCanvasJsonl('\n\n')).toEqual([])

package/src/core-ui-colors.css

@@ -20,11 +20,27 @@
 
 /* Default: light tokens */
 [data-core-ui-bar],
+[data-sidepanel],
 [data-slot="dropdown-menu-content"],
 [data-slot="dropdown-menu-sub-content"] {
   color-scheme: light;
 
   /* shadcn / Tailwind semantic tokens — pinned to light values */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+
   --sb--color-background: hsl(0 0% 100%);
   --sb--color-foreground: hsl(222.2 84% 4.9%);
   --sb--color-popover: hsl(0 0% 100%);
@@ -39,6 +55,13 @@
   --sb--color-accent-foreground: hsl(222.2 47.4% 11.2%);
   --sb--color-border: hsl(214.3 31.8% 91.4%);
   --sb--color-input: hsl(214.3 31.8% 91.4%);
+
+  /* Primer token aliases used in side panel + inspector chrome */
+  --bgColor-default: #ffffff;
+  --fgColor-default: #1f2328;
+  --fgColor-muted: #656d76;
+  --borderColor-default: #d1d9e0;
+  --bgColor-neutral-muted: rgba(175, 184, 193, 0.2);
 }
 
 /* Dark tokens — applied when toolbar syncs with a dark theme.
@@ -46,10 +69,26 @@
  * instead of generic shadcn dark values.
  */
 :root[data-sb-toolbar-theme^="dark"] [data-core-ui-bar],
+:root[data-sb-toolbar-theme^="dark"] [data-sidepanel],
 :root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-content"],
 :root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-sub-content"] {
   color-scheme: dark;
 
+  --color-background: #161b22;
+  --color-foreground: #e6edf3;
+  --color-popover: #161b22;
+  --color-popover-foreground: #e6edf3;
+  --color-primary: #e6edf3;
+  --color-primary-foreground: #161b22;
+  --color-secondary: #21262d;
+  --color-secondary-foreground: #e6edf3;
+  --color-muted: #21262d;
+  --color-muted-foreground: #8b949e;
+  --color-accent: #21262d;
+  --color-accent-foreground: #e6edf3;
+  --color-border: #30363d;
+  --color-input: #30363d;
+
   --sb--color-background: #161b22;
   --sb--color-foreground: #e6edf3;
   --sb--color-popover: #161b22;
@@ -64,4 +103,11 @@
   --sb--color-accent-foreground: #e6edf3;
   --sb--color-border: #30363d;
   --sb--color-input: #30363d;
+
+  /* Primer token aliases used in side panel + inspector chrome */
+  --bgColor-default: #161b22;
+  --fgColor-default: #e6edf3;
+  --fgColor-muted: #8b949e;
+  --borderColor-default: #30363d;
+  --bgColor-neutral-muted: rgba(110, 118, 129, 0.2);
 }

package/src/mountStoryboardCore.js

@@ -33,8 +33,23 @@ function applyEarlyTheme() {
     typeof localStorage !== 'undefined'
       ? localStorage.getItem('sb-color-scheme')
       : null
+  const storedSync =
+    typeof localStorage !== 'undefined'
+      ? localStorage.getItem('sb-theme-sync')
+      : null
+  let syncTargets = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
+  if (storedSync) {
+    try {
+      syncTargets = { ...syncTargets, ...JSON.parse(storedSync) }
+    } catch {
+      // Ignore malformed persisted sync settings and use defaults.
+    }
+  }
   const theme = stored || 'system'
   const el = document.documentElement
+  const searchParams =
+    typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null
+  const forcedTarget = searchParams?.get('_sb_theme_target')
 
   // Resolve "system" to an actual theme for data-sb-theme
   let resolved = theme
@@ -46,19 +61,34 @@ function applyEarlyTheme() {
         : 'light'
   }
 
-  el.setAttribute('data-sb-theme', resolved)
+  const forcePrototype = forcedTarget === 'prototype'
+  const forceToolbar = forcedTarget === 'toolbar'
 
-  if (theme === 'system') {
+  const prototypeTheme = forcePrototype
+    ? resolved
+    : (syncTargets.prototype ? resolved : 'light')
+  const toolbarTheme = forceToolbar
+    ? resolved
+    : (syncTargets.toolbar ? resolved : 'light')
+  const codeTheme = syncTargets.codeBoxes ? resolved : 'light'
+  const canvasTheme = syncTargets.canvas ? resolved : 'light'
+
+  el.setAttribute('data-sb-theme', prototypeTheme)
+  el.setAttribute('data-sb-toolbar-theme', toolbarTheme)
+  el.setAttribute('data-sb-code-theme', codeTheme)
+  el.setAttribute('data-sb-canvas-theme', canvasTheme)
+
+  if (theme === 'system' && syncTargets.prototype) {
     el.setAttribute('data-color-mode', 'auto')
     el.setAttribute('data-light-theme', 'light')
     el.setAttribute('data-dark-theme', 'dark')
-  } else if (resolved.startsWith('dark')) {
+  } else if (prototypeTheme.startsWith('dark')) {
     el.setAttribute('data-color-mode', 'dark')
-    el.setAttribute('data-dark-theme', resolved)
+    el.setAttribute('data-dark-theme', prototypeTheme)
     el.setAttribute('data-light-theme', 'light')
   } else {
     el.setAttribute('data-color-mode', 'light')
-    el.setAttribute('data-light-theme', resolved)
+    el.setAttribute('data-light-theme', prototypeTheme)
     el.setAttribute('data-dark-theme', 'dark')
   }
 }

package/src/stores/themeStore.ts

@@ -96,6 +96,7 @@ function _applyToDOM(theme: ThemeValue, resolved: string): void {
   const prototypeTheme = _syncTargets.prototype ? resolved : 'light'
   const toolbarTheme = _syncTargets.toolbar ? resolved : 'light'
   const codeTheme = _syncTargets.codeBoxes ? resolved : 'light'
+  const canvasTheme = _syncTargets.canvas ? resolved : 'light'
 
   // Internal attributes
   el.setAttribute('data-sb-theme', prototypeTheme)
@@ -103,6 +104,7 @@ function _applyToDOM(theme: ThemeValue, resolved: string): void {
 
   // Toolbar theme — follows global theme when synced, stays light otherwise
   el.setAttribute('data-sb-toolbar-theme', toolbarTheme)
+  el.setAttribute('data-sb-canvas-theme', canvasTheme)
 
   // Primer CSS attributes — these drive @primer/react ThemeProvider and
   // Primer CSS custom-property layers without needing React state updates.
@@ -127,6 +129,7 @@ function _dispatchEvent(theme: ThemeValue, resolved: string): void {
   const prototypeResolved = _syncTargets.prototype ? resolved : 'light'
   const toolbarResolved = _syncTargets.toolbar ? resolved : 'light'
   const codeResolved = _syncTargets.codeBoxes ? resolved : 'light'
+  const canvasResolved = _syncTargets.canvas ? resolved : 'light'
 
   document.dispatchEvent(
     new CustomEvent('storyboard:theme:changed', {
@@ -137,6 +140,7 @@ function _dispatchEvent(theme: ThemeValue, resolved: string): void {
         prototypeResolved,
         toolbarResolved,
         codeResolved,
+        canvasResolved,
       },
     }),
   )
@@ -193,6 +197,7 @@ export interface ThemeSyncTargets {
   prototype: boolean
   toolbar: boolean
   codeBoxes: boolean
+  canvas: boolean
 }
 
 const SYNC_STORAGE_KEY = 'sb-theme-sync'
@@ -201,6 +206,7 @@ const DEFAULT_SYNC: ThemeSyncTargets = {
   prototype: true,
   toolbar: false,
   codeBoxes: true,
+  canvas: false,
 }
 
 function readStoredSync(): ThemeSyncTargets {

package/toolbar.config.json

@@ -28,7 +28,7 @@
       "render": "menu",
       "surface": "main-toolbar",
       "modes": ["*"],
-      "menuWidth": "260px",
+      "menuWidth": "280px",
       "handler": "core:flows"
     },    
     "theme": {
@@ -40,7 +40,7 @@
       "surface": "main-toolbar",
       "handler": "core:theme",
       "modes": ["*"],
-      "menuWidth": "220px"
+      "menuWidth": "240px"
     },
     "comments": {
       "ariaLabel": "Comments",