@dxos/react-ui-menu 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.cb12b3f963",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,18 +12,24 @@
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -31,14 +37,14 @@
   "dependencies": {
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/effect": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
-    "@dxos/keyboard": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae"
+    "@dxos/app-graph": "0.8.4-main.cb12b3f963",
+    "@dxos/invariant": "0.8.4-main.cb12b3f963",
+    "@dxos/effect": "0.8.4-main.cb12b3f963",
+    "@dxos/keyboard": "0.8.4-main.cb12b3f963",
+    "@dxos/log": "0.8.4-main.cb12b3f963",
+    "@dxos/react-ui-attention": "0.8.4-main.cb12b3f963",
+    "@dxos/util": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-types": "0.8.4-main.cb12b3f963"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -47,23 +53,23 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.cb12b3f963",
+    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
+    "@dxos/storybook-utils": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.test.ts

@@ -0,0 +1,224 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { Node } from '@dxos/app-graph';
+
+import { MenuBuilder } from './builder';
+import { MenuSeparatorType } from './types';
+
+describe('MenuBuilder', () => {
+  test('builds a flat menu with actions', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {})
+      .action('italic', { label: 'Italic', icon: 'ph--text-italic--regular' }, () => {})
+      .build();
+
+    expect(graph.nodes).toHaveLength(3);
+    expect(graph.edges).toHaveLength(2);
+    expect(graph.edges).toEqual([
+      { source: 'root', target: 'bold', relation: 'child' },
+      { source: 'root', target: 'italic', relation: 'child' },
+    ]);
+  });
+
+  test('builds nested groups', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .group('formatting', { label: 'Formatting' }, (group) => {
+        group
+          .action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {})
+          .action('italic', { label: 'Italic', icon: 'ph--text-italic--regular' }, () => {});
+      })
+      .build();
+
+    expect(graph.nodes).toHaveLength(4);
+    expect(graph.edges).toEqual([
+      { source: 'root', target: 'formatting', relation: 'child' },
+      { source: 'formatting', target: 'bold', relation: 'child' },
+      { source: 'formatting', target: 'italic', relation: 'child' },
+    ]);
+  });
+
+  test('builds deeply nested hierarchy', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .group('text', { label: 'Text' }, (text) => {
+        text
+          .group('headings', { label: 'Headings' }, (headings) => {
+            headings
+              .action('h1', { label: 'Heading 1', icon: 'ph--text-h-one--regular' }, () => {})
+              .action('h2', { label: 'Heading 2', icon: 'ph--text-h-two--regular' }, () => {});
+          })
+          .group('formatting', { label: 'Formatting' }, (formatting) => {
+            formatting.action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {});
+          });
+      })
+      .build();
+
+    // root + text + headings + h1 + h2 + formatting + bold = 7 nodes.
+    expect(graph.nodes).toHaveLength(7);
+    expect(graph.edges).toEqual([
+      { source: 'root', target: 'text', relation: 'child' },
+      { source: 'text', target: 'headings', relation: 'child' },
+      { source: 'headings', target: 'h1', relation: 'child' },
+      { source: 'headings', target: 'h2', relation: 'child' },
+      { source: 'text', target: 'formatting', relation: 'child' },
+      { source: 'formatting', target: 'bold', relation: 'child' },
+    ]);
+  });
+
+  test('merges pre-built subgraph', ({ expect }) => {
+    const headings = MenuBuilder.make()
+      .root({ label: 'headings' })
+      .group('headings', { label: 'Headings', variant: 'dropdownMenu' }, (group) => {
+        group
+          .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
+          .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
+      })
+      .build();
+
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .action('search', { label: 'Search', icon: 'ph--magnifying-glass--regular' }, () => {})
+      .subgraph(headings)
+      .build();
+
+    // root (toolbar) + search + root (headings) + headings group + h1 + h2 = 6 nodes.
+    expect(graph.nodes).toHaveLength(6);
+    // search → root, headings root→headings group, h1→headings, h2→headings.
+    const headingsEdge = graph.edges.find((edge) => edge.target === 'headings');
+    expect(headingsEdge).toEqual({ source: 'root', target: 'headings', relation: 'child' });
+  });
+
+  test('separators are inserted between groups', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {})
+      .separator()
+      .action('search', { label: 'Search', icon: 'ph--magnifying-glass--regular' }, () => {})
+      .build();
+
+    const separatorNode = graph.nodes.find((node) => node.type === MenuSeparatorType);
+    expect(separatorNode).toBeDefined();
+    expect(separatorNode!.properties).toEqual({ variant: 'gap' });
+
+    const separatorEdge = graph.edges.find((edge) => edge.target === separatorNode!.id);
+    expect(separatorEdge).toEqual({ source: 'root', target: separatorNode!.id, relation: 'child' });
+  });
+
+  test('subgraph callback adds children to current group', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .subgraph((sub) => {
+        sub
+          .group('headings', { label: 'Headings', variant: 'dropdownMenu' }, (group) => {
+            group
+              .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
+              .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
+          })
+          .group('formatting', { label: 'Formatting' }, (group) => {
+            group.action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {});
+          });
+      })
+      .build();
+
+    // root + headings + h1 + h2 + formatting + bold = 6 nodes.
+    expect(graph.nodes).toHaveLength(6);
+    expect(graph.edges).toEqual([
+      { source: 'root', target: 'headings', relation: 'child' },
+      { source: 'headings', target: 'h1', relation: 'child' },
+      { source: 'headings', target: 'h2', relation: 'child' },
+      { source: 'root', target: 'formatting', relation: 'child' },
+      { source: 'formatting', target: 'bold', relation: 'child' },
+    ]);
+  });
+
+  test('subgraph callback scoped to nested group', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .group('text', { label: 'Text' }, (text) => {
+        text.subgraph((sub) => {
+          sub.action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {});
+          sub.action('italic', { label: 'Italic', icon: 'ph--text-italic--regular' }, () => {});
+        });
+      })
+      .build();
+
+    // root + text + bold + italic = 4 nodes.
+    expect(graph.nodes).toHaveLength(4);
+    expect(graph.edges).toEqual([
+      { source: 'root', target: 'text', relation: 'child' },
+      { source: 'text', target: 'bold', relation: 'child' },
+      { source: 'text', target: 'italic', relation: 'child' },
+    ]);
+  });
+
+  test('composable curried subgraph functions', ({ expect }) => {
+    // Simulates the curried pattern: addX(args) returns (builder) => void.
+    const addHeadingsSection = () => (builder: import('./builder').ActionGroupBuilder) => {
+      builder.group('headings', { label: 'Headings', variant: 'dropdownMenu' }, (group) => {
+        group
+          .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
+          .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
+      });
+    };
+
+    const addFormattingSection = () => (builder: import('./builder').ActionGroupBuilder) => {
+      builder.group('formatting', { label: 'Formatting' }, (group) => {
+        group.action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {});
+      });
+    };
+
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .subgraph(addHeadingsSection())
+      .separator()
+      .subgraph(addFormattingSection())
+      .build();
+
+    expect(graph.nodes).toHaveLength(7); // root + headings + h1 + h2 + separator + formatting + bold.
+    expect(graph.edges[0]).toEqual({ source: 'root', target: 'headings', relation: 'child' });
+    expect(graph.edges[3]).toEqual({ source: 'root', target: 'separator-1', relation: 'child' });
+    expect(graph.edges[4]).toEqual({ source: 'root', target: 'formatting', relation: 'child' });
+  });
+
+  test('subgraph skips falsy values', ({ expect }) => {
+    const showHeadings = false;
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .subgraph(
+        showHeadings &&
+          ((builder) => {
+            builder.group('headings', { label: 'Headings' }, () => {});
+          }),
+      )
+      .action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {})
+      .subgraph(undefined)
+      .subgraph(null)
+      .build();
+
+    // root + bold = 2 nodes; headings skipped.
+    expect(graph.nodes).toHaveLength(2);
+    expect(graph.edges).toHaveLength(1);
+  });
+
+  test('nodes have correct types', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {})
+      .group('headings', { label: 'Headings' }, () => {})
+      .build();
+
+    const rootNode = graph.nodes.find((node) => node.id === 'root');
+    const actionNode = graph.nodes.find((node) => node.id === 'bold');
+    const groupNode = graph.nodes.find((node) => node.id === 'headings');
+
+    expect(rootNode!.type).toBe(Node.ActionGroupType);
+    expect(actionNode!.type).toBe(Node.ActionType);
+    expect(groupNode!.type).toBe(Node.ActionGroupType);
+  });
+});

package/src/builder.ts

@@ -9,23 +9,43 @@ import type { ActionGraphProps } from './hooks';
 import { MenuSeparatorType } from './types';
 import { createMenuAction, createMenuItemGroup } from './util';
 
+/** Callback that populates an action group builder. */
+export type ActionGroupBuilderFn = (builder: ActionGroupBuilder) => void;
+
+/**
+ * Fluent builder for composing menu action graphs.
+ * Subgraph functions return a callback that receives the builder, enabling composition via partial application:
+ * ```ts
+ * const addHeadings = (state): ActionGroupBuilderFn => (builder) => {
+ *   builder.group('headings', { ... }, (group) => { ... });
+ * };
+ *
+ * MenuBuilder.make()
+ *   .subgraph(showHeadings && addHeadings(state))
+ *   .subgraph(showFormatting && addFormatting(state))
+ *   .build();
+ * ```
+ */
 export interface ActionGroupBuilder {
   /** Add an action node as a child of the current group. */
   action<P extends {} = {}>(id: string, props: P & MenuActionProperties, invoke: () => void): this;
+
   /** Add a nested action group. */
-  group<P extends {} = {}>(
-    id: string,
-    props: P & MenuItemGroupProperties,
-    cb: (builder: ActionGroupBuilder) => void,
-  ): this;
-  /** Merge pre-built nodes and edges into this builder. */
-  subgraph(subgraph: ActionGraphProps): this;
+  group<P extends {} = {}>(id: string, props: P & MenuItemGroupProperties, cb: ActionGroupBuilderFn): this;
+
+  /** Merge pre-built nodes and edges, or build a subgraph via callback scoped to the current group. Falsy values are ignored. */
+  subgraph(subgraphOrCb: ActionGraphProps | ActionGroupBuilderFn | false | null | undefined): this;
+
   /** Add a separator. */
-  separator(id?: string, variant?: 'gap' | 'line'): this;
+  separator(variant?: 'gap' | 'line'): this;
 }
 
+/** Top-level builder that creates the root group and produces the final action graph. */
 export interface MenuBuilder extends ActionGroupBuilder {
+  /** Set properties on the root menu group. May only be called once. */
   root(props: MenuItemGroupProperties): this;
+
+  /** Return the assembled action graph. */
   build(): ActionGraphProps;
 }
 
@@ -54,25 +74,28 @@ class MenuBuilderImpl implements MenuBuilder {
     return this;
   }
 
-  group<P extends {} = {}>(
-    id: string,
-    props: P & MenuItemGroupProperties,
-    cb: (builder: ActionGroupBuilder) => void,
-  ): this {
+  group<P extends {} = {}>(id: string, props: P & MenuItemGroupProperties, cb: ActionGroupBuilderFn): this {
     this._data.nodes.push(createMenuItemGroup(id, props));
     this._data.edges.push({ source: this._rootId, target: id, relation: 'child' });
     cb(new MenuBuilderImpl(this._data, id));
     return this;
   }
 
-  subgraph(subgraph: ActionGraphProps): this {
-    this._data.nodes.push(...subgraph.nodes);
-    this._data.edges.push(...subgraph.edges);
+  subgraph(subgraphOrCb: ActionGraphProps | ActionGroupBuilderFn | false | null | undefined): this {
+    if (!subgraphOrCb) {
+      return this;
+    }
+    if (typeof subgraphOrCb === 'function') {
+      subgraphOrCb(new MenuBuilderImpl(this._data, this._rootId));
+    } else {
+      this._data.nodes.push(...subgraphOrCb.nodes);
+      this._data.edges.push(...subgraphOrCb.edges);
+    }
     return this;
   }
 
-  separator(id?: string, variant: 'gap' | 'line' = 'gap'): this {
-    id ??= `separator-${++this._separatorCount}`;
+  separator(variant: 'gap' | 'line' = 'gap'): this {
+    const id = `separator-${++this._separatorCount}`;
     this._data.nodes.push({
       id,
       type: MenuSeparatorType,

package/src/components/ActionLabel.tsx

@@ -10,7 +10,8 @@ import { type TFunction, toLocalizedString, useTranslation } from '@dxos/react-u
 import { mx } from '@dxos/ui-theme';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
-import { translationKey } from '../translations';
+import { translationKey } from '#translations';
+
 import { getShortcut } from '../util';
 
 type Action = Node.Action<MenuActionProperties> | Node.ActionGroup<Omit<MenuActionProperties, 'variant'>>;

package/src/components/DropdownMenu.tsx

@@ -9,7 +9,6 @@ import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu }
 
 import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
 import { executeMenuAction } from '../util';
-
 import { ActionLabel } from './ActionLabel';
 import { type MenuScopedProps, useMenuItems, useMenuScoped } from './Menu';
 

package/src/components/{MenuItems.stories.tsx → Menu.stories.tsx}

@@ -11,10 +11,11 @@ import { Button, IconButton } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { Menu, useMenu } from '../components';
 import { type ActionGraphProps, useMenuActions } from '../hooks';
 import { createActions } from '../testing';
-import { translations } from '../translations';
 import { type MenuItem } from '../types';
 import { createMenuAction } from '../util';
 

package/src/components/Menu.test.tsx

@@ -9,7 +9,6 @@ import { afterEach, describe, test } from 'vitest';
 
 import { type MenuItem, type MenuItemsAccessor } from '../types';
 import { createMenuAction } from '../util';
-
 import { Menu, useMenu, useMenuItems } from './Menu';
 
 const TEST_CONTRIBUTOR = 'TestContributor';

package/src/components/Menu.tsx

@@ -5,7 +5,7 @@
 import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type MouseEvent, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';
+import React, { createContext, type MouseEvent, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 
 import { log } from '@dxos/log';
 import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu } from '@dxos/react-ui';
@@ -21,7 +21,6 @@ import {
   type MenuItemsMap,
 } from '../types';
 import { executeMenuAction } from '../util';
-
 import { ActionLabel } from './ActionLabel';
 import { ToolbarMenu } from './ToolbarMenu';
 
@@ -60,7 +59,7 @@ type MenuDropdownContextValue = {
   caller?: string;
 };
 
-const MenuDropdownContext = React.createContext<MenuDropdownContextValue>({
+const MenuDropdownContext = createContext<MenuDropdownContextValue>({
   closeMenu: () => {},
 });
 
@@ -200,17 +199,17 @@ const useMenu = (consumerName: string): MenuContextValue => {
 // Menu.Root
 //
 
-type MenuRootProps = PropsWithChildren<
-  Omit<MenuProviderProps, 'children'> &
-    Pick<DropdownMenuRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> & {
-      /** Identifies the component that owns this menu (passed to action handlers). */
-      caller?: string;
-    }
->;
+type MenuRootProps = MenuProviderProps &
+  Pick<DropdownMenuRootProps, 'children' | 'open' | 'defaultOpen' | 'onOpenChange'> & {
+    /** Identifies the component that owns this menu (passed to action handlers). */
+    caller?: string;
+  };
 
 /**
  * Menu context boundary.
  *
+ * NOTE: This component is headless since it's root div has `contents`.
+ *
  * Provides the menu context (action dispatch, contribution registry, icon size, etc.)
  * and an optional dropdown root for use with `Menu.Trigger` + `Menu.Content`.
  */

package/src/components/ToolbarMenu.stories.tsx

@@ -2,21 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { Menu } from '../components';
 import { type ActionGraphProps, useMenuActions } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
-import { translations } from '../translations';
 
-faker.seed(1234);
+random.seed(1234);
 
 const meta = {
   title: 'ui/react-ui-menu/ToolbarMenu',
@@ -33,18 +34,19 @@ type Story = StoryObj<typeof meta>;
 
 export const DropdownMenu: Story = {
   render: () => {
-    const actionsAtom = useMemo(() => {
+    const actions = useMemo(() => {
       const actions = createActions();
       return Atom.make<ActionGraphProps>({
         nodes: actions,
         edges: actions.map((action) => ({ source: 'root', target: action.id, relation: 'child' })),
       }).pipe(Atom.keepAlive);
     }, []);
-    useMutateActions(actionsAtom);
-    const menu = useMenuActions(actionsAtom);
+
+    useMutateActions(actions);
+    const menuActions = useMenuActions(actions);
 
     return (
-      <Menu.Root {...menu}>
+      <Menu.Root {...menuActions}>
         <Menu.Trigger asChild>
           <IconButton icon='ph--list-checks--regular' label='Options' />
         </Menu.Trigger>
@@ -56,7 +58,8 @@ export const DropdownMenu: Story = {
 
 export const Toolbar: Story = {
   render: () => {
-    const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
+    const registry = useContext(RegistryContext);
+    const nestedMenuActions = useMemo(() => createNestedActionsResolver({ registry }), [registry]);
 
     return (
       <Menu.Root {...nestedMenuActions}>
@@ -69,10 +72,10 @@ export const Toolbar: Story = {
 export const UseMenuActionsToolbar: Story = {
   render: () => {
     useMutateActions(createNestedActions);
-    const menu = useMenuActions(createNestedActions);
+    const menuActions = useMenuActions(createNestedActions);
 
     return (
-      <Menu.Root {...menu}>
+      <Menu.Root {...menuActions}>
         <Menu.Toolbar />
       </Menu.Root>
     );