@dfosco/storyboard-react 4.0.0-beta.8 → 4.0.0

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -2,9 +2,22 @@ import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImper
 import { createPortal } from 'react-dom'
 import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import { getEmbedChromeVars } from './embedTheme.js'
+import { useIframeDevLogs } from './iframeDevLogs.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
@@ -18,18 +31,17 @@ function resolveCanvasThemeFromStorage() {
   try {
     const rawSync = localStorage.getItem('sb-theme-sync')
     if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
-  } catch {
-    // Ignore malformed sync settings
-  }
+  } catch { /* */ }
   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'
+  return typeof window.matchMedia === 'function' &&
+    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)
@@ -41,7 +53,6 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
   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}`
@@ -49,6 +60,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
+  const isExternal = /^https?:\/\//.test(src || '')
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)
@@ -64,30 +76,22 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
-    // External URLs are embedded as-is — storyboard query params only apply to local prototypes
     if (/^https?:\/\//.test(rawSrc)) return rawSrc
     const hashIdx = rawSrc.indexOf('#')
     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}`
+    return `${base}${sep}_sb_embed&_sb_hide_branch_bar&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
   }, [rawSrc, canvasTheme])
 
-  // Build prototype index for the picker
   const prototypeIndex = useMemo(() => {
-    try {
-      return buildPrototypeIndex()
-    } catch {
-      return { folders: [], prototypes: [], globalFlows: [], sorted: { title: { prototypes: [], folders: [] } } }
-    }
+    try { return buildPrototypeIndex() }
+    catch { return { folders: [], prototypes: [], globalFlows: [], sorted: { title: { prototypes: [], folders: [] } } } }
   }, [])
 
-  // Build grouped picker entries from the prototype index
   const pickerGroups = useMemo(() => {
     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 || []) {
@@ -97,45 +101,22 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     for (const proto of (idx.sorted?.title?.prototypes || idx.prototypes || [])) {
       if (!proto.isExternal) allProtos.push(proto)
     }
-
     for (const proto of allProtos) {
       if (proto.hideFlows && proto.flows.length === 1) {
-        groups.push({
-          label: proto.name,
-          items: [{ name: proto.name, route: proto.flows[0].route }],
-        })
+        groups.push({ label: proto.name, items: [{ name: proto.name, route: proto.flows[0].route }] })
       } else if (proto.flows.length > 0) {
-        groups.push({
-          label: proto.name,
-          items: proto.flows.map((f) => ({
-            name: f.meta?.title || formatName(f.name),
-            route: f.route,
-          })),
-        })
+        groups.push({ label: proto.name, items: proto.flows.map((f) => ({ name: f.meta?.title || formatName(f.name), route: f.route })) })
       } else {
-        groups.push({
-          label: proto.name,
-          items: [{ name: proto.name, route: `/${proto.dirName}` }],
-        })
+        groups.push({ label: proto.name, items: [{ name: proto.name, route: `/${proto.dirName}` }] })
       }
     }
-
-    // Global flows
     const gf = idx.globalFlows || []
     if (gf.length > 0) {
-      groups.push({
-        label: 'Other flows',
-        items: gf.map((f) => ({
-          name: f.meta?.title || formatName(f.name),
-          route: f.route,
-        })),
-      })
+      groups.push({ label: 'Other flows', items: gf.map((f) => ({ name: f.meta?.title || formatName(f.name), route: f.route })) })
     }
-
     return groups
   }, [prototypeIndex])
 
-  // Filter groups by search text
   const filteredGroups = useMemo(() => {
     if (!filter) return pickerGroups
     const q = filter.toLowerCase()
@@ -152,8 +133,30 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
       .filter(Boolean)
   }, [pickerGroups, filter])
 
+  const prototypeTitle = useMemo(() => {
+    if (!src) return label || 'Prototype'
+    const cleanSrc = src.replace(/^\/branch--[^/]+/, '')
+    for (const group of pickerGroups) {
+      for (const item of group.items) {
+        const cleanRoute = item.route.replace(/^\/branch--[^/]+/, '')
+        if (cleanRoute === cleanSrc) {
+          // If the flow name matches the group name, just show the name
+          if (item.name === group.label) return group.label
+          return `${group.label} · ${item.name}`
+        }
+      }
+    }
+    return label || 'Prototype'
+  }, [src, label, pickerGroups])
+
   const hasPicker = pickerGroups.length > 0
 
+  useIframeDevLogs({
+    widget: 'PrototypeEmbed',
+    loaded: Boolean(iframeSrc && interactive),
+    src: iframeSrc,
+  })
+
   useEffect(() => {
     if (editing && hasPicker && filterRef.current) {
       filterRef.current.focus()
@@ -165,15 +168,17 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
 
   // Exit interactive mode when clicking outside the embed
   useEffect(() => {
-    if (!interactive) return
+    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)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive])
+  }, [interactive, expanded, widgetId])
 
   useEffect(() => {
     function readToolbarTheme() {
@@ -197,25 +202,18 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     return () => document.removeEventListener('keydown', handleKeyDown, true)
   }, [expanded])
 
-  // Reparent iframe DOM node between inline container and modal.
-  // Uses moveBefore() (Chrome 133+) which preserves the iframe's
-  // browsing context — no reload. Falls back to appendChild which
-  // will reload but still works functionally.
+  // Reparent iframe between inline and modal
   useEffect(() => {
     const iframe = iframeRef.current
     if (!iframe) return
-
     if (expanded && modalContainerRef.current) {
       iframe._savedClassName = iframe.className
       iframe._savedStyle = iframe.getAttribute('style') || ''
       iframe.className = styles.expandIframe
       iframe.removeAttribute('style')
       const target = modalContainerRef.current
-      if (target.moveBefore) {
-        target.moveBefore(iframe, target.firstChild)
-      } else {
-        target.prepend(iframe)
-      }
+      if (target.moveBefore) target.moveBefore(iframe, target.firstChild)
+      else target.prepend(iframe)
     } else if (!expanded && inlineContainerRef.current) {
       if (iframe._savedClassName !== undefined) {
         iframe.className = iframe._savedClassName
@@ -224,11 +222,8 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
         delete iframe._savedStyle
       }
       const target = inlineContainerRef.current
-      if (target.moveBefore) {
-        target.moveBefore(iframe, null)
-      } else {
-        target.appendChild(iframe)
-      }
+      if (target.moveBefore) target.moveBefore(iframe, null)
+      else target.appendChild(iframe)
     }
   }, [expanded])
 
@@ -251,7 +246,6 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
 
-  // Expose imperative action handlers for WidgetChrome
   useImperativeHandle(ref, () => ({
     handleAction(actionId) {
       if (actionId === 'edit') {
@@ -289,6 +283,10 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
     setFilter('')
   }
 
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
   return (
     <>
     <WidgetWrapper>
@@ -297,6 +295,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}
@@ -307,12 +309,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
               <>
                 <div className={styles.pickerHeader}>
                   <span className={styles.urlLabel}>Pick a prototype</span>
-                  <button
-                    type="button"
-                    className={styles.urlCancel}
-                    onClick={handleCancelEdit}
-                    aria-label="Cancel"
-                  >✕</button>
+                  <button type="button" className={styles.urlCancel} onClick={handleCancelEdit} aria-label="Cancel">✕</button>
                 </div>
                 <input
                   ref={filterRef}
@@ -327,23 +324,14 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
                   {filteredGroups.map((group) => (
                     <div key={group.label} className={styles.pickerGroup}>
                       {group.items.length === 1 && group.items[0].name === group.label ? (
-                        <button
-                          className={styles.pickerItem}
-                          role="option"
-                          onClick={() => handlePickRoute(group.items[0].route)}
-                        >
+                        <button className={styles.pickerItem} role="option" onClick={() => handlePickRoute(group.items[0].route)}>
                           {group.label}
                         </button>
                       ) : (
                         <>
                           <div className={styles.pickerGroupLabel}>{group.label}</div>
                           {group.items.map((item) => (
-                            <button
-                              key={item.route}
-                              className={styles.pickerItem}
-                              role="option"
-                              onClick={() => handlePickRoute(item.route)}
-                            >
+                            <button key={item.route} className={styles.pickerItem} role="option" onClick={() => handlePickRoute(item.route)}>
                               {item.name}
                             </button>
                           ))}
@@ -351,30 +339,17 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
                       )}
                     </div>
                   ))}
-                  {filteredGroups.length === 0 && (
-                    <div className={styles.pickerEmpty}>No matches</div>
-                  )}
+                  {filteredGroups.length === 0 && <div className={styles.pickerEmpty}>No matches</div>}
                 </div>
                 <div className={styles.pickerDivider} />
               </>
             )}
             <form className={styles.customUrlSection} onSubmit={handleSubmit}>
-              <label className={styles.urlLabel}>
-                {hasPicker ? 'Or enter a custom URL' : 'Prototype URL path'}
-              </label>
-              <input
-                ref={inputRef}
-                className={styles.urlInput}
-                type="text"
-                defaultValue={src}
-                placeholder="/MyPrototype/page"
-                onKeyDown={(e) => { if (e.key === 'Escape') handleCancelEdit() }}
-              />
+              <label className={styles.urlLabel}>{hasPicker ? 'Or enter a custom URL' : 'Prototype URL path'}</label>
+              <input ref={inputRef} className={styles.urlInput} type="text" defaultValue={src} placeholder="/MyPrototype/page" onKeyDown={(e) => { if (e.key === 'Escape') handleCancelEdit() }} />
               <div className={styles.urlActions}>
                 <button type="submit" className={styles.urlSave}>Save</button>
-                {!hasPicker && (
-                  <button type="button" className={styles.urlCancel} onClick={handleCancelEdit}>Cancel</button>
-                )}
+                {!hasPicker && <button type="button" className={styles.urlCancel} onClick={handleCancelEdit}>Cancel</button>}
               </div>
             </form>
           </div>
@@ -395,54 +370,40 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
                   transform: `scale(${scale})`,
                   transformOrigin: '0 0',
                 }}
-                title={label || 'Prototype embed'}
+                title={`${prototypeTitle} prototype`}
                 sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
               />
             </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="Click to interact with prototype"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
             )}
           </>
         ) : (
-          <div
-            className={styles.empty}
-            onDoubleClick={() => setEditing(true)}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
-          >
-            <p>Double-click to set prototype URL</p>
+          <div className={styles.empty} onClick={() => onUpdate && setEditing(true)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}>
+            <CollageFrameIcon size={36} />
+            <p>Click to set prototype URL</p>
           </div>
         )}
       </div>
-      {resizable && (
-        <div
-          className={styles.resizeHandle}
-          onMouseDown={(e) => {
-            e.stopPropagation()
-            e.preventDefault()
-            const startX = e.clientX
-            const startY = e.clientY
-            const startW = width
-            const startH = height
-            function onMove(ev) {
-              const newW = Math.max(200, startW + ev.clientX - startX)
-              const newH = Math.max(150, startH + ev.clientY - startY)
-              onUpdate?.({ width: newW, height: newH })
-            }
-            function onUp() {
-              document.removeEventListener('mousemove', onMove)
-              document.removeEventListener('mouseup', onUp)
-            }
-            document.addEventListener('mousemove', onMove)
-            document.addEventListener('mouseup', onUp)
-          }}
-          onPointerDown={(e) => e.stopPropagation()}
-        />
-      )}
+      {resizable && <ResizeHandle targetRef={embedRef} width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
     {createPortal(
       <div
@@ -453,18 +414,8 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
         onKeyDown={(e) => e.stopPropagation()}
         onWheel={(e) => e.stopPropagation()}
       >
-        <div
-          ref={modalContainerRef}
-          className={styles.expandContainer}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* iframe is reparented here via useEffect */}
-          <button
-            className={styles.expandClose}
-            onClick={() => setExpanded(false)}
-            aria-label="Close expanded view"
-            autoFocus
-          >✕</button>
+        <div ref={modalContainerRef} className={styles.expandContainer} onClick={(e) => e.stopPropagation()}>
+          <button className={styles.expandClose} onClick={() => setExpanded(false)} aria-label="Close expanded view" autoFocus>✕</button>
         </div>
       </div>,
       document.body

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', () => {