@noya-app/noya-multiplayer-react 0.1.73 → 0.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,7 +11,7 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.58",
+    "@noya-app/state-manager": "0.1.59",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",

package/src/__tests__/noyaApp.test.ts

@@ -1,4 +1,12 @@
 import { expect, it } from "bun:test";
+import {
+  clientId$,
+  clientImage$,
+  clientName$,
+  setClientId,
+  setClientImage,
+  setClientName,
+} from "@noya-app/state-manager";
 import { Type } from "..";
 import { createDefaultAppData, getAppData } from "../noyaApp";
 
@@ -100,6 +108,38 @@ it("preserves userId from data param", () => {
   expect(data.isDemo).toBe(true);
 });
 
+it("applies client identity from data param", () => {
+  setClientId(undefined);
+  setClientName(undefined);
+  setClientImage(undefined);
+
+  const existing = {
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+    clientId: "parent-client-id",
+    clientName: "Parent Name",
+    clientImage: "https://example.com/avatar.svg",
+  };
+
+  getAppData(null as unknown, undefined, {
+    window: {
+      location: {
+        hash: `#data=${encodeURIComponent(JSON.stringify(existing))}`,
+      },
+    },
+  });
+
+  expect(clientId$.get()).toBe("parent-client-id");
+  expect(clientName$.get()).toBe("Parent Name");
+  expect(clientImage$.get()).toBe("https://example.com/avatar.svg");
+
+  setClientId(undefined);
+  setClientName(undefined);
+  setClientImage(undefined);
+});
+
 // it("enforces schema on data param", () => {
 //   const schema = Type.Object({
 //     foo: Type.String({ default: "bar" }),

package/src/inspector/StateInspector.tsx

@@ -109,6 +109,10 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-users",
     true
   );
+  const [showUserDetails, setShowUserDetails] = useLocalStorageState(
+    "noya-multiplayer-react-show-user-details",
+    false
+  );
   const [showData, setShowData] = useLocalStorageState(
     "noya-multiplayer-react-show-data",
     true
@@ -288,21 +292,28 @@ export const StateInspector = memoGeneric(function StateInspector<
         colorScheme={colorScheme}
         style={{
           flex: "0 0 auto",
-          maxHeight: "200px",
+          maxHeight: "50%",
+          overflowY: "auto",
         }}
         right={
-          <StateInspectorToggleButton
-            showInspector={showInspector}
-            setShowInspector={setShowInspector}
-            theme={theme}
-            anchor={anchor}
-          />
+          <span style={{ display: "flex", gap: "10px" }}>
+            <StateInspectorButton
+              theme={theme}
+              onClick={() => setShowUserDetails(!showUserDetails)}
+            >
+              Toggle details
+            </StateInspectorButton>
+            <StateInspectorToggleButton
+              showInspector={showInspector}
+              setShowInspector={setShowInspector}
+              theme={theme}
+              anchor={anchor}
+            />
+          </span>
         }
       >
         <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
           {connectedUsers?.map((user, index, array) => {
-            const identifier = user.userId ?? user.connectionId;
-
             return (
               <StateInspectorRow
                 key={user.connectionId}
@@ -326,7 +337,11 @@ export const StateInspector = memoGeneric(function StateInspector<
                     }}
                   />
                 )}
-                {user.name} ({ellipsis(identifier, 8, "middle")})
+                {showUserDetails ? (
+                  <ObjectInspector data={user} theme={theme} />
+                ) : (
+                  user.name
+                )}
               </StateInspectorRow>
             );
           })}

package/src/noyaApp.ts

@@ -10,6 +10,9 @@ import {
   NoyaManager,
   parentFrameSync,
   PolicyAuthContext,
+  setClientId,
+  setClientImage,
+  setClientName,
   Static,
   stubSync,
   SyncAdapter,
@@ -34,6 +37,9 @@ export type AppData<State> = {
   userId?: string;
   isDemo: boolean;
   access?: AccessType;
+  clientId?: string;
+  clientName?: string;
+  clientImage?: string;
 };
 
 export function createDefaultAppData<State>(
@@ -84,6 +90,24 @@ export function parseAppDataParameter(
   }
 }
 
+function applyClientIdentityFromAppData(appData: {
+  clientId?: string;
+  clientName?: string;
+  clientImage?: string;
+}) {
+  if (appData.clientId !== undefined) {
+    setClientId(appData.clientId);
+  }
+
+  if (appData.clientName !== undefined) {
+    setClientName(appData.clientName);
+  }
+
+  if (appData.clientImage !== undefined) {
+    setClientImage(appData.clientImage);
+  }
+}
+
 export function getAppData<State>(
   initialState: State | (() => State),
   schema?: TSchema,
@@ -106,6 +130,10 @@ export function getAppData<State>(
     appData.viewType === "editable" ? "write" : "read";
   appData.access = appData.access ?? fallbackAccess;
 
+  // If the parent frame provided a client identity (embedded mode), make sure
+  // this frame adopts it so the clientId/name/image observables stay in sync.
+  applyClientIdentityFromAppData(appData);
+
   return appData as AppData<State>;
 }