@dfosco/storyboard-react 3.11.1-beta.0 → 3.11.1

package/src/canvas/CanvasPage.module.css

@@ -39,6 +39,29 @@
   top: 12px;
   left: 16px;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.canvasTitleWrap {
+  display: inline-grid;
+}
+
+.canvasTitleWrap > * {
+  grid-area: 1 / 1;
+}
+
+.canvasTitleMeasure {
+  visibility: hidden;
+  white-space: pre;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  min-width: 80px;
+  pointer-events: none;
 }
 
 .canvasTitleInput {
@@ -50,9 +73,10 @@
   border: 1px solid transparent;
   border-radius: 6px;
   padding: 4px 8px;
+  margin: 0;
   outline: none;
-  min-width: 80px;
-  max-width: 300px;
+  width: 100%;
+  min-width: 0;
   transition: border-color 150ms, background-color 150ms, color 150ms;
 }
 
@@ -68,7 +92,28 @@
   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;
 }
+
+.localEditingLabel {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  background: hsl(212, 92%, 45%);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 6px;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}

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

@@ -0,0 +1,345 @@
+import { fireEvent, render, screen, act } from '@testing-library/react'
+import CanvasPage from './CanvasPage.jsx'
+import { updateCanvas, removeWidget } from './canvasApi.js'
+
+const MOCK_UNDO_REDO = {
+  snapshot: vi.fn(),
+  undo: vi.fn(),
+  redo: vi.fn(),
+  reset: vi.fn(),
+  canUndo: false,
+  canRedo: false,
+}
+
+vi.mock('./useUndoRedo.js', () => ({
+  default: () => MOCK_UNDO_REDO,
+}))
+
+// 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, onDragStart, onDrag, onDragEnd }) => {
+    capturedOnDragStart = onDragStart
+    capturedOnDrag = onDrag
+    capturedOnDragEnd = onDragEnd
+    return <div data-testid="tiny-canvas">{children}</div>
+  },
+}))
+
+const mockCanvas = {
+  title: 'Multi-Select Test',
+  widgets: [
+    { id: 'w1', type: 'sticky-note', position: { x: 100, y: 100 }, props: {} },
+    { id: 'w2', type: 'sticky-note', position: { x: 300, y: 100 }, props: {} },
+    { id: 'w3', type: 'markdown', position: { x: 500, y: 200 }, props: {} },
+  ],
+  sources: [],
+  centered: false,
+  dotted: false,
+  grid: false,
+  gridSize: 18,
+  colorMode: 'auto',
+}
+
+vi.mock('./useCanvas.js', () => ({
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: null,
+    loading: false,
+  }),
+}))
+
+vi.mock('./widgets/index.js', () => ({
+  getWidgetComponent: () => function MockWidget({ id }) {
+    return <div data-testid={`widget-content-${id}`}>widget</div>
+  },
+}))
+
+// WidgetChrome mock that exposes onSelect with shift parameter
+vi.mock('./widgets/WidgetChrome.jsx', () => ({
+  default: ({ children, onSelect, selected, multiSelected, widgetId }) => (
+    <div
+      data-testid={`chrome-${widgetId}`}
+      data-selected={selected || undefined}
+      data-multi-selected={multiSelected || undefined}
+    >
+      {children}
+      <button
+        className="tc-drag-handle"
+        data-testid={`select-${widgetId}`}
+        onClick={(e) => { e.stopPropagation(); onSelect?.(false) }}
+      >
+        select
+      </button>
+      <button
+        className="tc-drag-handle"
+        data-testid={`shift-select-${widgetId}`}
+        onClick={(e) => { e.stopPropagation(); onSelect?.(true) }}
+      >
+        shift-select
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('./widgets/widgetProps.js', () => ({
+  schemas: {},
+  getDefaults: () => ({}),
+}))
+
+vi.mock('./widgets/widgetConfig.js', () => ({
+  getFeatures: () => [],
+  isResizable: () => false,
+  schemas: {},
+  getMenuWidgetTypes: () => [],
+}))
+
+vi.mock('./widgets/figmaUrl.js', () => ({
+  isFigmaUrl: () => false,
+  sanitizeFigmaUrl: (url) => url,
+}))
+
+vi.mock('./canvasApi.js', () => ({
+  addWidget: vi.fn(),
+  updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
+  removeWidget: vi.fn(() => Promise.resolve({ success: true })),
+  uploadImage: vi.fn(),
+}))
+
+describe('CanvasPage multi-select', () => {
+  beforeEach(() => {
+    delete window.__storyboardCanvasBridgeState
+    window.__SB_LOCAL_DEV__ = true
+    vi.clearAllMocks()
+    capturedOnDragStart = null
+    capturedOnDrag = null
+    capturedOnDragEnd = null
+  })
+
+  afterEach(() => {
+    delete window.__SB_LOCAL_DEV__
+  })
+
+  it('shift+click on select handle adds widget to selection', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Select first widget
+    fireEvent.click(screen.getByTestId('select-w1'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+
+    // Shift+select second widget
+    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()
+  })
+
+  it('shift+click on already selected widget removes it from selection', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Select both
+    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()
+
+    // Shift+click w1 again to remove it
+    fireEvent.click(screen.getByTestId('shift-select-w1'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeUndefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+  })
+
+  it('normal click replaces multi-selection with single', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select
+    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)) })
+
+    // Normal click on w1 clears multi-select
+    fireEvent.click(screen.getByTestId('select-w1'))
+    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).toBeUndefined()
+    expect(screen.getByTestId('chrome-w3').dataset.selected).toBeUndefined()
+  })
+
+  it('sets multiSelected on all selected widgets when multiple are selected', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    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.multiSelected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.multiSelected).toBeDefined()
+    // Unselected widget should not have multiSelected
+    expect(screen.getByTestId('chrome-w3').dataset.multiSelected).toBeUndefined()
+  })
+
+  it('Escape clears all selection', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeUndefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeUndefined()
+  })
+
+  it('Delete removes all selected widgets and calls updateCanvas', 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)) })
+
+    // Press Delete
+    fireEvent.keyDown(document, { key: 'Delete' })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Should call updateCanvas with only w3 remaining
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: [expect.objectContaining({ id: 'w3' })],
+      })
+    )
+    // Should NOT use individual removeWidget API for multi-delete
+    expect(removeWidget).not.toHaveBeenCalled()
+    // Should snapshot for undo
+    expect(MOCK_UNDO_REDO.snapshot).toHaveBeenCalled()
+  })
+
+  it('single-select Delete uses removeWidget API', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.keyDown(document, { key: 'Backspace' })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(removeWidget).toHaveBeenCalledWith('test-canvas', 'w1')
+  })
+
+  it('multi-select move applies delta to all selected widgets', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 (100,100) and w2 (300,100)
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+
+    // Wait for selectedIdsRef to sync
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Drag w1 to (150, 200) → delta is (+50, +100)
+    expect(capturedOnDragEnd).toBeTruthy()
+    act(() => {
+      capturedOnDragEnd('w1', { x: 150, y: 200 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // w1 → (150, 200), w2 → (300+50, 100+100) = (350, 200)
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: expect.arrayContaining([
+          expect.objectContaining({ id: 'w1', position: { x: 150, y: 200 } }),
+          expect.objectContaining({ id: 'w2', position: { x: 350, y: 200 } }),
+          // w3 unchanged
+          expect.objectContaining({ id: 'w3', position: { x: 500, y: 200 } }),
+        ]),
+      })
+    )
+  })
+
+  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/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 })
+}

package/src/canvas/computeCanvasBounds.test.js

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest'
+
+// computeCanvasBounds is not exported, so we replicate it here for unit testing.
+// This keeps the test decoupled from CanvasPage internals while validating the algorithm.
+
+const WIDGET_FALLBACK_SIZES = {
+  'sticky-note':  { width: 180, height: 60 },
+  'markdown':     { width: 360, height: 200 },
+  '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 },
+}
+
+function computeCanvasBounds(widgets, sources, jsxExports) {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  let hasItems = false
+
+  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
+  }
+
+  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
+}
+
+describe('computeCanvasBounds', () => {
+  it('returns null for empty canvas', () => {
+    expect(computeCanvasBounds([], [], null)).toBeNull()
+    expect(computeCanvasBounds(null, null, null)).toBeNull()
+  })
+
+  it('computes bounds for a single widget using props dimensions', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 100, y: 200 }, props: { width: 300, height: 100 } },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 100, minY: 200, maxX: 400, maxY: 300 })
+  })
+
+  it('uses fallback dimensions when props are missing', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 50, y: 50 }, props: {} },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 50, minY: 50, maxX: 230, maxY: 110 }) // 50+180, 50+60
+  })
+
+  it('computes bounds spanning multiple widgets', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 0, y: 0 }, props: { width: 180, height: 60 } },
+      { type: 'markdown', position: { x: 500, y: 300 }, props: { width: 360, height: 200 } },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 0, minY: 0, maxX: 860, maxY: 500 })
+  })
+
+  it('includes JSX sources in bounds', () => {
+    const sources = [{ export: 'Hero', position: { x: -100, y: -50 }, width: 400, height: 300 }]
+    const jsxExports = { Hero: () => null }
+    const bounds = computeCanvasBounds([], sources, jsxExports)
+    expect(bounds).toEqual({ minX: -100, minY: -50, maxX: 300, maxY: 250 })
+  })
+
+  it('combines widgets and JSX sources', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 200, y: 200 }, props: { width: 180, height: 60 } },
+    ]
+    const sources = [{ export: 'Nav', position: { x: 0, y: 0 }, width: 100, height: 100 }]
+    const jsxExports = { Nav: () => null }
+    const bounds = computeCanvasBounds(widgets, sources, jsxExports)
+    expect(bounds).toEqual({ minX: 0, minY: 0, maxX: 380, maxY: 260 })
+  })
+
+  it('handles widgets with missing position (defaults to 0,0)', () => {
+    const widgets = [
+      { type: 'sticky-note', props: { width: 180, height: 60 } },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 0, minY: 0, maxX: 180, maxY: 60 })
+  })
+
+  it('uses component fallback for JSX sources without explicit size', () => {
+    const sources = [{ export: 'Card', position: { x: 10, y: 10 } }]
+    const jsxExports = { Card: () => null }
+    const bounds = computeCanvasBounds([], sources, jsxExports)
+    // component fallback: 200x150
+    expect(bounds).toEqual({ minX: 10, minY: 10, maxX: 210, maxY: 160 })
+  })
+})

package/src/canvas/useCanvas.js

@@ -9,7 +9,8 @@ async function fetchCanvasFromServer(name) {
   try {
     const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
     const res = await fetch(`${base}/_storyboard/canvas/read?name=${encodeURIComponent(name)}`)
-    if (res.ok) return res.json()
+    const contentType = res.headers.get('content-type') || ''
+    if (res.ok && contentType.includes('application/json')) return res.json()
   } catch { /* fall back to build-time data */ }
   return null
 }

package/src/canvas/useUndoRedo.js

@@ -0,0 +1,86 @@
+import { useRef, useState, useCallback } from 'react'
+
+const MAX_HISTORY = 100
+const COALESCE_MS = 2000
+
+/**
+ * Snapshot-based undo/redo history for canvas widgets.
+ *
+ * Tracks past/future stacks of widget array clones. The present state
+ * is always the live `localWidgets` — this hook only manages history.
+ *
+ * Edit coalescing: continuous edits to the same widget within COALESCE_MS
+ * are merged into one undo step (like Figma).
+ */
+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 snapshot = useCallback((currentWidgets, actionType, widgetId) => {
+    const widgets = currentWidgets ?? []
+
+    // 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
+      }
+    }
+
+    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 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 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 reset = useCallback(() => {
+    pastRef.current = []
+    futureRef.current = []
+    lastActionRef.current = { type: null, widgetId: null, time: 0 }
+    setCounts((prev) => {
+      if (prev.past === 0 && prev.future === 0) return prev
+      return { past: 0, future: 0 }
+    })
+  }, [])
+
+  return {
+    snapshot,
+    undo,
+    redo,
+    reset,
+    canUndo: counts.past > 0,
+    canRedo: counts.future > 0,
+  }
+}