@dxos/plugin-navtree 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,90 +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 { 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 === `${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}
-            path={path}
-            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')}
               icon='ph--dots-three-vertical--regular'
               parent={item}
               path={path}
-              menuActions={actions}
-              menuType='dropdown'
+              menuActions={allActions}
               caller={NAV_TREE_ITEM}
             />
           </Treegrid.Cell>

package/src/components/Sidebar/L0Menu.tsx

@@ -142,9 +142,8 @@ const L0ItemRoot = memo(
 
 export const L0ItemActiveTabIndicator = ({ classNames }: ThemedClassName<{}>) => (
   <div
-    role='none'
     className={mx(
-      'hidden group-aria-selected/l0item:block absolute start-0 h-6 w-1.5 bg-accent-surface rounded-sm',
+      'hidden group-aria-selected/l0item:block absolute start-0 h-6 w-1.5 bg-accent-bg rounded-sm',
       classNames,
     )}
   />
@@ -218,14 +217,13 @@ const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L
   return (
     <L0ItemRoot ref={itemElement} item={item} parent={parent} path={path} onMouseEnter={handleMouseEnter}>
       <div
-        role='none'
         data-frame={true}
         {...(hue && { style: { background: `var(--color-${hue}-surface)` } })}
         className={mx(
           'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm',
           pinned
-            ? 'p-2 group-hover/l0item:bg-active-surface'
-            : 'w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-active-surface',
+            ? 'p-2 group-hover/l0item:bg-current-surface'
+            : 'w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-current-surface',
         )}
       >
         <ItemAvatar item={item} />
@@ -245,7 +243,7 @@ const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
   // Actions.
   if (item.properties.icon) {
     const hue = item.properties.hue ?? null;
-    const hueFgStyle = hue && { style: { color: `var(--color-${hue}-surface-text)` } };
+    const hueFgStyle = hue && { style: { color: `var(--color-${hue}-fg)` } };
     return <Icon icon={item.properties.icon} size={6} {...hueFgStyle} />;
   }
 
@@ -320,7 +318,7 @@ export const L0Menu = ({
       classNames={[
         'group/l0 absolute z-[1] inset-y-0 start-0 rounded-is',
         'grid grid-cols-[var(--dx-l0-size)] grid-rows-[var(--dx-rail-size)_1fr_min-content_var(--dx-l0-size)] dx-contain-layout',
-        'w-(--dx-l0-size) bg-toolbar-surface dx-app-drag pb-[env(safe-area-inset-bottom)]',
+        'w-(--dx-l0-size) bg-l0-surface dx-app-drag pb-[env(safe-area-inset-bottom)]',
         '[body[data-platform="macos"]_&]:pt-[30px]',
         '[body[data-platform="ios"]_&]:pt-[max(env(safe-area-inset-top),0.25rem)]',
       ]}
@@ -328,8 +326,16 @@ export const L0Menu = ({
       {/* TODO(wittjosiah): Use L0Item trigger. */}
       <Menu.Root onAction={handleAction}>
         <Menu.Trigger asChild data-testid='spacePlugin.addSpace'>
-          <div role='none' className='grid place-items-center'>
-            <IconButton variant='ghost' icon='ph--list--regular' iconOnly label={t('app-menu.label')} />
+          <div className='grid place-items-center'>
+            <IconButton
+              density='lg'
+              variant='ghost'
+              size={5}
+              icon='ph--list--regular'
+              iconOnly
+              square
+              label={t('app-menu.label')}
+            />
           </div>
         </Menu.Trigger>
         <Menu.Content group={parent} items={menuActions} />
@@ -352,14 +358,14 @@ export const L0Menu = ({
       </ScrollArea.Root>
 
       {/* Actions. */}
-      <div role='none' className='grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2'>
+      <div className='grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2'>
         {pinnedItems.map((item) => (
           <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
         ))}
       </div>
 
       {userAccountItem && (
-        <div role='none' className='grid dx-app-no-drag'>
+        <div className='grid dx-app-no-drag'>
           <L0ItemRoot key={userAccountItem.id} item={userAccountItem} parent={parent} path={path}>
             <UserAccountAvatar
               userId={userAccountItem.properties.userId}

package/src/components/Sidebar/L1Panel.tsx

@@ -2,27 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 import React, { memo, useCallback, useMemo } from 'react';
 
 import { Node } from '@dxos/app-graph';
 import { isPinnedWorkspace } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Graph, useActionRunner, useConnections, useEdges } from '@dxos/plugin-graph';
+import { Graph, useActionRunner, useEdges } from '@dxos/plugin-graph';
 import { DensityProvider, IconButton, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
 import { Tree } from '@dxos/react-ui-list';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { useActions, useIsAlternateTree, useLoadDescendents } from '#hooks';
+import { getListActions, useActions, useLoadDescendents } from '#hooks';
 import { meta } from '#meta';
 
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
-import { NavTreeItemAction, NavTreeItemColumns } from '../NavTreeItem';
+import { NavTreeItemColumns } from '../NavTreeItem/NavTreeItemColumns';
 
 export type L1PanelProps = {
   open?: boolean;
@@ -84,49 +82,28 @@ const useIsActivatedWorkspace = (item: Node.Node): boolean => {
 const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'path' | 'item' | 'onBack'>) => {
   const navTreeContext = useNavTreeContext();
 
-  const alternateTree = useAlternateTreeItem(item);
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
-
   return (
-    <DensityProvider density='fine'>
+    <DensityProvider density='md'>
       <L1PanelHeader path={path} item={item} onBack={onBack} />
       <ScrollArea.Root thin orientation='vertical'>
         <ScrollArea.Viewport>
-          {isAlternate && alternateTree ? (
-            <Tree
-              model={navTreeContext.model}
-              id={alternateTree.id}
-              rootId={alternateTree.id}
-              path={alternatePath}
-              levelOffset={5}
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              renderColumns={NavTreeItemColumns}
-              blockInstruction={navTreeContext.blockInstruction}
-              canDrop={navTreeContext.canDrop}
-              canSelect={navTreeContext.canSelect}
-              onOpenChange={navTreeContext.onOpenChange}
-              onSelect={navTreeContext.onSelect}
-              onItemHover={navTreeContext.onItemHover}
-            />
-          ) : (
-            <Tree
-              model={navTreeContext.model}
-              id={item.id}
-              rootId={item.id}
-              path={path}
-              levelOffset={5}
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              draggable
-              renderColumns={NavTreeItemColumns}
-              blockInstruction={navTreeContext.blockInstruction}
-              canDrop={navTreeContext.canDrop}
-              canSelect={navTreeContext.canSelect}
-              onOpenChange={navTreeContext.onOpenChange}
-              onSelect={navTreeContext.onSelect}
-              onItemHover={navTreeContext.onItemHover}
-            />
-          )}
+          <Tree
+            classNames='pt-[2px]'
+            model={navTreeContext.model}
+            id={item.id}
+            rootId={item.id}
+            path={path}
+            levelOffset={5}
+            draggable
+            gridTemplateColumns='[tree-row-start] minmax(0, 1fr) min-content min-content [tree-row-end]'
+            renderColumns={NavTreeItemColumns}
+            blockInstruction={navTreeContext.blockInstruction}
+            canDrop={navTreeContext.canDrop}
+            canSelect={navTreeContext.canSelect}
+            onOpenChange={navTreeContext.onOpenChange}
+            onSelect={navTreeContext.onSelect}
+            onItemHover={navTreeContext.onItemHover}
+          />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
     </DensityProvider>
@@ -142,169 +119,111 @@ const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path
   const title = toLocalizedString(item.properties.label, t);
   const backCapableWorkspace = isPinnedWorkspace(item.id);
 
-  const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({ item, path });
+  const { menuActions, onAction } = useL1MenuActions({ item, path });
   useLoadDescendents(item);
 
-  // TODO(wittjosiah): Hack to only show containsAttended when attended item is within alternate tree (e.g. settings).
-  //  Since every object in the space is a descendant of the space node, we'd otherwise always show containsAttended.
-  const alternateTree = useAlternateTreeItem(item);
-  const attended = useAttended();
-  const alternateTreeOpen = useMemo(() => {
-    if (!alternateTree) {
-      return true;
-    }
-    const hasAlternateAttended = attended.some(
-      (attendedId) => attendedId === alternateTree.id || attendedId.startsWith(alternateTree.id + '/'),
-    );
-    return !hasAlternateAttended;
-  }, [alternateTree, attended]);
-
   return (
     <div
       data-tauri-drag-region
-      className='flex w-full items-center border-b border-subdued-separator dx-app-drag dx-density-coarse pe-1'
+      className='grid grid-cols-[28px_1fr_min-content_min-content] w-full items-center dx-app-drag dx-density-lg'
     >
       {backCapableWorkspace ? (
         <IconButton
-          density='coarse'
-          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+          classNames={[hoverableControlItem, hoverableOpenControlItem]}
           variant='ghost'
           icon='ph--caret-left--regular'
           iconOnly
+          size={4}
           label={t('button-back.button')}
           data-testid='treeView.primaryTreeButton'
           onClick={() => onBack?.()}
         />
       ) : (
-        <div data-tauri-drag-region className='w-6' />
+        <div />
       )}
       <h2 data-tauri-drag-region className='flex-1 truncate min-w-0'>
         {title}
       </h2>
-      {/* TODO(wittjosiah): Reconcile with NavTreeItemColumns. */}
-      <div role='none' className='contents dx-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}
-            path={path}
-            monolithic={Node.isAction(primaryAction)}
-            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
-            menuType={primaryAction.properties?.menuType}
-            caller={NAV_TREE_ITEM}
-          />
-        )}
-        {menuActions.length === 1 && (
-          <IconButton
-            density='coarse'
-            classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
-            variant='ghost'
-            icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
-            iconOnly
-            label={toLocalizedString(menuActions[0].properties?.label, t)}
-            data-testid={menuActions[0].properties?.testId}
-            onClick={() => onAction(menuActions[0] as Node.Action)}
-          />
-        )}
-        {menuActions.length > 1 && (
-          <Menu.Root caller={NAV_TREE_ITEM} onAction={onAction}>
-            <Menu.Trigger asChild>
-              <IconButton
-                density='coarse'
-                classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
-                variant='ghost'
-                icon='ph--dots-three-vertical--regular'
-                iconOnly
-                label={t('tree-item-actions.label')}
-                data-testid='navtree.treeItem.actionsLevel0'
-              />
-            </Menu.Trigger>
-            <Menu.Content group={item} items={menuActions as MenuItem[]} />
-          </Menu.Root>
-        )}
-        {ItemEnd && <ItemEnd node={item} open={alternateTreeOpen} />}
+      <div className='contents dx-app-no-drag'>
+        <MenuActions item={item} menuActions={menuActions} onAction={onAction} />
+        {ItemEnd && <ItemEnd node={item} open />}
       </div>
     </div>
   );
 };
 
+type L1MenuActions = {
+  menuActions: Node.Action[];
+  onAction: (action: Node.Action, params?: Node.InvokeProps) => void;
+};
+
 /**
- * Builds the menu actions for the L1 panel header, combining graph actions with a synthetic settings/back action.
+ * Header menu actions for an L1 workspace tab. Renders nothing for an empty
+ * `menuActions`, a single inline icon button for one action, and a
+ * `…`-menu trigger for multiple.
  */
-const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>) => {
+const MenuActions = ({
+  item,
+  menuActions,
+  onAction,
+}: {
+  item: Node.Node;
+} & Pick<L1MenuActions, 'menuActions' | 'onAction'>) => {
   const { t } = useTranslation(meta.id);
-  const { setAlternateTree } = useNavTreeContext();
-  const { graph } = useAppGraph();
-  const runAction = useActionRunner();
 
-  const alternateTree = useAlternateTreeItem(item);
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
+  if (menuActions.length === 0) {
+    return null;
+  }
+
+  if (menuActions.length === 1) {
+    return (
+      <IconButton
+        classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+        variant='ghost'
+        icon={menuActions[0].properties?.icon ?? 'ph--circle-dashed--regular'}
+        iconOnly
+        size={4}
+        label={toLocalizedString(menuActions[0].properties?.label, t)}
+        data-testid={menuActions[0].properties?.testId}
+        onClick={() => onAction(menuActions[0] as Node.Action)}
+      />
+    );
+  }
 
-  // Graph actions.
-  const { actions: actionsProp, groupedActions } = useActions(item);
-  const [primaryAction, ...secondaryActions] = actionsProp.toSorted((a, _b) =>
-    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
+  return (
+    <Menu.Root caller={NAV_TREE_ITEM} onAction={onAction}>
+      <Menu.Trigger asChild>
+        <IconButton
+          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+          variant='ghost'
+          icon='ph--dots-three-vertical--regular'
+          iconOnly
+          size={4}
+          label={t('tree-item-actions.label')}
+          data-testid='navtree.treeItem.actionsLevel0'
+        />
+      </Menu.Trigger>
+      <Menu.Content group={item} items={menuActions as MenuItem[]} />
+    </Menu.Root>
   );
+};
 
-  const graphMenuActions = (
-    primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : actionsProp
-  )
-    .flatMap((action) => (Node.isAction(action) ? [action] : []))
-    .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
-
-  // Synthetic settings/back action.
-  const settingsActionId = `${item.id}~settings`;
-  const settingsAction = useMemo((): Node.Action | undefined => {
-    if (!alternateTree) {
-      return undefined;
-    }
-    return {
-      id: settingsActionId,
-      type: Node.ActionType,
-      data: () => Effect.void,
-      properties: {
-        label: isAlternate
-          ? ['button-back.button', { ns: meta.id }]
-          : (alternateTree.properties.label ?? alternateTree.id),
-        icon: isAlternate
-          ? 'ph--arrow-u-down-left--regular'
-          : (alternateTree.properties.icon ?? 'ph--placeholder--regular'),
-        disposition: 'list-item',
-        testId: isAlternate ? 'navtree.backToSpace' : 'navtree.spaceSettings',
-      },
-    } as Node.Action;
-  }, [alternateTree, isAlternate, settingsActionId, t]);
+/**
+ * Builds the menu actions for the L1 panel header.
+ */
+const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>): L1MenuActions => {
+  const runAction = useActionRunner();
 
-  const menuActions = useMemo(
-    () => [...graphMenuActions, ...(settingsAction ? [settingsAction] : [])],
-    [graphMenuActions, settingsAction],
-  );
+  const menuActions = getListActions(useActions(item));
 
   const onAction = useCallback(
     (action: Node.Action, params?: Node.InvokeProps) => {
-      if (action.id === settingsActionId) {
-        if (alternateTree && !isAlternate) {
-          Graph.expand(graph, alternateTree.id, 'child');
-        }
-        setAlternateTree?.(alternatePath, !isAlternate);
-      } else {
-        void runAction(action, { ...params, path });
-      }
+      void runAction(action, { ...params, path });
     },
-    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction, graph, alternateTree, path],
+    [runAction, path],
   );
 
-  return { primaryAction, groupedActions, menuActions, onAction };
-};
-
-/** Finds the first child with disposition 'alternate-tree' using graph connections directly. */
-const useAlternateTreeItem = (item: Node.Node): Node.Node | undefined => {
-  const { graph } = useAppGraph();
-  const connections = useConnections(graph, item.id, 'child');
-  return connections.find((node) => node.properties.disposition === 'alternate-tree');
+  return { menuActions, onAction };
 };
 
 export const L1Panel = memo(L1Panel$);

package/src/components/types.ts

@@ -16,7 +16,6 @@ export type NavTreeContextValue = {
   model: TreeModel<NavTreeItemGraphNode>;
   popoverAnchorId?: string;
   renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
-  setAlternateTree?: (path: string[], open: boolean) => void;
   onTabChange?: (node: NavTreeItemGraphNode) => void;
 } & Pick<
   TreeProps<NavTreeItemGraphNode>,

package/src/containers/CommandsDialogContent/CommandsDialogContent.stories.tsx

@@ -10,8 +10,9 @@ import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { Dialog } from '@dxos/react-ui';
 import { withLayout } from '@dxos/react-ui/testing';
 
+import { translations } from '#translations';
+
 import { NavTreePlugin } from '../../NavTreePlugin';
-import { translations } from '../../translations';
 import { CommandsDialogContent } from './CommandsDialogContent';
 
 const DefaultStory = () => (

package/src/containers/NavTreeContainer/NavTreeContainer.tsx

@@ -230,13 +230,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
       });
     }, [graph]);
 
-    const setAlternateTree = useCallback(
-      (path: string[], open: boolean) => {
-        setItem(path, 'alternateTree', open);
-      },
-      [setItem],
-    );
-
     const onItemHover = useCallback(({ item }: { item: Node.Node }) => Graph.expand(graph, item.id, 'child'), [graph]);
 
     const navTreeContextValue = useMemo(
@@ -247,7 +240,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         onBack: handleBack,
         onOpenChange: handleOpenChange,
         onSelect: handleSelect,
@@ -260,7 +252,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         handleBack,
         handleOpenChange,
         handleSelect,

package/src/experimental/Tree.tsx

@@ -195,7 +195,7 @@ export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
       className={mx(
         'group w-full items-center cursor-pointer bg-hover-surface',
         // TODO(burdon): Use data-active.
-        selected?.[id] && 'bg-active-surface',
+        selected?.[id] && 'bg-current-surface',
         className,
       )}
       onClick={() => selected && onChangeSelected?.(id, !selected[id])}
@@ -220,7 +220,7 @@ export const TreeNode = (props: TreeNodeProps & { ancestors?: TreeNodeData[] })
   const { root, header } = getSlots?.(props.node, open?.[id] ?? false, depth, ancestors) ?? {};
 
   return (
-    <div role='none' className={mx('flex flex-col', root)}>
+    <div className={mx('flex flex-col', root)}>
       <TreeNodeRow {...props} className={header} />
       {(children?.length ?? 0) > 0 && open?.[id] && <TreeChildNodes {...props} ancestors={ancestors} />}
     </div>

package/src/hooks/useActions.ts

@@ -9,6 +9,16 @@ import { Graph, Node, useActions as useGraphActions } from '@dxos/plugin-graph';
 
 import { type FlattenedActions } from '#types';
 
+/**
+ * Flattens grouped actions and filters to the list-item dispositions rendered as
+ * navtree item actions. Shared by row (`NavTreeItemColumns`) and header (`L1Panel`)
+ * so both apply the same normalization rule.
+ */
+export const getListActions = ({ actions, groupedActions }: FlattenedActions): Node.Action[] =>
+  actions
+    .flatMap((action) => (Node.isAction(action) ? [action] : (groupedActions[action.id] ?? [])))
+    .filter((action) => ['list-item', 'list-item-primary'].includes(action.properties?.disposition));
+
 /** Returns flattened actions and grouped sub-actions for a given graph node. */
 export const useActions = (node: Node.Node): FlattenedActions => {
   const { graph } = useAppGraph();

package/src/hooks/useNavTreeModel.ts

@@ -7,7 +7,7 @@ import * as Option from 'effect/Option';
 import { useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck';
 import { type Node } from '@dxos/plugin-graph';
 import { Path, type TreeModel } from '@dxos/react-ui-list';
 import { mx } from '@dxos/ui-theme';
@@ -57,6 +57,8 @@ const createItemPropsFamily = (graph: ReturnType<typeof useAppGraph>['graph']) =
         icon: node.properties.icon,
         iconHue: node.properties.iconHue,
         testId: node.properties.testId,
+        count: node.properties.count,
+        modifiedCount: node.properties.modifiedCount,
       };
     }).pipe(Atom.keepAlive);
   });

package/src/hooks/useNavTreeState.ts

@@ -12,7 +12,7 @@ import { NavTreeCapabilities } from '#types';
 export type UseNavTreeStateResult = {
   getItem: (path: string[]) => NavTreeCapabilities.NavTreeItemState;
   getItemAtom: (path: string[]) => Atom.Atom<NavTreeCapabilities.NavTreeItemState>;
-  setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;
+  setItem: (path: string[], key: 'open' | 'current', next: boolean) => void;
 };
 
 /**
@@ -33,10 +33,3 @@ export const useNavTreeItemState = (path: string[]): NavTreeCapabilities.NavTree
   const atom = useMemo(() => getItemAtom(path), [getItemAtom, pathKey]);
   return useAtomValue(atom);
 };
-
-/**
- * Hook that subscribes to the alternateTree state for a tree item.
- */
-export const useIsAlternateTree = (path: string[], _item?: any): boolean => {
-  return useNavTreeItemState(path).alternateTree ?? false;
-};

package/src/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export { NavTreeCapabilities, NavTreeEvents } from './types';
-export * from './NavTreePlugin';
 export * from './meta';
+export * from './types';
 export * from './util';