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

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/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,
+  }
+}

package/src/canvas/useUndoRedo.test.js

@@ -0,0 +1,231 @@
+import { renderHook, act } from '@testing-library/react'
+import useUndoRedo from './useUndoRedo.js'
+
+describe('useUndoRedo', () => {
+  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', () => {
+    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'))
+
+    expect(result.current.canUndo).toBe(true)
+    expect(result.current.canRedo).toBe(false)
+  })
+
+  it('undo returns the previous state and enables redo', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const before = [{ id: '1', props: { text: 'a' } }]
+    const after = [{ id: '1', props: { text: 'b' } }]
+
+    act(() => result.current.snapshot(before, 'edit', '1'))
+
+    let restored
+    act(() => { restored = result.current.undo(after) })
+
+    expect(restored).toEqual(before)
+    expect(result.current.canUndo).toBe(false)
+    expect(result.current.canRedo).toBe(true)
+  })
+
+  it('redo returns the next state', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const before = [{ id: '1', props: { text: 'a' } }]
+    const after = [{ id: '1', props: { text: 'b' } }]
+
+    act(() => result.current.snapshot(before, 'edit', '1'))
+    act(() => { result.current.undo(after) })
+
+    let redone
+    act(() => { redone = result.current.redo(before) })
+
+    expect(redone).toEqual(after)
+    expect(result.current.canUndo).toBe(true)
+    expect(result.current.canRedo).toBe(false)
+  })
+
+  it('new mutation after undo clears the redo chain', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const s0 = [{ id: '1' }]
+    const s1 = [{ id: '1' }, { id: '2' }]
+    const s2 = [{ id: '1' }, { id: '3' }]
+
+    act(() => result.current.snapshot(s0, 'add'))
+    act(() => result.current.undo(s1))
+    expect(result.current.canRedo).toBe(true)
+
+    // New mutation breaks redo
+    act(() => result.current.snapshot(s0, 'add'))
+    expect(result.current.canRedo).toBe(false)
+    expect(result.current.canUndo).toBe(true)
+  })
+
+  it('supports multi-step undo-redo-undo chains', () => {
+    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'))
+    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)
+  })
+
+  it('does NOT coalesce edits to different widgets', () => {
+    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([]) })
+    expect(result.current.canUndo).toBe(false)
+  })
+
+  it('does NOT coalesce edit after a different action type', () => {
+    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.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', () => {
+    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([])
+  })
+})

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -0,0 +1,106 @@
+import { forwardRef, useImperativeHandle, useMemo, useCallback, useState } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
+import styles from './FigmaEmbed.module.css'
+
+const figmaEmbedSchema = schemas['figma-embed']
+
+/** Inline Figma logo SVG */
+function FigmaLogo() {
+  return (
+    <svg className={styles.figmaLogo} viewBox="0 0 38 57" fill="none" aria-hidden="true">
+      <path d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" fill="#1ABCFE" />
+      <path d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" fill="#0ACF83" />
+      <path d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" fill="#FF7262" />
+      <path d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" fill="#F24E1E" />
+      <path d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" fill="#A259FF" />
+    </svg>
+  )
+}
+
+const TYPE_LABELS = { board: 'Board', design: 'Design', proto: 'Prototype' }
+
+export default forwardRef(function FigmaEmbed({ props, onUpdate }, ref) {
+  const url = readProp(props, 'url', figmaEmbedSchema)
+  const width = readProp(props, 'width', figmaEmbedSchema)
+  const height = readProp(props, 'height', figmaEmbedSchema)
+
+  const [interactive, setInteractive] = useState(false)
+
+  // Validate URL at render time — only embed known Figma URLs
+  const isValid = useMemo(() => isFigmaUrl(url), [url])
+  const embedUrl = useMemo(() => (isValid ? toFigmaEmbedUrl(url) : ''), [url, isValid])
+  const title = useMemo(() => (url ? getFigmaTitle(url) : 'Figma'), [url])
+  const figmaType = useMemo(() => getFigmaType(url), [url])
+  const typeLabel = figmaType ? TYPE_LABELS[figmaType] : 'Figma'
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'open-external') {
+        if (url) window.open(url, '_blank', 'noopener')
+      }
+    },
+  }), [url])
+
+  return (
+    <WidgetWrapper>
+      <div className={styles.embed} style={{ width, height }}>
+        <div className={styles.header}>
+          <FigmaLogo />
+          <span className={styles.headerTitle}>{title}</span>
+        </div>
+        {embedUrl ? (
+          <>
+            <div className={styles.iframeContainer}>
+              <iframe
+                src={embedUrl}
+                className={styles.iframe}
+                title={`Figma ${typeLabel}: ${title}`}
+                allowFullScreen
+              />
+            </div>
+            {!interactive && (
+              <div
+                className={styles.dragOverlay}
+                onDoubleClick={enterInteractive}
+              />
+            )}
+          </>
+        ) : (
+          <div className={styles.iframeContainer} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <p style={{ color: 'var(--fgColor-muted, #656d76)', fontSize: 14, fontStyle: 'italic' }}>
+              No Figma URL
+            </p>
+          </div>
+        )}
+      </div>
+      <div
+        className={styles.resizeHandle}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          const startX = e.clientX
+          const startY = e.clientY
+          const startW = width
+          const startH = height
+          function onMove(ev) {
+            const newW = Math.max(200, startW + ev.clientX - startX)
+            const newH = Math.max(150, startH + ev.clientY - startY)
+            onUpdate?.({ width: newW, height: newH })
+          }
+          function onUp() {
+            document.removeEventListener('mousemove', onMove)
+            document.removeEventListener('mouseup', onUp)
+          }
+          document.addEventListener('mousemove', onMove)
+          document.addEventListener('mouseup', onUp)
+        }}
+        onPointerDown={(e) => e.stopPropagation()}
+      />
+    </WidgetWrapper>
+  )
+})

package/src/canvas/widgets/FigmaEmbed.module.css

@@ -0,0 +1,83 @@
+.embed {
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.figmaLogo {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.iframeContainer {
+  width: 100%;
+  height: calc(100% - 31px); /* subtract header height */
+  overflow: hidden;
+}
+
+.iframe {
+  width: 100%;
+  height: calc(100% + 24px); /* clip Figma's built-in bottom toolbar */
+  border: none;
+  display: block;
+}
+
+.dragOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: grab;
+}
+
+.resizeHandle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  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%,
+    transparent 50%,
+    transparent 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    transparent 75%
+  );
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+}
+
+.embed:hover ~ .resizeHandle,
+.resizeHandle:hover {
+  opacity: 1;
+}