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

package/dist/index.js

@@ -42,13 +42,15 @@ __export(src_exports, {
   getAvatarInitials: () => getAvatarInitials,
   getAvatarStyle: () => getAvatarStyle,
   isEmbeddedApp: () => isEmbeddedApp,
+  useAppData: () => useAppData,
   useBroadcastConnectedUsers: () => useBroadcastConnectedUsers,
   useBroadcastMenuItems: () => useBroadcastMenuItems,
   useEphemeralUserData: () => useEphemeralUserData,
   useManagedHistory: () => useManagedHistory,
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
-  useNoyaApp: () => useNoyaApp,
+  useNoyaAppState: () => useNoyaAppState,
+  useObservable: () => useObservable,
   useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
   useSyncStateManager: () => useSyncStateManager
 });
@@ -247,80 +249,9 @@ var UserPointerIcon = (0, import_react2.memo)(function CursorIcon({
   );
 });
 
-// src/embedded.ts
-var import_state_manager = require("@noya-app/state-manager");
-var import_react3 = require("react");
-function createDefaultAppData(initialState) {
-  return {
-    theme: "light",
-    viewType: "editable",
-    initialState,
-    inspector: false
-  };
-}
-function getAppData(initialState) {
-  try {
-    const urlHash = (window.location.hash || "").replace(/^#/, "");
-    const params = new URLSearchParams(urlHash);
-    const data = params.get("data");
-    if (!data) {
-      return initialState ? createDefaultAppData(initialState) : void 0;
-    }
-    const parsed = JSON.parse(data);
-    if (!parsed.initialState) {
-      parsed.initialState = initialState;
-    }
-    return parsed;
-  } catch (e) {
-    return initialState ? createDefaultAppData(initialState) : void 0;
-  }
-}
-function useNoyaApp(initialState, { schema } = {}) {
-  const appData = (0, import_react3.useMemo)(() => {
-    return getAppData(
-      schema ? (0, import_state_manager.createValue)(schema, initialState) : initialState
-    );
-  }, [initialState, schema]);
-  return appData;
-}
-function useBroadcastConnectedUsers(connectedUsers) {
-  (0, import_react3.useEffect)(() => {
-    if (!isEmbeddedApp())
-      return;
-    const message = {
-      type: "multiplayer.setUsers",
-      payload: { users: connectedUsers }
-    };
-    parent?.postMessage(message, "*");
-  }, [connectedUsers]);
-}
-function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
-  (0, import_react3.useEffect)(() => {
-    if (!isEmbeddedApp())
-      return;
-    const message = {
-      type: "application.setMenuItems",
-      payload: { menuItems }
-    };
-    parent?.postMessage(message, "*");
-    const listener = (event) => {
-      if (event.data.type === "application.selectMenuItem") {
-        handleSelectMenuItem(event.data.payload.value);
-      }
-    };
-    window.addEventListener("message", listener);
-    return () => {
-      window.removeEventListener("message", listener);
-    };
-  }, [handleSelectMenuItem, menuItems]);
-}
-function isEmbeddedApp() {
-  return window.self !== window.top;
-}
-
 // src/hooks.ts
-var import_state_manager2 = require("@noya-app/state-manager");
-var import_react7 = require("react");
+var import_state_manager = require("@noya-app/state-manager");
+var import_react6 = require("react");
 
 // src/globals.ts
 var import_observable = require("@noya-app/observable");
@@ -328,18 +259,18 @@ var shouldTrackEvents$ = new import_observable.Observable(false);
 var shouldTrackTasks$ = new import_observable.Observable(false);
 
 // src/inspector/useStateInspector.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 
 // src/inspector/StateInspector.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_react_inspector = require("react-inspector");
 
 // src/inspector/useLocalStorageState.tsx
-var import_react4 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var localStorage = typeof window !== "undefined" ? window.localStorage : null;
 function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = import_react4.default.useState(() => {
+  const [state, setState] = import_react3.default.useState(() => {
     const value = localStorage?.getItem(key);
     let result = defaultValue;
     if (value) {
@@ -384,7 +315,7 @@ function ToggleButton({
   theme,
   anchor
 }) {
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "span",
     {
       role: "button",
@@ -405,7 +336,7 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react4.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -415,7 +346,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -423,7 +354,7 @@ function ToggleButton({
           d: "m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
         }
       )
-    ) : /* @__PURE__ */ import_react5.default.createElement(
+    ) : /* @__PURE__ */ import_react4.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -433,7 +364,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -456,7 +387,7 @@ function DisclosureSection({
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
   const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -466,7 +397,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -480,7 +411,7 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ import_react5.default.createElement(
+      setOpen && /* @__PURE__ */ import_react4.default.createElement(
         Arrow,
         {
           expanded: open,
@@ -491,7 +422,7 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ import_react5.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      /* @__PURE__ */ import_react4.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
@@ -505,7 +436,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       style: {
@@ -523,7 +454,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       "span",
       {
         style: {
@@ -538,7 +469,7 @@ function InspectorRow({
   );
 }
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = (0, import_react5.memo)(function StateInspector2({
+var StateInspector = (0, import_react4.memo)(function StateInspector2({
   state,
   connectionEvents,
   connectedUsers,
@@ -552,12 +483,12 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
   forceInit,
   ...props
 }) {
-  const [didMount, setDidMount] = import_react5.default.useState(false);
-  (0, import_react5.useLayoutEffect)(() => {
+  const [didMount, setDidMount] = import_react4.default.useState(false);
+  (0, import_react4.useLayoutEffect)(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = import_react5.default.useRef(null);
-  const historyContainerRef = import_react5.default.useRef(null);
+  const eventsContainerRef = import_react4.default.useRef(null);
+  const historyContainerRef = import_react4.default.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -586,25 +517,25 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     shouldTrackTasks$.set(showTasks);
   }, [showTasks]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
     }
   }, [historySnapshot]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!historyContainerRef.current)
       return;
     const historyEntry = historyContainerRef.current.querySelector(
@@ -641,7 +572,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
   if (!didMount)
     return null;
   if (!showInspector) {
-    return /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         ...props,
@@ -653,7 +584,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         ToggleButton,
         {
           showInspector,
@@ -664,7 +595,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
       )
     );
   }
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "div",
     {
       ...props,
@@ -673,7 +604,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         isFirst: true,
@@ -685,7 +616,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           ToggleButton,
           {
             showInspector,
@@ -695,14 +626,14 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react4.default.createElement(
         InspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ import_react5.default.createElement(
+        user.image && /* @__PURE__ */ import_react4.default.createElement(
           "img",
           {
             src: user.image,
@@ -723,7 +654,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ import_react5.default.createElement(
+      )), !connectedUsers && /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           style: {
@@ -734,17 +665,17 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react4.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         title: "Data",
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           "span",
           {
             style: {
@@ -752,7 +683,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             SmallButton,
             {
               theme,
@@ -764,14 +695,14 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: "schema",
@@ -780,14 +711,14 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         }
       )))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
         colorScheme,
-        right: /* @__PURE__ */ import_react5.default.createElement(
+        right: /* @__PURE__ */ import_react4.default.createElement(
           "span",
           {
             style: {
@@ -795,7 +726,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canUndo,
@@ -804,7 +735,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
                 multiplayerStateManager.undo();
               }
             },
-            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
+            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -812,7 +743,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react5.default.createElement(
+              /* @__PURE__ */ import_react4.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -821,7 +752,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
               )
             ))
           ),
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canRedo,
@@ -830,7 +761,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
                 multiplayerStateManager.redo();
               }
             },
-            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
+            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -838,7 +769,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react5.default.createElement(
+              /* @__PURE__ */ import_react4.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -849,7 +780,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}0`,
@@ -863,7 +794,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(
           "span",
           {
             style: {
@@ -875,7 +806,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
           },
           "Initial state"
         )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react5.default.createElement(
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
@@ -886,7 +817,18 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react5.default.createElement(
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react4.default.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap"
+            }
+          },
+          entry.metadata.name
+        ),
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react4.default.createElement(
           "pre",
           {
             key: j,
@@ -896,14 +838,14 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
               flexWrap: "wrap"
             }
           },
-          patch.op === "add" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-          patch.op === "replace" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
-          patch.op === "remove" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
-          patch.op === "move" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
+          patch.op === "add" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path))),
+          patch.op === "move" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.from)), " -> ", /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
         ))
       )))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         title: "Tasks",
@@ -911,7 +853,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react4.default.createElement(
         InspectorRow,
         {
           key: task.id,
@@ -920,7 +862,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement(
+        /* @__PURE__ */ import_react4.default.createElement(
           import_react_inspector.ObjectInspector,
           {
             name: task.name,
@@ -930,7 +872,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         )
       )))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showEphemeral,
@@ -938,7 +880,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, Object.entries(ephemeral).map(([key, value]) => /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { key, colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: key,
@@ -948,7 +890,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         }
       ))))
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(
       DisclosureSection,
       {
         open: showEvents,
@@ -956,8 +898,8 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         title: "Events",
         colorScheme
       },
-      /* @__PURE__ */ import_react5.default.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
-        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ import_react4.default.createElement(
           InspectorRow,
           {
             key: index,
@@ -967,7 +909,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
               padding: "0px 12px 1px"
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             import_react_inspector.ObjectInspector,
             {
               data: event.message,
@@ -980,7 +922,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
                 expanded
               }) => {
                 const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ import_react5.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react5.default.createElement(
+                return depth === 0 ? /* @__PURE__ */ import_react4.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react4.default.createElement(
                   import_react_inspector.ObjectLabel,
                   {
                     direction,
@@ -993,7 +935,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             }
           )
         )
-      ), !connectionEvents && /* @__PURE__ */ import_react5.default.createElement(
+      ), !connectionEvents && /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           style: {
@@ -1004,18 +946,18 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react5.default.createElement("span", null, "No recorded events")
+        /* @__PURE__ */ import_react4.default.createElement("span", null, "No recorded events")
       ))
     )
   );
 });
 var ObjectRootLabel = ({ name, data, direction }) => {
   if (typeof name === "string") {
-    return /* @__PURE__ */ import_react5.default.createElement("span", null, /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectName, { name }), /* @__PURE__ */ import_react5.default.createElement("span", null, ": "), /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data }));
+    return /* @__PURE__ */ import_react4.default.createElement("span", null, /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectName, { name }), /* @__PURE__ */ import_react4.default.createElement("span", null, ": "), /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data }));
   }
   if (direction === "up" || direction === "down") {
     const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ import_react5.default.createElement("span", null, /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement("span", null, /* @__PURE__ */ import_react4.default.createElement(
       "span",
       {
         style: {
@@ -1032,9 +974,9 @@ var ObjectRootLabel = ({ name, data, direction }) => {
         }
       },
       arrow
-    ), /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data }));
+    ), /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data }));
   } else {
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data });
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data });
   }
 };
 function Arrow({
@@ -1042,7 +984,7 @@ function Arrow({
   onClick,
   style
 }) {
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "span",
     {
       role: "button",
@@ -1085,7 +1027,7 @@ function SmallButton({
   theme,
   disabled
 }) {
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       type: "button",
@@ -1134,8 +1076,8 @@ function useStateInspector({
   ephemeralUserData,
   forceInit
 }) {
-  const [root, setRoot] = import_react6.default.useState(null);
-  (0, import_react6.useLayoutEffect)(() => {
+  const [root, setRoot] = import_react5.default.useState(null);
+  (0, import_react5.useLayoutEffect)(() => {
     if (disabled)
       return;
     const portalElement = createPortalElement();
@@ -1146,11 +1088,11 @@ function useStateInspector({
       document.body.removeChild(portalElement);
     };
   }, [disabled]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     if (!root)
       return;
     root.render(
-      /* @__PURE__ */ import_react6.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         StateInspector,
         {
           state,
@@ -1183,22 +1125,22 @@ function useStateInspector({
 
 // src/hooks.ts
 function useSyncStateManager(stateManager, path) {
-  const getSnapshot = (0, import_react7.useCallback)(
+  const getSnapshot = (0, import_react6.useCallback)(
     () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
     [stateManager, path]
   );
-  return (0, import_react7.useSyncExternalStore)(
+  return (0, import_react6.useSyncExternalStore)(
     stateManager.addListener,
     getSnapshot,
     getSnapshot
   );
 }
 function useManagedState(createInitialState, options) {
-  const [stateManager] = (0, import_react7.useState)(
-    () => new import_state_manager2.StateManager(createInitialState(), options)
+  const [stateManager] = (0, import_react6.useState)(
+    () => new import_state_manager.StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = (0, import_react7.useCallback)(
+  const setState = (0, import_react6.useCallback)(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -1234,47 +1176,80 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react7.useSyncExternalStore)(
+  return (0, import_react6.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
   );
 }
 function useSyncMultiplayerStateManager(multiplayerStateManager) {
-  return (0, import_react7.useSyncExternalStore)(
+  return (0, import_react6.useSyncExternalStore)(
     multiplayerStateManager.addListener,
     multiplayerStateManager.getOptimisticState,
     multiplayerStateManager.getOptimisticState
   );
 }
-function useEphemeralUserData(ephemeralUserData) {
-  return (0, import_react7.useSyncExternalStore)(
-    ephemeralUserData.addListener,
+function throttle(fn, ms) {
+  let lastCall = 0;
+  let timeoutId = null;
+  return (...args) => {
+    const now = Date.now();
+    if (now - lastCall < ms) {
+      if (timeoutId)
+        clearTimeout(timeoutId);
+      timeoutId = setTimeout(
+        () => {
+          lastCall = now;
+          fn(...args);
+        },
+        ms - (now - lastCall)
+      );
+      return;
+    }
+    lastCall = now;
+    return fn(...args);
+  };
+}
+function useEphemeralUserData(ephemeralUserData, options) {
+  const throttledAddListener = (0, import_react6.useMemo)(() => {
+    const throttleMs = options?.throttle ?? 0;
+    if (throttleMs > 0) {
+      const addListener = (fn) => {
+        const throttledFn = throttle(fn, throttleMs);
+        return ephemeralUserData.addListener(throttledFn);
+      };
+      return addListener;
+    }
+    return ephemeralUserData.addListener;
+  }, [ephemeralUserData, options?.throttle]);
+  return (0, import_react6.useSyncExternalStore)(
+    throttledAddListener,
     ephemeralUserData.getSnapshot,
     ephemeralUserData.getSnapshot
   );
 }
-var defaultStubSync = (0, import_state_manager2.stubSync)();
+var defaultStubSync = (0, import_state_manager.stubSync)();
 function useMultiplayerState(initialState, options) {
   const { sync = defaultStubSync, ...rest } = options ?? {};
-  const [multiplayerStateManager] = (0, import_react7.useState)(
-    () => new import_state_manager2.MultiplayerStateManager(initialState, rest)
+  const [multiplayerStateManager] = (0, import_react6.useState)(
+    () => new import_state_manager.MultiplayerStateManager(initialState, rest)
   );
-  const syncRef = (0, import_react7.useRef)(sync);
-  const [connectionEvents, setConnectionEvents] = (0, import_react7.useState)();
-  const [connectedUsers, setConnectedUsers] = (0, import_react7.useState)([]);
-  const [ephemeralUserData] = (0, import_react7.useState)(
-    () => new import_state_manager2.EphemeralUserData()
+  const syncRef = (0, import_react6.useRef)(sync);
+  const [connectionEvents, setConnectionEvents] = (0, import_react6.useState)();
+  const [connectedUsers, setConnectedUsers] = (0, import_react6.useState)([]);
+  const [ephemeralUserData] = (0, import_react6.useState)(
+    () => new import_state_manager.EphemeralUserData()
   );
-  const [tasks, setTasks] = (0, import_react7.useState)([]);
-  const [userId, setUserId] = (0, import_react7.useState)();
-  const extras = (0, import_react7.useMemo)(() => {
+  const [tasks, setTasks] = (0, import_react6.useState)([]);
+  const [userId, setUserId] = (0, import_react6.useState)();
+  const extras = (0, import_react6.useMemo)(() => {
     return {
       tasks,
       userId,
       connectionEvents,
       connectedUsers,
-      ephemeralUserData
+      ephemeralUserData,
+      multiplayerStateManager
       // evaluate: async (code: string) => {
       //   const payload = await rpcManager.request({ type: "eval", code });
       //   if (payload.type !== "eval") {
@@ -1282,27 +1257,34 @@ function useMultiplayerState(initialState, options) {
       //   }
       // },
     };
-  }, [tasks, connectionEvents, connectedUsers, ephemeralUserData, userId]);
+  }, [
+    tasks,
+    userId,
+    connectionEvents,
+    connectedUsers,
+    ephemeralUserData,
+    multiplayerStateManager
+  ]);
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);
   const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
   const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
-  const trackEventsCallbackRef = (0, import_react7.useRef)();
-  const trackConnectedUsersCallbackRef = (0, import_react7.useRef)();
-  const trackTasksCallbackRef = (0, import_react7.useRef)();
-  (0, import_react7.useEffect)(() => {
+  const trackEventsCallbackRef = (0, import_react6.useRef)();
+  const trackConnectedUsersCallbackRef = (0, import_react6.useRef)();
+  const trackTasksCallbackRef = (0, import_react6.useRef)();
+  (0, import_react6.useEffect)(() => {
     trackEventsCallbackRef.current = shouldTrackEvents ? (e) => setConnectionEvents((events) => {
       const updated = events ? [...events, e] : [e];
       return updated.length > 50 ? updated.slice(-50) : updated;
     }) : void 0;
   }, [shouldTrackEvents]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     trackConnectedUsersCallbackRef.current = (users, userId2) => {
       setConnectedUsers(users);
       setUserId(userId2);
     };
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
       setTasks((old) => {
         const newIds = new Set(tasks2.map((t) => t.id));
@@ -1311,7 +1293,7 @@ function useMultiplayerState(initialState, options) {
       });
     } : void 0;
   }, [shouldTrackTasks]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (syncRef.current) {
       return syncRef.current({
         ms: multiplayerStateManager,
@@ -1323,7 +1305,7 @@ function useMultiplayerState(initialState, options) {
     }
   }, [ephemeralUserData, multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
-  const forceInit = (0, import_react7.useCallback)(() => {
+  const forceInit = (0, import_react6.useCallback)(() => {
     const state2 = typeof initialState === "function" ? initialState() : initialState;
     const schema = options?.schema;
     multiplayerStateManager.sm.clearHistory();
@@ -1341,13 +1323,104 @@ function useMultiplayerState(initialState, options) {
     disabled: !options?.inspector,
     ...typeof options?.inspector === "object" && options.inspector
   });
-  useBroadcastConnectedUsers(connectedUsers);
-  return [
-    state,
-    multiplayerStateManager.setState,
-    multiplayerStateManager,
-    extras
-  ];
+  return [state, multiplayerStateManager.setState, extras];
+}
+
+// src/noyaApp.ts
+var import_state_manager2 = require("@noya-app/state-manager");
+var import_react7 = require("react");
+function createDefaultAppData(initialState) {
+  return {
+    theme: "light",
+    viewType: "editable",
+    initialState,
+    inspector: false
+  };
+}
+function getAppData(initialState) {
+  try {
+    const urlHash = (window.location.hash || "").replace(/^#/, "");
+    const params = new URLSearchParams(urlHash);
+    const data = params.get("data");
+    if (!data) {
+      return initialState ? createDefaultAppData(initialState) : void 0;
+    }
+    const parsed = JSON.parse(data);
+    if (!parsed.initialState) {
+      parsed.initialState = initialState;
+    }
+    return parsed;
+  } catch (e) {
+    return initialState ? createDefaultAppData(initialState) : void 0;
+  }
+}
+function useAppData(initialState, { schema } = {}) {
+  const appData = (0, import_react7.useMemo)(() => {
+    return getAppData(
+      schema ? (0, import_state_manager2.createValue)(schema, initialState) : initialState
+    );
+  }, [initialState, schema]);
+  return appData;
+}
+function useBroadcastConnectedUsers(connectedUsers) {
+  (0, import_react7.useEffect)(() => {
+    if (!isEmbeddedApp())
+      return;
+    const message = {
+      type: "multiplayer.setUsers",
+      payload: { users: connectedUsers }
+    };
+    parent?.postMessage(message, "*");
+  }, [connectedUsers]);
+}
+function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
+  (0, import_react7.useEffect)(() => {
+    if (!isEmbeddedApp())
+      return;
+    const message = {
+      type: "application.setMenuItems",
+      payload: { menuItems }
+    };
+    parent?.postMessage(message, "*");
+    const listener = (event) => {
+      if (event.data.type === "application.selectMenuItem") {
+        handleSelectMenuItem(event.data.payload.value);
+      }
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }, [handleSelectMenuItem, menuItems]);
+}
+function isEmbeddedApp() {
+  return window.self !== window.top;
+}
+function useNoyaAppState(initialState, options) {
+  const [state] = (0, import_react7.useState)(initialState);
+  const {
+    multiplayerUrl,
+    inspector,
+    initialState: noyaAppInitialState,
+    theme,
+    viewType
+  } = useAppData(state, {
+    schema: options.schema
+  });
+  const sync = (0, import_react7.useMemo)(() => {
+    return multiplayerUrl ? (0, import_state_manager2.webSocketSync)(multiplayerUrl) : (0, import_state_manager2.localStorageSync)({ key: options.localStorageKey || "noya-app" });
+  }, [multiplayerUrl, options.localStorageKey]);
+  const result = useMultiplayerState(noyaAppInitialState, {
+    ...options,
+    inspector: options.inspector ?? inspector,
+    sync
+  });
+  const [, , extras] = result;
+  useBroadcastConnectedUsers(extras.connectedUsers);
+  const mergedExtras = (0, import_react7.useMemo)(() => {
+    return { ...extras, theme, viewType };
+  }, [extras, theme, viewType]);
+  return [result[0], result[1], mergedExtras];
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1362,13 +1435,15 @@ function useMultiplayerState(initialState, options) {
   getAvatarInitials,
   getAvatarStyle,
   isEmbeddedApp,
+  useAppData,
   useBroadcastConnectedUsers,
   useBroadcastMenuItems,
   useEphemeralUserData,
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
-  useNoyaApp,
+  useNoyaAppState,
+  useObservable,
   useSyncMultiplayerStateManager,
   useSyncStateManager,
   ...require("@noya-app/state-manager")