@noya-app/noya-multiplayer-react 0.1.11 → 0.1.12

package/.turbo/turbo-build.log

@@ -5,14 +5,14 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     25.32 KB
-CJS dist/index.js.map 40.59 KB
-CJS ⚡️ Build success in 18ms
-ESM dist/index.mjs     21.85 KB
-ESM dist/index.mjs.map 40.79 KB
-ESM ⚡️ Build success in 18ms
+ESM dist/index.mjs     23.51 KB
+ESM dist/index.mjs.map 43.29 KB
+ESM ⚡️ Build success in 19ms
+CJS dist/index.js     27.13 KB
+CJS dist/index.js.map 43.09 KB
+CJS ⚡️ Build success in 19ms
 DTS Build start
 "ComponentPropsWithoutRef" is imported from external module "react" but never used in "src/inspector/StateInspector.tsx" and "src/hooks.ts".
-DTS ⚡️ Build success in 1599ms
-DTS dist/index.d.ts  2.32 KB
-DTS dist/index.d.mts 2.32 KB
+DTS ⚡️ Build success in 1607ms
+DTS dist/index.d.ts  2.50 KB
+DTS dist/index.d.mts 2.50 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @noya-app/state-manager
 
+## 0.1.12
+
+### Patch Changes
+
+- b06dd3a: Add user auth to ws sync
+- Updated dependencies [b06dd3a]
+  - @noya-app/state-manager@0.1.12
+
 ## 0.1.11
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,12 +1,14 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, StateManager, Get, StateManagerOptions, MultiplayerStateManager, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { ConnectionEvent, MultiplayerUser, StateManager, Get, StateManagerOptions, MultiplayerStateManager, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
 type Anchor = "left" | "right";
-declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, unstyled, colorScheme, stateManager, anchor, ...props }: {
+declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, userId, unstyled, colorScheme, stateManager, anchor, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
+    connectedUsers?: MultiplayerUser[] | undefined;
+    userId?: string | undefined;
     unstyled?: boolean | undefined;
     colorScheme?: "light" | "dark" | undefined;
     stateManager: StateManager<S, M>;
@@ -19,11 +21,14 @@ declare function useManagedState<S extends object, M = void>(createInitialState:
 declare function useManagedHistory<S extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
 declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options: MultiplayerStateManagerOptions<S, M> & {
-    sync?: (self: MultiplayerStateManager<S, M>) => void;
+    sync?: (options: {
+        ms: MultiplayerStateManager<S, M>;
+    }) => void;
     trackConnectionEvents?: boolean;
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
     connectionEvents: ConnectionEvent<S>[] | undefined;
+    connectedUsers: MultiplayerUser[];
 }];
 
 export { StateInspector, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, StateManager, Get, StateManagerOptions, MultiplayerStateManager, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { ConnectionEvent, MultiplayerUser, StateManager, Get, StateManagerOptions, MultiplayerStateManager, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
 type Anchor = "left" | "right";
-declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, unstyled, colorScheme, stateManager, anchor, ...props }: {
+declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, userId, unstyled, colorScheme, stateManager, anchor, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
+    connectedUsers?: MultiplayerUser[] | undefined;
+    userId?: string | undefined;
     unstyled?: boolean | undefined;
     colorScheme?: "light" | "dark" | undefined;
     stateManager: StateManager<S, M>;
@@ -19,11 +21,14 @@ declare function useManagedState<S extends object, M = void>(createInitialState:
 declare function useManagedHistory<S extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
 declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options: MultiplayerStateManagerOptions<S, M> & {
-    sync?: (self: MultiplayerStateManager<S, M>) => void;
+    sync?: (options: {
+        ms: MultiplayerStateManager<S, M>;
+    }) => void;
     trackConnectionEvents?: boolean;
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
     connectionEvents: ConnectionEvent<S>[] | undefined;
+    connectedUsers: MultiplayerUser[];
 }];
 
 export { StateInspector, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.js

@@ -119,6 +119,15 @@ var darkTheme = {
   BASE_BACKGROUND_COLOR: "transparent",
   OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)"
 };
+var styles = {
+  sectionInner: {
+    flex: "1 1 0",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  }
+};
 function ToggleButton({
   showInspector,
   setShowInspector,
@@ -141,7 +150,10 @@ function ToggleButton({
         justifyContent: "center",
         padding: "2px 0"
       },
-      onClick: () => setShowInspector(!showInspector)
+      onClick: (event) => {
+        event.stopPropagation();
+        setShowInspector(!showInspector);
+      }
     },
     /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react3.default.createElement(
       "svg",
@@ -189,7 +201,8 @@ function DisclosureSection({
   right,
   children,
   colorScheme,
-  isFirst
+  isFirst,
+  style
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
   const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
@@ -199,7 +212,8 @@ function DisclosureSection({
       style: {
         flex: open ? "1 1 0" : "0",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        ...style
       }
     },
     /* @__PURE__ */ import_react3.default.createElement(
@@ -233,10 +247,52 @@ function DisclosureSection({
     open && children
   );
 }
+function InspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant
+}) {
+  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${solidBorderColor}`,
+        fontSize: "12px",
+        fontFamily: "Menlo, monospace",
+        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:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "span",
+      {
+        style: {
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block"
+        }
+      },
+      children
+    )
+  );
+}
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 var StateInspector = (0, import_react3.memo)(function StateInspector2({
   state,
   connectionEvents,
+  connectedUsers,
+  userId,
   unstyled,
   colorScheme = "light",
   stateManager,
@@ -261,6 +317,14 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
     "noya-multiplayer-react-show-history",
     false
   );
+  const [showUsers, setShowUsers] = useLocalStorageState(
+    "noya-multiplayer-react-show-users",
+    true
+  );
+  const [showData, setShowData] = useLocalStorageState(
+    "noya-multiplayer-react-show-data",
+    true
+  );
   (0, import_react3.useEffect)(() => {
     trackEvents.set(showEvents);
   }, [showEvents]);
@@ -289,7 +353,6 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
     }
   }, [historySnapshot.historyIndex]);
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
-  const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
   const baseStyle = {
     position: "fixed",
@@ -348,10 +411,15 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
     /* @__PURE__ */ import_react3.default.createElement(
       DisclosureSection,
       {
-        open: true,
-        title: "Data",
-        colorScheme,
         isFirst: true,
+        open: showUsers,
+        setOpen: setShowUsers,
+        title: "Users",
+        colorScheme,
+        style: {
+          flex: "0 0 auto",
+          maxHeight: "200px"
+        },
         right: /* @__PURE__ */ import_react3.default.createElement(
           ToggleButton,
           {
@@ -362,14 +430,44 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react3.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react3.default.createElement(
+        InspectorRow,
+        {
+          key: user.id,
+          colorScheme,
+          variant: user.id === userId ? "up" : void 0
+        },
+        user.name,
+        " (",
+        ellipsis(user.id.toString(), 8, "middle"),
+        ")"
+      )), !connectedUsers && /* @__PURE__ */ import_react3.default.createElement(
         "div",
         {
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
+            padding: "12px",
+            fontSize: "12px",
             display: "flex",
             flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ import_react3.default.createElement("span", null, "No connected users")
+      ))
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      DisclosureSection,
+      {
+        title: "Data",
+        colorScheme,
+        setOpen: setShowData,
+        open: showData
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          style: {
+            ...styles.sectionInner,
             gap: "1px",
             padding: "1px 12px"
           }
@@ -385,72 +483,58 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
         title: "History",
         colorScheme
       },
-      /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react3.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react3.default.createElement(
         "div",
         {
-          ref: historyContainerRef,
+          id: `${HISTORY_ELEMENT_PREFIX}0`,
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
-            overflowX: "hidden",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            fontSize: "12px",
+            fontFamily: "Menlo, monospace",
+            padding: "2px 12px 1px",
             display: "flex",
-            flexDirection: "column"
+            alignItems: "center",
+            background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
         /* @__PURE__ */ import_react3.default.createElement(
-          "div",
+          "span",
           {
-            id: `${HISTORY_ELEMENT_PREFIX}0`,
             style: {
-              borderBottom: `1px solid ${solidBorderColor}`,
-              fontSize: "12px",
               fontFamily: "Menlo, monospace",
-              padding: "2px 12px 1px",
-              display: "flex",
-              alignItems: "center",
-              background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
+              fontSize: "11px",
+              borderRadius: 4,
+              display: "inline-block"
             }
           },
-          /* @__PURE__ */ import_react3.default.createElement(
-            "span",
-            {
-              style: {
-                fontFamily: "Menlo, monospace",
-                fontSize: "11px",
-                borderRadius: 4,
-                display: "inline-block"
-              }
-            },
-            "Initial state"
-          )
-        ),
-        historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react3.default.createElement(
-          "div",
+          "Initial state"
+        )
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
+          key: index,
+          style: {
+            padding: "0px 12px 1px",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+          }
+        },
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react3.default.createElement(
+          "pre",
           {
-            id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
-            key: index,
+            key: j,
             style: {
-              padding: "0px 12px 1px",
-              borderBottom: `1px solid ${solidBorderColor}`,
-              background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap"
             }
           },
-          entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react3.default.createElement(
-            "pre",
-            {
-              key: j,
-              style: {
-                fontSize: "11px",
-                display: "flex",
-                flexWrap: "wrap"
-              }
-            },
-            patch.op === "add" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-            patch.op === "replace" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-            patch.op === "remove" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
-          ))
+          patch.op === "add" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
         ))
-      )
+      )))
     ),
     /* @__PURE__ */ import_react3.default.createElement(
       DisclosureSection,
@@ -460,98 +544,56 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
         title: "Events",
         colorScheme
       },
-      /* @__PURE__ */ import_react3.default.createElement(
-        "div",
-        {
-          ref: eventsContainerRef,
-          style: {
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column"
-          }
-        },
-        connectionEvents?.map((event, index) => /* @__PURE__ */ import_react3.default.createElement(
-          "div",
+      /* @__PURE__ */ import_react3.default.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react3.default.createElement(
+          InspectorRow,
           {
             key: index,
+            colorScheme,
+            variant: event.type === "send" ? "up" : "down",
             style: {
-              borderBottom: `1px solid ${borderColor}`
+              padding: "0px 12px 1px"
             }
           },
-          event.type === "stateChange" ? /* @__PURE__ */ import_react3.default.createElement(
-            "div",
-            {
-              style: {
-                padding: "2px 12px",
-                background: colorScheme === "light" ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
-                display: "flex",
-                alignItems: "center"
-              }
-            },
-            /* @__PURE__ */ import_react3.default.createElement(
-              "span",
-              {
-                style: {
-                  fontFamily: "Menlo, monospace",
-                  fontSize: "11px",
-                  borderRadius: 4,
-                  display: "inline-block"
-                }
-              },
-              "connection:",
-              " ",
-              /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())
-            )
-          ) : /* @__PURE__ */ import_react3.default.createElement(
-            "div",
+          /* @__PURE__ */ import_react3.default.createElement(
+            import_react_inspector.ObjectInspector,
             {
-              style: {
-                padding: "0px 12px 1px",
-                background: event.type === "send" ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)"
+              data: event.message,
+              theme,
+              nodeRenderer: ({
+                depth,
+                name,
+                data,
+                isNonenumerable,
+                expanded
+              }) => {
+                const direction = event.type === "send" ? "up" : "down";
+                return depth === 0 ? /* @__PURE__ */ import_react3.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react3.default.createElement(
+                  import_react_inspector.ObjectLabel,
+                  {
+                    direction,
+                    name,
+                    data,
+                    isNonenumerable
+                  }
+                );
               }
-            },
-            /* @__PURE__ */ import_react3.default.createElement(
-              import_react_inspector.ObjectInspector,
-              {
-                data: event.message,
-                theme,
-                nodeRenderer: ({
-                  depth,
-                  name,
-                  data,
-                  isNonenumerable,
-                  expanded
-                }) => {
-                  const direction = event.type === "send" ? "up" : "down";
-                  return depth === 0 ? /* @__PURE__ */ import_react3.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react3.default.createElement(
-                    import_react_inspector.ObjectLabel,
-                    {
-                      direction,
-                      name,
-                      data,
-                      isNonenumerable
-                    }
-                  );
-                }
-              }
-            )
-          )
-        )),
-        !connectionEvents && /* @__PURE__ */ import_react3.default.createElement(
-          "div",
-          {
-            style: {
-              padding: "12px",
-              fontSize: "12px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "4px"
             }
-          },
-          /* @__PURE__ */ import_react3.default.createElement("span", null, "No recorded events")
+          )
         )
-      )
+      ), !connectionEvents && /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ import_react3.default.createElement("span", null, "No recorded events")
+      ))
     )
   );
 });
@@ -634,6 +676,8 @@ function createPortalElement() {
 function useStateInspector({
   state,
   connectionEvents,
+  connectedUsers,
+  userId,
   disabled = false,
   colorScheme,
   anchor,
@@ -660,13 +704,24 @@ function useStateInspector({
         {
           state,
           connectionEvents,
+          connectedUsers,
+          userId,
           colorScheme,
           anchor,
           stateManager
         }
       )
     );
-  }, [anchor, colorScheme, connectionEvents, root, state, stateManager]);
+  }, [
+    anchor,
+    colorScheme,
+    connectedUsers,
+    connectionEvents,
+    root,
+    state,
+    stateManager,
+    userId
+  ]);
 }
 
 // src/hooks.ts
@@ -743,26 +798,37 @@ function useMultiplayerState(initialState, options) {
   );
   const syncRef = (0, import_react5.useRef)(sync);
   const [connectionEvents, setConnectionEvents] = (0, import_react5.useState)();
+  const [connectedUsers, setConnectedUsers] = (0, import_react5.useState)([]);
+  const [userId, setUserId] = (0, import_react5.useState)();
   const extras = (0, import_react5.useMemo)(() => {
     return {
-      connectionEvents
+      connectionEvents,
+      connectedUsers
     };
-  }, [connectionEvents]);
+  }, [connectionEvents, connectedUsers]);
   const globalTrackEvents = useObservable(trackEvents);
   const trackConnectionEvents = options.trackConnectionEvents ?? globalTrackEvents;
   const trackEventsCallbackRef = (0, import_react5.useRef)();
+  const trackConnectedUsersCallbackRef = (0, import_react5.useRef)();
   (0, import_react5.useEffect)(() => {
     trackEventsCallbackRef.current = trackConnectionEvents ? (e) => setConnectionEvents((events) => {
       const updated = events ? [...events, e] : [e];
       return updated.length > 50 ? updated.slice(-50) : updated;
     }) : void 0;
   }, [trackConnectionEvents]);
+  (0, import_react5.useEffect)(() => {
+    trackConnectedUsersCallbackRef.current = (users, userId2) => {
+      setConnectedUsers(users);
+      setUserId(userId2);
+    };
+  });
   (0, import_react5.useEffect)(() => {
     if (syncRef.current) {
-      return syncRef.current(
-        multiplayerStateManager,
-        (e) => trackEventsCallbackRef.current?.(e)
-      );
+      return syncRef.current({
+        ms: multiplayerStateManager,
+        onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
+        onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2)
+      });
     }
   }, [multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
@@ -770,6 +836,8 @@ function useMultiplayerState(initialState, options) {
     stateManager: multiplayerStateManager.sm,
     state,
     connectionEvents,
+    connectedUsers,
+    userId,
     disabled: !options.inspector,
     ...typeof options.inspector === "object" && options.inspector
   });