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

package/dist/index.js

@@ -45,10 +45,10 @@ var require_access = __commonJS({
         const accessed = _getPath(node, indexPath, options);
         return accessed[accessed.length - 1];
       }
-      let path = indexPath.slice();
-      while (path.length > 0) {
-        let index = path.shift();
-        const children = options.getChildren(node, path);
+      let path2 = indexPath.slice();
+      while (path2.length > 0) {
+        let index = path2.shift();
+        const children = options.getChildren(node, path2);
         const child = children[index];
         if (!child) {
           return void 0;
@@ -61,12 +61,12 @@ var require_access = __commonJS({
       return _getPath(node, indexPath, options).slice(0, -1);
     }
     function _getPath(node, indexPath, options) {
-      let path = indexPath.slice();
+      let path2 = indexPath.slice();
       let result = [node];
-      while (path.length > 0) {
-        let index = path.shift();
+      while (path2.length > 0) {
+        let index = path2.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        const children = options.getChildren(node, path, context);
+        const children = options.getChildren(node, path2, context);
         const child = children[index];
         if (!child) {
           return result;
@@ -81,20 +81,20 @@ var require_access = __commonJS({
         const accessed = accessPath(node, indexPath, options);
         return accessed[accessed.length - 1];
       }
-      let path = indexPath.slice();
-      while (path.length > 0) {
-        let index = path.shift();
-        node = options.getChildren(node, path)[index];
+      let path2 = indexPath.slice();
+      while (path2.length > 0) {
+        let index = path2.shift();
+        node = options.getChildren(node, path2)[index];
       }
       return node;
     }
     function accessPath(node, indexPath, options) {
-      let path = indexPath.slice();
+      let path2 = indexPath.slice();
       let result = [node];
-      while (path.length > 0) {
-        let index = path.shift();
+      while (path2.length > 0) {
+        let index = path2.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        node = options.getChildren(node, path, context)[index];
+        node = options.getChildren(node, path2, context)[index];
         result.push(node);
       }
       return result;
@@ -608,40 +608,40 @@ var require_transformPath = __commonJS({
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.transformPath = transformPath;
     var sort_1 = require_sort();
-    function commonAncestor(path, otherPath) {
-      const length = Math.min(path.length, otherPath.length);
+    function commonAncestor(path2, otherPath) {
+      const length = Math.min(path2.length, otherPath.length);
       for (let i = 0; i < length; i++) {
-        if (path[i] !== otherPath[i]) {
-          return path.slice(0, i);
+        if (path2[i] !== otherPath[i]) {
+          return path2.slice(0, i);
         }
       }
-      return path.slice(0, length);
+      return path2.slice(0, length);
     }
-    function transformPath(path, operation, otherPath, count = 1) {
-      if (otherPath.length > path.length || (0, sort_1.comparePathsByComponent)(otherPath, path) > 0) {
-        return path;
+    function transformPath(path2, operation, otherPath, count = 1) {
+      if (otherPath.length > path2.length || (0, sort_1.comparePathsByComponent)(otherPath, path2) > 0) {
+        return path2;
       }
       if (otherPath.length === 0 && operation === "remove") {
         return void 0;
       }
-      const common = commonAncestor(path, otherPath);
-      const adjustmentIndex = common.length === path.length || common.length === otherPath.length ? common.length - 1 : common.length;
-      const pathValue = path[adjustmentIndex];
+      const common = commonAncestor(path2, otherPath);
+      const adjustmentIndex = common.length === path2.length || common.length === otherPath.length ? common.length - 1 : common.length;
+      const pathValue = path2[adjustmentIndex];
       const otherPathValue = otherPath[adjustmentIndex];
       if (operation === "insert" && otherPathValue <= pathValue) {
-        const newPath = [...path];
+        const newPath = [...path2];
         newPath[adjustmentIndex] += count;
         return newPath;
       } else if (operation === "remove") {
         if (otherPathValue === pathValue) {
           return void 0;
         } else if (otherPathValue < pathValue) {
-          const newPath = [...path];
+          const newPath = [...path2];
           newPath[adjustmentIndex] -= count;
           return newPath;
         }
       }
-      return path;
+      return path2;
     }
   }
 });
@@ -807,15 +807,15 @@ var require_operation = __commonJS({
       switch (operation.type) {
         case "insert": {
           const otherPath = parentPath.concat(operation.index);
-          return transformedPaths.map((path) => path ? (0, transformPath_1.transformPath)(path, "insert", otherPath, operation.nodes.length) : void 0);
+          return transformedPaths.map((path2) => path2 ? (0, transformPath_1.transformPath)(path2, "insert", otherPath, operation.nodes.length) : void 0);
         }
         case "remove": {
           const otherPaths = [...operation.indexes].reverse().map((index) => parentPath.concat(index));
-          return transformedPaths.map((path) => {
+          return transformedPaths.map((path2) => {
             for (const otherPath of otherPaths) {
-              path = path ? (0, transformPath_1.transformPath)(path, "remove", otherPath) : void 0;
+              path2 = path2 ? (0, transformPath_1.transformPath)(path2, "remove", otherPath) : void 0;
             }
-            return path;
+            return path2;
           });
         }
         case "removeThenInsert": {
@@ -952,22 +952,22 @@ var require_splice = __commonJS({
       return _spliceWithPathTracking(node, options);
     }
     function _spliceWithPathTracking(node, options) {
-      const { path, deleteCount = 0, nodes, track } = options;
-      if (path.length === 0) {
+      const { path: path2, deleteCount = 0, nodes, track } = options;
+      if (path2.length === 0) {
         throw new Error(`Can't splice at the root`);
       }
-      const pathsToRemove = getPathsToRemove(path, deleteCount);
-      const operations = (0, operation_1.getInsertionOperations)(path, nodes, (0, operation_1.getRemovalOperations)(pathsToRemove));
+      const pathsToRemove = getPathsToRemove(path2, deleteCount);
+      const operations = (0, operation_1.getInsertionOperations)(path2, nodes, (0, operation_1.getRemovalOperations)(pathsToRemove));
       const transformedPaths = track ? (0, operation_1.transformPathsByOperations)(track, operations) : [];
       return {
         node: (0, operation_1.applyOperations)(node, operations, options),
         paths: transformedPaths
       };
     }
-    function getPathsToRemove(path, deleteCount) {
+    function getPathsToRemove(path2, deleteCount) {
       let pathsToRemove = [];
-      let parentPath = path.slice(0, -1);
-      let index = path[path.length - 1];
+      let parentPath = path2.slice(0, -1);
+      let index = path2[path2.length - 1];
       for (let i = 0; i < deleteCount; i++) {
         pathsToRemove.push(parentPath.concat(index + i));
       }
@@ -981,7 +981,7 @@ var require_defineTree = __commonJS({
   "../../node_modules/tree-visit/lib/defineTree.js"(exports2) {
     "use strict";
     Object.defineProperty(exports2, "__esModule", { value: true });
-    exports2.defineTree = defineTree2;
+    exports2.defineTree = defineTree3;
     var access_1 = require_access();
     var diagram_1 = require_diagram();
     var entries_1 = require_entries();
@@ -1030,7 +1030,7 @@ var require_defineTree = __commonJS({
         this._getChildren = this.baseOptions.getChildren;
       }
     };
-    function defineTree2(getChildren) {
+    function defineTree3(getChildren) {
       return new Tree(getChildren, {});
     }
   }
@@ -1107,6 +1107,391 @@ var require_lib = __commonJS({
   }
 });
 
+// ../../node_modules/imfs/lib/types.js
+var require_types = __commonJS({
+  "../../node_modules/imfs/lib/types.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  }
+});
+
+// ../../node_modules/imfs/lib/node.js
+var require_node = __commonJS({
+  "../../node_modules/imfs/lib/node.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.Nodes = void 0;
+    function createFile(data, metadata) {
+      return { type: "file", data, metadata };
+    }
+    function createDirectory(children = {}, metadata) {
+      return { type: "directory", children, metadata };
+    }
+    function isFile(node) {
+      return node.type === "file";
+    }
+    function isDirectory(node) {
+      return node.type === "directory";
+    }
+    function getMetadata(node) {
+      return node.metadata;
+    }
+    function readDirectory(directory) {
+      return Object.keys(directory.children);
+    }
+    function getChild(directory, name) {
+      return directory.children[name];
+    }
+    function hasChild(directory, name) {
+      return name in directory.children;
+    }
+    exports2.Nodes = {
+      createDirectory,
+      createFile,
+      getChild,
+      getMetadata,
+      hasChild,
+      isDirectory,
+      isFile,
+      readDirectory
+    };
+  }
+});
+
+// ../../node_modules/imfs/lib/path.js
+var require_path = __commonJS({
+  "../../node_modules/imfs/lib/path.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.dirname = exports2.basename = exports2.extname = exports2.join = exports2.normalize = exports2.sep = void 0;
+    exports2.sep = "/";
+    function preserveLeadingAndTrailingSlash(original, updated) {
+      if (original.startsWith("/")) {
+        updated = "/" + updated;
+      }
+      if (updated[updated.length - 1] !== "/" && original.endsWith("/")) {
+        updated = updated + "/";
+      }
+      return updated;
+    }
+    function normalize(filename) {
+      const components = filename.split(exports2.sep).filter((component) => !!component);
+      let i = 0;
+      let length = components.length - 1;
+      while (i < length) {
+        if (components[i] === ".") {
+          components.splice(i, 1);
+          length--;
+        } else if (components[i] === ".." && i !== 0) {
+          components.splice(i - 1, 2);
+          length -= 2;
+          i -= 1;
+        } else if (components[i] === "" && components[i + 1] === "") {
+          components.splice(i, 1);
+          length--;
+        } else {
+          i++;
+        }
+      }
+      return preserveLeadingAndTrailingSlash(filename, components.join(exports2.sep));
+    }
+    exports2.normalize = normalize;
+    function join(...components) {
+      let result = normalize(components.join(exports2.sep));
+      if (result === "") {
+        result = ".";
+      }
+      return result;
+    }
+    exports2.join = join;
+    function extname(filename) {
+      const index = filename.lastIndexOf(".");
+      return index !== -1 ? filename.slice(index) : filename;
+    }
+    exports2.extname = extname;
+    function basename(filename, extname2) {
+      if (extname2 && filename.endsWith(extname2)) {
+        filename = filename.slice(0, -extname2.length);
+      }
+      let sepIndex = filename.lastIndexOf(exports2.sep);
+      if (sepIndex === filename.length - 1) {
+        filename = filename.slice(0, -1);
+        return filename.length > 1 ? basename(filename) : filename;
+      }
+      return filename.slice(sepIndex + 1);
+    }
+    exports2.basename = basename;
+    function dirname(filename) {
+      let base = basename(filename);
+      let result = filename.slice(0, -(base.length + 1));
+      if (result === "") {
+        if (filename.startsWith(exports2.sep)) {
+          result = exports2.sep;
+        } else {
+          result = ".";
+        }
+      }
+      return result;
+    }
+    exports2.dirname = dirname;
+  }
+});
+
+// ../../node_modules/imfs/lib/entries.js
+var require_entries2 = __commonJS({
+  "../../node_modules/imfs/lib/entries.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.Entries = void 0;
+    var node_1 = require_node();
+    var path_1 = require_path();
+    function getEntries(entry) {
+      const [pathname, node] = entry;
+      return node_1.Nodes.isDirectory(node) ? Object.entries(node.children).map(([key, value]) => [
+        (0, path_1.join)(pathname, key),
+        value
+      ]) : [];
+    }
+    function createEntry(pathname, node) {
+      return [pathname, node];
+    }
+    exports2.Entries = {
+      createEntry,
+      getEntries
+    };
+  }
+});
+
+// ../../node_modules/imfs/lib/volume/paths.js
+var require_paths = __commonJS({
+  "../../node_modules/imfs/lib/volume/paths.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.getNewAndParentName = exports2.normalizePathLikeInternal = exports2.getPathComponents = void 0;
+    var path_1 = require_path();
+    function getPathComponents(filepath) {
+      return getPathComponentsNormalized((0, path_1.normalize)(filepath));
+      function getPathComponentsNormalized(filepath2) {
+        if (filepath2.startsWith("..")) {
+          throw new Error(`Invalid path ${filepath2}, can't go up past root.`);
+        }
+        if (filepath2.startsWith(".") || filepath2.startsWith("/")) {
+          return getPathComponentsNormalized(filepath2.slice(1));
+        }
+        if (filepath2 === "")
+          return [];
+        return filepath2.split(path_1.sep).filter((component) => !!component);
+      }
+    }
+    exports2.getPathComponents = getPathComponents;
+    function normalizePathLikeInternal(pathlike) {
+      return typeof pathlike === "string" ? getPathComponents(pathlike) : pathlike;
+    }
+    exports2.normalizePathLikeInternal = normalizePathLikeInternal;
+    function getNewAndParentName(pathlike) {
+      const parentName = typeof pathlike === "string" ? (0, path_1.dirname)(pathlike) : pathlike.slice(0, -1);
+      const newName = typeof pathlike === "string" ? (0, path_1.basename)(pathlike) : pathlike[pathlike.length - 1];
+      return { parentName, newName };
+    }
+    exports2.getNewAndParentName = getNewAndParentName;
+  }
+});
+
+// ../../node_modules/imfs/lib/volume/read.js
+var require_read = __commonJS({
+  "../../node_modules/imfs/lib/volume/read.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.getMetadata = exports2.readDirectory = exports2.readFile = exports2.getNode = exports2.getNodeInternal = void 0;
+    var node_1 = require_node();
+    var path_1 = require_path();
+    var paths_1 = require_paths();
+    function getNodeInternal(root, pathlike, options) {
+      const components = (0, paths_1.normalizePathLikeInternal)(pathlike);
+      let i = 0;
+      let current = root;
+      while (i < components.length) {
+        let component = components[i];
+        if (current.type !== "directory") {
+          throw new Error(`File ${(0, path_1.join)(...components.slice(0, i))} is not a directory`);
+        }
+        let node = node_1.Nodes.getChild(current, component);
+        if (!node) {
+          if (options.makeIntermediateDirectoryMetadata) {
+            const child = node_1.Nodes.createDirectory({}, options.makeIntermediateDirectoryMetadata((0, path_1.join)(...components.slice(0, i + 1))));
+            current.children[component] = child;
+            node = child;
+          } else if (options.makeIntermediateDirectories) {
+            const child = node_1.Nodes.createDirectory();
+            current.children[component] = child;
+            node = child;
+          } else {
+            throw new Error(`File ${(0, path_1.join)(...components.slice(0, i + 1))} not found`);
+          }
+        }
+        current = node;
+        i++;
+      }
+      return current;
+    }
+    exports2.getNodeInternal = getNodeInternal;
+    function getNode(root, pathlike) {
+      return getNodeInternal(root, pathlike, {});
+    }
+    exports2.getNode = getNode;
+    function readFile(root, pathlike) {
+      const components = (0, paths_1.normalizePathLikeInternal)(pathlike);
+      const node = getNode(root, components);
+      if (!node_1.Nodes.isFile(node)) {
+        throw new Error(`Can't read, ${(0, path_1.join)(...components)} not a file`);
+      }
+      return node.data;
+    }
+    exports2.readFile = readFile;
+    function readDirectory(root, pathlike) {
+      const components = (0, paths_1.normalizePathLikeInternal)(pathlike);
+      const node = getNode(root, components);
+      if (!node_1.Nodes.isDirectory(node)) {
+        throw new Error(`Can't read, ${(0, path_1.join)(...components)} not a directory`);
+      }
+      return node_1.Nodes.readDirectory(node);
+    }
+    exports2.readDirectory = readDirectory;
+    function getMetadata(root, pathlike) {
+      const components = (0, paths_1.normalizePathLikeInternal)(pathlike);
+      const node = getNode(root, components);
+      return node.metadata;
+    }
+    exports2.getMetadata = getMetadata;
+  }
+});
+
+// ../../node_modules/imfs/lib/volume/write.js
+var require_write = __commonJS({
+  "../../node_modules/imfs/lib/volume/write.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.create = exports2.setMetadata = exports2.removeFile = exports2.makeDirectory = exports2.writeFile = exports2.setNode = void 0;
+    var node_1 = require_node();
+    var paths_1 = require_paths();
+    var read_1 = require_read();
+    function setNode(root, pathlike, node, options) {
+      const { parentName, newName } = (0, paths_1.getNewAndParentName)(pathlike);
+      const parent = (0, read_1.getNodeInternal)(root, parentName, options !== null && options !== void 0 ? options : {});
+      if (!node_1.Nodes.isDirectory(parent)) {
+        throw new Error(`Can't create ${newName}, ${parentName} not a directory`);
+      }
+      parent.children[newName] = node;
+    }
+    exports2.setNode = setNode;
+    function writeFile(root, pathlike, data, options) {
+      var _a;
+      setNode(root, pathlike, node_1.Nodes.createFile(data, (_a = options) === null || _a === void 0 ? void 0 : _a.metadata), options);
+    }
+    exports2.writeFile = writeFile;
+    function makeDirectory(root, pathlike, options) {
+      var _a;
+      const { parentName, newName } = (0, paths_1.getNewAndParentName)(pathlike);
+      const parent = (0, read_1.getNodeInternal)(root, parentName, options !== null && options !== void 0 ? options : {});
+      if (!node_1.Nodes.isDirectory(parent)) {
+        throw new Error(`Can't create ${newName}, ${parentName} not a directory`);
+      }
+      const existing = node_1.Nodes.getChild(parent, newName);
+      if (existing && node_1.Nodes.isDirectory(parent.children[newName])) {
+        return;
+      }
+      parent.children[newName] = node_1.Nodes.createDirectory({}, (_a = options) === null || _a === void 0 ? void 0 : _a.metadata);
+    }
+    exports2.makeDirectory = makeDirectory;
+    function removeFile(root, pathlike) {
+      const { parentName, newName } = (0, paths_1.getNewAndParentName)(pathlike);
+      const parent = (0, read_1.getNode)(root, parentName);
+      if (!node_1.Nodes.isDirectory(parent)) {
+        throw new Error(`Can't remove file ${newName}, ${parentName} not a directory`);
+      }
+      delete parent.children[newName];
+    }
+    exports2.removeFile = removeFile;
+    function setMetadata(root, pathlike, metadata) {
+      const node = (0, read_1.getNode)(root, pathlike);
+      node.metadata = metadata;
+    }
+    exports2.setMetadata = setMetadata;
+    function create(options) {
+      return node_1.Nodes.createDirectory({}, options && "metadata" in options ? options.metadata : void 0);
+    }
+    exports2.create = create;
+  }
+});
+
+// ../../node_modules/imfs/lib/volume.js
+var require_volume = __commonJS({
+  "../../node_modules/imfs/lib/volume.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.Volume = void 0;
+    var paths_1 = require_paths();
+    var read_1 = require_read();
+    var write_1 = require_write();
+    exports2.Volume = {
+      // paths
+      getPathComponents: paths_1.getPathComponents,
+      // read
+      getMetadata: read_1.getMetadata,
+      getNode: read_1.getNode,
+      readDirectory: read_1.readDirectory,
+      readFile: read_1.readFile,
+      // write
+      create: write_1.create,
+      makeDirectory: write_1.makeDirectory,
+      removeFile: write_1.removeFile,
+      setMetadata: write_1.setMetadata,
+      setNode: write_1.setNode,
+      writeFile: write_1.writeFile
+    };
+  }
+});
+
+// ../../node_modules/imfs/lib/index.js
+var require_lib2 = __commonJS({
+  "../../node_modules/imfs/lib/index.js"(exports2) {
+    "use strict";
+    var __createBinding = exports2 && exports2.__createBinding || (Object.create ? function(o, m, k, k2) {
+      if (k2 === void 0) k2 = k;
+      Object.defineProperty(o, k2, { enumerable: true, get: function() {
+        return m[k];
+      } });
+    } : function(o, m, k, k2) {
+      if (k2 === void 0) k2 = k;
+      o[k2] = m[k];
+    });
+    var __setModuleDefault = exports2 && exports2.__setModuleDefault || (Object.create ? function(o, v) {
+      Object.defineProperty(o, "default", { enumerable: true, value: v });
+    } : function(o, v) {
+      o["default"] = v;
+    });
+    var __exportStar = exports2 && exports2.__exportStar || function(m, exports3) {
+      for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports3, p)) __createBinding(exports3, m, p);
+    };
+    var __importStar = exports2 && exports2.__importStar || function(mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) {
+        for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+      }
+      __setModuleDefault(result, mod);
+      return result;
+    };
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.path = void 0;
+    __exportStar(require_types(), exports2);
+    __exportStar(require_node(), exports2);
+    __exportStar(require_entries2(), exports2);
+    __exportStar(require_volume(), exports2);
+    exports2.path = __importStar(require_path());
+  }
+});
+
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
@@ -1119,10 +1504,19 @@ __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,
+  resourceToMediaItem: () => resourceToMediaItem,
   useAIManager: () => useAIManager,
+  useActivityEvents: () => useActivityEvents,
+  useActivityEventsForManager: () => useActivityEventsForManager,
   useAnyEphemeralUserData: () => useAnyEphemeralUserData,
   useAnyNoyaManager: () => useAnyNoyaManager,
   useAnyNoyaStateContext: () => useAnyNoyaStateContext,
@@ -1131,11 +1525,14 @@ __export(src_exports, {
   useAssets: () => useAssets,
   useCallableAITools: () => useCallableAITools,
   useColorScheme: () => useColorScheme,
+  useConnectedUser: () => useConnectedUser,
+  useConnectedUsers: () => useConnectedUsers,
   useConnectedUsersManager: () => useConnectedUsersManager,
   useCurrentUserId: () => useCurrentUserId,
   useIOManager: () => useIOManager,
   useInputs: () => useInputs,
   useIsInitialized: () => useIsInitialized,
+  useIsProcessing: () => useIsProcessing,
   useManagedHistory: () => useManagedHistory,
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
@@ -1145,6 +1542,8 @@ __export(src_exports, {
   usePipelineManager: () => usePipelineManager,
   usePublish: () => usePublish,
   useRegisterAITool: () => useRegisterAITool,
+  useResourceManager: () => useResourceManager,
+  useResources: () => useResources,
   useSecret: () => useSecret,
   useSecretManager: () => useSecretManager,
   useSecrets: () => useSecrets,
@@ -1156,12 +1555,7 @@ module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("@noya-app/state-manager"), module.exports);
 
 // src/ai.ts
-var import_react8 = 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_react19 = require("react");
 
 // ../../node_modules/@sinclair/typebox/build/esm/type/symbols/symbols.mjs
 var TransformKind = Symbol.for("TypeBox.Transform");
@@ -1718,14 +2112,14 @@ function Number2(options = {}) {
 }
 
 // ../../node_modules/@sinclair/typebox/build/esm/type/string/string.mjs
-function String(options = {}) {
+function String2(options = {}) {
   return { ...options, [Kind]: "String", type: "string" };
 }
 
 // ../../node_modules/@sinclair/typebox/build/esm/type/template-literal/syntax.mjs
 function* FromUnion(syntax) {
   const trim = syntax.trim().replace(/"|'/g, "");
-  return trim === "boolean" ? yield Boolean() : trim === "number" ? yield Number2() : trim === "bigint" ? yield BigInt2() : trim === "string" ? yield String() : yield (() => {
+  return trim === "boolean" ? yield Boolean() : trim === "number" ? yield Number2() : trim === "bigint" ? yield BigInt2() : trim === "string" ? yield String2() : yield (() => {
     const literals = trim.split("|").map((literal) => Literal(literal.trim()));
     return literals.length === 0 ? Never() : literals.length === 1 ? literals[0] : UnionEvaluated(literals);
   })();
@@ -2814,7 +3208,7 @@ function FromPromise3(left, right) {
   return IsStructuralRight(right) ? StructuralRight(left, right) : type_exports.IsObject(right) && IsObjectPromiseLike(right) ? ExtendsResult.True : !type_exports.IsPromise(right) ? ExtendsResult.False : IntoBooleanResult(Visit3(left.item, right.item));
 }
 function RecordKey(schema) {
-  return PatternNumberExact in schema.patternProperties ? Number2() : PatternStringExact in schema.patternProperties ? String() : Throw("Unknown record key pattern");
+  return PatternNumberExact in schema.patternProperties ? Number2() : PatternStringExact in schema.patternProperties ? String2() : Throw("Unknown record key pattern");
 }
 function RecordValue(schema) {
   return PatternNumberExact in schema.patternProperties ? schema.patternProperties[PatternNumberExact] : PatternStringExact in schema.patternProperties ? schema.patternProperties[PatternStringExact] : Throw("Unable to get record value schema");
@@ -2834,8 +3228,8 @@ function FromRecord(left, right) {
   return IsStructuralRight(right) ? StructuralRight(left, right) : type_exports.IsObject(right) ? FromObjectRight(left, right) : !type_exports.IsRecord(right) ? ExtendsResult.False : Visit3(RecordValue(left), RecordValue(right));
 }
 function FromRegExp(left, right) {
-  const L = type_exports.IsRegExp(left) ? String() : left;
-  const R = type_exports.IsRegExp(right) ? String() : right;
+  const L = type_exports.IsRegExp(left) ? String2() : left;
+  const R = type_exports.IsRegExp(right) ? String2() : right;
   return Visit3(L, R);
 }
 function FromStringRight(left, right) {
@@ -3471,30 +3865,30 @@ var TransformDecodeBuilder = class {
   constructor(schema) {
     this.schema = schema;
   }
-  Decode(decode) {
-    return new TransformEncodeBuilder(this.schema, decode);
+  Decode(decode2) {
+    return new TransformEncodeBuilder(this.schema, decode2);
   }
 };
 var TransformEncodeBuilder = class {
   schema;
   decode;
-  constructor(schema, decode) {
+  constructor(schema, decode2) {
     this.schema = schema;
-    this.decode = decode;
+    this.decode = decode2;
   }
-  EncodeTransform(encode, schema) {
-    const Encode = (value) => schema[TransformKind].Encode(encode(value));
+  EncodeTransform(encode2, schema) {
+    const Encode = (value) => schema[TransformKind].Encode(encode2(value));
     const Decode = (value) => this.decode(schema[TransformKind].Decode(value));
     const Codec = { Encode, Decode };
     return { ...schema, [TransformKind]: Codec };
   }
-  EncodeSchema(encode, schema) {
-    const Codec = { Decode: this.decode, Encode: encode };
+  EncodeSchema(encode2, schema) {
+    const Codec = { Decode: this.decode, Encode: encode2 };
     return { ...schema, [TransformKind]: Codec };
   }
-  Encode(encode) {
+  Encode(encode2) {
     const schema = CloneType(this.schema);
-    return IsTransform(schema) ? this.EncodeTransform(encode, schema) : this.EncodeSchema(encode, schema);
+    return IsTransform(schema) ? this.EncodeTransform(encode2, schema) : this.EncodeSchema(encode2, schema);
   }
 };
 function Transform(schema) {
@@ -3560,7 +3954,7 @@ __export(type_exports3, {
   Rest: () => Rest,
   ReturnType: () => ReturnType,
   Strict: () => Strict,
-  String: () => String,
+  String: () => String2,
   Symbol: () => Symbol2,
   TemplateLiteral: () => TemplateLiteral,
   Transform: () => Transform,
@@ -3587,6 +3981,134 @@ function Void(options = {}) {
 // ../../node_modules/@sinclair/typebox/build/esm/type/type/index.mjs
 var Type = type_exports3;
 
+// ../noya-schemas/src/nullable.ts
+var Nullable = (schema) => Type.Union([Type.Null(), schema]);
+
+// ../noya-schemas/src/activityEventSchema.ts
+var userSelectSchema = Type.Object({
+  id: Type.String(),
+  name: Nullable(Type.String()),
+  email: Nullable(Type.String()),
+  image: Nullable(Type.String())
+});
+var workspaceSelectSchema = Type.Object({
+  id: Type.String(),
+  name: Type.String()
+});
+var fileSelectSchema = Type.Object({
+  id: Type.String(),
+  name: Nullable(Type.String())
+});
+var resourceSelectSchema = Type.Object({
+  id: Type.String(),
+  path: Type.String(),
+  type: Type.Union([
+    Type.Literal("asset"),
+    Type.Literal("file"),
+    Type.Literal("fileVersion"),
+    Type.Literal("directory"),
+    Type.Literal("resource")
+  ])
+});
+var siteSelectSchema = Type.Object({
+  id: Type.String(),
+  subdomain: Nullable(Type.String())
+});
+var activityEventSchema = Type.Object({
+  id: Type.String(),
+  createdAt: Type.String(),
+  actorId: Nullable(Type.String()),
+  actor: Type.Optional(userSelectSchema),
+  type: Type.Union([
+    Type.Literal("file"),
+    Type.Literal("resource"),
+    Type.Literal("site"),
+    Type.Literal("snapshot"),
+    Type.Literal("restore")
+  ]),
+  workspaceId: Nullable(Type.String()),
+  workspace: Type.Optional(workspaceSelectSchema),
+  fileId: Nullable(Type.String()),
+  file: Type.Optional(fileSelectSchema),
+  fileVersionId: Nullable(Type.String()),
+  resourceId: Nullable(Type.String()),
+  resource: Type.Optional(resourceSelectSchema),
+  siteId: Nullable(Type.String()),
+  site: Type.Optional(siteSelectSchema),
+  previousData: Nullable(Type.Any()),
+  currentData: Nullable(Type.Any()),
+  metadata: Nullable(Type.Any()),
+  userAgent: Nullable(Type.String())
+});
+
+// ../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()),
+  width: Type.Union([Type.Null(), Type.Number()]),
+  height: Type.Union([Type.Null(), Type.Number()]),
+  userId: Type.Union([Type.Null(), 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 +4129,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"
   }
@@ -3677,25 +4204,25 @@ var jsonSchema = Type.Recursive(
 );
 
 // ../noya-schemas/src/input.ts
-function Nullable(type) {
+function Nullable2(type) {
   return Type.Union([type, Type.Null()], { default: null });
 }
 var inputSchemaBase = {
   id: Type.String({ format: "uuid", default: "" }),
   stableId: Type.String({ format: "uuid", default: "" }),
   name: Type.String(),
-  description: Nullable(Type.String()),
+  description: Nullable2(Type.String()),
   required: Type.Boolean({ default: false })
 };
 var fileInputSchema = Type.Object({
   ...inputSchemaBase,
   kind: Type.Literal("file"),
-  toolId: Nullable(Type.String())
+  toolId: Nullable2(Type.String())
 });
 var dataInputSchema = Type.Object({
   ...inputSchemaBase,
   kind: Type.Literal("data"),
-  schema: Nullable(jsonSchema)
+  schema: Nullable2(jsonSchema)
 });
 var secretInputSchema = Type.Object({
   ...inputSchemaBase,
@@ -3705,7 +4232,7 @@ var secretInputSchema = Type.Object({
       default: null
     })
   ),
-  authScope: Type.Optional(Nullable(Type.String()))
+  authScope: Type.Optional(Nullable2(Type.String()))
 });
 var inputSchema = Type.Union(
   [fileInputSchema, dataInputSchema, secretInputSchema],
@@ -3902,17 +4429,17 @@ var ValueErrorType;
 // ../../node_modules/@sinclair/typebox/build/esm/value/delta/delta.mjs
 var Insert = Object2({
   type: Literal("insert"),
-  path: String(),
+  path: String2(),
   value: Unknown()
 });
 var Update = Object2({
   type: Literal("update"),
-  path: String(),
+  path: String2(),
   value: Unknown()
 });
 var Delete3 = Object2({
   type: Literal("delete"),
-  path: String()
+  path: String2()
 });
 var Edit = Union([Insert, Update, Delete3]);
 
@@ -3939,6 +4466,142 @@ function findAllDefs(schema) {
   });
 }
 
+// ../noya-schemas/src/resourceSchema.ts
+var baseSchemaProperties = {
+  id: Type.String(),
+  stableId: Type.String(),
+  path: Type.String(),
+  createdAt: Type.String(),
+  updatedAt: Type.String(),
+  accessibleByFileId: Nullable(Type.String()),
+  accessibleByFile: Type.Optional(
+    Type.Object({
+      id: Type.String(),
+      name: Type.String(),
+      toolId: Type.String()
+    })
+  ),
+  accessibleByFileVersionId: Nullable(Type.String()),
+  url: Type.Optional(Type.String())
+};
+var uploadableAssetSchema = Type.Object({
+  content: Type.String(),
+  contentType: Type.String(),
+  encoding: Type.Union([Type.Literal("utf-8"), Type.Literal("base64")])
+});
+var assetResourceSchema = Type.Object({
+  ...baseSchemaProperties,
+  type: Type.Literal("asset"),
+  assetId: Type.String()
+});
+var assetResourceCreateSchema = Type.Object({
+  ...baseSchemaProperties,
+  type: Type.Literal("asset"),
+  assetId: Type.Optional(Type.String()),
+  asset: Type.Optional(uploadableAssetSchema)
+});
+var fileResourceSchema = Type.Object({
+  ...baseSchemaProperties,
+  type: Type.Literal("file"),
+  fileId: Type.String()
+});
+var directoryResourceSchema = Type.Object({
+  ...baseSchemaProperties,
+  type: Type.Literal("directory")
+});
+var nestedResourceSchema = Type.Object({
+  ...baseSchemaProperties,
+  type: Type.Literal("resource"),
+  fileId: Type.String(),
+  resourceId: Type.String()
+});
+var resourceSchema = Type.Union(
+  [
+    assetResourceSchema,
+    fileResourceSchema,
+    directoryResourceSchema,
+    nestedResourceSchema
+  ],
+  {
+    discriminator: "type"
+  }
+);
+var resourceCreateSchema = Type.Union(
+  [
+    assetResourceCreateSchema,
+    fileResourceSchema,
+    directoryResourceSchema,
+    nestedResourceSchema
+  ],
+  {
+    discriminator: "type"
+  }
+);
+var flatResourceSchema = Type.Object({
+  ...baseSchemaProperties,
+  type: Type.Union([
+    Type.Literal("asset"),
+    Type.Literal("file"),
+    Type.Literal("directory"),
+    Type.Literal("resource")
+  ]),
+  assetId: Nullable(Type.String()),
+  fileId: Nullable(Type.String()),
+  resourceId: Nullable(Type.String())
+});
+function diffResourceMaps(resourceMap, newResourceMap, idProperty) {
+  const oldIdToPathMap = new Map(
+    Object.entries(resourceMap).map(([path2, entity]) => [
+      entity[idProperty],
+      path2
+    ])
+  );
+  const newIdToPathMap = new Map(
+    Object.entries(newResourceMap).map(([path2, entity]) => [
+      entity[idProperty],
+      path2
+    ])
+  );
+  const oldIds = new Set(
+    Object.values(resourceMap).map((entity) => entity[idProperty])
+  );
+  const newIds = new Set(
+    Object.values(newResourceMap).map((entity) => entity[idProperty])
+  );
+  const sameIds = oldIds.intersection(newIds);
+  const addedResources = Object.values(newResourceMap).filter(
+    (entity) => !oldIds.has(entity[idProperty])
+  );
+  const removedResources = Object.values(resourceMap).filter(
+    (entity) => !newIds.has(entity[idProperty])
+  );
+  const modifiedResources = [...sameIds].flatMap((id) => {
+    const oldResource = Object.values(resourceMap).find(
+      (resource) => resource[idProperty] === id
+    );
+    const newResource = Object.values(newResourceMap).find(
+      (resource) => resource[idProperty] === id
+    );
+    if (!oldResource || !newResource) return [];
+    const oldPath = oldIdToPathMap.get(id);
+    const newPath = newIdToPathMap.get(id);
+    const oldAssetId = oldResource.type === "asset" ? oldResource.assetId : void 0;
+    const newAssetId = newResource.type === "asset" ? newResource.assetId : void 0;
+    const changedProperties = {
+      ...oldPath !== newPath ? { path: newPath } : {},
+      ...oldAssetId !== newAssetId ? { assetId: newAssetId } : {},
+      ...newResource.type === "asset" && newResource.asset !== void 0 ? { asset: newResource.asset } : {}
+    };
+    if (Object.keys(changedProperties).length === 0) return [];
+    return [{ id, stableId: newResource.stableId, ...changedProperties }];
+  });
+  return { addedResources, removedResources, modifiedResources };
+}
+
+// ../noya-schemas/src/resourceTree.ts
+var import_imfs = __toESM(require_lib2());
+var import_tree_visit2 = __toESM(require_lib());
+
 // ../noya-schemas/src/index.ts
 function validateUUID(value) {
   return /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
@@ -3948,13 +4611,18 @@ function validateUUID(value) {
 format_exports.Set("color", () => true);
 format_exports.Set("uuid", validateUUID);
 
+// src/NoyaStateContext.tsx
+var import_observable = require("@noya-app/observable");
+var import_react_utils3 = require("@noya-app/react-utils");
+var import_react18 = __toESM(require("react"));
+
 // 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_react17 = 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_react16 = require("react");
 var import_client2 = require("react-dom/client");
 
 // src/components/ErrorOverlay.tsx
@@ -4032,14 +4700,122 @@ var ErrorOverlay = React.memo(function ErrorOverlay2({
 });
 
 // src/inspector/useStateInspector.tsx
-var import_react4 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_react_utils2 = require("@noya-app/react-utils");
 
+// ../noya-utils/src/base64.ts
+function decode(base64String) {
+  const binaryString = atob(base64String);
+  const length = binaryString.length;
+  const bytes = new Uint8Array(length);
+  for (let i = 0; i < length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+}
+function encode(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  const length = bytes.byteLength;
+  for (let i = 0; i < length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return globalThis.btoa(binary);
+}
+var Base64 = {
+  encode,
+  decode
+};
+
+// ../noya-utils/src/invert.ts
+function invert(record) {
+  return Object.fromEntries(
+    Object.entries(record).map(([type, extension]) => [extension, type])
+  );
+}
+
+// ../noya-utils/src/fileType.ts
+var FILE_TYPE_TO_EXTENSION = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp",
+  "image/svg+xml": "svg",
+  "application/pdf": "pdf",
+  "application/zip": "zip",
+  "application/x-7z-compressed": "7z"
+};
+var FILE_EXTENSION_TO_TYPE = invert(FILE_TYPE_TO_EXTENSION);
+
+// ../noya-utils/src/memoizeDeep.ts
+var TOKEN_OBJECT = Symbol("object");
+var TOKEN_ARRAY = Symbol("array");
+var TOKEN_KEY = Symbol("key");
+var TOKEN_END = Symbol("end");
+var TOKEN_PRIMITIVE = Symbol("primitive");
+var TOKEN_ARGSEP = Symbol("argsep");
+
+// ../../node_modules/uuid/dist/esm-node/rng.js
+var import_crypto = __toESM(require("crypto"));
+var rnds8Pool = new Uint8Array(256);
+var poolPtr = rnds8Pool.length;
+function rng() {
+  if (poolPtr > rnds8Pool.length - 16) {
+    import_crypto.default.randomFillSync(rnds8Pool);
+    poolPtr = 0;
+  }
+  return rnds8Pool.slice(poolPtr, poolPtr += 16);
+}
+
+// ../../node_modules/uuid/dist/esm-node/regex.js
+var regex_default = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+// ../../node_modules/uuid/dist/esm-node/validate.js
+function validate(uuid2) {
+  return typeof uuid2 === "string" && regex_default.test(uuid2);
+}
+var validate_default = validate;
+
+// ../../node_modules/uuid/dist/esm-node/stringify.js
+var byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).substr(1));
+}
+function stringify(arr, offset = 0) {
+  const uuid2 = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  if (!validate_default(uuid2)) {
+    throw TypeError("Stringified UUID is invalid");
+  }
+  return uuid2;
+}
+var stringify_default = stringify;
+
+// ../../node_modules/uuid/dist/esm-node/v4.js
+function v4(options, buf, offset) {
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset = offset || 0;
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return stringify_default(rnds);
+}
+var v4_default = v4;
+
+// ../noya-utils/src/uuid.ts
+function uuid() {
+  return v4_default();
+}
+
 // 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_react14 = __toESM(require("react"));
+var import_react_inspector6 = require("react-inspector");
 
 // src/useObservable.ts
 var import_react = require("react");
@@ -4068,57 +4844,1214 @@ 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;
 };
-function ToggleButton({
-  showInspector,
-  setShowInspector,
-  theme,
-  anchor
-}) {
-  const isRightAnchor = anchor === "right";
-  const rightIcon = /* @__PURE__ */ import_react3.default.createElement(
+var getStateInspectorBorderColor = (colorScheme) => {
+  return colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+};
+
+// src/inspector/sections/ActivityEventsSection.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_inspector2 = require("react-inspector");
+
+// src/inspector/StateInspectorButton.tsx
+var import_react3 = __toESM(require("react"));
+function StateInspectorButton({
+  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
+  );
+}
+
+// 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
+}) {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "span",
+    {
+      role: "button",
+      onClick,
+      style: {
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        fontFamily: "Menlo, monospace",
+        ...style
+      }
+    },
+    "\u25BC"
+  );
+}
+
+// src/inspector/StateInspectorDisclosureSection.tsx
+function StateInspectorDisclosureSection({
+  open,
+  setOpen,
+  title,
+  right,
+  children,
+  colorScheme,
+  isFirst,
+  style
+}) {
+  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_react5.default.createElement(
+    "div",
+    {
+      style: {
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column",
+        ...style
+      }
+    },
+    /* @__PURE__ */ import_react5.default.createElement(
+      "div",
+      {
+        onClick: () => setOpen?.(!open),
+        style: {
+          cursor: "default",
+          fontSize: "12px",
+          padding: "4px 10px",
+          display: "flex",
+          alignItems: "center",
+          ...!isFirst && { borderTop: `1px solid ${borderColor}` },
+          ...open && { borderBottom: `1px solid ${borderColor}` }
+        }
+      },
+      setOpen && /* @__PURE__ */ import_react5.default.createElement(
+        StateInspectorArrow,
+        {
+          expanded: open,
+          style: {
+            fontSize: theme.ARROW_FONT_SIZE,
+            marginRight: theme.ARROW_MARGIN_RIGHT + 1,
+            color: theme.ARROW_COLOR
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react5.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      right
+    ),
+    open && children
+  );
+}
+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,
+  style,
+  variant
+}) {
+  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${solidBorderColor}`,
+        fontSize: "12px",
+        fontFamily: "Menlo, monospace",
+        padding: "2px 12px 1px",
+        display: "flex",
+        alignItems: "center",
+        background: variant === "up" ? "rgba(0,255,0,0.1)" : variant === "down" ? "transparent" : selected ? "rgb(59 130 246 / 15%)" : void 0,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style
+      }
+    },
+    /* @__PURE__ */ import_react6.default.createElement(
+      "span",
+      {
+        style: {
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block"
+        }
+      },
+      children
+    )
+  );
+}
+
+// src/inspector/sections/ActivityEventsSection.tsx
+function isResourceStreamFilter(streamFilter) {
+  return typeof streamFilter === "object" && "resourceId" in streamFilter;
+}
+function isResourceActivityEvent(activityEvent) {
+  return typeof activityEvent === "object" && activityEvent !== null && "type" in activityEvent && activityEvent.type === "resource" && "resourceId" in activityEvent && typeof activityEvent.resourceId === "string";
+}
+function ActivityEventsSection({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  activityEventsContainerRef,
+  activityEventsManager
+}) {
+  const [streamFilter, setStreamFilter] = (0, import_react7.useState)("all");
+  const streamFilterType = isResourceStreamFilter(streamFilter) ? "resource" : "all";
+  const theme = getStateInspectorTheme(colorScheme);
+  const activityEvents = useActivityEventsForManager(
+    showEvents ? streamFilter : void 0,
+    activityEventsManager
+  );
+  return /* @__PURE__ */ import_react7.default.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showEvents,
+      setOpen: setShowEvents,
+      title: `Activity Events`,
+      colorScheme
+    },
+    /* @__PURE__ */ import_react7.default.createElement(StateInspectorDisclosureRowInner, { ref: activityEventsContainerRef }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "4px 12px", display: "flex", gap: "4px" } }, /* @__PURE__ */ import_react7.default.createElement(
+      "select",
+      {
+        name: "streamFilterType",
+        value: streamFilterType,
+        style: { flex: "0 0 auto", height: "19px" },
+        onChange: (e) => {
+          const value = e.target.value;
+          if (value === "all") {
+            setStreamFilter("all");
+          } else {
+            setStreamFilter({ resourceId: "" });
+          }
+        }
+      },
+      /* @__PURE__ */ import_react7.default.createElement("option", { value: "all" }, "All"),
+      /* @__PURE__ */ import_react7.default.createElement("option", { value: "resource" }, "Resource")
+    ), isResourceStreamFilter(streamFilter) && /* @__PURE__ */ import_react7.default.createElement(
+      "input",
+      {
+        name: "resourceId",
+        type: "text",
+        placeholder: "Resource ID",
+        value: streamFilter.resourceId,
+        style: {
+          flex: "1 1 auto",
+          height: "19px",
+          padding: "0px 4px",
+          boxSizing: "border-box"
+        },
+        onChange: (e) => setStreamFilter({ ...streamFilter, resourceId: e.target.value })
+      }
+    )), activityEvents?.map((activityEvent, index) => /* @__PURE__ */ import_react7.default.createElement(
+      StateInspectorRow,
+      {
+        key: index,
+        colorScheme,
+        style: {
+          padding: "0px 12px 1px"
+        }
+      },
+      /* @__PURE__ */ import_react7.default.createElement(import_react_inspector2.ObjectInspector, { data: activityEvent, theme }),
+      streamFilterType === "all" && isResourceActivityEvent(activityEvent) && /* @__PURE__ */ import_react7.default.createElement(
+        StateInspectorButton,
+        {
+          theme,
+          onClick: () => {
+            setStreamFilter({ resourceId: activityEvent.resourceId });
+          }
+        },
+        "Watch this resource"
+      )
+    )), !activityEvents && /* @__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 activity events")
+    ))
+  );
+}
+
+// src/inspector/sections/EventsSection.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_inspector4 = require("react-inspector");
+
+// src/inspector/ObjectRootLabel.tsx
+var import_react8 = __toESM(require("react"));
+var import_react_inspector3 = require("react-inspector");
+var ObjectRootLabel = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ import_react8.default.createElement("span", null, /* @__PURE__ */ import_react8.default.createElement(import_react_inspector3.ObjectName, { name }), /* @__PURE__ */ import_react8.default.createElement("span", null, ": "), /* @__PURE__ */ import_react8.default.createElement(import_react_inspector3.ObjectPreview, { data }));
+  }
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "\u2191" : "\u2193";
+    return /* @__PURE__ */ import_react8.default.createElement("span", null, /* @__PURE__ */ import_react8.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_react8.default.createElement(import_react_inspector3.ObjectPreview, { data }));
+  } else {
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_inspector3.ObjectPreview, { data });
+  }
+};
+
+// src/inspector/sections/EventsSection.tsx
+function EventsSection({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  eventsContainerRef,
+  connectionEvents
+}) {
+  const theme = getStateInspectorTheme(colorScheme);
+  return /* @__PURE__ */ import_react9.default.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showEvents,
+      setOpen: setShowEvents,
+      title: "Events",
+      colorScheme
+    },
+    /* @__PURE__ */ import_react9.default.createElement(StateInspectorDisclosureRowInner, { ref: eventsContainerRef }, connectionEvents?.map(
+      (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react9.default.createElement(StateInspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react9.default.createElement(
+        StateInspectorRow,
+        {
+          key: index,
+          colorScheme,
+          variant: event.type === "send" ? "up" : "down",
+          style: {
+            padding: "0px 12px 1px"
+          }
+        },
+        /* @__PURE__ */ import_react9.default.createElement(
+          import_react_inspector4.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_react9.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react9.default.createElement(
+                import_react_inspector4.ObjectLabel,
+                {
+                  direction,
+                  name,
+                  data,
+                  isNonenumerable
+                }
+              );
+            }
+          }
+        )
+      )
+    ), !connectionEvents && /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          fontSize: "12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        }
+      },
+      /* @__PURE__ */ import_react9.default.createElement("span", null, "No recorded events")
+    ))
+  );
+}
+
+// src/inspector/sections/HistorySection.tsx
+var import_react10 = __toESM(require("react"));
+var import_react_inspector5 = require("react-inspector");
+
+// 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 File([buffer], file.name, { type: file.type });
+          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_react10.useRef)(null);
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
+  (0, import_react10.useEffect)(() => {
+    if (ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+  (0, import_react10.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_react10.default.createElement(
+    StateInspectorDisclosureSection,
+    {
+      open: showHistory,
+      setOpen: setShowHistory,
+      title: "History",
+      colorScheme,
+      right: /* @__PURE__ */ import_react10.default.createElement(
+        "span",
+        {
+          style: {
+            display: "flex",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ import_react10.default.createElement(
+          StateInspectorButton,
+          {
+            disabled: !historySnapshot.canUndo,
+            theme,
+            onClick: () => {
+              multiplayerStateManager.undo();
+            }
+          },
+          /* @__PURE__ */ import_react10.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react10.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 20 20"
+            },
+            /* @__PURE__ */ import_react10.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_react10.default.createElement(
+          StateInspectorButton,
+          {
+            disabled: !historySnapshot.canRedo,
+            theme,
+            onClick: () => {
+              multiplayerStateManager.redo();
+            }
+          },
+          /* @__PURE__ */ import_react10.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react10.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 20 20"
+            },
+            /* @__PURE__ */ import_react10.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_react10.default.createElement(StateInspectorDisclosureRowInner, { ref }, /* @__PURE__ */ import_react10.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_react10.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_react10.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_react10.default.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          entry.metadata.name,
+          Object.keys(rest).length > 0 && /* @__PURE__ */ import_react10.default.createElement(import_react_inspector5.ObjectInspector, { data: rest, theme })
+        ),
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react10.default.createElement(
+          "pre",
+          {
+            key: j,
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          patch.op === "add" && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react10.default.createElement(import_react_inspector5.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react10.default.createElement(import_react_inspector5.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react10.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/StateInspectorTitleLabel.tsx
+var import_react11 = __toESM(require("react"));
+function StateInspectorTitleLabel({
+  children
+}) {
+  return /* @__PURE__ */ import_react11.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
+}
+
+// src/inspector/StateInspectorToggleButton.tsx
+var import_react12 = __toESM(require("react"));
+function StateInspectorToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+  anchor
+}) {
+  const isRightAnchor = anchor === "right";
+  const rightIcon = /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4128,7 +6061,7 @@ function ToggleButton({
       stroke: "currentColor",
       className: "size-6"
     },
-    /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       "path",
       {
         strokeLinecap: "round",
@@ -4137,7 +6070,7 @@ function ToggleButton({
       }
     )
   );
-  const leftIcon = /* @__PURE__ */ import_react3.default.createElement(
+  const leftIcon = /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4147,7 +6080,7 @@ function ToggleButton({
       stroke: "currentColor",
       className: "size-6"
     },
-    /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       "path",
       {
         strokeLinecap: "round",
@@ -4156,7 +6089,7 @@ function ToggleButton({
       }
     )
   );
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "span",
     {
       role: "button",
@@ -4177,103 +6110,34 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    showInspector ? "Hide Inspector" : /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
-  );
-}
-function DisclosureSection({
-  open,
-  setOpen,
-  title,
-  right,
-  children,
-  colorScheme,
-  isFirst,
-  style
-}) {
-  const theme = colorScheme === "light" ? lightTheme : darkTheme;
-  const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
-  return /* @__PURE__ */ import_react3.default.createElement(
-    "div",
-    {
-      style: {
-        flex: open ? "1 1 0" : "0",
-        display: "flex",
-        flexDirection: "column",
-        ...style
-      }
-    },
-    /* @__PURE__ */ import_react3.default.createElement(
-      "div",
-      {
-        onClick: () => setOpen?.(!open),
-        style: {
-          cursor: "default",
-          fontSize: "12px",
-          padding: "4px 10px",
-          display: "flex",
-          alignItems: "center",
-          ...!isFirst && { borderTop: `1px solid ${borderColor}` },
-          ...open && { borderBottom: `1px solid ${borderColor}` }
-        }
-      },
-      setOpen && /* @__PURE__ */ import_react3.default.createElement(
-        Arrow,
-        {
-          expanded: open,
-          style: {
-            fontSize: theme.ARROW_FONT_SIZE,
-            marginRight: theme.ARROW_MARGIN_RIGHT + 1,
-            color: theme.ARROW_COLOR
-          }
-        }
-      ),
-      /* @__PURE__ */ import_react3.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
-      right
-    ),
-    open && children
+    showInspector ? "Hide Inspector" : /* @__PURE__ */ import_react12.default.createElement("span", { style: { width: "12px", height: "12px" } }, isRightAnchor ? rightIcon : leftIcon)
   );
 }
-function InspectorRow({
-  children,
-  colorScheme,
-  selected,
-  style,
-  variant
-}) {
-  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ import_react3.default.createElement(
-    "div",
-    {
-      style: {
-        borderBottom: `1px solid ${solidBorderColor}`,
-        fontSize: "12px",
-        fontFamily: "Menlo, monospace",
-        padding: "2px 12px 1px",
-        display: "flex",
-        alignItems: "center",
-        background: variant === "up" ? "rgba(0,255,0,0.1)" : variant === "down" ? "transparent" : selected ? "rgb(59 130 246 / 15%)" : void 0,
-        // background:
-        //   colorScheme === "light"
-        //     ? "rgba(0,0,0,0.05)"
-        //     : "rgba(255,255,255,0.05)",
-        ...style
+
+// src/inspector/useLocalStorageState.tsx
+var import_react13 = __toESM(require("react"));
+var localStorage = typeof window !== "undefined" ? window.localStorage : null;
+function useLocalStorageState(key, defaultValue) {
+  const [state, setState] = import_react13.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);
       }
-    },
-    /* @__PURE__ */ import_react3.default.createElement(
-      "span",
-      {
-        style: {
-          fontFamily: "Menlo, monospace",
-          fontSize: "11px",
-          borderRadius: 4,
-          display: "inline-block"
-        }
-      },
-      children
-    )
-  );
+    }
+    return result;
+  });
+  const setLocalStorageState = (value) => {
+    localStorage?.setItem(key, JSON.stringify(value));
+    setState(value);
+  };
+  return [state, setLocalStorageState];
 }
-var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+
+// src/inspector/StateInspector.tsx
 var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector2({
   noyaManager,
   colorScheme = "light",
@@ -4289,17 +6153,19 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     ephemeralUserDataManager,
     connectionEventManager,
     taskManager,
-    ioManager
+    ioManager,
+    resourceManager,
+    activityEventsManager
   } = noyaManager;
-  const [didMount, setDidMount] = import_react3.default.useState(false);
+  const [didMount, setDidMount] = import_react14.default.useState(false);
   const tasks = useObservable(taskManager.tasks$);
   const inputs = useObservable(ioManager.inputs$);
   const outputTransforms = useObservable(ioManager.outputTransforms$);
-  (0, import_react3.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = import_react3.default.useRef(null);
-  const historyContainerRef = import_react3.default.useRef(null);
+  const eventsContainerRef = import_react14.default.useRef(null);
+  const activityEventsContainerRef = import_react14.default.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -4332,6 +6198,10 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     "noya-multiplayer-react-show-assets",
     false
   );
+  const [showResources, setShowResources] = useLocalStorageState(
+    "noya-multiplayer-react-show-resources",
+    false
+  );
   const [showSecrets, setShowSecrets] = useLocalStorageState(
     "noya-multiplayer-react-show-secrets",
     false
@@ -4344,8 +6214,12 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     "noya-multiplayer-react-show-output-transforms",
     false
   );
+  const [showActivityEvents, setShowActivityEvents] = useLocalStorageState(
+    "noya-multiplayer-react-show-activity-events",
+    false
+  );
   const connectionEvents = useObservable(connectionEventManager.events$);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
@@ -4356,6 +6230,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
   const ephemeral = useObservable(ephemeralUserDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
+  const resources = useObservable(resourceManager.resources$);
+  const resourcesInitialized = useObservable(resourceManager.isInitialized$);
   const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
   const secretsInitialized = useObservable(secretManager.isInitialized$);
@@ -4366,25 +6242,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 +6263,24 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
     zIndex: 9999,
     lineHeight: "13px"
   };
+  const handleExportAll = (0, import_react14.useCallback)(async () => {
+    const buffer = await exportAll(noyaManager);
+    (0, import_react_utils.downloadBlob)(new Blob([buffer]), "state.zip");
+  }, [noyaManager]);
+  const handleImportAll = (0, import_react14.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_react14.default.createElement(
       "div",
       {
         ...props,
@@ -4418,8 +6292,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react3.default.createElement(
-        ToggleButton,
+      /* @__PURE__ */ import_react14.default.createElement(
+        StateInspectorToggleButton,
         {
           showInspector,
           setShowInspector,
@@ -4429,7 +6303,7 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
       )
     );
   }
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(
     "div",
     {
       ...props,
@@ -4438,8 +6312,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.default.createElement(
+      StateInspectorDisclosureSection,
       {
         isFirst: true,
         open: showUsers,
@@ -4450,8 +6324,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_react14.default.createElement(
+          StateInspectorToggleButton,
           {
             showInspector,
             setShowInspector,
@@ -4460,14 +6334,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_react14.default.createElement(StateInspectorDisclosureRowInner, { style: { flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react14.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_react14.default.createElement(
           "img",
           {
             src: user.image,
@@ -4488,7 +6362,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_react14.default.createElement(
         "div",
         {
           style: {
@@ -4499,13 +6373,13 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react14.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.default.createElement(
+      StateInspectorDisclosureSection,
       {
-        title: /* @__PURE__ */ import_react3.default.createElement(TitleLabel, null, "Data", /* @__PURE__ */ import_react3.default.createElement(
+        title: /* @__PURE__ */ import_react14.default.createElement(StateInspectorTitleLabel, null, "Data", /* @__PURE__ */ import_react14.default.createElement(
           ColoredDot,
           {
             type: multipeerStateInitialized ? "success" : "error"
@@ -4514,16 +6388,18 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react3.default.createElement(
+        right: /* @__PURE__ */ import_react14.default.createElement(
           "span",
           {
             style: {
               display: "flex",
-              gap: "4px"
+              gap: "12px"
             }
           },
-          /* @__PURE__ */ import_react3.default.createElement(
-            SmallButton,
+          /* @__PURE__ */ import_react14.default.createElement(StateInspectorButton, { theme, onClick: handleImportAll }, "Import"),
+          /* @__PURE__ */ import_react14.default.createElement(StateInspectorButton, { theme, onClick: handleExportAll }, "Export"),
+          /* @__PURE__ */ import_react14.default.createElement(
+            StateInspectorButton,
             {
               theme,
               onClick: () => {
@@ -4531,170 +6407,59 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
               }
             },
             "Reset"
-          )
-        )
-      },
-      /* @__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,
-        {
-          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,
-        {
-          name: "schema",
-          data: multiplayerStateManager.schema,
-          theme
-        }
-      )))
-    ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
-      {
-        open: showHistory,
-        setOpen: setShowHistory,
-        title: "History",
-        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)))
-        ))
+          )
+        )
+      },
+      /* @__PURE__ */ import_react14.default.createElement(StateInspectorDisclosureRowInner, null, /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react14.default.createElement(
+        import_react_inspector6.ObjectInspector,
+        {
+          name: multiplayerStateManager.schema ? "state" : void 0,
+          data: state,
+          theme
+        }
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { colorScheme }, /* @__PURE__ */ import_react14.default.createElement(
+        import_react_inspector6.ObjectInspector,
+        {
+          name: "schema",
+          data: multiplayerStateManager.schema,
+          theme
+        }
       )))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.default.createElement(
+      HistorySection,
+      {
+        showHistory,
+        setShowHistory,
+        colorScheme,
+        historySnapshot,
+        multiplayerStateManager
+      }
+    ),
+    /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorTitleLabel, null, "Assets (", assets.length, ")", /* @__PURE__ */ import_react14.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_react14.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
+          {
+            theme,
+            onClick: async () => {
+              const ok = confirm(
+                "Are you sure you want to delete all assets?"
+              );
+              if (!ok) return;
+              await Promise.all(
+                assets.map((asset) => assetManager.delete(asset.id))
+              );
+            }
+          },
+          "Delete all"
+        ), /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4706,8 +6471,8 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             }
           },
           "Reload"
-        ), /* @__PURE__ */ import_react3.default.createElement(
-          SmallButton,
+        ), /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4730,8 +6495,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_react14.default.createElement(StateInspectorDisclosureRowInner, null, assets.map((asset) => /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react14.default.createElement(import_react_inspector6.ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ import_react14.default.createElement(
+        StateInspectorButton,
         {
           theme,
           onClick: () => assetManager.delete(asset.id)
@@ -4739,15 +6504,99 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         "Delete"
       ))))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.default.createElement(
+      StateInspectorDisclosureSection,
+      {
+        title: /* @__PURE__ */ import_react14.default.createElement(StateInspectorTitleLabel, null, "Resources (", resources.length, ")", /* @__PURE__ */ import_react14.default.createElement(ColoredDot, { type: resourcesInitialized ? "success" : "error" })),
+        colorScheme,
+        open: showResources,
+        setOpen: setShowResources,
+        right: /* @__PURE__ */ import_react14.default.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
+          {
+            theme,
+            onClick: async () => {
+              const ok = confirm(
+                "Are you sure you want to delete all resources?"
+              );
+              if (!ok) return;
+              await Promise.all(
+                resources.map(
+                  (resource) => resourceManager.deleteResource({ id: resource.id })
+                )
+              );
+            }
+          },
+          "Delete all"
+        ), /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
+          {
+            theme,
+            onClick: async () => {
+              const path2 = prompt("Enter directory path") || uuid();
+              await resourceManager.createResource({
+                type: "directory",
+                path: path2
+              });
+            }
+          },
+          "Create Directory"
+        ), /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
+          {
+            theme,
+            onClick: async () => {
+              const file = await uploadFile();
+              resourceManager.createResource({
+                type: "asset",
+                path: file.name || uuid(),
+                asset: {
+                  content: Base64.encode(await file.arrayBuffer()),
+                  contentType: file.type,
+                  encoding: "base64"
+                }
+              });
+            }
+          },
+          "Create Asset"
+        ))
+      },
+      /* @__PURE__ */ import_react14.default.createElement(StateInspectorDisclosureRowInner, null, resources?.map((resource) => /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { key: resource.id, colorScheme }, /* @__PURE__ */ import_react14.default.createElement(
+        import_react_inspector6.ObjectInspector,
+        {
+          name: resource.path,
+          data: resource,
+          theme
+        }
+      ), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ import_react14.default.createElement(
+        StateInspectorButton,
+        {
+          theme,
+          onClick: () => resourceManager.deleteResource({ id: resource.id })
+        },
+        "Delete"
+      ), /* @__PURE__ */ import_react14.default.createElement(
+        StateInspectorButton,
+        {
+          theme,
+          onClick: () => {
+            const path2 = prompt("Enter new path", resource.path);
+            if (!path2) return;
+            resourceManager.updateResource({ id: resource.id, path: path2 });
+          }
+        },
+        "Rename"
+      )))))
+    ),
+    /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorTitleLabel, null, "Secrets", /* @__PURE__ */ import_react14.default.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
         colorScheme,
         open: showSecrets,
         setOpen: setShowSecrets,
-        right: /* @__PURE__ */ import_react3.default.createElement(
-          SmallButton,
+        right: /* @__PURE__ */ import_react14.default.createElement(
+          StateInspectorButton,
           {
             theme,
             onClick: () => {
@@ -4761,8 +6610,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_react14.default.createElement(StateInspectorDisclosureRowInner, null, secrets.map((secret) => /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ import_react14.default.createElement(import_react_inspector6.ObjectInspector, { data: secret, theme }), /* @__PURE__ */ import_react14.default.createElement(
+        StateInspectorButton,
         {
           theme,
           onClick: () => secretManager.deleteSecret(secret.id)
@@ -4771,15 +6620,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
       ))))
     ),
     " ",
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorTitleLabel, null, "Inputs", /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorDisclosureRowInner, null, inputs?.map((input) => /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ import_react14.default.createElement(import_react_inspector6.ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ import_react14.default.createElement(
         "div",
         {
           style: {
@@ -4790,15 +6639,15 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No inputs")
+        /* @__PURE__ */ import_react14.default.createElement("span", null, "No inputs")
       ))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorTitleLabel, null, "Output Transforms", /* @__PURE__ */ import_react14.default.createElement(
           ColoredDot,
           {
             type: outputTransformsInitialized ? "success" : "error"
@@ -4806,7 +6655,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_react14.default.createElement(StateInspectorDisclosureRowInner, null, outputTransforms?.map((transform) => /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ import_react14.default.createElement(import_react_inspector6.ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ import_react14.default.createElement(
         "div",
         {
           style: {
@@ -4817,19 +6666,19 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", null, "No output transforms")
+        /* @__PURE__ */ import_react14.default.createElement("span", null, "No output transforms")
       ))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorDisclosureRowInner, null, tasks?.map((task) => /* @__PURE__ */ import_react14.default.createElement(
+        StateInspectorRow,
         {
           key: task.id,
           colorScheme,
@@ -4837,8 +6686,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_react14.default.createElement(
+          import_react_inspector6.ObjectInspector,
           {
             name: task.name,
             data: task.payload,
@@ -4847,16 +6696,16 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         )
       )))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
+    /* @__PURE__ */ import_react14.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_react14.default.createElement(StateInspectorDisclosureRowInner, null, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react14.default.createElement(StateInspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react14.default.createElement(
+        import_react_inspector6.ObjectInspector,
         {
           name: key,
           data: value,
@@ -4865,188 +6714,28 @@ var StateInspector = (0, import_react_utils.memoGeneric)(function StateInspector
         }
       ))))
     ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      DisclosureSection,
-      {
-        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")
-      ))
-    )
-  );
-});
-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",
+    /* @__PURE__ */ import_react14.default.createElement(
+      ActivityEventsSection,
       {
-        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
+        colorScheme,
+        activityEventsContainerRef,
+        showEvents: showActivityEvents,
+        setShowEvents: setShowActivityEvents,
+        activityEventsManager
       }
-    },
-    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"
+    ),
+    /* @__PURE__ */ import_react14.default.createElement(
+      EventsSection,
+      {
+        connectionEvents,
+        colorScheme,
+        eventsContainerRef,
+        showEvents,
+        setShowEvents
       }
-    }
+    )
   );
-}
-function TitleLabel({ children }) {
-  return /* @__PURE__ */ import_react3.default.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
-}
+});
 
 // src/inspector/useStateInspector.tsx
 function createShadowRootElement() {
@@ -5063,7 +6752,7 @@ function useStateInspector({
   colorScheme,
   anchor
 }) {
-  const [root, setRoot] = import_react4.default.useState(null);
+  const [root, setRoot] = import_react15.default.useState(null);
   (0, import_react_utils2.useIsomorphicLayoutEffect)(() => {
     if (disabled) return;
     const { host, container } = createShadowRootElement();
@@ -5077,7 +6766,7 @@ function useStateInspector({
   (0, import_react_utils2.useIsomorphicLayoutEffect)(() => {
     if (!root) return;
     root.render(
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react15.default.createElement(
         StateInspector,
         {
           colorScheme,
@@ -5090,23 +6779,23 @@ function useStateInspector({
 }
 
 // src/hooks.ts
-function useSyncStateManager(stateManager, path) {
-  const getSnapshot = (0, import_react5.useCallback)(
-    () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
-    [stateManager, path]
+function useSyncStateManager(stateManager, path2) {
+  const getSnapshot = (0, import_react16.useCallback)(
+    () => typeof path2 === "string" ? stateManager.getState(path2) : stateManager.getState(),
+    [stateManager, path2]
   );
-  return (0, import_react5.useSyncExternalStore)(
+  return (0, import_react16.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_react16.useState)(
+    () => new import_state_manager2.StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = (0, import_react5.useCallback)(
+  const setState = (0, import_react16.useCallback)(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -5142,7 +6831,7 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react5.useSyncExternalStore)(
+  return (0, import_react16.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
@@ -5150,18 +6839,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_react16.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_react16.useMemo)(() => {
     return {
       noyaManager,
       taskManager: noyaManager.taskManager,
@@ -5180,8 +6869,8 @@ function useMultiplayerState(initialState, options) {
       assets
     };
   }, [noyaManager, assets]);
-  const syncRef = (0, import_react5.useRef)(sync);
-  (0, import_react5.useEffect)(() => {
+  const syncRef = (0, import_react16.useRef)(sync);
+  (0, import_react16.useEffect)(() => {
     if (syncRef.current) {
       return syncRef.current({ noyaManager });
     }
@@ -5196,13 +6885,13 @@ function useMultiplayerState(initialState, options) {
 }
 function useErrorOverlay(noyaManager) {
   const unrecoverableError = useObservable(noyaManager.unrecoverableError);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react16.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_react16.createElement)(ErrorOverlay, { error: unrecoverableError }));
     return () => {
       root.unmount();
       el.remove();
@@ -5220,7 +6909,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)
@@ -5243,14 +6932,14 @@ function parseAppDataParameter(options) {
 function getAppData(initialState, schema, options) {
   const resolvedInitialState = initialState instanceof Function ? initialState() : initialState;
   let appData = parseAppDataParameter(options) ?? createDefaultAppData(resolvedInitialState);
-  if (options?.overrideExistingState) {
+  if (options?.overrideExistingState || appData.initialState === null) {
     appData.initialState = resolvedInitialState;
   }
   appData.initialState = enforceSchema(appData.initialState, schema);
   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 +6948,16 @@ function useNoyaState(...args) {
       theme,
       viewType
     }
-  ] = (0, import_react6.useState)(() => {
+  ] = (0, import_react17.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_react17.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 +6965,16 @@ function useNoyaState(...args) {
     sync: options?.sync ?? sync
   });
   const [, , extras] = result;
-  const mergedExtras = (0, import_react6.useMemo)(() => {
+  const mergedExtras = (0, import_react17.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_react18.createContext)(void 0);
 function useAnyNoyaStateContext() {
-  const value = (0, import_react7.useContext)(AnyNoyaStateContext);
+  const value = (0, import_react18.useContext)(AnyNoyaStateContext);
   if (!value) {
     throw new Error(
       "useNoyaStateContext must be used within a NoyaStateProvider"
@@ -5311,7 +7000,7 @@ function useAssets() {
 }
 function useAsset(id) {
   const { noyaManager } = useAnyNoyaStateContext();
-  const observable = (0, import_react7.useMemo)(
+  const observable = (0, import_react18.useMemo)(
     () => noyaManager.assetManager.assets$.map(
       (assets) => assets.find((a) => a.id === id)
     ),
@@ -5322,7 +7011,7 @@ function useAsset(id) {
 function useAssetManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   const isInitialized = useObservable(noyaManager.assetManager.isInitialized$);
-  return (0, import_react7.useMemo)(
+  return (0, import_react18.useMemo)(
     () => ({
       create: noyaManager.assetManager.create,
       delete: noyaManager.assetManager.delete,
@@ -5347,7 +7036,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_react18.useCallback)((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 function useInputs() {
@@ -5365,7 +7054,7 @@ function useIOManager() {
 function usePublish(callback) {
   const { noyaManager } = useAnyNoyaStateContext();
   const stableCallback = (0, import_react_utils3.useStableCallback)(callback);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     noyaManager.publishingManager.setPublishingEnabled(true);
     noyaManager.publishingManager.getFilesToPublish = stableCallback;
     return () => {
@@ -5376,7 +7065,7 @@ function usePublish(callback) {
 }
 function useIsInitialized() {
   const { noyaManager, viewType } = useAnyNoyaStateContext();
-  const isInitializedObservable = (0, import_react7.useMemo)(
+  const isInitializedObservable = (0, import_react18.useMemo)(
     () => import_observable.Observable.combine(
       [
         ...viewType === "preview" ? [] : [noyaManager.multiplayerStateManager.isInitialized$],
@@ -5393,18 +7082,156 @@ function usePipelineManager() {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.pipelineManager;
 }
-var ConnectedUsersContext = (0, import_react7.createContext)(void 0);
+var ConnectedUsersContext = (0, import_react18.createContext)(void 0);
 function useConnectedUsersManager() {
-  return (0, import_react7.useContext)(ConnectedUsersContext);
+  return (0, import_react18.useContext)(ConnectedUsersContext);
+}
+function useConnectedUsers() {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(connectedUsersManager?.connectedUsers$);
+}
+function useConnectedUser(userId) {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(
+    connectedUsersManager?.connectedUsers$,
+    (0, import_react18.useCallback)(
+      (users) => {
+        return users.find((user) => {
+          const prefix = user.id.slice(0, 8);
+          return userId?.includes(prefix);
+        });
+      },
+      [userId]
+    )
+  );
 }
-var AnyEphemeralUserDataManagerContext = (0, import_react7.createContext)(void 0);
+var AnyEphemeralUserDataManagerContext = (0, import_react18.createContext)(void 0);
 function useAnyEphemeralUserData() {
-  return (0, import_react7.useContext)(AnyEphemeralUserDataManagerContext);
+  return (0, import_react18.useContext)(AnyEphemeralUserDataManagerContext);
 }
 function useCurrentUserId() {
   const connectedUsersManager = useConnectedUsersManager();
   return useObservable(connectedUsersManager?.currentUserId$);
 }
+function useIsProcessing() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.isProcessing$);
+}
+function useResourceManager() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.resourceManager;
+}
+function resourceToMediaItem(resource) {
+  switch (resource.type) {
+    case "asset":
+      return { kind: "asset", id: resource.id, assetId: resource.assetId };
+    case "file":
+      return { kind: "noyaFile", id: resource.id, fileId: resource.fileId };
+    default:
+      return { kind: "folder", id: resource.id };
+  }
+}
+function useResources({
+  shouldDeleteAssets = true
+} = {}) {
+  const resourceManager = useResourceManager();
+  const assetManager = useAssetManager();
+  const resourceMap = useObservable(
+    resourceManager.optimisticResources$,
+    (0, import_react18.useCallback)((resources) => {
+      return Object.fromEntries(
+        resources.map((resource) => [resource.path, resource])
+      );
+    }, [])
+  );
+  const setResourceMap = (0, import_react18.useCallback)(
+    async (action) => {
+      const newResourceMap = action instanceof Function ? action(resourceMap) : action;
+      const { addedResources, removedResources, modifiedResources } = diffResourceMaps(resourceMap, newResourceMap, "id");
+      if (addedResources.length > 0) {
+        const payload = addedResources.map((resource) => {
+          switch (resource.type) {
+            case "directory":
+              return {
+                path: resource.path,
+                type: "directory"
+              };
+            case "asset":
+              return {
+                path: resource.path,
+                type: "asset",
+                assetId: resource.assetId,
+                asset: resource.asset
+              };
+            case "file":
+              return {
+                path: resource.path,
+                type: "file",
+                fileId: resource.fileId
+              };
+            case "resource":
+              return {
+                path: resource.path,
+                type: "resource",
+                fileId: resource.fileId,
+                resourceId: resource.resourceId
+              };
+            default:
+              throw new Error(
+                `Unknown resource type: ${resource.type}`
+              );
+          }
+        });
+        await resourceManager.createResource(payload);
+      }
+      for (const resource of removedResources) {
+        await resourceManager.deleteResource({ id: resource.id });
+        if (shouldDeleteAssets && resource.type === "asset") {
+          try {
+            await assetManager.delete(resource.assetId);
+          } catch (error) {
+            console.error("Failed to delete asset:", error);
+          }
+        }
+      }
+      await Promise.all(
+        modifiedResources.map(
+          ({ id, path: path2, assetId, asset }) => resourceManager.updateResource({
+            id,
+            path: path2,
+            assetId,
+            asset
+          })
+        )
+      );
+    },
+    [resourceMap, resourceManager, shouldDeleteAssets, assetManager]
+  );
+  return [resourceMap, setResourceMap];
+}
+var emptyArray = [];
+function useActivityEvents(streamFilter) {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useActivityEventsForManager(
+    streamFilter,
+    noyaManager.activityEventsManager
+  );
+}
+function useActivityEventsForManager(streamFilter, activityEventsManager) {
+  const [streamId, setStreamId] = (0, import_react18.useState)(void 0);
+  const stableStreamFilter = (0, import_react_utils3.useJsonMemo)(streamFilter);
+  (0, import_react18.useEffect)(() => {
+    if (!stableStreamFilter) return;
+    const streamId2 = activityEventsManager.subscribe(stableStreamFilter);
+    setStreamId(streamId2);
+    return () => {
+      setStreamId(void 0);
+      activityEventsManager.unsubscribe(streamId2);
+    };
+  }, [activityEventsManager, stableStreamFilter]);
+  const observable = streamId ? activityEventsManager.getStream(streamId) : void 0;
+  return useObservable(observable) ?? emptyArray;
+}
 var FallbackUntilInitialized = ({
   children,
   fallback
@@ -5421,6 +7248,24 @@ function createNoyaContext({
 }) {
   const NoyaStateContext = AnyNoyaStateContext;
   const EphemeralUserDataManagerContext = AnyEphemeralUserDataManagerContext;
+  function NoyaContextProvider({
+    children,
+    contextValue
+  }) {
+    return /* @__PURE__ */ import_react18.default.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react18.default.createElement(
+      ConnectedUsersContext.Provider,
+      {
+        value: contextValue.noyaManager.connectedUsersManager
+      },
+      /* @__PURE__ */ import_react18.default.createElement(
+        EphemeralUserDataManagerContext.Provider,
+        {
+          value: contextValue.noyaManager.ephemeralUserDataManager
+        },
+        children
+      )
+    ));
+  }
   function NoyaStateProvider({
     children,
     initialState,
@@ -5437,7 +7282,7 @@ function createNoyaContext({
         ...options
       }
     );
-    const contextValue = (0, import_react7.useMemo)(
+    const contextValue = (0, import_react18.useMemo)(
       () => ({
         noyaManager,
         theme,
@@ -5445,53 +7290,41 @@ function createNoyaContext({
       }),
       [noyaManager, theme, viewType]
     );
-    return /* @__PURE__ */ import_react7.default.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react7.default.createElement(
-      ConnectedUsersContext.Provider,
-      {
-        value: noyaManager.connectedUsersManager
-      },
-      /* @__PURE__ */ import_react7.default.createElement(
-        EphemeralUserDataManagerContext.Provider,
-        {
-          value: noyaManager.ephemeralUserDataManager
-        },
-        options.fallback !== void 0 ? /* @__PURE__ */ import_react7.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
-      )
-    ));
+    return /* @__PURE__ */ import_react18.default.createElement(NoyaContextProvider, { contextValue }, options.fallback !== void 0 ? /* @__PURE__ */ import_react18.default.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children);
   }
-  function useValue(path, options) {
+  function useValue(path2, options) {
     const { noyaManager } = useAnyNoyaStateContext();
-    let actualPath = typeof path === "function" || !path ? "" : path;
-    const mappedObservable = (0, import_react7.useMemo)(() => {
-      if (typeof path === "function") {
-        return noyaManager.multiplayerStateManager.optimisticState$.map(path, {
+    let actualPath = typeof path2 === "function" || !path2 ? "" : path2;
+    const mappedObservable = (0, import_react18.useMemo)(() => {
+      if (typeof path2 === "function") {
+        return noyaManager.multiplayerStateManager.optimisticState$.map(path2, {
           isEqual: options?.isEqual
         });
       }
       return noyaManager.multiplayerStateManager.optimisticState$;
-    }, [noyaManager, path, options?.isEqual]);
+    }, [noyaManager, path2, options?.isEqual]);
     const value = useObservable(mappedObservable, actualPath);
     return value;
   }
-  function useSetValue(path) {
+  function useSetValue(path2) {
     const { noyaManager } = useAnyNoyaStateContext();
-    const setValue = (0, import_react7.useCallback)(
+    const setValue = (0, import_react18.useCallback)(
       (...args) => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
         noyaManager.multiplayerStateManager.setStateAtPath(
           metadata,
-          path ?? "",
+          path2 ?? "",
           value
         );
       },
-      [noyaManager, path]
+      [noyaManager, path2]
     );
     return setValue;
   }
   function useValueState(...args) {
-    const [selector, options, path] = args.length >= 1 && typeof args[0] === "function" ? [args[0], args[1], void 0] : [void 0, void 0, args[0]];
-    const value = useValue(selector ?? path ?? "", options);
-    const setValue = useSetValue(path ?? "");
+    const [selector, options, path2] = args.length >= 1 && typeof args[0] === "function" ? [args[0], args[1], void 0] : [void 0, void 0, args[0]];
+    const value = useValue(selector ?? path2 ?? "", options);
+    const setValue = useSetValue(path2 ?? "");
     return [value, setValue];
   }
   function useStateManager() {
@@ -5499,7 +7332,7 @@ function createNoyaContext({
     return noyaManager.multiplayerStateManager;
   }
   function useEphemeralUserDataManager() {
-    const ephemeralUserData = (0, import_react7.useContext)(EphemeralUserDataManagerContext);
+    const ephemeralUserData = (0, import_react18.useContext)(EphemeralUserDataManagerContext);
     if (!ephemeralUserData) {
       throw new Error(
         "useEphemeralUserData must be used within a NoyaStateProvider"
@@ -5516,7 +7349,7 @@ function createNoyaContext({
   }
   function useSetLeftMenuItems(leftMenuItems) {
     const { menuManager } = useNoyaManager();
-    (0, import_react7.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       if (leftMenuItems) {
         menuManager.setLeftMenuItems(leftMenuItems);
       }
@@ -5528,7 +7361,7 @@ function createNoyaContext({
   }
   function useSetRightMenuItems(rightMenuItems) {
     const { menuManager } = useNoyaManager();
-    (0, import_react7.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       if (rightMenuItems) {
         menuManager.setRightMenuItems(rightMenuItems);
       }
@@ -5536,25 +7369,26 @@ function createNoyaContext({
   }
   function useHandleMenuItem(callback) {
     const { menuManager } = useNoyaManager();
-    (0, import_react7.useEffect)(() => {
+    (0, import_react18.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_react18.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_react18.useCallback)(() => {
     }, []);
     useHandleMenuItem(onSelectMenuItem ?? noop);
   }
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
+    NoyaContextProvider,
     useValue,
     useSetValue,
     useValueState,
@@ -5574,7 +7408,7 @@ function createNoyaContext({
 // src/ai.ts
 function useRegisterAITool(tool) {
   const aiManager = useAIManager();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     return aiManager.registerTool(tool);
   }, [aiManager, tool]);
 }
@@ -5586,7 +7420,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_react20 = __toESM(require("react"));
 function shouldShow(hideAfter, updatedAt) {
   return !!updatedAt && Date.now() - updatedAt < hideAfter;
 }
@@ -5596,7 +7430,7 @@ var UserPointerInternal = (0, import_react_utils4.memoGeneric)(function UserPoin
   hideAfter = 5e3,
   renderUserPointer
 }) {
-  const observable = (0, import_react9.useMemo)(() => {
+  const observable = (0, import_react20.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 +7438,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_react20.useState)(0);
   const updatedAt = metadata?.updatedAt ?? 0;
   const show = shouldShow(hideAfter, updatedAt);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!show) return;
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
@@ -5629,9 +7463,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_react20.default.createElement(import_react20.default.Fragment, null, connectedUsers.map((user) => {
     if (user.id === currentUserId) return null;
-    return /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(
       UserPointerInternal,
       {
         key: user.id,
@@ -5644,17 +7478,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,10 +7565,19 @@ var WebSocketConnection = class {
   WebSocketConnection,
   createDefaultAppData,
   createNoyaContext,
+  decodeAll,
+  encodeAll,
   enforceSchema,
+  exportAll,
+  fetchAssetMap,
   getAppData,
+  importAll,
   parseAppDataParameter,
+  replaceDeep,
+  resourceToMediaItem,
   useAIManager,
+  useActivityEvents,
+  useActivityEventsForManager,
   useAnyEphemeralUserData,
   useAnyNoyaManager,
   useAnyNoyaStateContext,
@@ -5743,11 +7586,14 @@ var WebSocketConnection = class {
   useAssets,
   useCallableAITools,
   useColorScheme,
+  useConnectedUser,
+  useConnectedUsers,
   useConnectedUsersManager,
   useCurrentUserId,
   useIOManager,
   useInputs,
   useIsInitialized,
+  useIsProcessing,
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
@@ -5757,6 +7603,8 @@ var WebSocketConnection = class {
   usePipelineManager,
   usePublish,
   useRegisterAITool,
+  useResourceManager,
+  useResources,
   useSecret,
   useSecretManager,
   useSecrets,