@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/canvas/useUndoRedo.js

@@ -1,86 +1,101 @@
 import { useRef, useState, useCallback } from 'react'
 
 const MAX_HISTORY = 100
-const COALESCE_MS = 2000
 
 /**
- * Snapshot-based undo/redo history for canvas widgets.
+ * Per-tab undo/redo history for canvas events.
  *
- * Tracks past/future stacks of widget array clones. The present state
- * is always the live `localWidgets` — this hook only manages history.
+ * Maintains two stacks of event IDs:
+ *   undoStack — ids of user-initiated forward events, newest last.
+ *   redoStack — ids of undo events (the inverse events appended by the
+ *               server's POST /undo), newest last.
  *
- * Edit coalescing: continuous edits to the same widget within COALESCE_MS
- * are merged into one undo step (like Figma).
+ * Workflow:
+ *   • Every user-initiated mutation that succeeds calls `track(eventId)` —
+ *     pushes onto undoStack and clears redoStack.
+ *   • `popUndo()` returns the next id to undo. Caller POSTs /undo and on
+ *     success calls `pushRedo(inverseId)`.
+ *   • `popRedo()` returns the next id to redo. Caller POSTs /redo and on
+ *     success calls `pushUndo(inverseId)` (so the redo is itself undoable).
+ *
+ * This hook holds *no* widget data — undo state lives in the JSONL. The
+ * stacks are per-tab and ephemeral; refreshing the page resets them.
  */
 export default function useUndoRedo() {
-  const pastRef = useRef([])
-  const futureRef = useRef([])
-  const lastActionRef = useRef({ type: null, widgetId: null, time: 0 })
-  // State counter drives canUndo/canRedo re-renders without cloning the stacks
-  const [counts, setCounts] = useState({ past: 0, future: 0 })
+  const undoStackRef = useRef([])
+  const redoStackRef = useRef([])
+  const [counts, setCounts] = useState({ undo: 0, redo: 0 })
+
+  const syncCounts = useCallback(() => {
+    setCounts({ undo: undoStackRef.current.length, redo: redoStackRef.current.length })
+  }, [])
 
-  const snapshot = useCallback((currentWidgets, actionType, widgetId) => {
-    const widgets = currentWidgets ?? []
+  const track = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    undoStackRef.current.push(eventId)
+    if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
+    // New mutation invalidates the redo chain
+    redoStackRef.current = []
+    syncCounts()
+  }, [syncCounts])
 
-    // Edit coalescing — skip snapshot if same edit target within timeout
-    if (actionType === 'edit' && widgetId) {
-      const last = lastActionRef.current
-      const now = Date.now()
-      if (
-        last.type === 'edit' &&
-        last.widgetId === widgetId &&
-        now - last.time < COALESCE_MS
-      ) {
-        lastActionRef.current = { type: 'edit', widgetId, time: now }
-        return
+  const trackMany = useCallback((eventIds) => {
+    if (!Array.isArray(eventIds)) return
+    for (const id of eventIds) {
+      if (id && typeof id === 'string') {
+        undoStackRef.current.push(id)
+        if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
       }
     }
+    redoStackRef.current = []
+    syncCounts()
+  }, [syncCounts])
 
-    pastRef.current.push(structuredClone(widgets))
-    if (pastRef.current.length > MAX_HISTORY) pastRef.current.shift()
-    futureRef.current = []
-    lastActionRef.current = {
-      type: actionType,
-      widgetId: widgetId || null,
-      time: Date.now(),
-    }
-    setCounts({ past: pastRef.current.length, future: 0 })
-  }, [])
+  const popUndo = useCallback(() => {
+    const id = undoStackRef.current.pop()
+    syncCounts()
+    return id ?? null
+  }, [syncCounts])
 
-  const undo = useCallback((currentWidgets) => {
-    if (pastRef.current.length === 0) return null
-    futureRef.current.push(structuredClone(currentWidgets))
-    const previous = pastRef.current.pop()
-    lastActionRef.current = { type: 'undo', widgetId: null, time: Date.now() }
-    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
-    return previous
-  }, [])
+  const popRedo = useCallback(() => {
+    const id = redoStackRef.current.pop()
+    syncCounts()
+    return id ?? null
+  }, [syncCounts])
 
-  const redo = useCallback((currentWidgets) => {
-    if (futureRef.current.length === 0) return null
-    pastRef.current.push(structuredClone(currentWidgets))
-    const next = futureRef.current.pop()
-    lastActionRef.current = { type: 'redo', widgetId: null, time: Date.now() }
-    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
-    return next
-  }, [])
+  const pushRedo = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    redoStackRef.current.push(eventId)
+    if (redoStackRef.current.length > MAX_HISTORY) redoStackRef.current.shift()
+    syncCounts()
+  }, [syncCounts])
+
+  const pushUndo = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    undoStackRef.current.push(eventId)
+    if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
+    syncCounts()
+  }, [syncCounts])
 
   const reset = useCallback(() => {
-    pastRef.current = []
-    futureRef.current = []
-    lastActionRef.current = { type: null, widgetId: null, time: 0 }
+    undoStackRef.current = []
+    redoStackRef.current = []
     setCounts((prev) => {
-      if (prev.past === 0 && prev.future === 0) return prev
-      return { past: 0, future: 0 }
+      if (prev.undo === 0 && prev.redo === 0) return prev
+      return { undo: 0, redo: 0 }
     })
   }, [])
 
   return {
-    snapshot,
-    undo,
-    redo,
+    track,
+    trackMany,
+    popUndo,
+    popRedo,
+    pushRedo,
+    pushUndo,
     reset,
-    canUndo: counts.past > 0,
-    canRedo: counts.future > 0,
+    canUndo: counts.undo > 0,
+    canRedo: counts.redo > 0,
   }
 }
+

package/src/internals/canvas/useUndoRedo.test.js

@@ -1,231 +1,99 @@
 import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
 import useUndoRedo from './useUndoRedo.js'
 
-describe('useUndoRedo', () => {
+describe('useUndoRedo (canvas)', () => {
   it('starts with canUndo and canRedo as false', () => {
     const { result } = renderHook(() => useUndoRedo())
     expect(result.current.canUndo).toBe(false)
     expect(result.current.canRedo).toBe(false)
   })
 
-  it('can undo after a snapshot', () => {
+  it('track pushes an event id and enables undo', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const widgets = [{ id: '1', type: 'sticky-note', props: { text: 'a' }, position: { x: 0, y: 0 } }]
-
-    act(() => result.current.snapshot(widgets, 'add'))
-
+    act(() => result.current.track('evt_a'))
     expect(result.current.canUndo).toBe(true)
     expect(result.current.canRedo).toBe(false)
   })
 
-  it('undo returns the previous state and enables redo', () => {
+  it('popUndo returns the most recent tracked id; pushRedo enables redo', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const before = [{ id: '1', props: { text: 'a' } }]
-    const after = [{ id: '1', props: { text: 'b' } }]
+    act(() => result.current.track('evt_a'))
+    act(() => result.current.track('evt_b'))
 
-    act(() => result.current.snapshot(before, 'edit', '1'))
+    let popped
+    act(() => { popped = result.current.popUndo() })
 
-    let restored
-    act(() => { restored = result.current.undo(after) })
+    expect(popped).toBe('evt_b')
+    expect(result.current.canUndo).toBe(true)
+    expect(result.current.canRedo).toBe(false)
 
-    expect(restored).toEqual(before)
-    expect(result.current.canUndo).toBe(false)
+    act(() => result.current.pushRedo('evt_b_inv'))
     expect(result.current.canRedo).toBe(true)
   })
 
-  it('redo returns the next state', () => {
+  it('popRedo returns the most recent redo id; pushUndo restores undo availability', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const before = [{ id: '1', props: { text: 'a' } }]
-    const after = [{ id: '1', props: { text: 'b' } }]
+    act(() => result.current.track('evt_a'))
+    act(() => { result.current.popUndo() })
+    act(() => result.current.pushRedo('evt_a_inv'))
 
-    act(() => result.current.snapshot(before, 'edit', '1'))
-    act(() => { result.current.undo(after) })
+    expect(result.current.canRedo).toBe(true)
 
-    let redone
-    act(() => { redone = result.current.redo(before) })
+    let popped
+    act(() => { popped = result.current.popRedo() })
+    expect(popped).toBe('evt_a_inv')
+    expect(result.current.canRedo).toBe(false)
 
-    expect(redone).toEqual(after)
+    act(() => result.current.pushUndo('evt_a_inv_inv'))
     expect(result.current.canUndo).toBe(true)
-    expect(result.current.canRedo).toBe(false)
   })
 
-  it('new mutation after undo clears the redo chain', () => {
+  it('new track call after undo clears the redo stack', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }]
-    const s1 = [{ id: '1' }, { id: '2' }]
-    const s2 = [{ id: '1' }, { id: '3' }] // eslint-disable-line no-unused-vars
-
-    act(() => result.current.snapshot(s0, 'add'))
-    act(() => result.current.undo(s1))
+    act(() => result.current.track('evt_a'))
+    act(() => { result.current.popUndo() })
+    act(() => result.current.pushRedo('evt_a_inv'))
     expect(result.current.canRedo).toBe(true)
 
-    // New mutation breaks redo
-    act(() => result.current.snapshot(s0, 'add'))
+    act(() => result.current.track('evt_b'))
     expect(result.current.canRedo).toBe(false)
     expect(result.current.canUndo).toBe(true)
   })
 
-  it('supports multi-step undo-redo-undo chains', () => {
+  it('trackMany pushes multiple ids and clears redo', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }]
-    const s1 = [{ id: '1' }, { id: '2' }]
-    const s2 = [{ id: '1' }, { id: '2' }, { id: '3' }]
-    const s3 = [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]
-
-    // Build history: s0 → s1 → s2 → s3
-    act(() => result.current.snapshot(s0, 'add'))
-    act(() => result.current.snapshot(s1, 'add'))
-    act(() => result.current.snapshot(s2, 'add'))
-
-    // present = s3, past = [s0, s1, s2]
-    // Undo to s2
-    let r
-    act(() => { r = result.current.undo(s3) })
-    expect(r).toEqual(s2)
-
-    // Undo to s1
-    act(() => { r = result.current.undo(s2) })
-    expect(r).toEqual(s1)
-
-    // Redo to s2
-    act(() => { r = result.current.redo(s1) })
-    expect(r).toEqual(s2)
-
-    // Redo to s3
-    act(() => { r = result.current.redo(s2) })
-    expect(r).toEqual(s3)
-
-    // Undo to s2 again
-    act(() => { r = result.current.undo(s3) })
-    expect(r).toEqual(s2)
-
-    // Undo to s1
-    act(() => { r = result.current.undo(s2) })
-    expect(r).toEqual(s1)
-
-    // Undo to s0
-    act(() => { r = result.current.undo(s1) })
-    expect(r).toEqual(s0)
-
-    // Can't undo further
-    expect(result.current.canUndo).toBe(false)
-    act(() => { r = result.current.undo(s0) })
-    expect(r).toBeNull()
-  })
-
-  it('coalesces edits to the same widget within timeout', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1', props: { text: '' } }]
-
-    // First edit — creates snapshot
-    act(() => result.current.snapshot(s0, 'edit', '1'))
+    act(() => result.current.trackMany(['evt_a', 'evt_b', 'evt_c']))
     expect(result.current.canUndo).toBe(true)
-
-    // Second edit to same widget within 2s — coalesced, no new snapshot
-    act(() => result.current.snapshot(s0, 'edit', '1'))
-    // Still only one entry in past
-    let r
-    act(() => { r = result.current.undo([{ id: '1', props: { text: 'abc' } }]) })
-    expect(r).toEqual(s0)
-    // No more undo after that
-    expect(result.current.canUndo).toBe(false)
+    let popped
+    act(() => { popped = result.current.popUndo() })
+    expect(popped).toBe('evt_c')
   })
 
-  it('does NOT coalesce edits to different widgets', () => {
+  it('ignores empty / non-string ids', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }, { id: '2' }]
-    const s1 = [{ id: '1', props: { text: 'a' } }, { id: '2' }]
-
-    act(() => result.current.snapshot(s0, 'edit', '1'))
-    act(() => result.current.snapshot(s1, 'edit', '2'))
-
-    // Two entries in past
-    expect(result.current.canUndo).toBe(true)
-    act(() => { result.current.undo([]) })
-    expect(result.current.canUndo).toBe(true)
-    act(() => { result.current.undo([]) })
+    act(() => result.current.track(null))
+    act(() => result.current.track(undefined))
+    act(() => result.current.track(''))
+    act(() => result.current.track(42))
     expect(result.current.canUndo).toBe(false)
   })
 
-  it('does NOT coalesce edit after a different action type', () => {
+  it('reset clears both stacks', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }]
-    const s1 = [{ id: '1' }, { id: '2' }]
-
-    act(() => result.current.snapshot(s0, 'edit', '1'))
-    act(() => result.current.snapshot(s1, 'add'))
-    act(() => result.current.snapshot(s1, 'edit', '1'))
-
-    // Three entries in past (edit + add + edit — not coalesced because add broke the sequence)
-    act(() => { result.current.undo([]) })
-    act(() => { result.current.undo([]) })
-    act(() => { result.current.undo([]) })
-    expect(result.current.canUndo).toBe(false)
-  })
-
-  it('reset clears all history', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    act(() => result.current.snapshot([{ id: '1' }], 'add'))
-    act(() => result.current.snapshot([{ id: '1' }, { id: '2' }], 'add'))
-    expect(result.current.canUndo).toBe(true)
+    act(() => result.current.track('evt_a'))
+    act(() => { result.current.popUndo() })
+    act(() => result.current.pushRedo('evt_a_inv'))
 
     act(() => result.current.reset())
     expect(result.current.canUndo).toBe(false)
     expect(result.current.canRedo).toBe(false)
   })
 
-  it('undo returns null when history is empty', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    let r
-    act(() => { r = result.current.undo([]) })
-    expect(r).toBeNull()
-  })
-
-  it('redo returns null when future is empty', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    let r
-    act(() => { r = result.current.redo([]) })
-    expect(r).toBeNull()
-  })
-
-  it('snapshots are deep clones (mutations do not leak)', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    const widgets = [{ id: '1', props: { text: 'original' } }]
-
-    act(() => result.current.snapshot(widgets, 'add'))
-
-    // Mutate the original array
-    widgets[0].props.text = 'mutated'
-
-    let restored
-    act(() => { restored = result.current.undo(widgets) })
-    expect(restored[0].props.text).toBe('original')
-  })
-
-  it('caps history at 100 entries', () => {
+  it('popUndo on empty stack returns null', () => {
     const { result } = renderHook(() => useUndoRedo())
-
-    for (let i = 0; i < 110; i++) {
-      act(() => result.current.snapshot([{ id: String(i) }], 'add'))
-    }
-
-    // Should be capped at 100 — undo 100 times, then can't undo further
-    let count = 0
-    let r = true
-    while (r !== null) {
-      act(() => { r = result.current.undo([]) })
-      if (r !== null) count++
-    }
-    expect(count).toBe(100)
-  })
-
-  it('snapshots null widgets as empty array (first widget on new canvas)', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    act(() => result.current.snapshot(null, 'add'))
-    expect(result.current.canUndo).toBe(true)
-
-    let restored
-    act(() => { restored = result.current.undo([{ id: '1' }]) })
-    expect(restored).toEqual([])
+    let popped
+    act(() => { popped = result.current.popUndo() })
+    expect(popped).toBeNull()
   })
 })

package/src/internals/canvas/widgets/CodePenEmbed.jsx

@@ -58,7 +58,6 @@ export default forwardRef(function CodePenEmbed({ id, props, onUpdate, resizable
   const height = readProp(props, 'height', codepenEmbedSchema)
 
   const [interactive, setInteractive] = useState(false)
-  const [showIframe, setShowIframe] = useState(true)
   const [expandedMode, setExpandedMode] = useExpandOverride('codepen', id)
   const expanded = expandedMode === '1'
   const setExpanded = useCallback((open) => setExpandedMode(open ? '1' : null), [setExpandedMode])
@@ -67,8 +66,6 @@ export default forwardRef(function CodePenEmbed({ id, props, onUpdate, resizable
   const embedRef = useRef(null)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
-  const teardownTimerRef = useRef(null)
-  const exitSessionRef = useRef(0)
 
   const isValid = useMemo(() => isCodePenUrl(url), [url])
   const embedUrl = useMemo(() => (isValid ? toCodePenEmbedUrl(url) : ''), [url, isValid])
@@ -91,37 +88,26 @@ export default forwardRef(function CodePenEmbed({ id, props, onUpdate, resizable
 
   useIframeDevLogs({
     widget: 'CodePenEmbed',
-    loaded: showIframe && Boolean(embedUrl),
+    loaded: Boolean(embedUrl),
     src: embedUrl,
   })
 
   const enterInteractive = useCallback(() => {
-    exitSessionRef.current++
-    clearTimeout(teardownTimerRef.current)
-    setShowIframe(true)
     setInteractive(true)
   }, [])
 
-  // Exit interactive mode on click outside — keep iframe alive for 2 min
+  // Exit interactive mode on click outside
   useEffect(() => {
     if (!interactive || expanded) return
     function handlePointerDown(e) {
       if (embedRef.current && !embedRef.current.contains(e.target)) {
         setInteractive(false)
-        const session = ++exitSessionRef.current
-        clearTimeout(teardownTimerRef.current)
-        teardownTimerRef.current = setTimeout(() => {
-          if (exitSessionRef.current !== session) return
-          setShowIframe(false)
-        }, 2 * 60 * 1000)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [interactive, expanded])
 
-  useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
-
   // Close expanded modal on Escape
   useEffect(() => {
     if (!expanded) return
@@ -172,7 +158,6 @@ export default forwardRef(function CodePenEmbed({ id, props, onUpdate, resizable
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
       } else if (actionId === 'expand') {
-        setShowIframe(true)
         setExpanded(true)
       }
     },
@@ -188,25 +173,20 @@ export default forwardRef(function CodePenEmbed({ id, props, onUpdate, resizable
         </div>
         {embedUrl ? (
           <>
-            {showIframe ? (
-              <div
-                ref={inlineContainerRef}
-                className={styles.iframeContainer}
-                style={expanded ? { visibility: 'hidden' } : undefined}
-              >
-                <iframe
-                  ref={iframeRef}
-                  src={embedUrl}
-                  className={styles.iframe}
-                  title={`CodePen: ${headerTitle}`}
-                  allowFullScreen
-                  loading="lazy"
-                  onLoad={(e) => e.target.blur()}
-                />
-              </div>
-            ) : (
-              <div className={styles.iframeContainer} />
-            )}
+            <div
+              ref={inlineContainerRef}
+              className={styles.iframeContainer}
+              style={expanded ? { visibility: 'hidden' } : undefined}
+            >
+              <iframe
+                ref={iframeRef}
+                src={embedUrl}
+                className={styles.iframe}
+                title={`CodePen: ${headerTitle}`}
+                allowFullScreen
+                onLoad={(e) => e.target.blur()}
+              />
+            </div>
             {!interactive && !expanded && (
               <div
                 className={overlayStyles.interactOverlay}

package/src/internals/canvas/widgets/CodePenEmbed.module.css

@@ -1,8 +1,8 @@
 .embed {
   position: relative;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
-  border: 3px solid var(--borderColor-default, #d0d7de);
+  background: var(--color-background, #ffffff);
+  border: 3px solid var(--color-border, #d0d7de);
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
@@ -14,9 +14,9 @@
   padding: 6px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--fgColor-muted, #656d76);
-  background: var(--bgColor-muted, #f6f8fa);
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  color: var(--color-foreground-muted, #656d76);
+  background: var(--color-background-muted, #f6f8fa);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -57,12 +57,12 @@
   background: linear-gradient(
     135deg,
     transparent 40%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 50%,
     transparent 50%,
     transparent 65%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 75%,
     transparent 75%
   );
   opacity: 0;
@@ -98,7 +98,7 @@
   position: relative;
   border-radius: 12px;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
   animation: expandScaleIn 0.2s ease;
 }
@@ -150,12 +150,12 @@
 }
 
 .emptyIcon {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   opacity: 0.5;
 }
 
 .emptyLabel {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-size: 13px;
   font-style: italic;
 }