@noya-app/noya-multiplayer-react 0.1.24 → 0.1.26

package/dist/index.mjs

@@ -201,6 +201,7 @@ import {
   stubSync
 } from "@noya-app/state-manager";
 import {
+  createElement,
   useCallback,
   useEffect as useEffect3,
   useMemo as useMemo3,
@@ -208,6 +209,81 @@ import {
   useState as useState2,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
+import { createRoot as createRoot2 } from "react-dom/client";
+
+// src/components/ErrorOverlay.tsx
+import React2 from "react";
+function ErrorOverlay({
+  error
+}) {
+  return /* @__PURE__ */ React2.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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", null, "An updated version of Noya is available. Please reload the page to continue.")) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", null, "An error occurred:", " ", /* @__PURE__ */ React2.createElement(
+      "code",
+      {
+        style: {
+          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__ */ React2.createElement("br", null), /* @__PURE__ */ React2.createElement("br", null), "If this happens repeatedly, please get in touch and the Noya team can help.")),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: {
+          height: "1px",
+          background: "rgba(0, 0, 0, 0.1)",
+          margin: "12px -20px"
+        }
+      }
+    ),
+    /* @__PURE__ */ React2.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
 import { Observable } from "@noya-app/observable";
@@ -215,11 +291,11 @@ var shouldTrackEvents$ = new Observable(false);
 var shouldTrackTasks$ = new Observable(false);
 
 // src/inspector/useStateInspector.tsx
-import React4, { useLayoutEffect as useLayoutEffect2 } from "react";
+import React5, { useLayoutEffect as useLayoutEffect2 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/inspector/StateInspector.tsx
-import React3, {
+import React4, {
   memo as memo2,
   useEffect as useEffect2,
   useLayoutEffect
@@ -234,10 +310,10 @@ import {
 } from "react-inspector";
 
 // src/inspector/useLocalStorageState.tsx
-import React2 from "react";
+import React3 from "react";
 var localStorage = typeof window !== "undefined" ? window.localStorage : null;
 function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = React2.useState(() => {
+  const [state, setState] = React3.useState(() => {
     const value = localStorage?.getItem(key);
     let result = defaultValue;
     if (value) {
@@ -282,7 +358,7 @@ function ToggleButton({
   theme,
   anchor
 }) {
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "span",
     {
       role: "button",
@@ -303,7 +379,7 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ React4.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -313,7 +389,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -321,7 +397,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__ */ React3.createElement(
+    ) : /* @__PURE__ */ React4.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -331,7 +407,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -354,7 +430,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__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       style: {
@@ -364,7 +440,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -378,7 +454,7 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ React3.createElement(
+      setOpen && /* @__PURE__ */ React4.createElement(
         Arrow,
         {
           expanded: open,
@@ -389,7 +465,7 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ React3.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      /* @__PURE__ */ React4.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
@@ -403,7 +479,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       style: {
@@ -421,7 +497,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "span",
       {
         style: {
@@ -450,12 +526,12 @@ var StateInspector = memo2(function StateInspector2({
   forceInit,
   ...props
 }) {
-  const [didMount, setDidMount] = React3.useState(false);
+  const [didMount, setDidMount] = React4.useState(false);
   useLayoutEffect(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = React3.useRef(null);
-  const historyContainerRef = React3.useRef(null);
+  const eventsContainerRef = React4.useRef(null);
+  const historyContainerRef = React4.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -539,7 +615,7 @@ var StateInspector = memo2(function StateInspector2({
   if (!didMount)
     return null;
   if (!showInspector) {
-    return /* @__PURE__ */ React3.createElement(
+    return /* @__PURE__ */ React4.createElement(
       "div",
       {
         ...props,
@@ -551,7 +627,7 @@ var StateInspector = memo2(function StateInspector2({
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         ToggleButton,
         {
           showInspector,
@@ -562,7 +638,7 @@ var StateInspector = memo2(function StateInspector2({
       )
     );
   }
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       ...props,
@@ -571,7 +647,7 @@ var StateInspector = memo2(function StateInspector2({
         ...props.style
       }
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
         isFirst: true,
@@ -583,7 +659,7 @@ var StateInspector = memo2(function StateInspector2({
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ React3.createElement(
+        right: /* @__PURE__ */ React4.createElement(
           ToggleButton,
           {
             showInspector,
@@ -593,14 +669,14 @@ var StateInspector = memo2(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ React3.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React4.createElement(
         InspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ React3.createElement(
+        user.image && /* @__PURE__ */ React4.createElement(
           "img",
           {
             src: user.image,
@@ -621,7 +697,7 @@ var StateInspector = memo2(function StateInspector2({
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ React3.createElement(
+      )), !connectedUsers && /* @__PURE__ */ React4.createElement(
         "div",
         {
           style: {
@@ -632,17 +708,17 @@ var StateInspector = memo2(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React3.createElement("span", null, "No connected users")
+        /* @__PURE__ */ React4.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
         title: "Data",
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ React3.createElement(
+        right: /* @__PURE__ */ React4.createElement(
           "span",
           {
             style: {
@@ -650,7 +726,7 @@ var StateInspector = memo2(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(
             SmallButton,
             {
               theme,
@@ -662,14 +738,14 @@ var StateInspector = memo2(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React3.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React4.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React4.createElement(
         ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ React3.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React3.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ React4.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React4.createElement(
         ObjectInspector,
         {
           name: "schema",
@@ -678,14 +754,14 @@ var StateInspector = memo2(function StateInspector2({
         }
       )))
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
         colorScheme,
-        right: /* @__PURE__ */ React3.createElement(
+        right: /* @__PURE__ */ React4.createElement(
           "span",
           {
             style: {
@@ -693,7 +769,7 @@ var StateInspector = memo2(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canUndo,
@@ -702,7 +778,7 @@ var StateInspector = memo2(function StateInspector2({
                 multiplayerStateManager.undo();
               }
             },
-            /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React3.createElement(
+            /* @__PURE__ */ React4.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React4.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -710,7 +786,7 @@ var StateInspector = memo2(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ React3.createElement(
+              /* @__PURE__ */ React4.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -719,7 +795,7 @@ var StateInspector = memo2(function StateInspector2({
               )
             ))
           ),
-          /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canRedo,
@@ -728,7 +804,7 @@ var StateInspector = memo2(function StateInspector2({
                 multiplayerStateManager.redo();
               }
             },
-            /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React3.createElement(
+            /* @__PURE__ */ React4.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React4.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -736,7 +812,7 @@ var StateInspector = memo2(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ React3.createElement(
+              /* @__PURE__ */ React4.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -747,7 +823,7 @@ var StateInspector = memo2(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ React3.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React4.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}0`,
@@ -761,7 +837,7 @@ var StateInspector = memo2(function StateInspector2({
             background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        /* @__PURE__ */ React3.createElement(
+        /* @__PURE__ */ React4.createElement(
           "span",
           {
             style: {
@@ -773,7 +849,7 @@ var StateInspector = memo2(function StateInspector2({
           },
           "Initial state"
         )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React3.createElement(
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React4.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
@@ -784,7 +860,7 @@ var StateInspector = memo2(function StateInspector2({
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ React3.createElement(
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ React4.createElement(
           "pre",
           {
             style: {
@@ -795,7 +871,7 @@ var StateInspector = memo2(function StateInspector2({
           },
           entry.metadata.name
         ),
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React3.createElement(
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React4.createElement(
           "pre",
           {
             key: j,
@@ -805,14 +881,14 @@ var StateInspector = memo2(function StateInspector2({
               flexWrap: "wrap"
             }
           },
-          patch.op === "add" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React3.createElement(ObjectInspector, { data: patch.value, theme })),
-          patch.op === "replace" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React3.createElement(ObjectInspector, { data: patch.value, theme })),
-          patch.op === "remove" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
-          patch.op === "move" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
+          patch.op === "add" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React4.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React4.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
         ))
       )))
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
         title: "Tasks",
@@ -820,7 +896,7 @@ var StateInspector = memo2(function StateInspector2({
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React4.createElement(
         InspectorRow,
         {
           key: task.id,
@@ -829,7 +905,7 @@ var StateInspector = memo2(function StateInspector2({
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ React3.createElement(
+        /* @__PURE__ */ React4.createElement(
           ObjectInspector,
           {
             name: task.name,
@@ -839,7 +915,7 @@ var StateInspector = memo2(function StateInspector2({
         )
       )))
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
         open: showEphemeral,
@@ -847,7 +923,7 @@ var StateInspector = memo2(function StateInspector2({
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React3.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React4.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ React4.createElement(
         ObjectInspector,
         {
           name: key,
@@ -857,7 +933,7 @@ var StateInspector = memo2(function StateInspector2({
         }
       ))))
     ),
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       DisclosureSection,
       {
         open: showEvents,
@@ -865,8 +941,8 @@ var StateInspector = memo2(function StateInspector2({
         title: "Events",
         colorScheme
       },
-      /* @__PURE__ */ React3.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
-        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React3.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React4.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React4.createElement(
           InspectorRow,
           {
             key: index,
@@ -876,10 +952,10 @@ var StateInspector = memo2(function StateInspector2({
               padding: "0px 12px 1px"
             }
           },
-          /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(
             ObjectInspector,
             {
-              data: event.message,
+              data: event.type === "error" ? event.error : event.message,
               theme,
               nodeRenderer: ({
                 depth,
@@ -889,7 +965,7 @@ var StateInspector = memo2(function StateInspector2({
                 expanded
               }) => {
                 const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ React3.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React3.createElement(
+                return depth === 0 ? /* @__PURE__ */ React4.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React4.createElement(
                   ObjectLabel,
                   {
                     direction,
@@ -902,7 +978,7 @@ var StateInspector = memo2(function StateInspector2({
             }
           )
         )
-      ), !connectionEvents && /* @__PURE__ */ React3.createElement(
+      ), !connectionEvents && /* @__PURE__ */ React4.createElement(
         "div",
         {
           style: {
@@ -913,18 +989,18 @@ var StateInspector = memo2(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React3.createElement("span", null, "No recorded events")
+        /* @__PURE__ */ React4.createElement("span", null, "No recorded events")
       ))
     )
   );
 });
 var ObjectRootLabel = ({ name, data, direction }) => {
   if (typeof name === "string") {
-    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.createElement(ObjectName, { name }), /* @__PURE__ */ React3.createElement("span", null, ": "), /* @__PURE__ */ React3.createElement(ObjectPreview, { data }));
+    return /* @__PURE__ */ React4.createElement("span", null, /* @__PURE__ */ React4.createElement(ObjectName, { name }), /* @__PURE__ */ React4.createElement("span", null, ": "), /* @__PURE__ */ React4.createElement(ObjectPreview, { data }));
   }
   if (direction === "up" || direction === "down") {
     const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.createElement(
+    return /* @__PURE__ */ React4.createElement("span", null, /* @__PURE__ */ React4.createElement(
       "span",
       {
         style: {
@@ -941,9 +1017,9 @@ var ObjectRootLabel = ({ name, data, direction }) => {
         }
       },
       arrow
-    ), /* @__PURE__ */ React3.createElement(ObjectPreview, { data }));
+    ), /* @__PURE__ */ React4.createElement(ObjectPreview, { data }));
   } else {
-    return /* @__PURE__ */ React3.createElement(ObjectPreview, { data });
+    return /* @__PURE__ */ React4.createElement(ObjectPreview, { data });
   }
 };
 function Arrow({
@@ -951,7 +1027,7 @@ function Arrow({
   onClick,
   style
 }) {
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "span",
     {
       role: "button",
@@ -994,7 +1070,7 @@ function SmallButton({
   theme,
   disabled
 }) {
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "button",
     {
       type: "button",
@@ -1043,7 +1119,7 @@ function useStateInspector({
   ephemeralUserData,
   forceInit
 }) {
-  const [root, setRoot] = React4.useState(null);
+  const [root, setRoot] = React5.useState(null);
   useLayoutEffect2(() => {
     if (disabled)
       return;
@@ -1059,7 +1135,7 @@ function useStateInspector({
     if (!root)
       return;
     root.render(
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(
         StateInspector,
         {
           state,
@@ -1112,7 +1188,7 @@ function useManagedState(createInitialState, options) {
       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
@@ -1125,7 +1201,7 @@ function useManagedState(createInitialState, options) {
         }
       } else {
         const performActionWithMetadata = stateManager.performAction;
-        if (typeof action === "function") {
+        if (action instanceof Function) {
           performActionWithMetadata(metadata, {
             run: action,
             undo: () => state
@@ -1273,11 +1349,30 @@ function useMultiplayerState(initialState, options) {
   }, [ephemeralUserData, multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
   const forceInit = useCallback(() => {
-    const state2 = typeof initialState === "function" ? initialState() : initialState;
+    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] = useState2();
+  useEffect3(() => {
+    return multiplayerStateManager.errorEmitter.addListener((error) => {
+      setUnrecoverableError(error);
+    });
+  }, [multiplayerStateManager]);
+  useEffect3(() => {
+    if (!unrecoverableError)
+      return;
+    const el = document.createElement("div");
+    el.id = "noya-multiplayer-react-error-overlay";
+    document.body.appendChild(el);
+    const root = createRoot2(el);
+    root.render(createElement(ErrorOverlay, { error: unrecoverableError }));
+    return () => {
+      root.unmount();
+      el.remove();
+    };
+  });
   useStateInspector({
     ephemeralUserData,
     multiplayerStateManager,
@@ -1295,7 +1390,7 @@ function useMultiplayerState(initialState, options) {
 
 // src/noyaApp.ts
 import {
-  createValue,
+  createOrCastValue,
   localStorageSync,
   webSocketSync
 } from "@noya-app/state-manager";
@@ -1328,7 +1423,7 @@ function getAppData(initialState) {
 function useAppData(initialState, { schema } = {}) {
   const appData = useMemo4(() => {
     return getAppData(
-      schema ? createValue(schema, initialState) : initialState
+      schema ? createOrCastValue(schema, initialState) : initialState
     );
   }, [initialState, schema]);
   return appData;