@dxos/react-ui-menu 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/dist/lib/browser/index.mjs

@@ -1,46 +1,37 @@
-// src/index.ts
-import { rxFromSignal } from "@dxos/app-graph";
-
-// src/components/DropdownMenu.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React3, { useCallback } from "react";
-import { Icon, DropdownMenu as NaturalDropdownMenu } from "@dxos/react-ui";
-
-// src/components/ActionLabel.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { keySymbols } from "@dxos/keyboard";
-import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { descriptionText, mx } from "@dxos/react-ui-theme";
-
-// src/translations.ts
-var translationKey = "react-ui-menu";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
-  }
-];
+// src/components/Menu.tsx
+import { Atom, RegistryContext, useAtomValue } from "@effect-atom/atom-react";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React4, { createContext, useCallback as useCallback3, useContext, useMemo } from "react";
+import { log } from "@dxos/log";
+import { Icon as Icon3, DropdownMenu as NaturalDropdownMenu2 } from "@dxos/react-ui";
 
 // src/util.ts
-import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol } from "@dxos/app-graph";
+import * as Effect from "effect/Effect";
+import { Node } from "@dxos/app-graph";
+import { runAndForwardErrors } from "@dxos/effect";
 import { getHostPlatform } from "@dxos/util";
+var executeMenuAction = async (action, params = {}) => {
+  let effect = action.data(params);
+  if (action._actionContext) {
+    effect = effect.pipe(Effect.provide(action._actionContext));
+  }
+  await runAndForwardErrors(effect);
+};
 var getShortcut = (action) => {
   return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[getHostPlatform()];
 };
 var createMenuAction = (id, invoke, properties) => ({
   id,
-  type: ACTION_TYPE,
+  type: Node.ActionType,
   properties,
-  data: invoke
+  data: () => Effect.sync(invoke)
 });
 var createMenuItemGroup = (id, properties) => ({
   id,
-  type: ACTION_GROUP_TYPE,
+  type: Node.ActionGroupType,
   properties,
-  data: actionGroupSymbol
+  data: Node.actionGroupSymbol
 });
 var createGapSeparator = (id = "gap", source = "root") => ({
   nodes: [
@@ -56,7 +47,8 @@ var createGapSeparator = (id = "gap", source = "root") => ({
   edges: [
     {
       source,
-      target: id
+      target: id,
+      relation: "child"
     }
   ]
 });
@@ -74,128 +66,119 @@ var createLineSeparator = (id = "line", source = "root") => ({
   edges: [
     {
       source,
-      target: id
+      target: id,
+      relation: "child"
     }
   ]
 });
 
 // src/components/ActionLabel.tsx
-var ActionLabel = ({ action }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
-      className: "grow truncate"
-    }, toLocalizedString(action.properties.label, t)), shortcut && /* @__PURE__ */ React.createElement("span", {
-      className: mx("shrink-0", descriptionText)
-    }, keySymbols(shortcut).join("")));
-  } finally {
-    _effect.f();
+import React from "react";
+import { keySymbols } from "@dxos/keyboard";
+import { toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-menu";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {}
+    }
   }
+];
+
+// src/components/ActionLabel.tsx
+var ActionLabel = ({ action }) => {
+  const { t } = useTranslation(translationKey);
+  const shortcut = getShortcut(action);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+    className: "grow truncate"
+  }, toLocalizedString(action.properties.label, t)), shortcut && /* @__PURE__ */ React.createElement("span", {
+    className: mx("shrink-0", "text-description")
+  }, keySymbols(shortcut).join("")));
 };
 var actionLabel = (action, t) => {
   const shortcut = getShortcut(action);
   return `${toLocalizedString(action.properties.label, t)}${shortcut ? ` (${keySymbols(shortcut).join("")})` : ""}`;
 };
 
-// src/components/MenuContext.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import { createContextScope } from "@radix-ui/react-context";
-import React2, { useMemo } from "react";
-var MENU_NAME = "GraphMenu";
-var [createMenuContext, createMenuScope] = 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 = _useSignals2();
-  try {
-    const { scope } = useMenuScope(void 0);
-    return /* @__PURE__ */ React2.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 useMemo(() => propsItems ?? groupItems ?? void 0, [
-    propsItems,
-    groupItems
-  ]);
-};
+// src/components/ToolbarMenu.tsx
+import React3, { useCallback as useCallback2 } from "react";
+import { Icon as Icon2, Toolbar as NaturalToolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { composable, composableProps } from "@dxos/ui-theme";
+
+// src/types.ts
+import { Node as Node2 } from "@dxos/app-graph";
+var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
+var isSeparator = (node) => node.type === MenuSeparatorType;
+var isMenuGroup = (node) => node.type === Node2.ActionGroupType;
 
 // src/components/DropdownMenu.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React2, { useCallback } from "react";
+import { Icon, DropdownMenu as NaturalDropdownMenu } from "@dxos/react-ui";
 var DropdownMenuItem = ({ item, onClick, __menuScope }) => {
-  var _effect = _useSignals3();
-  try {
-    const action = item;
-    const handleClick = useCallback((event) => onClick(action, event), [
-      action,
-      onClick
-    ]);
-    const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
-    return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Item, {
-      onClick: handleClick,
-      classNames: "gap-2",
-      disabled: action.properties?.disabled,
-      ...action.properties?.testId && {
-        "data-testid": action.properties.testId
-      }
-    }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon, {
-      icon: action.properties.icon,
-      size: iconSize
-    }), /* @__PURE__ */ React3.createElement(ActionLabel, {
-      action
-    }));
-  } finally {
-    _effect.f();
-  }
+  const action = item;
+  const handleClick = useCallback((event) => onClick(action, event), [
+    action,
+    onClick
+  ]);
+  const { iconSize } = useMenuScoped("DropdownMenuItem", __menuScope);
+  return /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Item, {
+    onClick: handleClick,
+    classNames: "gap-2",
+    disabled: action.properties?.disabled,
+    ...action.properties?.testId && {
+      "data-testid": action.properties.testId
+    }
+  }, action.properties?.icon && /* @__PURE__ */ React2.createElement(Icon, {
+    icon: action.properties.icon,
+    size: iconSize
+  }), /* @__PURE__ */ React2.createElement(ActionLabel, {
+    action
+  }));
 };
 var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, caller, children, __menuScope, ...naturalProps }) => {
-  var _effect = _useSignals3();
-  try {
-    const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-      prop: open,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange
-    });
-    const handleActionClick = useCallback((action, event) => {
-      if (action.properties?.disabled) {
-        return;
-      }
-      event.stopPropagation();
-      setOptionsMenuOpen(false);
-      void action.data?.({
+  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const { onAction } = useMenuScoped("DropdownMenuRoot", __menuScope);
+  const handleActionClick = useCallback((action, event) => {
+    if (action.properties?.disabled) {
+      return;
+    }
+    event.stopPropagation();
+    setOptionsMenuOpen(false);
+    if (onAction) {
+      onAction(action, {
         parent: group,
         caller
       });
-    }, [
-      group,
-      caller
-    ]);
-    const items = useMenuItems(group, propsItems);
-    return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Root, {
-      open: optionsMenuOpen,
-      onOpenChange: setOptionsMenuOpen,
-      ...naturalProps
-    }, children, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Content, null, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ React3.createElement(DropdownMenuItem, {
-      key: item.id,
-      item,
-      onClick: handleActionClick
-    }))), /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+    } else {
+      void executeMenuAction(action, {
+        parent: group,
+        caller
+      });
+    }
+  }, [
+    group,
+    caller,
+    onAction
+  ]);
+  const items = useMenuItems(group, propsItems);
+  return /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Root, {
+    open: optionsMenuOpen,
+    onOpenChange: setOptionsMenuOpen,
+    ...naturalProps
+  }, children, /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ React2.createElement(DropdownMenuItem, {
+    key: item.id,
+    item,
+    onClick: handleActionClick
+  }))), /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Arrow, null))));
 };
 var DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -204,290 +187,430 @@ var DropdownMenu = {
 };
 
 // src/components/ToolbarMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { Fragment, useCallback as useCallback2 } from "react";
-import { Icon as Icon2, Toolbar as NaturalToolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { useAttention } from "@dxos/react-ui-attention";
-import { mx as mx2, textBlockWidth, toolbarLayout } from "@dxos/react-ui-theme";
-
-// src/types.ts
-import { ACTION_GROUP_TYPE as ACTION_GROUP_TYPE2 } from "@dxos/app-graph";
-var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
-var isSeparator = (node) => node.type === MenuSeparatorType;
-var isMenuGroup = (node) => node.type === ACTION_GROUP_TYPE2;
-
-// src/components/ToolbarMenu.tsx
-var ActionToolbarItem = ({ action, __menuScope }) => {
-  var _effect = _useSignals4();
-  try {
-    const { iconSize } = useMenu("ActionToolbarItem", __menuScope);
-    const { t } = useTranslation2(translationKey);
-    const handleClick = useCallback2(() => 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: /* @__PURE__ */ React4.createElement(ActionLabel, {
-        action
-      })
-    };
-    return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
-      key: action.id,
-      disabled,
-      onClick: handleClick,
-      variant: "ghost",
-      ...testId && {
-        "data-testid": testId
-      },
-      ...rootProps,
-      classNames
-    });
-  } finally {
-    _effect.f();
+var ActionToolbarItem = ({ __menuScope, action }) => {
+  const { iconSize, onAction } = useMenuScoped("ActionToolbarItem", __menuScope);
+  const { t } = useTranslation2(translationKey);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const buttonVariant = action.properties.variant === "primary" ? "primary" : "ghost";
+  const handleClick = useCallback2(() => {
+    if (onAction) {
+      onAction(action, {});
+    } else {
+      void executeMenuAction(action);
+    }
+  }, [
+    action,
+    onAction
+  ]);
+  const commonProps = {
+    variant: buttonVariant,
+    disabled,
+    classNames,
+    onClick: handleClick,
+    ...testId && {
+      "data-testid": testId
+    }
+  };
+  if (hidden) {
+    return null;
   }
+  return icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.IconButton, {
+    key: action.id,
+    ...commonProps,
+    icon,
+    size: iconSize,
+    iconOnly,
+    label: actionLabel(action, t)
+  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
+    key: action.id,
+    ...commonProps
+  }, /* @__PURE__ */ React3.createElement(ActionLabel, {
+    action
+  }));
 };
-var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  var _effect = _useSignals4();
-  try {
-    const { iconOnly, disabled, testId } = group.properties;
-    const { t } = useTranslation2(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 ? NaturalToolbar.IconButton : NaturalToolbar.Button;
-    const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
-    const rootProps = icon ? {
-      icon,
-      size: iconSize,
-      iconOnly,
-      label: actionLabel(labelAction, t),
-      caretDown: true
-    } : {
-      children: /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ActionLabel, {
-        action: labelAction
-      }), /* @__PURE__ */ React4.createElement(Icon2, {
-        size: 3,
-        icon: "ph--caret-down--bold",
-        classNames: "mis-1"
-      }))
-    };
-    return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-      group,
-      items
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React4.createElement(Root, {
-      variant: "ghost",
-      disabled,
-      ...rootProps,
-      ...testId && {
-        "data-testid": testId
-      }
-    })));
-  } finally {
-    _effect.f();
-  }
+var DropdownMenuToolbarItem = ({ __menuScope, group, items: propsItems }) => {
+  const { iconOnly, disabled, testId } = group.properties;
+  const { t } = useTranslation2(translationKey);
+  const { iconSize } = useMenuScoped("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 ? NaturalToolbar.IconButton : NaturalToolbar.Button;
+  const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
+  const rootProps = icon ? {
+    icon,
+    size: iconSize,
+    iconOnly,
+    label: actionLabel(labelAction, t),
+    caretDown: true
+  } : {
+    children: /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ActionLabel, {
+      action: labelAction
+    }), /* @__PURE__ */ React3.createElement(Icon2, {
+      size: 3,
+      icon: "ph--caret-down--bold",
+      classNames: "ms-1"
+    }))
+  };
+  return /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+    group,
+    items
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Root, {
+    variant: "ghost",
+    disabled,
+    ...rootProps,
+    ...testId && {
+      "data-testid": testId
+    }
+  })));
 };
-var ToggleGroupItem = ({ group, action, __menuScope }) => {
-  var _effect = _useSignals4();
-  try {
-    const { iconSize } = useMenu("ToggleGroupItem", __menuScope);
-    const { t } = useTranslation2(translationKey);
-    const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-    const handleClick = useCallback2(() => action.data?.({
-      parent: group
-    }), [
-      action,
-      group
-    ]);
-    const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
-    const rootProps = icon ? {
-      icon,
-      size: iconSize,
-      iconOnly,
-      label: actionLabel(action, t)
-    } : {
-      children: /* @__PURE__ */ React4.createElement(ActionLabel, {
-        action
-      })
-    };
-    return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
-      key: action.id,
-      value: action.id,
-      disabled,
-      onClick: handleClick,
-      variant: "ghost",
-      ...testId && {
-        "data-testid": testId
-      },
-      ...rootProps,
-      classNames
-    });
-  } finally {
-    _effect.f();
-  }
+var ToggleGroupItem = ({ __menuScope, group, action }) => {
+  const { iconSize, onAction } = useMenuScoped("ToggleGroupItem", __menuScope);
+  const { t } = useTranslation2(translationKey);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const handleClick = useCallback2(() => {
+    if (onAction) {
+      onAction(action, {
+        parent: group
+      });
+    } else {
+      void executeMenuAction(action, {
+        parent: group
+      });
+    }
+  }, [
+    action,
+    group,
+    onAction
+  ]);
+  const commonProps = {
+    value: action.id,
+    disabled,
+    variant: "ghost",
+    classNames,
+    onClick: handleClick,
+    ...testId && {
+      "data-testid": testId
+    }
+  };
+  return hidden ? null : icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupIconItem, {
+    ...commonProps,
+    icon,
+    size: iconSize,
+    iconOnly,
+    label: actionLabel(action, t)
+  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, commonProps, /* @__PURE__ */ React3.createElement(ActionLabel, {
+    action
+  }));
 };
-var ToggleGroupToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  var _effect = _useSignals4();
-  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__ */ React4.createElement(
-        NaturalToolbar.ToggleGroup,
-        {
-          type: selectCardinality,
-          value
-        },
-        // TODO(thure): Handle other menu item types.
-        items.map((action) => /* @__PURE__ */ React4.createElement(ToggleGroupItem, {
-          key: action.id,
-          group,
-          action
-        }))
-      )
-    );
-  } finally {
-    _effect.f();
+var ToggleGroupToolbarItem = ({ __menuScope, group, items: itemsProp }) => {
+  const items = useMenuItems(group, itemsProp, "ToggleGroupToolbarItem", __menuScope);
+  const { selectCardinality } = group.properties;
+  const children = items.map((action) => /* @__PURE__ */ React3.createElement(ToggleGroupItem, {
+    key: action.id,
+    group,
+    action
+  }));
+  if (selectCardinality === "multiple") {
+    return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
+      type: "multiple",
+      value: group.properties.value
+    }, children);
+  } else {
+    return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
+      type: "single",
+      value: group.properties.value
+    }, children);
   }
 };
-var ToolbarMenu = ({ __menuScope, classNames, textBlockWidth: wrapContents, ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
-    const { attendableId } = useMenu("ToolbarMenu", __menuScope);
-    const { hasAttention } = useAttention(attendableId);
-    const InnerRoot = wrapContents ? "div" : Fragment;
-    const innerRootProps = wrapContents ? {
-      role: "none",
-      className: mx2(textBlockWidth, toolbarLayout, "bs-full")
-    } : {};
-    return /* @__PURE__ */ React4.createElement(NaturalToolbar.Root, {
-      ...props,
-      layoutManaged: wrapContents,
-      classNames: [
-        attendableId && !hasAttention && "*:opacity-20 !bg-transparent",
-        classNames
-      ]
-    }, /* @__PURE__ */ React4.createElement(InnerRoot, innerRootProps, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ React4.createElement(NaturalToolbar.Separator, {
-      key: i,
+var ToolbarMenu = composable(({ __menuScope, children, ...props }, forwardedRef) => {
+  const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
+  const { attendableId, alwaysActive } = useMenuScoped("ToolbarMenu", __menuScope);
+  const { hasAttention } = useAttention(attendableId);
+  return /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
+    ...composableProps(props, {
+      classNames: attendableId
+    }),
+    disabled: !alwaysActive && !hasAttention,
+    ref: forwardedRef
+  }, items?.map((item) => /* @__PURE__ */ React3.createElement(ToolbarMenuItem, {
+    key: item.id,
+    __menuScope,
+    item
+  })), children);
+});
+var ToolbarMenuItem = ({ __menuScope, item }) => {
+  if (isSeparator(item)) {
+    return /* @__PURE__ */ React3.createElement(NaturalToolbar.Separator, {
       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__ */ React4.createElement(DropdownMenuToolbarItem, {
-        key: item.id,
+    });
+  }
+  if (isMenuGroup(item)) {
+    if (item.properties.variant === "dropdownMenu") {
+      return /* @__PURE__ */ React3.createElement(DropdownMenuToolbarItem, {
+        __menuScope,
         group: item
-      })
-    ) : (
-      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-      /* @__PURE__ */ React4.createElement(ToggleGroupToolbarItem, {
-        key: item.id,
+      });
+    } else {
+      return /* @__PURE__ */ React3.createElement(ToggleGroupToolbarItem, {
+        __menuScope,
         group: item
-      })
-    ) : (
-      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-      /* @__PURE__ */ React4.createElement(ActionToolbarItem, {
-        key: item.id,
-        action: item
-      })
-    ))));
-  } finally {
-    _effect.f();
+      });
+    }
   }
+  return /* @__PURE__ */ React3.createElement(ActionToolbarItem, {
+    __menuScope,
+    action: item
+  });
 };
 
-// src/hooks/useMenuActions.ts
-import { RegistryContext, useRxValue } from "@effect-rx/rx-react";
-import { useCallback as useCallback3, useContext, useEffect, useState } from "react";
-import { Graph, ROOT_ID } from "@dxos/app-graph";
-var edgesArrayToRecord = (edges) => {
-  return Object.fromEntries(Object.entries(edges.reduce((acc, { source, target }) => {
-    if (!acc[source]) {
-      acc[source] = {
-        inbound: [],
-        outbound: []
-      };
+// src/components/Menu.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/components/Menu.tsx";
+var MENU_NAME = "Menu";
+var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
+var nullItemsAtom = Atom.make(null);
+var defaultItemsAccessor = () => nullItemsAtom;
+var menuContextDefaults = {
+  iconSize: 5,
+  items: defaultItemsAccessor,
+  onAction: void 0,
+  menuItemsAtom: Atom.make(/* @__PURE__ */ new Map()),
+  addMenuItems: () => {
+  },
+  removeMenuItems: () => {
+  }
+};
+var [MenuContextProvider, useMenuScoped] = createMenuContext(MENU_NAME, menuContextDefaults);
+var useMenuScope = createMenuScope();
+var MenuDropdownContext = /* @__PURE__ */ createContext({
+  closeMenu: () => {
+  }
+});
+var DEFAULT_PRIORITY = 100;
+var sortMenuItems = (items) => [
+  ...items
+].sort((a, b) => {
+  if (a.priority !== b.priority) {
+    return a.priority - b.priority;
+  }
+  return a.id.localeCompare(b.id);
+});
+var MenuProvider = ({ children, items = menuContextDefaults.items, iconSize = menuContextDefaults.iconSize, attendableId, alwaysActive, onAction }) => {
+  const { scope } = useMenuScope(void 0);
+  const registry = useContext(RegistryContext);
+  const menuItemsAtom = useMemo(() => Atom.make(/* @__PURE__ */ new Map()).pipe(Atom.keepAlive), []);
+  const addMenuItems = useCallback3((props) => {
+    const priority = props.priority ?? DEFAULT_PRIORITY;
+    const prev = registry.get(menuItemsAtom);
+    const next = new Map(prev);
+    next.set(props.id, {
+      ...props,
+      priority
+    });
+    registry.set(menuItemsAtom, next);
+  }, [
+    registry,
+    menuItemsAtom
+  ]);
+  const removeMenuItems = useCallback3((id) => {
+    const prev = registry.get(menuItemsAtom);
+    const next = new Map(prev);
+    next.delete(id);
+    registry.set(menuItemsAtom, next);
+  }, [
+    registry,
+    menuItemsAtom
+  ]);
+  return /* @__PURE__ */ React4.createElement(MenuContextProvider, {
+    items,
+    iconSize,
+    attendableId,
+    alwaysActive,
+    menuItemsAtom,
+    addMenuItems,
+    removeMenuItems,
+    onAction,
+    scope
+  }, children);
+};
+var resolveItems = (baseItems, group, entries) => {
+  const applicable = [
+    ...entries.values()
+  ].filter((entry) => !entry.groupFilter || entry.groupFilter(group));
+  if (applicable.length === 0) {
+    return baseItems;
+  }
+  const sorted = sortMenuItems(applicable);
+  const replacements = sorted.filter((entry) => entry.mode === "replacement");
+  if (replacements.length > 0) {
+    if (replacements.length > 1) {
+      log.warn("multiple replacement entries found", {
+        ids: replacements.map((r) => r.id).join(", "),
+        using: replacements[0].id
+      }, {
+        F: __dxlog_file,
+        L: 151,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
     }
-    if (!acc[target]) {
-      acc[target] = {
-        inbound: [],
-        outbound: []
-      };
+    return replacements[0].items;
+  }
+  const additive = sorted.filter((entry) => entry.mode === "additive");
+  const additiveItems = additive.flatMap((entry) => entry.items);
+  if (!baseItems || baseItems.length === 0) {
+    return additiveItems.length > 0 ? additiveItems : null;
+  }
+  return [
+    ...baseItems,
+    ...additiveItems
+  ];
+};
+var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __menuScope) => {
+  const { items, menuItemsAtom } = useMenuScoped(consumerName, __menuScope);
+  const groupItems = useAtomValue(items(group));
+  const entries = useAtomValue(menuItemsAtom) ?? /* @__PURE__ */ new Map();
+  const baseItems = useMemo(() => propsItems ?? groupItems ?? null, [
+    propsItems,
+    groupItems
+  ]);
+  const resolved = useMemo(() => resolveItems(baseItems, group, entries), [
+    baseItems,
+    group,
+    entries
+  ]);
+  return resolved ?? void 0;
+};
+var useMenu = (consumerName) => {
+  return useMenuScoped(consumerName, void 0);
+};
+var MenuRoot = ({ children, open, defaultOpen, onOpenChange, caller, ...props }) => {
+  const [menuOpen, setMenuOpen] = useControllableState2({
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const closeMenu = useCallback3(() => setMenuOpen(false), [
+    setMenuOpen
+  ]);
+  return /* @__PURE__ */ React4.createElement(MenuProvider, props, /* @__PURE__ */ React4.createElement(MenuDropdownContext.Provider, {
+    value: {
+      closeMenu,
+      caller
     }
-    const sourceEdges = acc[source];
-    if (!sourceEdges.outbound.includes(target)) {
-      sourceEdges.outbound.push(target);
+  }, /* @__PURE__ */ React4.createElement(NaturalDropdownMenu2.Root, {
+    open: menuOpen,
+    onOpenChange: setMenuOpen
+  }, children)));
+};
+var MenuContentItem = ({ item, onClick, __menuScope }) => {
+  const action = item;
+  const handleClick = useCallback3((event) => onClick(action, event), [
+    action,
+    onClick
+  ]);
+  const { iconSize } = useMenuScoped("MenuContentItem", __menuScope);
+  return /* @__PURE__ */ React4.createElement(NaturalDropdownMenu2.Item, {
+    onClick: handleClick,
+    classNames: "gap-2",
+    disabled: action.properties?.disabled,
+    ...action.properties?.testId && {
+      "data-testid": action.properties.testId
     }
-    const targetEdges = acc[target];
-    if (!targetEdges.inbound.includes(source)) {
-      targetEdges.inbound.push(source);
+  }, action.properties?.icon && /* @__PURE__ */ React4.createElement(Icon3, {
+    icon: action.properties.icon,
+    size: iconSize
+  }), /* @__PURE__ */ React4.createElement(ActionLabel, {
+    action
+  }));
+};
+var MenuContent = ({ group, items: propsItems, caller: callerOverride, __menuScope }) => {
+  const { closeMenu, caller: contextCaller } = useContext(MenuDropdownContext);
+  const caller = callerOverride ?? contextCaller;
+  const { onAction } = useMenuScoped("MenuContent", __menuScope);
+  const resolvedItems = useMenuItems(group, propsItems, "MenuContent", __menuScope);
+  const handleActionClick = useCallback3((action, event) => {
+    if (action.properties?.disabled) {
+      return;
     }
-    return acc;
-  }, {})));
+    event.stopPropagation();
+    closeMenu();
+    if (onAction) {
+      onAction(action, {
+        parent: group,
+        caller
+      });
+    } else {
+      void executeMenuAction(action, {
+        parent: group,
+        caller
+      });
+    }
+  }, [
+    group,
+    caller,
+    onAction,
+    closeMenu
+  ]);
+  return /* @__PURE__ */ React4.createElement(NaturalDropdownMenu2.Portal, null, /* @__PURE__ */ React4.createElement(NaturalDropdownMenu2.Content, null, /* @__PURE__ */ React4.createElement(NaturalDropdownMenu2.Viewport, null, resolvedItems?.map((item) => /* @__PURE__ */ React4.createElement(MenuContentItem, {
+    key: item.id,
+    item,
+    onClick: handleActionClick
+  }))), /* @__PURE__ */ React4.createElement(NaturalDropdownMenu2.Arrow, null)));
 };
+var Menu = {
+  Root: MenuRoot,
+  Trigger: NaturalDropdownMenu2.Trigger,
+  Content: MenuContent,
+  VirtualTrigger: NaturalDropdownMenu2.VirtualTrigger,
+  Toolbar: ToolbarMenu
+};
+
+// src/hooks/useMenuActions.ts
+import { RegistryContext as RegistryContext2, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import { useCallback as useCallback4, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { Graph, Node as Node3 } from "@dxos/app-graph";
 var useMenuActions = (props) => {
-  const registry = useContext(RegistryContext);
-  const menuGraphProps = useRxValue(props);
-  const [graph] = useState(new Graph({
-    registry,
-    nodes: menuGraphProps.nodes,
-    edges: edgesArrayToRecord(menuGraphProps.edges)
-  }));
-  useEffect(() => {
-    graph.addNodes(menuGraphProps.nodes);
-    graph.addEdges(menuGraphProps.edges);
+  const registry = useContext2(RegistryContext2);
+  const menuGraphProps = useAtomValue2(props);
+  const graph = useMemo2(() => {
+    const newGraph = Graph.make({
+      registry
+    });
+    newGraph.pipe(Graph.addNodes(menuGraphProps.nodes), Graph.addEdges(menuGraphProps.edges));
+    return newGraph;
   }, [
+    registry,
     menuGraphProps
   ]);
-  const useGroupItems = useCallback3((sourceNode) => {
-    const items = useRxValue(graph.connections(sourceNode?.id || ROOT_ID));
-    return items;
+  const items = useCallback4((group) => {
+    return graph.connections(group?.id || Node3.RootId, "child");
   }, [
     graph
   ]);
   return {
-    useGroupItems
+    items
   };
 };
 
 // src/builder.ts
 import { invariant } from "@dxos/invariant";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/builder.ts";
-var MenuBuilder = Object.freeze({
-  make: () => new MenuBuilderImpl({
-    nodes: [],
-    edges: []
-  }, "root")
-});
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/builder.ts";
 var MenuBuilderImpl = class _MenuBuilderImpl {
   _data;
   _rootId;
+  _separatorCount = 0;
   constructor(_data, _rootId) {
     this._data = _data;
     this._rootId = _rootId;
   }
-  action(id, invoke, properties) {
-    this._data.nodes.push(createMenuAction(id, invoke, properties));
-    this._data.edges.push({
-      source: this._rootId,
-      target: id
-    });
-    return this;
-  }
   root(props) {
     invariant(this._rootId === "root", "Root group can only be at the top level", {
-      F: __dxlog_file,
-      L: 42,
+      F: __dxlog_file2,
+      L: 61,
       S: this,
       A: [
         "this._rootId === 'root'",
@@ -495,8 +618,8 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
       ]
     });
     invariant(this._data.nodes.find((node) => node.id === "root") === void 0, "Root group can only be created once", {
-      F: __dxlog_file,
-      L: 43,
+      F: __dxlog_file2,
+      L: 62,
       S: this,
       A: [
         "this._data.nodes.find((node) => node.id === 'root') === undefined",
@@ -506,36 +629,78 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     this._data.nodes.push(createMenuItemGroup("root", props));
     return this;
   }
-  group(id, properties, cb) {
-    this._data.nodes.push(createMenuItemGroup(id, properties));
+  build() {
+    return this._data;
+  }
+  action(id, props, invoke) {
+    this._data.nodes.push(createMenuAction(id, invoke, props));
+    this._data.edges.push({
+      source: this._rootId,
+      target: id,
+      relation: "child"
+    });
+    return this;
+  }
+  group(id, props, cb) {
+    this._data.nodes.push(createMenuItemGroup(id, props));
     this._data.edges.push({
       source: this._rootId,
-      target: id
+      target: id,
+      relation: "child"
     });
     cb(new _MenuBuilderImpl(this._data, id));
     return this;
   }
-  build() {
-    return this._data;
+  subgraph(subgraphOrCb) {
+    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(variant = "gap") {
+    const id = `separator-${++this._separatorCount}`;
+    this._data.nodes.push({
+      id,
+      type: MenuSeparatorType,
+      properties: {
+        variant
+      },
+      data: void 0
+    });
+    this._data.edges.push({
+      source: this._rootId,
+      target: id,
+      relation: "child"
+    });
+    return this;
   }
 };
+var MenuBuilder = Object.freeze({
+  make: () => new MenuBuilderImpl({
+    nodes: [],
+    edges: []
+  }, "root")
+});
 export {
-  DropdownMenu,
+  Menu,
   MenuBuilder,
-  MenuProvider,
   MenuSeparatorType,
-  ToolbarMenu,
   createGapSeparator,
   createLineSeparator,
   createMenuAction,
   createMenuItemGroup,
-  createMenuScope,
   isMenuGroup,
   isSeparator,
   menuContextDefaults,
-  rxFromSignal,
   useMenu,
   useMenuActions,
-  useMenuItems
+  useMenuItems,
+  useMenuScoped
 };
 //# sourceMappingURL=index.mjs.map