@dxos/react-ui-menu 0.8.3-staging.0fa589b → 0.8.4-main.1068cf700f

package/dist/lib/browser/index.mjs

@@ -1,46 +1,34 @@
-// packages/ui/react-ui-menu/src/index.ts
-import { rxFromSignal } from "@dxos/app-graph";
-
-// packages/ui/react-ui-menu/src/components/DropdownMenu.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+// src/components/DropdownMenu.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React3, { useCallback } from "react";
-import { DropdownMenu as NaturalDropdownMenu, Icon } from "@dxos/react-ui";
-
-// packages/ui/react-ui-menu/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 { mx, descriptionText } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-menu/src/translations.ts
-var translationKey = "menus";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
-  }
-];
+import { Icon, DropdownMenu as NaturalDropdownMenu } from "@dxos/react-ui";
 
-// packages/ui/react-ui-menu/src/util.ts
-import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol } from "@dxos/app-graph";
+// src/util.ts
+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: [
@@ -79,51 +67,59 @@ var createLineSeparator = (id = "line", source = "root") => ({
   ]
 });
 
-// packages/ui/react-ui-menu/src/components/ActionLabel.tsx
-var ActionLabel = ({ action }) => {
-  var _effect = _useSignals();
-  try {
-    const shortcut = getShortcut(action);
-    const { t } = useTranslation(translationKey);
-    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();
+// src/components/ActionLabel.tsx
+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
+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)
+  }, keySymbols(shortcut).join("")));
 };
 var actionLabel = (action, t) => {
   const shortcut = getShortcut(action);
   return `${toLocalizedString(action.properties.label, t)}${shortcut ? ` (${keySymbols(shortcut).join("")})` : ""}`;
 };
 
-// packages/ui/react-ui-menu/src/components/MenuContext.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+// src/components/MenuContext.tsx
 import { createContextScope } from "@radix-ui/react-context";
 import React2, { useMemo } from "react";
-var MENU_NAME = "GraphMenu";
+var MENU_NAME = "Menu";
 var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
 var [MenuContextProvider, useMenu] = createMenuContext(MENU_NAME);
 var menuContextDefaults = {
   iconSize: 5,
-  useGroupItems: () => null
+  useGroupItems: () => null,
+  onAction: void 0
 };
 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 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);
@@ -134,68 +130,67 @@ var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __m
   ]);
 };
 
-// packages/ui/react-ui-menu/src/components/DropdownMenu.tsx
+// src/components/DropdownMenu.tsx
 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 } = 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
+  }));
 };
 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 } = useMenu("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__ */ 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))));
 };
 var DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -203,254 +198,224 @@ var DropdownMenu = {
   VirtualTrigger: NaturalDropdownMenu.VirtualTrigger
 };
 
-// packages/ui/react-ui-menu/src/components/ToolbarMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+// 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/react-ui-theme";
+import { mx as mx2, textBlockWidth, toolbarLayout } from "@dxos/ui-theme";
 
-// packages/ui/react-ui-menu/src/types.ts
-import { ACTION_GROUP_TYPE as ACTION_GROUP_TYPE2 } from "@dxos/app-graph";
+// 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 === ACTION_GROUP_TYPE2;
+var isMenuGroup = (node) => node.type === Node2.ActionGroupType;
 
-// packages/ui/react-ui-menu/src/components/ToolbarMenu.tsx
+// 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?.(), [
+  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
-    ]);
-    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();
-  }
+    })
+  };
+  const handleClick = useCallback2(() => {
+    if (onAction) {
+      onAction(action, {});
+    } else {
+      void executeMenuAction(action);
+    }
+  }, [
+    action,
+    onAction
+  ]);
+  return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
+    key: action.id,
+    disabled,
+    onClick: handleClick,
+    variant: "ghost",
+    ...testId && {
+      "data-testid": testId
+    },
+    ...rootProps,
+    classNames
+  });
 };
 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();
-  }
+  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
+    }
+  })));
 };
 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();
-  }
+  const { iconSize, onAction } = useMenu("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 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
+  });
 };
 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();
-  }
+  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 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)
-    } : {};
-    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 = ({ __menuScope, classNames, textBlockWidth: textBlockWidthProp, ...props }) => {
+  const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
+  const { attendableId, alwaysActive } = useMenu("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
+    ],
+    disabled: !alwaysActive && !hasAttention,
+    layoutManaged: textBlockWidthProp
+  }, /* @__PURE__ */ React4.createElement(InnerRoot, innerRootProps, items?.map((item, i) => /* @__PURE__ */ React4.createElement(ToolbarMenuItem, {
+    key: item.id ?? i,
+    item
+  }))));
+};
+var ToolbarMenuItem = ({ item }) => {
+  if (isSeparator(item)) {
+    return /* @__PURE__ */ React4.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__ */ React4.createElement(DropdownMenuToolbarItem, {
         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__ */ React4.createElement(ToggleGroupToolbarItem, {
         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__ */ React4.createElement(ActionToolbarItem, {
+    action: item
+  });
 };
 
-// packages/ui/react-ui-menu/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: []
-      };
-    }
-    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;
-  }, {})));
-};
+// src/hooks/useMenuActions.ts
+import { RegistryContext, useAtomValue } from "@effect-atom/atom-react";
+import { useCallback as useCallback3, useContext, useRef } 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);
-  }, [
-    menuGraphProps
-  ]);
+  const menuGraphProps = useAtomValue(props);
+  const graphRef = useRef(null);
+  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+    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 = useRxValue(graph.connections(sourceNode?.id || ROOT_ID));
+    const items = useAtomValue(graph.connections(sourceNode?.id || Node3.RootId));
     return items;
   }, [
     graph
@@ -459,8 +424,69 @@ var useMenuActions = (props) => {
     useGroupItems
   };
 };
+
+// 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 MenuBuilderImpl = class _MenuBuilderImpl {
+  _data;
+  _rootId;
+  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'"
+      ]
+    });
+    this._data.nodes.push(createMenuItemGroup("root", props));
+    return this;
+  }
+  action(id, props, invoke) {
+    this._data.nodes.push(createMenuAction(id, invoke, props));
+    this._data.edges.push({
+      source: this._rootId,
+      target: id
+    });
+    return this;
+  }
+  group(id, props, cb) {
+    this._data.nodes.push(createMenuItemGroup(id, props));
+    this._data.edges.push({
+      source: this._rootId,
+      target: id
+    });
+    cb(new _MenuBuilderImpl(this._data, id));
+    return this;
+  }
+  build() {
+    return this._data;
+  }
+};
 export {
   DropdownMenu,
+  MenuBuilder,
   MenuProvider,
   MenuSeparatorType,
   ToolbarMenu,
@@ -472,7 +498,6 @@ export {
   isMenuGroup,
   isSeparator,
   menuContextDefaults,
-  rxFromSignal,
   useMenu,
   useMenuActions,
   useMenuItems