@dfosco/storyboard-core 3.5.0 → 3.6.0

package/package.json

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

package/src/inspector/highlighter.js

@@ -131,7 +131,7 @@ const THEMES = {
 
 /**
  * Resolve the current theme ID based on page theme and config.
- * Always follows the page theme (data-sb-theme attribute).
+ * Follows code-box theme (data-sb-code-theme attribute).
  */
 function normalizeThemeId(requested, mode) {
   const fallback = mode === 'light' ? 'github' : 'github-dark-dimmed'
@@ -166,11 +166,11 @@ function resolveThemeId() {
   const darkTheme = normalizeThemeId(highlighting.dark, 'dark')
   const lightTheme = normalizeThemeId(highlighting.light, 'light')
 
-  const sbTheme = typeof document !== 'undefined'
-    ? document.documentElement.getAttribute('data-sb-theme') || 'dark'
+  const codeTheme = typeof document !== 'undefined'
+    ? document.documentElement.getAttribute('data-sb-code-theme') || 'light'
     : 'dark'
 
-  return sbTheme.startsWith('dark') ? darkTheme : lightTheme
+  return codeTheme.startsWith('dark') ? darkTheme : lightTheme
 }
 
 /**

package/src/stores/themeStore.ts

@@ -92,35 +92,52 @@ function _applyToDOM(theme: ThemeValue, resolved: string): void {
   if (typeof document === 'undefined') return
   const el = document.documentElement
 
-  // Internal attribute
-  el.setAttribute('data-sb-theme', resolved)
+  // Per-target resolved themes
+  const prototypeTheme = _syncTargets.prototype ? resolved : 'light'
+  const toolbarTheme = _syncTargets.toolbar ? resolved : 'light'
+  const codeTheme = _syncTargets.codeBoxes ? resolved : 'light'
+
+  // Internal attributes
+  el.setAttribute('data-sb-theme', prototypeTheme)
+  el.setAttribute('data-sb-code-theme', codeTheme)
 
   // Toolbar theme — follows global theme when synced, stays light otherwise
-  const toolbarTheme = _syncTargets.toolbar ? resolved : 'light'
   el.setAttribute('data-sb-toolbar-theme', toolbarTheme)
 
   // Primer CSS attributes — these drive @primer/react ThemeProvider and
   // Primer CSS custom-property layers without needing React state updates.
-  if (theme === 'system') {
+  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')
   }
 }
 
 function _dispatchEvent(theme: ThemeValue, resolved: string): void {
   if (typeof document === 'undefined') return
+  const prototypeTheme = _syncTargets.prototype ? theme : 'light'
+  const prototypeResolved = _syncTargets.prototype ? resolved : 'light'
+  const toolbarResolved = _syncTargets.toolbar ? resolved : 'light'
+  const codeResolved = _syncTargets.codeBoxes ? resolved : 'light'
+
   document.dispatchEvent(
     new CustomEvent('storyboard:theme:changed', {
-      detail: { theme, resolved },
+      detail: {
+        theme,
+        resolved,
+        prototypeTheme,
+        prototypeResolved,
+        toolbarResolved,
+        codeResolved,
+      },
     }),
   )
 }

package/src/tools/handlers/flows.js

@@ -19,8 +19,9 @@ export async function handler(ctx) {
       path = path.replace(/\/+$/, '') || '/'
       const segments = path.split('/').filter(Boolean)
 
-      // Skip branch-- segment on deployed branch builds
-      const protoIdx = (segments[0] && segments[0].startsWith('branch--')) ? 1 : 0
+      // Detect and preserve branch-- segment on deployed branch builds
+      const branchSegment = (segments[0] && segments[0].startsWith('branch--')) ? segments[0] : null
+      const protoIdx = branchSegment ? 1 : 0
       const proto = segments[protoIdx] || null
       if (!proto) return []
 
@@ -49,7 +50,13 @@ export async function handler(ctx) {
           label: meta?.title || f.name,
           type: 'radio',
           active: f.key === active,
-          execute: () => { window.location.href = vf.resolveFlowRoute(f.key) },
+          execute: () => {
+            let url = vf.resolveFlowRoute(f.key)
+            // Re-apply basePath and branch-- prefix so deployed branch builds stay on the correct path
+            const prefix = (base || '') + (branchSegment ? `/${branchSegment}` : '')
+            if (prefix) url = prefix + url
+            window.location.href = url
+          },
         }
       })
     },