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

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema, Static } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, AssetManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema, Static } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction } from 'react';
 import { Observable, PathKey, GetWithPath } from '@noya-app/observable';
@@ -51,7 +51,7 @@ type StateInspectorOptions = {
     colorScheme?: "light" | "dark";
     anchor?: StateInspectorAnchor;
 };
-declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, ephemeralUserData, anchor, forceInit, ...props }: {
+declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, assetManager, ephemeralUserData, anchor, forceInit, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
     connectedUsers?: MultiplayerUser[] | undefined;
@@ -59,6 +59,7 @@ declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, conn
     userId?: string | undefined;
     unstyled?: boolean | undefined;
     multiplayerStateManager: MultiplayerStateManager<S, M>;
+    assetManager: AssetManager;
     ephemeralUserData: EphemeralUserData<E>;
     forceInit: () => void;
 } & StateInspectorOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
@@ -76,7 +77,7 @@ declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>
     currentUserId: string | undefined;
 };
 type UseMultiplayerStateOptions<S, M = void, E = void> = MultiplayerStateManagerOptions<S, M> & {
-    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData">) => void;
+    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData" | "assetManager">) => void;
     trackConnectionEvents?: boolean;
     trackTasks?: boolean;
     inspector?: boolean | StateInspectorOptions;
@@ -88,6 +89,9 @@ declare function useMultiplayerState<S, M = void, E = void>(initialState: S | ((
     connectedUsers: MultiplayerUser[];
     ephemeralUserData: EphemeralUserData<E>;
     multiplayerStateManager: MultiplayerStateManager<S, M>;
+    assets: _noya_app_state_manager.Asset[];
+    createAsset: (options: Uint8Array | _noya_app_state_manager.CreateAssetOptions) => Promise<_noya_app_state_manager.Asset>;
+    deleteAsset: (id: string) => Promise<void>;
 }];
 
 type AppViewType = "editable" | "readOnly" | "preview";
@@ -131,10 +135,10 @@ type HostToIframeMessage = {
 declare function useBroadcastConnectedUsers(connectedUsers: MultiplayerUser[]): void;
 declare function useBroadcastMenuItems<T>(menuItems: any[], handleSelectMenuItem: (value: T) => void): void;
 declare function isEmbeddedApp(): boolean;
-type UseNoyaAppStateOptions<S, M = void, E = void> = UseMultiplayerStateOptions<S, M, E> & {
+type UseNoyaStateOptions<S, M = void, E = void> = UseMultiplayerStateOptions<S, M, E> & {
     localStorageKey?: string;
 };
-type UseNoyaAppStateResult<S, M = void, E = void> = [
+type UseNoyaStateResult<S, M = void, E = void> = [
     ReturnType<typeof useMultiplayerState<S, M, E>>[0],
     ReturnType<typeof useMultiplayerState<S, M, E>>[1],
     ReturnType<typeof useMultiplayerState<S, M, E>>[2] & {
@@ -147,18 +151,18 @@ type UseNoyaAppStateResult<S, M = void, E = void> = [
  *
  * There are 3 ways to use this hook:
  *
- * 1. Pass an initial state: `useNoyaAppState(initialState)`
- * 2. Pass an initial state and a schema: `useNoyaAppState(initialState, { schema })`
- * 3. Pass only a schema, and a conforming initial state is created automatically: `useNoyaAppState({ schema })`
+ * 1. Pass an initial state: `useNoyaState(initialState)`
+ * 2. Pass an initial state and a schema: `useNoyaState(initialState, { schema })`
+ * 3. Pass only a schema, and a conforming initial state is created automatically: `useNoyaState({ schema })`
  */
-declare function useNoyaAppState<S, M = void, E = void, O extends UseNoyaAppStateOptions<S, M, E> = UseNoyaAppStateOptions<S, M, E>>(...args: [
+declare function useNoyaState<S, M = void, E = void, O extends UseNoyaStateOptions<S, M, E> = UseNoyaStateOptions<S, M, E>>(...args: [
     initialState: O["schema"] extends TSchema ? Static<O["schema"]> | (() => Static<O["schema"]>) : S | (() => S),
     options?: O
 ] | [options: O & {
     schema: TSchema;
-}]): UseNoyaAppStateResult<O["schema"] extends TSchema ? Static<O["schema"]> : S, M, E>;
+}]): UseNoyaStateResult<O["schema"] extends TSchema ? Static<O["schema"]> : S, M, E>;
 
 declare function useObservable<T>(observable: Observable<T>): T;
 declare function useObservable<T, P extends PathKey[]>(observable: Observable<T>, path: P): GetWithPath<T, P>;
 
-export { type AppData, type AppTheme, type AppViewType, type GetAppDataOptions, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, type UseNoyaAppStateOptions, type UseNoyaAppStateResult, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaAppState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };
+export { type AppData, type AppTheme, type AppViewType, type GetAppDataOptions, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, type UseNoyaStateOptions, type UseNoyaStateResult, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema, Static } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, AssetManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema, Static } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction } from 'react';
 import { Observable, PathKey, GetWithPath } from '@noya-app/observable';
@@ -51,7 +51,7 @@ type StateInspectorOptions = {
     colorScheme?: "light" | "dark";
     anchor?: StateInspectorAnchor;
 };
-declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, ephemeralUserData, anchor, forceInit, ...props }: {
+declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, assetManager, ephemeralUserData, anchor, forceInit, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
     connectedUsers?: MultiplayerUser[] | undefined;
@@ -59,6 +59,7 @@ declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, conn
     userId?: string | undefined;
     unstyled?: boolean | undefined;
     multiplayerStateManager: MultiplayerStateManager<S, M>;
+    assetManager: AssetManager;
     ephemeralUserData: EphemeralUserData<E>;
     forceInit: () => void;
 } & StateInspectorOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
@@ -76,7 +77,7 @@ declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>
     currentUserId: string | undefined;
 };
 type UseMultiplayerStateOptions<S, M = void, E = void> = MultiplayerStateManagerOptions<S, M> & {
-    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData">) => void;
+    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData" | "assetManager">) => void;
     trackConnectionEvents?: boolean;
     trackTasks?: boolean;
     inspector?: boolean | StateInspectorOptions;
@@ -88,6 +89,9 @@ declare function useMultiplayerState<S, M = void, E = void>(initialState: S | ((
     connectedUsers: MultiplayerUser[];
     ephemeralUserData: EphemeralUserData<E>;
     multiplayerStateManager: MultiplayerStateManager<S, M>;
+    assets: _noya_app_state_manager.Asset[];
+    createAsset: (options: Uint8Array | _noya_app_state_manager.CreateAssetOptions) => Promise<_noya_app_state_manager.Asset>;
+    deleteAsset: (id: string) => Promise<void>;
 }];
 
 type AppViewType = "editable" | "readOnly" | "preview";
@@ -131,10 +135,10 @@ type HostToIframeMessage = {
 declare function useBroadcastConnectedUsers(connectedUsers: MultiplayerUser[]): void;
 declare function useBroadcastMenuItems<T>(menuItems: any[], handleSelectMenuItem: (value: T) => void): void;
 declare function isEmbeddedApp(): boolean;
-type UseNoyaAppStateOptions<S, M = void, E = void> = UseMultiplayerStateOptions<S, M, E> & {
+type UseNoyaStateOptions<S, M = void, E = void> = UseMultiplayerStateOptions<S, M, E> & {
     localStorageKey?: string;
 };
-type UseNoyaAppStateResult<S, M = void, E = void> = [
+type UseNoyaStateResult<S, M = void, E = void> = [
     ReturnType<typeof useMultiplayerState<S, M, E>>[0],
     ReturnType<typeof useMultiplayerState<S, M, E>>[1],
     ReturnType<typeof useMultiplayerState<S, M, E>>[2] & {
@@ -147,18 +151,18 @@ type UseNoyaAppStateResult<S, M = void, E = void> = [
  *
  * There are 3 ways to use this hook:
  *
- * 1. Pass an initial state: `useNoyaAppState(initialState)`
- * 2. Pass an initial state and a schema: `useNoyaAppState(initialState, { schema })`
- * 3. Pass only a schema, and a conforming initial state is created automatically: `useNoyaAppState({ schema })`
+ * 1. Pass an initial state: `useNoyaState(initialState)`
+ * 2. Pass an initial state and a schema: `useNoyaState(initialState, { schema })`
+ * 3. Pass only a schema, and a conforming initial state is created automatically: `useNoyaState({ schema })`
  */
-declare function useNoyaAppState<S, M = void, E = void, O extends UseNoyaAppStateOptions<S, M, E> = UseNoyaAppStateOptions<S, M, E>>(...args: [
+declare function useNoyaState<S, M = void, E = void, O extends UseNoyaStateOptions<S, M, E> = UseNoyaStateOptions<S, M, E>>(...args: [
     initialState: O["schema"] extends TSchema ? Static<O["schema"]> | (() => Static<O["schema"]>) : S | (() => S),
     options?: O
 ] | [options: O & {
     schema: TSchema;
-}]): UseNoyaAppStateResult<O["schema"] extends TSchema ? Static<O["schema"]> : S, M, E>;
+}]): UseNoyaStateResult<O["schema"] extends TSchema ? Static<O["schema"]> : S, M, E>;
 
 declare function useObservable<T>(observable: Observable<T>): T;
 declare function useObservable<T, P extends PathKey[]>(observable: Observable<T>, path: P): GetWithPath<T, P>;
 
-export { type AppData, type AppTheme, type AppViewType, type GetAppDataOptions, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, type UseNoyaAppStateOptions, type UseNoyaAppStateResult, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaAppState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };
+export { type AppData, type AppTheme, type AppViewType, type GetAppDataOptions, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, type UseNoyaStateOptions, type UseNoyaStateResult, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.js

@@ -50,7 +50,7 @@ __export(src_exports, {
   useManagedHistory: () => useManagedHistory,
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
-  useNoyaAppState: () => useNoyaAppState,
+  useNoyaState: () => useNoyaState,
   useObservable: () => useObservable,
   useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
   useSyncStateManager: () => useSyncStateManager
@@ -554,6 +554,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
   unstyled,
   colorScheme = "light",
   multiplayerStateManager,
+  assetManager,
   ephemeralUserData,
   anchor = "right",
   forceInit,
@@ -593,6 +594,10 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
+  const [showAssets, setShowAssets] = useLocalStorageState(
+    "noya-multiplayer-react-show-assets",
+    false
+  );
   (0, import_react5.useEffect)(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
@@ -606,6 +611,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
   }, [connectionEvents]);
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
+  const assets = useObservable(assetManager.assets$);
   (0, import_react5.useEffect)(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
@@ -921,6 +927,46 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
         ))
       )))
     ),
+    /* @__PURE__ */ import_react5.default.createElement(
+      DisclosureSection,
+      {
+        open: showAssets,
+        setOpen: setShowAssets,
+        title: "Assets",
+        colorScheme,
+        right: /* @__PURE__ */ import_react5.default.createElement("span", { style: { display: "flex", gap: "4px" } }, /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement("div", { style: styles.sectionInner }, assets.map((asset) => /* @__PURE__ */ import_react5.default.createElement(InspectorRow, { key: asset.id, colorScheme }, /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { name: asset.id, data: asset, theme }), /* @__PURE__ */ import_react5.default.createElement(
+        SmallButton,
+        {
+          theme,
+          onClick: () => assetManager.delete(asset.id)
+        },
+        "Delete"
+      ))))
+    ),
     /* @__PURE__ */ import_react5.default.createElement(
       DisclosureSection,
       {
@@ -1124,7 +1170,7 @@ function SmallButton({
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "2px 0",
+        padding: "0",
         cursor: "pointer",
         ...style
       }
@@ -1134,10 +1180,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,
@@ -1149,6 +1198,7 @@ function useStateInspector({
   colorScheme,
   anchor,
   multiplayerStateManager,
+  assetManager,
   ephemeralUserData,
   forceInit
 }) {
@@ -1156,12 +1206,12 @@ function useStateInspector({
   (0, import_react6.useLayoutEffect)(() => {
     if (disabled)
       return;
-    const portalElement = createPortalElement();
-    const root2 = (0, import_client.createRoot)(portalElement);
-    document.body.appendChild(portalElement);
+    const { host, container } = createShadowRootElement();
+    const root2 = (0, import_client.createRoot)(container);
+    document.body.appendChild(host);
     setRoot(root2);
     return () => {
-      document.body.removeChild(portalElement);
+      document.body.removeChild(host);
     };
   }, [disabled]);
   (0, import_react6.useLayoutEffect)(() => {
@@ -1180,6 +1230,7 @@ function useStateInspector({
           anchor,
           forceInit,
           multiplayerStateManager,
+          assetManager,
           ephemeralUserData
         }
       )
@@ -1195,7 +1246,8 @@ function useStateInspector({
     userId,
     tasks,
     forceInit,
-    ephemeralUserData
+    ephemeralUserData,
+    assetManager
   ]);
 }
 
@@ -1310,6 +1362,7 @@ function useMultiplayerState(initialState, options) {
   const [multiplayerStateManager] = (0, import_react7.useState)(
     () => new import_state_manager.MultiplayerStateManager(initialState, rest)
   );
+  const [assetManager] = (0, import_react7.useState)(() => new import_state_manager.AssetManager());
   const syncRef = (0, import_react7.useRef)(sync);
   const [connectionEvents, setConnectionEvents] = (0, import_react7.useState)();
   const [connectedUsers, setConnectedUsers] = (0, import_react7.useState)([]);
@@ -1318,6 +1371,7 @@ function useMultiplayerState(initialState, options) {
   );
   const [tasks, setTasks] = (0, import_react7.useState)([]);
   const [userId, setUserId] = (0, import_react7.useState)();
+  const assets = useObservable(assetManager.assets$);
   const extras = (0, import_react7.useMemo)(() => {
     return {
       tasks,
@@ -1325,7 +1379,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") {
@@ -1339,7 +1396,9 @@ function useMultiplayerState(initialState, options) {
     connectionEvents,
     connectedUsers,
     ephemeralUserData,
-    multiplayerStateManager
+    multiplayerStateManager,
+    assetManager,
+    assets
   ]);
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);
@@ -1373,13 +1432,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 = (0, import_react7.useCallback)(() => {
     const state2 = initialState instanceof Function ? initialState() : initialState;
@@ -1409,6 +1469,7 @@ function useMultiplayerState(initialState, options) {
   useStateInspector({
     ephemeralUserData,
     multiplayerStateManager,
+    assetManager,
     state,
     connectionEvents,
     connectedUsers,
@@ -1498,7 +1559,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] && import_state_manager2.TypeGuard.IsSchema(args[0].schema) ? [null, args[0]] : [args[0], args[1]];
   const [
     {
@@ -1549,7 +1610,7 @@ function useNoyaAppState(...args) {
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
-  useNoyaAppState,
+  useNoyaState,
   useObservable,
   useSyncMultiplayerStateManager,
   useSyncStateManager,