@noya-app/noya-multiplayer-react 0.1.23 → 0.1.25

package/dist/index.js

@@ -50,6 +50,7 @@ __export(src_exports, {
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
   useNoyaAppState: () => useNoyaAppState,
+  useObservable: () => useObservable,
   useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
   useSyncStateManager: () => useSyncStateManager
 });
@@ -250,7 +251,82 @@ var UserPointerIcon = (0, import_react2.memo)(function CursorIcon({
 
 // src/hooks.ts
 var import_state_manager = require("@noya-app/state-manager");
-var import_react6 = require("react");
+var import_react7 = require("react");
+var import_client2 = require("react-dom/client");
+
+// src/components/ErrorOverlay.tsx
+var import_react3 = __toESM(require("react"));
+function ErrorOverlay({
+  error
+}) {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: "20px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        maxWidth: "80%",
+        width: "fit-content",
+        padding: "12px 20px",
+        background: "white",
+        color: "black",
+        zIndex: 1e4,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        borderRadius: "4px",
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        fontFamily: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        fontSize: "14px",
+        fontWeight: 400,
+        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(
+      "code",
+      {
+        style: {
+          background: "rgba(255, 0, 0, 0.1)",
+          color: "rgba(255, 0, 0, 0.5)",
+          padding: "2px 4px",
+          borderRadius: "4px"
+        }
+      },
+      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(
+      "div",
+      {
+        style: {
+          height: "1px",
+          background: "rgba(0, 0, 0, 0.1)",
+          margin: "12px -20px"
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        style: {
+          background: "black",
+          color: "white",
+          padding: "8px 16px",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 700,
+          lineHeight: "19px"
+        },
+        onClick: () => {
+          window.location.reload();
+        }
+      },
+      "Reload"
+    )
+  );
+}
 
 // src/globals.ts
 var import_observable = require("@noya-app/observable");
@@ -258,18 +334,18 @@ var shouldTrackEvents$ = new import_observable.Observable(false);
 var shouldTrackTasks$ = new import_observable.Observable(false);
 
 // src/inspector/useStateInspector.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 
 // src/inspector/StateInspector.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_react_inspector = require("react-inspector");
 
 // src/inspector/useLocalStorageState.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var localStorage = typeof window !== "undefined" ? window.localStorage : null;
 function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = import_react3.default.useState(() => {
+  const [state, setState] = import_react4.default.useState(() => {
     const value = localStorage?.getItem(key);
     let result = defaultValue;
     if (value) {
@@ -314,7 +390,7 @@ function ToggleButton({
   theme,
   anchor
 }) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "span",
     {
       role: "button",
@@ -335,7 +411,7 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react5.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -345,7 +421,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -353,7 +429,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_react4.default.createElement(
+    ) : /* @__PURE__ */ import_react5.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -363,7 +439,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -386,7 +462,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_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -396,7 +472,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -410,7 +486,7 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ import_react4.default.createElement(
+      setOpen && /* @__PURE__ */ import_react5.default.createElement(
         Arrow,
         {
           expanded: open,
@@ -421,7 +497,7 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ import_react4.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      /* @__PURE__ */ import_react5.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
@@ -435,7 +511,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -453,7 +529,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -468,7 +544,7 @@ function InspectorRow({
   );
 }
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = (0, import_react4.memo)(function StateInspector2({
+var StateInspector = (0, import_react5.memo)(function StateInspector2({
   state,
   connectionEvents,
   connectedUsers,
@@ -482,12 +558,12 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
   forceInit,
   ...props
 }) {
-  const [didMount, setDidMount] = import_react4.default.useState(false);
-  (0, import_react4.useLayoutEffect)(() => {
+  const [didMount, setDidMount] = import_react5.default.useState(false);
+  (0, import_react5.useLayoutEffect)(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = import_react4.default.useRef(null);
-  const historyContainerRef = import_react4.default.useRef(null);
+  const eventsContainerRef = import_react5.default.useRef(null);
+  const historyContainerRef = import_react5.default.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -516,25 +592,25 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     shouldTrackTasks$.set(showTasks);
   }, [showTasks]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
     }
   }, [historySnapshot]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!historyContainerRef.current)
       return;
     const historyEntry = historyContainerRef.current.querySelector(
@@ -571,7 +647,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
   if (!didMount)
     return null;
   if (!showInspector) {
-    return /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         ...props,
@@ -583,7 +659,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         ToggleButton,
         {
           showInspector,
@@ -594,7 +670,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
       )
     );
   }
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       ...props,
@@ -603,7 +679,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         isFirst: true,
@@ -615,7 +691,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ import_react4.default.createElement(
+        right: /* @__PURE__ */ import_react5.default.createElement(
           ToggleButton,
           {
             showInspector,
@@ -625,14 +701,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react5.default.createElement(
         InspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ import_react4.default.createElement(
+        user.image && /* @__PURE__ */ import_react5.default.createElement(
           "img",
           {
             src: user.image,
@@ -653,7 +729,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ import_react4.default.createElement(
+      )), !connectedUsers && /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           style: {
@@ -664,17 +740,17 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react5.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         title: "Data",
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react4.default.createElement(
+        right: /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
             style: {
@@ -682,7 +758,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             SmallButton,
             {
               theme,
@@ -694,14 +770,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: "schema",
@@ -710,14 +786,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         }
       )))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
         colorScheme,
-        right: /* @__PURE__ */ import_react4.default.createElement(
+        right: /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
             style: {
@@ -725,7 +801,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canUndo,
@@ -734,7 +810,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 multiplayerStateManager.undo();
               }
             },
-            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
+            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -742,7 +818,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react4.default.createElement(
+              /* @__PURE__ */ import_react5.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -751,7 +827,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               )
             ))
           ),
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canRedo,
@@ -760,7 +836,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 multiplayerStateManager.redo();
               }
             },
-            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
+            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -768,7 +844,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react4.default.createElement(
+              /* @__PURE__ */ import_react5.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -779,7 +855,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}0`,
@@ -793,7 +869,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement(
+        /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
             style: {
@@ -805,7 +881,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           },
           "Initial state"
         )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
@@ -816,7 +892,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react4.default.createElement(
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react5.default.createElement(
           "pre",
           {
             style: {
@@ -827,7 +903,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           },
           entry.metadata.name
         ),
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react4.default.createElement(
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react5.default.createElement(
           "pre",
           {
             key: j,
@@ -837,14 +913,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               flexWrap: "wrap"
             }
           },
-          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)))
+          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)))
         ))
       )))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         title: "Tasks",
@@ -852,7 +928,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react5.default.createElement(
         InspectorRow,
         {
           key: task.id,
@@ -861,7 +937,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement(
+        /* @__PURE__ */ import_react5.default.createElement(
           import_react_inspector.ObjectInspector,
           {
             name: task.name,
@@ -871,7 +947,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         )
       )))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         open: showEphemeral,
@@ -879,7 +955,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__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(
+      /* @__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(
         import_react_inspector.ObjectInspector,
         {
           name: key,
@@ -889,7 +965,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         }
       ))))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         open: showEvents,
@@ -897,8 +973,8 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         title: "Events",
         colorScheme
       },
-      /* @__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(
+      /* @__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(
           InspectorRow,
           {
             key: index,
@@ -908,10 +984,10 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               padding: "0px 12px 1px"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             import_react_inspector.ObjectInspector,
             {
-              data: event.message,
+              data: event.type === "error" ? event.error : event.message,
               theme,
               nodeRenderer: ({
                 depth,
@@ -921,7 +997,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 expanded
               }) => {
                 const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ import_react4.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react4.default.createElement(
+                return depth === 0 ? /* @__PURE__ */ import_react5.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react5.default.createElement(
                   import_react_inspector.ObjectLabel,
                   {
                     direction,
@@ -934,7 +1010,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             }
           )
         )
-      ), !connectionEvents && /* @__PURE__ */ import_react4.default.createElement(
+      ), !connectionEvents && /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           style: {
@@ -945,18 +1021,18 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement("span", null, "No recorded events")
+        /* @__PURE__ */ import_react5.default.createElement("span", null, "No recorded events")
       ))
     )
   );
 });
 var ObjectRootLabel = ({ name, data, direction }) => {
   if (typeof name === "string") {
-    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 }));
+    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 }));
   }
   if (direction === "up" || direction === "down") {
     const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ import_react4.default.createElement("span", null, /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement("span", null, /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -973,9 +1049,9 @@ var ObjectRootLabel = ({ name, data, direction }) => {
         }
       },
       arrow
-    ), /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data }));
+    ), /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data }));
   } else {
-    return /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data });
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data });
   }
 };
 function Arrow({
@@ -983,7 +1059,7 @@ function Arrow({
   onClick,
   style
 }) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "span",
     {
       role: "button",
@@ -1026,7 +1102,7 @@ function SmallButton({
   theme,
   disabled
 }) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -1075,8 +1151,8 @@ function useStateInspector({
   ephemeralUserData,
   forceInit
 }) {
-  const [root, setRoot] = import_react5.default.useState(null);
-  (0, import_react5.useLayoutEffect)(() => {
+  const [root, setRoot] = import_react6.default.useState(null);
+  (0, import_react6.useLayoutEffect)(() => {
     if (disabled)
       return;
     const portalElement = createPortalElement();
@@ -1087,11 +1163,11 @@ function useStateInspector({
       document.body.removeChild(portalElement);
     };
   }, [disabled]);
-  (0, import_react5.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     if (!root)
       return;
     root.render(
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react6.default.createElement(
         StateInspector,
         {
           state,
@@ -1124,27 +1200,27 @@ function useStateInspector({
 
 // src/hooks.ts
 function useSyncStateManager(stateManager, path) {
-  const getSnapshot = (0, import_react6.useCallback)(
+  const getSnapshot = (0, import_react7.useCallback)(
     () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
     [stateManager, path]
   );
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     stateManager.addListener,
     getSnapshot,
     getSnapshot
   );
 }
 function useManagedState(createInitialState, options) {
-  const [stateManager] = (0, import_react6.useState)(
+  const [stateManager] = (0, import_react7.useState)(
     () => new import_state_manager.StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = (0, import_react6.useCallback)(
+  const setState = (0, import_react7.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") {
+        if (action instanceof Function) {
           performActionNoMetadata({
             run: action,
             undo: () => state
@@ -1157,7 +1233,7 @@ function useManagedState(createInitialState, options) {
         }
       } else {
         const performActionWithMetadata = stateManager.performAction;
-        if (typeof action === "function") {
+        if (action instanceof Function) {
           performActionWithMetadata(metadata, {
             run: action,
             undo: () => state
@@ -1175,22 +1251,54 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
   );
 }
 function useSyncMultiplayerStateManager(multiplayerStateManager) {
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     multiplayerStateManager.addListener,
     multiplayerStateManager.getOptimisticState,
     multiplayerStateManager.getOptimisticState
   );
 }
-function useEphemeralUserData(ephemeralUserData) {
-  return (0, import_react6.useSyncExternalStore)(
-    ephemeralUserData.addListener,
+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 = (0, import_react7.useMemo)(() => {
+    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 (0, import_react7.useSyncExternalStore)(
+    throttledAddListener,
     ephemeralUserData.getSnapshot,
     ephemeralUserData.getSnapshot
   );
@@ -1198,18 +1306,18 @@ function useEphemeralUserData(ephemeralUserData) {
 var defaultStubSync = (0, import_state_manager.stubSync)();
 function useMultiplayerState(initialState, options) {
   const { sync = defaultStubSync, ...rest } = options ?? {};
-  const [multiplayerStateManager] = (0, import_react6.useState)(
+  const [multiplayerStateManager] = (0, import_react7.useState)(
     () => new import_state_manager.MultiplayerStateManager(initialState, rest)
   );
-  const syncRef = (0, import_react6.useRef)(sync);
-  const [connectionEvents, setConnectionEvents] = (0, import_react6.useState)();
-  const [connectedUsers, setConnectedUsers] = (0, import_react6.useState)([]);
-  const [ephemeralUserData] = (0, import_react6.useState)(
+  const syncRef = (0, import_react7.useRef)(sync);
+  const [connectionEvents, setConnectionEvents] = (0, import_react7.useState)();
+  const [connectedUsers, setConnectedUsers] = (0, import_react7.useState)([]);
+  const [ephemeralUserData] = (0, import_react7.useState)(
     () => new import_state_manager.EphemeralUserData()
   );
-  const [tasks, setTasks] = (0, import_react6.useState)([]);
-  const [userId, setUserId] = (0, import_react6.useState)();
-  const extras = (0, import_react6.useMemo)(() => {
+  const [tasks, setTasks] = (0, import_react7.useState)([]);
+  const [userId, setUserId] = (0, import_react7.useState)();
+  const extras = (0, import_react7.useMemo)(() => {
     return {
       tasks,
       userId,
@@ -1236,22 +1344,22 @@ function useMultiplayerState(initialState, options) {
   const globalTrackTasks = useObservable(shouldTrackTasks$);
   const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
   const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
-  const trackEventsCallbackRef = (0, import_react6.useRef)();
-  const trackConnectedUsersCallbackRef = (0, import_react6.useRef)();
-  const trackTasksCallbackRef = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
+  const trackEventsCallbackRef = (0, import_react7.useRef)();
+  const trackConnectedUsersCallbackRef = (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_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     trackConnectedUsersCallbackRef.current = (users, userId2) => {
       setConnectedUsers(users);
       setUserId(userId2);
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
       setTasks((old) => {
         const newIds = new Set(tasks2.map((t) => t.id));
@@ -1260,7 +1368,7 @@ function useMultiplayerState(initialState, options) {
       });
     } : void 0;
   }, [shouldTrackTasks]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (syncRef.current) {
       return syncRef.current({
         ms: multiplayerStateManager,
@@ -1272,12 +1380,31 @@ function useMultiplayerState(initialState, options) {
     }
   }, [ephemeralUserData, multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
-  const forceInit = (0, import_react6.useCallback)(() => {
-    const state2 = typeof initialState === "function" ? initialState() : initialState;
+  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) => {
+      setUnrecoverableError(error);
+    });
+  }, [multiplayerStateManager]);
+  (0, import_react7.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 }));
+    return () => {
+      root.unmount();
+      el.remove();
+    };
+  });
   useStateInspector({
     ephemeralUserData,
     multiplayerStateManager,
@@ -1295,7 +1422,7 @@ function useMultiplayerState(initialState, options) {
 
 // src/noyaApp.ts
 var import_state_manager2 = require("@noya-app/state-manager");
-var import_react7 = require("react");
+var import_react8 = require("react");
 function createDefaultAppData(initialState) {
   return {
     theme: "light",
@@ -1322,7 +1449,7 @@ function getAppData(initialState) {
   }
 }
 function useAppData(initialState, { schema } = {}) {
-  const appData = (0, import_react7.useMemo)(() => {
+  const appData = (0, import_react8.useMemo)(() => {
     return getAppData(
       schema ? (0, import_state_manager2.createValue)(schema, initialState) : initialState
     );
@@ -1330,7 +1457,7 @@ function useAppData(initialState, { schema } = {}) {
   return appData;
 }
 function useBroadcastConnectedUsers(connectedUsers) {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isEmbeddedApp())
       return;
     const message = {
@@ -1341,7 +1468,7 @@ function useBroadcastConnectedUsers(connectedUsers) {
   }, [connectedUsers]);
 }
 function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isEmbeddedApp())
       return;
     const message = {
@@ -1364,7 +1491,7 @@ function isEmbeddedApp() {
   return window.self !== window.top;
 }
 function useNoyaAppState(initialState, options) {
-  const [state] = (0, import_react7.useState)(initialState);
+  const [state] = (0, import_react8.useState)(initialState);
   const {
     multiplayerUrl,
     inspector,
@@ -1374,7 +1501,7 @@ function useNoyaAppState(initialState, options) {
   } = useAppData(state, {
     schema: options.schema
   });
-  const sync = (0, import_react7.useMemo)(() => {
+  const sync = (0, import_react8.useMemo)(() => {
     return multiplayerUrl ? (0, import_state_manager2.webSocketSync)(multiplayerUrl) : (0, import_state_manager2.localStorageSync)({ key: options.localStorageKey || "noya-app" });
   }, [multiplayerUrl, options.localStorageKey]);
   const result = useMultiplayerState(noyaAppInitialState, {
@@ -1384,7 +1511,7 @@ function useNoyaAppState(initialState, options) {
   });
   const [, , extras] = result;
   useBroadcastConnectedUsers(extras.connectedUsers);
-  const mergedExtras = (0, import_react7.useMemo)(() => {
+  const mergedExtras = (0, import_react8.useMemo)(() => {
     return { ...extras, theme, viewType };
   }, [extras, theme, viewType]);
   return [result[0], result[1], mergedExtras];
@@ -1410,6 +1537,7 @@ function useNoyaAppState(initialState, options) {
   useManagedState,
   useMultiplayerState,
   useNoyaAppState,
+  useObservable,
   useSyncMultiplayerStateManager,
   useSyncStateManager,
   ...require("@noya-app/state-manager")