@dfosco/storyboard-react 3.11.0-beta.0 → 3.11.0-beta.2

package/package.json

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

package/src/canvas/CanvasControls.jsx

@@ -2,16 +2,12 @@ import { useState, useRef, useEffect, useCallback } from 'react'
 import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
 import styles from './CanvasControls.module.css'
 
-const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200]
-export const ZOOM_MIN = ZOOM_STEPS[0]
-export const ZOOM_MAX = ZOOM_STEPS[ZOOM_STEPS.length - 1]
-
 const WIDGET_TYPES = getMenuWidgetTypes()
 
 /**
- * Focused canvas toolbar — bottom-left controls for zoom and widget creation.
+ * Focused canvas toolbar — bottom-left add-widget control.
  */
-export default function CanvasControls({ zoom, onZoomChange, onAddWidget }) {
+export default function CanvasControls({ onAddWidget }) {
   const [menuOpen, setMenuOpen] = useState(false)
   const menuRef = useRef(null)
 
@@ -27,24 +23,6 @@ export default function CanvasControls({ zoom, onZoomChange, onAddWidget }) {
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [menuOpen])
 
-  const zoomIn = useCallback(() => {
-    onZoomChange((z) => {
-      const next = ZOOM_STEPS.find((s) => s > z)
-      return next ?? ZOOM_MAX
-    })
-  }, [onZoomChange])
-
-  const zoomOut = useCallback(() => {
-    onZoomChange((z) => {
-      const next = [...ZOOM_STEPS].reverse().find((s) => s < z)
-      return next ?? ZOOM_MIN
-    })
-  }, [onZoomChange])
-
-  const resetZoom = useCallback(() => {
-    onZoomChange(100)
-  }, [onZoomChange])
-
   const handleAddWidget = useCallback((type) => {
     onAddWidget(type)
     setMenuOpen(false)
@@ -52,7 +30,6 @@ export default function CanvasControls({ zoom, onZoomChange, onAddWidget }) {
 
   return (
     <div className={styles.toolbar} role="toolbar" aria-label="Canvas controls">
-      {/* Create widget */}
       <div ref={menuRef} className={styles.createGroup}>
         <button
           className={styles.btn}
@@ -81,40 +58,6 @@ export default function CanvasControls({ zoom, onZoomChange, onAddWidget }) {
           </div>
         )}
       </div>
-
-      <div className={styles.divider} />
-
-      {/* Zoom controls */}
-      <button
-        className={styles.btn}
-        onClick={zoomOut}
-        disabled={zoom <= ZOOM_MIN}
-        aria-label="Zoom out"
-        title="Zoom out"
-      >
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-          <path d="M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z" />
-        </svg>
-      </button>
-      <button
-        className={styles.zoomLevel}
-        onClick={resetZoom}
-        title="Reset to 100%"
-        aria-label={`Zoom ${zoom}%, click to reset`}
-      >
-        {zoom}%
-      </button>
-      <button
-        className={styles.btn}
-        onClick={zoomIn}
-        disabled={zoom >= ZOOM_MAX}
-        aria-label="Zoom in"
-        title="Zoom in"
-      >
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-          <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
-        </svg>
-      </button>
     </div>
   )
 }

package/src/canvas/CanvasControls.module.css

@@ -50,35 +50,6 @@
   cursor: default;
 }
 
-.zoomLevel {
-  all: unset;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 44px;
-  height: 32px;
-  padding: 0 4px;
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  color: var(--fgColor-muted, #656d76);
-  transition: background 120ms;
-}
-
-.zoomLevel:hover {
-  background: var(--bgColor-muted, #f6f8fa);
-  color: var(--fgColor-default, #1f2328);
-}
-
-.divider {
-  width: 1px;
-  height: 20px;
-  margin: 0 2px;
-  background: var(--borderColor-muted, #d8dee4);
-}
-
 /* Create widget menu */
 .createGroup {
   position: relative;

package/src/canvas/CanvasPage.jsx

@@ -11,6 +11,7 @@ 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 useUndoRedo from './useUndoRedo.js'
 import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi, uploadImage } from './canvasApi.js'
 import styles from './CanvasPage.module.css'
 
@@ -48,13 +49,16 @@ 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). */
@@ -99,8 +103,8 @@ 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 },
@@ -126,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)
@@ -152,6 +207,7 @@ function ChromeWrappedWidget({
   onDeselect,
   onUpdate,
   onRemove,
+  onCopy,
 }) {
   const widgetRef = useRef(null)
   const features = getFeatures(widget.type)
@@ -159,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
@@ -207,11 +265,28 @@ export default function CanvasPage({ name }) {
   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
@@ -245,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) =>
@@ -253,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) => {
@@ -271,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)
@@ -279,38 +386,44 @@ 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
@@ -327,6 +440,36 @@ export default function CanvasPage({ name }) {
     }
   }, [name, loading])
 
+  // Center on a specific widget if `?widget=<id>` is in the URL
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const targetId = params.get('widget')
+    if (!targetId || loading) return
+
+    const widgets = localWidgets ?? []
+    const widget = widgets.find((w) => w.id === targetId)
+    if (!widget) return
+
+    const el = scrollRef.current
+    if (!el) return
+
+    const scale = zoomRef.current / 100
+    const fallback = WIDGET_FALLBACK_SIZES[widget.type] || { width: 200, height: 150 }
+    const wW = (widget.props?.width ?? fallback.width) * scale
+    const wH = (widget.props?.height ?? fallback.height) * scale
+    const wX = (widget.position?.x ?? 0) * scale
+    const wY = (widget.position?.y ?? 0) * scale
+
+    // Center the widget in the viewport
+    el.scrollLeft = wX + wW / 2 - el.clientWidth / 2
+    el.scrollTop = wY + wH / 2 - el.clientHeight / 2
+
+    // Clean the URL param without triggering navigation
+    const url = new URL(window.location.href)
+    url.searchParams.delete('widget')
+    window.history.replaceState({}, '', url.toString())
+  }, [loading, localWidgets])
+
   // Persist viewport state (zoom + scroll) to localStorage on changes
   useEffect(() => {
     const el = scrollRef.current
@@ -455,12 +598,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(() => {
@@ -483,6 +627,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() {
@@ -621,6 +797,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) {
@@ -654,7 +831,7 @@ export default function CanvasPage({ name }) {
           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: '' }
@@ -673,6 +850,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) {
@@ -681,7 +859,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
@@ -858,6 +1104,7 @@ export default function CanvasPage({ name }) {
           onSelect={() => setSelectedWidgetId(widget.id)}
           onDeselect={() => setSelectedWidgetId(null)}
           onUpdate={handleWidgetUpdate}
+          onCopy={handleWidgetCopy}
           onRemove={(id) => {
             handleWidgetRemove(id)
             setSelectedWidgetId(null)