@dxos/react-ui-menu 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/dist/lib/node/index.cjs

@@ -40,29 +40,35 @@ __export(node_exports, {
   isMenuGroup: () => isMenuGroup,
   isSeparator: () => isSeparator,
   menuContextDefaults: () => menuContextDefaults,
+  rxFromSignal: () => import_app_graph.rxFromSignal,
   useMenu: () => useMenu,
   useMenuActions: () => useMenuActions,
   useMenuItems: () => useMenuItems
 });
 module.exports = __toCommonJS(node_exports);
+var import_app_graph = require("@dxos/app-graph");
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react2 = __toESM(require("react"));
 var import_keyboard = require("@dxos/keyboard");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_app_graph = require("@dxos/app-graph");
+var import_app_graph2 = require("@dxos/app-graph");
 var import_util = require("@dxos/util");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react_context = require("@radix-ui/react-context");
 var import_react3 = __toESM(require("react"));
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
 var import_react4 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_app_graph2 = require("@dxos/app-graph");
-var import_signals_react = require("@preact/signals-react");
-var import_react5 = require("react");
 var import_app_graph3 = require("@dxos/app-graph");
+var import_rx_react = require("@effect-rx/rx-react");
+var import_react5 = require("react");
+var import_app_graph4 = require("@dxos/app-graph");
 var translationKey = "menus";
 var translations_default = [
   {
@@ -74,19 +80,17 @@ var translations_default = [
 var getShortcut = (action) => {
   return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[(0, import_util.getHostPlatform)()];
 };
-var noop = () => {
-};
-var createMenuAction = (id, properties) => ({
+var createMenuAction = (id, invoke, properties) => ({
   id,
-  type: import_app_graph.ACTION_TYPE,
+  type: import_app_graph2.ACTION_TYPE,
   properties,
-  data: noop
+  data: invoke
 });
 var createMenuItemGroup = (id, properties) => ({
   id,
-  type: import_app_graph.ACTION_GROUP_TYPE,
+  type: import_app_graph2.ACTION_GROUP_TYPE,
   properties,
-  data: import_app_graph.actionGroupSymbol
+  data: import_app_graph2.actionGroupSymbol
 });
 var createGapSeparator = (id = "gap", source = "root") => ({
   nodes: [
@@ -125,98 +129,114 @@ var createLineSeparator = (id = "line", source = "root") => ({
   ]
 });
 var ActionLabel = ({ action }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const shortcut = getShortcut(action);
+    const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("span", {
+      className: "grow truncate"
+    }, (0, import_react_ui2.toLocalizedString)(action.properties.label, t)), shortcut && /* @__PURE__ */ import_react2.default.createElement("span", {
+      className: (0, import_react_ui_theme.mx)("shrink-0", import_react_ui_theme.descriptionText)
+    }, (0, import_keyboard.keySymbols)(shortcut).join("")));
+  } finally {
+    _effect.f();
+  }
+};
+var actionLabel = (action, t) => {
   const shortcut = getShortcut(action);
-  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("span", {
-    className: "grow truncate"
-  }, (0, import_react_ui2.toLocalizedString)(action.properties.label, t)), shortcut && /* @__PURE__ */ import_react2.default.createElement("span", {
-    className: (0, import_react_ui_theme.mx)("shrink-0", import_react_ui_theme.descriptionText)
-  }, (0, import_keyboard.keySymbols)(shortcut).join("")));
+  return `${(0, import_react_ui2.toLocalizedString)(action.properties.label, t)}${shortcut ? ` (${(0, import_keyboard.keySymbols)(shortcut).join("")})` : ""}`;
 };
 var MENU_NAME = "GraphMenu";
 var [createMenuContext, createMenuScope] = (0, import_react_context.createContextScope)(MENU_NAME, []);
 var [MenuContextProvider, useMenu] = createMenuContext(MENU_NAME);
 var menuContextDefaults = {
   iconSize: 5,
-  onAction: () => {
-  },
-  resolveGroupItems: () => null
+  useGroupItems: () => null
 };
 var useMenuScope = createMenuScope();
-var MenuProvider = ({ children, resolveGroupItems = menuContextDefaults.resolveGroupItems, onAction = menuContextDefaults.onAction, iconSize = menuContextDefaults.iconSize, attendableId }) => {
-  const { scope } = useMenuScope(void 0);
-  return /* @__PURE__ */ import_react3.default.createElement(MenuContextProvider, {
-    resolveGroupItems,
-    onAction,
-    iconSize,
-    attendableId,
-    scope
-  }, children);
+var MenuProvider = ({ children, useGroupItems = menuContextDefaults.useGroupItems, iconSize = menuContextDefaults.iconSize, attendableId }) => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { scope } = useMenuScope(void 0);
+    return /* @__PURE__ */ import_react3.default.createElement(MenuContextProvider, {
+      useGroupItems,
+      iconSize,
+      attendableId,
+      scope
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __menuScope) => {
-  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
-  return (0, import_react3.useMemo)(() => propsItems ?? resolveGroupItems?.(group) ?? void 0, [
+  const { useGroupItems } = useMenu(consumerName, __menuScope);
+  const groupItems = useGroupItems(group);
+  return (0, import_react3.useMemo)(() => propsItems ?? groupItems ?? void 0, [
     propsItems,
-    group,
-    resolveGroupItems
+    groupItems
   ]);
 };
 var DropdownMenuItem = ({ item, onClick, __menuScope }) => {
-  const action = item;
-  const handleClick = (0, import_react.useCallback)((event) => onClick(action, event), [
-    action,
-    onClick
-  ]);
-  const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Item, {
-    onClick: handleClick,
-    classNames: "gap-2",
-    disabled: action.properties?.disabled,
-    ...action.properties?.testId && {
-      "data-testid": action.properties.testId
-    }
-  }, action.properties?.icon && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
-    icon: action.properties.icon,
-    size: iconSize
-  }), /* @__PURE__ */ import_react.default.createElement(ActionLabel, {
-    action
-  }));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const action = item;
+    const handleClick = (0, import_react.useCallback)((event) => onClick(action, event), [
+      action,
+      onClick
+    ]);
+    const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
+    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Item, {
+      onClick: handleClick,
+      classNames: "gap-2",
+      disabled: action.properties?.disabled,
+      ...action.properties?.testId && {
+        "data-testid": action.properties.testId
+      }
+    }, action.properties?.icon && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
+      icon: action.properties.icon,
+      size: iconSize
+    }), /* @__PURE__ */ import_react.default.createElement(ActionLabel, {
+      action
+    }));
+  } finally {
+    _effect.f();
+  }
 };
-var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, suppressNextTooltip, children, __menuScope, ...naturalProps }) => {
-  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: open,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
-  });
-  const { onAction } = useMenu("DropdownMenuRoot", __menuScope);
-  const handleActionClick = (0, import_react.useCallback)((action, event) => {
-    if (action.properties?.disabled) {
-      return;
-    }
-    event.stopPropagation();
-    if (suppressNextTooltip) {
-      suppressNextTooltip.current = true;
-    }
-    setOptionsMenuOpen(false);
-    onAction?.(action);
-  }, [
-    onAction
-  ]);
-  const items = useMenuItems(group, propsItems);
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
+var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, caller, children, __menuScope, ...naturalProps }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const handleActionClick = (0, import_react.useCallback)((action, event) => {
+      if (action.properties?.disabled) {
+        return;
       }
-      return setOptionsMenuOpen(nextOpen);
-    },
-    ...naturalProps
-  }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ import_react.default.createElement(DropdownMenuItem, {
-    key: item.id,
-    item,
-    onClick: handleActionClick
-  }))), /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Arrow, null))));
+      event.stopPropagation();
+      setOptionsMenuOpen(false);
+      void action.data?.({
+        parent: group,
+        caller
+      });
+    }, [
+      group,
+      caller
+    ]);
+    const items = useMenuItems(group, propsItems);
+    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Root, {
+      open: optionsMenuOpen,
+      onOpenChange: setOptionsMenuOpen,
+      ...naturalProps
+    }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ import_react.default.createElement(DropdownMenuItem, {
+      key: item.id,
+      item,
+      onClick: handleActionClick
+    }))), /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
 };
 var DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -225,170 +245,189 @@ var DropdownMenu = {
 };
 var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
 var isSeparator = (node) => node.type === MenuSeparatorType;
-var isMenuGroup = (node) => node.type === import_app_graph2.ACTION_GROUP_TYPE;
+var isMenuGroup = (node) => node.type === import_app_graph3.ACTION_GROUP_TYPE;
 var ActionToolbarItem = ({ action, __menuScope }) => {
-  const { onAction, iconSize } = useMenu("ActionToolbarItem", __menuScope);
-  const handleClick = (0, import_react4.useCallback)(() => {
-    onAction?.(action);
-  }, [
-    action,
-    onAction
-  ]);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const Root = icon ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-      action
-    })
-  } : {
-    children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { iconSize } = useMenu("ActionToolbarItem", __menuScope);
+    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+    const handleClick = (0, import_react4.useCallback)(() => action.data?.(), [
       action
-    })
-  };
-  return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
-    key: action.id,
-    disabled,
-    onClick: handleClick,
-    variant: "ghost",
-    ...testId && {
-      "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+    ]);
+    const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+    const Root = icon ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
+    const rootProps = icon ? {
+      icon,
+      size: iconSize,
+      iconOnly,
+      label: actionLabel(action, t)
+    } : {
+      children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+        action
+      })
+    };
+    return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
+      key: action.id,
+      disabled,
+      onClick: handleClick,
+      variant: "ghost",
+      ...testId && {
+        "data-testid": testId
+      },
+      ...rootProps,
+      classNames
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  const { iconOnly, disabled, testId } = group.properties;
-  const suppressNextTooltip = (0, import_react4.useRef)(false);
-  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 ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
-  const label = /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-    action: group.properties.applyActive && activeItem ? activeItem : group
-  });
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label,
-    caretDown: true,
-    suppressNextTooltip
-  } : {
-    children: /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, label, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
-      size: 3,
-      icon: "ph--caret-down--bold",
-      classNames: "mis-1"
-    }))
-  };
-  return /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Root, {
-    group,
-    items,
-    suppressNextTooltip
-  }, /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react4.default.createElement(Root, {
-    variant: "ghost",
-    disabled,
-    ...rootProps,
-    ...testId && {
-      "data-testid": testId
-    }
-  })));
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { iconOnly, disabled, testId } = group.properties;
+    const { t } = (0, import_react_ui3.useTranslation)(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 ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
+    const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
+    const rootProps = icon ? {
+      icon,
+      size: iconSize,
+      iconOnly,
+      label: actionLabel(labelAction, t),
+      caretDown: true
+    } : {
+      children: /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+        action: labelAction
+      }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+        size: 3,
+        icon: "ph--caret-down--bold",
+        classNames: "mis-1"
+      }))
+    };
+    return /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Root, {
+      group,
+      items
+    }, /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ import_react4.default.createElement(Root, {
+      variant: "ghost",
+      disabled,
+      ...rootProps,
+      ...testId && {
+        "data-testid": testId
+      }
+    })));
+  } finally {
+    _effect.f();
+  }
 };
-var ToggleGroupItem = ({ action, __menuScope }) => {
-  const { iconSize, onAction } = useMenu("ToggleGroupItem", __menuScope);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const handleClick = (0, import_react4.useCallback)(() => {
-    onAction?.(action);
-  }, [
-    action,
-    onAction
-  ]);
-  const Root = icon ? import_react_ui3.Toolbar.ToggleGroupIconItem : import_react_ui3.Toolbar.ToggleGroupItem;
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-      action
-    })
-  } : {
-    children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-      action
-    })
-  };
-  return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
-    key: action.id,
-    value: action.id,
-    disabled,
-    onClick: handleClick,
-    variant: "ghost",
-    ...testId && {
-      "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+var ToggleGroupItem = ({ group, action, __menuScope }) => {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { iconSize } = useMenu("ToggleGroupItem", __menuScope);
+    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+    const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+    const handleClick = (0, import_react4.useCallback)(() => action.data?.({
+      parent: group
+    }), [
+      action,
+      group
+    ]);
+    const Root = icon ? import_react_ui3.Toolbar.ToggleGroupIconItem : import_react_ui3.Toolbar.ToggleGroupItem;
+    const rootProps = icon ? {
+      icon,
+      size: iconSize,
+      iconOnly,
+      label: actionLabel(action, t)
+    } : {
+      children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+        action
+      })
+    };
+    return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
+      key: action.id,
+      value: action.id,
+      disabled,
+      onClick: handleClick,
+      variant: "ghost",
+      ...testId && {
+        "data-testid": testId
+      },
+      ...rootProps,
+      classNames
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var ToggleGroupToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  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__ */ import_react4.default.createElement(
-      import_react_ui3.Toolbar.ToggleGroup,
-      {
-        type: selectCardinality,
-        value
-      },
-      // TODO(thure): Handle other menu item types.
-      items.map((action) => /* @__PURE__ */ import_react4.default.createElement(ToggleGroupItem, {
-        key: action.id,
-        action
-      }))
-    )
-  );
+  var _effect = (0, import_tracking4.useSignals)();
+  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__ */ import_react4.default.createElement(
+        import_react_ui3.Toolbar.ToggleGroup,
+        {
+          type: selectCardinality,
+          value
+        },
+        // TODO(thure): Handle other menu item types.
+        items.map((action) => /* @__PURE__ */ import_react4.default.createElement(ToggleGroupItem, {
+          key: action.id,
+          group,
+          action
+        }))
+      )
+    );
+  } finally {
+    _effect.f();
+  }
 };
 var ToolbarMenu = ({ __menuScope, classNames, ...props }) => {
-  const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
-  const { attendableId } = useMenu("ToolbarMenu", __menuScope);
-  const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Root, {
-    ...props,
-    classNames: [
-      "p-0 pointer-fine:p-1 attention-surface",
-      !hasAttention && "opacity-20",
-      classNames
-    ]
-  }, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Separator, {
-    key: i,
-    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__ */ import_react4.default.createElement(DropdownMenuToolbarItem, {
-      key: item.id,
-      group: item
-    })
-  ) : (
-    // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-    /* @__PURE__ */ import_react4.default.createElement(ToggleGroupToolbarItem, {
-      key: item.id,
-      group: item
-    })
-  ) : (
-    // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-    /* @__PURE__ */ import_react4.default.createElement(ActionToolbarItem, {
-      key: item.id,
-      action: item
-    })
-  )));
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
+    const { attendableId } = useMenu("ToolbarMenu", __menuScope);
+    const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Root, {
+      ...props,
+      classNames: [
+        "p-1",
+        attendableId && !hasAttention && "[&>*]:opacity-20 !bg-transparent",
+        classNames
+      ]
+    }, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Separator, {
+      key: i,
+      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__ */ import_react4.default.createElement(DropdownMenuToolbarItem, {
+        key: item.id,
+        group: item
+      })
+    ) : (
+      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+      /* @__PURE__ */ import_react4.default.createElement(ToggleGroupToolbarItem, {
+        key: item.id,
+        group: item
+      })
+    ) : (
+      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+      /* @__PURE__ */ import_react4.default.createElement(ActionToolbarItem, {
+        key: item.id,
+        action: item
+      })
+    )));
+  } finally {
+    _effect.f();
+  }
 };
 var edgesArrayToRecord = (edges) => {
   return Object.fromEntries(Object.entries(edges.reduce((acc, { source, target }) => {
@@ -413,35 +452,30 @@ var edgesArrayToRecord = (edges) => {
       targetEdges.inbound.push(source);
     }
     return acc;
-  }, {})).map(([id, { outbound }]) => [
-    id,
-    outbound
-  ]));
+  }, {})));
 };
-var useMenuActions = (actionCreator) => {
-  const initialMenuGraphProps = actionCreator();
-  const [graph] = (0, import_react5.useState)(new import_app_graph3.Graph({
-    nodes: initialMenuGraphProps.nodes,
-    edges: edgesArrayToRecord(initialMenuGraphProps.edges)
+var useMenuActions = (props) => {
+  const registry = (0, import_react5.useContext)(import_rx_react.RegistryContext);
+  const menuGraphProps = (0, import_rx_react.useRxValue)(props);
+  const [graph] = (0, import_react5.useState)(new import_app_graph4.Graph({
+    registry,
+    nodes: menuGraphProps.nodes,
+    edges: edgesArrayToRecord(menuGraphProps.edges)
   }));
-  (0, import_signals_react.useSignalEffect)(() => {
-    const menuGraphProps = actionCreator();
-    graph._addNodes(menuGraphProps.nodes);
-    graph._addEdges(menuGraphProps.edges);
-  });
-  const resolveGroupItems = (0, import_react5.useCallback)((sourceNode = graph.root) => {
-    if (graph) {
-      return graph.nodes(sourceNode, {
-        filter: (n) => true
-      }) || null;
-    } else {
-      return null;
-    }
+  (0, import_react5.useEffect)(() => {
+    graph.addNodes(menuGraphProps.nodes);
+    graph.addEdges(menuGraphProps.edges);
+  }, [
+    menuGraphProps
+  ]);
+  const useGroupItems = (0, import_react5.useCallback)((sourceNode) => {
+    const items = (0, import_rx_react.useRxValue)(graph.connections(sourceNode?.id || import_app_graph4.ROOT_ID));
+    return items;
   }, [
     graph
   ]);
   return {
-    resolveGroupItems
+    useGroupItems
   };
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -458,6 +492,7 @@ var useMenuActions = (actionCreator) => {
   isMenuGroup,
   isSeparator,
   menuContextDefaults,
+  rxFromSignal,
   useMenu,
   useMenuActions,
   useMenuItems