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

package/src/CommandPalette/CreateDialog.jsx

@@ -0,0 +1,219 @@
+/**
+ * CreateDialog — centered modal for creating storyboard artifacts.
+ * Triggered from the command palette's Create actions.
+ */
+import { useState, useEffect } from 'react'
+
+const TYPE_LABELS = {
+  Canvas: 'Canvas',
+  Prototype: 'Prototype',
+  Component: 'Component',
+  Flow: 'Prototype Flow',
+  Page: 'Prototype Page',
+}
+
+export default function CreateDialog({ type, basePath, onClose }) {
+  const [name, setName] = useState('')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [url, setUrl] = useState('')
+  const [isExternal, setIsExternal] = useState(false)
+  const [prototype, setPrototype] = useState('')
+  const [prototypes, setPrototypes] = useState([])
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const needsPrototype = type === 'Flow' || type === 'Page'
+
+  // Reset form when type changes
+  useEffect(() => {
+    setName('')
+    setTitle('')
+    setDescription('')
+    setUrl('')
+    setIsExternal(false)
+    setPrototype('')
+    setError('')
+    setSubmitting(false)
+  }, [type])
+
+  // Fetch prototypes list when needed
+  useEffect(() => {
+    if (!needsPrototype || !type) return
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/workshop/flows`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => { if (data?.prototypes) setPrototypes(data.prototypes) })
+      .catch(() => {})
+  }, [needsPrototype, type, basePath])
+
+  if (!type) return null
+
+  function withBase(base, route) {
+    const b = (base || '/').replace(/\/+$/, '')
+    return b === '/' ? route : `${b}${route}`
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    if (!name.trim()) { setError('Name is required'); return }
+    if (needsPrototype && !prototype) { setError('Select a prototype'); return }
+    setError('')
+    setSubmitting(true)
+
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    let endpoint, body
+    if (type === 'Canvas') {
+      endpoint = `${apiBase}/_storyboard/canvas/create`
+      body = { name: name.trim(), title: title.trim(), description: description.trim(), grid: true, gridSize: 24 }
+    } else if (type === 'Prototype') {
+      endpoint = `${apiBase}/_storyboard/workshop/prototypes`
+      body = { name: name.trim(), title: title.trim(), description: description.trim() }
+      if (isExternal) { body.external = true; body.url = url.trim() }
+    } else if (type === 'Flow') {
+      endpoint = `${apiBase}/_storyboard/workshop/flows`
+      body = { name: name.trim(), title: title.trim(), prototype, description: description.trim() }
+    } else if (type === 'Page') {
+      endpoint = `${apiBase}/_storyboard/workshop/pages`
+      body = { name: name.trim(), prototype }
+    } else {
+      endpoint = `${apiBase}/_storyboard/canvas/create-story`
+      body = { name: name.trim(), location: 'src/components' }
+    }
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const text = await res.text()
+        throw new Error(text || `Request failed (${res.status})`)
+      }
+      const data = await res.json().catch(() => ({}))
+      const route = data.route || data.path || `/${name.trim()}`
+      window.location.href = withBase(basePath, route)
+    } catch (err) {
+      setError(err.message)
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div style={overlayStyle} onClick={onClose}>
+      <div style={dialogStyle} onClick={e => e.stopPropagation()}>
+        <div style={headerStyle}>
+          <span style={titleStyle}>New {TYPE_LABELS[type] || type}</span>
+          <button style={closeBtnStyle} onClick={onClose}>✕</button>
+        </div>
+
+        <form onSubmit={handleSubmit} style={formStyle}>
+          {needsPrototype && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>Prototype *</span>
+              <select style={inputStyle} value={prototype} onChange={e => setPrototype(e.target.value)}>
+                <option value="">Select a prototype…</option>
+                {prototypes.map(p => <option key={p.name} value={p.name}>{p.name}</option>)}
+              </select>
+            </label>
+          )}
+
+          <label style={fieldStyle}>
+            <span style={labelStyle}>Name *</span>
+            <input style={inputStyle} value={name} onChange={e => setName(e.target.value)}
+              placeholder={type === 'Page' ? 'my-page' : `my-${type.toLowerCase()}`} autoFocus />
+          </label>
+
+          {type !== 'Page' && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>Title</span>
+              <input style={inputStyle} value={title} onChange={e => setTitle(e.target.value)}
+                placeholder="Display title (optional)" />
+            </label>
+          )}
+
+          {(type === 'Canvas' || type === 'Prototype') && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>Description</span>
+              <input style={inputStyle} value={description} onChange={e => setDescription(e.target.value)}
+                placeholder="Short description (optional)" />
+            </label>
+          )}
+
+          {type === 'Prototype' && (
+            <label style={checkboxFieldStyle}>
+              <input type="checkbox" checked={isExternal} onChange={e => setIsExternal(e.target.checked)} />
+              <span>External prototype</span>
+            </label>
+          )}
+
+          {isExternal && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>URL *</span>
+              <input style={inputStyle} value={url} onChange={e => setUrl(e.target.value)}
+                placeholder="https://example.com" />
+            </label>
+          )}
+
+          {error && <div style={errorStyle}>{error}</div>}
+
+          <button type="submit" disabled={submitting} style={submitStyle}>
+            {submitting ? 'Creating…' : `Create ${TYPE_LABELS[type] || type}`}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, zIndex: 10001,
+  background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(2px)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  paddingTop: '15vh',
+}
+
+const dialogStyle = {
+  background: '#fff', borderRadius: 12, width: '100%', maxWidth: 420,
+  boxShadow: '0 16px 48px rgba(0,0,0,0.15)', overflow: 'hidden',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+}
+
+const headerStyle = {
+  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+  padding: '16px 20px 12px', borderBottom: '1px solid #e5e5e5',
+}
+
+const titleStyle = { fontSize: 16, fontWeight: 600, color: '#1a1a1a' }
+
+const closeBtnStyle = {
+  background: 'none', border: 'none', cursor: 'pointer',
+  fontSize: 16, color: '#999', padding: 4,
+}
+
+const formStyle = { padding: '16px 20px 20px', display: 'flex', flexDirection: 'column', gap: 12 }
+
+const fieldStyle = { display: 'flex', flexDirection: 'column', gap: 4 }
+
+const labelStyle = { fontSize: 13, fontWeight: 500, color: '#555' }
+
+const inputStyle = {
+  padding: '8px 10px', border: '1px solid #ddd', borderRadius: 6,
+  fontSize: 14, outline: 'none', fontFamily: 'inherit',
+}
+
+const checkboxFieldStyle = {
+  display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#555',
+}
+
+const errorStyle = {
+  fontSize: 13, color: '#ef4444', background: '#fef2f2',
+  padding: '6px 10px', borderRadius: 6,
+}
+
+const submitStyle = {
+  padding: '10px 16px', background: '#1a1a1a', color: '#fff',
+  border: 'none', borderRadius: 8, fontSize: 14, fontWeight: 500,
+  cursor: 'pointer', fontFamily: 'inherit', marginTop: 4,
+}

package/src/CommandPalette/command-palette.css

@@ -0,0 +1,66 @@
+/*
+ * Theme overrides for react-cmdk to match storyboard core-ui styling.
+ * The z-index is set above the CoreUIBar (9999) so the palette overlays everything.
+ */
+.command-palette {
+  z-index: 10001 !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+/*
+ * Dark mode overrides for react-cmdk.
+ * react-cmdk uses @media (prefers-color-scheme: dark) internally,
+ * but we drive dark mode via data-color-mode on body. Override all
+ * colors with a single high-specificity block.
+ */
+body[data-color-mode="dark"] .command-palette {
+  color-scheme: dark;
+}
+
+body[data-color-mode="dark"] .command-palette .command-palette-content {
+  color: #e6edf3 !important;
+}
+
+/* Panel background */
+body[data-color-mode="dark"] .command-palette .bg-white {
+  background-color: #2d333b !important;
+}
+
+/* Hover highlight */
+body[data-color-mode="dark"] .command-palette .hover\:bg-gray-100:hover {
+  background-color: #373e47 !important;
+}
+
+/* Selected/active item highlight */
+body[data-color-mode="dark"] .command-palette .bg-gray-200\/50 {
+  background-color: rgba(99, 110, 123, 0.4) !important;
+}
+
+/* Muted text (headings, badges, "Action" labels) */
+body[data-color-mode="dark"] .command-palette .text-gray-400,
+body[data-color-mode="dark"] .command-palette .text-gray-500 {
+  color: #768390 !important;
+}
+
+/* Input text */
+body[data-color-mode="dark"] .command-palette input {
+  color: #e6edf3 !important;
+}
+body[data-color-mode="dark"] .command-palette .placeholder-gray-500::placeholder {
+  color: #636e7b !important;
+}
+body[data-color-mode="dark"] .command-palette .placeholder-gray-500::-moz-placeholder {
+  color: #636e7b !important;
+}
+
+/* Borders / dividers */
+body[data-color-mode="dark"] .command-palette .divide-y > :not([hidden]) ~ :not([hidden]),
+body[data-color-mode="dark"] .command-palette .border-t,
+body[data-color-mode="dark"] .command-palette .border-b {
+  border-color: #444c56 !important;
+}
+
+/* Hide "Action" / "Link" type labels on all list items */
+.command-palette .command-palette-list-item .text-gray-500.text-sm {
+  display: none !important;
+}

package/src/Viewfinder.jsx

@@ -6,7 +6,7 @@
  */
 import { useState, useEffect, useMemo, useCallback, useSyncExternalStore } from 'react'
 import { buildPrototypeIndex, listStories, getStoryData, getLocal, setLocal } from '@dfosco/storyboard-core'
-import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
+import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon } from '@primer/octicons-react'
 import { Menu } from '@base-ui/react/menu'
 import Icon from './Icon.jsx'
 import css from './Viewfinder.module.css'
@@ -195,6 +195,7 @@ function ArtifactCard({ item, basePath, starred, onToggleStar }) {
         <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
         <div className={css.cardActions}>
           {item.flows?.length > 0 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
+          {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
           <StarBtn active={starred} onClick={() => onToggleStar(item.id)} />
         </div>
       </div>
@@ -276,6 +277,43 @@ function FlowsDropdown({ flows, basePath }) {
   )
 }
 
+/* ─── Pages Dropdown ─── */
+
+function PagesDropdown({ pages, basePath }) {
+  if (!pages || pages.length < 2) return null
+  return (
+    <Menu.Root>
+      <Menu.Trigger
+        className={css.iconBtn}
+        onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+        aria-label="See pages"
+        title="See pages"
+      >
+        <StackIcon size={16} />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner className={css.flowsPositioner} side="bottom" align="end" sideOffset={4}>
+          <Menu.Popup className={css.flowsPopup}>
+            <div className={css.flowsTitle}>Pages</div>
+            {pages.map(page => (
+              <Menu.Item
+                key={page.route}
+                className={css.flowsItem}
+                onClick={(e) => {
+                  e.preventDefault()
+                  window.location.href = withBase(basePath, page.route)
+                }}
+              >
+                {page.name}
+              </Menu.Item>
+            ))}
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  )
+}
+
 /* ─── Folder Section ─── */
 
 function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar }) {
@@ -330,7 +368,7 @@ function CreateFooter() {
 
 /* ─── Create Form ─── */
 
-function CreateForm({ type, onBack, onClose, basePath }) {
+function CreateForm({ type, onClose, basePath }) {
   const [name, setName] = useState('')
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
@@ -404,10 +442,12 @@ function CreateForm({ type, onBack, onClose, basePath }) {
 
   return (
     <form onSubmit={handleSubmit}>
-      <button type="button" className={css.createFormBack} onClick={onBack}>
-        ← Back
-      </button>
-      <div className={css.createMenuTitle}>New {typeLabels[type] || type}</div>
+      <div className={css.createFormHeader}>
+        <div className={css.createMenuTitle}>New {typeLabels[type] || type}</div>
+        <button type="button" className={css.createFormClose} onClick={onClose} aria-label="Close">
+          <XIcon size={16} />
+        </button>
+      </div>
 
       {needsPrototype && (
         <div className={css.createFormField}>
@@ -488,13 +528,10 @@ function CreateForm({ type, onBack, onClose, basePath }) {
       {error && <div className={css.createFormError}>{error}</div>}
 
       <div className={css.createFormActions}>
-        <button type="button" className={css.btnSecondary} onClick={onClose}>Cancel</button>
-        <button type="submit" className={css.btnPrimary} disabled={submitting}>
-          {submitting ? 'Creating…' : 'Create'}
+        <button type="submit" className={css.createFormSubmit} disabled={submitting}>
+          {submitting ? 'Creating…' : `Create ${typeLabels[type] || type}`}
         </button>
       </div>
-
-      <CreateFooter />
     </form>
   )
 }
@@ -785,6 +822,7 @@ export default function Viewfinder({
         externalUrl: null,
         folder: canvas.folder,
         description: canvas.description,
+        pages: canvas.pages || null,
       })
     }
 

package/src/Viewfinder.module.css

@@ -395,6 +395,7 @@
   display: flex;
   align-items: center;
   gap: 0;
+  min-height: 52px;
   padding: 0 32px;
   background: var(--bgColor-default, #fff);
   border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
@@ -488,7 +489,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.3px;
-  background: rgba(0,0,0,0.06);
+  background: var(--bgColor-neutral-muted, #f0f0f0);
   color: var(--fgColor-muted, #555);
 }
 
@@ -619,7 +620,6 @@
 .createMenuTitle {
   font-size: 18px;
   font-weight: 600;
-  margin-bottom: 16px;
   color: var(--fgColor-default, #1a1a1a);
 }
 
@@ -673,6 +673,31 @@
 
 /* Create form styles */
 
+.createFormHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.createFormClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: var(--fgColor-muted, #888);
+  cursor: pointer;
+}
+
+.createFormClose:hover {
+  color: var(--fgColor-default, #1a1a1a);
+  background: var(--bgColor-neutral-muted, #f0f0f0);
+}
+
 .createFormField {
   margin-bottom: 14px;
 }
@@ -706,27 +731,29 @@
 }
 
 .createFormActions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
-.createFormBack {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
+.createFormSubmit {
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--fgColor-default, #1a1a1a);
+  color: var(--bgColor-default, #fff);
   border: none;
-  color: var(--fgColor-muted, #888);
+  border-radius: 10px;
   font-size: 16px;
+  font-weight: 600;
   cursor: pointer;
-  padding: 0;
-  margin-bottom: 12px;
+  transition: opacity 0.15s;
 }
 
-.createFormBack:hover {
-  color: var(--fgColor-default, #1a1a1a);
+.createFormSubmit:hover {
+  opacity: 0.85;
+}
+
+.createFormSubmit:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .createFooter {

package/src/canvas/CanvasPage.jsx

@@ -9,10 +9,13 @@ import { schemas, getDefaults } from './widgets/widgetProps.js'
 import { getFeatures, isResizable } from './widgets/widgetConfig.js'
 import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
 import { getPasteRules } from '@dfosco/storyboard-core'
+import { registerSmoothCorners } from '@dfosco/storyboard-core/smooth-corners'
 import { isGitHubEmbedUrl } from './widgets/githubUrl.js'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import useUndoRedo from './useUndoRedo.js'
+import useMarqueeSelect from './useMarqueeSelect.js'
+import MarqueeOverlay from './MarqueeOverlay.jsx'
 import {
   addWidget as addWidgetApi,
   checkGitHubCliAvailable,
@@ -23,6 +26,7 @@ import {
   uploadImage,
 } from './canvasApi.js'
 import PageSelector from './PageSelector.jsx'
+import Icon from '../Icon.jsx'
 import { stories as storyIndex } from 'virtual:storyboard-data-index'
 import styles from './CanvasPage.module.css'
 
@@ -35,6 +39,8 @@ const VIEWPORT_TTL_MS = 15 * 60 * 1000
 const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
 const GH_INSTALL_URL = 'https://github.com/cli/cli'
 
+registerSmoothCorners()
+
 /** Matches branch-deploy base path prefixes like /branch--my-feature/ */
 const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
 
@@ -1096,6 +1102,69 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }, [canvasId])
 
+  // --- Selected widgets bridge ---
+  // Writes .selectedwidgets.json so Copilot knows which canvas/widgets are active.
+  // Uses a stable tabId to survive WebSocket reconnects.
+  const selectionTabIdRef = useRef(Math.random().toString(36).slice(2, 10))
+
+  // Gather selected widget data from refs (safe for callbacks/timeouts)
+  const getSelectedWidgetData = useCallback(() => {
+    const ids = [...selectedIdsRef.current]
+    const widgets = (stateRef.current.widgets || [])
+      .filter(w => ids.includes(w.id))
+      .map(w => ({ id: w.id, type: w.type, props: w.props }))
+
+    // Include jsx-* component selections
+    for (const id of ids) {
+      if (id.startsWith('jsx-') && !widgets.some(w => w.id === id)) {
+        widgets.push({ id, type: 'component', props: { exportName: id.slice(4) } })
+      }
+    }
+
+    return { widgetIds: ids, widgets }
+  }, [])
+
+  // Send focus event on mount, tab focus, and visibility change
+  useEffect(() => {
+    if (!import.meta.hot) return
+
+    const tabId = selectionTabIdRef.current
+
+    function sendFocus() {
+      const { widgetIds, widgets } = getSelectedWidgetData()
+      import.meta.hot.send('storyboard:canvas-focused', { tabId, canvasId, widgetIds, widgets })
+    }
+
+    sendFocus()
+
+    function handleVisibility() {
+      if (!document.hidden) sendFocus()
+    }
+    function handleFocus() { sendFocus() }
+
+    document.addEventListener('visibilitychange', handleVisibility)
+    window.addEventListener('focus', handleFocus)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibility)
+      window.removeEventListener('focus', handleFocus)
+      import.meta.hot.send('storyboard:canvas-unfocused', { tabId })
+    }
+  }, [canvasId, getSelectedWidgetData])
+
+  // Debounced selection change (500ms) — reads from refs at fire time
+  useEffect(() => {
+    if (!import.meta.hot) return
+
+    const tabId = selectionTabIdRef.current
+    const timer = setTimeout(() => {
+      const { widgetIds, widgets } = getSelectedWidgetData()
+      import.meta.hot.send('storyboard:selection-changed', { tabId, canvasId, widgetIds: widgetIds, widgets })
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [selectedWidgetIds, canvasId, getSelectedWidgetData])
+
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type) => {
     const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
@@ -1828,6 +1897,18 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   // Stable callback for deselecting all widgets
   const handleDeselectAll = useCallback(() => setSelectedWidgetIds(new Set()), [])
 
+  // Marquee (lasso) multi-select on canvas background drag
+  const { marqueeScreenRect, handleMarqueeMouseDown } = useMarqueeSelect({
+    scrollRef,
+    zoomRef: zoomRef,
+    setSelectedWidgetIds,
+    widgets: localWidgets,
+    componentEntries,
+    fallbackSizes: WIDGET_FALLBACK_SIZES,
+    spaceHeld,
+    isLocalDev,
+  })
+
   // Stable callback for widget removal + deselect
   const handleWidgetRemoveAndDeselect = useCallback((id) => {
     handleWidgetRemove(id)
@@ -1865,7 +1946,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   const canvasThemeVars = getCanvasThemeVars(canvasTheme)
   const canvasPrimerAttrs = getCanvasPrimerAttrs(canvasTheme)
 
-  // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
+  // Merge JSX-sourced widgets and JSON widgets
   const allChildren = []
 
   // 1. Component widgets (from jsxExports or sources fallback)
@@ -1954,7 +2035,12 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   return (
     <>
       <div className={styles.canvasTitle}>
-        <h1 className={styles.canvasTitleStatic}>{canvasMeta?.title || canvas?.title || canvasId.split('/').pop()}</h1>
+        <a href={(import.meta.env?.BASE_URL || '/')} className={`${styles.canvasLogo} smooth-corners`} aria-label="Go to homepage">
+          <Icon name="iconoir/key-command" size={16} color="#fff" />
+        </a>
+        {siblingPages.length > 1 && (
+          <h1 className={styles.canvasTitleStatic}>{canvasMeta?.title || canvas?.title || canvasId.split('/').pop()}</h1>
+        )}
         <PageSelector currentName={canvasId} pages={siblingPages} isLocalDev={isLocalDev} />
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>
@@ -1970,9 +2056,9 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           ...canvasThemeVars,
           ...(spaceHeld ? { cursor: panningActive ? 'grabbing' : 'grab' } : {}),
         }}
-        onClick={handleDeselectAll}
-        onMouseDown={handlePanStart}
+        onMouseDown={(e) => { handlePanStart(e); handleMarqueeMouseDown(e); }}
       >
+        <MarqueeOverlay rect={marqueeScreenRect} />
         <div
           ref={zoomElRef}
           data-storyboard-canvas-zoom

package/src/canvas/CanvasPage.module.css

@@ -15,6 +15,7 @@
 }
 
 .canvasScroll {
+  position: relative;
   width: 100vw;
   height: calc(100vh - var(--sb-branch-bar-height, 0px));
   overflow: auto;
@@ -41,6 +42,20 @@
 
 /* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
 
+.canvasLogo {
+  width: 32px;
+  height: 32px;
+  background: var(--bgColor-emphasis, #313131);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fgColor-onEmphasis, #fff);
+  flex-shrink: 0;
+  text-decoration: none;
+  transform: rotate(-1deg);
+}
+
 .canvasTitle {
   position: fixed;
   top: calc(12px + var(--sb-branch-bar-height, 0px));
@@ -140,3 +155,13 @@
 .ghInstallBannerDismiss:hover {
   background: var(--bgColor-muted, #f6f8fa);
 }
+
+/* Marquee selection rectangle */
+.marqueeRect {
+  position: absolute;
+  background: rgba(56, 132, 255, 0.12);
+  border: 1.5px solid rgba(56, 132, 255, 0.6);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 9999;
+}