@dfosco/storyboard 0.6.11 → 0.6.13

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/vite/data-plugin.js

@@ -1233,6 +1233,78 @@ export default function storyboardDataPlugin() {
     },
 
     configureServer(server) {
+      // ── Prototypes isolation middleware ────────────────────────────
+      // Serves the prototype-iframe HTML shell so consumers don't need to
+      // ship their own `prototypes.html` + `prototypes-entry.jsx`. Loads
+      // the library-side `prototypesEntry.jsx`, which uses absolute globs
+      // (`/src/prototypes/...`) that Vite resolves against the *consumer's*
+      // project root. See .agents/plans/vite-isolation.md.
+      const prototypesEntryPath = new URL('../canvas/prototypesEntry.jsx', import.meta.url).pathname
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) return next()
+        let url = req.url
+        const baseNoTrail = (server.config.base || '/').replace(/\/$/, '')
+        if (baseNoTrail && url.startsWith(baseNoTrail)) {
+          url = url.slice(baseNoTrail.length) || '/'
+        }
+        const cleanUrl = url.split('?')[0].split('#')[0]
+        if (cleanUrl !== '/prototypes.html') return next()
+
+        // Theme bootstrap mirrors index.html so the iframe paints with the
+        // correct color mode on first frame (before mountStoryboardCore
+        // wires up theme sync).
+        const themeBootstrap = [
+          '<script>',
+          '(function() {',
+          '  var stored = localStorage.getItem("sb-color-scheme");',
+          '  var theme = stored || "system";',
+          '  var resolved = theme;',
+          '  if (theme === "system") {',
+          '    resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";',
+          '  }',
+          '  var el = document.documentElement;',
+          '  el.setAttribute("data-sb-theme", resolved);',
+          '  if (theme === "system") {',
+          '    el.setAttribute("data-color-mode", "auto");',
+          '    el.setAttribute("data-light-theme", "light");',
+          '    el.setAttribute("data-dark-theme", "dark");',
+          '  } else if (resolved.indexOf("dark") === 0) {',
+          '    el.setAttribute("data-color-mode", "dark");',
+          '    el.setAttribute("data-dark-theme", resolved);',
+          '    el.setAttribute("data-light-theme", "light");',
+          '  } else {',
+          '    el.setAttribute("data-color-mode", "light");',
+          '    el.setAttribute("data-light-theme", resolved);',
+          '    el.setAttribute("data-dark-theme", "dark");',
+          '  }',
+          '})();',
+          '</script>',
+        ].join('\n')
+
+        const rawHtml = [
+          '<!DOCTYPE html>',
+          '<html lang="en"><head>',
+          '<meta charset="UTF-8" />',
+          '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />',
+          '<title>Storyboard · Prototypes</title>',
+          themeBootstrap,
+          '</head><body>',
+          '<div id="root"></div>',
+          `<script type="module" src="/@fs${prototypesEntryPath}"></script>`,
+          '</body></html>',
+        ].join('\n')
+
+        try {
+          const html = await server.transformIndexHtml(req.url, rawHtml)
+          res.writeHead(200, { 'Content-Type': 'text/html' })
+          res.end(html)
+        } catch (err) {
+          console.error('[storyboard] prototypes.html transform failed:', err)
+          res.writeHead(500, { 'Content-Type': 'text/plain' })
+          res.end('prototypes.html failed')
+        }
+      })
+
       // ── Component isolate middleware ───────────────────────────────
       // Serves a minimal HTML shell for iframe-isolated component widgets.
       // The iframe loads componentIsolate.jsx which reads query params