@dxos/react-ui-menu 0.9.1-staging.ee54ba693a → 0.11.0

package/dist/lib/browser/index.mjs

@@ -1,797 +0,0 @@
-// 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 Icon2, DropdownMenu as NaturalDropdownMenu2 } from "@dxos/react-ui";
-
-// src/util.ts
-import * as Effect from "effect/Effect";
-import { Node } from "@dxos/app-graph";
-import { EffectEx } 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 EffectEx.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: Node.ActionType,
-  properties,
-  data: () => Effect.sync(invoke)
-});
-var createMenuItemGroup = (id, properties) => ({
-  id,
-  type: Node.ActionGroupType,
-  properties,
-  data: Node.actionGroupSymbol
-});
-var createGapSeparator = (id = "gap", source = "root") => ({
-  nodes: [
-    {
-      id,
-      type: "@dxos/react-ui-toolbar/separator",
-      properties: {
-        variant: "gap"
-      },
-      data: void 0
-    }
-  ],
-  edges: [
-    {
-      source,
-      target: id,
-      relation: "child"
-    }
-  ]
-});
-var createLineSeparator = (id = "line", source = "root") => ({
-  nodes: [
-    {
-      id,
-      type: "@dxos/react-ui-toolbar/separator",
-      properties: {
-        variant: "line"
-      },
-      data: void 0
-    }
-  ],
-  edges: [
-    {
-      source,
-      target: id,
-      relation: "child"
-    }
-  ]
-});
-
-// src/components/ActionLabel.tsx
-import React from "react";
-import { keySymbols } from "@dxos/keyboard";
-import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-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", "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/ToolbarMenu.tsx
-import React3, { useCallback as useCallback2 } from "react";
-import { Input, Toolbar as NaturalToolbar, Tooltip, toLocalizedString as toLocalizedString2, 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 } = 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 }) => {
-  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
-      });
-    } 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,
-  Trigger: NaturalDropdownMenu.Trigger,
-  VirtualTrigger: NaturalDropdownMenu.VirtualTrigger
-};
-
-// src/components/ToolbarMenu.tsx
-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, {});
-    } 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,
-    iconClassNames,
-    label: actionLabel(action, t)
-  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
-    key: action.id,
-    ...commonProps
-  }, /* @__PURE__ */ React3.createElement(ActionLabel, {
-    action
-  }));
-};
-var SwitchToolbarItem = ({ __menuScope, action }) => {
-  const { onAction } = useMenuScoped("SwitchToolbarItem", __menuScope);
-  const { t } = useTranslation2(translationKey2);
-  const { label, iconOnly, disabled, testId, hidden, checked } = action.properties;
-  const labelStr = toLocalizedString2(label, t);
-  const handleCheckedChange = useCallback2(() => {
-    if (onAction) {
-      onAction(action, {});
-    } else {
-      void executeMenuAction(action);
-    }
-  }, [
-    action,
-    onAction
-  ]);
-  if (hidden) {
-    return null;
-  }
-  const switchInput = /* @__PURE__ */ React3.createElement(Input.Switch, {
-    checked,
-    disabled,
-    "aria-label": iconOnly ? labelStr : void 0,
-    onCheckedChange: handleCheckedChange,
-    ...testId && {
-      "data-testid": testId
-    }
-  });
-  return /* @__PURE__ */ React3.createElement(Input.Root, null, iconOnly ? /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: labelStr
-  }, /* @__PURE__ */ React3.createElement(Input.Block, null, switchInput)) : /* @__PURE__ */ React3.createElement(Input.Block, null, switchInput), !iconOnly && /* @__PURE__ */ React3.createElement(Input.Label, null, labelStr));
-};
-var DropdownMenuToolbarItem = ({ __menuScope, group, items: propsItems }) => {
-  const { t } = useTranslation2(translationKey2);
-  const { iconSize } = useMenuScoped("DropdownMenuToolbarItem", __menuScope);
-  const items = useMenuItems(group, propsItems, "DropdownMenuToolbarItem", __menuScope);
-  const { iconOnly, disabled, testId, applyActive, caretDown = true, icon: groupIcon, iconClassNames: groupIconClassNames } = group.properties;
-  const activeItem = items?.find((item) => !!item.properties.checked);
-  const icon = applyActive && // TODO(thure): Handle other menu item types.
-  activeItem?.properties.icon || groupIcon;
-  const iconClassNames = applyActive && activeItem?.properties.iconClassNames || groupIconClassNames;
-  const labelAction = applyActive && activeItem ? activeItem : group;
-  return /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
-    group,
-    items
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.IconButton, {
-    variant: "ghost",
-    disabled,
-    icon,
-    size: iconSize,
-    iconOnly,
-    iconClassNames,
-    label: actionLabel(labelAction, t),
-    caretDown,
-    ...testId && {
-      "data-testid": testId
-    }
-  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    disabled,
-    caretDown,
-    ...testId && {
-      "data-testid": testId
-    }
-  }, /* @__PURE__ */ React3.createElement(ActionLabel, {
-    action: labelAction
-  }))));
-};
-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, {
-        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,
-    iconClassNames,
-    label: actionLabel(action, t)
-  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, commonProps, /* @__PURE__ */ React3.createElement(ActionLabel, {
-    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 = 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
-    });
-  }
-  if (isMenuGroup(item)) {
-    if (item.properties.variant === "dropdownMenu") {
-      return /* @__PURE__ */ React3.createElement(DropdownMenuToolbarItem, {
-        __menuScope,
-        group: item
-      });
-    }
-    return /* @__PURE__ */ React3.createElement(ToggleGroupToolbarItem, {
-      __menuScope,
-      group: item
-    });
-  }
-  const action = item;
-  if (action.properties?.variant === "switch") {
-    return /* @__PURE__ */ React3.createElement(SwitchToolbarItem, {
-      __menuScope,
-      action
-    });
-  }
-  if (action.properties?.variant === "custom" && action.properties.render) {
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, action.properties.render());
-  }
-  return /* @__PURE__ */ React3.createElement(ActionToolbarItem, {
-    __menuScope,
-    action
-  });
-};
-
-// 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) => a.priority !== b.priority ? a.priority - b.priority : 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: 89, 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(Icon2, {
-    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/useGraphMenuActions.ts
-import { Atom as Atom3 } from "@effect-atom/atom-react";
-import { useMemo as useMemo3 } from "react";
-import { Node as Node4 } from "@dxos/app-graph";
-
-// src/hooks/useMenuActions.ts
-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 = 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 items = useCallback4((group) => {
-    return graph.connections(group?.id || Node3.RootId, "child");
-  }, [
-    graph
-  ]);
-  return {
-    items
-  };
-};
-var useMenuBuilder = (build, deps) => {
-  const atom = useMemo2(() => Atom2.make(build), deps);
-  return useMenuActions(atom);
-};
-
-// src/hooks/useGraphMenuActions.ts
-var buildGraphMenu = (resolve, nodeId, options = {}) => {
-  const { rootId = Node4.RootId, filter } = options;
-  const nodes = [];
-  const edges = [];
-  const seen = /* @__PURE__ */ new Set();
-  const visit = (parentId, sourceId) => {
-    for (const action of resolve(sourceId)) {
-      if (filter && !filter(action)) {
-        continue;
-      }
-      edges.push({
-        source: parentId,
-        target: action.id,
-        relation: "child"
-      });
-      if (seen.has(action.id)) {
-        continue;
-      }
-      seen.add(action.id);
-      nodes.push(action);
-      if (Node4.isActionGroup(action)) {
-        visit(action.id, action.id);
-      }
-    }
-  };
-  visit(rootId, nodeId);
-  return {
-    nodes,
-    edges
-  };
-};
-var graphActions = (graph, get, nodeId, options) => graph && nodeId ? buildGraphMenu((id) => get(graph.actions(id)), nodeId, options) : {
-  nodes: [],
-  edges: []
-};
-var useGraphMenuActions = (graph, nodeId, options) => {
-  const atom = useMemo3(
-    () => Atom3.make((get) => graphActions(graph, get, nodeId, options)),
-    // `options` is expected to be stable; `rootId` participates since it reshapes the graph.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      graph,
-      nodeId,
-      options?.rootId
-    ]
-  );
-  return useMenuActions(atom);
-};
-
-// src/builder.ts
-import { invariant } from "@dxos/invariant";
-import { translationKey as translationKey3 } from "#translations";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/builder.ts";
-var overflowMenuProperties = {
-  label: [
-    "toolbar-overflow.menu",
-    {
-      ns: translationKey3
-    }
-  ],
-  icon: "ph--dots-three-vertical--regular",
-  iconOnly: true,
-  caretDown: false,
-  variant: "dropdownMenu"
-};
-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", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 29, 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: 30, 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,
-      relation: "child"
-    });
-    return this;
-  }
-  switch(id, props, invoke) {
-    return this.action(id, {
-      ...props,
-      variant: "switch"
-    }, invoke);
-  }
-  group(id, props, cb) {
-    this._data.nodes.push(createMenuItemGroup(id, props));
-    this._data.edges.push({
-      source: this._rootId,
-      target: id,
-      relation: "child"
-    });
-    cb(new _MenuBuilderImpl(this._data, id));
-    return this;
-  }
-  menu(id, cb) {
-    return this.group(id, overflowMenuProperties, cb);
-  }
-  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 {
-  Menu,
-  MenuBuilder,
-  MenuSeparatorType,
-  buildGraphMenu,
-  createGapSeparator,
-  createLineSeparator,
-  createMenuAction,
-  createMenuItemGroup,
-  graphActions,
-  isMenuGroup,
-  isSeparator,
-  menuContextDefaults,
-  useGraphMenuActions,
-  useMenu,
-  useMenuActions,
-  useMenuBuilder,
-  useMenuItems,
-  useMenuScoped
-};
-//# sourceMappingURL=index.mjs.map