@dfosco/storyboard-react 4.0.0-beta.2 → 4.0.0-beta.20

package/src/canvas/CanvasPage.jsx

@@ -1,4 +1,4 @@
-import { createElement, useCallback, useEffect, useRef, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { Canvas } from '@dfosco/tiny-canvas'
 import '@dfosco/tiny-canvas/style.css'
@@ -8,21 +8,35 @@ 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 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, updateCanvas, removeWidget as removeWidgetApi, uploadImage, getCanvas as getCanvasApi } 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'
 
 /** 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'
 }
@@ -47,6 +61,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).
@@ -71,6 +115,11 @@ function loadViewportState(canvasName) {
     const raw = localStorage.getItem(getViewportStorageKey(canvasName))
     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(canvasName))
+      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,
@@ -81,7 +130,10 @@ function loadViewportState(canvasName) {
 
 function saveViewportState(canvasName, state) {
   try {
-    localStorage.setItem(getViewportStorageKey(canvasName), JSON.stringify(state))
+    localStorage.setItem(getViewportStorageKey(canvasName), JSON.stringify({
+      ...state,
+      timestamp: Date.now(),
+    }))
   } catch { /* quota exceeded — non-critical */ }
 }
 
@@ -158,7 +210,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,24 +231,18 @@ 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
@@ -234,13 +280,16 @@ function ChromeWrappedWidget({
   readOnly,
 }) {
   const widgetRef = useRef(null)
-  const features = getFeatures(widget.type)
+  const features = getFeatures(widget.type, { isLocalDev: !readOnly })
 
   const handleAction = useCallback((actionId) => {
     if (actionId === 'delete') {
       onRemove?.(widget.id)
     } else if (actionId === 'copy') {
       onCopy?.(widget)
+    } else if (actionId === 'copy-text') {
+      const text = widget.props?.text || widget.props?.content || ''
+      navigator.clipboard?.writeText(text).catch(() => {})
     }
   }, [widget, onRemove, onCopy])
 
@@ -274,8 +323,8 @@ function ChromeWrappedWidget({
  *
  * @param {{ name: 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({ name, siblingPages = [], canvasMeta = null }) {
+  const { canvas, jsxExports, jsxError, loading } = useCanvas(name)
   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
@@ -287,12 +336,45 @@ export default function CanvasPage({ name }) {
   const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = 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 canvas name was last initialized — save effects only
+  // write when this matches `name`, 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)
+  // 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 +431,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,8 +476,17 @@ 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(name)
+    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
@@ -407,27 +498,6 @@ export default function CanvasPage({ name }) {
     }, 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
@@ -521,7 +591,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')
 
@@ -637,15 +707,38 @@ export default function CanvasPage({ name }) {
     zoomRef.current = zoom
   }, [zoom])
 
-  // Restore scroll position from localStorage after first render
+  // 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
+        flushSync(() => setZoom(fitZoom))
+        el.scrollLeft = (bounds.minX - FIT_PADDING) * newScale
+        el.scrollTop = (bounds.minY - FIT_PADDING) * newScale
+      } else {
+        el.scrollLeft = 0
+        el.scrollTop = 0
+      }
     }
+    // Allow save effects for this canvas now that positioning is settled.
+    viewportInitName.current = name
   }, [name, loading])
 
   // Center on a specific widget if `?widget=<id>` is in the URL
@@ -673,16 +766,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,11 +786,18 @@ 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 !== name) return
     const el = scrollRef.current
+    // Read current scroll so the zoom entry doesn't zero-out position,
+    // but the authoritative scroll save comes from the scroll handler.
     saveViewportState(name, {
       zoom,
       scrollLeft: el?.scrollLeft ?? 0,
@@ -711,28 +808,35 @@ export default function CanvasPage({ name }) {
   useEffect(() => {
     const el = scrollRef.current
     if (!el) return
-    function handleScroll() {
+    const saveNow = () => {
+      if (viewportInitName.current !== name) return
       saveViewportState(name, {
         zoom: zoomRef.current,
         scrollLeft: el.scrollLeft,
         scrollTop: el.scrollTop,
       })
     }
+    const debouncedScrollSave = debounce(saveNow, 150)
+    function handleScroll() {
+      if (viewportInitName.current !== name) 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])
 
@@ -771,6 +875,17 @@ export default function CanvasPage({ name }) {
     // Scroll so the same canvas point stays under the anchor
     el.scrollLeft = canvasX * newScale - anchorX
     el.scrollTop = canvasY * newScale - anchorY
+
+    // Persist after both zoom and scroll are settled (the zoom effect
+    // fires inside flushSync before the scroll adjustment above, so it
+    // would capture stale scroll values).
+    if (viewportInitName.current === name) {
+      saveViewportState(name, {
+        zoom: clampedZoom,
+        scrollLeft: el.scrollLeft,
+        scrollTop: el.scrollTop,
+      })
+    }
   }
 
   // Signal canvas mount/unmount to CoreUIBar
@@ -834,14 +949,41 @@ export default function CanvasPage({ name }) {
     }
   }, [name, 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(name, {
+        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)
+    }
+  }, [name, 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 +1002,7 @@ export default function CanvasPage({ name }) {
     function handleSnapToggle() {
       setSnapEnabled((prev) => {
         const next = !prev
-        updateCanvas(name, { snapToGrid: next }).catch((err) =>
+        updateCanvas(name, { settings: { snapToGrid: next } }).catch((err) =>
           console.error('[canvas] Failed to persist snap setting:', err)
         )
         return next
@@ -875,8 +1017,20 @@ export default function CanvasPage({ name }) {
     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 +1041,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
@@ -914,10 +1073,19 @@ export default function CanvasPage({ name }) {
       // 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 === name) {
+        saveViewportState(name, {
+          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(() => {
@@ -958,6 +1126,14 @@ export default function CanvasPage({ name }) {
         e.preventDefault()
         setSelectedWidgetIds(new Set())
       }
+      // Copy shortcut (single widget selected):
+      // cmd+c → copy canvasName::widgetId (for cross-canvas paste-duplicate)
+      const mod = e.metaKey || e.ctrlKey
+      if (mod && e.key === 'c' && !e.shiftKey && selectedWidgetIds.size === 1) {
+        const widgetId = [...selectedWidgetIds][0]
+        e.preventDefault()
+        navigator.clipboard.writeText(`${name}::${widgetId}`).catch(() => {})
+      }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         e.preventDefault()
         if (selectedWidgetIds.size > 1) {
@@ -983,50 +1159,17 @@ export default function CanvasPage({ name }) {
     }
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [selectedWidgetIds, handleWidgetRemove, undoRedo, name, debouncedSave])
+  }, [selectedWidgetIds, localWidgets, handleWidgetRemove, undoRedo, name, 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 +1189,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, name)
+        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(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])
+        }
+        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 +1253,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,28 +1270,48 @@ export default function CanvasPage({ name }) {
       const text = e.clipboardData?.getData('text/plain')?.trim()
       if (!text) return
 
-      e.preventDefault()
-
-      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: '' }
+      // Detect canvasName::widgetId format for widget duplication (cross-canvas copy-paste)
+      // Also supports legacy canvasName/widgetId for basenames without slashes,
+      // but only when the second segment looks like a widget ID (type-hash).
+      const widgetRefMatch = text.match(/^(.+)::([^:]+)$/) || (text.indexOf('::') === -1 && text.match(/^([^/]+)\/((?:sticky-note|markdown|prototype|link-preview|figma-embed|component|image)-[a-z0-9]+)$/))
+      if (widgetRefMatch) {
+        e.preventDefault()
+        const [, sourceCanvas, sourceWidgetId] = widgetRefMatch
+        // Component widgets are code, not duplicable data — silently consume the ref
+        if (sourceWidgetId.startsWith('jsx-')) return
+        try {
+          let sourceWidget = null
+          if (sourceCanvas === name) {
+            sourceWidget = (localWidgets ?? []).find(w => w.id === sourceWidgetId)
+          } else {
+            const canvasData = await getCanvasApi(sourceCanvas)
+            sourceWidget = (canvasData?.widgets ?? []).find(w => w.id === sourceWidgetId)
+          }
+          if (sourceWidget) {
+            const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+            const pos = centerPositionForWidget(center, sourceWidget.type, sourceWidget.props)
+            undoRedo.snapshot(stateRef.current, 'add')
+            const result = await addWidgetApi(name, {
+              type: sourceWidget.type,
+              props: { ...sourceWidget.props },
+              position: pos,
+            })
+            if (result.success && result.widget) {
+              setLocalWidgets((prev) => [...(prev || []), result.widget])
+            }
+          }
+        } 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, props } = resolved
+
       const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
       const pos = centerPositionForWidget(center, type, props)
       try {
@@ -1145,9 +1328,74 @@ export default function CanvasPage({ name }) {
         console.error('[canvas] Failed to add widget from paste:', err)
       }
     }
+
     document.addEventListener('paste', handlePaste)
     return () => document.removeEventListener('paste', handlePaste)
-  }, [name, undoRedo])
+  }, [name, 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(() => {
@@ -1235,6 +1483,55 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('wheel', handleWheel)
   }, [])
 
+  // 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)
@@ -1328,54 +1625,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={() => setSelectedWidgetIds(new Set())}
+          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)
@@ -1419,24 +1712,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 || name.split('/').pop()}</h1>
+        <PageSelector currentName={name} pages={siblingPages} />
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>
         )}