@dfosco/storyboard-react 4.0.0-beta.36 → 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

@@ -403,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

package/src/canvas/widgets/StoryWidget.jsx

@@ -270,7 +270,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
           </>
         )}
       </div>
-      {resizable && <ResizeHandle width={width} height={height} onResize={handleResize} />}
+      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
   )
 })

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

@@ -118,7 +118,7 @@
 }
 
 .codeLabel {
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
 .codeCloseBtn {
@@ -152,7 +152,7 @@
 .codeBlock pre {
   margin: 0;
   padding: var(--base-size-8, 8px) !important;
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.6;
@@ -163,7 +163,7 @@
 
 /* Fallback when no highlighted HTML (plain pre/code) */
 .codeBlock > code {
-  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.6;

package/src/index.js

@@ -35,7 +35,7 @@ export { FormContext } from './context/FormContext.js'
 // ModeSwitch and ToolbarShell UI moved to @dfosco/storyboard-svelte-ui
 
 // Viewfinder dashboard
-export { default as Viewfinder } from './Viewfinder.jsx'
+export { default as Viewfinder } from './ViewfinderNew.jsx'
 
 // Canvas
 export { default as CanvasPage } from './canvas/CanvasPage.jsx'

package/src/vite/data-plugin.js

@@ -1128,6 +1128,30 @@ export default function storyboardDataPlugin() {
       return []
     },
 
+    // Inject __SB_BRANCHES__ into HTML so the Viewfinder branch selector works.
+    // Reads .worktrees/ports.json to enumerate active worktree dev servers.
+    transformIndexHtml(html, ctx) {
+      // Only inject in dev mode
+      if (!ctx.server) return html
+
+      try {
+        const portsJsonPath = path.resolve(root, '.worktrees', 'ports.json')
+        if (!fs.existsSync(portsJsonPath)) return html
+
+        const ports = JSON.parse(fs.readFileSync(portsJsonPath, 'utf-8'))
+        const branches = Object.entries(ports)
+          .filter(([name]) => name !== 'main')
+          .map(([name, port]) => ({ branch: name, folder: `branch--${name}`, port }))
+
+        if (branches.length === 0) return html
+
+        const script = `<script>window.__SB_BRANCHES__ = ${JSON.stringify(branches)};</script>`
+        return html.replace('</head>', `${script}\n</head>`)
+      } catch {
+        return html
+      }
+    },
+
     // Rebuild index on each build start
     buildStart() {
       buildResult = null

package/src/Viewfinder.jsx

@@ -1,72 +0,0 @@
-
-import { useRef, useEffect, useMemo } from 'react'
-
-/**
- * Viewfinder — thin React wrapper around the Svelte Viewfinder component.
- *
- * Mounts the core Svelte Viewfinder into a container div and manages
- * its lifecycle via React's useEffect.
- *
- * @param {Object} props
- * @param {Record<string, unknown>} [props.scenes] - Scene/flow index (deprecated, ignored — data comes from core)
- * @param {Record<string, unknown>} [props.flows] - Flow index (deprecated, ignored — data comes from core)
- * @param {Record<string, unknown>} [props.pageModules] - import.meta.glob result for page files
- * @param {string} [props.basePath] - Base URL path
- * @param {string} [props.title] - Header title
- * @param {string} [props.subtitle] - Optional subtitle
- * @param {boolean} [props.showThumbnails] - Show thumbnail previews
- * @param {boolean} [props.hideDefaultFlow] - Hide the "default" flow from the "Other flows" section
- */
-export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyboard', subtitle, showThumbnails = false, hideDefaultFlow, hideDefaultScene = false }) {
-  const containerRef = useRef(null)
-  const handleRef = useRef(null)
-
-  const shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
-
-  const knownRoutes = useMemo(() => Object.keys(pageModules)
-    .map(p => p.replace('/src/prototypes/', '').replace('.jsx', ''))
-    .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'viewfinder'),
-  [pageModules])
-
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    let cancelled = false
-
-    import('@dfosco/storyboard-core/ui-runtime').then(({ mountViewfinder, unmountViewfinder }) => {
-      if (cancelled) return
-      // Ensure clean state for re-mounts
-      unmountViewfinder()
-      handleRef.current = mountViewfinder(containerRef.current, {
-        title,
-        subtitle,
-        basePath,
-        knownRoutes,
-        showThumbnails,
-        hideDefaultFlow: shouldHideDefault,
-      })
-      // Wait for styles to be fully loaded before revealing
-      handleRef.current.ready.then(() => {
-        requestAnimationFrame(() => {
-          if (containerRef.current) containerRef.current.style.opacity = '1'
-        })
-      })
-    })
-
-    return () => {
-      cancelled = true
-      if (handleRef.current) {
-        handleRef.current.destroy()
-        handleRef.current = null
-      }
-    }
-  }, [title, subtitle, basePath, knownRoutes, showThumbnails, shouldHideDefault])
-
-  return <div ref={containerRef} style={{
-    minHeight: '100vh',
-    background: 'var(--bgColor-default, #0d1117)',
-    opacity: 0,
-    transition: 'opacity 0.15s ease',
-  }} />
-}
-

package/src/Viewfinder.module.css

@@ -1,235 +0,0 @@
-.container {
-  min-height: 100vh;
-  background-color: var(--bgColor-default, #0d1117);
-  color: var(--fgColor-default, #e6edf3);
-  padding: 80px 32px 48px;
-}
-
-.header {
-  max-width: 720px;
-  margin: 0 auto 64px;
-}
-
-.title {
-  font-size: 72px;
-  font-weight: 400;
-  margin: 0 0 12px;
-  color: var(--fgColor-default, #e6edf3);
-  letter-spacing: -0.03em;
-  line-height: 1;
-}
-
-.subtitle {
-  font-size: 15px;
-  color: var(--fgColor-muted, #848d97);
-  margin: 4px 0 0;
-  letter-spacing: 0.01em;
-}
-
-.sceneCount {
-  font-size: 13px;
-  color: var(--fgColor-muted, #848d97);
-  margin: 16px 0 0;
-  letter-spacing: 0.01em;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 16px;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-.listItem {
-  display: block;
-  padding: 8px 0;
-  text-decoration: none;
-  color: inherit;
-  /* border-bottom: 1px solid var(--borderColor-muted, #21262d); */
-}
-
-.listItem:first-child {
-  /* border-top: 1px solid var(--borderColor-muted, #21262d); */
-}
-
-.listItem:hover {
-  text-decoration: none !important;
-}
-
-.listItem .author {
-  margin-top: 8px;
-}
-
-.card {
-  display: block;
-  border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--bgColor-muted, #161b22);
-  text-decoration: none;
-  color: inherit;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.card:hover {
-  border-color: var(--borderColor-accent-emphasis, #1f6feb);
-  box-shadow: 0 0 0 1px var(--borderColor-accent-emphasis, #1f6feb);
-  text-decoration: none !important;
-}
-
-.thumbnail {
-  aspect-ratio: 16 / 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: var(--bgColor-inset, #010409);
-
-  --placeholder-bg: var(--bgColor-inset, #010409);
-  --placeholder-grid: var(--borderColor-default, #30363d);
-  --placeholder-accent: var(--fgColor-accent, #58a6ff);
-  --placeholder-fg: var(--fgColor-default, #c9d1d9);
-  --placeholder-muted: var(--fgColor-muted, #484f58);
-}
-
-.thumbnail svg {
-  width: 100%;
-  height: 100%;
-}
-
-.cardBody {
-  padding: 12px 16px;
-
-  &:hover {
-    background-color: var(--bgColor-muted);
-  }
-}
-
-.sceneName {
-  font-size: 28px;
-  font-weight: 400;
-  color: var(--fgColor-default, #e6edf3);
-  margin: 0;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-  transition: font-style 0.15s ease;
-}
-
-.empty {
-  text-align: center;
-  padding: 80px 24px;
-  color: var(--fgColor-muted, #848d97);
-  font-size: 15px;
-  max-width: 720px;
-  margin: 0 auto;
-}
-
-.sectionTitle {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--fgColor-muted, #848d97);
-  margin: 0 auto 20px;
-  max-width: 720px;
-}
-
-.headerTop {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.branchDropdown {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.branchIcon {
-  position: absolute;
-  left: 10px;
-  color: var(--fgColor-muted, #848d97);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.branchSelect {
-  appearance: none;
-  background-color: transparent;
-  color: var(--fgColor-default, #e6edf3);
-  border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 20px;
-  padding: 6px 32px 6px 32px;
-  font-size: 13px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848d97'%3E%3Cpath d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  min-width: 140px;
-  max-width: 220px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  transition: border-color 0.15s ease;
-}
-
-.branchSelect:hover {
-  border-color: var(--fgColor-muted, #848d97);
-}
-
-.branchSelect:focus-visible {
-  outline: 2px solid var(--borderColor-accent-emphasis, #1f6feb);
-  outline-offset: -1px;
-}
-
-.author {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 6px;
-}
-
-.authorAvatars {
-  display: flex;
-  flex-direction: row;
-}
-
-.authorAvatars:hover .authorAvatar {
-  margin-left: 2px;
-}
-
-.authorAvatars:hover .authorAvatar:first-child {
-  margin-left: 0;
-}
-
-.authorAvatar {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  margin-left: -6px;
-  transition: margin-left 0.15s ease;
-  outline: 2px solid var(--bgColor-default, #0d1117);
-  position: relative;
-}
-
-.authorAvatar:first-child {
-  margin-left: 0;
-}
-
-.authorName {
-  font-size: 13px;
-  color: var(--fgColor-muted, #848d97);
-  letter-spacing: 0.01em;
-}