@noya-app/noya-multiplayer-react 0.1.51 → 0.1.52

package/dist/index.mjs

@@ -71,8 +71,8 @@ var require_sort = __commonJS({
   "../../node_modules/tree-visit/lib/sort.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.sortIndexPaths = exports.compareIndexPaths = void 0;
-    function compareIndexPaths(a, b) {
+    exports.sortPaths = exports.comparePathsByComponent = void 0;
+    function comparePathsByComponent(a, b) {
       for (let i = 0; i < Math.min(a.length, b.length); i++) {
         if (a[i] < b[i])
           return -1;
@@ -81,11 +81,11 @@ var require_sort = __commonJS({
       }
       return a.length - b.length;
     }
-    exports.compareIndexPaths = compareIndexPaths;
-    function sortIndexPaths(indexPaths) {
-      return indexPaths.sort(compareIndexPaths);
+    exports.comparePathsByComponent = comparePathsByComponent;
+    function sortPaths(indexPaths) {
+      return [...indexPaths].sort(comparePathsByComponent);
     }
-    exports.sortIndexPaths = sortIndexPaths;
+    exports.sortPaths = sortPaths;
   }
 });
 
@@ -94,23 +94,25 @@ var require_ancestors = __commonJS({
   "../../node_modules/tree-visit/lib/ancestors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ancestorIndexPaths = void 0;
+    exports.ancestorPaths = void 0;
     var sort_1 = require_sort();
-    function ancestorIndexPaths(indexPaths) {
-      const paths = /* @__PURE__ */ new Map();
-      const sortedIndexPaths = (0, sort_1.sortIndexPaths)(indexPaths);
+    function ancestorPaths(paths, options) {
+      var _a;
+      const result = /* @__PURE__ */ new Map();
+      const compare = (_a = options === null || options === void 0 ? void 0 : options.compare) !== null && _a !== void 0 ? _a : sort_1.comparePathsByComponent;
+      const sortedIndexPaths = paths.sort(compare);
       for (const indexPath of sortedIndexPaths) {
         const foundParent = indexPath.some((_, index) => {
           const parentKey = indexPath.slice(0, index).join();
-          return paths.has(parentKey);
+          return result.has(parentKey);
         });
         if (foundParent)
           continue;
-        paths.set(indexPath.join(), indexPath);
+        result.set(indexPath.join(), indexPath);
       }
-      return Array.from(paths.values());
+      return Array.from(result.values());
     }
-    exports.ancestorIndexPaths = ancestorIndexPaths;
+    exports.ancestorPaths = ancestorPaths;
   }
 });
 
@@ -616,7 +618,7 @@ var require_operation = __commonJS({
     exports.getInsertionOperations = getInsertionOperations;
     function getRemovalOperations(indexPaths) {
       var _a, _b;
-      const _ancestorIndexPaths = (0, ancestors_1.ancestorIndexPaths)(indexPaths);
+      const _ancestorIndexPaths = (0, ancestors_1.ancestorPaths)(indexPaths);
       const indexesToRemove = /* @__PURE__ */ new Map();
       for (const indexPath of _ancestorIndexPaths) {
         const parentKey = indexPath.slice(0, -1).join();
@@ -742,7 +744,7 @@ var require_move = __commonJS({
       if (options.to.length === 0) {
         throw new Error(`Can't move nodes to the root`);
       }
-      const _ancestorIndexPaths = (0, ancestors_1.ancestorIndexPaths)(options.indexPaths);
+      const _ancestorIndexPaths = (0, ancestors_1.ancestorPaths)(options.indexPaths);
       const nodesToInsert = _ancestorIndexPaths.map((indexPath) => (0, access_1.access)(node, indexPath, options));
       const operations = (0, operation_1.getInsertionOperations)(options.to, nodesToInsert, (0, operation_1.getRemovalOperations)(_ancestorIndexPaths));
       return (0, operation_1.applyOperations)(node, operations, options);
@@ -911,1436 +913,115 @@ var require_lib = __commonJS({
 // src/index.ts
 export * from "@noya-app/state-manager";
 
-// src/components/UserPointersOverlay.tsx
-import { memoGeneric } from "@noya-app/react-utils";
-import React, { useEffect, useState } from "react";
-
-// src/useObservable.ts
-import { useMemo, useSyncExternalStore } from "react";
-function useObservable(observable, pathOrSelector, options) {
-  const { get, listen } = useMemo(() => {
-    if (!observable) {
-      return {
-        get: () => void 0,
-        listen: () => () => {
-        }
-      };
-    }
-    if (typeof pathOrSelector === "function") {
-      const mappedObservable = observable.map(pathOrSelector, {
-        isEqual: options?.isEqual
-      });
-      return {
-        get: mappedObservable.get,
-        listen: mappedObservable.subscribe
-      };
-    }
-    const listen2 = pathOrSelector ? (callback) => observable.subscribe(pathOrSelector, callback) : observable.subscribe;
-    const get2 = pathOrSelector ? () => observable.get(pathOrSelector) : observable.get;
-    return { get: get2, listen: listen2 };
-  }, [observable, pathOrSelector, options?.isEqual]);
-  return useSyncExternalStore(listen, get, get);
-}
-
-// src/components/UserPointersOverlay.tsx
-function shouldShow(hideAfter, updatedAt) {
-  return !!updatedAt && Date.now() - updatedAt < hideAfter;
-}
-var UserPointerInternal = memoGeneric(function UserPointerInternal2({
-  user,
-  ephemeralUserDataManager,
-  hideAfter = 5e3,
-  renderUserPointer
-}) {
-  const metadata = useObservable(ephemeralUserDataManager.metadata$, [
-    user.id
-  ]);
-  const data = useObservable(ephemeralUserDataManager.data$, [
-    user.id
-  ]);
-  const [, setForceUpdate] = useState(0);
-  const updatedAt = metadata?.updatedAt ?? 0;
-  const show = shouldShow(hideAfter, updatedAt);
-  useEffect(() => {
-    if (!show) return;
-    const timeoutId = setTimeout(() => {
-      setForceUpdate((prev) => prev + 1);
-    }, hideAfter);
-    return () => clearTimeout(timeoutId);
-  }, [hideAfter, show, updatedAt]);
-  if (!data?.pointer) return null;
-  return renderUserPointer({
-    userId: user.id,
-    name: user.name,
-    point: data.pointer,
-    visible: show
-  });
-});
-var UserPointersOverlay = memoGeneric(function UserPointers({
-  connectedUsersManager,
-  ephemeralUserDataManager,
-  renderUserPointer
-}) {
-  const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
-  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, connectedUsers.map((user) => {
-    if (user.id === currentUserId) return null;
-    return /* @__PURE__ */ React.createElement(
-      UserPointerInternal,
-      {
-        key: user.id,
-        user,
-        ephemeralUserDataManager,
-        renderUserPointer
-      }
-    );
-  }));
-});
+// src/ai.ts
+import { useEffect as useEffect4 } from "react";
 
-// src/hooks.ts
-import {
-  NoyaManager,
-  StateManager,
-  stubSync
-} from "@noya-app/state-manager";
+// src/NoyaStateContext.tsx
 import {
-  createElement as createElement2,
-  useCallback,
+  Observable
+} from "@noya-app/observable";
+import React5, {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
   useEffect as useEffect3,
-  useMemo as useMemo2,
-  useRef,
-  useState as useState2,
-  useSyncExternalStore as useSyncExternalStore2
+  useMemo as useMemo4
 } from "react";
-import { createRoot as createRoot2 } from "react-dom/client";
-
-// src/components/ErrorOverlay.tsx
-import * as React2 from "react";
-var ErrorOverlay = React2.memo(function ErrorOverlay2({
-  error
-}) {
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        top: "20px",
-        left: "50%",
-        transform: "translateX(-50%)",
-        maxWidth: "80%",
-        width: "fit-content",
-        padding: "12px 20px",
-        background: "white",
-        color: "black",
-        zIndex: 1e4,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        borderRadius: "4px",
-        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-        fontFamily: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-        fontSize: "14px",
-        fontWeight: 400,
-        lineHeight: "19px"
-      }
-    },
-    error.reason === "schemaMigration" ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", null, "An updated version of Noya is available. Please reload the page to continue.")) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", null, "An error occurred:", " ", /* @__PURE__ */ React2.createElement(
-      "code",
-      {
-        style: {
-          background: "rgba(255, 0, 0, 0.1)",
-          color: "rgba(255, 0, 0, 0.5)",
-          padding: "2px 4px",
-          borderRadius: "4px"
-        }
-      },
-      error.reason
-    ), ". Please reload the page to continue.", /* @__PURE__ */ React2.createElement("br", null), /* @__PURE__ */ React2.createElement("br", null), "If this happens repeatedly, please get in touch and the Noya team can help.")),
-    /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        style: {
-          height: "1px",
-          background: "rgba(0, 0, 0, 0.1)",
-          margin: "12px -20px"
-        }
-      }
-    ),
-    /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        style: {
-          background: "black",
-          color: "white",
-          padding: "8px 16px",
-          borderRadius: "4px",
-          cursor: "pointer",
-          fontSize: "14px",
-          fontWeight: 700,
-          lineHeight: "19px"
-        },
-        onClick: () => {
-          window.location.reload();
-        }
-      },
-      "Reload"
-    )
-  );
-});
-
-// src/inspector/useStateInspector.tsx
-import React5, { useLayoutEffect as useLayoutEffect2 } from "react";
-import { createRoot } from "react-dom/client";
 
-// src/inspector/StateInspector.tsx
-import { memoGeneric as memoGeneric2 } from "@noya-app/react-utils";
-import React4, {
-  useEffect as useEffect2,
-  useLayoutEffect
-} from "react";
-import {
-  ObjectInspector,
-  ObjectLabel,
-  ObjectName,
-  ObjectPreview,
-  chromeDark,
-  chromeLight
-} from "react-inspector";
+// ../../node_modules/@sinclair/typebox/build/esm/type/symbols/symbols.mjs
+var TransformKind = Symbol.for("TypeBox.Transform");
+var ReadonlyKind = Symbol.for("TypeBox.Readonly");
+var OptionalKind = Symbol.for("TypeBox.Optional");
+var Hint = Symbol.for("TypeBox.Hint");
+var Kind = Symbol.for("TypeBox.Kind");
 
-// src/inspector/useLocalStorageState.tsx
-import React3 from "react";
-var localStorage = typeof window !== "undefined" ? window.localStorage : null;
-function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = React3.useState(() => {
-    const value = localStorage?.getItem(key);
-    let result = defaultValue;
-    if (value) {
-      try {
-        result = JSON.parse(value);
-      } catch (error) {
-        console.error("Error parsing localStorage value", error);
-      }
-    }
-    return result;
-  });
-  const setLocalStorageState = (value) => {
-    localStorage?.setItem(key, JSON.stringify(value));
-    setState(value);
-  };
-  return [state, setLocalStorageState];
+// ../../node_modules/@sinclair/typebox/build/esm/type/any/any.mjs
+function Any(options = {}) {
+  return { ...options, [Kind]: "Any" };
 }
 
-// src/inspector/StateInspector.tsx
-var lightTheme = {
-  ...chromeLight,
-  BASE_BACKGROUND_COLOR: "transparent",
-  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)"
-};
-var darkTheme = {
-  ...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"
-  }
-};
-function ToggleButton({
-  showInspector,
-  setShowInspector,
-  theme,
-  anchor
-}) {
-  return /* @__PURE__ */ React4.createElement(
-    "span",
-    {
-      role: "button",
-      style: {
-        flex: "0",
-        appearance: "none",
-        color: theme.BASE_COLOR,
-        border: "none",
-        fontSize: "12px",
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "2px 0"
-      },
-      onClick: (event) => {
-        event.stopPropagation();
-        setShowInspector(!showInspector);
-      }
-    },
-    /* @__PURE__ */ React4.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ React4.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: 1.5,
-        stroke: "currentColor",
-        className: "size-6"
-      },
-      /* @__PURE__ */ React4.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
-        }
-      )
-    ) : /* @__PURE__ */ React4.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: 1.5,
-        stroke: "currentColor",
-        className: "size-6"
-      },
-      /* @__PURE__ */ React4.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
-        }
-      )
-    ))
-  );
+// ../../node_modules/@sinclair/typebox/build/esm/type/guard/value.mjs
+var value_exports = {};
+__export(value_exports, {
+  IsArray: () => IsArray,
+  IsAsyncIterator: () => IsAsyncIterator,
+  IsBigInt: () => IsBigInt,
+  IsBoolean: () => IsBoolean,
+  IsDate: () => IsDate,
+  IsFunction: () => IsFunction,
+  IsIterator: () => IsIterator,
+  IsNull: () => IsNull,
+  IsNumber: () => IsNumber,
+  IsObject: () => IsObject,
+  IsRegExp: () => IsRegExp,
+  IsString: () => IsString,
+  IsSymbol: () => IsSymbol,
+  IsUint8Array: () => IsUint8Array,
+  IsUndefined: () => IsUndefined
+});
+function IsAsyncIterator(value) {
+  return IsObject(value) && !IsArray(value) && !IsUint8Array(value) && Symbol.asyncIterator in value;
 }
-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__ */ React4.createElement(
-    "div",
-    {
-      style: {
-        flex: open ? "1 1 0" : "0",
-        display: "flex",
-        flexDirection: "column",
-        ...style
-      }
-    },
-    /* @__PURE__ */ React4.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__ */ React4.createElement(
-        Arrow,
-        {
-          expanded: open,
-          style: {
-            fontSize: theme.ARROW_FONT_SIZE,
-            marginRight: theme.ARROW_MARGIN_RIGHT + 1,
-            color: theme.ARROW_COLOR
-          }
-        }
-      ),
-      /* @__PURE__ */ React4.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
-      right
-    ),
-    open && children
-  );
+function IsArray(value) {
+  return Array.isArray(value);
 }
-function InspectorRow({
-  children,
-  colorScheme,
-  selected,
-  style,
-  variant
-}) {
-  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ React4.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__ */ React4.createElement(
-      "span",
-      {
-        style: {
-          fontFamily: "Menlo, monospace",
-          fontSize: "11px",
-          borderRadius: 4,
-          display: "inline-block"
-        }
-      },
-      children
-    )
-  );
+function IsBigInt(value) {
+  return typeof value === "bigint";
 }
-var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = memoGeneric2(function StateInspector2({
-  noyaManager,
-  colorScheme = "light",
-  anchor = "right",
-  unstyled = false,
-  ...props
-}) {
-  const {
-    multiplayerStateManager,
-    assetManager,
-    connectedUsersManager,
-    secretManager,
-    ephemeralUserDataManager,
-    connectionEventManager,
-    taskManager,
-    ioManager
-  } = noyaManager;
-  const [didMount, setDidMount] = React4.useState(false);
-  const tasks = useObservable(taskManager.tasks$);
-  const inputs = useObservable(ioManager.inputs$);
-  const outputTransforms = useObservable(ioManager.outputTransforms$);
-  useLayoutEffect(() => {
-    setDidMount(true);
-  }, []);
-  const eventsContainerRef = React4.useRef(null);
-  const historyContainerRef = React4.useRef(null);
-  const [showInspector, setShowInspector] = useLocalStorageState(
-    "noya-multiplayer-react-show-inspector",
-    true
-  );
-  const [showEvents, setShowEvents] = useLocalStorageState(
-    "noya-multiplayer-react-show-events",
-    false
-  );
-  const [showHistory, setShowHistory] = useLocalStorageState(
-    "noya-multiplayer-react-show-history",
-    false
-  );
-  const [showUsers, setShowUsers] = useLocalStorageState(
-    "noya-multiplayer-react-show-users",
-    true
-  );
-  const [showData, setShowData] = useLocalStorageState(
-    "noya-multiplayer-react-show-data",
-    true
-  );
-  const [showTasks, setShowTasks] = useLocalStorageState(
-    "noya-multiplayer-react-show-tasks",
-    false
-  );
-  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
-    "noya-multiplayer-react-show-ephemeral",
-    false
-  );
-  const [showAssets, setShowAssets] = useLocalStorageState(
-    "noya-multiplayer-react-show-assets",
-    false
-  );
-  const [showSecrets, setShowSecrets] = useLocalStorageState(
-    "noya-multiplayer-react-show-secrets",
-    false
-  );
-  const [showInputs, setShowInputs] = useLocalStorageState(
-    "noya-multiplayer-react-show-inputs",
-    false
-  );
-  const [showOutputTransforms, setShowOutputTransforms] = useLocalStorageState(
-    "noya-multiplayer-react-show-output-transforms",
-    false
-  );
-  const connectionEvents = useObservable(connectionEventManager.events$);
-  useEffect2(() => {
-    if (eventsContainerRef.current) {
-      eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
-    }
-  }, [connectionEvents]);
-  const multipeerStateInitialized = useObservable(
-    multiplayerStateManager.isInitialized$
-  );
-  const ephemeral = useObservable(ephemeralUserDataManager.data$);
-  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
-  const assets = useObservable(assetManager.assets$);
-  const assetsInitialized = useObservable(assetManager.isInitialized$);
-  const secrets = useObservable(secretManager.secrets$);
-  const secretsInitialized = useObservable(secretManager.isInitialized$);
-  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
-  const userId = useObservable(connectedUsersManager.currentUserId$);
-  const state = useObservable(multiplayerStateManager.optimisticState$);
-  const inputsInitialized = useObservable(ioManager.inputsInitialized$);
-  const outputTransformsInitialized = useObservable(
-    ioManager.outputTransformsInitialized$
-  );
-  useEffect2(() => {
-    if (historyContainerRef.current) {
-      historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
-    }
-  }, [historySnapshot]);
-  useEffect2(() => {
-    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 baseStyle = {
-    position: "fixed",
-    top: 12,
-    ...anchor.includes("right") ? { right: 12 } : { left: 12 },
-    bottom: 12,
-    width: 400,
-    background: colorScheme === "light" ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.95)",
-    backdropFilter: "blur(48px)",
-    border: `1px solid ${solidBorderColor}`,
-    // outlineOffset: -1,
-    borderRadius: 4,
-    display: "flex",
-    flexDirection: "column",
-    // gap: 12,
-    color: theme.BASE_COLOR,
-    overflow: "hidden",
-    zIndex: 9999,
-    lineHeight: "13px"
-  };
-  if (!didMount) return null;
-  if (!showInspector) {
-    return /* @__PURE__ */ React4.createElement(
-      "div",
-      {
-        ...props,
-        style: {
-          ...baseStyle,
-          padding: "4px 10px",
-          width: void 0,
-          ...anchor.includes("bottom") ? { bottom: 12, top: void 0 } : { bottom: void 0 }
-        },
-        onClick: () => setShowInspector(true)
-      },
-      /* @__PURE__ */ React4.createElement(
-        ToggleButton,
-        {
-          showInspector,
-          setShowInspector,
-          theme,
-          anchor
-        }
-      )
-    );
-  }
-  return /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      ...props,
-      style: {
-        ...!unstyled && baseStyle,
-        ...props.style
-      }
-    },
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        isFirst: true,
-        open: showUsers,
-        setOpen: setShowUsers,
-        title: "Users",
-        colorScheme,
-        style: {
-          flex: "0 0 auto",
-          maxHeight: "200px"
-        },
-        right: /* @__PURE__ */ React4.createElement(
-          ToggleButton,
-          {
-            showInspector,
-            setShowInspector,
-            theme,
-            anchor
-          }
-        )
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React4.createElement(
-        InspectorRow,
-        {
-          key: user.id,
-          colorScheme,
-          variant: user.id === userId ? "up" : void 0
-        },
-        user.image && /* @__PURE__ */ React4.createElement(
-          "img",
-          {
-            src: user.image,
-            alt: user.name,
-            style: {
-              width: "13px",
-              height: "13px",
-              borderRadius: "50%",
-              marginRight: "4px",
-              display: "inline-block",
-              position: "relative",
-              background: solidBorderColor,
-              verticalAlign: "middle"
-            }
-          }
-        ),
-        user.name,
-        " (",
-        ellipsis(user.id.toString(), 8, "middle"),
-        ")"
-      )), !connectedUsers && /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            fontSize: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px"
-          }
-        },
-        /* @__PURE__ */ React4.createElement("span", null, "No connected users")
-      ))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        title: /* @__PURE__ */ React4.createElement(TitleLabel, null, "Data", /* @__PURE__ */ React4.createElement(
-          ColoredDot,
-          {
-            type: multipeerStateInitialized ? "success" : "error"
-          }
-        )),
-        colorScheme,
-        setOpen: setShowData,
-        open: showData,
-        right: /* @__PURE__ */ React4.createElement(
-          "span",
-          {
-            style: {
-              display: "flex",
-              gap: "4px"
-            }
-          },
-          /* @__PURE__ */ React4.createElement(
-            SmallButton,
-            {
-              theme,
-              onClick: () => {
-                noyaManager.forceInit();
-              }
-            },
-            "Reset"
-          )
-        )
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React4.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React4.createElement(
-        ObjectInspector,
-        {
-          name: multiplayerStateManager.schema ? "state" : void 0,
-          data: state,
-          theme
-        }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ React4.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React4.createElement(
-        ObjectInspector,
-        {
-          name: "schema",
-          data: multiplayerStateManager.schema,
-          theme
-        }
-      )))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        open: showHistory,
-        setOpen: setShowHistory,
-        title: "History",
-        colorScheme,
-        right: /* @__PURE__ */ React4.createElement(
-          "span",
-          {
-            style: {
-              display: "flex",
-              gap: "4px"
-            }
-          },
-          /* @__PURE__ */ React4.createElement(
-            SmallButton,
-            {
-              disabled: !historySnapshot.canUndo,
-              theme,
-              onClick: () => {
-                multiplayerStateManager.undo();
-              }
-            },
-            /* @__PURE__ */ React4.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React4.createElement(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "1em",
-                height: "1em",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ React4.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__ */ React4.createElement(
-            SmallButton,
-            {
-              disabled: !historySnapshot.canRedo,
-              theme,
-              onClick: () => {
-                multiplayerStateManager.redo();
-              }
-            },
-            /* @__PURE__ */ React4.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React4.createElement(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "1em",
-                height: "1em",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ React4.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__ */ React4.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React4.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__ */ React4.createElement(
-          "span",
-          {
-            style: {
-              fontFamily: "Menlo, monospace",
-              fontSize: "11px",
-              borderRadius: 4,
-              display: "inline-block"
-            }
-          },
-          "Initial state"
-        )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React4.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__ */ React4.createElement(
-          "pre",
-          {
-            style: {
-              fontSize: "11px",
-              display: "flex",
-              flexWrap: "wrap",
-              margin: 0
-            }
-          },
-          entry.metadata.name
-        ),
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React4.createElement(
-          "pre",
-          {
-            key: j,
-            style: {
-              fontSize: "11px",
-              display: "flex",
-              flexWrap: "wrap",
-              margin: 0
-            }
-          },
-          patch.op === "add" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React4.createElement(ObjectInspector, { data: patch.value, theme })),
-          patch.op === "replace" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React4.createElement(ObjectInspector, { data: patch.value, theme })),
-          patch.op === "remove" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
-          patch.op === "move" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
-        ))
-      )))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        open: showAssets,
-        setOpen: setShowAssets,
-        title: /* @__PURE__ */ React4.createElement(TitleLabel, null, "Assets", /* @__PURE__ */ React4.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
-        colorScheme,
-        right: /* @__PURE__ */ React4.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React4.createElement(
-          SmallButton,
-          {
-            theme,
-            onClick: () => {
-              console.info(
-                "[StateInspector] Reloading assets",
-                noyaManager.id
-              );
-              assetManager.fetch();
-            }
-          },
-          "Reload"
-        ), /* @__PURE__ */ React4.createElement(
-          SmallButton,
-          {
-            theme,
-            onClick: () => {
-              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;
-                    assetManager.create(new Uint8Array(buffer));
-                  };
-                  reader.readAsArrayBuffer(file);
-                }
-              };
-              input.click();
-            }
-          },
-          "Upload"
-        ))
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ React4.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ React4.createElement(ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ React4.createElement(
-        SmallButton,
-        {
-          theme,
-          onClick: () => assetManager.delete(asset.id)
-        },
-        "Delete"
-      ))))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        title: /* @__PURE__ */ React4.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ React4.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
-        colorScheme,
-        open: showSecrets,
-        setOpen: setShowSecrets,
-        right: /* @__PURE__ */ React4.createElement(
-          SmallButton,
-          {
-            theme,
-            onClick: () => {
-              const name = prompt("Enter secret name");
-              if (!name) return;
-              const value = prompt("Enter secret value");
-              if (!value) return;
-              secretManager.createSecret(name, value);
-            }
-          },
-          "Create"
-        )
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ React4.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React4.createElement(ObjectInspector, { data: secret, theme }), /* @__PURE__ */ React4.createElement(
-        SmallButton,
-        {
-          theme,
-          onClick: () => secretManager.deleteSecret(secret.name)
-        },
-        "Delete"
-      ))))
-    ),
-    " ",
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        open: showInputs,
-        setOpen: setShowInputs,
-        title: /* @__PURE__ */ React4.createElement(TitleLabel, null, "Inputs", /* @__PURE__ */ React4.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
-        colorScheme
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, inputs?.map((input) => /* @__PURE__ */ React4.createElement(InspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ React4.createElement(ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            fontSize: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px"
-          }
-        },
-        /* @__PURE__ */ React4.createElement("span", null, "No inputs")
-      ))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        open: showOutputTransforms,
-        setOpen: setShowOutputTransforms,
-        title: /* @__PURE__ */ React4.createElement(TitleLabel, null, "Output Transforms", /* @__PURE__ */ React4.createElement(
-          ColoredDot,
-          {
-            type: outputTransformsInitialized ? "success" : "error"
-          }
-        )),
-        colorScheme
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, outputTransforms?.map((transform) => /* @__PURE__ */ React4.createElement(InspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ React4.createElement(ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            fontSize: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px"
-          }
-        },
-        /* @__PURE__ */ React4.createElement("span", null, "No output transforms")
-      ))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        title: "Tasks",
-        colorScheme,
-        open: showTasks,
-        setOpen: setShowTasks
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React4.createElement(
-        InspectorRow,
-        {
-          key: task.id,
-          colorScheme,
-          style: {
-            backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
-          }
-        },
-        /* @__PURE__ */ React4.createElement(
-          ObjectInspector,
-          {
-            name: task.name,
-            data: task.payload,
-            theme
-          }
-        )
-      )))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        open: showEphemeral,
-        setOpen: setShowEphemeral,
-        title: "Ephemeral User Data",
-        colorScheme
-      },
-      /* @__PURE__ */ React4.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React4.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ React4.createElement(
-        ObjectInspector,
-        {
-          name: key,
-          data: value,
-          theme,
-          expandLevel: 10
-        }
-      ))))
-    ),
-    /* @__PURE__ */ React4.createElement(
-      DisclosureSection,
-      {
-        open: showEvents,
-        setOpen: setShowEvents,
-        title: "Events",
-        colorScheme
-      },
-      /* @__PURE__ */ React4.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
-        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React4.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React4.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React4.createElement(
-          InspectorRow,
-          {
-            key: index,
-            colorScheme,
-            variant: event.type === "send" ? "up" : "down",
-            style: {
-              padding: "0px 12px 1px"
-            }
-          },
-          /* @__PURE__ */ React4.createElement(
-            ObjectInspector,
-            {
-              data: event.type === "error" ? event.error : event.message,
-              theme,
-              nodeRenderer: ({
-                depth,
-                name,
-                data,
-                isNonenumerable
-              }) => {
-                const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ React4.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React4.createElement(
-                  ObjectLabel,
-                  {
-                    direction,
-                    name,
-                    data,
-                    isNonenumerable
-                  }
-                );
-              }
-            }
-          )
-        )
-      ), !connectionEvents && /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            fontSize: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "4px"
-          }
-        },
-        /* @__PURE__ */ React4.createElement("span", null, "No recorded events")
-      ))
-    )
-  );
-});
-var ObjectRootLabel = ({ name, data, direction }) => {
-  if (typeof name === "string") {
-    return /* @__PURE__ */ React4.createElement("span", null, /* @__PURE__ */ React4.createElement(ObjectName, { name }), /* @__PURE__ */ React4.createElement("span", null, ": "), /* @__PURE__ */ React4.createElement(ObjectPreview, { data }));
-  }
-  if (direction === "up" || direction === "down") {
-    const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ React4.createElement("span", null, /* @__PURE__ */ React4.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__ */ React4.createElement(ObjectPreview, { data }));
-  } else {
-    return /* @__PURE__ */ React4.createElement(ObjectPreview, { data });
-  }
-};
-function Arrow({
-  expanded,
-  onClick,
-  style
-}) {
-  return /* @__PURE__ */ React4.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__ */ React4.createElement(
-    "button",
-    {
-      type: "button",
-      disabled,
-      onClick: (event) => {
-        event.stopPropagation();
-        onClick();
-      },
-      style: {
-        flex: "0",
-        appearance: "none",
-        background: "none",
-        color: theme.BASE_COLOR,
-        opacity: disabled ? 0.25 : 1,
-        border: "none",
-        fontSize: "12px",
-        whiteSpace: "nowrap",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "0",
-        cursor: "pointer",
-        ...style
-      }
-    },
-    children
-  );
-}
-function ColoredDot({ type }) {
-  return /* @__PURE__ */ React4.createElement(
-    "span",
-    {
-      style: {
-        display: "inline-block",
-        width: 6,
-        height: 6,
-        background: type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
-        borderRadius: "50%",
-        verticalAlign: "middle"
-      }
-    }
-  );
-}
-function TitleLabel({ children }) {
-  return /* @__PURE__ */ React4.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
-}
-
-// src/inspector/useStateInspector.tsx
-function createShadowRootElement() {
-  const host = document.createElement("div");
-  host.id = "noya-multiplayer-react-inspector-host";
-  const shadowRoot = host.attachShadow({ mode: "open" });
-  const container = document.createElement("div");
-  shadowRoot.appendChild(container);
-  return { host, container };
-}
-function useStateInspector({
-  noyaManager,
-  disabled = false,
-  colorScheme,
-  anchor
-}) {
-  const [root, setRoot] = React5.useState(null);
-  useLayoutEffect2(() => {
-    if (disabled) return;
-    const { host, container } = createShadowRootElement();
-    const root2 = createRoot(container);
-    document.body.appendChild(host);
-    setRoot(root2);
-    return () => {
-      document.body.removeChild(host);
-    };
-  }, [disabled]);
-  useLayoutEffect2(() => {
-    if (!root) return;
-    root.render(
-      /* @__PURE__ */ React5.createElement(
-        StateInspector,
-        {
-          colorScheme,
-          anchor,
-          noyaManager
-        }
-      )
-    );
-  }, [noyaManager, anchor, colorScheme, root]);
-}
-
-// src/hooks.ts
-function useSyncStateManager(stateManager, path) {
-  const getSnapshot = useCallback(
-    () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
-    [stateManager, path]
-  );
-  return useSyncExternalStore2(
-    stateManager.addListener,
-    getSnapshot,
-    getSnapshot
-  );
-}
-function useManagedState(createInitialState, options) {
-  const [stateManager] = useState2(
-    () => new StateManager(createInitialState(), options)
-  );
-  const state = useSyncStateManager(stateManager);
-  const setState = useCallback(
-    (...args) => {
-      const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
-      if (metadata === void 0) {
-        const performActionNoMetadata = stateManager.performAction;
-        if (action instanceof Function) {
-          performActionNoMetadata({
-            run: action,
-            undo: () => state
-          });
-        } else {
-          performActionNoMetadata({
-            run: () => action,
-            undo: () => state
-          });
-        }
-      } else {
-        const performActionWithMetadata = stateManager.performAction;
-        if (action instanceof Function) {
-          performActionWithMetadata(metadata, {
-            run: action,
-            undo: () => state
-          });
-        } else {
-          performActionWithMetadata(metadata, {
-            run: () => action,
-            undo: () => state
-          });
-        }
-      }
-    },
-    [state, stateManager]
-  );
-  return [state, setState, stateManager];
-}
-function useManagedHistory(stateManager) {
-  return useSyncExternalStore2(
-    stateManager.historyEmittor.addListener,
-    stateManager.getHistorySnapshot,
-    stateManager.getHistorySnapshot
-  );
-}
-var defaultStubSync = stubSync();
-function useMultiplayerState(initialState, options) {
-  const {
-    sync = defaultStubSync,
-    inspector,
-    ...rest
-  } = options ?? {};
-  const [noyaManager] = useState2(
-    () => new NoyaManager(initialState, rest)
-  );
-  const state = useObservable(
-    noyaManager.multiplayerStateManager.optimisticState$
-  );
-  const assets = useObservable(noyaManager.assetManager.assets$);
-  const extras = useMemo2(() => {
-    return {
-      noyaManager,
-      taskManager: noyaManager.taskManager,
-      connectionEventManager: noyaManager.connectionEventManager,
-      connectedUsersManager: noyaManager.connectedUsersManager,
-      ephemeralUserDataManager: noyaManager.ephemeralUserDataManager,
-      multiplayerStateManager: noyaManager.multiplayerStateManager,
-      assetManager: noyaManager.assetManager,
-      aiManager: noyaManager.aiManager,
-      rpcManager: noyaManager.rpcManager,
-      pipelineManager: noyaManager.pipelineManager,
-      secretManager: noyaManager.secretManager,
-      menuItemsManager: noyaManager.menuManager,
-      createAsset: noyaManager.assetManager.create,
-      deleteAsset: noyaManager.assetManager.delete,
-      assets
-    };
-  }, [noyaManager, assets]);
-  const syncRef = useRef(sync);
-  useEffect3(() => {
-    if (syncRef.current) {
-      return syncRef.current({ noyaManager });
-    }
-  }, [noyaManager]);
-  useErrorOverlay(noyaManager);
-  useStateInspector({
-    noyaManager,
-    disabled: !inspector,
-    ...typeof inspector === "object" && inspector
-  });
-  return [state, noyaManager.multiplayerStateManager.setState, extras];
-}
-function useErrorOverlay(noyaManager) {
-  const unrecoverableError = useObservable(noyaManager.unrecoverableError);
-  useEffect3(() => {
-    if (!unrecoverableError) return;
-    const el = document.createElement("div");
-    el.id = "noya-multiplayer-react-error-overlay";
-    document.body.appendChild(el);
-    const root = createRoot2(el);
-    root.render(createElement2(ErrorOverlay, { error: unrecoverableError }));
-    return () => {
-      root.unmount();
-      el.remove();
-    };
-  });
-}
-
-// ../../node_modules/@sinclair/typebox/build/esm/type/symbols/symbols.mjs
-var TransformKind = Symbol.for("TypeBox.Transform");
-var ReadonlyKind = Symbol.for("TypeBox.Readonly");
-var OptionalKind = Symbol.for("TypeBox.Optional");
-var Hint = Symbol.for("TypeBox.Hint");
-var Kind = Symbol.for("TypeBox.Kind");
-
-// ../../node_modules/@sinclair/typebox/build/esm/type/any/any.mjs
-function Any(options = {}) {
-  return { ...options, [Kind]: "Any" };
-}
-
-// ../../node_modules/@sinclair/typebox/build/esm/type/guard/value.mjs
-var value_exports = {};
-__export(value_exports, {
-  IsArray: () => IsArray,
-  IsAsyncIterator: () => IsAsyncIterator,
-  IsBigInt: () => IsBigInt,
-  IsBoolean: () => IsBoolean,
-  IsDate: () => IsDate,
-  IsFunction: () => IsFunction,
-  IsIterator: () => IsIterator,
-  IsNull: () => IsNull,
-  IsNumber: () => IsNumber,
-  IsObject: () => IsObject,
-  IsRegExp: () => IsRegExp,
-  IsString: () => IsString,
-  IsSymbol: () => IsSymbol,
-  IsUint8Array: () => IsUint8Array,
-  IsUndefined: () => IsUndefined
-});
-function IsAsyncIterator(value) {
-  return IsObject(value) && !IsArray(value) && !IsUint8Array(value) && Symbol.asyncIterator in value;
-}
-function IsArray(value) {
-  return Array.isArray(value);
-}
-function IsBigInt(value) {
-  return typeof value === "bigint";
-}
-function IsBoolean(value) {
-  return typeof value === "boolean";
-}
-function IsDate(value) {
-  return value instanceof globalThis.Date;
-}
-function IsFunction(value) {
-  return typeof value === "function";
-}
-function IsIterator(value) {
-  return IsObject(value) && !IsArray(value) && !IsUint8Array(value) && Symbol.iterator in value;
-}
-function IsNull(value) {
-  return value === null;
-}
-function IsNumber(value) {
-  return typeof value === "number";
-}
-function IsObject(value) {
-  return typeof value === "object" && value !== null;
-}
-function IsRegExp(value) {
-  return value instanceof globalThis.RegExp;
-}
-function IsString(value) {
-  return typeof value === "string";
-}
-function IsSymbol(value) {
-  return typeof value === "symbol";
-}
-function IsUint8Array(value) {
-  return value instanceof globalThis.Uint8Array;
-}
-function IsUndefined(value) {
-  return value === void 0;
-}
-
-// ../../node_modules/@sinclair/typebox/build/esm/type/clone/value.mjs
-function ArrayType(value) {
-  return value.map((value2) => Visit(value2));
-}
-function DateType(value) {
-  return new Date(value.getTime());
-}
-function Uint8ArrayType(value) {
-  return new Uint8Array(value);
-}
-function RegExpType(value) {
-  return new RegExp(value.source, value.flags);
-}
-function ObjectType(value) {
-  const result = {};
-  for (const key of Object.getOwnPropertyNames(value)) {
-    result[key] = Visit(value[key]);
+function IsBoolean(value) {
+  return typeof value === "boolean";
+}
+function IsDate(value) {
+  return value instanceof globalThis.Date;
+}
+function IsFunction(value) {
+  return typeof value === "function";
+}
+function IsIterator(value) {
+  return IsObject(value) && !IsArray(value) && !IsUint8Array(value) && Symbol.iterator in value;
+}
+function IsNull(value) {
+  return value === null;
+}
+function IsNumber(value) {
+  return typeof value === "number";
+}
+function IsObject(value) {
+  return typeof value === "object" && value !== null;
+}
+function IsRegExp(value) {
+  return value instanceof globalThis.RegExp;
+}
+function IsString(value) {
+  return typeof value === "string";
+}
+function IsSymbol(value) {
+  return typeof value === "symbol";
+}
+function IsUint8Array(value) {
+  return value instanceof globalThis.Uint8Array;
+}
+function IsUndefined(value) {
+  return value === void 0;
+}
+
+// ../../node_modules/@sinclair/typebox/build/esm/type/clone/value.mjs
+function ArrayType(value) {
+  return value.map((value2) => Visit(value2));
+}
+function DateType(value) {
+  return new Date(value.getTime());
+}
+function Uint8ArrayType(value) {
+  return new Uint8Array(value);
+}
+function RegExpType(value) {
+  return new RegExp(value.source, value.flags);
+}
+function ObjectType(value) {
+  const result = {};
+  for (const key of Object.getOwnPropertyNames(value)) {
+    result[key] = Visit(value[key]);
   }
   for (const key of Object.getOwnPropertySymbols(value)) {
     result[key] = Visit(value[key]);
@@ -4671,6 +3352,34 @@ function Void(options = {}) {
 // ../../node_modules/@sinclair/typebox/build/esm/type/type/index.mjs
 var Type = type_exports3;
 
+// ../noya-schemas/src/filesSchema.ts
+var encodingSchema = Type.Union([
+  Type.Literal("utf-8"),
+  Type.Literal("base64")
+]);
+var folderMediaItemSchema = Type.Object({
+  id: Type.String({ format: "uuid", default: "" }),
+  kind: Type.Literal("folder")
+});
+var assetMediaItemSchema = Type.Object({
+  id: Type.String({ format: "uuid", default: "" }),
+  kind: Type.Literal("asset"),
+  assetId: Type.String()
+});
+var fileSchema = Type.Object({
+  id: Type.String({ format: "uuid", default: "" }),
+  kind: Type.Literal("file"),
+  content: Type.String(),
+  encoding: encodingSchema
+});
+var mediaItemSchema = Type.Union(
+  [folderMediaItemSchema, assetMediaItemSchema, fileSchema],
+  {
+    discriminator: "kind"
+  }
+);
+var mediaMapSchema = Type.Record(Type.String(), mediaItemSchema);
+
 // ../noya-schemas/src/jsonSchema.ts
 var jsonSchema = Type.Recursive(
   (This) => Type.Union(
@@ -4721,274 +3430,1560 @@ var jsonSchema = Type.Recursive(
   }
 );
 
-// ../noya-schemas/src/input.ts
-function Nullable(type) {
-  return Type.Union([type, Type.Null()]);
-}
-var inputSchemaBase = {
-  id: Type.String({ format: "uuid", default: "" }),
-  name: Type.String(),
-  description: Nullable(Type.String()),
-  required: Type.Boolean({ default: false })
-};
-var fileInputSchema = Type.Object({
-  ...inputSchemaBase,
-  kind: Type.Literal("file"),
-  toolId: Nullable(Type.String())
-});
-var dataInputSchema = Type.Object({
-  ...inputSchemaBase,
-  kind: Type.Literal("data"),
-  schema: Nullable(jsonSchema)
-});
-var inputSchema = Type.Union([fileInputSchema, dataInputSchema], {
-  discriminator: "kind"
+// ../noya-schemas/src/input.ts
+function Nullable(type) {
+  return Type.Union([type, Type.Null()]);
+}
+var inputSchemaBase = {
+  id: Type.String({ format: "uuid", default: "" }),
+  name: Type.String(),
+  description: Nullable(Type.String()),
+  required: Type.Boolean({ default: false })
+};
+var fileInputSchema = Type.Object({
+  ...inputSchemaBase,
+  kind: Type.Literal("file"),
+  toolId: Nullable(Type.String())
+});
+var dataInputSchema = Type.Object({
+  ...inputSchemaBase,
+  kind: Type.Literal("data"),
+  schema: Nullable(jsonSchema)
+});
+var secretInputSchema = Type.Object({
+  ...inputSchemaBase,
+  kind: Type.Literal("secret")
+});
+var inputSchema = Type.Union(
+  [fileInputSchema, dataInputSchema, secretInputSchema],
+  {
+    discriminator: "kind"
+  }
+);
+var outputTransformSchemaBase = {
+  id: Type.String({ format: "uuid", default: "" }),
+  order: Type.Number()
+};
+var scriptOutputTransformSchema = Type.Object({
+  ...outputTransformSchemaBase,
+  kind: Type.Literal("script"),
+  location: Type.Union([Type.Literal("state"), Type.Literal("url")]),
+  value: Type.String()
+});
+var jsonPointerOutputTransformSchema = Type.Object({
+  ...outputTransformSchemaBase,
+  kind: Type.Literal("jsonPointer"),
+  value: Type.String()
+});
+var outputTransformSchema = Type.Union(
+  [scriptOutputTransformSchema, jsonPointerOutputTransformSchema],
+  { discriminator: "kind" }
+);
+
+// ../../node_modules/@sinclair/typebox/build/esm/value/guard/guard.mjs
+function IsObject4(value) {
+  return value !== null && typeof value === "object";
+}
+function IsArray4(value) {
+  return Array.isArray(value) && !ArrayBuffer.isView(value);
+}
+function IsUndefined4(value) {
+  return value === void 0;
+}
+function IsNumber4(value) {
+  return typeof value === "number";
+}
+
+// ../../node_modules/@sinclair/typebox/build/esm/system/policy.mjs
+var TypeSystemPolicy;
+(function(TypeSystemPolicy2) {
+  TypeSystemPolicy2.ExactOptionalPropertyTypes = false;
+  TypeSystemPolicy2.AllowArrayObject = false;
+  TypeSystemPolicy2.AllowNaN = false;
+  TypeSystemPolicy2.AllowNullVoid = false;
+  function IsExactOptionalProperty(value, key) {
+    return TypeSystemPolicy2.ExactOptionalPropertyTypes ? key in value : value[key] !== void 0;
+  }
+  TypeSystemPolicy2.IsExactOptionalProperty = IsExactOptionalProperty;
+  function IsObjectLike(value) {
+    const isObject = IsObject4(value);
+    return TypeSystemPolicy2.AllowArrayObject ? isObject : isObject && !IsArray4(value);
+  }
+  TypeSystemPolicy2.IsObjectLike = IsObjectLike;
+  function IsRecordLike(value) {
+    return IsObjectLike(value) && !(value instanceof Date) && !(value instanceof Uint8Array);
+  }
+  TypeSystemPolicy2.IsRecordLike = IsRecordLike;
+  function IsNumberLike(value) {
+    return TypeSystemPolicy2.AllowNaN ? IsNumber4(value) : Number.isFinite(value);
+  }
+  TypeSystemPolicy2.IsNumberLike = IsNumberLike;
+  function IsVoidLike(value) {
+    const isUndefined = IsUndefined4(value);
+    return TypeSystemPolicy2.AllowNullVoid ? isUndefined || value === null : isUndefined;
+  }
+  TypeSystemPolicy2.IsVoidLike = IsVoidLike;
+})(TypeSystemPolicy || (TypeSystemPolicy = {}));
+
+// ../../node_modules/@sinclair/typebox/build/esm/system/system.mjs
+var TypeSystemDuplicateTypeKind = class extends TypeBoxError {
+  constructor(kind) {
+    super(`Duplicate type kind '${kind}' detected`);
+  }
+};
+var TypeSystemDuplicateFormat = class extends TypeBoxError {
+  constructor(kind) {
+    super(`Duplicate string format '${kind}' detected`);
+  }
+};
+var TypeSystem;
+(function(TypeSystem2) {
+  function Type2(kind, check) {
+    if (type_exports2.Has(kind))
+      throw new TypeSystemDuplicateTypeKind(kind);
+    type_exports2.Set(kind, check);
+    return (options = {}) => Unsafe({ ...options, [Kind]: kind });
+  }
+  TypeSystem2.Type = Type2;
+  function Format(format, check) {
+    if (format_exports.Has(format))
+      throw new TypeSystemDuplicateFormat(format);
+    format_exports.Set(format, check);
+    return format;
+  }
+  TypeSystem2.Format = Format;
+})(TypeSystem || (TypeSystem = {}));
+
+// ../../node_modules/@sinclair/typebox/build/esm/value/hash/hash.mjs
+var ByteMarker;
+(function(ByteMarker2) {
+  ByteMarker2[ByteMarker2["Undefined"] = 0] = "Undefined";
+  ByteMarker2[ByteMarker2["Null"] = 1] = "Null";
+  ByteMarker2[ByteMarker2["Boolean"] = 2] = "Boolean";
+  ByteMarker2[ByteMarker2["Number"] = 3] = "Number";
+  ByteMarker2[ByteMarker2["String"] = 4] = "String";
+  ByteMarker2[ByteMarker2["Object"] = 5] = "Object";
+  ByteMarker2[ByteMarker2["Array"] = 6] = "Array";
+  ByteMarker2[ByteMarker2["Date"] = 7] = "Date";
+  ByteMarker2[ByteMarker2["Uint8Array"] = 8] = "Uint8Array";
+  ByteMarker2[ByteMarker2["Symbol"] = 9] = "Symbol";
+  ByteMarker2[ByteMarker2["BigInt"] = 10] = "BigInt";
+})(ByteMarker || (ByteMarker = {}));
+var Accumulator = BigInt("14695981039346656037");
+var [Prime, Size] = [BigInt("1099511628211"), BigInt("2") ** BigInt("64")];
+var Bytes = Array.from({ length: 256 }).map((_, i) => BigInt(i));
+var F64 = new Float64Array(1);
+var F64In = new DataView(F64.buffer);
+var F64Out = new Uint8Array(F64.buffer);
+
+// ../../node_modules/@sinclair/typebox/build/esm/errors/errors.mjs
+var ValueErrorType;
+(function(ValueErrorType2) {
+  ValueErrorType2[ValueErrorType2["ArrayContains"] = 0] = "ArrayContains";
+  ValueErrorType2[ValueErrorType2["ArrayMaxContains"] = 1] = "ArrayMaxContains";
+  ValueErrorType2[ValueErrorType2["ArrayMaxItems"] = 2] = "ArrayMaxItems";
+  ValueErrorType2[ValueErrorType2["ArrayMinContains"] = 3] = "ArrayMinContains";
+  ValueErrorType2[ValueErrorType2["ArrayMinItems"] = 4] = "ArrayMinItems";
+  ValueErrorType2[ValueErrorType2["ArrayUniqueItems"] = 5] = "ArrayUniqueItems";
+  ValueErrorType2[ValueErrorType2["Array"] = 6] = "Array";
+  ValueErrorType2[ValueErrorType2["AsyncIterator"] = 7] = "AsyncIterator";
+  ValueErrorType2[ValueErrorType2["BigIntExclusiveMaximum"] = 8] = "BigIntExclusiveMaximum";
+  ValueErrorType2[ValueErrorType2["BigIntExclusiveMinimum"] = 9] = "BigIntExclusiveMinimum";
+  ValueErrorType2[ValueErrorType2["BigIntMaximum"] = 10] = "BigIntMaximum";
+  ValueErrorType2[ValueErrorType2["BigIntMinimum"] = 11] = "BigIntMinimum";
+  ValueErrorType2[ValueErrorType2["BigIntMultipleOf"] = 12] = "BigIntMultipleOf";
+  ValueErrorType2[ValueErrorType2["BigInt"] = 13] = "BigInt";
+  ValueErrorType2[ValueErrorType2["Boolean"] = 14] = "Boolean";
+  ValueErrorType2[ValueErrorType2["DateExclusiveMaximumTimestamp"] = 15] = "DateExclusiveMaximumTimestamp";
+  ValueErrorType2[ValueErrorType2["DateExclusiveMinimumTimestamp"] = 16] = "DateExclusiveMinimumTimestamp";
+  ValueErrorType2[ValueErrorType2["DateMaximumTimestamp"] = 17] = "DateMaximumTimestamp";
+  ValueErrorType2[ValueErrorType2["DateMinimumTimestamp"] = 18] = "DateMinimumTimestamp";
+  ValueErrorType2[ValueErrorType2["DateMultipleOfTimestamp"] = 19] = "DateMultipleOfTimestamp";
+  ValueErrorType2[ValueErrorType2["Date"] = 20] = "Date";
+  ValueErrorType2[ValueErrorType2["Function"] = 21] = "Function";
+  ValueErrorType2[ValueErrorType2["IntegerExclusiveMaximum"] = 22] = "IntegerExclusiveMaximum";
+  ValueErrorType2[ValueErrorType2["IntegerExclusiveMinimum"] = 23] = "IntegerExclusiveMinimum";
+  ValueErrorType2[ValueErrorType2["IntegerMaximum"] = 24] = "IntegerMaximum";
+  ValueErrorType2[ValueErrorType2["IntegerMinimum"] = 25] = "IntegerMinimum";
+  ValueErrorType2[ValueErrorType2["IntegerMultipleOf"] = 26] = "IntegerMultipleOf";
+  ValueErrorType2[ValueErrorType2["Integer"] = 27] = "Integer";
+  ValueErrorType2[ValueErrorType2["IntersectUnevaluatedProperties"] = 28] = "IntersectUnevaluatedProperties";
+  ValueErrorType2[ValueErrorType2["Intersect"] = 29] = "Intersect";
+  ValueErrorType2[ValueErrorType2["Iterator"] = 30] = "Iterator";
+  ValueErrorType2[ValueErrorType2["Kind"] = 31] = "Kind";
+  ValueErrorType2[ValueErrorType2["Literal"] = 32] = "Literal";
+  ValueErrorType2[ValueErrorType2["Never"] = 33] = "Never";
+  ValueErrorType2[ValueErrorType2["Not"] = 34] = "Not";
+  ValueErrorType2[ValueErrorType2["Null"] = 35] = "Null";
+  ValueErrorType2[ValueErrorType2["NumberExclusiveMaximum"] = 36] = "NumberExclusiveMaximum";
+  ValueErrorType2[ValueErrorType2["NumberExclusiveMinimum"] = 37] = "NumberExclusiveMinimum";
+  ValueErrorType2[ValueErrorType2["NumberMaximum"] = 38] = "NumberMaximum";
+  ValueErrorType2[ValueErrorType2["NumberMinimum"] = 39] = "NumberMinimum";
+  ValueErrorType2[ValueErrorType2["NumberMultipleOf"] = 40] = "NumberMultipleOf";
+  ValueErrorType2[ValueErrorType2["Number"] = 41] = "Number";
+  ValueErrorType2[ValueErrorType2["ObjectAdditionalProperties"] = 42] = "ObjectAdditionalProperties";
+  ValueErrorType2[ValueErrorType2["ObjectMaxProperties"] = 43] = "ObjectMaxProperties";
+  ValueErrorType2[ValueErrorType2["ObjectMinProperties"] = 44] = "ObjectMinProperties";
+  ValueErrorType2[ValueErrorType2["ObjectRequiredProperty"] = 45] = "ObjectRequiredProperty";
+  ValueErrorType2[ValueErrorType2["Object"] = 46] = "Object";
+  ValueErrorType2[ValueErrorType2["Promise"] = 47] = "Promise";
+  ValueErrorType2[ValueErrorType2["RegExp"] = 48] = "RegExp";
+  ValueErrorType2[ValueErrorType2["StringFormatUnknown"] = 49] = "StringFormatUnknown";
+  ValueErrorType2[ValueErrorType2["StringFormat"] = 50] = "StringFormat";
+  ValueErrorType2[ValueErrorType2["StringMaxLength"] = 51] = "StringMaxLength";
+  ValueErrorType2[ValueErrorType2["StringMinLength"] = 52] = "StringMinLength";
+  ValueErrorType2[ValueErrorType2["StringPattern"] = 53] = "StringPattern";
+  ValueErrorType2[ValueErrorType2["String"] = 54] = "String";
+  ValueErrorType2[ValueErrorType2["Symbol"] = 55] = "Symbol";
+  ValueErrorType2[ValueErrorType2["TupleLength"] = 56] = "TupleLength";
+  ValueErrorType2[ValueErrorType2["Tuple"] = 57] = "Tuple";
+  ValueErrorType2[ValueErrorType2["Uint8ArrayMaxByteLength"] = 58] = "Uint8ArrayMaxByteLength";
+  ValueErrorType2[ValueErrorType2["Uint8ArrayMinByteLength"] = 59] = "Uint8ArrayMinByteLength";
+  ValueErrorType2[ValueErrorType2["Uint8Array"] = 60] = "Uint8Array";
+  ValueErrorType2[ValueErrorType2["Undefined"] = 61] = "Undefined";
+  ValueErrorType2[ValueErrorType2["Union"] = 62] = "Union";
+  ValueErrorType2[ValueErrorType2["Void"] = 63] = "Void";
+})(ValueErrorType || (ValueErrorType = {}));
+
+// ../../node_modules/@sinclair/typebox/build/esm/value/delta/delta.mjs
+var Insert = Object2({
+  type: Literal("insert"),
+  path: String(),
+  value: Unknown()
 });
-var outputTransformSchemaBase = {
-  id: Type.String({ format: "uuid", default: "" }),
-  order: Type.Number()
-};
-var scriptOutputTransformSchema = Type.Object({
-  ...outputTransformSchemaBase,
-  kind: Type.Literal("script"),
-  location: Type.Union([Type.Literal("state"), Type.Literal("url")]),
-  value: Type.String()
+var Update = Object2({
+  type: Literal("update"),
+  path: String(),
+  value: Unknown()
 });
-var jsonPointerOutputTransformSchema = Type.Object({
-  ...outputTransformSchemaBase,
-  kind: Type.Literal("jsonPointer"),
-  value: Type.String()
+var Delete3 = Object2({
+  type: Literal("delete"),
+  path: String()
 });
-var outputTransformSchema = Type.Union(
-  [scriptOutputTransformSchema, jsonPointerOutputTransformSchema],
-  { discriminator: "kind" }
-);
+var Edit = Union([Insert, Update, Delete3]);
 
-// ../../node_modules/@sinclair/typebox/build/esm/value/guard/guard.mjs
-function IsObject4(value) {
-  return value !== null && typeof value === "object";
+// ../noya-schemas/src/SchemaTree.ts
+var import_tree_visit = __toESM(require_lib());
+var SchemaTree = (0, import_tree_visit.defineTree)((schema) => {
+  if (type_exports.IsUnion(schema)) {
+    return schema.anyOf;
+  } else if (type_exports.IsObject(schema)) {
+    return Object.values(schema.properties);
+  } else if (type_exports.IsArray(schema)) {
+    return [schema.items];
+  }
+  return [];
+}).withOptions({
+  getLabel(node) {
+    return node[Kind] ?? "<UnknownKind>";
+  }
+});
+function findAllDefs(schema) {
+  if (!schema) return [];
+  return SchemaTree.flatMap(schema, (node) => {
+    return node.$id ? [node] : [];
+  });
 }
-function IsArray4(value) {
-  return Array.isArray(value) && !ArrayBuffer.isView(value);
+
+// ../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(
+    value
+  );
 }
-function IsUndefined4(value) {
-  return value === void 0;
+format_exports.Set("color", () => true);
+format_exports.Set("uuid", validateUUID);
+
+// src/noyaApp.ts
+import {
+  createOrCastValue,
+  isEmbeddedApp,
+  localStorageSync,
+  parentFrameSync,
+  stubSync as stubSync2,
+  TypeGuard,
+  webSocketSync
+} from "@noya-app/state-manager";
+import { useMemo as useMemo3, useState as useState2 } from "react";
+
+// src/hooks.ts
+import {
+  NoyaManager,
+  StateManager,
+  stubSync
+} from "@noya-app/state-manager";
+import {
+  createElement as createElement2,
+  useCallback,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef,
+  useState,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+import { createRoot as createRoot2 } from "react-dom/client";
+
+// src/components/ErrorOverlay.tsx
+import * as React from "react";
+var ErrorOverlay = React.memo(function ErrorOverlay2({
+  error
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: "20px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        maxWidth: "80%",
+        width: "fit-content",
+        padding: "12px 20px",
+        background: "white",
+        color: "black",
+        zIndex: 1e4,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        borderRadius: "4px",
+        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        fontFamily: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        fontSize: "14px",
+        fontWeight: 400,
+        lineHeight: "19px"
+      }
+    },
+    error.reason === "schemaMigration" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "An updated version of Noya is available. Please reload the page to continue.")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "An error occurred:", " ", /* @__PURE__ */ React.createElement(
+      "code",
+      {
+        style: {
+          background: "rgba(255, 0, 0, 0.1)",
+          color: "rgba(255, 0, 0, 0.5)",
+          padding: "2px 4px",
+          borderRadius: "4px"
+        }
+      },
+      error.reason
+    ), ". Please reload the page to continue.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), "If this happens repeatedly, please get in touch and the Noya team can help.")),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: "1px",
+          background: "rgba(0, 0, 0, 0.1)",
+          margin: "12px -20px"
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        style: {
+          background: "black",
+          color: "white",
+          padding: "8px 16px",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 700,
+          lineHeight: "19px"
+        },
+        onClick: () => {
+          window.location.reload();
+        }
+      },
+      "Reload"
+    )
+  );
+});
+
+// src/inspector/useStateInspector.tsx
+import React4, { useLayoutEffect as useLayoutEffect2 } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/inspector/StateInspector.tsx
+import { memoGeneric } from "@noya-app/react-utils";
+import React3, {
+  useEffect,
+  useLayoutEffect
+} from "react";
+import {
+  ObjectInspector,
+  ObjectLabel,
+  ObjectName,
+  ObjectPreview,
+  chromeDark,
+  chromeLight
+} from "react-inspector";
+
+// src/useObservable.ts
+import { useMemo, useSyncExternalStore } from "react";
+function useObservable(observable, pathOrSelector, options) {
+  const { get, listen } = useMemo(() => {
+    if (!observable) {
+      return {
+        get: () => void 0,
+        listen: () => () => {
+        }
+      };
+    }
+    if (typeof pathOrSelector === "function") {
+      const mappedObservable = observable.map(pathOrSelector, {
+        isEqual: options?.isEqual
+      });
+      return {
+        get: mappedObservable.get,
+        listen: mappedObservable.subscribe
+      };
+    }
+    const listen2 = pathOrSelector ? (callback) => observable.subscribe(pathOrSelector, callback) : observable.subscribe;
+    const get2 = pathOrSelector ? () => observable.get(pathOrSelector) : observable.get;
+    return { get: get2, listen: listen2 };
+  }, [observable, pathOrSelector, options?.isEqual]);
+  return useSyncExternalStore(listen, get, get);
 }
-function IsNumber4(value) {
-  return typeof value === "number";
+
+// src/inspector/useLocalStorageState.tsx
+import React2 from "react";
+var localStorage = typeof window !== "undefined" ? window.localStorage : null;
+function useLocalStorageState(key, defaultValue) {
+  const [state, setState] = React2.useState(() => {
+    const value = localStorage?.getItem(key);
+    let result = defaultValue;
+    if (value) {
+      try {
+        result = JSON.parse(value);
+      } catch (error) {
+        console.error("Error parsing localStorage value", error);
+      }
+    }
+    return result;
+  });
+  const setLocalStorageState = (value) => {
+    localStorage?.setItem(key, JSON.stringify(value));
+    setState(value);
+  };
+  return [state, setLocalStorageState];
 }
 
-// ../../node_modules/@sinclair/typebox/build/esm/system/policy.mjs
-var TypeSystemPolicy;
-(function(TypeSystemPolicy2) {
-  TypeSystemPolicy2.ExactOptionalPropertyTypes = false;
-  TypeSystemPolicy2.AllowArrayObject = false;
-  TypeSystemPolicy2.AllowNaN = false;
-  TypeSystemPolicy2.AllowNullVoid = false;
-  function IsExactOptionalProperty(value, key) {
-    return TypeSystemPolicy2.ExactOptionalPropertyTypes ? key in value : value[key] !== void 0;
-  }
-  TypeSystemPolicy2.IsExactOptionalProperty = IsExactOptionalProperty;
-  function IsObjectLike(value) {
-    const isObject = IsObject4(value);
-    return TypeSystemPolicy2.AllowArrayObject ? isObject : isObject && !IsArray4(value);
-  }
-  TypeSystemPolicy2.IsObjectLike = IsObjectLike;
-  function IsRecordLike(value) {
-    return IsObjectLike(value) && !(value instanceof Date) && !(value instanceof Uint8Array);
-  }
-  TypeSystemPolicy2.IsRecordLike = IsRecordLike;
-  function IsNumberLike(value) {
-    return TypeSystemPolicy2.AllowNaN ? IsNumber4(value) : Number.isFinite(value);
+// src/inspector/StateInspector.tsx
+var lightTheme = {
+  ...chromeLight,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)"
+};
+var darkTheme = {
+  ...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"
   }
-  TypeSystemPolicy2.IsNumberLike = IsNumberLike;
-  function IsVoidLike(value) {
-    const isUndefined = IsUndefined4(value);
-    return TypeSystemPolicy2.AllowNullVoid ? isUndefined || value === null : isUndefined;
+};
+function ToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+  anchor
+}) {
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      role: "button",
+      style: {
+        flex: "0",
+        appearance: "none",
+        color: theme.BASE_COLOR,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0"
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        setShowInspector(!showInspector);
+      }
+    },
+    /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ React3.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "currentColor",
+        className: "size-6"
+      },
+      /* @__PURE__ */ React3.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+        }
+      )
+    ) : /* @__PURE__ */ React3.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "currentColor",
+        className: "size-6"
+      },
+      /* @__PURE__ */ React3.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+        }
+      )
+    ))
+  );
+}
+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__ */ React3.createElement(
+    "div",
+    {
+      style: {
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column",
+        ...style
+      }
+    },
+    /* @__PURE__ */ React3.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__ */ React3.createElement(
+        Arrow,
+        {
+          expanded: open,
+          style: {
+            fontSize: theme.ARROW_FONT_SIZE,
+            marginRight: theme.ARROW_MARGIN_RIGHT + 1,
+            color: theme.ARROW_COLOR
+          }
+        }
+      ),
+      /* @__PURE__ */ React3.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      right
+    ),
+    open && children
+  );
+}
+function InspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant
+}) {
+  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  return /* @__PURE__ */ React3.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__ */ React3.createElement(
+      "span",
+      {
+        style: {
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block"
+        }
+      },
+      children
+    )
+  );
+}
+var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+var StateInspector = memoGeneric(function StateInspector2({
+  noyaManager,
+  colorScheme = "light",
+  anchor = "right",
+  unstyled = false,
+  ...props
+}) {
+  const {
+    multiplayerStateManager,
+    assetManager,
+    connectedUsersManager,
+    secretManager,
+    ephemeralUserDataManager,
+    connectionEventManager,
+    taskManager,
+    ioManager
+  } = noyaManager;
+  const [didMount, setDidMount] = React3.useState(false);
+  const tasks = useObservable(taskManager.tasks$);
+  const inputs = useObservable(ioManager.inputs$);
+  const outputTransforms = useObservable(ioManager.outputTransforms$);
+  useLayoutEffect(() => {
+    setDidMount(true);
+  }, []);
+  const eventsContainerRef = React3.useRef(null);
+  const historyContainerRef = React3.useRef(null);
+  const [showInspector, setShowInspector] = useLocalStorageState(
+    "noya-multiplayer-react-show-inspector",
+    true
+  );
+  const [showEvents, setShowEvents] = useLocalStorageState(
+    "noya-multiplayer-react-show-events",
+    false
+  );
+  const [showHistory, setShowHistory] = useLocalStorageState(
+    "noya-multiplayer-react-show-history",
+    false
+  );
+  const [showUsers, setShowUsers] = useLocalStorageState(
+    "noya-multiplayer-react-show-users",
+    true
+  );
+  const [showData, setShowData] = useLocalStorageState(
+    "noya-multiplayer-react-show-data",
+    true
+  );
+  const [showTasks, setShowTasks] = useLocalStorageState(
+    "noya-multiplayer-react-show-tasks",
+    false
+  );
+  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
+    "noya-multiplayer-react-show-ephemeral",
+    false
+  );
+  const [showAssets, setShowAssets] = useLocalStorageState(
+    "noya-multiplayer-react-show-assets",
+    false
+  );
+  const [showSecrets, setShowSecrets] = useLocalStorageState(
+    "noya-multiplayer-react-show-secrets",
+    false
+  );
+  const [showInputs, setShowInputs] = useLocalStorageState(
+    "noya-multiplayer-react-show-inputs",
+    false
+  );
+  const [showOutputTransforms, setShowOutputTransforms] = useLocalStorageState(
+    "noya-multiplayer-react-show-output-transforms",
+    false
+  );
+  const connectionEvents = useObservable(connectionEventManager.events$);
+  useEffect(() => {
+    if (eventsContainerRef.current) {
+      eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
+    }
+  }, [connectionEvents]);
+  const multipeerStateInitialized = useObservable(
+    multiplayerStateManager.isInitialized$
+  );
+  const ephemeral = useObservable(ephemeralUserDataManager.data$);
+  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
+  const assets = useObservable(assetManager.assets$);
+  const assetsInitialized = useObservable(assetManager.isInitialized$);
+  const secrets = useObservable(secretManager.secrets$);
+  const secretsInitialized = useObservable(secretManager.isInitialized$);
+  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
+  const userId = useObservable(connectedUsersManager.currentUserId$);
+  const state = useObservable(multiplayerStateManager.optimisticState$);
+  const inputsInitialized = useObservable(ioManager.inputsInitialized$);
+  const outputTransformsInitialized = useObservable(
+    ioManager.outputTransformsInitialized$
+  );
+  useEffect(() => {
+    if (historyContainerRef.current) {
+      historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+  useEffect(() => {
+    if (!historyContainerRef.current) return;
+    const historyEntry = historyContainerRef.current.querySelector(
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
+    );
+    if (historyEntry) {
+      historyEntry.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [historySnapshot.historyIndex]);
+  const theme = colorScheme === "light" ? lightTheme : darkTheme;
+  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  const baseStyle = {
+    position: "fixed",
+    top: 12,
+    ...anchor.includes("right") ? { right: 12 } : { left: 12 },
+    bottom: 12,
+    width: 400,
+    background: colorScheme === "light" ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.95)",
+    backdropFilter: "blur(48px)",
+    border: `1px solid ${solidBorderColor}`,
+    // outlineOffset: -1,
+    borderRadius: 4,
+    display: "flex",
+    flexDirection: "column",
+    // gap: 12,
+    color: theme.BASE_COLOR,
+    overflow: "hidden",
+    zIndex: 9999,
+    lineHeight: "13px"
+  };
+  if (!didMount) return null;
+  if (!showInspector) {
+    return /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        ...props,
+        style: {
+          ...baseStyle,
+          padding: "4px 10px",
+          width: void 0,
+          ...anchor.includes("bottom") ? { bottom: 12, top: void 0 } : { bottom: void 0 }
+        },
+        onClick: () => setShowInspector(true)
+      },
+      /* @__PURE__ */ React3.createElement(
+        ToggleButton,
+        {
+          showInspector,
+          setShowInspector,
+          theme,
+          anchor
+        }
+      )
+    );
   }
-  TypeSystemPolicy2.IsVoidLike = IsVoidLike;
-})(TypeSystemPolicy || (TypeSystemPolicy = {}));
-
-// ../../node_modules/@sinclair/typebox/build/esm/system/system.mjs
-var TypeSystemDuplicateTypeKind = class extends TypeBoxError {
-  constructor(kind) {
-    super(`Duplicate type kind '${kind}' detected`);
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      ...props,
+      style: {
+        ...!unstyled && baseStyle,
+        ...props.style
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        isFirst: true,
+        open: showUsers,
+        setOpen: setShowUsers,
+        title: "Users",
+        colorScheme,
+        style: {
+          flex: "0 0 auto",
+          maxHeight: "200px"
+        },
+        right: /* @__PURE__ */ React3.createElement(
+          ToggleButton,
+          {
+            showInspector,
+            setShowInspector,
+            theme,
+            anchor
+          }
+        )
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React3.createElement(
+        InspectorRow,
+        {
+          key: user.id,
+          colorScheme,
+          variant: user.id === userId ? "up" : void 0
+        },
+        user.image && /* @__PURE__ */ React3.createElement(
+          "img",
+          {
+            src: user.image,
+            alt: user.name,
+            style: {
+              width: "13px",
+              height: "13px",
+              borderRadius: "50%",
+              marginRight: "4px",
+              display: "inline-block",
+              position: "relative",
+              background: solidBorderColor,
+              verticalAlign: "middle"
+            }
+          }
+        ),
+        user.name,
+        " (",
+        ellipsis(user.id.toString(), 8, "middle"),
+        ")"
+      )), !connectedUsers && /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React3.createElement("span", null, "No connected users")
+      ))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Data", /* @__PURE__ */ React3.createElement(
+          ColoredDot,
+          {
+            type: multipeerStateInitialized ? "success" : "error"
+          }
+        )),
+        colorScheme,
+        setOpen: setShowData,
+        open: showData,
+        right: /* @__PURE__ */ React3.createElement(
+          "span",
+          {
+            style: {
+              display: "flex",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React3.createElement(
+            SmallButton,
+            {
+              theme,
+              onClick: () => {
+                noyaManager.forceInit();
+              }
+            },
+            "Reset"
+          )
+        )
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React3.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React3.createElement(
+        ObjectInspector,
+        {
+          name: multiplayerStateManager.schema ? "state" : void 0,
+          data: state,
+          theme
+        }
+      )), multiplayerStateManager.schema && /* @__PURE__ */ React3.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React3.createElement(
+        ObjectInspector,
+        {
+          name: "schema",
+          data: multiplayerStateManager.schema,
+          theme
+        }
+      )))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        open: showHistory,
+        setOpen: setShowHistory,
+        title: "History",
+        colorScheme,
+        right: /* @__PURE__ */ React3.createElement(
+          "span",
+          {
+            style: {
+              display: "flex",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React3.createElement(
+            SmallButton,
+            {
+              disabled: !historySnapshot.canUndo,
+              theme,
+              onClick: () => {
+                multiplayerStateManager.undo();
+              }
+            },
+            /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React3.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 20 20"
+              },
+              /* @__PURE__ */ React3.createElement(
+                "path",
+                {
+                  fill: "currentColor",
+                  d: "M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+                }
+              )
+            ))
+          ),
+          /* @__PURE__ */ React3.createElement(
+            SmallButton,
+            {
+              disabled: !historySnapshot.canRedo,
+              theme,
+              onClick: () => {
+                multiplayerStateManager.redo();
+              }
+            },
+            /* @__PURE__ */ React3.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React3.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 20 20"
+              },
+              /* @__PURE__ */ React3.createElement(
+                "path",
+                {
+                  fill: "currentColor",
+                  d: "M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+                }
+              )
+            ))
+          )
+        )
+      },
+      /* @__PURE__ */ React3.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          id: `${HISTORY_ELEMENT_PREFIX}0`,
+          style: {
+            borderBottom: `1px solid ${solidBorderColor}`,
+            fontSize: "12px",
+            fontFamily: "Menlo, monospace",
+            padding: "2px 12px 1px",
+            display: "flex",
+            alignItems: "center",
+            background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
+          }
+        },
+        /* @__PURE__ */ React3.createElement(
+          "span",
+          {
+            style: {
+              fontFamily: "Menlo, monospace",
+              fontSize: "11px",
+              borderRadius: 4,
+              display: "inline-block"
+            }
+          },
+          "Initial state"
+        )
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
+          key: index,
+          style: {
+            padding: "0px 12px 1px",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+          }
+        },
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ React3.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          entry.metadata.name
+        ),
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React3.createElement(
+          "pre",
+          {
+            key: j,
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap",
+              margin: 0
+            }
+          },
+          patch.op === "add" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React3.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React3.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
+        ))
+      )))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        open: showAssets,
+        setOpen: setShowAssets,
+        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Assets", /* @__PURE__ */ React3.createElement(ColoredDot, { type: assetsInitialized ? "success" : "error" })),
+        colorScheme,
+        right: /* @__PURE__ */ React3.createElement("span", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React3.createElement(
+          SmallButton,
+          {
+            theme,
+            onClick: () => {
+              console.info(
+                "[StateInspector] Reloading assets",
+                noyaManager.id
+              );
+              assetManager.fetch();
+            }
+          },
+          "Reload"
+        ), /* @__PURE__ */ React3.createElement(
+          SmallButton,
+          {
+            theme,
+            onClick: () => {
+              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;
+                    assetManager.create(new Uint8Array(buffer));
+                  };
+                  reader.readAsArrayBuffer(file);
+                }
+              };
+              input.click();
+            }
+          },
+          "Upload"
+        ))
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ React3.createElement(
+        SmallButton,
+        {
+          theme,
+          onClick: () => assetManager.delete(asset.id)
+        },
+        "Delete"
+      ))))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Secrets", /* @__PURE__ */ React3.createElement(ColoredDot, { type: secretsInitialized ? "success" : "error" })),
+        colorScheme,
+        open: showSecrets,
+        setOpen: setShowSecrets,
+        right: /* @__PURE__ */ React3.createElement(
+          SmallButton,
+          {
+            theme,
+            onClick: () => {
+              const name = prompt("Enter secret name");
+              if (!name) return;
+              const value = prompt("Enter secret value");
+              if (!value) return;
+              secretManager.createSecret(name, value);
+            }
+          },
+          "Create"
+        )
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, secrets.map((secret) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: secret.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { data: secret, theme }), /* @__PURE__ */ React3.createElement(
+        SmallButton,
+        {
+          theme,
+          onClick: () => secretManager.deleteSecret(secret.name)
+        },
+        "Delete"
+      ))))
+    ),
+    " ",
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        open: showInputs,
+        setOpen: setShowInputs,
+        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Inputs", /* @__PURE__ */ React3.createElement(ColoredDot, { type: inputsInitialized ? "success" : "error" })),
+        colorScheme
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, inputs?.map((input) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: input.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { data: input, theme }))), !inputs?.length && /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React3.createElement("span", null, "No inputs")
+      ))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        open: showOutputTransforms,
+        setOpen: setShowOutputTransforms,
+        title: /* @__PURE__ */ React3.createElement(TitleLabel, null, "Output Transforms", /* @__PURE__ */ React3.createElement(
+          ColoredDot,
+          {
+            type: outputTransformsInitialized ? "success" : "error"
+          }
+        )),
+        colorScheme
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, outputTransforms?.map((transform) => /* @__PURE__ */ React3.createElement(InspectorRow, { key: transform.id, colorScheme }, /* @__PURE__ */ React3.createElement(ObjectInspector, { data: transform, theme }))), !outputTransforms?.length && /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React3.createElement("span", null, "No output transforms")
+      ))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        title: "Tasks",
+        colorScheme,
+        open: showTasks,
+        setOpen: setShowTasks
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React3.createElement(
+        InspectorRow,
+        {
+          key: task.id,
+          colorScheme,
+          style: {
+            backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
+          }
+        },
+        /* @__PURE__ */ React3.createElement(
+          ObjectInspector,
+          {
+            name: task.name,
+            data: task.payload,
+            theme
+          }
+        )
+      )))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        open: showEphemeral,
+        setOpen: setShowEphemeral,
+        title: "Ephemeral User Data",
+        colorScheme
+      },
+      /* @__PURE__ */ React3.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ React3.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ React3.createElement(
+        ObjectInspector,
+        {
+          name: key,
+          data: value,
+          theme,
+          expandLevel: 10
+        }
+      ))))
+    ),
+    /* @__PURE__ */ React3.createElement(
+      DisclosureSection,
+      {
+        open: showEvents,
+        setOpen: setShowEvents,
+        title: "Events",
+        colorScheme
+      },
+      /* @__PURE__ */ React3.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React3.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React3.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React3.createElement(
+          InspectorRow,
+          {
+            key: index,
+            colorScheme,
+            variant: event.type === "send" ? "up" : "down",
+            style: {
+              padding: "0px 12px 1px"
+            }
+          },
+          /* @__PURE__ */ React3.createElement(
+            ObjectInspector,
+            {
+              data: event.type === "error" ? event.error : event.message,
+              theme,
+              nodeRenderer: ({
+                depth,
+                name,
+                data,
+                isNonenumerable
+              }) => {
+                const direction = event.type === "send" ? "up" : "down";
+                return depth === 0 ? /* @__PURE__ */ React3.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React3.createElement(
+                  ObjectLabel,
+                  {
+                    direction,
+                    name,
+                    data,
+                    isNonenumerable
+                  }
+                );
+              }
+            }
+          )
+        )
+      ), !connectionEvents && /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React3.createElement("span", null, "No recorded events")
+      ))
+    )
+  );
+});
+var ObjectRootLabel = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.createElement(ObjectName, { name }), /* @__PURE__ */ React3.createElement("span", null, ": "), /* @__PURE__ */ React3.createElement(ObjectPreview, { data }));
   }
-};
-var TypeSystemDuplicateFormat = class extends TypeBoxError {
-  constructor(kind) {
-    super(`Duplicate string format '${kind}' detected`);
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "\u2191" : "\u2193";
+    return /* @__PURE__ */ React3.createElement("span", null, /* @__PURE__ */ React3.createElement(
+      "span",
+      {
+        style: {
+          background: direction === "up" ? "rgba(0,255,0,0.2)" : "rgba(255,0,0,0.2)",
+          // color: "white",
+          width: 12,
+          height: 12,
+          borderRadius: 2,
+          display: "inline-flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginRight: 4,
+          lineHeight: "12px"
+        }
+      },
+      arrow
+    ), /* @__PURE__ */ React3.createElement(ObjectPreview, { data }));
+  } else {
+    return /* @__PURE__ */ React3.createElement(ObjectPreview, { data });
   }
 };
-var TypeSystem;
-(function(TypeSystem2) {
-  function Type2(kind, check) {
-    if (type_exports2.Has(kind))
-      throw new TypeSystemDuplicateTypeKind(kind);
-    type_exports2.Set(kind, check);
-    return (options = {}) => Unsafe({ ...options, [Kind]: kind });
-  }
-  TypeSystem2.Type = Type2;
-  function Format(format, check) {
-    if (format_exports.Has(format))
-      throw new TypeSystemDuplicateFormat(format);
-    format_exports.Set(format, check);
-    return format;
+function Arrow({
+  expanded,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      role: "button",
+      onClick,
+      style: {
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        fontFamily: "Menlo, monospace",
+        ...style
+      }
+    },
+    "\u25BC"
+  );
+}
+function pathToString(extendedPath) {
+  return extendedPath.map(
+    (key) => typeof key === "object" ? `:${ellipsis(key.id.toString(), 8, "middle")}` : key
+  ).map(
+    (key, index) => index === 0 || typeof key === "string" && key.startsWith(":") ? key : `.${key}`
+  ).join("");
+}
+function ellipsis(str, maxLength, position = "end") {
+  if (str.length <= maxLength) return str;
+  switch (position) {
+    case "start":
+      return `\u2026${str.slice(str.length - maxLength)}`;
+    case "middle":
+      const halfLength = Math.floor(maxLength / 2);
+      return `${str.slice(0, halfLength)}\u2026${str.slice(str.length - halfLength)}`;
+    case "end":
+      return `${str.slice(0, maxLength)}\u2026`;
   }
-  TypeSystem2.Format = Format;
-})(TypeSystem || (TypeSystem = {}));
-
-// ../../node_modules/@sinclair/typebox/build/esm/value/hash/hash.mjs
-var ByteMarker;
-(function(ByteMarker2) {
-  ByteMarker2[ByteMarker2["Undefined"] = 0] = "Undefined";
-  ByteMarker2[ByteMarker2["Null"] = 1] = "Null";
-  ByteMarker2[ByteMarker2["Boolean"] = 2] = "Boolean";
-  ByteMarker2[ByteMarker2["Number"] = 3] = "Number";
-  ByteMarker2[ByteMarker2["String"] = 4] = "String";
-  ByteMarker2[ByteMarker2["Object"] = 5] = "Object";
-  ByteMarker2[ByteMarker2["Array"] = 6] = "Array";
-  ByteMarker2[ByteMarker2["Date"] = 7] = "Date";
-  ByteMarker2[ByteMarker2["Uint8Array"] = 8] = "Uint8Array";
-  ByteMarker2[ByteMarker2["Symbol"] = 9] = "Symbol";
-  ByteMarker2[ByteMarker2["BigInt"] = 10] = "BigInt";
-})(ByteMarker || (ByteMarker = {}));
-var Accumulator = BigInt("14695981039346656037");
-var [Prime, Size] = [BigInt("1099511628211"), BigInt("2") ** BigInt("64")];
-var Bytes = Array.from({ length: 256 }).map((_, i) => BigInt(i));
-var F64 = new Float64Array(1);
-var F64In = new DataView(F64.buffer);
-var F64Out = new Uint8Array(F64.buffer);
-
-// ../../node_modules/@sinclair/typebox/build/esm/errors/errors.mjs
-var ValueErrorType;
-(function(ValueErrorType2) {
-  ValueErrorType2[ValueErrorType2["ArrayContains"] = 0] = "ArrayContains";
-  ValueErrorType2[ValueErrorType2["ArrayMaxContains"] = 1] = "ArrayMaxContains";
-  ValueErrorType2[ValueErrorType2["ArrayMaxItems"] = 2] = "ArrayMaxItems";
-  ValueErrorType2[ValueErrorType2["ArrayMinContains"] = 3] = "ArrayMinContains";
-  ValueErrorType2[ValueErrorType2["ArrayMinItems"] = 4] = "ArrayMinItems";
-  ValueErrorType2[ValueErrorType2["ArrayUniqueItems"] = 5] = "ArrayUniqueItems";
-  ValueErrorType2[ValueErrorType2["Array"] = 6] = "Array";
-  ValueErrorType2[ValueErrorType2["AsyncIterator"] = 7] = "AsyncIterator";
-  ValueErrorType2[ValueErrorType2["BigIntExclusiveMaximum"] = 8] = "BigIntExclusiveMaximum";
-  ValueErrorType2[ValueErrorType2["BigIntExclusiveMinimum"] = 9] = "BigIntExclusiveMinimum";
-  ValueErrorType2[ValueErrorType2["BigIntMaximum"] = 10] = "BigIntMaximum";
-  ValueErrorType2[ValueErrorType2["BigIntMinimum"] = 11] = "BigIntMinimum";
-  ValueErrorType2[ValueErrorType2["BigIntMultipleOf"] = 12] = "BigIntMultipleOf";
-  ValueErrorType2[ValueErrorType2["BigInt"] = 13] = "BigInt";
-  ValueErrorType2[ValueErrorType2["Boolean"] = 14] = "Boolean";
-  ValueErrorType2[ValueErrorType2["DateExclusiveMaximumTimestamp"] = 15] = "DateExclusiveMaximumTimestamp";
-  ValueErrorType2[ValueErrorType2["DateExclusiveMinimumTimestamp"] = 16] = "DateExclusiveMinimumTimestamp";
-  ValueErrorType2[ValueErrorType2["DateMaximumTimestamp"] = 17] = "DateMaximumTimestamp";
-  ValueErrorType2[ValueErrorType2["DateMinimumTimestamp"] = 18] = "DateMinimumTimestamp";
-  ValueErrorType2[ValueErrorType2["DateMultipleOfTimestamp"] = 19] = "DateMultipleOfTimestamp";
-  ValueErrorType2[ValueErrorType2["Date"] = 20] = "Date";
-  ValueErrorType2[ValueErrorType2["Function"] = 21] = "Function";
-  ValueErrorType2[ValueErrorType2["IntegerExclusiveMaximum"] = 22] = "IntegerExclusiveMaximum";
-  ValueErrorType2[ValueErrorType2["IntegerExclusiveMinimum"] = 23] = "IntegerExclusiveMinimum";
-  ValueErrorType2[ValueErrorType2["IntegerMaximum"] = 24] = "IntegerMaximum";
-  ValueErrorType2[ValueErrorType2["IntegerMinimum"] = 25] = "IntegerMinimum";
-  ValueErrorType2[ValueErrorType2["IntegerMultipleOf"] = 26] = "IntegerMultipleOf";
-  ValueErrorType2[ValueErrorType2["Integer"] = 27] = "Integer";
-  ValueErrorType2[ValueErrorType2["IntersectUnevaluatedProperties"] = 28] = "IntersectUnevaluatedProperties";
-  ValueErrorType2[ValueErrorType2["Intersect"] = 29] = "Intersect";
-  ValueErrorType2[ValueErrorType2["Iterator"] = 30] = "Iterator";
-  ValueErrorType2[ValueErrorType2["Kind"] = 31] = "Kind";
-  ValueErrorType2[ValueErrorType2["Literal"] = 32] = "Literal";
-  ValueErrorType2[ValueErrorType2["Never"] = 33] = "Never";
-  ValueErrorType2[ValueErrorType2["Not"] = 34] = "Not";
-  ValueErrorType2[ValueErrorType2["Null"] = 35] = "Null";
-  ValueErrorType2[ValueErrorType2["NumberExclusiveMaximum"] = 36] = "NumberExclusiveMaximum";
-  ValueErrorType2[ValueErrorType2["NumberExclusiveMinimum"] = 37] = "NumberExclusiveMinimum";
-  ValueErrorType2[ValueErrorType2["NumberMaximum"] = 38] = "NumberMaximum";
-  ValueErrorType2[ValueErrorType2["NumberMinimum"] = 39] = "NumberMinimum";
-  ValueErrorType2[ValueErrorType2["NumberMultipleOf"] = 40] = "NumberMultipleOf";
-  ValueErrorType2[ValueErrorType2["Number"] = 41] = "Number";
-  ValueErrorType2[ValueErrorType2["ObjectAdditionalProperties"] = 42] = "ObjectAdditionalProperties";
-  ValueErrorType2[ValueErrorType2["ObjectMaxProperties"] = 43] = "ObjectMaxProperties";
-  ValueErrorType2[ValueErrorType2["ObjectMinProperties"] = 44] = "ObjectMinProperties";
-  ValueErrorType2[ValueErrorType2["ObjectRequiredProperty"] = 45] = "ObjectRequiredProperty";
-  ValueErrorType2[ValueErrorType2["Object"] = 46] = "Object";
-  ValueErrorType2[ValueErrorType2["Promise"] = 47] = "Promise";
-  ValueErrorType2[ValueErrorType2["RegExp"] = 48] = "RegExp";
-  ValueErrorType2[ValueErrorType2["StringFormatUnknown"] = 49] = "StringFormatUnknown";
-  ValueErrorType2[ValueErrorType2["StringFormat"] = 50] = "StringFormat";
-  ValueErrorType2[ValueErrorType2["StringMaxLength"] = 51] = "StringMaxLength";
-  ValueErrorType2[ValueErrorType2["StringMinLength"] = 52] = "StringMinLength";
-  ValueErrorType2[ValueErrorType2["StringPattern"] = 53] = "StringPattern";
-  ValueErrorType2[ValueErrorType2["String"] = 54] = "String";
-  ValueErrorType2[ValueErrorType2["Symbol"] = 55] = "Symbol";
-  ValueErrorType2[ValueErrorType2["TupleLength"] = 56] = "TupleLength";
-  ValueErrorType2[ValueErrorType2["Tuple"] = 57] = "Tuple";
-  ValueErrorType2[ValueErrorType2["Uint8ArrayMaxByteLength"] = 58] = "Uint8ArrayMaxByteLength";
-  ValueErrorType2[ValueErrorType2["Uint8ArrayMinByteLength"] = 59] = "Uint8ArrayMinByteLength";
-  ValueErrorType2[ValueErrorType2["Uint8Array"] = 60] = "Uint8Array";
-  ValueErrorType2[ValueErrorType2["Undefined"] = 61] = "Undefined";
-  ValueErrorType2[ValueErrorType2["Union"] = 62] = "Union";
-  ValueErrorType2[ValueErrorType2["Void"] = 63] = "Void";
-})(ValueErrorType || (ValueErrorType = {}));
-
-// ../../node_modules/@sinclair/typebox/build/esm/value/delta/delta.mjs
-var Insert = Object2({
-  type: Literal("insert"),
-  path: String(),
-  value: Unknown()
-});
-var Update = Object2({
-  type: Literal("update"),
-  path: String(),
-  value: Unknown()
-});
-var Delete3 = Object2({
-  type: Literal("delete"),
-  path: String()
-});
-var Edit = Union([Insert, Update, Delete3]);
+}
+function SmallButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled
+}) {
+  return /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      style: {
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        cursor: "pointer",
+        ...style
+      }
+    },
+    children
+  );
+}
+function ColoredDot({ type }) {
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: 6,
+        height: 6,
+        background: type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
+        borderRadius: "50%",
+        verticalAlign: "middle"
+      }
+    }
+  );
+}
+function TitleLabel({ children }) {
+  return /* @__PURE__ */ React3.createElement("span", { style: { display: "flex", alignItems: "center", gap: "4px" } }, children);
+}
 
-// ../noya-schemas/src/SchemaTree.ts
-var import_tree_visit = __toESM(require_lib());
-var SchemaTree = (0, import_tree_visit.defineTree)((schema) => {
-  if (type_exports.IsUnion(schema)) {
-    return schema.anyOf;
-  } else if (type_exports.IsObject(schema)) {
-    return Object.values(schema.properties);
-  } else if (type_exports.IsArray(schema)) {
-    return [schema.items];
-  }
-  return [];
-}).withOptions({
-  getLabel(node) {
-    return node[Kind] ?? "<UnknownKind>";
-  }
-});
-function findAllDefs(schema) {
-  if (!schema) return [];
-  return SchemaTree.flatMap(schema, (node) => {
-    return node.$id ? [node] : [];
-  });
+// src/inspector/useStateInspector.tsx
+function createShadowRootElement() {
+  const host = document.createElement("div");
+  host.id = "noya-multiplayer-react-inspector-host";
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  const container = document.createElement("div");
+  shadowRoot.appendChild(container);
+  return { host, container };
+}
+function useStateInspector({
+  noyaManager,
+  disabled = false,
+  colorScheme,
+  anchor
+}) {
+  const [root, setRoot] = React4.useState(null);
+  useLayoutEffect2(() => {
+    if (disabled) return;
+    const { host, container } = createShadowRootElement();
+    const root2 = createRoot(container);
+    document.body.appendChild(host);
+    setRoot(root2);
+    return () => {
+      document.body.removeChild(host);
+    };
+  }, [disabled]);
+  useLayoutEffect2(() => {
+    if (!root) return;
+    root.render(
+      /* @__PURE__ */ React4.createElement(
+        StateInspector,
+        {
+          colorScheme,
+          anchor,
+          noyaManager
+        }
+      )
+    );
+  }, [noyaManager, anchor, colorScheme, root]);
 }
 
-// ../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(
-    value
+// src/hooks.ts
+function useSyncStateManager(stateManager, path) {
+  const getSnapshot = useCallback(
+    () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
+    [stateManager, path]
+  );
+  return useSyncExternalStore2(
+    stateManager.addListener,
+    getSnapshot,
+    getSnapshot
   );
 }
-format_exports.Set("color", () => true);
-format_exports.Set("uuid", validateUUID);
+function useManagedState(createInitialState, options) {
+  const [stateManager] = useState(
+    () => new StateManager(createInitialState(), options)
+  );
+  const state = useSyncStateManager(stateManager);
+  const setState = useCallback(
+    (...args) => {
+      const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
+      if (metadata === void 0) {
+        const performActionNoMetadata = stateManager.performAction;
+        if (action instanceof Function) {
+          performActionNoMetadata({
+            run: action,
+            undo: () => state
+          });
+        } else {
+          performActionNoMetadata({
+            run: () => action,
+            undo: () => state
+          });
+        }
+      } else {
+        const performActionWithMetadata = stateManager.performAction;
+        if (action instanceof Function) {
+          performActionWithMetadata(metadata, {
+            run: action,
+            undo: () => state
+          });
+        } else {
+          performActionWithMetadata(metadata, {
+            run: () => action,
+            undo: () => state
+          });
+        }
+      }
+    },
+    [state, stateManager]
+  );
+  return [state, setState, stateManager];
+}
+function useManagedHistory(stateManager) {
+  return useSyncExternalStore2(
+    stateManager.historyEmittor.addListener,
+    stateManager.getHistorySnapshot,
+    stateManager.getHistorySnapshot
+  );
+}
+var defaultStubSync = stubSync();
+function useMultiplayerState(initialState, options) {
+  const {
+    sync = defaultStubSync,
+    inspector,
+    ...rest
+  } = options ?? {};
+  const [noyaManager] = useState(
+    () => new NoyaManager(initialState, rest)
+  );
+  const state = useObservable(
+    noyaManager.multiplayerStateManager.optimisticState$
+  );
+  const assets = useObservable(noyaManager.assetManager.assets$);
+  const extras = useMemo2(() => {
+    return {
+      noyaManager,
+      taskManager: noyaManager.taskManager,
+      connectionEventManager: noyaManager.connectionEventManager,
+      connectedUsersManager: noyaManager.connectedUsersManager,
+      ephemeralUserDataManager: noyaManager.ephemeralUserDataManager,
+      multiplayerStateManager: noyaManager.multiplayerStateManager,
+      assetManager: noyaManager.assetManager,
+      aiManager: noyaManager.aiManager,
+      rpcManager: noyaManager.rpcManager,
+      pipelineManager: noyaManager.pipelineManager,
+      secretManager: noyaManager.secretManager,
+      menuItemsManager: noyaManager.menuManager,
+      createAsset: noyaManager.assetManager.create,
+      deleteAsset: noyaManager.assetManager.delete,
+      assets
+    };
+  }, [noyaManager, assets]);
+  const syncRef = useRef(sync);
+  useEffect2(() => {
+    if (syncRef.current) {
+      return syncRef.current({ noyaManager });
+    }
+  }, [noyaManager]);
+  useErrorOverlay(noyaManager);
+  useStateInspector({
+    noyaManager,
+    disabled: !inspector,
+    ...typeof inspector === "object" && inspector
+  });
+  return [state, noyaManager.multiplayerStateManager.setState, extras];
+}
+function useErrorOverlay(noyaManager) {
+  const unrecoverableError = useObservable(noyaManager.unrecoverableError);
+  useEffect2(() => {
+    if (!unrecoverableError) return;
+    const el = document.createElement("div");
+    el.id = "noya-multiplayer-react-error-overlay";
+    document.body.appendChild(el);
+    const root = createRoot2(el);
+    root.render(createElement2(ErrorOverlay, { error: unrecoverableError }));
+    return () => {
+      root.unmount();
+      el.remove();
+    };
+  });
+}
 
 // src/noyaApp.ts
-import {
-  createOrCastValue,
-  isEmbeddedApp,
-  localStorageSync,
-  parentFrameSync,
-  stubSync as stubSync2,
-  TypeGuard,
-  webSocketSync
-} from "@noya-app/state-manager";
-import { useMemo as useMemo3, useState as useState3 } from "react";
 function createDefaultAppData(initialState) {
   return {
     theme: "light",
@@ -5037,7 +5032,7 @@ function useNoyaState(...args) {
       theme,
       viewType
     }
-  ] = useState3(() => {
+  ] = useState2(() => {
     return getAppData(initialState, options?.schema, {
       overrideExistingState: options?.overrideExistingState
     });
@@ -5061,16 +5056,6 @@ function useNoyaState(...args) {
 }
 
 // src/NoyaStateContext.tsx
-import {
-  Observable
-} from "@noya-app/observable";
-import React6, {
-  createContext,
-  useCallback as useCallback2,
-  useContext,
-  useEffect as useEffect4,
-  useMemo as useMemo4
-} from "react";
 var AnyNoyaStateContext = createContext(void 0);
 function useAnyNoyaStateContext() {
   const value = useContext(AnyNoyaStateContext);
@@ -5219,17 +5204,17 @@ function createNoyaContext({
       }),
       [noyaManager, theme, viewType]
     );
-    return /* @__PURE__ */ React6.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React5.createElement(AnyNoyaStateContext.Provider, { value: contextValue }, /* @__PURE__ */ React5.createElement(
       ConnectedUsersContext.Provider,
       {
         value: noyaManager.connectedUsersManager
       },
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React5.createElement(
         EphemeralUserDataManagerContext.Provider,
         {
           value: noyaManager.ephemeralUserDataManager
         },
-        options.fallback !== void 0 ? /* @__PURE__ */ React6.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
+        options.fallback !== void 0 ? /* @__PURE__ */ React5.createElement(FallbackUntilInitialized, { fallback: options.fallback }, children) : children
       )
     ));
   }
@@ -5290,7 +5275,7 @@ function createNoyaContext({
   }
   function useSetLeftMenuItems(leftMenuItems) {
     const { menuManager } = useNoyaManager();
-    useEffect4(() => {
+    useEffect3(() => {
       if (leftMenuItems) {
         menuManager.setLeftMenuItems(leftMenuItems);
       }
@@ -5302,7 +5287,7 @@ function createNoyaContext({
   }
   function useSetRightMenuItems(rightMenuItems) {
     const { menuManager } = useNoyaManager();
-    useEffect4(() => {
+    useEffect3(() => {
       if (rightMenuItems) {
         menuManager.setRightMenuItems(rightMenuItems);
       }
@@ -5310,7 +5295,7 @@ function createNoyaContext({
   }
   function useHandleMenuItem(callback) {
     const { menuManager } = useNoyaManager();
-    useEffect4(() => {
+    useEffect3(() => {
       return menuManager.addListener(callback);
     }, [menuManager, callback]);
   }
@@ -5345,6 +5330,75 @@ function createNoyaContext({
   };
 }
 
+// src/ai.ts
+function useRegisterAITool(tool) {
+  const aiManager = useAIManager();
+  useEffect4(() => {
+    return aiManager.registerTool(tool);
+  }, [aiManager, tool]);
+}
+function useCallableAITools() {
+  const aiManager = useAIManager();
+  return useObservable(aiManager.callableTools$);
+}
+
+// src/components/UserPointersOverlay.tsx
+import { memoGeneric as memoGeneric2 } from "@noya-app/react-utils";
+import React6, { useEffect as useEffect5, useState as useState3 } from "react";
+function shouldShow(hideAfter, updatedAt) {
+  return !!updatedAt && Date.now() - updatedAt < hideAfter;
+}
+var UserPointerInternal = memoGeneric2(function UserPointerInternal2({
+  user,
+  ephemeralUserDataManager,
+  hideAfter = 5e3,
+  renderUserPointer
+}) {
+  const metadata = useObservable(ephemeralUserDataManager.metadata$, [
+    user.id
+  ]);
+  const data = useObservable(ephemeralUserDataManager.data$, [
+    user.id
+  ]);
+  const [, setForceUpdate] = useState3(0);
+  const updatedAt = metadata?.updatedAt ?? 0;
+  const show = shouldShow(hideAfter, updatedAt);
+  useEffect5(() => {
+    if (!show) return;
+    const timeoutId = setTimeout(() => {
+      setForceUpdate((prev) => prev + 1);
+    }, hideAfter);
+    return () => clearTimeout(timeoutId);
+  }, [hideAfter, show, updatedAt]);
+  if (!data?.pointer) return null;
+  return renderUserPointer({
+    userId: user.id,
+    name: user.name,
+    point: data.pointer,
+    visible: show
+  });
+});
+var UserPointersOverlay = memoGeneric2(function UserPointers({
+  connectedUsersManager,
+  ephemeralUserDataManager,
+  renderUserPointer
+}) {
+  const currentUserId = useObservable(ephemeralUserDataManager.currentUserId$);
+  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, connectedUsers.map((user) => {
+    if (user.id === currentUserId) return null;
+    return /* @__PURE__ */ React6.createElement(
+      UserPointerInternal,
+      {
+        key: user.id,
+        user,
+        ephemeralUserDataManager,
+        renderUserPointer
+      }
+    );
+  }));
+});
+
 // src/WebSocketConnection.ts
 import {
   ReconnectingWebSocket,
@@ -5427,6 +5481,7 @@ var WebSocketConnection = class {
 };
 export {
   AnyEphemeralUserDataManagerContext,
+  AnyNoyaStateContext,
   ConnectedUsersContext,
   FallbackUntilInitialized,
   StateInspector,
@@ -5444,6 +5499,7 @@ export {
   useAsset,
   useAssetManager,
   useAssets,
+  useCallableAITools,
   useColorScheme,
   useConnectedUsersManager,
   useCurrentUserId,
@@ -5457,6 +5513,7 @@ export {
   useObservable,
   useOutputTransforms,
   usePipelineManager,
+  useRegisterAITool,
   useSecret,
   useSecretManager,
   useSecrets,