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

package/package.json

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

package/src/{ViewfinderNew.jsx → Viewfinder.jsx}

@@ -1,15 +1,15 @@
 /**
- * ViewfinderNew — SaaS-style homescreen for Storyboard.
+ * Viewfinder — SaaS-style homescreen for Storyboard.
  *
  * Replaces the old list-based Viewfinder with a sidebar + grid layout.
  * Wired to real data from buildPrototypeIndex and listStories.
  */
 import { useState, useEffect, useMemo, useCallback, useSyncExternalStore } from 'react'
 import { buildPrototypeIndex, listStories, getStoryData, getLocal, setLocal } from '@dfosco/storyboard-core'
-import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
+import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
 import { Menu } from '@base-ui/react/menu'
 import Icon from './Icon.jsx'
-import css from './ViewfinderNew.module.css'
+import css from './Viewfinder.module.css'
 
 /* ─── localStorage helpers ─── */
 
@@ -532,116 +532,6 @@ function CreateMenu({ onClose, basePath }) {
 
 /* ─── PAT Dialog ─── */
 
-const COMMENTS_TOKEN_KEY = 'sb-comments-token'
-const REPO_OWNER = 'dfosco'
-const REPO_NAME = 'storyboard'
-
-function getRepoInfo() {
-  try {
-    const cfg = typeof __STORYBOARD_CONFIG__ !== 'undefined' ? __STORYBOARD_CONFIG__ : null
-    const repo = cfg?.repository
-    if (repo?.owner && repo?.name) return repo
-  } catch { /* ignore */ }
-  return { owner: REPO_OWNER, name: REPO_NAME }
-}
-
-function PATDialog({ open, onClose }) {
-  const [tokenValue, setTokenValue] = useState('')
-
-  if (!open) return null
-
-  const repo = getRepoInfo()
-
-  const handleSignIn = () => {
-    const trimmed = tokenValue.trim()
-    if (!trimmed) return
-
-    // Store token to localStorage
-    try { localStorage.setItem(COMMENTS_TOKEN_KEY, trimmed) } catch { /* ignore */ }
-
-    // Try the comments auth API if available
-    try {
-      import('@dfosco/storyboard-core/comments').then(({ setToken }) => {
-        setToken(trimmed)
-      }).catch(() => {})
-    } catch { /* comments module may not be initialized */ }
-
-    setTokenValue('')
-    onClose()
-  }
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter') handleSignIn()
-  }
-
-  return (
-    <div className={css.createMenuOverlay} onClick={onClose}>
-      <div className={css.dialog} onClick={e => e.stopPropagation()}>
-        <button className={css.dialogClose} onClick={onClose} aria-label="Close">×</button>
-
-        <div className={css.dialogTitle}>Sign in for comments</div>
-        <div className={css.dialogDesc}>
-          Leave comments for other users to see and respond, and react to! Storyboard comments use Discussions as a back-end and require a GitHub PAT to be enabled.
-        </div>
-
-        <hr className={css.dialogSeparator} />
-
-        <div className={css.tokenCard}>
-          <div className={css.tokenCardTitle}>Fine-grained Personal Access Token</div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Owner:</span>
-            <span className={css.tokenCardValue}>{repo.owner}</span>
-          </div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Expiration:</span>
-            <span className={css.tokenCardValue}><strong>366 days</strong> (recommended)</span>
-          </div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Repository access:</span>
-            <span className={css.tokenCardValue}>Only select repositories &gt; {repo.owner}/{repo.name}</span>
-          </div>
-          <div className={css.tokenCardRow}>
-            <span className={css.tokenCardLabel}>Permissions:</span>
-            <span className={css.tokenCardValue}>Repositories &gt; Discussions &gt; Access: Read and Write</span>
-          </div>
-        </div>
-
-        <a
-          className={css.tokenLink}
-          href="https://github.com/settings/personal-access-tokens/new"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Create a GitHub Fine-Grained Personal Access Token ↗
-        </a>
-
-        <hr className={css.dialogSeparator} />
-
-        <label className={css.dialogLabel}>Personal Access Token</label>
-        <input
-          className={css.dialogInput}
-          placeholder="github_pat_… or ghp_…"
-          type="password"
-          autoFocus
-          value={tokenValue}
-          onChange={e => setTokenValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-        />
-
-        <div className={css.warningBanner}>
-          <span className={css.warningIcon}>⚠️</span>
-          <span>Comments are an experimental feature and may be unstable.</span>
-        </div>
-
-        <div className={css.dialogActions}>
-          <button className={css.btnSecondary} onClick={onClose}>Cancel</button>
-          <button className={css.btnPrimary} onClick={handleSignIn}>Sign in</button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
 /* ─── Nav config ─── */
 
 const NAV_ITEMS = [
@@ -690,6 +580,10 @@ function useBranches(basePath) {
 }
 
 function BranchDropdown({ basePath }) {
+  // Dev: hide dropdown — use CLI to switch branches
+  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+  if (isLocalDev) return null
+
   const { branches, currentBranch, branchBasePath, gitUser } = useBranches(basePath)
   const [showAll, setShowAll] = useState(false)
   const [switching, setSwitching] = useState(null)
@@ -713,38 +607,10 @@ 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) => {
+  const switchBranch = (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`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ branch }),
-      })
-      const data = await res.json()
-      if (res.ok && data.url) {
-        window.location.href = data.url
-      } else {
-        setSwitchError(data.error || 'Failed to switch')
-        setSwitching(null)
-      }
-    } catch (e) {
-      setSwitchError(e.message || 'Server not reachable')
-      setSwitching(null)
-    }
+    const target = branches?.find(b => b.branch === branch)
+    window.location.href = `${branchBasePath}${target?.folder || (branch === 'main' ? '' : `branch--${branch}/`)}`
   }
 
   return (
@@ -817,7 +683,7 @@ function BranchDropdown({ basePath }) {
 
 /* ─── Main Component ─── */
 
-export default function ViewfinderNew({
+export default function Viewfinder({
   pageModules = {},
   basePath,
   title = 'Storyboard',
@@ -920,7 +786,6 @@ export default function ViewfinderNew({
   const [activeNav, setActiveNav] = useState('all')
   const [activeTab, setActiveTab] = useState('All')
   const [showCreate, setShowCreate] = useState(false)
-  const [showPAT, setShowPAT] = useState(false)
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const [groupByFolders, setGroupByFolders] = useState(() => {
     try { return localStorage.getItem(GROUP_BY_FOLDERS_KEY) !== 'false' } catch { return true }
@@ -1036,7 +901,7 @@ export default function ViewfinderNew({
           <BranchDropdown basePath={basePath} />
           <Menu.Root open={showCreate} onOpenChange={setShowCreate}>
             <Menu.Trigger className={css.createBtn}>
-              + Create
+              <PlusIcon size={14} /> Create
             </Menu.Trigger>
             <Menu.Portal>
               <Menu.Positioner className={css.createDropdownPositioner} side="bottom" align="end" sideOffset={4}>
@@ -1053,6 +918,7 @@ export default function ViewfinderNew({
       <div className={css.body}>
         {/* ─── Sidebar ─── */}
         <aside className={`${css.sidebar}${sidebarOpen ? ` ${css.sidebarOpen}` : ''}`}>
+          <div className={css.sidebarContent}>
           <nav className={css.navSection}>
             {NAV_ITEMS.map(nav => (
               <button
@@ -1085,10 +951,11 @@ export default function ViewfinderNew({
               {s.name}
             </a>
           ))}
+          </div>
 
           {/* User profile / login */}
           <div className={css.sidebarFooter}>
-            <button className={css.loginBtn} onClick={() => setShowPAT(true)}>
+            <button className={css.loginBtn} onClick={() => document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))}>
               <span className={css.avatar}><MarkGithubIcon size={16} /></span>
               <div>
                 <div className={css.userName}>Sign in</div>
@@ -1173,9 +1040,6 @@ export default function ViewfinderNew({
           </div>
         </main>
       </div>
-
-      {/* Modals */}
-      <PATDialog open={showPAT} onClose={() => setShowPAT(false)} />
     </div>
   )
 }

package/src/{ViewfinderNew.module.css → Viewfinder.module.css}

@@ -1,9 +1,9 @@
-/* ViewfinderNew — SaaS-style homescreen layout */
+/* Viewfinder — SaaS-style homescreen layout */
 
 .layout {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: calc(100vh - var(--sb-branch-bar-height, 0px));
   font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   color: #1a1a1a;
   background: #fafafa;
@@ -28,9 +28,9 @@
 }
 
 .logo {
-  width: 40px;
-  height: 40px;
-  background: #1a1a1a;
+  width: 48px;
+  height: 48px;
+  background: #313131;
   border-radius: 8px;
   transform: rotate(-1deg);
   display: flex;
@@ -42,17 +42,17 @@
 
 .appName {
   font-size: 24px;
+  /* font-style: italic; */
   font-weight: 900;
-  font-style: italic;
   color: #1a1a1a;
   line-height: 1.1;
 }
 
 .appSubtitle {
-  font-size: 14px;
+  font-size: 16px;
   color: #888;
   line-height: 1.3;
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
 .topActions {
@@ -206,6 +206,11 @@
   display: flex;
   flex-direction: column;
   padding: 0;
+  overflow: hidden;
+}
+
+.sidebarContent {
+  flex: 1;
   overflow-y: auto;
 }
 
@@ -295,6 +300,12 @@
   text-decoration: none;
 }
 
+.starredItem:link,
+.starredItem:visited {
+  color: #555;
+  text-decoration: none;
+}
+
 .starredItem:hover {
   background: #f5f5f5;
 }
@@ -319,7 +330,7 @@
 /* Sidebar footer */
 
 .sidebarFooter {
-  margin-top: auto;
+  flex-shrink: 0;
   border-top: 1px solid #e5e5e5;
   padding: 12px;
 }
@@ -746,186 +757,6 @@
   margin-top: 8px;
 }
 
-/* PAT Token dialog */
-
-.dialog {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
-  padding: 28px;
-  width: 480px;
-  max-width: 90vw;
-  position: relative;
-}
-
-.dialogClose {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: none;
-  border: none;
-  font-size: 24px;
-  line-height: 1;
-  color: #999;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-
-.dialogClose:hover {
-  background: #f0f0f0;
-  color: #555;
-}
-
-.dialogTitle {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: #1a1a1a;
-  padding-right: 32px;
-}
-
-.dialogDesc {
-  font-size: 16px;
-  color: #666;
-  margin-bottom: 16px;
-  line-height: 1.5;
-}
-
-.dialogSeparator {
-  border: none;
-  border-top: 1px solid #e5e5e5;
-  margin: 16px 0;
-}
-
-.dialogLabel {
-  display: block;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 6px;
-}
-
-.dialogInput {
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid #e5e5e5;
-  border-radius: 6px;
-  font-size: 16px;
-  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  margin-bottom: 16px;
-  box-sizing: border-box;
-}
-
-.dialogInput:focus {
-  outline: none;
-  border-color: #999;
-}
-
-.dialogActions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.btnSecondary {
-  padding: 8px 16px;
-  background: #fff;
-  border: 1px solid #e5e5e5;
-  border-radius: 6px;
-  font-size: 16px;
-  color: #555;
-  cursor: pointer;
-}
-
-.btnSecondary:hover {
-  background: #f5f5f5;
-}
-
-.btnPrimary {
-  padding: 8px 16px;
-  background: #1a1a1a;
-  border: none;
-  border-radius: 6px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #fff;
-  cursor: pointer;
-}
-
-.btnPrimary:hover {
-  background: #333;
-}
-
-/* Token config card */
-
-.tokenCard {
-  background: #f6f8fa;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  padding: 14px 16px;
-  margin-bottom: 12px;
-}
-
-.tokenCardTitle {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 10px;
-}
-
-.tokenCardRow {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.tokenCardLabel {
-  color: #666;
-  flex-shrink: 0;
-}
-
-.tokenCardValue {
-  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 14px;
-  color: #1a1a1a;
-}
-
-.tokenLink {
-  display: inline-block;
-  font-size: 16px;
-  color: #0969da;
-  text-decoration: none;
-  margin-bottom: 4px;
-}
-
-.tokenLink:hover {
-  text-decoration: underline;
-}
-
-/* Warning banner */
-
-.warningBanner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  background: #fff8c5;
-  border: 1px solid #d4a72c;
-  border-radius: 6px;
-  font-size: 14px;
-  color: #6a5300;
-  margin-bottom: 8px;
-}
-
-.warningIcon {
-  flex-shrink: 0;
-  font-size: 16px;
-}
-
 /* Muted thumbnail colors */
 .thumbBlue { background: #f0f4f8; }
 .thumbAmber { background: #faf5ee; }

package/src/canvas/CanvasPage.jsx

@@ -1299,13 +1299,16 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         e.preventDefault()
         setSelectedWidgetIds(new Set())
       }
-      // Copy shortcut (single widget selected):
-      // cmd+c → copy canvasId::widgetId (for cross-canvas paste-duplicate)
+      // Copy shortcut (one or more widgets selected):
+      // cmd+c → copy canvasId::id1,id2,... (for cross-canvas paste-duplicate)
       const mod = e.metaKey || e.ctrlKey
-      if (mod && e.key === 'c' && !e.shiftKey && selectedWidgetIds.size === 1) {
-        const widgetId = [...selectedWidgetIds][0]
-        e.preventDefault()
-        navigator.clipboard.writeText(`${canvasId}::${widgetId}`).catch(() => {})
+      if (mod && e.key === 'c' && !e.shiftKey && selectedWidgetIds.size >= 1) {
+        // Filter out non-duplicable widgets (jsx- component widgets are code)
+        const copyableIds = [...selectedWidgetIds].filter(id => !id.startsWith('jsx-'))
+        if (copyableIds.length > 0) {
+          e.preventDefault()
+          navigator.clipboard.writeText(`${canvasId}::${copyableIds.join(',')}`).catch(() => {})
+        }
       }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         e.preventDefault()
@@ -1443,36 +1446,72 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const text = e.clipboardData?.getData('text/plain')?.trim()
       if (!text) return
 
-      // Detect canvasId::widgetId format for widget duplication (cross-canvas copy-paste)
+      // Detect canvasId::widgetId or canvasId::id1,id2,id3 format for widget duplication
       // Also supports legacy canvasId/widgetId for basenames without slashes,
       // but only when the second segment looks like a widget ID (type-hash).
       const widgetRefMatch = text.match(/^(.+)::([^:]+)$/) || (text.indexOf('::') === -1 && text.match(/^([^/]+)\/((?:sticky-note|markdown|prototype|link-preview|figma-embed|component|image)-[a-z0-9]+)$/))
       if (widgetRefMatch) {
         e.preventDefault()
-        const [, sourceCanvas, sourceWidgetId] = widgetRefMatch
-        // Component widgets are code, not duplicable data — silently consume the ref
-        if (sourceWidgetId.startsWith('jsx-')) return
+        const [, sourceCanvas, sourceWidgetRef] = widgetRefMatch
+        const sourceWidgetIds = sourceWidgetRef.split(',').filter(id => !id.startsWith('jsx-'))
+        if (sourceWidgetIds.length === 0) return
+
         try {
-          let sourceWidget = null
+          // Resolve source widgets in canvas order
+          let sourceList
           if (sourceCanvas === canvasId) {
-            sourceWidget = (localWidgets ?? []).find(w => w.id === sourceWidgetId)
+            sourceList = localWidgets ?? []
           } else {
             const canvasData = await getCanvasApi(sourceCanvas)
-            sourceWidget = (canvasData?.widgets ?? []).find(w => w.id === sourceWidgetId)
+            sourceList = canvasData?.widgets ?? []
           }
-          if (sourceWidget) {
-            const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
-            const pos = centerPositionForWidget(center, sourceWidget.type, sourceWidget.props)
-            undoRedo.snapshot(stateRef.current, 'add')
+
+          const sourceWidgets = sourceList.filter(w => sourceWidgetIds.includes(w.id))
+          if (sourceWidgets.length === 0) return
+
+          // Compute bounding box of source widgets for relative positioning
+          const fallback = { width: 200, height: 150 }
+          let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
+          for (const w of sourceWidgets) {
+            const wx = w.position?.x ?? 0
+            const wy = w.position?.y ?? 0
+            const ww = w.props?.width ?? WIDGET_FALLBACK_SIZES[w.type]?.width ?? fallback.width
+            const wh = w.props?.height ?? WIDGET_FALLBACK_SIZES[w.type]?.height ?? fallback.height
+            if (wx < minX) minX = wx
+            if (wy < minY) minY = wy
+            if (wx + ww > maxX) maxX = wx + ww
+            if (wy + wh > maxY) maxY = wy + wh
+          }
+          const groupW = maxX - minX
+          const groupH = maxY - minY
+
+          // Center the group in the viewport
+          const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+          const baseX = Math.round(center.x - groupW / 2)
+          const baseY = Math.round(center.y - groupH / 2)
+
+          // Single undo snapshot for the entire paste
+          undoRedo.snapshot(stateRef.current, 'add')
+
+          // Paste all widgets, collecting new IDs for selection
+          const newWidgets = []
+          for (const w of sourceWidgets) {
+            const relX = (w.position?.x ?? 0) - minX
+            const relY = (w.position?.y ?? 0) - minY
             const result = await addWidgetApi(canvasId, {
-              type: sourceWidget.type,
-              props: { ...sourceWidget.props },
-              position: pos,
+              type: w.type,
+              props: { ...w.props },
+              position: { x: baseX + relX, y: baseY + relY },
             })
             if (result.success && result.widget) {
-              setLocalWidgets((prev) => [...(prev || []), result.widget])
+              newWidgets.push(result.widget)
             }
           }
+
+          if (newWidgets.length > 0) {
+            setLocalWidgets((prev) => [...(prev || []), ...newWidgets])
+            setSelectedWidgetIds(new Set(newWidgets.map(w => w.id)))
+          }
         } catch (err) {
           console.error('[canvas] Failed to paste widget reference:', err)
         }
@@ -1502,6 +1541,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         if (result.success && result.widget) {
           undoRedo.snapshot(stateRef.current, 'add')
           setLocalWidgets((prev) => [...(prev || []), result.widget])
+          setSelectedWidgetIds(new Set([result.widget.id]))
         }
       } catch (err) {
         console.error('[canvas] Failed to add widget from paste:', err)
@@ -1915,7 +1955,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     <>
       <div className={styles.canvasTitle}>
         <h1 className={styles.canvasTitleStatic}>{canvasMeta?.title || canvas?.title || canvasId.split('/').pop()}</h1>
-        <PageSelector currentName={canvasId} pages={siblingPages} />
+        <PageSelector currentName={canvasId} pages={siblingPages} isLocalDev={isLocalDev} />
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>
         )}

package/src/canvas/CanvasPage.module.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
+  min-height: calc(100vh - var(--sb-branch-bar-height, 0px));
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   color: var(--fgColor-muted, #656d76);
   font-size: 16px;
@@ -16,7 +16,7 @@
 
 .canvasScroll {
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh - var(--sb-branch-bar-height, 0px));
   overflow: auto;
   background-color: var(--sb--canvas-bg, var(--bgColor-muted, #f6f8fa));
 }
@@ -43,7 +43,7 @@
 
 .canvasTitle {
   position: fixed;
-  top: 12px;
+  top: calc(12px + var(--sb-branch-bar-height, 0px));
   left: 16px;
   z-index: 10;
   display: flex;

package/src/canvas/PageSelector.jsx

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState, useEffect } from 'react'
+import { createCanvas } from './canvasApi.js'
 import styles from './PageSelector.module.css'
 
 /**
@@ -6,16 +7,23 @@ import styles from './PageSelector.module.css'
  * Only renders when 2+ sibling pages exist.
  * Uses window.location for navigation to avoid requiring a Router context.
  *
- * @param {{ currentName: string, pages: Array<{ name: string, route: string, title: string }> }} props
+ * @param {{ currentName: string, pages: Array<{ name: string, route: string, title: string }>, isLocalDev?: boolean }} props
  */
-export default function PageSelector({ currentName, pages }) {
+export default function PageSelector({ currentName, pages, isLocalDev = false }) {
   const [open, setOpen] = useState(false)
+  const [adding, setAdding] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [creating, setCreating] = useState(false)
   const containerRef = useRef(null)
+  const inputRef = useRef(null)
 
   const currentPage = pages.find((p) => p.name === currentName)
   const currentLabel = currentPage?.title || currentName.split('/').pop()
   const currentIndex = pages.findIndex((p) => p.name === currentName)
 
+  // Derive folder from currentName (e.g. "Examples/Design Overview" → "Examples")
+  const folder = currentName.includes('/') ? currentName.split('/')[0] : ''
+
   const handleSelect = useCallback(
     (page) => {
       if (page.name !== currentName) {
@@ -27,12 +35,48 @@ export default function PageSelector({ currentName, pages }) {
     [currentName],
   )
 
+  const handleAddPage = useCallback(async () => {
+    const trimmed = newName.trim()
+    if (!trimmed || creating) return
+    setCreating(true)
+    try {
+      const result = await createCanvas({ name: trimmed, folder: folder || undefined })
+      if (result.error) {
+        console.error('Failed to create canvas page:', result.error)
+        setCreating(false)
+        return
+      }
+      // Navigate to the new page once Vite picks it up
+      const kebab = trimmed
+        .replace(/[^a-zA-Z0-9\s_-]/g, '')
+        .trim()
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase()
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '')
+      const route = folder ? `/${folder}/${kebab}` : `/${kebab}`
+      const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+      // Small delay to let Vite detect the new file
+      setTimeout(() => { window.location.href = base + route }, 600)
+    } catch (err) {
+      console.error('Failed to create canvas page:', err)
+      setCreating(false)
+    }
+  }, [newName, folder, creating])
+
+  // Focus input when entering add mode
+  useEffect(() => {
+    if (adding && inputRef.current) inputRef.current.focus()
+  }, [adding])
+
   // Close on outside click
   useEffect(() => {
     if (!open) return
     function handleClick(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false)
+        setAdding(false)
+        setNewName('')
       }
     }
     document.addEventListener('mousedown', handleClick)
@@ -43,11 +87,18 @@ export default function PageSelector({ currentName, pages }) {
   useEffect(() => {
     if (!open) return
     function handleKey(e) {
-      if (e.key === 'Escape') setOpen(false)
+      if (e.key === 'Escape') {
+        if (adding) {
+          setAdding(false)
+          setNewName('')
+        } else {
+          setOpen(false)
+        }
+      }
     }
     document.addEventListener('keydown', handleKey)
     return () => document.removeEventListener('keydown', handleKey)
-  }, [open])
+  }, [open, adding])
 
   if (!pages || pages.length < 2) return null
 
@@ -95,6 +146,51 @@ export default function PageSelector({ currentName, pages }) {
               {page.title}
             </li>
           ))}
+          {isLocalDev && (
+            <>
+              <li className={styles.separator} role="separator" />
+              {adding ? (
+                <li className={styles.addForm}>
+                  <input
+                    ref={inputRef}
+                    className={styles.addInput}
+                    type="text"
+                    placeholder="Page name"
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        handleAddPage()
+                      }
+                    }}
+                    disabled={creating}
+                  />
+                  <button
+                    className={styles.addSubmit}
+                    onClick={handleAddPage}
+                    disabled={!newName.trim() || creating}
+                  >
+                    {creating ? '…' : 'Add'}
+                  </button>
+                </li>
+              ) : (
+                <li
+                  className={styles.addItem}
+                  onClick={() => setAdding(true)}
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      setAdding(true)
+                    }
+                  }}
+                >
+                  + Add new page
+                </li>
+              )}
+            </>
+          )}
         </ul>
       )}
     </nav>

package/src/canvas/PageSelector.module.css

@@ -91,3 +91,68 @@
 .itemActive:hover {
   background: var(--bgColor-accent-muted, #ddf4ff);
 }
+
+.separator {
+  height: 1px;
+  background: var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  margin: 4px 8px;
+  list-style: none;
+}
+
+.addItem {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 12px;
+}
+
+.addItem:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.addForm {
+  display: flex;
+  gap: 4px;
+  padding: 4px 6px;
+  list-style: none;
+}
+
+.addInput {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+
+.addInput:focus {
+  border-color: var(--focus-outlineColor, #0969da);
+  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
+}
+
+.addSubmit {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 4px;
+  background: var(--bgColor-accent-emphasis, #0969da);
+  color: #fff;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.addSubmit:hover {
+  opacity: 0.9;
+}
+
+.addSubmit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}

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 './ViewfinderNew.jsx'
+export { default as Viewfinder } from './Viewfinder.jsx'
 
 // Canvas
 export { default as CanvasPage } from './canvas/CanvasPage.jsx'