@dfosco/storyboard-core 3.3.1 → 3.4.0

package/src/inspector/highlighter.js

@@ -1,38 +1,154 @@
 /**
- * Lightweight shiki highlighter for the inspector panel.
+ * Lightweight highlight.js highlighter for the inspector panel.
  *
- * Uses shiki/core with only the four languages the inspector needs,
- * avoiding the full shiki bundle that registers 200+ lazy-loaded
- * language chunks (which break in deployed/static environments).
+ * Uses highlight.js/core with only the languages the inspector needs
+ * (javascript, typescript, xml for JSX), producing small bundles with
+ * no WASM dependencies.
  *
- * 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.
+ * 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.
  */
-export async function createInspectorHighlighter() {
+
+import hljs from 'highlight.js/lib/core'
+import javascript from 'highlight.js/lib/languages/javascript'
+import typescript from 'highlight.js/lib/languages/typescript'
+import xml from 'highlight.js/lib/languages/xml'
+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()
+
+/**
+ * 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.
+ */
+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 */ }
+  }
+
+  // When not synced, always use dark theme for code boxes
+  if (!codeBoxesSynced) return darkTheme
+
+  // When synced, follow the current resolved theme
+  const sbTheme = typeof document !== 'undefined'
+    ? document.documentElement.getAttribute('data-sb-theme') || 'dark'
+    : 'dark'
+
+  return sbTheme.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.
+ */
+async function ensureThemeLoaded(themeName) {
+  if (_loadedThemes.has(themeName)) return
   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),
-      ])
-
-    if (!shikiCore || !oniguruma || !tsx || !jsx || !javascript || !typescript || !githubDark || !wasm) {
-      return null
+    // 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 */ }
     }
+  }
+}
 
-    return shikiCore.createHighlighterCore({
-      themes: [githubDark.default],
-      langs: [tsx.default, jsx.default, javascript.default, typescript.default],
-      engine: oniguruma.createOnigurumaEngine(wasm),
-    })
-  } catch {
-    return null
+/**
+ * Escape HTML entities in a string.
+ */
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/**
+ * 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 }>}
+ */
+export async function createInspectorHighlighter() {
+  const themeName = getThemeName()
+  await ensureThemeLoaded(themeName)
+
+  return {
+    /**
+     * Highlight code and return HTML string.
+     *
+     * @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 {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 || []
+
+      // 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
+      } catch {
+        highlighted = escapeHtml(code)
+      }
+
+      // Split into lines and wrap each in a <span class="line">
+      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) {
+          for (let i = dec.start.line; i <= (dec.end?.line ?? dec.start.line); i++) {
+            highlightedLines.add(i)
+          }
+        }
+      }
+
+      const wrappedLines = lines.map((line, i) => {
+        const classes = ['line']
+        if (highlightedLines.has(i)) classes.push('highlighted-line')
+        return `<span class="${classes.join(' ')}">${line}</span>`
+      }).join('\n')
+
+      return `<pre class="hljs"><code>${wrappedLines}</code></pre>`
+    },
   }
 }

package/src/lib/components/ui/button/button.svelte

@@ -36,7 +36,7 @@
 	});
 
 	export const wrapperVariants = tv({
-		base: "rounded-lg inline-flex shrink-0 transition-transform",
+		base: "inline-flex shrink-0 transition-transform",
 		variants: {
 			size: {
 				default: "h-8",

package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -19,7 +19,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"font-sans data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 w-(--bits-dropdown-menu-anchor-width) data-closed:overflow-hidden z-[10000] bg-popover border-3 border-slate-400 text-slate-800 fill-slate-600 min-w-40 rounded-xl p-2 shadow-xl duration-100 overflow-x-hidden overflow-y-auto",
+			"font-sans data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 w-(--bits-dropdown-menu-anchor-width) data-closed:overflow-hidden z-[10000] bg-popover border-3 border-border text-popover-foreground fill-popover-foreground min-w-40 rounded-xl p-2 shadow-xl duration-100 overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
-	class={cn("font-sans data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] bg-popover border-3 border-slate-400 text-slate-800 fill-slate-600 min-w-[96px] rounded-xl p-2 shadow-xl duration-100 w-auto", className)}
+	class={cn("font-sans data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] bg-popover border-3 border-border text-popover-foreground fill-popover-foreground min-w-[96px] rounded-xl p-2 shadow-xl duration-100 w-auto", className)}
 	{...restProps}
 />

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-2.5 py-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/trigger-button/trigger-button.svelte

@@ -31,6 +31,9 @@
     class: className,
     wrapperClass = "",
     active = false,
+    inactive = false,
+    dimmed = false,
+    localOnly = false,
     size = "icon-2xl",
     children,
     ...restProps
@@ -41,13 +44,21 @@
   );
 </script>
 
-<span data-trigger-button data-active={active || undefined} style:--sb-trigger-border-width={borderWidth}>
+<span
+  data-trigger-button
+  data-active={active || undefined}
+  data-inactive={inactive || undefined}
+  data-dimmed={dimmed || undefined}
+  data-local-only={localOnly || undefined}
+  style:--sb-trigger-border-width={borderWidth}
+>
   <Button
     variant="trigger"
     {size}
+    disabled={inactive}
     wrapperClass={cn(
       "smooth-corners [--smooth-corners:4] hover:rotate-2 focus-visible:rotate-2 transition-transform",
-      active && "rotate-2",
+      active && !inactive && "rotate-2",
       wrapperClass
     )}
     class={cn(
@@ -62,7 +73,8 @@
 
 <style>
   [data-trigger-button] {
-    display: contents;
+    display: inline-flex;
+    position: relative;
   }
   [data-trigger-button] :global([data-slot="button-wrapper"]) {
     --sc-border-color: var(--trigger-border, var(--color-slate-400));
@@ -82,4 +94,20 @@
   [data-trigger-button][data-active] :global([data-slot="button"]) {
     background-color: var(--trigger-bg-hover, var(--color-slate-300));
   }
+
+  /* Inactive: disabled-looking, no interaction */
+  [data-trigger-button][data-inactive] {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  /* Dimmed: reduced visibility, interactive on hover/focus */
+  [data-trigger-button][data-dimmed] {
+    opacity: 0.3;
+    transition: opacity 200ms;
+  }
+  [data-trigger-button][data-dimmed]:hover,
+  [data-trigger-button][data-dimmed]:focus-within {
+    opacity: 1;
+  }
 </style>

package/src/modes.css

@@ -87,4 +87,12 @@ html.storyboard-mode-inspect {
   --trigger-bg-hover: color-mix(in srgb, var(--mode-color) 20%, white);
   --trigger-text: color-mix(in srgb, var(--mode-color) 85%, black);
   --trigger-border: color-mix(in srgb, var(--mode-color) 45%, white);
+}
+
+/* Dark trigger tokens — applied when toolbar follows a dark theme */
+:root[data-sb-toolbar-theme^="dark"] {
+  --trigger-bg: #21262d;
+  --trigger-bg-hover: #30363d;
+  --trigger-text: #e6edf3;
+  --trigger-border: #30363d;
 }

package/src/mountStoryboardCore.js

@@ -17,6 +17,7 @@ import { initCommentsConfig, isCommentsEnabled } from './comments/config.js'
 import { initFeatureFlags } from './featureFlags.js'
 import { initPlugins } from './plugins.js'
 import { initUIConfig } from './uiConfig.js'
+import { initToolbarConfig } from './toolbarConfigStore.js'
 
 let _mounted = false
 
@@ -85,12 +86,14 @@ async function injectUIStyles() {
  * @param {object} [options={}]
  * @param {string} [options.basePath='/'] - Base URL path (e.g. import.meta.env.BASE_URL)
  * @param {HTMLElement} [options.container=document.body] - Where to mount devtools
+ * @param {Record<string, () => Promise<any>>} [options.handlers={}] - Custom tool handlers (key → lazy loader)
  */
 export async function mountStoryboardCore(config = {}, options = {}) {
   if (_mounted) return
   _mounted = true
 
   const basePath = options.basePath || '/'
+  const customHandlers = options.handlers || {}
 
   // Apply saved theme to DOM immediately — before Svelte/React mount
   applyEarlyTheme()
@@ -130,9 +133,16 @@ export async function mountStoryboardCore(config = {}, options = {}) {
     ? deepMerge(defaultConfig, config.toolbar)
     : { ...defaultConfig }
 
-  // Inject repository URL from storyboard.config.json into the command menu
+  // Inject repository URL from storyboard.config.json into the toolbar config
   if (config.repository?.owner && config.repository?.name) {
     const repoUrl = `https://github.com/${config.repository.owner}/${config.repository.name}`
+
+    // New tools schema
+    if (toolbarConfig.tools?.repository) {
+      toolbarConfig.tools.repository.url = repoUrl
+    }
+
+    // Legacy menus schema
     const commandMenu = toolbarConfig.menus?.command
     if (commandMenu?.actions) {
       const repoAction = commandMenu.actions.find(a => a.id === 'core/repository')
@@ -140,6 +150,9 @@ export async function mountStoryboardCore(config = {}, options = {}) {
     }
   }
 
+  // Seed the reactive toolbar config store (core → custom merge)
+  initToolbarConfig(toolbarConfig)
+
   // Skip all UI mounting when loaded inside a prototype embed iframe
   const isEmbed = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')
   if (isEmbed) return
@@ -155,6 +168,7 @@ export async function mountStoryboardCore(config = {}, options = {}) {
     container: options.container,
     basePath,
     toolbarConfig,
+    customHandlers,
   })
 
   // Mount comments system if configured

package/src/stores/themeStore.ts

@@ -95,6 +95,10 @@ function _applyToDOM(theme: ThemeValue, resolved: string): void {
   // Internal attribute
   el.setAttribute('data-sb-theme', resolved)
 
+  // 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') {
@@ -163,6 +167,68 @@ if (typeof window !== 'undefined') {
     })
 }
 
+// ---------------------------------------------------------------------------
+// Theme sync targets
+// ---------------------------------------------------------------------------
+
+/** Which parts of the UI follow the global theme */
+export interface ThemeSyncTargets {
+  prototype: boolean
+  toolbar: boolean
+  codeBoxes: boolean
+}
+
+const SYNC_STORAGE_KEY = 'sb-theme-sync'
+
+const DEFAULT_SYNC: ThemeSyncTargets = {
+  prototype: true,
+  toolbar: false,
+  codeBoxes: false,
+}
+
+function readStoredSync(): ThemeSyncTargets {
+  if (typeof localStorage === 'undefined') return { ...DEFAULT_SYNC }
+  try {
+    const raw = localStorage.getItem(SYNC_STORAGE_KEY)
+    if (!raw) return { ...DEFAULT_SYNC }
+    return { ...DEFAULT_SYNC, ...JSON.parse(raw) }
+  } catch {
+    return { ...DEFAULT_SYNC }
+  }
+}
+
+let _syncTargets: ThemeSyncTargets = readStoredSync()
+const _syncStore = writable<ThemeSyncTargets>(_syncTargets)
+
+/**
+ * Get the current theme sync targets.
+ */
+export function getThemeSyncTargets(): ThemeSyncTargets {
+  return { ..._syncTargets }
+}
+
+/**
+ * Set a theme sync target. Persists to localStorage.
+ */
+export function setThemeSyncTarget(target: keyof ThemeSyncTargets, value: boolean): void {
+  _syncTargets = { ..._syncTargets, [target]: value }
+  _syncStore.set(_syncTargets)
+
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(SYNC_STORAGE_KEY, JSON.stringify(_syncTargets))
+  }
+
+  // Re-apply DOM attributes so toolbar/codebox can react
+  const state = snapshot(_current)
+  _applyToDOM(_current, state.resolved)
+  _dispatchEvent(_current, state.resolved)
+}
+
+/**
+ * Readable Svelte store for sync target state.
+ */
+export const themeSyncState: Readable<ThemeSyncTargets> = { subscribe: _syncStore.subscribe }
+
 // ---------------------------------------------------------------------------
 // Boot — apply the stored theme immediately on import
 // ---------------------------------------------------------------------------

package/src/svelte-plugin-ui/components/Viewfinder.svelte

@@ -446,17 +446,22 @@
       {/snippet}
 
       {#snippet canvasEntry(canvas)}
-        <a class="listItem" href={canvas.route}>
-          <div class="cardBody">
-            <p class="protoName">{canvas.name}</p>
-            {#if canvas.description}
-              <p class="protoDesc">{canvas.description}</p>
-            {/if}
-            {#if canvas.widgetCount > 0}
-              <p class="flowDesc">{canvas.widgetCount} widget{canvas.widgetCount === 1 ? '' : 's'}</p>
-            {/if}
-          </div>
-        </a>
+        <section class="protoGroup">
+          <a class="listItem" href={canvas.route}>
+            <div class="cardBody">
+              <p class="protoName">
+                <span class="protoIcon">{canvas.icon || '🎨'}</span>
+                {canvas.name}
+              </p>
+              {#if canvas.description}
+                <p class="protoDesc">{canvas.description}</p>
+              {/if}
+              {#if canvas.widgetCount > 0}
+                <p class="flowDesc">{canvas.widgetCount} widget{canvas.widgetCount === 1 ? '' : 's'}</p>
+              {/if}
+            </div>
+          </a>
+        </section>
       {/snippet}
 
       {#if viewMode === 'prototypes'}