@noya-app/noya-multiplayer-react 0.1.18 → 0.1.20

package/.turbo/turbo-build.log

@@ -5,14 +5,14 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     30.94 KB
-ESM dist/index.mjs.map 56.01 KB
-ESM ⚡️ Build success in 35ms
-CJS dist/index.js     35.19 KB
-CJS dist/index.js.map 55.79 KB
-CJS ⚡️ Build success in 37ms
+ESM dist/index.mjs     37.54 KB
+ESM dist/index.mjs.map 68.07 KB
+ESM ⚡️ Build success in 21ms
+CJS dist/index.js     42.34 KB
+CJS dist/index.js.map 67.91 KB
+CJS ⚡️ Build success in 22ms
 DTS Build start
-"ComponentPropsWithoutRef" is imported from external module "react" but never used in "src/inspector/StateInspector.tsx" and "src/hooks.ts".
-DTS ⚡️ Build success in 2094ms
-DTS dist/index.d.ts  3.00 KB
-DTS dist/index.d.mts 3.00 KB
+"ComponentPropsWithoutRef" is imported from external module "react" but never used in "src/components/UserPointersOverlay.tsx", "src/inspector/StateInspector.tsx" and "src/hooks.ts".
+DTS ⚡️ Build success in 4487ms
+DTS dist/index.d.ts  4.71 KB
+DTS dist/index.d.mts 4.71 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @noya-app/state-manager
 
+## 0.1.20
+
+### Patch Changes
+
+- 499628d: Improve graphics
+
+## 0.1.19
+
+### Patch Changes
+
+- 35b2424: Add ephemeral data and observable
+- Updated dependencies [35b2424]
+- Updated dependencies [48cd6ba]
+- Updated dependencies [6d2cf3d]
+- Updated dependencies [1b63535]
+  - @noya-app/state-manager@0.1.19
+  - @noya-app/observable@0.1.1
+
 ## 0.1.18
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,8 +1,50 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, MultiplayerUser, Task, MultiplayerStateManager, EphemeralUserData, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
+declare function getAvatarInitials(name: string): string;
+/**
+ * Create a background color and initials from a name
+ *
+ * Adapted from https://mui.com/material-ui/react-avatar/
+ */
+declare function getAvatarStyle(name: string): {
+    color: string;
+    backgroundColor: string;
+};
+
+type Point = {
+    x: number;
+    y: number;
+};
+type UserPointerData = {
+    pointer?: Point;
+};
+type UserPointerProps<E extends UserPointerData> = {
+    user: MultiplayerUser;
+    ephemeralUserData: EphemeralUserData<E>;
+    hideAfter?: number;
+};
+declare const UserPointer: <E extends UserPointerData>({ user, ephemeralUserData, hideAfter, }: UserPointerProps<E>) => React.JSX.Element | null;
+declare const UserPointerContainer: React.NamedExoticComponent<{
+    point: Point;
+    children: React.ReactNode;
+    show?: boolean | undefined;
+}>;
+declare const UserNameTag: React.NamedExoticComponent<{
+    background: string;
+    children: React.ReactNode;
+}>;
+type UserPointersOverlayProps<E extends UserPointerData> = {
+    connectedUsers: MultiplayerUser[];
+    ephemeralUserData: EphemeralUserData<E>;
+};
+declare const UserPointersOverlay: React.MemoExoticComponent<(<E extends UserPointerData>({ connectedUsers, ephemeralUserData }: UserPointersOverlayProps<E>) => React.JSX.Element)>;
+declare const UserPointerIcon: React.NamedExoticComponent<{
+    color?: string | undefined;
+}>;
+
 type Anchor = "left" | "right" | "bottom left" | "bottom right";
 declare const StateInspector: React.MemoExoticComponent<(<S extends object, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, ephemeralUserData, anchor, forceInit, ...props }: {
     state: S;
@@ -23,7 +65,11 @@ declare function useSyncStateManager<S extends object, M, P extends string>(stat
 declare function useManagedState<S extends object, M = void>(createInitialState: () => S, options?: StateManagerOptions<S, M>): readonly [S, (...args: M extends {} ? [metadata: M, action: SetStateAction<S>] : [action: SetStateAction<S>]) => void, StateManager<S, M>];
 declare function useManagedHistory<S extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>): Record<string, E>;
+declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>): {
+    data: Record<string, E | undefined>;
+    metadata: Record<string, _noya_app_state_manager.EphemeralUserMetadata | undefined>;
+    currentUserId: string | undefined;
+};
 declare function useMultiplayerState<S extends object, M = void, E = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: {
         ms: MultiplayerStateManager<S, M>;
@@ -34,9 +80,10 @@ declare function useMultiplayerState<S extends object, M = void, E = void>(initi
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
     tasks: Task[];
+    userId: string | undefined;
     connectionEvents: ConnectionEvent<S>[] | undefined;
     connectedUsers: MultiplayerUser[];
     ephemeralUserData: EphemeralUserData<E>;
 }];
 
-export { StateInspector, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };
+export { StateInspector, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, getAvatarInitials, getAvatarStyle, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.d.ts

@@ -1,8 +1,50 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, MultiplayerUser, Task, MultiplayerStateManager, EphemeralUserData, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
+declare function getAvatarInitials(name: string): string;
+/**
+ * Create a background color and initials from a name
+ *
+ * Adapted from https://mui.com/material-ui/react-avatar/
+ */
+declare function getAvatarStyle(name: string): {
+    color: string;
+    backgroundColor: string;
+};
+
+type Point = {
+    x: number;
+    y: number;
+};
+type UserPointerData = {
+    pointer?: Point;
+};
+type UserPointerProps<E extends UserPointerData> = {
+    user: MultiplayerUser;
+    ephemeralUserData: EphemeralUserData<E>;
+    hideAfter?: number;
+};
+declare const UserPointer: <E extends UserPointerData>({ user, ephemeralUserData, hideAfter, }: UserPointerProps<E>) => React.JSX.Element | null;
+declare const UserPointerContainer: React.NamedExoticComponent<{
+    point: Point;
+    children: React.ReactNode;
+    show?: boolean | undefined;
+}>;
+declare const UserNameTag: React.NamedExoticComponent<{
+    background: string;
+    children: React.ReactNode;
+}>;
+type UserPointersOverlayProps<E extends UserPointerData> = {
+    connectedUsers: MultiplayerUser[];
+    ephemeralUserData: EphemeralUserData<E>;
+};
+declare const UserPointersOverlay: React.MemoExoticComponent<(<E extends UserPointerData>({ connectedUsers, ephemeralUserData }: UserPointersOverlayProps<E>) => React.JSX.Element)>;
+declare const UserPointerIcon: React.NamedExoticComponent<{
+    color?: string | undefined;
+}>;
+
 type Anchor = "left" | "right" | "bottom left" | "bottom right";
 declare const StateInspector: React.MemoExoticComponent<(<S extends object, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, ephemeralUserData, anchor, forceInit, ...props }: {
     state: S;
@@ -23,7 +65,11 @@ declare function useSyncStateManager<S extends object, M, P extends string>(stat
 declare function useManagedState<S extends object, M = void>(createInitialState: () => S, options?: StateManagerOptions<S, M>): readonly [S, (...args: M extends {} ? [metadata: M, action: SetStateAction<S>] : [action: SetStateAction<S>]) => void, StateManager<S, M>];
 declare function useManagedHistory<S extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>): Record<string, E>;
+declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>): {
+    data: Record<string, E | undefined>;
+    metadata: Record<string, _noya_app_state_manager.EphemeralUserMetadata | undefined>;
+    currentUserId: string | undefined;
+};
 declare function useMultiplayerState<S extends object, M = void, E = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: {
         ms: MultiplayerStateManager<S, M>;
@@ -34,9 +80,10 @@ declare function useMultiplayerState<S extends object, M = void, E = void>(initi
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
     tasks: Task[];
+    userId: string | undefined;
     connectionEvents: ConnectionEvent<S>[] | undefined;
     connectedUsers: MultiplayerUser[];
     ephemeralUserData: EphemeralUserData<E>;
 }];
 
-export { StateInspector, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };
+export { StateInspector, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, getAvatarInitials, getAvatarStyle, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };