@noya-app/noya-multiplayer-react 0.1.62 → 0.1.63

package/dist/index.js

@@ -1119,9 +1119,15 @@ __export(src_exports, {
   WebSocketConnection: () => WebSocketConnection,
   createDefaultAppData: () => createDefaultAppData,
   createNoyaContext: () => createNoyaContext,
+  decodeAll: () => decodeAll,
+  encodeAll: () => encodeAll,
   enforceSchema: () => enforceSchema,
+  exportAll: () => exportAll,
+  fetchAssetMap: () => fetchAssetMap,
   getAppData: () => getAppData,
+  importAll: () => importAll,
   parseAppDataParameter: () => parseAppDataParameter,
+  replaceDeep: () => replaceDeep,
   useAIManager: () => useAIManager,
   useAnyEphemeralUserData: () => useAnyEphemeralUserData,
   useAnyNoyaManager: () => useAnyNoyaManager,
@@ -1156,12 +1162,12 @@ module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("@noya-app/state-manager"), module.exports);
 
 // src/ai.ts
-var import_react8 = require("react");
+var import_react17 = require("react");
 
 // src/NoyaStateContext.tsx
 var import_observable = require("@noya-app/observable");
 var import_react_utils3 = require("@noya-app/react-utils");
-var import_react7 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // ../../node_modules/@sinclair/typebox/build/esm/type/symbols/symbols.mjs
 var TransformKind = Symbol.for("TypeBox.Transform");
@@ -3587,6 +3593,71 @@ function Void(options = {}) {
 // ../../node_modules/@sinclair/typebox/build/esm/type/type/index.mjs
 var Type = type_exports3;
 
+// ../noya-schemas/src/asset.ts
+var assetSchema = Type.Object({
+  id: Type.String(),
+  url: Type.String(),
+  createdAt: Type.String(),
+  size: Type.Number(),
+  contentType: Type.Optional(Type.String())
+});
+
+// ../noya-schemas/src/encode.ts
+var SchemaMap = /* @__PURE__ */ new Map([
+  [Kind, "_kind"],
+  [Hint, "_hint"]
+]);
+var InverseSchemaMap = new Map(
+  Array.from(SchemaMap.entries()).map(([key, value]) => [value, key])
+);
+function encodeSchema(obj, symMap = SchemaMap) {
+  function replaceSymbols(item) {
+    if (Array.isArray(item)) {
+      return item.map(replaceSymbols);
+    } else if (typeof item === "object" && item !== null) {
+      const newObj = {};
+      for (const key in item) {
+        if (Object.prototype.hasOwnProperty.call(item, key)) {
+          const value = item[key];
+          newObj[key] = replaceSymbols(value);
+        }
+      }
+      for (const sym of Object.getOwnPropertySymbols(item)) {
+        const stringKey = symMap.get(sym);
+        if (stringKey) {
+          newObj[stringKey] = replaceSymbols(item[sym]);
+        }
+      }
+      return newObj;
+    }
+    return item;
+  }
+  return replaceSymbols(obj);
+}
+function decodeSchema(obj, strMap = InverseSchemaMap) {
+  function replaceStringKeys(item) {
+    if (Array.isArray(item)) {
+      return item.map(replaceStringKeys);
+    } else if (typeof item === "object" && item !== null) {
+      const newObj = {};
+      for (const key in item) {
+        if (Object.prototype.hasOwnProperty.call(item, key)) {
+          const value = item[key];
+          const symbolKey = strMap.get(key);
+          if (symbolKey) {
+            newObj[symbolKey] = replaceStringKeys(value);
+          } else {
+            newObj[key] = replaceStringKeys(value);
+          }
+        }
+      }
+      return newObj;
+    }
+    return item;
+  }
+  return replaceStringKeys(obj);
+}
+
 // ../noya-schemas/src/filesSchema.ts
 var encodingSchema = Type.Union([
   Type.Literal("utf-8"),
@@ -3607,8 +3678,13 @@ var fileSchema = Type.Object({
   content: Type.String(),
   encoding: encodingSchema
 });
+var noyaFileSchema = Type.Object({
+  id: Type.String({ format: "uuid", default: "" }),
+  kind: Type.Literal("noyaFile"),
+  fileId: Type.String()
+});
 var mediaItemSchema = Type.Union(
-  [folderMediaItemSchema, assetMediaItemSchema, fileSchema],
+  [folderMediaItemSchema, assetMediaItemSchema, fileSchema, noyaFileSchema],
   {
     discriminator: "kind"
   }
@@ -3949,12 +4025,12 @@ format_exports.Set("color", () => true);
 format_exports.Set("uuid", validateUUID);
 
 // src/noyaApp.ts
-var import_state_manager2 = require("@noya-app/state-manager");
-var import_react6 = require("react");
+var import_state_manager3 = require("@noya-app/state-manager");
+var import_react15 = require("react");
 
 // src/hooks.ts
-var import_state_manager = require("@noya-app/state-manager");
-var import_react5 = require("react");
+var import_state_manager2 = require("@noya-app/state-manager");
+var import_react14 = require("react");
 var import_client2 = require("react-dom/client");
 
 // src/components/ErrorOverlay.tsx
@@ -4032,14 +4108,14 @@ var ErrorOverlay = React.memo(function ErrorOverlay2({
 });
 
 // src/inspector/useStateInspector.tsx
-var import_react4 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_react_utils2 = require("@noya-app/react-utils");
 
 // src/inspector/StateInspector.tsx
 var import_react_utils = require("@noya-app/react-utils");
-var import_react3 = __toESM(require("react"));
-var import_react_inspector = require("react-inspector");
+var import_react12 = __toESM(require("react"));
+var import_react_inspector5 = require("react-inspector");
 
 // src/useObservable.ts
 var import_react = require("react");
@@ -4068,119 +4144,108 @@ function useObservable(observable, pathOrSelector, options) {
   return (0, import_react.useSyncExternalStore)(listen, get, get);
 }
 
-// src/inspector/useLocalStorageState.tsx
+// src/inspector/ColoredDot.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);
+function ColoredDot({ type }) {
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: 6,
+        height: 6,
+        background: type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
+        borderRadius: "50%",
+        verticalAlign: "middle"
       }
     }
-    return result;
-  });
-  const setLocalStorageState = (value) => {
-    localStorage?.setItem(key, JSON.stringify(value));
-    setState(value);
-  };
-  return [state, setLocalStorageState];
+  );
 }
 
-// src/inspector/StateInspector.tsx
-var lightTheme = {
+// src/inspector/inspectorTheme.ts
+var import_react_inspector = require("react-inspector");
+var lightInspectorTheme = {
   ...import_react_inspector.chromeLight,
   BASE_BACKGROUND_COLOR: "transparent",
   OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)"
 };
-var darkTheme = {
+var darkInspectorTheme = {
   ...import_react_inspector.chromeDark,
   BASE_BACKGROUND_COLOR: "transparent",
   OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)"
 };
-var styles = {
-  sectionInner: {
-    flex: "1 1 0",
-    overflowY: "auto",
-    overflowX: "hidden",
-    display: "flex",
-    flexDirection: "column"
+var getStateInspectorTheme = (colorScheme) => {
+  return colorScheme === "light" ? lightInspectorTheme : darkInspectorTheme;
+};
+var getStateInspectorBorderColor = (colorScheme) => {
+  return colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+};
+
+// src/inspector/sections/EventsSection.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_inspector3 = require("react-inspector");
+
+// src/inspector/ObjectRootLabel.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_inspector2 = require("react-inspector");
+var ObjectRootLabel = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ import_react3.default.createElement("span", null, /* @__PURE__ */ import_react3.default.createElement(import_react_inspector2.ObjectName, { name }), /* @__PURE__ */ import_react3.default.createElement("span", null, ": "), /* @__PURE__ */ import_react3.default.createElement(import_react_inspector2.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_inspector2.ObjectPreview, { data }));
+  } else {
+    return /* @__PURE__ */ import_react3.default.createElement(import_react_inspector2.ObjectPreview, { data });
   }
 };
-function ToggleButton({
-  showInspector,
-  setShowInspector,
-  theme,
-  anchor
+
+// src/inspector/StateInspectorDisclosureSection.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/inspector/StateInspectorArrow.tsx
+var import_react4 = __toESM(require("react"));
+function StateInspectorArrow({
+  expanded,
+  onClick,
+  style
 }) {
-  const isRightAnchor = anchor === "right";
-  const rightIcon = /* @__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"
-      }
-    )
-  );
-  const leftIcon = /* @__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"
-      }
-    )
-  );
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "span",
     {
       role: "button",
+      onClick,
       style: {
-        flex: "0",
-        appearance: "none",
-        color: theme.BASE_COLOR,
-        border: "none",
-        fontSize: "12px",
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "2px 0"
-      },
-      onClick: (event) => {
-        event.stopPropagation();
-        setShowInspector(!showInspector);
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        fontFamily: "Menlo, monospace",
+        ...style
       }
     },
-    showInspector ? "Hide Inspector" : /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
+    "\u25BC"
   );
 }
-function DisclosureSection({
+
+// src/inspector/StateInspectorDisclosureSection.tsx
+function StateInspectorDisclosureSection({
   open,
   setOpen,
   title,
@@ -4190,9 +4255,9 @@ function DisclosureSection({
   isFirst,
   style
 }) {
-  const theme = colorScheme === "light" ? lightTheme : darkTheme;
+  const theme = colorScheme === "light" ? lightInspectorTheme : darkInspectorTheme;
   const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -4202,7 +4267,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -4216,8 +4281,8 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ import_react3.default.createElement(
-        Arrow,
+      setOpen && /* @__PURE__ */ import_react5.default.createElement(
+        StateInspectorArrow,
         {
           expanded: open,
           style: {
@@ -4227,13 +4292,35 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ import_react3.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
   );
 }
-function InspectorRow({
+var StateInspectorDisclosureRowInner = (0, import_react5.forwardRef)(
+  function StateInspectorDisclosureRowInner2(props, forwardedRef) {
+    return /* @__PURE__ */ import_react5.default.createElement(
+      "div",
+      {
+        style: {
+          flex: "1 1 0",
+          overflowY: "auto",
+          overflowX: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          ...props.style
+        },
+        ...props,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+
+// src/inspector/StateInspectorRow.tsx
+var import_react6 = __toESM(require("react"));
+function StateInspectorRow({
   children,
   colorScheme,
   selected,
@@ -4241,7 +4328,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       style: {
@@ -4259,7 +4346,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react6.default.createElement(
       "span",
       {
         style: {
@@ -4273,40 +4360,1007 @@ function InspectorRow({
     )
   );
 }
-var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector2({
-  noyaManager,
-  colorScheme = "light",
-  anchor = "right",
-  unstyled = false,
-  ...props
+
+// src/inspector/sections/EventsSection.tsx
+function EventsSection({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  eventsContainerRef,
+  connectionEvents
 }) {
-  const {
-    multiplayerStateManager,
-    assetManager,
-    connectedUsersManager,
-    secretManager,
-    ephemeralUserDataManager,
-    connectionEventManager,
-    taskManager,
-    ioManager
-  } = noyaManager;
-  const [didMount, setDidMount] = import_react3.default.useState(false);
-  const tasks = useObservable(taskManager.tasks$);
-  const inputs = useObservable(ioManager.inputs$);
-  const outputTransforms = useObservable(ioManager.outputTransforms$);
-  (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 theme = getStateInspectorTheme(colorScheme);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showEvents,
+      setOpen: setShowEvents,
+      title: "Events",
+      colorScheme
+    },
+    /* @__PURE__ */ import_react7.default.createElement(StateInspectorDisclosureRowInner, { ref: eventsContainerRef }, connectionEvents?.map(
+      (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react7.default.createElement(StateInspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react7.default.createElement(
+        StateInspectorRow,
+        {
+          key: index,
+          colorScheme,
+          variant: event.type === "send" ? "up" : "down",
+          style: {
+            padding: "0px 12px 1px"
+          }
+        },
+        /* @__PURE__ */ import_react7.default.createElement(
+          import_react_inspector3.ObjectInspector,
+          {
+            data: event.type === "error" ? event.error : event.message,
+            theme,
+            nodeRenderer: ({ depth, name, data, isNonenumerable }) => {
+              const direction = event.type === "send" ? "up" : "down";
+              return depth === 0 ? /* @__PURE__ */ import_react7.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react7.default.createElement(
+                import_react_inspector3.ObjectLabel,
+                {
+                  direction,
+                  name,
+                  data,
+                  isNonenumerable
+                }
+              );
+            }
+          }
+        )
+      )
+    ), !connectionEvents && /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          fontSize: "12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        }
+      },
+      /* @__PURE__ */ import_react7.default.createElement("span", null, "No recorded events")
+    ))
   );
-  const [showEvents, setShowEvents] = useLocalStorageState(
-    "noya-multiplayer-react-show-events",
-    false
+}
+
+// src/inspector/sections/HistorySection.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_inspector4 = require("react-inspector");
+
+// src/inspector/StateInspectorButton.tsx
+var import_react8 = __toESM(require("react"));
+function StateInspectorButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled
+}) {
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      style: {
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        cursor: "pointer",
+        ...style
+      }
+    },
+    children
+  );
+}
+
+// src/inspector/utils.ts
+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`;
+  }
+}
+function uploadFile() {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const buffer = reader.result;
+          const blob = new Blob([buffer]);
+          resolve(blob);
+        };
+        reader.onerror = () => {
+          reject(new Error("Failed to read file"));
+        };
+        reader.readAsArrayBuffer(file);
+      }
+    };
+    input.click();
+  });
+}
+
+// src/inspector/sections/HistorySection.tsx
+var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+function HistorySection({
+  showHistory,
+  setShowHistory,
+  colorScheme,
+  historySnapshot,
+  multiplayerStateManager
+}) {
+  const ref = (0, import_react9.useRef)(null);
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
+  (0, import_react9.useEffect)(() => {
+    if (ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+  (0, import_react9.useEffect)(() => {
+    if (!ref.current) return;
+    const historyEntry = ref.current.querySelector(
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
+    );
+    if (historyEntry) {
+      historyEntry.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [historySnapshot.historyIndex]);
+  return /* @__PURE__ */ import_react9.default.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showHistory,
+      setOpen: setShowHistory,
+      title: "History",
+      colorScheme,
+      right: /* @__PURE__ */ import_react9.default.createElement(
+        "span",
+        {
+          style: {
+            display: "flex",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ import_react9.default.createElement(
+          StateInspectorButton,
+          {
+            disabled: !historySnapshot.canUndo,
+            theme,
+            onClick: () => {
+              multiplayerStateManager.undo();
+            }
+          },
+          /* @__PURE__ */ import_react9.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react9.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 20 20"
+            },
+            /* @__PURE__ */ import_react9.default.createElement(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+              }
+            )
+          ))
+        ),
+        /* @__PURE__ */ import_react9.default.createElement(
+          StateInspectorButton,
+          {
+            disabled: !historySnapshot.canRedo,
+            theme,
+            onClick: () => {
+              multiplayerStateManager.redo();
+            }
+          },
+          /* @__PURE__ */ import_react9.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react9.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 20 20"
+            },
+            /* @__PURE__ */ import_react9.default.createElement(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+              }
+            )
+          ))
+        )
+      )
+    },
+    /* @__PURE__ */ import_react9.default.createElement(StateInspectorDisclosureRowInner, { ref }, /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        id: `${HISTORY_ELEMENT_PREFIX}0`,
+        style: {
+          borderBottom: `1px solid ${solidBorderColor}`,
+          fontSize: "12px",
+          fontFamily: "Menlo, monospace",
+          padding: "2px 12px 1px",
+          display: "flex",
+          alignItems: "center",
+          background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
+        }
+      },
+      /* @__PURE__ */ import_react9.default.createElement(
+        "span",
+        {
+          style: {
+            fontFamily: "Menlo, monospace",
+            fontSize: "11px",
+            borderRadius: 4,
+            display: "inline-block"
+          }
+        },
+        "Initial state"
+      )
+    ), historySnapshot.history.map((entry, index) => {
+      const metadata = entry.metadata;
+      const { id, name, timestamp, ...rest } = metadata;
+      return /* @__PURE__ */ import_react9.default.createElement(
+        "div",
+        {
+          id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
+          key: index,
+          style: {
+            padding: "0px 12px 1px",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+          }
+        },
+        typeof name === "string" && /* @__PURE__ */ import_react9.default.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          entry.metadata.name,
+          Object.keys(rest).length > 0 && /* @__PURE__ */ import_react9.default.createElement(import_react_inspector4.ObjectInspector, { data: rest, theme })
+        ),
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react9.default.createElement(
+          "pre",
+          {
+            key: j,
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          patch.op === "add" && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react9.default.createElement(import_react_inspector4.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react9.default.createElement(import_react_inspector4.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
+        ))
+      );
+    }))
+  );
+}
+
+// src/inspector/serialization.ts
+var import_state_manager = require("@noya-app/state-manager");
+
+// src/inspector/zip/crc32.ts
+var CRC_TABLE = (() => {
+  const t = new Uint32Array(256);
+  for (let i = 0; i < 256; i++) {
+    let c = i;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    t[i] = c >>> 0;
+  }
+  return t;
+})();
+function crc32(u8) {
+  let c = 4294967295;
+  for (let i = 0; i < u8.length; i++)
+    c = CRC_TABLE[(c ^ u8[i]) & 255] ^ c >>> 8;
+  return (c ^ 4294967295) >>> 0;
+}
+
+// src/inspector/zip/struct.ts
+var defineSchema = (s) => s;
+var defineSchemas = (m) => m;
+function sizeofFieldSpec(f, ctx) {
+  if (f.type === "bytes")
+    return typeof f.length === "function" ? f.length(ctx) : f.length;
+  return f.type === "u8" ? 1 : f.type === "u16" ? 2 : 4;
+}
+function writeStruct(schema, values) {
+  let total = 0;
+  const ctx = { ...values };
+  for (const f of schema) total += sizeofFieldSpec(f, ctx);
+  const out = new Uint8Array(total);
+  const view = new DataView(out.buffer);
+  let o = 0;
+  const vals = values;
+  for (const f of schema) {
+    if (f.type === "bytes") {
+      const b = vals[f.name];
+      out.set(b, o);
+      o += b.length;
+      continue;
+    }
+    const n = Number(vals[f.name]) >>> 0;
+    if (f.type === "u8") {
+      view.setUint8(o, n);
+      o += 1;
+    } else if (f.type === "u16") {
+      view.setUint16(o, n, true);
+      o += 2;
+    } else {
+      view.setUint32(o, n, true);
+      o += 4;
+    }
+  }
+  return out;
+}
+function readStruct(view, offset, schema) {
+  const ctx = {};
+  let o = offset;
+  for (const f of schema) {
+    if (f.type === "bytes") {
+      const len = typeof f.length === "function" ? f.length(ctx) : f.length;
+      const u8 = new Uint8Array(view.buffer, view.byteOffset + o, len);
+      ctx[f.name] = new Uint8Array(u8);
+      o += len;
+    } else if (f.type === "u8") {
+      ctx[f.name] = view.getUint8(o);
+      o += 1;
+    } else if (f.type === "u16") {
+      ctx[f.name] = view.getUint16(o, true);
+      o += 2;
+    } else {
+      ctx[f.name] = view.getUint32(o, true);
+      o += 4;
+    }
+  }
+  return { value: ctx, offset: o };
+}
+
+// src/inspector/zip/TinyZip.ts
+var te = new TextEncoder();
+function utf8(s) {
+  return te.encode(s);
+}
+function dosDateTime(d = /* @__PURE__ */ new Date()) {
+  const time = d.getHours() << 11 | d.getMinutes() << 5 | Math.floor(d.getSeconds() / 2);
+  const date = d.getFullYear() - 1980 << 9 | d.getMonth() + 1 << 5 | d.getDate();
+  return { time, date };
+}
+var SIG = {
+  LocalFile: 67324752,
+  CentralFile: 33639248,
+  EOCD: 101010256
+};
+var SCHEMA = defineSchemas({
+  LocalFile: defineSchema([
+    { name: "signature", type: "u32" },
+    { name: "versionNeeded", type: "u16" },
+    { name: "flags", type: "u16" },
+    { name: "method", type: "u16" },
+    { name: "time", type: "u16" },
+    { name: "date", type: "u16" },
+    { name: "crc32", type: "u32" },
+    { name: "compSize", type: "u32" },
+    { name: "uncompSize", type: "u32" },
+    { name: "nameLen", type: "u16" },
+    { name: "extraLen", type: "u16" },
+    { name: "name", type: "bytes", length: (c) => c.nameLen },
+    { name: "extra", type: "bytes", length: (c) => c.extraLen }
+  ]),
+  CentralFile: defineSchema([
+    { name: "signature", type: "u32" },
+    { name: "versionMadeBy", type: "u16" },
+    { name: "versionNeeded", type: "u16" },
+    { name: "flags", type: "u16" },
+    { name: "method", type: "u16" },
+    { name: "time", type: "u16" },
+    { name: "date", type: "u16" },
+    { name: "crc32", type: "u32" },
+    { name: "compSize", type: "u32" },
+    { name: "uncompSize", type: "u32" },
+    { name: "nameLen", type: "u16" },
+    { name: "extraLen", type: "u16" },
+    { name: "commentLen", type: "u16" },
+    { name: "diskStart", type: "u16" },
+    { name: "intAttrs", type: "u16" },
+    { name: "extAttrs", type: "u32" },
+    { name: "localHeaderOffset", type: "u32" },
+    { name: "name", type: "bytes", length: (c) => c.nameLen },
+    { name: "extra", type: "bytes", length: (c) => c.extraLen },
+    { name: "comment", type: "bytes", length: (c) => c.commentLen }
+  ]),
+  EOCD: defineSchema([
+    { name: "signature", type: "u32" },
+    { name: "diskNum", type: "u16" },
+    { name: "cdStartDisk", type: "u16" },
+    { name: "cdRecordsOnDisk", type: "u16" },
+    { name: "cdRecordsTotal", type: "u16" },
+    { name: "cdSize", type: "u32" },
+    { name: "cdOffset", type: "u32" },
+    { name: "commentLen", type: "u16" },
+    { name: "comment", type: "bytes", length: (c) => c.commentLen }
+  ])
+});
+function ensureSig(v, expect, where) {
+  if (v !== expect)
+    throw new Error(`Invalid signature for ${where}: 0x${v.toString(16)}`);
+}
+var TinyZip = class _TinyZip {
+  _chunks = [];
+  _offset = 0;
+  _files = [];
+  _rootPrefix = "";
+  // e.g. "my-archive/" or ""
+  _rootDirAdded = false;
+  constructor(opts = {}) {
+    if (opts.root) {
+      const r = opts.root.replace(/^\/+|\/+$/g, "");
+      if (r) this._rootPrefix = r + "/";
+    }
+  }
+  _push(...arrs) {
+    for (const a of arrs) {
+      this._chunks.push(a);
+      this._offset += a.length;
+    }
+  }
+  _withRoot(name) {
+    return this._rootPrefix && !name.startsWith(this._rootPrefix) ? this._rootPrefix + name.replace(/^\/+/, "") : name;
+  }
+  _ensureRootDir(date = /* @__PURE__ */ new Date()) {
+    if (!this._rootPrefix || this._rootDirAdded) return;
+    this._rootDirAdded = true;
+    const dirName = this._rootPrefix;
+    const nameBytes = utf8(dirName);
+    const { time, date: dosDate } = dosDateTime(date);
+    const localHeader = writeStruct(SCHEMA.LocalFile, {
+      signature: SIG.LocalFile,
+      versionNeeded: 20,
+      flags: 2048,
+      method: 0,
+      time,
+      date: dosDate,
+      crc32: 0,
+      compSize: 0,
+      uncompSize: 0,
+      nameLen: nameBytes.length,
+      extraLen: 0,
+      name: nameBytes,
+      extra: new Uint8Array(0)
+    });
+    const localHeaderOffset = this._offset;
+    this._push(localHeader);
+    this._files.push({
+      nameBytes,
+      crc: 0,
+      compSize: 0,
+      uncompSize: 0,
+      method: 0,
+      time,
+      dosDate,
+      localHeaderOffset,
+      externalAttrs: 16
+    });
+  }
+  /** Add a file to the zip. "name" uses forward slashes for paths (e.g., "dir/file.txt"). */
+  addFile(name, data, opts = {}) {
+    const { date = /* @__PURE__ */ new Date() } = opts;
+    this._ensureRootDir(date);
+    const u8 = toU8(data);
+    const fullName = this._withRoot(name);
+    const nameBytes = utf8(fullName);
+    const { time, date: dosDate } = dosDateTime(date);
+    const crc = crc32(u8);
+    const compSize = u8.length >>> 0;
+    const uncompSize = u8.length >>> 0;
+    const localHeaderOffset = this._offset;
+    const localHeader = writeStruct(SCHEMA.LocalFile, {
+      signature: SIG.LocalFile,
+      versionNeeded: 20,
+      flags: 2048,
+      method: 0,
+      time,
+      date: dosDate,
+      crc32: crc,
+      compSize,
+      uncompSize,
+      nameLen: nameBytes.length,
+      extraLen: 0,
+      name: nameBytes,
+      extra: new Uint8Array(0)
+    });
+    this._push(localHeader, u8);
+    this._files.push({
+      nameBytes,
+      crc,
+      compSize,
+      uncompSize,
+      method: 0,
+      time,
+      dosDate,
+      localHeaderOffset,
+      externalAttrs: 0
+    });
+  }
+  // Create an explicit directory entry (name should end with "/").
+  addDirectory(name, opts = {}) {
+    const { date = /* @__PURE__ */ new Date() } = opts;
+    this._ensureRootDir(date);
+    const dirNameRaw = name.endsWith("/") ? name : name + "/";
+    const fullName = this._withRoot(dirNameRaw);
+    const nameBytes = utf8(fullName);
+    const { time, date: dosDate } = dosDateTime(date);
+    const localHeader = writeStruct(SCHEMA.LocalFile, {
+      signature: SIG.LocalFile,
+      versionNeeded: 20,
+      flags: 2048,
+      method: 0,
+      time,
+      date: dosDate,
+      crc32: 0,
+      compSize: 0,
+      uncompSize: 0,
+      nameLen: nameBytes.length,
+      extraLen: 0,
+      name: nameBytes,
+      extra: new Uint8Array(0)
+    });
+    const localHeaderOffset = this._offset;
+    this._push(localHeader);
+    this._files.push({
+      nameBytes,
+      crc: 0,
+      compSize: 0,
+      uncompSize: 0,
+      method: 0,
+      time,
+      dosDate,
+      localHeaderOffset,
+      externalAttrs: 16
+    });
+  }
+  finish() {
+    const cdStart = this._offset;
+    for (const f of this._files) {
+      const central = writeStruct(SCHEMA.CentralFile, {
+        signature: SIG.CentralFile,
+        versionMadeBy: 20,
+        versionNeeded: 20,
+        flags: 2048,
+        method: f.method,
+        time: f.time,
+        date: f.dosDate,
+        crc32: f.crc,
+        compSize: f.compSize,
+        uncompSize: f.uncompSize,
+        nameLen: f.nameBytes.length,
+        extraLen: 0,
+        commentLen: 0,
+        diskStart: 0,
+        intAttrs: 0,
+        extAttrs: f.externalAttrs,
+        localHeaderOffset: f.localHeaderOffset,
+        name: f.nameBytes,
+        extra: new Uint8Array(0),
+        comment: new Uint8Array(0)
+      });
+      this._push(central);
+    }
+    const cdSize = this._offset - cdStart;
+    const eocd = writeStruct(SCHEMA.EOCD, {
+      signature: SIG.EOCD,
+      diskNum: 0,
+      cdStartDisk: 0,
+      cdRecordsOnDisk: this._files.length,
+      cdRecordsTotal: this._files.length,
+      cdSize,
+      cdOffset: cdStart,
+      commentLen: 0,
+      comment: new Uint8Array(0)
+    });
+    this._push(eocd);
+    const merged = new Uint8Array(this._offset);
+    let offset = 0;
+    for (const chunk of this._chunks) {
+      merged.set(chunk, offset);
+      offset += chunk.length;
+    }
+    return merged;
+  }
+  static create(files, opts = {}) {
+    const zip = new _TinyZip(opts);
+    for (const [name, data] of Object.entries(files)) {
+      if (name.endsWith("/")) zip.addDirectory(name);
+      else zip.addFile(name, data);
+    }
+    return zip.finish();
+  }
+  static parse(input) {
+    const u8 = toU8(input);
+    const view = new DataView(u8.buffer, u8.byteOffset, u8.byteLength);
+    const eocdOff = findEOCDOffset(u8);
+    const { value: eocd } = readStruct(view, eocdOff, SCHEMA.EOCD);
+    ensureSig(eocd.signature, SIG.EOCD, "EOCD");
+    if (eocd.commentLen !== 0) throw new Error("Unsupported: EOCD comment");
+    if (eocd.diskNum !== 0 || eocd.cdStartDisk !== 0)
+      throw new Error("Unsupported: multi-disk");
+    const entries = [];
+    let cdPtr = eocd.cdOffset;
+    for (let i = 0; i < eocd.cdRecordsTotal; i++) {
+      const { value: cdf, offset: next } = readStruct(
+        view,
+        cdPtr,
+        SCHEMA.CentralFile
+      );
+      ensureSig(cdf.signature, SIG.CentralFile, "Central Directory");
+      const name = new TextDecoder().decode(cdf.name);
+      const isDir = (cdf.extAttrs & 16) !== 0 || name.endsWith("/");
+      if (cdf.extraLen !== 0 || cdf.commentLen !== 0)
+        throw new Error("Unsupported: extra/comment in central dir");
+      entries.push({
+        name,
+        isDirectory: isDir,
+        crc32: cdf.crc32 >>> 0,
+        size: cdf.uncompSize >>> 0,
+        compSize: cdf.compSize >>> 0,
+        time: cdf.time >>> 0,
+        dosDate: cdf.date >>> 0,
+        localHeaderOffset: cdf.localHeaderOffset >>> 0
+      });
+      cdPtr = next;
+    }
+    const results = [];
+    for (const e of entries) {
+      const { value: lfh, offset: afterHeader } = readStruct(
+        view,
+        e.localHeaderOffset,
+        SCHEMA.LocalFile
+      );
+      ensureSig(lfh.signature, SIG.LocalFile, "Local File");
+      if (lfh.flags !== 2048)
+        throw new Error("Unsupported: flags (expect UTF-8 only)");
+      if (lfh.method !== 0)
+        throw new Error("Unsupported: compression (expect store only)");
+      if (lfh.extraLen !== 0)
+        throw new Error("Unsupported: extra fields in local header");
+      const dataStart = afterHeader;
+      const dataEnd = dataStart + lfh.compSize;
+      const data = e.isDirectory ? new Uint8Array(0) : new Uint8Array(u8.subarray(dataStart, dataEnd));
+      results.push({ ...e, data });
+    }
+    return results;
+  }
+  // Quick utility: return a map of file data (directories omitted)
+  static extract(input) {
+    const entries = this.parse(input);
+    const out = {};
+    for (const e of entries) if (!e.isDirectory) out[e.name] = e.data;
+    return out;
+  }
+};
+function toU8(input) {
+  if (typeof input === "string") return utf8(input);
+  if (input instanceof Uint8Array) return input;
+  return new Uint8Array(input);
+}
+function findEOCDOffset(u8) {
+  const view = new DataView(u8.buffer, u8.byteOffset, u8.byteLength);
+  const minSize = 22;
+  if (u8.length >= minSize) {
+    const at = u8.length - minSize;
+    if (view.getUint32(at, true) === SIG.EOCD) return at;
+  }
+  const start = Math.max(0, u8.length - 1024);
+  for (let i = u8.length - 4; i >= start; i--) {
+    if (view.getUint32(i, true) === SIG.EOCD) return i;
+  }
+  throw new Error("EOCD not found");
+}
+
+// src/inspector/serialization.ts
+async function fetchAssetMap(assets) {
+  const res = await Promise.all(
+    assets.map(async (asset) => {
+      const url = asset.url;
+      const response = await fetch(url);
+      const data = await response.arrayBuffer();
+      return [asset.id, data];
+    })
+  );
+  return Object.fromEntries(res);
+}
+async function exportAll(noyaManager) {
+  const { multiplayerStateManager, assetManager } = noyaManager;
+  const assetMap = await fetchAssetMap(assetManager.assets$.get());
+  return encodeAll({
+    state: multiplayerStateManager.optimisticState$.get(),
+    schema: multiplayerStateManager.schema,
+    assets: assetManager.assets$.get(),
+    assetMap
+  });
+}
+function encodeAll({
+  state,
+  schema,
+  assets,
+  assetMap
+}) {
+  const zip = new TinyZip();
+  zip.addFile("state.json", JSON.stringify(state, null, 2));
+  if (schema) {
+    const encodedSchema = encodeSchema(schema);
+    zip.addFile("schema.json", JSON.stringify(encodedSchema, null, 2));
+  }
+  if (assets.length) {
+    zip.addFile("assets.json", JSON.stringify(assets, null, 2));
+  }
+  for (const [id, data] of Object.entries(assetMap)) {
+    zip.addFile(`assets/${id}`, data);
+  }
+  return zip.finish();
+}
+async function importAll(buffer, noyaManager, {
+  shouldAllowSchemaChange
+} = {}) {
+  let { state, schema, assets, assetMap } = await decodeAll(buffer);
+  if (shouldAllowSchemaChange && noyaManager.options.schema && schema) {
+    const oldSchemaHash = (0, import_state_manager.createHash)(noyaManager.options.schema);
+    const newSchemaHash = (0, import_state_manager.createHash)(schema);
+    if (oldSchemaHash !== newSchemaHash) {
+      const shouldAllow = shouldAllowSchemaChange({
+        oldSchema: noyaManager.options.schema,
+        newSchema: schema
+      });
+      if (!shouldAllow) {
+        throw new Error("Schema change not allowed");
+      }
+    }
+  }
+  if (assets.length) {
+    await Promise.all(
+      noyaManager.assetManager.assets$.get().map((asset) => noyaManager.assetManager.delete(asset.id))
+    );
+    const idPairs = await Promise.all(
+      assets.map(async (asset) => {
+        const newAsset = await noyaManager.assetManager.create({
+          data: assetMap[asset.id],
+          contentType: asset.contentType
+        });
+        return [asset.id, newAsset.id];
+      })
+    );
+    const replacementMap = Object.fromEntries(idPairs);
+    state = replaceDeep(state, replacementMap);
+  }
+  noyaManager.initialState = state;
+  noyaManager.forceInit();
+}
+function decodeAll(buffer) {
+  const zip = TinyZip.extract(buffer);
+  const stateFile = zip["state.json"];
+  const schemaFile = zip["schema.json"];
+  const assetsFile = zip["assets.json"];
+  if (!stateFile) {
+    throw new Error("State file not found");
+  }
+  const state = JSON.parse(new TextDecoder().decode(stateFile));
+  let schema;
+  if (schemaFile) {
+    const encodedSchema = JSON.parse(new TextDecoder().decode(schemaFile));
+    schema = decodeSchema(encodedSchema);
+  }
+  let assets = [];
+  let assetMap = {};
+  if (assetsFile) {
+    assets = JSON.parse(new TextDecoder().decode(assetsFile));
+    for (const asset of assets) {
+      const data = zip[`assets/${asset.id}`];
+      if (!data) {
+        throw new Error(`Asset ${asset.id} not found`);
+      }
+      assetMap[asset.id] = data;
+    }
+  }
+  return { state, schema, assets, assetMap };
+}
+function replaceDeep(obj, replacementMap) {
+  switch (typeof obj) {
+    case "object":
+      if (obj === null) {
+        return obj;
+      }
+      if (Array.isArray(obj)) {
+        return obj.map((item) => replaceDeep(item, replacementMap));
+      }
+      return Object.fromEntries(
+        Object.entries(obj).map(([key, value]) => [
+          key,
+          replaceDeep(value, replacementMap)
+        ])
+      );
+    case "string":
+      return replacementMap[obj] ?? obj;
+    default:
+      return obj;
+  }
+}
+
+// src/inspector/StateInspectorToggleButton.tsx
+var import_react10 = __toESM(require("react"));
+function StateInspectorToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+  anchor
+}) {
+  const isRightAnchor = anchor === "right";
+  const rightIcon = /* @__PURE__ */ import_react10.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_react10.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"
+      }
+    )
+  );
+  const leftIcon = /* @__PURE__ */ import_react10.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_react10.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"
+      }
+    )
+  );
+  return /* @__PURE__ */ import_react10.default.createElement(
+    "span",
+    {
+      role: "button",
+      style: {
+        flex: "0",
+        appearance: "none",
+        color: theme.BASE_COLOR,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0"
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        setShowInspector(!showInspector);
+      }
+    },
+    showInspector ? "Hide Inspector" : /* @__PURE__ */ import_react10.default.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
+  );
+}
+
+// src/inspector/useLocalStorageState.tsx
+var import_react11 = __toESM(require("react"));
+var localStorage = typeof window !== "undefined" ? window.localStorage : null;
+function useLocalStorageState(key, defaultValue) {
+  const [state, setState] = import_react11.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 StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector2({
+  noyaManager,
+  colorScheme = "light",
+  anchor = "right",
+  unstyled = false,
+  ...props
+}) {
+  const {
+    multiplayerStateManager,
+    assetManager,
+    connectedUsersManager,
+    secretManager,
+    ephemeralUserDataManager,
+    connectionEventManager,
+    taskManager,
+    ioManager
+  } = noyaManager;
+  const [didMount, setDidMount] = import_react12.default.useState(false);
+  const tasks = useObservable(taskManager.tasks$);
+  const inputs = useObservable(ioManager.inputs$);
+  const outputTransforms = useObservable(ioManager.outputTransforms$);
+  (0, import_react12.useLayoutEffect)(() => {
+    setDidMount(true);
+  }, []);
+  const eventsContainerRef = import_react12.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",
@@ -4345,7 +5399,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     false
   );
   const connectionEvents = useObservable(connectionEventManager.events$);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
@@ -4366,25 +5420,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
   const outputTransformsInitialized = useObservable(
     ioManager.outputTransformsInitialized$
   );
-  (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_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
-    );
-    if (historyEntry) {
-      historyEntry.scrollIntoView({
-        block: "nearest",
-        inline: "nearest"
-      });
-    }
-  }, [historySnapshot.historyIndex]);
-  const theme = colorScheme === "light" ? lightTheme : darkTheme;
-  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
   const baseStyle = {
     position: "fixed",
     top: 12,
@@ -4404,9 +5441,24 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     zIndex: 9999,
     lineHeight: "13px"
   };
+  const handleExportAll = (0, import_react12.useCallback)(async () => {
+    const buffer = await exportAll(noyaManager);
+    (0, import_react_utils.downloadBlob)(new Blob([buffer]), "state.zip");
+  }, [noyaManager]);
+  const handleImportAll = (0, import_react12.useCallback)(async () => {
+    const file = await uploadFile();
+    const buffer = await file.arrayBuffer();
+    importAll(buffer, noyaManager, {
+      shouldAllowSchemaChange: () => {
+        return confirm(
+          `The imported state uses a different schema than the schema this app expects. Do you want to continue?`
+        );
+      }
+    });
+  }, [noyaManager]);
   if (!didMount) return null;
   if (!showInspector) {
-    return /* @__PURE__ */ import_react3.default.createElement(
+    return /* @__PURE__ */ import_react12.default.createElement(
       "div",
       {
         ...props,
@@ -4418,8 +5470,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react3.default.createElement(
-        ToggleButton,
+      /* @__PURE__ */ import_react12.default.createElement(
+        StateInspectorToggleButton,
         {
           showInspector,
           setShowInspector,
@@ -4429,7 +5481,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
       )
     );
   }
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "div",
     {
       ...props,
@@ -4438,8 +5490,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
         isFirst: true,
         open: showUsers,
@@ -4450,8 +5502,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ import_react3.default.createElement(
-          ToggleButton,
+        right: /* @__PURE__ */ import_react12.default.createElement(
+          StateInspectorToggleButton,
           {
             showInspector,
             setShowInspector,
@@ -4460,14 +5512,14 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           }
         )
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react3.default.createElement(
-        InspectorRow,
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react12.default.createElement(
+        StateInspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ import_react3.default.createElement(
+        user.image && /* @__PURE__ */ import_react12.default.createElement(
           "img",
           {
             src: user.image,
@@ -4488,7 +5540,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ import_react3.default.createElement(
+      )), !connectedUsers && /* @__PURE__ */ import_react12.default.createElement(
         "div",
         {
           style: {
@@ -4499,13 +5551,13 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react12.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ import_react3.default.createElement(TitleLabel, null, "Data", /* @__PURE__ */ import_react3.default.createElement(
+        title: /* @__PURE__ */ import_react12.default.createElement(TitleLabel, null, "Data", /* @__PURE__ */ import_react12.default.createElement(
           ColoredDot,
           {
             type: multipeerStateInitialized ? "success" : "error"
@@ -4514,16 +5566,18 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react3.default.createElement(
+        right: /* @__PURE__ */ import_react12.default.createElement(
           "span",
           {
             style: {
               display: "flex",
-              gap: "4px"
+              gap: "12px"
             }
           },
-          /* @__PURE__ */ import_react3.default.createElement(
-            SmallButton,
+          /* @__PURE__ */ import_react12.default.createElement(StateInspectorButton, { theme, onClick: handleImportAll }, "Import"),
+          /* @__PURE__ */ import_react12.default.createElement(StateInspectorButton, { theme, onClick: handleExportAll }, "Export"),
+          /* @__PURE__ */ import_react12.default.createElement(
+            StateInspectorButton,
             {
               theme,
               onClick: () => {
@@ -4534,15 +5588,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           )
         )
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react3.default.createElement(
-        import_react_inspector.ObjectInspector,
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react12.default.createElement(
+        import_react_inspector5.ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react3.default.createElement(
-        import_react_inspector.ObjectInspector,
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react12.default.createElement(
+        import_react_inspector5.ObjectInspector,
         {
           name: "schema",
           data: multiplayerStateManager.schema,
@@ -4550,151 +5604,25 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         }
       )))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      HistorySection,
       {
-        open: showHistory,
-        setOpen: setShowHistory,
-        title: "History",
+        showHistory,
+        setShowHistory,
         colorScheme,
-        right: /* @__PURE__ */ import_react3.default.createElement(
-          "span",
-          {
-            style: {
-              display: "flex",
-              gap: "4px"
-            }
-          },
-          /* @__PURE__ */ import_react3.default.createElement(
-            SmallButton,
-            {
-              disabled: !historySnapshot.canUndo,
-              theme,
-              onClick: () => {
-                multiplayerStateManager.undo();
-              }
-            },
-            /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react3.default.createElement(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "1em",
-                height: "1em",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ import_react3.default.createElement(
-                "path",
-                {
-                  fill: "currentColor",
-                  d: "M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
-                }
-              )
-            ))
-          ),
-          /* @__PURE__ */ import_react3.default.createElement(
-            SmallButton,
-            {
-              disabled: !historySnapshot.canRedo,
-              theme,
-              onClick: () => {
-                multiplayerStateManager.redo();
-              }
-            },
-            /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react3.default.createElement(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "1em",
-                height: "1em",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ import_react3.default.createElement(
-                "path",
-                {
-                  fill: "currentColor",
-                  d: "M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
-                }
-              )
-            ))
-          )
-        )
-      },
-      /* @__PURE__ */ import_react3.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react3.default.createElement(
-        "div",
-        {
-          id: `${HISTORY_ELEMENT_PREFIX}0`,
-          style: {
-            borderBottom: `1px solid ${solidBorderColor}`,
-            fontSize: "12px",
-            fontFamily: "Menlo, monospace",
-            padding: "2px 12px 1px",
-            display: "flex",
-            alignItems: "center",
-            background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
-          }
-        },
-        /* @__PURE__ */ import_react3.default.createElement(
-          "span",
-          {
-            style: {
-              fontFamily: "Menlo, monospace",
-              fontSize: "11px",
-              borderRadius: 4,
-              display: "inline-block"
-            }
-          },
-          "Initial state"
-        )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react3.default.createElement(
-        "div",
-        {
-          id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
-          key: index,
-          style: {
-            padding: "0px 12px 1px",
-            borderBottom: `1px solid ${solidBorderColor}`,
-            background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
-          }
-        },
-        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react3.default.createElement(
-          "pre",
-          {
-            style: {
-              fontSize: "11px",
-              display: "flex",
-              flexWrap: "wrap",
-              margin: 0
-            }
-          },
-          entry.metadata.name
-        ),
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react3.default.createElement(
-          "pre",
-          {
-            key: j,
-            style: {
-              fontSize: "11px",
-              display: "flex",
-              flexWrap: "wrap",
-              margin: 0
-            }
-          },
-          patch.op === "add" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-          patch.op === "replace" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-          patch.op === "remove" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
-          patch.op === "move" && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
-        ))
-      )))
+        historySnapshot,
+        multiplayerStateManager
+      }
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showAssets,
         setOpen: setShowAssets,
-        title: /* @__PURE__ */ import_react3.default.createElement(TitleLabel, null, "Assets", /* @__PURE__ */ import_react3.default.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react12.default.createElement(TitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ import_react12.default.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
         colorScheme,
-        right: /* @__PURE__ */ import_react3.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react3.default.createElement(
-          SmallButton,
+        right: /* @__PURE__ */ import_react12.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react12.default.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4706,8 +5634,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             }
           },
           "Reload"
-        ), /* @__PURE__ */ import_react3.default.createElement(
-          SmallButton,
+        ), /* @__PURE__ */ import_react12.default.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4730,8 +5658,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           "Upload"
         ))
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ import_react3.default.createElement(
-        SmallButton,
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react12.default.createElement(import_react_inspector5.ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ import_react12.default.createElement(
+        StateInspectorButton,
         {
           theme,
           onClick: () => assetManager.delete(asset.id)
@@ -4739,15 +5667,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         "Delete"
       ))))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ import_react3.default.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ import_react3.default.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react12.default.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ import_react12.default.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
         colorScheme,
         open: showSecrets,
         setOpen: setShowSecrets,
-        right: /* @__PURE__ */ import_react3.default.createElement(
-          SmallButton,
+        right: /* @__PURE__ */ import_react12.default.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4761,8 +5689,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
           "Create"
         )
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react3.default.createElement(
-        SmallButton,
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react12.default.createElement(import_react_inspector5.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react12.default.createElement(
+        StateInspectorButton,
         {
           theme,
           onClick: () => secretManager.deleteSecret(secret.id)
@@ -4771,15 +5699,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
       ))))
     ),
     " ",
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showInputs,
         setOpen: setShowInputs,
-        title: /* @__PURE__ */ import_react3.default.createElement(TitleLabel, null, "Inputs", /* @__PURE__ */ import_react3.default.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ import_react12.default.createElement(TitleLabel, null, "Inputs", /* @__PURE__ */ import_react12.default.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
         colorScheme
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, inputs?.map((input) => /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ import_react12.default.createElement(import_react_inspector5.ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ import_react12.default.createElement(
         "div",
         {
           style: {
@@ -4790,15 +5718,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No inputs")
+        /* @__PURE__ */ import_react12.default.createElement("span", null, "No inputs")
       ))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showOutputTransforms,
         setOpen: setShowOutputTransforms,
-        title: /* @__PURE__ */ import_react3.default.createElement(TitleLabel, null, "Output Transforms", /* @__PURE__ */ import_react3.default.createElement(
+        title: /* @__PURE__ */ import_react12.default.createElement(TitleLabel, null, "Output Transforms", /* @__PURE__ */ import_react12.default.createElement(
           ColoredDot,
           {
             type: outputTransformsInitialized ? "success" : "error"
@@ -4806,7 +5734,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         )),
         colorScheme
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, outputTransforms?.map((transform) => /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ import_react12.default.createElement(import_react_inspector5.ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ import_react12.default.createElement(
         "div",
         {
           style: {
@@ -4817,19 +5745,19 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No output transforms")
+        /* @__PURE__ */ import_react12.default.createElement("span", null, "No output transforms")
       ))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
         title: "Tasks",
         colorScheme,
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react3.default.createElement(
-        InspectorRow,
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ import_react12.default.createElement(
+        StateInspectorRow,
         {
           key: task.id,
           colorScheme,
@@ -4837,8 +5765,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement(
-          import_react_inspector.ObjectInspector,
+        /* @__PURE__ */ import_react12.default.createElement(
+          import_react_inspector5.ObjectInspector,
           {
             name: task.name,
             data: task.payload,
@@ -4847,16 +5775,16 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         )
       )))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showEphemeral,
         setOpen: setShowEphemeral,
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react3.default.createElement(
-        import_react_inspector.ObjectInspector,
+      /* @__PURE__ */ import_react12.default.createElement(StateInspectorDisclosureRowInner, null, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react12.default.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react12.default.createElement(
+        import_react_inspector5.ObjectInspector,
         {
           name: key,
           data: value,
@@ -4865,187 +5793,20 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         }
       ))))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react12.default.createElement(
+      EventsSection,
       {
-        open: showEvents,
-        setOpen: setShowEvents,
-        title: "Events",
-        colorScheme
-      },
-      /* @__PURE__ */ import_react3.default.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
-        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react3.default.createElement(
-          InspectorRow,
-          {
-            key: index,
-            colorScheme,
-            variant: event.type === "send" ? "up" : "down",
-            style: {
-              padding: "0px 12px 1px"
-            }
-          },
-          /* @__PURE__ */ import_react3.default.createElement(
-            import_react_inspector.ObjectInspector,
-            {
-              data: event.type === "error" ? event.error : event.message,
-              theme,
-              nodeRenderer: ({
-                depth,
-                name,
-                data,
-                isNonenumerable
-              }) => {
-                const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ import_react3.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react3.default.createElement(
-                  import_react_inspector.ObjectLabel,
-                  {
-                    direction,
-                    name,
-                    data,
-                    isNonenumerable
-                  }
-                );
-              }
-            }
-          )
-        )
-      ), !connectionEvents && /* @__PURE__ */ import_react3.default.createElement(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            fontSize: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px"
-          }
-        },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No recorded events")
-      ))
+        connectionEvents,
+        colorScheme,
+        eventsContainerRef,
+        showEvents,
+        setShowEvents
+      }
     )
   );
 });
-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)",
-        fontFamily: "Menlo, monospace",
-        ...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`;
-  }
-}
-function SmallButton({
-  children,
-  onClick,
-  style,
-  theme,
-  disabled
-}) {
-  return /* @__PURE__ */ import_react3.default.createElement(
-    "button",
-    {
-      type: "button",
-      disabled,
-      onClick: (event) => {
-        event.stopPropagation();
-        onClick();
-      },
-      style: {
-        flex: "0",
-        appearance: "none",
-        background: "none",
-        color: theme.BASE_COLOR,
-        opacity: disabled ? 0.25 : 1,
-        border: "none",
-        fontSize: "12px",
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "0",
-        cursor: "pointer",
-        ...style
-      }
-    },
-    children
-  );
-}
-function ColoredDot({ type }) {
-  return /* @__PURE__ */ import_react3.default.createElement(
-    "span",
-    {
-      style: {
-        display: "inline-block",
-        width: 6,
-        height: 6,
-        background: type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
-        borderRadius: "50%",
-        verticalAlign: "middle"
-      }
-    }
-  );
-}
 function TitleLabel({ children }) {
-  return /* @__PURE__ */ import_react3.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
+  return /* @__PURE__ */ import_react12.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
 }
 
 // src/inspector/useStateInspector.tsx
@@ -5063,7 +5824,7 @@ function useStateInspector({
   colorScheme,
   anchor
 }) {
-  const [root, setRoot] = import_react4.default.useState(null);
+  const [root, setRoot] = import_react13.default.useState(null);
   (0, import_react_utils2.useIsomorphicLayoutEffect)(() => {
     if (disabled) return;
     const { host, container } = createShadowRootElement();
@@ -5077,7 +5838,7 @@ function useStateInspector({
   (0, import_react_utils2.useIsomorphicLayoutEffect)(() => {
     if (!root) return;
     root.render(
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react13.default.createElement(
         StateInspector,
         {
           colorScheme,
@@ -5091,22 +5852,22 @@ function useStateInspector({
 
 // src/hooks.ts
 function useSyncStateManager(stateManager, path) {
-  const getSnapshot = (0, import_react5.useCallback)(
+  const getSnapshot = (0, import_react14.useCallback)(
     () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
     [stateManager, path]
   );
-  return (0, import_react5.useSyncExternalStore)(
+  return (0, import_react14.useSyncExternalStore)(
     stateManager.addListener,
     getSnapshot,
     getSnapshot
   );
 }
 function useManagedState(createInitialState, options) {
-  const [stateManager] = (0, import_react5.useState)(
-    () => new import_state_manager.StateManager(createInitialState(), options)
+  const [stateManager] = (0, import_react14.useState)(
+    () => new import_state_manager2.StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = (0, import_react5.useCallback)(
+  const setState = (0, import_react14.useCallback)(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -5142,7 +5903,7 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react5.useSyncExternalStore)(
+  return (0, import_react14.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
@@ -5150,18 +5911,18 @@ function useManagedHistory(stateManager) {
 }
 function useMultiplayerState(initialState, options) {
   const {
-    sync = (0, import_state_manager.stubSync)(),
+    sync = (0, import_state_manager2.stubSync)(),
     inspector,
     ...rest
   } = options ?? {};
-  const [noyaManager] = (0, import_react5.useState)(
-    () => new import_state_manager.NoyaManager(initialState, rest)
+  const [noyaManager] = (0, import_react14.useState)(
+    () => new import_state_manager2.NoyaManager(initialState, rest)
   );
   const state = useObservable(
     noyaManager.multiplayerStateManager.optimisticState$
   );
   const assets = useObservable(noyaManager.assetManager.assets$);
-  const extras = (0, import_react5.useMemo)(() => {
+  const extras = (0, import_react14.useMemo)(() => {
     return {
       noyaManager,
       taskManager: noyaManager.taskManager,
@@ -5180,8 +5941,8 @@ function useMultiplayerState(initialState, options) {
       assets
     };
   }, [noyaManager, assets]);
-  const syncRef = (0, import_react5.useRef)(sync);
-  (0, import_react5.useEffect)(() => {
+  const syncRef = (0, import_react14.useRef)(sync);
+  (0, import_react14.useEffect)(() => {
     if (syncRef.current) {
       return syncRef.current({ noyaManager });
     }
@@ -5196,13 +5957,13 @@ function useMultiplayerState(initialState, options) {
 }
 function useErrorOverlay(noyaManager) {
   const unrecoverableError = useObservable(noyaManager.unrecoverableError);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react14.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_react5.createElement)(ErrorOverlay, { error: unrecoverableError }));
+    root.render((0, import_react14.createElement)(ErrorOverlay, { error: unrecoverableError }));
     return () => {
       root.unmount();
       el.remove();
@@ -5220,7 +5981,7 @@ function createDefaultAppData(initialState) {
   };
 }
 function enforceSchema(initialState, schema) {
-  return schema ? (0, import_state_manager2.createOrCastValue)({
+  return schema ? (0, import_state_manager3.createOrCastValue)({
     schema,
     value: initialState,
     defs: findAllDefs(schema)
@@ -5250,7 +6011,7 @@ function getAppData(initialState, schema, options) {
   return appData;
 }
 function useNoyaState(...args) {
-  const [initialState, options] = typeof args[0] === "object" && args[0] !== null && "schema" in args[0] && import_state_manager2.TypeGuard.IsSchema(args[0].schema) ? [null, args[0]] : [args[0], args[1]];
+  const [initialState, options] = typeof args[0] === "object" && args[0] !== null && "schema" in args[0] && import_state_manager3.TypeGuard.IsSchema(args[0].schema) ? [null, args[0]] : [args[0], args[1]];
   const [
     {
       multiplayerUrl,
@@ -5259,16 +6020,16 @@ function useNoyaState(...args) {
       theme,
       viewType
     }
-  ] = (0, import_react6.useState)(() => {
+  ] = (0, import_react15.useState)(() => {
     return getAppData(initialState, options?.schema, {
       overrideExistingState: options?.overrideExistingState
     });
   });
-  const sync = (0, import_react6.useMemo)(() => {
-    return (0, import_state_manager2.isEmbeddedApp)() ? (0, import_state_manager2.parentFrameSync)({ debug: options?.debug }) : multiplayerUrl ? (0, import_state_manager2.webSocketSync)({
+  const sync = (0, import_react15.useMemo)(() => {
+    return (0, import_state_manager3.isEmbeddedApp)() ? (0, import_state_manager3.parentFrameSync)({ debug: options?.debug }) : multiplayerUrl ? (0, import_state_manager3.webSocketSync)({
       url: multiplayerUrl,
       debug: options?.debug
-    }) : options?.offlineStorageKey ? (0, import_state_manager2.localStorageSync)({ key: options.offlineStorageKey }) : (0, import_state_manager2.stubSync)();
+    }) : options?.offlineStorageKey ? (0, import_state_manager3.localStorageSync)({ key: options.offlineStorageKey }) : (0, import_state_manager3.stubSync)();
   }, [multiplayerUrl, options?.offlineStorageKey, options?.debug]);
   const result = useMultiplayerState(noyaAppInitialState, {
     ...options,
@@ -5276,16 +6037,16 @@ function useNoyaState(...args) {
     sync: options?.sync ?? sync
   });
   const [, , extras] = result;
-  const mergedExtras = (0, import_react6.useMemo)(() => {
+  const mergedExtras = (0, import_react15.useMemo)(() => {
     return { ...extras, theme, viewType };
   }, [extras, theme, viewType]);
   return [result[0], result[1], mergedExtras];
 }
 
 // src/NoyaStateContext.tsx
-var AnyNoyaStateContext = (0, import_react7.createContext)(void 0);
+var AnyNoyaStateContext = (0, import_react16.createContext)(void 0);
 function useAnyNoyaStateContext() {
-  const value = (0, import_react7.useContext)(AnyNoyaStateContext);
+  const value = (0, import_react16.useContext)(AnyNoyaStateContext);
   if (!value) {
     throw new Error(
       "useNoyaStateContext must be used within a NoyaStateProvider"
@@ -5311,7 +6072,7 @@ function useAssets() {
 }
 function useAsset(id) {
   const { noyaManager } = useAnyNoyaStateContext();
-  const observable = (0, import_react7.useMemo)(
+  const observable = (0, import_react16.useMemo)(
     () => noyaManager.assetManager.assets$.map(
       (assets) => assets.find((a) => a.id === id)
     ),
@@ -5322,7 +6083,7 @@ function useAsset(id) {
 function useAssetManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   const isInitialized = useObservable(noyaManager.assetManager.isInitialized$);
-  return (0, import_react7.useMemo)(
+  return (0, import_react16.useMemo)(
     () => ({
       create: noyaManager.assetManager.create,
       delete: noyaManager.assetManager.delete,
@@ -5347,7 +6108,7 @@ function useSecret(name) {
   const { noyaManager } = useAnyNoyaStateContext();
   return useObservable(
     noyaManager.secretManager.secrets$,
-    (0, import_react7.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
+    (0, import_react16.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 function useInputs() {
@@ -5365,7 +6126,7 @@ function useIOManager() {
 function usePublish(callback) {
   const { noyaManager } = useAnyNoyaStateContext();
   const stableCallback = (0, import_react_utils3.useStableCallback)(callback);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     noyaManager.publishingManager.setPublishingEnabled(true);
     noyaManager.publishingManager.getFilesToPublish = stableCallback;
     return () => {
@@ -5376,7 +6137,7 @@ function usePublish(callback) {
 }
 function useIsInitialized() {
   const { noyaManager, viewType } = useAnyNoyaStateContext();
-  const isInitializedObservable = (0, import_react7.useMemo)(
+  const isInitializedObservable = (0, import_react16.useMemo)(
     () => import_observable.Observable.combine(
       [
         ...viewType === "preview" ? [] : [noyaManager.multiplayerStateManager.isInitialized$],
@@ -5393,13 +6154,13 @@ function usePipelineManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.pipelineManager;
 }
-var ConnectedUsersContext = (0, import_react7.createContext)(void 0);
+var ConnectedUsersContext = (0, import_react16.createContext)(void 0);
 function useConnectedUsersManager() {
-  return (0, import_react7.useContext)(ConnectedUsersContext);
+  return (0, import_react16.useContext)(ConnectedUsersContext);
 }
-var AnyEphemeralUserDataManagerContext = (0, import_react7.createContext)(void 0);
+var AnyEphemeralUserDataManagerContext = (0, import_react16.createContext)(void 0);
 function useAnyEphemeralUserData() {
-  return (0, import_react7.useContext)(AnyEphemeralUserDataManagerContext);
+  return (0, import_react16.useContext)(AnyEphemeralUserDataManagerContext);
 }
 function useCurrentUserId() {
   const connectedUsersManager = useConnectedUsersManager();
@@ -5437,7 +6198,7 @@ function createNoyaContext({
         ...options
       }
     );
-    const contextValue = (0, import_react7.useMemo)(
+    const contextValue = (0, import_react16.useMemo)(
       () => ({
         noyaManager,
         theme,
@@ -5445,24 +6206,24 @@ function createNoyaContext({
       }),
       [noyaManager, theme, viewType]
     );
-    return /* @__PURE__ */ import_react7.default.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react7.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react16.default.createElement(
       ConnectedUsersContext.Provider,
       {
         value: noyaManager.connectedUsersManager
       },
-      /* @__PURE__ */ import_react7.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(
         EphemeralUserDataManagerContext.Provider,
         {
           value: noyaManager.ephemeralUserDataManager
         },
-        options.fallback !== void 0 ? /* @__PURE__ */ import_react7.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
+        options.fallback !== void 0 ? /* @__PURE__ */ import_react16.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
       )
     ));
   }
   function useValue(path, options) {
     const { noyaManager } = useAnyNoyaStateContext();
     let actualPath = typeof path === "function" || !path ? "" : path;
-    const mappedObservable = (0, import_react7.useMemo)(() => {
+    const mappedObservable = (0, import_react16.useMemo)(() => {
       if (typeof path === "function") {
         return noyaManager.multiplayerStateManager.optimisticState$.map(path, {
           isEqual: options?.isEqual
@@ -5475,7 +6236,7 @@ function createNoyaContext({
   }
   function useSetValue(path) {
     const { noyaManager } = useAnyNoyaStateContext();
-    const setValue = (0, import_react7.useCallback)(
+    const setValue = (0, import_react16.useCallback)(
       (...args) => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
         noyaManager.multiplayerStateManager.setStateAtPath(
@@ -5499,7 +6260,7 @@ function createNoyaContext({
     return noyaManager.multiplayerStateManager;
   }
   function useEphemeralUserDataManager() {
-    const ephemeralUserData = (0, import_react7.useContext)(EphemeralUserDataManagerContext);
+    const ephemeralUserData = (0, import_react16.useContext)(EphemeralUserDataManagerContext);
     if (!ephemeralUserData) {
       throw new Error(
         "useEphemeralUserData must be used within a NoyaStateProvider"
@@ -5516,7 +6277,7 @@ function createNoyaContext({
   }
   function useSetLeftMenuItems(leftMenuItems) {
     const { menuManager } = useNoyaManager();
-    (0, import_react7.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (leftMenuItems) {
         menuManager.setLeftMenuItems(leftMenuItems);
       }
@@ -5528,7 +6289,7 @@ function createNoyaContext({
   }
   function useSetRightMenuItems(rightMenuItems) {
     const { menuManager } = useNoyaManager();
-    (0, import_react7.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (rightMenuItems) {
         menuManager.setRightMenuItems(rightMenuItems);
       }
@@ -5536,19 +6297,19 @@ function createNoyaContext({
   }
   function useHandleMenuItem(callback) {
     const { menuManager } = useNoyaManager();
-    (0, import_react7.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       return menuManager.addListener(callback);
     }, [menuManager, callback]);
   }
   function useOnSelectMenuItemCallback() {
     const { menuManager } = useNoyaManager();
-    return (0, import_react7.useCallback)((type) => menuManager.emit(type), [menuManager]);
+    return (0, import_react16.useCallback)((type) => menuManager.emit(type), [menuManager]);
   }
   function useMenu(options) {
     const { leftMenuItems, rightMenuItems, onSelectMenuItem } = options;
     useSetLeftMenuItems(leftMenuItems);
     useSetRightMenuItems(rightMenuItems);
-    const noop = (0, import_react7.useCallback)(() => {
+    const noop = (0, import_react16.useCallback)(() => {
     }, []);
     useHandleMenuItem(onSelectMenuItem ?? noop);
   }
@@ -5574,7 +6335,7 @@ function createNoyaContext({
 // src/ai.ts
 function useRegisterAITool(tool) {
   const aiManager = useAIManager();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     return aiManager.registerTool(tool);
   }, [aiManager, tool]);
 }
@@ -5586,7 +6347,7 @@ function useCallableAITools() {
 // src/components/UserPointersOverlay.tsx
 var import_observable2 = require("@noya-app/observable");
 var import_react_utils4 = require("@noya-app/react-utils");
-var import_react9 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 function shouldShow(hideAfter, updatedAt) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
@@ -5596,7 +6357,7 @@ var UserPointerInternal = (0, import_react_utils4.memoGeneric)(function UserPoin
   hideAfter = 5e3,
   renderUserPointer
 }) {
-  const observable = (0, import_react9.useMemo)(() => {
+  const observable = (0, import_react18.useMemo)(() => {
     const metadata$ = ephemeralUserDataManager.metadata$.observePath([user.id]).throttle(50);
     const data$ = ephemeralUserDataManager.data$.observePath([user.id]).throttle(50);
     return import_observable2.Observable.combine([metadata$, data$], ([metadata2, data2]) => {
@@ -5604,10 +6365,10 @@ var UserPointerInternal = (0, import_react_utils4.memoGeneric)(function UserPoin
     });
   }, [ephemeralUserDataManager, user.id]);
   const { metadata, data } = useObservable(observable);
-  const [, setForceUpdate] = (0, import_react9.useState)(0);
+  const [, setForceUpdate] = (0, import_react18.useState)(0);
   const updatedAt = metadata?.updatedAt ?? 0;
   const show = shouldShow(hideAfter, updatedAt);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!show) return;
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
@@ -5629,9 +6390,9 @@ var UserPointersOverlay = (0, import_react_utils4.memoGeneric)(function UserPoin
 }) {
   const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
   const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
-  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, connectedUsers.map((user) => {
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, connectedUsers.map((user) => {
     if (user.id === currentUserId) return null;
-    return /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react18.default.createElement(
       UserPointerInternal,
       {
         key: user.id,
@@ -5644,17 +6405,17 @@ var UserPointersOverlay = (0, import_react_utils4.memoGeneric)(function UserPoin
 });
 
 // src/WebSocketConnection.ts
-var import_state_manager3 = require("@noya-app/state-manager");
+var import_state_manager4 = require("@noya-app/state-manager");
 var WebSocketConnection = class {
   constructor(url, options = {}) {
     this.url = url;
     this.options = options;
-    this.ws = new import_state_manager3.ReconnectingWebSocket({
+    this.ws = new import_state_manager4.ReconnectingWebSocket({
       debug: options.debug,
       onopen: this.handleOpen,
       onmessage: this.handleMessage,
       onclose: this.handleClose,
-      activityDetector: new import_state_manager3.UserActivityDetector()
+      activityDetector: new import_state_manager4.UserActivityDetector()
     });
   }
   ws;
@@ -5731,9 +6492,15 @@ var WebSocketConnection = class {
   WebSocketConnection,
   createDefaultAppData,
   createNoyaContext,
+  decodeAll,
+  encodeAll,
   enforceSchema,
+  exportAll,
+  fetchAssetMap,
   getAppData,
+  importAll,
   parseAppDataParameter,
+  replaceDeep,
   useAIManager,
   useAnyEphemeralUserData,
   useAnyNoyaManager,