@dfosco/storyboard-react 4.0.0-beta.43 → 4.0.0-beta.44

package/src/canvas/MarqueeOverlay.jsx

@@ -0,0 +1,20 @@
+import styles from './CanvasPage.module.css'
+
+/**
+ * Renders the translucent selection rectangle during a marquee drag.
+ * Positioned relative to the scroll container.
+ */
+export default function MarqueeOverlay({ rect }) {
+  if (!rect) return null
+  return (
+    <div
+      className={styles.marqueeRect}
+      style={{
+        left: rect.x,
+        top: rect.y,
+        width: rect.w,
+        height: rect.h,
+      }}
+    />
+  )
+}

package/src/canvas/PageSelector.jsx

@@ -10,7 +10,15 @@ import styles from './PageSelector.module.css'
  * @param {{ currentName: string, pages: Array<{ name: string, route: string, title: string }>, isLocalDev?: boolean }} props
  */
 export default function PageSelector({ currentName, pages: initialPages, isLocalDev = false }) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(() => {
+    try {
+      if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem('sb-open-page-selector')) {
+        sessionStorage.removeItem('sb-open-page-selector')
+        return true
+      }
+    } catch { /* ignore */ }
+    return false
+  })
   const [adding, setAdding] = useState(false)
   const [newName, setNewName] = useState('')
   const [creating, setCreating] = useState(false)
@@ -45,7 +53,13 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
     if (!trimmed || creating) return
     setCreating(true)
     try {
-      const result = await createCanvas({ name: trimmed, folder: folder || undefined })
+      // Single-page canvas (no folder) → convert to multi-page folder
+      const isSinglePage = !currentName.includes('/')
+      const createBody = isSinglePage
+        ? { name: trimmed, convertFrom: currentName }
+        : { name: trimmed, folder: folder || undefined }
+
+      const result = await createCanvas(createBody)
       if (result.error) {
         console.error('Failed to create canvas page:', result.error)
         setCreating(false)
@@ -65,6 +79,9 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
       setNewName('')
       setCreating(false)
 
+      // Stash a flag so the page selector opens automatically on the new page
+      try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
+
       // Navigate to the new page after Vite picks up the new file
       if (import.meta.hot) {
         const timer = setTimeout(() => {
@@ -81,7 +98,7 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
       console.error('Failed to create canvas page:', err)
       setCreating(false)
     }
-  }, [newName, folder, creating])
+  }, [newName, currentName, folder, creating])
 
   // Focus input when entering add mode
   useEffect(() => {

package/src/canvas/componentIsolate.jsx

@@ -1,12 +1,12 @@
 /**
  * Canvas Component Isolate — iframe entry point.
  *
- * Renders a single named export from a .canvas.jsx module inside an
+ * Renders a single named export from a .story.jsx module inside an
  * isolated document. The parent CanvasPage embeds this via an iframe
  * so a broken component cannot crash the entire canvas.
  *
  * Query params:
- *   module — absolute or base-relative path to the .canvas.jsx file
+ *   module — absolute or base-relative path to the .story.jsx file
  *   export — the named export to render
  *   theme  — canvas theme (light / dark / dark_dimmed)
  */
@@ -97,9 +97,9 @@ async function mount() {
     return
   }
 
-  // Validate: only allow .canvas.jsx and .story.{jsx,tsx} modules
-  if (!modulePath.endsWith('.canvas.jsx') && !modulePath.match(/\.story\.(jsx|tsx)$/)) {
-    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .canvas.jsx and .story.jsx/.tsx files are allowed'))
+  // Validate: only allow .story.{jsx,tsx} modules
+  if (!modulePath.match(/\.story\.(jsx|tsx)$/)) {
+    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .story.jsx/.tsx files are allowed'))
     return
   }
 

package/src/canvas/useCanvas.test.js

@@ -3,14 +3,14 @@ import { resolveCanvasModuleImport } from './useCanvas.js'
 
 describe('resolveCanvasModuleImport', () => {
   it('prefixes root-relative module paths with BASE_URL', () => {
-    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.canvas.jsx', '/feature-branch/')).toBe(
-      '/feature-branch/src/canvas/button-patterns.canvas.jsx',
+    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.story.jsx', '/feature-branch/')).toBe(
+      '/feature-branch/src/canvas/button-patterns.story.jsx',
     )
   })
 
   it('keeps root-relative paths unchanged when BASE_URL is root', () => {
-    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.canvas.jsx', '/')).toBe(
-      '/src/canvas/button-patterns.canvas.jsx',
+    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.story.jsx', '/')).toBe(
+      '/src/canvas/button-patterns.story.jsx',
     )
   })
 

package/src/canvas/useMarqueeSelect.js

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * Returns the bounding-box list for all widgets on the canvas.
+ * Each entry: { id, x, y, width, height }
+ */
+function getWidgetBounds(widgets, componentEntries, fallbackSizes) {
+  const bounds = []
+  for (const w of (widgets ?? [])) {
+    const fb = fallbackSizes[w.type] || { width: 200, height: 150 }
+    bounds.push({
+      id: w.id,
+      x: w?.position?.x ?? 0,
+      y: w?.position?.y ?? 0,
+      width: w.props?.width ?? fb.width,
+      height: w.props?.height ?? fb.height,
+    })
+  }
+  for (const entry of componentEntries) {
+    const fb = fallbackSizes['component'] || { width: 200, height: 150 }
+    bounds.push({
+      id: `jsx-${entry.exportName}`,
+      x: entry.sourceData?.position?.x ?? 0,
+      y: entry.sourceData?.position?.y ?? 0,
+      width: entry.sourceData?.width ?? fb.width,
+      height: entry.sourceData?.height ?? fb.height,
+    })
+  }
+  return bounds
+}
+
+/** Test whether two axis-aligned rectangles overlap. */
+function rectsIntersect(a, b) {
+  return a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y
+}
+
+/**
+ * Hook that powers marquee (lasso) selection on the canvas.
+ *
+ * @param {Object} opts
+ * @param {React.RefObject} opts.scrollRef    — ref to the scroll container
+ * @param {React.RefObject} opts.zoomRef      — ref holding current zoom (number 25-200)
+ * @param {Function} opts.setSelectedWidgetIds — state setter for selected IDs (Set)
+ * @param {Array} opts.widgets                — current localWidgets array
+ * @param {Array} opts.componentEntries       — current componentEntries array
+ * @param {Object} opts.fallbackSizes         — WIDGET_FALLBACK_SIZES map
+ * @param {boolean} opts.spaceHeld            — whether the space key is pressed (panning)
+ * @param {boolean} opts.isLocalDev           — only enable in local dev
+ *
+ * @returns {{ marqueeScreenRect: {x,y,w,h}|null, handleMarqueeMouseDown: Function }}
+ */
+export default function useMarqueeSelect({
+  scrollRef,
+  zoomRef,
+  setSelectedWidgetIds,
+  widgets,
+  componentEntries,
+  fallbackSizes,
+  spaceHeld,
+  isLocalDev,
+}) {
+  const [marqueeScreenRect, setMarqueeScreenRect] = useState(null)
+  const marqueeState = useRef(null) // { startCanvasX, startCanvasY, startClientX, startClientY }
+
+  /** Convert a client (screen) point to canvas-space coords. */
+  const clientToCanvas = useCallback((clientX, clientY) => {
+    const el = scrollRef.current
+    if (!el) return { x: 0, y: 0 }
+    const rect = el.getBoundingClientRect()
+    const scale = (zoomRef.current ?? 100) / 100
+    return {
+      x: (el.scrollLeft + (clientX - rect.left)) / scale,
+      y: (el.scrollTop + (clientY - rect.top)) / scale,
+    }
+  }, [scrollRef, zoomRef])
+
+  // Ref to track active drag listeners for cleanup on unmount
+  const cleanupRef = useRef(null)
+
+  const handleMarqueeMouseDown = useCallback((e) => {
+    if (!isLocalDev) return
+    if (spaceHeld) return
+    // Only start on direct background click (not on a widget)
+    if (e.button !== 0) return
+    if (e.target.closest('[data-tc-x]')) return
+
+    const canvasStart = clientToCanvas(e.clientX, e.clientY)
+    marqueeState.current = {
+      startCanvasX: canvasStart.x,
+      startCanvasY: canvasStart.y,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+    }
+
+    // Minimum drag distance before showing the marquee (avoids flicker on clicks)
+    const MIN_DRAG = 4
+
+    function handleMove(ev) {
+      const ms = marqueeState.current
+      if (!ms) return
+
+      const dx = ev.clientX - ms.startClientX
+      const dy = ev.clientY - ms.startClientY
+      if (Math.abs(dx) < MIN_DRAG && Math.abs(dy) < MIN_DRAG) return
+
+      const el = scrollRef.current
+      if (!el) return
+      const containerRect = el.getBoundingClientRect()
+
+      // Content-space rectangle (accounts for scroll offset)
+      const sx = Math.min(ms.startClientX, ev.clientX) - containerRect.left + el.scrollLeft
+      const sy = Math.min(ms.startClientY, ev.clientY) - containerRect.top + el.scrollTop
+      const sw = Math.abs(dx)
+      const sh = Math.abs(dy)
+
+      setMarqueeScreenRect({ x: sx, y: sy, w: sw, h: sh })
+    }
+
+    function removeListeners() {
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleUp)
+      window.removeEventListener('blur', handleCancel)
+      cleanupRef.current = null
+    }
+
+    function handleCancel() {
+      removeListeners()
+      marqueeState.current = null
+      setMarqueeScreenRect(null)
+    }
+
+    function handleUp(ev) {
+      removeListeners()
+
+      const ms = marqueeState.current
+      marqueeState.current = null
+      setMarqueeScreenRect(null)
+
+      if (!ms) return
+
+      // If the user barely moved, treat as a deselect click
+      const dx = ev.clientX - ms.startClientX
+      const dy = ev.clientY - ms.startClientY
+      if (Math.abs(dx) < MIN_DRAG && Math.abs(dy) < MIN_DRAG) {
+        setSelectedWidgetIds(new Set())
+        return
+      }
+
+      // Compute the selection rect in canvas space
+      const canvasEnd = clientToCanvas(ev.clientX, ev.clientY)
+      const selRect = {
+        x: Math.min(ms.startCanvasX, canvasEnd.x),
+        y: Math.min(ms.startCanvasY, canvasEnd.y),
+        width: Math.abs(canvasEnd.x - ms.startCanvasX),
+        height: Math.abs(canvasEnd.y - ms.startCanvasY),
+      }
+
+      // Find intersecting widgets
+      const allBounds = getWidgetBounds(widgets, componentEntries, fallbackSizes)
+      const selected = new Set()
+      for (const wb of allBounds) {
+        if (rectsIntersect(selRect, wb)) {
+          selected.add(wb.id)
+        }
+      }
+
+      setSelectedWidgetIds(selected)
+    }
+
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleUp)
+    window.addEventListener('blur', handleCancel)
+    cleanupRef.current = removeListeners
+  }, [isLocalDev, spaceHeld, clientToCanvas, scrollRef, setSelectedWidgetIds, widgets, componentEntries, fallbackSizes])
+
+  // Clean up listeners if component unmounts mid-drag
+  useEffect(() => {
+    return () => { cleanupRef.current?.() }
+  }, [])
+
+  return { marqueeScreenRect, handleMarqueeMouseDown }
+}
+
+export { getWidgetBounds, rectsIntersect }

package/src/canvas/useMarqueeSelect.test.js

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { rectsIntersect, getWidgetBounds } from './useMarqueeSelect.js'
+
+describe('rectsIntersect', () => {
+  it('returns true for overlapping rectangles', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 50, y: 50, width: 100, height: 100 }
+    expect(rectsIntersect(a, b)).toBe(true)
+  })
+
+  it('returns false for non-overlapping rectangles', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 200, y: 200, width: 100, height: 100 }
+    expect(rectsIntersect(a, b)).toBe(false)
+  })
+
+  it('returns false for edge-touching rectangles (no overlap)', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 100, y: 0, width: 100, height: 100 }
+    expect(rectsIntersect(a, b)).toBe(false)
+  })
+
+  it('returns true when one rectangle contains the other', () => {
+    const a = { x: 0, y: 0, width: 200, height: 200 }
+    const b = { x: 50, y: 50, width: 50, height: 50 }
+    expect(rectsIntersect(a, b)).toBe(true)
+  })
+
+  it('returns true for partial horizontal overlap', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 50, y: 0, width: 100, height: 50 }
+    expect(rectsIntersect(a, b)).toBe(true)
+  })
+})
+
+describe('getWidgetBounds', () => {
+  const fallbackSizes = {
+    'sticky-note': { width: 270, height: 170 },
+    'component': { width: 200, height: 150 },
+  }
+
+  it('returns bounds for JSON widgets', () => {
+    const widgets = [
+      { id: 'w1', type: 'sticky-note', position: { x: 10, y: 20 }, props: { width: 300, height: 200 } },
+      { id: 'w2', type: 'sticky-note', position: { x: 100, y: 200 }, props: {} },
+    ]
+    const result = getWidgetBounds(widgets, [], fallbackSizes)
+    expect(result).toEqual([
+      { id: 'w1', x: 10, y: 20, width: 300, height: 200 },
+      { id: 'w2', x: 100, y: 200, width: 270, height: 170 },
+    ])
+  })
+
+  it('returns bounds for component entries', () => {
+    const entries = [
+      { exportName: 'MyComp', sourceData: { position: { x: 5, y: 10 }, width: 400, height: 300 } },
+    ]
+    const result = getWidgetBounds([], entries, fallbackSizes)
+    expect(result).toEqual([
+      { id: 'jsx-MyComp', x: 5, y: 10, width: 400, height: 300 },
+    ])
+  })
+
+  it('handles null/missing widget data gracefully', () => {
+    const widgets = [
+      { id: 'w1', type: 'unknown' },
+    ]
+    const result = getWidgetBounds(widgets, [], fallbackSizes)
+    expect(result).toEqual([
+      { id: 'w1', x: 0, y: 0, width: 200, height: 150 },
+    ])
+  })
+
+  it('handles null widgets array', () => {
+    const result = getWidgetBounds(null, [], fallbackSizes)
+    expect(result).toEqual([])
+  })
+})

package/src/canvas/widgets/ComponentWidget.jsx

@@ -7,7 +7,7 @@ import styles from './ComponentWidget.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
 /**
- * Renders a live JSX export from a .canvas.jsx companion file.
+ * Renders a live JSX export from a .story.jsx file.
  *
  * In dev mode (isLocalDev), each component is rendered inside an iframe
  * via the /_storyboard/canvas/isolate middleware. This isolates broken

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -81,7 +81,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     const base = hashIdx >= 0 ? rawSrc.slice(0, hashIdx) : rawSrc
     const hash = hashIdx >= 0 ? rawSrc.slice(hashIdx) : ''
     const sep = base.includes('?') ? '&' : '?'
-    return `${base}${sep}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
+    return `${base}${sep}_sb_embed&_sb_hide_branch_bar&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
   }, [rawSrc, canvasTheme])
 
   const prototypeIndex = useMemo(() => {

package/src/canvas/widgets/StoryWidget.jsx

@@ -35,6 +35,7 @@ function resolveStoryUrl(storyId, exportName) {
   const params = new URLSearchParams()
   if (exportName) params.set('export', exportName)
   params.set('_sb_embed', '')
+  params.set('_sb_hide_branch_bar', '')
   return `${base}${story._route}?${params}`
 }
 

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

@@ -215,7 +215,7 @@ describe('Embed interaction overlay', () => {
         <ComponentWidget
           {...defaultProps}
           isLocalDev
-          jsxModule="/src/canvas/mock.canvas.jsx"
+          jsxModule="/src/canvas/mock.story.jsx"
           exportName="MockComponent"
         />
       )

package/src/index.js

@@ -37,6 +37,9 @@ export { FormContext } from './context/FormContext.js'
 // Viewfinder dashboard
 export { default as Viewfinder } from './Viewfinder.jsx'
 
+// Command Palette
+export { default as StoryboardCommandPalette } from './CommandPalette/CommandPalette.jsx'
+
 // Canvas
 export { default as CanvasPage } from './canvas/CanvasPage.jsx'
 export { useCanvas } from './canvas/useCanvas.js'

package/src/vite/data-plugin.js

@@ -649,13 +649,6 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes, canvasA
               `[storyboard-data] Canvas "${name}" references JSX file "${parsed.jsx}" but it was not found at ${jsxPath}`
             )
           }
-        } else {
-          // Auto-detect a same-name .canvas.jsx companion
-          const autoJsx = absPath.replace(/\.canvas\.(jsonl|jsonc?)$/, '.canvas.jsx')
-          if (fs.existsSync(autoJsx)) {
-            const relJsx = '/' + path.relative(root, autoJsx).replace(/\\/g, '/')
-            parsed = { ...parsed, _jsxModule: relJsx }
-          }
         }
       }
 
@@ -834,7 +827,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', 'use-sync-external-store/shim', 'use-sync-external-store/shim/with-selector'],
+          include: ['react-cmdk', 'remark', 'remark-gfm', 'remark-html', 'use-sync-external-store/shim', 'use-sync-external-store/shim/with-selector'],
           exclude: ['@dfosco/storyboard-react'],
         },
       }
@@ -858,7 +851,7 @@ export default function storyboardDataPlugin() {
       // ── Component isolate middleware ───────────────────────────────
       // Serves a minimal HTML shell for iframe-isolated component widgets.
       // The iframe loads componentIsolate.jsx which reads query params
-      // (module, export, theme) and renders a single canvas.jsx export.
+      // (module, export, theme) and renders a single story export.
       const isolateEntryPath = new URL('../canvas/componentIsolate.jsx', import.meta.url).pathname
       server.middlewares.use(async (req, res, next) => {
         if (!req.url) return next()