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

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

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+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 { CommandsDialogContent } from './CommandsDialogContent';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <CommandsDialogContent />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-navtree/containers/CommandsDialogContent',
+  component: CommandsDialogContent,
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [...corePlugins(), StorybookPlugin({}), NavTreePlugin()],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof CommandsDialogContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/CommandsDialogContent/CommandsDialogContent.tsx

@@ -11,11 +11,11 @@ import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions } from '@dxos/plugin-graph';
 import { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 import { osTranslations } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, meta } from '../../meta';
+import { KEY_BINDING, meta } from '#meta';
 
 export type CommandsDialogContentProps = {
   selected?: string;
@@ -25,7 +25,7 @@ export type CommandsDialogContentProps = {
 export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
   ({ selected: initial }, forwardedRef) => {
     const { t } = useTranslation(meta.id);
-    const { invokeSync } = useOperationInvoker();
+    const { invokePromise } = useOperationInvoker();
     const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const [selected, setSelected] = useState<string | undefined>(initial);
@@ -38,13 +38,12 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
       const actionMap = new Set<string>();
       const actions: Node.ActionLike[] = [];
       Graph.traverse(graph, {
-        relation: 'child',
+        relation: ['child', 'action'],
         visitor: (node, path) => {
-          if (
-            (Node.isAction(node) || Node.isActionGroup(node)) &&
-            !actionMap.has(node.id) &&
-            current.startsWith(path.slice(0, -1).join('/'))
-          ) {
+          const isActionLike = Node.isAction(node) || Node.isActionGroup(node);
+          const parentId = path.at(-2) ?? '';
+          const matches = current === parentId || current.startsWith(parentId + '/');
+          if (isActionLike && !actionMap.has(node.id) && matches) {
             actionMap.add(node.id);
             actions.push(node);
           }
@@ -71,62 +70,57 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
 
     return (
       <Dialog.Content ref={forwardedRef}>
-        <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <Dialog.Title srOnly>{t('commands-dialog.title', { ns: meta.id })}</Dialog.Title>
         <SearchList.Root onSearch={handleSearch}>
-          <SearchList.Content>
-            <SearchList.Input placeholder={t('command list input placeholder')} />
-            <SearchList.Viewport>
-              {results.map((action) => {
-                const shortcut =
-                  typeof action.properties.keyBinding === 'string'
-                    ? action.properties.keyBinding
-                    : action.properties.keyBinding?.[getHostPlatform()];
+          <SearchList.Input placeholder={t('command-list-input.placeholder')} />
+          <SearchList.Viewport>
+            {results.map((action) => {
+              const shortcut =
+                typeof action.properties.keyBinding === 'string'
+                  ? action.properties.keyBinding
+                  : action.properties.keyBinding?.[getHostPlatform()];
 
-                return (
-                  <SearchList.Item
-                    value={action.id}
-                    key={action.id}
-                    label={toLocalizedString(action.properties.label, t)}
-                    icon={action.properties.icon}
-                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
-                    onSelect={() => {
-                      if (action.properties.disabled) {
-                        return;
-                      }
+              return (
+                <SearchList.Item
+                  value={action.id}
+                  key={action.id}
+                  label={toLocalizedString(action.properties.label, t)}
+                  icon={action.properties.icon}
+                  suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                  onSelect={() => {
+                    if (action.properties.disabled) {
+                      return;
+                    }
 
-                      if (Node.isActionGroup(action)) {
-                        setSelected(action.id);
-                        return;
-                      }
+                    if (Node.isActionGroup(action)) {
+                      setSelected(action.id);
+                      return;
+                    }
 
-                      invokeSync(LayoutOperation.UpdateDialog, { state: false });
-                      setTimeout(() => {
-                        const node = Graph.getConnections(
-                          graph,
-                          group?.id ?? action.id,
-                          Node.childRelation('inbound'),
-                        )[0];
-                        if (node && Node.isAction(action)) {
-                          void runAction(action, { parent: node, caller: KEY_BINDING });
-                        }
-                      });
-                    }}
-                    classNames='flex items-center gap-2'
-                    disabled={action.properties.disabled}
-                    {...(action.properties?.testId && {
-                      'data-testid': action.properties.testId,
-                    })}
-                  />
-                );
-              })}
-            </SearchList.Viewport>
-          </SearchList.Content>
+                    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+                    setTimeout(() => {
+                      const lookupId = group?.id ?? action.id;
+                      const node = Graph.getConnections(graph, lookupId, Node.actionRelation('inbound'))[0];
+                      if (node && Node.isAction(action)) {
+                        void runAction(action, { parent: node, caller: KEY_BINDING });
+                      }
+                    });
+                  }}
+                  classNames='flex items-center gap-2'
+                  disabled={action.properties.disabled}
+                  {...(action.properties?.testId && {
+                    'data-testid': action.properties.testId,
+                  })}
+                />
+              );
+            })}
+          </SearchList.Viewport>
         </SearchList.Root>
-        <div role='none' className='p-form-padding'>
+        <Dialog.ActionBar>
           <Dialog.Close asChild>
-            <Button classNames='w-full'>{t('close label', { ns: osTranslations })}</Button>
+            <Button classNames='w-full'>{t('close.label', { ns: osTranslations })}</Button>
           </Dialog.Close>
-        </div>
+        </Dialog.ActionBar>
       </Dialog.Content>
     );
   },

package/src/containers/CommandsDialogContent/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CommandsDialogContent } from './CommandsDialogContent';
-
-export default CommandsDialogContent;
+export { CommandsDialogContent as default } from './CommandsDialogContent';

package/src/containers/CommandsTrigger/CommandsTrigger.tsx

@@ -8,19 +8,21 @@ import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
-import { COMMANDS_DIALOG, meta } from '../../meta';
+import { COMMANDS_DIALOG, meta } from '#meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const { t } = useTranslation(meta.id);
   return (
     <Button
       classNames='m-1 px-1 lg:px-2'
-      onClick={() => invokeSync(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
+      onClick={() =>
+        void invokePromise(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })
+      }
     >
-      <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
-      <Icon icon='ph--magnifying-glass--regular' size={5} />
+      <span className='text-description font-normal grow text-start'>{t('command-list-input.placeholder')}</span>
+      <Icon icon='ph--magnifying-glass--regular' />
     </Button>
   );
 };

package/src/containers/CommandsTrigger/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CommandsTrigger } from './CommandsTrigger';
-
-export default CommandsTrigger;
+export { CommandsTrigger as default } from './CommandsTrigger';

package/src/containers/NavTreeContainer/NavTreeContainer.tsx

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
@@ -14,10 +14,11 @@ import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { type TreeData, isTreeData } from '@dxos/react-ui-list';
 import { arrayMove } from '@dxos/util';
 
-import { NAV_TREE_ITEM, NavTree, NavTreeContext } from '../../components';
-import { useNavTreeModel, useNavTreeState } from '../../hooks';
-import { meta } from '../../meta';
-import { type NavTreeItemGraphNode } from '../../types';
+import { NAV_TREE_ITEM, NavTree, NavTreeContext } from '#components';
+import { useNavTreeModel, useNavTreeState } from '#hooks';
+import { meta } from '#meta';
+import { type NavTreeItemGraphNode } from '#types';
+
 import { filterItems, getParent, resolveMigrationOperation } from '../../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -41,7 +42,7 @@ export type NavTreeContainerProps = {
 export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProps>(
   ({ tab, popoverAnchorId }, forwardedRef) => {
     const [isLg] = useMediaQuery('lg');
-    const { invokeSync, invokePromise } = useOperationInvoker();
+    const { invokePromise } = useOperationInvoker();
     const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const { getItem, setItem } = useNavTreeState();
@@ -83,7 +84,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
           navigationSidebarState: currentSidebarState,
           isLg: latestIsLg,
         } = latestRef.current;
-        invokeSync(LayoutOperation.UpdateSidebar, {
+        void invokePromise(LayoutOperation.UpdateSidebar, {
           state:
             node.id === activeTab
               ? currentSidebarState === 'expanded'
@@ -94,17 +95,21 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               : 'expanded',
         });
 
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: node.id });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: node.id });
 
         // Open the first item if the workspace is empty.
         if (activeItems.length === 0) {
           const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
           if (item && item.data) {
-            invokeSync(LayoutOperation.Open, { subject: [item.id] });
+            if (layout.mode === 'multi') {
+              void invokePromise(LayoutOperation.Set, { subject: [item.id] });
+            } else {
+              void invokePromise(LayoutOperation.Open, { subject: [item.id] });
+            }
           }
         }
       },
-      [invokeSync, graph],
+      [invokePromise, graph, layout.mode],
     );
 
     const blockInstruction = useCallback(
@@ -131,16 +136,20 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         if (Node.isAction(node)) {
           const [parent] = Graph.getConnections(graph, node.id, Node.childRelation('inbound'));
           if (parent) {
-            void runAction(node, { parent, caller: NAV_TREE_ITEM });
+            void runAction(node, { parent, path, caller: NAV_TREE_ITEM });
           }
           return;
         }
 
         const current = getItem(path).current;
         if (!current) {
-          invokeSync(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          if (layout.mode === 'multi') {
+            void invokePromise(LayoutOperation.Set, { subject: [node.id] });
+          } else {
+            void invokePromise(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          }
         } else if (option) {
-          invokeSync(LayoutOperation.Close, { subject: [node.id] });
+          void invokePromise(LayoutOperation.Close, { subject: [node.id] });
         } else {
           void invokePromise(LayoutOperation.ScrollIntoView, { subject: node.id });
         }
@@ -153,13 +162,13 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         }
 
         if (!isLg) {
-          invokeSync(LayoutOperation.UpdateSidebar, { state: 'closed' });
+          void invokePromise(LayoutOperation.UpdateSidebar, { state: 'closed' });
         }
       },
-      [graph, invokeSync, invokePromise, getItem, runAction, isLg],
+      [graph, invokePromise, getItem, runAction, isLg, layout.mode],
     );
 
-    const handleBack = useCallback(() => invokeSync(LayoutOperation.RevertWorkspace), [invokeSync]);
+    const handleBack = useCallback(() => void invokePromise(LayoutOperation.RevertWorkspace), [invokePromise]);
 
     // TODO(wittjosiah): Factor out hook.
     useEffect(() => {
@@ -177,8 +186,9 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
             const targetNode = target.data.item as NavTreeItemGraphNode;
             const sourcePath = source.data.path as string[];
             const targetPath = target.data.path as string[];
+            const sameParent = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join();
             const operation =
-              sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+              sameParent && instruction.type !== 'make-child'
                 ? 'rearrange'
                 : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
             const sourceParent = getParent(graph, sourceNode, sourcePath);
@@ -207,7 +217,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               }
               case 'transfer': {
                 const target = instruction.type === 'make-child' ? targetNode : targetParent;
-                if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                if (!target?.properties.onTransferStart || target?.id === sourceParent?.id) {
                   break;
                 }
                 void target?.properties.onTransferStart(sourceNode, migrationIndex);
@@ -220,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(
@@ -237,7 +240,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         onBack: handleBack,
         onOpenChange: handleOpenChange,
         onSelect: handleSelect,
@@ -250,7 +252,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         handleBack,
         handleOpenChange,
         handleSelect,

package/src/containers/NavTreeContainer/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NavTreeContainer } from './NavTreeContainer';
-
-export default NavTreeContainer;
+export { NavTreeContainer, NODE_TYPE } from './NavTreeContainer';
+export { NavTreeContainer as default } from './NavTreeContainer';

package/src/containers/NavTreeDocumentTitle/NavTreeDocumentTitle.tsx

@@ -7,12 +7,12 @@ import { type Node } from '@dxos/app-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export const NavTreeDocumentTitle = ({ node }: { node?: Node.Node }) => {
   const { t } = useTranslation(meta.id);
   useEffect(() => {
-    document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: osTranslations });
+    document.title = node ? toLocalizedString(node.properties.label, t) : t('current-app.name', { ns: osTranslations });
   }, [node?.properties?.label]);
   return null;
 };

package/src/containers/NavTreeDocumentTitle/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NavTreeDocumentTitle } from './NavTreeDocumentTitle';
-
-export default NavTreeDocumentTitle;
+export { NavTreeDocumentTitle as default } from './NavTreeDocumentTitle';

package/src/containers/index.ts

@@ -4,7 +4,7 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export { NODE_TYPE } from './NavTreeContainer/NavTreeContainer';
+export { NODE_TYPE } from './NavTreeContainer';
 
 export const CommandsDialogContent: ComponentType<any> = lazy(() => import('./CommandsDialogContent'));
 export const CommandsTrigger: ComponentType<any> = lazy(() => import('./CommandsTrigger'));

package/src/experimental/Tree.stories.tsx

@@ -5,14 +5,14 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Icon, IconButton, Panel, ScrollArea } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
 
-faker.seed(1234);
+random.seed(1234);
 
 // TODO(burdon): Generate.
 const data: TreeNodeData[] = [
@@ -21,34 +21,34 @@ const data: TreeNodeData[] = [
     title: 'plugins/Root',
     children: [
       {
-        id: faker.string.uuid(),
+        id: random.string.uuid(),
         title: 'plugins/Personal Space',
         color: 'text-green-400',
         iconName: 'ph--house--regular',
         children: [
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
           },
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
           },
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
             children: [
               {
-                id: faker.string.uuid(),
-                title: faker.commerce.productName(),
+                id: random.string.uuid(),
+                title: random.commerce.productName(),
                 children: [
                   {
-                    id: faker.string.uuid(),
-                    title: faker.commerce.productName(),
+                    id: random.string.uuid(),
+                    title: random.commerce.productName(),
                   },
                   {
-                    id: faker.string.uuid(),
-                    title: faker.commerce.productName(),
+                    id: random.string.uuid(),
+                    title: random.commerce.productName(),
                   },
                 ],
               },
@@ -57,24 +57,24 @@ const data: TreeNodeData[] = [
         ],
       },
       {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
         iconName: 'ph--planet--regular',
         children: [
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
           },
         ],
       },
       {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
         iconName: 'ph--sailboat--regular',
       },
       {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
         iconName: 'ph--planet--regular',
       },
     ],
@@ -122,8 +122,8 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
       });
 
       (parent!.children ??= []).push({
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
       });
 
       setOpenItems((open) => ({ ...open, [parent!.id]: true }));
@@ -135,9 +135,9 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   const handleCreateSpace = () => {
     setItems((items) => {
       items[0].children?.push({
-        id: faker.string.uuid(),
+        id: random.string.uuid(),
         iconName: 'ph--planet--regular',
-        title: faker.commerce.productName(),
+        title: random.commerce.productName(),
       });
 
       return { ...items };

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

@@ -7,32 +7,38 @@ import { useMemo } from 'react';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph, Node, useActions as useGraphActions } from '@dxos/plugin-graph';
 
-import { type FlattenedActions } from '../types';
+import { type FlattenedActions } from '#types';
 
 /**
- * Returns flattened actions and grouped sub-actions for a given graph node.
+ * 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();
   const actions = useGraphActions(graph, node.id);
 
-  return useMemo(
-    () =>
-      actions.reduce(
-        (acc: FlattenedActions, arg) => {
-          if (arg.properties.disposition === 'item') {
-            return acc;
-          }
-
-          acc.actions.push(arg);
-          if (!Node.isAction(arg)) {
-            const actionGroup = Graph.getActions(graph, arg.id);
-            acc.groupedActions[arg.id] = actionGroup;
-          }
+  return useMemo(() => {
+    return actions.reduce(
+      (acc: FlattenedActions, arg) => {
+        if (arg.properties.disposition === 'item') {
           return acc;
-        },
-        { actions: [], groupedActions: {} },
-      ),
-    [actions],
-  );
+        }
+
+        acc.actions.push(arg);
+        if (!Node.isAction(arg)) {
+          const actionGroup = Graph.getActions(graph, arg.id);
+          acc.groupedActions[arg.id] = actionGroup;
+        }
+        return acc;
+      },
+      { actions: [], groupedActions: {} },
+    );
+  }, [actions]);
 };