@dfosco/storyboard-react 4.0.0-beta.4 → 4.0.0-beta.41

package/src/canvas/CanvasPage.jsx

@@ -1,5 +1,4 @@
-import { createElement, useCallback, useEffect, useRef, useState } from 'react'
-import { flushSync } from 'react-dom'
+import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Canvas } from '@dfosco/tiny-canvas'
 import '@dfosco/tiny-canvas/style.css'
 import { useCanvas } from './useCanvas.js'
@@ -8,28 +7,52 @@ import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
 import { getFeatures, isResizable } from './widgets/widgetConfig.js'
-import { isFigmaUrl, sanitizeFigmaUrl } from './widgets/figmaUrl.js'
+import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
+import { getPasteRules } from '@dfosco/storyboard-core'
+import { isGitHubEmbedUrl } from './widgets/githubUrl.js'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import useUndoRedo from './useUndoRedo.js'
-import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi, uploadImage } from './canvasApi.js'
+import {
+  addWidget as addWidgetApi,
+  checkGitHubCliAvailable,
+  fetchGitHubEmbed,
+  getCanvas as getCanvasApi,
+  removeWidget as removeWidgetApi,
+  updateCanvas,
+  uploadImage,
+} from './canvasApi.js'
+import PageSelector from './PageSelector.jsx'
+import { stories as storyIndex } from 'virtual:storyboard-data-index'
 import styles from './CanvasPage.module.css'
 
 const ZOOM_MIN = 25
 const ZOOM_MAX = 200
 
+/** Saved viewport state older than this is considered stale — zoom-to-fit instead. */
+const VIEWPORT_TTL_MS = 15 * 60 * 1000
+
 const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
+const GH_INSTALL_URL = 'https://github.com/cli/cli'
 
 /** Matches branch-deploy base path prefixes like /branch--my-feature/ */
 const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
 
+// Build a reverse map from story route paths → { storyId, route }
+const storyRouteIndex = new Map()
+for (const [storyId, data] of Object.entries(storyIndex || {})) {
+  if (data?._route) {
+    storyRouteIndex.set(data._route.replace(/\/+$/, ''), storyId)
+  }
+}
+
 function getToolbarColorMode(theme) {
   return String(theme || 'light').startsWith('dark') ? 'dark' : 'light'
 }
 
 function resolveCanvasThemeFromStorage() {
   if (typeof localStorage === 'undefined') return 'light'
-  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: false }
+  let sync = { prototype: true, toolbar: false, codeBoxes: true, canvas: true }
   try {
     const rawSync = localStorage.getItem('sb-theme-sync')
     if (rawSync) sync = { ...sync, ...JSON.parse(rawSync) }
@@ -47,6 +70,36 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
+/**
+ * Get the copyable URL for a widget based on its type.
+ * Returns the most relevant URL/path for the widget content.
+ */
+// eslint-disable-next-line no-unused-vars
+function getWidgetCopyableUrl(widget) {
+  const { type, props = {} } = widget
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  switch (type) {
+    case 'prototype':
+      // Prototype src is a path like "/MyPrototype" - make it a full URL
+      return props.src ? `${window.location.origin}${base.replace(/\/$/, '')}${props.src}` : ''
+    case 'figma-embed':
+      return props.url || ''
+    case 'link-preview':
+      return props.url || ''
+    case 'image':
+      // Return the served image URL
+      return props.src ? `${window.location.origin}${base.replace(/\/$/, '')}/_storyboard/canvas/images/${props.src}` : ''
+    case 'sticky-note':
+      // Sticky notes have text content, not a URL
+      return props.text || ''
+    case 'markdown':
+      // Markdown has content, not a URL
+      return props.content || ''
+    default:
+      return ''
+  }
+}
+
 /**
  * Debounce helper — returns a function that delays invocation.
  * Exposes `.cancel()` to abort pending calls (used by undo/redo).
@@ -62,15 +115,20 @@ function debounce(fn, ms) {
 }
 
 /** Per-canvas viewport state persistence (zoom + scroll position). */
-function getViewportStorageKey(canvasName) {
-  return `sb-canvas-viewport:${canvasName}`
+function getViewportStorageKey(canvasId) {
+  return `sb-canvas-viewport:${canvasId}`
 }
 
-function loadViewportState(canvasName) {
+function loadViewportState(canvasId) {
   try {
-    const raw = localStorage.getItem(getViewportStorageKey(canvasName))
+    const raw = localStorage.getItem(getViewportStorageKey(canvasId))
     if (!raw) return null
     const state = JSON.parse(raw)
+    const timestamp = typeof state.timestamp === 'number' ? state.timestamp : 0
+    if (Date.now() - timestamp > VIEWPORT_TTL_MS) {
+      localStorage.removeItem(getViewportStorageKey(canvasId))
+      return null
+    }
     return {
       zoom: typeof state.zoom === 'number' ? Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, state.zoom)) : null,
       scrollLeft: typeof state.scrollLeft === 'number' ? state.scrollLeft : null,
@@ -79,9 +137,12 @@ function loadViewportState(canvasName) {
   } catch { return null }
 }
 
-function saveViewportState(canvasName, state) {
+function saveViewportState(canvasId, state) {
   try {
-    localStorage.setItem(getViewportStorageKey(canvasName), JSON.stringify(state))
+    localStorage.setItem(getViewportStorageKey(canvasId), JSON.stringify({
+      ...state,
+      timestamp: Date.now(),
+    }))
   } catch { /* quota exceeded — non-critical */ }
 }
 
@@ -158,7 +219,7 @@ const FIT_PADDING = 48
  * Compute the axis-aligned bounding box that contains every widget and source.
  * Returns { minX, minY, maxX, maxY } in canvas-space coordinates, or null if empty.
  */
-function computeCanvasBounds(widgets, sources, jsxExports) {
+function computeCanvasBounds(widgets, componentEntries) {
   let minX = Infinity
   let minY = Infinity
   let maxX = -Infinity
@@ -179,31 +240,25 @@ function computeCanvasBounds(widgets, sources, jsxExports) {
     hasItems = true
   }
 
-  // JSX sources
-  const sourceMap = Object.fromEntries(
-    (sources || []).filter((s) => s?.export).map((s) => [s.export, s])
-  )
-  if (jsxExports) {
-    for (const exportName of Object.keys(jsxExports)) {
-      const sourceData = sourceMap[exportName] || {}
-      const x = sourceData.position?.x ?? 0
-      const y = sourceData.position?.y ?? 0
-      const fallback = WIDGET_FALLBACK_SIZES['component']
-      const width = sourceData.width ?? fallback.width
-      const height = sourceData.height ?? fallback.height
-      minX = Math.min(minX, x)
-      minY = Math.min(minY, y)
-      maxX = Math.max(maxX, x + width)
-      maxY = Math.max(maxY, y + height)
-      hasItems = true
-    }
+  // Component widgets (from jsxExports or sources fallback)
+  for (const entry of componentEntries) {
+    const x = entry.sourceData?.position?.x ?? 0
+    const y = entry.sourceData?.position?.y ?? 0
+    const fallback = WIDGET_FALLBACK_SIZES['component']
+    const width = entry.sourceData?.width ?? fallback.width
+    const height = entry.sourceData?.height ?? fallback.height
+    minX = Math.min(minX, x)
+    minY = Math.min(minY, y)
+    maxX = Math.max(maxX, x + width)
+    maxY = Math.max(maxY, y + height)
+    hasItems = true
   }
 
   return hasItems ? { minX, minY, maxX, maxY } : null
 }
 
 /** Renders a single JSON-defined widget by type lookup. */
-function WidgetRenderer({ widget, onUpdate, widgetRef }) {
+function WidgetRenderer({ widget, onUpdate, widgetRef, onRefreshGitHub, canRefreshGitHub }) {
   const Component = getWidgetComponent(widget.type)
   if (!Component) {
     console.warn(`[canvas] Unknown widget type: ${widget.type}`)
@@ -211,7 +266,14 @@ function WidgetRenderer({ widget, onUpdate, widgetRef }) {
   }
   const resizable = isResizable(widget.type) && !!onUpdate
   // Only pass ref to forwardRef-wrapped components (e.g. PrototypeEmbed)
-  const elementProps = { id: widget.id, props: widget.props, onUpdate, resizable }
+  const elementProps = {
+    id: widget.id,
+    props: widget.props,
+    onUpdate,
+    resizable,
+    onRefreshGitHub,
+    canRefreshGitHub,
+  }
   if (Component.$$typeof === Symbol.for('react.forward_ref')) {
     elementProps.ref = widgetRef
   }
@@ -221,8 +283,10 @@ function WidgetRenderer({ widget, onUpdate, widgetRef }) {
 /**
  * Wrapper for each JSON widget that holds its own ref for imperative actions.
  * This allows WidgetChrome to dispatch actions to the widget via ref.
+ *
+ * Memoized to prevent re-renders during zoom and unrelated state changes.
  */
-function ChromeWrappedWidget({
+const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
   widget,
   selected,
   multiSelected,
@@ -231,18 +295,64 @@ function ChromeWrappedWidget({
   onUpdate,
   onRemove,
   onCopy,
+  onRefreshGitHub,
+  canRefreshGitHub,
   readOnly,
 }) {
   const widgetRef = useRef(null)
-  const features = getFeatures(widget.type)
+  const rawFeatures = getFeatures(widget.type, { isLocalDev: !readOnly })
+
+  // Dynamically adjust features based on widget state
+  const features = useMemo(() => {
+    const isGitHub = !!widget.props?.github
+    return rawFeatures.map((f) => {
+      // Toggle collapse label and hide when content is short (no github = no collapse)
+      if (f.action === 'toggle-collapse') {
+        if (!isGitHub) return null
+        return {
+          ...f,
+          label: widget.props?.collapsed ? 'Expand height' : 'Collapse height',
+          icon: widget.props?.collapsed ? 'unfold' : 'fold',
+        }
+      }
+      // Hide refresh-github for non-GitHub link previews
+      if (f.action === 'refresh-github' && !isGitHub) return null
+      return f
+    }).filter(Boolean)
+  }, [rawFeatures, widget.props?.github, widget.props?.collapsed])
 
   const handleAction = useCallback((actionId) => {
     if (actionId === 'delete') {
       onRemove?.(widget.id)
     } else if (actionId === 'copy') {
       onCopy?.(widget)
+    } else if (actionId === 'copy-text') {
+      const title = widget.props?.title || ''
+      const body = widget.props?.text || widget.props?.content || widget.props?.github?.body || ''
+      const text = title && body ? `# ${title}\n\n${body}` : title || body
+      navigator.clipboard?.writeText(text).catch(() => {})
+    } else if (actionId === 'open-external') {
+      const url = widget.props?.url || widget.props?.src
+      if (url) window.open(url, '_blank', 'noopener,noreferrer')
+    } else if (actionId === 'refresh-github') {
+      const url = widget.props?.url
+      if (url && onRefreshGitHub) onRefreshGitHub(widget.id, url)
+    } else if (actionId === 'toggle-collapse') {
+      const wasCollapsed = !!widget.props?.collapsed
+      onUpdate?.(widget.id, { collapsed: !wasCollapsed })
+      // When collapsing, pan viewport to center the widget
+      if (!wasCollapsed) {
+        requestAnimationFrame(() => {
+          const el = document.getElementById(widget.id)
+          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        })
+      }
     }
-  }, [widget, onRemove, onCopy])
+  }, [widget, onRemove, onCopy, onRefreshGitHub])
+
+  const handleWidgetFieldUpdate = useCallback((updates) => {
+    onUpdate?.(widget.id, updates)
+  }, [onUpdate, widget.id])
 
   return (
     <WidgetChrome
@@ -256,43 +366,96 @@ function ChromeWrappedWidget({
       onSelect={onSelect}
       onDeselect={onDeselect}
       onAction={handleAction}
-      onUpdate={onUpdate ? (updates) => onUpdate(widget.id, updates) : undefined}
+      onUpdate={onUpdate ? handleWidgetFieldUpdate : undefined}
       readOnly={readOnly}
     >
       <WidgetRenderer
         widget={widget}
-        onUpdate={onUpdate ? (updates) => onUpdate(widget.id, updates) : undefined}
+        onUpdate={onUpdate ? handleWidgetFieldUpdate : undefined}
         widgetRef={widgetRef}
+        onRefreshGitHub={onRefreshGitHub}
+        canRefreshGitHub={canRefreshGitHub}
       />
     </WidgetChrome>
   )
-}
+}, function chromeWidgetAreEqual(prev, next) {
+  return (
+    prev.widget === next.widget &&
+    prev.selected === next.selected &&
+    prev.multiSelected === next.multiSelected &&
+    prev.readOnly === next.readOnly &&
+    prev.onSelect === next.onSelect &&
+    prev.onDeselect === next.onDeselect &&
+    prev.onUpdate === next.onUpdate &&
+    prev.onRemove === next.onRemove &&
+    prev.onCopy === next.onCopy
+  )
+})
 
 /**
  * Generic canvas page component.
  * Reads canvas data from the index and renders all widgets on a draggable surface.
  *
- * @param {{ name: string }} props - Canvas name as indexed by the data plugin
+ * @param {{ canvasId: string }} props - Canvas name as indexed by the data plugin
  */
-export default function CanvasPage({ name }) {
-  const { canvas, jsxExports, loading } = useCanvas(name)
+export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages = [], canvasMeta = null }) {
+  const canvasId = canvasIdProp || name || ''
+  const { canvas, jsxExports, jsxError, loading } = useCanvas(canvasId)
   const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true && !new URLSearchParams(window.location.search).has('prodMode')
 
   // Local mutable copy of widgets for instant UI updates
   const [localWidgets, setLocalWidgets] = useState(canvas?.widgets ?? null)
   const [trackedCanvas, setTrackedCanvas] = useState(canvas)
   const [selectedWidgetIds, setSelectedWidgetIds] = useState(() => new Set())
-  const initialViewport = loadViewportState(name)
+  const initialViewport = loadViewportState(canvasId)
   const [zoom, setZoom] = useState(initialViewport?.zoom ?? 100)
   const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = useRef(null)
+  const zoomElRef = useRef(null)
+  const zoomCommitTimer = useRef(null)
+  const zoomEventTimer = useRef(null)
   const pendingScrollRestore = useRef(initialViewport)
-  const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
-  const titleInputRef = useRef(null)
+  // Gate viewport persistence until initial positioning is complete.
+  // Tracks which canvasId was last initialized — save effects only
+  // write when this matches `canvasId`, preventing cross-canvas corruption.
+  const viewportInitName = useRef(null)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
   const [snapEnabled, setSnapEnabled] = useState(canvas?.snapToGrid ?? false)
   const [snapGridSize, setSnapGridSize] = useState(canvas?.gridSize || 40)
+  const [showGhInstallBanner, setShowGhInstallBanner] = useState(false)
+
+  // Refs for snap settings (used by drop handler inside effect closure)
+  const snapEnabledRef = useRef(snapEnabled)
+  const snapGridSizeRef = useRef(snapGridSize)
+
+  // Centralized list of component export names.
+  // When jsxExports is available, use it (discovers new exports not yet in sources).
+  // When jsxExports is null (module import failed), fall back to sources so iframes
+  // still render — the error is contained inside each iframe.
+  const componentEntries = useMemo(() => {
+    const sourceMap = Object.fromEntries(
+      (localSources || []).filter((s) => s?.export).map((s) => [s.export, s]),
+    )
+    if (jsxExports) {
+      return Object.keys(jsxExports).map((exportName) => ({
+        exportName,
+        Component: jsxExports[exportName],
+        sourceData: sourceMap[exportName] || {},
+      }))
+    }
+    // Fallback: use sources when module import failed (iframe isolation still works)
+    if (jsxError && canvas?._jsxModule) {
+      return (localSources || [])
+        .filter((s) => s?.export)
+        .map((s) => ({
+          exportName: s.export,
+          Component: null,
+          sourceData: s,
+        }))
+    }
+    return []
+  }, [jsxExports, jsxError, localSources, canvas?._jsxModule])
 
   // Undo/redo history — tracks both widgets and sources as a combined snapshot
   const undoRedo = useUndoRedo()
@@ -349,13 +512,13 @@ export default function CanvasPage({ name }) {
   // Flag to suppress the click-based selection reset that fires after a drag
   const justDraggedRef = useRef(false)
 
-  const handleItemDragStart = useCallback((dragId, position) => {
+  const handleItemDragStart = useCallback((dragId) => {
     const ids = selectedIdsRef.current
     peerArticlesRef.current.clear()
     if (ids.size <= 1 || !ids.has(dragId)) return
 
     // Suppress selection changes for the duration of the drag
-    justDraggedRef.current = true
+    justDraggedRef.current = true // eslint-disable-line react-hooks/immutability
 
     // Collect peer article elements for transition on drag end
     for (const id of ids) {
@@ -394,40 +557,28 @@ export default function CanvasPage({ name }) {
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
     setLocalSources(canvas?.sources ?? [])
-    setCanvasTitle(canvas?.title || name)
+    setSnapEnabled(canvas?.snapToGrid ?? false)
+    setSnapGridSize(canvas?.gridSize || 40)
     undoRedo.reset()
+    // Block saves until the new canvas's viewport is fully restored.
+    viewportInitName.current = null
+    const newViewport = loadViewportState(canvasId)
+    pendingScrollRestore.current = newViewport
+    // Restore zoom from the new canvas's saved state
+    const newZoom = newViewport?.zoom ?? 100
+    zoomRef.current = newZoom
+    setZoom(newZoom)
   }
 
   // Debounced save to server
   const debouncedSave = useRef(
-    debounce((canvasName, widgets) => {
-      updateCanvas(canvasName, { widgets }).catch((err) =>
+    debounce((canvasId, widgets) => {
+      updateCanvas(canvasId, { widgets }).catch((err) =>
         console.error('[canvas] Failed to save:', err)
       )
     }, 2000)
   ).current
 
-  const debouncedTitleSave = useRef(
-    debounce((canvasName, title) => {
-      updateCanvas(canvasName, { settings: { title } }).catch((err) =>
-        console.error('[canvas] Failed to save title:', err)
-      )
-    }, 1000)
-  ).current
-
-  const handleTitleChange = useCallback((e) => {
-    const newTitle = e.target.value
-    setCanvasTitle(newTitle)
-    debouncedTitleSave(name, newTitle)
-  }, [name, debouncedTitleSave])
-
-  const handleTitleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter') {
-      e.target.blur()
-    }
-    e.stopPropagation()
-  }, [])
-
   const handleWidgetUpdate = useCallback((widgetId, updates) => {
     undoRedo.snapshot(stateRef.current, 'edit', widgetId)
     // Snap width/height to grid when snap is enabled
@@ -441,20 +592,20 @@ export default function CanvasPage({ name }) {
       const next = prev.map((w) =>
         w.id === widgetId ? { ...w, props: { ...w.props, ...snapped } } : w
       )
-      debouncedSave(name, next)
+      debouncedSave(canvasId, next)
       return next
     })
-  }, [name, debouncedSave, undoRedo, snapEnabled, snapGridSize])
+  }, [canvasId, debouncedSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleWidgetRemove = useCallback((widgetId) => {
     undoRedo.snapshot(stateRef.current, 'remove', widgetId)
     setLocalWidgets((prev) => prev ? prev.filter((w) => w.id !== widgetId) : prev)
     queueWrite(() =>
-      removeWidgetApi(name, widgetId).catch((err) =>
+      removeWidgetApi(canvasId, widgetId).catch((err) =>
         console.error('[canvas] Failed to remove widget:', err)
       )
     )
-  }, [name, undoRedo])
+  }, [canvasId, undoRedo])
 
   const handleWidgetCopy = useCallback(async (widget) => {
     // Find the next free offset — check how many copies already exist at +n*40
@@ -470,7 +621,7 @@ export default function CanvasPage({ name }) {
     const position = { x: baseX + n * 40, y: baseY + n * 40 }
     try {
       undoRedo.snapshot(stateRef.current, 'add')
-      const result = await addWidgetApi(name, {
+      const result = await addWidgetApi(canvasId, {
         type: widget.type,
         props: { ...widget.props },
         position,
@@ -481,11 +632,63 @@ export default function CanvasPage({ name }) {
     } catch (err) {
       console.error('[canvas] Failed to copy widget:', err)
     }
-  }, [name, localWidgets, undoRedo])
+  }, [canvasId, localWidgets, undoRedo])
+
+  const showMissingGhBanner = useCallback(() => {
+    setShowGhInstallBanner(true)
+  }, [])
+
+  const buildGitHubPreviewUpdates = useCallback(async (url) => {
+    try {
+      const availability = await checkGitHubCliAvailable()
+      if (!availability?.available) {
+        showMissingGhBanner()
+        return null
+      }
+
+      const result = await fetchGitHubEmbed(url)
+      if (result?.code === 'gh_unavailable') {
+        showMissingGhBanner()
+        return null
+      }
+      if (!result?.success || !result?.snapshot) return null
+
+      const snapshot = result.snapshot
+      return {
+        title: snapshot.title || '',
+        width: 580,
+        height: 400,
+        github: {
+          kind: snapshot.kind || 'issue',
+          parentKind: snapshot.parentKind || snapshot.kind || 'issue',
+          context: snapshot.context || '',
+          body: snapshot.body || '',
+          bodyHtml: snapshot.bodyHtml || '',
+          authors: Array.isArray(snapshot.authors)
+            ? snapshot.authors.filter((author) => typeof author === 'string' && author.trim())
+            : [],
+          createdAt: snapshot.createdAt ?? null,
+          updatedAt: snapshot.updatedAt ?? null,
+          fetchedAt: new Date().toISOString(),
+        },
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to fetch GitHub embed metadata:', err)
+      return null
+    }
+  }, [showMissingGhBanner])
+
+  const handleRefreshGitHubWidget = useCallback(async (widgetId, url) => {
+    if (!widgetId || !url) return { updated: false }
+    const updates = await buildGitHubPreviewUpdates(url)
+    if (!updates) return { updated: false }
+    handleWidgetUpdate(widgetId, updates)
+    return { updated: true }
+  }, [buildGitHubPreviewUpdates, handleWidgetUpdate])
 
   const debouncedSourceSave = useRef(
-    debounce((canvasName, sources) => {
-      updateCanvas(canvasName, { sources }).catch((err) =>
+    debounce((canvasId, sources) => {
+      updateCanvas(canvasId, { sources }).catch((err) =>
         console.error('[canvas] Failed to save sources:', err)
       )
     }, 2000)
@@ -503,10 +706,10 @@ export default function CanvasPage({ name }) {
       const next = current.some((s) => s?.export === exportName)
         ? current.map((s) => (s?.export === exportName ? { ...s, ...snapped } : s))
         : [...current, { export: exportName, ...snapped }]
-      debouncedSourceSave(name, next)
+      debouncedSourceSave(canvasId, next)
       return next
     })
-  }, [name, debouncedSourceSave, undoRedo, snapEnabled, snapGridSize])
+  }, [canvasId, debouncedSourceSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleItemDragEnd = useCallback((dragId, position) => {
     if (!dragId || !position) {
@@ -521,7 +724,7 @@ export default function CanvasPage({ name }) {
     if (ids.size > 1 && ids.has(dragId)) {
       transitionPeers()
       // Suppress the click-based selection reset that fires after pointerup
-      justDraggedRef.current = true
+      justDraggedRef.current = true // eslint-disable-line react-hooks/immutability
       requestAnimationFrame(() => { justDraggedRef.current = false })
       undoRedo.snapshot(stateRef.current, 'multi-move')
 
@@ -558,7 +761,7 @@ export default function CanvasPage({ name }) {
           return w
         })
         queueWrite(() =>
-          updateCanvas(name, { widgets: next }).catch((err) =>
+          updateCanvas(canvasId, { widgets: next }).catch((err) =>
             console.error('[canvas] Failed to save multi-move:', err)
           )
         )
@@ -590,7 +793,7 @@ export default function CanvasPage({ name }) {
         })
         if (changed) {
           queueWrite(() =>
-            updateCanvas(name, { sources: next }).catch((err) =>
+            updateCanvas(canvasId, { sources: next }).catch((err) =>
               console.error('[canvas] Failed to save multi-move sources:', err)
             )
           )
@@ -609,7 +812,7 @@ export default function CanvasPage({ name }) {
           ? current.map((s) => (s?.export === sourceExport ? { ...s, position: rounded } : s))
           : [...current, { export: sourceExport, position: rounded }]
         queueWrite(() =>
-          updateCanvas(name, { sources: next }).catch((err) =>
+          updateCanvas(canvasId, { sources: next }).catch((err) =>
             console.error('[canvas] Failed to save source position:', err)
           )
         )
@@ -625,28 +828,65 @@ export default function CanvasPage({ name }) {
         w.id === dragId ? { ...w, position: rounded } : w
       )
       queueWrite(() =>
-        updateCanvas(name, { widgets: next }).catch((err) =>
+        updateCanvas(canvasId, { widgets: next }).catch((err) =>
           console.error('[canvas] Failed to save widget position:', err)
         )
       )
       return next
     })
-  }, [name, undoRedo, debouncedSave, transitionPeers, clearDragPreview])
+  }, [canvasId, undoRedo, debouncedSave, transitionPeers, clearDragPreview])
 
+  // Keep zoomRef in sync when React state is set (e.g. by toolbar or zoom-to-fit)
   useEffect(() => {
     zoomRef.current = zoom
   }, [zoom])
 
-  // Restore scroll position from localStorage after first render
+  // Cleanup zoom timers on unmount
+  useEffect(() => () => {
+    clearTimeout(zoomCommitTimer.current)
+    clearTimeout(zoomEventTimer.current)
+  }, [])
+
+  // Restore scroll position from localStorage after first render.
+  // When saved state is fresh (< 15 min), restore it. Otherwise zoom-to-fit
+  // all objects so the user sees a useful overview instead of stale coordinates.
   useEffect(() => {
     const el = scrollRef.current
+    if (!el || loading) return
     const saved = pendingScrollRestore.current
-    if (el && saved) {
+    if (saved) {
+      // Fresh saved viewport — restore exactly
       if (saved.scrollLeft != null) el.scrollLeft = saved.scrollLeft
       if (saved.scrollTop != null) el.scrollTop = saved.scrollTop
       pendingScrollRestore.current = null
+    } else {
+      // No saved state or stale — zoom-to-fit all objects
+      const bounds = computeCanvasBounds(localWidgets, componentEntries)
+      if (bounds && el.clientWidth > 0 && el.clientHeight > 0) {
+        const boxW = bounds.maxX - bounds.minX + FIT_PADDING * 2
+        const boxH = bounds.maxY - bounds.minY + FIT_PADDING * 2
+        const fitScale = Math.min(el.clientWidth / boxW, el.clientHeight / boxH)
+        const fitZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(fitScale * 100)))
+        const newScale = fitZoom / 100
+        zoomRef.current = fitZoom
+        // Imperative DOM update for initial zoom-to-fit — same path as applyZoom
+        const zoomEl = zoomElRef.current
+        if (zoomEl) {
+          zoomEl.style.transform = `scale(${newScale})`
+          zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
+          zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+        }
+        setZoom(fitZoom)
+        el.scrollLeft = (bounds.minX - FIT_PADDING) * newScale
+        el.scrollTop = (bounds.minY - FIT_PADDING) * newScale
+      } else {
+        el.scrollLeft = 0
+        el.scrollTop = 0
+      }
     }
-  }, [name, loading])
+    // Allow save effects for this canvas now that positioning is settled.
+    viewportInitName.current = canvasId
+  }, [canvasId, loading])
 
   // Center on a specific widget if `?widget=<id>` is in the URL
   useEffect(() => {
@@ -673,16 +913,13 @@ export default function CanvasPage({ name }) {
     // Check JSX sources (jsx-ExportName)
     if (!widget && targetId.startsWith('jsx-')) {
       const exportName = targetId.slice(4)
-      const sourceMap = Object.fromEntries(
-        (localSources || []).filter((s) => s?.export).map((s) => [s.export, s])
-      )
-      const sourceData = sourceMap[exportName]
-      if (sourceData || (jsxExports && exportName in jsxExports)) {
+      const entry = componentEntries.find((e) => e.exportName === exportName)
+      if (entry) {
         const fallback = WIDGET_FALLBACK_SIZES['component']
-        x = sourceData?.position?.x ?? 0
-        y = sourceData?.position?.y ?? 0
-        w = sourceData?.width ?? fallback.width
-        h = sourceData?.height ?? fallback.height
+        x = entry.sourceData?.position?.x ?? 0
+        y = entry.sourceData?.position?.y ?? 0
+        w = entry.sourceData?.width ?? fallback.width
+        h = entry.sourceData?.height ?? fallback.height
       }
     }
 
@@ -696,57 +933,78 @@ export default function CanvasPage({ name }) {
     const url = new URL(window.location.href)
     url.searchParams.delete('widget')
     window.history.replaceState({}, '', url.toString())
-  }, [loading, localWidgets, localSources, jsxExports])
+  }, [loading, localWidgets, componentEntries])
 
-  // Persist viewport state (zoom + scroll) to localStorage on changes
+  // Persist viewport state (zoom only) to localStorage on zoom changes.
+  // Scroll position is persisted separately by the debounced scroll handler,
+  // cleanup handler, and beforeunload — never here, because imperative zoom
+  // operations (applyZoom, zoom-to-fit) adjust scroll AFTER setZoom, so the
+  // scroll values would be stale at this point.
   useEffect(() => {
+    if (viewportInitName.current !== canvasId) return
     const el = scrollRef.current
-    saveViewportState(name, {
+    // Read current scroll so the zoom entry doesn't zero-out position,
+    // but the authoritative scroll save comes from the scroll handler.
+    saveViewportState(canvasId, {
       zoom,
       scrollLeft: el?.scrollLeft ?? 0,
       scrollTop: el?.scrollTop ?? 0,
     })
-  }, [name, zoom])
+  }, [canvasId, zoom])
 
   useEffect(() => {
     const el = scrollRef.current
     if (!el) return
-    function handleScroll() {
-      saveViewportState(name, {
+    const saveNow = () => {
+      if (viewportInitName.current !== canvasId) return
+      saveViewportState(canvasId, {
         zoom: zoomRef.current,
         scrollLeft: el.scrollLeft,
         scrollTop: el.scrollTop,
       })
     }
+    const debouncedScrollSave = debounce(saveNow, 150)
+    function handleScroll() {
+      if (viewportInitName.current !== canvasId) return
+      debouncedScrollSave()
+    }
     el.addEventListener('scroll', handleScroll, { passive: true })
 
     // Flush viewport state on page unload so a refresh never misses it
     function handleBeforeUnload() {
-      saveViewportState(name, {
-        zoom: zoomRef.current,
-        scrollLeft: el.scrollLeft,
-        scrollTop: el.scrollTop,
-      })
+      debouncedScrollSave.cancel()
+      saveNow()
     }
     window.addEventListener('beforeunload', handleBeforeUnload)
 
     return () => {
+      debouncedScrollSave.cancel()
       el.removeEventListener('scroll', handleScroll)
       window.removeEventListener('beforeunload', handleBeforeUnload)
+      // Save final state on cleanup (covers SPA navigation where
+      // beforeunload doesn't fire).
+      saveNow()
     }
-  }, [name, loading])
+  }, [canvasId, loading])
 
   /**
    * Zoom to a new level, anchoring on an optional client-space point.
    * When a cursor position is provided (e.g. from a wheel event), the
    * canvas point under the cursor stays fixed. Otherwise falls back to
    * the viewport center.
+   *
+   * Performs an imperative DOM mutation instead of a React state update
+   * to avoid triggering a full re-render of the widget tree on every
+   * zoom tick. React state is committed after a debounce for toolbar
+   * display updates.
    */
   function applyZoom(newZoom, clientX, clientY) {
     const el = scrollRef.current
+    const zoomEl = zoomElRef.current
     const clampedZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom))
 
-    if (!el) {
+    if (!el || !zoomEl) {
+      zoomRef.current = clampedZoom
       setZoom(clampedZoom)
       return
     }
@@ -764,24 +1022,48 @@ export default function CanvasPage({ name }) {
     const canvasX = (el.scrollLeft + anchorX) / oldScale
     const canvasY = (el.scrollTop + anchorY) / oldScale
 
-    // Synchronous render so the DOM has the new transform before we adjust scroll
+    // Imperative DOM update — no React re-render
     zoomRef.current = clampedZoom
-    flushSync(() => setZoom(clampedZoom))
+    zoomEl.style.transform = `scale(${newScale})`
+    zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
+    zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+
+    // Hint GPU compositing during active zoom
+    zoomEl.dataset.zooming = ''
 
     // Scroll so the same canvas point stays under the anchor
     el.scrollLeft = canvasX * newScale - anchorX
     el.scrollTop = canvasY * newScale - anchorY
+
+    // Debounced commit: update React state for toolbar display + persistence
+    clearTimeout(zoomCommitTimer.current)
+    zoomCommitTimer.current = setTimeout(() => {
+      // Remove GPU compositing hint
+      delete zoomEl.dataset.zooming
+      setZoom(clampedZoom)
+    }, 150)
+
+    // Throttled zoom-changed event for external consumers (toolbar)
+    if (!zoomEventTimer.current) {
+      zoomEventTimer.current = setTimeout(() => {
+        zoomEventTimer.current = null
+        window[CANVAS_BRIDGE_STATE_KEY] = { active: true, canvasId, zoom: zoomRef.current }
+        document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-changed', {
+          detail: { zoom: zoomRef.current }
+        }))
+      }, 100)
+    }
   }
 
   // Signal canvas mount/unmount to CoreUIBar
   useEffect(() => {
-    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, name, zoom: zoomRef.current }
+    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, canvasId, zoom: zoomRef.current }
     document.dispatchEvent(new CustomEvent('storyboard:canvas:mounted', {
-      detail: { name, zoom: zoomRef.current }
+      detail: { canvasId, zoom: zoomRef.current }
     }))
 
     function handleStatusRequest() {
-      const state = window[CANVAS_BRIDGE_STATE_KEY] || { active: true, name, zoom: zoomRef.current }
+      const state = window[CANVAS_BRIDGE_STATE_KEY] || { active: true, canvasId, zoom: zoomRef.current }
       document.dispatchEvent(new CustomEvent('storyboard:canvas:status', { detail: state }))
     }
 
@@ -789,10 +1071,10 @@ export default function CanvasPage({ name }) {
 
     return () => {
       document.removeEventListener('storyboard:canvas:status-request', handleStatusRequest)
-      window[CANVAS_BRIDGE_STATE_KEY] = { active: false, name: '', zoom: 100 }
+      window[CANVAS_BRIDGE_STATE_KEY] = { active: false, canvasId: '', zoom: 100 }
       document.dispatchEvent(new CustomEvent('storyboard:canvas:unmounted'))
     }
-  }, [name])
+  }, [canvasId])
 
   // Tell the Vite dev server to suppress full-reloads while this canvas is active.
   // The ?canvas-hmr URL param opts out of the guard for canvas UI development.
@@ -812,7 +1094,7 @@ export default function CanvasPage({ name }) {
       clearInterval(interval)
       import.meta.hot.send('storyboard:canvas-hmr-guard', { active: false, hmrEnabled: true })
     }
-  }, [name])
+  }, [canvasId])
 
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type) => {
@@ -820,7 +1102,7 @@ export default function CanvasPage({ name }) {
     const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
     const pos = centerPositionForWidget(center, type, defaultProps)
     try {
-      const result = await addWidgetApi(name, {
+      const result = await addWidgetApi(canvasId, {
         type,
         props: defaultProps,
         position: pos,
@@ -832,16 +1114,43 @@ export default function CanvasPage({ name }) {
     } catch (err) {
       console.error('[canvas] Failed to add widget:', err)
     }
-  }, [name, undoRedo])
+  }, [canvasId, undoRedo])
+
+  // Add a story widget by storyId — used by CanvasControls story picker
+  const addStoryWidget = useCallback(async (storyId) => {
+    const storyProps = { storyId, exportName: '', width: 600, height: 400 }
+    const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+    const pos = centerPositionForWidget(center, 'story', storyProps)
+    try {
+      const result = await addWidgetApi(canvasId, {
+        type: 'story',
+        props: storyProps,
+        position: pos,
+      })
+      if (result.success && result.widget) {
+        undoRedo.snapshot(stateRef.current, 'add')
+        setLocalWidgets((prev) => [...(prev || []), result.widget])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to add story widget:', err)
+    }
+  }, [canvasId, undoRedo])
 
   // Listen for CoreUIBar add-widget events
   useEffect(() => {
     function handleAddWidget(e) {
       addWidget(e.detail.type)
     }
+    function handleAddStoryWidget(e) {
+      addStoryWidget(e.detail.storyId)
+    }
     document.addEventListener('storyboard:canvas:add-widget', handleAddWidget)
-    return () => document.removeEventListener('storyboard:canvas:add-widget', handleAddWidget)
-  }, [addWidget])
+    document.addEventListener('storyboard:canvas:add-story-widget', handleAddStoryWidget)
+    return () => {
+      document.removeEventListener('storyboard:canvas:add-widget', handleAddWidget)
+      document.removeEventListener('storyboard:canvas:add-story-widget', handleAddStoryWidget)
+    }
+  }, [addWidget, addStoryWidget])
 
   // Listen for zoom changes from CoreUIBar
   useEffect(() => {
@@ -860,7 +1169,7 @@ export default function CanvasPage({ name }) {
     function handleSnapToggle() {
       setSnapEnabled((prev) => {
         const next = !prev
-        updateCanvas(name, { snapToGrid: next }).catch((err) =>
+        updateCanvas(canvasId, { settings: { snapToGrid: next } }).catch((err) =>
           console.error('[canvas] Failed to persist snap setting:', err)
         )
         return next
@@ -868,15 +1177,27 @@ export default function CanvasPage({ name }) {
     }
     document.addEventListener('storyboard:canvas:toggle-snap', handleSnapToggle)
     return () => document.removeEventListener('storyboard:canvas:toggle-snap', handleSnapToggle)
-  }, [name])
+  }, [canvasId])
 
   // Broadcast snap state to Svelte toolbar
   useEffect(() => {
     document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
       detail: { snapEnabled }
     }))
+    snapEnabledRef.current = snapEnabled
   }, [snapEnabled])
 
+  // Respond to snap-state requests from Svelte toolbar (handles mount-order race)
+  useEffect(() => {
+    function handleRequest() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
+        detail: { snapEnabled: snapEnabledRef.current }
+      }))
+    }
+    document.addEventListener('storyboard:canvas:snap-state-request', handleRequest)
+    return () => document.removeEventListener('storyboard:canvas:snap-state-request', handleRequest)
+  }, [])
+
   // Listen for gridSize from Svelte toolbar config
   useEffect(() => {
     function handleGridSize(e) {
@@ -887,13 +1208,18 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('storyboard:canvas:grid-size', handleGridSize)
   }, [])
 
+  // Keep snapGridSize ref in sync for drop handler
+  useEffect(() => {
+    snapGridSizeRef.current = snapGridSize
+  }, [snapGridSize])
+
   // Listen for zoom-to-fit from CoreUIBar
   useEffect(() => {
     function handleZoomToFit() {
       const el = scrollRef.current
       if (!el) return
 
-      const bounds = computeCanvasBounds(localWidgets, localSources, jsxExports)
+      const bounds = computeCanvasBounds(localWidgets, componentEntries)
       if (!bounds) return
 
       const boxW = bounds.maxX - bounds.minX + FIT_PADDING * 2
@@ -907,17 +1233,32 @@ export default function CanvasPage({ name }) {
       const fitZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(fitScale * 100)))
       const newScale = fitZoom / 100
 
-      // Apply zoom synchronously so DOM updates before we scroll
+      // Imperative DOM update — same path as applyZoom
       zoomRef.current = fitZoom
-      flushSync(() => setZoom(fitZoom))
+      const zoomEl = zoomElRef.current
+      if (zoomEl) {
+        zoomEl.style.transform = `scale(${newScale})`
+        zoomEl.style.width = `${Math.max(10000, 100 / newScale)}vw`
+        zoomEl.style.height = `${Math.max(10000, 100 / newScale)}vh`
+      }
+      setZoom(fitZoom)
 
       // Scroll so the bounding box top-left (with padding) is at viewport top-left
       el.scrollLeft = (bounds.minX - FIT_PADDING) * newScale
       el.scrollTop = (bounds.minY - FIT_PADDING) * newScale
+
+      // Persist after both zoom and scroll are settled
+      if (viewportInitName.current === canvasId) {
+        saveViewportState(canvasId, {
+          zoom: fitZoom,
+          scrollLeft: el.scrollLeft,
+          scrollTop: el.scrollTop,
+        })
+      }
     }
     document.addEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
     return () => document.removeEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
-  }, [localWidgets, localSources, jsxExports])
+  }, [localWidgets, componentEntries])
 
   // Canvas background should follow toolbar theme target.
   useEffect(() => {
@@ -932,11 +1273,11 @@ export default function CanvasPage({ name }) {
 
   // Broadcast zoom level to CoreUIBar whenever it changes
   useEffect(() => {
-    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, name, zoom }
+    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, canvasId, zoom }
     document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-changed', {
       detail: { zoom }
     }))
-  }, [name, zoom])
+  }, [canvasId, zoom])
 
   // Delete selected widget on Delete/Backspace key
   useEffect(() => {
@@ -958,6 +1299,17 @@ export default function CanvasPage({ name }) {
         e.preventDefault()
         setSelectedWidgetIds(new Set())
       }
+      // 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) {
+        // 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()
         if (selectedWidgetIds.size > 1) {
@@ -968,7 +1320,7 @@ export default function CanvasPage({ name }) {
             if (!prev) return prev
             const next = prev.filter(w => !selectedWidgetIds.has(w.id))
             queueWrite(() =>
-              updateCanvas(name, { widgets: next }).catch(err =>
+              updateCanvas(canvasId, { widgets: next }).catch(err =>
                 console.error('[canvas] Failed to save multi-delete:', err)
               )
             )
@@ -983,50 +1335,17 @@ export default function CanvasPage({ name }) {
     }
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [selectedWidgetIds, handleWidgetRemove, undoRedo, name, debouncedSave])
+  }, [selectedWidgetIds, localWidgets, handleWidgetRemove, undoRedo, canvasId, debouncedSave])
 
-  // Paste handler — images become image widgets, same-origin URLs become prototypes,
+  // Ref to store processImageFile for use by drop effect
+  const processImageFileRef = useRef(null)
+
+  // Paste and drop handler — images become image widgets, same-origin URLs become prototypes,
   // other URLs become link previews, text becomes markdown
   useEffect(() => {
     const origin = window.location.origin
     const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-    const baseUrl = origin + basePath
-
-    // Check if a URL is same-origin, accounting for branch-deploy prefixes.
-    // e.g. https://site.com/branch--my-feature/Proto and https://site.com/storyboard/Proto
-    // are both same-origin prototype URLs.
-    function isSameOriginPrototype(url) {
-      if (!url.startsWith(origin)) return false
-      if (url.startsWith(baseUrl)) return true
-      // Match branch deploy URLs: origin + /branch--*/...
-      const pathAfterOrigin = url.slice(origin.length)
-      return BRANCH_PREFIX_RE.test(pathAfterOrigin)
-    }
-
-    // Strip the base path (or any branch prefix) from a pathname to get a portable src.
-    function extractPrototypeSrc(pathname) {
-      // Strip current base path
-      if (basePath && pathname.startsWith(basePath)) {
-        return pathname.slice(basePath.length) || '/'
-      }
-      // Strip branch prefix: /branch--name/rest → /rest
-      const branchMatch = pathname.match(BRANCH_PREFIX_RE)
-      if (branchMatch) {
-        return pathname.slice(branchMatch[0].length) || '/'
-      }
-      return pathname
-    }
-
-    /** Parse text as a web URL (http/https only). Returns URL object or null. */
-    function looksLikeWebUrl(text) {
-      try {
-        const url = new URL(text)
-        if (url.protocol === 'http:' || url.protocol === 'https:') return url
-        return null
-      } catch {
-        return null
-      }
-    }
+    const pasteCtx = createPasteContext(origin, basePath)
 
     function blobToDataUrl(blob) {
       return new Promise((resolve, reject) => {
@@ -1046,6 +1365,59 @@ export default function CanvasPage({ name }) {
       })
     }
 
+    /**
+     * Process an image file (from paste or drop) and add it as a widget.
+     * @param {File|Blob} file - Image file to process
+     * @param {{ x: number, y: number }|null} position - Drop position, or null to use viewport center
+     */
+    async function processImageFile(file, position = null) {
+      try {
+        const dataUrl = await blobToDataUrl(file)
+        const { width: natW, height: natH } = await getImageDimensions(dataUrl)
+
+        // Display at 2x retina: halve natural dimensions, then cap at 600px
+        const maxWidth = 600
+        let displayW = Math.round(natW / 2)
+        let displayH = Math.round(natH / 2)
+        if (displayW > maxWidth) {
+          displayH = Math.round(displayH * (maxWidth / displayW))
+          displayW = maxWidth
+        }
+
+        const uploadResult = await uploadImage(dataUrl, canvasId)
+        if (!uploadResult.success) {
+          console.error('[canvas] Image upload failed:', uploadResult.error)
+          return false
+        }
+
+        // Use provided position or fall back to viewport center
+        let pos
+        if (position) {
+          pos = { x: position.x, y: position.y }
+        } else {
+          const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+          pos = centerPositionForWidget(center, 'image', { width: displayW, height: displayH })
+        }
+
+        const result = await addWidgetApi(canvasId, {
+          type: 'image',
+          props: { src: uploadResult.filename, private: false, width: displayW, height: displayH },
+          position: pos,
+        })
+        if (result.success && result.widget) {
+          undoRedo.snapshot(stateRef.current, 'add')
+          setLocalWidgets((prev) => [...(prev || []), result.widget])
+        }
+        return true
+      } catch (err) {
+        console.error('[canvas] Failed to process image:', err)
+        return false
+      }
+    }
+
+    // Store in ref for use by drag/drop effect
+    processImageFileRef.current = processImageFile
+
     async function handleImagePaste(e) {
       const items = e.clipboardData?.items
       if (!items) return false
@@ -1057,40 +1429,7 @@ export default function CanvasPage({ name }) {
         if (!blob) continue
 
         e.preventDefault()
-
-        try {
-          const dataUrl = await blobToDataUrl(blob)
-          const { width: natW, height: natH } = await getImageDimensions(dataUrl)
-
-          // Display at 2x retina: halve natural dimensions, then cap at 600px
-          const maxWidth = 600
-          let displayW = Math.round(natW / 2)
-          let displayH = Math.round(natH / 2)
-          if (displayW > maxWidth) {
-            displayH = Math.round(displayH * (maxWidth / displayW))
-            displayW = maxWidth
-          }
-
-          const uploadResult = await uploadImage(dataUrl, name)
-          if (!uploadResult.success) {
-            console.error('[canvas] Image upload failed:', uploadResult.error)
-            return true
-          }
-
-          const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
-          const pos = centerPositionForWidget(center, 'image', { width: displayW, height: displayH })
-          const result = await addWidgetApi(name, {
-            type: 'image',
-            props: { src: uploadResult.filename, private: false, width: displayW, height: displayH },
-            position: pos,
-          })
-          if (result.success && result.widget) {
-            undoRedo.snapshot(stateRef.current, 'add')
-            setLocalWidgets((prev) => [...(prev || []), result.widget])
-          }
-        } catch (err) {
-          console.error('[canvas] Failed to paste image:', err)
-        }
+        await processImageFile(blob, null)
         return true
       }
       return false
@@ -1107,32 +1446,94 @@ export default function CanvasPage({ name }) {
       const text = e.clipboardData?.getData('text/plain')?.trim()
       if (!text) return
 
-      e.preventDefault()
+      // 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, sourceWidgetRef] = widgetRefMatch
+        const sourceWidgetIds = sourceWidgetRef.split(',').filter(id => !id.startsWith('jsx-'))
+        if (sourceWidgetIds.length === 0) return
 
-      let type, props
-      const url = looksLikeWebUrl(text)
-      if (url) {
-        if (isFigmaUrl(text)) {
-          type = 'figma-embed'
-          props = { url: sanitizeFigmaUrl(text), width: 800, height: 450 }
-        } else if (isSameOriginPrototype(text)) {
-          const pathPortion = url.pathname + url.search + url.hash
-          const src = extractPrototypeSrc(pathPortion)
-          type = 'prototype'
-          props = { src: src || '/', originalSrc: src || '/', label: '', width: 800, height: 600 }
-        } else {
-          type = 'link-preview'
-          props = { url: text, title: '' }
+        try {
+          // Resolve source widgets in canvas order
+          let sourceList
+          if (sourceCanvas === canvasId) {
+            sourceList = localWidgets ?? []
+          } else {
+            const canvasData = await getCanvasApi(sourceCanvas)
+            sourceList = canvasData?.widgets ?? []
+          }
+
+          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: w.type,
+              props: { ...w.props },
+              position: { x: baseX + relX, y: baseY + relY },
+            })
+            if (result.success && 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)
         }
-      } else {
-        type = 'markdown'
-        props = { content: text }
+        // Always consume the ref — never fall through to markdown creation
+        return
+      }
+
+      e.preventDefault()
+      const resolved = resolvePaste(text, pasteCtx, getPasteRules())
+      if (!resolved) return
+      const { type } = resolved
+      let props = resolved.props
+
+      if (type === 'link-preview' && isGitHubEmbedUrl(props?.url || text)) {
+        const githubUpdates = await buildGitHubPreviewUpdates(props?.url || text)
+        if (githubUpdates) props = { ...props, ...githubUpdates }
       }
 
       const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
       const pos = centerPositionForWidget(center, type, props)
       try {
-        const result = await addWidgetApi(name, {
+        const result = await addWidgetApi(canvasId, {
           type,
           props,
           position: pos,
@@ -1140,14 +1541,81 @@ export default function CanvasPage({ name }) {
         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)
       }
     }
+
     document.addEventListener('paste', handlePaste)
     return () => document.removeEventListener('paste', handlePaste)
-  }, [name, undoRedo])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvasId, undoRedo, localWidgets])
+
+  // --- Drag and drop handlers for images from Finder/file manager ---
+  // Separate effect to ensure listeners attach after scroll container mounts (loading=false)
+  useEffect(() => {
+    if (loading) return // Don't attach until canvas is loaded and scroll container exists
+
+    const scrollEl = scrollRef.current
+    if (!scrollEl) return
+
+    function handleDragOver(e) {
+      // Only handle if dragging files (not internal widget drag)
+      if (!e.dataTransfer?.types?.includes('Files')) return
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    }
+
+    async function handleDrop(e) {
+      // Only handle file drops, not internal widget drags
+      if (!e.dataTransfer?.types?.includes('Files')) return
+
+      // Prevent browser default (opening file) immediately for any file drop
+      e.preventDefault()
+      e.stopPropagation()
+
+      const files = e.dataTransfer.files
+      if (!files || files.length === 0) return
+
+      // Filter to image files only — non-images are silently ignored (default already prevented)
+      const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/'))
+      if (imageFiles.length === 0) return
+
+      // Convert drop coordinates to canvas coordinates
+      const rect = scrollEl.getBoundingClientRect()
+      const scale = zoomRef.current / 100
+
+      // Mouse position relative to scroll container
+      const mouseX = e.clientX - rect.left
+      const mouseY = e.clientY - rect.top
+
+      // Convert to canvas coordinates (account for scroll and zoom)
+      const canvasX = (scrollEl.scrollLeft + mouseX) / scale
+      const canvasY = (scrollEl.scrollTop + mouseY) / scale
+
+      // Snap to grid if enabled, using current grid size
+      const gridSize = snapGridSizeRef.current
+      const shouldSnap = snapEnabledRef.current
+      const snappedX = shouldSnap ? Math.round(canvasX / gridSize) * gridSize : Math.round(canvasX)
+      const snappedY = shouldSnap ? Math.round(canvasY / gridSize) * gridSize : Math.round(canvasY)
+
+      // Process each image file, offsetting subsequent images
+      for (let i = 0; i < imageFiles.length; i++) {
+        const offset = shouldSnap ? i * gridSize : i * 24
+        await processImageFileRef.current?.(imageFiles[i], { x: snappedX + offset, y: snappedY + offset })
+      }
+    }
+
+    scrollEl.addEventListener('dragover', handleDragOver)
+    scrollEl.addEventListener('drop', handleDrop)
+
+    return () => {
+      scrollEl.removeEventListener('dragover', handleDragOver)
+      scrollEl.removeEventListener('drop', handleDrop)
+    }
+  }, [loading])
 
   // --- Undo / Redo ---
   const handleUndo = useCallback(() => {
@@ -1158,11 +1626,11 @@ export default function CanvasPage({ name }) {
     setLocalWidgets(previous.widgets)
     setLocalSources(previous.sources)
     queueWrite(() =>
-      updateCanvas(name, { widgets: previous.widgets, sources: previous.sources }).catch((err) =>
+      updateCanvas(canvasId, { widgets: previous.widgets, sources: previous.sources }).catch((err) =>
         console.error('[canvas] Failed to persist undo:', err)
       )
     )
-  }, [name, debouncedSave, debouncedSourceSave, undoRedo])
+  }, [canvasId, debouncedSave, debouncedSourceSave, undoRedo])
 
   const handleRedo = useCallback(() => {
     const next = undoRedo.redo(stateRef.current)
@@ -1172,11 +1640,11 @@ export default function CanvasPage({ name }) {
     setLocalWidgets(next.widgets)
     setLocalSources(next.sources)
     queueWrite(() =>
-      updateCanvas(name, { widgets: next.widgets, sources: next.sources }).catch((err) =>
+      updateCanvas(canvasId, { widgets: next.widgets, sources: next.sources }).catch((err) =>
         console.error('[canvas] Failed to persist redo:', err)
       )
     )
-  }, [name, debouncedSave, debouncedSourceSave, undoRedo])
+  }, [canvasId, debouncedSave, debouncedSourceSave, undoRedo])
 
   // Keyboard shortcuts — dev-only (Cmd+Z / Cmd+Shift+Z)
   useEffect(() => {
@@ -1235,6 +1703,69 @@ export default function CanvasPage({ name }) {
     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(() => {
+    const el = scrollRef.current
+    if (!el) return
+
+    function getTouchDist(t1, t2) {
+      const dx = t1.clientX - t2.clientX
+      const dy = t1.clientY - t2.clientY
+      return Math.sqrt(dx * dx + dy * dy)
+    }
+
+    function handleTouchStart(e) {
+      if (e.touches.length !== 2) return
+      const dist = getTouchDist(e.touches[0], e.touches[1])
+      pinchState.current = {
+        active: true,
+        startDist: dist,
+        startZoom: zoomRef.current,
+        centerX: (e.touches[0].clientX + e.touches[1].clientX) / 2,
+        centerY: (e.touches[0].clientY + e.touches[1].clientY) / 2,
+      }
+    }
+
+    function handleTouchMove(e) {
+      if (!pinchState.current.active || e.touches.length !== 2) return
+      e.preventDefault()
+      const dist = getTouchDist(e.touches[0], e.touches[1])
+      const ratio = dist / pinchState.current.startDist
+      const newZoom = Math.round(pinchState.current.startZoom * ratio)
+      applyZoom(newZoom, pinchState.current.centerX, pinchState.current.centerY)
+    }
+
+    function handleTouchEnd() {
+      pinchState.current.active = false
+    }
+
+    el.addEventListener('touchstart', handleTouchStart, { passive: true })
+    el.addEventListener('touchmove', handleTouchMove, { passive: false })
+    el.addEventListener('touchend', handleTouchEnd)
+    el.addEventListener('touchcancel', handleTouchEnd)
+    return () => {
+      el.removeEventListener('touchstart', handleTouchStart)
+      el.removeEventListener('touchmove', handleTouchMove)
+      el.removeEventListener('touchend', handleTouchEnd)
+      el.removeEventListener('touchcancel', handleTouchEnd)
+    }
+  }, [])
+
   // Space + drag to pan the canvas
   const [spaceHeld, setSpaceHeld] = useState(false)
   const isPanning = useRef(false)
@@ -1294,10 +1825,19 @@ export default function CanvasPage({ name }) {
     document.addEventListener('mouseup', handlePanEnd)
   }, [spaceHeld])
 
+  // Stable callback for deselecting all widgets
+  const handleDeselectAll = useCallback(() => setSelectedWidgetIds(new Set()), [])
+
+  // Stable callback for widget removal + deselect
+  const handleWidgetRemoveAndDeselect = useCallback((id) => {
+    handleWidgetRemove(id)
+    setSelectedWidgetIds(new Set())
+  }, [handleWidgetRemove])
+
   if (!canvas) {
     return (
       <div className={styles.empty}>
-        <p>Canvas &ldquo;{name}&rdquo; not found</p>
+        <p>Canvas &ldquo;{canvasId}&rdquo; not found</p>
       </div>
     )
   }
@@ -1328,54 +1868,50 @@ export default function CanvasPage({ name }) {
   // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
   const allChildren = []
 
-  const sourceDataByExport = Object.fromEntries(
-    (localSources || [])
-      .filter((source) => source?.export)
-      .map((source) => [source.export, source])
-  )
-
-  // 1. JSX-sourced component widgets (wrapped in WidgetChrome, not deletable)
-  const componentFeatures = getFeatures('component')
-  if (jsxExports) {
-    for (const [exportName, Component] of Object.entries(jsxExports)) {
-      const sourceData = sourceDataByExport[exportName] || {}
-      const sourcePosition = sourceData.position || { x: 0, y: 0 }
-      allChildren.push(
-        <div
-          key={`jsx-${exportName}`}
-          id={`jsx-${exportName}`}
-          data-tc-x={sourcePosition.x}
-          data-tc-y={sourcePosition.y}
-          {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
-          {...canvasPrimerAttrs}
-          style={canvasThemeVars}
-          onClick={isLocalDev ? (e) => {
-            e.stopPropagation()
-            if (!e.target.closest('.tc-drag-handle')) {
-              handleWidgetSelect(`jsx-${exportName}`, e.shiftKey)
-            }
-          } : undefined}
+  // 1. Component widgets (from jsxExports or sources fallback)
+  const componentFeatures = getFeatures('component', { isLocalDev })
+  for (const entry of componentEntries) {
+    const { exportName, Component, sourceData } = entry
+    const sourcePosition = sourceData.position || { x: 0, y: 0 }
+    allChildren.push(
+      <div
+        key={`jsx-${exportName}`}
+        id={`jsx-${exportName}`}
+        data-tc-x={sourcePosition.x}
+        data-tc-y={sourcePosition.y}
+        {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
+        {...canvasPrimerAttrs}
+        style={canvasThemeVars}
+        onClick={isLocalDev ? (e) => {
+          e.stopPropagation()
+          if (!e.target.closest('.tc-drag-handle')) {
+            handleWidgetSelect(`jsx-${exportName}`, e.shiftKey)
+          }
+        } : undefined}
+      >
+        <WidgetChrome
+          widgetId={`jsx-${exportName}`}
+          features={componentFeatures}
+          selected={selectedWidgetIds.has(`jsx-${exportName}`)}
+          multiSelected={isMultiSelected && selectedWidgetIds.has(`jsx-${exportName}`)}
+          onSelect={(shiftKey) => handleWidgetSelect(`jsx-${exportName}`, shiftKey)}
+          onDeselect={handleDeselectAll}
+          readOnly={!isLocalDev}
         >
-          <WidgetChrome
-            widgetId={`jsx-${exportName}`}
-            features={componentFeatures}
-            selected={selectedWidgetIds.has(`jsx-${exportName}`)}
-            multiSelected={isMultiSelected && selectedWidgetIds.has(`jsx-${exportName}`)}
-            onSelect={(shiftKey) => handleWidgetSelect(`jsx-${exportName}`, shiftKey)}
-            onDeselect={() => setSelectedWidgetIds(new Set())}
-            readOnly={!isLocalDev}
-          >
-            <ComponentWidget
-              component={Component}
-              width={sourceData.width}
-              height={sourceData.height}
-              onUpdate={isLocalDev ? (updates) => handleSourceUpdate(exportName, updates) : undefined}
-              resizable={isResizable('component') && isLocalDev}
-            />
-          </WidgetChrome>
-        </div>
-      )
-    }
+          <ComponentWidget
+            component={Component}
+            jsxModule={canvas?._jsxModule}
+            exportName={exportName}
+            canvasTheme={canvasTheme}
+            isLocalDev={isLocalDev}
+            width={sourceData.width}
+            height={sourceData.height}
+            onUpdate={isLocalDev ? (updates) => handleSourceUpdate(exportName, updates) : undefined}
+            resizable={isResizable('component') && isLocalDev}
+          />
+        </WidgetChrome>
+      </div>
+    )
   }
 
   // 2. JSON-defined mutable widgets (selectable, wrapped in WidgetChrome)
@@ -1401,13 +1937,12 @@ export default function CanvasPage({ name }) {
           selected={selectedWidgetIds.has(widget.id)}
           multiSelected={isMultiSelected && selectedWidgetIds.has(widget.id)}
           onSelect={(shiftKey) => handleWidgetSelect(widget.id, shiftKey)}
-          onDeselect={() => setSelectedWidgetIds(new Set())}
+          onDeselect={handleDeselectAll}
           onUpdate={isLocalDev ? handleWidgetUpdate : undefined}
           onCopy={isLocalDev ? handleWidgetCopy : undefined}
-          onRemove={isLocalDev ? (id) => {
-            handleWidgetRemove(id)
-            setSelectedWidgetIds(new Set())
-          } : undefined}
+          onRemove={isLocalDev ? handleWidgetRemoveAndDeselect : undefined}
+          onRefreshGitHub={isLocalDev ? handleRefreshGitHubWidget : undefined}
+          canRefreshGitHub={isLocalDev}
           readOnly={!isLocalDev}
         />
       </div>
@@ -1419,24 +1954,8 @@ export default function CanvasPage({ name }) {
   return (
     <>
       <div className={styles.canvasTitle}>
-        <div className={styles.canvasTitleWrap}>
-          <span className={styles.canvasTitleMeasure} aria-hidden="true">{canvasTitle || ' '}</span>
-          {isLocalDev ? (
-            <input
-              ref={titleInputRef}
-              className={styles.canvasTitleInput}
-              value={canvasTitle}
-              size={1}
-              onChange={handleTitleChange}
-              onKeyDown={handleTitleKeyDown}
-              onMouseDown={(e) => e.stopPropagation()}
-              spellCheck={false}
-              aria-label="Canvas title"
-            />
-          ) : (
-            <h1 className={styles.canvasTitleStatic}>{canvasTitle}</h1>
-          )}
-        </div>
+        <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>
         )}
@@ -1451,10 +1970,11 @@ export default function CanvasPage({ name }) {
           ...canvasThemeVars,
           ...(spaceHeld ? { cursor: panningActive ? 'grabbing' : 'grab' } : {}),
         }}
-        onClick={() => setSelectedWidgetIds(new Set())}
+        onClick={handleDeselectAll}
         onMouseDown={handlePanStart}
       >
         <div
+          ref={zoomElRef}
           data-storyboard-canvas-zoom
           data-sb-canvas-theme={canvasTheme}
           className={styles.canvasZoom}
@@ -1471,6 +1991,28 @@ export default function CanvasPage({ name }) {
           </Canvas>
         </div>
       </div>
+      {showGhInstallBanner && (
+        <aside className={styles.ghInstallBanner} role="status" aria-live="polite">
+          <span className={styles.ghInstallBannerText}>
+            GitHub embeds require local <code>gh</code> CLI access.
+          </span>
+          <a
+            href={GH_INSTALL_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.ghInstallBannerLink}
+          >
+            Install GitHub CLI
+          </a>
+          <button
+            type="button"
+            className={styles.ghInstallBannerDismiss}
+            onClick={() => setShowGhInstallBanner(false)}
+          >
+            Dismiss
+          </button>
+        </aside>
+      )}
     </>
   )
 }