@dfosco/storyboard-react 4.1.0-beta.2 → 4.1.0

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.1.0-beta.2",
+  "version": "4.1.0",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.1.0-beta.2",
-    "@dfosco/tiny-canvas": "4.1.0-beta.2",
+    "@dfosco/storyboard-core": "4.1.0",
+    "@dfosco/tiny-canvas": "4.1.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/CommandPalette/CommandPalette.jsx

@@ -841,10 +841,23 @@ export default function StoryboardCommandPalette({ basePath }) {
     return result
   }, [items, search, subPageGroups, authorIndex])
 
+  // Remove consecutive separators and leading/trailing separators
+  const deduplicatedItems = useMemo(() => {
+    const result = []
+    for (const item of filteredItems) {
+      const isSep = item.id?.startsWith('cfg:sep')
+      if (isSep && (result.length === 0 || result[result.length - 1].id?.startsWith('cfg:sep'))) continue
+      result.push(item)
+    }
+    // Remove trailing separator
+    while (result.length > 0 && result[result.length - 1].id?.startsWith('cfg:sep')) result.pop()
+    return result
+  }, [filteredItems])
+
   // Items without separators — used for keyboard navigation indexing
   const navigableItems = useMemo(
-    () => filteredItems.filter(list => !list.id?.startsWith('cfg:sep')),
-    [filteredItems]
+    () => deduplicatedItems.filter(list => !list.id?.startsWith('cfg:sep')),
+    [deduplicatedItems]
   )
 
   const handleChangeSearch = useCallback((value) => {
@@ -865,8 +878,8 @@ export default function StoryboardCommandPalette({ basePath }) {
       }
     >
       <CommandPalette.Page id="root">
-        {filteredItems.length ? (
-          filteredItems.map((list) => (
+        {deduplicatedItems.length ? (
+          deduplicatedItems.map((list) => (
             list.id?.startsWith('cfg:sep') ? (
               !search && <hr key={list.id} style={{ border: 'none', borderTop: '1px solid var(--borderColor-muted, #e5e5e5)', margin: '4px 14px' }} />
             ) : (

package/src/canvas/CanvasPage.jsx

@@ -128,13 +128,16 @@ function getViewportStorageKey(canvasId) {
 function loadViewportState(canvasId) {
   try {
     const raw = localStorage.getItem(getViewportStorageKey(canvasId))
-    if (!raw) return null
+    if (!raw) { console.log('[viewport] no saved state for', canvasId); return null }
     const state = JSON.parse(raw)
     const timestamp = typeof state.timestamp === 'number' ? state.timestamp : 0
-    if (Date.now() - timestamp > VIEWPORT_TTL_MS) {
+    const age = Date.now() - timestamp
+    if (age > VIEWPORT_TTL_MS) {
+      console.log('[viewport] stale state for', canvasId, '— age:', Math.round(age / 1000), 's')
       localStorage.removeItem(getViewportStorageKey(canvasId))
       return null
     }
+    console.log('[viewport] loaded state for', canvasId, '— age:', Math.round(age / 1000), 's, zoom:', state.zoom, 'scroll:', state.scrollLeft, state.scrollTop)
     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,
@@ -560,20 +563,24 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }, [])
 
   if (canvas !== trackedCanvas) {
+    const isCanvasSwitch = trackedCanvas && canvas && trackedCanvas._route !== canvas._route
+    console.log('[viewport] canvas changed —', isCanvasSwitch ? 'new canvas, resetting viewport' : 'same canvas, updating widgets only')
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
     setLocalSources(canvas?.sources ?? [])
     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)
+    // Only reset viewport state when switching to a different canvas,
+    // not when the same canvas refreshes with server data.
+    if (isCanvasSwitch) {
+      viewportInitName.current = null
+      const newViewport = loadViewportState(canvasId)
+      pendingScrollRestore.current = newViewport
+      const newZoom = newViewport?.zoom ?? 100
+      zoomRef.current = newZoom
+      setZoom(newZoom)
+    }
   }
 
   // Debounced save to server
@@ -861,11 +868,13 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     if (!el || loading) return
     const saved = pendingScrollRestore.current
     if (saved) {
+      console.log('[viewport] restoring saved viewport — zoom:', saved.zoom, 'scroll:', saved.scrollLeft, saved.scrollTop)
       // 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 {
+      console.log('[viewport] no saved viewport — fitting to objects')
       // No saved state or stale — zoom-to-fit all objects
       const bounds = computeCanvasBounds(localWidgets, componentEntries)
       if (bounds && el.clientWidth > 0 && el.clientHeight > 0) {
@@ -949,6 +958,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   useEffect(() => {
     if (viewportInitName.current !== canvasId) return
     const el = scrollRef.current
+    console.log('[viewport] saving — zoom:', zoom, 'scroll:', el?.scrollLeft, el?.scrollTop)
     // Read current scroll so the zoom entry doesn't zero-out position,
     // but the authoritative scroll save comes from the scroll handler.
     saveViewportState(canvasId, {

package/src/canvas/useCanvas.js

@@ -6,6 +6,8 @@ import { getCanvasData } from '@dfosco/storyboard-core'
  * Falls back to build-time data if the server is unavailable.
  */
 async function fetchCanvasFromServer(name) {
+  // Canvas server API is only available during local dev
+  if (import.meta.env?.PROD) return null
   try {
     const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
     const res = await fetch(`${base}/_storyboard/canvas/read?name=${encodeURIComponent(name)}`)
@@ -101,6 +103,12 @@ export function useCanvas(canvasId) {
     const handleCanvasFileChanged = ({ data }) => {
       const eventId = data?.canvasId || data?.name
       if (!data || eventId !== canvasId) return
+      // Use metadata from the HMR event directly if available (faster)
+      if (data.metadata?.widgets) {
+        setCanvas((prev) => ({ ...(prev || buildTimeCanvas), ...data.metadata }))
+        return
+      }
+      // Fallback: re-fetch from server
       fetchCanvasFromServer(canvasId).then((fresh) => {
         if (fresh) {
           setCanvas((prev) => ({ ...(prev || buildTimeCanvas), ...fresh }))

package/src/canvas/widgets/ImageWidget.jsx

@@ -24,6 +24,9 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
 
   const src = readProp(props, 'src', imageSchema)
   const isPrivate = readProp(props, 'private', imageSchema)
+
+  // Private images are not included in production builds
+  const isHiddenInProd = isPrivate && import.meta.env?.PROD
   const width = readProp(props, 'width', imageSchema)
   const height = readProp(props, 'height', imageSchema)
 
@@ -77,7 +80,7 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
     }
   }), [src, onUpdate])
 
-  if (!src) return null
+  if (!src || isHiddenInProd) return null
 
   const sizeStyle = {}
   if (typeof width === 'number') sizeStyle.width = `${width}px`