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

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/util.ts":{"bytes":7939,"imports":[{"path":"effect/Effect","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"src/components/ActionLabel.tsx":{"bytes":3895,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"src/types.ts":{"bytes":4432,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"format":"esm"},"src/components/DropdownMenu.tsx":{"bytes":10853,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/components/ActionLabel.tsx","kind":"import-statement","original":"./ActionLabel"},{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/components/ToolbarMenu.tsx":{"bytes":26367,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"src/types.ts","kind":"import-statement","original":"../types"},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/components/ActionLabel.tsx","kind":"import-statement","original":"./ActionLabel"},{"path":"src/components/DropdownMenu.tsx","kind":"import-statement","original":"./DropdownMenu"},{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/components/Menu.tsx":{"bytes":31593,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/components/ActionLabel.tsx","kind":"import-statement","original":"./ActionLabel"},{"path":"src/components/ToolbarMenu.tsx","kind":"import-statement","original":"./ToolbarMenu"}],"format":"esm"},"src/components/index.ts":{"bytes":368,"imports":[{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/hooks/useMenuActions.ts":{"bytes":6912,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"format":"esm"},"src/hooks/index.ts":{"bytes":394,"imports":[{"path":"src/hooks/useMenuActions.ts","kind":"import-statement","original":"./useMenuActions"}],"format":"esm"},"src/builder.ts":{"bytes":11182,"imports":[{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/index.ts":{"bytes":1214,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util.ts","kind":"import-statement","original":"./util"},{"path":"src/builder.ts","kind":"import-statement","original":"./builder"}],"format":"esm"},"src/translations.ts":{"bytes":968,"imports":[],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":54013},"dist/lib/browser/index.mjs":{"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"effect/Effect","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true}],"exports":["Menu","MenuBuilder","MenuSeparatorType","createGapSeparator","createLineSeparator","createMenuAction","createMenuItemGroup","isMenuGroup","isSeparator","menuContextDefaults","useMenu","useMenuActions","useMenuBuilder","useMenuItems","useMenuScoped"],"entryPoint":"src/index.ts","inputs":{"src/components/Menu.tsx":{"bytesInOutput":6930},"src/util.ts":{"bytesInOutput":1473},"src/components/ActionLabel.tsx":{"bytesInOutput":890},"src/components/ToolbarMenu.tsx":{"bytesInOutput":6383},"src/types.ts":{"bytesInOutput":235},"src/components/DropdownMenu.tsx":{"bytesInOutput":2516},"src/index.ts":{"bytesInOutput":0},"src/hooks/useMenuActions.ts":{"bytesInOutput":955},"src/builder.ts":{"bytesInOutput":2241}},"bytes":22214},"dist/lib/browser/translations.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":523},"dist/lib/browser/translations.mjs":{"imports":[],"exports":["translationKey","translations"],"entryPoint":"src/translations.ts","inputs":{"src/translations.ts":{"bytesInOutput":124}},"bytes":234}}}
+{"inputs":{"src/util.ts":{"bytes":7839,"imports":[{"path":"effect/Effect","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"src/components/ActionLabel.tsx":{"bytes":3891,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"src/types.ts":{"bytes":4616,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"format":"esm"},"src/components/DropdownMenu.tsx":{"bytes":10853,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/components/ActionLabel.tsx","kind":"import-statement","original":"./ActionLabel"},{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/components/ToolbarMenu.tsx":{"bytes":31846,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"src/types.ts","kind":"import-statement","original":"../types"},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/components/ActionLabel.tsx","kind":"import-statement","original":"./ActionLabel"},{"path":"src/components/DropdownMenu.tsx","kind":"import-statement","original":"./DropdownMenu"},{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/components/Menu.tsx":{"bytes":31436,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/components/ActionLabel.tsx","kind":"import-statement","original":"./ActionLabel"},{"path":"src/components/ToolbarMenu.tsx","kind":"import-statement","original":"./ToolbarMenu"}],"format":"esm"},"src/components/index.ts":{"bytes":368,"imports":[{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/hooks/useMenuActions.ts":{"bytes":6912,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"format":"esm"},"src/hooks/useGraphMenuActions.ts":{"bytes":9917,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"src/hooks/useMenuActions.ts","kind":"import-statement","original":"./useMenuActions"}],"format":"esm"},"src/hooks/index.ts":{"bytes":509,"imports":[{"path":"src/hooks/useGraphMenuActions.ts","kind":"import-statement","original":"./useGraphMenuActions"},{"path":"src/hooks/useMenuActions.ts","kind":"import-statement","original":"./useMenuActions"}],"format":"esm"},"src/builder.ts":{"bytes":13815,"imports":[{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/index.ts":{"bytes":1214,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util.ts","kind":"import-statement","original":"./util"},{"path":"src/builder.ts","kind":"import-statement","original":"./builder"}],"format":"esm"},"src/translations.ts":{"bytes":1117,"imports":[],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":63377},"dist/lib/browser/index.mjs":{"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"effect/Effect","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true}],"exports":["Menu","MenuBuilder","MenuSeparatorType","buildGraphMenu","createGapSeparator","createLineSeparator","createMenuAction","createMenuItemGroup","graphActions","isMenuGroup","isSeparator","menuContextDefaults","useGraphMenuActions","useMenu","useMenuActions","useMenuBuilder","useMenuItems","useMenuScoped"],"entryPoint":"src/index.ts","inputs":{"src/components/Menu.tsx":{"bytesInOutput":6895},"src/util.ts":{"bytesInOutput":1473},"src/components/ActionLabel.tsx":{"bytesInOutput":890},"src/components/ToolbarMenu.tsx":{"bytesInOutput":7824},"src/types.ts":{"bytesInOutput":235},"src/components/DropdownMenu.tsx":{"bytesInOutput":2516},"src/index.ts":{"bytesInOutput":0},"src/hooks/useGraphMenuActions.ts":{"bytesInOutput":1454},"src/hooks/useMenuActions.ts":{"bytesInOutput":955},"src/builder.ts":{"bytesInOutput":2728}},"bytes":25692},"dist/lib/browser/translations.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":586},"dist/lib/browser/translations.mjs":{"imports":[],"exports":["translationKey","translations"],"entryPoint":"src/translations.ts","inputs":{"src/translations.ts":{"bytesInOutput":171}},"bytes":281}}}

package/dist/lib/browser/translations.mjs

@@ -3,7 +3,9 @@ var translationKey = "@dxos/react-ui-menu";
 var translations = [
   {
     "en-US": {
-      [translationKey]: {}
+      [translationKey]: {
+        "toolbar-overflow.menu": "More"
+      }
     }
   }
 ];

package/dist/lib/browser/translations.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-menu';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {},\n    },\n  },\n] as const satisfies Resource[];\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB,CAAC;IACrB;EACF;;",
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-menu';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'toolbar-overflow.menu': 'More',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
+  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,yBAAyB;MAC3B;IACF;EACF;;",
   "names": ["translationKey", "translations"]
 }

package/dist/lib/node-esm/index.mjs

@@ -6,7 +6,7 @@ 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";
+import { Icon as Icon2, DropdownMenu as NaturalDropdownMenu2 } from "@dxos/react-ui";
 
 // src/util.ts
 import * as Effect from "effect/Effect";
@@ -96,7 +96,7 @@ var actionLabel = (action, t) => {
 
 // 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 { 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";
@@ -221,46 +221,75 @@ var ActionToolbarItem = ({ __menuScope, action }) => {
     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 { iconOnly, disabled, testId } = group.properties;
   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 = 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__ */ 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"
-    }))
-  };
+  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
-  }, /* @__PURE__ */ React3.createElement(Root, {
+  }, icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.IconButton, {
     variant: "ghost",
     disabled,
-    ...rootProps,
+    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);
@@ -350,16 +379,25 @@ var ToolbarMenuItem = ({ __menuScope, item }) => {
         __menuScope,
         group: item
       });
-    } else {
-      return /* @__PURE__ */ React3.createElement(ToggleGroupToolbarItem, {
-        __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: item
+    action
   });
 };
 
@@ -388,12 +426,7 @@ var MenuDropdownContext = /* @__PURE__ */ createContext({
 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);
-});
+].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);
@@ -446,7 +479,7 @@ var resolveItems = (baseItems, group, entries) => {
       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 });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 89, S: void 0 });
     }
     return replacements[0].items;
   }
@@ -511,7 +544,7 @@ var MenuContentItem = ({ item, onClick, __menuScope }) => {
     ...action.properties?.testId && {
       "data-testid": action.properties.testId
     }
-  }, action.properties?.icon && /* @__PURE__ */ React4.createElement(Icon3, {
+  }, action.properties?.icon && /* @__PURE__ */ React4.createElement(Icon2, {
     icon: action.properties.icon,
     size: iconSize
   }), /* @__PURE__ */ React4.createElement(ActionLabel, {
@@ -560,6 +593,11 @@ var Menu = {
   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";
@@ -591,9 +629,72 @@ var useMenuBuilder = (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;
@@ -603,8 +704,8 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     this._rootId = _rootId;
   }
   root(props) {
-    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'"] });
+    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;
   }
@@ -620,6 +721,12 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     });
     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({
@@ -630,6 +737,9 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     cb(new _MenuBuilderImpl(this._data, id));
     return this;
   }
+  menu(id, cb) {
+    return this.group(id, overflowMenuProperties, cb);
+  }
   subgraph(subgraphOrCb) {
     if (!subgraphOrCb) {
       return this;
@@ -670,13 +780,16 @@ export {
   Menu,
   MenuBuilder,
   MenuSeparatorType,
+  buildGraphMenu,
   createGapSeparator,
   createLineSeparator,
   createMenuAction,
   createMenuItemGroup,
+  graphActions,
   isMenuGroup,
   isSeparator,
   menuContextDefaults,
+  useGraphMenuActions,
   useMenu,
   useMenuActions,
   useMenuBuilder,