@noya-app/noya-multiplayer-react 0.1.48 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.37",
+    "@noya-app/state-manager": "0.1.39",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.5",
     "@noya-app/task-runner": "0.1.5",
-    "@noya-app/react-utils": "0.1.13",
+    "@noya-app/react-utils": "0.1.15",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/NoyaStateContext.tsx

@@ -1,3 +1,5 @@
+import { MenuItem } from "@noya-app/noya-designsystem";
+import { Input, OutputTransform } from "@noya-app/noya-schemas";
 import {
   GetAtPath,
   Observable,
@@ -6,6 +8,7 @@ import {
 } from "@noya-app/observable";
 import {
   ConnectedUsersManager,
+  CreateParams,
   EphemeralUserDataManager,
   MultiplayerStateManager,
   NoyaManager,
@@ -21,7 +24,12 @@ import React, {
   useEffect,
   useMemo,
 } from "react";
-import { useNoyaState, UseNoyaStateOptions } from "./noyaApp";
+import {
+  AppTheme,
+  AppViewType,
+  useNoyaState,
+  UseNoyaStateOptions,
+} from "./noyaApp";
 import { useObservable } from "./useObservable";
 
 interface NoyaStateProviderProps<
@@ -39,10 +47,15 @@ interface NoyaStateProviderProps<
 }
 
 const AnyNoyaStateContext = createContext<
-  NoyaManager<any, any, any, any> | undefined
+  | {
+      noyaManager: NoyaManager<any, any, any, any>;
+      theme: AppTheme;
+      viewType: AppViewType;
+    }
+  | undefined
 >(undefined);
 
-function useAnyNoyaStateContext() {
+export function useAnyNoyaStateContext() {
   const value = useContext(AnyNoyaStateContext);
 
   if (!value) {
@@ -54,81 +67,114 @@ function useAnyNoyaStateContext() {
   return value;
 }
 
+export function useAnyNoyaManager() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager as NoyaManager<any, any, any, any>;
+}
+
+export function useColorScheme() {
+  const { theme } = useAnyNoyaStateContext();
+  return theme;
+}
+
+export function useViewType() {
+  const { viewType } = useAnyNoyaStateContext();
+  return viewType;
+}
+
 export function useAssets() {
-  const { assetManager } = useAnyNoyaStateContext();
-  return useObservable(assetManager.assets$);
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.assetManager.assets$);
 }
 
 export function useAsset(id: string | undefined) {
-  const { assetManager } = useAnyNoyaStateContext();
+  const { noyaManager } = useAnyNoyaStateContext();
   const observable = useMemo(
-    () => assetManager.assets$.map((assets) => assets.find((a) => a.id === id)),
-    [assetManager, id]
+    () =>
+      noyaManager.assetManager.assets$.map((assets) =>
+        assets.find((a) => a.id === id)
+      ),
+    [noyaManager, id]
   );
   return useObservable(observable);
 }
 
 export function useAssetManager() {
-  const { assetManager } = useAnyNoyaStateContext();
+  const { noyaManager } = useAnyNoyaStateContext();
+  const isInitialized = useObservable(noyaManager.assetManager.isInitialized$);
   return useMemo(
     () => ({
-      create: assetManager.create,
-      delete: assetManager.delete,
+      create: noyaManager.assetManager.create,
+      delete: noyaManager.assetManager.delete,
+      isInitialized,
     }),
-    [assetManager]
+    [noyaManager, isInitialized]
   );
 }
 
 export function useAIManager() {
-  const { aiManager } = useAnyNoyaStateContext();
-  return aiManager;
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.aiManager;
 }
 
 export function useSecretManager() {
-  const { secretManager } = useAnyNoyaStateContext();
-  return secretManager;
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.secretManager;
 }
 
 export function useSecrets() {
-  const { secretManager } = useAnyNoyaStateContext();
-  return useObservable(secretManager.secrets$);
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.secretManager.secrets$);
 }
 
 export function useSecret(name: string) {
-  const { secretManager } = useAnyNoyaStateContext();
+  const { noyaManager } = useAnyNoyaStateContext();
 
   return useObservable(
-    secretManager.secrets$,
+    noyaManager.secretManager.secrets$,
     useCallback((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 
+export function useInputs() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.ioManager.inputs$);
+}
+
+export function useOutputTransforms() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.ioManager.outputTransforms$);
+}
+
+export function useIOManager() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.ioManager;
+}
+
 export function useIsInitialized() {
-  const {
-    multiplayerStateManager: ms,
-    secretManager,
-    assetManager,
-  } = useAnyNoyaStateContext();
+  const { noyaManager, viewType } = useAnyNoyaStateContext();
 
   const isInitializedObservable = useMemo(
     () =>
       Observable.combine(
         [
-          ms.isInitialized$,
-          secretManager.isInitialized$,
-          assetManager.isInitialized$,
+          ...(viewType === "preview"
+            ? []
+            : [noyaManager.multiplayerStateManager.isInitialized$]),
+          noyaManager.secretManager.isInitialized$,
+          noyaManager.assetManager.isInitialized$,
         ],
         (values) => values.every((v) => v)
       ),
-    [ms, secretManager, assetManager]
+    [noyaManager, viewType]
   );
 
   return useObservable(isInitializedObservable);
 }
 
 export function useWorkflowManager() {
-  const { workflowManager } = useAnyNoyaStateContext();
-  return workflowManager;
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.workflowManager;
 }
 
 export const ConnectedUsersContext = createContext<
@@ -172,12 +218,16 @@ export function createNoyaContext<
 >({
   schema,
   mergeHistoryEntries,
+  outputTransforms,
+  inputs,
 }: {
   schema: Schema;
   mergeHistoryEntries?: StateManagerOptions<
     Static<Schema>,
     M
   >["mergeHistoryEntries"];
+  outputTransforms?: CreateParams<OutputTransform>[];
+  inputs?: CreateParams<Input>[];
 }) {
   type S = Static<Schema>;
 
@@ -195,14 +245,28 @@ export function createNoyaContext<
     initialState,
     ...options
   }: NoyaStateProviderProps<S, M, E, MenuT>) {
-    const [, , { noyaManager }] = useNoyaState<S, M, E, MenuT>(initialState, {
-      ...(options as any),
-      schema,
-      mergeHistoryEntries,
-    });
+    const [, , { noyaManager, theme, viewType }] = useNoyaState<S, M, E, MenuT>(
+      initialState,
+      {
+        schema,
+        mergeHistoryEntries,
+        outputTransforms,
+        inputs,
+        ...(options as any),
+      }
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        noyaManager,
+        theme,
+        viewType,
+      }),
+      [noyaManager, theme, viewType]
+    );
 
     return (
-      <AnyNoyaStateContext.Provider value={noyaManager}>
+      <AnyNoyaStateContext.Provider value={contextValue}>
         <ConnectedUsersContext.Provider
           value={noyaManager.connectedUsersManager}
         >
@@ -232,17 +296,19 @@ export function createNoyaContext<
     path?: PathKey[] | string | ((value: S) => any),
     options?: Pick<ObservableOptions, "isEqual">
   ) {
-    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const { noyaManager } = useAnyNoyaStateContext();
 
     let actualPath: PathKey[] | string =
       typeof path === "function" || !path ? "" : path;
 
     const mappedObservable = useMemo(() => {
       if (typeof path === "function") {
-        return ms.optimisticState$.map(path, { isEqual: options?.isEqual });
+        return noyaManager.multiplayerStateManager.optimisticState$.map(path, {
+          isEqual: options?.isEqual,
+        });
       }
-      return ms.optimisticState$;
-    }, [ms, path, options?.isEqual]);
+      return noyaManager.multiplayerStateManager.optimisticState$;
+    }, [noyaManager, path, options?.isEqual]);
 
     const value = useObservable(mappedObservable, actualPath);
 
@@ -262,7 +328,7 @@ export function createNoyaContext<
       | [value: SetStateAction<GetAtPath<S, P>>]
   ) => void;
   function useSetValue<P extends PathKey[] | string>(path?: P) {
-    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const { noyaManager } = useAnyNoyaStateContext();
 
     const setValue = useCallback(
       (
@@ -272,9 +338,13 @@ export function createNoyaContext<
       ): void => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
 
-        ms.setStateAtPath(metadata, (path ?? "") as P, value as never);
+        noyaManager.multiplayerStateManager.setStateAtPath(
+          metadata,
+          (path ?? "") as P,
+          value as never
+        );
       },
-      [ms, path]
+      [noyaManager, path]
     );
 
     return setValue;
@@ -323,9 +393,9 @@ export function createNoyaContext<
   }
 
   function useStateManager() {
-    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const { noyaManager } = useAnyNoyaStateContext();
 
-    return ms as MultiplayerStateManager<S, M>;
+    return noyaManager.multiplayerStateManager as MultiplayerStateManager<S, M>;
   }
 
   function useEphemeralUserDataManager() {
@@ -341,19 +411,41 @@ export function createNoyaContext<
   }
 
   function useNoyaManager() {
-    return useAnyNoyaStateContext() as NoyaManager<S, M, E, MenuT>;
+    return useAnyNoyaStateContext().noyaManager as NoyaManager<S, M, E, MenuT>;
   }
 
   function useLeftMenuItems() {
     const { menuManager } = useNoyaManager();
+
     return useObservable(menuManager.leftMenuItems$);
   }
 
+  function useSetLeftMenuItems(leftMenuItems?: MenuItem<MenuT>[]) {
+    const { menuManager } = useNoyaManager();
+
+    useEffect(() => {
+      if (leftMenuItems) {
+        menuManager.setLeftMenuItems(leftMenuItems);
+      }
+    }, [menuManager, leftMenuItems]);
+  }
+
   function useRightMenuItems() {
     const { menuManager } = useNoyaManager();
+
     return useObservable(menuManager.rightMenuItems$);
   }
 
+  function useSetRightMenuItems(rightMenuItems?: MenuItem<MenuT>[]) {
+    const { menuManager } = useNoyaManager();
+
+    useEffect(() => {
+      if (rightMenuItems) {
+        menuManager.setRightMenuItems(rightMenuItems);
+      }
+    }, [menuManager, rightMenuItems]);
+  }
+
   function useHandleMenuItem(callback: (type: MenuT) => void) {
     const { menuManager } = useNoyaManager();
 
@@ -368,6 +460,20 @@ export function createNoyaContext<
     return useCallback((type: MenuT) => menuManager.emit(type), [menuManager]);
   }
 
+  function useMenu(options: {
+    leftMenuItems?: MenuItem<MenuT>[];
+    rightMenuItems?: MenuItem<MenuT>[];
+    onSelectMenuItem?: (type: MenuT) => void;
+  }) {
+    const { leftMenuItems, rightMenuItems, onSelectMenuItem } = options;
+
+    useSetLeftMenuItems(leftMenuItems);
+    useSetRightMenuItems(rightMenuItems);
+
+    const noop = useCallback(() => {}, []);
+    useHandleMenuItem(onSelectMenuItem ?? noop);
+  }
+
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
@@ -377,9 +483,12 @@ export function createNoyaContext<
     useStateManager,
     useEphemeralUserDataManager,
     useLeftMenuItems,
+    useSetLeftMenuItems,
     useRightMenuItems,
+    useSetRightMenuItems,
     useHandleMenuItem,
     useOnSelectMenuItemCallback,
     useNoyaManager,
+    useMenu,
   };
 }

package/src/inspector/StateInspector.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Input, OutputTransform } from "@noya-app/noya-schemas";
 import { memoGeneric } from "@noya-app/react-utils";
 import { ExtendedPathKey, NoyaManager } from "@noya-app/state-manager";
 import React, {
@@ -266,10 +267,13 @@ export const StateInspector = memoGeneric(function StateInspector<
     ephemeralUserDataManager,
     connectionEventManager,
     taskManager,
+    ioManager,
   } = noyaManager;
 
   const [didMount, setDidMount] = React.useState(false);
   const tasks = useObservable(taskManager.tasks$);
+  const inputs = useObservable(ioManager.inputs$);
+  const outputTransforms = useObservable(ioManager.outputTransforms$);
 
   useLayoutEffect(() => {
     setDidMount(true);
@@ -314,6 +318,14 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-secrets",
     false
   );
+  const [showInputs, setShowInputs] = useLocalStorageState(
+    "noya-multiplayer-react-show-inputs",
+    false
+  );
+  const [showOutputTransforms, setShowOutputTransforms] = useLocalStorageState(
+    "noya-multiplayer-react-show-output-transforms",
+    false
+  );
 
   const connectionEvents = useObservable(connectionEventManager.events$);
 
@@ -336,6 +348,10 @@ export const StateInspector = memoGeneric(function StateInspector<
   const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
   const userId = useObservable(connectedUsersManager.currentUserId$);
   const state = useObservable(multiplayerStateManager.optimisticState$);
+  const inputsInitialized = useObservable(ioManager.inputsInitialized$);
+  const outputTransformsInitialized = useObservable(
+    ioManager.outputTransformsInitialized$
+  );
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -759,35 +775,6 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </div>
       </DisclosureSection>
-      <DisclosureSection
-        title="Tasks"
-        colorScheme={colorScheme}
-        open={showTasks}
-        setOpen={setShowTasks}
-      >
-        <div style={styles.sectionInner}>
-          {tasks?.map((task) => (
-            <InspectorRow
-              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}
-              />
-            </InspectorRow>
-          ))}
-        </div>
-      </DisclosureSection>
       <DisclosureSection
         title={
           <TitleLabel>
@@ -826,6 +813,101 @@ export const StateInspector = memoGeneric(function StateInspector<
             </InspectorRow>
           ))}
         </div>
+      </DisclosureSection>{" "}
+      <DisclosureSection
+        open={showInputs}
+        setOpen={setShowInputs}
+        title={
+          <TitleLabel>
+            Inputs
+            <ColoredDot type={inputsInitialized ? "success" : "error"} />
+          </TitleLabel>
+        }
+        colorScheme={colorScheme}
+      >
+        <div style={styles.sectionInner}>
+          {inputs?.map((input: Input) => (
+            <InspectorRow key={input.id} colorScheme={colorScheme}>
+              <ObjectInspector data={input} theme={theme} />
+            </InspectorRow>
+          ))}
+          {!inputs?.length && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No inputs</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        open={showOutputTransforms}
+        setOpen={setShowOutputTransforms}
+        title={
+          <TitleLabel>
+            Output Transforms
+            <ColoredDot
+              type={outputTransformsInitialized ? "success" : "error"}
+            />
+          </TitleLabel>
+        }
+        colorScheme={colorScheme}
+      >
+        <div style={styles.sectionInner}>
+          {outputTransforms?.map((transform: OutputTransform) => (
+            <InspectorRow key={transform.id} colorScheme={colorScheme}>
+              <ObjectInspector data={transform} theme={theme} />
+            </InspectorRow>
+          ))}
+          {!outputTransforms?.length && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No output transforms</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        title="Tasks"
+        colorScheme={colorScheme}
+        open={showTasks}
+        setOpen={setShowTasks}
+      >
+        <div style={styles.sectionInner}>
+          {tasks?.map((task) => (
+            <InspectorRow
+              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}
+              />
+            </InspectorRow>
+          ))}
+        </div>
       </DisclosureSection>
       <DisclosureSection
         open={showEphemeral}

package/src/noyaApp.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-globals */
+import { findAllDefs } from "@noya-app/noya-schemas";
 import {
   createOrCastValue,
-  findAllDefs,
   isEmbeddedApp,
   localStorageSync,
   parentFrameSync,