@dxos/plugin-navtree 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/components/NavTree/NavTree.stories.tsx

@@ -12,38 +12,35 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { useAtomCapability } from '@dxos/app-framework/ui';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { OperationResolver } from '@dxos/operation';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
+import { withLayout } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
-import { NavTreeContainer } from '../../containers';
+import { NavTreeContainer } from '#containers';
+import { storybookGraphBuilders } from '#testing';
+import { translations } from '#translations';
+
 import { NavTreePlugin } from '../../NavTreePlugin';
-import { storybookGraphBuilders } from '../../testing';
-import { translations } from '../../translations';
 
-faker.seed(1234);
+random.seed(1234);
 
 const StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
-// TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
-// TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
-
 const container = 'flex flex-col grow gap-2 p-4 rounded-md';
 
-// TODO(burdon): Factor out PlankHeader.
 const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   const { hasAttention } = useAttention(attendableId);
   console.log('hasAttention', hasAttention);
   return (
     <div className='flex p-1 items-center border-b border-separator'>
       <IconButton
-        density='coarse'
-        icon='ph--atom--regular'
+        density='lg'
+        icon='ph--circle--regular'
         label='Test'
         iconOnly
         variant={hasAttention ? 'primary' : 'ghost'}
@@ -81,7 +78,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
-        <div className={mx(container, 'm-2 bg-active-surface')}>
+        <div className={mx(container, 'm-2 bg-current-surface')}>
           <Input.Root>
             <Input.Label>Level 1 (group)</Input.Label>
           </Input.Root>
@@ -120,7 +117,6 @@ const meta = {
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
@@ -132,20 +128,21 @@ const meta = {
         NavTreePlugin(),
       ],
       capabilities: () => {
-        const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
+        const storyStateAtom = Atom.make({ tab: 'root/space-0' }).pipe(Atom.keepAlive);
         return [
           Capability.contributes(StoryState, storyStateAtom),
           Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
-          Capability.contributes(Capabilities.OperationResolver, [
-            OperationResolver.make({
-              operation: LayoutOperation.SwitchWorkspace,
-              handler: ({ subject }) =>
+          Capability.contributes(
+            Capabilities.OperationHandler,
+            OperationHandlerSet.make(
+              Operation.withHandler(LayoutOperation.SwitchWorkspace, ({ subject }) =>
                 Effect.gen(function* () {
                   const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
                   registry.set(storyStateAtom, { tab: subject });
                 }),
-            }),
-          ]),
+              ),
+            ),
+          ),
         ];
       },
     }),
@@ -164,8 +161,10 @@ export const Default: Story = {
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
 
-    // Find the element with treegrid role and click on its parent
-    const treegridElement = await canvas.findByRole('treegrid');
+    // Plugin startup is async; the treegrid only appears after the Startup event
+    // fires and the graph is built. Use a generous timeout so slower CI runners
+    // don't race the default 1 s limit.
+    const treegridElement = await canvas.findByRole('treegrid', {}, { timeout: 10000 });
     const treegridParent = treegridElement.parentElement;
     if (treegridParent) {
       await userEvent.click(treegridParent);

package/src/components/NavTree/NavTree.tsx

@@ -9,7 +9,8 @@ import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugi
 import { Tabs } from '@dxos/react-ui-tabs';
 import { byPosition } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
+import { useLoadDescendents } from '#hooks';
+
 import { useNavTreeContext } from '../NavTreeContext';
 import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
@@ -30,7 +31,7 @@ export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab
     //  it uses RovingFocus and doesn't support moving focus to an item that is not a tab. Assess whether this situation
     //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
     //  not use `react-ui-tabs` at all.
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative' ref={forwardedRef}>
+    <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -81,10 +82,10 @@ const useTopLevelNavItems = (root?: Node.Node) => {
     ].toSorted((a, b) => byPosition(a.properties, b.properties));
 
     return {
-      topLevelActions,
-      l0Items: topLevelWorkspaces,
       pinnedItems,
+      topLevelActions,
       userAccountItem,
+      l0Items: topLevelWorkspaces,
     };
   }, [rootActions, rootOutboundItems]);
 

package/src/components/{NavTreeContext.tsx → NavTreeContext/NavTreeContext.tsx}

@@ -6,7 +6,7 @@ import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { type NavTreeContextValue } from './types';
+import { type NavTreeContextValue } from '../types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 

package/src/components/NavTreeContext/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NavTreeContext';

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -5,37 +5,36 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Node } from '@dxos/app-graph';
 import { corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { random } from '@dxos/random';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
 const parent = {
-  id: faker.string.uuid(),
+  id: random.string.uuid(),
   type: 'node',
   data: null,
   properties: {
-    label: faker.lorem.words(2),
+    label: random.lorem.words(2),
     icon: 'ph--circle--regular',
   },
 } satisfies Node.NodeArg<any>;
 
 // TODO(burdon): Factor out across tests.
-const menuActions = faker.helpers.multiple(
+const menuActions = random.helpers.multiple(
   () =>
     ({
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       type: 'action',
       data: () =>
         Effect.sync(() => {
           console.log('invoke');
         }),
       properties: {
-        label: faker.lorem.words(2),
+        label: random.lorem.words(2),
         icon: 'ph--circle--regular',
       },
     }) satisfies Node.NodeArg<any>,
@@ -52,9 +51,8 @@ const meta = {
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
   decorators: [
-    withTheme(),
     withPluginManager({
-      plugins: [...corePlugins(), RuntimePlugin()],
+      plugins: [...corePlugins(), ProcessManagerPlugin()],
     }),
   ],
   parameters: {

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -2,70 +2,82 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { type ActionProperties } from '../../types';
+import { meta } from '#meta';
+import { type ActionProperties } from '#types';
+
+const fallbackIcon = 'ph--circle-dashed--regular';
+
+const mdActionButtonProps = {
+  size: 4 as const,
+  density: 'md' as const,
+};
+
+const lgActionButtonProps = {
+  size: 5 as const,
+  density: 'lg' as const,
+};
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node.Node;
+  path?: string[];
   caller?: string;
   monolithic?: boolean;
   menuActions?: Node.Action[];
 };
 
-const fallbackIcon = 'ph--placeholder--regular';
+export const NavTreeItemActionDropdownMenu = composable<HTMLButtonElement, NavTreeItemActionMenuProps>(
+  ({ parent, path, label, icon, testId, menuActions, caller, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const density = useDensityContext();
+    const runAction = useActionRunner();
+    const handleAction = useCallback(
+      (action: Node.Action, params: Node.InvokeProps = {}) => runAction(action, { ...params, path }),
+      [runAction, path],
+    );
 
-const fineActionButtonProps = {
-  size: 4 as const,
-  density: 'fine' as const,
-};
-const coarseActionButtonProps = {
-  size: 5 as const,
-  density: 'coarse' as const,
-};
+    return (
+      <Menu.Root caller={caller} onAction={handleAction}>
+        <Menu.Trigger asChild>
+          <IconButton
+            {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
+            {...composableProps(props)}
+            classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+            variant='ghost'
+            icon={icon ?? fallbackIcon}
+            iconOnly
+            label={toLocalizedString(label, t)}
+            data-testid={testId}
+            ref={forwardedRef}
+          />
+        </Menu.Trigger>
+        <Menu.Content group={parent} items={menuActions as MenuItem[]} />
+      </Menu.Root>
+    );
+  },
+);
 
-export const NavTreeItemActionDropdownMenu = ({
-  parent,
-  label,
-  icon,
-  testId,
-  menuActions,
-  caller,
-}: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(meta.id);
-  const density = useDensityContext();
-  const runAction = useActionRunner();
-
-  return (
-    <Menu.Root caller={caller} onAction={runAction}>
-      <Menu.Trigger asChild>
-        <IconButton
-          {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
-          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
-          variant='ghost'
-          icon={icon ?? fallbackIcon}
-          iconOnly
-          label={toLocalizedString(label, t)}
-          data-testid={testId}
-        />
-      </Menu.Trigger>
-      <Menu.Content group={parent} items={menuActions as MenuItem[]} />
-    </Menu.Root>
-  );
-};
+NavTreeItemActionDropdownMenu.displayName = 'NavTreeItemActionDropdownMenu';
 
 export const NavTreeItemMonolithicAction = (
-  props: Node.Action & { parent: Node.Node; onAction?: (action: Node.Action) => void; baseLabel: string },
+  props: Node.Action & {
+    parent: Node.Node;
+    path?: string[];
+    onAction?: (action: Node.Action) => void;
+    baseLabel: string;
+  },
 ) => {
   const {
     parent,
+    path,
     properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
     baseLabel,
   } = props;
@@ -73,7 +85,7 @@ export const NavTreeItemMonolithicAction = (
   const runAction = useActionRunner();
   return (
     <IconButton
-      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+      {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
       variant={variant}
       classNames={[
         'shrink-0',
@@ -91,22 +103,28 @@ export const NavTreeItemMonolithicAction = (
           return;
         }
 
-        void runAction(props, caller ? { parent, caller } : { parent });
+        void runAction(props, caller ? { parent, caller, path } : { parent, path });
       }}
       data-testid={testId}
     />
   );
 };
 
-export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
+export const NavTreeItemAction = ({
+  monolithic,
+  menuActions,
+  menuType,
+  parent,
+  path,
+  ...props
+}: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(meta.id);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
-
   return monolithic && menuActions?.length === 1 ? (
-    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={parent} path={path} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={parent} path={path} menuActions={menuActions} />
   );
 };

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,88 +4,47 @@
 
 import React, { Fragment, memo, useMemo } from 'react';
 
-import { Node } from '@dxos/app-graph';
 import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { useActions } from '../../hooks';
-import { meta } from '../../meta';
+import { getListActions, useActions } from '#hooks';
+import { meta } from '#meta';
+
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { type NavTreeItemColumnsProps } from '../types';
-
-import { NavTreeItemAction } from './NavTreeItemAction';
+import { NavTreeItemActionDropdownMenu, NavTreeItemMonolithicAction } from './NavTreeItemAction';
 
 export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(meta.id);
   const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-  const { actions: actionsProp, groupedActions } = useActions(item);
-  const sortedActions = useMemo(
-    () =>
-      actionsProp.toSorted((actionA, actionB) => {
-        const primaryA = actionA.properties?.disposition === 'list-item-primary';
-        const primaryB = actionB.properties?.disposition === 'list-item-primary';
-        if (primaryA && !primaryB) {
-          return -1;
-        }
-        if (primaryB && !primaryA) {
-          return 1;
-        }
-        return 0;
-      }),
-    [actionsProp],
-  );
-  const [primaryAction, ...secondaryActions] = sortedActions;
-
-  const actions = useMemo(
-    () =>
-      (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : sortedActions)
-        .flatMap((action) => (Node.isAction(action) ? [action] : []))
-        .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition)),
-    [sortedActions, primaryAction],
-  );
-
-  const primaryMenuActions = useMemo(
-    () =>
-      primaryAction
-        ? Node.isAction(primaryAction)
-          ? [primaryAction]
-          : groupedActions[primaryAction?.id ?? '']
-        : undefined,
-    [primaryAction, groupedActions],
-  );
+  const flattenedActions = useActions(item);
+  const allActions = useMemo(() => getListActions(flattenedActions), [flattenedActions]);
 
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+  const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
 
   return (
-    <div role='none' className='contents dx-app-no-drag'>
-      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
-        <Treegrid.Cell classNames='contents'>
-          <NavTreeItemAction
-            testId={primaryAction.properties?.testId}
-            label={toLocalizedString(primaryAction.properties?.label, t)}
-            icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-            parent={item}
-            monolithic={Node.isAction(primaryAction)}
-            menuActions={primaryMenuActions}
-            menuType={primaryAction.properties?.menuType}
-            caller={NAV_TREE_ITEM}
-          />
-        </Treegrid.Cell>
-      ) : (
-        <Treegrid.Cell role='none' />
-      )}
+    <div className='contents dx-app-no-drag'>
       <ActionRoot>
-        {actions.length > 0 ? (
+        {allActions.length === 1 ? (
+          <Treegrid.Cell classNames='contents'>
+            <NavTreeItemMonolithicAction
+              baseLabel={toLocalizedString(allActions[0].properties?.label, t)}
+              parent={item}
+              path={path}
+              {...allActions[0]}
+            />
+          </Treegrid.Cell>
+        ) : allActions.length > 1 ? (
           <Treegrid.Cell classNames='contents'>
-            <NavTreeItemAction
+            <NavTreeItemActionDropdownMenu
               testId={`navtree.treeItem.actionsLevel${level}`}
-              label={t('tree item actions label')}
+              label={t('tree-item-actions.label')}
               icon='ph--dots-three-vertical--regular'
               parent={item}
-              menuActions={actions}
-              menuType='dropdown'
+              path={path}
+              menuActions={allActions}
               caller={NAV_TREE_ITEM}
             />
           </Treegrid.Cell>