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

package/dist/lib/browser/index.mjs

@@ -1,7 +1,10 @@
-// src/components/DropdownMenu.tsx
-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/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 * as Effect from "effect/Effect";
@@ -44,7 +47,8 @@ var createGapSeparator = (id = "gap", source = "root") => ({
   edges: [
     {
       source,
-      target: id
+      target: id,
+      relation: "child"
     }
   ]
 });
@@ -62,7 +66,8 @@ var createLineSeparator = (id = "line", source = "root") => ({
   edges: [
     {
       source,
-      target: id
+      target: id,
+      relation: "child"
     }
   ]
 });
@@ -71,26 +76,15 @@ var createLineSeparator = (id = "line", source = "root") => ({
 import React from "react";
 import { keySymbols } from "@dxos/keyboard";
 import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { descriptionText, mx } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-menu";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
-  }
-];
-
-// src/components/ActionLabel.tsx
+import { mx } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 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", descriptionText)
+    className: mx("shrink-0", "text-description")
   }, keySymbols(shortcut).join("")));
 };
 var actionLabel = (action, t) => {
@@ -98,57 +92,41 @@ var actionLabel = (action, t) => {
   return `${toLocalizedString(action.properties.label, t)}${shortcut ? ` (${keySymbols(shortcut).join("")})` : ""}`;
 };
 
-// src/components/MenuContext.tsx
-import { createContextScope } from "@radix-ui/react-context";
-import React2, { useMemo } from "react";
-var MENU_NAME = "Menu";
-var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
-var [MenuContextProvider, useMenu] = createMenuContext(MENU_NAME);
-var menuContextDefaults = {
-  iconSize: 5,
-  useGroupItems: () => null,
-  onAction: void 0
-};
-var useMenuScope = createMenuScope();
-var MenuProvider = ({ children, useGroupItems = menuContextDefaults.useGroupItems, iconSize = menuContextDefaults.iconSize, attendableId, alwaysActive, onAction }) => {
-  const { scope } = useMenuScope(void 0);
-  return /* @__PURE__ */ React2.createElement(MenuContextProvider, {
-    useGroupItems,
-    iconSize,
-    attendableId,
-    alwaysActive,
-    onAction,
-    scope
-  }, children);
-};
-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 { composable, composableProps } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { translationKey as translationKey2 } from "#translations";
+
+// 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 }) => {
   const action = item;
   const handleClick = useCallback((event) => onClick(action, event), [
     action,
     onClick
   ]);
-  const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
-  return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Item, {
+  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__ */ React3.createElement(Icon, {
+  }, action.properties?.icon && /* @__PURE__ */ React2.createElement(Icon, {
     icon: action.properties.icon,
     size: iconSize
-  }), /* @__PURE__ */ React3.createElement(ActionLabel, {
+  }), /* @__PURE__ */ React2.createElement(ActionLabel, {
     action
   }));
 };
@@ -158,7 +136,7 @@ var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenCha
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  const { onAction } = useMenu("DropdownMenuRoot", __menuScope);
+  const { onAction } = useMenuScoped("DropdownMenuRoot", __menuScope);
   const handleActionClick = useCallback((action, event) => {
     if (action.properties?.disabled) {
       return;
@@ -182,15 +160,15 @@ var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenCha
     onAction
   ]);
   const items = useMenuItems(group, propsItems);
-  return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Root, {
+  return /* @__PURE__ */ React2.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, {
+  }, 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__ */ React3.createElement(NaturalDropdownMenu.Arrow, null))));
+  }))), /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Arrow, null))));
 };
 var DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -199,33 +177,11 @@ var DropdownMenu = {
 };
 
 // src/components/ToolbarMenu.tsx
-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/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/ToolbarMenu.tsx
-var ActionToolbarItem = ({ action, __menuScope }) => {
-  const { iconSize, onAction } = useMenu("ActionToolbarItem", __menuScope);
-  const { t } = useTranslation2(translationKey);
-  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
-    })
-  };
+var ActionToolbarItem = ({ __menuScope, action }) => {
+  const { iconSize, onAction } = useMenuScoped("ActionToolbarItem", __menuScope);
+  const { t } = useTranslation2(translationKey2);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
+  const buttonVariant = action.properties.variant === "primary" ? "primary" : "ghost";
   const handleClick = useCallback2(() => {
     if (onAction) {
       onAction(action, {});
@@ -236,49 +192,66 @@ var ActionToolbarItem = ({ action, __menuScope }) => {
     action,
     onAction
   ]);
-  return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
-    key: action.id,
+  const commonProps = {
+    variant: buttonVariant,
     disabled,
+    classNames,
     onClick: handleClick,
-    variant: "ghost",
     ...testId && {
       "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+    }
+  };
+  if (hidden) {
+    return null;
+  }
+  return icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.IconButton, {
+    key: action.id,
+    ...commonProps,
+    icon,
+    size: iconSize,
+    iconOnly,
+    iconClassNames,
+    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 DropdownMenuToolbarItem = ({ __menuScope, group, items: propsItems }) => {
   const { iconOnly, disabled, testId } = group.properties;
-  const { t } = useTranslation2(translationKey);
-  const { iconSize } = useMenu("DropdownMenuToolbarItem", __menuScope);
+  const { t } = useTranslation2(translationKey2);
+  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 iconClassNames = group.properties.applyActive && activeItem?.properties.iconClassNames || group.properties.iconClassNames;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
   const rootProps = icon ? {
     icon,
     size: iconSize,
     iconOnly,
+    iconClassNames,
     label: actionLabel(labelAction, t),
     caretDown: true
   } : {
-    children: /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ActionLabel, {
+    children: /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ActionLabel, {
       action: labelAction
-    }), /* @__PURE__ */ React4.createElement(Icon2, {
+    }), /* @__PURE__ */ React3.createElement(Icon2, {
       size: 3,
       icon: "ph--caret-down--bold",
-      classNames: "mis-1"
+      classNames: "ms-1"
     }))
   };
-  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
     group,
     items
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Root, {
+  }, /* @__PURE__ */ React3.createElement(Root, {
     variant: "ghost",
     disabled,
     ...rootProps,
@@ -287,10 +260,10 @@ var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
     }
   })));
 };
-var ToggleGroupItem = ({ group, action, __menuScope }) => {
-  const { iconSize, onAction } = useMenu("ToggleGroupItem", __menuScope);
-  const { t } = useTranslation2(translationKey);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+var ToggleGroupItem = ({ __menuScope, group, action }) => {
+  const { iconSize, onAction } = useMenuScoped("ToggleGroupItem", __menuScope);
+  const { t } = useTranslation2(translationKey2);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
   const handleClick = useCallback2(() => {
     if (onAction) {
       onAction(action, {
@@ -306,168 +279,342 @@ var ToggleGroupItem = ({ group, action, __menuScope }) => {
     group,
     onAction
   ]);
-  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,
+  const commonProps = {
     value: action.id,
     disabled,
-    onClick: handleClick,
     variant: "ghost",
+    classNames,
+    onClick: handleClick,
     ...testId && {
       "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+    }
+  };
+  return hidden ? null : icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupIconItem, {
+    ...commonProps,
+    icon,
+    size: iconSize,
+    iconOnly,
+    iconClassNames,
+    label: actionLabel(action, t)
+  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, commonProps, /* @__PURE__ */ React3.createElement(ActionLabel, {
+    action
+  }));
 };
-var ToggleGroupToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  const items = useMenuItems(group, propsItems, "ToggleGroupToolbarItem", __menuScope);
-  const { selectCardinality, value } = group.properties;
-  return (
-    // TODO(thure): Fix.
-    // @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
-      }))
-    )
-  );
+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: textBlockWidthProp, ...props }) => {
+var ToolbarMenu = composable(({ __menuScope, children, ...props }, forwardedRef) => {
   const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
-  const { attendableId, alwaysActive } = useMenu("ToolbarMenu", __menuScope);
+  const { attendableId, alwaysActive } = useMenuScoped("ToolbarMenu", __menuScope);
   const { hasAttention } = useAttention(attendableId);
-  const InnerRoot = textBlockWidthProp ? "div" : Fragment;
-  const innerRootProps = textBlockWidthProp ? {
-    role: "none",
-    className: mx2(textBlockWidth, toolbarLayout, "bs-full")
-  } : {};
-  return /* @__PURE__ */ React4.createElement(NaturalToolbar.Root, {
-    ...props,
-    classNames: [
-      attendableId,
-      classNames
-    ],
+  return /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
+    ...composableProps(props, {
+      classNames: attendableId
+    }),
     disabled: !alwaysActive && !hasAttention,
-    layoutManaged: textBlockWidthProp
-  }, /* @__PURE__ */ React4.createElement(InnerRoot, innerRootProps, items?.map((item, i) => /* @__PURE__ */ React4.createElement(ToolbarMenuItem, {
-    key: item.id ?? i,
+    ref: forwardedRef
+  }, items?.map((item) => /* @__PURE__ */ React3.createElement(ToolbarMenuItem, {
+    key: item.id,
+    __menuScope,
     item
-  }))));
-};
-var ToolbarMenuItem = ({ item }) => {
+  })), children);
+});
+var ToolbarMenuItem = ({ __menuScope, item }) => {
   if (isSeparator(item)) {
-    return /* @__PURE__ */ React4.createElement(NaturalToolbar.Separator, {
+    return /* @__PURE__ */ React3.createElement(NaturalToolbar.Separator, {
       variant: item.properties.variant
     });
   }
   if (isMenuGroup(item)) {
     if (item.properties.variant === "dropdownMenu") {
-      return /* @__PURE__ */ React4.createElement(DropdownMenuToolbarItem, {
+      return /* @__PURE__ */ React3.createElement(DropdownMenuToolbarItem, {
+        __menuScope,
         group: item
       });
     } else {
-      return /* @__PURE__ */ React4.createElement(ToggleGroupToolbarItem, {
+      return /* @__PURE__ */ React3.createElement(ToggleGroupToolbarItem, {
+        __menuScope,
         group: item
       });
     }
   }
-  return /* @__PURE__ */ React4.createElement(ActionToolbarItem, {
+  return /* @__PURE__ */ React3.createElement(ActionToolbarItem, {
+    __menuScope,
     action: item
   });
 };
 
+// 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
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 94, S: void 0 });
+    }
+    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
+    }
+  }, /* @__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
+    }
+  }, 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;
+    }
+    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, useAtomValue } from "@effect-atom/atom-react";
-import { useCallback as useCallback3, useContext, useRef } from "react";
+import { Atom as Atom2, 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 = useAtomValue(props);
-  const graphRef = useRef(null);
-  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+  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));
-    graphRef.current = {
-      graph: newGraph,
-      props: menuGraphProps
-    };
-  }
-  const graph = graphRef.current.graph;
-  const useGroupItems = useCallback3((sourceNode) => {
-    const items = useAtomValue(graph.connections(sourceNode?.id || Node3.RootId));
-    return items;
+    return newGraph;
+  }, [
+    registry,
+    menuGraphProps
+  ]);
+  const items = useCallback4((group) => {
+    return graph.connections(group?.id || Node3.RootId, "child");
   }, [
     graph
   ]);
   return {
-    useGroupItems
+    items
   };
 };
+var useMenuBuilder = (build, deps) => {
+  const atom = useMemo2(() => Atom2.make(build), deps);
+  return useMenuActions(atom);
+};
 
 // 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;
   }
   root(props) {
-    invariant(this._rootId === "root", "Root group can only be at the top level", {
-      F: __dxlog_file,
-      L: 36,
-      S: this,
-      A: [
-        "this._rootId === 'root'",
-        "'Root group can only be at the top level'"
-      ]
-    });
-    invariant(this._data.nodes.find((node) => node.id === "root") === void 0, "Root group can only be created once", {
-      F: __dxlog_file,
-      L: 37,
-      S: this,
-      A: [
-        "this._data.nodes.find((node) => node.id === 'root') === undefined",
-        "'Root group can only be created once'"
-      ]
-    });
+    invariant(this._rootId === "root", "Root group can only be at the top level", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 16, S: this, A: ["this._rootId === 'root'", "'Root group can only be at the top level'"] });
+    invariant(this._data.nodes.find((node) => node.id === "root") === void 0, "Root group can only be created once", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 17, S: this, A: ["this._data.nodes.find((node)=>node.id === 'root') === undefined", "'Root group can only be created once'"] });
     this._data.nodes.push(createMenuItemGroup("root", props));
     return this;
   }
+  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
+      target: id,
+      relation: "child"
     });
     return this;
   }
@@ -475,31 +622,63 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     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,
   useMenu,
   useMenuActions,
-  useMenuItems
+  useMenuBuilder,
+  useMenuItems,
+  useMenuScoped
 };
 //# sourceMappingURL=index.mjs.map