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

package/src/canvas/widgets/StoryWidget.jsx

@@ -1,11 +1,8 @@
 /**
  * Renders a story at its route URL inside an iframe on canvas.
  *
- * Works like PrototypeEmbed: the story has its own route (e.g. /components/button-patterns)
- * and this widget iframes that URL with ?export=ExportName&_sb_embed for single-export mode.
- *
  * Features:
- * - Title bar showing story name + export (like Figma embed)
+ * - Title bar showing story name + export
  * - "Show code" action toggles between iframe and source view
  * - "Copy code" action copies the story source to clipboard
  *
@@ -17,9 +14,6 @@ import { createInspectorHighlighter } from '@dfosco/storyboard-core/inspector/hi
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { useIframeDevLogs } from './iframeDevLogs.js'
-import { useSnapshotCapture } from './useSnapshotCapture.js'
-import { subscribeCanvasTheme } from './embedTheme.js'
-import { enqueueRefresh, cancelRefresh, REVEAL_INTERVAL } from './refreshQueue.js'
 import styles from './StoryWidget.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -28,58 +22,32 @@ function ComponentIcon({ size = 36 }) {
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
       <path d="M5.21173 15.1113L2.52473 12.4243C2.29041 12.1899 2.29041 11.8101 2.52473 11.5757L5.21173 8.88873C5.44605 8.65442 5.82595 8.65442 6.06026 8.88873L8.74727 11.5757C8.98158 11.8101 8.98158 12.1899 8.74727 12.4243L6.06026 15.1113C5.82595 15.3456 5.44605 15.3456 5.21173 15.1113Z" />
       <path d="M11.5757 21.475L8.88874 18.788C8.65443 18.5537 8.65443 18.1738 8.88874 17.9395L11.5757 15.2525C11.8101 15.0182 12.19 15.0182 12.4243 15.2525L15.1113 17.9395C15.3456 18.1738 15.3456 18.5537 15.1113 18.788L12.4243 21.475C12.19 21.7094 11.8101 21.7094 11.5757 21.475Z" />
-      <path d="M11.5757 8.7475L8.88874 6.06049C8.65443 5.82618 8.65443 5.44628 8.88874 5.21197L11.5757 2.52496C11.8101 2.29065 12.19 2.29065 12.4243 2.52496L15.1113 5.21197C15.3456 5.44628 15.3456 5.82618 15.1113 6.06049L12.4243 8.7475C12.19 8.98181 11.8101 8.98181 11.5757 8.7475Z" />
-      <path d="M17.9396 15.1113L15.2526 12.4243C15.0183 12.1899 15.0183 11.8101 15.2526 11.5757L17.9396 8.88873C18.174 8.65442 18.5539 8.65442 18.7882 8.88873L21.4752 11.5757C21.7095 11.8101 21.7095 12.1899 21.4752 12.4243L18.7882 15.1113C18.5539 15.3456 18.174 15.3456 17.9396 15.1113Z" />
+      <path d="M17.9395 15.1113L15.2525 12.4243C15.0182 12.1899 15.0182 11.8101 15.2525 11.5757L17.9395 8.88873C18.1738 8.65442 18.5537 8.65442 18.788 8.88873L21.475 11.5757C21.7094 11.8101 21.7094 12.1899 21.475 12.4243L18.788 15.1113C18.5537 15.3456 18.1738 15.3456 17.9395 15.1113Z" />
+      <path d="M11.5757 8.74727L8.88874 6.06026C8.65443 5.82595 8.65443 5.44605 8.88874 5.21173L11.5757 2.52473C11.8101 2.29041 12.19 2.29041 12.4243 2.52473L15.1113 5.21173C15.3456 5.44605 15.3456 5.82595 15.1113 6.06026L12.4243 8.74727C12.19 8.98158 11.8101 8.98158 11.5757 8.74727Z" />
     </svg>
   )
 }
 
 function resolveStoryUrl(storyId, exportName) {
   const story = getStoryData(storyId)
-  if (!story?._route) return null
-
+  if (!story?._route) return ''
   const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  const route = story._route
-  const params = new URLSearchParams({ _sb_embed: '1', _sb_theme_target: 'prototype' })
+  const params = new URLSearchParams()
   if (exportName) params.set('export', exportName)
-
-  return `${base}${route}?${params}`
-}
-
-/** Resolve a module path with the app base URL for dynamic imports. */
-function resolveModulePath(modulePath) {
-  if (!modulePath || !modulePath.startsWith('/')) return modulePath
-  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  return base ? `${base}${modulePath}` : modulePath
+  params.set('_sb_embed', '')
+  return `${base}${story._route}?${params}`
 }
 
-/** Cache for the static story sources JSON fetched in prod builds. */
-let _storySourcesCache = null
+const _storySourcesCache = {}
 
-/**
- * Fetch story source code. In dev, uses Vite's ?raw dynamic import.
- * In prod, fetches from the build-time _storyboard/stories/sources.json.
- */
 async function fetchStorySource(modulePath) {
-  // Dev: use Vite's ?raw import for live source
-  if (import.meta.env.DEV) {
-    const mod = await import(/* @vite-ignore */ `${resolveModulePath(modulePath)}?raw`)
-    return mod.default || ''
-  }
-
-  // Prod: load from static JSON endpoint (same pattern as inspector.json)
-  if (!_storySourcesCache) {
-    const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-    const res = await fetch(`${base}/_storyboard/stories/sources.json`)
-    if (!res.ok) throw new Error(`Story sources not available (${res.status})`)
-    _storySourcesCache = await res.json()
-  }
-
-  // _storyModule is like "/src/canvas/stories/foo.story.jsx" — strip leading /
-  const key = modulePath.startsWith('/') ? modulePath.slice(1) : modulePath
-  const source = _storySourcesCache[key]
-  if (source == null) throw new Error(`Source not found for ${key}`)
-  return source
+  if (modulePath in _storySourcesCache) return _storySourcesCache[modulePath]
+  const url = modulePath.startsWith('/') ? modulePath : `/${modulePath}`
+  const res = await fetch(`${url}?raw`)
+  if (!res.ok) throw new Error(`Failed to fetch ${url}`)
+  const code = await res.text()
+  _storySourcesCache[modulePath] = code
+  return code
 }
 
 export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
@@ -87,60 +55,17 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
   const exportName = props?.exportName || ''
   const width = props?.width
   const height = props?.height
-  const snapshot = props?.snapshot || props?.snapshotLight || props?.snapshotDark || ''
 
   const containerRef = useRef(null)
   const iframeRef = useRef(null)
-  const resizeTimerRef = useRef(null)
-  const captureOnReadyRef = useRef(false)
-  const exitSessionRef = useRef(0)
-  const refreshMetaRef = useRef(null)
   const [interactive, setInteractive] = useState(false)
-  const [showIframe, setShowIframe] = useState(false)
-  const [iframeLoaded, setIframeLoaded] = useState(false)
   const [showCode, setShowCode] = useState(!!props?.showCode)
   const [sourceCode, setSourceCode] = useState(null)
   const [highlightedHtml, setHighlightedHtml] = useState(null)
   const [sourceLoading, setSourceLoading] = useState(false)
   const [storyIndexKey, setStoryIndexKey] = useState(0)
-  const [brokenSnaps, setBrokenSnaps] = useState({})
 
-  // Resolve canvas theme — reactive to theme changes
-  const [canvasTheme, setCanvasTheme] = useState('light')
-
-  useEffect(() => subscribeCanvasTheme({
-    anchorRef: containerRef,
-    onTheme: setCanvasTheme,
-  }), [])
-
-  // On canvas theme change, enqueue a background snapshot refresh
-  const canvasThemeInitRef = useRef(true)
-  useEffect(() => {
-    if (canvasThemeInitRef.current) { canvasThemeInitRef.current = false; return }
-    if (!onUpdate || interactive) return
-    const rect = containerRef.current?.getBoundingClientRect()
-    enqueueRefresh(widgetId, ({ revealOrder, batchStart }) => {
-      return new Promise((resolve) => {
-        refreshMetaRef.current = { revealOrder, batchStart, resolve }
-        captureOnReadyRef.current = true
-        setShowIframe(true)
-        setTimeout(() => { refreshMetaRef.current = null; resolve(false) }, 10000)
-      })
-    }, rect ? { x: rect.left, y: rect.top } : undefined)
-  }, [canvasTheme]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Snapshot capture hook
-  const { iframeReady, requestCapture } = useSnapshotCapture({
-    iframeRef,
-    widgetId,
-    onUpdate,
-    showIframe,
-  })
-
-  // Single snapshot
-  const hasSnap = !!(snapshot && snapshot.includes(widgetId) && !brokenSnaps[snapshot])
-
-  // Re-resolve story URL when the story index is live-patched (new story added)
+  // Re-resolve story URL when the story index is live-patched
   useEffect(() => {
     const handler = () => setStoryIndexKey((k) => k + 1)
     document.addEventListener('storyboard:story-index-changed', handler)
@@ -150,116 +75,30 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
   const toggleShowCode = useCallback(() => {
     setShowCode((v) => {
       const next = !v
-      // Persist to canvas JSONL in dev
-      if (onUpdate) {
-        onUpdate({ showCode: next })
-      }
+      if (onUpdate) onUpdate({ showCode: next })
       return next
     })
   }, [onUpdate])
 
-  const enterInteractive = useCallback(() => {
-    exitSessionRef.current++
-    cancelRefresh(widgetId)
-    setShowIframe(true)
-    setInteractive(true)
-  }, [widgetId])
-
-  useEffect(() => {
-    if (!showIframe) setIframeLoaded(false)
-  }, [showIframe])
+  const enterInteractive = useCallback(() => setInteractive(true), [])
 
-  // Exit interactive mode when clicking outside.
-  // Hides iframe immediately for a responsive feel, then captures
-  // snapshots in the background with the iframe hidden but still mounted.
+  // Exit interactive mode when clicking outside
   useEffect(() => {
     if (!interactive) return
     function handlePointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
         if (chromeEl) return
-
         setInteractive(false)
-        if (onUpdate && iframeLoaded && iframeRef.current?.contentWindow) {
-          if (iframeRef.current) iframeRef.current.style.visibility = 'hidden'
-          const session = ++exitSessionRef.current
-          setTimeout(() => {
-            if (exitSessionRef.current !== session) return
-            requestCapture({ force: true }).then((updates) => {
-              if (exitSessionRef.current !== session) return
-              const snap = updates?.snapshot
-              if (snap) {
-                const img = new Image()
-                const done = () => {
-                  if (exitSessionRef.current === session) setShowIframe(false)
-                }
-                img.onload = done
-                img.onerror = done
-                img.src = snap
-                setTimeout(done, 2000)
-              } else {
-                setShowIframe(false)
-              }
-            })
-          }, 0)
-        } else {
-          setShowIframe(false)
-        }
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive, onUpdate, iframeLoaded, requestCapture])
+  }, [interactive, widgetId])
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
-    // Recapture snapshot after resize (debounced)
-    clearTimeout(resizeTimerRef.current)
-    resizeTimerRef.current = setTimeout(() => requestCapture(), 1500)
-  }, [onUpdate, requestCapture])
-
-  // Capture snapshot on first iframe ready (when no existing snapshot)
-  useEffect(() => {
-    if (!iframeReady || !onUpdate) return
-    if (!hasSnap) {
-      requestCapture()
-    }
-  }, [iframeReady]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Capture when iframe becomes ready after refresh-thumbnail requested it
-  useEffect(() => {
-    if (iframeReady && captureOnReadyRef.current) {
-      captureOnReadyRef.current = false
-      requestCapture().then((updates) => {
-        const meta = refreshMetaRef.current
-        if (meta) {
-          refreshMetaRef.current = null
-          const snap = updates?.snapshot
-          const reveal = () => {
-            if (snap) {
-              const img = new Image()
-              const done = () => setShowIframe(false)
-              img.onload = done
-              img.onerror = done
-              img.src = snap
-              setTimeout(done, 2000)
-            } else {
-              setShowIframe(false)
-            }
-            meta.resolve(!!snap)
-          }
-          // Wait for our reveal slot in the wave
-          const elapsed = Date.now() - meta.batchStart
-          const targetTime = meta.revealOrder * REVEAL_INTERVAL
-          const wait = Math.max(0, targetTime - elapsed)
-          setTimeout(reveal, wait)
-        }
-      })
-    }
-  }, [iframeReady, requestCapture])
-
-  // Cleanup resize timer on unmount
-  useEffect(() => () => clearTimeout(resizeTimerRef.current), [])
+  }, [onUpdate])
 
   // Load source code when show-code is toggled on
   useEffect(() => {
@@ -269,65 +108,43 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
       setSourceCode('// Source not available')
       return
     }
-
     let cancelled = false
     setSourceLoading(true)
-
     fetchStorySource(story._storyModule)
-      .then((code) => {
-        if (cancelled) return
-        setSourceCode(code || '// Empty file')
-        setSourceLoading(false)
-      })
-      .catch(() => {
-        if (cancelled) return
-        setSourceCode('// Failed to load source')
-        setSourceLoading(false)
-      })
-
-    return () => {
-      cancelled = true
-      setSourceLoading(false)
-    }
+      .then((code) => { if (!cancelled) { setSourceCode(code || '// Empty file'); setSourceLoading(false) } })
+      .catch(() => { if (!cancelled) { setSourceCode('// Failed to load source'); setSourceLoading(false) } })
+    return () => { cancelled = true; setSourceLoading(false) }
   }, [showCode, sourceCode, storyId])
 
-  // Re-highlight when the code-box theme changes (storyboard:theme:changed event).
+  // Re-highlight when theme changes
   const [codeThemeKey, setCodeThemeKey] = useState(0)
   useEffect(() => {
-    function onThemeChanged() {
-      setCodeThemeKey((k) => k + 1)
-    }
+    function onThemeChanged() { setCodeThemeKey((k) => k + 1) }
     document.addEventListener('storyboard:theme:changed', onThemeChanged)
     return () => document.removeEventListener('storyboard:theme:changed', onThemeChanged)
   }, [])
 
-  // Syntax-highlight source code using the inspector highlighter.
-  // Uses the current code-box theme (data-sb-code-theme) set by the theme store.
+  // Syntax-highlight source code
   useEffect(() => {
     if (!sourceCode) return
     let cancelled = false
     createInspectorHighlighter().then((hl) => {
       if (cancelled) return
       const lang = storyId.endsWith('.tsx') ? 'tsx' : 'jsx'
-      const html = hl.codeToHtml(sourceCode, { lang })
-      setHighlightedHtml(html)
+      setHighlightedHtml(hl.codeToHtml(sourceCode, { lang }))
     })
     return () => { cancelled = true }
   }, [sourceCode, storyId, codeThemeKey])
 
   const copyCode = useCallback(async () => {
-    if (sourceCode) {
-      await navigator.clipboard?.writeText(sourceCode)
-      return
-    }
-    // Load source on demand if not already loaded
+    if (sourceCode) { await navigator.clipboard?.writeText(sourceCode); return }
     const story = getStoryData(storyId)
     if (!story?._storyModule) return
     try {
       const code = await fetchStorySource(story._storyModule)
       setSourceCode(code)
       await navigator.clipboard?.writeText(code)
-    } catch { /* ignore */ }
+    } catch { /* */ }
   }, [sourceCode, storyId])
 
   useImperativeHandle(ref, () => ({
@@ -336,26 +153,17 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
       return undefined
     },
     handleAction(actionId) {
-      if (actionId === 'show-code') {
-        toggleShowCode()
-      } else if (actionId === 'copy-code') {
-        copyCode()
-      } else if (actionId === 'open-external') {
+      if (actionId === 'show-code') toggleShowCode()
+      else if (actionId === 'copy-code') copyCode()
+      else if (actionId === 'open-external') {
         const story = getStoryData(storyId)
         if (story?._route) {
           const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
           window.open(`${base}${story._route}`, '_blank', 'noopener')
         }
-      } else if (actionId === 'refresh-thumbnail') {
-        if (iframeReady && iframeRef.current?.contentWindow) {
-          requestCapture()
-        } else {
-          captureOnReadyRef.current = true
-          setShowIframe(true)
-        }
       }
     },
-  }), [storyId, showCode, toggleShowCode, copyCode, iframeReady, requestCapture])
+  }), [storyId, showCode, toggleShowCode, copyCode])
 
   const iframeSrc = useMemo(
     () => resolveStoryUrl(storyId, exportName),
@@ -364,13 +172,12 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
 
   useIframeDevLogs({
     widget: 'StoryWidget',
-    loaded: showIframe && !showCode && Boolean(iframeSrc),
+    loaded: interactive && !showCode && Boolean(iframeSrc),
     src: iframeSrc,
   })
 
   const displayName = exportName ? `${storyId} / ${exportName}` : storyId
 
-  // Error state — missing story or no route
   if (!storyId) {
     return (
       <WidgetWrapper>
@@ -418,61 +225,25 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
           >
             <div className={styles.codeHeader}>
               <span className={styles.codeLabel}>{storyId}.story.jsx</span>
-              <button
-                className={styles.codeCloseBtn}
-                onClick={() => setShowCode(false)}
-                aria-label="Close code view"
-              >×</button>
+              <button className={styles.codeCloseBtn} onClick={() => setShowCode(false)} aria-label="Close code view">×</button>
             </div>
             {sourceLoading ? (
               <div className={styles.codeLoading}>Loading…</div>
             ) : highlightedHtml ? (
-              <div
-                className={styles.codeBlock}
-                dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-              />
+              <div className={styles.codeBlock} dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
             ) : (
-              <pre className={styles.codeBlock}>
-                <code>{sourceCode || ''}</code>
-              </pre>
+              <pre className={styles.codeBlock}><code>{sourceCode || ''}</code></pre>
             )}
           </div>
         ) : (
           <>
             <div className={styles.content}>
-              {/* Snapshot layer — single image */}
-              {hasSnap && (
-                <img
-                  src={snapshot}
-                  className={styles.snapshotImage}
-                  alt={`${displayName} snapshot`}
-                  draggable={false}
-                  onError={() => setBrokenSnaps(prev => ({ ...prev, [snapshot]: true }))}
-                />
-              )}
-
-              {/* Iframe layer — on top, transparent until loaded */}
-              {showIframe && (
-                <iframe
-                  ref={iframeRef}
-                  src={iframeSrc}
-                  className={styles.iframe}
-                  style={{
-                    ...(iframeLoaded ? undefined : { opacity: 0 }),
-                    transition: 'opacity 150ms ease',
-                  }}
-                  onLoad={() => setIframeLoaded(true)}
-                  title={displayName}
-                />
-              )}
-
-              {/* Placeholder — only when no snapshot and no iframe */}
-              {!hasSnap && !showIframe && (
-                <div className={styles.placeholder}>
-                  <ComponentIcon size={36} />
-                  <span className={styles.placeholderLabel}>{displayName}</span>
-                </div>
-              )}
+              <iframe
+                ref={iframeRef}
+                src={iframeSrc}
+                className={styles.iframe}
+                title={displayName}
+              />
             </div>
 
             {!interactive && (
@@ -491,22 +262,15 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
                     enterInteractive()
                   }
                 }}
-                aria-label={hasSnap ? 'Click to interact with story component' : 'Click to open story component'}
+                aria-label="Click to interact"
               >
-                <span className={overlayStyles.interactHint}>{hasSnap ? 'Click to interact' : 'Click to open'}</span>
+                <span className={overlayStyles.interactHint}>Click to interact</span>
               </div>
             )}
           </>
         )}
-        {resizable && (
-          <ResizeHandle
-            targetRef={containerRef}
-            minWidth={100}
-            minHeight={60}
-            onResize={handleResize}
-          />
-        )}
       </div>
+      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
   )
 })

package/src/canvas/widgets/StoryWidget.module.css

@@ -118,7 +118,7 @@
 }
 
 .codeLabel {
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
 .codeCloseBtn {
@@ -152,7 +152,7 @@
 .codeBlock pre {
   margin: 0;
   padding: var(--base-size-8, 8px) !important;
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.6;
@@ -163,7 +163,7 @@
 
 /* Fallback when no highlighted HTML (plain pre/code) */
 .codeBlock > code {
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.6;

package/src/index.js

@@ -35,7 +35,7 @@ export { FormContext } from './context/FormContext.js'
 // ModeSwitch and ToolbarShell UI moved to @dfosco/storyboard-svelte-ui
 
 // Viewfinder dashboard
-export { default as Viewfinder } from './Viewfinder.jsx'
+export { default as Viewfinder } from './ViewfinderNew.jsx'
 
 // Canvas
 export { default as CanvasPage } from './canvas/CanvasPage.jsx'

package/src/vite/data-plugin.js

@@ -1128,6 +1128,30 @@ export default function storyboardDataPlugin() {
       return []
     },
 
+    // Inject __SB_BRANCHES__ into HTML so the Viewfinder branch selector works.
+    // Reads .worktrees/ports.json to enumerate active worktree dev servers.
+    transformIndexHtml(html, ctx) {
+      // Only inject in dev mode
+      if (!ctx.server) return html
+
+      try {
+        const portsJsonPath = path.resolve(root, '.worktrees', 'ports.json')
+        if (!fs.existsSync(portsJsonPath)) return html
+
+        const ports = JSON.parse(fs.readFileSync(portsJsonPath, 'utf-8'))
+        const branches = Object.entries(ports)
+          .filter(([name]) => name !== 'main')
+          .map(([name, port]) => ({ branch: name, folder: `branch--${name}`, port }))
+
+        if (branches.length === 0) return html
+
+        const script = `<script>window.__SB_BRANCHES__ = ${JSON.stringify(branches)};</script>`
+        return html.replace('</head>', `${script}\n</head>`)
+      } catch {
+        return html
+      }
+    },
+
     // Rebuild index on each build start
     buildStart() {
       buildResult = null

package/src/Viewfinder.jsx

@@ -1,72 +0,0 @@
-
-import { useRef, useEffect, useMemo } from 'react'
-
-/**
- * Viewfinder — thin React wrapper around the Svelte Viewfinder component.
- *
- * Mounts the core Svelte Viewfinder into a container div and manages
- * its lifecycle via React's useEffect.
- *
- * @param {Object} props
- * @param {Record<string, unknown>} [props.scenes] - Scene/flow index (deprecated, ignored — data comes from core)
- * @param {Record<string, unknown>} [props.flows] - Flow index (deprecated, ignored — data comes from core)
- * @param {Record<string, unknown>} [props.pageModules] - import.meta.glob result for page files
- * @param {string} [props.basePath] - Base URL path
- * @param {string} [props.title] - Header title
- * @param {string} [props.subtitle] - Optional subtitle
- * @param {boolean} [props.showThumbnails] - Show thumbnail previews
- * @param {boolean} [props.hideDefaultFlow] - Hide the "default" flow from the "Other flows" section
- */
-export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyboard', subtitle, showThumbnails = false, hideDefaultFlow, hideDefaultScene = false }) {
-  const containerRef = useRef(null)
-  const handleRef = useRef(null)
-
-  const shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
-
-  const knownRoutes = useMemo(() => Object.keys(pageModules)
-    .map(p => p.replace('/src/prototypes/', '').replace('.jsx', ''))
-    .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'viewfinder'),
-  [pageModules])
-
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    let cancelled = false
-
-    import('@dfosco/storyboard-core/ui-runtime').then(({ mountViewfinder, unmountViewfinder }) => {
-      if (cancelled) return
-      // Ensure clean state for re-mounts
-      unmountViewfinder()
-      handleRef.current = mountViewfinder(containerRef.current, {
-        title,
-        subtitle,
-        basePath,
-        knownRoutes,
-        showThumbnails,
-        hideDefaultFlow: shouldHideDefault,
-      })
-      // Wait for styles to be fully loaded before revealing
-      handleRef.current.ready.then(() => {
-        requestAnimationFrame(() => {
-          if (containerRef.current) containerRef.current.style.opacity = '1'
-        })
-      })
-    })
-
-    return () => {
-      cancelled = true
-      if (handleRef.current) {
-        handleRef.current.destroy()
-        handleRef.current = null
-      }
-    }
-  }, [title, subtitle, basePath, knownRoutes, showThumbnails, shouldHideDefault])
-
-  return <div ref={containerRef} style={{
-    minHeight: '100vh',
-    background: 'var(--bgColor-default, #0d1117)',
-    opacity: 0,
-    transition: 'opacity 0.15s ease',
-  }} />
-}
-