@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/NavTree.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
+
+import { L0Menu } from './L0Menu';
+import { L1Panels } from './L1Panels';
+import { useNavTreeContext } from './NavTreeContext';
+import { type NavTreeProps } from './types';
+import { useLoadDescendents } from '../hooks';
+
+export const NAV_TREE_ITEM = 'NavTreeItem';
+
+export const NavTree = ({ id, root }: NavTreeProps) => {
+  const { tab, getItems, onBack } = useNavTreeContext();
+  const topLevelActions = getItems(root, 'item').toSorted((a, b) => byPosition(a.properties, b.properties));
+  const topLevelCollections = getItems(root, 'collection');
+  const topLevelWorkspaces = getItems(root, 'workspace');
+  const topLevelNavigation = getItems(root, 'navigation');
+  const l0Items = useMemo(
+    () => [...topLevelActions, ...topLevelCollections, ...topLevelWorkspaces, ...topLevelNavigation],
+    [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
+  );
+  const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
+  const userAccountItem = getItems(root, 'user-account')[0];
+  const topLevelItems = useMemo(
+    () => [...l0Items, ...pinnedItems, userAccountItem],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  useLoadDescendents(root);
+  const path = useMemo(() => [id], [id]);
+
+  return (
+    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+      <L0Menu
+        topLevelItems={l0Items}
+        pinnedItems={pinnedItems}
+        userAccountItem={userAccountItem}
+        path={path}
+        parent={root}
+      />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} />
+    </Tabs.Root>
+  );
+};

package/src/components/NavTreeContainer.tsx

@@ -16,22 +16,28 @@ import {
   useIntentDispatcher,
   useLayout,
 } from '@dxos/app-framework';
-import { isAction, isActionLike, type ReadableGraph, ROOT_ID, type Node } from '@dxos/app-graph';
+import { isAction, isActionLike, type Node } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { useConnections } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { useMediaQuery } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
-import { arrayMove, byPosition } from '@dxos/util';
+import { arrayMove } from '@dxos/util';
 
 import { NAV_TREE_ITEM, NavTree } from './NavTree';
 import { NavTreeContext } from './NavTreeContext';
 import { type NavTreeContextValue } from './types';
 import { NavTreeCapabilities } from '../capabilities';
-import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
-import { getActions as naturalGetActions, getChildren, getParent, resolveMigrationOperation } from '../util';
+import {
+  expandActions,
+  expandChildren,
+  getActions as naturalGetActions,
+  getChildren,
+  getParent,
+  resolveMigrationOperation,
+  expandChildrenAndActions,
+} from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
@@ -43,29 +49,6 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 const getChildrenFilter = (node: Node): node is Node =>
   untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
 
-const filterItems = (node: Node, disposition?: string) => {
-  if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
-    return false;
-  } else if (!disposition) {
-    const action = isAction(node);
-    return !action || node.properties.disposition === 'item';
-  } else {
-    return node.properties.disposition === disposition;
-  }
-};
-
-const getItems = (graph: ReadableGraph, node?: Node, disposition?: string) => {
-  return graph.getConnections(node?.id ?? ROOT_ID, 'outbound').filter((node) => filterItems(node, disposition));
-};
-
-const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
-  const { graph } = useAppGraph();
-  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node) =>
-    filterItems(node, options?.disposition),
-  );
-  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
-};
-
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
@@ -75,15 +58,34 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
-  const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
   const layout = useLayout();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
+  const getItems = useCallback(
+    (node?: Node, disposition?: string) => {
+      return graph.nodes(node ?? graph.root, {
+        filter: (node): node is Node => {
+          return untracked(() => {
+            if (node.properties.disposition === 'hidden') {
+              return false;
+            } else if (!disposition) {
+              const action = isAction(node);
+              return !action || node.properties.disposition === 'item';
+            } else {
+              return node.properties.disposition === disposition;
+            }
+          });
+        },
+      });
+    },
+    [graph],
+  );
+
   const getProps = useCallback(
     (node: Node, path: string[]): PropsFromTreeItem => {
-      const children = getChildren(graph, node, path).filter(getChildrenFilter);
+      const children = getChildren(graph, node, getChildrenFilter, path);
       const parentOf =
         children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
       return {
@@ -100,63 +102,51 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph],
   );
 
-  // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
-  // const loadDescendents = useCallback(
-  //   (node: Node) => {
-  //     graph.expand(node.id, 'outbound');
-  //     // Load one level deeper, which resolves some juddering observed on open/close.
-  //     graph.getConnections(node.id, 'outbound').forEach((child) => {
-  //       graph.expand(child.id, 'outbound');
-  //     });
-  //   },
-  //   [graph],
-  // );
+  const loadDescendents = useCallback(
+    (node: Node) => {
+      void expandActions(graph, node);
+      if (!isActionLike(node)) {
+        void expandChildren(graph, node).then(() =>
+          // Load one level deeper, which resolves some juddering observed on open/close.
+          Promise.all(
+            getChildren(graph, node).flatMap((child) => [expandActions(graph, child), expandChildren(graph, child)]),
+          ),
+        );
+      }
+    },
+    [graph],
+  );
 
-  const handleOpenChange = useCallback(
+  const onOpenChange = useCallback(
     ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
       // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
       setItem(path, 'open', open);
-      // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
-      // graph.expand(id, 'outbound');
+
+      if (graph) {
+        const node = graph.findNode(id);
+        return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
+      }
     },
     [graph],
   );
 
-  const handleTabChange = useCallback(
+  const onTabChange = useCallback(
     async (node: NavTreeItemGraphNode) => {
-      await dispatch(
-        createIntent(LayoutAction.UpdateSidebar, {
-          part: 'sidebar',
-          options: {
-            state:
-              node.id === tab
-                ? navigationSidebarState === 'expanded'
-                  ? isLg
-                    ? 'collapsed'
-                    : 'closed'
-                  : 'expanded'
-                : 'expanded',
-          },
-        }),
-      );
-
       await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
-
       // Open the first item if the workspace is empty.
       if (layout.active.length === 0) {
-        const [item] = getItems(graph, node).filter((node) => !isActionLike(node));
+        const [item] = getItems(node).filter((node) => !isActionLike(node));
         if (item && item.data) {
           await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
         }
       }
     },
-    [dispatch, layout.active, tab, navigationSidebarState, isLg],
+    [dispatch, layout],
   );
 
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
-    // TODO(wittjosiah): This shouldn't depend directly on client, there should be a graph-level abstraction.
     if (isSpace(targetNode.data)) {
       // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
       return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
@@ -174,8 +164,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       }
 
       if (isAction(node)) {
-        const [parent] = graph.getConnections(node.id, 'inbound');
-        void (parent && node.data({ parent, caller: NAV_TREE_ITEM }));
+        const [parent] = graph.nodes(node, { relation: 'inbound' });
+        void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
         return;
       }
 
@@ -196,7 +186,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
       }
 
-      const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
+      const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
       if (isAction(defaultAction)) {
         void (defaultAction.data as () => void)();
       }
@@ -208,7 +198,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph, dispatch, isCurrent, isLg],
   );
 
-  const handleBack = useCallback(
+  const onBack = useCallback(
     () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
     [dispatch],
   );
@@ -235,8 +225,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
               : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
           const sourceParent = getParent(graph, sourceNode, sourcePath);
           const targetParent = getParent(graph, targetNode, targetPath);
-          const sourceItems = getItems(graph, sourceParent);
-          const targetItems = getItems(graph, targetParent);
+          const sourceItems = getItems(sourceParent);
+          const targetItems = getItems(targetParent);
           const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
           const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
           const migrationIndex =
@@ -272,56 +262,46 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     });
   }, [graph]);
 
-  const setAlternateTree = useCallback(
-    (path: string[], open: boolean) => {
-      setItem(path, 'alternateTree', open);
-    },
-    [setItem],
-  );
-
   const navTreeContextValue = useMemo(
     () => ({
-      useItems,
       tab,
+      onTabChange,
+      onBack,
       getActions,
-      // loadDescendents,
+      loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
+      getItems,
       getProps,
       isCurrent,
       isOpen,
+      onOpenChange,
       canDrop,
-      isAlternateTree,
-      setAlternateTree,
-      onTabChange: handleTabChange,
-      onOpenChange: handleOpenChange,
       onSelect: handleSelect,
-      onBack: handleBack,
     }),
     [
       tab,
+      onTabChange,
+      onBack,
       getActions,
-      // loadDescendents,
+      loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
+      getItems,
       getProps,
       isCurrent,
       isOpen,
+      onOpenChange,
       canDrop,
-      isAlternateTree,
-      setAlternateTree,
-      handleTabChange,
-      handleOpenChange,
       handleSelect,
-      handleBack,
     ],
   );
 
   return (
     <NavTreeContext.Provider value={navTreeContextValue}>
-      <NavTree id={ROOT_ID} root={graph.root} open={layout.sidebarOpen} />
+      <NavTree root={graph.root} id={graph.root.id} />
     </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -10,4 +10,4 @@ import { type NavTreeContextValue } from './types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 
-export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('Missing NavTreeContext'));
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));

package/src/components/{NavTreeItem/NavTreeItemAction.stories.tsx → NavTreeItemAction.stories.tsx}

@@ -4,8 +4,6 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
-
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -39,23 +37,19 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-const meta: Meta<typeof NavTreeItemAction> = {
+export default {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
+    onAction: (action) => {
+      console.log(action);
+    },
   } satisfies Partial<NavTreeItemActionMenuProps>,
-  parameters: {
-    layout: 'centered',
-  },
 };
 
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
+export const Default = {};

package/src/components/{NavTreeItem/NavTreeItemAction.tsx → NavTreeItemAction.tsx}

@@ -5,12 +5,12 @@
 import React, { type MutableRefObject, useRef } from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
+import { useTranslation, toLocalizedString, IconButton } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../../meta';
-import { type ActionProperties } from '../../types';
+import { NAVTREE_PLUGIN } from '../meta';
+import { type ActionProperties } from '../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node;
@@ -18,41 +18,31 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   monolithic?: boolean;
   menuActions?: Action[];
   suppressNextTooltip?: MutableRefObject<boolean>;
+  onAction?: (action: Action) => void;
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
 
-const fineActionButtonProps = {
+const actionButtonProps = {
   size: 4 as const,
   density: 'fine' as const,
 };
-const coarseActionButtonProps = {
-  size: 5 as const,
-  density: 'coarse' as const,
-};
 
 export const NavTreeItemActionDropdownMenu = ({
-  parent,
   label,
   icon,
   testId,
   menuActions,
-  caller,
+  onAction,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef<boolean>(false);
-  const density = useDensityContext();
   return (
-    <MenuProvider>
-      <DropdownMenu.Root
-        group={parent}
-        items={menuActions as MenuItem[]}
-        caller={caller}
-        suppressNextTooltip={suppressNextTooltip}
-      >
+    <MenuProvider onAction={onAction}>
+      <DropdownMenu.Root items={menuActions as MenuItem[]} suppressNextTooltip={suppressNextTooltip}>
         <DropdownMenu.Trigger asChild>
           <IconButton
-            {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+            {...actionButtonProps}
             classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
             variant='ghost'
             icon={icon ?? fallbackIcon}
@@ -73,10 +63,9 @@ export const NavTreeItemMonolithicAction = ({
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
-  const density = useDensityContext();
   return (
     <IconButton
-      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+      {...actionButtonProps}
       variant={variant}
       classNames={mx(
         'shrink-0',
@@ -93,7 +82,7 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
         event.stopPropagation();
-        void invoke?.(caller ? { parent, caller } : { parent });
+        void invoke?.(caller ? { node: parent, caller } : { node: parent });
       }}
       data-testid={testId}
     />
@@ -109,6 +98,12 @@ export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...pr
   return monolithic && menuActions?.length === 1 ? (
     <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
+    <NavTreeItemActionDropdownMenu
+      {...props}
+      label={baseLabel}
+      parent={node}
+      menuActions={menuActions}
+      onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
+    />
   );
 };

package/src/components/NavTreeItemColumns.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment, memo } from 'react';
+
+import { isAction } from '@dxos/app-graph';
+import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+
+import { NAV_TREE_ITEM } from './NavTree';
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemAction } from './NavTreeItemAction';
+import type { NavTreeItemColumnsProps } from './types';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+
+export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+
+  const level = path.length - 2;
+
+  const { actions: _actions, groupedActions } = getActions(item);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
+    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
+    .flatMap((action) => (isAction(action) ? [action] : []))
+    .filter((action) => !action.properties?.hidden);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
+  useLoadDescendents(item);
+  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+
+  return (
+    <div role='none' className='contents app-no-drag'>
+      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+        <NavTreeItemAction
+          testId={primaryAction.properties?.testId}
+          label={toLocalizedString(primaryAction.properties?.label, t)}
+          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+          parent={item}
+          monolithic={isAction(primaryAction)}
+          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
+          menuType={primaryAction.properties?.menuType}
+          caller={NAV_TREE_ITEM}
+        />
+      ) : (
+        <Treegrid.Cell />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <NavTreeItemAction
+            testId={`navtree.treeItem.actionsLevel${level}`}
+            label={t('tree item actions label')}
+            icon='ph--dots-three-vertical--regular'
+            parent={item}
+            menuActions={actions}
+            menuType='dropdown'
+            caller={NAV_TREE_ITEM}
+          />
+        ) : (
+          <Treegrid.Cell />
+        )}
+      </ActionRoot>
+      {ItemEnd && <ItemEnd node={item} open={open} />}
+    </div>
+  );
+});

package/src/components/{UserAccountAvatar/UserAccountAvatar.stories.tsx → UserAccountAvatar.stories.tsx}

@@ -5,17 +5,17 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-
-import { withTheme } from '@dxos/storybook-utils';
+import React from 'react';
 
 import { UserAccountAvatar } from './UserAccountAvatar';
 
+export const Default = (props: any) => {
+  return <UserAccountAvatar {...props} />;
+};
+
 const meta: Meta<typeof UserAccountAvatar> = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
   component: UserAccountAvatar,
-  decorators: [withTheme],
 };
 
 export default meta;
-
-export const Default = {};

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

@@ -15,19 +15,19 @@ export type UserAccountAvatarProps = {
   status?: AvatarStatus;
 };
 
-export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAccountAvatarProps) => {
-  const fallbackValue = hexToFallback(userId ?? '0');
+export const UserAccountAvatar = (props: UserAccountAvatarProps) => {
+  const fallbackValue = hexToFallback(props.userId ?? '0');
 
   return (
     <div className='grid place-items-center' data-joyride='welcome/account'>
       <Avatar.Root>
         <Avatar.Content
           variant='circle'
-          size={size ?? 12}
-          status={status ?? 'active'}
-          hue={hue || fallbackValue.hue}
-          fallback={emoji || fallbackValue.emoji}
-          data-testid='treeView.userAccount'
+          size={props.size ?? 12}
+          status={props.status ?? 'active'}
+          hue={props.hue || fallbackValue.hue}
+          fallback={props.emoji || fallbackValue.emoji}
+          data-testid='treeview.userAccount'
         />
       </Avatar.Root>
     </div>

package/src/components/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './CommandsDialog';
+export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';

package/src/components/types.ts

@@ -5,36 +5,31 @@
 import type { FC } from 'react';
 
 import type { Node } from '@dxos/app-graph';
-import type { Density } from '@dxos/react-ui';
 import type { TreeProps } from '@dxos/react-ui-list';
 import type { MaybePromise } from '@dxos/util';
 
-import { type L1PanelProps } from './Sidebar';
+import { type L1PanelProps } from './L1Panels';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 
+export type NavTreeItemColumnsProps = {
+  path: string[];
+  item: Node;
+  open: boolean;
+};
+
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
+
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode>,
-  'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
+  'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'
 > &
   Pick<L1PanelProps, 'onBack'> & {
     tab: string;
-    topbar?: boolean;
-    popoverAnchorId?: string;
-    renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    useItems: (
-      node?: NavTreeItemGraphNode,
-      options?: { disposition?: string; sort?: boolean },
-    ) => NavTreeItemGraphNode[];
+    onTabChange?: (node: NavTreeItemGraphNode) => void;
+    getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
     getActions: (node: Node) => FlattenedActions;
     loadDescendents?: (node: Node) => MaybePromise<void>;
-    isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
-    setAlternateTree?: (path: string[], open: boolean) => void;
-    onTabChange?: (node: NavTreeItemGraphNode) => void;
+    renderItemEnd?: FC<{ node: Node; open: boolean }>;
+    popoverAnchorId?: string;
+    topbar?: boolean;
   };
-
-export type NavTreeItemColumnsProps = {
-  path: string[];
-  item: Node;
-  open: boolean;
-  density?: Density;
-};