@dfosco/storyboard-react 3.6.1 → 3.7.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.6.1",
+    "@dfosco/storyboard-core": "3.7.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,140 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CanvasPage from './CanvasPage.jsx'
+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: null, 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 },
+            }),
+          ]),
+        })
+      )
+    })
+  })
+})

package/src/canvas/CanvasPage.jsx

@@ -2,6 +2,7 @@ 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 { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
@@ -11,6 +12,8 @@ import styles from './CanvasPage.module.css'
 const ZOOM_MIN = 25
 const ZOOM_MAX = 200
 
+const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
+
 /**
  * Debounce helper — returns a function that delays invocation.
  */
@@ -22,21 +25,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 +35,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 +67,16 @@ 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 ?? [])
 
   if (canvas !== trackedCanvas) {
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
+    setLocalSources(canvas?.sources ?? [])
     setCanvasTitle(canvas?.title || name)
   }
 
@@ -133,15 +128,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 +195,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) {
@@ -185,12 +225,23 @@ export default function CanvasPage({ name }) {
 
   // 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 +297,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) {
@@ -361,11 +411,23 @@ export default function CanvasPage({ name }) {
   // 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}
+        >
           <ComponentWidget component={Component} />
         </div>
       )
@@ -378,6 +440,8 @@ 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}
         onClick={(e) => {
           e.stopPropagation()
           setSelectedWidgetId(widget.id)
@@ -411,12 +475,14 @@ export default function CanvasPage({ name }) {
       </div>
       <div
         ref={scrollRef}
+        data-storyboard-canvas-scroll
         className={styles.canvasScroll}
         style={spaceHeld ? { cursor: panningActive ? 'grabbing' : 'grab' } : undefined}
         onClick={() => setSelectedWidgetId(null)}
         onMouseDown={handlePanStart}
       >
         <div
+          data-storyboard-canvas-zoom
           className={styles.canvasZoom}
           style={{
             transform: `scale(${scale})`,
@@ -425,7 +491,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/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/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,13 @@
   position: relative;
 }
 
+:global(html[data-color-mode='dark']) .sticky,
+:global(html[data-sb-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 +33,11 @@
   min-height: 60px;
 }
 
+:global(html[data-color-mode='dark']) .text,
+:global(html[data-sb-theme^='dark']) .text {
+  color: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 70%);
+}
+
 .textarea {
   position: absolute;
   top: 0;
@@ -47,6 +59,11 @@
   resize: none;
 }
 
+:global(html[data-color-mode='dark']) .textarea,
+:global(html[data-sb-theme^='dark']) .textarea {
+  color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
+}
+
 /* Color picker area — sits below the sticky */
 
 .pickerArea {
@@ -82,6 +99,14 @@
   z-index: 10;
 }
 
+:global(html[data-color-mode='dark']) .pickerPopup,
+:global(html[data-sb-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/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