From fa989d8ae2828a9b91a6c379837c904e53b90376 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 9 Mar 2026 07:21:23 +1300
Subject: [PATCH] fix(47-02): make inline parameters toggle reactive across all
 components

- Replace useState with useSyncExternalStore for shared reactive state
- Add subscriber system to notify all hook consumers when value changes
- Fix bug where toggling setting required page refresh to see updates
- All generation nodes now update immediately when setting changes
---
 src/hooks/useInlineParameters.ts | 40 +++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useInlineParameters.ts b/src/hooks/useInlineParameters.ts
index 455742d4..0c50e5e8 100644
--- a/src/hooks/useInlineParameters.ts
+++ b/src/hooks/useInlineParameters.ts
@@ -1,15 +1,37 @@
-import { useState, useCallback } from "react";
+import { useSyncExternalStore, useCallback } from "react";
 
 const INLINE_PARAMS_KEY = "node-banana-inline-parameters";
 
+// Subscribers for reactive updates
+const subscribers = new Set<() => void>();
+
+// Get current value from localStorage
+function getSnapshot(): boolean {
+  try {
+    return localStorage.getItem(INLINE_PARAMS_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
+// Server-side snapshot (always false)
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+// Subscribe to changes
+function subscribe(callback: () => void): () => void {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}
+
+// Notify all subscribers of changes
+function notifySubscribers() {
+  subscribers.forEach((callback) => callback());
+}
+
 export function useInlineParameters() {
-  const [enabled, setEnabled] = useState(() => {
-    try {
-      return localStorage.getItem(INLINE_PARAMS_KEY) === "true";
-    } catch {
-      return false;
-    }
-  });
+  const enabled = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
   const setInlineParameters = useCallback((value: boolean) => {
     try {
@@ -17,7 +39,7 @@ export function useInlineParameters() {
     } catch {
       // localStorage not available
     }
-    setEnabled(value);
+    notifySubscribers();
   }, []);
 
   return { inlineParametersEnabled: enabled, setInlineParameters };