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

package/src/canvas/PageSelector.jsx

@@ -9,14 +9,19 @@ import styles from './PageSelector.module.css'
  *
  * @param {{ currentName: string, pages: Array<{ name: string, route: string, title: string }>, isLocalDev?: boolean }} props
  */
-export default function PageSelector({ currentName, pages, isLocalDev = false }) {
+export default function PageSelector({ currentName, pages: initialPages, isLocalDev = false }) {
   const [open, setOpen] = useState(false)
   const [adding, setAdding] = useState(false)
   const [newName, setNewName] = useState('')
   const [creating, setCreating] = useState(false)
+  const [pages, setPages] = useState(initialPages)
+  const [successMsg, setSuccessMsg] = useState(null)
   const containerRef = useRef(null)
   const inputRef = useRef(null)
 
+  // Sync pages when prop changes (e.g. HMR reload)
+  useEffect(() => { setPages(initialPages) }, [initialPages])
+
   const currentPage = pages.find((p) => p.name === currentName)
   const currentLabel = currentPage?.title || currentName.split('/').pop()
   const currentIndex = pages.findIndex((p) => p.name === currentName)
@@ -46,18 +51,32 @@ export default function PageSelector({ currentName, pages, isLocalDev = false })
         setCreating(false)
         return
       }
-      // Navigate to the new page once Vite picks it up
-      const kebab = trimmed
-        .replace(/[^a-zA-Z0-9\s_-]/g, '')
-        .trim()
-        .replace(/[\s_]+/g, '-')
-        .toLowerCase()
-        .replace(/-+/g, '-')
-        .replace(/^-|-$/g, '')
-      const route = folder ? `/${folder}/${kebab}` : `/${kebab}`
+      const route = result.route
       const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-      // Small delay to let Vite detect the new file
-      setTimeout(() => { window.location.href = base + route }, 600)
+      const targetUrl = base + route
+
+      // Optimistically add the new page to the bottom of the list
+      const pageName = result.name || trimmed
+      setPages(prev => [...prev, { name: pageName, route, title: trimmed }])
+
+      // Show success confirmation and reset form
+      setSuccessMsg(`"${trimmed}" created`)
+      setAdding(false)
+      setNewName('')
+      setCreating(false)
+
+      // 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)
+      }
     } catch (err) {
       console.error('Failed to create canvas page:', err)
       setCreating(false)
@@ -77,6 +96,7 @@ export default function PageSelector({ currentName, pages, isLocalDev = false })
         setOpen(false)
         setAdding(false)
         setNewName('')
+        setSuccessMsg(null)
       }
     }
     document.addEventListener('mousedown', handleClick)
@@ -100,7 +120,8 @@ export default function PageSelector({ currentName, pages, isLocalDev = false })
     return () => document.removeEventListener('keydown', handleKey)
   }, [open, adding])
 
-  if (!pages || pages.length < 2) return null
+  // Show selector when there are multiple pages, or in dev mode (to allow adding pages)
+  if (!pages || (pages.length < 2 && !isLocalDev)) return null
 
   return (
     <nav ref={containerRef} className={styles.container} aria-label="Canvas pages">
@@ -189,6 +210,9 @@ export default function PageSelector({ currentName, pages, isLocalDev = false })
                   + Add new page
                 </li>
               )}
+              {successMsg && (
+                <li className={styles.successMsg}>✓ {successMsg}</li>
+              )}
             </>
           )}
         </ul>

package/src/canvas/PageSelector.module.css

@@ -156,3 +156,10 @@
   opacity: 0.5;
   cursor: default;
 }
+
+.successMsg {
+  padding: 4px 12px 6px;
+  font-size: 11px;
+  color: #1a7f37;
+  font-weight: 500;
+}

package/src/context.jsx

@@ -232,7 +232,11 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
   if (canvasId) {
     const canvasData = canvases?.[canvasId]
     const group = canvasData?._group
-    const siblingPages = group ? canvasGroupMap.get(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.
+    const siblingPages = group
+      ? canvasGroupMap.get(group) || []
+      : [{ name: canvasId, route: canvasData?._route || `/canvas/${canvasId}`, title: canvasData?.title || canvasId.split('/').pop() }]
     const canvasMeta = canvasData?._canvasMeta || null
     const canvasValue = {
       data: null,