@dxos/react-ui-menu 0.8.4-main.ead640a → 0.8.4-main.ef1bc66f44

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.ead640a",
+  "version": "0.8.4-main.ef1bc66f44",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,39 +29,38 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.3.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.ead640a",
-    "@dxos/keyboard": "0.8.4-main.ead640a",
-    "@dxos/react-ui-attention": "0.8.4-main.ead640a",
-    "@dxos/util": "0.8.4-main.ead640a",
-    "@dxos/invariant": "0.8.4-main.ead640a"
+    "@dxos/app-graph": "0.8.4-main.ef1bc66f44",
+    "@dxos/invariant": "0.8.4-main.ef1bc66f44",
+    "@dxos/keyboard": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-types": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-ui-attention": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44",
+    "@dxos/effect": "0.8.4-main.ef1bc66f44"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
-    "@effect/platform": "0.92.1",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.ead640a",
-    "@dxos/live-object": "0.8.4-main.ead640a",
-    "@dxos/react-ui": "0.8.4-main.ead640a",
-    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
-    "@dxos/storybook-utils": "0.8.4-main.ead640a"
+    "@dxos/random": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44",
+    "@dxos/storybook-utils": "0.8.4-main.ef1bc66f44"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "^0.80.12",
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.ead640a",
-    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.ts

@@ -3,9 +3,9 @@
 //
 
 import { invariant } from '@dxos/invariant';
+import type { MenuActionProperties, MenuItemGroupProperties } from '@dxos/ui-types';
 
 import type { ActionGraphProps } from './hooks';
-import type { MenuActionProperties, MenuItemGroupProperties } from './types';
 import { createMenuAction, createMenuItemGroup } from './util';
 
 export interface ActionGroupBuilder {

package/src/components/ActionLabel.tsx

@@ -4,16 +4,16 @@
 
 import React from 'react';
 
-import { type ActionGroup, type Action as GraphAction } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 import { type TFunction, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { descriptionText, mx } from '@dxos/ui-theme';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
 import { translationKey } from '../translations';
-import { type MenuActionProperties } from '../types';
 import { getShortcut } from '../util';
 
-type Action = GraphAction<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
+type Action = Node.Action<MenuActionProperties> | Node.ActionGroup<Omit<MenuActionProperties, 'variant'>>;
 
 export const ActionLabel = ({ action }: { action: Action }) => {
   const { t } = useTranslation(translationKey);

package/src/components/DropdownMenu.tsx

@@ -8,6 +8,7 @@ import React, { type MouseEvent, useCallback } from 'react';
 import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu } from '@dxos/react-ui';
 
 import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
+import { executeMenuAction } from '../util';
 
 import { ActionLabel } from './ActionLabel';
 import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
@@ -60,17 +61,23 @@ const DropdownMenuRoot = ({
     onChange: onOpenChange,
   });
 
+  const { onAction } = useMenu('DropdownMenuRoot', __menuScope);
+
   const handleActionClick = useCallback(
     (action: MenuAction, event: MouseEvent) => {
       if (action.properties?.disabled) {
         return;
       }
       event.stopPropagation();
-      // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
+      // TODO(thure): Why does Dialog's modal-ness cause issues if we don't explicitly close the menu here?
       setOptionsMenuOpen(false);
-      void action.data?.({ parent: group, caller });
+      if (onAction) {
+        onAction(action, { parent: group, caller });
+      } else {
+        void executeMenuAction(action, { parent: group, caller });
+      }
     },
-    [group, caller],
+    [group, caller, onAction],
   );
 
   const items = useMenuItems(group, propsItems);

package/src/components/MenuContext.tsx

@@ -9,7 +9,7 @@ import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../typ
 
 export type MenuScopedProps<P> = P & { __menuScope?: Scope };
 
-const MENU_NAME = 'GraphMenu';
+const MENU_NAME = 'Menu';
 
 const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
 
@@ -18,19 +18,31 @@ const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_
 export const menuContextDefaults: MenuContextValue = {
   iconSize: 5,
   useGroupItems: () => null,
+  onAction: undefined,
 };
 
 const useMenuScope = createMenuScope();
 
+type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
+
 const MenuProvider = ({
   children,
   useGroupItems = menuContextDefaults.useGroupItems,
   iconSize = menuContextDefaults.iconSize,
   attendableId,
-}: PropsWithChildren<Partial<MenuContextValue>>) => {
+  alwaysActive,
+  onAction,
+}: MenuProviderProps) => {
   const { scope } = useMenuScope(undefined);
   return (
-    <MenuContextProvider useGroupItems={useGroupItems} iconSize={iconSize} attendableId={attendableId} scope={scope}>
+    <MenuContextProvider
+      useGroupItems={useGroupItems}
+      iconSize={iconSize}
+      attendableId={attendableId}
+      alwaysActive={alwaysActive}
+      onAction={onAction}
+      scope={scope}
+    >
       {children}
     </MenuContextProvider>
   );
@@ -48,3 +60,5 @@ export const useMenuItems = (
 };
 
 export { useMenu, createMenuScope, MenuProvider };
+
+export type { MenuProviderProps };

package/src/components/ToolbarMenu.stories.tsx

@@ -2,25 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Atom } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 
 import { MenuProvider, DropdownMenu as NaturalDropdownMenu, ToolbarMenu } from '../components';
-import { useMenuActions } from '../hooks';
+import { type ActionGraphProps, useMenuActions } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
 import { translations } from '../translations';
-import { type MenuAction } from '../types';
 
 faker.seed(1234);
 
 const meta = {
   title: 'ui/react-ui-menu/ToolbarMenu',
   component: ToolbarMenu,
-  decorators: [withTheme],
+  decorators: [withTheme(), withRegistry],
   parameters: {
     translations,
   },
@@ -32,15 +33,21 @@ type Story = StoryObj<typeof meta>;
 
 export const DropdownMenu: Story = {
   render: () => {
-    const menuActions = useMemo(() => createActions() as MenuAction[], []);
-    const resolveGroupItems = useCallback(() => menuActions, [menuActions]);
-    useMutateActions(menuActions);
+    const actionsAtom = useMemo(() => {
+      const actions = createActions();
+      return Atom.make<ActionGraphProps>({
+        nodes: actions,
+        edges: actions.map((action) => ({ source: 'root', target: action.id })),
+      }).pipe(Atom.keepAlive);
+    }, []);
+    useMutateActions(actionsAtom);
+    const menu = useMenuActions(actionsAtom);
 
     return (
-      <MenuProvider useGroupItems={resolveGroupItems}>
+      <MenuProvider {...menu}>
         <NaturalDropdownMenu.Root>
           <NaturalDropdownMenu.Trigger asChild>
-            <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
+            <IconButton icon='ph--list-checks--regular' label='Options' />
           </NaturalDropdownMenu.Trigger>
         </NaturalDropdownMenu.Root>
       </MenuProvider>
@@ -62,6 +69,7 @@ export const Toolbar: Story = {
 
 export const UseMenuActionsToolbar: Story = {
   render: () => {
+    useMutateActions(createNestedActions);
     const menu = useMenuActions(createNestedActions);
 
     return (

package/src/components/ToolbarMenu.tsx

@@ -6,12 +6,12 @@ import React, { Fragment, useCallback } from 'react';
 
 import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { mx, textBlockWidth, toolbarLayout } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth, toolbarLayout } from '@dxos/ui-theme';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
 import { translationKey } from '../translations';
 import {
   type MenuAction,
-  type MenuActionProperties,
   type MenuItem,
   type MenuItemGroup,
   type MenuMultipleSelectActionGroup,
@@ -19,6 +19,7 @@ import {
   isMenuGroup,
   isSeparator,
 } from '../types';
+import { executeMenuAction } from '../util';
 
 import { ActionLabel, actionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
@@ -53,15 +54,23 @@ export type ToolbarMenuActionProps = {
 };
 
 const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { iconSize } = useMenu('ActionToolbarItem', __menuScope);
+  const { iconSize, onAction } = useMenu('ActionToolbarItem', __menuScope);
   const { t } = useTranslation(translationKey);
-  const handleClick = useCallback(() => action.data?.(), [action]);
+
   const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const rootProps = icon
     ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
 
+  const handleClick = useCallback(() => {
+    if (onAction) {
+      onAction(action, {});
+    } else {
+      void executeMenuAction(action);
+    }
+  }, [action, onAction]);
+
   return hidden ? null : (
     <Root
       key={action.id}
@@ -93,7 +102,13 @@ const DropdownMenuToolbarItem = ({
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const labelAction = (group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group;
   const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label: actionLabel(labelAction, t), caretDown: true }
+    ? {
+        icon,
+        size: iconSize,
+        iconOnly,
+        label: actionLabel(labelAction, t),
+        caretDown: true,
+      }
     : {
         children: (
           <>
@@ -113,10 +128,16 @@ const DropdownMenuToolbarItem = ({
 };
 
 const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<ToolbarMenuActionProps>) => {
-  const { iconSize } = useMenu('ToggleGroupItem', __menuScope);
+  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
   const { t } = useTranslation(translationKey);
   const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const handleClick = useCallback(() => action.data?.({ parent: group }), [action, group]);
+  const handleClick = useCallback(() => {
+    if (onAction) {
+      onAction(action, { parent: group });
+    } else {
+      void executeMenuAction(action, { parent: group });
+    }
+  }, [action, group, onAction]);
   const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
   const rootProps = icon
     ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
@@ -158,23 +179,27 @@ const ToggleGroupToolbarItem = ({
   );
 };
 
+// TODO(burdon): Reconcile with react-ui/Toolbar (incl. textBlockWidth)
 export const ToolbarMenu = ({
   __menuScope,
   classNames,
-  textBlockWidth: wrapContents,
+  textBlockWidth: textBlockWidthProp,
   ...props
 }: MenuScopedProps<ToolbarMenuProps>) => {
   const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
-  const { attendableId } = useMenu('ToolbarMenu', __menuScope);
+  const { attendableId, alwaysActive } = useMenu('ToolbarMenu', __menuScope);
   const { hasAttention } = useAttention(attendableId);
-  const InnerRoot = wrapContents ? 'div' : Fragment;
-  const innerRootProps = wrapContents ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') } : {};
+  const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
+  const innerRootProps = textBlockWidthProp
+    ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') }
+    : {};
 
   return (
     <NaturalToolbar.Root
       {...props}
-      layoutManaged={wrapContents}
-      classNames={[attendableId && !hasAttention && '*:opacity-20 !bg-transparent', classNames]}
+      classNames={[attendableId, classNames]}
+      disabled={!alwaysActive && !hasAttention}
+      layoutManaged={textBlockWidthProp}
     >
       <InnerRoot {...innerRootProps}>
         {items?.map((item: MenuItem, i: number) => (

package/src/hooks/useMenuActions.ts

@@ -2,69 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import { RegistryContext, type Rx, useRxValue } from '@effect-rx/rx-react';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { type Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { useCallback, useContext, useRef } from 'react';
 
-import { type Edge, type Edges, Graph, type Node, type NodeArg, ROOT_ID } from '@dxos/app-graph';
+import { Graph, Node } from '@dxos/app-graph';
 
 import { type MenuItem, type MenuItemGroup } from '../types';
 
-const edgesArrayToRecord = (edges: Edge[]): Record<string, Edges> => {
-  return Object.fromEntries(
-    Object.entries(
-      edges.reduce((acc: Record<string, { inbound: string[]; outbound: string[] }>, { source, target }) => {
-        if (!acc[source]) {
-          acc[source] = { inbound: [], outbound: [] };
-        }
-        if (!acc[target]) {
-          acc[target] = { inbound: [], outbound: [] };
-        }
-
-        const sourceEdges = acc[source];
-        if (!sourceEdges.outbound.includes(target)) {
-          sourceEdges.outbound.push(target);
-        }
-
-        const targetEdges = acc[target];
-        if (!targetEdges.inbound.includes(source)) {
-          targetEdges.inbound.push(source);
-        }
-
-        return acc;
-      }, {}),
-    ),
-  );
-};
-
-export type ActionGraphNodes = NodeArg<any>[];
-export type ActionGraphEdges = Edge[];
+export type ActionGraphNodes = Node.NodeArg<any>[];
+export type ActionGraphEdges = Graph.Edge[];
 export type ActionGraphProps = {
   nodes: ActionGraphNodes;
   edges: ActionGraphEdges;
 };
 
-export type MenuActions = { useGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[] };
+export type MenuActions = {
+  useGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[];
+};
 
-export const useMenuActions = (props: Rx.Rx<ActionGraphProps>): MenuActions => {
+export const useMenuActions = (props: Atom.Atom<ActionGraphProps>): MenuActions => {
   const registry = useContext(RegistryContext);
-  const menuGraphProps = useRxValue(props);
+  const menuGraphProps = useAtomValue(props);
 
-  const [graph] = useState(
-    new Graph({
-      registry,
-      nodes: menuGraphProps.nodes as Node[],
-      edges: edgesArrayToRecord(menuGraphProps.edges),
-    }),
-  );
+  // Create a new graph whenever props change to preserve correct order.
+  // (Graph.addEdges appends rather than replaces, which breaks ordering on updates.)
+  const graphRef = useRef<{ graph: Graph.WritableGraph; props: ActionGraphProps } | null>(null);
+  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+    const newGraph = Graph.make({ registry });
+    newGraph.pipe(Graph.addNodes(menuGraphProps.nodes as Node.NodeArg<any>[]), Graph.addEdges(menuGraphProps.edges));
+    graphRef.current = { graph: newGraph, props: menuGraphProps };
+  }
 
-  useEffect(() => {
-    graph.addNodes(menuGraphProps.nodes);
-    graph.addEdges(menuGraphProps.edges);
-  }, [menuGraphProps]);
+  const graph = graphRef.current.graph;
 
   const useGroupItems = useCallback(
     (sourceNode?: MenuItemGroup) => {
-      const items = useRxValue(graph.connections(sourceNode?.id || ROOT_ID)) as MenuItem[];
+      const items = useAtomValue(graph.connections(sourceNode?.id || Node.RootId)) as MenuItem[];
       return items;
     },
     [graph],

package/src/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export { rxFromSignal } from '@dxos/app-graph';
-
 export * from './components';
 export * from './hooks';
 export * from './types';

package/src/testing/generator.ts

@@ -2,27 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { useEffect } from 'react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
+import { useContext, useEffect } from 'react';
 
-import {
-  ACTION_GROUP_TYPE,
-  ACTION_TYPE,
-  type Action,
-  Graph,
-  type NodeArg,
-  ROOT_ID,
-  actionGroupSymbol,
-} from '@dxos/app-graph';
-import { live } from '@dxos/live-object';
+import { Graph, Node } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
-import { type DeepWriteable } from '@dxos/util';
 
 import { type ActionGraphProps } from '../hooks/useMenuActions';
-import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
+import { type MenuItem, type MenuItemGroup } from '../types';
 
-export type CreateActionsParams = Partial<{
-  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
+export type CreateActionsProps = Partial<{
+  type?: typeof Node.ActionType | typeof Node.ActionGroupType;
   callback: () => void;
   count: number;
 }>;
@@ -46,29 +36,27 @@ const icons = {
   ],
 };
 
-export const createActions = (params?: CreateActionsParams) => {
-  // eslint-disable-next-line no-console
-  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
+export const createActions = (params?: CreateActionsProps) => {
+  const { callback = () => console.log('invoke'), count = 12, type = Node.ActionType } = params ?? {};
   return faker.helpers.multiple(
-    () =>
-      live({
-        id: faker.string.uuid(),
-        type,
-        data: type === ACTION_GROUP_TYPE ? actionGroupSymbol : callback,
-        properties: {
-          label: faker.lorem.words(2),
-          icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
-          disabled: faker.helpers.arrayElement([true, false]),
-          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
-        },
-      }),
+    () => ({
+      id: faker.string.uuid(),
+      type,
+      data: type === Node.ActionGroupType ? Node.actionGroupSymbol : callback,
+      properties: {
+        label: faker.lorem.words(2),
+        icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
+        disabled: faker.helpers.arrayElement([true, false]),
+        ...(type === Node.ActionGroupType && { variant: 'dropdownMenu' }),
+      },
+    }),
     { count },
   );
 };
 
-export const createNestedActions = Rx.make(() => {
+const buildNestedActions = (): ActionGraphProps => {
   const result: ActionGraphProps = { edges: [], nodes: [] };
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
+  const actionGroups = createActions({ type: Node.ActionGroupType });
   actionGroups.forEach((group) => {
     const actions = createActions();
     result.nodes.push(group, ...actions);
@@ -78,39 +66,56 @@ export const createNestedActions = Rx.make(() => {
     );
   });
   return result;
-});
+};
+
+export const createNestedActions = Atom.make(buildNestedActions()).pipe(Atom.keepAlive);
 
-export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
-  const graph = new Graph();
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
+export const createNestedActionsResolver = (groupParams?: CreateActionsProps, params?: CreateActionsProps) => {
+  const graph = Graph.make();
+  const actionGroups = createActions({ type: Node.ActionGroupType, ...groupParams });
   actionGroups.forEach((group) => {
     const actions = createActions(params);
-    graph.addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
-    graph.addEdges([
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
-    ]);
-    void graph.expand(group.id);
+    graph.pipe(
+      Graph.addNodes([group as Node.NodeArg<any>, ...(actions as Node.NodeArg<any>[])]),
+      Graph.addEdges([
+        { source: 'root', target: group.id },
+        ...actions.map((action) => ({ source: group.id, target: action.id })),
+      ]),
+      Graph.expand(group.id),
+    );
   });
   const resolveGroupItems = (groupNode?: MenuItemGroup) =>
-    (graph.getActions(groupNode?.id ?? ROOT_ID) || null) as MenuItem[] | null;
+    (Graph.getActions(graph, groupNode?.id ?? Node.RootId) || null) as MenuItem[] | null;
   return { resolveGroupItems };
 };
 
-export const mutateActionsOnInterval = (actions: Action[]) => {
-  let cursor = 0;
-  return setInterval(() => {
-    const action = actions[cursor] as DeepWriteable<Action>;
-    action.properties.icon = faker.helpers.arrayElement(
-      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
-    );
-    action.properties.disabled = !action.properties.disabled;
-    cursor = (cursor + actions.length + 1) % actions.length;
-  }, 1_000);
-};
+/**
+ * Hook to mutate actions in an atom on an interval for testing reactivity.
+ */
+export const useMutateActions = (actionsAtom: Atom.Writable<ActionGraphProps>) => {
+  const registry = useContext(RegistryContext);
 
-export const useMutateActions = (actions: MenuAction[]) =>
   useEffect(() => {
-    const interval = mutateActionsOnInterval(actions);
+    let cursor = 0;
+    const interval = setInterval(() => {
+      const current = registry.get(actionsAtom);
+      const nodes = current.nodes.map((node, index) => {
+        if (index !== cursor) {
+          return node;
+        }
+        return {
+          ...node,
+          properties: {
+            ...node.properties,
+            icon: faker.helpers.arrayElement(node.properties?.icon?.endsWith('regular') ? icons.fill : icons.regular),
+            disabled: !node.properties?.disabled,
+          },
+        };
+      });
+      registry.set(actionsAtom, { ...current, nodes });
+      cursor = (cursor + 1) % current.nodes.length;
+    }, 1_000);
+
     return () => clearInterval(interval);
-  }, []);
+  }, [actionsAtom, registry]);
+};

package/src/translations.ts

@@ -4,7 +4,7 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-menu';
+export const translationKey = '@dxos/react-ui-menu';
 
 export const translations = [
   {