@dfosco/storyboard 0.5.0-beta.38 → 0.5.0-beta.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.5.0-beta.38",
+  "version": "0.5.0-beta.40",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/canvas/PageSelector.jsx

@@ -194,19 +194,23 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
         return
       }
       const route = result?.route
+      const newName = result?.name || oldName
       if (route) {
+        // Optimistic UI: replace the renamed entry in our local list so the
+        // selector reflects the change immediately (don't wait for HMR).
+        setPages(prev => prev.map(p => p.name === oldName
+          ? { ...p, name: newName, route, title: trimmed }
+          : p
+        ))
+        try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
+
+        // Navigate to the new URL immediately. The user is currently on the
+        // OLD route, which no longer resolves on the server — refreshing
+        // there would 404. Do a hard navigate so the SPA reloads and picks
+        // up the renamed canvas from the fresh virtual module.
         const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
         const targetUrl = base + route
-        try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
-        if (import.meta.hot) {
-          const timer = setTimeout(() => { window.location.href = targetUrl }, 3000)
-          import.meta.hot.on('vite:beforeFullReload', () => {
-            clearTimeout(timer)
-            sessionStorage.setItem('sb-pending-navigate', targetUrl)
-          })
-        } else {
-          setTimeout(() => { window.location.href = targetUrl }, 1000)
-        }
+        window.location.href = targetUrl
       }
     } catch (err) {
       console.error('Failed to rename page:', err)
@@ -259,15 +263,11 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
 
       try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
 
-      if (import.meta.hot) {
-        const timer = setTimeout(() => { window.location.href = targetUrl }, 3000)
-        import.meta.hot.on('vite:beforeFullReload', () => {
-          clearTimeout(timer)
-          sessionStorage.setItem('sb-pending-navigate', targetUrl)
-        })
-      } else {
-        setTimeout(() => { window.location.href = targetUrl }, 1000)
-      }
+      // Hard navigate immediately. With the route map now reading `canvases`
+      // live, an SPA navigation would also work for the new canvas — but
+      // some refs (e.g. `_jsxModule`) only get filled in by a fresh module
+      // build, so a hard reload is the safer default.
+      window.location.href = targetUrl
     } catch (err) {
       console.error('Failed to duplicate page:', err)
     }
@@ -363,18 +363,9 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
       // Stash a flag so the page selector opens automatically on the new page
       try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
 
-      // Navigate to the new page after Vite picks up the new file
-      if (import.meta.hot) {
-        const timer = setTimeout(() => {
-          window.location.href = targetUrl
-        }, 3000)
-        import.meta.hot.on('vite:beforeFullReload', () => {
-          clearTimeout(timer)
-          sessionStorage.setItem('sb-pending-navigate', targetUrl)
-        })
-      } else {
-        setTimeout(() => { window.location.href = targetUrl }, 1000)
-      }
+      // Navigate immediately. The server has already written the file; the
+      // route map will be rebuilt on hard reload.
+      window.location.href = targetUrl
     } catch (err) {
       console.error('Failed to create canvas page:', err)
       setCreating(false)

package/src/internals/canvas/widgets/PromptWidget.jsx

@@ -216,6 +216,7 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
     e.stopPropagation()
   }, [handleSubmit])
 
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const handleReset = useCallback(() => {
     setExecStatus('idle')
     setExecError('')

package/src/internals/canvas/widgets/TerminalWidget.jsx

@@ -293,7 +293,7 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSe
         // letters). Especially visible on consumer installs where fonts come
         // over the network instead of from cache.
         if (typeof document !== 'undefined' && document.fonts?.ready) {
-          try { await document.fonts.ready } catch {}
+          try { await document.fonts.ready } catch { /* font load failures are non-fatal */ }
           if (disposed) return
         }
 

package/src/internals/context.jsx

@@ -52,43 +52,53 @@ class SectionErrorBoundary extends Component {
   }
 }
 
-// Build a map from canvas route paths → canvas names at module load time
-const canvasRouteMap = new Map()
-// Build a map from group name → array of { name, route, title } for page selector
-const canvasGroupMap = new Map()
-for (const [name, data] of Object.entries(canvases || {})) {
-  const route = (data?._route || `/canvas/${name}`).replace(/\/+$/, '')
-  canvasRouteMap.set(route, name)
-  const group = data?._group
-  if (group) {
-    if (!canvasGroupMap.has(group)) canvasGroupMap.set(group, [])
-    canvasGroupMap.get(group).push({
+// Canvas route resolution and group lookup happen live below
+// (see matchCanvasRoute / getCanvasGroupMap) so that HMR rename/duplicate
+// take effect without a page reload.
+
+// Build a map from group name → array of { name, route, title } for page selector.
+// Read live from `canvases` (HMR mutates it in place) so rename/duplicate are
+// reflected immediately. Sorted by pageOrder from .meta.json when available.
+function getCanvasGroupMap() {
+  const map = new Map()
+  for (const [name, data] of Object.entries(canvases || {})) {
+    const route = (data?._route || `/canvas/${name}`).replace(/\/+$/, '')
+    const group = data?._group
+    if (!group) continue
+    if (!map.has(group)) map.set(group, [])
+    map.get(group).push({
       name,
       route,
       title: data?.title || name.split('/').pop(),
       _canvasMeta: data?._canvasMeta || null,
     })
   }
-}
-// Sort each group's pages by pageOrder from .meta.json (if available)
-for (const [, pages] of canvasGroupMap) {
-  const pageOrder = pages[0]?._canvasMeta?.pageOrder
-  if (Array.isArray(pageOrder)) {
-    const orderMap = new Map()
-    pageOrder.forEach((entry, idx) => {
-      if (typeof entry === 'string' && !entry.startsWith('sep-')) orderMap.set(entry, idx)
-    })
-    pages.sort((a, b) => {
-      const ai = orderMap.has(a.name) ? orderMap.get(a.name) : Infinity
-      const bi = orderMap.has(b.name) ? orderMap.get(b.name) : Infinity
-      return ai - bi
-    })
+  for (const [, pages] of map) {
+    const pageOrder = pages[0]?._canvasMeta?.pageOrder
+    if (Array.isArray(pageOrder)) {
+      const orderMap = new Map()
+      pageOrder.forEach((entry, idx) => {
+        if (typeof entry === 'string' && !entry.startsWith('sep-')) orderMap.set(entry, idx)
+      })
+      pages.sort((a, b) => {
+        const ai = orderMap.has(a.name) ? orderMap.get(a.name) : Infinity
+        const bi = orderMap.has(b.name) ? orderMap.get(b.name) : Infinity
+        return ai - bi
+      })
+    }
   }
+  return map
 }
 
 function matchCanvasRoute(pathname) {
   const normalized = stripBasePath(pathname)
-  return canvasRouteMap.get(normalized) || null
+  // Iterate `canvases` live so HMR rename/duplicate are reflected without
+  // a page reload (virtual-module HMR mutates the object in place).
+  for (const [name, data] of Object.entries(canvases || {})) {
+    const route = (data?._route || `/canvas/${name}`).replace(/\/+$/, '')
+    if (route === normalized) return name
+  }
+  return null
 }
 
 /**
@@ -219,6 +229,17 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
     return () => document.removeEventListener('storyboard:story-index-changed', handler)
   }, [])
 
+  // Same pattern for canvases: HMR mutates the in-memory `canvases` object
+  // when files are added/renamed/removed. Re-run canvas route matching and
+  // sibling-page derivation when that happens so the SPA reflects the new
+  // state without requiring a hard reload (which would 404 on old URLs).
+  const [canvasIndexKey, setCanvasIndexKey] = useState(0)
+  useEffect(() => {
+    const handler = () => setCanvasIndexKey((k) => k + 1)
+    document.addEventListener('storyboard:canvas-index-changed', handler)
+    return () => document.removeEventListener('storyboard:canvas-index-changed', handler)
+  }, [])
+
   // Story route detection — matches current URL against registered story routes
   // storyIndexKey forces re-evaluation when HMR mutates the stories object in place
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -228,8 +249,10 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
     [location.pathname, storyName],
   )
 
-  // Canvas route detection — matches current URL against registered canvas routes
-  const canvasId = useMemo(() => matchCanvasRoute(location.pathname), [location.pathname])
+  // Canvas route detection — matches current URL against registered canvas routes.
+  // canvasIndexKey forces re-evaluation when HMR mutates the canvases object in place
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const canvasId = useMemo(() => matchCanvasRoute(location.pathname), [location.pathname, canvasIndexKey])
   const isMissingCanvasRoute = useMemo(
     () => isCanvasPath(location.pathname) && !canvasId && !storyName,
     [location.pathname, canvasId, storyName],
@@ -400,8 +423,11 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
     const group = canvasData?._group
     // Include the current canvas as a sibling even if it's the only page in its group,
     // so the PageSelector can render and allow adding new pages.
+    // canvasIndexKey ensures siblingPages are re-derived on HMR
+    // eslint-disable-next-line no-unused-vars
+    const _hmrTick = canvasIndexKey
     const siblingPages = group
-      ? canvasGroupMap.get(group) || []
+      ? getCanvasGroupMap().get(group) || []
       : [{ name: canvasId, route: canvasData?._route || `/canvas/${canvasId}`, title: canvasData?.title || canvasId.split('/').pop() }]
     const canvasMeta = canvasData?._canvasMeta || null
     const canvasValue = {