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

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

@@ -1,15 +1,30 @@
 /**
  * Tests for embed interaction UX (click-to-interact overlay).
  */
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, fireEvent, screen } from '@testing-library/react'
 import PrototypeEmbed from './PrototypeEmbed.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
 import ComponentWidget from './ComponentWidget.jsx'
+import StoryWidget from './StoryWidget.jsx'
 
 // Mock buildPrototypeIndex for PrototypeEmbed
 vi.mock('@dfosco/storyboard-core', () => ({
-  buildPrototypeIndex: () => ({ folders: [], prototypes: [], globalFlows: [], sorted: { title: { prototypes: [], folders: [] } } }),
+  buildPrototypeIndex: () => ({
+    folders: [],
+    prototypes: [
+      {
+        name: 'Design Overview',
+        dirName: 'examples',
+        isExternal: false,
+        hideFlows: true,
+        flows: [{ route: '/test', name: 'default', meta: { title: 'Design Overview' } }],
+      },
+    ],
+    globalFlows: [],
+    sorted: { title: { prototypes: [], folders: [] } },
+  }),
+  getStoryData: (storyId) => ({ _route: `/components/${storyId}` }),
 }))
 
 // Simple mock wrapper for WidgetWrapper
@@ -17,6 +32,12 @@ vi.mock('./WidgetWrapper.jsx', () => ({
   default: ({ children }) => <div data-testid="widget-wrapper">{children}</div>,
 }))
 
+vi.mock('@dfosco/storyboard-core/inspector/highlighter', () => ({
+  createInspectorHighlighter: async () => ({
+    codeToHtml: () => '<pre><code></code></pre>',
+  }),
+}))
+
 // Mock ResizeHandle
 vi.mock('./ResizeHandle.jsx', () => ({
   default: () => <div data-testid="resize-handle" />,
@@ -44,17 +65,26 @@ describe('Embed interaction overlay', () => {
     })
 
     it('enters interactive mode on single click (not double-click)', async () => {
-      render(<PrototypeEmbed {...defaultProps} />)
+      const { container } = render(<PrototypeEmbed {...defaultProps} />)
       
       // Overlay should exist before interaction
       const overlay = screen.getByRole('button', { name: /click to interact/i })
       expect(overlay).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(screen.getByText('Design Overview')).toBeInTheDocument()
+      expect(screen.getByText('Design Overview prototype')).toBeInTheDocument()
       
       // Single click should remove the overlay (enter interactive mode)
       fireEvent.click(overlay)
       
       // Overlay should no longer exist
       expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
+      expect(screen.queryByText('Design Overview prototype')).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to interact/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
     })
 
     it('does not enter interactive mode on shift+click (preserves multi-select)', () => {
@@ -112,12 +142,42 @@ describe('Embed interaction overlay', () => {
     })
 
     it('enters interactive mode on single click', () => {
-      render(<FigmaEmbed {...defaultProps} />)
+      const { container } = render(<FigmaEmbed {...defaultProps} />)
       
       const overlay = screen.getByRole('button', { name: /click to interact/i })
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
       fireEvent.click(overlay)
       
       expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to interact/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('StoryWidget', () => {
+    const defaultProps = {
+      props: { storyId: 'button-patterns', exportName: 'Primary', width: 400, height: 300 },
+      onUpdate: vi.fn(),
+      resizable: false,
+    }
+
+    it('mounts iframe only after user activation', () => {
+      const { container } = render(<StoryWidget {...defaultProps} />)
+
+      const overlay = screen.getByRole('button', { name: /click to interact with story component/i })
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+
+      fireEvent.click(overlay)
+
+      expect(screen.queryByRole('button', { name: /click to interact with story component/i })).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to interact with story component/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
     })
   })
 
@@ -151,5 +211,27 @@ describe('Embed interaction overlay', () => {
       
       expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
     })
+
+    it('mounts dev iframe only after user activation', () => {
+      const { container } = render(
+        <ComponentWidget
+          {...defaultProps}
+          isLocalDev
+          jsxModule="/src/canvas/mock.canvas.jsx"
+          exportName="MockComponent"
+        />
+      )
+
+      const overlay = screen.getByRole('button', { name: /click to interact with component/i })
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+
+      fireEvent.click(overlay)
+
+      expect(container.querySelector('iframe')).toBeInTheDocument()
+
+      fireEvent.pointerDown(document.body)
+      expect(screen.getByRole('button', { name: /click to interact with component/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
   })
 })

package/src/canvas/widgets/embedTheme.js

@@ -1,3 +1,23 @@
+/**
+ * Resolve the effective canvas theme from localStorage + sync settings.
+ * Respects the canvas-specific theme sync toggle.
+ */
+export function resolveCanvasTheme() {
+  if (typeof localStorage === 'undefined') return 'light'
+  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
+  try {
+    const rawSync = localStorage.getItem('sb-theme-sync')
+    if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
+  } catch { /* ignore */ }
+  if (!sync.canvas) return 'light'
+  const attrTheme = document.documentElement.getAttribute('data-sb-canvas-theme')
+  if (attrTheme) return attrTheme
+  const stored = localStorage.getItem('sb-color-scheme') || 'system'
+  if (stored !== 'system') return stored
+  return typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
 export function getEmbedChromeVars(theme) {
   const value = String(theme || 'light')
   if (value === 'dark_dimmed') {

package/src/canvas/widgets/iframeDevLogs.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+
+let loadedIframeCount = 0
+
+function isDevRuntime() {
+  return typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+}
+
+function toText(value) {
+  return value ? String(value) : '(no src)'
+}
+
+function logIframeEvent(event, count, meta) {
+  console.log(`[storyboard][iframe] ${event} | count=${count} | ${meta.widget}`, {
+    event,
+    count,
+    widget: meta.widget,
+    src: toText(meta.src),
+  })
+}
+
+/**
+ * Dev-only iframe load/unload logging with a live count of mounted iframes.
+ */
+export function useIframeDevLogs({ widget, loaded, src }) {
+  const metaRef = useRef({ widget, src })
+
+  useEffect(() => {
+    metaRef.current = { widget, src }
+  }, [widget, src])
+
+  useEffect(() => {
+    if (!loaded) return
+
+    loadedIframeCount += 1
+    if (isDevRuntime()) {
+      const meta = metaRef.current
+      logIframeEvent('loaded', loadedIframeCount, meta)
+    }
+
+    return () => {
+      loadedIframeCount = Math.max(0, loadedIframeCount - 1)
+      if (isDevRuntime()) {
+        const meta = metaRef.current
+        logIframeEvent('unloaded', loadedIframeCount, meta)
+      }
+    }
+  }, [loaded])
+}

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

@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+
+function Probe({ widget = 'Probe', loaded = false, src = '/test' }) {
+  useIframeDevLogs({ widget, loaded, src })
+  return null
+}
+
+describe('useIframeDevLogs', () => {
+  let logSpy
+
+  beforeEach(() => {
+    window.__SB_LOCAL_DEV__ = true
+    logSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    logSpy.mockRestore()
+    delete window.__SB_LOCAL_DEV__
+  })
+
+  it('logs iframe load and unload with tally', () => {
+    const { rerender, unmount } = render(<Probe loaded={false} src="/alpha" />)
+    rerender(<Probe loaded src="/alpha" />)
+    rerender(<Probe loaded={false} src="/alpha" />)
+
+    expect(logSpy).toHaveBeenNthCalledWith(
+      1,
+      '[storyboard][iframe] loaded | count=1 | Probe',
+      { event: 'loaded', count: 1, widget: 'Probe', src: '/alpha' },
+    )
+    expect(logSpy).toHaveBeenNthCalledWith(
+      2,
+      '[storyboard][iframe] unloaded | count=0 | Probe',
+      { event: 'unloaded', count: 0, widget: 'Probe', src: '/alpha' },
+    )
+
+    unmount()
+  })
+
+  it('tracks tally across multiple loaded iframes', () => {
+    const first = render(<Probe widget="PrototypeEmbed" loaded src="/proto" />)
+    const second = render(<Probe widget="FigmaEmbed" loaded src="/figma" />)
+
+    expect(logSpy).toHaveBeenNthCalledWith(
+      1,
+      '[storyboard][iframe] loaded | count=1 | PrototypeEmbed',
+      { event: 'loaded', count: 1, widget: 'PrototypeEmbed', src: '/proto' },
+    )
+    expect(logSpy).toHaveBeenNthCalledWith(
+      2,
+      '[storyboard][iframe] loaded | count=2 | FigmaEmbed',
+      { event: 'loaded', count: 2, widget: 'FigmaEmbed', src: '/figma' },
+    )
+
+    first.unmount()
+    expect(logSpy).toHaveBeenNthCalledWith(
+      3,
+      '[storyboard][iframe] unloaded | count=1 | PrototypeEmbed',
+      { event: 'unloaded', count: 1, widget: 'PrototypeEmbed', src: '/proto' },
+    )
+
+    second.unmount()
+    expect(logSpy).toHaveBeenNthCalledWith(
+      4,
+      '[storyboard][iframe] unloaded | count=0 | FigmaEmbed',
+      { event: 'unloaded', count: 0, widget: 'FigmaEmbed', src: '/figma' },
+    )
+  })
+
+  it('does not log outside local dev runtime', () => {
+    window.__SB_LOCAL_DEV__ = false
+    const { rerender, unmount } = render(<Probe loaded={false} src="/off" />)
+    rerender(<Probe loaded src="/off" />)
+    rerender(<Probe loaded={false} src="/off" />)
+
+    expect(logSpy).not.toHaveBeenCalled()
+    unmount()
+  })
+})

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

@@ -0,0 +1,289 @@
+/**
+ * Tests for iframe snapshot display — layered dual-theme rendering.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import PrototypeEmbed from './PrototypeEmbed.jsx'
+import StoryWidget from './StoryWidget.jsx'
+
+vi.mock('@dfosco/storyboard-core', () => ({
+  buildPrototypeIndex: () => ({
+    folders: [],
+    prototypes: [
+      {
+        name: 'Design Overview',
+        dirName: 'examples',
+        isExternal: false,
+        hideFlows: true,
+        flows: [{ route: '/test', name: 'default', meta: { title: 'Design Overview' } }],
+      },
+    ],
+    globalFlows: [],
+    sorted: { title: { prototypes: [], folders: [] } },
+  }),
+  getStoryData: (storyId) => ({ _route: `/components/${storyId}` }),
+}))
+
+vi.mock('./WidgetWrapper.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-wrapper">{children}</div>,
+}))
+
+vi.mock('@dfosco/storyboard-core/inspector/highlighter', () => ({
+  createInspectorHighlighter: async () => ({
+    codeToHtml: () => '<pre><code></code></pre>',
+  }),
+}))
+
+vi.mock('./ResizeHandle.jsx', () => ({
+  default: () => <div data-testid="resize-handle" />,
+}))
+
+describe('Snapshot display', () => {
+  describe('PrototypeEmbed', () => {
+    it('shows snapshot image when valid snapshot prop exists', () => {
+      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=123',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = container.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()
+    })
+
+    it('renders both themed snapshots with correct visibility', () => {
+      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',
+            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')
+    })
+
+    it('shows placeholder when no snapshot exists', () => {
+      const { container } = render(
+        <PrototypeEmbed
+          id="proto-xyz"
+          props={{ src: '/test', width: 400, height: 300, zoom: 100 }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      expect(container.querySelector('img')).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(screen.getByText('Design Overview prototype')).toBeInTheDocument()
+    })
+
+    it('falls back to placeholder when snapshot image fails to load', () => {
+      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=123',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = container.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()
+    })
+
+    it('ignores snapshot that does not match widget ID', () => {
+      const { container } = render(
+        <PrototypeEmbed
+          id="proto-abc123"
+          props={{
+            src: '/test',
+            width: 400,
+            height: 300,
+            zoom: 100,
+            snapshotLight: '/_storyboard/canvas/images/snapshot-other-widget--light.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()
+    })
+
+    it('does not show snapshot for external URLs', () => {
+      const { container } = render(
+        <PrototypeEmbed
+          id="proto-ext"
+          props={{
+            src: 'https://example.com',
+            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
+          }}
+          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')
+    })
+  })
+
+  describe('StoryWidget', () => {
+    it('shows snapshot image when valid snapshot prop exists', () => {
+      const { container } = render(
+        <StoryWidget
+          id="story-abc123"
+          props={{
+            storyId: 'button-patterns',
+            exportName: 'Primary',
+            width: 400,
+            height: 300,
+            snapshotLight: '/_storyboard/canvas/images/snapshot-story-abc123--light.webp?v=456',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = container.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-story-abc123--light.webp')
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('renders both themed snapshots with correct visibility', () => {
+      const { container } = render(
+        <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()}
+          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')
+    })
+
+    it('shows placeholder when no snapshot exists', () => {
+      const { container } = render(
+        <StoryWidget
+          id="story-xyz"
+          props={{
+            storyId: 'button-patterns',
+            exportName: 'Primary',
+            width: 400,
+            height: 300,
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      expect(container.querySelector('img')).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('falls back to placeholder when snapshot image fails to load', () => {
+      const { container } = render(
+        <StoryWidget
+          id="story-abc123"
+          props={{
+            storyId: 'button-patterns',
+            exportName: 'Primary',
+            width: 400,
+            height: 300,
+            snapshotLight: '/_storyboard/canvas/images/snapshot-story-abc123--light.webp?v=456',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = container.querySelector('img')
+      expect(img).toBeInTheDocument()
+
+      fireEvent.error(img)
+
+      // After error, img should be gone and placeholder shown
+      expect(container.querySelector('img')).not.toBeInTheDocument()
+    })
+  })
+})