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

package/dist/index.mjs

@@ -1,63 +1,34 @@
 // src/index.ts
 export * from "@noya-app/state-manager";
 
-// src/avatarStyle.ts
-function hashCode(string) {
-  let hash = 0;
-  for (const char of string) {
-    hash = char.charCodeAt(0) + ((hash << 5) - hash);
-  }
-  return hash;
-}
-function elementFromHash(array, hash) {
-  return array[Math.abs(hash) % array.length];
-}
-function getAvatarInitials(name) {
-  return name.split(" ").filter((c) => c.length > 0).map((c) => c[0]).join("").toLocaleUpperCase();
-}
-function getAvatarStyle(name) {
-  const hash = hashCode(name);
-  const color = elementFromHash(Object.values(colors500), hash);
-  return {
-    color: "white",
-    backgroundColor: color
-    // primaryColors: {
-    //   "500": color,
-    //   "800": darkerColor,
-    // },
-  };
-}
-var colors500 = {
-  red500: "#ef4444",
-  orange500: "#f97316",
-  amber500: "#f59e0b",
-  yellow500: "#eab308",
-  lime500: "#84cc16",
-  green500: "#22c55e",
-  emerald500: "#10b981",
-  teal500: "#14b8a6",
-  cyan500: "#06b6d4",
-  sky500: "#0ea5e9",
-  blue500: "#3b82f6",
-  indigo500: "#6366f1",
-  violet500: "#8b5cf6",
-  purple500: "#a855f7",
-  fuchsia500: "#d946ef",
-  pink500: "#ec4899",
-  rose500: "#f43f5e"
-};
-
 // src/components/UserPointersOverlay.tsx
-import React, { memo, useEffect, useMemo as useMemo2, useState } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { useEffect, useState } from "react";
 
 // src/useObservable.ts
 import { useMemo, useSyncExternalStore } from "react";
-function useObservable(observable, path) {
+function useObservable(observable, pathOrSelector, options) {
   const { get, listen } = useMemo(() => {
-    const listen2 = path ? (callback) => observable.subscribe(path, callback) : observable.subscribe;
-    const get2 = path ? () => observable.get(path) : observable.get;
+    if (!observable) {
+      return {
+        get: () => void 0,
+        listen: () => () => {
+        }
+      };
+    }
+    if (typeof pathOrSelector === "function") {
+      const mappedObservable = observable.map(pathOrSelector, {
+        isEqual: options?.isEqual
+      });
+      return {
+        get: mappedObservable.get,
+        listen: mappedObservable.subscribe
+      };
+    }
+    const listen2 = pathOrSelector ? (callback) => observable.subscribe(pathOrSelector, callback) : observable.subscribe;
+    const get2 = pathOrSelector ? () => observable.get(pathOrSelector) : observable.get;
     return { get: get2, listen: listen2 };
-  }, [observable, path]);
+  }, [observable, pathOrSelector, options?.isEqual]);
   return useSyncExternalStore(listen, get, get);
 }
 
@@ -65,150 +36,96 @@ function useObservable(observable, path) {
 function shouldShow(hideAfter, updatedAt) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
-var UserPointer_ = function UserPointer({
+var UserPointerInternal = memoGeneric(function UserPointerInternal2({
   user,
-  ephemeralUserData,
-  hideAfter = 5e3
+  ephemeralUserDataManager,
+  hideAfter = 5e3,
+  renderUserPointer
 }) {
-  const metadata = useObservable(ephemeralUserData.metadata$, [
+  const metadata = useObservable(ephemeralUserDataManager.metadata$, [
+    user.id
+  ]);
+  const data = useObservable(ephemeralUserDataManager.data$, [
     user.id
   ]);
-  const data = useObservable(ephemeralUserData.data$, [user.id]);
-  const avatarStyle = useMemo2(() => getAvatarStyle(user.id), [user.id]);
   const [, setForceUpdate] = useState(0);
   const updatedAt = metadata?.updatedAt ?? 0;
+  const show = shouldShow(hideAfter, updatedAt);
   useEffect(() => {
-    if (!shouldShow(hideAfter, updatedAt)) return;
+    if (!show) return;
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
     }, hideAfter);
     return () => clearTimeout(timeoutId);
-  }, [hideAfter, updatedAt]);
-  const show = shouldShow(hideAfter, updatedAt);
-  if (!data || !data.pointer) return null;
-  return /* @__PURE__ */ React.createElement(UserPointerContainer, { key: user.id, point: data.pointer, show }, /* @__PURE__ */ React.createElement(UserPointerIcon, { color: avatarStyle.backgroundColor }), /* @__PURE__ */ React.createElement(UserNameTag, { background: avatarStyle.backgroundColor }, user.name));
-};
-var UserPointer2 = memo(UserPointer_);
-var UserPointerContainer = memo(function UserPointerContainer2({
-  point,
-  children,
-  show = true
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        transform: `translate(${Math.round(point.x)}px, ${Math.round(
-          point.y
-        )}px)`,
-        opacity: show ? 1 : 0,
-        transition: "transform 0.1s, opacity 0.2s"
-      }
-    },
-    children
-  );
+  }, [hideAfter, show, updatedAt]);
+  if (!data?.pointer) return null;
+  return renderUserPointer({
+    userId: user.id,
+    name: user.name,
+    point: data.pointer,
+    visible: show
+  });
 });
-var UserNameTag = memo(function UserNameTag2({
-  background,
-  children
+var UserPointersOverlay = memoGeneric(function UserPointers({
+  connectedUsersManager,
+  ephemeralUserDataManager,
+  renderUserPointer
 }) {
-  return /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      style: {
-        position: "relative",
-        top: "8px",
-        left: "15px",
-        fontSize: 11,
-        lineHeight: "1",
-        fontWeight: 500,
-        boxShadow: "0 1px 1px rgba(0,0,0,0.1)",
-        padding: "2px 4px 3px",
-        pointerEvents: "none",
-        letterSpacing: "-0.3px",
-        outline: `1px solid rgba(255,255,255,0.3)`,
-        outlineOffset: "-1px",
-        background,
-        color: "white"
-      }
-    },
-    children
-  );
-});
-var UserPointersOverlay = memo(function UserPointers({ connectedUsers, ephemeralUserData }) {
-  const currentUserId = useObservable(ephemeralUserData.currentUserId$);
+  const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
+  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, connectedUsers.map((user) => {
     if (user.id === currentUserId) return null;
     return /* @__PURE__ */ React.createElement(
-      UserPointer2,
+      UserPointerInternal,
       {
         key: user.id,
         user,
-        ephemeralUserData
+        ephemeralUserDataManager,
+        renderUserPointer
       }
     );
   }));
 });
-var UserPointerIcon = memo(function CursorIcon({
-  color = "black"
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      width: "15",
-      height: "15",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      style: {
-        position: "absolute",
-        filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.1))"
-        // filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.6))",
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3.29227 0.0451998C3.47033 -0.0361222 3.67946 -0.00606629 3.8274 0.122107L12.8587 7.94648C13.0134 8.08054 13.0708 8.29538 13.0035 8.48873C12.9362 8.68208 12.7578 8.81488 12.5533 8.8239L9.21887 8.97096L11.1504 13.2149C11.2648 13.4662 11.1538 13.7626 10.9026 13.877L8.75024 14.8575C8.499 14.972 8.20255 14.8611 8.08802 14.6099L6.15339 10.3665L3.86279 12.7817C3.72196 12.9302 3.50487 12.9779 3.31479 12.9021C3.1247 12.8263 3 12.6423 3 12.4376V0.500008C3 0.304264 3.11422 0.126522 3.29227 0.0451998Z",
-        fill: color
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3.29227 0.048984C3.47033 -0.032338 3.67946 -0.00228211 3.8274 0.125891L12.8587 7.95026C13.0134 8.08432 13.0708 8.29916 13.0035 8.49251C12.9362 8.68586 12.7578 8.81866 12.5533 8.82768L9.21887 8.97474L11.1504 13.2187C11.2648 13.47 11.1538 13.7664 10.9026 13.8808L8.75024 14.8613C8.499 14.9758 8.20255 14.8649 8.08802 14.6137L6.15339 10.3703L3.86279 12.7855C3.72196 12.934 3.50487 12.9817 3.31479 12.9059C3.1247 12.8301 3 12.6461 3 12.4414V0.503792C3 0.308048 3.11422 0.130306 3.29227 0.048984ZM4 1.59852V11.1877L5.93799 9.14425C6.05238 9.02363 6.21924 8.96776 6.38319 8.99516C6.54715 9.02256 6.68677 9.12965 6.75573 9.2809L8.79056 13.7441L10.0332 13.178L8.00195 8.71497C7.93313 8.56376 7.94391 8.38824 8.03072 8.24659C8.11753 8.10494 8.26903 8.01566 8.435 8.00834L11.2549 7.88397L4 1.59852Z",
-        fill: "rgba(255,255,255,0.5)"
-      }
-    )
-  );
-});
 
 // src/hooks.ts
 import {
+  AIManager,
   AssetManager,
-  EphemeralUserData,
+  ConnectedUsersManager,
+  EphemeralUserDataManager,
   MultiplayerStateManager,
+  RPCManager,
   StateManager,
-  stubSync
+  stubSync,
+  WorkflowManager
 } from "@noya-app/state-manager";
 import {
   createElement,
   useCallback,
   useEffect as useEffect3,
-  useMemo as useMemo3,
+  useMemo as useMemo2,
   useRef,
   useState as useState2,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 
+// ../noya-state-manager/src/SecretManager.ts
+import { Observable } from "@noya-app/observable";
+var SecretManager = class {
+  constructor(rpcManager) {
+    this.rpcManager = rpcManager;
+  }
+  secrets$ = new Observable([]);
+  isInitialized$ = new 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
 import React2 from "react";
 function ErrorOverlay({
@@ -284,17 +201,17 @@ function ErrorOverlay({
 }
 
 // src/globals.ts
-import { Observable } from "@noya-app/observable";
-var shouldTrackEvents$ = new Observable(false);
-var shouldTrackTasks$ = new Observable(false);
+import { Observable as Observable2 } from "@noya-app/observable";
+var shouldTrackEvents$ = new Observable2(false);
+var shouldTrackTasks$ = new Observable2(false);
 
 // src/inspector/useStateInspector.tsx
 import React5, { useLayoutEffect as useLayoutEffect2 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/inspector/StateInspector.tsx
+import { memoGeneric as memoGeneric2 } from "@noya-app/react-utils";
 import React4, {
-  memo as memo2,
   useEffect as useEffect2,
   useLayoutEffect
 } from "react";
@@ -487,7 +404,7 @@ function InspectorRow({
         padding: "2px 12px 1px",
         display: "flex",
         alignItems: "center",
-        background: variant === "up" ? "rgba(0,255,0,0.1)" : variant === "down" ? "rgba(255,0,0,0.1)" : selected ? "rgb(59 130 246 / 15%)" : void 0,
+        background: variant === "up" ? "rgba(0,255,0,0.1)" : variant === "down" ? "transparent" : selected ? "rgb(59 130 246 / 15%)" : void 0,
         // background:
         //   colorScheme === "light"
         //     ? "rgba(0,0,0,0.05)"
@@ -510,17 +427,17 @@ function InspectorRow({
   );
 }
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = memo2(function StateInspector2({
+var StateInspector = memoGeneric2(function StateInspector2({
   state,
   connectionEvents,
-  connectedUsers,
   tasks,
-  userId,
   unstyled,
   colorScheme = "light",
   multiplayerStateManager,
   assetManager,
-  ephemeralUserData,
+  secretManager,
+  connectedUsersManager,
+  ephemeralUserDataManager,
   anchor = "right",
   forceInit,
   ...props
@@ -563,6 +480,10 @@ var StateInspector = memo2(function StateInspector2({
     "noya-multiplayer-react-show-assets",
     false
   );
+  const [showSecrets, setShowSecrets] = useLocalStorageState(
+    "noya-multiplayer-react-show-secrets",
+    false
+  );
   useEffect2(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
@@ -574,9 +495,12 @@ var StateInspector = memo2(function StateInspector2({
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
-  const ephemeral = useEphemeralUserData(ephemeralUserData);
+  const ephemeral = useObservable(ephemeralUserDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
+  const secrets = useObservable(secretManager.secrets$);
+  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
+  const userId = useObservable(connectedUsersManager.currentUserId$);
   useEffect2(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
@@ -959,6 +883,37 @@ var StateInspector = memo2(function StateInspector2({
         )
       )))
     ),
+    /* @__PURE__ */ React4.createElement(
+      DisclosureSection,
+      {
+        title: "Secrets",
+        colorScheme,
+        open: showSecrets,
+        setOpen: setShowSecrets,
+        right: /* @__PURE__ */ React4.createElement(
+          SmallButton,
+          {
+            theme,
+            onClick: () => {
+              const name = prompt("Enter secret name");
+              if (!name) return;
+              const value = prompt("Enter secret value");
+              if (!value) return;
+              secretManager.createSecret(name, value);
+            }
+          },
+          "Create"
+        )
+      },
+      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ React4.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React4.createElement(ObjectInspector, { data: secret, theme }), /* @__PURE__ */ React4.createElement(
+        SmallButton,
+        {
+          theme,
+          onClick: () => secretManager.deleteSecret(secret.name)
+        },
+        "Delete"
+      ))))
+    ),
     /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
@@ -1155,15 +1110,15 @@ function createShadowRootElement() {
 function useStateInspector({
   state,
   connectionEvents,
-  connectedUsers,
   tasks,
-  userId,
   disabled = false,
   colorScheme,
   anchor,
   multiplayerStateManager,
   assetManager,
-  ephemeralUserData,
+  secretManager,
+  connectedUsersManager,
+  ephemeralUserDataManager,
   forceInit
 }) {
   const [root, setRoot] = React5.useState(null);
@@ -1185,31 +1140,31 @@ function useStateInspector({
         {
           state,
           connectionEvents,
-          connectedUsers,
           tasks,
-          userId,
           colorScheme,
           anchor,
           forceInit,
           multiplayerStateManager,
           assetManager,
-          ephemeralUserData
+          secretManager,
+          ephemeralUserDataManager,
+          connectedUsersManager
         }
       )
     );
   }, [
     anchor,
     colorScheme,
-    connectedUsers,
     connectionEvents,
     root,
     state,
     multiplayerStateManager,
-    userId,
     tasks,
     forceInit,
-    ephemeralUserData,
-    assetManager
+    ephemeralUserDataManager,
+    assetManager,
+    secretManager,
+    connectedUsersManager
   ]);
 }
 
@@ -1279,95 +1234,63 @@ function useSyncMultiplayerStateManager(multiplayerStateManager) {
     multiplayerStateManager.getOptimisticState
   );
 }
-function throttle(fn, ms) {
-  let lastCall = 0;
-  let timeoutId = null;
-  return (...args) => {
-    const now = Date.now();
-    if (now - lastCall < ms) {
-      if (timeoutId) clearTimeout(timeoutId);
-      timeoutId = setTimeout(
-        () => {
-          lastCall = now;
-          fn(...args);
-        },
-        ms - (now - lastCall)
-      );
-      return;
-    }
-    lastCall = now;
-    return fn(...args);
-  };
-}
-function useEphemeralUserData(ephemeralUserData, options) {
-  const throttledAddListener = useMemo3(() => {
-    const throttleMs = options?.throttle ?? 0;
-    if (throttleMs > 0) {
-      const addListener = (fn) => {
-        const throttledFn = throttle(fn, throttleMs);
-        return ephemeralUserData.addListener(throttledFn);
-      };
-      return addListener;
-    }
-    return ephemeralUserData.addListener;
-  }, [ephemeralUserData, options?.throttle]);
-  return useSyncExternalStore2(
-    throttledAddListener,
-    ephemeralUserData.getSnapshot,
-    ephemeralUserData.getSnapshot
-  );
-}
 var defaultStubSync = stubSync();
 function useMultiplayerState(initialState, options) {
   const { sync = defaultStubSync, ...rest } = options ?? {};
+  const [rpcManager] = useState2(
+    () => new RPCManager()
+  );
   const [multiplayerStateManager] = useState2(
     () => new MultiplayerStateManager(initialState, rest)
   );
   const [assetManager] = useState2(() => new AssetManager());
+  const [aiManager] = useState2(() => new AIManager(rpcManager));
+  const [workflowManager] = useState2(() => new WorkflowManager(rpcManager));
+  const [secretManager] = useState2(() => new SecretManager(rpcManager));
+  const [connectedUsersManager] = useState2(() => new ConnectedUsersManager());
   const syncRef = useRef(sync);
   const [connectionEvents, setConnectionEvents] = useState2();
-  const [connectedUsers, setConnectedUsers] = useState2([]);
-  const [ephemeralUserData] = useState2(
-    () => new EphemeralUserData()
+  const [ephemeralUserDataManager] = useState2(
+    () => new EphemeralUserDataManager()
   );
   const [tasks, setTasks] = useState2([]);
-  const [userId, setUserId] = useState2();
   const assets = useObservable(assetManager.assets$);
-  const extras = useMemo3(() => {
+  const extras = useMemo2(() => {
     return {
       tasks,
-      userId,
       connectionEvents,
-      connectedUsers,
-      ephemeralUserData,
+      connectedUsersManager,
+      ephemeralUserDataManager,
       multiplayerStateManager,
       assets,
       assetManager,
+      aiManager,
+      rpcManager,
+      workflowManager,
+      secretManager,
       createAsset: assetManager.create,
       deleteAsset: assetManager.delete
-      // evaluate: async (code: string) => {
-      //   const payload = await rpcManager.request({ type: "eval", code });
-      //   if (payload.type !== "eval") {
-      //     throw new Error(`Unexpected rpc response type: ${payload.type}`);
-      //   }
-      // },
+      // connectionStatus,
+      // isConnected: connectionStatus === "connected",
     };
   }, [
     tasks,
-    userId,
     connectionEvents,
-    connectedUsers,
-    ephemeralUserData,
+    connectedUsersManager,
+    ephemeralUserDataManager,
     multiplayerStateManager,
+    assets,
     assetManager,
-    assets
+    aiManager,
+    rpcManager,
+    workflowManager,
+    secretManager
   ]);
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);
   const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
   const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
   const trackEventsCallbackRef = useRef();
-  const trackConnectedUsersCallbackRef = useRef();
   const trackTasksCallbackRef = useRef();
   useEffect3(() => {
     trackEventsCallbackRef.current = shouldTrackEvents ? (e) => setConnectionEvents((events) => {
@@ -1375,12 +1298,6 @@ function useMultiplayerState(initialState, options) {
       return updated.length > 50 ? updated.slice(-50) : updated;
     }) : void 0;
   }, [shouldTrackEvents]);
-  useEffect3(() => {
-    trackConnectedUsersCallbackRef.current = (users, userId2) => {
-      setConnectedUsers(users);
-      setUserId(userId2);
-    };
-  }, []);
   useEffect3(() => {
     trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
       setTasks((old) => {
@@ -1395,13 +1312,26 @@ function useMultiplayerState(initialState, options) {
       return syncRef.current({
         ms: multiplayerStateManager,
         assetManager,
-        ephemeralUserData,
+        workflowManager,
+        secretManager,
+        rpcManager,
+        aiManager,
+        ephemeralUserDataManager,
+        connectedUsersManager,
         onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
-        onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2),
         onChangeTasks: (tasks2) => trackTasksCallbackRef.current?.(tasks2)
       });
     }
-  }, [assetManager, ephemeralUserData, multiplayerStateManager]);
+  }, [
+    assetManager,
+    ephemeralUserDataManager,
+    multiplayerStateManager,
+    workflowManager,
+    secretManager,
+    rpcManager,
+    aiManager,
+    connectedUsersManager
+  ]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
   const forceInit = useCallback(() => {
     const state2 = initialState instanceof Function ? initialState() : initialState;
@@ -1436,14 +1366,14 @@ function useMultiplayerState(initialState, options) {
     };
   });
   useStateInspector({
-    ephemeralUserData,
+    ephemeralUserDataManager,
     multiplayerStateManager,
     assetManager,
+    secretManager,
     state,
     connectionEvents,
-    connectedUsers,
+    connectedUsersManager,
     tasks,
-    userId,
     forceInit,
     disabled: !options?.inspector,
     ...typeof options?.inspector === "object" && options.inspector
@@ -1460,7 +1390,7 @@ import {
   TypeGuard,
   webSocketSync
 } from "@noya-app/state-manager";
-import { useEffect as useEffect4, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState3 } from "react";
 function createDefaultAppData(initialState) {
   return {
     theme: "light",
@@ -1499,15 +1429,20 @@ function getAppData(initialState, schema, options) {
   appData.initialState = enforceSchema(appData.initialState, schema);
   return appData;
 }
-function useBroadcastConnectedUsers(connectedUsers) {
+function useBroadcastConnectedUsers(connectedUsersManager) {
   useEffect4(() => {
     if (!isEmbeddedApp()) return;
-    const message = {
-      type: "multiplayer.setUsers",
-      payload: { users: connectedUsers }
-    };
-    parent?.postMessage(message, "*");
-  }, [connectedUsers]);
+    const unsubscribe = connectedUsersManager.connectedUsers$.subscribe(
+      (users) => {
+        const message = {
+          type: "multiplayer.setUsers",
+          payload: { users }
+        };
+        parent?.postMessage(message, "*");
+      }
+    );
+    return unsubscribe;
+  }, [connectedUsersManager]);
 }
 function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
   useEffect4(() => {
@@ -1546,7 +1481,7 @@ function useNoyaState(...args) {
       overrideExistingState: options?.overrideExistingState
     });
   });
-  const sync = useMemo4(() => {
+  const sync = useMemo3(() => {
     return multiplayerUrl ? webSocketSync(multiplayerUrl) : options?.offlineStorageKey ? localStorageSync({ key: options.offlineStorageKey }) : stubSync2();
   }, [multiplayerUrl, options?.offlineStorageKey]);
   const result = useMultiplayerState(noyaAppInitialState, {
@@ -1555,19 +1490,22 @@ function useNoyaState(...args) {
     sync: options?.sync ?? sync
   });
   const [, , extras] = result;
-  useBroadcastConnectedUsers(extras.connectedUsers);
-  const mergedExtras = useMemo4(() => {
+  useBroadcastConnectedUsers(extras.connectedUsersManager);
+  const mergedExtras = useMemo3(() => {
     return { ...extras, theme, viewType };
   }, [extras, theme, viewType]);
   return [result[0], result[1], mergedExtras];
 }
 
 // src/NoyaStateContext.tsx
+import {
+  Observable as Observable3
+} from "@noya-app/observable";
 import React6, {
   createContext,
   useCallback as useCallback2,
   useContext,
-  useMemo as useMemo5
+  useMemo as useMemo4
 } from "react";
 var AnyNoyaStateContext = createContext(void 0);
 function useAnyNoyaStateContext() {
@@ -1585,7 +1523,7 @@ function useAssets() {
 }
 function useAsset(id) {
   const { assetManager } = useAnyNoyaStateContext();
-  const observable = useMemo5(
+  const observable = useMemo4(
     () => assetManager.assets$.map((assets) => assets.find((a) => a.id === id)),
     [assetManager, id]
   );
@@ -1593,7 +1531,7 @@ function useAsset(id) {
 }
 function useAssetManager() {
   const { assetManager } = useAnyNoyaStateContext();
-  return useMemo5(
+  return useMemo4(
     () => ({
       create: assetManager.create,
       delete: assetManager.delete
@@ -1601,37 +1539,119 @@ function useAssetManager() {
     [assetManager]
   );
 }
+function useAIManager() {
+  const { aiManager } = useAnyNoyaStateContext();
+  return aiManager;
+}
+function useSecretManager() {
+  const { secretManager } = useAnyNoyaStateContext();
+  return secretManager;
+}
+function useSecrets() {
+  const { secretManager } = useAnyNoyaStateContext();
+  return useObservable(secretManager.secrets$);
+}
+function useSecret(name) {
+  const { secretManager } = useAnyNoyaStateContext();
+  return useObservable(
+    secretManager.secrets$,
+    useCallback2((secrets) => secrets.find((s) => s.name === name), [name])
+  );
+}
+function useIsInitialized() {
+  const { ms, secretManager, assetManager } = useAnyNoyaStateContext();
+  const isInitializedObservable = useMemo4(
+    () => Observable3.combine(
+      [
+        ms.isInitialized$,
+        secretManager.isInitialized$,
+        assetManager.isInitialized$
+      ],
+      (values) => values.every((v) => v)
+    ),
+    [ms, secretManager, assetManager]
+  );
+  return useObservable(isInitializedObservable);
+}
+function useWorkflowManager() {
+  const { workflowManager } = useAnyNoyaStateContext();
+  return workflowManager;
+}
+var ConnectedUsersContext = createContext(void 0);
+function useConnectedUsersManager() {
+  return useContext(ConnectedUsersContext);
+}
+var AnyEphemeralUserDataManagerContext = createContext(void 0);
+function useAnyEphemeralUserData() {
+  return useContext(AnyEphemeralUserDataManagerContext);
+}
+function useCurrentUserId() {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(connectedUsersManager?.currentUserId$);
+}
+var FallbackUntilInitialized = ({
+  children,
+  fallback
+}) => {
+  const isInitialized = useIsInitialized();
+  return isInitialized ? children : fallback ?? null;
+};
 function createNoyaContext({
   schema,
   mergeHistoryEntries
 }) {
   const NoyaStateContext = AnyNoyaStateContext;
+  const EphemeralUserDataManagerContext = AnyEphemeralUserDataManagerContext;
   function NoyaStateProvider({
     children,
     initialState,
     ...options
   }) {
-    const [, , { multiplayerStateManager, assetManager }] = useNoyaState(
-      initialState,
+    const [
+      ,
+      ,
       {
-        ...options,
-        schema,
-        mergeHistoryEntries
+        multiplayerStateManager,
+        assetManager,
+        workflowManager,
+        secretManager,
+        aiManager,
+        ephemeralUserDataManager,
+        connectedUsersManager
       }
-    );
-    const value = useMemo5(
+    ] = useNoyaState(initialState, {
+      ...options,
+      schema,
+      mergeHistoryEntries
+    });
+    const value = useMemo4(
       () => ({
         ms: multiplayerStateManager,
-        assetManager
+        assetManager,
+        workflowManager,
+        secretManager,
+        aiManager
       }),
-      [multiplayerStateManager, assetManager]
+      [
+        multiplayerStateManager,
+        assetManager,
+        workflowManager,
+        secretManager,
+        aiManager
+      ]
     );
-    return /* @__PURE__ */ React6.createElement(AnyNoyaStateContext.Provider, { value }, children);
+    return /* @__PURE__ */ React6.createElement(AnyNoyaStateContext.Provider, { value }, /* @__PURE__ */ React6.createElement(ConnectedUsersContext.Provider, { value: connectedUsersManager }, /* @__PURE__ */ React6.createElement(
+      EphemeralUserDataManagerContext.Provider,
+      {
+        value: ephemeralUserDataManager
+      },
+      options.fallback !== void 0 ? /* @__PURE__ */ React6.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
+    )));
   }
   function useValue(path, options) {
     const { ms } = useAnyNoyaStateContext();
     let actualPath = typeof path === "function" || !path ? "" : path;
-    const mappedObservable = useMemo5(() => {
+    const mappedObservable = useMemo4(() => {
       if (typeof path === "function") {
         return ms.optimisticState$.map(path, { isEqual: options?.isEqual });
       }
@@ -1662,45 +1682,60 @@ function createNoyaContext({
     const { ms } = useAnyNoyaStateContext();
     return ms;
   }
+  function useEphemeralUserDataManager() {
+    const ephemeralUserData = useContext(EphemeralUserDataManagerContext);
+    if (!ephemeralUserData) {
+      throw new Error(
+        "useEphemeralUserData must be used within a NoyaStateProvider"
+      );
+    }
+    return ephemeralUserData;
+  }
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
     useValue,
     useSetValue,
     useValueState,
-    useStateManager
+    useStateManager,
+    useEphemeralUserDataManager
     // useAssets,
     // useAssetManager,
     // useAsset,
   };
 }
 export {
+  AnyEphemeralUserDataManagerContext,
+  ConnectedUsersContext,
+  FallbackUntilInitialized,
   StateInspector,
-  UserNameTag,
-  UserPointer2 as UserPointer,
-  UserPointerContainer,
-  UserPointerIcon,
   UserPointersOverlay,
   createDefaultAppData,
   createNoyaContext,
   enforceSchema,
   getAppData,
-  getAvatarInitials,
-  getAvatarStyle,
   isEmbeddedApp,
   parseAppDataParameter,
+  useAIManager,
+  useAnyEphemeralUserData,
   useAsset,
   useAssetManager,
   useAssets,
   useBroadcastConnectedUsers,
   useBroadcastMenuItems,
-  useEphemeralUserData,
+  useConnectedUsersManager,
+  useCurrentUserId,
+  useIsInitialized,
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
   useNoyaState,
   useObservable,
+  useSecret,
+  useSecretManager,
+  useSecrets,
   useSyncMultiplayerStateManager,
-  useSyncStateManager
+  useSyncStateManager,
+  useWorkflowManager
 };
 //# sourceMappingURL=index.mjs.map