@noya-app/noya-multiplayer-react 0.1.36 → 0.1.38

package/dist/index.mjs

@@ -195,6 +195,7 @@ var UserPointerIcon = memo(function CursorIcon({
 
 // src/hooks.ts
 import {
+  AssetManager,
   EphemeralUserData,
   MultiplayerStateManager,
   StateManager,
@@ -521,6 +522,7 @@ var StateInspector = memo2(function StateInspector2({
   unstyled,
   colorScheme = "light",
   multiplayerStateManager,
+  assetManager,
   ephemeralUserData,
   anchor = "right",
   forceInit,
@@ -560,6 +562,10 @@ var StateInspector = memo2(function StateInspector2({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
+  const [showAssets, setShowAssets] = useLocalStorageState(
+    "noya-multiplayer-react-show-assets",
+    false
+  );
   useEffect2(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
@@ -573,6 +579,7 @@ var StateInspector = memo2(function StateInspector2({
   }, [connectionEvents]);
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
+  const assets = useObservable(assetManager.assets$);
   useEffect2(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
@@ -888,6 +895,46 @@ var StateInspector = memo2(function StateInspector2({
         ))
       )))
     ),
+    /* @__PURE__ */ React4.createElement(
+      DisclosureSection,
+      {
+        open: showAssets,
+        setOpen: setShowAssets,
+        title: "Assets",
+        colorScheme,
+        right: /* @__PURE__ */ React4.createElement("span", { style: { display: "flex", gap: "4px" } }, /* @__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,
       {
@@ -1091,7 +1138,7 @@ function SmallButton({
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "2px 0",
+        padding: "0",
         cursor: "pointer",
         ...style
       }
@@ -1101,10 +1148,13 @@ function SmallButton({
 }
 
 // src/inspector/useStateInspector.tsx
-function createPortalElement() {
-  const el = document.createElement("div");
-  el.id = "noya-multiplayer-react-inspector-portal";
-  return el;
+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({
   state,
@@ -1116,6 +1166,7 @@ function useStateInspector({
   colorScheme,
   anchor,
   multiplayerStateManager,
+  assetManager,
   ephemeralUserData,
   forceInit
 }) {
@@ -1123,12 +1174,12 @@ function useStateInspector({
   useLayoutEffect2(() => {
     if (disabled)
       return;
-    const portalElement = createPortalElement();
-    const root2 = createRoot(portalElement);
-    document.body.appendChild(portalElement);
+    const { host, container } = createShadowRootElement();
+    const root2 = createRoot(container);
+    document.body.appendChild(host);
     setRoot(root2);
     return () => {
-      document.body.removeChild(portalElement);
+      document.body.removeChild(host);
     };
   }, [disabled]);
   useLayoutEffect2(() => {
@@ -1147,6 +1198,7 @@ function useStateInspector({
           anchor,
           forceInit,
           multiplayerStateManager,
+          assetManager,
           ephemeralUserData
         }
       )
@@ -1162,7 +1214,8 @@ function useStateInspector({
     userId,
     tasks,
     forceInit,
-    ephemeralUserData
+    ephemeralUserData,
+    assetManager
   ]);
 }
 
@@ -1277,6 +1330,7 @@ function useMultiplayerState(initialState, options) {
   const [multiplayerStateManager] = useState2(
     () => new MultiplayerStateManager(initialState, rest)
   );
+  const [assetManager] = useState2(() => new AssetManager());
   const syncRef = useRef(sync);
   const [connectionEvents, setConnectionEvents] = useState2();
   const [connectedUsers, setConnectedUsers] = useState2([]);
@@ -1285,6 +1339,7 @@ function useMultiplayerState(initialState, options) {
   );
   const [tasks, setTasks] = useState2([]);
   const [userId, setUserId] = useState2();
+  const assets = useObservable(assetManager.assets$);
   const extras = useMemo3(() => {
     return {
       tasks,
@@ -1292,7 +1347,10 @@ function useMultiplayerState(initialState, options) {
       connectionEvents,
       connectedUsers,
       ephemeralUserData,
-      multiplayerStateManager
+      multiplayerStateManager,
+      assets,
+      createAsset: assetManager.create,
+      deleteAsset: assetManager.delete
       // evaluate: async (code: string) => {
       //   const payload = await rpcManager.request({ type: "eval", code });
       //   if (payload.type !== "eval") {
@@ -1306,7 +1364,9 @@ function useMultiplayerState(initialState, options) {
     connectionEvents,
     connectedUsers,
     ephemeralUserData,
-    multiplayerStateManager
+    multiplayerStateManager,
+    assetManager,
+    assets
   ]);
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);
@@ -1340,13 +1400,14 @@ function useMultiplayerState(initialState, options) {
     if (syncRef.current) {
       return syncRef.current({
         ms: multiplayerStateManager,
+        assetManager,
         ephemeralUserData,
         onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
         onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2),
         onChangeTasks: (tasks2) => trackTasksCallbackRef.current?.(tasks2)
       });
     }
-  }, [ephemeralUserData, multiplayerStateManager]);
+  }, [assetManager, ephemeralUserData, multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
   const forceInit = useCallback(() => {
     const state2 = initialState instanceof Function ? initialState() : initialState;
@@ -1376,6 +1437,7 @@ function useMultiplayerState(initialState, options) {
   useStateInspector({
     ephemeralUserData,
     multiplayerStateManager,
+    assetManager,
     state,
     connectionEvents,
     connectedUsers,
@@ -1472,7 +1534,7 @@ function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
 function isEmbeddedApp() {
   return window.self !== window.top;
 }
-function useNoyaAppState(...args) {
+function useNoyaState(...args) {
   const [initialState, options] = typeof args[0] === "object" && args[0] !== null && "schema" in args[0] && TypeGuard.IsSchema(args[0].schema) ? [null, args[0]] : [args[0], args[1]];
   const [
     {
@@ -1488,8 +1550,8 @@ function useNoyaAppState(...args) {
     });
   });
   const sync = useMemo4(() => {
-    return multiplayerUrl ? webSocketSync(multiplayerUrl) : options?.localStorageKey ? localStorageSync({ key: options.localStorageKey }) : stubSync2();
-  }, [multiplayerUrl, options?.localStorageKey]);
+    return multiplayerUrl ? webSocketSync(multiplayerUrl) : options?.offlineStorageKey ? localStorageSync({ key: options.offlineStorageKey }) : stubSync2();
+  }, [multiplayerUrl, options?.offlineStorageKey]);
   const result = useMultiplayerState(noyaAppInitialState, {
     ...options,
     inspector: options?.inspector ?? inspector,
@@ -1522,7 +1584,7 @@ export {
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
-  useNoyaAppState,
+  useNoyaState,
   useObservable,
   useSyncMultiplayerStateManager,
   useSyncStateManager