@noya-app/noya-multiplayer-react 0.1.69 → 0.1.71

package/src/inspector/StateInspector.tsx

@@ -44,6 +44,7 @@ export type StateInspectorAnchor =
 export type StateInspectorOptions = {
   colorScheme?: "light" | "dark";
   anchor?: StateInspectorAnchor;
+  advanced?: boolean;
 };
 
 export const StateInspector = memoGeneric(function StateInspector<
@@ -56,6 +57,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   colorScheme = "light",
   anchor = "right",
   unstyled = false,
+  advanced = false,
   ...props
 }: {
   noyaManager: NoyaManager<S, M, E, MenuT>;
@@ -65,7 +67,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   const {
     multiplayerStateManager,
     assetManager,
-    connectedUsersManager,
+    userManager,
     secretManager,
     ephemeralUserDataManager,
     connectionEventManager,
@@ -159,8 +161,8 @@ export const StateInspector = memoGeneric(function StateInspector<
   const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
   const secretsInitialized = useObservable(secretManager.isInitialized$);
-  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
-  const userId = useObservable(connectedUsersManager.currentUserId$);
+  const connectedUsers = useObservable(userManager.connectedUsers$);
+  const userId = useObservable(userManager.currentUserId$);
   const state = useObservable(multiplayerStateManager.optimisticState$);
   const inputsInitialized = useObservable(ioManager.inputsInitialized$);
   const outputTransformsInitialized = useObservable(
@@ -263,11 +265,12 @@ export const StateInspector = memoGeneric(function StateInspector<
         }
       >
         <StateInspectorDisclosureRowInner style={{ flex: "0 0 auto" }}>
-          {connectedUsers?.map((user) => (
+          {connectedUsers?.map((user, index, array) => (
             <StateInspectorRow
               key={user.id}
               colorScheme={colorScheme}
               variant={user.id === userId ? "up" : undefined}
+              bordered={index !== array.length - 1}
             >
               {user.image && (
                 <img
@@ -447,231 +450,241 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </StateInspectorDisclosureRowInner>
       </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        title={
-          <StateInspectorTitleLabel>
-            Resources ({resources.length})
-            <ColoredDot type={resourcesInitialized ? "success" : "error"} />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-        open={showResources}
-        setOpen={setShowResources}
-        right={
-          <span style={{ display: "flex", gap: "10px" }}>
-            <StateInspectorButton
-              theme={theme}
-              onClick={async () => {
-                const ok = confirm(
-                  "Are you sure you want to delete all resources?"
-                );
-                if (!ok) return;
-                await resourceManager.deleteResource(
-                  resources.map((resource) => ({ id: resource.id }))
-                );
-              }}
-            >
-              Delete all
-            </StateInspectorButton>
-            <StateInspectorButton
-              theme={theme}
-              onClick={async () => {
-                const path = prompt("Enter directory path") || uuid();
-                await resourceManager.createResource({
-                  type: "directory",
-                  path,
-                });
-              }}
-            >
-              Create Directory
-            </StateInspectorButton>
+      {advanced && (
+        <StateInspectorDisclosureSection
+          title={
+            <StateInspectorTitleLabel>
+              Resources ({resources.length})
+              <ColoredDot type={resourcesInitialized ? "success" : "error"} />
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+          open={showResources}
+          setOpen={setShowResources}
+          right={
+            <span style={{ display: "flex", gap: "10px" }}>
+              <StateInspectorButton
+                theme={theme}
+                onClick={async () => {
+                  const ok = confirm(
+                    "Are you sure you want to delete all resources?"
+                  );
+                  if (!ok) return;
+                  await resourceManager.deleteResource(
+                    resources.map((resource) => ({ id: resource.id }))
+                  );
+                }}
+              >
+                Delete all
+              </StateInspectorButton>
+              <StateInspectorButton
+                theme={theme}
+                onClick={async () => {
+                  const path = prompt("Enter directory path") || uuid();
+                  await resourceManager.createResource({
+                    type: "directory",
+                    path,
+                  });
+                }}
+              >
+                Create Directory
+              </StateInspectorButton>
+              <StateInspectorButton
+                theme={theme}
+                onClick={async () => {
+                  const file = await uploadFile();
+
+                  resourceManager.createResource({
+                    type: "asset",
+                    path: file.name || uuid(),
+                    asset: {
+                      content: Base64.encode(await file.arrayBuffer()),
+                      contentType: file.type,
+                      encoding: "base64",
+                    },
+                  });
+                }}
+              >
+                Create Asset
+              </StateInspectorButton>
+            </span>
+          }
+        >
+          <StateInspectorDisclosureRowInner>
+            {resources?.map((resource) => (
+              <StateInspectorRow key={resource.id} colorScheme={colorScheme}>
+                <ObjectInspector
+                  name={resource.path}
+                  data={resource}
+                  theme={theme}
+                />
+                <div style={{ display: "flex", gap: "4px" }}>
+                  <StateInspectorButton
+                    theme={theme}
+                    onClick={() =>
+                      resourceManager.deleteResource({ id: resource.id })
+                    }
+                  >
+                    Delete
+                  </StateInspectorButton>
+                  <StateInspectorButton
+                    theme={theme}
+                    onClick={() => {
+                      const path = prompt("Enter new path", resource.path);
+                      if (!path) return;
+                      resourceManager.updateResource({ id: resource.id, path });
+                    }}
+                  >
+                    Rename
+                  </StateInspectorButton>
+                </div>
+              </StateInspectorRow>
+            ))}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          title={
+            <StateInspectorTitleLabel>
+              Secrets
+              <ColoredDot type={secretsInitialized ? "success" : "error"} />
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+          open={showSecrets}
+          setOpen={setShowSecrets}
+          right={
             <StateInspectorButton
               theme={theme}
-              onClick={async () => {
-                const file = await uploadFile();
-
-                resourceManager.createResource({
-                  type: "asset",
-                  path: file.name || uuid(),
-                  asset: {
-                    content: Base64.encode(await file.arrayBuffer()),
-                    contentType: file.type,
-                    encoding: "base64",
-                  },
-                });
+              onClick={() => {
+                const name = prompt("Enter secret name");
+                if (!name) return;
+                const value = prompt("Enter secret value");
+                if (!value) return;
+                secretManager.createSecret(null, name, value);
               }}
             >
-              Create Asset
+              Create
             </StateInspectorButton>
-          </span>
-        }
-      >
-        <StateInspectorDisclosureRowInner>
-          {resources?.map((resource) => (
-            <StateInspectorRow key={resource.id} colorScheme={colorScheme}>
-              <ObjectInspector
-                name={resource.path}
-                data={resource}
-                theme={theme}
-              />
-              <div style={{ display: "flex", gap: "4px" }}>
+          }
+        >
+          <StateInspectorDisclosureRowInner>
+            {secrets.map((secret) => (
+              <StateInspectorRow key={secret.id} colorScheme={colorScheme}>
+                <ObjectInspector data={secret} theme={theme} />
                 <StateInspectorButton
                   theme={theme}
-                  onClick={() =>
-                    resourceManager.deleteResource({ id: resource.id })
-                  }
+                  onClick={() => secretManager.deleteSecret(secret.id)}
                 >
                   Delete
                 </StateInspectorButton>
-                <StateInspectorButton
-                  theme={theme}
-                  onClick={() => {
-                    const path = prompt("Enter new path", resource.path);
-                    if (!path) return;
-                    resourceManager.updateResource({ id: resource.id, path });
-                  }}
-                >
-                  Rename
-                </StateInspectorButton>
-              </div>
-            </StateInspectorRow>
-          ))}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        title={
-          <StateInspectorTitleLabel>
-            Secrets
-            <ColoredDot type={secretsInitialized ? "success" : "error"} />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-        open={showSecrets}
-        setOpen={setShowSecrets}
-        right={
-          <StateInspectorButton
-            theme={theme}
-            onClick={() => {
-              const name = prompt("Enter secret name");
-              if (!name) return;
-              const value = prompt("Enter secret value");
-              if (!value) return;
-              secretManager.createSecret(null, name, value);
-            }}
-          >
-            Create
-          </StateInspectorButton>
-        }
-      >
-        <StateInspectorDisclosureRowInner>
-          {secrets.map((secret) => (
-            <StateInspectorRow key={secret.id} colorScheme={colorScheme}>
-              <ObjectInspector data={secret} theme={theme} />
-              <StateInspectorButton
-                theme={theme}
-                onClick={() => secretManager.deleteSecret(secret.id)}
+              </StateInspectorRow>
+            ))}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          open={showInputs}
+          setOpen={setShowInputs}
+          title={
+            <StateInspectorTitleLabel>
+              Inputs
+              <ColoredDot type={inputsInitialized ? "success" : "error"} />
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+        >
+          <StateInspectorDisclosureRowInner>
+            {inputs?.map((input: Input) => (
+              <StateInspectorRow key={input.id} colorScheme={colorScheme}>
+                <ObjectInspector data={input} theme={theme} />
+              </StateInspectorRow>
+            ))}
+            {!inputs?.length && (
+              <div
+                style={{
+                  padding: "12px",
+                  fontSize: "12px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "4px",
+                }}
               >
-                Delete
-              </StateInspectorButton>
-            </StateInspectorRow>
-          ))}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>{" "}
-      <StateInspectorDisclosureSection
-        open={showInputs}
-        setOpen={setShowInputs}
-        title={
-          <StateInspectorTitleLabel>
-            Inputs
-            <ColoredDot type={inputsInitialized ? "success" : "error"} />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-      >
-        <StateInspectorDisclosureRowInner>
-          {inputs?.map((input: Input) => (
-            <StateInspectorRow key={input.id} colorScheme={colorScheme}>
-              <ObjectInspector data={input} theme={theme} />
-            </StateInspectorRow>
-          ))}
-          {!inputs?.length && (
-            <div
-              style={{
-                padding: "12px",
-                fontSize: "12px",
-                display: "flex",
-                flexDirection: "column",
-                gap: "4px",
-              }}
-            >
-              <span>No inputs</span>
-            </div>
-          )}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        open={showOutputTransforms}
-        setOpen={setShowOutputTransforms}
-        title={
-          <StateInspectorTitleLabel>
-            Output Transforms
-            <ColoredDot
-              type={outputTransformsInitialized ? "success" : "error"}
-            />
-          </StateInspectorTitleLabel>
-        }
-        colorScheme={colorScheme}
-      >
-        <StateInspectorDisclosureRowInner>
-          {outputTransforms?.map((transform: OutputTransform) => (
-            <StateInspectorRow key={transform.id} colorScheme={colorScheme}>
-              <ObjectInspector data={transform} theme={theme} />
-            </StateInspectorRow>
-          ))}
-          {!outputTransforms?.length && (
-            <div
-              style={{
-                padding: "12px",
-                fontSize: "12px",
-                display: "flex",
-                flexDirection: "column",
-                gap: "4px",
-              }}
-            >
-              <span>No output transforms</span>
-            </div>
-          )}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
-      <StateInspectorDisclosureSection
-        title="Tasks"
-        colorScheme={colorScheme}
-        open={showTasks}
-        setOpen={setShowTasks}
-      >
-        <StateInspectorDisclosureRowInner>
-          {tasks?.map((task) => (
-            <StateInspectorRow
-              key={task.id}
-              colorScheme={colorScheme}
-              style={{
-                backgroundColor:
-                  task.status === "done"
-                    ? "rgba(0,255,0,0.2)"
-                    : task.status === "error"
-                      ? "rgba(255,0,0,0.2)"
-                      : undefined,
-              }}
-            >
-              <ObjectInspector
-                name={task.name}
-                data={task.payload}
-                theme={theme}
+                <span>No inputs</span>
+              </div>
+            )}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          open={showOutputTransforms}
+          setOpen={setShowOutputTransforms}
+          title={
+            <StateInspectorTitleLabel>
+              Output Transforms
+              <ColoredDot
+                type={outputTransformsInitialized ? "success" : "error"}
               />
-            </StateInspectorRow>
-          ))}
-        </StateInspectorDisclosureRowInner>
-      </StateInspectorDisclosureSection>
+            </StateInspectorTitleLabel>
+          }
+          colorScheme={colorScheme}
+        >
+          <StateInspectorDisclosureRowInner>
+            {outputTransforms?.map((transform: OutputTransform) => (
+              <StateInspectorRow key={transform.id} colorScheme={colorScheme}>
+                <ObjectInspector data={transform} theme={theme} />
+              </StateInspectorRow>
+            ))}
+            {!outputTransforms?.length && (
+              <div
+                style={{
+                  padding: "12px",
+                  fontSize: "12px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "4px",
+                }}
+              >
+                <span>No output transforms</span>
+              </div>
+            )}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
+      {advanced && (
+        <StateInspectorDisclosureSection
+          title="Tasks"
+          colorScheme={colorScheme}
+          open={showTasks}
+          setOpen={setShowTasks}
+        >
+          <StateInspectorDisclosureRowInner>
+            {tasks?.map((task) => (
+              <StateInspectorRow
+                key={task.id}
+                colorScheme={colorScheme}
+                style={{
+                  backgroundColor:
+                    task.status === "done"
+                      ? "rgba(0,255,0,0.2)"
+                      : task.status === "error"
+                        ? "rgba(255,0,0,0.2)"
+                        : undefined,
+                }}
+              >
+                <ObjectInspector
+                  name={task.name}
+                  data={task.payload}
+                  theme={theme}
+                />
+              </StateInspectorRow>
+            ))}
+          </StateInspectorDisclosureRowInner>
+        </StateInspectorDisclosureSection>
+      )}
       <StateInspectorDisclosureSection
         open={showEphemeral}
         setOpen={setShowEphemeral}
@@ -691,13 +704,15 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </StateInspectorDisclosureRowInner>
       </StateInspectorDisclosureSection>
-      <ActivityEventsSection
-        colorScheme={colorScheme}
-        activityEventsContainerRef={activityEventsContainerRef}
-        showEvents={showActivityEvents}
-        setShowEvents={setShowActivityEvents}
-        activityEventsManager={activityEventsManager}
-      />
+      {advanced && (
+        <ActivityEventsSection
+          colorScheme={colorScheme}
+          activityEventsContainerRef={activityEventsContainerRef}
+          showEvents={showActivityEvents}
+          setShowEvents={setShowActivityEvents}
+          activityEventsManager={activityEventsManager}
+        />
+      )}
       <EventsSection<S>
         connectionEvents={connectionEvents}
         colorScheme={colorScheme}

package/src/inspector/StateInspectorRow.tsx

@@ -8,12 +8,14 @@ export function StateInspectorRow({
   selected,
   style,
   variant,
+  bordered = true,
 }: {
   children: React.ReactNode;
   colorScheme: "light" | "dark";
   selected?: boolean;
   style?: CSSProperties;
   variant?: "up" | "down";
+  bordered?: boolean;
 }) {
   const solidBorderColor =
     colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
@@ -21,7 +23,7 @@ export function StateInspectorRow({
   return (
     <div
       style={{
-        borderBottom: `1px solid ${solidBorderColor}`,
+        borderBottom: bordered ? `1px solid ${solidBorderColor}` : undefined,
         fontSize: "12px",
         fontFamily: "Menlo, monospace",
         padding: "2px 12px 1px",

package/src/inspector/useStateInspector.tsx

@@ -38,12 +38,16 @@ export function useStateInspector<
 >({
   noyaManager,
   disabled = false,
+  advanced = false,
   colorScheme,
   anchor,
 }: {
   noyaManager: NoyaManager<S, M, E, MenuT>;
-  disabled: boolean;
-} & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
+  disabled?: boolean;
+  advanced?: boolean;
+  colorScheme?: ComponentProps<typeof StateInspector>["colorScheme"];
+  anchor?: ComponentProps<typeof StateInspector>["anchor"];
+}) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
   useIsomorphicLayoutEffect(() => {
@@ -64,7 +68,8 @@ export function useStateInspector<
         colorScheme={colorScheme}
         anchor={anchor}
         noyaManager={noyaManager}
+        advanced={advanced}
       />
     );
-  }, [noyaManager, anchor, colorScheme, root]);
+  }, [noyaManager, anchor, colorScheme, root, advanced]);
 }

package/src/noyaApp.ts

@@ -14,7 +14,7 @@ import {
   TypeGuard,
   webSocketSync,
 } from "@noya-app/state-manager";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBindNoyaManager, UseMultiplayerStateOptions } from "./hooks";
 import { StateInspectorOptions } from "./inspector/StateInspector";
 
@@ -28,6 +28,8 @@ export type AppData<State> = {
   viewType: AppViewType;
   initialState: State;
   inspector: boolean | StateInspectorOptions;
+  userId?: string;
+  isDemo: boolean;
 };
 
 export function createDefaultAppData<State>(
@@ -38,6 +40,7 @@ export function createDefaultAppData<State>(
     viewType: "editable",
     initialState,
     inspector: false,
+    isDemo: false,
   };
 }
 
@@ -93,6 +96,7 @@ export function getAppData<State>(
   }
 
   appData.initialState = enforceSchema(appData.initialState, schema) as State;
+  appData.isDemo = appData.isDemo ?? false;
 
   return appData as AppData<State>;
 }
@@ -138,6 +142,7 @@ export type UseNoyaStateResult<
   ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[2] & {
     theme: AppTheme;
     viewType: AppViewType;
+    isDemo: boolean;
   },
 ];
 
@@ -192,6 +197,8 @@ export function useNoyaStateInternal<
       initialState: noyaAppInitialState,
       theme,
       viewType,
+      userId,
+      isDemo,
     },
   ] = useState(() => {
     return getAppData(initialState, options?.schema, {
@@ -211,6 +218,13 @@ export function useNoyaStateInternal<
     () => new NoyaManager<S, M, E, MenuT>(noyaAppInitialState as S, options)
   );
 
+  useEffect(() => {
+    if (!userId) return;
+
+    noyaManager.ephemeralUserDataManager.setCurrentUserId(userId);
+    noyaManager.userManager.setCurrentUserId(userId);
+  }, [noyaManager, userId]);
+
   const result = useBindNoyaManager<S, M, E, MenuT>(noyaManager, {
     inspector: options?.inspector ?? inspector,
     sync: options?.sync ?? sync,
@@ -219,8 +233,8 @@ export function useNoyaStateInternal<
   const [, , extras] = result;
 
   const mergedExtras = useMemo(() => {
-    return { ...extras, theme, viewType } as const;
-  }, [extras, theme, viewType]);
+    return { ...extras, theme, viewType, isDemo } as const;
+  }, [extras, theme, viewType, isDemo]);
 
   return [result[0], result[1], mergedExtras] as UseNoyaStateResult<
     O["schema"] extends TSchema ? Static<O["schema"]> : S,