@dfosco/storyboard-react 4.0.0-beta.35 → 4.0.0-beta.37

package/src/canvas/CanvasPage.jsx

@@ -1663,6 +1663,20 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     return () => document.removeEventListener('wheel', handleWheel)
   }, [])
 
+  // Receive cmd+wheel events forwarded from prototype/story iframes
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.data?.type !== 'storyboard:embed:wheel') return
+      zoomAccum.current += -e.data.deltaY
+      const step = Math.trunc(zoomAccum.current)
+      if (step === 0) return
+      zoomAccum.current -= step
+      applyZoom(zoomRef.current + step)
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [])
+
   // Touch pinch-to-zoom for mobile — two-finger pinch zooms the canvas
   const pinchState = useRef({ active: false, startDist: 0, startZoom: 0, centerX: 0, centerY: 0 })
   useEffect(() => {

package/src/canvas/widgets/LinkPreview.jsx

@@ -228,6 +228,38 @@ export default function LinkPreview({ id, props, onUpdate, resizable }) {
     )
   }
 
+  const ogImage = props?.ogImage || null
+  const description = props?.description || ''
+  const canEdit = typeof onUpdate === 'function'
+  const cardRef = useRef(null)
+  const inputRef = useRef(null)
+  const [editing, setEditing] = useState(false)
+  const [editValue, setEditValue] = useState(title)
+
+  // Sync editValue when title prop changes externally
+  useEffect(() => { setEditValue(title) }, [title])
+
+  const startEditing = useCallback(() => {
+    if (!canEdit) return
+    setEditValue(title)
+    setEditing(true)
+  }, [canEdit, title])
+
+  const commitEdit = useCallback(() => {
+    setEditing(false)
+    const trimmed = editValue.trim()
+    if (trimmed !== title) {
+      onUpdate?.({ title: trimmed })
+    }
+  }, [editValue, title, onUpdate])
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
   const sizeStyle = (width || height)
     ? { ...(width ? { width: `${width}px` } : {}), ...(height ? { minHeight: `${height}px` } : {}) }
     : undefined
@@ -238,14 +270,46 @@ export default function LinkPreview({ id, props, onUpdate, resizable }) {
   const handleResize = (w, h) => onUpdate?.({ width: w, height: h })
 
   return (
-    <WidgetWrapper>
-      <div className={styles.card} style={sizeStyle}>
-        <div className={styles.header}>
-          <span className={styles.icon}>🔗</span>
-          <div className={styles.text}>
-            {title && <p className={styles.title}>{title}</p>}
-          </div>
-        </div>
+    <div ref={cardRef} className={styles.card} style={sizeStyle}>
+      {ogImage && (
+        <img
+          className={styles.ogImage}
+          src={ogImage}
+          alt=""
+          loading="lazy"
+          onError={(e) => { e.target.style.display = 'none' }}
+        />
+      )}
+      <div className={styles.body}>
+        {editing ? (
+          <input
+            ref={inputRef}
+            className={styles.titleInput}
+            data-canvas-allow-text-selection
+            type="text"
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onBlur={commitEdit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commitEdit()
+              if (e.key === 'Escape') setEditing(false)
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <p
+            className={styles.title}
+            data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+            onDoubleClick={startEditing}
+            role={canEdit ? 'button' : undefined}
+            tabIndex={canEdit ? 0 : undefined}
+            onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') startEditing() } : undefined}
+          >
+            {title || hostname || url || 'Untitled'}
+          </p>
+        )}
+        {description && <p className={styles.description}>{description}</p>}
         <a
           href={url || '#'}
           target="_blank"
@@ -257,7 +321,7 @@ export default function LinkPreview({ id, props, onUpdate, resizable }) {
           {hostname || url}
         </a>
       </div>
-      {resizable && <ResizeHandle width={width} height={height} onResize={handleResize} />}
-    </WidgetWrapper>
+      {resizable && <ResizeHandle targetRef={cardRef} width={width} height={height} onResize={handleResize} />}
+    </div>
   )
 }

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

@@ -87,7 +87,7 @@
   border-radius: 4px;
   font-size: 12px;
   font-weight: 400;
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
 .preview ul {
@@ -169,7 +169,7 @@
   padding: 0;
   font-size: 12px;
   font-weight: 400;
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   white-space: pre;
   word-break: normal;
   overflow-wrap: normal;

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -133,19 +133,22 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       .filter(Boolean)
   }, [pickerGroups, filter])
 
-  const prototypeName = useMemo(() => {
-    if (!src) return ''
+  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--[^/]+/, '')
-        const cleanSrc = src.replace(/^\/branch--[^/]+/, '')
-        if (cleanRoute === cleanSrc) return item.name
+        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 ''
-  }, [src, pickerGroups])
+    return label || 'Prototype'
+  }, [src, label, pickerGroups])
 
-  const prototypeTitle = prototypeName || label || 'Prototype'
   const hasPicker = pickerGroups.length > 0
 
   useIframeDevLogs({
@@ -400,7 +403,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
           </div>
         )}
       </div>
-      {resizable && <ResizeHandle width={width} height={height} onResize={handleResize} />}
+      {resizable && <ResizeHandle targetRef={embedRef} width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
     {createPortal(
       <div