@dfosco/storyboard-react 4.2.4 → 4.2.6

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

@@ -5,7 +5,6 @@ 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
@@ -24,7 +23,7 @@ vi.mock('@dfosco/storyboard-core', () => ({
     globalFlows: [],
     sorted: { title: { prototypes: [], folders: [] } },
   }),
-  getStoryData: (storyId) => ({ _route: `/components/${storyId}` }),
+  getStoryData: (storyId) => ({ _storyModule: `/src/canvas/${storyId}.story.jsx`, _route: `/components/${storyId}` }),
 }))
 
 // Simple mock wrapper for WidgetWrapper
@@ -43,11 +42,6 @@ vi.mock('./ResizeHandle.jsx', () => ({
   default: () => <div data-testid="resize-handle" />,
 }))
 
-// Mock ComponentErrorBoundary
-vi.mock('../ComponentErrorBoundary.jsx', () => ({
-  default: ({ children }) => <div data-testid="error-boundary">{children}</div>,
-}))
-
 describe('Embed interaction overlay', () => {
   describe('PrototypeEmbed', () => {
     const defaultProps = {
@@ -176,58 +170,4 @@ describe('Embed interaction overlay', () => {
       expect(container.querySelector('iframe')).toBeInTheDocument()
     })
   })
-
-  describe('ComponentWidget', () => {
-    const MockComponent = () => <div>Mock Component</div>
-    
-    const defaultProps = {
-      component: MockComponent,
-      jsxModule: null,
-      exportName: 'MockComponent',
-      canvasTheme: 'light',
-      isLocalDev: false,
-      width: 200,
-      height: 150,
-      onUpdate: vi.fn(),
-      resizable: false,
-    }
-
-    it('renders "Click to interact" hint', () => {
-      render(<ComponentWidget {...defaultProps} />)
-      
-      const hint = screen.getByText('Click to interact')
-      expect(hint).toBeInTheDocument()
-    })
-
-    it('enters interactive mode on single click', () => {
-      render(<ComponentWidget {...defaultProps} />)
-      
-      const overlay = screen.getByRole('button', { name: /click to interact/i })
-      fireEvent.click(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.story.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/expandUtils.js

@@ -470,12 +470,11 @@ export function buildSecondaryIframeUrl(widget) {
     const exportName = widget.props?.exportName
     if (!storyId) return null
     const storyData = getStoryData(storyId)
-    if (storyData?._route) {
+    if (storyData?._storyModule) {
       const params = new URLSearchParams()
+      params.set('module', storyData._storyModule)
       if (exportName) params.set('export', exportName)
-      params.set('_sb_embed', '')
-      params.set('_sb_hide_branch_bar', '')
-      return `${baseClean}${storyData._route}?${params}`
+      return `${baseClean}/_storyboard/canvas/isolate?${params}`
     }
     return null
   }

package/src/canvas/widgets/index.js

@@ -6,7 +6,7 @@ import ImageWidget from './ImageWidget.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
 import CodePenEmbed from './CodePenEmbed.jsx'
 import StoryWidget from './StoryWidget.jsx'
-import ComponentSetWidget from './ComponentSetWidget.jsx'
+import StorySetWidget from './StorySetWidget.jsx'
 import TerminalWidget from './TerminalWidget.jsx'
 import TerminalReadWidget from './TerminalReadWidget.jsx'
 import PromptWidget from './PromptWidget.jsx'
@@ -25,7 +25,7 @@ export const widgetRegistry = {
   'figma-embed': FigmaEmbed,
   'codepen-embed': CodePenEmbed,
   'story': StoryWidget,
-  'component-set': ComponentSetWidget,
+  'component-set': StorySetWidget,
   'terminal': TerminalWidget,
   'terminal-read': TerminalReadWidget,
   'agent': TerminalWidget,

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

@@ -21,7 +21,7 @@ vi.mock('@dfosco/storyboard-core', () => ({
     globalFlows: [],
     sorted: { title: { prototypes: [], folders: [] } },
   }),
-  getStoryData: (storyId) => ({ _route: `/components/${storyId}` }),
+  getStoryData: (storyId) => ({ _storyModule: `/src/canvas/${storyId}.story.jsx`, _route: `/components/${storyId}` }),
 }))
 
 vi.mock('./WidgetWrapper.jsx', () => ({

package/src/context.jsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useMemo, Suspense, lazy } from 'react'
+import { useState, useEffect, useMemo, useRef, Suspense, lazy } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
 // Named import seeds the core data index via init() AND provides canvas/story route data
 import { canvases, stories } from 'virtual:storyboard-data-index'
-import { loadFlow, flowExists, findRecord, deepMerge, setFlowClass, installBodyClassSync, resolveFlowName, resolveRecordName, isModesEnabled } from '@dfosco/storyboard-core'
+import { loadFlow, flowExists, findRecord, deepMerge, setFlowClass, installBodyClassSync, resolveFlowName, resolveRecordName, isModesEnabled, getPrototypeMetadata } from '@dfosco/storyboard-core'
 import { StoryboardContext } from './StoryboardContext.js'
 import usePrototypeReloadGuard from './hooks/usePrototypeReloadGuard.js'
 import styles from './FlowError.module.css'
@@ -270,12 +270,19 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
   }, [])
 
   // Skip flow loading for canvas/story pages and flow-less pages
-  const { data, error } = useMemo(() => {
-    if (canvasId || isMissingCanvasRoute || storyName || isMissingStoryRoute) return { data: null, error: null }
-    if (!activeFlowName) return { data: {}, error: null }
+  const { data, error, flowTokens } = useMemo(() => {
+    if (canvasId || isMissingCanvasRoute || storyName || isMissingStoryRoute) return { data: null, error: null, flowTokens: null }
+    if (!activeFlowName) return { data: {}, error: null, flowTokens: null }
     try {
       let flowData = loadFlow(activeFlowName)
 
+      // Extract tokens before passing data to consumers (reserved metadata key)
+      const extractedTokens = flowData?.tokens || null
+      if (flowData?.tokens) {
+        flowData = { ...flowData }
+        delete flowData.tokens
+      }
+
       // Merge record data if configured (with scoped resolution)
       if (recordName && recordParam && params[recordParam]) {
         const resolvedRecord = resolveRecordName(prototypeName, recordName)
@@ -286,12 +293,68 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
       }
 
       setFlowClass(activeFlowName)
-      return { data: flowData, error: null }
+      return { data: flowData, error: null, flowTokens: extractedTokens }
     } catch (err) {
-      return { data: null, error: err.message }
+      return { data: null, error: err.message, flowTokens: null }
     }
   }, [canvasId, isMissingCanvasRoute, storyName, isMissingStoryRoute, activeFlowName, recordName, recordParam, params, prototypeName])
 
+  // Resolve prototype-level tokens from .prototype.json metadata
+  const protoTokens = useMemo(() => {
+    if (!prototypeName) return null
+    const meta = getPrototypeMetadata(prototypeName)
+    return meta?.tokens || null
+  }, [prototypeName])
+
+  // Merge prototype + flow tokens (flow wins). Stable reference when tokens don't change.
+  const mergedTokens = useMemo(() => {
+    if (!protoTokens && !flowTokens) return null
+    return { ...(protoTokens || {}), ...(flowTokens || {}) }
+  }, [protoTokens, flowTokens])
+
+  // Track which URL params were set by tokens (vs. user-explicit params)
+  const managedParamsRef = useRef({})
+
+  // Apply merged tokens to URL search params via replaceState.
+  // Only sets params not already present (user-explicit wins on first load).
+  // Cleans up stale managed params when flow/prototype tokens change.
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    const managed = managedParamsRef.current
+    const nextManaged = {}
+    let changed = false
+
+    // Remove stale managed params no longer in merged tokens
+    for (const key of Object.keys(managed)) {
+      if (!mergedTokens || !(key in mergedTokens)) {
+        url.searchParams.delete(key)
+        changed = true
+      }
+    }
+
+    // Apply current tokens
+    if (mergedTokens) {
+      const reserved = new Set(['flow', 'scene'])
+      for (const [key, value] of Object.entries(mergedTokens)) {
+        if (value == null || typeof value === 'object' || reserved.has(key)) continue
+        const strValue = String(value)
+        if (!url.searchParams.has(key) || (key in managed && managed[key] !== strValue)) {
+          url.searchParams.set(key, strValue)
+          nextManaged[key] = strValue
+          changed = true
+        } else if (key in managed) {
+          nextManaged[key] = strValue
+        }
+      }
+    }
+
+    managedParamsRef.current = nextManaged
+
+    if (changed) {
+      window.history.replaceState(window.history.state, '', url.toString())
+    }
+  }, [mergedTokens])
+
   // Canvas pages get their own rendering path — no flow data needed
   if (canvasId) {
     const canvasData = canvases?.[canvasId]

package/src/vite/data-plugin.js

@@ -1038,6 +1038,8 @@ export default function storyboardDataPlugin() {
       // The iframe loads componentIsolate.jsx which reads query params
       // (module, export, theme) and renders a single story export.
       const isolateEntryPath = new URL('../canvas/componentIsolate.jsx', import.meta.url).pathname
+      // Component-set isolate — renders all exports in a grid, bypassing the full SPA.
+      const componentSetIsolateEntryPath = new URL('../canvas/componentSetIsolate.jsx', import.meta.url).pathname
       server.middlewares.use(async (req, res, next) => {
         if (!req.url) return next()
         let url = req.url
@@ -1045,15 +1047,19 @@ export default function storyboardDataPlugin() {
         if (baseNoTrail && url.startsWith(baseNoTrail)) {
           url = url.slice(baseNoTrail.length) || '/'
         }
-        if (!url.startsWith('/_storyboard/canvas/isolate')) return next()
+        // Match both single-component and component-set isolate routes
+        const isComponentSet = url.startsWith('/_storyboard/canvas/isolate-set')
+        const isSingle = !isComponentSet && url.startsWith('/_storyboard/canvas/isolate')
+        if (!isSingle && !isComponentSet) return next()
 
+        const entryPath = isComponentSet ? componentSetIsolateEntryPath : isolateEntryPath
         const rawHtml = [
           '<!DOCTYPE html>',
           '<html><head>',
           '<style>html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bgColor-default,transparent)}#root{width:100%;height:100%}</style>',
           '</head><body>',
           '<div id="root"></div>',
-          `<script type="module" src="/@fs${isolateEntryPath}"></script>`,
+          `<script type="module" src="/@fs${entryPath}"></script>`,
           '</body></html>',
         ].join('\n')