@dfosco/storyboard-react 4.0.0-beta.26 → 4.0.0-beta.28

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

@@ -1,8 +1,8 @@
 /**
- * Tests for iframe snapshot display — layered dual-theme rendering.
+ * Tests for iframe snapshot display — single snapshot prop.
  */
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import PrototypeEmbed from './PrototypeEmbed.jsx'
 import StoryWidget from './StoryWidget.jsx'
 
@@ -32,16 +32,32 @@ vi.mock('@dfosco/storyboard-core/inspector/highlighter', () => ({
   createInspectorHighlighter: async () => ({
     codeToHtml: () => '<pre><code></code></pre>',
   }),
-}))
+}), { virtual: true })
 
 vi.mock('./ResizeHandle.jsx', () => ({
   default: () => <div data-testid="resize-handle" />,
 }))
 
+/**
+ * Render inside a wrapper with data-sb-canvas-theme, matching the real
+ * CanvasPage DOM structure that subscribeCanvasTheme reads from.
+ */
+function renderInCanvas(ui, theme = 'light') {
+  const wrapper = document.createElement('div')
+  wrapper.setAttribute('data-sb-canvas-theme', theme)
+  document.body.appendChild(wrapper)
+  const result = render(ui, { container: wrapper })
+  return { ...result, wrapper }
+}
+
+afterEach(() => {
+  document.querySelectorAll('[data-sb-canvas-theme]').forEach(el => el.remove())
+})
+
 describe('Snapshot display', () => {
   describe('PrototypeEmbed', () => {
     it('shows snapshot image when valid snapshot prop exists', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
           props={{
@@ -49,22 +65,21 @@ describe('Snapshot display', () => {
             width: 400,
             height: 300,
             zoom: 100,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-proto-abc123--light.webp?v=123',
+            snapshot: '/_storyboard/canvas/images/snapshot-proto-abc123.webp?v=123',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const img = container.querySelector('img')
+      const img = wrapper.querySelector('img')
       expect(img).toBeInTheDocument()
-      expect(img.src).toContain('snapshot-proto-abc123--light.webp')
-      expect(img.alt).toContain('snapshot')
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(img.src).toContain('snapshot-proto-abc123.webp')
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
     })
 
-    it('renders both themed snapshots with correct visibility', () => {
-      const { container } = render(
+    it('falls back to snapshotLight for backward compat', () => {
+      const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
           props={{
@@ -73,24 +88,19 @@ describe('Snapshot display', () => {
             height: 300,
             zoom: 100,
             snapshotLight: '/_storyboard/canvas/images/snapshot-proto-abc123--light.webp?v=1',
-            snapshotDark: '/_storyboard/canvas/images/snapshot-proto-abc123--dark.webp?v=1',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const imgs = container.querySelectorAll('img')
-      expect(imgs).toHaveLength(2)
-      // Default theme is light — light visible, dark hidden
-      expect(imgs[0].src).toContain('--light.webp')
-      expect(imgs[0].style.visibility).not.toBe('hidden')
-      expect(imgs[1].src).toContain('--dark.webp')
-      expect(imgs[1].style.visibility).toBe('hidden')
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-proto-abc123--light.webp')
     })
 
     it('shows placeholder when no snapshot exists', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-xyz"
           props={{ src: '/test', width: 400, height: 300, zoom: 100 }}
@@ -99,13 +109,12 @@ describe('Snapshot display', () => {
         />
       )
 
-      expect(container.querySelector('img')).not.toBeInTheDocument()
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
-      expect(screen.getByText('Design Overview prototype')).toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
     })
 
     it('falls back to placeholder when snapshot image fails to load', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
           props={{
@@ -113,25 +122,21 @@ describe('Snapshot display', () => {
             width: 400,
             height: 300,
             zoom: 100,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-proto-abc123--light.webp?v=123',
+            snapshot: '/_storyboard/canvas/images/snapshot-proto-abc123.webp?v=123',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const img = container.querySelector('img')
+      const img = wrapper.querySelector('img')
       expect(img).toBeInTheDocument()
-
       fireEvent.error(img)
-
-      // After error, img should be gone and placeholder shown
-      expect(container.querySelector('img')).not.toBeInTheDocument()
-      expect(screen.getByText('Design Overview prototype')).toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
     })
 
     it('ignores snapshot that does not match widget ID', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
           props={{
@@ -139,20 +144,18 @@ describe('Snapshot display', () => {
             width: 400,
             height: 300,
             zoom: 100,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-other-widget--light.webp?v=123',
+            snapshot: '/_storyboard/canvas/images/snapshot-other-widget.webp?v=123',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      // Should show placeholder, not the mismatched snapshot
-      expect(container.querySelector('img')).not.toBeInTheDocument()
-      expect(screen.getByText('Design Overview prototype')).toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
     })
 
     it('does not show snapshot for external URLs', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-ext"
           props={{
@@ -160,45 +163,20 @@ describe('Snapshot display', () => {
             width: 400,
             height: 300,
             zoom: 100,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-proto-ext--light.webp?v=123',
-          }}
-          onUpdate={vi.fn()}
-          resizable={false}
-        />
-      )
-
-      // External URLs should never show snapshots
-      expect(container.querySelector('img')).not.toBeInTheDocument()
-    })
-
-    it('falls back to light snapshot when dark snapshot is missing', () => {
-      const { container } = render(
-        <PrototypeEmbed
-          id="proto-abc123"
-          props={{
-            src: '/test',
-            width: 400,
-            height: 300,
-            zoom: 100,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-proto-abc123--light.webp?v=1',
-            // no snapshotDark — light snapshot should show regardless of theme
+            snapshot: '/_storyboard/canvas/images/snapshot-proto-ext.webp?v=123',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const imgs = container.querySelectorAll('img')
-      expect(imgs).toHaveLength(1)
-      expect(imgs[0].src).toContain('--light.webp')
-      // Should be visible (no visibility: hidden) since it's the only snapshot
-      expect(imgs[0].style.visibility).not.toBe('hidden')
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
     })
   })
 
   describe('StoryWidget', () => {
     it('shows snapshot image when valid snapshot prop exists', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <StoryWidget
           id="story-abc123"
           props={{
@@ -206,26 +184,25 @@ describe('Snapshot display', () => {
             exportName: 'Primary',
             width: 400,
             height: 300,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-story-abc123--light.webp?v=456',
+            snapshot: '/_storyboard/canvas/images/snapshot-story-abc123.webp?v=456',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const img = container.querySelector('img')
+      const img = wrapper.querySelector('img')
       expect(img).toBeInTheDocument()
-      expect(img.src).toContain('snapshot-story-abc123--light.webp')
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(img.src).toContain('snapshot-story-abc123.webp')
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
     })
 
-    it('renders both themed snapshots with correct visibility', () => {
-      const { container } = render(
+    it('falls back to snapshotDark for backward compat', () => {
+      const { wrapper } = renderInCanvas(
         <StoryWidget
           id="story-abc123"
           props={{
             storyId: 'button-patterns',
-            snapshotLight: '/_storyboard/canvas/images/snapshot-story-abc123--light.webp?v=1',
             snapshotDark: '/_storyboard/canvas/images/snapshot-story-abc123--dark.webp?v=1',
           }}
           onUpdate={vi.fn()}
@@ -233,17 +210,13 @@ describe('Snapshot display', () => {
         />
       )
 
-      const imgs = container.querySelectorAll('img')
-      expect(imgs).toHaveLength(2)
-      // Default theme is light — light visible, dark hidden
-      expect(imgs[0].src).toContain('--light.webp')
-      expect(imgs[0].style.visibility).not.toBe('hidden')
-      expect(imgs[1].src).toContain('--dark.webp')
-      expect(imgs[1].style.visibility).toBe('hidden')
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-story-abc123--dark.webp')
     })
 
     it('shows placeholder when no snapshot exists', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <StoryWidget
           id="story-xyz"
           props={{
@@ -257,12 +230,12 @@ describe('Snapshot display', () => {
         />
       )
 
-      expect(container.querySelector('img')).not.toBeInTheDocument()
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
     })
 
     it('falls back to placeholder when snapshot image fails to load', () => {
-      const { container } = render(
+      const { wrapper } = renderInCanvas(
         <StoryWidget
           id="story-abc123"
           props={{
@@ -270,20 +243,17 @@ describe('Snapshot display', () => {
             exportName: 'Primary',
             width: 400,
             height: 300,
-            snapshotLight: '/_storyboard/canvas/images/snapshot-story-abc123--light.webp?v=456',
+            snapshot: '/_storyboard/canvas/images/snapshot-story-abc123.webp?v=456',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const img = container.querySelector('img')
+      const img = wrapper.querySelector('img')
       expect(img).toBeInTheDocument()
-
       fireEvent.error(img)
-
-      // After error, img should be gone and placeholder shown
-      expect(container.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
     })
   })
 })

package/src/canvas/widgets/useSnapshotCapture.js

@@ -2,24 +2,16 @@
  * useSnapshotCapture — parent-side capture orchestration hook.
  *
  * Listens for snapshot-ready signals from an embedded iframe and
- * provides a requestCapture() function that triggers a capture.
- *
- * Performs TRUE dual-theme capture: captures current theme, then
- * tells the iframe to switch theme (hidden via visibility:hidden),
- * captures the alternate theme, and switches back. The user never
- * sees the theme flash because the iframe is hidden during the switch.
- *
- * Optimized pipeline: the first theme's upload runs in parallel with
- * the alternate theme's capture, and capture generation tokens prevent
- * stale results from overwriting newer snapshots.
+ * 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
-const THEME_SWITCH_TIMEOUT = 2000
 
 /**
  * Run a single capture request against the iframe.
@@ -57,64 +49,20 @@ function captureOnce(iframeContentWindow, requestId, listeners) {
   })
 }
 
-/**
- * Tell the iframe to switch its Primer theme and wait for confirmation.
- */
-function switchTheme(iframeContentWindow, theme, requestId, listeners) {
-  return new Promise((resolve) => {
-    const timer = setTimeout(() => {
-      cleanup()
-      resolve(false)
-    }, THEME_SWITCH_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()
-      resolve(true)
-    }
-
-    listeners.push(handler)
-    iframeContentWindow.postMessage({
-      type: 'storyboard:embed:set-theme',
-      theme,
-      requestId,
-    }, '*')
-  })
-}
-
-/**
- * Upload a captured dataUrl and return the resolved image URL.
- */
-async function uploadAndResolve(dataUrl, widgetId, themeLabel, base) {
-  const filename = `snapshot-${widgetId}--${themeLabel}.webp`
-  const result = await uploadImage(dataUrl, `snapshot-${widgetId}`, filename)
-  if (result?.filename) {
-    const cacheBust = `?v=${Date.now()}`
-    return `${base}/_storyboard/canvas/images/${result.filename}${cacheBust}`
-  }
-  return null
-}
-
 export function useSnapshotCapture({
   iframeRef,
   widgetId,
   onUpdate,
-  canvasTheme,
+  showIframe,
 }) {
   const [iframeReady, setIframeReady] = useState(false)
   const iframeReadyRef = useRef(false)
   const capturingRef = useRef(false)
   const requestIdCounter = useRef(0)
-  // Generation token — incremented on each capture request to detect stale results
   const captureGeneration = useRef(0)
-  // Handlers for both snapshot and theme-applied responses
   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(() => {
@@ -122,6 +70,15 @@ export function useSnapshotCapture({
     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
@@ -130,13 +87,19 @@ export function useSnapshotCapture({
       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') {
         setIframeReady(true)
         iframeReadyRef.current = true
       }
 
-      if (e.data?.type === 'storyboard:embed:snapshot' ||
-          e.data?.type === 'storyboard:embed:theme-applied') {
+      if (e.data?.type === 'storyboard:embed:snapshot') {
         for (const fn of responseHandlers.current) {
           fn(e.data)
         }
@@ -148,15 +111,8 @@ export function useSnapshotCapture({
   }, [iframeRef, onUpdate])
 
   /**
-   * Dual-theme capture with pipelined uploads.
-   *
-   * Pipeline: capture theme-1 → start upload-1 in parallel with
-   * (hide iframe → switch theme → capture theme-2) → upload-2.
-   *
-   * Generation tokens prevent stale captures from overwriting newer ones.
-   *
-   * @param {Object} opts
-   * @param {boolean} opts.force - Skip the iframeReady guard
+   * 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 } = {}) => {
     if (!onUpdate) return {}
@@ -167,92 +123,35 @@ export function useSnapshotCapture({
     capturingRef.current = true
     const gen = ++captureGeneration.current
     const cw = iframeRef.current.contentWindow
-    const iframe = iframeRef.current
     const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-    const updates = {}
-    const currentTheme = canvasTheme || 'light'
-    const isCurrentDark = currentTheme.startsWith('dark')
-    const alternateTheme = isCurrentDark ? 'light' : 'dark'
 
     try {
-      // 1. Capture current theme (iframe is visible, user sees current state)
-      const currentKey = isCurrentDark ? 'snapshotDark' : 'snapshotLight'
-      const currentLabel = isCurrentDark ? 'dark' : 'light'
-      const currentReqId = ++requestIdCounter.current
-      const currentDataUrl = await captureOnce(cw, currentReqId, responseHandlers.current)
+      const reqId = ++requestIdCounter.current
+      const dataUrl = await captureOnce(cw, reqId, responseHandlers.current)
 
-      // Bail if a newer capture started while we were waiting
       if (gen !== captureGeneration.current) return {}
+      if (!dataUrl) return {}
 
-      // 2. Start upload of theme-1 in parallel with alternate-theme capture
-      const uploadPromise1 = currentDataUrl
-        ? uploadAndResolve(currentDataUrl, widgetId, currentLabel, base)
-        : Promise.resolve(null)
-
-      // Publish theme-1 immediately so snapshot img is ready before iframe hides
-      if (currentDataUrl) {
-        uploadPromise1.then(url => {
-          if (url && gen === captureGeneration.current) {
-            updates[currentKey] = url
-            onUpdate?.({ [currentKey]: url })
-          }
-        }).catch(() => {})
-      }
-
-      // 3. Hide iframe, switch theme, capture alternate — overlaps with upload-1
-      const savedVisibility = iframe.style.visibility
-      iframe.style.visibility = 'hidden'
-
-      const switchReqId = ++requestIdCounter.current
-      const switched = await switchTheme(cw, alternateTheme, switchReqId, responseHandlers.current)
+      const filename = `snapshot-${widgetId}.webp`
+      const result = await uploadImage(dataUrl, `snapshot-${widgetId}`, filename)
 
-      if (gen !== captureGeneration.current) {
-        iframe.style.visibility = savedVisibility || ''
-        return {}
-      }
-
-      if (switched) {
-        const altKey = isCurrentDark ? 'snapshotLight' : 'snapshotDark'
-        const altLabel = isCurrentDark ? 'light' : 'dark'
-        const altReqId = ++requestIdCounter.current
-        const altDataUrl = await captureOnce(cw, altReqId, responseHandlers.current)
-
-        if (gen !== captureGeneration.current) {
-          iframe.style.visibility = savedVisibility || ''
-          return {}
-        }
-
-        if (altDataUrl) {
-          const altUrl = await uploadAndResolve(altDataUrl, widgetId, altLabel, base)
-          if (altUrl && gen === captureGeneration.current) {
-            updates[altKey] = altUrl
-          }
-        }
-
-        // 4. Switch back to original theme
-        const switchBackReqId = ++requestIdCounter.current
-        await switchTheme(cw, currentTheme, switchBackReqId, responseHandlers.current)
-      }
-
-      // Ensure upload-1 is complete before final update
-      await uploadPromise1
-
-      // 5. Restore iframe visibility
-      iframe.style.visibility = savedVisibility || ''
+      if (gen !== captureGeneration.current) return {}
 
-      if (gen === captureGeneration.current && Object.keys(updates).length > 0) {
+      if (result?.filename) {
+        const cacheBust = `?v=${Date.now()}`
+        const url = `${base}/_storyboard/canvas/images/${result.filename}${cacheBust}`
+        const updates = { snapshot: url }
         onUpdate?.(updates)
+        return updates
       }
-      return updates
+      return {}
     } catch (err) {
-      // Always restore visibility on error
-      if (iframe) iframe.style.visibility = ''
       console.warn('[snapshot] Capture failed:', err)
       return {}
     } finally {
       capturingRef.current = false
     }
-  }, [onUpdate, iframeRef, widgetId, canvasTheme])
+  }, [onUpdate, iframeRef, widgetId])
 
   return { iframeReady, requestCapture }
 }