@noya-app/noya-multiplayer-react 0.1.9

package/dist/index.js

@@ -0,0 +1,784 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  StateInspector: () => StateInspector,
+  useManagedHistory: () => useManagedHistory,
+  useManagedState: () => useManagedState,
+  useMultiplayerState: () => useMultiplayerState,
+  useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
+  useSyncStateManager: () => useSyncStateManager
+});
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("@noya-app/state-manager"), module.exports);
+
+// src/hooks.ts
+var import_state_manager = require("@noya-app/state-manager");
+var import_react5 = require("react");
+
+// src/globals.ts
+var import_emitter = require("@noya-app/emitter");
+var import_react = require("react");
+var Observable = class {
+  value;
+  emitter = new import_emitter.Emitter();
+  constructor(value) {
+    this.value = value;
+  }
+  get() {
+    return this.value;
+  }
+  set(value) {
+    if (this.value === value)
+      return;
+    this.value = value;
+    this.emitter.emit(value);
+  }
+  listen(callback) {
+    callback(this.value);
+    return this.emitter.addListener(callback);
+  }
+};
+function useObservable(observable) {
+  const [value, setValue] = (0, import_react.useState)(observable.get());
+  (0, import_react.useEffect)(() => {
+    return observable.listen(setValue);
+  }, [observable]);
+  return value;
+}
+var trackEvents = new Observable(false);
+
+// src/inspector/useStateInspector.tsx
+var import_react4 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+
+// src/inspector/StateInspector.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_inspector = require("react-inspector");
+
+// src/inspector/useLocalStorageState.tsx
+var import_react2 = __toESM(require("react"));
+var localStorage = typeof window !== "undefined" ? window.localStorage : null;
+function useLocalStorageState(key, defaultValue) {
+  const [state, setState] = import_react2.default.useState(() => {
+    const value = localStorage?.getItem(key);
+    let result = defaultValue;
+    if (value) {
+      try {
+        result = JSON.parse(value);
+      } catch (error) {
+        console.error("Error parsing localStorage value", error);
+      }
+    }
+    return result;
+  });
+  const setLocalStorageState = (value) => {
+    localStorage?.setItem(key, JSON.stringify(value));
+    setState(value);
+  };
+  return [state, setLocalStorageState];
+}
+
+// src/inspector/StateInspector.tsx
+var lightTheme = {
+  ...import_react_inspector.chromeLight,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)"
+};
+var darkTheme = {
+  ...import_react_inspector.chromeDark,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)"
+};
+function ToggleButton({
+  showInspector,
+  setShowInspector,
+  theme
+}) {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "span",
+    {
+      role: "button",
+      style: {
+        flex: "0",
+        appearance: "none",
+        color: theme.BASE_COLOR,
+        background: "rgba(0,0,0,0.1)",
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0"
+      },
+      onClick: () => setShowInspector(!showInspector)
+    },
+    /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector ? /* @__PURE__ */ import_react3.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "currentColor",
+        className: "size-6"
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+        }
+      )
+    ) : /* @__PURE__ */ import_react3.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "currentColor",
+        className: "size-6"
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+        }
+      )
+    ))
+  );
+}
+function DisclosureSection({
+  open,
+  setOpen,
+  title,
+  right,
+  children,
+  colorScheme,
+  isFirst
+}) {
+  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_react3.default.createElement(
+    "div",
+    {
+      style: {
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        onClick: () => setOpen?.(!open),
+        style: {
+          cursor: "default",
+          fontSize: "12px",
+          padding: "4px 10px",
+          display: "flex",
+          ...!isFirst && { borderTop: `1px solid ${borderColor}` },
+          ...open && { borderBottom: `1px solid ${borderColor}` }
+        }
+      },
+      setOpen && /* @__PURE__ */ import_react3.default.createElement(
+        Arrow,
+        {
+          expanded: open,
+          style: {
+            fontSize: "11px",
+            // fontSize: theme.ARROW_FONT_SIZE,
+            marginRight: theme.ARROW_MARGIN_RIGHT,
+            color: theme.ARROW_COLOR
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react3.default.createElement("span", { style: { flex: "1 1 0" } }, title),
+      right
+    ),
+    open && children
+  );
+}
+var StateInspector = (0, import_react3.memo)(function StateInspector2({
+  state,
+  connectionEvents,
+  unstyled,
+  colorScheme = "light",
+  stateManager,
+  ...props
+}) {
+  const [didMount, setDidMount] = import_react3.default.useState(false);
+  (0, import_react3.useLayoutEffect)(() => {
+    setDidMount(true);
+  }, []);
+  const eventsContainerRef = import_react3.default.useRef(null);
+  const historyContainerRef = import_react3.default.useRef(null);
+  const [showInspector, setShowInspector] = useLocalStorageState(
+    "noya-multiplayer-react-show-inspector",
+    true
+  );
+  const [showEvents, setShowEvents] = useLocalStorageState(
+    "noya-multiplayer-react-show-events",
+    false
+  );
+  const [showHistory, setShowHistory] = useLocalStorageState(
+    "noya-multiplayer-react-show-history",
+    false
+  );
+  (0, import_react3.useEffect)(() => {
+    trackEvents.set(showEvents);
+  }, [showEvents]);
+  (0, import_react3.useEffect)(() => {
+    if (eventsContainerRef.current) {
+      eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
+    }
+  }, [connectionEvents]);
+  const historySnapshot = useManagedHistory(stateManager);
+  (0, import_react3.useEffect)(() => {
+    if (historyContainerRef.current) {
+      historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+  (0, import_react3.useEffect)(() => {
+    if (!historyContainerRef.current)
+      return;
+    const historyEntry = historyContainerRef.current.querySelector(
+      `#history-${historySnapshot.historyIndex - 1}`
+    );
+    if (historyEntry) {
+      historyEntry.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [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 baseStyle = {
+    position: "fixed",
+    top: 12,
+    right: 12,
+    bottom: 12,
+    width: 400,
+    background: colorScheme === "light" ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.95)",
+    backdropFilter: "blur(48px)",
+    border: `1px solid ${borderColor}`,
+    // outlineOffset: -1,
+    borderRadius: 4,
+    display: "flex",
+    flexDirection: "column",
+    // gap: 12,
+    color: theme.BASE_COLOR,
+    overflow: "hidden",
+    zIndex: 9999
+  };
+  if (!didMount)
+    return null;
+  if (!showInspector) {
+    return /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        ...props,
+        style: {
+          ...baseStyle,
+          padding: "4px 10px",
+          borderRadius: 8,
+          bottom: void 0,
+          width: void 0
+        }
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        ToggleButton,
+        {
+          showInspector,
+          setShowInspector,
+          theme
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      ...props,
+      style: {
+        ...!unstyled && baseStyle,
+        ...props.style
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      DisclosureSection,
+      {
+        open: true,
+        title: "Data",
+        colorScheme,
+        isFirst: true,
+        right: /* @__PURE__ */ import_react3.default.createElement(
+          ToggleButton,
+          {
+            showInspector,
+            setShowInspector,
+            theme
+          }
+        )
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          style: {
+            flex: "1 1 0",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1px",
+            padding: "1px 12px"
+          }
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: state, theme })
+      )
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      DisclosureSection,
+      {
+        open: showHistory,
+        setOpen: setShowHistory,
+        title: "History",
+        colorScheme
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          ref: historyContainerRef,
+          style: {
+            flex: "1 1 0",
+            overflowY: "auto",
+            overflowX: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          }
+        },
+        historySnapshot.history.length < 50 && /* @__PURE__ */ import_react3.default.createElement(
+          "div",
+          {
+            id: `history-${0}`,
+            style: {
+              borderBottom: `1px solid ${borderColor}`,
+              fontSize: "12px",
+              fontFamily: "Menlo, monospace",
+              padding: "2px 12px 1px",
+              display: "flex",
+              alignItems: "center",
+              background: historySnapshot.historyIndex === 0 ? colorScheme === "light" ? "rgba(0,0,0,0.2)" : "rgb(59 130 246 / 38%)" : void 0
+            }
+          },
+          /* @__PURE__ */ import_react3.default.createElement(
+            "span",
+            {
+              style: {
+                fontFamily: "Menlo, monospace",
+                fontSize: "11px",
+                borderRadius: 4,
+                display: "inline-block"
+              }
+            },
+            "Initial state"
+          )
+        ),
+        historySnapshot.history.slice(-50).map((entry, index) => /* @__PURE__ */ import_react3.default.createElement(
+          "div",
+          {
+            id: `history-${index}`,
+            key: index,
+            style: {
+              padding: "0px 12px 1px",
+              borderBottom: `1px solid ${borderColor}`,
+              background: index === historySnapshot.historyIndex - 1 ? colorScheme === "light" ? "rgba(0,0,0,0.2)" : "rgb(59 130 246 / 15%)" : void 0
+            }
+          },
+          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)))
+          ))
+        ))
+      )
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      DisclosureSection,
+      {
+        open: showEvents,
+        setOpen: setShowEvents,
+        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",
+          {
+            key: index,
+            style: {
+              borderBottom: `1px solid ${borderColor}`
+            }
+          },
+          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",
+            {
+              style: {
+                padding: "0px 12px 1px",
+                background: event.type === "send" ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)"
+              }
+            },
+            /* @__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")
+        )
+      )
+    )
+  );
+});
+var ObjectRootLabel = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ import_react3.default.createElement("span", null, /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectName, { name }), /* @__PURE__ */ import_react3.default.createElement("span", null, ": "), /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectPreview, { data }));
+  }
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "\u2191" : "\u2193";
+    return /* @__PURE__ */ import_react3.default.createElement("span", null, /* @__PURE__ */ import_react3.default.createElement(
+      "span",
+      {
+        style: {
+          background: direction === "up" ? "rgba(0,255,0,0.2)" : "rgba(255,0,0,0.2)",
+          // color: "white",
+          width: 12,
+          height: 12,
+          borderRadius: 2,
+          display: "inline-flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginRight: 4,
+          lineHeight: "12px"
+        }
+      },
+      arrow
+    ), /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectPreview, { data }));
+  } else {
+    return /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectPreview, { data });
+  }
+};
+function Arrow({
+  expanded,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "span",
+    {
+      role: "button",
+      onClick,
+      style: {
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        ...style
+      }
+    },
+    "\u25BC"
+  );
+}
+function pathToString(extendedPath) {
+  return extendedPath.map(
+    (key) => typeof key === "object" ? `:${ellipsis(key.id.toString(), 8, "middle")}` : key
+  ).map(
+    (key, index) => index === 0 || typeof key === "string" && key.startsWith(":") ? key : `.${key}`
+  ).join("");
+}
+function ellipsis(str, maxLength, position = "end") {
+  if (str.length <= maxLength)
+    return str;
+  switch (position) {
+    case "start":
+      return `\u2026${str.slice(str.length - maxLength)}`;
+    case "middle":
+      const halfLength = Math.floor(maxLength / 2);
+      return `${str.slice(0, halfLength)}\u2026${str.slice(str.length - halfLength)}`;
+    case "end":
+      return `${str.slice(0, maxLength)}\u2026`;
+  }
+}
+
+// src/inspector/useStateInspector.tsx
+function createPortalElement() {
+  const el = document.createElement("div");
+  el.id = "noya-multiplayer-react-inspector-portal";
+  return el;
+}
+function useStateInspector({
+  state,
+  connectionEvents,
+  disabled = false,
+  colorScheme,
+  stateManager
+}) {
+  const [root, setRoot] = import_react4.default.useState(null);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (disabled)
+      return;
+    const portalElement = createPortalElement();
+    const root2 = (0, import_client.createRoot)(portalElement);
+    document.body.appendChild(portalElement);
+    setRoot(root2);
+    return () => {
+      document.body.removeChild(portalElement);
+    };
+  }, [disabled]);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (!root)
+      return;
+    root.render(
+      /* @__PURE__ */ import_react4.default.createElement(
+        StateInspector,
+        {
+          state,
+          connectionEvents,
+          colorScheme,
+          stateManager
+        }
+      )
+    );
+  }, [colorScheme, connectionEvents, root, state, stateManager]);
+}
+
+// src/hooks.ts
+function useSyncStateManager(stateManager, path) {
+  const getSnapshot = (0, import_react5.useCallback)(
+    () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
+    [stateManager, path]
+  );
+  return (0, import_react5.useSyncExternalStore)(
+    stateManager.addListener,
+    getSnapshot,
+    getSnapshot
+  );
+}
+function useManagedState(createInitialState, options) {
+  const [stateManager] = (0, import_react5.useState)(
+    () => new import_state_manager.StateManager(createInitialState(), options)
+  );
+  const state = useSyncStateManager(stateManager);
+  const setState = (0, import_react5.useCallback)(
+    (...args) => {
+      const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
+      if (metadata === void 0) {
+        const performActionNoMetadata = stateManager.performAction;
+        if (typeof action === "function") {
+          performActionNoMetadata({
+            run: action,
+            undo: () => state
+          });
+        } else {
+          performActionNoMetadata({
+            run: () => action,
+            undo: () => state
+          });
+        }
+      } else {
+        const performActionWithMetadata = stateManager.performAction;
+        if (typeof action === "function") {
+          performActionWithMetadata(metadata, {
+            run: action,
+            undo: () => state
+          });
+        } else {
+          performActionWithMetadata(metadata, {
+            run: () => action,
+            undo: () => state
+          });
+        }
+      }
+    },
+    [state, stateManager]
+  );
+  return [state, setState, stateManager];
+}
+function useManagedHistory(stateManager) {
+  return (0, import_react5.useSyncExternalStore)(
+    stateManager.historyEmittor.addListener,
+    stateManager.getHistorySnapshot,
+    stateManager.getHistorySnapshot
+  );
+}
+function useSyncMultiplayerStateManager(multiplayerStateManager) {
+  return (0, import_react5.useSyncExternalStore)(
+    multiplayerStateManager.addListener,
+    multiplayerStateManager.getOptimisticState,
+    multiplayerStateManager.getOptimisticState
+  );
+}
+var defaultStubSync = (0, import_state_manager.stubSync)();
+function useMultiplayerState(initialState, options) {
+  const { sync = defaultStubSync, ...rest } = options;
+  const [multiplayerStateManager] = (0, import_react5.useState)(
+    () => new import_state_manager.MultiplayerStateManager(initialState, rest)
+  );
+  const syncRef = (0, import_react5.useRef)(sync);
+  const [connectionEvents, setConnectionEvents] = (0, import_react5.useState)();
+  const extras = (0, import_react5.useMemo)(() => {
+    return {
+      connectionEvents
+    };
+  }, [connectionEvents]);
+  const globalTrackEvents = useObservable(trackEvents);
+  const trackConnectionEvents = options.trackConnectionEvents ?? globalTrackEvents;
+  const trackEventsCallbackRef = (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)(() => {
+    if (syncRef.current) {
+      return syncRef.current(
+        multiplayerStateManager,
+        (e) => trackEventsCallbackRef.current?.(e)
+      );
+    }
+  }, [multiplayerStateManager]);
+  const state = useSyncMultiplayerStateManager(multiplayerStateManager);
+  useStateInspector({
+    stateManager: multiplayerStateManager.sm,
+    state,
+    connectionEvents,
+    disabled: !options.inspector,
+    colorScheme: typeof options.inspector === "object" ? options.inspector.colorScheme : void 0
+  });
+  return [
+    state,
+    multiplayerStateManager.setOptimisticState,
+    multiplayerStateManager,
+    extras
+  ];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StateInspector,
+  useManagedHistory,
+  useManagedState,
+  useMultiplayerState,
+  useSyncMultiplayerStateManager,
+  useSyncStateManager,
+  ...require("@noya-app/state-manager")
+});
+//# sourceMappingURL=index.js.map