@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/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' }] // eslint-disable-line no-unused-vars
+
+    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/internals/canvas/widgets/CodePenEmbed.jsx

@@ -0,0 +1,293 @@
+/**
+ * CodePen embed widget for canvas.
+ *
+ * Behaves like FigmaEmbed: click-to-interact overlay, iframe kept alive
+ * after deselect, expand modal, open-external action. Created via paste
+ * when a CodePen URL is pasted onto the canvas.
+ */
+import { forwardRef, useImperativeHandle, useMemo, useCallback, useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { isCodePenUrl, toCodePenEmbedUrl, getCodePenTitle, fetchCodePenMeta } from './codepenUrl.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './CodePenEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+const codepenEmbedSchema = schemas['codepen-embed']
+
+/** Feather Icons codepen icon (stroke-based) */
+function CodePenLogo({ className }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
+      <line x1="12" y1="22" x2="12" y2="15.5" />
+      <polyline points="22 8.5 12 15.5 2 8.5" />
+      <polyline points="2 15.5 12 8.5 22 15.5" />
+      <line x1="12" y1="2" x2="12" y2="8.5" />
+    </svg>
+  )
+}
+
+/** Stroke-based code icon for empty state */
+function CodeIcon({ size = 32, className }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  )
+}
+
+export default forwardRef(function CodePenEmbed({ props, onUpdate, resizable }, ref) {
+  const url = readProp(props, 'url', codepenEmbedSchema)
+  const width = readProp(props, 'width', codepenEmbedSchema)
+  const height = readProp(props, 'height', codepenEmbedSchema)
+
+  const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(true)
+  const [expanded, setExpanded] = useState(false)
+
+  const iframeRef = useRef(null)
+  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])
+  const fallbackTitle = useMemo(() => (url ? getCodePenTitle(url) : 'CodePen'), [url])
+
+  // Fetch pen metadata (title + author) from CodePen oEmbed API
+  const [penMeta, setPenMeta] = useState(null)
+  useEffect(() => {
+    if (!url || !isValid) return
+    let cancelled = false
+    fetchCodePenMeta(url).then((meta) => {
+      if (!cancelled && meta) setPenMeta(meta)
+    })
+    return () => { cancelled = true }
+  }, [url, isValid])
+
+  const headerTitle = penMeta?.title
+    ? `${penMeta.title} · ${penMeta.author || fallbackTitle}`
+    : fallbackTitle
+
+  useIframeDevLogs({
+    widget: 'CodePenEmbed',
+    loaded: showIframe && 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
+  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
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        setExpanded(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [expanded])
+
+  // Reparent iframe between inline and modal containers
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    if (expanded && modalContainerRef.current) {
+      iframe._savedClassName = iframe.className
+      iframe._savedStyle = iframe.getAttribute('style') || ''
+      iframe.className = styles.expandIframe
+      iframe.removeAttribute('style')
+      const target = modalContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, target.firstChild)
+      } else {
+        target.prepend(iframe)
+      }
+    } else if (!expanded && inlineContainerRef.current) {
+      if (iframe._savedClassName !== undefined) {
+        iframe.className = iframe._savedClassName
+        iframe.setAttribute('style', iframe._savedStyle)
+        delete iframe._savedClassName
+        delete iframe._savedStyle
+      }
+      const target = inlineContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, null)
+      } else {
+        target.appendChild(iframe)
+      }
+    }
+  }, [expanded])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'open-external') {
+        if (url) window.open(url, '_blank', 'noopener')
+      } else if (actionId === 'expand') {
+        setShowIframe(true)
+        setExpanded(true)
+      }
+    },
+  }), [url])
+
+  return (
+    <>
+    <WidgetWrapper>
+      <div ref={embedRef} className={styles.embed} style={{ width, height }}>
+        <div className={styles.header}>
+          <CodePenLogo className={styles.codepenLogo} />
+          <span className={styles.headerTitle}>{headerTitle}</span>
+        </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} />
+            )}
+            {!interactive && !expanded && (
+              <div
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    enterInteractive()
+                  }
+                }}
+                aria-label="Click to interact with CodePen embed"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className={styles.emptyState}>
+            <CodeIcon size={32} className={styles.emptyIcon} />
+            <span className={styles.emptyLabel}>No CodePen URL</span>
+          </div>
+        )}
+      </div>
+      {resizable && (
+        <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>
+    {createPortal(
+      <div
+        className={styles.expandBackdrop}
+        style={expanded && embedUrl ? undefined : { display: 'none' }}
+        onClick={() => setExpanded(false)}
+        onPointerDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          if (e.key === 'Escape') setExpanded(false)
+        }}
+        onWheel={(e) => e.stopPropagation()}
+        tabIndex={-1}
+        ref={(el) => { if (el && expanded) el.focus() }}
+      >
+        <div
+          ref={modalContainerRef}
+          className={styles.expandContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className={styles.expandClose}
+            onClick={() => setExpanded(false)}
+            aria-label="Close expanded view"
+            autoFocus
+          >✕</button>
+        </div>
+      </div>,
+      document.body
+    )}
+    </>
+  )
+})

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

@@ -0,0 +1,161 @@
+.embed {
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  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;
+}
+
+.codepenLogo {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.iframeContainer {
+  width: 100%;
+  height: calc(100% - 10px);
+  overflow: hidden;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.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;
+}
+
+/* Expand modal */
+.expandBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: expandFadeIn 0.15s ease;
+}
+
+@keyframes expandFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.expandContainer {
+  width: 90vw;
+  height: 90vh;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
+  animation: expandScaleIn 0.2s ease;
+}
+
+@keyframes expandScaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.expandIframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.expandClose {
+  all: unset;
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #ffffff;
+  font-size: 16px;
+  z-index: 1;
+  transition: background 100ms;
+  backdrop-filter: blur(4px);
+}
+
+.expandClose:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.emptyState {
+  width: 100%;
+  height: calc(100% - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.emptyIcon {
+  color: var(--fgColor-muted, #656d76);
+  opacity: 0.5;
+}
+
+.emptyLabel {
+  color: var(--fgColor-muted, #656d76);
+  font-size: 13px;
+  font-style: italic;
+}

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

@@ -0,0 +1,2 @@
+// Deprecated — renamed to StorySetWidget. This re-export exists for backward compatibility.
+export { default } from './StorySetWidget.jsx'