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

package/dist/index.mjs

@@ -1108,18 +1108,18 @@ var require_lib = __commonJS({
 export * from "@noya-app/state-manager";
 
 // src/ai.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 
 // src/NoyaStateContext.tsx
 import {
   Observable
 } from "@noya-app/observable";
 import { useStableCallback } from "@noya-app/react-utils";
-import React5, {
+import React14, {
   createContext,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useMemo as useMemo4
 } from "react";
 
@@ -3547,6 +3547,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"),
@@ -3567,8 +3632,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"
   }
@@ -3922,16 +3992,16 @@ import { useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/hooks.ts
 import {
-  NoyaManager,
+  NoyaManager as NoyaManager2,
   StateManager,
   stubSync
 } from "@noya-app/state-manager";
 import {
   createElement as createElement2,
-  useCallback,
-  useEffect as useEffect2,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
   useMemo as useMemo2,
-  useRef,
+  useRef as useRef2,
   useState,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -4012,24 +4082,18 @@ var ErrorOverlay = React.memo(function ErrorOverlay2({
 });
 
 // src/inspector/useStateInspector.tsx
-import React4 from "react";
+import React13 from "react";
 import { createRoot } from "react-dom/client";
 import { useIsomorphicLayoutEffect } from "@noya-app/react-utils";
 
 // src/inspector/StateInspector.tsx
-import { memoGeneric } from "@noya-app/react-utils";
-import React3, {
-  useEffect,
+import { downloadBlob, memoGeneric } from "@noya-app/react-utils";
+import React12, {
+  useCallback,
+  useEffect as useEffect2,
   useLayoutEffect
 } from "react";
-import {
-  ObjectInspector,
-  ObjectLabel,
-  ObjectName,
-  ObjectPreview,
-  chromeDark,
-  chromeLight
-} from "react-inspector";
+import { ObjectInspector as ObjectInspector3 } from "react-inspector";
 
 // src/useObservable.ts
 import { useMemo, useSyncExternalStore } from "react";
@@ -4058,119 +4122,110 @@ function useObservable(observable, pathOrSelector, options) {
   return useSyncExternalStore(listen, get, get);
 }
 
-// src/inspector/useLocalStorageState.tsx
+// src/inspector/ColoredDot.tsx
 import React2 from "react";
-var localStorage = typeof window !== "undefined" ? window.localStorage : null;
-function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = React2.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__ */ React2.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
+import { chromeDark, chromeLight } from "react-inspector";
+var lightInspectorTheme = {
   ...chromeLight,
   BASE_BACKGROUND_COLOR: "transparent",
   OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)"
 };
-var darkTheme = {
+var darkInspectorTheme = {
   ...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
+import React7 from "react";
+import { ObjectInspector, ObjectLabel } from "react-inspector";
+
+// src/inspector/ObjectRootLabel.tsx
+import React3 from "react";
+import { ObjectName, ObjectPreview } from "react-inspector";
+var ObjectRootLabel = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.createElement(ObjectName, { name }), /* @__PURE__ */ React3.createElement("span", null, ": "), /* @__PURE__ */ React3.createElement(ObjectPreview, { data }));
+  }
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "\u2191" : "\u2193";
+    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.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__ */ React3.createElement(ObjectPreview, { data }));
+  } else {
+    return /* @__PURE__ */ React3.createElement(ObjectPreview, { data });
   }
 };
-function ToggleButton({
-  showInspector,
-  setShowInspector,
-  theme,
-  anchor
+
+// src/inspector/StateInspectorDisclosureSection.tsx
+import React5, {
+  forwardRef
+} from "react";
+
+// src/inspector/StateInspectorArrow.tsx
+import React4 from "react";
+function StateInspectorArrow({
+  expanded,
+  onClick,
+  style
 }) {
-  const isRightAnchor = anchor === "right";
-  const rightIcon = /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.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__ */ React3.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__ */ React3.createElement(
+  return /* @__PURE__ */ React4.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__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
+    "\u25BC"
   );
 }
-function DisclosureSection({
+
+// src/inspector/StateInspectorDisclosureSection.tsx
+function StateInspectorDisclosureSection({
   open,
   setOpen,
   title,
@@ -4180,9 +4235,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__ */ React3.createElement(
+  return /* @__PURE__ */ React5.createElement(
     "div",
     {
       style: {
@@ -4192,7 +4247,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React5.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -4206,8 +4261,8 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ React3.createElement(
-        Arrow,
+      setOpen && /* @__PURE__ */ React5.createElement(
+        StateInspectorArrow,
         {
           expanded: open,
           style: {
@@ -4217,13 +4272,35 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ React3.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      /* @__PURE__ */ React5.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
   );
 }
-function InspectorRow({
+var StateInspectorDisclosureRowInner = forwardRef(
+  function StateInspectorDisclosureRowInner2(props, forwardedRef) {
+    return /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        style: {
+          flex: "1 1 0",
+          overflowY: "auto",
+          overflowX: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          ...props.style
+        },
+        ...props,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+
+// src/inspector/StateInspectorRow.tsx
+import React6 from "react";
+function StateInspectorRow({
   children,
   colorScheme,
   selected,
@@ -4231,7 +4308,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
       style: {
@@ -4249,7 +4326,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React6.createElement(
       "span",
       {
         style: {
@@ -4263,68 +4340,1035 @@ function InspectorRow({
     )
   );
 }
-var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = 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] = React3.useState(false);
-  const tasks = useObservable(taskManager.tasks$);
-  const inputs = useObservable(ioManager.inputs$);
-  const outputTransforms = useObservable(ioManager.outputTransforms$);
-  useLayoutEffect(() => {
-    setDidMount(true);
-  }, []);
-  const eventsContainerRef = React3.useRef(null);
-  const historyContainerRef = React3.useRef(null);
-  const [showInspector, setShowInspector] = useLocalStorageState(
-    "noya-multiplayer-react-show-inspector",
-    true
-  );
-  const [showEvents, setShowEvents] = useLocalStorageState(
-    "noya-multiplayer-react-show-events",
-    false
-  );
-  const [showHistory, setShowHistory] = useLocalStorageState(
-    "noya-multiplayer-react-show-history",
-    false
-  );
-  const [showUsers, setShowUsers] = useLocalStorageState(
-    "noya-multiplayer-react-show-users",
-    true
-  );
-  const [showData, setShowData] = useLocalStorageState(
-    "noya-multiplayer-react-show-data",
-    true
-  );
-  const [showTasks, setShowTasks] = useLocalStorageState(
-    "noya-multiplayer-react-show-tasks",
-    false
-  );
-  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
-    "noya-multiplayer-react-show-ephemeral",
-    false
-  );
-  const [showAssets, setShowAssets] = useLocalStorageState(
-    "noya-multiplayer-react-show-assets",
-    false
-  );
-  const [showSecrets, setShowSecrets] = useLocalStorageState(
-    "noya-multiplayer-react-show-secrets",
-    false
+  const theme = getStateInspectorTheme(colorScheme);
+  return /* @__PURE__ */ React7.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showEvents,
+      setOpen: setShowEvents,
+      title: "Events",
+      colorScheme
+    },
+    /* @__PURE__ */ React7.createElement(StateInspectorDisclosureRowInner, { ref: eventsContainerRef }, connectionEvents?.map(
+      (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React7.createElement(StateInspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React7.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React7.createElement(
+        StateInspectorRow,
+        {
+          key: index,
+          colorScheme,
+          variant: event.type === "send" ? "up" : "down",
+          style: {
+            padding: "0px 12px 1px"
+          }
+        },
+        /* @__PURE__ */ React7.createElement(
+          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__ */ React7.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React7.createElement(
+                ObjectLabel,
+                {
+                  direction,
+                  name,
+                  data,
+                  isNonenumerable
+                }
+              );
+            }
+          }
+        )
+      )
+    ), !connectionEvents && /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          fontSize: "12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        }
+      },
+      /* @__PURE__ */ React7.createElement("span", null, "No recorded events")
+    ))
+  );
+}
+
+// src/inspector/sections/HistorySection.tsx
+import React9, { useEffect, useRef } from "react";
+import { ObjectInspector as ObjectInspector2 } from "react-inspector";
+
+// src/inspector/StateInspectorButton.tsx
+import React8 from "react";
+function StateInspectorButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled
+}) {
+  return /* @__PURE__ */ React8.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 = useRef(null);
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+  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__ */ React9.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showHistory,
+      setOpen: setShowHistory,
+      title: "History",
+      colorScheme,
+      right: /* @__PURE__ */ React9.createElement(
+        "span",
+        {
+          style: {
+            display: "flex",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React9.createElement(
+          StateInspectorButton,
+          {
+            disabled: !historySnapshot.canUndo,
+            theme,
+            onClick: () => {
+              multiplayerStateManager.undo();
+            }
+          },
+          /* @__PURE__ */ React9.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React9.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 20 20"
+            },
+            /* @__PURE__ */ React9.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__ */ React9.createElement(
+          StateInspectorButton,
+          {
+            disabled: !historySnapshot.canRedo,
+            theme,
+            onClick: () => {
+              multiplayerStateManager.redo();
+            }
+          },
+          /* @__PURE__ */ React9.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React9.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 20 20"
+            },
+            /* @__PURE__ */ React9.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__ */ React9.createElement(StateInspectorDisclosureRowInner, { ref }, /* @__PURE__ */ React9.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__ */ React9.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__ */ React9.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__ */ React9.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          entry.metadata.name,
+          Object.keys(rest).length > 0 && /* @__PURE__ */ React9.createElement(ObjectInspector2, { data: rest, theme })
+        ),
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React9.createElement(
+          "pre",
+          {
+            key: j,
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          patch.op === "add" && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React9.createElement(ObjectInspector2, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React9.createElement(ObjectInspector2, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React9.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ React9.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
+        ))
+      );
+    }))
+  );
+}
+
+// src/inspector/serialization.ts
+import { createHash } from "@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 = createHash(noyaManager.options.schema);
+    const newSchemaHash = 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
+import React10 from "react";
+function StateInspectorToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+  anchor
+}) {
+  const isRightAnchor = anchor === "right";
+  const rightIcon = /* @__PURE__ */ React10.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__ */ React10.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__ */ React10.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__ */ React10.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__ */ React10.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__ */ React10.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
+  );
+}
+
+// src/inspector/useLocalStorageState.tsx
+import React11 from "react";
+var localStorage = typeof window !== "undefined" ? window.localStorage : null;
+function useLocalStorageState(key, defaultValue) {
+  const [state, setState] = React11.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 = memoGeneric(function StateInspector2({
+  noyaManager,
+  colorScheme = "light",
+  anchor = "right",
+  unstyled = false,
+  ...props
+}) {
+  const {
+    multiplayerStateManager,
+    assetManager,
+    connectedUsersManager,
+    secretManager,
+    ephemeralUserDataManager,
+    connectionEventManager,
+    taskManager,
+    ioManager
+  } = noyaManager;
+  const [didMount, setDidMount] = React12.useState(false);
+  const tasks = useObservable(taskManager.tasks$);
+  const inputs = useObservable(ioManager.inputs$);
+  const outputTransforms = useObservable(ioManager.outputTransforms$);
+  useLayoutEffect(() => {
+    setDidMount(true);
+  }, []);
+  const eventsContainerRef = React12.useRef(null);
+  const [showInspector, setShowInspector] = useLocalStorageState(
+    "noya-multiplayer-react-show-inspector",
+    true
+  );
+  const [showEvents, setShowEvents] = useLocalStorageState(
+    "noya-multiplayer-react-show-events",
+    false
+  );
+  const [showHistory, setShowHistory] = useLocalStorageState(
+    "noya-multiplayer-react-show-history",
+    false
+  );
+  const [showUsers, setShowUsers] = useLocalStorageState(
+    "noya-multiplayer-react-show-users",
+    true
+  );
+  const [showData, setShowData] = useLocalStorageState(
+    "noya-multiplayer-react-show-data",
+    true
+  );
+  const [showTasks, setShowTasks] = useLocalStorageState(
+    "noya-multiplayer-react-show-tasks",
+    false
+  );
+  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
+    "noya-multiplayer-react-show-ephemeral",
+    false
+  );
+  const [showAssets, setShowAssets] = useLocalStorageState(
+    "noya-multiplayer-react-show-assets",
+    false
+  );
+  const [showSecrets, setShowSecrets] = useLocalStorageState(
+    "noya-multiplayer-react-show-secrets",
+    false
   );
   const [showInputs, setShowInputs] = useLocalStorageState(
     "noya-multiplayer-react-show-inputs",
@@ -4335,7 +5379,7 @@ var StateInspector = memoGeneric(function StateInspector2({
     false
   );
   const connectionEvents = useObservable(connectionEventManager.events$);
-  useEffect(() => {
+  useEffect2(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
@@ -4356,25 +5400,8 @@ var StateInspector = memoGeneric(function StateInspector2({
   const outputTransformsInitialized = useObservable(
     ioManager.outputTransformsInitialized$
   );
-  useEffect(() => {
-    if (historyContainerRef.current) {
-      historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
-    }
-  }, [historySnapshot]);
-  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,
@@ -4394,9 +5421,24 @@ var StateInspector = memoGeneric(function StateInspector2({
     zIndex: 9999,
     lineHeight: "13px"
   };
+  const handleExportAll = useCallback(async () => {
+    const buffer = await exportAll(noyaManager);
+    downloadBlob(new Blob([buffer]), "state.zip");
+  }, [noyaManager]);
+  const handleImportAll = 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__ */ React3.createElement(
+    return /* @__PURE__ */ React12.createElement(
       "div",
       {
         ...props,
@@ -4408,8 +5450,8 @@ var StateInspector = memoGeneric(function StateInspector2({
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ React3.createElement(
-        ToggleButton,
+      /* @__PURE__ */ React12.createElement(
+        StateInspectorToggleButton,
         {
           showInspector,
           setShowInspector,
@@ -4419,7 +5461,7 @@ var StateInspector = memoGeneric(function StateInspector2({
       )
     );
   }
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       ...props,
@@ -4428,8 +5470,8 @@ var StateInspector = memoGeneric(function StateInspector2({
         ...props.style
       }
     },
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
         isFirst: true,
         open: showUsers,
@@ -4440,8 +5482,8 @@ var StateInspector = memoGeneric(function StateInspector2({
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ React3.createElement(
-          ToggleButton,
+        right: /* @__PURE__ */ React12.createElement(
+          StateInspectorToggleButton,
           {
             showInspector,
             setShowInspector,
@@ -4450,14 +5492,14 @@ var StateInspector = memoGeneric(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ React3.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React3.createElement(
-        InspectorRow,
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React12.createElement(
+        StateInspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ React3.createElement(
+        user.image && /* @__PURE__ */ React12.createElement(
           "img",
           {
             src: user.image,
@@ -4478,7 +5520,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ React3.createElement(
+      )), !connectedUsers && /* @__PURE__ */ React12.createElement(
         "div",
         {
           style: {
@@ -4489,13 +5531,13 @@ var StateInspector = memoGeneric(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React3.createElement("span", null, "No connected users")
+        /* @__PURE__ */ React12.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Data", /* @__PURE__ */ React3.createElement(
+        title: /* @__PURE__ */ React12.createElement(TitleLabel, null, "Data", /* @__PURE__ */ React12.createElement(
           ColoredDot,
           {
             type: multipeerStateInitialized ? "success" : "error"
@@ -4504,16 +5546,18 @@ var StateInspector = memoGeneric(function StateInspector2({
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ React3.createElement(
+        right: /* @__PURE__ */ React12.createElement(
           "span",
           {
             style: {
               display: "flex",
-              gap: "4px"
+              gap: "12px"
             }
           },
-          /* @__PURE__ */ React3.createElement(
-            SmallButton,
+          /* @__PURE__ */ React12.createElement(StateInspectorButton, { theme, onClick: handleImportAll }, "Import"),
+          /* @__PURE__ */ React12.createElement(StateInspectorButton, { theme, onClick: handleExportAll }, "Export"),
+          /* @__PURE__ */ React12.createElement(
+            StateInspectorButton,
             {
               theme,
               onClick: () => {
@@ -4524,15 +5568,15 @@ var StateInspector = memoGeneric(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React3.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React3.createElement(
-        ObjectInspector,
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ React12.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ React12.createElement(
+        ObjectInspector3,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ React3.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React3.createElement(
-        ObjectInspector,
+      )), multiplayerStateManager.schema && /* @__PURE__ */ React12.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ React12.createElement(
+        ObjectInspector3,
         {
           name: "schema",
           data: multiplayerStateManager.schema,
@@ -4540,151 +5584,25 @@ var StateInspector = memoGeneric(function StateInspector2({
         }
       )))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      HistorySection,
       {
-        open: showHistory,
-        setOpen: setShowHistory,
-        title: "History",
+        showHistory,
+        setShowHistory,
         colorScheme,
-        right: /* @__PURE__ */ React3.createElement(
-          "span",
-          {
-            style: {
-              display: "flex",
-              gap: "4px"
-            }
-          },
-          /* @__PURE__ */ React3.createElement(
-            SmallButton,
-            {
-              disabled: !historySnapshot.canUndo,
-              theme,
-              onClick: () => {
-                multiplayerStateManager.undo();
-              }
-            },
-            /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React3.createElement(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "1em",
-                height: "1em",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ React3.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__ */ React3.createElement(
-            SmallButton,
-            {
-              disabled: !historySnapshot.canRedo,
-              theme,
-              onClick: () => {
-                multiplayerStateManager.redo();
-              }
-            },
-            /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React3.createElement(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "1em",
-                height: "1em",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ React3.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__ */ React3.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React3.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__ */ React3.createElement(
-          "span",
-          {
-            style: {
-              fontFamily: "Menlo, monospace",
-              fontSize: "11px",
-              borderRadius: 4,
-              display: "inline-block"
-            }
-          },
-          "Initial state"
-        )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React3.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__ */ React3.createElement(
-          "pre",
-          {
-            style: {
-              fontSize: "11px",
-              display: "flex",
-              flexWrap: "wrap",
-              margin: 0
-            }
-          },
-          entry.metadata.name
-        ),
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React3.createElement(
-          "pre",
-          {
-            key: j,
-            style: {
-              fontSize: "11px",
-              display: "flex",
-              flexWrap: "wrap",
-              margin: 0
-            }
-          },
-          patch.op === "add" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React3.createElement(ObjectInspector, { data: patch.value, theme })),
-          patch.op === "replace" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React3.createElement(ObjectInspector, { data: patch.value, theme })),
-          patch.op === "remove" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
-          patch.op === "move" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
-        ))
-      )))
+        historySnapshot,
+        multiplayerStateManager
+      }
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showAssets,
         setOpen: setShowAssets,
-        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Assets", /* @__PURE__ */ React3.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React12.createElement(TitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ React12.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
         colorScheme,
-        right: /* @__PURE__ */ React3.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React3.createElement(
-          SmallButton,
+        right: /* @__PURE__ */ React12.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React12.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4696,8 +5614,8 @@ var StateInspector = memoGeneric(function StateInspector2({
             }
           },
           "Reload"
-        ), /* @__PURE__ */ React3.createElement(
-          SmallButton,
+        ), /* @__PURE__ */ React12.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4720,8 +5638,8 @@ var StateInspector = memoGeneric(function StateInspector2({
           "Upload"
         ))
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ React3.createElement(
-        SmallButton,
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ React12.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ React12.createElement(ObjectInspector3, { name: asset.id, data: asset, theme }), /* @__PURE__ */ React12.createElement(
+        StateInspectorButton,
         {
           theme,
           onClick: () => assetManager.delete(asset.id)
@@ -4729,15 +5647,15 @@ var StateInspector = memoGeneric(function StateInspector2({
         "Delete"
       ))))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ React3.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React12.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ React12.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
         colorScheme,
         open: showSecrets,
         setOpen: setShowSecrets,
-        right: /* @__PURE__ */ React3.createElement(
-          SmallButton,
+        right: /* @__PURE__ */ React12.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4751,8 +5669,8 @@ var StateInspector = memoGeneric(function StateInspector2({
           "Create"
         )
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { data: secret, theme }), /* @__PURE__ */ React3.createElement(
-        SmallButton,
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ React12.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React12.createElement(ObjectInspector3, { data: secret, theme }), /* @__PURE__ */ React12.createElement(
+        StateInspectorButton,
         {
           theme,
           onClick: () => secretManager.deleteSecret(secret.id)
@@ -4761,15 +5679,15 @@ var StateInspector = memoGeneric(function StateInspector2({
       ))))
     ),
     " ",
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showInputs,
         setOpen: setShowInputs,
-        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Inputs", /* @__PURE__ */ React3.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
+        title: /* @__PURE__ */ React12.createElement(TitleLabel, null, "Inputs", /* @__PURE__ */ React12.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
         colorScheme
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, inputs?.map((input) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ React12.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ React12.createElement(ObjectInspector3, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ React12.createElement(
         "div",
         {
           style: {
@@ -4780,15 +5698,15 @@ var StateInspector = memoGeneric(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React3.createElement("span", null, "No inputs")
+        /* @__PURE__ */ React12.createElement("span", null, "No inputs")
       ))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showOutputTransforms,
         setOpen: setShowOutputTransforms,
-        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Output Transforms", /* @__PURE__ */ React3.createElement(
+        title: /* @__PURE__ */ React12.createElement(TitleLabel, null, "Output Transforms", /* @__PURE__ */ React12.createElement(
           ColoredDot,
           {
             type: outputTransformsInitialized ? "success" : "error"
@@ -4796,7 +5714,7 @@ var StateInspector = memoGeneric(function StateInspector2({
         )),
         colorScheme
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, outputTransforms?.map((transform) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ React12.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ React12.createElement(ObjectInspector3, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ React12.createElement(
         "div",
         {
           style: {
@@ -4807,19 +5725,19 @@ var StateInspector = memoGeneric(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ React3.createElement("span", null, "No output transforms")
+        /* @__PURE__ */ React12.createElement("span", null, "No output transforms")
       ))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
         title: "Tasks",
         colorScheme,
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React3.createElement(
-        InspectorRow,
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ React12.createElement(
+        StateInspectorRow,
         {
           key: task.id,
           colorScheme,
@@ -4827,8 +5745,8 @@ var StateInspector = memoGeneric(function StateInspector2({
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ React3.createElement(
-          ObjectInspector,
+        /* @__PURE__ */ React12.createElement(
+          ObjectInspector3,
           {
             name: task.name,
             data: task.payload,
@@ -4837,16 +5755,16 @@ var StateInspector = memoGeneric(function StateInspector2({
         )
       )))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      StateInspectorDisclosureSection,
       {
         open: showEphemeral,
         setOpen: setShowEphemeral,
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React3.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ React3.createElement(
-        ObjectInspector,
+      /* @__PURE__ */ React12.createElement(StateInspectorDisclosureRowInner, null, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React12.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ React12.createElement(
+        ObjectInspector3,
         {
           name: key,
           data: value,
@@ -4855,187 +5773,20 @@ var StateInspector = memoGeneric(function StateInspector2({
         }
       ))))
     ),
-    /* @__PURE__ */ React3.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ React12.createElement(
+      EventsSection,
       {
-        open: showEvents,
-        setOpen: setShowEvents,
-        title: "Events",
-        colorScheme
-      },
-      /* @__PURE__ */ React3.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
-        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React3.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React3.createElement(
-          InspectorRow,
-          {
-            key: index,
-            colorScheme,
-            variant: event.type === "send" ? "up" : "down",
-            style: {
-              padding: "0px 12px 1px"
-            }
-          },
-          /* @__PURE__ */ React3.createElement(
-            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__ */ React3.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React3.createElement(
-                  ObjectLabel,
-                  {
-                    direction,
-                    name,
-                    data,
-                    isNonenumerable
-                  }
-                );
-              }
-            }
-          )
-        )
-      ), !connectionEvents && /* @__PURE__ */ React3.createElement(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            fontSize: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px"
-          }
-        },
-        /* @__PURE__ */ React3.createElement("span", null, "No recorded events")
-      ))
+        connectionEvents,
+        colorScheme,
+        eventsContainerRef,
+        showEvents,
+        setShowEvents
+      }
     )
   );
 });
-var ObjectRootLabel = ({ name, data, direction }) => {
-  if (typeof name === "string") {
-    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.createElement(ObjectName, { name }), /* @__PURE__ */ React3.createElement("span", null, ": "), /* @__PURE__ */ React3.createElement(ObjectPreview, { data }));
-  }
-  if (direction === "up" || direction === "down") {
-    const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.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__ */ React3.createElement(ObjectPreview, { data }));
-  } else {
-    return /* @__PURE__ */ React3.createElement(ObjectPreview, { data });
-  }
-};
-function Arrow({
-  expanded,
-  onClick,
-  style
-}) {
-  return /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.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__ */ React3.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
+  return /* @__PURE__ */ React12.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
 }
 
 // src/inspector/useStateInspector.tsx
@@ -5053,7 +5804,7 @@ function useStateInspector({
   colorScheme,
   anchor
 }) {
-  const [root, setRoot] = React4.useState(null);
+  const [root, setRoot] = React13.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (disabled) return;
     const { host, container } = createShadowRootElement();
@@ -5067,7 +5818,7 @@ function useStateInspector({
   useIsomorphicLayoutEffect(() => {
     if (!root) return;
     root.render(
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React13.createElement(
         StateInspector,
         {
           colorScheme,
@@ -5081,7 +5832,7 @@ function useStateInspector({
 
 // src/hooks.ts
 function useSyncStateManager(stateManager, path) {
-  const getSnapshot = useCallback(
+  const getSnapshot = useCallback2(
     () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
     [stateManager, path]
   );
@@ -5096,7 +5847,7 @@ function useManagedState(createInitialState, options) {
     () => new StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = useCallback(
+  const setState = useCallback2(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -5145,7 +5896,7 @@ function useMultiplayerState(initialState, options) {
     ...rest
   } = options ?? {};
   const [noyaManager] = useState(
-    () => new NoyaManager(initialState, rest)
+    () => new NoyaManager2(initialState, rest)
   );
   const state = useObservable(
     noyaManager.multiplayerStateManager.optimisticState$
@@ -5170,8 +5921,8 @@ function useMultiplayerState(initialState, options) {
       assets
     };
   }, [noyaManager, assets]);
-  const syncRef = useRef(sync);
-  useEffect2(() => {
+  const syncRef = useRef2(sync);
+  useEffect3(() => {
     if (syncRef.current) {
       return syncRef.current({ noyaManager });
     }
@@ -5186,7 +5937,7 @@ function useMultiplayerState(initialState, options) {
 }
 function useErrorOverlay(noyaManager) {
   const unrecoverableError = useObservable(noyaManager.unrecoverableError);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!unrecoverableError) return;
     const el = document.createElement("div");
     el.id = "noya-multiplayer-react-error-overlay";
@@ -5337,7 +6088,7 @@ function useSecret(name) {
   const { noyaManager } = useAnyNoyaStateContext();
   return useObservable(
     noyaManager.secretManager.secrets$,
-    useCallback2((secrets) => secrets.find((s) => s.name === name), [name])
+    useCallback3((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 function useInputs() {
@@ -5355,7 +6106,7 @@ function useIOManager() {
 function usePublish(callback) {
   const { noyaManager } = useAnyNoyaStateContext();
   const stableCallback = useStableCallback(callback);
-  useEffect3(() => {
+  useEffect4(() => {
     noyaManager.publishingManager.setPublishingEnabled(true);
     noyaManager.publishingManager.getFilesToPublish = stableCallback;
     return () => {
@@ -5435,17 +6186,17 @@ function createNoyaContext({
       }),
       [noyaManager, theme, viewType]
     );
-    return /* @__PURE__ */ React5.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React14.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ React14.createElement(
       ConnectedUsersContext.Provider,
       {
         value: noyaManager.connectedUsersManager
       },
-      /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React14.createElement(
         EphemeralUserDataManagerContext.Provider,
         {
           value: noyaManager.ephemeralUserDataManager
         },
-        options.fallback !== void 0 ? /* @__PURE__ */ React5.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
+        options.fallback !== void 0 ? /* @__PURE__ */ React14.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
       )
     ));
   }
@@ -5465,7 +6216,7 @@ function createNoyaContext({
   }
   function useSetValue(path) {
     const { noyaManager } = useAnyNoyaStateContext();
-    const setValue = useCallback2(
+    const setValue = useCallback3(
       (...args) => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
         noyaManager.multiplayerStateManager.setStateAtPath(
@@ -5506,7 +6257,7 @@ function createNoyaContext({
   }
   function useSetLeftMenuItems(leftMenuItems) {
     const { menuManager } = useNoyaManager();
-    useEffect3(() => {
+    useEffect4(() => {
       if (leftMenuItems) {
         menuManager.setLeftMenuItems(leftMenuItems);
       }
@@ -5518,7 +6269,7 @@ function createNoyaContext({
   }
   function useSetRightMenuItems(rightMenuItems) {
     const { menuManager } = useNoyaManager();
-    useEffect3(() => {
+    useEffect4(() => {
       if (rightMenuItems) {
         menuManager.setRightMenuItems(rightMenuItems);
       }
@@ -5526,19 +6277,19 @@ function createNoyaContext({
   }
   function useHandleMenuItem(callback) {
     const { menuManager } = useNoyaManager();
-    useEffect3(() => {
+    useEffect4(() => {
       return menuManager.addListener(callback);
     }, [menuManager, callback]);
   }
   function useOnSelectMenuItemCallback() {
     const { menuManager } = useNoyaManager();
-    return useCallback2((type) => menuManager.emit(type), [menuManager]);
+    return useCallback3((type) => menuManager.emit(type), [menuManager]);
   }
   function useMenu(options) {
     const { leftMenuItems, rightMenuItems, onSelectMenuItem } = options;
     useSetLeftMenuItems(leftMenuItems);
     useSetRightMenuItems(rightMenuItems);
-    const noop = useCallback2(() => {
+    const noop = useCallback3(() => {
     }, []);
     useHandleMenuItem(onSelectMenuItem ?? noop);
   }
@@ -5564,7 +6315,7 @@ function createNoyaContext({
 // src/ai.ts
 function useRegisterAITool(tool) {
   const aiManager = useAIManager();
-  useEffect4(() => {
+  useEffect5(() => {
     return aiManager.registerTool(tool);
   }, [aiManager, tool]);
 }
@@ -5576,7 +6327,7 @@ function useCallableAITools() {
 // src/components/UserPointersOverlay.tsx
 import { Observable as Observable2 } from "@noya-app/observable";
 import { memoGeneric as memoGeneric2 } from "@noya-app/react-utils";
-import React6, { useEffect as useEffect5, useMemo as useMemo5, useState as useState3 } from "react";
+import React15, { useEffect as useEffect6, useMemo as useMemo5, useState as useState3 } from "react";
 function shouldShow(hideAfter, updatedAt) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
@@ -5597,7 +6348,7 @@ var UserPointerInternal = memoGeneric2(function UserPointerInternal2({
   const [, setForceUpdate] = useState3(0);
   const updatedAt = metadata?.updatedAt ?? 0;
   const show = shouldShow(hideAfter, updatedAt);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!show) return;
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
@@ -5619,9 +6370,9 @@ var UserPointersOverlay = memoGeneric2(function UserPointers({
 }) {
   const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
   const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, connectedUsers.map((user) => {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, connectedUsers.map((user) => {
     if (user.id === currentUserId) return null;
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React15.createElement(
       UserPointerInternal,
       {
         key: user.id,
@@ -5723,9 +6474,15 @@ export {
   WebSocketConnection,
   createDefaultAppData,
   createNoyaContext,
+  decodeAll,
+  encodeAll,
   enforceSchema,
+  exportAll,
+  fetchAssetMap,
   getAppData,
+  importAll,
   parseAppDataParameter,
+  replaceDeep,
   useAIManager,
   useAnyEphemeralUserData,
   useAnyNoyaManager,