@dfosco/storyboard-react 4.0.0-beta.36 → 4.0.0-beta.38

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
@@ -207,7 +207,7 @@ function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
   )
 }
 
-export default function LinkPreview({ id, props, onUpdate, resizable }) {
+export default function LinkPreview({ props, onUpdate, resizable }) {
   const url = readProp(props, 'url', linkPreviewSchema)
   const title = readProp(props, 'title', linkPreviewSchema)
   const github = props?.github && typeof props.github === 'object' ? props.github : null
@@ -215,6 +215,30 @@ export default function LinkPreview({ id, props, onUpdate, resizable }) {
   const width = typeof props?.width === 'number' ? props.width : null
   const height = typeof props?.height === 'number' ? props.height : null
 
+  // All hooks must be called before any early return
+  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 startEditing = useCallback(() => {
+    if (!canEdit) return
+    setEditing(true)
+  }, [canEdit])
+
+  const handleTitleChange = useCallback((e) => {
+    onUpdate?.({ title: e.target.value })
+  }, [onUpdate])
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
   if (github) {
     return (
       <GitHubIssueCard
@@ -238,26 +262,59 @@ 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 className={styles.container}>
+      <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={title}
+              onChange={handleTitleChange}
+              onBlur={() => setEditing(false)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || 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"
+            rel="noopener noreferrer"
+            className={styles.url}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            {hostname || url}
+          </a>
         </div>
-        <a
-          href={url || '#'}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={styles.url}
-          onMouseDown={(e) => e.stopPropagation()}
-          onPointerDown={(e) => e.stopPropagation()}
-        >
-          {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/LinkPreview.module.css

@@ -1,42 +1,42 @@
 /* ── Plain link-preview card ──────────────────────────────────────── */
 
+.container {
+  position: relative;
+}
+
 .card {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 14px 16px;
-  text-decoration: none;
-  color: inherit;
   width: 320px;
-  min-height: 120px;
-  border-radius: 10px;
-  border: 1px solid var(--borderColor-default, #d1d9e0);
+  border-radius: 6px;
+  border: 2px solid var(--borderColor-default, #d1d9e0);
   background: var(--bgColor-default, #ffffff);
-  transition: background 150ms, border-color 150ms;
   box-sizing: border-box;
+  overflow: hidden;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
-.card:hover {
-  background: var(--bgColor-muted, #f6f8fa);
-  border-color: var(--borderColor-muted, #afb8c1);
+:global([data-sb-canvas-theme^='dark']) .card {
+  border-color: var(--borderColor-default, #3d444d);
 }
 
-.header {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  width: 100%;
+/* Hide own border when parent widget slot is selected (avoid double focus ring) */
+:global([data-widget-selected]) .card {
+  border-color: transparent;
 }
 
-.icon {
-  font-size: 20px;
-  flex-shrink: 0;
+.ogImage {
+  width: 100%;
+  max-height: 200px;
+  object-fit: cover;
+  display: block;
 }
 
-.text {
-  overflow: hidden;
-  min-width: 0;
-  flex: 1;
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 
 .title {
@@ -45,6 +45,33 @@
   font-weight: 600;
   line-height: 1.35;
   color: var(--fgColor-default, #1f2328);
+  cursor: text;
+  word-break: break-word;
+}
+
+.titleInput {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--fgColor-default, #1f2328);
+  width: 100%;
+}
+
+.description {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--fgColor-muted, #656d76);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .url {

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import LinkPreview from './LinkPreview.jsx'
 
@@ -68,4 +68,126 @@ describe('LinkPreview', () => {
     // No issue card rendered
     expect(container.querySelector('header')).toBeNull()
   })
+
+  it('renders OG image when present', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-4"
+        props={{
+          url: 'https://example.com',
+          title: 'With image',
+          ogImage: 'https://example.com/og.png',
+        }}
+      />,
+    )
+
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+    expect(img.src).toBe('https://example.com/og.png')
+  })
+
+  it('does not render image element when ogImage is absent', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-5"
+        props={{
+          url: 'https://example.com',
+          title: 'No image',
+        }}
+      />,
+    )
+
+    expect(container.querySelector('img')).toBeNull()
+  })
+
+  it('hides broken OG image on error', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-6"
+        props={{
+          url: 'https://example.com',
+          title: 'Broken image',
+          ogImage: 'https://example.com/broken.png',
+        }}
+      />,
+    )
+
+    const img = container.querySelector('img')
+    expect(img).toBeTruthy()
+    fireEvent.error(img)
+    expect(img.style.display).toBe('none')
+  })
+
+  it('renders description when present', () => {
+    render(
+      <LinkPreview
+        id="link-7"
+        props={{
+          url: 'https://example.com',
+          title: 'With desc',
+          description: 'A short description of the page',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('A short description of the page')).toBeInTheDocument()
+  })
+
+  it('enters edit mode on double-click and saves on change', () => {
+    const onUpdate = vi.fn()
+    render(
+      <LinkPreview
+        id="link-8"
+        props={{
+          url: 'https://example.com',
+          title: 'Editable title',
+        }}
+        onUpdate={onUpdate}
+      />,
+    )
+
+    const titleEl = screen.getByText('Editable title')
+    fireEvent.doubleClick(titleEl)
+
+    const input = document.querySelector('input[type="text"]')
+    expect(input).toBeTruthy()
+    expect(input.value).toBe('Editable title')
+
+    fireEvent.change(input, { target: { value: 'New title' } })
+    expect(onUpdate).toHaveBeenCalledWith({ title: 'New title' })
+  })
+
+  it('does not enter edit mode when onUpdate is missing', () => {
+    render(
+      <LinkPreview
+        id="link-9"
+        props={{
+          url: 'https://example.com',
+          title: 'Read-only',
+        }}
+      />,
+    )
+
+    const titleEl = screen.getByText('Read-only')
+    fireEvent.doubleClick(titleEl)
+
+    // Should not show an input
+    expect(document.querySelector('input[type="text"]')).toBeNull()
+  })
+
+  it('shows fallback text when title is empty', () => {
+    render(
+      <LinkPreview
+        id="link-10"
+        props={{
+          url: 'https://example.com/page',
+        }}
+        onUpdate={() => {}}
+      />,
+    )
+
+    // Falls back to hostname — appears in both title and URL
+    const matches = screen.getAllByText('example.com')
+    expect(matches.length).toBeGreaterThanOrEqual(1)
+  })
 })

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',
-  }} />
-}
-