@dfosco/storyboard-react 4.0.0-beta.16 → 4.0.0-beta.19

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.19",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.16",
-    "@dfosco/tiny-canvas": "4.0.0-beta.16",
+    "@dfosco/storyboard-core": "4.0.0-beta.19",
+    "@dfosco/tiny-canvas": "4.0.0-beta.19",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/canvas/CanvasPage.jsx

@@ -21,6 +21,9 @@ 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/ */
@@ -112,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,
@@ -122,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 */ }
 }
 
@@ -325,10 +336,10 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
   const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = useRef(null)
   const pendingScrollRestore = useRef(initialViewport)
-  // Gate viewport persistence until initial positioning is complete (restore,
-  // ?widget= deep-link, or first visit). Prevents early save effects from
-  // overwriting the saved scroll position with 0,0.
-  const viewportInitDone = useRef(false)
+  // 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)
@@ -468,10 +479,14 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
     setSnapEnabled(canvas?.snapToGrid ?? false)
     setSnapGridSize(canvas?.gridSize || 40)
     undoRedo.reset()
-    // Reset viewport init gate so save effects don't persist stale positions
-    // while the new canvas's viewport is being restored.
-    viewportInitDone.current = false
-    pendingScrollRestore.current = loadViewportState(name)
+    // 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
@@ -692,21 +707,38 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
     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 (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
+      }
     }
-    // Mark viewport init complete so save effects can start persisting.
-    // This covers: restored saved position, first visit (no saved state),
-    // and name changes. The ?widget= effect below may override position
-    // and that's fine — it runs after this in the same commit.
-    viewportInitDone.current = true
+    // 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
@@ -756,10 +788,16 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
     window.history.replaceState({}, '', url.toString())
   }, [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 (!viewportInitDone.current) return
+    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,
@@ -770,30 +808,35 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
   useEffect(() => {
     const el = scrollRef.current
     if (!el) return
-    function handleScroll() {
-      if (!viewportInitDone.current) return
+    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() {
-      if (!viewportInitDone.current) return
-      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])
 
@@ -832,6 +875,17 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
     // 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
@@ -1019,6 +1073,15 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
       // 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)
@@ -1420,6 +1483,55 @@ export default function CanvasPage({ name, siblingPages = [], canvasMeta = null
     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)

package/src/canvas/widgets/StoryWidget.jsx

@@ -39,6 +39,35 @@ function resolveModulePath(modulePath) {
   return base ? `${base}${modulePath}` : modulePath
 }
 
+/** Cache for the static story sources JSON fetched in prod builds. */
+let _storySourcesCache = null
+
+/**
+ * Fetch story source code. In dev, uses Vite's ?raw dynamic import.
+ * In prod, fetches from the build-time _storyboard/stories/sources.json.
+ */
+async function fetchStorySource(modulePath) {
+  // Dev: use Vite's ?raw import for live source
+  if (import.meta.env.DEV) {
+    const mod = await import(/* @vite-ignore */ `${resolveModulePath(modulePath)}?raw`)
+    return mod.default || ''
+  }
+
+  // Prod: load from static JSON endpoint (same pattern as inspector.json)
+  if (!_storySourcesCache) {
+    const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+    const res = await fetch(`${base}/_storyboard/stories/sources.json`)
+    if (!res.ok) throw new Error(`Story sources not available (${res.status})`)
+    _storySourcesCache = await res.json()
+  }
+
+  // _storyModule is like "/src/canvas/stories/foo.story.jsx" — strip leading /
+  const key = modulePath.startsWith('/') ? modulePath.slice(1) : modulePath
+  const source = _storySourcesCache[key]
+  if (source == null) throw new Error(`Source not found for ${key}`)
+  return source
+}
+
 export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
   const storyId = props?.storyId || ''
   const exportName = props?.exportName || ''
@@ -213,12 +242,10 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     let cancelled = false
     Promise.resolve().then(() => { if (!cancelled) setSourceLoading(true) })
 
-    // Use dynamic import with ?raw to get the file contents as a string.
-    // Vite's ?raw suffix returns a module whose default export is the raw text.
-    import(/* @vite-ignore */ `${resolveModulePath(story._storyModule)}?raw`)
-      .then((mod) => {
+    fetchStorySource(story._storyModule)
+      .then((code) => {
         if (cancelled) return
-        setSourceCode(mod.default || '// Empty file')
+        setSourceCode(code || '// Empty file')
       })
       .catch(() => { if (!cancelled) setSourceCode('// Failed to load source') })
       .finally(() => { if (!cancelled) setSourceLoading(false) })
@@ -259,8 +286,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     const story = getStoryData(storyId)
     if (!story?._storyModule) return
     try {
-      const mod = await import(/* @vite-ignore */ `${resolveModulePath(story._storyModule)}?raw`)
-      const code = mod.default || ''
+      const code = await fetchStorySource(story._storyModule)
       setSourceCode(code)
       await navigator.clipboard?.writeText(code)
     } catch { /* ignore */ }

package/src/vite/data-plugin.test.js

@@ -1115,7 +1115,7 @@ describe('canvas watcher behavior', () => {
 
     expect(code).toContain('const stories = {')
     expect(code).toContain('init({ flows, objects, records, prototypes, folders, canvases, stories })')
-    expect(code).toContain('export { flows, scenes, objects, records, prototypes, folders, canvases, stories }')
+    expect(code).toContain('export { flows, scenes, objects, records, prototypes, folders, canvases, canvasAliases, stories }')
   })
 
   it('infers /components/ route for stories in src/canvas/', () => {