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

package/dist/index.js

@@ -37,12 +37,18 @@ __export(src_exports, {
   UserPointerContainer: () => UserPointerContainer,
   UserPointerIcon: () => UserPointerIcon,
   UserPointersOverlay: () => UserPointersOverlay,
+  createDefaultAppData: () => createDefaultAppData,
+  getAppData: () => getAppData,
   getAvatarInitials: () => getAvatarInitials,
   getAvatarStyle: () => getAvatarStyle,
+  isEmbeddedApp: () => isEmbeddedApp,
+  useBroadcastConnectedUsers: () => useBroadcastConnectedUsers,
+  useBroadcastMenuItems: () => useBroadcastMenuItems,
   useEphemeralUserData: () => useEphemeralUserData,
   useManagedHistory: () => useManagedHistory,
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
+  useNoyaApp: () => useNoyaApp,
   useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
   useSyncStateManager: () => useSyncStateManager
 });
@@ -241,9 +247,80 @@ var UserPointerIcon = (0, import_react2.memo)(function CursorIcon({
   );
 });
 
-// src/hooks.ts
+// src/embedded.ts
 var import_state_manager = require("@noya-app/state-manager");
-var import_react6 = require("react");
+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");
 
 // src/globals.ts
 var import_observable = require("@noya-app/observable");
@@ -251,18 +328,18 @@ var shouldTrackEvents$ = new import_observable.Observable(false);
 var shouldTrackTasks$ = new import_observable.Observable(false);
 
 // src/inspector/useStateInspector.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 
 // src/inspector/StateInspector.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_react_inspector = require("react-inspector");
 
 // src/inspector/useLocalStorageState.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var localStorage = typeof window !== "undefined" ? window.localStorage : null;
 function useLocalStorageState(key, defaultValue) {
-  const [state, setState] = import_react3.default.useState(() => {
+  const [state, setState] = import_react4.default.useState(() => {
     const value = localStorage?.getItem(key);
     let result = defaultValue;
     if (value) {
@@ -307,7 +384,7 @@ function ToggleButton({
   theme,
   anchor
 }) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "span",
     {
       role: "button",
@@ -328,7 +405,7 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ import_react5.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -338,7 +415,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -346,7 +423,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_react4.default.createElement(
+    ) : /* @__PURE__ */ import_react5.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -356,7 +433,7 @@ function ToggleButton({
         stroke: "currentColor",
         className: "size-6"
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -379,7 +456,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_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -389,7 +466,7 @@ function DisclosureSection({
         ...style
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         onClick: () => setOpen?.(!open),
@@ -403,7 +480,7 @@ function DisclosureSection({
           ...open && { borderBottom: `1px solid ${borderColor}` }
         }
       },
-      setOpen && /* @__PURE__ */ import_react4.default.createElement(
+      setOpen && /* @__PURE__ */ import_react5.default.createElement(
         Arrow,
         {
           expanded: open,
@@ -414,7 +491,7 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ import_react4.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
+      /* @__PURE__ */ import_react5.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
@@ -428,7 +505,7 @@ function InspectorRow({
   variant
 }) {
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -446,7 +523,7 @@ function InspectorRow({
         ...style
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -461,7 +538,7 @@ function InspectorRow({
   );
 }
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
-var StateInspector = (0, import_react4.memo)(function StateInspector2({
+var StateInspector = (0, import_react5.memo)(function StateInspector2({
   state,
   connectionEvents,
   connectedUsers,
@@ -475,12 +552,12 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
   forceInit,
   ...props
 }) {
-  const [didMount, setDidMount] = import_react4.default.useState(false);
-  (0, import_react4.useLayoutEffect)(() => {
+  const [didMount, setDidMount] = import_react5.default.useState(false);
+  (0, import_react5.useLayoutEffect)(() => {
     setDidMount(true);
   }, []);
-  const eventsContainerRef = import_react4.default.useRef(null);
-  const historyContainerRef = import_react4.default.useRef(null);
+  const eventsContainerRef = import_react5.default.useRef(null);
+  const historyContainerRef = import_react5.default.useRef(null);
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
     true
@@ -509,25 +586,25 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     shouldTrackTasks$.set(showTasks);
   }, [showTasks]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
     }
   }, [historySnapshot]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!historyContainerRef.current)
       return;
     const historyEntry = historyContainerRef.current.querySelector(
@@ -564,7 +641,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
   if (!didMount)
     return null;
   if (!showInspector) {
-    return /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         ...props,
@@ -576,7 +653,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         },
         onClick: () => setShowInspector(true)
       },
-      /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(
         ToggleButton,
         {
           showInspector,
@@ -587,7 +664,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
       )
     );
   }
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       ...props,
@@ -596,7 +673,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         ...props.style
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         isFirst: true,
@@ -608,7 +685,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           flex: "0 0 auto",
           maxHeight: "200px"
         },
-        right: /* @__PURE__ */ import_react4.default.createElement(
+        right: /* @__PURE__ */ import_react5.default.createElement(
           ToggleButton,
           {
             showInspector,
@@ -618,14 +695,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ import_react5.default.createElement(
         InspectorRow,
         {
           key: user.id,
           colorScheme,
           variant: user.id === userId ? "up" : void 0
         },
-        user.image && /* @__PURE__ */ import_react4.default.createElement(
+        user.image && /* @__PURE__ */ import_react5.default.createElement(
           "img",
           {
             src: user.image,
@@ -646,7 +723,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         " (",
         ellipsis(user.id.toString(), 8, "middle"),
         ")"
-      )), !connectedUsers && /* @__PURE__ */ import_react4.default.createElement(
+      )), !connectedUsers && /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           style: {
@@ -657,17 +734,17 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement("span", null, "No connected users")
+        /* @__PURE__ */ import_react5.default.createElement("span", null, "No connected users")
       ))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         title: "Data",
         colorScheme,
         setOpen: setShowData,
         open: showData,
-        right: /* @__PURE__ */ import_react4.default.createElement(
+        right: /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
             style: {
@@ -675,7 +752,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             SmallButton,
             {
               theme,
@@ -687,14 +764,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: multiplayerStateManager.schema ? "state" : void 0,
           data: state,
           theme
         }
-      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react4.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react4.default.createElement(
+      )), multiplayerStateManager.schema && /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react5.default.createElement(
         import_react_inspector.ObjectInspector,
         {
           name: "schema",
@@ -703,14 +780,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         }
       )))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
         colorScheme,
-        right: /* @__PURE__ */ import_react4.default.createElement(
+        right: /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
             style: {
@@ -718,7 +795,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               gap: "4px"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canUndo,
@@ -727,7 +804,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 multiplayerStateManager.undo();
               }
             },
-            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
+            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -735,7 +812,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react4.default.createElement(
+              /* @__PURE__ */ import_react5.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -744,7 +821,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               )
             ))
           ),
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             SmallButton,
             {
               disabled: !historySnapshot.canRedo,
@@ -753,7 +830,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 multiplayerStateManager.redo();
               }
             },
-            /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react4.default.createElement(
+            /* @__PURE__ */ import_react5.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react5.default.createElement(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -761,7 +838,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 height: "1em",
                 viewBox: "0 0 20 20"
               },
-              /* @__PURE__ */ import_react4.default.createElement(
+              /* @__PURE__ */ import_react5.default.createElement(
                 "path",
                 {
                   fill: "currentColor",
@@ -772,7 +849,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           )
         )
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}0`,
@@ -786,7 +863,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement(
+        /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
             style: {
@@ -798,7 +875,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
           },
           "Initial state"
         )
-      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
@@ -809,7 +886,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
-        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react4.default.createElement(
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react5.default.createElement(
           "pre",
           {
             key: j,
@@ -819,14 +896,14 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               flexWrap: "wrap"
             }
           },
-          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)))
+          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)))
         ))
       )))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         title: "Tasks",
@@ -834,7 +911,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         open: showTasks,
         setOpen: setShowTasks
       },
-      /* @__PURE__ */ import_react4.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react4.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react5.default.createElement(
         InspectorRow,
         {
           key: task.id,
@@ -843,7 +920,7 @@ var StateInspector = (0, import_react4.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_react4.default.createElement(
+        /* @__PURE__ */ import_react5.default.createElement(
           import_react_inspector.ObjectInspector,
           {
             name: task.name,
@@ -853,7 +930,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         )
       )))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         open: showEphemeral,
@@ -861,7 +938,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         title: "Ephemeral User Data",
         colorScheme
       },
-      /* @__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(
+      /* @__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(
         import_react_inspector.ObjectInspector,
         {
           name: key,
@@ -871,7 +948,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         }
       ))))
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
         open: showEvents,
@@ -879,8 +956,8 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
         title: "Events",
         colorScheme
       },
-      /* @__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(
+      /* @__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(
           InspectorRow,
           {
             key: index,
@@ -890,7 +967,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
               padding: "0px 12px 1px"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
+          /* @__PURE__ */ import_react5.default.createElement(
             import_react_inspector.ObjectInspector,
             {
               data: event.message,
@@ -903,7 +980,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
                 expanded
               }) => {
                 const direction = event.type === "send" ? "up" : "down";
-                return depth === 0 ? /* @__PURE__ */ import_react4.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react4.default.createElement(
+                return depth === 0 ? /* @__PURE__ */ import_react5.default.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ import_react5.default.createElement(
                   import_react_inspector.ObjectLabel,
                   {
                     direction,
@@ -916,7 +993,7 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             }
           )
         )
-      ), !connectionEvents && /* @__PURE__ */ import_react4.default.createElement(
+      ), !connectionEvents && /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           style: {
@@ -927,18 +1004,18 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             gap: "4px"
           }
         },
-        /* @__PURE__ */ import_react4.default.createElement("span", null, "No recorded events")
+        /* @__PURE__ */ import_react5.default.createElement("span", null, "No recorded events")
       ))
     )
   );
 });
 var ObjectRootLabel = ({ name, data, direction }) => {
   if (typeof name === "string") {
-    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 }));
+    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 }));
   }
   if (direction === "up" || direction === "down") {
     const arrow = direction === "up" ? "\u2191" : "\u2193";
-    return /* @__PURE__ */ import_react4.default.createElement("span", null, /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement("span", null, /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -955,9 +1032,9 @@ var ObjectRootLabel = ({ name, data, direction }) => {
         }
       },
       arrow
-    ), /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data }));
+    ), /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data }));
   } else {
-    return /* @__PURE__ */ import_react4.default.createElement(import_react_inspector.ObjectPreview, { data });
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectPreview, { data });
   }
 };
 function Arrow({
@@ -965,7 +1042,7 @@ function Arrow({
   onClick,
   style
 }) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "span",
     {
       role: "button",
@@ -1008,7 +1085,7 @@ function SmallButton({
   theme,
   disabled
 }) {
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -1057,8 +1134,8 @@ function useStateInspector({
   ephemeralUserData,
   forceInit
 }) {
-  const [root, setRoot] = import_react5.default.useState(null);
-  (0, import_react5.useLayoutEffect)(() => {
+  const [root, setRoot] = import_react6.default.useState(null);
+  (0, import_react6.useLayoutEffect)(() => {
     if (disabled)
       return;
     const portalElement = createPortalElement();
@@ -1069,11 +1146,11 @@ function useStateInspector({
       document.body.removeChild(portalElement);
     };
   }, [disabled]);
-  (0, import_react5.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     if (!root)
       return;
     root.render(
-      /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react6.default.createElement(
         StateInspector,
         {
           state,
@@ -1106,22 +1183,22 @@ function useStateInspector({
 
 // src/hooks.ts
 function useSyncStateManager(stateManager, path) {
-  const getSnapshot = (0, import_react6.useCallback)(
+  const getSnapshot = (0, import_react7.useCallback)(
     () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
     [stateManager, path]
   );
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     stateManager.addListener,
     getSnapshot,
     getSnapshot
   );
 }
 function useManagedState(createInitialState, options) {
-  const [stateManager] = (0, import_react6.useState)(
-    () => new import_state_manager.StateManager(createInitialState(), options)
+  const [stateManager] = (0, import_react7.useState)(
+    () => new import_state_manager2.StateManager(createInitialState(), options)
   );
   const state = useSyncStateManager(stateManager);
-  const setState = (0, import_react6.useCallback)(
+  const setState = (0, import_react7.useCallback)(
     (...args) => {
       const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
       if (metadata === void 0) {
@@ -1157,41 +1234,41 @@ function useManagedState(createInitialState, options) {
   return [state, setState, stateManager];
 }
 function useManagedHistory(stateManager) {
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     stateManager.historyEmittor.addListener,
     stateManager.getHistorySnapshot,
     stateManager.getHistorySnapshot
   );
 }
 function useSyncMultiplayerStateManager(multiplayerStateManager) {
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     multiplayerStateManager.addListener,
     multiplayerStateManager.getOptimisticState,
     multiplayerStateManager.getOptimisticState
   );
 }
 function useEphemeralUserData(ephemeralUserData) {
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     ephemeralUserData.addListener,
     ephemeralUserData.getSnapshot,
     ephemeralUserData.getSnapshot
   );
 }
-var defaultStubSync = (0, import_state_manager.stubSync)();
+var defaultStubSync = (0, import_state_manager2.stubSync)();
 function useMultiplayerState(initialState, options) {
   const { sync = defaultStubSync, ...rest } = options ?? {};
-  const [multiplayerStateManager] = (0, import_react6.useState)(
-    () => new import_state_manager.MultiplayerStateManager(initialState, rest)
+  const [multiplayerStateManager] = (0, import_react7.useState)(
+    () => new import_state_manager2.MultiplayerStateManager(initialState, rest)
   );
-  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 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 [tasks, setTasks] = (0, import_react6.useState)([]);
-  const [userId, setUserId] = (0, import_react6.useState)();
-  const extras = (0, import_react6.useMemo)(() => {
+  const [tasks, setTasks] = (0, import_react7.useState)([]);
+  const [userId, setUserId] = (0, import_react7.useState)();
+  const extras = (0, import_react7.useMemo)(() => {
     return {
       tasks,
       userId,
@@ -1210,22 +1287,22 @@ function useMultiplayerState(initialState, options) {
   const globalTrackTasks = useObservable(shouldTrackTasks$);
   const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
   const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
-  const trackEventsCallbackRef = (0, import_react6.useRef)();
-  const trackConnectedUsersCallbackRef = (0, import_react6.useRef)();
-  const trackTasksCallbackRef = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
+  const trackEventsCallbackRef = (0, import_react7.useRef)();
+  const trackConnectedUsersCallbackRef = (0, import_react7.useRef)();
+  const trackTasksCallbackRef = (0, import_react7.useRef)();
+  (0, import_react7.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_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     trackConnectedUsersCallbackRef.current = (users, userId2) => {
       setConnectedUsers(users);
       setUserId(userId2);
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
       setTasks((old) => {
         const newIds = new Set(tasks2.map((t) => t.id));
@@ -1234,7 +1311,7 @@ function useMultiplayerState(initialState, options) {
       });
     } : void 0;
   }, [shouldTrackTasks]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (syncRef.current) {
       return syncRef.current({
         ms: multiplayerStateManager,
@@ -1246,7 +1323,7 @@ function useMultiplayerState(initialState, options) {
     }
   }, [ephemeralUserData, multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
-  const forceInit = (0, import_react6.useCallback)(() => {
+  const forceInit = (0, import_react7.useCallback)(() => {
     const state2 = typeof initialState === "function" ? initialState() : initialState;
     const schema = options?.schema;
     multiplayerStateManager.sm.clearHistory();
@@ -1264,6 +1341,7 @@ function useMultiplayerState(initialState, options) {
     disabled: !options?.inspector,
     ...typeof options?.inspector === "object" && options.inspector
   });
+  useBroadcastConnectedUsers(connectedUsers);
   return [
     state,
     multiplayerStateManager.setState,
@@ -1279,12 +1357,18 @@ function useMultiplayerState(initialState, options) {
   UserPointerContainer,
   UserPointerIcon,
   UserPointersOverlay,
+  createDefaultAppData,
+  getAppData,
   getAvatarInitials,
   getAvatarStyle,
+  isEmbeddedApp,
+  useBroadcastConnectedUsers,
+  useBroadcastMenuItems,
   useEphemeralUserData,
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
+  useNoyaApp,
   useSyncMultiplayerStateManager,
   useSyncStateManager,
   ...require("@noya-app/state-manager")