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

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,16 +1,22 @@
 import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
 import { createPortal } from 'react-dom'
-import { buildPrototypeIndex, getFlag } from '@dfosco/storyboard-core'
+import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
-import { getEmbedChromeVars } from './embedTheme.js'
-import { uploadImage } from '../canvasApi.js'
-import { useIframeQueue } from './useViewportEntry.js'
+import { getEmbedChromeVars, resolveCanvasTheme } from './embedTheme.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import { useSnapshotCapture } from './useSnapshotCapture.js'
 import styles from './PrototypeEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
-function devLog(...args) {
-  try { if (getFlag('dev-logs')) console.log('[canvas:prototype-embed]', ...args) } catch { /* */ }
+function CollageFrameIcon({ size = 36 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+      <path d="M19.4 20H4.6C4.26863 20 4 19.7314 4 19.4V4.6C4 4.26863 4.26863 4 4.6 4H19.4C19.7314 4 20 4.26863 20 4.6V19.4C20 19.7314 19.7314 20 19.4 20Z" />
+      <path d="M11 12V4" />
+      <path d="M4 12H20" />
+    </svg>
+  )
 }
 
 function formatName(name) {
@@ -19,21 +25,39 @@ function formatName(name) {
     .replace(/\b\w/g, (c) => c.toUpperCase())
 }
 
-function resolveCanvasThemeFromStorage() {
-  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 malformed sync settings
+function listInternalPrototypes(index) {
+  const allProtos = []
+  const sortedFolders = index.sorted?.title?.folders
+  const sortedPrototypes = index.sorted?.title?.prototypes
+  const folderList = Array.isArray(sortedFolders) && sortedFolders.length > 0
+    ? sortedFolders
+    : (index.folders || [])
+  const standaloneList = Array.isArray(sortedPrototypes) && sortedPrototypes.length > 0
+    ? sortedPrototypes
+    : (index.prototypes || [])
+
+  for (const folder of folderList) {
+    for (const proto of folder.prototypes || []) {
+      if (!proto.isExternal) allProtos.push(proto)
+    }
+  }
+  for (const proto of standaloneList) {
+    if (!proto.isExternal) allProtos.push(proto)
+  }
+  return allProtos
+}
+
+function normalizeRoutePath(value, basePath = '') {
+  if (!value || /^https?:\/\//.test(value)) return ''
+  const noHash = value.split('#')[0]
+  let route = noHash.split('?')[0]
+  route = route.replace(/^\/branch--[^/]+/, '')
+  if (basePath && route.startsWith(basePath)) {
+    route = route.slice(basePath.length) || '/'
   }
-  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 window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  if (!route.startsWith('/')) route = `/${route}`
+  route = route.replace(/\/+$/, '')
+  return route || '/'
 }
 
 export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
@@ -42,10 +66,8 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   const height = readProp(props, 'height', prototypeEmbedSchema)
   const zoom = readProp(props, 'zoom', prototypeEmbedSchema)
   const label = readProp(props, 'label', prototypeEmbedSchema) || src
-
-  // Snapshot props for lazy loading
-  const snapshotLight = props?.snapshotLight || null
-  const snapshotDark = props?.snapshotDark || null
+  const snapshotLight = props?.snapshotLight || ''
+  const snapshotDark = props?.snapshotDark || ''
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
@@ -58,73 +80,42 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     return `${basePath}${cleaned}`
   }, [src, basePath, baseSegment])
 
-  const isExternal = /^https?:\/\//.test(rawSrc)
   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 [expanded, setExpanded] = useState(false)
   const [filter, setFilter] = useState('')
-  const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
-
-  // Lazy loading state — only use snapshots that match this widget's ID
-  const snapshotMatchesWidget = (url) => url && widgetId && url.includes(widgetId)
-  const validSnapshotLight = snapshotMatchesWidget(snapshotLight) ? snapshotLight : null
-  const validSnapshotDark = snapshotMatchesWidget(snapshotDark) ? snapshotDark : null
-  const currentSnapshot = canvasTheme?.startsWith('dark') ? validSnapshotDark : validSnapshotLight
-  const hasSnapshot = !!currentSnapshot
-
-  // Sequential iframe queue — prevents stampede when many embeds lack snapshots.
-  // Widgets with snapshots skip the queue entirely; others load one at a time.
-  const { ready: queueReady, releaseSlot } = useIframeQueue(hasSnapshot || isExternal, widgetId)
-  const [preloadIframe, setPreloadIframe] = useState(hasSnapshot || isExternal)
-  const [iframeLoaded, setIframeLoaded] = useState(false)
-  const [showIframe, setShowIframe] = useState(hasSnapshot || isExternal)
-  const [showSpinner, setShowSpinner] = useState(false)
-  const capturingRef = useRef(false)
-
-  devLog(widgetId, { hasSnapshot, isExternal, queueReady, preloadIframe, showIframe, iframeLoaded, src })
-
-  // Start loading when the queue grants this widget a slot
-  useEffect(() => {
-    if (queueReady && !preloadIframe) {
-      devLog(widgetId, 'queue ready → loading iframe')
-      setPreloadIframe(true)
-      setShowIframe(true)
-    }
-  }, [queueReady, preloadIframe])
-
-  // Release the queue slot once the iframe has loaded or user clicked to interact
-  useEffect(() => {
-    if (iframeLoaded) {
-      devLog(widgetId, 'iframe loaded')
-      releaseSlot()
-    }
-  }, [iframeLoaded, releaseSlot])
-
-  // Click-to-interact: immediately start iframe and release queue slot for others
-  const activateIframe = useCallback(() => {
-    devLog(widgetId, 'user activated → jumping queue')
-    setShowIframe(true)
-    setPreloadIframe(true)
-    releaseSlot()
-  }, [releaseSlot])
-
-  // Show spinner only after 500ms of loading
-  useEffect(() => {
-    if (showIframe && !iframeLoaded && hasSnapshot) {
-      const timer = setTimeout(() => setShowSpinner(true), 500)
-      return () => clearTimeout(timer)
-    }
-    setShowSpinner(false)
-  }, [showIframe, iframeLoaded, hasSnapshot])
+  const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasTheme())
+  const [brokenSnaps, setBrokenSnaps] = useState({})
 
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
   const iframeRef = useRef(null)
+  const captureOnReadyRef = useRef(false)
+  const exitSessionRef = useRef(0)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
+  const resizeTimerRef = useRef(null)
+  const prevInteractiveRef = useRef(false)
+
+  // Snapshot capture hook — only active in dev mode (onUpdate present)
+  const isExternal = /^https?:\/\//.test(src || '')
+  const { iframeReady, requestCapture } = useSnapshotCapture({
+    iframeRef,
+    widgetId,
+    onUpdate: isExternal ? null : onUpdate,
+    canvasTheme,
+  })
+
+  // Determine available snapshots for layered rendering
+  const isDark = canvasTheme?.startsWith('dark')
+  const hasLightSnap = !isExternal && !!(snapshotLight && snapshotLight.includes(widgetId) && !brokenSnaps[snapshotLight])
+  const hasDarkSnap = !isExternal && !!(snapshotDark && snapshotDark.includes(widgetId) && !brokenSnaps[snapshotDark])
+  const hasAnySnap = hasLightSnap || hasDarkSnap
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -137,6 +128,12 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     return `${base}${sep}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
   }, [rawSrc, canvasTheme])
 
+  useIframeDevLogs({
+    widget: 'PrototypeEmbed',
+    loaded: showIframe && Boolean(iframeSrc),
+    src: iframeSrc,
+  })
+
   // Build prototype index for the picker
   const prototypeIndex = useMemo(() => {
     try {
@@ -151,16 +148,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     const groups = []
     const idx = prototypeIndex
 
-    // Collect all prototypes (from folders first, then ungrouped)
-    const allProtos = []
-    for (const folder of (idx.sorted?.title?.folders || idx.folders || [])) {
-      for (const proto of folder.prototypes || []) {
-        if (!proto.isExternal) allProtos.push(proto)
-      }
-    }
-    for (const proto of (idx.sorted?.title?.prototypes || idx.prototypes || [])) {
-      if (!proto.isExternal) allProtos.push(proto)
-    }
+    const allProtos = listInternalPrototypes(idx)
 
     for (const proto of allProtos) {
       if (proto.hideFlows && proto.flows.length === 1) {
@@ -216,6 +204,35 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       .filter(Boolean)
   }, [pickerGroups, filter])
 
+  const prototypeName = useMemo(() => {
+    const currentRoute = normalizeRoutePath(src, basePath) || normalizeRoutePath(rawSrc, basePath)
+    if (!currentRoute) return ''
+
+    let bestMatchName = ''
+    let bestMatchLength = -1
+
+    for (const proto of listInternalPrototypes(prototypeIndex)) {
+      const candidateRoutes = [
+        `/${proto.dirName}`,
+        ...(proto.flows || []).map((flow) => flow.route),
+      ]
+      for (const candidate of candidateRoutes) {
+        const candidateRoute = normalizeRoutePath(candidate, basePath)
+        if (!candidateRoute || candidateRoute === '/') continue
+        if (currentRoute === candidateRoute || currentRoute.startsWith(`${candidateRoute}/`)) {
+          if (candidateRoute.length > bestMatchLength) {
+            bestMatchLength = candidateRoute.length
+            bestMatchName = proto.name || ''
+          }
+        }
+      }
+    }
+
+    return bestMatchName
+  }, [prototypeIndex, src, rawSrc, basePath])
+
+  const prototypeTitle = prototypeName || label || 'Prototype'
+
   const hasPicker = pickerGroups.length > 0
 
   useEffect(() => {
@@ -227,27 +244,64 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     }
   }, [editing, hasPicker])
 
-  // Exit interactive mode when clicking outside the embed
   useEffect(() => {
-    if (!interactive) return
+    if (!showIframe) setIframeLoaded(false)
+  }, [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.
+  useEffect(() => {
+    if (!interactive || expanded) return
     function handlePointerDown(e) {
       if (embedRef.current && !embedRef.current.contains(e.target)) {
+        const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
+        if (chromeEl) return
+
         setInteractive(false)
+        if (onUpdate && !isExternal && iframeLoaded && iframeRef.current?.contentWindow) {
+          // Keep iframe mounted but hidden for background capture
+          if (iframeRef.current) iframeRef.current.style.visibility = 'hidden'
+          const session = ++exitSessionRef.current
+          requestCapture({ force: true }).then(() => {
+            if (exitSessionRef.current !== session) return
+            setShowIframe(false)
+          })
+        } else {
+          setShowIframe(false)
+        }
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive])
+  }, [interactive, expanded, onUpdate, isExternal, iframeLoaded, requestCapture])
 
   useEffect(() => {
-    function readToolbarTheme() {
-      setCanvasTheme(resolveCanvasThemeFromStorage())
-    }
-    readToolbarTheme()
-    document.addEventListener('storyboard:theme:changed', readToolbarTheme)
-    return () => document.removeEventListener('storyboard:theme:changed', readToolbarTheme)
+    const readTheme = () => setCanvasTheme(resolveCanvasTheme())
+    readTheme()
+    document.addEventListener('storyboard:theme:changed', readTheme)
+    return () => document.removeEventListener('storyboard:theme:changed', readTheme)
   }, [])
 
+  // Capture snapshot on first iframe ready (when no existing snapshot)
+  useEffect(() => {
+    if (!iframeReady || !onUpdate || isExternal) return
+    if (!hasAnySnap) {
+      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()
+    }
+  }, [iframeReady, requestCapture])
+
+  // Cleanup resize timer on unmount
+  useEffect(() => () => clearTimeout(resizeTimerRef.current), [])
+
   // Close expanded modal on Escape
   useEffect(() => {
     if (!expanded) return
@@ -311,89 +365,18 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         }
         return
       }
-
-      // Snapshot capture responses
-      if (e.data?.type === 'storyboard:embed:snapshot') {
-        if (e.data.error) {
-          console.warn('[canvas] Snapshot capture failed:', e.data.error)
-          return
-        }
-        handleSnapshotResult(e.data.requestId, e.data.dataUrl)
-        return
-      }
-
-      // Snapshot-ready signal — iframe content has fully rendered
-      if (e.data?.type === 'storyboard:embed:snapshot-ready') {
-        setIframeLoaded(true)
-        if (onUpdate && !isExternal) requestSnapshotCapture()
-      }
     }
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [src, props, onUpdate, isExternal])
-
-  // Request a snapshot capture from the iframe
-  const requestSnapshotCapture = useCallback(() => {
-    if (!iframeRef.current?.contentWindow || capturingRef.current || isExternal) return
-    capturingRef.current = true
-    const requestId = `snap-${Date.now()}`
-    iframeRef.current.contentWindow.postMessage({
-      type: 'storyboard:embed:capture',
-      requestId,
-    }, '*')
-  }, [isExternal])
-
-  // Handle a completed snapshot — upload and persist as widget prop
-  const handleSnapshotResult = useCallback(async (requestId, dataUrl) => {
-    if (!dataUrl || !onUpdate || !widgetId) return
-    capturingRef.current = false
-    try {
-      const result = await uploadImage(dataUrl, `snapshot-${widgetId}`)
-      if (!result?.success || !result?.filename) return
-      const imageUrl = `/_storyboard/canvas/images/${result.filename}`
-      const themeKey = canvasTheme?.startsWith('dark') ? 'snapshotDark' : 'snapshotLight'
-      onUpdate?.({ [themeKey]: imageUrl })
-    } catch (err) {
-      console.warn('[canvas] Failed to upload snapshot:', err)
-    }
-  }, [onUpdate, canvasTheme, widgetId])
-
-  // Re-capture snapshots after resize (debounced)
-  const resizeCaptureTimer = useRef(null)
-  const triggerResizeCapture = useCallback(() => {
-    if (!onUpdate || isExternal) return
-    clearTimeout(resizeCaptureTimer.current)
-    resizeCaptureTimer.current = setTimeout(() => {
-      requestSnapshotCapture()
-    }, 2000)
-  }, [requestSnapshotCapture, isExternal, onUpdate])
-
-  // Re-capture when src changes (new prototype selected)
-  const prevSrcRef = useRef(src)
-  useEffect(() => {
-    if (src && src !== prevSrcRef.current && onUpdate && !isExternal && showIframe) {
-      prevSrcRef.current = src
-      // Wait for the new page to render
-      const timer = setTimeout(() => requestSnapshotCapture(), 4000)
-      return () => clearTimeout(timer)
-    }
-    prevSrcRef.current = src
-  }, [src, onUpdate, isExternal, showIframe, requestSnapshotCapture])
-
-  // Re-capture for the alternate theme variant when theme changes
-  const prevThemeRef = useRef(canvasTheme)
-  useEffect(() => {
-    if (canvasTheme !== prevThemeRef.current && onUpdate && !isExternal && showIframe) {
-      prevThemeRef.current = canvasTheme
-      const timer = setTimeout(() => requestSnapshotCapture(), 3000)
-      return () => clearTimeout(timer)
-    }
-    prevThemeRef.current = canvasTheme
-  }, [canvasTheme, onUpdate, isExternal, showIframe, requestSnapshotCapture])
+  }, [src, props, onUpdate])
 
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
-  const enterInteractive = useCallback(() => setInteractive(true), [])
+  const enterInteractive = useCallback(() => {
+    exitSessionRef.current++
+    setShowIframe(true)
+    setInteractive(true)
+  }, [])
 
   // Expose imperative action handlers for WidgetChrome
   useImperativeHandle(ref, () => ({
@@ -401,12 +384,20 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       if (actionId === 'edit') {
         setEditing(true)
       } else if (actionId === 'expand') {
+        setShowIframe(true)
         setExpanded(true)
       } else if (actionId === 'open-external') {
         if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
+      } else if (actionId === 'refresh-thumbnail') {
+        if (iframeReady && iframeRef.current?.contentWindow) {
+          requestCapture()
+        } else {
+          captureOnReadyRef.current = true
+          setShowIframe(true)
+        }
       }
     },
-  }), [rawSrc])
+  }), [rawSrc, iframeReady, requestCapture])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
@@ -435,6 +426,10 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         className={styles.embed}
         style={{ width, height, ...chromeVars }}
       >
+        <div className={styles.header}>
+          <span className={styles.headerIcon}><CollageFrameIcon size={16} /></span>
+          <span className={styles.headerTitle}>{prototypeTitle}</span>
+        </div>
         {editing ? (
           <div
             className={styles.pickerPanel}
@@ -518,35 +513,35 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
           </div>
         ) : iframeSrc ? (
           <>
-            {/* Snapshot image — shown until iframe is fully loaded */}
-            {hasSnapshot && !(showIframe && iframeLoaded) && (
-              <div className={styles.iframeContainer}>
+            <div
+              ref={inlineContainerRef}
+              className={styles.iframeContainer}
+              style={expanded ? { visibility: 'hidden' } : undefined}
+            >
+              {/* Snapshot layer — both themes always in DOM for instant swap */}
+              {hasLightSnap && (
                 <img
-                  src={basePath + currentSnapshot}
-                  alt={label || 'Prototype preview'}
+                  src={snapshotLight}
                   className={styles.snapshotImage}
-                  style={{ width, height }}
+                  style={(isDark && hasDarkSnap) ? { visibility: 'hidden' } : undefined}
+                  alt={`${prototypeTitle} snapshot`}
                   draggable={false}
+                  onError={() => setBrokenSnaps(prev => ({ ...prev, [snapshotLight]: true }))}
                 />
-                {showIframe && !iframeLoaded && showSpinner && (
-                  <div className={styles.snapshotSpinner}>
-                    <div className={styles.spinner} />
-                  </div>
-                )}
-              </div>
-            )}
+              )}
+              {hasDarkSnap && (
+                <img
+                  src={snapshotDark}
+                  className={styles.snapshotImage}
+                  style={(!isDark && hasLightSnap) ? { visibility: 'hidden' } : undefined}
+                  alt={`${prototypeTitle} snapshot`}
+                  draggable={false}
+                  onError={() => setBrokenSnaps(prev => ({ ...prev, [snapshotDark]: true }))}
+                />
+              )}
 
-            {/* Iframe — preloaded on hover, revealed after load */}
-            {(preloadIframe || showIframe) && (
-              <div
-                ref={inlineContainerRef}
-                className={styles.iframeContainer}
-                style={
-                  expanded ? { visibility: 'hidden' }
-                  : (hasSnapshot && !(showIframe && iframeLoaded)) ? { position: 'absolute', top: 0, left: 0, opacity: 0, pointerEvents: 'none' }
-                  : undefined
-                }
-              >
+              {/* Iframe layer — on top, transparent until loaded */}
+              {showIframe && (
                 <iframe
                   ref={iframeRef}
                   src={iframeSrc}
@@ -556,22 +551,28 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                     height: height / scale,
                     transform: `scale(${scale})`,
                     transformOrigin: '0 0',
+                    ...(iframeLoaded ? {} : { opacity: 0 }),
                   }}
-                  title={label || 'Prototype embed'}
+                  onLoad={() => setIframeLoaded(true)}
+                  title={`${prototypeTitle} prototype`}
                   sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
                 />
-              </div>
-            )}
+              )}
+
+              {/* Placeholder — only when no snapshots and no iframe */}
+              {!hasAnySnap && !showIframe && (
+                <div className={styles.placeholder}>
+                  <CollageFrameIcon size={36} />
+                  <span className={styles.placeholderLabel}>{`${prototypeTitle} prototype`}</span>
+                </div>
+              )}
+            </div>
 
             {!interactive && !expanded && (
               <div
                 className={overlayStyles.interactOverlay}
-                onPointerEnter={() => {
-                  if (!preloadIframe) setPreloadIframe(true)
-                }}
                 onClick={(e) => {
                   if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
-                  activateIframe()
                   enterInteractive()
                 }}
                 role="button"
@@ -580,7 +581,6 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                   if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault()
                     e.stopPropagation()
-                    activateIframe()
                     enterInteractive()
                   }
                 }}
@@ -620,7 +620,9 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
             function onUp() {
               document.removeEventListener('mousemove', onMove)
               document.removeEventListener('mouseup', onUp)
-              triggerResizeCapture()
+              // Recapture snapshot after resize (debounced)
+              clearTimeout(resizeTimerRef.current)
+              resizeTimerRef.current = setTimeout(() => requestCapture(), 1500)
             }
             document.addEventListener('mousemove', onMove)
             document.addEventListener('mouseup', onUp)

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

@@ -7,49 +7,91 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
-.iframeContainer {
-  width: 100%;
-  height: 100%;
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
 }
 
-.iframe {
-  border: none;
-  display: block;
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
 }
 
-.snapshotImage {
-  display: block;
-  object-fit: cover;
-  object-position: top left;
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.iframeContainer {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+  overflow: hidden;
 }
 
-.snapshotSpinner {
+.placeholder {
   position: absolute;
   inset: 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.08);
-  animation: fadeIn 150ms ease;
+  gap: 8px;
+  color: var(--fgColor-muted, #656d76);
+  text-align: center;
+}
+
+.placeholderIcon {
+  width: 36px;
+  height: 36px;
+}
+
+.placeholderLabel {
+  font-size: 13px;
+  font-weight: 500;
 }
 
 .spinner {
   width: 24px;
   height: 24px;
-  border: 2.5px solid var(--borderColor-default, #d0d7de);
-  border-top-color: var(--fgColor-accent, #0969da);
+  border: 3px solid var(--borderColor-muted, #d0d7de);
+  border-top-color: var(--fgColor-accent, #2f81f7);
   border-radius: 50%;
-  animation: spin 0.6s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
+  from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+.iframe {
+  border: none;
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+
+.snapshotImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+  display: block;
+  pointer-events: none;
 }
 
 .empty {