@dfosco/storyboard-core 3.4.0 → 3.6.0

package/src/inspector/highlighter.js

@@ -5,11 +5,9 @@
  * (javascript, typescript, xml for JSX), producing small bundles with
  * no WASM dependencies.
  *
- * Theme is configurable via toolbar.config.json's `highlighting` key:
- *   { "highlighting": { "dark": "github-dark-dimmed", "light": "github" } }
- *
- * Returns an adapter object matching the codeToHtml() call signature
- * used by InspectorPanel.svelte.
+ * Theme is resolved at render time via toolbar.config.json's
+ * `highlighting` key and the theme sync settings. Colors are applied
+ * as inline styles — no global CSS injection, no theme conflicts.
  */
 
 import hljs from 'highlight.js/lib/core'
@@ -21,70 +19,174 @@ import { getToolbarConfig } from '../toolbarConfigStore.js'
 hljs.registerLanguage('javascript', javascript)
 hljs.registerLanguage('typescript', typescript)
 hljs.registerLanguage('xml', xml)
-// Aliases for JSX/TSX — highlight.js uses xml for the JSX part,
-// but we map these to typescript which handles JSX well enough
 hljs.registerLanguage('jsx', javascript)
 hljs.registerLanguage('tsx', typescript)
 
-/** Map of highlight.js theme name → loaded CSS text (cached). */
-const _loadedThemes = new Map()
+// ---------------------------------------------------------------------------
+// Color palettes — inline styles, no external CSS needed
+// ---------------------------------------------------------------------------
+
+const THEMES = {
+  'github-dark-dimmed': {
+    bg: '#22272e',
+    fg: '#adbac7',
+    headerBg: '#2d333b',
+    headerFg: '#768390',
+    border: '#373e47',
+    lineHighlight: 'rgba(99, 110, 123, 0.15)',
+    linkHover: '#adbac7',
+    keyword: '#f47067',
+    string: '#96d0ff',
+    number: '#6cb6ff',
+    comment: '#768390',
+    function: '#dcbdfb',
+    title: '#dcbdfb',
+    built_in: '#6cb6ff',
+    literal: '#6cb6ff',
+    type: '#6cb6ff',
+    attr: '#6cb6ff',
+    tag: '#8ddb8c',
+    name: '#8ddb8c',
+    attribute: '#6cb6ff',
+    variable: '#f69d50',
+    'template-variable': '#f69d50',
+    params: '#adbac7',
+    meta: '#768390',
+    regexp: '#96d0ff',
+    symbol: '#6cb6ff',
+    operator: '#adbac7',
+    punctuation: '#adbac7',
+    selector: '#8ddb8c',
+    property: '#6cb6ff',
+  },
+  'github-dark': {
+    bg: '#0d1117',
+    fg: '#e6edf3',
+    headerBg: '#161b22',
+    headerFg: '#8b949e',
+    border: '#30363d',
+    lineHighlight: 'rgba(110, 118, 129, 0.15)',
+    linkHover: '#c9d1d9',
+    keyword: '#ff7b72',
+    string: '#a5d6ff',
+    number: '#79c0ff',
+    comment: '#8b949e',
+    function: '#d2a8ff',
+    title: '#d2a8ff',
+    built_in: '#79c0ff',
+    literal: '#79c0ff',
+    type: '#79c0ff',
+    attr: '#79c0ff',
+    tag: '#7ee787',
+    name: '#7ee787',
+    attribute: '#79c0ff',
+    variable: '#ffa657',
+    'template-variable': '#ffa657',
+    params: '#e6edf3',
+    meta: '#8b949e',
+    regexp: '#a5d6ff',
+    symbol: '#79c0ff',
+    operator: '#e6edf3',
+    punctuation: '#e6edf3',
+    selector: '#7ee787',
+    property: '#79c0ff',
+  },
+  github: {
+    bg: '#ffffff',
+    fg: '#1f2328',
+    headerBg: '#f6f8fa',
+    headerFg: '#656d76',
+    border: '#d1d9e0',
+    lineHighlight: 'rgba(234, 179, 8, 0.12)',
+    linkHover: '#1f2328',
+    keyword: '#cf222e',
+    string: '#0a3069',
+    number: '#0550ae',
+    comment: '#6e7781',
+    function: '#8250df',
+    title: '#8250df',
+    built_in: '#0550ae',
+    literal: '#0550ae',
+    type: '#0550ae',
+    attr: '#0550ae',
+    tag: '#116329',
+    name: '#116329',
+    attribute: '#0550ae',
+    variable: '#953800',
+    'template-variable': '#953800',
+    params: '#1f2328',
+    meta: '#6e7781',
+    regexp: '#0a3069',
+    symbol: '#0550ae',
+    operator: '#1f2328',
+    punctuation: '#1f2328',
+    selector: '#116329',
+    property: '#0550ae',
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Theme resolution
+// ---------------------------------------------------------------------------
 
 /**
- * Get the highlight.js theme name for the current context.
- * Reads highlighting config (dark/light groups) from toolbar config.
- * Uses theme sync targets to decide whether to follow global theme.
- * When code boxes are not synced (default), always uses the dark theme.
+ * Resolve the current theme ID based on page theme and config.
+ * Follows code-box theme (data-sb-code-theme attribute).
  */
-function getThemeName() {
-  const config = getToolbarConfig()
-  const highlighting = config?.highlighting || {}
-  const darkTheme = highlighting.dark || 'github-dark-dimmed'
-  const lightTheme = highlighting.light || 'github'
-
-  // Check if code boxes should follow the global theme
-  let codeBoxesSynced = false
-  if (typeof localStorage !== 'undefined') {
-    try {
-      const raw = localStorage.getItem('sb-theme-sync')
-      if (raw) codeBoxesSynced = JSON.parse(raw).codeBoxes === true
-    } catch { /* ignore malformed localStorage */ }
+function normalizeThemeId(requested, mode) {
+  const fallback = mode === 'light' ? 'github' : 'github-dark-dimmed'
+  if (!requested || typeof requested !== 'string') return fallback
+  if (THEMES[requested]) return requested
+
+  const key = requested.trim().toLowerCase().replace(/[\s_]+/g, '-')
+  const aliases = {
+    github: 'github',
+    'github-light': 'github',
+    light: 'github',
+    'night-owl-light': 'github',
+    'github-dark': 'github-dark',
+    dark: 'github-dark-dimmed',
+    'dark-dimmed': 'github-dark-dimmed',
+    'github-dark-dimmed': 'github-dark-dimmed',
+    'night-owl': 'github-dark-dimmed',
   }
 
-  // When not synced, always use dark theme for code boxes
-  if (!codeBoxesSynced) return darkTheme
+  const resolved = aliases[key]
+  if (resolved && THEMES[resolved]) return resolved
+  return fallback
+}
 
-  // When synced, follow the current resolved theme
-  const sbTheme = typeof document !== 'undefined'
-    ? document.documentElement.getAttribute('data-sb-theme') || 'dark'
+/**
+ * Resolve the current theme ID based on page theme and config.
+ * Always follows the page theme (data-sb-theme attribute).
+ */
+function resolveThemeId() {
+  const config = getToolbarConfig()
+  const highlighting = config?.highlighting || {}
+  const darkTheme = normalizeThemeId(highlighting.dark, 'dark')
+  const lightTheme = normalizeThemeId(highlighting.light, 'light')
+
+  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
 }
 
 /**
- * Ensure a highlight.js theme CSS is loaded into the document.
- * Dynamically imports the CSS file and injects a <style> tag.
+ * Get the color palette for the current theme.
+ * Falls back to github-dark-dimmed for unknown theme names.
+ * Exported so InspectorPanel can use it for header/container colors.
  */
-async function ensureThemeLoaded(themeName) {
-  if (_loadedThemes.has(themeName)) return
-  try {
-    // Dynamic import of CSS — Vite handles this
-    await import(/* @vite-ignore */ `highlight.js/styles/${themeName}.css`)
-    _loadedThemes.set(themeName, true)
-  } catch {
-    // Fallback: try github-dark-dimmed if the requested theme doesn't exist
-    if (themeName !== 'github-dark-dimmed') {
-      try {
-        await import('highlight.js/styles/github-dark-dimmed.css')
-        _loadedThemes.set(themeName, true)
-      } catch { /* ignore */ }
-    }
-  }
+export function getColors() {
+  const id = resolveThemeId()
+  return THEMES[id] || THEMES['github-dark-dimmed']
 }
 
-/**
- * Escape HTML entities in a string.
- */
+// ---------------------------------------------------------------------------
+// HTML generation
+// ---------------------------------------------------------------------------
+
 function escapeHtml(str) {
   return str
     .replace(/&/g, '&amp;')
@@ -93,36 +195,46 @@ function escapeHtml(str) {
     .replace(/"/g, '&quot;')
 }
 
+/**
+ * Convert highlight.js class-based spans to inline-styled spans.
+ * highlight.js emits `<span class="hljs-keyword">` etc.
+ * We replace each with `<span style="color:...">` using the palette.
+ */
+function applyInlineColors(html, colors) {
+  return html.replace(
+    /<span class="hljs-([^"]+)">/g,
+    (_, cls) => {
+      const color = colors[cls] || colors.fg
+      return `<span style="color:${color}">`
+    }
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
 /**
  * Create the inspector highlighter.
- * Returns an object with codeToHtml() matching the Shiki API shape.
- *
- * @returns {Promise<{ codeToHtml: (code: string, options: { lang?: string, theme?: string, decorations?: Array }) => string }>}
+ * Returns an object with codeToHtml() matching the Shiki-compatible API.
  */
 export async function createInspectorHighlighter() {
-  const themeName = getThemeName()
-  await ensureThemeLoaded(themeName)
-
   return {
     /**
-     * Highlight code and return HTML string.
+     * Highlight code and return HTML string with inline styles.
      *
      * @param {string} code - Source code to highlight
      * @param {object} options
      * @param {string} [options.lang] - Language identifier
-     * @param {string} [options.theme] - Ignored (theme comes from config)
+     * @param {string} [options.theme] - Ignored (theme resolved from config)
      * @param {Array<{ start: { line: number }, end: { line: number }, properties: { class: string } }>} [options.decorations]
      * @returns {string} HTML string with highlighted code
      */
     codeToHtml(code, options = {}) {
       const lang = options.lang || 'javascript'
       const decorations = options.decorations || []
+      const colors = getColors()
 
-      // Ensure current theme is loaded (non-blocking, already cached after first call)
-      const currentTheme = getThemeName()
-      ensureThemeLoaded(currentTheme)
-
-      // Highlight the code
       let highlighted
       try {
         highlighted = hljs.highlight(code, { language: lang, ignoreIllegals: true }).value
@@ -130,9 +242,10 @@ export async function createInspectorHighlighter() {
         highlighted = escapeHtml(code)
       }
 
-      // Split into lines and wrap each in a <span class="line">
+      // Convert class-based spans to inline styles
+      highlighted = applyInlineColors(highlighted, colors)
+
       const lines = highlighted.split('\n')
-      // Build a set of highlighted line numbers (0-indexed from decorations)
       const highlightedLines = new Set()
       for (const dec of decorations) {
         if (dec.start && dec.properties?.class) {
@@ -148,7 +261,7 @@ export async function createInspectorHighlighter() {
         return `<span class="${classes.join(' ')}">${line}</span>`
       }).join('\n')
 
-      return `<pre class="hljs"><code>${wrappedLines}</code></pre>`
+      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:0;overflow-x:auto"><code>${wrappedLines}</code></pre>`
     },
   }
 }

package/src/sidepanel.css

@@ -34,7 +34,7 @@ html:not(.sb-sidepanel-open) > body > #root {
 
 /* Push the CoreUIBar (fixed bottom-right) — side mode */
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom) [data-core-ui-bar] {
-  right: calc(var(--sidepanel-width) + 24px);
+  right: calc(var(--sidepanel-width) + 24px) !important;
   transition: right 0.25s ease;
 }
 
@@ -76,7 +76,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-inspect > body > #roo
 
 /* Push the CoreUIBar up — bottom mode */
 html.sb-sidepanel-open.sb-sidepanel-bottom [data-core-ui-bar] {
-  bottom: calc(var(--sidepanel-height) + 24px);
+  bottom: calc(var(--sidepanel-height) + 24px) !important;
   transition: bottom 0.25s ease;
 }
 

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,
+      },
     }),
   )
 }
@@ -183,7 +200,7 @@ const SYNC_STORAGE_KEY = 'sb-theme-sync'
 const DEFAULT_SYNC: ThemeSyncTargets = {
   prototype: true,
   toolbar: false,
-  codeBoxes: false,
+  codeBoxes: true,
 }
 
 function readStoredSync(): ThemeSyncTargets {

package/src/tools/handlers/flows.js

@@ -18,7 +18,11 @@ export async function handler(ctx) {
       if (base && path.startsWith(base)) path = path.slice(base.length)
       path = path.replace(/\/+$/, '') || '/'
       const segments = path.split('/').filter(Boolean)
-      const proto = segments[0] || null
+
+      // 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 []
 
       const params = new URLSearchParams(window.location.search)
@@ -46,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
+          },
         }
       })
     },

package/toolbar.config.json

@@ -16,23 +16,11 @@
   },
 
   "highlighting": {
-    "dark": "night owl",
-    "light": "night owl light"
+    "dark": "github-dark-dimmed",
+    "light": "github"
   },
 
   "tools": {
-    "inspector": {
-      "ariaLabel": "Inspect components",
-      "icon": "iconoir/square-dashed",
-      "render": "sidepanel",
-      "surface": "main-toolbar",
-      "sidepanel": "inspector",
-      "handler": "core:inspector",
-      "modes": ["*"],
-      "excludeRoutes": ["^/$", "/viewfinder", "/canvas/"],
-      "meta": { "strokeWeight": 2, "scale": 1.1 },
-      "shortcut": { "key": "i", "label": "⌘I" }
-    },
     "flows": {
       "label": "Flows",
       "ariaLabel": "Switch flow",
@@ -42,7 +30,7 @@
       "modes": ["*"],
       "menuWidth": "260px",
       "handler": "core:flows"
-    },
+    },    
     "theme": {
       "label": "Theme",
       "ariaLabel": "Switch theme",
@@ -63,11 +51,18 @@
       "modes": ["*"],
       "excludeRoutes": ["^/$", "/viewfinder"]
     },
-    "sep-actions": {
-      "render": "separator",
-      "surface": "command-list",
-      "modes": ["*"]
-    },
+    "inspector": {
+      "ariaLabel": "Inspect components",
+      "icon": "iconoir/square-dashed",
+      "render": "sidepanel",
+      "surface": "main-toolbar",
+      "sidepanel": "inspector",
+      "handler": "core:inspector",
+      "modes": ["*"],
+      "excludeRoutes": ["^/$", "/viewfinder", "/canvas/"],
+      "meta": { "strokeWeight": 2, "scale": 1.1 },
+      "shortcut": { "key": "i", "label": "⌘I" }
+    },    
     "create": {
       "label": "Create",
       "ariaLabel": "Create",