@dfosco/storyboard-core 3.3.2 → 3.5.0

package/src/inspector/highlighter.js

@@ -1,43 +1,267 @@
 /**
- * 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.
  *
- * Import specifiers are computed via template literals so consumer
- * bundlers (Rollup, esbuild) can't statically analyze them — they
- * skip dynamic imports with variable specifiers instead of erroring.
- * Returns null when shiki is unavailable.
+ * 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.
  */
 
-// Variable indirection prevents any bundler from statically resolving
-const SHIKI = 'shiki'
+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'
 
-export async function createInspectorHighlighter() {
-  try {
-    const [shikiCore, oniguruma, tsx, jsx, javascript, typescript, githubDark, wasm] =
-      await Promise.all([
-        import(/* @vite-ignore */ `${SHIKI}/core`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/engine/oniguruma`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/dist/langs/tsx.mjs`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/dist/langs/jsx.mjs`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/dist/langs/javascript.mjs`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/dist/langs/typescript.mjs`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/dist/themes/github-dark.mjs`).catch(() => null),
-        import(/* @vite-ignore */ `${SHIKI}/wasm`).catch(() => null),
-      ])
-
-    if (!shikiCore || !oniguruma || !tsx || !jsx || !javascript || !typescript || !githubDark || !wasm) {
-      return null
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('jsx', javascript)
+hljs.registerLanguage('tsx', typescript)
+
+// ---------------------------------------------------------------------------
+// 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
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve the current theme ID based on page theme and config.
+ * Always follows the page theme (data-sb-theme attribute).
+ */
+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',
+  }
+
+  const resolved = aliases[key]
+  if (resolved && THEMES[resolved]) return resolved
+  return fallback
+}
+
+/**
+ * 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 sbTheme = typeof document !== 'undefined'
+    ? document.documentElement.getAttribute('data-sb-theme') || 'dark'
+    : 'dark'
+
+  return sbTheme.startsWith('dark') ? darkTheme : lightTheme
+}
+
+/**
+ * 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.
+ */
+export function getColors() {
+  const id = resolveThemeId()
+  return THEMES[id] || THEMES['github-dark-dimmed']
+}
+
+// ---------------------------------------------------------------------------
+// HTML generation
+// ---------------------------------------------------------------------------
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .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-compatible API.
+ */
+export async function createInspectorHighlighter() {
+  return {
+    /**
+     * 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 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()
+
+      let highlighted
+      try {
+        highlighted = hljs.highlight(code, { language: lang, ignoreIllegals: true }).value
+      } catch {
+        highlighted = escapeHtml(code)
+      }
+
+      // Convert class-based spans to inline styles
+      highlighted = applyInlineColors(highlighted, colors)
+
+      const lines = highlighted.split('\n')
+      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 shikiCore.createHighlighterCore({
-      themes: [githubDark.default],
-      langs: [tsx.default, jsx.default, javascript.default, typescript.default],
-      engine: oniguruma.createOnigurumaEngine(wasm),
-    })
-  } catch {
-    return null
+      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:0;overflow-x:auto"><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/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

@@ -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: true,
+}
+
+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'}