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

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.37",
+  "version": "4.0.0-beta.39",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.37",
-    "@dfosco/tiny-canvas": "4.0.0-beta.37",
+    "@base-ui/react": "^1.4.0",
+    "@dfosco/storyboard-core": "4.0.0-beta.39",
+    "@dfosco/tiny-canvas": "4.0.0-beta.39",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/ViewfinderNew.jsx

@@ -673,12 +673,10 @@ function useBranches(basePath) {
       .then(data => { if (data?.name) setGitUser(data.name) })
       .catch(() => {})
 
-    // If no branches from window global, fetch from server API
-    if (!branches) {
-      fetch(`${apiBase}/_storyboard/worktrees`).then(r => r.ok ? r.json() : null)
-        .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
-        .catch(() => {})
-    }
+    // Always fetch live branch list from server API
+    fetch(`${apiBase}/_storyboard/worktrees`).then(r => r.ok ? r.json() : null)
+      .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
+      .catch(() => {})
   }, [])
 
   const currentBranch = useMemo(() => {
@@ -715,9 +713,20 @@ function BranchDropdown({ basePath }) {
         .filter(b => !b.lastModified || new Date(b.lastModified).getTime() > twoWeeksAgo)
         .sort((a, b) => (a.branch || '').localeCompare(b.branch || ''))
 
+  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+
   const switchBranch = async (branch) => {
     setSwitching(branch)
     setSwitchError(null)
+
+    if (!isLocalDev) {
+      // Prod: direct navigation
+      const target = branches?.find(b => b.branch === branch)
+      window.location.href = `${branchBasePath}${target?.folder || (branch === 'main' ? '' : `branch--${branch}/`)}`
+      return
+    }
+
+    // Dev: call switch-branch API to spin up server
     const apiBase = (basePath || '/').replace(/\/$/, '')
     try {
       const res = await fetch(`${apiBase}/_storyboard/switch-branch`, {

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,43 +215,22 @@ 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
 
-  if (github) {
-    return (
-      <GitHubIssueCard
-        url={url}
-        title={title}
-        github={github}
-        width={width}
-        collapsed={!!props?.collapsed}
-        onUpdate={onUpdate}
-      />
-    )
-  }
-
+  // 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 [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])
+  }, [canEdit])
 
-  const commitEdit = useCallback(() => {
-    setEditing(false)
-    const trimmed = editValue.trim()
-    if (trimmed !== title) {
-      onUpdate?.({ title: trimmed })
-    }
-  }, [editValue, title, onUpdate])
+  const handleTitleChange = useCallback((e) => {
+    onUpdate?.({ title: e.target.value })
+  }, [onUpdate])
 
   useEffect(() => {
     if (editing && inputRef.current) {
@@ -260,6 +239,19 @@ export default function LinkPreview({ id, props, onUpdate, resizable }) {
     }
   }, [editing])
 
+  if (github) {
+    return (
+      <GitHubIssueCard
+        url={url}
+        title={title}
+        github={github}
+        width={width}
+        collapsed={!!props?.collapsed}
+        onUpdate={onUpdate}
+      />
+    )
+  }
+
   const sizeStyle = (width || height)
     ? { ...(width ? { width: `${width}px` } : {}), ...(height ? { minHeight: `${height}px` } : {}) }
     : undefined
@@ -270,56 +262,57 @@ export default function LinkPreview({ id, props, onUpdate, resizable }) {
   const handleResize = (w, h) => onUpdate?.({ width: w, height: h })
 
   return (
-    <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)
-            }}
+    <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()}
-          />
-        ) : (
-          <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>
+            {hostname || url}
+          </a>
+        </div>
       </div>
       {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/vite/data-plugin.js

@@ -834,7 +834,7 @@ export default function storyboardDataPlugin() {
           // can't trace into its deps. Include the remark entry points so
           // Vite pre-bundles the full chain — covers all transitive CJS
           // packages (debug, extend, etc.) without whack-a-mole.
-          include: ['remark', 'remark-gfm', 'remark-html'],
+          include: ['remark', 'remark-gfm', 'remark-html', 'use-sync-external-store/shim', 'use-sync-external-store/shim/with-selector'],
           exclude: ['@dfosco/storyboard-react'],
         },
       }