@dxos/react-ui-menu 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/src/types.ts

@@ -2,51 +2,63 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node, type Action, type ActionGroup, ACTION_GROUP_TYPE } 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;
-};
+import { type Atom } from '@effect-atom/atom-react';
 
-export type MenuItemGroupProperties = {
-  label: Label;
-  icon?: string;
-  iconOnly?: boolean;
-};
+import { Node } from '@dxos/app-graph';
+import { type IconButtonProps, type ToolbarSeparatorProps } from '@dxos/react-ui';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
-export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
+export type MenuAction<P extends {} = {}> = Node.Action<P & MenuActionProperties>;
 
 export const MenuSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
 
-export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
+export type MenuSeparator = Node.Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
   type: typeof MenuSeparatorType;
 };
 
-export const isSeparator = (node: Node): node is MenuSeparator => node.type === MenuSeparatorType;
+export const isSeparator = (node: Node.Node): node is MenuSeparator => node.type === MenuSeparatorType;
 
 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 type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = Node.ActionGroup<P>;
 
-export const isMenuGroup = (node: Node): node is MenuItemGroup => node.type === ACTION_GROUP_TYPE;
+export const isMenuGroup = (node: Node.Node): node is MenuItemGroup => node.type === Node.ActionGroupType;
 
 export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
-export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
+/** Atom-family-style accessor: returns an atom of items for a given group (or root when undefined). */
+export type MenuItemsAccessor = (group?: MenuItemGroup) => Atom.Atom<MenuItem[] | null>;
+
+export type ActionExecutor = (action: MenuAction, params: Node.InvokeProps) => void;
+
+export type MenuItemsMode = 'additive' | 'replacement';
+
+export type AddMenuItemsProps = {
+  id: string;
+  mode: MenuItemsMode;
+  priority?: number;
+  items: MenuItem[];
+  groupFilter?: (group?: MenuItemGroup) => boolean;
+};
+
+export type MenuItems = Omit<AddMenuItemsProps, 'priority'> & { priority: number };
+export type MenuItemsMap = Map<string, MenuItems>;
 
 export type MenuContextValue = {
-  useGroupItems: MenuItemsResolver;
+  /** Atom-family accessor for base menu items, keyed by group (similar to Tree model). */
+  items: MenuItemsAccessor;
   iconSize: IconButtonProps['size'];
   attendableId?: string;
+  /** TODO(burdon): Remove and assume always active if attendableId is undefined. */
+  /** If true, the menu is always active regardless of attention state. */
+  alwaysActive?: boolean;
+  /** Atom holding the current set of imperatively added menu items. */
+  menuItemsAtom: Atom.Atom<MenuItemsMap>;
+  /** Imperatively add menu items to the nearest MenuProvider. */
+  addMenuItems: (props: AddMenuItemsProps) => void;
+  /** Remove previously added menu items by id. */
+  removeMenuItems: (id: string) => void;
+  /** Optional action executor. If provided, will be used instead of default execution. */
+  onAction?: ActionExecutor;
 };

package/src/util.ts

@@ -2,18 +2,31 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol, type ActionLike } from '@dxos/app-graph';
+import * as Effect from 'effect/Effect';
+
+import { Node } from '@dxos/app-graph';
+import { runAndForwardErrors } from '@dxos/effect';
+import { type MenuActionProperties, type MenuItemGroupProperties } from '@dxos/ui-types';
 import { getHostPlatform } from '@dxos/util';
 
-import {
-  type MenuAction,
-  type MenuActionProperties,
-  type MenuItemGroup,
-  type MenuItemGroupProperties,
-  type MenuSeparator,
-} from './types';
+import { type MenuAction, type MenuItemGroup, type MenuSeparator } from './types';
+
+/**
+ * Execute a menu action's Effect with its captured context.
+ * This provides the `_actionContext` layer if available.
+ */
+export const executeMenuAction = async (action: MenuAction, params: Node.InvokeProps = {}): Promise<void> => {
+  let effect = action.data(params);
 
-export const getShortcut = (action: ActionLike) => {
+  // Provide captured action context if available.
+  if (action._actionContext) {
+    effect = effect.pipe(Effect.provide(action._actionContext));
+  }
+
+  await runAndForwardErrors(effect);
+};
+
+export const getShortcut = (action: Node.ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
     ? action.properties.keyBinding
     : action.properties?.keyBinding?.[getHostPlatform()];
@@ -28,9 +41,9 @@ export const createMenuAction = <P extends {} = {}>(
 ) =>
   ({
     id,
-    type: ACTION_TYPE,
+    type: Node.ActionType,
     properties,
-    data: invoke,
+    data: () => Effect.sync(invoke),
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <
@@ -41,9 +54,9 @@ export const createMenuItemGroup = <
 ) =>
   ({
     id,
-    type: ACTION_GROUP_TYPE,
+    type: Node.ActionGroupType,
     properties,
-    data: actionGroupSymbol,
+    data: Node.actionGroupSymbol,
   }) satisfies MenuItemGroup;
 
 export const createGapSeparator = (id: string = 'gap', source: string = 'root') => ({
@@ -55,7 +68,13 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [
+    {
+      source,
+      target: id,
+      relation: 'child' as const,
+    },
+  ],
 });
 
 export const createLineSeparator = (id: string = 'line', source: string = 'root') => ({
@@ -67,5 +86,5 @@ export const createLineSeparator = (id: string = 'line', source: string = 'root'
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [{ source, target: id, relation: 'child' as const }],
 });

package/dist/lib/node/index.cjs

@@ -1,506 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  DropdownMenu: () => DropdownMenu,
-  MenuProvider: () => MenuProvider,
-  MenuSeparatorType: () => MenuSeparatorType,
-  ToolbarMenu: () => ToolbarMenu,
-  createGapSeparator: () => createGapSeparator,
-  createLineSeparator: () => createLineSeparator,
-  createMenuAction: () => createMenuAction,
-  createMenuItemGroup: () => createMenuItemGroup,
-  createMenuScope: () => createMenuScope,
-  isMenuGroup: () => isMenuGroup,
-  isSeparator: () => isSeparator,
-  menuContextDefaults: () => menuContextDefaults,
-  rxFromSignal: () => import_app_graph.rxFromSignal,
-  useMenu: () => useMenu,
-  useMenuActions: () => useMenuActions,
-  useMenuItems: () => useMenuItems
-});
-module.exports = __toCommonJS(node_exports);
-var import_app_graph = require("@dxos/app-graph");
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react2 = __toESM(require("react"));
-var import_keyboard = require("@dxos/keyboard");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_app_graph2 = require("@dxos/app-graph");
-var import_util = require("@dxos/util");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_react_context = require("@radix-ui/react-context");
-var import_react3 = __toESM(require("react"));
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-var import_react4 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
-var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_app_graph3 = require("@dxos/app-graph");
-var import_rx_react = require("@effect-rx/rx-react");
-var import_react5 = require("react");
-var import_app_graph4 = require("@dxos/app-graph");
-var translationKey = "menus";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
-  }
-];
-var getShortcut = (action) => {
-  return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[(0, import_util.getHostPlatform)()];
-};
-var createMenuAction = (id, invoke, properties) => ({
-  id,
-  type: import_app_graph2.ACTION_TYPE,
-  properties,
-  data: invoke
-});
-var createMenuItemGroup = (id, properties) => ({
-  id,
-  type: import_app_graph2.ACTION_GROUP_TYPE,
-  properties,
-  data: import_app_graph2.actionGroupSymbol
-});
-var createGapSeparator = (id = "gap", source = "root") => ({
-  nodes: [
-    {
-      id,
-      type: "@dxos/react-ui-toolbar/separator",
-      properties: {
-        variant: "gap"
-      },
-      data: void 0
-    }
-  ],
-  edges: [
-    {
-      source,
-      target: id
-    }
-  ]
-});
-var createLineSeparator = (id = "line", source = "root") => ({
-  nodes: [
-    {
-      id,
-      type: "@dxos/react-ui-toolbar/separator",
-      properties: {
-        variant: "line"
-      },
-      data: void 0
-    }
-  ],
-  edges: [
-    {
-      source,
-      target: id
-    }
-  ]
-});
-var ActionLabel = ({ action }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const shortcut = getShortcut(action);
-    const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("span", {
-      className: "grow truncate"
-    }, (0, import_react_ui2.toLocalizedString)(action.properties.label, t)), shortcut && /* @__PURE__ */ import_react2.default.createElement("span", {
-      className: (0, import_react_ui_theme.mx)("shrink-0", import_react_ui_theme.descriptionText)
-    }, (0, import_keyboard.keySymbols)(shortcut).join("")));
-  } finally {
-    _effect.f();
-  }
-};
-var actionLabel = (action, t) => {
-  const shortcut = getShortcut(action);
-  return `${(0, import_react_ui2.toLocalizedString)(action.properties.label, t)}${shortcut ? ` (${(0, import_keyboard.keySymbols)(shortcut).join("")})` : ""}`;
-};
-var MENU_NAME = "GraphMenu";
-var [createMenuContext, createMenuScope] = (0, import_react_context.createContextScope)(MENU_NAME, []);
-var [MenuContextProvider, useMenu] = createMenuContext(MENU_NAME);
-var menuContextDefaults = {
-  iconSize: 5,
-  useGroupItems: () => null
-};
-var useMenuScope = createMenuScope();
-var MenuProvider = ({ children, useGroupItems = menuContextDefaults.useGroupItems, iconSize = menuContextDefaults.iconSize, attendableId }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { scope } = useMenuScope(void 0);
-    return /* @__PURE__ */ import_react3.default.createElement(MenuContextProvider, {
-      useGroupItems,
-      iconSize,
-      attendableId,
-      scope
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __menuScope) => {
-  const { useGroupItems } = useMenu(consumerName, __menuScope);
-  const groupItems = useGroupItems(group);
-  return (0, import_react3.useMemo)(() => propsItems ?? groupItems ?? void 0, [
-    propsItems,
-    groupItems
-  ]);
-};
-var DropdownMenuItem = ({ item, onClick, __menuScope }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const action = item;
-    const handleClick = (0, import_react.useCallback)((event) => onClick(action, event), [
-      action,
-      onClick
-    ]);
-    const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
-    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Item, {
-      onClick: handleClick,
-      classNames: "gap-2",
-      disabled: action.properties?.disabled,
-      ...action.properties?.testId && {
-        "data-testid": action.properties.testId
-      }
-    }, action.properties?.icon && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
-      icon: action.properties.icon,
-      size: iconSize
-    }), /* @__PURE__ */ import_react.default.createElement(ActionLabel, {
-      action
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, caller, children, __menuScope, ...naturalProps }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: open,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange
-    });
-    const handleActionClick = (0, import_react.useCallback)((action, event) => {
-      if (action.properties?.disabled) {
-        return;
-      }
-      event.stopPropagation();
-      setOptionsMenuOpen(false);
-      void action.data?.({
-        parent: group,
-        caller
-      });
-    }, [
-      group,
-      caller
-    ]);
-    const items = useMenuItems(group, propsItems);
-    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Root, {
-      open: optionsMenuOpen,
-      onOpenChange: setOptionsMenuOpen,
-      ...naturalProps
-    }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ import_react.default.createElement(DropdownMenuItem, {
-      key: item.id,
-      item,
-      onClick: handleActionClick
-    }))), /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-var DropdownMenu = {
-  Root: DropdownMenuRoot,
-  Trigger: import_react_ui.DropdownMenu.Trigger,
-  VirtualTrigger: import_react_ui.DropdownMenu.VirtualTrigger
-};
-var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
-var isSeparator = (node) => node.type === MenuSeparatorType;
-var isMenuGroup = (node) => node.type === import_app_graph3.ACTION_GROUP_TYPE;
-var ActionToolbarItem = ({ action, __menuScope }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { iconSize } = useMenu("ActionToolbarItem", __menuScope);
-    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-    const handleClick = (0, import_react4.useCallback)(() => action.data?.(), [
-      action
-    ]);
-    const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-    const Root = icon ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
-    const rootProps = icon ? {
-      icon,
-      size: iconSize,
-      iconOnly,
-      label: actionLabel(action, t)
-    } : {
-      children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-        action
-      })
-    };
-    return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
-      key: action.id,
-      disabled,
-      onClick: handleClick,
-      variant: "ghost",
-      ...testId && {
-        "data-testid": testId
-      },
-      ...rootProps,
-      classNames
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { iconOnly, disabled, testId } = group.properties;
-    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-    const { iconSize } = useMenu("DropdownMenuToolbarItem", __menuScope);
-    const items = useMenuItems(group, propsItems, "DropdownMenuToolbarItem", __menuScope);
-    const activeItem = items?.find((item) => !!item.properties.checked);
-    const icon = group.properties.applyActive && // TODO(thure): Handle other menu item types.
-    activeItem?.properties.icon || group.properties.icon;
-    const Root = icon ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
-    const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
-    const rootProps = icon ? {
-      icon,
-      size: iconSize,
-      iconOnly,
-      label: actionLabel(labelAction, t),
-      caretDown: true
-    } : {
-      children: /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-        action: labelAction
-      }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
-        size: 3,
-        icon: "ph--caret-down--bold",
-        classNames: "mis-1"
-      }))
-    };
-    return /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Root, {
-      group,
-      items
-    }, /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ import_react4.default.createElement(Root, {
-      variant: "ghost",
-      disabled,
-      ...rootProps,
-      ...testId && {
-        "data-testid": testId
-      }
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var ToggleGroupItem = ({ group, action, __menuScope }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { iconSize } = useMenu("ToggleGroupItem", __menuScope);
-    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-    const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-    const handleClick = (0, import_react4.useCallback)(() => action.data?.({
-      parent: group
-    }), [
-      action,
-      group
-    ]);
-    const Root = icon ? import_react_ui3.Toolbar.ToggleGroupIconItem : import_react_ui3.Toolbar.ToggleGroupItem;
-    const rootProps = icon ? {
-      icon,
-      size: iconSize,
-      iconOnly,
-      label: actionLabel(action, t)
-    } : {
-      children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-        action
-      })
-    };
-    return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
-      key: action.id,
-      value: action.id,
-      disabled,
-      onClick: handleClick,
-      variant: "ghost",
-      ...testId && {
-        "data-testid": testId
-      },
-      ...rootProps,
-      classNames
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ToggleGroupToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    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
-      /* @__PURE__ */ import_react4.default.createElement(
-        import_react_ui3.Toolbar.ToggleGroup,
-        {
-          type: selectCardinality,
-          value
-        },
-        // TODO(thure): Handle other menu item types.
-        items.map((action) => /* @__PURE__ */ import_react4.default.createElement(ToggleGroupItem, {
-          key: action.id,
-          group,
-          action
-        }))
-      )
-    );
-  } finally {
-    _effect.f();
-  }
-};
-var ToolbarMenu = ({ __menuScope, classNames, textBlockWidth: wrapContents, ...props }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
-    const { attendableId } = useMenu("ToolbarMenu", __menuScope);
-    const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
-    const InnerRoot = wrapContents ? "div" : import_react4.Fragment;
-    const innerRootProps = wrapContents ? {
-      role: "none",
-      className: (0, import_react_ui_theme2.mx)(import_react_ui_theme2.textBlockWidth, import_react_ui_theme2.toolbarLayout)
-    } : {};
-    return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Root, {
-      ...props,
-      layoutManaged: wrapContents,
-      classNames: [
-        attendableId && !hasAttention && "*:opacity-20 !bg-transparent",
-        classNames
-      ]
-    }, /* @__PURE__ */ import_react4.default.createElement(InnerRoot, innerRootProps, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.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`.
-      /* @__PURE__ */ import_react4.default.createElement(DropdownMenuToolbarItem, {
-        key: item.id,
-        group: item
-      })
-    ) : (
-      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-      /* @__PURE__ */ import_react4.default.createElement(ToggleGroupToolbarItem, {
-        key: item.id,
-        group: item
-      })
-    ) : (
-      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-      /* @__PURE__ */ import_react4.default.createElement(ActionToolbarItem, {
-        key: item.id,
-        action: item
-      })
-    ))));
-  } finally {
-    _effect.f();
-  }
-};
-var edgesArrayToRecord = (edges) => {
-  return Object.fromEntries(Object.entries(edges.reduce((acc, { 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;
-  }, {})));
-};
-var useMenuActions = (props) => {
-  const registry = (0, import_react5.useContext)(import_rx_react.RegistryContext);
-  const menuGraphProps = (0, import_rx_react.useRxValue)(props);
-  const [graph] = (0, import_react5.useState)(new import_app_graph4.Graph({
-    registry,
-    nodes: menuGraphProps.nodes,
-    edges: edgesArrayToRecord(menuGraphProps.edges)
-  }));
-  (0, import_react5.useEffect)(() => {
-    graph.addNodes(menuGraphProps.nodes);
-    graph.addEdges(menuGraphProps.edges);
-  }, [
-    menuGraphProps
-  ]);
-  const useGroupItems = (0, import_react5.useCallback)((sourceNode) => {
-    const items = (0, import_rx_react.useRxValue)(graph.connections(sourceNode?.id || import_app_graph4.ROOT_ID));
-    return items;
-  }, [
-    graph
-  ]);
-  return {
-    useGroupItems
-  };
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DropdownMenu,
-  MenuProvider,
-  MenuSeparatorType,
-  ToolbarMenu,
-  createGapSeparator,
-  createLineSeparator,
-  createMenuAction,
-  createMenuItemGroup,
-  createMenuScope,
-  isMenuGroup,
-  isSeparator,
-  menuContextDefaults,
-  rxFromSignal,
-  useMenu,
-  useMenuActions,
-  useMenuItems
-});
-//# sourceMappingURL=index.cjs.map