@dxos/react-ui-menu 0.8.4-main.40e3dcdf1b → 0.8.4-main.422d1c7879

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/util.ts":{"bytes":7990,"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/translations.ts":{"bytes":1055,"imports":[],"format":"esm"},"src/components/ActionLabel.tsx":{"bytes":3991,"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":"src/translations.ts","kind":"import-statement","original":"../translations"},{"path":"src/util.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"src/types.ts":{"bytes":4392,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"format":"esm"},"src/components/DropdownMenu.tsx":{"bytes":10952,"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":24943,"imports":[{"path":"react","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":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/translations.ts","kind":"import-statement","original":"../translations"},{"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":31537,"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":455,"imports":[{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/hooks/useMenuActions.ts":{"bytes":5090,"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":476,"imports":[{"path":"src/hooks/useMenuActions.ts","kind":"import-statement","original":"./useMenuActions"}],"format":"esm"},"src/builder.ts":{"bytes":9449,"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":1218,"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"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":52594},"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":"react","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":"@dxos/ui-theme","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","useMenuItems","useMenuScoped"],"entryPoint":"src/index.ts","inputs":{"src/components/Menu.tsx":{"bytesInOutput":6959},"src/util.ts":{"bytesInOutput":1475},"src/components/ActionLabel.tsx":{"bytesInOutput":842},"src/translations.ts":{"bytesInOutput":124},"src/components/ToolbarMenu.tsx":{"bytesInOutput":6105},"src/types.ts":{"bytesInOutput":235},"src/components/DropdownMenu.tsx":{"bytesInOutput":2516},"src/index.ts":{"bytesInOutput":0},"src/hooks/useMenuActions.ts":{"bytesInOutput":929},"src/builder.ts":{"bytesInOutput":2100}},"bytes":21917}}}
+{"inputs":{"src/util.ts":{"bytes":7990,"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/translations.ts":{"bytes":1055,"imports":[],"format":"esm"},"src/components/ActionLabel.tsx":{"bytes":3991,"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":"src/translations.ts","kind":"import-statement","original":"../translations"},{"path":"src/util.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"src/types.ts":{"bytes":4508,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"format":"esm"},"src/components/DropdownMenu.tsx":{"bytes":10952,"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":25150,"imports":[{"path":"react","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":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/translations.ts","kind":"import-statement","original":"../translations"},{"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":31685,"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":455,"imports":[{"path":"src/components/Menu.tsx","kind":"import-statement","original":"./Menu"}],"format":"esm"},"src/hooks/useMenuActions.ts":{"bytes":5007,"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":476,"imports":[{"path":"src/hooks/useMenuActions.ts","kind":"import-statement","original":"./useMenuActions"}],"format":"esm"},"src/builder.ts":{"bytes":11391,"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":1290,"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"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":54095},"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":"react","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":"@dxos/ui-theme","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","useMenuItems","useMenuScoped"],"entryPoint":"src/index.ts","inputs":{"src/components/Menu.tsx":{"bytesInOutput":6967},"src/util.ts":{"bytesInOutput":1475},"src/components/ActionLabel.tsx":{"bytesInOutput":842},"src/translations.ts":{"bytesInOutput":124},"src/components/ToolbarMenu.tsx":{"bytesInOutput":6090},"src/types.ts":{"bytesInOutput":235},"src/components/DropdownMenu.tsx":{"bytesInOutput":2516},"src/index.ts":{"bytesInOutput":0},"src/hooks/useMenuActions.ts":{"bytesInOutput":810},"src/builder.ts":{"bytesInOutput":2299}},"bytes":21990}}}

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

@@ -4,7 +4,7 @@ import { createRequire } from 'node:module';const require = createRequire(import
 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, { useCallback as useCallback3, useContext, useMemo } from "react";
+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";
 
@@ -106,10 +106,10 @@ var actionLabel = (action, t) => {
 };
 
 // src/components/ToolbarMenu.tsx
-import React3, { Fragment, useCallback as useCallback2 } from "react";
+import React3, { useCallback as useCallback2 } from "react";
 import { Icon as Icon2, Toolbar as NaturalToolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
-import { mx as mx2, textBlockWidth, toolbarLayout } from "@dxos/ui-theme";
+import { composable, composableProps } from "@dxos/ui-theme";
 
 // src/types.ts
 import { Node as Node2 } from "@dxos/app-graph";
@@ -189,21 +189,11 @@ var DropdownMenu = {
 };
 
 // src/components/ToolbarMenu.tsx
-var ActionToolbarItem = ({ action, __menuScope }) => {
+var ActionToolbarItem = ({ __menuScope, action }) => {
   const { iconSize, onAction } = useMenuScoped("ActionToolbarItem", __menuScope);
   const { t } = useTranslation2(translationKey);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames, variant } = action.properties;
-  const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label: actionLabel(action, t)
-  } : {
-    children: /* @__PURE__ */ React3.createElement(ActionLabel, {
-      action
-    })
-  };
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const buttonVariant = action.properties.variant === "primary" ? "primary" : "ghost";
   const handleClick = useCallback2(() => {
     if (onAction) {
       onAction(action, {});
@@ -214,19 +204,33 @@ var ActionToolbarItem = ({ action, __menuScope }) => {
     action,
     onAction
   ]);
-  return hidden ? null : /* @__PURE__ */ React3.createElement(Root, {
-    key: action.id,
+  const commonProps = {
+    variant: buttonVariant,
     disabled,
+    classNames,
     onClick: handleClick,
-    variant: 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,
+    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 } = useMenuScoped("DropdownMenuToolbarItem", __menuScope);
@@ -265,7 +269,7 @@ var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
     }
   })));
 };
-var ToggleGroupItem = ({ group, action, __menuScope }) => {
+var ToggleGroupItem = ({ __menuScope, group, action }) => {
   const { iconSize, onAction } = useMenuScoped("ToggleGroupItem", __menuScope);
   const { t } = useTranslation2(translationKey);
   const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
@@ -284,74 +288,63 @@ 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__ */ React3.createElement(ActionLabel, {
-      action
-    })
-  };
-  return hidden ? null : /* @__PURE__ */ React3.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,
+    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__ */ React3.createElement(
-      NaturalToolbar.ToggleGroup,
-      {
-        type: selectCardinality,
-        value
-      },
-      // TODO(thure): Handle other menu item types.
-      items.map((action) => /* @__PURE__ */ React3.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 } = useMenuScoped("ToolbarMenu", __menuScope);
   const { hasAttention } = useAttention(attendableId);
-  const InnerRoot = textBlockWidthProp ? "div" : Fragment;
-  const innerRootProps = textBlockWidthProp ? {
-    role: "none",
-    className: mx2(textBlockWidth, toolbarLayout, "h-full")
-  } : {};
   return /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
-    ...props,
-    classNames: [
-      attendableId,
-      classNames
-    ],
+    ...composableProps(props, {
+      classNames: attendableId
+    }),
     disabled: !alwaysActive && !hasAttention,
-    layoutManaged: textBlockWidthProp
-  }, /* @__PURE__ */ React3.createElement(InnerRoot, innerRootProps, items?.map((item, i) => /* @__PURE__ */ React3.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__ */ React3.createElement(NaturalToolbar.Separator, {
       variant: item.properties.variant
@@ -360,15 +353,18 @@ var ToolbarMenuItem = ({ item }) => {
   if (isMenuGroup(item)) {
     if (item.properties.variant === "dropdownMenu") {
       return /* @__PURE__ */ React3.createElement(DropdownMenuToolbarItem, {
+        __menuScope,
         group: item
       });
     } else {
       return /* @__PURE__ */ React3.createElement(ToggleGroupToolbarItem, {
+        __menuScope,
         group: item
       });
     }
   }
   return /* @__PURE__ */ React3.createElement(ActionToolbarItem, {
+    __menuScope,
     action: item
   });
 };
@@ -391,7 +387,7 @@ var menuContextDefaults = {
 };
 var [MenuContextProvider, useMenuScoped] = createMenuContext(MENU_NAME, menuContextDefaults);
 var useMenuScope = createMenuScope();
-var MenuDropdownContext = /* @__PURE__ */ React4.createContext({
+var MenuDropdownContext = /* @__PURE__ */ createContext({
   closeMenu: () => {
   }
 });
@@ -458,7 +454,7 @@ var resolveItems = (baseItems, group, entries) => {
         using: replacements[0].id
       }, {
         F: __dxlog_file,
-        L: 152,
+        L: 151,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -577,23 +573,21 @@ var Menu = {
 
 // src/hooks/useMenuActions.ts
 import { RegistryContext as RegistryContext2, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import { useCallback as useCallback4, useContext as useContext2, useRef } from "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 graphRef = useRef(null);
-  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+  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;
+    return newGraph;
+  }, [
+    registry,
+    menuGraphProps
+  ]);
   const items = useCallback4((group) => {
     return graph.connections(group?.id || Node3.RootId, "child");
   }, [
@@ -618,7 +612,7 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
   root(props) {
     invariant(this._rootId === "root", "Root group can only be at the top level", {
       F: __dxlog_file2,
-      L: 41,
+      L: 61,
       S: this,
       A: [
         "this._rootId === 'root'",
@@ -627,7 +621,7 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     });
     invariant(this._data.nodes.find((node) => node.id === "root") === void 0, "Root group can only be created once", {
       F: __dxlog_file2,
-      L: 42,
+      L: 62,
       S: this,
       A: [
         "this._data.nodes.find((node) => node.id === 'root') === undefined",
@@ -659,13 +653,20 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     cb(new _MenuBuilderImpl(this._data, id));
     return this;
   }
-  subgraph(subgraph) {
-    this._data.nodes.push(...subgraph.nodes);
-    this._data.edges.push(...subgraph.edges);
+  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(id, variant = "gap") {
-    id ??= `separator-${++this._separatorCount}`;
+  separator(variant = "gap") {
+    const id = `separator-${++this._separatorCount}`;
     this._data.nodes.push({
       id,
       type: MenuSeparatorType,