@dxos/react-ui-menu 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e

package/src/components/ToolbarMenu.tsx

@@ -2,14 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { mx, textBlockWidth, toolbarLayout } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
-import { translationKey } from '../translations';
+import { translationKey } from '#translations';
+
 import {
   type MenuAction,
   type MenuItem,
@@ -20,10 +21,9 @@ import {
   isSeparator,
 } from '../types';
 import { executeMenuAction } from '../util';
-
 import { ActionLabel, actionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
-import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { type MenuScopedProps, useMenuItems, useMenuScoped } from './Menu';
 
 export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
   variant: 'dropdownMenu';
@@ -41,7 +41,7 @@ export type ToolbarMenuActionGroupProperties = (
 ) &
   (MenuSingleSelectActionGroup | MenuMultipleSelectActionGroup);
 
-export type ToolbarMenuProps = ToolbarRootProps & { textBlockWidth?: boolean };
+export type ToolbarMenuProps = ToolbarRootProps;
 
 export type ToolbarMenuActionGroupProps = {
   group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
@@ -53,15 +53,13 @@ export type ToolbarMenuActionProps = {
   action: MenuAction;
 };
 
-const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { iconSize, onAction } = useMenu('ActionToolbarItem', __menuScope);
+const ActionToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { iconSize, onAction } = useMenuScoped('ActionToolbarItem', __menuScope);
   const { t } = useTranslation(translationKey);
 
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
-  const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
-    : { children: <ActionLabel action={action} /> };
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
+  const buttonVariant =
+    (action.properties as { variant?: string }).variant === 'primary' ? ('primary' as const) : ('ghost' as const);
 
   const handleClick = useCallback(() => {
     if (onAction) {
@@ -71,27 +69,43 @@ const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: Me
     }
   }, [action, onAction]);
 
-  return hidden ? null : (
-    <Root
+  const commonProps = {
+    variant: buttonVariant,
+    disabled,
+    classNames,
+    onClick: handleClick,
+    ...(testId && { 'data-testid': testId }),
+  };
+
+  if (hidden) {
+    return null;
+  }
+
+  return icon ? (
+    <NaturalToolbar.IconButton
       key={action.id}
-      disabled={disabled}
-      onClick={handleClick}
-      variant='ghost'
-      {...(testId && { 'data-testid': testId })}
-      {...(rootProps as any)}
-      classNames={classNames}
+      {...commonProps}
+      icon={icon}
+      size={iconSize}
+      iconOnly={iconOnly}
+      iconClassNames={iconClassNames}
+      label={actionLabel(action, t)}
     />
+  ) : (
+    <NaturalToolbar.Button key={action.id} {...commonProps}>
+      <ActionLabel action={action} />
+    </NaturalToolbar.Button>
   );
 };
 
 const DropdownMenuToolbarItem = ({
+  __menuScope,
   group,
   items: propsItems,
-  __menuScope,
 }: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
   const { iconOnly, disabled, testId } = group.properties;
   const { t } = useTranslation(translationKey);
-  const { iconSize } = useMenu('DropdownMenuToolbarItem', __menuScope);
+  const { iconSize } = useMenuScoped('DropdownMenuToolbarItem', __menuScope);
   const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
   const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
   const icon =
@@ -99,6 +113,11 @@ const DropdownMenuToolbarItem = ({
       // TODO(thure): Handle other menu item types.
       (activeItem as MenuAction)?.properties.icon) ||
     group.properties.icon;
+  // Follow the same `applyActive` rule for `iconClassNames` so a per-item
+  // accent (e.g. tag colour) tracks the displayed icon.
+  const iconClassNames =
+    ((group.properties as any).applyActive && (activeItem as MenuAction)?.properties.iconClassNames) ||
+    (group.properties as { iconClassNames?: any }).iconClassNames;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const labelAction = (group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group;
   const rootProps = icon
@@ -106,6 +125,7 @@ const DropdownMenuToolbarItem = ({
         icon,
         size: iconSize,
         iconOnly,
+        iconClassNames,
         label: actionLabel(labelAction, t),
         caretDown: true,
       }
@@ -113,7 +133,7 @@ const DropdownMenuToolbarItem = ({
         children: (
           <>
             <ActionLabel action={labelAction} />
-            <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
+            <Icon size={3} icon='ph--caret-down--bold' classNames='ms-1' />
           </>
         ),
       };
@@ -127,10 +147,11 @@ const DropdownMenuToolbarItem = ({
   );
 };
 
-const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<ToolbarMenuActionProps>) => {
-  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
+const ToggleGroupItem = ({ __menuScope, group, action }: MenuScopedProps<ToolbarMenuActionProps>) => {
+  const { iconSize, onAction } = useMenuScoped('ToggleGroupItem', __menuScope);
   const { t } = useTranslation(translationKey);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
+
   const handleClick = useCallback(() => {
     if (onAction) {
       onAction(action, { parent: group });
@@ -138,91 +159,103 @@ const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<Toolbar
       void executeMenuAction(action, { parent: group });
     }
   }, [action, group, onAction]);
-  const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
-  const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
-    : { children: <ActionLabel action={action} /> };
 
-  return hidden ? null : (
-    <Root
-      key={action.id}
-      value={action.id as any}
-      disabled={disabled}
-      onClick={handleClick}
-      variant='ghost'
-      {...(testId && { 'data-testid': testId })}
-      {...(rootProps as any)}
-      classNames={classNames}
+  const commonProps = {
+    value: action.id,
+    disabled,
+    variant: 'ghost' as const,
+    classNames,
+    onClick: handleClick,
+    ...(testId && { 'data-testid': testId }),
+  };
+
+  return hidden ? null : icon ? (
+    <NaturalToolbar.ToggleGroupIconItem
+      {...commonProps}
+      icon={icon}
+      size={iconSize}
+      iconOnly={iconOnly}
+      iconClassNames={iconClassNames}
+      label={actionLabel(action, t)}
     />
+  ) : (
+    <NaturalToolbar.ToggleGroupItem {...commonProps}>
+      <ActionLabel action={action} />
+    </NaturalToolbar.ToggleGroupItem>
   );
 };
 
 const ToggleGroupToolbarItem = ({
-  group,
-  items: propsItems,
   __menuScope,
+  group,
+  items: itemsProp,
 }: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
-  const items = useMenuItems(group, propsItems, 'ToggleGroupToolbarItem', __menuScope);
-  const { selectCardinality, value } = group.properties;
+  const items = useMenuItems(group, itemsProp, 'ToggleGroupToolbarItem', __menuScope);
+  const { selectCardinality } = group.properties;
 
-  return (
-    // TODO(thure): Fix.
-    // @ts-ignore
-    <NaturalToolbar.ToggleGroup type={selectCardinality} value={value}>
-      {
-        // TODO(thure): Handle other menu item types.
-        (items as MenuAction[]).map((action) => (
-          <ToggleGroupItem key={action.id} group={group} action={action} />
-        ))
-      }
-    </NaturalToolbar.ToggleGroup>
-  );
+  // TODO(thure): Handle other menu item types.
+  const children = (items as MenuAction[]).map((action) => (
+    <ToggleGroupItem key={action.id} group={group} action={action} />
+  ));
+
+  if (selectCardinality === 'multiple') {
+    return (
+      <NaturalToolbar.ToggleGroup type='multiple' value={group.properties.value}>
+        {children}
+      </NaturalToolbar.ToggleGroup>
+    );
+  } else {
+    return (
+      <NaturalToolbar.ToggleGroup type='single' value={group.properties.value}>
+        {children}
+      </NaturalToolbar.ToggleGroup>
+    );
+  }
 };
 
-// TODO(burdon): Reconcile with react-ui/Toolbar (incl. textBlockWidth)
-export const ToolbarMenu = ({
-  __menuScope,
-  classNames,
-  textBlockWidth: textBlockWidthProp,
-  ...props
-}: MenuScopedProps<ToolbarMenuProps>) => {
-  const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
-  const { attendableId, alwaysActive } = useMenu('ToolbarMenu', __menuScope);
-  const { hasAttention } = useAttention(attendableId);
-  const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
-  const innerRootProps = textBlockWidthProp
-    ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') }
-    : {};
+export const ToolbarMenu = composable<HTMLDivElement, MenuScopedProps<ToolbarMenuProps>>(
+  ({ __menuScope, children, ...props }, forwardedRef) => {
+    const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
+    const { attendableId, alwaysActive } = useMenuScoped('ToolbarMenu', __menuScope);
+    const { hasAttention } = useAttention(attendableId);
 
-  return (
-    <NaturalToolbar.Root
-      {...props}
-      classNames={[attendableId, classNames]}
-      disabled={!alwaysActive && !hasAttention}
-      layoutManaged={textBlockWidthProp}
-    >
-      <InnerRoot {...innerRootProps}>
-        {items?.map((item: MenuItem, i: number) => (
-          <ToolbarMenuItem key={item.id ?? i} item={item} />
+    return (
+      <NaturalToolbar.Root
+        {...composableProps(props, { classNames: attendableId })}
+        disabled={!alwaysActive && !hasAttention}
+        ref={forwardedRef}
+      >
+        {items?.map((item: MenuItem) => (
+          <ToolbarMenuItem key={item.id} __menuScope={__menuScope} item={item} />
         ))}
-      </InnerRoot>
-    </NaturalToolbar.Root>
-  );
-};
+        {children}
+      </NaturalToolbar.Root>
+    );
+  },
+);
 
-const ToolbarMenuItem = ({ item }: { item: MenuItem }) => {
+const ToolbarMenuItem = ({ __menuScope, item }: MenuScopedProps<{ item: MenuItem }>) => {
   if (isSeparator(item)) {
     return <NaturalToolbar.Separator variant={item.properties.variant} />;
   }
 
-  // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
   if (isMenuGroup(item)) {
     if (item.properties.variant === 'dropdownMenu') {
-      return <DropdownMenuToolbarItem group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />;
+      return (
+        <DropdownMenuToolbarItem
+          __menuScope={__menuScope}
+          group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>}
+        />
+      );
     } else {
-      return <ToggleGroupToolbarItem group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />;
+      return (
+        <ToggleGroupToolbarItem
+          __menuScope={__menuScope}
+          group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>}
+        />
+      );
     }
   }
 
-  return <ActionToolbarItem action={item as MenuAction} />;
+  return <ActionToolbarItem __menuScope={__menuScope} action={item as MenuAction} />;
 };

package/src/components/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './DropdownMenu';
-export * from './ToolbarMenu';
-export * from './MenuContext';
+export * from './Menu';

package/src/hooks/useMenuActions.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
-import { useCallback, useContext, useRef } from 'react';
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { type DependencyList, useCallback, useContext, useMemo } from 'react';
 
 import { Graph, Node } from '@dxos/app-graph';
 
-import { type MenuItem, type MenuItemGroup } from '../types';
+import { type MenuItem, type MenuItemGroup, type MenuItemsAccessor } from '../types';
 
 export type ActionGraphNodes = Node.NodeArg<any>[];
 export type ActionGraphEdges = Graph.Edge[];
@@ -17,7 +17,7 @@ export type ActionGraphProps = {
 };
 
 export type MenuActions = {
-  useGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[];
+  items: MenuItemsAccessor;
 };
 
 export const useMenuActions = (props: Atom.Atom<ActionGraphProps>): MenuActions => {
@@ -26,22 +26,33 @@ export const useMenuActions = (props: Atom.Atom<ActionGraphProps>): MenuActions
 
   // Create a new graph whenever props change to preserve correct order.
   // (Graph.addEdges appends rather than replaces, which breaks ordering on updates.)
-  const graphRef = useRef<{ graph: Graph.WritableGraph; props: ActionGraphProps } | null>(null);
-  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+  // NOTE: Using useMemo rather than a ref-mutation pattern to avoid calling registry.set during render,
+  // which would trigger atom state updates in other components (setState-in-render React warning).
+  const graph = useMemo(() => {
     const newGraph = Graph.make({ registry });
     newGraph.pipe(Graph.addNodes(menuGraphProps.nodes as Node.NodeArg<any>[]), Graph.addEdges(menuGraphProps.edges));
-    graphRef.current = { graph: newGraph, props: menuGraphProps };
-  }
+    return newGraph;
+  }, [registry, menuGraphProps]);
 
-  const graph = graphRef.current.graph;
-
-  const useGroupItems = useCallback(
-    (sourceNode?: MenuItemGroup) => {
-      const items = useAtomValue(graph.connections(sourceNode?.id || Node.RootId)) as MenuItem[];
-      return items;
+  const items: MenuItemsAccessor = useCallback(
+    (group?: MenuItemGroup) => {
+      // TODO(wittjosiah): Migrate to using action relation instead of child.
+      return graph.connections(group?.id || Node.RootId, 'child') as Atom.Atom<MenuItem[] | null>;
     },
     [graph],
   );
 
-  return { useGroupItems };
+  return { items };
+};
+
+/**
+ * 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).
+ */
+export const useMenuBuilder = (build: (get: Atom.Context) => ActionGraphProps, deps: DependencyList): MenuActions => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const atom = useMemo(() => Atom.make(build), deps);
+  return useMenuActions(atom);
 };

package/src/index.ts

@@ -6,4 +6,4 @@ export * from './components';
 export * from './hooks';
 export * from './types';
 export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';
-export { MenuBuilder } from './builder';
+export { type ActionGroupBuilder, type ActionGroupBuilderFn, MenuBuilder } from './builder';

package/src/testing/generator.ts

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom, RegistryContext } from '@effect-atom/atom-react';
+import { Atom, Registry, RegistryContext } from '@effect-atom/atom-react';
 import { useContext, useEffect } from 'react';
 
 import { Graph, Node } from '@dxos/app-graph';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { type ActionGraphProps } from '../hooks/useMenuActions';
-import { type MenuItem, type MenuItemGroup } from '../types';
+import { type MenuItem, type MenuItemGroup, type MenuItemsAccessor } from '../types';
 
 export type CreateActionsProps = Partial<{
   type?: typeof Node.ActionType | typeof Node.ActionGroupType;
@@ -38,15 +38,15 @@ const icons = {
 
 export const createActions = (params?: CreateActionsProps) => {
   const { callback = () => console.log('invoke'), count = 12, type = Node.ActionType } = params ?? {};
-  return faker.helpers.multiple(
+  return random.helpers.multiple(
     () => ({
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       type,
       data: type === Node.ActionGroupType ? Node.actionGroupSymbol : callback,
       properties: {
-        label: faker.lorem.words(2),
-        icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
-        disabled: faker.helpers.arrayElement([true, false]),
+        label: random.lorem.words(2),
+        icon: random.helpers.arrayElement(icons[random.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
+        disabled: random.helpers.arrayElement([true, false]),
         ...(type === Node.ActionGroupType && { variant: 'dropdownMenu' }),
       },
     }),
@@ -61,8 +61,8 @@ const buildNestedActions = (): ActionGraphProps => {
     const actions = createActions();
     result.nodes.push(group, ...actions);
     result.edges.push(
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
+      { source: 'root', target: group.id, relation: 'child' },
+      ...actions.map((action) => ({ source: group.id, target: action.id, relation: 'child' })),
     );
   });
   return result;
@@ -70,23 +70,28 @@ const buildNestedActions = (): ActionGraphProps => {
 
 export const createNestedActions = Atom.make(buildNestedActions()).pipe(Atom.keepAlive);
 
-export const createNestedActionsResolver = (groupParams?: CreateActionsProps, params?: CreateActionsProps) => {
-  const graph = Graph.make();
+export const createNestedActionsResolver = (props?: {
+  groupParams?: CreateActionsProps;
+  params?: CreateActionsProps;
+  registry?: Registry.Registry;
+}) => {
+  const { groupParams, params, registry } = props ?? {};
+  const graph = Graph.make({ ...(registry && { registry }) });
   const actionGroups = createActions({ type: Node.ActionGroupType, ...groupParams });
   actionGroups.forEach((group) => {
     const actions = createActions(params);
     graph.pipe(
       Graph.addNodes([group as Node.NodeArg<any>, ...(actions as Node.NodeArg<any>[])]),
       Graph.addEdges([
-        { source: 'root', target: group.id },
-        ...actions.map((action) => ({ source: group.id, target: action.id })),
+        { source: 'root', target: group.id, relation: 'child' },
+        ...actions.map((action) => ({ source: group.id, target: action.id, relation: 'child' })),
       ]),
-      Graph.expand(group.id),
+      Graph.expand(group.id, 'child'),
     );
   });
-  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
-    (Graph.getActions(graph, groupNode?.id ?? Node.RootId) || null) as MenuItem[] | null;
-  return { resolveGroupItems };
+  const items: MenuItemsAccessor = (group?: MenuItemGroup) =>
+    graph.connections(group?.id ?? Node.RootId, 'child') as Atom.Atom<MenuItem[] | null>;
+  return { items };
 };
 
 /**
@@ -107,7 +112,7 @@ export const useMutateActions = (actionsAtom: Atom.Writable<ActionGraphProps>) =
           ...node,
           properties: {
             ...node.properties,
-            icon: faker.helpers.arrayElement(node.properties?.icon?.endsWith('regular') ? icons.fill : icons.regular),
+            icon: random.helpers.arrayElement(node.properties?.icon?.endsWith('regular') ? icons.fill : icons.regular),
             disabled: !node.properties?.disabled,
           },
         };

package/src/types.ts

@@ -2,6 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
+
 import { Node } from '@dxos/app-graph';
 import { type IconButtonProps, type ToolbarSeparatorProps } from '@dxos/react-ui';
 import { type MenuActionProperties } from '@dxos/ui-types';
@@ -25,16 +27,38 @@ export const isMenuGroup = (node: Node.Node): node is MenuItemGroup => node.type
 
 export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
-export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
+/** Atom-family-style accessor: returns an atom of items for a given group (or root when undefined). */
+export type MenuItemsAccessor = (group?: MenuItemGroup) => Atom.Atom<MenuItem[] | null>;
 
 export type ActionExecutor = (action: MenuAction, params: Node.InvokeProps) => void;
 
+export type MenuItemsMode = 'additive' | 'replacement';
+
+export type AddMenuItemsProps = {
+  id: string;
+  mode: MenuItemsMode;
+  priority?: number;
+  items: MenuItem[];
+  groupFilter?: (group?: MenuItemGroup) => boolean;
+};
+
+export type MenuItems = Omit<AddMenuItemsProps, 'priority'> & { priority: number };
+export type MenuItemsMap = Map<string, MenuItems>;
+
 export type MenuContextValue = {
-  useGroupItems: MenuItemsResolver;
+  /** Atom-family accessor for base menu items, keyed by group (similar to Tree model). */
+  items: MenuItemsAccessor;
   iconSize: IconButtonProps['size'];
   attendableId?: string;
+  /** TODO(burdon): Remove and assume always active if attendableId is undefined. */
   /** If true, the menu is always active regardless of attention state. */
   alwaysActive?: boolean;
+  /** Atom holding the current set of imperatively added menu items. */
+  menuItemsAtom: Atom.Atom<MenuItemsMap>;
+  /** Imperatively add menu items to the nearest MenuProvider. */
+  addMenuItems: (props: AddMenuItemsProps) => void;
+  /** Remove previously added menu items by id. */
+  removeMenuItems: (id: string) => void;
   /** Optional action executor. If provided, will be used instead of default execution. */
   onAction?: ActionExecutor;
 };

package/src/util.ts

@@ -72,6 +72,7 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
     {
       source,
       target: id,
+      relation: 'child' as const,
     },
   ],
 });
@@ -85,5 +86,5 @@ export const createLineSeparator = (id: string = 'line', source: string = 'root'
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [{ source, target: id, relation: 'child' as const }],
 });

package/dist/types/src/components/MenuContext.d.ts

@@ -1,15 +0,0 @@
-import { type Scope } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
-import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
-export type MenuScopedProps<P> = P & {
-    __menuScope?: Scope;
-};
-declare const createMenuScope: import("@radix-ui/react-context").CreateScope;
-declare const useMenu: (consumerName: string, scope: Scope<MenuContextValue | undefined>) => MenuContextValue;
-export declare const menuContextDefaults: MenuContextValue;
-type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
-declare const MenuProvider: ({ children, useGroupItems, iconSize, attendableId, alwaysActive, onAction, }: MenuProviderProps) => React.JSX.Element;
-export declare const useMenuItems: (group?: MenuItemGroup, propsItems?: MenuItem[], consumerName?: string, __menuScope?: Scope) => MenuItem[] | undefined;
-export { useMenu, createMenuScope, MenuProvider };
-export type { MenuProviderProps };
-//# sourceMappingURL=MenuContext.d.ts.map

package/dist/types/src/components/MenuContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAI7D,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAA4B,OAAO,wFAAkD,CAAC;AAEtF,eAAO,MAAM,mBAAmB,EAAE,gBAIjC,CAAC;AAIF,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAEtE,QAAA,MAAM,YAAY,GAAI,8EAOnB,iBAAiB,sBAcnB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,QAAQ,aAAa,EACrB,aAAa,QAAQ,EAAE,EACvB,eAAc,MAA8B,EAC5C,cAAc,KAAK,2BAKpB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;AAElD,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/src/components/MenuContext.tsx

@@ -1,64 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Scope, createContextScope } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useMemo } from 'react';
-
-import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
-
-export type MenuScopedProps<P> = P & { __menuScope?: Scope };
-
-const MENU_NAME = 'Menu';
-
-const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
-
-const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
-
-export const menuContextDefaults: MenuContextValue = {
-  iconSize: 5,
-  useGroupItems: () => null,
-  onAction: undefined,
-};
-
-const useMenuScope = createMenuScope();
-
-type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
-
-const MenuProvider = ({
-  children,
-  useGroupItems = menuContextDefaults.useGroupItems,
-  iconSize = menuContextDefaults.iconSize,
-  attendableId,
-  alwaysActive,
-  onAction,
-}: MenuProviderProps) => {
-  const { scope } = useMenuScope(undefined);
-  return (
-    <MenuContextProvider
-      useGroupItems={useGroupItems}
-      iconSize={iconSize}
-      attendableId={attendableId}
-      alwaysActive={alwaysActive}
-      onAction={onAction}
-      scope={scope}
-    >
-      {children}
-    </MenuContextProvider>
-  );
-};
-
-export const useMenuItems = (
-  group?: MenuItemGroup,
-  propsItems?: MenuItem[],
-  consumerName: string = 'useMenuItemConsumer',
-  __menuScope?: Scope,
-) => {
-  const { useGroupItems } = useMenu(consumerName, __menuScope);
-  const groupItems = useGroupItems(group);
-  return useMemo(() => propsItems ?? groupItems ?? undefined, [propsItems, groupItems]);
-};
-
-export { useMenu, createMenuScope, MenuProvider };
-
-export type { MenuProviderProps };