@dxos/plugin-navtree 0.8.4-main.fffef41 → 0.9.0

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

@@ -2,61 +2,49 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import React, { type KeyboardEvent, useCallback, useRef } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import {
-  Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  contributes,
-  createResolver,
-  defineCapability,
-} from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { live } from '@dxos/live-object';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
+import { withLayout } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
-import { NavTreePlugin } from '../../NavTreePlugin';
-import { storybookGraphBuilders } from '../../testing';
-import { translations } from '../../translations';
-import { NavTreeContainer } from '../NavTreeContainer';
+import { NavTreeContainer } from '#containers';
+import { storybookGraphBuilders } from '#testing';
+import { translations } from '#translations';
 
-faker.seed(1234);
+import { NavTreePlugin } from '../../NavTreePlugin';
 
-const StoryState = defineCapability<{ tab: string }>('story-state');
+random.seed(1234);
 
-// 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 StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
 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'}
-        classNames='is-[--rail-action] bs-[--rail-action]'
+        classNames='w-(--dx-rail-action) h-(--dx-rail-action)'
       />
       <StackItem.ResizeHandle />
     </div>
@@ -79,22 +67,22 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
     <StackItem.Root
       item={{ id: attendableId }}
       {...attentionAttrs}
-      classNames='bg-baseSurface border-ie border-separator'
+      classNames='bg-base-surface border-e border-separator'
       size={30}
       onKeyDown={handleKeyDown}
       ref={rootElement}
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-be border-subduedSeparator'>
+        <Toolbar.Root classNames='border-b border-subdued-separator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
-        <div className={mx(container, 'm-2 bg-activeSurface')}>
+        <div className={mx(container, 'm-2 bg-current-surface')}>
           <Input.Root>
             <Input.Label>Level 1 (group)</Input.Label>
           </Input.Root>
-          <div className={mx(container, 'bg-baseSurface')}>
+          <div className={mx(container, 'bg-base-surface')}>
             <Input.Root>
               <Input.Label>Level 2 (base)</Input.Label>
               <Input.TextArea placeholder='Enter text' />
@@ -107,10 +95,10 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
 };
 
 const DefaultStory = () => {
-  const state = useCapability(StoryState);
+  const state = useAtomCapability(StoryState);
 
   return (
-    <Main.Root complementarySidebarState='closed'>
+    <Main.Root navigationSidebarState='expanded'>
       <Main.NavigationSidebar label='Navigation' classNames='grid'>
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
@@ -125,36 +113,38 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-navtree/NavTree',
+  title: 'plugins/plugin-navtree/components/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({
+          initialState: { sidebarState: 'expanded' },
+        }),
+
         NavTreePlugin(),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders(context)),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
       ],
+      capabilities: () => {
+        const storyStateAtom = Atom.make({ tab: 'root/space-0' }).pipe(Atom.keepAlive);
+        return [
+          Capability.contributes(StoryState, storyStateAtom),
+          Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
+          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 });
+                }),
+              ),
+            ),
+          ),
+        ];
+      },
     }),
   ],
   parameters: {
@@ -168,11 +158,13 @@ export default meta;
 type Story = StoryObj<typeof NavTreeContainer>;
 
 export const Default: Story = {
-  play: async ({ canvasElement }) => {
+  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

@@ -2,56 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
-import { type TreeProps } from '@dxos/react-ui-list';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
+
+import { useLoadDescendents } from '#hooks';
 
-import { useLoadDescendents } from '../../hooks';
-import { type NavTreeItemGraphNode } from '../../types';
 import { useNavTreeContext } from '../NavTreeContext';
 import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
+export type NavTreeProps = { id: string; root?: Node.Node; tab: string } & Pick<L1TabsProps, 'open'>;
 
-export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
-  const { tab, useItems, onBack } = useNavTreeContext();
-  const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
-  const topLevelCollections = useItems(root, { disposition: 'collection' });
-  const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
-  const topLevelNavigation = useItems(root, { disposition: 'navigation' });
-  const l0Items = useMemo(
-    () => [
-      // prettier-ignore
-      ...topLevelCollections,
-      ...topLevelWorkspaces,
-      ...topLevelNavigation,
-    ],
-    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
-  );
-  const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
-  const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
-  const topLevelItems = useMemo(
-    () => [
-      // prettier-ignore
-      ...l0Items,
-      ...pinnedItems,
-      ...(userAccountItem ? [userAccountItem] : []),
-    ],
-    [l0Items, pinnedItems, userAccountItem],
-  );
+// TODO(wittjosiah): Refactor to Radix-style.
+export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab, ...props }, forwardedRef) => {
+  const { onBack, onItemHover } = useNavTreeContext();
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems } = useTopLevelNavItems(root);
 
   useLoadDescendents(root);
   const path = useMemo(() => [id], [id]);
 
   return (
     // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
-    //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
+    //  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'>
+    <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -59,8 +39,60 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
         userAccountItem={userAccountItem}
         path={path}
         parent={root}
+        onItemHover={onItemHover}
       />
       <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
+});
+
+/**
+ * Partitions root children into workspaces, pinned items, user-account, and top-level actions.
+ */
+const useTopLevelNavItems = (root?: Node.Node) => {
+  const { graph } = useAppGraph();
+  const rootId = root?.id ?? Node.RootId;
+  const rootOutboundItems = useConnections(graph, rootId, 'child');
+  const rootActions = useGraphActions(graph, rootId);
+
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo(() => {
+    const topLevelWorkspaces: Node.Node[] = [];
+    const outboundPinnedItems: Node.Node[] = [];
+    let userAccountItem: Node.Node | undefined;
+    for (const node of rootOutboundItems) {
+      switch (node.properties.disposition) {
+        case 'workspace':
+          topLevelWorkspaces.push(node);
+          break;
+        case 'pin-end':
+          outboundPinnedItems.push(node);
+          break;
+        case 'user-account':
+          userAccountItem ??= node;
+          break;
+      }
+    }
+
+    const topLevelActions = rootActions
+      .filter((action) => action.properties.disposition === 'menu')
+      .toSorted((a, b) => byPosition(a.properties, b.properties));
+    const pinnedItems = [
+      ...outboundPinnedItems,
+      ...rootActions.filter((action) => action.properties.disposition === 'pin-end'),
+    ].toSorted((a, b) => byPosition(a.properties, b.properties));
+
+    return {
+      pinnedItems,
+      topLevelActions,
+      userAccountItem,
+      l0Items: topLevelWorkspaces,
+    };
+  }, [rootActions, rootOutboundItems]);
+
+  const topLevelItems = useMemo(
+    () => [...l0Items, ...pinnedItems, ...(userAccountItem ? [userAccountItem] : [])],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  return { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems };
 };

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

@@ -3,42 +3,46 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+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 { 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 NodeArg<any>;
+} 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: () => {
-        console.log('invoke');
-      },
+      data: () =>
+        Effect.sync(() => {
+          console.log('invoke');
+        }),
       properties: {
-        label: faker.lorem.words(2),
+        label: random.lorem.words(2),
         icon: 'ph--circle--regular',
       },
-    }) satisfies NodeArg<any>,
+    }) satisfies Node.NodeArg<any>,
   { count: 20 },
 );
 
 const meta = {
-  title: 'plugins/plugin-navtree/NavTreeItemAction',
+  title: 'plugins/plugin-navtree/components/NavTreeItemAction',
   component: NavTreeItemAction,
   args: {
     icon: 'ph--list--regular',
@@ -46,7 +50,11 @@ const meta = {
     menuActions,
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
-  decorators: [withTheme],
+  decorators: [
+    withPluginManager({
+      plugins: [...corePlugins(), ProcessManagerPlugin()],
+    }),
+  ],
   parameters: {
     layout: 'centered',
   },

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -2,79 +2,96 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { type Action, type Node } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
+import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
-import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
-import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
+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';
 
-export type NavTreeItemActionMenuProps = ActionProperties & {
-  parent: Node;
-  caller?: string;
-  monolithic?: boolean;
-  menuActions?: Action[];
-};
+const fallbackIcon = 'ph--circle-dashed--regular';
 
-const fallbackIcon = 'ph--placeholder--regular';
-
-const fineActionButtonProps = {
+const mdActionButtonProps = {
   size: 4 as const,
-  density: 'fine' as const,
+  density: 'md' as const,
 };
-const coarseActionButtonProps = {
+
+const lgActionButtonProps = {
   size: 5 as const,
-  density: 'coarse' as const,
+  density: 'lg' as const,
 };
 
-export const NavTreeItemActionDropdownMenu = ({
-  parent,
-  label,
-  icon,
-  testId,
-  menuActions,
-  caller,
-}: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(meta.id);
-  const density = useDensityContext();
-  return (
-    <MenuProvider>
-      <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
-        <DropdownMenu.Trigger asChild>
+export type NavTreeItemActionMenuProps = ActionProperties & {
+  parent: Node.Node;
+  path?: string[];
+  caller?: string;
+  monolithic?: boolean;
+  menuActions?: Node.Action[];
+};
+
+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],
+    );
+
+    return (
+      <Menu.Root caller={caller} onAction={handleAction}>
+        <Menu.Trigger asChild>
           <IconButton
-            {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
-            classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
+            {...(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}
           />
-        </DropdownMenu.Trigger>
-      </DropdownMenu.Root>
-    </MenuProvider>
-  );
-};
+        </Menu.Trigger>
+        <Menu.Content group={parent} items={menuActions as MenuItem[]} />
+      </Menu.Root>
+    );
+  },
+);
 
-export const NavTreeItemMonolithicAction = ({
-  parent,
-  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
-  data: invoke,
-  baseLabel,
-}: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
+NavTreeItemActionDropdownMenu.displayName = 'NavTreeItemActionDropdownMenu';
+
+export const NavTreeItemMonolithicAction = (
+  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;
   const density = useDensityContext();
+  const runAction = useActionRunner();
   return (
     <IconButton
-      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+      {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
       variant={variant}
       classNames={[
         'shrink-0',
         hoverableControlItem,
         hoverableOpenControlItem,
-        iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
+        iconOnly ? 'px-2 pointer-fine:px-1' : 'p-2 pointer-fine:p-2 me-1',
       ]}
       icon={icon ?? fallbackIcon}
       iconOnly={iconOnly}
@@ -86,22 +103,28 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
 
-        void invoke?.(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} />
   );
 };