@dfosco/storyboard-react 3.6.1 → 3.8.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.6.1",
+  "version": "3.8.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.6.1",
+    "@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

@@ -0,0 +1,205 @@
+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', () => ({
+  Canvas: ({ children, onDragEnd }) => (
+    <div data-testid="tiny-canvas">
+      {children}
+      <button
+        data-testid="drag-widget"
+        onClick={() => onDragEnd?.('widget-1', { x: 111.4, y: 222.7 })}
+      >
+        drag widget
+      </button>
+      <button
+        data-testid="drag-source"
+        onClick={() => onDragEnd?.('jsx-PrimaryButtons', { x: 333.2, y: 444.8 })}
+      >
+        drag source
+      </button>
+    </div>
+  ),
+}))
+
+const mockCanvas = {
+  title: 'Bridge Test Canvas',
+  widgets: [{ id: 'widget-1', type: 'mock-widget', position: { x: 10, y: 20 }, props: {} }],
+  sources: [{ export: 'PrimaryButtons', position: { x: 1, y: 2 } }],
+  centered: false,
+  dotted: false,
+  grid: false,
+  gridSize: 18,
+  colorMode: 'auto',
+}
+
+vi.mock('./useCanvas.js', () => ({
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: {
+      PrimaryButtons: () => <div data-testid="jsx-widget-content">jsx widget</div>,
+    },
+    loading: false,
+  }),
+}))
+
+vi.mock('./widgets/index.js', () => ({
+  getWidgetComponent: () => function MockWidget() { return <div>mock widget</div> },
+}))
+
+vi.mock('./widgets/widgetProps.js', () => ({
+  schemas: {},
+  getDefaults: () => ({}),
+}))
+
+vi.mock('./canvasApi.js', () => ({
+  addWidget: vi.fn(),
+  updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
+  removeWidget: vi.fn(),
+}))
+
+describe('CanvasPage canvas bridge', () => {
+  beforeEach(() => {
+    delete window.__storyboardCanvasBridgeState
+    vi.clearAllMocks()
+  })
+
+  it('publishes bridge state and responds to status requests', () => {
+    const mountedHandler = vi.fn()
+    const statusHandler = vi.fn()
+    document.addEventListener('storyboard:canvas:mounted', mountedHandler)
+    document.addEventListener('storyboard:canvas:status', statusHandler)
+
+    const { unmount } = render(<CanvasPage name="design-overview" />)
+
+    expect(window.__storyboardCanvasBridgeState).toEqual({
+      active: true,
+      name: 'design-overview',
+      zoom: 100,
+    })
+    expect(mountedHandler).toHaveBeenCalled()
+
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:status-request'))
+    expect(statusHandler).toHaveBeenCalled()
+    expect(statusHandler.mock.calls.at(-1)?.[0]?.detail).toEqual({
+      active: true,
+      name: 'design-overview',
+      zoom: 100,
+    })
+
+    unmount()
+
+    document.removeEventListener('storyboard:canvas:mounted', mountedHandler)
+    document.removeEventListener('storyboard:canvas:status', statusHandler)
+  })
+
+  it('marks bridge inactive on unmount', () => {
+    const unmountedHandler = vi.fn()
+    document.addEventListener('storyboard:canvas:unmounted', unmountedHandler)
+
+    const { unmount } = render(<CanvasPage name="design-overview" />)
+    unmount()
+
+    expect(unmountedHandler).toHaveBeenCalled()
+    expect(window.__storyboardCanvasBridgeState).toEqual({
+      active: false,
+      name: '',
+      zoom: 100,
+    })
+
+    document.removeEventListener('storyboard:canvas:unmounted', unmountedHandler)
+  })
+
+  it('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
+    render(<CanvasPage name="design-overview" />)
+
+    fireEvent.click(screen.getByTestId('drag-widget'))
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          widgets: expect.arrayContaining([
+            expect.objectContaining({
+              id: 'widget-1',
+              position: { x: 111, y: 223 },
+            }),
+          ]),
+        })
+      )
+    })
+
+    fireEvent.click(screen.getByTestId('drag-source'))
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          sources: expect.arrayContaining([
+            expect.objectContaining({
+              export: 'PrimaryButtons',
+              position: { x: 333, y: 445 },
+            }),
+          ]),
+        })
+      )
+    })
+  })
+})
+
+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

@@ -2,6 +2,8 @@ import { createElement, useCallback, useEffect, useRef, useState } from 'react'
 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'
@@ -11,6 +13,32 @@ import styles from './CanvasPage.module.css'
 const ZOOM_MIN = 25
 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.
  */
@@ -22,21 +50,6 @@ function debounce(fn, ms) {
   }
 }
 
-/**
- * Save a drag position to localStorage so tiny-canvas picks it up on render.
- */
-function saveWidgetPosition(widgetId, x, y) {
-  try {
-    const queue = JSON.parse(localStorage.getItem('tiny-canvas-queue')) || []
-    const now = new Date().toISOString().replace(/[:.]/g, '-')
-    const entry = { id: widgetId, x, y, time: now }
-    const idx = queue.findIndex((item) => item.id === widgetId)
-    if (idx >= 0) queue[idx] = entry
-    else queue.push(entry)
-    localStorage.setItem('tiny-canvas-queue', JSON.stringify(queue))
-  } catch { /* localStorage unavailable */ }
-}
-
 /**
  * Get viewport-center coordinates for placing a new widget.
  */
@@ -47,6 +60,10 @@ function getViewportCenter() {
   }
 }
 
+function roundPosition(value) {
+  return Math.round(value)
+}
+
 /** Renders a single JSON-defined widget by type lookup. */
 function WidgetRenderer({ widget, onUpdate }) {
   const Component = getWidgetComponent(widget.type)
@@ -75,13 +92,17 @@ export default function CanvasPage({ name }) {
   const [trackedCanvas, setTrackedCanvas] = useState(canvas)
   const [selectedWidgetId, setSelectedWidgetId] = useState(null)
   const [zoom, setZoom] = useState(100)
+  const zoomRef = useRef(100)
   const scrollRef = useRef(null)
   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)
     setLocalWidgets(canvas?.widgets ?? null)
+    setLocalSources(canvas?.sources ?? [])
     setCanvasTitle(canvas?.title || name)
   }
 
@@ -133,15 +154,61 @@ export default function CanvasPage({ name }) {
     )
   }, [name])
 
-  // Signal canvas mount/unmount to CoreUIBar (include zoom state)
+  const handleItemDragEnd = useCallback((dragId, position) => {
+    if (!dragId || !position) return
+    const rounded = { x: roundPosition(position.x), y: roundPosition(position.y) }
+
+    if (dragId.startsWith('jsx-')) {
+      const sourceExport = dragId.replace(/^jsx-/, '')
+      setLocalSources((prev) => {
+        const current = Array.isArray(prev) ? prev : []
+        const next = current.some((s) => s?.export === sourceExport)
+          ? current.map((s) => (s?.export === sourceExport ? { ...s, position: rounded } : s))
+          : [...current, { export: sourceExport, position: rounded }]
+        updateCanvas(name, { sources: next }).catch((err) =>
+          console.error('[canvas] Failed to save source position:', err)
+        )
+        return next
+      })
+      return
+    }
+
+    setLocalWidgets((prev) => {
+      if (!prev) return prev
+      const next = prev.map((w) =>
+        w.id === dragId ? { ...w, position: rounded } : w
+      )
+      updateCanvas(name, { widgets: next }).catch((err) =>
+        console.error('[canvas] Failed to save widget position:', err)
+      )
+      return next
+    })
+  }, [name])
+
   useEffect(() => {
+    zoomRef.current = zoom
+  }, [zoom])
+
+  // Signal canvas mount/unmount to CoreUIBar
+  useEffect(() => {
+    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, name, zoom: zoomRef.current }
     document.dispatchEvent(new CustomEvent('storyboard:canvas:mounted', {
-      detail: { name, zoom }
+      detail: { name, zoom: zoomRef.current }
     }))
+
+    function handleStatusRequest() {
+      const state = window[CANVAS_BRIDGE_STATE_KEY] || { active: true, name, zoom: zoomRef.current }
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:status', { detail: state }))
+    }
+
+    document.addEventListener('storyboard:canvas:status-request', handleStatusRequest)
+
     return () => {
+      document.removeEventListener('storyboard:canvas:status-request', handleStatusRequest)
+      window[CANVAS_BRIDGE_STATE_KEY] = { active: false, name: '', zoom: 100 }
       document.dispatchEvent(new CustomEvent('storyboard:canvas:unmounted'))
     }
-  }, [name, zoom])
+  }, [name])
 
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type) => {
@@ -154,7 +221,6 @@ export default function CanvasPage({ name }) {
         position: pos,
       })
       if (result.success && result.widget) {
-        saveWidgetPosition(result.widget.id, pos.x, pos.y)
         setLocalWidgets((prev) => [...(prev || []), result.widget])
       }
     } catch (err) {
@@ -183,14 +249,36 @@ 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 }
     document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-changed', {
       detail: { zoom }
     }))
-  }, [zoom])
+  }, [name, zoom])
 
   // Delete selected widget on Delete/Backspace key
+  useEffect(() => {
+    function handleSelectStart(e) {
+      if (shouldPreventCanvasTextSelection(e.target)) {
+        e.preventDefault()
+      }
+    }
+    document.addEventListener('selectstart', handleSelectStart)
+    return () => document.removeEventListener('selectstart', handleSelectStart)
+  }, [])
+
   useEffect(() => {
     function handleKeyDown(e) {
       if (!selectedWidgetId) return
@@ -246,7 +334,6 @@ export default function CanvasPage({ name }) {
           position: pos,
         })
         if (result.success && result.widget) {
-          saveWidgetPosition(result.widget.id, pos.x, pos.y)
           setLocalWidgets((prev) => [...(prev || []), result.widget])
         }
       } catch (err) {
@@ -355,17 +442,36 @@ 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 = []
 
+  const sourcePositionByExport = Object.fromEntries(
+    (localSources || [])
+      .filter((source) => source?.export)
+      .map((source) => [source.export, source.position || { x: 0, y: 0 }])
+  )
+
   // 1. JSX-sourced component widgets
   if (jsxExports) {
     for (const [exportName, Component] of Object.entries(jsxExports)) {
+      const sourcePosition = sourcePositionByExport[exportName] || { x: 0, y: 0 }
       allChildren.push(
-        <div key={`jsx-${exportName}`} id={`jsx-${exportName}`}>
+        <div
+          key={`jsx-${exportName}`}
+          id={`jsx-${exportName}`}
+          data-tc-x={sourcePosition.x}
+          data-tc-y={sourcePosition.y}
+          {...canvasPrimerAttrs}
+          style={canvasThemeVars}
+        >
           <ComponentWidget component={Component} />
         </div>
       )
@@ -378,6 +484,10 @@ export default function CanvasPage({ name }) {
       <div
         key={widget.id}
         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)
@@ -411,12 +521,20 @@ export default function CanvasPage({ name }) {
       </div>
       <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})`,
@@ -425,7 +543,7 @@ export default function CanvasPage({ name }) {
             height: `${Math.max(10000, 100 / scale)}vh`,
           }}
         >
-          <Canvas {...canvasProps}>
+          <Canvas {...canvasProps} onDragEnd={handleItemDragEnd}>
             {allChildren}
           </Canvas>
         </div>

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/textSelection.js

@@ -0,0 +1,10 @@
+const TEXT_SELECTION_EDITING_SELECTOR = 'textarea, [contenteditable="true"], [contenteditable=""], [data-canvas-allow-text-selection]'
+
+/**
+ * Returns true when canvas mouse interactions should suppress browser text selection.
+ */
+export function shouldPreventCanvasTextSelection(target) {
+  if (!(target instanceof Element)) return true
+  return !target.closest(TEXT_SELECTION_EDITING_SELECTOR)
+}
+

package/src/canvas/textSelection.test.js

@@ -0,0 +1,26 @@
+import { shouldPreventCanvasTextSelection } from './textSelection.js'
+
+describe('shouldPreventCanvasTextSelection', () => {
+  it('prevents selection for regular canvas elements', () => {
+    const container = document.createElement('div')
+    const regular = document.createElement('p')
+    container.appendChild(regular)
+
+    expect(shouldPreventCanvasTextSelection(regular)).toBe(true)
+  })
+
+  it('allows selection for textarea editing', () => {
+    const textarea = document.createElement('textarea')
+    expect(shouldPreventCanvasTextSelection(textarea)).toBe(false)
+  })
+
+  it('allows selection for explicit editable markers', () => {
+    const wrapper = document.createElement('div')
+    wrapper.setAttribute('data-canvas-allow-text-selection', '')
+    const child = document.createElement('span')
+    wrapper.appendChild(child)
+
+    expect(shouldPreventCanvasTextSelection(child)).toBe(false)
+  })
+})
+

package/src/canvas/useCanvas.js

@@ -70,5 +70,25 @@ export function useCanvas(name) {
       })
   }, [canvas?._jsxModule])
 
+  // In dev, react to file mutations from the data plugin without reloading
+  // the current page. This keeps canvas editing state and route stable.
+  useEffect(() => {
+    if (!import.meta.hot || !buildTimeCanvas) return
+
+    const handleCanvasFileChanged = ({ data }) => {
+      if (!data || data.name !== name) return
+      fetchCanvasFromServer(name).then((fresh) => {
+        if (fresh) {
+          setCanvas((prev) => ({ ...(prev || buildTimeCanvas), ...fresh }))
+        }
+      })
+    }
+
+    import.meta.hot.on('storyboard:canvas-file-changed', handleCanvasFileChanged)
+    return () => {
+      import.meta.hot.off('storyboard:canvas-file-changed', handleCanvasFileChanged)
+    }
+  }, [name, buildTimeCanvas])
+
   return { canvas, jsxExports, loading }
 }

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -62,6 +62,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
           <textarea
             ref={textareaRef}
             className={styles.editor}
+            data-canvas-allow-text-selection
             style={{ minHeight: editHeight ? editHeight - 2 : undefined }}
             value={content}
             onChange={handleContentChange}

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.jsx

@@ -53,6 +53,7 @@ export default function StickyNote({ props, onUpdate }) {
           <textarea
             ref={textareaRef}
             className={styles.textarea}
+            data-canvas-allow-text-selection
             value={text}
             onChange={handleTextChange}
             onBlur={() => setEditing(false)}
@@ -95,4 +96,3 @@ export default function StickyNote({ props, onUpdate }) {
     </div>
   )
 }
-

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

@@ -14,6 +14,12 @@
   position: relative;
 }
 
+: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);
+}
+
 .text {
   padding: 16px 20px;
   margin: 0;
@@ -26,6 +32,10 @@
   min-height: 60px;
 }
 
+:global([data-sb-canvas-theme^='dark']) .text {
+  color: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 70%);
+}
+
 .textarea {
   position: absolute;
   top: 0;
@@ -47,6 +57,10 @@
   resize: none;
 }
 
+:global([data-sb-canvas-theme^='dark']) .textarea {
+  color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
+}
+
 /* Color picker area — sits below the sticky */
 
 .pickerArea {
@@ -82,6 +96,13 @@
   z-index: 10;
 }
 
+:global([data-sb-canvas-theme^='dark']) .pickerPopup {
+  background: var(--bgColor-muted, #161b22);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.45);
+}
+
 .pickerArea:hover .pickerDot {
   opacity: 0;
 }

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)
 

package/src/vite/data-plugin.js

@@ -573,13 +573,37 @@ export default function storyboardDataPlugin() {
     configureServer(server) {
       // Watch for data file changes in dev mode
       const watcher = server.watcher
+      if (!buildResult) buildResult = buildIndex(root)
+      const knownCanvasNames = new Set(Object.keys(buildResult.index.canvas || {}))
+      const pendingCanvasUnlinks = new Map()
+
+      const triggerFullReload = () => {
+        buildResult = null
+        const mod = server.moduleGraph.getModuleById(RESOLVED_ID)
+        if (mod) {
+          server.moduleGraph.invalidateModule(mod)
+          server.ws.send({ type: 'full-reload' })
+        }
+      }
 
       const invalidate = (filePath) => {
         const normalized = filePath.replace(/\\/g, '/')
         // Skip .canvas.jsonl content changes entirely — these are mutated
         // at runtime by the canvas server API. A full-reload would create
         // a feedback loop (save → file change → reload → lose editing state).
-        if (/\.canvas\.jsonl$/.test(normalized)) return
+        // Instead, send a custom HMR event so the active canvas page can refetch
+        // file-backed data in place with no navigation or document reload.
+        if (/\.canvas\.jsonl$/.test(normalized)) {
+          const parsed = parseDataFile(filePath)
+          if (parsed?.suffix === 'canvas' && parsed?.name) {
+            server.ws.send({
+              type: 'custom',
+              event: 'storyboard:canvas-file-changed',
+              data: { name: parsed.name },
+            })
+          }
+          return
+        }
 
         // Invalidate when toolbar.config.json inside a prototype changes
         if (normalized.endsWith('/toolbar.config.json') && normalized.includes('/prototypes/')) {
@@ -605,17 +629,64 @@ export default function storyboardDataPlugin() {
         }
       }
 
-      const invalidateOnAddRemove = (filePath) => {
+      const invalidateOnAddRemove = (filePath, eventType) => {
         const parsed = parseDataFile(filePath)
         const inFolder = filePath.replace(/\\/g, '/').includes('.folder/')
         if (!parsed && !inFolder) return
-        // Canvas additions/removals DO need a reload (new routes)
-        buildResult = null
-        const mod = server.moduleGraph.getModuleById(RESOLVED_ID)
-        if (mod) {
-          server.moduleGraph.invalidateModule(mod)
-          server.ws.send({ type: 'full-reload' })
+
+        // Canvas writers/editors can emit unlink+add for an in-place save.
+        // Treat canvas add/unlink as runtime data updates and never full-reload
+        // from watcher events. Canvas pages sync from disk via custom WS events.
+        if (parsed?.suffix === 'canvas') {
+          const name = parsed.name
+          if (eventType === 'unlink') {
+            const timer = setTimeout(() => {
+              pendingCanvasUnlinks.delete(name)
+              knownCanvasNames.delete(name)
+              server.ws.send({
+                type: 'custom',
+                event: 'storyboard:canvas-file-changed',
+                data: { name },
+              })
+            }, 1500)
+            pendingCanvasUnlinks.set(name, timer)
+            return
+          }
+
+          if (eventType === 'add') {
+            const pending = pendingCanvasUnlinks.get(name)
+            if (pending) {
+              clearTimeout(pending)
+              pendingCanvasUnlinks.delete(name)
+              server.ws.send({
+                type: 'custom',
+                event: 'storyboard:canvas-file-changed',
+                data: { name },
+              })
+              return
+            }
+
+            if (knownCanvasNames.has(name)) {
+              server.ws.send({
+                type: 'custom',
+                event: 'storyboard:canvas-file-changed',
+                data: { name },
+              })
+              return
+            }
+
+            knownCanvasNames.add(name)
+            server.ws.send({
+              type: 'custom',
+              event: 'storyboard:canvas-file-changed',
+              data: { name },
+            })
+            return
+          }
         }
+
+        // Non-canvas additions/removals and folder changes update the route/data graph.
+        triggerFullReload()
       }
 
       // Watch storyboard.config.json for changes
@@ -632,14 +703,33 @@ export default function storyboardDataPlugin() {
         }
       }
 
-      watcher.on('add', invalidateOnAddRemove)
-      watcher.on('unlink', invalidateOnAddRemove)
+      watcher.on('add', (filePath) => invalidateOnAddRemove(filePath, 'add'))
+      watcher.on('unlink', (filePath) => invalidateOnAddRemove(filePath, 'unlink'))
       watcher.on('change', (filePath) => {
         invalidate(filePath)
         invalidateConfig(filePath)
       })
     },
 
+    handleHotUpdate(ctx) {
+      const normalized = ctx.file.replace(/\\/g, '/')
+      if (!/\.canvas\.jsonl$/.test(normalized)) return
+
+      const parsed = parseDataFile(ctx.file)
+      if (parsed?.suffix === 'canvas' && parsed?.name) {
+        ctx.server.ws.send({
+          type: 'custom',
+          event: 'storyboard:canvas-file-changed',
+          data: { name: parsed.name },
+        })
+      }
+
+      // Prevent Vite's default fallback behavior (full page reload) for
+      // non-module .canvas.jsonl edits. Canvas pages consume these updates
+      // through the custom WS event and in-page refetch.
+      return []
+    },
+
     // Rebuild index on each build start
     buildStart() {
       buildResult = null