@dfosco/storyboard-react 4.0.0-beta.2 → 4.0.0-beta.20

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -4,7 +4,9 @@ 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 styles from './PrototypeEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 function formatName(name) {
   return name
@@ -29,25 +31,29 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }, ref) {
+export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
   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 basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
   const rawSrc = useMemo(() => {
     if (!src) return ''
     if (/^https?:\/\//.test(src)) return src
-    // Strip stale branch prefixes from stored src (e.g. /branch--old-feat/Page)
     const cleaned = src.replace(/^\/branch--[^/]+/, '')
     if (baseSegment && cleaned.startsWith(basePath)) return cleaned
     if (baseSegment && cleaned.startsWith(baseSegment)) return `/${cleaned}`
     return `${basePath}${cleaned}`
   }, [src, basePath, baseSegment])
 
+  const isExternal = /^https?:\/\//.test(rawSrc)
   const scale = zoom / 100
 
   const [editing, setEditing] = useState(false)
@@ -55,6 +61,28 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
   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
+  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)
+
+  // 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 inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
@@ -232,20 +260,100 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     }
   }, [expanded])
 
-  // Listen for navigation events from the embedded prototype iframe
+  // Listen for messages from the embedded prototype iframe
   useEffect(() => {
     function handleMessage(e) {
-      if (e.source !== iframeRef.current?.contentWindow) return
-      if (e.data?.type !== 'storyboard:embed:navigate') return
-      const newSrc = e.data.src
-      if (newSrc && newSrc !== src) {
-        const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
-        onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
+      if (!iframeRef.current?.contentWindow) return
+      if (e.source !== iframeRef.current.contentWindow) return
+
+      // Navigation events
+      if (e.data?.type === 'storyboard:embed:navigate') {
+        const newSrc = e.data.src
+        if (newSrc && newSrc !== src) {
+          const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
+          onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
+        }
+        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])
+  }, [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])
 
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
@@ -260,15 +368,9 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
         setExpanded(true)
       } else if (actionId === 'open-external') {
         if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
-      } else if (actionId === 'zoom-in') {
-        const step = zoom < 75 ? 5 : 25
-        onUpdate?.({ zoom: Math.min(200, zoom + step) })
-      } else if (actionId === 'zoom-out') {
-        const step = zoom <= 75 ? 5 : 25
-        onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [rawSrc, zoom, onUpdate])
+  }), [rawSrc])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
@@ -380,30 +482,78 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
           </div>
         ) : iframeSrc ? (
           <>
-            <div
-              ref={inlineContainerRef}
-              className={styles.iframeContainer}
-              style={expanded ? { visibility: 'hidden' } : undefined}
-            >
-              <iframe
-                ref={iframeRef}
-                src={iframeSrc}
-                className={styles.iframe}
-                style={{
-                  width: width / scale,
-                  height: height / scale,
-                  transform: `scale(${scale})`,
-                  transformOrigin: '0 0',
-                }}
-                title={label || 'Prototype embed'}
-                sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
-              />
-            </div>
+            {/* Snapshot image — shown until iframe is fully loaded */}
+            {hasSnapshot && !(showIframe && iframeLoaded) && (
+              <div className={styles.iframeContainer}>
+                <img
+                  src={basePath + currentSnapshot}
+                  alt={label || 'Prototype preview'}
+                  className={styles.snapshotImage}
+                  style={{ width, height }}
+                  draggable={false}
+                />
+                {showIframe && !iframeLoaded && showSpinner && (
+                  <div className={styles.snapshotSpinner}>
+                    <div className={styles.spinner} />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 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
+                  ref={iframeRef}
+                  src={iframeSrc}
+                  className={styles.iframe}
+                  style={{
+                    width: width / scale,
+                    height: height / scale,
+                    transform: `scale(${scale})`,
+                    transformOrigin: '0 0',
+                  }}
+                  title={label || 'Prototype embed'}
+                  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+                />
+              </div>
+            )}
+
             {!interactive && !expanded && (
               <div
-                className={styles.dragOverlay}
-                onDoubleClick={enterInteractive}
-              />
+                className={overlayStyles.interactOverlay}
+                onPointerEnter={() => {
+                  if (!preloadIframe) setPreloadIframe(true)
+                }}
+                onClick={(e) => {
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  setShowIframe(true)
+                  setPreloadIframe(true)
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    setShowIframe(true)
+                    setPreloadIframe(true)
+                    enterInteractive()
+                  }
+                }}
+                aria-label="Click to interact with prototype"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
             )}
           </>
         ) : (
@@ -436,6 +586,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
             function onUp() {
               document.removeEventListener('mousemove', onMove)
               document.removeEventListener('mouseup', onUp)
+              triggerResizeCapture()
             }
             document.addEventListener('mousemove', onMove)
             document.addEventListener('mouseup', onUp)
@@ -450,8 +601,13 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
         style={expanded ? undefined : { display: 'none' }}
         onClick={() => setExpanded(false)}
         onPointerDown={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          if (e.key === 'Escape') setExpanded(false)
+        }}
         onWheel={(e) => e.stopPropagation()}
+        tabIndex={-1}
+        ref={(el) => { if (el && expanded) el.focus() }}
       >
         <div
           ref={modalContainerRef}

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

@@ -18,11 +18,38 @@
   display: block;
 }
 
-.dragOverlay {
+.snapshotImage {
+  display: block;
+  object-fit: cover;
+  object-position: top left;
+}
+
+.snapshotSpinner {
   position: absolute;
   inset: 0;
-  z-index: 1;
-  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.08);
+  animation: fadeIn 150ms ease;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2.5px solid var(--borderColor-default, #d0d7de);
+  border-top-color: var(--fgColor-accent, #0969da);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 .empty {

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

@@ -20,6 +20,11 @@
   box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.35);
 }
 
+/* Hide own border when parent widget slot is selected (avoid double focus ring) */
+:global([data-widget-selected]) .sticky {
+  border-color: transparent;
+}
+
 .text {
   padding: 16px 20px;
   margin: 0;

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

@@ -13,16 +13,16 @@ describe('stickyNoteSchema', () => {
     )
   })
 
-  it('does not include default values for width/height so new widgets size naturally', () => {
+  it('includes default values for width/height from config', () => {
     const defaults = getDefaults(stickyNoteSchema)
-    expect(defaults).not.toHaveProperty('width')
-    expect(defaults).not.toHaveProperty('height')
+    expect(defaults).toHaveProperty('width', 270)
+    expect(defaults).toHaveProperty('height', 170)
   })
 
-  it('returns null when width/height are not saved in props', () => {
+  it('returns default value when width/height are not saved in props', () => {
     const props = { text: 'hello', color: 'yellow' }
-    expect(readProp(props, 'width', stickyNoteSchema)).toBeNull()
-    expect(readProp(props, 'height', stickyNoteSchema)).toBeNull()
+    expect(readProp(props, 'width', stickyNoteSchema)).toBe(270)
+    expect(readProp(props, 'height', stickyNoteSchema)).toBe(170)
   })
 
   it('returns saved width/height when present in props', () => {
@@ -33,11 +33,11 @@ describe('stickyNoteSchema', () => {
 })
 
 describe('StickyNote', () => {
-  it('renders without explicit dimensions when width/height are not saved', () => {
+  it('applies default dimensions as inline styles when not saved in props', () => {
     const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} />)
     const sticky = container.querySelector('article')
-    expect(sticky.style.width).toBe('')
-    expect(sticky.style.height).toBe('')
+    expect(sticky.style.width).toBe('270px')
+    expect(sticky.style.height).toBe('170px')
   })
 
   it('applies saved dimensions as inline styles', () => {