@dxos/react-ui-menu 0.7.5-feature-compute.4d9d99a

package/dist/types/src/defs.d.ts

@@ -0,0 +1,45 @@
+import { type Node, type Action, type ActionGroup } from '@dxos/app-graph';
+import { type ToolbarSeparatorProps, type Label, type IconButtonProps, type ClassNameValue } from '@dxos/react-ui';
+export type MenuActionProperties = {
+    label: Label;
+    icon?: string;
+    value?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    iconOnly?: boolean;
+    testId?: string;
+    variant?: 'action' | 'toggle';
+    checked?: boolean;
+    classNames?: ClassNameValue;
+};
+export type MenuItemGroupProperties = {
+    label: Label;
+    icon?: string;
+    iconOnly?: boolean;
+};
+export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
+export type MenuActionHandler<A extends Node = MenuAction> = (action: A) => void;
+export declare const MenuSeparatorType: "@dxos/react-ui-toolbar/separator";
+export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
+    type: typeof MenuSeparatorType;
+};
+export declare const isSeparator: (node: Node) => node is MenuSeparator;
+export type MenuSingleSelectActionGroup = {
+    selectCardinality: 'single';
+    value: string;
+};
+export type MenuMultipleSelectActionGroup = {
+    selectCardinality: 'multiple';
+    value: string[];
+};
+export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = ActionGroup<P>;
+export declare const isMenuGroup: (node: Node) => node is MenuItemGroup;
+export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
+export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
+export type MenuContextValue<A extends Node = MenuAction> = {
+    resolveGroupItems: MenuItemsResolver;
+    iconSize: IconButtonProps['size'];
+    onAction: MenuActionHandler<A>;
+    attendableId?: string;
+};
+//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,WAAW,EAAqB,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEnH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,MAAM,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;AAEjF,eAAO,MAAM,iBAAiB,EAAG,kCAA2C,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,GAAG;IAChF,IAAI,EAAE,OAAO,iBAAiB,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,2BAA2B,GAAG;IAAE,iBAAiB,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACzF,MAAM,MAAM,6BAA6B,GAAG;IAAE,iBAAiB,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE/F,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAEhG,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,QAAQ,EAAE,GAAG,IAAI,CAAC;AAE7E,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI;IAC1D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/types/src/hooks.d.ts

@@ -0,0 +1,17 @@
+import { type NodeArg } from '@dxos/app-graph';
+import { type MenuItem, type MenuItemGroup } from './defs';
+type Edge = {
+    source: string;
+    target: string;
+};
+export type ActionGraphNodes = NodeArg<any>[];
+export type ActionGraphEdges = Edge[];
+export type ActionGraphProps = {
+    nodes: ActionGraphNodes;
+    edges: ActionGraphEdges;
+};
+export declare const useMenuActions: (actionCreator: () => ActionGraphProps) => {
+    resolveGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[] | null;
+};
+export {};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/types/src/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.ts"],"names":[],"mappings":"AAOA,OAAO,EAAS,KAAK,OAAO,EAAa,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D,KAAK,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA6B/C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,EAAE,CAAC;AACtC,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEpF,eAAO,MAAM,cAAc,kBAAmB,MAAM,gBAAgB;qCAgBnD,aAAa;CAW7B,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './defs';
+export * from './hooks';
+export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC"}

package/dist/types/src/testing/Menus.stories.d.ts

@@ -0,0 +1,25 @@
+import '@dxos-theme';
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: ({ __menuScope, classNames, ...props }: import("../components").MenuScopedProps<import("../components").ToolbarMenuProps>) => React.JSX.Element;
+    decorators: import("@storybook/react/*").Decorator[];
+    parameters: {
+        translations: readonly [{
+            readonly 'en-US': {
+                readonly menus: {};
+            };
+        }];
+    };
+};
+export default _default;
+export declare const DropdownMenu: {
+    render: () => React.JSX.Element;
+};
+export declare const Toolbar: {
+    render: () => React.JSX.Element;
+};
+export declare const UseMenuActionsToolbar: {
+    render: () => React.JSX.Element;
+};
+//# sourceMappingURL=Menus.stories.d.ts.map

package/dist/types/src/testing/Menus.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menus.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/Menus.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAsB,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAc3C,wBAKE;AAOF,eAAO,MAAM,YAAY;;CAcxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAQnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;CASjC,CAAC"}

package/dist/types/src/testing/index.d.ts

@@ -0,0 +1,26 @@
+import { type Action, ACTION_TYPE, ACTION_GROUP_TYPE } from '@dxos/app-graph';
+import { type MenuAction, type MenuItemGroup, type MenuItem } from '../defs';
+import { type ActionGraphProps } from '../hooks';
+export type CreateActionsParams = Partial<{
+    type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
+    callback: () => void;
+    count: number;
+}>;
+export declare const createActions: (params?: CreateActionsParams) => import("@dxos/live-object").ReactiveObject<{
+    id: string;
+    type: "dxos.org/type/GraphActionGroup" | "dxos.org/type/GraphAction";
+    data: symbol | (() => void);
+    properties: {
+        variant?: string | undefined;
+        label: string;
+        icon: string;
+        disabled: boolean;
+    };
+}>[];
+export declare const createNestedActions: () => ActionGraphProps;
+export declare const createNestedActionsResolver: (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
+    resolveGroupItems: (groupNode?: MenuItemGroup) => MenuItem[] | null;
+};
+export declare const mutateActionsOnInterval: (actions: Action[]) => NodeJS.Timeout;
+export declare const useMutateActions: (actions: MenuAction[]) => void;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAuB,WAAW,EAAE,iBAAiB,EAAqB,MAAM,iBAAiB,CAAC;AAKtH,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,WAAW,GAAG,OAAO,iBAAiB,CAAC;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAqBH,eAAO,MAAM,aAAa,YAAa,mBAAmB;;;0BAvBxC,IAAI;;;;;;;IAyCrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAY/B,CAAC;AAEF,eAAO,MAAM,2BAA2B,iBAAkB,mBAAmB,WAAW,mBAAmB;oCAgBlE,aAAa,KACE,QAAQ,EAAE,GAAG,IAAI;CAExE,CAAC;AAEF,eAAO,MAAM,uBAAuB,YAAa,MAAM,EAAE,mBAUxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,UAAU,EAAE,SAI9C,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,8 @@
+export declare const translationKey = "menus";
+declare const _default: readonly [{
+    readonly 'en-US': {
+        readonly menus: {};
+    };
+}];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;AAEtC,wBAMW"}

package/dist/types/src/util.d.ts

@@ -0,0 +1,45 @@
+import { actionGroupSymbol, type ActionLike } from '@dxos/app-graph';
+import { type MenuActionProperties, type MenuItemGroupProperties } from './defs';
+export declare const getShortcut: (action: ActionLike) => any;
+export declare const fallbackIcon = "ph--placeholder--regular";
+export declare const createMenuAction: <P extends {} = {}>(id: string, properties: P & MenuActionProperties) => {
+    id: string;
+    type: string;
+    properties: P & MenuActionProperties;
+    data: () => void;
+};
+export declare const createMenuItemGroup: <P extends MenuItemGroupProperties = MenuItemGroupProperties & Partial<MenuActionProperties>>(id: string, properties: P) => {
+    id: string;
+    type: string;
+    properties: P;
+    data: typeof actionGroupSymbol;
+};
+export declare const createGapSeparator: (id?: string, source?: string) => {
+    nodes: {
+        id: string;
+        type: "@dxos/react-ui-toolbar/separator";
+        properties: {
+            variant: "gap";
+        };
+        data: never;
+    }[];
+    edges: {
+        source: string;
+        target: string;
+    }[];
+};
+export declare const createLineSeparator: (id?: string, source?: string) => {
+    nodes: {
+        id: string;
+        type: "@dxos/react-ui-toolbar/separator";
+        properties: {
+            variant: "line";
+        };
+        data: never;
+    }[];
+    edges: {
+        source: string;
+        target: string;
+    }[];
+};
+//# sourceMappingURL=util.d.ts.map

package/dist/types/src/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkC,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGrG,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,uBAAuB,EAE7B,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,WAAW,WAAY,UAAU,QAI7C,CAAC;AAEF,eAAO,MAAM,YAAY,6BAA6B,CAAC;AAMvD,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,EAAE,WAAW,MAAM,cAAc,CAAC,GAAG,oBAAoB;;;;;CAM3E,CAAC;AAE1B,eAAO,MAAM,mBAAmB,GAC9B,CAAC,SAAS,uBAAuB,gEAE7B,MAAM,cACE,CAAC;;;;;CAOa,CAAC;AAE7B,eAAO,MAAM,kBAAkB,QAAQ,MAAM,WAAkB,MAAM;;;;;;;cAM5C,KAAK;;;;;;CAI5B,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAAQ,MAAM,WAAmB,MAAM;;;;;;;cAM9C,KAAK;;;;;;CAI5B,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.2"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@dxos/react-ui-menu",
+  "version": "0.7.5-feature-compute.4d9d99a",
+  "description": "Components for facilitating reactive and consistent menus.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact/signals-react": "^1.3.8",
+    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@dxos/app-graph": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/react-ui-attention": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/keyboard": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/util": "0.7.5-feature-compute.4d9d99a"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/live-object": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/random": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/react-ui": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/storybook-utils": "0.7.5-feature-compute.4d9d99a"
+  },
+  "peerDependencies": {
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.7.5-feature-compute.4d9d99a",
+    "@dxos/react-ui": "0.7.5-feature-compute.4d9d99a"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/ActionLabel.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Action, type ActionGroup } from '@dxos/app-graph';
+import { keySymbols } from '@dxos/keyboard';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { mx, descriptionText } from '@dxos/react-ui-theme';
+
+import { type MenuActionProperties } from '../defs';
+import { translationKey } from '../translations';
+import { getShortcut } from '../util';
+
+export const ActionLabel = ({
+  action,
+}: {
+  action: Action<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
+}) => {
+  const shortcut = getShortcut(action);
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <>
+      <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
+      {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
+    </>
+  );
+};

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,112 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type MouseEvent, type MutableRefObject, useCallback } from 'react';
+
+import { DropdownMenu as NaturalDropdownMenu, Icon, type DropdownMenuRootProps } from '@dxos/react-ui';
+
+import { ActionLabel } from './ActionLabel';
+import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { type MenuAction, type MenuItem, type MenuItemGroup } from '../defs';
+
+export type DropdownMenuProps = DropdownMenuRootProps & {
+  group?: MenuItemGroup;
+  items?: MenuItem[];
+  suppressNextTooltip?: MutableRefObject<boolean>;
+};
+
+const DropdownMenuItem = ({
+  item,
+  onClick,
+  __menuScope,
+}: MenuScopedProps<{
+  item: MenuItem;
+  onClick: (action: MenuAction, event: MouseEvent) => void;
+}>) => {
+  // TODO(thure): handle other items.
+  const action = item as MenuAction;
+  const handleClick = useCallback((event: MouseEvent) => onClick(action, event), [action, onClick]);
+  const { iconSize } = useMenu('DropdownMenuItem', __menuScope);
+  return (
+    <NaturalDropdownMenu.Item
+      onClick={handleClick}
+      classNames='gap-2'
+      disabled={action.properties?.disabled}
+      {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+    >
+      {action.properties?.icon && <Icon icon={action.properties!.icon} size={iconSize} />}
+      <ActionLabel action={action} />
+    </NaturalDropdownMenu.Item>
+  );
+};
+
+const DropdownMenuRoot = ({
+  items: propsItems,
+  group,
+  open,
+  defaultOpen,
+  onOpenChange,
+  suppressNextTooltip,
+  children,
+  __menuScope,
+  ...naturalProps
+}: MenuScopedProps<DropdownMenuProps>) => {
+  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen,
+    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?
+      if (suppressNextTooltip) {
+        suppressNextTooltip.current = true;
+      }
+      setOptionsMenuOpen(false);
+      onAction?.(action);
+    },
+    [onAction],
+  );
+
+  const items = useMenuItems(group, propsItems);
+
+  return (
+    <NaturalDropdownMenu.Root
+      {...{
+        open: optionsMenuOpen,
+        onOpenChange: (nextOpen: boolean) => {
+          if (!nextOpen && suppressNextTooltip) {
+            suppressNextTooltip.current = true;
+          }
+          return setOptionsMenuOpen(nextOpen);
+        },
+      }}
+      {...naturalProps}
+    >
+      {children}
+      <NaturalDropdownMenu.Portal>
+        <NaturalDropdownMenu.Content>
+          <NaturalDropdownMenu.Viewport>
+            {items?.map((item) => <DropdownMenuItem key={item.id} item={item} onClick={handleActionClick} />)}
+          </NaturalDropdownMenu.Viewport>
+          <NaturalDropdownMenu.Arrow />
+        </NaturalDropdownMenu.Content>
+      </NaturalDropdownMenu.Portal>
+    </NaturalDropdownMenu.Root>
+  );
+};
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: NaturalDropdownMenu.Trigger,
+  VirtualTrigger: NaturalDropdownMenu.VirtualTrigger,
+};

package/src/components/MenuContext.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useMemo } from 'react';
+
+import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../defs';
+
+export type MenuScopedProps<P> = P & { __menuScope?: Scope };
+
+const MENU_NAME = 'GraphMenu';
+
+const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
+
+const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
+
+export const menuContextDefaults: MenuContextValue = {
+  iconSize: 5,
+  onAction: () => {},
+  resolveGroupItems: () => null,
+};
+
+const useMenuScope = createMenuScope();
+
+const MenuProvider = ({
+  children,
+  resolveGroupItems = menuContextDefaults.resolveGroupItems,
+  onAction = menuContextDefaults.onAction,
+  iconSize = menuContextDefaults.iconSize,
+  attendableId,
+}: PropsWithChildren<Partial<MenuContextValue>>) => {
+  const { scope } = useMenuScope(undefined);
+  return (
+    <MenuContextProvider
+      resolveGroupItems={resolveGroupItems}
+      onAction={onAction}
+      iconSize={iconSize}
+      attendableId={attendableId}
+      scope={scope}
+    >
+      {children}
+    </MenuContextProvider>
+  );
+};
+
+export const useMenuItems = (
+  group?: MenuItemGroup,
+  propsItems?: MenuItem[],
+  consumerName: string = 'useMenuItemConsumer',
+  __menuScope?: Scope,
+) => {
+  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
+  return useMemo(() => propsItems ?? resolveGroupItems?.(group) ?? undefined, [propsItems, group, resolveGroupItems]);
+};
+
+export { useMenu, createMenuScope, MenuProvider };

package/src/components/ToolbarMenu.tsx

@@ -0,0 +1,185 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { Icon, type IconButtonProps, Toolbar as NaturalToolbar, type ToolbarRootProps } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+
+import { ActionLabel } from './ActionLabel';
+import { DropdownMenu } from './DropdownMenu';
+import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import {
+  type MenuAction,
+  type MenuItem,
+  isMenuGroup,
+  isSeparator,
+  type MenuItemGroup,
+  type MenuActionProperties,
+  type MenuMultipleSelectActionGroup,
+  type MenuSingleSelectActionGroup,
+} from '../defs';
+
+export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
+  variant: 'dropdownMenu';
+  icon: string;
+  applyActive?: boolean;
+};
+
+export type ToolbarMenuToggleGroupActionGroup = Omit<MenuActionProperties, 'variant'> & {
+  variant: 'toggleGroup';
+};
+
+export type ToolbarMenuActionGroupProperties = (
+  | ToolbarMenuDropdownMenuActionGroup
+  | ToolbarMenuToggleGroupActionGroup
+) &
+  (MenuSingleSelectActionGroup | MenuMultipleSelectActionGroup);
+
+export type ToolbarMenuProps = ToolbarRootProps;
+
+export type ToolbarMenuActionGroupProps = {
+  group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
+  items?: MenuItem[];
+};
+
+const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { onAction, iconSize } = useMenu('ActionToolbarItem', __menuScope);
+  const handleClick = useCallback(() => {
+    onAction?.(action);
+  }, [action, onAction]);
+  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={action} /> }
+    : { children: <ActionLabel action={action} /> };
+  return hidden ? null : (
+    <Root
+      key={action.id}
+      disabled={disabled}
+      onClick={handleClick}
+      variant='ghost'
+      {...(testId && { 'data-testid': testId })}
+      {...(rootProps as IconButtonProps)}
+      classNames={classNames}
+    />
+  );
+};
+
+const DropdownMenuToolbarItem = ({
+  group,
+  items: propsItems,
+  __menuScope,
+}: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
+  const { iconOnly, disabled, testId } = group.properties;
+  const suppressNextTooltip = useRef(false);
+  const { iconSize } = useMenu('DropdownMenuToolbarItem', __menuScope);
+  const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
+  const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
+  const icon =
+    ((group.properties as any).applyActive &&
+      // TODO(thure): Handle other menu item types.
+      (activeItem as MenuAction)?.properties.icon) ||
+    group.properties.icon;
+  const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
+  const label = (
+    <ActionLabel action={(group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group} />
+  );
+  const rootProps = icon
+    ? { icon, size: iconSize, iconOnly, label, caretDown: true, suppressNextTooltip }
+    : {
+        children: (
+          <>
+            {label}
+            <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
+          </>
+        ),
+      };
+  return (
+    <DropdownMenu.Root group={group} items={items} suppressNextTooltip={suppressNextTooltip}>
+      <DropdownMenu.Trigger asChild>
+        <Root
+          variant='ghost'
+          disabled={disabled}
+          {...(rootProps as IconButtonProps)}
+          {...(testId && { 'data-testid': testId })}
+        />
+      </DropdownMenu.Trigger>
+    </DropdownMenu.Root>
+  );
+};
+
+const ToggleGroupItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const handleClick = useCallback(() => {
+    onAction?.(action);
+  }, [action, onAction]);
+  const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
+  const rootProps = icon
+    ? { icon, size: iconSize, iconOnly, label: <ActionLabel action={action} /> }
+    : { children: <ActionLabel action={action} /> };
+  return hidden ? null : (
+    <Root
+      key={action.id}
+      value={action.id as any}
+      disabled={disabled}
+      onClick={handleClick}
+      variant='ghost'
+      {...(testId && { 'data-testid': testId })}
+      {...(rootProps as IconButtonProps)}
+      classNames={classNames}
+    />
+  );
+};
+
+const ToggleGroupToolbarItem = ({
+  group,
+  items: propsItems,
+  __menuScope,
+}: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
+  const items = useMenuItems(group, propsItems, 'ToggleGroupToolbarItem', __menuScope);
+  const { selectCardinality, value } = group.properties;
+  return (
+    // TODO(thure): The type here is difficult to manage, what do?
+    // @ts-ignore
+    <NaturalToolbar.ToggleGroup type={selectCardinality} value={value}>
+      {
+        // TODO(thure): Handle other menu item types.
+        (items as MenuAction[]).map((action) => (
+          <ToggleGroupItem key={action.id} action={action} />
+        ))
+      }
+    </NaturalToolbar.ToggleGroup>
+  );
+};
+
+export const ToolbarMenu = ({ __menuScope, classNames, ...props }: MenuScopedProps<ToolbarMenuProps>) => {
+  const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
+  const { attendableId } = useMenu('ToolbarMenu', __menuScope);
+  const { hasAttention } = useAttention(attendableId);
+  return (
+    <NaturalToolbar.Root
+      {...props}
+      classNames={['p-0 pointer-fine:p-1 attention-surface', !hasAttention && 'opacity-20', classNames]}
+    >
+      {items?.map((item: MenuItem, i: number) =>
+        isSeparator(item) ? (
+          <NaturalToolbar.Separator key={i} variant={item.properties.variant} />
+        ) : isMenuGroup(item) ? (
+          item.properties.variant === 'dropdownMenu' ? (
+            // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+            <DropdownMenuToolbarItem key={item.id} group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />
+          ) : (
+            // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+            <ToggleGroupToolbarItem key={item.id} group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />
+          )
+        ) : (
+          // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+          <ActionToolbarItem key={item.id} action={item as MenuAction} />
+        ),
+      )}
+    </NaturalToolbar.Root>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './DropdownMenu';
+export * from './ToolbarMenu';
+export * from './MenuContext';