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

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

@@ -1,12 +1,12 @@
 /**
- * Tests for useSnapshotCapture hook — parent-side capture orchestration.
+ * 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--light.webp' }),
+  uploadImage: vi.fn().mockResolvedValue({ filename: 'snapshot-test-widget.webp' }),
 }))
 
 import { uploadImage } from '../canvasApi.js'
@@ -35,15 +35,6 @@ describe('useSnapshotCapture', () => {
       if (type === 'message') listeners = listeners.filter(l => l !== fn)
       origRemove.call(window, type, fn, opts)
     })
-    // Mock Image so preload resolves immediately in tests
-    vi.stubGlobal('Image', class MockImage {
-      constructor() { this._onload = null }
-      set onload(fn) { this._onload = fn }
-      get onload() { return this._onload }
-      set onerror(fn) { this._onerror = fn }
-      set src(v) { this._src = v; Promise.resolve().then(() => this._onload?.()) }
-      get src() { return this._src }
-    })
   })
 
   afterEach(() => { vi.restoreAllMocks() })
@@ -56,7 +47,7 @@ describe('useSnapshotCapture', () => {
   it('returns iframeReady=false initially', () => {
     const iframeRef = createMockIframeRef()
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn(), canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
     )
     expect(result.current.iframeReady).toBe(false)
   })
@@ -65,7 +56,7 @@ describe('useSnapshotCapture', () => {
     const cw = createMockContentWindow()
     const iframeRef = createMockIframeRef(cw)
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn(), canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
     )
     act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
     expect(result.current.iframeReady).toBe(true)
@@ -75,7 +66,7 @@ describe('useSnapshotCapture', () => {
     const cw = createMockContentWindow()
     const iframeRef = createMockIframeRef(cw)
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: null, canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: null })
     )
     await act(async () => { await result.current.requestCapture() })
     expect(cw.postMessage).not.toHaveBeenCalled()
@@ -85,141 +76,89 @@ describe('useSnapshotCapture', () => {
     const cw = createMockContentWindow()
     const iframeRef = createMockIframeRef(cw)
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn(), canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
     )
     await act(async () => { await result.current.requestCapture() })
     expect(cw.postMessage).not.toHaveBeenCalled()
   })
 
-  it('sends capture + set-theme + capture + set-theme for dual-theme', async () => {
+  it('sends single capture and calls onUpdate with snapshot', async () => {
     const cw = createMockContentWindow()
-    // Need a real iframe element for style.visibility
-    const style = { visibility: "" }
-    
-    const iframeRef = { current: { contentWindow: cw, style } }
+    const iframeRef = createMockIframeRef(cw)
     const onUpdate = vi.fn()
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'test-widget', onUpdate, canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'test-widget', onUpdate })
     )
 
     act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
 
-    uploadImage
-      .mockResolvedValueOnce({ filename: 'snapshot-test-widget--light.webp' })
-      .mockResolvedValueOnce({ filename: 'snapshot-test-widget--dark.webp' })
+    uploadImage.mockResolvedValueOnce({ filename: 'snapshot-test-widget.webp' })
 
     await act(async () => {
       const promise = result.current.requestCapture()
 
-      // Respond to capture 1 (current=light)
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,LIGHT' })
-
-      // Respond to set-theme (switch to dark)
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:theme-applied', requestId: 2 })
-
-      // Respond to capture 2 (alternate=dark)
       await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 3, dataUrl: 'data:image/webp;base64,DARK' })
-
-      // Respond to set-theme back (switch to light)
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:theme-applied', requestId: 4 })
+      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,IMG' })
 
       await promise
     })
 
-    // 2 captures + 2 theme switches = 4 postMessages
-    expect(cw.postMessage).toHaveBeenCalledTimes(4)
-    expect(uploadImage).toHaveBeenCalledTimes(2)
-    // Intermediate onUpdate for current theme + final with both
-    expect(onUpdate).toHaveBeenCalledWith(
-      expect.objectContaining({
-        snapshotLight: expect.stringContaining('snapshot-test-widget--light.webp'),
-      })
-    )
+    // Single capture, single postMessage
+    expect(cw.postMessage).toHaveBeenCalledTimes(1)
+    expect(uploadImage).toHaveBeenCalledTimes(1)
     expect(onUpdate).toHaveBeenCalledWith(
       expect.objectContaining({
-        snapshotLight: expect.stringContaining('snapshot-test-widget--light.webp'),
-        snapshotDark: expect.stringContaining('snapshot-test-widget--dark.webp'),
+        snapshot: expect.stringContaining('snapshot-test-widget.webp'),
       })
     )
   })
 
-  it('discards stale capture results via generation token', async () => {
+  it('guards against concurrent captures', async () => {
     const cw = createMockContentWindow()
-    const style = { visibility: "" }
-    const iframeRef = { current: { contentWindow: cw, style } }
+    const iframeRef = createMockIframeRef(cw)
     const onUpdate = vi.fn()
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'gen-widget', onUpdate, canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate })
     )
 
     act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
+    uploadImage.mockResolvedValue({ filename: 'snapshot-w1.webp' })
 
-    uploadImage.mockResolvedValue({ filename: 'snapshot-gen-widget--light.webp' })
-
-    // Start first capture — will be waiting for response
-    let capture1Done = false
-    let capture2Done = false
     await act(async () => {
-      const promise1 = result.current.requestCapture().then(() => { capture1Done = true })
+      const p1 = result.current.requestCapture()
+      // Second call while first is in-flight should no-op
+      const p2 = result.current.requestCapture()
 
-      // Respond to first capture
       await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,FIRST' })
+      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,IMG' })
 
-      // Start second capture before first completes its alternate-theme work
-      // This won't start because capturingRef is still true, so it will return {}
-      const promise2 = result.current.requestCapture().then(() => { capture2Done = true })
-
-      // Complete first capture's theme switch and alternate capture
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:theme-applied', requestId: 2 })
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 3, dataUrl: 'data:image/webp;base64,DARK' })
-      await new Promise(r => setTimeout(r, 10))
-      dispatchMessage(cw, { type: 'storyboard:embed:theme-applied', requestId: 4 })
-
-      await promise1
-      await promise2
+      await p1
+      await p2
     })
 
-    // The second capture should have no-opped (capturingRef guard)
-    expect(capture1Done).toBe(true)
-    expect(capture2Done).toBe(true)
+    expect(cw.postMessage).toHaveBeenCalledTimes(1)
   })
 
-  it('restores iframe visibility on error', async () => {
+  it('handles capture failure gracefully', async () => {
     const cw = createMockContentWindow()
-    const style = { visibility: "visible" }
-    const iframeRef = { current: { contentWindow: cw, style } }
+    const iframeRef = createMockIframeRef(cw)
     const onUpdate = vi.fn()
     const { result } = renderHook(() =>
-      useSnapshotCapture({ iframeRef, widgetId: 'err-widget', onUpdate, canvasTheme: 'light' })
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate })
     )
 
     act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
-
-    // Make uploadImage throw to trigger error path
     uploadImage.mockRejectedValueOnce(new Error('upload failed'))
 
     await act(async () => {
       const promise = result.current.requestCapture()
 
-      // Respond to capture
       await new Promise(r => setTimeout(r, 10))
       dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,FAIL' })
 
       await promise
     })
 
-    // Visibility should be restored after error
-    expect(style.visibility).toBe('')
-    // onUpdate should not be called with failed data
-    expect(onUpdate).not.toHaveBeenCalledWith(
-      expect.objectContaining({ snapshotLight: expect.any(String) })
-    )
+    expect(onUpdate).not.toHaveBeenCalled()
   })
 })

package/src/canvas/widgets/widgetConfig.test.js

@@ -12,7 +12,7 @@ describe('isResizable', () => {
     expect(isResizable('component')).toBe(true)
   })
 
-  it('returns false for widget types with resize disabled', () => {
+  it('returns false for link-preview (resize disabled)', () => {
     expect(isResizable('link-preview')).toBe(false)
   })
 

package/src/story/StoryPage.jsx

@@ -1,11 +1,9 @@
 /**
  * StoryPage — renders a .story.jsx module at its own route.
  *
- * When visited at e.g. /canvas/button-patterns, renders all named exports
- * from button-patterns.story.jsx in a gallery layout.
- *
- * When ?export=ExportName is present, renders only that single export
- * (used by iframe embeds from canvas StoryWidget).
+ * Renders only the bare component(s) with no layout chrome.
+ * When ?export=ExportName is present, renders that single export.
+ * Without ?export, renders all named exports stacked.
  */
 import { useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -13,7 +11,7 @@ import { getStoryData } from '@dfosco/storyboard-core'
 import { ThemeProvider, BaseStyles } from '@primer/react'
 import styles from './StoryPage.module.css'
 
-function StoryErrorBoundaryFallback({ name, error }) {
+function StoryErrorFallback({ name, error }) {
   return (
     <div className={styles.error}>
       <strong>{name}</strong>
@@ -60,8 +58,6 @@ export default function StoryPage({ name }) {
   }, [name, story])
 
   // Signal snapshot-ready after story renders in embed mode.
-  // Stories have no data loading so they render fast — fire
-  // the explicit ready signal instead of waiting for the 1.5s fallback.
   useEffect(() => {
     if (!isEmbed || !exports || window.parent === window) return
     document.fonts.ready.then(() => {
@@ -73,80 +69,49 @@ export default function StoryPage({ name }) {
 
   if (error) {
     return (
-      <div className={styles.page}>
-        <StoryErrorBoundaryFallback name={name} error={error} />
-      </div>
+      <StoryErrorFallback name={name} error={error} />
     )
   }
 
   if (!exports) {
+    if (isEmbed) return null
     return (
-      <div className={styles.page}>
-        <div className={styles.loading}>Loading story…</div>
-      </div>
+      <div className={styles.loading}>Loading story…</div>
     )
   }
 
-  // Single export mode (for iframe embedding)
+  // Single export mode
   if (exportFilter) {
     const Component = exports[exportFilter]
     if (!Component) {
       return (
-        <div className={styles.page}>
-          <StoryErrorBoundaryFallback
-            name={`${name}/${exportFilter}`}
-            error={`Export "${exportFilter}" not found in story "${name}"`}
-          />
-        </div>
-      )
-    }
-
-    // Minimal wrapper for embed mode
-    if (isEmbed) {
-      return (
-        <ThemeProvider colorMode="day">
-          <BaseStyles>
-            <Component />
-          </BaseStyles>
-        </ThemeProvider>
+        <StoryErrorFallback
+          name={`${name}/${exportFilter}`}
+          error={`Export "${exportFilter}" not found in story "${name}"`}
+        />
       )
     }
 
     return (
-      <div className={styles.page}>
-        <header className={styles.header}>
-          <h1 className={styles.title}>{name}</h1>
-          <span className={styles.exportBadge}>{exportFilter}</span>
-        </header>
-        <section className={styles.storySection}>
+      <ThemeProvider colorMode="day">
+        <BaseStyles>
           <Component />
-        </section>
-      </div>
+        </BaseStyles>
+      </ThemeProvider>
     )
   }
 
-  // Gallery mode — render all exports
+  // All exports — render each component bare
   const exportNames = Object.keys(exports)
 
   return (
-    <div className={styles.page}>
-      {!isEmbed && (
-        <header className={styles.header}>
-          <h1 className={styles.title}>{name}</h1>
-          <span className={styles.count}>{exportNames.length} {exportNames.length === 1 ? 'export' : 'exports'}</span>
-        </header>
-      )}
-      {exportNames.map((exportName) => {
-        const Component = exports[exportName]
-        return (
-          <section key={exportName} className={styles.storySection}>
-            {!isEmbed && <h2 className={styles.exportName}>{exportName}</h2>}
-            <div className={styles.storyContent}>
-              <Component />
-            </div>
-          </section>
-        )
-      })}
-    </div>
+    <ThemeProvider colorMode="day">
+      <BaseStyles>
+        {exportNames.map((exportName) => {
+          const Component = exports[exportName]
+          return <Component key={exportName} />
+        })}
+      </BaseStyles>
+    </ThemeProvider>
   )
 }

package/src/story/StoryPage.module.css

@@ -1,58 +1,3 @@
-.page {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-.header {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--borderColor-muted, #d0d7de);
-}
-
-.title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 0;
-  color: var(--fgColor-default, #1f2328);
-}
-
-.exportBadge {
-  font-size: 0.875rem;
-  font-weight: 500;
-  padding: 2px 8px;
-  border-radius: 6px;
-  background: var(--bgColor-accent-muted, #ddf4ff);
-  color: var(--fgColor-accent, #0969da);
-}
-
-.count {
-  font-size: 0.875rem;
-  color: var(--fgColor-muted, #656d76);
-}
-
-.storySection {
-  margin-bottom: 2rem;
-}
-
-.exportName {
-  font-size: 1rem;
-  font-weight: 500;
-  margin: 0 0 0.75rem;
-  color: var(--fgColor-default, #1f2328);
-}
-
-.storyContent {
-  border: 1px solid var(--borderColor-muted, #d0d7de);
-  border-radius: 8px;
-  padding: 1.5rem;
-  background: var(--bgColor-default, #ffffff);
-}
-
 .loading {
   display: flex;
   align-items: center;