@dfosco/storyboard-react 3.10.0 → 3.11.0-beta.1

package/src/canvas/CanvasPage.jsx

@@ -8,9 +8,11 @@ import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
 import { getFeatures } from './widgets/widgetConfig.js'
+import { isFigmaUrl, sanitizeFigmaUrl } from './widgets/figmaUrl.js'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
-import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi } from './canvasApi.js'
+import useUndoRedo from './useUndoRedo.js'
+import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi, uploadImage } from './canvasApi.js'
 import styles from './CanvasPage.module.css'
 
 const ZOOM_MIN = 25
@@ -47,13 +49,40 @@ function resolveCanvasThemeFromStorage() {
 
 /**
  * Debounce helper — returns a function that delays invocation.
+ * Exposes `.cancel()` to abort pending calls (used by undo/redo).
  */
 function debounce(fn, ms) {
   let timer
-  return (...args) => {
+  const debounced = (...args) => {
     clearTimeout(timer)
     timer = setTimeout(() => fn(...args), ms)
   }
+  debounced.cancel = () => clearTimeout(timer)
+  return debounced
+}
+
+/** Per-canvas viewport state persistence (zoom + scroll position). */
+function getViewportStorageKey(canvasName) {
+  return `sb-canvas-viewport:${canvasName}`
+}
+
+function loadViewportState(canvasName) {
+  try {
+    const raw = localStorage.getItem(getViewportStorageKey(canvasName))
+    if (!raw) return null
+    const state = JSON.parse(raw)
+    return {
+      zoom: typeof state.zoom === 'number' ? Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, state.zoom)) : null,
+      scrollLeft: typeof state.scrollLeft === 'number' ? state.scrollLeft : null,
+      scrollTop: typeof state.scrollTop === 'number' ? state.scrollTop : null,
+    }
+  } catch { return null }
+}
+
+function saveViewportState(canvasName, state) {
+  try {
+    localStorage.setItem(getViewportStorageKey(canvasName), JSON.stringify(state))
+  } catch { /* quota exceeded — non-critical */ }
 }
 
 /**
@@ -74,11 +103,13 @@ function getViewportCenter(scrollEl, scale) {
 
 /** Fallback sizes for widget types without explicit width/height defaults. */
 const WIDGET_FALLBACK_SIZES = {
-  'sticky-note':  { width: 180, height: 60 },
-  'markdown':     { width: 360, height: 200 },
+  'sticky-note':  { width: 270, height: 170 },
+  'markdown':     { width: 530, height: 240 },
   'prototype':    { width: 800, height: 600 },
   'link-preview': { width: 320, height: 120 },
+  'figma-embed':  { width: 800, height: 450 },
   'component':    { width: 200, height: 150 },
+  'image':        { width: 400, height: 300 },
 }
 
 /**
@@ -99,6 +130,57 @@ function roundPosition(value) {
   return Math.round(value)
 }
 
+/** Padding (canvas-space pixels) around bounding box for zoom-to-fit. */
+const FIT_PADDING = 48
+
+/**
+ * Compute the axis-aligned bounding box that contains every widget and source.
+ * Returns { minX, minY, maxX, maxY } in canvas-space coordinates, or null if empty.
+ */
+function computeCanvasBounds(widgets, sources, jsxExports) {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  let hasItems = false
+
+  // JSON widgets
+  for (const w of (widgets ?? [])) {
+    const x = w?.position?.x ?? 0
+    const y = w?.position?.y ?? 0
+    const fallback = WIDGET_FALLBACK_SIZES[w.type] || { width: 200, height: 150 }
+    const width = w.props?.width ?? fallback.width
+    const height = w.props?.height ?? fallback.height
+    minX = Math.min(minX, x)
+    minY = Math.min(minY, y)
+    maxX = Math.max(maxX, x + width)
+    maxY = Math.max(maxY, y + height)
+    hasItems = true
+  }
+
+  // JSX sources
+  const sourceMap = Object.fromEntries(
+    (sources || []).filter((s) => s?.export).map((s) => [s.export, s])
+  )
+  if (jsxExports) {
+    for (const exportName of Object.keys(jsxExports)) {
+      const sourceData = sourceMap[exportName] || {}
+      const x = sourceData.position?.x ?? 0
+      const y = sourceData.position?.y ?? 0
+      const fallback = WIDGET_FALLBACK_SIZES['component']
+      const width = sourceData.width ?? fallback.width
+      const height = sourceData.height ?? fallback.height
+      minX = Math.min(minX, x)
+      minY = Math.min(minY, y)
+      maxX = Math.max(maxX, x + width)
+      maxY = Math.max(maxY, y + height)
+      hasItems = true
+    }
+  }
+
+  return hasItems ? { minX, minY, maxX, maxY } : null
+}
+
 /** Renders a single JSON-defined widget by type lookup. */
 function WidgetRenderer({ widget, onUpdate, widgetRef }) {
   const Component = getWidgetComponent(widget.type)
@@ -125,6 +207,7 @@ function ChromeWrappedWidget({
   onDeselect,
   onUpdate,
   onRemove,
+  onCopy,
 }) {
   const widgetRef = useRef(null)
   const features = getFeatures(widget.type)
@@ -132,8 +215,10 @@ function ChromeWrappedWidget({
   const handleAction = useCallback((actionId) => {
     if (actionId === 'delete') {
       onRemove(widget.id)
+    } else if (actionId === 'copy') {
+      onCopy(widget)
     }
-  }, [widget.id, onRemove])
+  }, [widget, onRemove, onCopy])
 
   return (
     <WidgetChrome
@@ -170,19 +255,38 @@ export default function CanvasPage({ name }) {
   const [localWidgets, setLocalWidgets] = useState(canvas?.widgets ?? null)
   const [trackedCanvas, setTrackedCanvas] = useState(canvas)
   const [selectedWidgetId, setSelectedWidgetId] = useState(null)
-  const [zoom, setZoom] = useState(100)
-  const zoomRef = useRef(100)
+  const initialViewport = loadViewportState(name)
+  const [zoom, setZoom] = useState(initialViewport?.zoom ?? 100)
+  const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = useRef(null)
+  const pendingScrollRestore = useRef(initialViewport)
   const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
   const titleInputRef = useRef(null)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
 
+  // Undo/redo history — tracks both widgets and sources as a combined snapshot
+  const undoRedo = useUndoRedo()
+  const stateRef = useRef({ widgets: localWidgets, sources: localSources })
+  useEffect(() => {
+    stateRef.current = { widgets: localWidgets, sources: localSources }
+  }, [localWidgets, localSources])
+
+  // Serialized write queue — ensures JSONL events land in the right order
+  const writeQueueRef = useRef(Promise.resolve())
+  function queueWrite(fn) {
+    writeQueueRef.current = writeQueueRef.current.then(fn).catch((err) =>
+      console.error('[canvas] Write queue error:', err)
+    )
+    return writeQueueRef.current
+  }
+
   if (canvas !== trackedCanvas) {
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
     setLocalSources(canvas?.sources ?? [])
     setCanvasTitle(canvas?.title || name)
+    undoRedo.reset()
   }
 
   // Debounced save to server
@@ -216,6 +320,7 @@ export default function CanvasPage({ name }) {
   }, [])
 
   const handleWidgetUpdate = useCallback((widgetId, updates) => {
+    undoRedo.snapshot(stateRef.current, 'edit', widgetId)
     setLocalWidgets((prev) => {
       if (!prev) return prev
       const next = prev.map((w) =>
@@ -224,14 +329,44 @@ export default function CanvasPage({ name }) {
       debouncedSave(name, next)
       return next
     })
-  }, [name, debouncedSave])
+  }, [name, debouncedSave, undoRedo])
 
   const handleWidgetRemove = useCallback((widgetId) => {
+    undoRedo.snapshot(stateRef.current, 'remove', widgetId)
     setLocalWidgets((prev) => prev ? prev.filter((w) => w.id !== widgetId) : prev)
-    removeWidgetApi(name, widgetId).catch((err) =>
-      console.error('[canvas] Failed to remove widget:', err)
+    queueWrite(() =>
+      removeWidgetApi(name, widgetId).catch((err) =>
+        console.error('[canvas] Failed to remove widget:', err)
+      )
     )
-  }, [name])
+  }, [name, undoRedo])
+
+  const handleWidgetCopy = useCallback(async (widget) => {
+    // Find the next free offset — check how many copies already exist at +n*40
+    const baseX = widget.position?.x ?? 0
+    const baseY = widget.position?.y ?? 0
+    const occupied = new Set(
+      (localWidgets ?? []).map((w) => `${w.position?.x ?? 0},${w.position?.y ?? 0}`)
+    )
+    let n = 1
+    while (occupied.has(`${baseX + n * 40},${baseY + n * 40}`)) {
+      n++
+    }
+    const position = { x: baseX + n * 40, y: baseY + n * 40 }
+    try {
+      undoRedo.snapshot(stateRef.current, 'add')
+      const result = await addWidgetApi(name, {
+        type: widget.type,
+        props: { ...widget.props },
+        position,
+      })
+      if (result.success && result.widget) {
+        setLocalWidgets((prev) => [...(prev || []), result.widget])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to copy widget:', err)
+    }
+  }, [name, localWidgets, undoRedo])
 
   const debouncedSourceSave = useRef(
     debounce((canvasName, sources) => {
@@ -242,6 +377,7 @@ export default function CanvasPage({ name }) {
   ).current
 
   const handleSourceUpdate = useCallback((exportName, updates) => {
+    undoRedo.snapshot(stateRef.current, 'edit', `jsx-${exportName}`)
     setLocalSources((prev) => {
       const current = Array.isArray(prev) ? prev : []
       const next = current.some((s) => s?.export === exportName)
@@ -250,43 +386,98 @@ export default function CanvasPage({ name }) {
       debouncedSourceSave(name, next)
       return next
     })
-  }, [name, debouncedSourceSave])
+  }, [name, debouncedSourceSave, undoRedo])
 
   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 }]
-        updateCanvas(name, { sources: next }).catch((err) =>
-          console.error('[canvas] Failed to save source position:', err)
+        queueWrite(() =>
+          updateCanvas(name, { sources: next }).catch((err) =>
+            console.error('[canvas] Failed to save source position:', err)
+          )
         )
         return next
       })
       return
     }
 
+    undoRedo.snapshot(stateRef.current, 'move', dragId)
     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)
+      queueWrite(() =>
+        updateCanvas(name, { widgets: next }).catch((err) =>
+          console.error('[canvas] Failed to save widget position:', err)
+        )
       )
       return next
     })
-  }, [name])
+  }, [name, undoRedo])
 
   useEffect(() => {
     zoomRef.current = zoom
   }, [zoom])
 
+  // Restore scroll position from localStorage after first render
+  useEffect(() => {
+    const el = scrollRef.current
+    const saved = pendingScrollRestore.current
+    if (el && saved) {
+      if (saved.scrollLeft != null) el.scrollLeft = saved.scrollLeft
+      if (saved.scrollTop != null) el.scrollTop = saved.scrollTop
+      pendingScrollRestore.current = null
+    }
+  }, [name, loading])
+
+  // Persist viewport state (zoom + scroll) to localStorage on changes
+  useEffect(() => {
+    const el = scrollRef.current
+    saveViewportState(name, {
+      zoom,
+      scrollLeft: el?.scrollLeft ?? 0,
+      scrollTop: el?.scrollTop ?? 0,
+    })
+  }, [name, zoom])
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    function handleScroll() {
+      saveViewportState(name, {
+        zoom: zoomRef.current,
+        scrollLeft: el.scrollLeft,
+        scrollTop: el.scrollTop,
+      })
+    }
+    el.addEventListener('scroll', handleScroll, { passive: true })
+
+    // Flush viewport state on page unload so a refresh never misses it
+    function handleBeforeUnload() {
+      saveViewportState(name, {
+        zoom: zoomRef.current,
+        scrollLeft: el.scrollLeft,
+        scrollTop: el.scrollTop,
+      })
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    return () => {
+      el.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, [name, loading])
+
   /**
    * Zoom to a new level, anchoring on an optional client-space point.
    * When a cursor position is provided (e.g. from a wheel event), the
@@ -345,6 +536,26 @@ export default function CanvasPage({ name }) {
     }
   }, [name])
 
+  // Tell the Vite dev server to suppress full-reloads while this canvas is active.
+  // The ?canvas-hmr URL param opts out of the guard for canvas UI development.
+  // Sends a heartbeat every 3s so the guard auto-expires if the tab closes.
+  useEffect(() => {
+    if (!import.meta.hot) return
+    const hmrEnabled = new URLSearchParams(window.location.search).has('canvas-hmr')
+    if (hmrEnabled) return
+
+    const msg = { active: true, hmrEnabled: false }
+    import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+    const interval = setInterval(() => {
+      import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+    }, 3000)
+
+    return () => {
+      clearInterval(interval)
+      import.meta.hot.send('storyboard:canvas-hmr-guard', { active: false, hmrEnabled: true })
+    }
+  }, [name])
+
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type) => {
     const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
@@ -357,12 +568,13 @@ export default function CanvasPage({ name }) {
         position: pos,
       })
       if (result.success && result.widget) {
+        undoRedo.snapshot(stateRef.current, 'add')
         setLocalWidgets((prev) => [...(prev || []), result.widget])
       }
     } catch (err) {
       console.error('[canvas] Failed to add widget:', err)
     }
-  }, [name])
+  }, [name, undoRedo])
 
   // Listen for CoreUIBar add-widget events
   useEffect(() => {
@@ -385,6 +597,38 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('storyboard:canvas:set-zoom', handleZoom)
   }, [])
 
+  // Listen for zoom-to-fit from CoreUIBar
+  useEffect(() => {
+    function handleZoomToFit() {
+      const el = scrollRef.current
+      if (!el) return
+
+      const bounds = computeCanvasBounds(localWidgets, localSources, jsxExports)
+      if (!bounds) return
+
+      const boxW = bounds.maxX - bounds.minX + FIT_PADDING * 2
+      const boxH = bounds.maxY - bounds.minY + FIT_PADDING * 2
+
+      const viewW = el.clientWidth
+      const viewH = el.clientHeight
+
+      // Find the zoom level that fits the bounding box in the viewport
+      const fitScale = Math.min(viewW / boxW, viewH / boxH)
+      const fitZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(fitScale * 100)))
+      const newScale = fitZoom / 100
+
+      // Apply zoom synchronously so DOM updates before we scroll
+      zoomRef.current = fitZoom
+      flushSync(() => setZoom(fitZoom))
+
+      // Scroll so the bounding box top-left (with padding) is at viewport top-left
+      el.scrollLeft = (bounds.minX - FIT_PADDING) * newScale
+      el.scrollTop = (bounds.minY - FIT_PADDING) * newScale
+    }
+    document.addEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
+    return () => document.removeEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
+  }, [localWidgets, localSources, jsxExports])
+
   // Canvas background should follow toolbar theme target.
   useEffect(() => {
     function readMode() {
@@ -420,6 +664,10 @@ export default function CanvasPage({ name }) {
       if (!selectedWidgetId) return
       const tag = e.target.tagName
       if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        setSelectedWidgetId(null)
+      }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         e.preventDefault()
         handleWidgetRemove(selectedWidgetId)
@@ -430,7 +678,8 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [selectedWidgetId, handleWidgetRemove])
 
-  // Paste handler — same-origin URLs become prototypes, other URLs become link previews, text becomes markdown
+  // Paste handler — images become image widgets, same-origin URLs become prototypes,
+  // other URLs become link previews, text becomes markdown
   useEffect(() => {
     const origin = window.location.origin
     const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
@@ -461,10 +710,82 @@ export default function CanvasPage({ name }) {
       return pathname
     }
 
+    function blobToDataUrl(blob) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+    }
+
+    function getImageDimensions(dataUrl) {
+      return new Promise((resolve) => {
+        const img = new Image()
+        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight })
+        img.onerror = () => resolve({ width: 400, height: 300 })
+        img.src = dataUrl
+      })
+    }
+
+    async function handleImagePaste(e) {
+      const items = e.clipboardData?.items
+      if (!items) return false
+
+      for (const item of items) {
+        if (!item.type.startsWith('image/')) continue
+
+        const blob = item.getAsFile()
+        if (!blob) continue
+
+        e.preventDefault()
+
+        try {
+          const dataUrl = await blobToDataUrl(blob)
+          const { width: natW, height: natH } = await getImageDimensions(dataUrl)
+
+          // Display at 2x retina: halve natural dimensions, then cap at 600px
+          const maxWidth = 600
+          let displayW = Math.round(natW / 2)
+          let displayH = Math.round(natH / 2)
+          if (displayW > maxWidth) {
+            displayH = Math.round(displayH * (maxWidth / displayW))
+            displayW = maxWidth
+          }
+
+          const uploadResult = await uploadImage(dataUrl, name)
+          if (!uploadResult.success) {
+            console.error('[canvas] Image upload failed:', uploadResult.error)
+            return true
+          }
+
+          const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+          const pos = centerPositionForWidget(center, 'image', { width: displayW, height: displayH })
+          const result = await addWidgetApi(name, {
+            type: 'image',
+            props: { src: uploadResult.filename, private: false, width: displayW, height: displayH },
+            position: pos,
+          })
+          if (result.success && result.widget) {
+            undoRedo.snapshot(stateRef.current, 'add')
+            setLocalWidgets((prev) => [...(prev || []), result.widget])
+          }
+        } catch (err) {
+          console.error('[canvas] Failed to paste image:', err)
+        }
+        return true
+      }
+      return false
+    }
+
     async function handlePaste(e) {
       const tag = e.target.tagName
       if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
 
+      // Image paste takes priority
+      const handledImage = await handleImagePaste(e)
+      if (handledImage) return
+
       const text = e.clipboardData?.getData('text/plain')?.trim()
       if (!text) return
 
@@ -473,11 +794,14 @@ export default function CanvasPage({ name }) {
       let type, props
       try {
         const parsed = new URL(text)
-        if (isSameOriginPrototype(text)) {
+        if (isFigmaUrl(text)) {
+          type = 'figma-embed'
+          props = { url: sanitizeFigmaUrl(text), width: 800, height: 450 }
+        } else if (isSameOriginPrototype(text)) {
           const pathPortion = parsed.pathname + parsed.search + parsed.hash
           const src = extractPrototypeSrc(pathPortion)
           type = 'prototype'
-          props = { src: src || '/', label: '', width: 800, height: 600 }
+          props = { src: src || '/', originalSrc: src || '/', label: '', width: 800, height: 600 }
         } else {
           type = 'link-preview'
           props = { url: text, title: '' }
@@ -496,6 +820,7 @@ export default function CanvasPage({ name }) {
           position: pos,
         })
         if (result.success && result.widget) {
+          undoRedo.snapshot(stateRef.current, 'add')
           setLocalWidgets((prev) => [...(prev || []), result.widget])
         }
       } catch (err) {
@@ -504,7 +829,75 @@ export default function CanvasPage({ name }) {
     }
     document.addEventListener('paste', handlePaste)
     return () => document.removeEventListener('paste', handlePaste)
-  }, [name])
+  }, [name, undoRedo])
+
+  // --- Undo / Redo ---
+  const handleUndo = useCallback(() => {
+    const previous = undoRedo.undo(stateRef.current)
+    if (!previous) return
+    debouncedSave.cancel()
+    debouncedSourceSave.cancel()
+    setLocalWidgets(previous.widgets)
+    setLocalSources(previous.sources)
+    queueWrite(() =>
+      updateCanvas(name, { widgets: previous.widgets, sources: previous.sources }).catch((err) =>
+        console.error('[canvas] Failed to persist undo:', err)
+      )
+    )
+  }, [name, debouncedSave, debouncedSourceSave, undoRedo])
+
+  const handleRedo = useCallback(() => {
+    const next = undoRedo.redo(stateRef.current)
+    if (!next) return
+    debouncedSave.cancel()
+    debouncedSourceSave.cancel()
+    setLocalWidgets(next.widgets)
+    setLocalSources(next.sources)
+    queueWrite(() =>
+      updateCanvas(name, { widgets: next.widgets, sources: next.sources }).catch((err) =>
+        console.error('[canvas] Failed to persist redo:', err)
+      )
+    )
+  }, [name, debouncedSave, debouncedSourceSave, undoRedo])
+
+  // Keyboard shortcuts — dev-only (Cmd+Z / Cmd+Shift+Z)
+  useEffect(() => {
+    if (!import.meta.hot) return
+    function handleKeyDown(e) {
+      const tag = e.target.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
+      const mod = e.metaKey || e.ctrlKey
+      if (mod && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault()
+        handleUndo()
+      }
+      if (mod && e.key === 'z' && e.shiftKey) {
+        e.preventDefault()
+        handleRedo()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [handleUndo, handleRedo])
+
+  // Listen for undo/redo from CoreUIBar (Svelte toolbar)
+  useEffect(() => {
+    function handleUndoEvent() { handleUndo() }
+    function handleRedoEvent() { handleRedo() }
+    document.addEventListener('storyboard:canvas:undo', handleUndoEvent)
+    document.addEventListener('storyboard:canvas:redo', handleRedoEvent)
+    return () => {
+      document.removeEventListener('storyboard:canvas:undo', handleUndoEvent)
+      document.removeEventListener('storyboard:canvas:redo', handleRedoEvent)
+    }
+  }, [handleUndo, handleRedo])
+
+  // Broadcast undo/redo availability to Svelte toolbar
+  useEffect(() => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:undo-redo-state', {
+      detail: { canUndo: undoRedo.canUndo, canRedo: undoRedo.canRedo }
+    }))
+  }, [undoRedo.canUndo, undoRedo.canRedo])
 
   // Cmd+scroll / trackpad pinch to smooth-zoom the canvas
   // On macOS, pinch-to-zoom fires wheel events with ctrlKey: true and small
@@ -681,6 +1074,7 @@ export default function CanvasPage({ name }) {
           onSelect={() => setSelectedWidgetId(widget.id)}
           onDeselect={() => setSelectedWidgetId(null)}
           onUpdate={handleWidgetUpdate}
+          onCopy={handleWidgetCopy}
           onRemove={(id) => {
             handleWidgetRemove(id)
             setSelectedWidgetId(null)

package/src/canvas/canvasApi.js

@@ -39,3 +39,11 @@ export function addWidget(name, { type, props, position }) {
 export function removeWidget(name, widgetId) {
   return request('/widget', 'DELETE', { name, widgetId })
 }
+
+export function uploadImage(dataUrl, canvasName) {
+  return request('/image', 'POST', { dataUrl, canvasName })
+}
+
+export function toggleImagePrivacy(filename) {
+  return request('/image/toggle-private', 'POST', { filename })
+}