@dfosco/storyboard-react-primer 1.24.0 → 2.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-react-primer",
-  "version": "1.24.0",
+  "version": "2.0.0-beta.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -12,7 +12,7 @@
     "src"
   ],
   "dependencies": {
-    "@dfosco/storyboard-react": "*"
+    "@dfosco/storyboard-react": "2.0.0-beta.1"
   },
   "peerDependencies": {
     "@primer/react": ">=37",

package/src/DevTools/DevTools.jsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, useCallback } from 'react'
-import { loadScene, getFlagKeys } from '@dfosco/storyboard-core'
+import { loadFlow, getFlagKeys } from '@dfosco/storyboard-core'
 import { BeakerIcon, InfoIcon, SyncIcon, XIcon, ScreenFullIcon, ZapIcon } from '@primer/octicons-react'
 import styles from './DevTools.module.css'
 import FeatureFlagsPanel from './FeatureFlagsPanel.jsx'
 
-function getSceneName() {
+function getFlowName() {
   return new URLSearchParams(window.location.search).get('scene') || 'default'
 }
 
@@ -56,12 +56,12 @@ export default function DevTools() {
     setMenuOpen((v) => !v)
   }, [])
 
-  const handleShowSceneInfo = useCallback(() => {
+  const handleShowFlowInfo = useCallback(() => {
     setMenuOpen(false)
     setPanelOpen(true)
     setSceneError(null)
     try {
-      setSceneData(loadScene(getSceneName()))
+      setSceneData(loadFlow(getFlowName()))
     } catch (err) {
       setSceneError(err.message)
     }
@@ -88,13 +88,13 @@ export default function DevTools() {
 
   return (
     <>
-      {/* Scene info overlay panel */}
+      {/* Flow info overlay panel */}
       {panelOpen && (
         <div className={styles.overlay}>
           <div className={styles.overlayBackdrop} onClick={() => setPanelOpen(false)} />
           <div className={styles.panel}>
             <div className={styles.panelHeader}>
-              <span className={styles.panelTitle}>Scene: {getSceneName()}</span>
+              <span className={styles.panelTitle}>Flow: {getFlowName()}</span>
               <button className={styles.panelClose} onClick={() => setPanelOpen(false)} aria-label="Close panel">
                 <XIcon size={16} />
               </button>
@@ -117,8 +117,8 @@ export default function DevTools() {
             <button className={styles.menuItem} onClick={handleViewfinder}>
               <ScreenFullIcon size={16} /> See viewfinder
             </button>
-            <button className={styles.menuItem} onClick={handleShowSceneInfo}>
-              <InfoIcon size={16} /> Show scene info
+            <button className={styles.menuItem} onClick={handleShowFlowInfo}>
+              <InfoIcon size={16} /> Show flow info
             </button>
             <button className={styles.menuItem} onClick={handleResetParams}>
               <SyncIcon size={16} /> Reset all params

package/src/SceneDebug.jsx

@@ -2,31 +2,31 @@ import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { useSearchParams } from 'react-router-dom'
 import { Text } from '@primer/react'
-import { loadScene } from '@dfosco/storyboard-core'
+import { loadFlow } from '@dfosco/storyboard-core'
 import styles from './SceneDebug.module.css'
 
 /**
- * Debug component that displays loaded scene data as formatted JSON.
+ * Debug component that displays loaded flow data as formatted JSON.
  * Used to verify the loader is working correctly.
- * Reads scene name from URL param (?scene=name) or uses prop/default.
+ * Reads flow name from URL param (?scene=name) or uses prop/default.
  */
-export default function SceneDebug({ sceneName } = {}) {
+export default function SceneDebug({ flowName, sceneName } = {}) {
   const [searchParams] = useSearchParams()
-  const sceneFromUrl = searchParams.get('scene')
-  const activeSceneName = sceneName || sceneFromUrl || 'default'
+  const flowFromUrl = searchParams.get('scene')
+  const activeFlowName = flowName || sceneName || flowFromUrl || 'default'
 
   const { data, error } = useMemo(() => {
     try {
-      return { data: loadScene(activeSceneName), error: null }
+      return { data: loadFlow(activeFlowName), error: null }
     } catch (err) {
       return { data: null, error: err.message }
     }
-  }, [activeSceneName])
+  }, [activeFlowName])
 
   if (error) {
     return (
       <div className={styles.error}>
-        <Text className={styles.errorTitle}>Error loading scene</Text>
+        <Text className={styles.errorTitle}>Error loading flow</Text>
         <p className={styles.errorMessage}>{error}</p>
       </div>
     )
@@ -34,7 +34,7 @@ export default function SceneDebug({ sceneName } = {}) {
 
   return (
     <div className={styles.container}>
-      <h2 className={styles.title}>Scene: {activeSceneName}</h2>
+      <h2 className={styles.title}>Flow: {activeFlowName}</h2>
       <pre className={styles.codeBlock}>
         {JSON.stringify(data, null, 2)}
       </pre>
@@ -43,5 +43,6 @@ export default function SceneDebug({ sceneName } = {}) {
 }
 
 SceneDebug.propTypes = {
+  flowName: PropTypes.string,
   sceneName: PropTypes.string,
 }