@dfosco/storyboard-react 4.0.0-beta.32 → 4.0.0-beta.34

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.32",
+  "version": "4.0.0-beta.34",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.32",
-    "@dfosco/tiny-canvas": "4.0.0-beta.32",
+    "@dfosco/storyboard-core": "4.0.0-beta.34",
+    "@dfosco/tiny-canvas": "4.0.0-beta.34",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -83,13 +83,20 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   const scale = zoom / 100
 
   const [editing, setEditing] = useState(false)
-  const [interactive, setInteractive] = useState(false)
-  const [showIframe, setShowIframe] = useState(false)
-  const [iframeLoaded, setIframeLoaded] = useState(false)
+  const [interactive, _setInteractive] = useState(false)
+  const [showIframe, _setShowIframe] = useState(false)
+  const [iframeLoaded, _setIframeLoaded] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const [filter, setFilter] = useState('')
-  const [canvasTheme, setCanvasTheme] = useState('light')
-  const [brokenSnaps, setBrokenSnaps] = useState({})
+  const [canvasTheme, _setCanvasTheme] = useState('light')
+  const [brokenSnaps, _setBrokenSnaps] = useState({})
+
+  // ── Debug logging wrappers (temporary) ──
+  const setInteractive = (v) => { console.log(`[embed:${widgetId}] setInteractive →`, v); _setInteractive(v) }
+  const setShowIframe = (v) => { if (v) console.trace(`[embed:${widgetId}] setShowIframe → TRUE`); else console.log(`[embed:${widgetId}] setShowIframe → false`); _setShowIframe(v) }
+  const setIframeLoaded = (v) => { console.log(`[embed:${widgetId}] iframeLoaded →`, v); _setIframeLoaded(v) }
+  const setCanvasTheme = (v) => { console.log(`[embed:${widgetId}] canvasTheme →`, v); _setCanvasTheme(v) }
+  const setBrokenSnaps = (fn) => { console.log(`[embed:${widgetId}] setBrokenSnaps`); _setBrokenSnaps(fn) }
 
   const inputRef = useRef(null)
   const filterRef = useRef(null)
@@ -114,6 +121,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   // Single snapshot — backward compat reads snapshotLight/snapshotDark if snapshot is missing
   const hasSnap = !isExternal && !!(snapshot && snapshot.includes(widgetId) && !brokenSnaps[snapshot])
+  console.log(`[embed:${widgetId}] render: hasSnap=${hasSnap}, showIframe=${showIframe}, interactive=${interactive}, canvasTheme=${canvasTheme}, snapshot=${snapshot ? snapshot.slice(0, 50) : 'null'}, broken=${!!brokenSnaps[snapshot]}`)
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -247,8 +255,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   }, [showIframe])
 
   // Exit interactive mode when clicking outside the embed.
-  // Hides iframe immediately for a responsive feel, then captures
-  // snapshots in the background with the iframe hidden but still mounted.
+  // Captures a snapshot in the background, then unmounts the iframe.
   useEffect(() => {
     if (!interactive || expanded) return
     function handlePointerDown(e) {
@@ -280,8 +287,6 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
             })
           }, 0)
         } else if (isExternal && showIframe) {
-          // External embeds (e.g. Figma) are slow to reload — keep the
-          // iframe mounted for 2 min so re-entering is instant.
           const session = ++exitSessionRef.current
           clearTimeout(teardownTimerRef.current)
           teardownTimerRef.current = setTimeout(() => {
@@ -303,25 +308,27 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   }), [])
 
   // On canvas theme change, enqueue a background snapshot refresh.
-  // Skips the initial render (canvasThemeInitRef tracks first value).
-  // Uses a ref to check hasSnap at callback time (not closure time).
-  const canvasThemeInitRef = useRef(true)
+  // Only fires for true user-initiated theme changes (not page load).
+  // Uses mountTime to ignore the initial theme resolution that happens
+  // within the first 3 seconds of mount.
+  const mountTimeRef = useRef(Date.now())
   const refreshMetaRef = useRef(null)
   const hasSnapRef = useRef(hasSnap)
   hasSnapRef.current = hasSnap
   useEffect(() => {
-    if (canvasThemeInitRef.current) { canvasThemeInitRef.current = false; return }
-    if (isExternal || !onUpdate || interactive || !hasSnap) return
+    // Ignore theme changes during initial page load (first 3 seconds)
+    const elapsed = Date.now() - mountTimeRef.current
+    if (elapsed < 3000) { console.log(`[embed:${widgetId}] theme-effect: skip page-load (${elapsed}ms)`); return }
+    if (isExternal || !onUpdate || interactive) { console.log(`[embed:${widgetId}] theme-effect: skip (ext=${isExternal}, noUpdate=${!onUpdate}, interactive=${interactive})`); return }
+    if (!hasSnapRef.current) { console.log(`[embed:${widgetId}] theme-effect: skip (no snap)`); return }
+    console.log(`[embed:${widgetId}] theme-effect: enqueue refresh, hasSnapRef=${hasSnapRef.current}`)
     const rect = embedRef.current?.getBoundingClientRect()
     enqueueRefresh(widgetId, ({ revealOrder, batchStart }) => {
-      // Re-check hasSnap at callback time — snapshot may have been
-      // marked broken (404) between enqueue and execution.
       if (!hasSnapRef.current) return Promise.resolve(false)
       return new Promise((resolve) => {
         refreshMetaRef.current = { revealOrder, batchStart, resolve }
         captureOnReadyRef.current = true
         setShowIframe(true)
-        // Safety timeout — report failure so retry pass picks it up
         setTimeout(() => { refreshMetaRef.current = null; resolve(false) }, 10000)
       })
     }, rect ? { x: rect.left, y: rect.top } : undefined)
@@ -357,7 +364,6 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
             }
             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)
@@ -444,6 +450,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
   const enterInteractive = useCallback(() => {
+    console.log(`[embed:${widgetId}] enterInteractive`)
     exitSessionRef.current++
     clearTimeout(teardownTimerRef.current)
     cancelRefresh(widgetId)
@@ -598,7 +605,12 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                   className={styles.snapshotImage}
                   alt={`${prototypeTitle} snapshot`}
                   draggable={false}
-                  onError={() => setBrokenSnaps(prev => ({ ...prev, [snapshot]: true }))}
+                  onError={() => {
+                    console.log(`[embed:${widgetId}] snapshot img onError: ${snapshot?.slice(0, 60)}`)
+                    setBrokenSnaps(prev => ({ ...prev, [snapshot]: true }))
+                    // Clear the broken snapshot from widget data so we stop trying
+                    onUpdate?.({ snapshot: '' })
+                  }}
                 />
               )}
 
@@ -616,7 +628,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                     transition: 'opacity 150ms ease',
                     ...(iframeLoaded ? {} : { opacity: 0 }),
                   }}
-                  onLoad={() => setIframeLoaded(true)}
+                  onLoad={() => { console.log(`[embed:${widgetId}] iframe onLoad`); setIframeLoaded(true) }}
                   title={`${prototypeTitle} prototype`}
                   sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
                 />

package/src/canvas/widgets/refreshQueue.js

@@ -31,6 +31,7 @@ export const REVEAL_INTERVAL = 200
  * @param {{ x: number, y: number }} [pos] — spatial position for wave ordering
  */
 export function enqueueRefresh(widgetId, fn, pos) {
+  console.log(`[refreshQueue] enqueue: ${widgetId}, queueLen=${queue.length}`)
   const existing = queue.findIndex(item => item.widgetId === widgetId)
   if (existing !== -1) queue.splice(existing, 1)
 
@@ -69,11 +70,13 @@ function scheduleDrain() {
 
 function onTaskDone(success, item) {
   batchDone++
+  console.log(`[refreshQueue] taskDone: ${item.widgetId}, success=${success}, done=${batchDone}/${batchTotal}, retry=${item.isRetry}`)
   if (!success && !item.isRetry) {
     batchFailed.push(item)
   }
   // When batch is complete, re-enqueue failures for one retry
   if (batchDone >= batchTotal && batchFailed.length > 0) {
+    console.log(`[refreshQueue] batch complete, retrying ${batchFailed.length} failed`)
     const retries = batchFailed.splice(0)
     for (const failed of retries) {
       failed.isRetry = true

package/src/canvas/widgets/useSnapshotCapture.js

@@ -95,6 +95,7 @@ export function useSnapshotCapture({
       }
 
       if (e.data?.type === 'storyboard:embed:snapshot-ready') {
+        console.log(`[snapshot:${widgetId}] iframe ready`)
         setIframeReady(true)
         iframeReadyRef.current = true
       }
@@ -115,10 +116,11 @@ export function useSnapshotCapture({
    * Uploads and saves as `snapshot` prop, overwriting any previous value.
    */
   const requestCapture = useCallback(async ({ force = false } = {}) => {
+    console.log(`[snapshot:${widgetId}] requestCapture: force=${force}, hasContentWindow=${!!iframeRef.current?.contentWindow}, capturing=${capturingRef.current}, ready=${iframeReadyRef.current}`)
     if (!onUpdate) return {}
-    if (!iframeRef.current?.contentWindow) return {}
-    if (capturingRef.current) return {}
-    if (!force && !iframeReadyRef.current) return {}
+    if (!iframeRef.current?.contentWindow) { console.log(`[snapshot:${widgetId}] requestCapture: no contentWindow`); return {} }
+    if (capturingRef.current) { console.log(`[snapshot:${widgetId}] requestCapture: already capturing`); return {} }
+    if (!force && !iframeReadyRef.current) { console.log(`[snapshot:${widgetId}] requestCapture: not ready`); return {} }
 
     capturingRef.current = true
     const gen = ++captureGeneration.current
@@ -129,18 +131,20 @@ export function useSnapshotCapture({
       const reqId = ++requestIdCounter.current
       const dataUrl = await captureOnce(cw, reqId, responseHandlers.current)
 
-      if (gen !== captureGeneration.current) return {}
-      if (!dataUrl) return {}
+      if (gen !== captureGeneration.current) { console.log(`[snapshot:${widgetId}] stale gen after capture`); return {} }
+      if (!dataUrl) { console.log(`[snapshot:${widgetId}] captureOnce returned null`); return {} }
 
       const filename = `snapshot-${widgetId}.webp`
+      console.log(`[snapshot:${widgetId}] uploading ${filename}`)
       const result = await uploadImage(dataUrl, `snapshot-${widgetId}`, filename)
 
-      if (gen !== captureGeneration.current) return {}
+      if (gen !== captureGeneration.current) { console.log(`[snapshot:${widgetId}] stale gen after upload`); return {} }
 
       if (result?.filename) {
         const cacheBust = `?v=${Date.now()}`
         const url = `${base}/_storyboard/canvas/images/${result.filename}${cacheBust}`
         const updates = { snapshot: url }
+        console.log(`[snapshot:${widgetId}] saved: ${url.slice(0, 60)}`)
         onUpdate?.(updates)
         return updates
       }