@dfosco/storyboard-react 3.11.0-beta.8 → 3.11.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.11.0-beta.8",
+  "version": "3.11.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.11.0-beta.8",
-    "@dfosco/tiny-canvas": "3.11.0-beta.8",
+    "@dfosco/storyboard-core": "3.11.0",
+    "@dfosco/tiny-canvas": "3.11.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/__mocks__/virtual-storyboard-data-index.js

@@ -1,3 +1,4 @@
 // Stub for the Vite virtual module used by context.jsx
 // The actual init() seeding is done in each test's beforeEach
+export const canvases = {}
 export default {}

package/src/canvas/CanvasPage.jsx

@@ -276,7 +276,7 @@ function ChromeWrappedWidget({
  */
 export default function CanvasPage({ name }) {
   const { canvas, jsxExports, loading } = useCanvas(name)
-  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true && !new URLSearchParams(window.location.search).has('prodMode')
 
   // Local mutable copy of widgets for instant UI updates
   const [localWidgets, setLocalWidgets] = useState(canvas?.widgets ?? null)
@@ -321,8 +321,11 @@ export default function CanvasPage({ name }) {
   /**
    * Selection handler — shift+click toggles in/out of multi-select set,
    * plain click single-selects (clears others).
+   * Suppressed immediately after a multi-drag to prevent the post-drag
+   * click from collapsing the selection.
    */
   const handleWidgetSelect = useCallback((widgetId, shiftKey) => {
+    if (justDraggedRef.current) return
     if (shiftKey) {
       setSelectedWidgetIds(prev => {
         const next = new Set(prev)
@@ -338,62 +341,53 @@ export default function CanvasPage({ name }) {
     }
   }, [])
 
-  // --- Multi-select live drag preview via imperative DOM transforms ---
-  // On drag start, snapshot ALL articles' translate values (same coord space).
-  // On each tick, read dragged article's current translate, compute delta
-  // from its snapshot, apply same delta to all peers.
-  const draggedArticleRef = useRef(null)
-  const draggedStartTranslate = useRef({ x: 0, y: 0 })
-  const peerSnapshots = useRef(new Map())
-
-  function parseTranslate(article) {
-    const raw = article?.style.translate || '0px 0px'
-    const parts = raw.match(/-?[\d.]+/g) || [0, 0]
-    return { x: parseFloat(parts[0]) || 0, y: parseFloat(parts[1]) || 0 }
-  }
+  // --- Multi-select drag: peers animate to new positions on drag end ---
+  // During drag, only the dragged widget moves (via neodrag). On drag end,
+  // peer widget positions are updated via React state, and we add the
+  // tc-on-translation class so they animate smoothly to their new spots.
+  const peerArticlesRef = useRef(new Map())
+  // Flag to suppress the click-based selection reset that fires after a drag
+  const justDraggedRef = useRef(false)
 
-  const handleItemDragStart = useCallback((dragId) => {
+  const handleItemDragStart = useCallback((dragId, position) => {
     const ids = selectedIdsRef.current
-    peerSnapshots.current.clear()
-    draggedArticleRef.current = null
+    peerArticlesRef.current.clear()
     if (ids.size <= 1 || !ids.has(dragId)) return
 
-    // Snapshot dragged widget's article translate
-    const draggedEl = document.getElementById(dragId)
-    const draggedArticle = draggedEl?.closest('article')
-    if (!draggedArticle) return
-    draggedArticleRef.current = draggedArticle
-    draggedStartTranslate.current = parseTranslate(draggedArticle)
+    // Suppress selection changes for the duration of the drag
+    justDraggedRef.current = true
 
-    // Snapshot each peer's article translate
+    // Collect peer article elements for transition on drag end
     for (const id of ids) {
       if (id === dragId) continue
       const widgetEl = document.getElementById(id)
       const article = widgetEl?.closest('article')
       if (!article) continue
-      peerSnapshots.current.set(id, {
-        article,
-        ...parseTranslate(article),
-      })
+      peerArticlesRef.current.set(id, article)
     }
   }, [])
 
   const handleItemDrag = useCallback(() => {
-    if (!draggedArticleRef.current) return
-
-    // Read dragged article's CURRENT translate (set by neodrag)
-    const current = parseTranslate(draggedArticleRef.current)
-    const dx = current.x - draggedStartTranslate.current.x
-    const dy = current.y - draggedStartTranslate.current.y
+    // Peers stay put during drag — they animate on drag end
+  }, [])
 
-    for (const [, peer] of peerSnapshots.current) {
-      peer.article.style.translate = `${peer.x + dx}px ${peer.y + dy}px`
+  /** Add transition class to peer articles so they animate to new positions. */
+  const transitionPeers = useCallback(() => {
+    for (const [, article] of peerArticlesRef.current) {
+      article.classList.add('tc-on-translation')
     }
+    // Remove class after animation completes
+    const articles = [...peerArticlesRef.current.values()]
+    setTimeout(() => {
+      for (const article of articles) {
+        article.classList.remove('tc-on-translation')
+      }
+    }, 150 + 50 + 200)
+    peerArticlesRef.current.clear()
   }, [])
 
   const clearDragPreview = useCallback(() => {
-    peerSnapshots.current.clear()
-    draggedArticleRef.current = null
+    peerArticlesRef.current.clear()
   }, [])
 
   if (canvas !== trackedCanvas) {
@@ -515,40 +509,39 @@ export default function CanvasPage({ name }) {
   }, [name, debouncedSourceSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleItemDragEnd = useCallback((dragId, position) => {
-    if (!dragId || !position) return
-    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
-
-    if (dragId.startsWith('jsx-')) {
-      undoRedo.snapshot(stateRef.current, 'move', dragId)
-      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 }]
-        queueWrite(() =>
-          updateCanvas(name, { sources: next }).catch((err) =>
-            console.error('[canvas] Failed to save source position:', err)
-          )
-        )
-        return next
-      })
+    if (!dragId || !position) {
+      clearDragPreview()
       return
     }
+    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
 
     const ids = selectedIdsRef.current
     // Multi-select move: apply same delta to all selected widgets
+    // Checked BEFORE the jsx- early return so mixed selections work
     if (ids.size > 1 && ids.has(dragId)) {
-      clearDragPreview()
+      transitionPeers()
+      // Suppress the click-based selection reset that fires after pointerup
+      justDraggedRef.current = true
+      requestAnimationFrame(() => { justDraggedRef.current = false })
       undoRedo.snapshot(stateRef.current, 'multi-move')
-      const currentWidgets = stateRef.current.widgets ?? []
-      const draggedWidget = currentWidgets.find(w => w.id === dragId)
-      if (!draggedWidget) return
-      const oldPos = draggedWidget.position || { x: 0, y: 0 }
+
+      // Compute delta from the dragged widget's old position
+      const isJsx = dragId.startsWith('jsx-')
+      let oldPos = { x: 0, y: 0 }
+      if (isJsx) {
+        const sourceExport = dragId.replace(/^jsx-/, '')
+        const source = (stateRef.current.sources ?? []).find(s => s?.export === sourceExport)
+        oldPos = source?.position || { x: 0, y: 0 }
+      } else {
+        const draggedWidget = (stateRef.current.widgets ?? []).find(w => w.id === dragId)
+        oldPos = draggedWidget?.position || { x: 0, y: 0 }
+      }
       const dx = rounded.x - oldPos.x
       const dy = rounded.y - oldPos.y
 
       debouncedSave.cancel()
+
+      // Update JSON widget positions
       setLocalWidgets((prev) => {
         if (!prev) return prev
         const next = prev.map((w) => {
@@ -571,6 +564,57 @@ export default function CanvasPage({ name }) {
         )
         return next
       })
+
+      // Update JSX source positions
+      setLocalSources((prev) => {
+        const current = Array.isArray(prev) ? prev : []
+        let changed = false
+        const next = current.map((s) => {
+          if (!s?.export) return s
+          const sid = `jsx-${s.export}`
+          if (sid === dragId) {
+            changed = true
+            return { ...s, position: rounded }
+          }
+          if (ids.has(sid)) {
+            changed = true
+            return {
+              ...s,
+              position: {
+                x: Math.max(0, roundPosition((s.position?.x ?? 0) + dx)),
+                y: Math.max(0, roundPosition((s.position?.y ?? 0) + dy)),
+              },
+            }
+          }
+          return s
+        })
+        if (changed) {
+          queueWrite(() =>
+            updateCanvas(name, { sources: next }).catch((err) =>
+              console.error('[canvas] Failed to save multi-move sources:', err)
+            )
+          )
+        }
+        return changed ? next : current
+      })
+      return
+    }
+
+    if (dragId.startsWith('jsx-')) {
+      undoRedo.snapshot(stateRef.current, 'move', dragId)
+      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 }]
+        queueWrite(() =>
+          updateCanvas(name, { sources: next }).catch((err) =>
+            console.error('[canvas] Failed to save source position:', err)
+          )
+        )
+        return next
+      })
       return
     }
 
@@ -587,7 +631,7 @@ export default function CanvasPage({ name }) {
       )
       return next
     })
-  }, [name, undoRedo, debouncedSave, clearDragPreview])
+  }, [name, undoRedo, debouncedSave, transitionPeers, clearDragPreview])
 
   useEffect(() => {
     zoomRef.current = zoom
@@ -1305,6 +1349,7 @@ export default function CanvasPage({ name }) {
             widgetId={`jsx-${exportName}`}
             features={componentFeatures}
             selected={selectedWidgetIds.has(`jsx-${exportName}`)}
+            multiSelected={isMultiSelected && selectedWidgetIds.has(`jsx-${exportName}`)}
             onSelect={(shiftKey) => handleWidgetSelect(`jsx-${exportName}`, shiftKey)}
             onDeselect={() => setSelectedWidgetIds(new Set())}
             readOnly={!isLocalDev}
@@ -1365,17 +1410,21 @@ export default function CanvasPage({ name }) {
       <div className={styles.canvasTitle}>
         <div className={styles.canvasTitleWrap}>
           <span className={styles.canvasTitleMeasure} aria-hidden="true">{canvasTitle || ' '}</span>
-          <input
-            ref={titleInputRef}
-            className={styles.canvasTitleInput}
-            value={canvasTitle}
-            size={1}
-            onChange={handleTitleChange}
-            onKeyDown={handleTitleKeyDown}
-            onMouseDown={(e) => e.stopPropagation()}
-            spellCheck={false}
-            aria-label="Canvas title"
-          />
+          {isLocalDev ? (
+            <input
+              ref={titleInputRef}
+              className={styles.canvasTitleInput}
+              value={canvasTitle}
+              size={1}
+              onChange={handleTitleChange}
+              onKeyDown={handleTitleKeyDown}
+              onMouseDown={(e) => e.stopPropagation()}
+              spellCheck={false}
+              aria-label="Canvas title"
+            />
+          ) : (
+            <h1 className={styles.canvasTitleStatic}>{canvasTitle}</h1>
+          )}
         </div>
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>

package/src/canvas/CanvasPage.module.css

@@ -73,6 +73,7 @@
   border: 1px solid transparent;
   border-radius: 6px;
   padding: 4px 8px;
+  margin: 0;
   outline: none;
   width: 100%;
   min-width: 0;
@@ -91,6 +92,12 @@
   background: var(--bgColor-default, #ffffff);
 }
 
+.canvasTitleStatic {
+  composes: canvasTitleInput;
+  cursor: default;
+  pointer-events: none;
+}
+
 /* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */
 :global(.tc-draggable-inner) {
   overflow: visible;

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

@@ -15,10 +15,14 @@ vi.mock('./useUndoRedo.js', () => ({
   default: () => MOCK_UNDO_REDO,
 }))
 
-// Expose onDragEnd so tests can trigger drags with specific IDs
+// Expose drag callbacks so tests can trigger drags with specific IDs
+let capturedOnDragStart = null
+let capturedOnDrag = null
 let capturedOnDragEnd = null
 vi.mock('@dfosco/tiny-canvas', () => ({
-  Canvas: ({ children, onDragEnd }) => {
+  Canvas: ({ children, onDragStart, onDrag, onDragEnd }) => {
+    capturedOnDragStart = onDragStart
+    capturedOnDrag = onDrag
     capturedOnDragEnd = onDragEnd
     return <div data-testid="tiny-canvas">{children}</div>
   },
@@ -109,6 +113,8 @@ describe('CanvasPage multi-select', () => {
     delete window.__storyboardCanvasBridgeState
     window.__SB_LOCAL_DEV__ = true
     vi.clearAllMocks()
+    capturedOnDragStart = null
+    capturedOnDrag = null
     capturedOnDragEnd = null
   })
 
@@ -257,4 +263,83 @@ describe('CanvasPage multi-select', () => {
       })
     )
   })
+
+  it('multi-select drag captures peer articles on drag start', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // All drag callbacks should be captured
+    expect(capturedOnDragStart).toBeTruthy()
+    expect(capturedOnDrag).toBeTruthy()
+
+    // Trigger drag start — should not throw
+    act(() => {
+      capturedOnDragStart('w1', { x: 100, y: 100 })
+    })
+
+    // Drag tick — peers stay put (no live preview), should not throw
+    act(() => {
+      capturedOnDrag('w1', { x: 150, y: 200 })
+    })
+  })
+
+  it('multi-select drag preserves selection after drag end', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+
+    // Simulate full drag: start → drag → end
+    act(() => {
+      capturedOnDragStart('w1', { x: 100, y: 100 })
+    })
+    act(() => {
+      capturedOnDragEnd('w1', { x: 150, y: 200 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Selection should still include both widgets (justDraggedRef prevents collapse)
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+  })
+
+  it('any selected widget can serve as drag handler for the group', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 (100,100), w2 (300,100), w3 (500,200)
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    fireEvent.click(screen.getByTestId('shift-select-w3'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Drag w2 (the middle one) to (350, 150) → delta (+50, +50)
+    act(() => {
+      capturedOnDragStart('w2', { x: 300, y: 100 })
+    })
+    act(() => {
+      capturedOnDragEnd('w2', { x: 350, y: 150 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // All selected widgets should move by the same delta (+50, +50)
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: expect.arrayContaining([
+          expect.objectContaining({ id: 'w1', position: { x: 150, y: 150 } }),
+          expect.objectContaining({ id: 'w2', position: { x: 350, y: 150 } }),
+          expect.objectContaining({ id: 'w3', position: { x: 550, y: 250 } }),
+        ]),
+      })
+    )
+  })
 })

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

@@ -3,7 +3,7 @@
   overflow: hidden;
   background: var(--bgColor-default, #ffffff);
   border: 3px solid var(--borderColor-default, #d0d7de);
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -28,7 +28,9 @@ function renderMarkdown(text) {
 export default function MarkdownBlock({ props, onUpdate }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
+  const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
   const textareaRef = useRef(null)
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
@@ -37,8 +39,17 @@ export default function MarkdownBlock({ props, onUpdate }) {
     onUpdate?.({ content: e.target.value })
   }, [onUpdate])
 
+  const handleReadOnlyCopy = useCallback((e) => {
+    if (canEdit) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.clipboardData?.setData) {
+      e.clipboardData.setData('text/plain', content || '')
+    }
+  }, [canEdit, content])
+
   useEffect(() => {
-    if (editing) {
+    if (editingActive) {
       // Capture the preview height before switching to editor
       if (blockRef.current && !editHeight) {
         setEditHeight(blockRef.current.offsetHeight)
@@ -49,7 +60,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
     } else {
       setEditHeight(null)
     }
-  }, [editing, editHeight])
+  }, [editingActive, editHeight])
 
   return (
     <WidgetWrapper>
@@ -58,7 +69,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
         className={styles.block}
         style={{ width, minHeight: editHeight || undefined }}
       >
-        {editing ? (
+        {editingActive ? (
           <textarea
             ref={textareaRef}
             className={styles.editor}
@@ -77,12 +88,18 @@ export default function MarkdownBlock({ props, onUpdate }) {
         ) : (
           <div
             className={styles.preview}
-            onDoubleClick={() => setEditing(true)}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+            style={!canEdit ? { cursor: 'default' } : undefined}
+            data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+            onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
+            onCopy={!canEdit ? handleReadOnlyCopy : undefined}
+            onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+            role={canEdit ? 'button' : undefined}
+            tabIndex={canEdit ? 0 : undefined}
+            onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content) || '<p class="placeholder">Double-click to edit…</p>',
+              __html: renderMarkdown(content) || (canEdit
+                ? '<p class="placeholder">Double-click to edit…</p>'
+                : '<p class="placeholder">No content</p>'),
             }}
           />
         )}

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

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import MarkdownBlock from './MarkdownBlock.jsx'
+
+describe('MarkdownBlock', () => {
+  it('does not enter edit mode when onUpdate is unavailable (read-only/prod)', () => {
+    const { container } = render(<MarkdownBlock props={{ content: 'Hello', width: 420 }} />)
+
+    fireEvent.doubleClick(screen.getByText('Hello'))
+
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(container.querySelector('[data-canvas-allow-text-selection]')).not.toBeNull()
+  })
+
+  it('enters edit mode when onUpdate is available', () => {
+    const onUpdate = vi.fn()
+    render(<MarkdownBlock props={{ content: 'Hello', width: 420 }} onUpdate={onUpdate} />)
+
+    fireEvent.doubleClick(screen.getByText('Hello'))
+
+    expect(screen.queryByRole('textbox')).not.toBeNull()
+  })
+
+  it('shows a non-editable empty-state message in read-only mode', () => {
+    render(<MarkdownBlock props={{ content: '', width: 420 }} />)
+
+    expect(screen.getByText('No content')).toBeTruthy()
+    expect(screen.queryByText('Double-click to edit…')).toBeNull()
+  })
+
+  it('stops click propagation in read-only mode', () => {
+    const onParentClick = vi.fn()
+    render(
+      <div onClick={onParentClick}>
+        <MarkdownBlock props={{ content: 'Hello', width: 420 }} />
+      </div>
+    )
+
+    fireEvent.click(screen.getByText('Hello'))
+
+    expect(onParentClick).not.toHaveBeenCalled()
+  })
+
+  it('copies markdown source in read-only mode', () => {
+    render(<MarkdownBlock props={{ content: '**Hello**\n- item', width: 420 }} />)
+
+    const preview = screen.getByText('Hello').closest('[data-canvas-allow-text-selection]')
+    const setData = vi.fn()
+    fireEvent.copy(preview, { clipboardData: { setData } })
+
+    expect(setData).toHaveBeenCalledWith('text/plain', '**Hello**\n- item')
+  })
+})

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

@@ -3,7 +3,7 @@
   overflow: hidden;
   background: var(--bgColor-default, #ffffff);
   border: 3px solid var(--borderColor-default, #d0d7de);
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 

package/src/canvas/widgets/StickyNote.jsx

@@ -17,21 +17,23 @@ export default function StickyNote({ props, onUpdate, resizable }) {
   const color = readProp(props, 'color', stickyNoteSchema)
   const width = readProp(props, 'width', stickyNoteSchema)
   const height = readProp(props, 'height', stickyNoteSchema)
+  const canEdit = typeof onUpdate === 'function'
   const palette = COLORS[color] ?? COLORS.yellow
   const textareaRef = useRef(null)
   const stickyRef = useRef(null)
   const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
   }, [onUpdate])
 
   useEffect(() => {
-    if (editing && textareaRef.current) {
+    if (editingActive && textareaRef.current) {
       textareaRef.current.focus()
       textareaRef.current.selectionStart = textareaRef.current.value.length
     }
-  }, [editing])
+  }, [editingActive])
 
   const handleTextChange = useCallback((e) => {
     onUpdate?.({ text: e.target.value })
@@ -51,15 +53,16 @@ export default function StickyNote({ props, onUpdate, resizable }) {
       >
         <p
           className={styles.text}
-          style={editing ? { visibility: 'hidden' } : undefined}
-          onDoubleClick={() => setEditing(true)}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+          style={editingActive ? { visibility: 'hidden' } : undefined}
+          data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+          onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+          role={canEdit ? 'button' : undefined}
+          tabIndex={canEdit ? 0 : undefined}
+          onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
         >
-          {text || 'Double-click to edit…'}
+          {text || (canEdit ? 'Double-click to edit…' : 'No content')}
         </p>
-        {editing && (
+        {editingActive && (
           <textarea
             ref={textareaRef}
             className={styles.textarea}

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

@@ -99,4 +99,18 @@ describe('StickyNote', () => {
 
     expect(onUpdate).toHaveBeenCalledWith({ width: 180, height: 60 })
   })
+
+  it('does not enter edit mode without onUpdate (read-only/prod)', () => {
+    const { container } = render(<StickyNote props={{ text: 'Read me' }} />)
+    const text = container.querySelector('p')
+    fireEvent.doubleClick(text)
+    expect(container.querySelector('textarea')).toBeNull()
+    expect(container.querySelector('[data-canvas-allow-text-selection]')).not.toBeNull()
+  })
+
+  it('shows non-editable empty-state text in read-only mode', () => {
+    const { container } = render(<StickyNote props={{ text: '' }} />)
+    expect(container.textContent).toContain('No content')
+    expect(container.textContent).not.toContain('Double-click to edit…')
+  })
 })

package/src/context.jsx

@@ -22,6 +22,11 @@ function matchCanvasRoute(pathname) {
   return canvasRouteMap.get(normalized) || null
 }
 
+function isCanvasPath(pathname) {
+  const normalized = pathname.replace(/\/+$/, '') || '/'
+  return normalized === '/canvas' || normalized.startsWith('/canvas/')
+}
+
 /**
  * Derives the top-level prototype name from a pathname.
  * "/Dashboard" → "Dashboard", "/Dashboard/sub" → "Dashboard"
@@ -62,6 +67,10 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
 
   // Canvas route detection — matches current URL against registered canvas routes
   const canvasName = useMemo(() => matchCanvasRoute(location.pathname), [location.pathname])
+  const isMissingCanvasRoute = useMemo(
+    () => isCanvasPath(location.pathname) && !canvasName,
+    [location.pathname, canvasName],
+  )
 
   const searchParams = new URLSearchParams(location.search)
   const sceneParam = searchParams.get('flow') || searchParams.get('scene')
@@ -70,7 +79,7 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
 
   // Resolve flow name with prototype scoping (skip for canvas pages)
   const activeFlowName = useMemo(() => {
-    if (canvasName) return null
+    if (canvasName || isMissingCanvasRoute) return null
     const requested = sceneParam || flowName || sceneName
     if (requested) {
       // Allow fully-scoped flow names from URLs/widgets without re-prefixing
@@ -94,7 +103,7 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     // 4. Global default — or null if no flow exists at all
     if (flowExists('default')) return 'default'
     return null
-  }, [canvasName, sceneParam, flowName, sceneName, prototypeName, pageFlow])
+  }, [canvasName, isMissingCanvasRoute, sceneParam, flowName, sceneName, prototypeName, pageFlow])
 
   // Auto-install body class sync (sb-key--value classes on <body>)
   useEffect(() => installBodyClassSync(), [])
@@ -117,7 +126,7 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
 
   // Skip flow loading for canvas pages and flow-less pages
   const { data, error } = useMemo(() => {
-    if (canvasName) return { data: null, error: null }
+    if (canvasName || isMissingCanvasRoute) return { data: null, error: null }
     if (!activeFlowName) return { data: {}, error: null }
     try {
       let flowData = loadFlow(activeFlowName)
@@ -136,7 +145,7 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     } catch (err) {
       return { data: null, error: err.message }
     }
-  }, [canvasName, activeFlowName, recordName, recordParam, params, prototypeName])
+  }, [canvasName, isMissingCanvasRoute, activeFlowName, recordName, recordParam, params, prototypeName])
 
   // Canvas pages get their own rendering path — no flow data needed
   if (canvasName) {
@@ -157,6 +166,27 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     )
   }
 
+  if (isMissingCanvasRoute) {
+    const currentUrl = `${location.pathname}${location.search}`
+    const truncatedUrl = currentUrl.length > 60
+      ? currentUrl.slice(0, 60) + '…'
+      : currentUrl
+
+    return (
+      <main className={styles.container}>
+        <div className={styles.banner}>
+          <strong>Canvas not found</strong>
+          No canvas matches this route.
+        </div>
+        <p className={styles.meta}>
+          Tried to open{' '}
+          <a href={currentUrl} title={currentUrl}>{truncatedUrl}</a>
+        </p>
+        <a className={styles.homeLink} href="/">← Go to index page</a>
+      </main>
+    )
+  }
+
   const value = {
     data,
     error,

package/src/context.test.jsx

@@ -280,4 +280,17 @@ describe('StoryboardProvider', () => {
     )
     expect(screen.getByTestId('ctx')).toHaveTextContent('Global Default')
   })
+
+  it('shows a simple 404 for unknown canvas routes with an index link', () => {
+    mockUseLocation.mockReturnValue({ pathname: '/canvas/unknown-board', search: '', hash: '' })
+
+    render(
+      <StoryboardProvider>
+        <ContextReader />
+      </StoryboardProvider>,
+    )
+
+    expect(screen.getByText('Canvas not found')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /go to index page/i })).toHaveAttribute('href', '/')
+  })
 })