@dfosco/storyboard-react 3.7.0 → 3.8.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.7.0",
+    "@dfosco/storyboard-core": "3.8.0",
     "@dfosco/tiny-canvas": "^1.1.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",

package/src/canvas/CanvasPage.bridge.test.jsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
+import { getCanvasPrimerAttrs, getCanvasThemeVars } from './canvasTheme.js'
 import { updateCanvas } from './canvasApi.js'
 
 vi.mock('@dfosco/tiny-canvas', () => ({
@@ -34,7 +35,13 @@ const mockCanvas = {
 }
 
 vi.mock('./useCanvas.js', () => ({
-  useCanvas: () => ({ canvas: mockCanvas, jsxExports: null, loading: false }),
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: {
+      PrimaryButtons: () => <div data-testid="jsx-widget-content">jsx widget</div>,
+    },
+    loading: false,
+  }),
 }))
 
 vi.mock('./widgets/index.js', () => ({
@@ -138,3 +145,61 @@ describe('CanvasPage canvas bridge', () => {
     })
   })
 })
+
+describe('getCanvasThemeVars', () => {
+  it('returns a distinct dark-dimmed background token', () => {
+    expect(getCanvasThemeVars('light')['--sb--canvas-bg']).toBe('#f6f8fa')
+    expect(getCanvasThemeVars('light')['--tc-bg-muted']).toBe('#f6f8fa')
+    expect(getCanvasThemeVars('dark')['--sb--canvas-bg']).toBe('#161b22')
+    expect(getCanvasThemeVars('dark')['--bgColor-muted']).toBe('#161b22')
+    expect(getCanvasThemeVars('dark')['--tc-bg-muted']).toBe('#161b22')
+    expect(getCanvasThemeVars('dark_dimmed')['--sb--canvas-bg']).toBe('#22272e')
+    expect(getCanvasThemeVars('dark_dimmed')['--bgColor-muted']).toBe('#22272e')
+    expect(getCanvasThemeVars('dark_dimmed')['--tc-bg-muted']).toBe('#22272e')
+    expect(getCanvasThemeVars('dark_dimmed')['--tc-dot-color']).toBe('rgba(205, 217, 229, 0.22)')
+    expect(getCanvasThemeVars('dark_dimmed')['--overlay-backdrop-bgColor']).toBe('rgba(205, 217, 229, 0.22)')
+  })
+})
+
+describe('getCanvasPrimerAttrs', () => {
+  it('maps canvas theme to local Primer mode attrs', () => {
+    expect(getCanvasPrimerAttrs('light')).toEqual({
+      'data-color-mode': 'light',
+      'data-dark-theme': 'dark',
+      'data-light-theme': 'light',
+    })
+    expect(getCanvasPrimerAttrs('dark')).toEqual({
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark',
+      'data-light-theme': 'light',
+    })
+    expect(getCanvasPrimerAttrs('dark_dimmed')).toEqual({
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark_dimmed',
+      'data-light-theme': 'light',
+    })
+  })
+})
+
+describe('canvas target fallback', () => {
+  it('stays light when canvas target is unchecked even if stale canvas attribute is dark', () => {
+    localStorage.setItem('sb-theme-sync', JSON.stringify({
+      prototype: true,
+      toolbar: true,
+      codeBoxes: true,
+      canvas: false,
+    }))
+    localStorage.setItem('sb-color-scheme', 'dark')
+    document.documentElement.setAttribute('data-sb-canvas-theme', 'dark')
+
+    render(<CanvasPage name="design-overview" />)
+
+    const scroll = document.querySelector('[data-storyboard-canvas-scroll]')
+    const jsxWidget = document.getElementById('jsx-PrimaryButtons')
+    expect(scroll?.style.getPropertyValue('--sb--canvas-bg')).toBe('#f6f8fa')
+    expect(scroll?.style.getPropertyValue('--tc-bg-muted')).toBe('#f6f8fa')
+    expect(scroll?.getAttribute('data-color-mode')).toBe('light')
+    expect(jsxWidget?.getAttribute('data-color-mode')).toBe('light')
+    expect(jsxWidget?.style.getPropertyValue('--bgColor-default')).toBe('#ffffff')
+  })
+})

package/src/canvas/CanvasPage.jsx

@@ -3,6 +3,7 @@ import { Canvas } from '@dfosco/tiny-canvas'
 import '@dfosco/tiny-canvas/style.css'
 import { useCanvas } from './useCanvas.js'
 import { shouldPreventCanvasTextSelection } from './textSelection.js'
+import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
@@ -14,6 +15,30 @@ const ZOOM_MAX = 200
 
 const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
 
+function getToolbarColorMode(theme) {
+  return String(theme || 'light').startsWith('dark') ? 'dark' : 'light'
+}
+
+function resolveCanvasThemeFromStorage() {
+  if (typeof localStorage === 'undefined') return 'light'
+  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
+  try {
+    const rawSync = localStorage.getItem('sb-theme-sync')
+    if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
+  } catch {
+    // Ignore malformed sync settings
+  }
+
+  if (!sync.canvas) return 'light'
+
+  const attrTheme = document.documentElement.getAttribute('data-sb-canvas-theme')
+  if (attrTheme) return attrTheme
+
+  const stored = localStorage.getItem('sb-color-scheme') || 'system'
+  if (stored !== 'system') return stored
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
 /**
  * Debounce helper — returns a function that delays invocation.
  */
@@ -72,6 +97,7 @@ export default function CanvasPage({ name }) {
   const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
   const titleInputRef = useRef(null)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
+  const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
 
   if (canvas !== trackedCanvas) {
     setTrackedCanvas(canvas)
@@ -223,6 +249,17 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('storyboard:canvas:set-zoom', handleZoom)
   }, [])
 
+  // Canvas background should follow toolbar theme target.
+  useEffect(() => {
+    function readMode() {
+      setCanvasTheme(resolveCanvasThemeFromStorage())
+    }
+
+    readMode()
+    document.addEventListener('storyboard:theme:changed', readMode)
+    return () => document.removeEventListener('storyboard:theme:changed', readMode)
+  }, [])
+
   // Broadcast zoom level to CoreUIBar whenever it changes
   useEffect(() => {
     window[CANVAS_BRIDGE_STATE_KEY] = { active: true, name, zoom }
@@ -405,9 +442,14 @@ export default function CanvasPage({ name }) {
     dotted: canvas.dotted ?? false,
     grid: canvas.grid ?? false,
     gridSize: canvas.gridSize ?? 18,
-    colorMode: canvas.colorMode ?? 'auto',
+    colorMode: canvas.colorMode === 'auto'
+      ? getToolbarColorMode(canvasTheme)
+      : (canvas.colorMode ?? 'auto'),
   }
 
+  const canvasThemeVars = getCanvasThemeVars(canvasTheme)
+  const canvasPrimerAttrs = getCanvasPrimerAttrs(canvasTheme)
+
   // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
   const allChildren = []
 
@@ -427,6 +469,8 @@ export default function CanvasPage({ name }) {
           id={`jsx-${exportName}`}
           data-tc-x={sourcePosition.x}
           data-tc-y={sourcePosition.y}
+          {...canvasPrimerAttrs}
+          style={canvasThemeVars}
         >
           <ComponentWidget component={Component} />
         </div>
@@ -442,6 +486,8 @@ export default function CanvasPage({ name }) {
         id={widget.id}
         data-tc-x={widget?.position?.x ?? 0}
         data-tc-y={widget?.position?.y ?? 0}
+        {...canvasPrimerAttrs}
+        style={canvasThemeVars}
         onClick={(e) => {
           e.stopPropagation()
           setSelectedWidgetId(widget.id)
@@ -476,13 +522,19 @@ export default function CanvasPage({ name }) {
       <div
         ref={scrollRef}
         data-storyboard-canvas-scroll
+        data-sb-canvas-theme={canvasTheme}
+        {...canvasPrimerAttrs}
         className={styles.canvasScroll}
-        style={spaceHeld ? { cursor: panningActive ? 'grabbing' : 'grab' } : undefined}
+        style={{
+          ...canvasThemeVars,
+          ...(spaceHeld ? { cursor: panningActive ? 'grabbing' : 'grab' } : {}),
+        }}
         onClick={() => setSelectedWidgetId(null)}
         onMouseDown={handlePanStart}
       >
         <div
           data-storyboard-canvas-zoom
+          data-sb-canvas-theme={canvasTheme}
           className={styles.canvasZoom}
           style={{
             transform: `scale(${scale})`,

package/src/canvas/CanvasPage.module.css

@@ -18,12 +18,12 @@
   width: 100vw;
   height: 100vh;
   overflow: auto;
-  background-color: var(--bgColor-muted, #f6f8fa);
+  background-color: var(--sb--canvas-bg, var(--bgColor-muted, #f6f8fa));
 }
 
 @media (prefers-color-scheme: dark) {
   .canvasScroll {
-    background-color: var(--bgColor-muted, #161b22);
+    background-color: var(--sb--canvas-bg, var(--bgColor-muted, #161b22));
   }
 }
 

package/src/canvas/canvasTheme.js

@@ -0,0 +1,74 @@
+export function getCanvasPrimerAttrs(theme) {
+  if (String(theme || 'light') === 'dark_dimmed') {
+    return {
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark_dimmed',
+      'data-light-theme': 'light',
+    }
+  }
+  if (String(theme || 'light').startsWith('dark')) {
+    return {
+      'data-color-mode': 'dark',
+      'data-dark-theme': 'dark',
+      'data-light-theme': 'light',
+    }
+  }
+  return {
+    'data-color-mode': 'light',
+    'data-dark-theme': 'dark',
+    'data-light-theme': 'light',
+  }
+}
+
+export function getCanvasThemeVars(theme) {
+  const value = String(theme || 'light')
+  if (value === 'dark_dimmed') {
+    return {
+      '--sb--canvas-bg': '#22272e',
+      '--bgColor-default': '#22272e',
+      '--bgColor-muted': '#22272e',
+      '--bgColor-neutral-muted': 'rgba(99, 110, 123, 0.3)',
+      '--bgColor-accent-emphasis': '#316dca',
+      '--tc-bg-muted': '#22272e',
+      '--tc-dot-color': 'rgba(205, 217, 229, 0.22)',
+      '--overlay-backdrop-bgColor': 'rgba(205, 217, 229, 0.22)',
+      '--fgColor-muted': '#768390',
+      '--fgColor-default': '#adbac7',
+      '--fgColor-onEmphasis': '#ffffff',
+      '--borderColor-default': '#444c56',
+      '--borderColor-muted': '#545d68',
+    }
+  }
+  if (value.startsWith('dark')) {
+    return {
+      '--sb--canvas-bg': '#161b22',
+      '--bgColor-default': '#161b22',
+      '--bgColor-muted': '#161b22',
+      '--bgColor-neutral-muted': 'rgba(110, 118, 129, 0.2)',
+      '--bgColor-accent-emphasis': '#2f81f7',
+      '--tc-bg-muted': '#161b22',
+      '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
+      '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
+      '--fgColor-muted': '#8b949e',
+      '--fgColor-default': '#e6edf3',
+      '--fgColor-onEmphasis': '#ffffff',
+      '--borderColor-default': '#30363d',
+      '--borderColor-muted': '#30363d',
+    }
+  }
+  return {
+    '--sb--canvas-bg': '#f6f8fa',
+    '--bgColor-default': '#ffffff',
+    '--tc-bg-muted': '#f6f8fa',
+    '--tc-dot-color': 'rgba(0, 0, 0, 0.08)',
+    '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.08)',
+    '--bgColor-muted': '#f6f8fa',
+    '--bgColor-neutral-muted': '#eaeef2',
+    '--bgColor-accent-emphasis': '#2f81f7',
+    '--fgColor-muted': '#656d76',
+    '--fgColor-default': '#1f2328',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d8dee4',
+  }
+}

package/src/canvas/widgets/MarkdownBlock.module.css

@@ -1,6 +1,11 @@
 .block {
   min-height: 80px;
-  background: var(--bgColor-default, #ffffff);
+  --sb--markdown-bg: var(--bgColor-default, #ffffff);
+  --sb--markdown-fg: var(--fgColor-default, #1f2328);
+  --sb--markdown-muted: var(--fgColor-muted, #656d76);
+  --sb--markdown-accent: var(--bgColor-accent-emphasis, #2f81f7);
+  background: var(--sb--markdown-bg);
+  color: var(--sb--markdown-fg);
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
@@ -8,11 +13,15 @@
   padding: 16px 20px;
   font-size: 14px;
   line-height: 1.6;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--sb--markdown-fg);
   cursor: text;
   min-height: 60px;
 }
 
+.preview :global(*) {
+  color: inherit;
+}
+
 .preview h1 {
   font-size: 20px;
   font-weight: 700;
@@ -56,7 +65,7 @@
 }
 
 .preview :global(.placeholder) {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--sb--markdown-muted);
   font-style: italic;
 }
 
@@ -69,10 +78,10 @@
   padding: 16px 20px;
   border: none;
   outline: none;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--sb--markdown-bg);
   font-family: ui-monospace, SFMono-Regular, monospace;
   font-size: 13px;
   line-height: 1.5;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--sb--markdown-fg);
   resize: none;
 }

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
+import { getEmbedChromeVars } from './embedTheme.js'
 import styles from './PrototypeEmbed.module.css'
 
 function formatName(name) {
@@ -10,6 +11,23 @@ function formatName(name) {
     .replace(/\b\w/g, (c) => c.toUpperCase())
 }
 
+function resolveCanvasThemeFromStorage() {
+  if (typeof localStorage === 'undefined') return 'light'
+  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
+  try {
+    const rawSync = localStorage.getItem('sb-theme-sync')
+    if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
+  } catch {
+    // Ignore malformed sync settings
+  }
+  if (!sync.canvas) return 'light'
+  const attrTheme = document.documentElement.getAttribute('data-sb-canvas-theme')
+  if (attrTheme) return attrTheme
+  const stored = localStorage.getItem('sb-color-scheme') || 'system'
+  if (stored !== 'system') return stored
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
 export default function PrototypeEmbed({ props, onUpdate }) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
@@ -19,17 +37,21 @@ export default function PrototypeEmbed({ props, onUpdate }) {
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const rawSrc = src ? `${basePath}${src}` : ''
-  const iframeSrc = rawSrc ? `${rawSrc}${rawSrc.includes('?') ? '&' : '?'}_sb_embed` : ''
 
   const scale = zoom / 100
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)
   const [filter, setFilter] = useState('')
+  const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
 
+  const iframeSrc = rawSrc
+    ? `${rawSrc}${rawSrc.includes('?') ? '&' : '?'}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}`
+    : ''
+
   // Build prototype index for the picker
   const prototypeIndex = useMemo(() => {
     try {
@@ -132,6 +154,17 @@ export default function PrototypeEmbed({ props, onUpdate }) {
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [interactive])
 
+  useEffect(() => {
+    function readToolbarTheme() {
+      setCanvasTheme(resolveCanvasThemeFromStorage())
+    }
+    readToolbarTheme()
+    document.addEventListener('storyboard:theme:changed', readToolbarTheme)
+    return () => document.removeEventListener('storyboard:theme:changed', readToolbarTheme)
+  }, [])
+
+  const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
+
   const enterInteractive = useCallback(() => setInteractive(true), [])
 
   function handlePickRoute(route) {
@@ -158,7 +191,7 @@ export default function PrototypeEmbed({ props, onUpdate }) {
       <div
         ref={embedRef}
         className={styles.embed}
-        style={{ width, height }}
+        style={{ width, height, ...chromeVars }}
       >
         {editing ? (
           <div

package/src/canvas/widgets/PrototypeEmbed.module.css

@@ -52,10 +52,9 @@
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.92);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: var(--bgColor-default, rgba(255, 255, 255, 0.92));
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.12));
+  color: var(--fgColor-default, #1f2328);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
   font-size: 14px;
   opacity: 0;
@@ -68,18 +67,7 @@
 }
 
 .editBtn:hover {
-  background: rgba(255, 255, 255, 0.98);
-}
-
-@media (prefers-color-scheme: dark) {
-  .editBtn {
-    background: rgba(22, 27, 34, 0.88);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  .editBtn:hover {
-    background: rgba(30, 37, 46, 0.95);
-  }
+  background: var(--bgColor-muted, rgba(255, 255, 255, 0.98));
 }
 
 .urlForm {

package/src/canvas/widgets/PrototypeEmbed.test.jsx

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import { getEmbedChromeVars } from './embedTheme.js'
+
+describe('getEmbedChromeVars', () => {
+  it('follows toolbar theme variants for embed edit chrome', () => {
+    expect(getEmbedChromeVars('light')['--bgColor-default']).toBe('#ffffff')
+    expect(getEmbedChromeVars('dark')['--bgColor-default']).toBe('#161b22')
+    expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#22272e')
+  })
+})

package/src/canvas/widgets/StickyNote.module.css

@@ -14,8 +14,7 @@
   position: relative;
 }
 
-:global(html[data-color-mode='dark']) .sticky,
-:global(html[data-sb-theme^='dark']) .sticky {
+:global([data-sb-canvas-theme^='dark']) .sticky {
   background: color-mix(in srgb, var(--sticky-bg) 30%, #0d1117 70%);
   border-color: color-mix(in srgb, var(--sticky-bg) 55%, #f0f6fc 18%);
   box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.35);
@@ -33,8 +32,7 @@
   min-height: 60px;
 }
 
-:global(html[data-color-mode='dark']) .text,
-:global(html[data-sb-theme^='dark']) .text {
+:global([data-sb-canvas-theme^='dark']) .text {
   color: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 70%);
 }
 
@@ -59,8 +57,7 @@
   resize: none;
 }
 
-:global(html[data-color-mode='dark']) .textarea,
-:global(html[data-sb-theme^='dark']) .textarea {
+:global([data-sb-canvas-theme^='dark']) .textarea {
   color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
 }
 
@@ -99,8 +96,7 @@
   z-index: 10;
 }
 
-:global(html[data-color-mode='dark']) .pickerPopup,
-:global(html[data-sb-theme^='dark']) .pickerPopup {
+:global([data-sb-canvas-theme^='dark']) .pickerPopup {
   background: var(--bgColor-muted, #161b22);
   box-shadow:
     0 0 0 1px rgba(255, 255, 255, 0.08),

package/src/canvas/widgets/embedTheme.js

@@ -0,0 +1,49 @@
+export function getEmbedChromeVars(theme) {
+  const value = String(theme || 'light')
+  if (value === 'dark_dimmed') {
+    return {
+      '--bgColor-default': '#22272e',
+      '--bgColor-muted': '#2d333b',
+      '--bgColor-neutral-muted': 'rgba(99, 110, 123, 0.3)',
+      '--fgColor-default': '#adbac7',
+      '--fgColor-muted': '#768390',
+      '--fgColor-onEmphasis': '#ffffff',
+      '--borderColor-default': '#444c56',
+      '--borderColor-muted': '#545d68',
+      '--bgColor-accent-emphasis': '#316dca',
+      '--trigger-bg': '#2d333b',
+      '--trigger-bg-hover': '#373e47',
+      '--trigger-border': '#444c56',
+    }
+  }
+  if (value.startsWith('dark')) {
+    return {
+      '--bgColor-default': '#161b22',
+      '--bgColor-muted': '#21262d',
+      '--bgColor-neutral-muted': 'rgba(110, 118, 129, 0.2)',
+      '--fgColor-default': '#e6edf3',
+      '--fgColor-muted': '#8b949e',
+      '--fgColor-onEmphasis': '#ffffff',
+      '--borderColor-default': '#30363d',
+      '--borderColor-muted': '#30363d',
+      '--bgColor-accent-emphasis': '#2f81f7',
+      '--trigger-bg': '#21262d',
+      '--trigger-bg-hover': '#30363d',
+      '--trigger-border': '#30363d',
+    }
+  }
+  return {
+    '--bgColor-default': '#ffffff',
+    '--bgColor-muted': '#f6f8fa',
+    '--bgColor-neutral-muted': '#eaeef2',
+    '--fgColor-default': '#1f2328',
+    '--fgColor-muted': '#656d76',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#d0d7de',
+    '--borderColor-muted': '#d8dee4',
+    '--bgColor-accent-emphasis': '#2f81f7',
+    '--trigger-bg': '#f6f8fa',
+    '--trigger-bg-hover': '#eaeef2',
+    '--trigger-border': '#d0d7de',
+  }
+}

package/src/context.jsx

@@ -73,6 +73,9 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     if (canvasName) return null
     const requested = sceneParam || flowName || sceneName
     if (requested) {
+      // Allow fully-scoped flow names from URLs/widgets without re-prefixing
+      // (e.g. "Proto/flow" should not become "Proto/Proto/flow").
+      if (requested.includes('/')) return requested
       return resolveFlowName(prototypeName, requested)
     }
     // 1. Page-specific flow (e.g., Example/Forms)
@@ -83,8 +86,14 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
       const protoFlow = resolveFlowName(prototypeName, prototypeName)
       if (flowExists(protoFlow)) return protoFlow
     }
-    // 3. Global default
-    return 'default'
+    // 3. Prototype-scoped default (e.g. Example/default)
+    if (prototypeName) {
+      const scopedDefault = resolveFlowName(prototypeName, 'default')
+      if (flowExists(scopedDefault)) return scopedDefault
+    }
+    // 4. Global default — or null if no flow exists at all
+    if (flowExists('default')) return 'default'
+    return null
   }, [canvasName, sceneParam, flowName, sceneName, prototypeName, pageFlow])
 
   // Auto-install body class sync (sb-key--value classes on <body>)
@@ -106,9 +115,10 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     return () => cleanup?.()
   }, [])
 
-  // Skip flow loading for canvas pages
+  // Skip flow loading for canvas pages and flow-less pages
   const { data, error } = useMemo(() => {
     if (canvasName) return { data: null, error: null }
+    if (!activeFlowName) return { data: {}, error: null }
     try {
       let flowData = loadFlow(activeFlowName)