@dfosco/storyboard-react 4.0.0-beta.3 → 4.0.0-beta.30

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -3,8 +3,22 @@ import { createPortal } from 'react-dom'
 import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
-import { getEmbedChromeVars } from './embedTheme.js'
+import { getEmbedChromeVars, subscribeCanvasTheme } from './embedTheme.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import { useSnapshotCapture } from './useSnapshotCapture.js'
+import { enqueueRefresh, cancelRefresh, REVEAL_INTERVAL } from './refreshQueue.js'
 import styles from './PrototypeEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+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) {
   return name
@@ -12,36 +26,54 @@ 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({ 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
+  const snapshot = props?.snapshot || props?.snapshotLight || props?.snapshotDark || ''
 
   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}`
@@ -52,15 +84,36 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
 
   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())
+  const [canvasTheme, setCanvasTheme] = useState('light')
+  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 teardownTimerRef = useRef(null)
   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,
+    showIframe,
+  })
+
+  // Single snapshot — backward compat reads snapshotLight/snapshotDark if snapshot is missing
+  const hasSnap = !isExternal && !!(snapshot && snapshot.includes(widgetId) && !brokenSnaps[snapshot])
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -70,8 +123,14 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     const base = hashIdx >= 0 ? rawSrc.slice(0, hashIdx) : rawSrc
     const hash = hashIdx >= 0 ? rawSrc.slice(hashIdx) : ''
     const sep = base.includes('?') ? '&' : '?'
-    return `${base}${sep}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
-  }, [rawSrc, canvasTheme])
+    return `${base}${sep}_sb_embed&_sb_theme_target=prototype${hash}`
+  }, [rawSrc])
+
+  useIframeDevLogs({
+    widget: 'PrototypeEmbed',
+    loaded: showIframe && Boolean(iframeSrc),
+    src: iframeSrc,
+  })
 
   // Build prototype index for the picker
   const prototypeIndex = useMemo(() => {
@@ -87,16 +146,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     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) {
@@ -152,6 +202,35 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
       .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(() => {
@@ -163,25 +242,129 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     }
   }, [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) {
+          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 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(() => {
+            if (exitSessionRef.current !== session) return
+            setShowIframe(false)
+          }, 2 * 60 * 1000)
+        } else {
+          setShowIframe(false)
+        }
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive])
+  }, [interactive, expanded, onUpdate, isExternal, iframeLoaded, requestCapture])
 
+  useEffect(() => subscribeCanvasTheme({
+    anchorRef: embedRef,
+    onTheme: setCanvasTheme,
+  }), [])
+
+  // On canvas theme change, enqueue a background snapshot refresh.
+  // Skips the initial render (canvasThemeInitRef tracks first value).
+  const canvasThemeInitRef = useRef(true)
+  const refreshMetaRef = useRef(null)
   useEffect(() => {
-    function readToolbarTheme() {
-      setCanvasTheme(resolveCanvasThemeFromStorage())
+    if (canvasThemeInitRef.current) { canvasThemeInitRef.current = false; return }
+    if (isExternal || !onUpdate || interactive) return
+    const rect = embedRef.current?.getBoundingClientRect()
+    enqueueRefresh(widgetId, ({ revealOrder, batchStart }) => {
+      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)
+  }, [canvasTheme]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Capture snapshot on first iframe ready (when no existing snapshot)
+  useEffect(() => {
+    if (!iframeReady || !onUpdate || isExternal) return
+    if (!hasSnap) {
+      requestCapture()
     }
-    readToolbarTheme()
-    document.addEventListener('storyboard:theme:changed', readToolbarTheme)
-    return () => document.removeEventListener('storyboard:theme:changed', readToolbarTheme)
+  }, [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 timers on unmount
+  useEffect(() => () => {
+    clearTimeout(resizeTimerRef.current)
+    clearTimeout(teardownTimerRef.current)
   }, [])
 
   // Close expanded modal on Escape
@@ -232,15 +415,20 @@ 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
       }
     }
     window.addEventListener('message', handleMessage)
@@ -249,7 +437,13 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
 
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
-  const enterInteractive = useCallback(() => setInteractive(true), [])
+  const enterInteractive = useCallback(() => {
+    exitSessionRef.current++
+    clearTimeout(teardownTimerRef.current)
+    cancelRefresh(widgetId)
+    setShowIframe(true)
+    setInteractive(true)
+  }, [widgetId])
 
   // Expose imperative action handlers for WidgetChrome
   useImperativeHandle(ref, () => ({
@@ -257,18 +451,20 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
       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 === '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) })
+      } else if (actionId === 'refresh-thumbnail') {
+        if (iframeReady && iframeRef.current?.contentWindow) {
+          requestCapture()
+        } else {
+          captureOnReadyRef.current = true
+          setShowIframe(true)
+        }
       }
     },
-  }), [rawSrc, zoom, onUpdate])
+  }), [rawSrc, iframeReady, requestCapture])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
@@ -297,6 +493,10 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
         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}
@@ -385,25 +585,66 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
               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"
-              />
+              {/* Snapshot layer — single image */}
+              {hasSnap && (
+                <img
+                  src={snapshot}
+                  className={styles.snapshotImage}
+                  alt={`${prototypeTitle} 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={{
+                    width: width / scale,
+                    height: height / scale,
+                    transform: `scale(${scale})`,
+                    transformOrigin: '0 0',
+                    transition: 'opacity 150ms ease',
+                    ...(iframeLoaded ? {} : { opacity: 0 }),
+                  }}
+                  onLoad={() => setIframeLoaded(true)}
+                  title={`${prototypeTitle} prototype`}
+                  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+                />
+              )}
+
+              {/* Placeholder — only when no snapshot and no iframe */}
+              {!hasSnap && !showIframe && (
+                <div className={styles.placeholder}>
+                  <CollageFrameIcon size={36} />
+                  <span className={styles.placeholderLabel}>{`${prototypeTitle} prototype`}</span>
+                </div>
+              )}
             </div>
+
             {!interactive && !expanded && (
               <div
-                className={styles.dragOverlay}
-                onDoubleClick={enterInteractive}
-              />
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    enterInteractive()
+                  }
+                }}
+                aria-label={hasSnap ? 'Click to interact with prototype' : 'Click to open prototype'}
+              >
+                <span className={overlayStyles.interactHint}>{hasSnap ? 'Click to interact' : 'Click to open'}</span>
+              </div>
             )}
           </>
         ) : (
@@ -436,6 +677,9 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
             function onUp() {
               document.removeEventListener('mousemove', onMove)
               document.removeEventListener('mouseup', onUp)
+              // Recapture snapshot after resize (debounced)
+              clearTimeout(resizeTimerRef.current)
+              resizeTimerRef.current = setTimeout(() => requestCapture(), 1500)
             }
             document.addEventListener('mousemove', onMove)
             document.addEventListener('mouseup', onUp)
@@ -450,8 +694,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

@@ -7,22 +7,92 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
+.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;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .iframeContainer {
+  position: relative;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 37px);
   overflow: hidden;
 }
 
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  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: 3px solid var(--borderColor-muted, #d0d7de);
+  border-top-color: var(--fgColor-accent, #2f81f7);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .iframe {
   border: none;
   display: block;
+  position: relative;
+  z-index: 1;
 }
 
-.dragOverlay {
+.snapshotImage {
   position: absolute;
   inset: 0;
-  z-index: 1;
-  cursor: grab;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+  display: block;
+  pointer-events: none;
+  transition: opacity 150ms ease;
 }
 
 .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', () => {