@noya-app/noya-multiplayer-react 0.1.45 → 0.1.46

package/dist/index.js

@@ -36,19 +36,17 @@ __export(src_exports, {
   FallbackUntilInitialized: () => FallbackUntilInitialized,
   StateInspector: () => StateInspector,
   UserPointersOverlay: () => UserPointersOverlay,
+  WebSocketConnection: () => WebSocketConnection,
   createDefaultAppData: () => createDefaultAppData,
   createNoyaContext: () => createNoyaContext,
   enforceSchema: () => enforceSchema,
   getAppData: () => getAppData,
-  isEmbeddedApp: () => isEmbeddedApp,
   parseAppDataParameter: () => parseAppDataParameter,
   useAIManager: () => useAIManager,
   useAnyEphemeralUserData: () => useAnyEphemeralUserData,
   useAsset: () => useAsset,
   useAssetManager: () => useAssetManager,
   useAssets: () => useAssets,
-  useBroadcastConnectedUsers: () => useBroadcastConnectedUsers,
-  useBroadcastMenuItems: () => useBroadcastMenuItems,
   useConnectedUsersManager: () => useConnectedUsersManager,
   useCurrentUserId: () => useCurrentUserId,
   useIsInitialized: () => useIsInitialized,
@@ -60,7 +58,6 @@ __export(src_exports, {
   useSecret: () => useSecret,
   useSecretManager: () => useSecretManager,
   useSecrets: () => useSecrets,
-  useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
   useSyncStateManager: () => useSyncStateManager,
   useWorkflowManager: () => useWorkflowManager
 });
@@ -155,31 +152,15 @@ var UserPointersOverlay = (0, import_react_utils.memoGeneric)(function UserPoint
 
 // src/hooks.ts
 var import_state_manager = require("@noya-app/state-manager");
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_client2 = require("react-dom/client");
 
-// ../noya-state-manager/src/SecretManager.ts
-var import_observable = require("@noya-app/observable");
-var SecretManager = class {
-  constructor(rpcManager) {
-    this.rpcManager = rpcManager;
-  }
-  secrets$ = new import_observable.Observable([]);
-  isInitialized$ = new import_observable.Observable(false);
-  async createSecret(name, value) {
-    return await this.rpcManager.request({ type: "createSecret", name, value });
-  }
-  async deleteSecret(name) {
-    return await this.rpcManager.request({ type: "deleteSecret", name });
-  }
-};
-
 // src/components/ErrorOverlay.tsx
-var import_react3 = __toESM(require("react"));
-function ErrorOverlay({
+var React2 = __toESM(require("react"));
+var ErrorOverlay = React2.memo(function ErrorOverlay2({
   error
 }) {
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "div",
     {
       style: {
@@ -204,7 +185,7 @@ function ErrorOverlay({
         lineHeight: "19px"
       }
     },
-    error.reason === "schemaMigration" ? /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("p", null, "An updated version of Noya is available. Please reload the page to continue.")) : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("p", null, "An error occurred:", " ", /* @__PURE__ */ import_react3.default.createElement(
+    error.reason === "schemaMigration" ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", null, "An updated version of Noya is available. Please reload the page to continue.")) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", null, "An error occurred:", " ", /* @__PURE__ */ React2.createElement(
       "code",
       {
         style: {
@@ -215,8 +196,8 @@ function ErrorOverlay({
         }
       },
       error.reason
-    ), ". Please reload the page to continue.", /* @__PURE__ */ import_react3.default.createElement("br", null), /* @__PURE__ */ import_react3.default.createElement("br", null), "If this happens repeatedly, please get in touch and the Noya team can help.")),
-    /* @__PURE__ */ import_react3.default.createElement(
+    ), ". Please reload the page to continue.", /* @__PURE__ */ React2.createElement("br", null), /* @__PURE__ */ React2.createElement("br", null), "If this happens repeatedly, please get in touch and the Noya team can help.")),
+    /* @__PURE__ */ React2.createElement(
       "div",
       {
         style: {
@@ -226,7 +207,7 @@ function ErrorOverlay({
         }
       }
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ React2.createElement(
       "button",
       {
         style: {
@@ -246,27 +227,22 @@ function ErrorOverlay({
       "Reload"
     )
   );
-}
-
-// src/globals.ts
-var import_observable2 = require("@noya-app/observable");
-var shouldTrackEvents$ = new import_observable2.Observable(false);
-var shouldTrackTasks$ = new import_observable2.Observable(false);
+});
 
 // src/inspector/useStateInspector.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 
 // src/inspector/StateInspector.tsx
 var import_react_utils2 = require("@noya-app/react-utils");
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_react_inspector = require("react-inspector");
 
 // src/inspector/useLocalStorageState.tsx
-var import_react4 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var localStorage = typeof window !== "undefined" ? window.localStorage : null;
 function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = import_react4.default.useState(() => {
+  const [state, setState] = import_react3.default.useState(() => {
     const value = localStorage?.getItem(key);
     let result = defaultValue;
     if (value) {
@@ -311,7 +287,7 @@ function ToggleButton({
   theme,
   anchor
 }) {
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "span",
     {
       role: "button",
@@ -332,7 +308,7 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react4.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -342,7 +318,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -350,7 +326,7 @@ function ToggleButton({
           d: "m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
         }
       )
-    ) : /* @__PURE__ */ import_react5.default.createElement(
+    ) : /* @__PURE__ */ import_react4.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -360,7 +336,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -383,7 +359,7 @@ function DisclosureSection({
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
   const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -393,7 +369,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -407,7 +383,7 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ import_react5.default.createElement(
+      setOpen && /* @__PURE__ */ import_react4.default.createElement(
         Arrow,
         {
           expanded: open,
@@ -418,7 +394,7 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ import_react5.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      /* @__PURE__ */ import_react4.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
@@ -432,7 +408,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -450,7 +426,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       "span",
       {
         style: {
@@ -466,26 +442,28 @@ function InspectorRow({
 }
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspector2({
-  state,
-  connectionEvents,
-  tasks,
-  unstyled,
+  noyaManager,
   colorScheme = "light",
-  multiplayerStateManager,
-  assetManager,
-  secretManager,
-  connectedUsersManager,
-  ephemeralUserDataManager,
   anchor = "right",
-  forceInit,
+  unstyled = false,
   ...props
 }) {
-  const [didMount, setDidMount] = import_react5.default.useState(false);
-  (0, import_react5.useLayoutEffect)(() => {
+  const {
+    multiplayerStateManager,
+    assetManager,
+    connectedUsersManager,
+    secretManager,
+    ephemeralUserDataManager,
+    connectionEventManager,
+    taskManager
+  } = noyaManager;
+  const [didMount, setDidMount] = import_react4.default.useState(false);
+  const tasks = useObservable(taskManager.tasks$);
+  (0, import_react4.useLayoutEffect)(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = import_react5.default.useRef(null);
-  const historyContainerRef = import_react5.default.useRef(null);
+  const eventsContainerRef = import_react4.default.useRef(null);
+  const historyContainerRef = import_react4.default.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -522,29 +500,30 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
     "noya-multiplayer-react-show-secrets",
     false
   );
-  (0, import_react5.useEffect)(() => {
-    shouldTrackEvents$.set(showEvents);
-  }, [showEvents]);
-  (0, import_react5.useEffect)(() => {
-    shouldTrackTasks$.set(showTasks);
-  }, [showTasks]);
-  (0, import_react5.useEffect)(() => {
+  const connectionEvents = useObservable(connectionEventManager.events$);
+  (0, import_react4.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
+  const multipeerStateInitialized = useObservable(
+    multiplayerStateManager.isInitialized$
+  );
   const ephemeral = useObservable(ephemeralUserDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
+  const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
+  const secretsInitialized = useObservable(secretManager.isInitialized$);
   const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
   const userId = useObservable(connectedUsersManager.currentUserId$);
-  (0, import_react5.useEffect)(() => {
+  const state = useObservable(multiplayerStateManager.optimisticState$);
+  (0, import_react4.useEffect)(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
     }
   }, [historySnapshot]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!historyContainerRef.current) return;
     const historyEntry = historyContainerRef.current.querySelector(
       `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
@@ -579,7 +558,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
   };
   if (!didMount) return null;
   if (!showInspector) {
-    return /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         ...props,
@@ -591,7 +570,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         ToggleButton,
         {
           showInspector,
@@ -602,7 +581,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
       )
     );
   }
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       ...props,
@@ -611,7 +590,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         isFirst: true,
@@ -623,7 +602,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           ToggleButton,
           {
             showInspector,
@@ -633,14 +612,14 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           }
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react4.default.createElement(
         InspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ import_react5.default.createElement(
+        user.image && /* @__PURE__ */ import_react4.default.createElement(
           "img",
           {
             src: user.image,
@@ -661,7 +640,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ import_react5.default.createElement(
+      )), !connectedUsers && /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           style: {
@@ -672,17 +651,22 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react4.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
-        title: "Data",
+        title: /* @__PURE__ */ import_react4.default.createElement(TitleLabel, null, "Data", /* @__PURE__ */ import_react4.default.createElement(
+          ColoredDot,
+          {
+            type: multipeerStateInitialized ? "success" : "error"
+          }
+        )),
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           "span",
           {
             style: {
@@ -690,26 +674,26 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             SmallButton,
             {
               theme,
               onClick: () => {
-                forceInit();
+                noyaManager.forceInit();
               }
             },
             "Reset"
           )
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: "schema",
@@ -718,14 +702,14 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         }
       )))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
         colorScheme,
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           "span",
           {
             style: {
@@ -733,7 +717,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canUndo,
@@ -742,7 +726,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
                 multiplayerStateManager.undo();
               }
             },
-            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
+            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -750,7 +734,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react5.default.createElement(
+              /* @__PURE__ */ import_react4.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -759,7 +743,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
               )
             ))
           ),
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canRedo,
@@ -768,7 +752,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
                 multiplayerStateManager.redo();
               }
             },
-            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
+            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -776,7 +760,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react5.default.createElement(
+              /* @__PURE__ */ import_react4.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -787,7 +771,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           )
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}0`,
@@ -801,7 +785,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
             background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(
           "span",
           {
             style: {
@@ -813,7 +797,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           },
           "Initial state"
         )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react5.default.createElement(
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
@@ -824,7 +808,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react5.default.createElement(
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react4.default.createElement(
           "pre",
           {
             style: {
@@ -836,7 +820,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           },
           entry.metadata.name
         ),
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react5.default.createElement(
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react4.default.createElement(
           "pre",
           {
             key: j,
@@ -847,21 +831,34 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
               margin: 0
             }
           },
-          patch.op === "add" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-          patch.op === "replace" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-          patch.op === "remove" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
-          patch.op === "move" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
+          patch.op === "add" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
         ))
       )))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showAssets,
         setOpen: setShowAssets,
-        title: "Assets",
+        title: /* @__PURE__ */ import_react4.default.createElement(TitleLabel, null, "Assets", /* @__PURE__ */ import_react4.default.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
         colorScheme,
-        right: /* @__PURE__ */ import_react5.default.createElement("span", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react4.default.createElement(
+          SmallButton,
+          {
+            theme,
+            onClick: () => {
+              console.info(
+                "[StateInspector] Reloading assets",
+                noyaManager.id
+              );
+              assetManager.fetch();
+            }
+          },
+          "Reload"
+        ), /* @__PURE__ */ import_react4.default.createElement(
           SmallButton,
           {
             theme,
@@ -885,7 +882,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           "Upload"
         ))
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ import_react4.default.createElement(
         SmallButton,
         {
           theme,
@@ -894,7 +891,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         "Delete"
       ))))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         title: "Tasks",
@@ -902,7 +899,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react4.default.createElement(
         InspectorRow,
         {
           key: task.id,
@@ -911,7 +908,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(
           import_react_inspector.ObjectInspector,
           {
             name: task.name,
@@ -921,14 +918,14 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         )
       )))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
-        title: "Secrets",
+        title: /* @__PURE__ */ import_react4.default.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ import_react4.default.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
         colorScheme,
         open: showSecrets,
         setOpen: setShowSecrets,
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           SmallButton,
           {
             theme,
@@ -943,7 +940,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
           "Create"
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react4.default.createElement(
         SmallButton,
         {
           theme,
@@ -952,7 +949,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         "Delete"
       ))))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showEphemeral,
@@ -960,7 +957,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: key,
@@ -970,7 +967,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         }
       ))))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showEvents,
@@ -978,8 +975,8 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
         title: "Events",
         colorScheme
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
-        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react4.default.createElement(
           InspectorRow,
           {
             key: index,
@@ -989,7 +986,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
               padding: "0px 12px 1px"
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             import_react_inspector.ObjectInspector,
             {
               data: event.type === "error" ? event.error : event.message,
@@ -998,11 +995,10 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
                 depth,
                 name,
                 data,
-                isNonenumerable,
-                expanded
+                isNonenumerable
               }) => {
                 const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ import_react5.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react5.default.createElement(
+                return depth === 0 ? /* @__PURE__ */ import_react4.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react4.default.createElement(
                   import_react_inspector.ObjectLabel,
                   {
                     direction,
@@ -1015,7 +1011,7 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
             }
           )
         )
-      ), !connectionEvents && /* @__PURE__ */ import_react5.default.createElement(
+      ), !connectionEvents && /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           style: {
@@ -1026,18 +1022,18 @@ var StateInspector = (0, import_react_utils2.memoGeneric)(function StateInspecto
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement("span", null, "No recorded events")
+        /* @__PURE__ */ import_react4.default.createElement("span", null, "No recorded events")
       ))
     )
   );
 });
 var ObjectRootLabel = ({ name, data, direction }) => {
   if (typeof name === "string") {
-    return /* @__PURE__ */ import_react5.default.createElement("span", null, /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectName, { name }), /* @__PURE__ */ import_react5.default.createElement("span", null, ": "), /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data }));
+    return /* @__PURE__ */ import_react4.default.createElement("span", null, /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectName, { name }), /* @__PURE__ */ import_react4.default.createElement("span", null, ": "), /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data }));
   }
   if (direction === "up" || direction === "down") {
     const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ import_react5.default.createElement("span", null, /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement("span", null, /* @__PURE__ */ import_react4.default.createElement(
       "span",
       {
         style: {
@@ -1054,9 +1050,9 @@ var ObjectRootLabel = ({ name, data, direction }) => {
         }
       },
       arrow
-    ), /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data }));
+    ), /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data }));
   } else {
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data });
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data });
   }
 };
 function Arrow({
@@ -1064,7 +1060,7 @@ function Arrow({
   onClick,
   style
 }) {
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "span",
     {
       role: "button",
@@ -1106,7 +1102,7 @@ function SmallButton({
   theme,
   disabled
 }) {
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       type: "button",
@@ -1135,6 +1131,24 @@ function SmallButton({
     children
   );
 }
+function ColoredDot({ type }) {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: 6,
+        height: 6,
+        background: type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
+        borderRadius: "50%",
+        verticalAlign: "middle"
+      }
+    }
+  );
+}
+function TitleLabel({ children }) {
+  return /* @__PURE__ */ import_react4.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
+}
 
 // src/inspector/useStateInspector.tsx
 function createShadowRootElement() {
@@ -1146,21 +1160,13 @@ function createShadowRootElement() {
   return { host, container };
 }
 function useStateInspector({
-  state,
-  connectionEvents,
-  tasks,
+  noyaManager,
   disabled = false,
   colorScheme,
-  anchor,
-  multiplayerStateManager,
-  assetManager,
-  secretManager,
-  connectedUsersManager,
-  ephemeralUserDataManager,
-  forceInit
+  anchor
 }) {
-  const [root, setRoot] = import_react6.default.useState(null);
-  (0, import_react6.useLayoutEffect)(() => {
+  const [root, setRoot] = import_react5.default.useState(null);
+  (0, import_react5.useLayoutEffect)(() => {
     if (disabled) return;
     const { host, container } = createShadowRootElement();
     const root2 = (0, import_client.createRoot)(container);
@@ -1170,60 +1176,39 @@ function useStateInspector({
       document.body.removeChild(host);
     };
   }, [disabled]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     if (!root) return;
     root.render(
-      /* @__PURE__ */ import_react6.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         StateInspector,
         {
-          state,
-          connectionEvents,
-          tasks,
           colorScheme,
           anchor,
-          forceInit,
-          multiplayerStateManager,
-          assetManager,
-          secretManager,
-          ephemeralUserDataManager,
-          connectedUsersManager
+          noyaManager
         }
       )
     );
-  }, [
-    anchor,
-    colorScheme,
-    connectionEvents,
-    root,
-    state,
-    multiplayerStateManager,
-    tasks,
-    forceInit,
-    ephemeralUserDataManager,
-    assetManager,
-    secretManager,
-    connectedUsersManager
-  ]);
+  }, [noyaManager, anchor, colorScheme, root]);
 }
 
 // src/hooks.ts
 function useSyncStateManager(stateManager, path) {
-  const getSnapshot = (0, import_react7.useCallback)(
+  const getSnapshot = (0, import_react6.useCallback)(
     () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
     [stateManager, path]
   );
-  return (0, import_react7.useSyncExternalStore)(
+  return (0, import_react6.useSyncExternalStore)(
     stateManager.addListener,
     getSnapshot,
     getSnapshot
   );
 }
 function useManagedState(createInitialState, options) {
-  const [stateManager] = (0, import_react7.useState)(
+  const [stateManager] = (0, import_react6.useState)(
     () => new import_state_manager.StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = (0, import_react7.useCallback)(
+  const setState = (0, import_react6.useCallback)(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -1259,169 +1244,78 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react7.useSyncExternalStore)(
+  return (0, import_react6.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
   );
 }
-function useSyncMultiplayerStateManager(multiplayerStateManager) {
-  return (0, import_react7.useSyncExternalStore)(
-    multiplayerStateManager.addListener,
-    multiplayerStateManager.getOptimisticState,
-    multiplayerStateManager.getOptimisticState
-  );
-}
 var defaultStubSync = (0, import_state_manager.stubSync)();
 function useMultiplayerState(initialState, options) {
-  const { sync = defaultStubSync, ...rest } = options ?? {};
-  const [rpcManager] = (0, import_react7.useState)(
-    () => new import_state_manager.RPCManager()
+  const {
+    sync = defaultStubSync,
+    inspector,
+    ...rest
+  } = options ?? {};
+  const [noyaManager] = (0, import_react6.useState)(
+    () => new import_state_manager.NoyaManager(initialState, rest)
   );
-  const [multiplayerStateManager] = (0, import_react7.useState)(
-    () => new import_state_manager.MultiplayerStateManager(initialState, rest)
+  const state = useObservable(
+    noyaManager.multiplayerStateManager.optimisticState$
   );
-  const [assetManager] = (0, import_react7.useState)(() => new import_state_manager.AssetManager());
-  const [aiManager] = (0, import_react7.useState)(() => new import_state_manager.AIManager(rpcManager));
-  const [workflowManager] = (0, import_react7.useState)(() => new import_state_manager.WorkflowManager(rpcManager));
-  const [secretManager] = (0, import_react7.useState)(() => new SecretManager(rpcManager));
-  const [connectedUsersManager] = (0, import_react7.useState)(() => new import_state_manager.ConnectedUsersManager());
-  const syncRef = (0, import_react7.useRef)(sync);
-  const [connectionEvents, setConnectionEvents] = (0, import_react7.useState)();
-  const [ephemeralUserDataManager] = (0, import_react7.useState)(
-    () => new import_state_manager.EphemeralUserDataManager()
-  );
-  const [tasks, setTasks] = (0, import_react7.useState)([]);
-  const assets = useObservable(assetManager.assets$);
-  const extras = (0, import_react7.useMemo)(() => {
+  const assets = useObservable(noyaManager.assetManager.assets$);
+  const extras = (0, import_react6.useMemo)(() => {
     return {
-      tasks,
-      connectionEvents,
-      connectedUsersManager,
-      ephemeralUserDataManager,
-      multiplayerStateManager,
-      assets,
-      assetManager,
-      aiManager,
-      rpcManager,
-      workflowManager,
-      secretManager,
-      createAsset: assetManager.create,
-      deleteAsset: assetManager.delete
-      // connectionStatus,
-      // isConnected: connectionStatus === "connected",
+      noyaManager,
+      taskManager: noyaManager.taskManager,
+      connectionEventManager: noyaManager.connectionEventManager,
+      connectedUsersManager: noyaManager.connectedUsersManager,
+      ephemeralUserDataManager: noyaManager.ephemeralUserDataManager,
+      multiplayerStateManager: noyaManager.multiplayerStateManager,
+      assetManager: noyaManager.assetManager,
+      aiManager: noyaManager.aiManager,
+      rpcManager: noyaManager.rpcManager,
+      workflowManager: noyaManager.workflowManager,
+      secretManager: noyaManager.secretManager,
+      menuItemsManager: noyaManager.menuManager,
+      createAsset: noyaManager.assetManager.create,
+      deleteAsset: noyaManager.assetManager.delete,
+      assets
     };
-  }, [
-    tasks,
-    connectionEvents,
-    connectedUsersManager,
-    ephemeralUserDataManager,
-    multiplayerStateManager,
-    assets,
-    assetManager,
-    aiManager,
-    rpcManager,
-    workflowManager,
-    secretManager
-  ]);
-  const globalTrackEvents = useObservable(shouldTrackEvents$);
-  const globalTrackTasks = useObservable(shouldTrackTasks$);
-  const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
-  const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
-  const trackEventsCallbackRef = (0, import_react7.useRef)();
-  const trackTasksCallbackRef = (0, import_react7.useRef)();
-  (0, import_react7.useEffect)(() => {
-    trackEventsCallbackRef.current = shouldTrackEvents ? (e) => setConnectionEvents((events) => {
-      const updated = events ? [...events, e] : [e];
-      return updated.length > 50 ? updated.slice(-50) : updated;
-    }) : void 0;
-  }, [shouldTrackEvents]);
-  (0, import_react7.useEffect)(() => {
-    trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
-      setTasks((old) => {
-        const newIds = new Set(tasks2.map((t) => t.id));
-        const unchanged = old.filter((t) => !newIds.has(t.id));
-        return [...unchanged, ...tasks2];
-      });
-    } : void 0;
-  }, [shouldTrackTasks]);
-  (0, import_react7.useEffect)(() => {
+  }, [noyaManager, assets]);
+  const syncRef = (0, import_react6.useRef)(sync);
+  (0, import_react6.useEffect)(() => {
     if (syncRef.current) {
-      return syncRef.current({
-        ms: multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        rpcManager,
-        aiManager,
-        ephemeralUserDataManager,
-        connectedUsersManager,
-        onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
-        onChangeTasks: (tasks2) => trackTasksCallbackRef.current?.(tasks2)
-      });
+      return syncRef.current({ noyaManager });
     }
-  }, [
-    assetManager,
-    ephemeralUserDataManager,
-    multiplayerStateManager,
-    workflowManager,
-    secretManager,
-    rpcManager,
-    aiManager,
-    connectedUsersManager
-  ]);
-  const state = useSyncMultiplayerStateManager(multiplayerStateManager);
-  const forceInit = (0, import_react7.useCallback)(() => {
-    const state2 = initialState instanceof Function ? initialState() : initialState;
-    const schema = options?.schema;
-    multiplayerStateManager.sm.clearHistory();
-    multiplayerStateManager.sendInit({ force: true, state: state2, schema });
-  }, [initialState, multiplayerStateManager, options?.schema]);
-  const [unrecoverableError, setUnrecoverableError] = (0, import_react7.useState)();
-  (0, import_react7.useEffect)(() => {
-    return multiplayerStateManager.errorEmitter.addListener((error) => {
-      switch (error.reason) {
-        case "invalidDataType":
-        case "schemaMismatch":
-        case "outdatedSchema":
-        case "dataMigrationFailure":
-        case "schemaMigration":
-          setUnrecoverableError(error);
-          break;
-      }
-    });
-  }, [multiplayerStateManager]);
-  (0, import_react7.useEffect)(() => {
+  }, [noyaManager]);
+  useErrorOverlay(noyaManager);
+  useStateInspector({
+    noyaManager,
+    disabled: !inspector,
+    ...typeof inspector === "object" && inspector
+  });
+  return [state, noyaManager.multiplayerStateManager.setState, extras];
+}
+function useErrorOverlay(noyaManager) {
+  const unrecoverableError = useObservable(noyaManager.unrecoverableError);
+  (0, import_react6.useEffect)(() => {
     if (!unrecoverableError) return;
     const el = document.createElement("div");
     el.id = "noya-multiplayer-react-error-overlay";
     document.body.appendChild(el);
     const root = (0, import_client2.createRoot)(el);
-    root.render((0, import_react7.createElement)(ErrorOverlay, { error: unrecoverableError }));
+    root.render((0, import_react6.createElement)(ErrorOverlay, { error: unrecoverableError }));
     return () => {
       root.unmount();
       el.remove();
     };
   });
-  useStateInspector({
-    ephemeralUserDataManager,
-    multiplayerStateManager,
-    assetManager,
-    secretManager,
-    state,
-    connectionEvents,
-    connectedUsersManager,
-    tasks,
-    forceInit,
-    disabled: !options?.inspector,
-    ...typeof options?.inspector === "object" && options.inspector
-  });
-  return [state, multiplayerStateManager.setState, extras];
 }
 
 // src/noyaApp.ts
 var import_state_manager2 = require("@noya-app/state-manager");
-var import_react8 = require("react");
+var import_react7 = require("react");
 function createDefaultAppData(initialState) {
   return {
     theme: "light",
@@ -1460,43 +1354,6 @@ function getAppData(initialState, schema, options) {
   appData.initialState = enforceSchema(appData.initialState, schema);
   return appData;
 }
-function useBroadcastConnectedUsers(connectedUsersManager) {
-  (0, import_react8.useEffect)(() => {
-    if (!isEmbeddedApp()) return;
-    const unsubscribe = connectedUsersManager.connectedUsers$.subscribe(
-      (users) => {
-        const message = {
-          type: "multiplayer.setUsers",
-          payload: { users }
-        };
-        parent?.postMessage(message, "*");
-      }
-    );
-    return unsubscribe;
-  }, [connectedUsersManager]);
-}
-function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
-  (0, import_react8.useEffect)(() => {
-    if (!isEmbeddedApp()) return;
-    const message = {
-      type: "application.setMenuItems",
-      payload: { menuItems }
-    };
-    parent?.postMessage(message, "*");
-    const listener = (event) => {
-      if (event.data.type === "application.selectMenuItem") {
-        handleSelectMenuItem(event.data.payload.value);
-      }
-    };
-    window.addEventListener("message", listener);
-    return () => {
-      window.removeEventListener("message", listener);
-    };
-  }, [handleSelectMenuItem, menuItems]);
-}
-function isEmbeddedApp() {
-  return window.self !== window.top;
-}
 function useNoyaState(...args) {
   const [initialState, options] = typeof args[0] === "object" && args[0] !== null && "schema" in args[0] && import_state_manager2.TypeGuard.IsSchema(args[0].schema) ? [null, args[0]] : [args[0], args[1]];
   const [
@@ -1507,33 +1364,32 @@ function useNoyaState(...args) {
       theme,
       viewType
     }
-  ] = (0, import_react8.useState)(() => {
+  ] = (0, import_react7.useState)(() => {
     return getAppData(initialState, options?.schema, {
       overrideExistingState: options?.overrideExistingState
     });
   });
-  const sync = (0, import_react8.useMemo)(() => {
-    return multiplayerUrl ? (0, import_state_manager2.webSocketSync)(multiplayerUrl) : options?.offlineStorageKey ? (0, import_state_manager2.localStorageSync)({ key: options.offlineStorageKey }) : (0, import_state_manager2.stubSync)();
-  }, [multiplayerUrl, options?.offlineStorageKey]);
+  const sync = (0, import_react7.useMemo)(() => {
+    return (0, import_state_manager2.isEmbeddedApp)() ? (0, import_state_manager2.parentFrameSync)({ debug: options?.debug }) : multiplayerUrl ? (0, import_state_manager2.webSocketSync)(multiplayerUrl) : options?.offlineStorageKey ? (0, import_state_manager2.localStorageSync)({ key: options.offlineStorageKey }) : (0, import_state_manager2.stubSync)();
+  }, [multiplayerUrl, options?.offlineStorageKey, options?.debug]);
   const result = useMultiplayerState(noyaAppInitialState, {
     ...options,
     inspector: options?.inspector ?? inspector,
     sync: options?.sync ?? sync
   });
   const [, , extras] = result;
-  useBroadcastConnectedUsers(extras.connectedUsersManager);
-  const mergedExtras = (0, import_react8.useMemo)(() => {
+  const mergedExtras = (0, import_react7.useMemo)(() => {
     return { ...extras, theme, viewType };
   }, [extras, theme, viewType]);
   return [result[0], result[1], mergedExtras];
 }
 
 // src/NoyaStateContext.tsx
-var import_observable3 = require("@noya-app/observable");
-var import_react9 = __toESM(require("react"));
-var AnyNoyaStateContext = (0, import_react9.createContext)(void 0);
+var import_observable = require("@noya-app/observable");
+var import_react8 = __toESM(require("react"));
+var AnyNoyaStateContext = (0, import_react8.createContext)(void 0);
 function useAnyNoyaStateContext() {
-  const value = (0, import_react9.useContext)(AnyNoyaStateContext);
+  const value = (0, import_react8.useContext)(AnyNoyaStateContext);
   if (!value) {
     throw new Error(
       "useNoyaStateContext must be used within a NoyaStateProvider"
@@ -1547,7 +1403,7 @@ function useAssets() {
 }
 function useAsset(id) {
   const { assetManager } = useAnyNoyaStateContext();
-  const observable = (0, import_react9.useMemo)(
+  const observable = (0, import_react8.useMemo)(
     () => assetManager.assets$.map((assets) => assets.find((a) => a.id === id)),
     [assetManager, id]
   );
@@ -1555,7 +1411,7 @@ function useAsset(id) {
 }
 function useAssetManager() {
   const { assetManager } = useAnyNoyaStateContext();
-  return (0, import_react9.useMemo)(
+  return (0, import_react8.useMemo)(
     () => ({
       create: assetManager.create,
       delete: assetManager.delete
@@ -1579,13 +1435,17 @@ function useSecret(name) {
   const { secretManager } = useAnyNoyaStateContext();
   return useObservable(
     secretManager.secrets$,
-    (0, import_react9.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
+    (0, import_react8.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 function useIsInitialized() {
-  const { ms, secretManager, assetManager } = useAnyNoyaStateContext();
-  const isInitializedObservable = (0, import_react9.useMemo)(
-    () => import_observable3.Observable.combine(
+  const {
+    multiplayerStateManager: ms,
+    secretManager,
+    assetManager
+  } = useAnyNoyaStateContext();
+  const isInitializedObservable = (0, import_react8.useMemo)(
+    () => import_observable.Observable.combine(
       [
         ms.isInitialized$,
         secretManager.isInitialized$,
@@ -1601,13 +1461,13 @@ function useWorkflowManager() {
   const { workflowManager } = useAnyNoyaStateContext();
   return workflowManager;
 }
-var ConnectedUsersContext = (0, import_react9.createContext)(void 0);
+var ConnectedUsersContext = (0, import_react8.createContext)(void 0);
 function useConnectedUsersManager() {
-  return (0, import_react9.useContext)(ConnectedUsersContext);
+  return (0, import_react8.useContext)(ConnectedUsersContext);
 }
-var AnyEphemeralUserDataManagerContext = (0, import_react9.createContext)(void 0);
+var AnyEphemeralUserDataManagerContext = (0, import_react8.createContext)(void 0);
 function useAnyEphemeralUserData() {
-  return (0, import_react9.useContext)(AnyEphemeralUserDataManagerContext);
+  return (0, import_react8.useContext)(AnyEphemeralUserDataManagerContext);
 }
 function useCurrentUserId() {
   const connectedUsersManager = useConnectedUsersManager();
@@ -1631,51 +1491,29 @@ function createNoyaContext({
     initialState,
     ...options
   }) {
-    const [
-      ,
-      ,
-      {
-        multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        aiManager,
-        ephemeralUserDataManager,
-        connectedUsersManager
-      }
-    ] = useNoyaState(initialState, {
+    const [, , { noyaManager }] = useNoyaState(initialState, {
       ...options,
       schema,
       mergeHistoryEntries
     });
-    const value = (0, import_react9.useMemo)(
-      () => ({
-        ms: multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        aiManager
-      }),
-      [
-        multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        aiManager
-      ]
-    );
-    return /* @__PURE__ */ import_react9.default.createElement(AnyNoyaStateContext.Provider, { value }, /* @__PURE__ */ import_react9.default.createElement(ConnectedUsersContext.Provider, { value: connectedUsersManager }, /* @__PURE__ */ import_react9.default.createElement(
-      EphemeralUserDataManagerContext.Provider,
+    return /* @__PURE__ */ import_react8.default.createElement(AnyNoyaStateContext.Provider, { value: noyaManager }, /* @__PURE__ */ import_react8.default.createElement(
+      ConnectedUsersContext.Provider,
       {
-        value: ephemeralUserDataManager
+        value: noyaManager.connectedUsersManager
       },
-      options.fallback !== void 0 ? /* @__PURE__ */ import_react9.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
-    )));
+      /* @__PURE__ */ import_react8.default.createElement(
+        EphemeralUserDataManagerContext.Provider,
+        {
+          value: noyaManager.ephemeralUserDataManager
+        },
+        options.fallback !== void 0 ? /* @__PURE__ */ import_react8.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
+      )
+    ));
   }
   function useValue(path, options) {
-    const { ms } = useAnyNoyaStateContext();
+    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
     let actualPath = typeof path === "function" || !path ? "" : path;
-    const mappedObservable = (0, import_react9.useMemo)(() => {
+    const mappedObservable = (0, import_react8.useMemo)(() => {
       if (typeof path === "function") {
         return ms.optimisticState$.map(path, { isEqual: options?.isEqual });
       }
@@ -1685,12 +1523,11 @@ function createNoyaContext({
     return value;
   }
   function useSetValue(path) {
-    const { ms } = useAnyNoyaStateContext();
-    const setValue = (0, import_react9.useCallback)(
+    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const setValue = (0, import_react8.useCallback)(
       (...args) => {
-        const [metadata, value] = args.length === 2 ? args : [void 0, args[0]];
-        const setStateAtPath = ms.setStateAtPath;
-        setStateAtPath(metadata, path ?? "", value);
+        const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
+        ms.setStateAtPath(metadata, path ?? "", value);
       },
       [ms, path]
     );
@@ -1703,11 +1540,11 @@ function createNoyaContext({
     return [value, setValue];
   }
   function useStateManager() {
-    const { ms } = useAnyNoyaStateContext();
+    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
     return ms;
   }
   function useEphemeralUserDataManager() {
-    const ephemeralUserData = (0, import_react9.useContext)(EphemeralUserDataManagerContext);
+    const ephemeralUserData = (0, import_react8.useContext)(EphemeralUserDataManagerContext);
     if (!ephemeralUserData) {
       throw new Error(
         "useEphemeralUserData must be used within a NoyaStateProvider"
@@ -1715,6 +1552,27 @@ function createNoyaContext({
     }
     return ephemeralUserData;
   }
+  function useNoyaManager() {
+    return useAnyNoyaStateContext();
+  }
+  function useLeftMenuItems() {
+    const { menuManager } = useNoyaManager();
+    return useObservable(menuManager.leftMenuItems$);
+  }
+  function useRightMenuItems() {
+    const { menuManager } = useNoyaManager();
+    return useObservable(menuManager.rightMenuItems$);
+  }
+  function useHandleMenuItem(callback) {
+    const { menuManager } = useNoyaManager();
+    (0, import_react8.useEffect)(() => {
+      return menuManager.addListener(callback);
+    }, [menuManager, callback]);
+  }
+  function useOnSelectMenuItemCallback() {
+    const { menuManager } = useNoyaManager();
+    return (0, import_react8.useCallback)((type) => menuManager.emit(type), [menuManager]);
+  }
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
@@ -1722,12 +1580,110 @@ function createNoyaContext({
     useSetValue,
     useValueState,
     useStateManager,
-    useEphemeralUserDataManager
-    // useAssets,
-    // useAssetManager,
-    // useAsset,
+    useEphemeralUserDataManager,
+    useLeftMenuItems,
+    useRightMenuItems,
+    useHandleMenuItem,
+    useOnSelectMenuItemCallback,
+    useNoyaManager
   };
 }
+
+// src/WebSocketConnection.ts
+var import_state_manager3 = require("@noya-app/state-manager");
+var WebSocketConnection = class {
+  constructor(url, options = {}) {
+    this.url = url;
+    this.options = options;
+    this.ws = new import_state_manager3.ReconnectingWebSocket({
+      debug: options.debug,
+      onopen: this.handleOpen,
+      onmessage: this.handleMessage,
+      onclose: this.handleClose,
+      activityDetector: new import_state_manager3.UserActivityDetector()
+    });
+  }
+  ws;
+  pingCount = 0;
+  pendingPingId;
+  intervalId;
+  async connect() {
+    this.ws.connect(this.url.toString());
+    this.intervalId = setInterval(() => {
+      if (this.ws.state !== "OPEN") return;
+      if (this.pendingPingId) {
+        this.ws.close();
+        return;
+      }
+      const pingId = (this.pingCount++).toString();
+      const message = {
+        type: "ping",
+        id: pingId
+      };
+      this.pendingPingId = message.id;
+      this.options.onConnectionEvent?.({
+        type: "send",
+        message
+      });
+      this.ws.send(JSON.stringify(message));
+    }, 1e4);
+  }
+  handleOpen = () => {
+    this.pendingPingId = void 0;
+    if (this.options.debug) {
+      console.info("ws connected");
+    }
+    this.options.onConnectionEvent?.({
+      type: "stateChange",
+      state: "OPEN"
+    });
+  };
+  handleMessage = (event) => {
+    if (this.options.debug) {
+      console.info("ws receiving message ", event.data);
+    }
+    const parsed = JSON.parse(event.data);
+    this.options.onConnectionEvent?.({
+      type: "receive",
+      message: parsed
+    });
+    if (parsed.type === "pong" && parsed.id === this.pendingPingId) {
+      this.pendingPingId = void 0;
+    }
+  };
+  handleClose = () => {
+    this.pendingPingId = void 0;
+    if (this.options.debug) {
+      console.info("ws disconnected");
+    }
+    this.options.onConnectionEvent?.({
+      type: "stateChange",
+      state: "CLOSED"
+    });
+  };
+  send(message) {
+    if (this.options.debug) {
+      console.info("ws sending message", message);
+    }
+    this.options.onConnectionEvent?.({
+      type: "send",
+      message
+    });
+    this.ws.send(JSON.stringify(message));
+  }
+  close() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+    this.ws.shutdown();
+  }
+  addListener(listener) {
+    return this.ws.addListener(listener);
+  }
+  removeListener(listener) {
+    return this.ws.removeListener(listener);
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnyEphemeralUserDataManagerContext,
@@ -1735,19 +1691,17 @@ function createNoyaContext({
   FallbackUntilInitialized,
   StateInspector,
   UserPointersOverlay,
+  WebSocketConnection,
   createDefaultAppData,
   createNoyaContext,
   enforceSchema,
   getAppData,
-  isEmbeddedApp,
   parseAppDataParameter,
   useAIManager,
   useAnyEphemeralUserData,
   useAsset,
   useAssetManager,
   useAssets,
-  useBroadcastConnectedUsers,
-  useBroadcastMenuItems,
   useConnectedUsersManager,
   useCurrentUserId,
   useIsInitialized,
@@ -1759,7 +1713,6 @@ function createNoyaContext({
   useSecret,
   useSecretManager,
   useSecrets,
-  useSyncMultiplayerStateManager,
   useSyncStateManager,
   useWorkflowManager,
   ...require("@noya-app/state-manager")