@dfosco/storyboard-react 1.24.0 → 2.0.0-beta.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "1.24.0",
+  "version": "2.0.0-beta.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "*",
+    "@dfosco/storyboard-core": "2.0.0-beta.0",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"
   },

package/src/hooks/useMode.js

@@ -0,0 +1,43 @@
+import { useCallback, useSyncExternalStore } from 'react'
+import {
+  getCurrentMode,
+  getRegisteredModes,
+  activateMode,
+  subscribeToMode,
+  getModeSnapshot,
+} from '@dfosco/storyboard-core'
+
+/**
+ * React hook for the design-mode system.
+ *
+ * Uses useSyncExternalStore so the component re-renders whenever
+ * the active mode or the set of registered modes changes.
+ *
+ * @returns {{
+ *   mode: string,
+ *   modes: Array<{ name: string, label: string, icon?: string }>,
+ *   switchMode: (name: string, options?: object) => void,
+ *   currentModeConfig: object | undefined,
+ * }}
+ */
+export function useMode() {
+  const snapshot = useSyncExternalStore(subscribeToMode, getModeSnapshot)
+
+  // snapshot is "modeName|registeredNames" — we only use it to trigger re-renders
+  void snapshot
+
+  const mode = getCurrentMode()
+  const modes = getRegisteredModes()
+  const currentModeConfig = modes.find((m) => m.name === mode)
+
+  const switchMode = useCallback((name, options) => {
+    activateMode(name, options)
+  }, [])
+
+  return {
+    mode,
+    modes,
+    switchMode,
+    currentModeConfig,
+  }
+}

package/src/index.js

@@ -20,6 +20,7 @@ export { useLocalStorage } from './hooks/useLocalStorage.js'
 export { useHideMode } from './hooks/useHideMode.js'
 export { useUndoRedo } from './hooks/useUndoRedo.js'
 export { useFeatureFlag } from './hooks/useFeatureFlag.js'
+export { useMode } from './hooks/useMode.js'
 
 // React Router integration
 export { installHashPreserver } from './hashPreserver.js'
@@ -27,5 +28,8 @@ export { installHashPreserver } from './hashPreserver.js'
 // Form context (for design system packages to use)
 export { FormContext } from './context/FormContext.js'
 
+// Design mode hook (keep — React apps may still read mode state)
+// ModeSwitch and ToolbarShell UI moved to @dfosco/storyboard-svelte-ui
+
 // Viewfinder dashboard
 export { default as Viewfinder } from './Viewfinder.jsx'

package/src/vite/data-plugin.js

@@ -108,6 +108,12 @@ function generateModule(index, root) {
     initCalls.push(`initPlugins(${JSON.stringify(config.plugins)})`)
   }
 
+  // Modes configuration from storyboard.config.json
+  if (config?.modes) {
+    imports.push(`import { initModesConfig } from '@dfosco/storyboard-core'`)
+    initCalls.push(`initModesConfig(${JSON.stringify(config.modes)})`)
+  }
+
   return [
     imports.join('\n'),
     '',