@dfosco/storyboard-react 4.0.0-beta.35 → 4.0.0-beta.37

package/src/Viewfinder.module.css

@@ -1,235 +0,0 @@
-.container {
-  min-height: 100vh;
-  background-color: var(--bgColor-default, #0d1117);
-  color: var(--fgColor-default, #e6edf3);
-  padding: 80px 32px 48px;
-}
-
-.header {
-  max-width: 720px;
-  margin: 0 auto 64px;
-}
-
-.title {
-  font-size: 72px;
-  font-weight: 400;
-  margin: 0 0 12px;
-  color: var(--fgColor-default, #e6edf3);
-  letter-spacing: -0.03em;
-  line-height: 1;
-}
-
-.subtitle {
-  font-size: 15px;
-  color: var(--fgColor-muted, #848d97);
-  margin: 4px 0 0;
-  letter-spacing: 0.01em;
-}
-
-.sceneCount {
-  font-size: 13px;
-  color: var(--fgColor-muted, #848d97);
-  margin: 16px 0 0;
-  letter-spacing: 0.01em;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 16px;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-.listItem {
-  display: block;
-  padding: 8px 0;
-  text-decoration: none;
-  color: inherit;
-  /* border-bottom: 1px solid var(--borderColor-muted, #21262d); */
-}
-
-.listItem:first-child {
-  /* border-top: 1px solid var(--borderColor-muted, #21262d); */
-}
-
-.listItem:hover {
-  text-decoration: none !important;
-}
-
-.listItem .author {
-  margin-top: 8px;
-}
-
-.card {
-  display: block;
-  border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--bgColor-muted, #161b22);
-  text-decoration: none;
-  color: inherit;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.card:hover {
-  border-color: var(--borderColor-accent-emphasis, #1f6feb);
-  box-shadow: 0 0 0 1px var(--borderColor-accent-emphasis, #1f6feb);
-  text-decoration: none !important;
-}
-
-.thumbnail {
-  aspect-ratio: 16 / 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: var(--bgColor-inset, #010409);
-
-  --placeholder-bg: var(--bgColor-inset, #010409);
-  --placeholder-grid: var(--borderColor-default, #30363d);
-  --placeholder-accent: var(--fgColor-accent, #58a6ff);
-  --placeholder-fg: var(--fgColor-default, #c9d1d9);
-  --placeholder-muted: var(--fgColor-muted, #484f58);
-}
-
-.thumbnail svg {
-  width: 100%;
-  height: 100%;
-}
-
-.cardBody {
-  padding: 12px 16px;
-
-  &:hover {
-    background-color: var(--bgColor-muted);
-  }
-}
-
-.sceneName {
-  font-size: 28px;
-  font-weight: 400;
-  color: var(--fgColor-default, #e6edf3);
-  margin: 0;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-  transition: font-style 0.15s ease;
-}
-
-.empty {
-  text-align: center;
-  padding: 80px 24px;
-  color: var(--fgColor-muted, #848d97);
-  font-size: 15px;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-.sectionTitle {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--fgColor-muted, #848d97);
-  margin: 0 auto 20px;
-  max-width: 720px;
-}
-
-.headerTop {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.branchDropdown {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.branchIcon {
-  position: absolute;
-  left: 10px;
-  color: var(--fgColor-muted, #848d97);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.branchSelect {
-  appearance: none;
-  background-color: transparent;
-  color: var(--fgColor-default, #e6edf3);
-  border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 20px;
-  padding: 6px 32px 6px 32px;
-  font-size: 13px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848d97'%3E%3Cpath d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  min-width: 140px;
-  max-width: 220px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  transition: border-color 0.15s ease;
-}
-
-.branchSelect:hover {
-  border-color: var(--fgColor-muted, #848d97);
-}
-
-.branchSelect:focus-visible {
-  outline: 2px solid var(--borderColor-accent-emphasis, #1f6feb);
-  outline-offset: -1px;
-}
-
-.author {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 6px;
-}
-
-.authorAvatars {
-  display: flex;
-  flex-direction: row;
-}
-
-.authorAvatars:hover .authorAvatar {
-  margin-left: 2px;
-}
-
-.authorAvatars:hover .authorAvatar:first-child {
-  margin-left: 0;
-}
-
-.authorAvatar {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  margin-left: -6px;
-  transition: margin-left 0.15s ease;
-  outline: 2px solid var(--bgColor-default, #0d1117);
-  position: relative;
-}
-
-.authorAvatar:first-child {
-  margin-left: 0;
-}
-
-.authorName {
-  font-size: 13px;
-  color: var(--fgColor-muted, #848d97);
-  letter-spacing: 0.01em;
-}

package/src/canvas/widgets/refreshQueue.js

@@ -1,111 +0,0 @@
-/**
- * Concurrent refresh queue for bulk snapshot recapture (e.g. on theme change).
- *
- * Captures run in parallel (up to MAX_CONCURRENT) for speed, but REVEALS are
- * staggered on a fixed timeline — widget 0 reveals at 0ms, widget 1 at
- * REVEAL_INTERVAL ms, widget 2 at 2×REVEAL_INTERVAL ms, etc., all relative to
- * batch start. This creates a clean, predictable wave sweep regardless of how
- * fast each capture completes.
- *
- * After a batch completes, any widgets that failed are re-enqueued for a
- * single retry pass.
- *
- * Sorted spatially (top-to-bottom, left-to-right) before assigning reveal slots.
- * Supports cancellation by widget ID.
- */
-const queue = []
-let running = 0
-let drainScheduled = false
-let batchTotal = 0
-let batchDone = 0
-const batchFailed = []
-
-const MAX_CONCURRENT = 4
-export const REVEAL_INTERVAL = 200
-
-/**
- * Enqueue a snapshot refresh task for a widget.
- * @param {string} widgetId — unique widget identifier (for cancellation)
- * @param {(meta: { revealOrder: number, batchStart: number }) => Promise<boolean>} fn
- *   Must resolve to `true` on success, `false` on failure.
- * @param {{ x: number, y: number }} [pos] — spatial position for wave ordering
- */
-export function enqueueRefresh(widgetId, fn, pos) {
-  console.log(`[refreshQueue] enqueue: ${widgetId}, queueLen=${queue.length}`)
-  const existing = queue.findIndex(item => item.widgetId === widgetId)
-  if (existing !== -1) queue.splice(existing, 1)
-
-  queue.push({ widgetId, fn, x: pos?.x ?? 0, y: pos?.y ?? 0 })
-  scheduleDrain()
-}
-
-/**
- * Cancel a pending refresh for a widget (e.g. user activated it manually).
- */
-export function cancelRefresh(widgetId) {
-  const idx = queue.findIndex(item => item.widgetId === widgetId)
-  if (idx !== -1) queue.splice(idx, 1)
-}
-
-function scheduleDrain() {
-  if (drainScheduled) return
-  drainScheduled = true
-  // Batch all enqueueRefresh calls from the same React commit, then sort
-  // spatially and assign reveal slots before starting captures.
-  setTimeout(() => {
-    drainScheduled = false
-    queue.sort((a, b) => a.y - b.y || a.x - b.x)
-    const batchStart = Date.now()
-    batchTotal = queue.length
-    batchDone = 0
-    batchFailed.length = 0
-    queue.forEach((item, i) => {
-      item.revealOrder = i
-      item.batchStart = batchStart
-      item.isRetry = item.isRetry || false
-    })
-    drain()
-  }, 0)
-}
-
-function onTaskDone(success, item) {
-  batchDone++
-  console.log(`[refreshQueue] taskDone: ${item.widgetId}, success=${success}, done=${batchDone}/${batchTotal}, retry=${item.isRetry}`)
-  if (!success && !item.isRetry) {
-    batchFailed.push(item)
-  }
-  // When batch is complete, re-enqueue failures for one retry
-  if (batchDone >= batchTotal && batchFailed.length > 0) {
-    console.log(`[refreshQueue] batch complete, retrying ${batchFailed.length} failed`)
-    const retries = batchFailed.splice(0)
-    for (const failed of retries) {
-      failed.isRetry = true
-      queue.push(failed)
-    }
-    batchTotal = queue.length
-    batchDone = 0
-    const batchStart = Date.now()
-    queue.forEach((item, i) => {
-      item.revealOrder = i
-      item.batchStart = batchStart
-    })
-  }
-  drain()
-}
-
-function drain() {
-  if (running >= MAX_CONCURRENT || queue.length === 0) return
-
-  running++
-  const item = queue.shift()
-  const { fn, revealOrder, batchStart } = item
-  Promise.resolve()
-    .then(() => fn({ revealOrder, batchStart }))
-    .then((success) => { running--; onTaskDone(success !== false, item) })
-    .catch(() => { running--; onTaskDone(false, item) })
-
-  // Start next capture immediately (no stagger on capture start — only reveals are staggered)
-  if (queue.length > 0 && running < MAX_CONCURRENT) {
-    drain()
-  }
-}

package/src/canvas/widgets/useSnapshotCapture.js

@@ -1,161 +0,0 @@
-/**
- * useSnapshotCapture — parent-side capture orchestration hook.
- *
- * Listens for snapshot-ready signals from an embedded iframe and
- * provides a requestCapture() function that triggers a single capture
- * of whatever the iframe is currently showing.
- *
- * Saves a single `snapshot` prop — overwritten every time.
- * Only active in dev mode (when onUpdate is provided).
- */
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { uploadImage } from '../canvasApi.js'
-
-const CAPTURE_TIMEOUT = 3000
-
-/**
- * Run a single capture request against the iframe.
- * Returns the dataUrl or null on failure.
- */
-function captureOnce(iframeContentWindow, requestId, listeners) {
-  return new Promise((resolve) => {
-    const timer = setTimeout(() => {
-      cleanup()
-      resolve(null)
-    }, CAPTURE_TIMEOUT)
-
-    function cleanup() {
-      clearTimeout(timer)
-      const idx = listeners.indexOf(handler)
-      if (idx !== -1) listeners.splice(idx, 1)
-    }
-
-    function handler(data) {
-      if (data.requestId !== requestId) return
-      cleanup()
-      if (data.error || !data.dataUrl) {
-        if (data.error) console.warn('[snapshot] Capture failed:', data.error)
-        resolve(null)
-      } else {
-        resolve(data.dataUrl)
-      }
-    }
-
-    listeners.push(handler)
-    iframeContentWindow.postMessage({
-      type: 'storyboard:embed:capture',
-      requestId,
-    }, '*')
-  })
-}
-
-export function useSnapshotCapture({
-  iframeRef,
-  widgetId,
-  onUpdate,
-  showIframe,
-}) {
-  const [iframeReady, setIframeReady] = useState(false)
-  const iframeReadyRef = useRef(false)
-  const capturingRef = useRef(false)
-  const requestIdCounter = useRef(0)
-  const captureGeneration = useRef(0)
-  const responseHandlers = useRef([])
-  // Track the iframe contentWindow to reset readiness on remount
-  const lastContentWindowRef = useRef(null)
-
-  // Reset ready state when iframe is unmounted/remounted
-  useEffect(() => {
-    setIframeReady(false)
-    iframeReadyRef.current = false
-  }, [widgetId])
-
-  // Reset readiness when iframe is torn down so remount waits for new snapshot-ready
-  useEffect(() => {
-    if (!showIframe) {
-      setIframeReady(false)
-      iframeReadyRef.current = false
-      lastContentWindowRef.current = null
-    }
-  }, [showIframe])
-
-  // Listen for postMessage events from the embedded iframe
-  useEffect(() => {
-    if (!onUpdate) return
-
-    function handler(e) {
-      if (!iframeRef.current) return
-      if (e.source !== iframeRef.current.contentWindow) return
-
-      // Detect new iframe instance → reset readiness
-      if (e.source !== lastContentWindowRef.current) {
-        lastContentWindowRef.current = e.source
-        setIframeReady(false)
-        iframeReadyRef.current = false
-      }
-
-      if (e.data?.type === 'storyboard:embed:snapshot-ready') {
-        console.log(`[snapshot:${widgetId}] iframe ready`)
-        setIframeReady(true)
-        iframeReadyRef.current = true
-      }
-
-      if (e.data?.type === 'storyboard:embed:snapshot') {
-        for (const fn of responseHandlers.current) {
-          fn(e.data)
-        }
-      }
-    }
-
-    window.addEventListener('message', handler)
-    return () => window.removeEventListener('message', handler)
-  }, [iframeRef, onUpdate])
-
-  /**
-   * Capture a single snapshot of the current iframe state.
-   * Uploads and saves as `snapshot` prop, overwriting any previous value.
-   */
-  const requestCapture = useCallback(async ({ force = false } = {}) => {
-    console.log(`[snapshot:${widgetId}] requestCapture: force=${force}, hasContentWindow=${!!iframeRef.current?.contentWindow}, capturing=${capturingRef.current}, ready=${iframeReadyRef.current}`)
-    if (!onUpdate) return {}
-    if (!iframeRef.current?.contentWindow) { console.log(`[snapshot:${widgetId}] requestCapture: no contentWindow`); return {} }
-    if (capturingRef.current) { console.log(`[snapshot:${widgetId}] requestCapture: already capturing`); return {} }
-    if (!force && !iframeReadyRef.current) { console.log(`[snapshot:${widgetId}] requestCapture: not ready`); return {} }
-
-    capturingRef.current = true
-    const gen = ++captureGeneration.current
-    const cw = iframeRef.current.contentWindow
-    const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-
-    try {
-      const reqId = ++requestIdCounter.current
-      const dataUrl = await captureOnce(cw, reqId, responseHandlers.current)
-
-      if (gen !== captureGeneration.current) { console.log(`[snapshot:${widgetId}] stale gen after capture`); return {} }
-      if (!dataUrl) { console.log(`[snapshot:${widgetId}] captureOnce returned null`); return {} }
-
-      const filename = `snapshot-${widgetId}.webp`
-      console.log(`[snapshot:${widgetId}] uploading ${filename}`)
-      const result = await uploadImage(dataUrl, `snapshot-${widgetId}`, filename)
-
-      if (gen !== captureGeneration.current) { console.log(`[snapshot:${widgetId}] stale gen after upload`); return {} }
-
-      if (result?.filename) {
-        const cacheBust = `?v=${Date.now()}`
-        const url = `${base}/_storyboard/canvas/images/${result.filename}${cacheBust}`
-        const updates = { snapshot: url }
-        console.log(`[snapshot:${widgetId}] saved: ${url.slice(0, 60)}`)
-        onUpdate?.(updates)
-        return updates
-      }
-      return {}
-    } catch (err) {
-      console.warn('[snapshot] Capture failed:', err)
-      return {}
-    } finally {
-      capturingRef.current = false
-    }
-  }, [onUpdate, iframeRef, widgetId])
-
-  return { iframeReady, requestCapture }
-}

package/src/canvas/widgets/useSnapshotCapture.test.jsx

@@ -1,164 +0,0 @@
-/**
- * Tests for useSnapshotCapture hook — single-capture orchestration.
- */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
-import { useSnapshotCapture } from './useSnapshotCapture.js'
-
-vi.mock('../canvasApi.js', () => ({
-  uploadImage: vi.fn().mockResolvedValue({ filename: 'snapshot-test-widget.webp' }),
-}))
-
-import { uploadImage } from '../canvasApi.js'
-
-function createMockIframeRef(contentWindow = null) {
-  return { current: contentWindow ? { contentWindow } : null }
-}
-
-function createMockContentWindow() {
-  return { postMessage: vi.fn() }
-}
-
-describe('useSnapshotCapture', () => {
-  let listeners = []
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    listeners = []
-    const origAdd = window.addEventListener
-    const origRemove = window.removeEventListener
-    vi.spyOn(window, 'addEventListener').mockImplementation((type, fn, opts) => {
-      if (type === 'message') listeners.push(fn)
-      origAdd.call(window, type, fn, opts)
-    })
-    vi.spyOn(window, 'removeEventListener').mockImplementation((type, fn, opts) => {
-      if (type === 'message') listeners = listeners.filter(l => l !== fn)
-      origRemove.call(window, type, fn, opts)
-    })
-  })
-
-  afterEach(() => { vi.restoreAllMocks() })
-
-  function dispatchMessage(source, data) {
-    const event = new MessageEvent('message', { source, data })
-    listeners.forEach(fn => fn(event))
-  }
-
-  it('returns iframeReady=false initially', () => {
-    const iframeRef = createMockIframeRef()
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
-    )
-    expect(result.current.iframeReady).toBe(false)
-  })
-
-  it('sets iframeReady=true on snapshot-ready message', () => {
-    const cw = createMockContentWindow()
-    const iframeRef = createMockIframeRef(cw)
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
-    )
-    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
-    expect(result.current.iframeReady).toBe(true)
-  })
-
-  it('no-ops when onUpdate is null', async () => {
-    const cw = createMockContentWindow()
-    const iframeRef = createMockIframeRef(cw)
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: null })
-    )
-    await act(async () => { await result.current.requestCapture() })
-    expect(cw.postMessage).not.toHaveBeenCalled()
-  })
-
-  it('no-ops when iframe not ready', async () => {
-    const cw = createMockContentWindow()
-    const iframeRef = createMockIframeRef(cw)
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
-    )
-    await act(async () => { await result.current.requestCapture() })
-    expect(cw.postMessage).not.toHaveBeenCalled()
-  })
-
-  it('sends single capture and calls onUpdate with snapshot', async () => {
-    const cw = createMockContentWindow()
-    const iframeRef = createMockIframeRef(cw)
-    const onUpdate = vi.fn()
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'test-widget', onUpdate })
-    )
-
-    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
-
-    uploadImage.mockResolvedValueOnce({ filename: 'snapshot-test-widget.webp' })
-
-    await act(async () => {
-      const promise = result.current.requestCapture()
-
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,IMG' })
-
-      await promise
-    })
-
-    // Single capture, single postMessage
-    expect(cw.postMessage).toHaveBeenCalledTimes(1)
-    expect(uploadImage).toHaveBeenCalledTimes(1)
-    expect(onUpdate).toHaveBeenCalledWith(
-      expect.objectContaining({
-        snapshot: expect.stringContaining('snapshot-test-widget.webp'),
-      })
-    )
-  })
-
-  it('guards against concurrent captures', async () => {
-    const cw = createMockContentWindow()
-    const iframeRef = createMockIframeRef(cw)
-    const onUpdate = vi.fn()
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate })
-    )
-
-    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
-    uploadImage.mockResolvedValue({ filename: 'snapshot-w1.webp' })
-
-    await act(async () => {
-      const p1 = result.current.requestCapture()
-      // Second call while first is in-flight should no-op
-      const p2 = result.current.requestCapture()
-
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,IMG' })
-
-      await p1
-      await p2
-    })
-
-    expect(cw.postMessage).toHaveBeenCalledTimes(1)
-  })
-
-  it('handles capture failure gracefully', async () => {
-    const cw = createMockContentWindow()
-    const iframeRef = createMockIframeRef(cw)
-    const onUpdate = vi.fn()
-    const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate })
-    )
-
-    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
-    uploadImage.mockRejectedValueOnce(new Error('upload failed'))
-
-    await act(async () => {
-      const promise = result.current.requestCapture()
-
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,FAIL' })
-
-      await promise
-    })
-
-    expect(onUpdate).not.toHaveBeenCalled()
-  })
-})