@dxos/react-ui-menu 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dist/lib/index.mjs

@@ -1,40 +1,147 @@
+import { cloneElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { keySymbols } from "@dxos/react-focus";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Icon from "@dxos/react-ui/Icon";
+import * as Menu from "@dxos/react-ui/Menu";
+import * as Theme from "@dxos/react-ui/Theme";
+import * as VirtualAnchor from "@dxos/react-ui/VirtualAnchor";
+import { resolveKeyBinding } from "@dxos/util";
+import { translationKey } from "#translations";
+import * as Atom from "effect/reactivity/Atom";
+import * as AppGraphNode from "@dxos/app-graph/AppGraphNode";
+import * as GraphNode from "@dxos/graph/GraphNode";
 import { useAtomValue } from "@effect/atom-react/Hooks";
-import { createContextScope } from "@radix-ui/react-context";
-import * as Atom from "effect/unstable/reactivity/Atom";
-import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { RegistryContext } from "@effect/atom-react/RegistryContext";
+import * as AppGraph from "@dxos/app-graph/AppGraph";
 import { log } from "@dxos/log";
-import { keySymbols } from "@dxos/keyboard";
-import { DropdownMenu, Icon, Input, Toolbar, Tooltip, composable, composableProps, toLocalizedString, useTranslation } from "@dxos/react-ui";
 import * as Effect from "effect/Effect";
-import * as AppGraphNode from "@dxos/app-graph/AppGraphNode";
-import { EffectEx } from "@dxos/effect";
-import { getHostPlatform } from "@dxos/util";
-import { RegistryContext } from "@effect/atom-react/RegistryContext";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { mx } from "@dxos/ui-theme";
-import { translationKey } from "#translations";
+import * as EffectEx from "@dxos/effect/EffectEx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useAttention } from "@dxos/react-ui-attention";
-import * as GraphNode from "@dxos/graph/GraphNode";
-import * as AppGraph from "@dxos/app-graph/AppGraph";
+import * as Button from "@dxos/react-ui/Button";
+import * as Input from "@dxos/react-ui/Input";
+import * as ToggleGroup from "@dxos/react-ui/ToggleGroup";
+import * as Toolbar from "@dxos/react-ui/Toolbar";
+import * as Tooltip from "@dxos/react-ui/Tooltip";
+import * as Util from "@dxos/react-ui/Util";
+import { mx } from "@dxos/ui-theme";
 import { invariant } from "@dxos/invariant";
-//#region src/components/MenuContext.ts
-var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/components/MenuContext.ts";
-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 = createContext({ closeMenu: () => {} });
+//#region src/presentation.ts
+/**
+* Merges an action's `presentation[surface]` chrome override (if any) into its properties, letting a
+* single action declare multiple dispositions yet render appropriately in each surface — e.g. a
+* primary toolbar button and a plain nav-tree row from the same definition.
+*/
+var applyPresentation = (action, surface) => {
+	const presentation = action.properties.presentation?.[surface];
+	if (!presentation) return action;
+	return {
+		...action,
+		properties: {
+			...action.properties,
+			...presentation
+		}
+	};
+};
+//#endregion
+//#region src/hooks/useMenuActions.ts
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/hooks/useMenuActions.ts";
+var DEFAULT_PRIORITY = 100;
+var EMPTY_GRAPH = Atom.make({
+	nodes: [],
+	edges: []
+});
+/**
+* The graph behind a menu, rebuilt when `deps` change. Its nodes stay pinned while the menu is mounted,
+* taken on commit so a render React discards leaves nothing behind.
+*/
+var useMenuGraph = (build, deps) => {
+	const graph = useMemo(build, deps);
+	useLayoutEffect(() => graph ? AppGraph.retain(graph) : void 0, [graph]);
+	return graph;
+};
+/** A `MenuActions` over a given accessor, for sources that are not an action graph (tests, fixtures). */
+var makeMenuActions = ({ items, ...options }) => ({
+	items,
+	contributions: Atom.make(/* @__PURE__ */ new Map()),
+	...options
+});
+/**
+* The menu over an action graph. Omit `props` for a menu with no items of its own, filled entirely by
+* contributions (a card whose actions its children register).
+*/
+var useMenuActions = (props = EMPTY_GRAPH, options = {}) => {
+	const registry = useContext(RegistryContext);
+	const menuGraphProps = useAtomValue(props);
+	const graph = useMenuGraph(() => {
+		const newGraph = AppGraph.make({ registry });
+		AppGraph.addNodes(newGraph, menuGraphProps.nodes);
+		AppGraph.addEdges(newGraph, menuGraphProps.edges);
+		return newGraph;
+	}, [registry, menuGraphProps]);
+	const items = useCallback((group) => {
+		return graph.connections(group?.id || GraphNode.RootId, "child");
+	}, [graph]);
+	const contributions = useMemo(() => Atom.make(/* @__PURE__ */ new Map()), []);
+	useLayoutEffect(() => registry.mount(contributions), [registry, contributions]);
+	const { onAction, caller, iconSize } = options;
+	return useMemo(() => ({
+		items,
+		contributions,
+		onAction,
+		caller,
+		iconSize
+	}), [
+		items,
+		contributions,
+		onAction,
+		caller,
+		iconSize
+	]);
+};
+/**
+* Convenience wrapper around `useMenuActions` that creates the backing atom inline.
+* Pass a builder thunk and a dependency list — the hook memoizes `Atom.make(build)` and threads
+* it through `useMenuActions`. Saves the `useMemo(() => Atom.make(...), deps)` boilerplate when
+* the action graph is composed from local state (e.g. a toolbar driven by component state).
+*
+* Read reactive state via `get` inside the builder; `deps` should hold only stable references.
+*/
+var useMenuBuilder = (build, deps, options) => {
+	return useMenuActions(useMemo(() => Atom.make(build), deps), options);
+};
+/**
+* Registers items with a menu another component owns, for as long as the caller is mounted. The
+* owner hands its `MenuActions` down (props or its own context); there is no menu provider.
+*/
+var useMenuContribution = (menu, props) => {
+	const registry = useContext(RegistryContext);
+	const { id, mode, priority = DEFAULT_PRIORITY, items, groupFilter } = props;
+	useEffect(() => {
+		if (!menu) return;
+		const update = (change) => registry.set(menu.contributions, change(registry.get(menu.contributions)));
+		update((previous) => new Map(previous).set(id, {
+			id,
+			mode,
+			priority,
+			items,
+			groupFilter
+		}));
+		return () => update((previous) => {
+			const next = new Map(previous);
+			next.delete(id);
+			return next;
+		});
+	}, [
+		registry,
+		menu,
+		id,
+		mode,
+		priority,
+		items,
+		groupFilter
+	]);
+};
 var sortMenuItems = (items) => [...items].sort((a, b) => a.priority !== b.priority ? a.priority - b.priority : a.id.localeCompare(b.id));
 var resolveItems = (baseItems, group, entries) => {
 	const applicable = [...entries.values()].filter((entry) => !entry.groupFilter || entry.groupFilter(group));
@@ -48,7 +155,7 @@ var resolveItems = (baseItems, group, entries) => {
 		}, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file$1,
-			L: 85,
+			L: 168,
 			S: void 0
 		});
 		return replacements[0].items;
@@ -57,10 +164,13 @@ var resolveItems = (baseItems, group, entries) => {
 	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();
+/**
+* A group's items (the root's when `group` is undefined), with the menu's contributions applied;
+* `propsItems` stands in for the group's own items when given.
+*/
+var useMenuItems = (menu, group, propsItems) => {
+	const groupItems = useAtomValue(menu.items(group));
+	const entries = useAtomValue(menu.contributions);
 	const baseItems = useMemo(() => propsItems ?? groupItems ?? null, [propsItems, groupItems]);
 	return useMemo(() => resolveItems(baseItems, group, entries), [
 		baseItems,
@@ -68,10 +178,73 @@ var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __m
 		entries
 	]) ?? void 0;
 };
-/** Returns the menu context without Radix scope. */
-var useMenu = (consumerName) => {
-	return useMenuScoped(consumerName, void 0);
+//#endregion
+//#region src/hooks/useGraphMenuActions.ts
+/**
+* Flatten a node's contributed actions (and nested {@link AppGraphNode.ActionGroup}s) into the
+* `{ nodes, edges }` an {@link useMenuActions} / `Menu` consumes. The action nodes are spliced
+* verbatim, so their Effect `data` (and captured `_actionContext`) execute via `executeMenuAction`
+* without any `onAction` wiring.
+*
+* Pure over a `resolve` function so it is testable without a live graph; `resolve(id)` returns the
+* direct actions for `id` (a node id at the top level, a group id when expanding a group).
+*/
+var buildGraphMenu = (resolve, nodeId, options = {}) => {
+	const { rootId = GraphNode.RootId, filter, surface } = 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(surface ? applyPresentation(action, surface) : action);
+			if (AppGraphNode.isActionGroup(action)) visit(action.id, action.id);
+		}
+	};
+	visit(rootId, nodeId);
+	return {
+		nodes,
+		edges
+	};
 };
+/**
+* Read a node's contributed actions from the app-graph as menu `ActionGraphProps`, for splicing into a
+* hand-built toolbar via `MenuBuilder.subgraph(graphActions(graph, get, nodeId))`. Reactive: reads the
+* graph's action atoms through `get`, so contributed actions appear/disappear as extensions update.
+*
+* @idiom org.dxos.react-ui-menu.graphActionsToolbar
+*   applies: Splicing a node's app-graph-contributed toolbar actions into a hand-built object toolbar
+*   instead-of: Reading `graph.actions(nodeId)` and filtering/wiring `nodes`/`edges` by hand in every toolbar
+*   uses: {@link graphActions}, {@link MenuBuilder}, {@link useMenuBuilder}
+*   related: org.dxos.react-ui-menu.toolbarMenu
+*/
+var graphActions = (graph, get, nodeId, options) => graph && nodeId ? buildGraphMenu((id) => get(graph.actions(id)), nodeId, options) : {
+	nodes: [],
+	edges: []
+};
+/**
+* Menu actions sourced entirely from a node's app-graph contributions — the common "show every action
+* the graph offers for this object" toolbar/menu. Compose with hand-built items via {@link graphActions}.
+*/
+var useGraphMenuActions = (graph, nodeId, options) => {
+	return useMenuActions(useMemo(() => Atom.make((get) => graphActions(graph, get, nodeId, options)), [
+		graph,
+		nodeId,
+		options?.rootId
+	]), options);
+};
+//#endregion
+//#region src/types.ts
+var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
+var isSeparator = (node) => node.type === MenuSeparatorType;
+var isMenuGroup = (node) => node.type === AppGraphNode.ActionGroupType;
 //#endregion
 //#region src/util.ts
 /**
@@ -84,8 +257,9 @@ var executeMenuAction = async (action, params = {}) => {
 	await EffectEx.runAndForwardErrors(effect);
 };
 var getShortcut = (action) => {
-	return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[getHostPlatform()];
+	return resolveKeyBinding(action.properties?.keyBinding);
 };
+var fallbackIcon = "ph--circle-dashed--regular";
 var createMenuAction = (id, invoke, properties) => ({
 	id,
 	type: AppGraphNode.ActionType,
@@ -125,75 +299,28 @@ var createLineSeparator = (id = "line", source = "root") => ({
 	}]
 });
 //#endregion
-//#region src/components/action-label.ts
-var actionLabel = (action, t) => {
-	const shortcut = getShortcut(action);
-	return `${toLocalizedString(action.properties.label, t)}${shortcut ? ` (${keySymbols(shortcut).join("")})` : ""}`;
-};
-//#endregion
-//#region src/types.ts
-var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
-var isSeparator = (node) => node.type === MenuSeparatorType;
-var isMenuGroup = (node) => node.type === AppGraphNode.ActionGroupType;
-//#endregion
-//#region src/components/ActionLabel.tsx
-var ActionLabel = ({ action }) => {
-	const { t } = useTranslation(translationKey);
-	const shortcut = getShortcut(action);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		className: "grow truncate",
-		children: toLocalizedString(action.properties.label, t)
-	}), shortcut && /* @__PURE__ */ jsx("span", {
-		className: mx("shrink-0", "text-description"),
-		children: keySymbols(shortcut).join("")
-	})] });
-};
-//#endregion
-//#region src/components/DropdownMenu.tsx
-var DropdownMenuItem = ({ item, group, onClick, __menuScope }) => {
-	const action = item;
-	const handleClick = useCallback((event) => onClick(action, event), [action, onClick]);
-	const { iconSize } = useMenuScoped("DropdownMenuItem", __menuScope);
-	const checkable = typeof action.properties?.checked === "boolean";
-	const multiple = group?.properties?.selectCardinality === "multiple";
-	const role = multiple ? "menuitemcheckbox" : "menuitemradio";
-	const handleSelect = useCallback((event) => multiple && event.preventDefault(), [multiple]);
-	return /* @__PURE__ */ jsxs(DropdownMenu.Item, {
-		onClick: handleClick,
-		onSelect: handleSelect,
-		classNames: "gap-2",
-		disabled: action.properties?.disabled,
-		...checkable && {
-			role,
-			"aria-checked": !!action.properties?.checked
-		},
-		...action.properties?.testId && { "data-testid": action.properties.testId },
-		children: [
-			action.properties?.icon && /* @__PURE__ */ jsx(Icon, {
-				icon: action.properties.icon,
-				size: iconSize,
-				classNames: mx(action.properties.spin && "animate-spin", action.properties.iconClassNames)
-			}),
-			/* @__PURE__ */ jsx(ActionLabel, { action }),
-			action.properties?.checked && /* @__PURE__ */ jsx(Icon, {
-				icon: "ph--check--regular",
-				size: iconSize,
-				classNames: "ms-auto"
-			})
-		]
-	});
+//#region src/components/ActionMenu.tsx
+var isMultiSelect = (group) => group?.properties?.selectCardinality === "multiple";
+/** An action that declares `checked` is a select-group member (radio, or checkbox in a multi-select group). */
+var isCheckable = (item) => !isSeparator(item) && !isMenuGroup(item) && typeof item.properties?.checked === "boolean";
+/** The row data Next's item parts render: the localized label and the platform's shortcut glyphs. */
+var useItemData = (id, properties) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const shortcut = resolveKeyBinding(properties.keyBinding);
+	return {
+		value: id,
+		label: Theme.toLocalizedString(properties.label, t),
+		icon: properties.icon,
+		shortcut: shortcut ? keySymbols(shortcut).join("") : void 0,
+		disabled: properties.disabled
+	};
 };
-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) => {
+/** Runs the action on click, which zag also dispatches for Enter, so keyboard and pointer share one path. */
+var useInvoke = (menu, action, group) => {
+	const { onAction, caller } = menu;
+	return useCallback((event) => {
 		if (action.properties?.disabled) return;
 		event.stopPropagation();
-		if (group?.properties?.selectCardinality !== "multiple") setOptionsMenuOpen(false);
 		const params = {
 			parent: group,
 			caller,
@@ -202,36 +329,257 @@ var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenCha
 		if (onAction) onAction(action, params);
 		else executeMenuAction(action, params);
 	}, [
+		action,
 		group,
 		caller,
 		onAction
 	]);
-	const items = useMenuItems(group, propsItems);
-	return /* @__PURE__ */ jsxs(DropdownMenu.Root, {
-		open: optionsMenuOpen,
-		onOpenChange: setOptionsMenuOpen,
-		...naturalProps,
-		children: [children, /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [/* @__PURE__ */ jsx(DropdownMenu.Viewport, { children: items?.map((item) => isSeparator(item) ? /* @__PURE__ */ jsx(DropdownMenu.Separator, {}, item.id) : /* @__PURE__ */ jsx(DropdownMenuItem, {
-			item,
-			group,
-			onClick: handleActionClick
-		}, item.id)) }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})] }) })]
+};
+var ItemIcon = ({ menu, action }) => action.properties?.icon ? /* @__PURE__ */ jsx(Menu.ItemIcon, {
+	spin: action.properties.spin,
+	size: menu.iconSize,
+	classNames: action.properties.iconClassNames
+}) : null;
+var ActionMenuItem = ({ menu, action, group }) => {
+	const item = useItemData(action.id, action.properties);
+	const handleClick = useInvoke(menu, action, group);
+	return /* @__PURE__ */ jsxs(Menu.Item, {
+		item,
+		onClick: handleClick,
+		closeOnSelect: !isMultiSelect(group),
+		...action.properties?.testId && { "data-testid": action.properties.testId },
+		children: [
+			/* @__PURE__ */ jsx(ItemIcon, {
+				menu,
+				action
+			}),
+			/* @__PURE__ */ jsx(Menu.ItemText, {}),
+			item.shortcut && /* @__PURE__ */ jsx(Menu.ItemShortcut, {})
+		]
 	});
 };
-var DropdownMenu$1 = {
-	Root: DropdownMenuRoot,
-	Trigger: DropdownMenu.Trigger,
-	VirtualTrigger: DropdownMenu.VirtualTrigger
+var ActionCheckboxItem = ({ menu, action, group }) => {
+	const item = useItemData(action.id, action.properties);
+	const handleClick = useInvoke(menu, action, group);
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		item,
+		checked: !!action.properties.checked,
+		onClick: handleClick,
+		closeOnSelect: false,
+		...action.properties?.testId && { "data-testid": action.properties.testId },
+		children: [
+			/* @__PURE__ */ jsx(ItemIcon, {
+				menu,
+				action
+			}),
+			/* @__PURE__ */ jsx(Menu.ItemText, {}),
+			/* @__PURE__ */ jsx(Menu.ItemIndicator, {})
+		]
+	});
+};
+var ActionRadioItem = ({ menu, action, group }) => {
+	const item = useItemData(action.id, action.properties);
+	const handleClick = useInvoke(menu, action, group);
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		item,
+		onClick: handleClick,
+		...action.properties?.testId && { "data-testid": action.properties.testId },
+		children: [
+			/* @__PURE__ */ jsx(ItemIcon, {
+				menu,
+				action
+			}),
+			/* @__PURE__ */ jsx(Menu.ItemText, {}),
+			/* @__PURE__ */ jsx(Menu.ItemIndicator, {})
+		]
+	});
+};
+/** A group inside a menu is a submenu; its items resolve when it opens. */
+var ActionSubMenu = ({ menu, group }) => {
+	const item = useItemData(group.id, group.properties);
+	return /* @__PURE__ */ jsxs(Menu.Sub, { children: [/* @__PURE__ */ jsxs(Menu.TriggerItem, {
+		item,
+		disabled: group.properties.disabled,
+		...group.properties.testId && { "data-testid": group.properties.testId },
+		children: [
+			/* @__PURE__ */ jsx(ItemIcon, {
+				menu,
+				action: group
+			}),
+			/* @__PURE__ */ jsx(Menu.ItemText, {}),
+			/* @__PURE__ */ jsx(Icon.Icon, { icon: "ph--caret-right--regular" })
+		]
+	}), /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(ActionMenuItems, {
+		menu,
+		group
+	}) })] });
+};
+/**
+* Runs of checkable items in a single-select group become one radio group (Ark's radio items need one), whose value is
+* the member marked `checked`.
+*/
+var segment = (items, multiple) => items.reduce((segments, item) => {
+	const last = segments.at(-1);
+	if (multiple || !isCheckable(item)) segments.push({
+		kind: "item",
+		item
+	});
+	else if (last?.kind === "radio") last.actions.push(item);
+	else segments.push({
+		kind: "radio",
+		id: item.id,
+		actions: [item]
+	});
+	return segments;
+}, []);
+var ActionMenuEntry = ({ menu, item, group }) => {
+	if (isSeparator(item)) return /* @__PURE__ */ jsx(Menu.Separator, {});
+	if (isMenuGroup(item)) return /* @__PURE__ */ jsx(ActionSubMenu, {
+		menu,
+		group: item
+	});
+	const action = item;
+	if (action.properties?.hidden) return null;
+	return isCheckable(action) ? /* @__PURE__ */ jsx(ActionCheckboxItem, {
+		menu,
+		action,
+		group
+	}) : /* @__PURE__ */ jsx(ActionMenuItem, {
+		menu,
+		action,
+		group
+	});
+};
+var ActionMenuItems = ({ menu, group, actions }) => {
+	const items = useMenuItems(menu, group, actions);
+	const segments = useMemo(() => segment(items ?? [], isMultiSelect(group)), [items, group]);
+	return /* @__PURE__ */ jsx(Fragment, { children: segments.map((entry) => entry.kind === "radio" ? /* @__PURE__ */ jsx(Menu.RadioItemGroup, {
+		value: entry.actions.find((action) => action.properties.checked)?.id ?? "",
+		children: entry.actions.filter((action) => !action.properties.hidden).map((action) => /* @__PURE__ */ jsx(ActionRadioItem, {
+			menu,
+			action,
+			group
+		}, action.id))
+	}, entry.id) : /* @__PURE__ */ jsx(ActionMenuEntry, {
+		menu,
+		item: entry.item,
+		group
+	}, entry.item.id)) });
+};
+/**
+* A whole `Menu.Root` driven from a `MenuActions`: the child is the trigger (`asChild`), the items come from the
+* graph; groups become `Sub` menus, `checked` members radio or checkbox items. Without a `MenuActions` it is a menu of
+* the explicit `actions` alone.
+*/
+var ActionMenu = (props) => {
+	const { virtualRef, open, defaultOpen, onOpenChange, deferUntilOpen, children } = props;
+	const [built, setBuilt] = useState(false);
+	const deferred = !!deferUntilOpen && !virtualRef && open === void 0 && defaultOpen === void 0;
+	const trigger = isValidElement(children) ? children : void 0;
+	const handleTriggerClick = useCallback((event) => {
+		trigger?.props.onClick?.(event);
+		setBuilt(true);
+		onOpenChange?.(true);
+	}, [trigger, onOpenChange]);
+	if (deferred && !built && trigger) return cloneElement(trigger, {
+		"onClick": handleTriggerClick,
+		"aria-haspopup": "menu",
+		"aria-expanded": false
+	});
+	return /* @__PURE__ */ jsx(ActionMenuRoot, {
+		...props,
+		deferred
+	});
+};
+var ActionMenuRoot = ({ items, contributions, onAction, caller, iconSize, group, actions, virtualRef, disabled, container, open, defaultOpen, onOpenChange, deferred, children }) => {
+	const standalone = useMenuActions();
+	const menu = useMemo(() => ({
+		items: items ?? standalone.items,
+		contributions: contributions ?? standalone.contributions,
+		onAction,
+		caller,
+		iconSize
+	}), [
+		items,
+		contributions,
+		onAction,
+		caller,
+		iconSize,
+		standalone
+	]);
+	const containerRef = useMemo(() => container ? { current: container } : void 0, [container]);
+	const positioning = VirtualAnchor.useVirtualAnchor(virtualRef);
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open: deferred ? void 0 : open,
+		defaultOpen: deferred ? true : defaultOpen,
+		onOpenChange: ({ open }) => onOpenChange?.(open),
+		positioning,
+		children: [children && /* @__PURE__ */ jsx(Menu.Trigger, {
+			asChild: true,
+			disabled,
+			children
+		}), /* @__PURE__ */ jsx(Menu.Content, {
+			container: containerRef,
+			children: /* @__PURE__ */ jsx(ActionMenuItems, {
+				menu,
+				group,
+				actions: typeof actions === "function" ? actions() : actions
+			})
+		})]
+	});
 };
+ActionMenu.displayName = "ActionMenu";
 //#endregion
-//#region src/components/ToolbarMenu.tsx
-var ActionToolbarItem = ({ __menuScope, action }) => {
-	const { iconSize, onAction } = useMenuScoped("ActionToolbarItem", __menuScope);
-	const { t } = useTranslation(translationKey);
+//#region src/components/action-label.ts
+var actionLabel = (action, t) => {
+	const shortcut = getShortcut(action);
+	return `${Theme.toLocalizedString(action.properties.label, t)}${shortcut ? ` (${keySymbols(shortcut).join("")})` : ""}`;
+};
+//#endregion
+//#region src/components/ActionLabel.tsx
+var ActionLabel = ({ action }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const shortcut = getShortcut(action);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "grow truncate",
+		children: Theme.toLocalizedString(action.properties.label, t)
+	}), shortcut && /* @__PURE__ */ jsx("span", {
+		className: mx("shrink-0", "text-fg-muted"),
+		children: keySymbols(shortcut).join("")
+	})] });
+};
+//#endregion
+//#region src/components/ActionToolbar.tsx
+/**
+* An action as a Next Button: icon-only with its label (and shortcut) in a tooltip, or text with a trailing shortcut.
+* Forwards its ref and remaining props, since a `Menu.Trigger asChild` merges the trigger's onto it.
+*/
+var ActionButton = forwardRef(({ action, classNames, testId, ...props }, forwardedRef) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const { icon, iconOnly = true, spin } = action.properties;
+	const common = {
+		...props,
+		spin,
+		classNames,
+		...testId && { "data-testid": testId },
+		ref: forwardedRef
+	};
+	return icon && iconOnly ? /* @__PURE__ */ jsx(Button.Root, {
+		...common,
+		icon,
+		label: actionLabel(action, t),
+		iconOnly: true
+	}) : /* @__PURE__ */ jsx(Button.Root, {
+		...common,
+		icon,
+		children: /* @__PURE__ */ jsx(ActionLabel, { action })
+	});
+});
+var ActionToolbarItem = ({ menu, action }) => {
+	const { onAction, caller, iconSize } = menu;
 	const [pending, setPending] = useState(false);
 	const pendingRef = useRef(false);
-	const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames, spin } = action.properties;
-	const buttonVariant = action.properties.variant === "primary" ? "primary" : "ghost";
+	const { disabled, testId, hidden, classNames } = action.properties;
 	const handleClick = useCallback(() => {
 		if (pendingRef.current) return;
 		pendingRef.current = true;
@@ -240,423 +588,353 @@ var ActionToolbarItem = ({ __menuScope, action }) => {
 			pendingRef.current = false;
 			setPending(false);
 		};
-		if (onAction) Promise.resolve(onAction(action, {})).then(done, done);
-		else executeMenuAction(action).then(done, done);
-	}, [action, onAction]);
-	const commonProps = {
-		variant: buttonVariant,
+		if (onAction) Promise.resolve(onAction(action, { caller })).then(done, done);
+		else executeMenuAction(action, { caller }).then(done, done);
+	}, [
+		action,
+		caller,
+		onAction
+	]);
+	if (hidden) return null;
+	return /* @__PURE__ */ jsx(ActionButton, {
+		action,
+		variant: action.properties.variant === "primary" ? "primary" : "ghost",
 		disabled: disabled || pending,
+		iconSize,
 		classNames,
 		onClick: handleClick,
+		testId
+	});
+};
+/** A `toggle` action is a pressed button whose state is the action's `checked`. */
+var ToggleToolbarItem = ({ menu, action }) => {
+	const { onAction, caller, iconSize } = menu;
+	const { t } = Hooks.useTranslation(translationKey);
+	const { icon, iconOnly = true, disabled, testId, hidden, checked, classNames, spin } = action.properties;
+	const handlePressedChange = useCallback(() => {
+		if (onAction) onAction(action, { caller });
+		else executeMenuAction(action, { caller });
+	}, [
+		action,
+		caller,
+		onAction
+	]);
+	if (hidden) return null;
+	const common = {
+		variant: "ghost",
+		pressed: !!checked,
+		disabled,
+		spin,
+		iconSize,
+		classNames,
+		onPressedChange: handlePressedChange,
 		...testId && { "data-testid": testId }
 	};
-	if (hidden) return null;
-	return icon ? /* @__PURE__ */ jsx(Toolbar.IconButton, {
-		...commonProps,
+	return icon && iconOnly ? /* @__PURE__ */ jsx(Button.Toggle, {
+		...common,
+		icon,
+		label: actionLabel(action, t),
+		iconOnly: true
+	}) : /* @__PURE__ */ jsx(Button.Toggle, {
+		...common,
 		icon,
-		size: iconSize,
-		iconOnly,
-		iconClassNames: mx(spin && "animate-spin", iconClassNames),
-		label: actionLabel(action, t)
-	}, action.id) : /* @__PURE__ */ jsx(Toolbar.Button, {
-		...commonProps,
 		children: /* @__PURE__ */ jsx(ActionLabel, { action })
-	}, action.id);
+	});
 };
-var SwitchToolbarItem = ({ __menuScope, action }) => {
-	const { onAction } = useMenuScoped("SwitchToolbarItem", __menuScope);
-	const { t } = useTranslation(translationKey);
+var SwitchToolbarItem = ({ menu, action }) => {
+	const { onAction, caller } = menu;
+	const { t } = Hooks.useTranslation(translationKey);
 	const { label, iconOnly, disabled, testId, hidden, checked } = action.properties;
-	const labelStr = toLocalizedString(label, t);
+	const labelStr = Theme.toLocalizedString(label, t);
 	const handleCheckedChange = useCallback(() => {
-		if (onAction) onAction(action, {});
-		else executeMenuAction(action);
-	}, [action, onAction]);
+		if (onAction) onAction(action, { caller });
+		else executeMenuAction(action, { caller });
+	}, [
+		action,
+		caller,
+		onAction
+	]);
 	if (hidden) return null;
-	const switchInput = /* @__PURE__ */ jsx(Input.Switch, {
+	const control = /* @__PURE__ */ jsx(Input.Switch, {
 		checked,
 		disabled,
-		"aria-label": iconOnly ? labelStr : void 0,
 		onCheckedChange: handleCheckedChange,
+		...iconOnly ? { "aria-label": labelStr } : { label: labelStr },
 		...testId && { "data-testid": testId }
 	});
-	return /* @__PURE__ */ jsxs(Input.Root, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip.Trigger, {
+	return iconOnly ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 		asChild: true,
-		content: labelStr,
-		children: /* @__PURE__ */ jsx(Input.Block, { children: switchInput })
-	}) : /* @__PURE__ */ jsx(Input.Block, { children: switchInput }), !iconOnly && /* @__PURE__ */ jsx(Input.Label, { children: labelStr })] });
-};
-var DropdownMenuToolbarItem = ({ __menuScope, group, items: propsItems }) => {
-	const { t } = useTranslation(translationKey);
-	const { iconSize } = useMenuScoped("DropdownMenuToolbarItem", __menuScope);
-	const items = useMenuItems(group, propsItems, "DropdownMenuToolbarItem", __menuScope);
-	const { iconOnly, disabled, testId, applyActive, caretDown = true, icon: groupIcon, iconClassNames: groupIconClassNames, spin: groupSpin } = group.properties;
+		children: control
+	}), /* @__PURE__ */ jsx(Tooltip.Content, { children: labelStr })] }) : control;
+};
+var DropdownToolbarItem = ({ menu, group }) => {
+	const items = useMenuItems(menu, group);
+	const { disabled, testId, applyActive, caretDown = true } = group.properties;
 	const activeItem = items?.find((item) => !!item.properties.checked);
-	const icon = applyActive && activeItem?.properties.icon || groupIcon;
-	const iconClassNames = applyActive && activeItem?.properties.iconClassNames || groupIconClassNames;
-	const spin = applyActive && activeItem?.properties.spin || groupSpin;
-	const labelAction = applyActive && activeItem ? activeItem : group;
-	const trigger = icon ? /* @__PURE__ */ jsx(Toolbar.IconButton, {
-		variant: "ghost",
-		disabled,
-		icon,
-		size: iconSize,
-		iconOnly,
-		iconClassNames: mx(spin && "animate-spin", iconClassNames),
-		label: actionLabel(labelAction, t),
-		caretDown: caretDown && !disabled,
-		...testId && { "data-testid": testId }
-	}) : /* @__PURE__ */ jsx(Toolbar.Button, {
+	const display = useMemo(() => {
+		if (!applyActive || !activeItem) return group;
+		const { icon, iconClassNames, spin, label, keyBinding } = activeItem.properties;
+		return {
+			...group,
+			properties: {
+				...group.properties,
+				icon: icon || group.properties.icon,
+				iconClassNames: iconClassNames || group.properties.iconClassNames,
+				spin: spin || group.properties.spin,
+				label,
+				keyBinding
+			}
+		};
+	}, [
+		group,
+		applyActive,
+		activeItem
+	]);
+	const trigger = /* @__PURE__ */ jsx(ActionButton, {
+		action: display,
 		variant: "ghost",
 		disabled,
+		iconSize: menu.iconSize,
 		caretDown: caretDown && !disabled,
-		...testId && { "data-testid": testId },
-		children: /* @__PURE__ */ jsx(ActionLabel, { action: labelAction })
+		testId
 	});
 	if (disabled) return trigger;
-	return /* @__PURE__ */ jsx(DropdownMenu$1.Root, {
+	return /* @__PURE__ */ jsx(ActionMenu, {
+		...menu,
 		group,
-		items,
-		children: /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, {
-			asChild: true,
-			children: trigger
-		})
+		actions: items,
+		children: trigger
 	});
 };
-var ToggleGroupItem = ({ __menuScope, group, action }) => {
-	const { iconSize, onAction } = useMenuScoped("ToggleGroupItem", __menuScope);
-	const { t } = useTranslation(translationKey);
-	const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames, spin } = action.properties;
+var ToggleGroupItem = ({ menu, group, action }) => {
+	const { onAction, caller, iconSize } = menu;
+	const { t } = Hooks.useTranslation(translationKey);
+	const { icon, iconOnly = true, disabled, testId, hidden, classNames, spin } = action.properties;
 	const handleClick = useCallback(() => {
-		if (onAction) onAction(action, { parent: group });
-		else executeMenuAction(action, { parent: group });
+		if (onAction) onAction(action, {
+			parent: group,
+			caller
+		});
+		else executeMenuAction(action, {
+			parent: group,
+			caller
+		});
 	}, [
 		action,
 		group,
+		caller,
 		onAction
 	]);
-	const commonProps = {
+	if (hidden) return null;
+	const common = {
 		value: action.id,
 		disabled,
 		variant: "ghost",
+		spin,
+		iconSize,
 		classNames,
 		onClick: handleClick,
 		...testId && { "data-testid": testId }
 	};
-	return hidden ? null : icon ? /* @__PURE__ */ jsx(Toolbar.ToggleGroupIconItem, {
-		...commonProps,
+	return icon && iconOnly ? /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		...common,
+		icon,
+		label: actionLabel(action, t),
+		iconOnly: true
+	}) : /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		...common,
 		icon,
-		size: iconSize,
-		iconOnly,
-		iconClassNames: mx(spin && "animate-spin", iconClassNames),
-		label: actionLabel(action, t)
-	}) : /* @__PURE__ */ jsx(Toolbar.ToggleGroupItem, {
-		...commonProps,
 		children: /* @__PURE__ */ jsx(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__ */ jsx(ToggleGroupItem, {
+var ToggleGroupToolbarItem = ({ menu, group }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const items = useMenuItems(menu, group);
+	const label = Theme.toLocalizedString(group.properties.label, t);
+	const children = items?.filter((item) => !isSeparator(item) && !isMenuGroup(item)).map((item) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+		menu,
 		group,
-		action
-	}, action.id));
-	if (selectCardinality === "multiple") return /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
+		action: item
+	}, item.id));
+	return group.properties.selectCardinality === "multiple" ? /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
 		type: "multiple",
 		value: group.properties.value,
+		"aria-label": label,
 		children
-	});
-	else return /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
+	}) : /* @__PURE__ */ jsx(Toolbar.ToggleGroup, {
 		type: "single",
 		value: group.properties.value,
+		"aria-label": label,
 		children
 	});
 };
-/**
-* Attention-gated toolbar container with no graph items of its own — render {@link ToolbarMenuItems}
-* among its children, whose JSX order controls where the graph items sit.
-*/
-var ToolbarMenu = composable(({ __menuScope, children, ...props }, forwardedRef) => {
-	const { attendableId, alwaysActive } = useMenuScoped("ToolbarMenu", __menuScope);
-	const { hasAttention } = useAttention(attendableId);
-	return /* @__PURE__ */ jsx(Toolbar.Root, {
-		...composableProps(props, { classNames: attendableId }),
-		disabled: !alwaysActive && !hasAttention,
-		ref: forwardedRef,
-		children
+var ToolbarItem = ({ menu, item }) => {
+	if (isSeparator(item)) return /* @__PURE__ */ jsx(Toolbar.Separator, { variant: item.properties.variant === "line" ? "line" : "gap" });
+	if (isMenuGroup(item)) return item.properties.variant === "dropdownMenu" ? /* @__PURE__ */ jsx(DropdownToolbarItem, {
+		menu,
+		group: item
+	}) : /* @__PURE__ */ jsx(ToggleGroupToolbarItem, {
+		menu,
+		group: item
 	});
-});
-/** The menu graph's toolbar items, container-free, so JSX order controls their placement. */
-var ToolbarMenuItems = ({ __menuScope }) => {
-	const items = useMenuItems(void 0, void 0, "ToolbarMenuItems", __menuScope);
-	return /* @__PURE__ */ jsx(Fragment, { children: items?.map((item) => /* @__PURE__ */ jsx(ToolbarMenuItem, {
-		__menuScope,
-		item
-	}, item.id)) });
-};
-var ToolbarMenuItem = ({ __menuScope, item }) => {
-	if (isSeparator(item)) return /* @__PURE__ */ jsx(Toolbar.Separator, { variant: item.properties.variant });
-	if (isMenuGroup(item)) {
-		if (item.properties.variant === "dropdownMenu") return /* @__PURE__ */ jsx(DropdownMenuToolbarItem, {
-			__menuScope,
-			group: item
+	const action = item;
+	switch (action.properties?.variant) {
+		case "switch": return /* @__PURE__ */ jsx(SwitchToolbarItem, {
+			menu,
+			action
 		});
-		return /* @__PURE__ */ jsx(ToggleGroupToolbarItem, {
-			__menuScope,
-			group: item
+		case "toggle": return /* @__PURE__ */ jsx(ToggleToolbarItem, {
+			menu,
+			action
 		});
-	}
-	const action = item;
-	if (action.properties?.variant === "switch") return /* @__PURE__ */ jsx(SwitchToolbarItem, {
-		__menuScope,
-		action
-	});
-	if (action.properties?.variant === "custom" && action.properties.render) return /* @__PURE__ */ jsx(Fragment, { children: action.properties.render() });
-	return /* @__PURE__ */ jsx(ActionToolbarItem, {
-		__menuScope,
-		action
-	});
-};
-//#endregion
-//#region src/components/Menu.tsx
-var DEFAULT_PRIORITY = 100;
-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 = useCallback((props) => {
-		const priority = props.priority ?? DEFAULT_PRIORITY;
-		const prev = registry.get(menuItemsAtom);
-		const next = new Map(prev);
-		next.set(props.id, {
-			...props,
-			priority
+		case "custom": return action.properties.render ? /* @__PURE__ */ jsx(Fragment, { children: action.properties.render() }) : null;
+		default: return /* @__PURE__ */ jsx(ActionToolbarItem, {
+			menu,
+			action
 		});
-		registry.set(menuItemsAtom, next);
-	}, [registry, menuItemsAtom]);
-	const removeMenuItems = useCallback((id) => {
-		const prev = registry.get(menuItemsAtom);
-		const next = new Map(prev);
-		next.delete(id);
-		registry.set(menuItemsAtom, next);
-	}, [registry, menuItemsAtom]);
-	return /* @__PURE__ */ jsx(MenuContextProvider, {
-		items,
-		iconSize,
-		attendableId,
-		alwaysActive,
-		menuItemsAtom,
-		addMenuItems,
-		removeMenuItems,
-		onAction,
-		scope,
-		children
-	});
-};
-/**
-* Menu context boundary.
-*
-* NOTE: This component is headless since it's root div has `contents`.
-*
-* Provides the menu context (action dispatch, contribution registry, icon size, etc.)
-* and an optional dropdown root for use with `Menu.Trigger` + `Menu.Content`.
-*/
-var MenuRoot = ({ children, open, defaultOpen, onOpenChange, caller, ...props }) => {
-	const [menuOpen, setMenuOpen] = useControllableState({
-		prop: open,
-		defaultProp: defaultOpen,
-		onChange: onOpenChange
-	});
-	const closeMenu = useCallback(() => setMenuOpen(false), [setMenuOpen]);
-	return /* @__PURE__ */ jsx(MenuProvider, {
-		...props,
-		children: /* @__PURE__ */ jsx(MenuDropdownContext.Provider, {
-			value: {
-				closeMenu,
-				caller
-			},
-			children: /* @__PURE__ */ jsx(DropdownMenu.Root, {
-				open: menuOpen,
-				onOpenChange: setMenuOpen,
-				children
-			})
-		})
-	});
+	}
 };
-var MenuContentItem = ({ item, onClick, __menuScope }) => {
-	const action = item;
-	const handleClick = useCallback((event) => onClick(action, event), [action, onClick]);
-	const { iconSize } = useMenuScoped("MenuContentItem", __menuScope);
-	return /* @__PURE__ */ jsxs(DropdownMenu.Item, {
-		onClick: handleClick,
-		classNames: "gap-2",
-		disabled: action.properties?.disabled,
-		...action.properties?.testId && { "data-testid": action.properties.testId },
-		children: [action.properties?.icon && /* @__PURE__ */ jsx(Icon, {
-			icon: action.properties.icon,
-			size: iconSize,
-			classNames: mx(action.properties.spin && "animate-spin", action.properties.iconClassNames)
-		}), /* @__PURE__ */ jsx(ActionLabel, { action })]
-	});
+var ActionToolbarItems = ({ menu }) => {
+	const items = useMenuItems(menu);
+	return /* @__PURE__ */ jsx(Fragment, { children: items?.map((item) => /* @__PURE__ */ jsx(ToolbarItem, {
+		menu,
+		item
+	}, item.id)) });
 };
 /**
-* Renders the dropdown menu portal, content, and graph-backed items.
-*
-* Must be a descendant of `Menu.Root`. Reads items via `useMenuItems` from the
-* nearest menu context, with optional `group`/`items` prop overrides.
+* A whole `Toolbar.Root` driven from a `MenuActions`: the graph's root items render first, then the toolbar's own
+* children. Mix graph and hand-written controls the other way round by dropping an `ActionMenu` into a plain
+* `Toolbar.Root`. Without a `MenuActions` it is an empty toolbar until one arrives.
 */
-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 = useCallback((action, event) => {
-		if (action.properties?.disabled) return;
-		event.stopPropagation();
-		closeMenu();
-		const params = {
-			parent: group,
-			caller,
-			modifiers: { shift: event.shiftKey }
-		};
-		if (onAction) onAction(action, params);
-		else executeMenuAction(action, params);
-	}, [
-		group,
+var ActionToolbar = Util.composable(({ items, contributions, onAction, caller, iconSize, attendableId, alwaysActive, start, children, ...props }, forwardedRef) => {
+	const standalone = useMenuActions();
+	const menu = useMemo(() => ({
+		items: items ?? standalone.items,
+		contributions: contributions ?? standalone.contributions,
+		onAction,
 		caller,
+		iconSize
+	}), [
+		items,
+		contributions,
 		onAction,
-		closeMenu
+		caller,
+		iconSize,
+		standalone
 	]);
-	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [/* @__PURE__ */ jsx(DropdownMenu.Viewport, { children: resolvedItems?.map((item) => isSeparator(item) ? /* @__PURE__ */ jsx(DropdownMenu.Separator, {}, item.id) : /* @__PURE__ */ jsx(MenuContentItem, {
-		item,
-		onClick: handleActionClick
-	}, item.id)) }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})] }) });
-};
-/**
-* Primary namespace export for the menu system.
-*
-* - `Menu.Root` — context boundary (replaces `MenuProvider`); also provides a dropdown root.
-* - `Menu.Trigger` / `Menu.VirtualTrigger` — dropdown trigger (use with `Menu.Content`).
-* - `Menu.Content` — renders graph-backed dropdown items inside a portal.
-* - `Menu.Toolbar` — attention-gated toolbar container; renders only its children.
-* - `Menu.Items` — the graph-backed toolbar items; place it among `Menu.Toolbar`'s children,
-*   whose JSX order controls where the items sit.
-*/
-var Menu = {
-	Root: MenuRoot,
-	Trigger: DropdownMenu.Trigger,
-	Content: MenuContent,
-	VirtualTrigger: DropdownMenu.VirtualTrigger,
-	Toolbar: ToolbarMenu,
-	Items: ToolbarMenuItems
-};
-//#endregion
-//#region src/presentation.ts
-/**
-* Merges an action's `presentation[surface]` chrome override (if any) into its properties, letting a
-* single action declare multiple dispositions yet render appropriately in each surface — e.g. a
-* primary toolbar button and a plain nav-tree row from the same definition.
-*/
-var applyPresentation = (action, surface) => {
-	const presentation = action.properties.presentation?.[surface];
-	if (!presentation) return action;
-	return {
-		...action,
-		properties: {
-			...action.properties,
-			...presentation
-		}
-	};
-};
-//#endregion
-//#region src/hooks/useMenuActions.ts
-var useMenuActions = (props) => {
-	const registry = useContext(RegistryContext);
-	const menuGraphProps = useAtomValue(props);
-	const graph = useMemo(() => {
-		const newGraph = AppGraph.make({ registry });
-		AppGraph.addNodes(newGraph, menuGraphProps.nodes);
-		AppGraph.addEdges(newGraph, menuGraphProps.edges);
-		return newGraph;
-	}, [registry, menuGraphProps]);
-	return { items: useCallback((group) => {
-		return graph.connections(group?.id || GraphNode.RootId, "child");
-	}, [graph]) };
-};
-/**
-* Convenience wrapper around `useMenuActions` that creates the backing atom inline.
-* Pass a builder thunk and a dependency list — the hook memoizes `Atom.make(build)` and threads
-* it through `useMenuActions`. Saves the `useMemo(() => Atom.make(...), deps)` boilerplate when
-* the action graph is composed from local state (e.g. a toolbar driven by component state).
-*
-* Read reactive state via `get` inside the builder; `deps` should hold only stable references.
-*/
-var useMenuBuilder = (build, deps) => {
-	return useMenuActions(useMemo(() => Atom.make(build), deps));
-};
+	const { hasAttention } = useAttention(attendableId);
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		...Util.composableProps(props, { classNames: attendableId }),
+		inactive: !alwaysActive && !hasAttention,
+		ref: forwardedRef,
+		children: [
+			start,
+			/* @__PURE__ */ jsx(ActionToolbarItems, { menu }),
+			children
+		]
+	});
+});
+ActionToolbar.displayName = "ActionToolbar";
 //#endregion
-//#region src/hooks/useGraphMenuActions.ts
+//#region src/components/ViewOptionsMenu.tsx
 /**
-* Flatten a node's contributed actions (and nested {@link AppGraphNode.ActionGroup}s) into the
-* `{ nodes, edges }` an {@link useMenuActions} / `Menu` consumes. The action nodes are spliced
-* verbatim, so their Effect `data` (and captured `_actionContext`) execute via `executeMenuAction`
-* without any `onAction` wiring.
-*
-* Pure over a `resolve` function so it is testable without a live graph; `resolve(id)` returns the
-* direct actions for `id` (a node id at the top level, a group id when expanding a group).
+* The order-by field and its direction, as one menu beside a list's filter. The value is the host's to
+* persist — typically in a `ViewState` aspect beside the filter query.
 */
-var buildGraphMenu = (resolve, nodeId, options = {}) => {
-	const { rootId = GraphNode.RootId, filter, surface } = 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(surface ? applyPresentation(action, surface) : action);
-			if (AppGraphNode.isActionGroup(action)) visit(action.id, action.id);
-		}
-	};
-	visit(rootId, nodeId);
-	return {
-		nodes,
-		edges
-	};
-};
-/**
-* Read a node's contributed actions from the app-graph as menu `ActionGraphProps`, for splicing into a
-* hand-built toolbar via `MenuBuilder.subgraph(graphActions(graph, get, nodeId))`. Reactive: reads the
-* graph's action atoms through `get`, so contributed actions appear/disappear as extensions update.
-*
-* @idiom org.dxos.react-ui-menu.graphActionsToolbar
-*   applies: Splicing a node's app-graph-contributed toolbar actions into a hand-built object toolbar
-*   instead-of: Reading `graph.actions(nodeId)` and filtering/wiring `nodes`/`edges` by hand in every toolbar
-*   uses: {@link graphActions}, {@link MenuBuilder}, {@link useMenuBuilder}
-*   related: org.dxos.react-ui-menu.toolbarMenu
-*/
-var graphActions = (graph, get, nodeId, options) => graph && nodeId ? buildGraphMenu((id) => get(graph.actions(id)), nodeId, options) : {
-	nodes: [],
-	edges: []
+var SortMenu = ({ fields, value, onChange, label, directionLabels, unsorted, testId = "sort" }) => {
+	const sorted = value.field !== unsorted;
+	const current = fields.find((field) => field.id === value.field);
+	const group = useMemo(() => createMenuItemGroup(testId, {
+		label,
+		icon: "ph--sort-ascending--regular",
+		variant: "dropdownMenu",
+		selectCardinality: "single",
+		value: value.field
+	}), [
+		testId,
+		label,
+		value.field
+	]);
+	const actions = useCallback(() => [
+		...fields.map((field) => createMenuAction(`sort-${field.id}`, () => onChange({
+			...value,
+			field: field.id
+		}), {
+			label: field.label,
+			icon: field.icon,
+			checked: value.field === field.id,
+			testId: `${testId}.${field.id}`
+		})),
+		createLineSeparator(`${testId}Separator`).nodes[0],
+		...["asc", "desc"].map((direction) => createMenuAction(`sort-${direction}`, () => onChange({
+			...value,
+			direction
+		}), {
+			label: directionLabels[direction],
+			icon: direction === "asc" ? "ph--sort-ascending--regular" : "ph--sort-descending--regular",
+			checked: sorted && value.direction === direction,
+			disabled: !sorted,
+			testId: `${testId}.${direction}`
+		}))
+	], [
+		fields,
+		value,
+		sorted,
+		onChange,
+		directionLabels,
+		testId
+	]);
+	return /* @__PURE__ */ jsx(ActionMenu, {
+		deferUntilOpen: true,
+		group,
+		actions,
+		children: /* @__PURE__ */ jsx(Button.Root, {
+			icon: !sorted ? "ph--arrows-down-up--regular" : value.direction === "asc" ? "ph--sort-ascending--regular" : "ph--sort-descending--regular",
+			iconOnly: !sorted,
+			label: sorted && current ? current.label : label,
+			"data-testid": testId
+		})
+	});
 };
-/**
-* Menu actions sourced entirely from a node's app-graph contributions — the common "show every action
-* the graph offers for this object" toolbar/menu. Compose with hand-built items via {@link graphActions}.
-*/
-var useGraphMenuActions = (graph, nodeId, options) => {
-	return useMenuActions(useMemo(() => Atom.make((get) => graphActions(graph, get, nodeId, options)), [
-		graph,
-		nodeId,
-		options?.rootId
-	]));
+SortMenu.displayName = "SortMenu";
+/** What a list is grouped by, as a single-select menu beside its sort. */
+var GroupMenu = ({ fields, value, onChange, label, none, testId = "group" }) => {
+	const current = value !== none ? fields.find((field) => field.id === value) : void 0;
+	const group = useMemo(() => createMenuItemGroup(testId, {
+		label,
+		icon: "ph--rows--regular",
+		variant: "dropdownMenu",
+		selectCardinality: "single",
+		value
+	}), [
+		testId,
+		label,
+		value
+	]);
+	const actions = useCallback(() => fields.map((field) => createMenuAction(`group-${field.id}`, () => onChange(field.id), {
+		label: field.label,
+		icon: field.icon,
+		checked: value === field.id,
+		testId: `${testId}.${field.id}`
+	})), [
+		fields,
+		value,
+		onChange,
+		testId
+	]);
+	return /* @__PURE__ */ jsx(ActionMenu, {
+		deferUntilOpen: true,
+		group,
+		actions,
+		children: /* @__PURE__ */ jsx(Button.Root, {
+			icon: current ? current.icon : "ph--rows--regular",
+			iconOnly: !current,
+			label: current ? current.label : label,
+			"data-testid": testId
+		})
+	});
 };
+GroupMenu.displayName = "GroupMenu";
 //#endregion
 //#region src/builder.ts
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-menu/src/builder.ts";
@@ -763,7 +1041,19 @@ var MenuBuilder = Object.freeze({ make: () => new MenuBuilderImpl({
 var TOOLBAR_DISPOSITION = "toolbar";
 /** Filter for {@link graphActions}: keeps only actions a producer opted into the toolbar. */
 var isToolbarAction = (action) => AppGraphNode.hasDisposition(action, TOOLBAR_DISPOSITION);
+/**
+* `disposition` value an action opts into to appear in the row beside a text input — a chat prompt
+* today.
+*
+* Separate from {@link TOOLBAR_DISPOSITION} because the two surfaces act on different things: an
+* object toolbar acts on the object, a prompt row acts on the text being composed. Commenting on a
+* document belongs in the first and means nothing in the second; dictation belongs in both, and says
+* so by listing both (`disposition` takes an array).
+*/
+var PROMPT_DISPOSITION = "prompt";
+/** Filter for {@link graphActions}: keeps only actions a producer opted into a prompt row. */
+var isPromptAction = (action) => AppGraphNode.hasDisposition(action, PROMPT_DISPOSITION);
 //#endregion
-export { Menu, MenuBuilder, MenuSeparatorType, TOOLBAR_DISPOSITION, actionLabel, applyPresentation, buildGraphMenu, createGapSeparator, createLineSeparator, createMenuAction, createMenuItemGroup, graphActions, isMenuGroup, isSeparator, isToolbarAction, menuContextDefaults, useGraphMenuActions, useMenu, useMenuActions, useMenuBuilder, useMenuItems, useMenuScoped };
+export { ActionMenu, ActionToolbar, GroupMenu, MenuBuilder, MenuSeparatorType, PROMPT_DISPOSITION, SortMenu, TOOLBAR_DISPOSITION, applyPresentation, buildGraphMenu, createGapSeparator, createLineSeparator, createMenuAction, createMenuItemGroup, executeMenuAction, fallbackIcon, graphActions, isMenuGroup, isPromptAction, isSeparator, isToolbarAction, makeMenuActions, resolveItems, useGraphMenuActions, useMenuActions, useMenuBuilder, useMenuContribution, useMenuGraph, useMenuItems };
 
 //# sourceMappingURL=index.mjs.map