@dxos/plugin-navtree 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/NavTreeItemAction.tsx

@@ -2,24 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type MutableRefObject, type PropsWithChildren, useRef, useState } from 'react';
+import React, { type MutableRefObject, useRef } from 'react';
 
-import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
-import { keySymbols } from '@dxos/keyboard';
-import {
-  Button,
-  Dialog,
-  DropdownMenu,
-  ContextMenu,
-  Tooltip,
-  useTranslation,
-  toLocalizedString,
-  Icon,
-} from '@dxos/react-ui';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { descriptionText, hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
-import { getHostPlatform } from '@dxos/util';
+import { type Action, type Node } from '@dxos/app-graph';
+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';
@@ -30,338 +18,92 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   monolithic?: boolean;
   menuActions?: Action[];
   suppressNextTooltip?: MutableRefObject<boolean>;
-  menuOpen?: boolean;
-  defaultMenuOpen?: boolean;
-  onChangeMenuOpen?: (nextOpen: boolean) => void;
   onAction?: (action: Action) => void;
 };
 
-const getShortcut = (action: ActionLike) => {
-  return typeof action.properties?.keyBinding === 'string'
-    ? action.properties.keyBinding
-    : action.properties?.keyBinding?.[getHostPlatform()];
-};
-
 const fallbackIcon = 'ph--placeholder--regular';
 
+const actionButtonProps = {
+  size: 4 as const,
+  density: 'fine' as const,
+};
+
 export const NavTreeItemActionDropdownMenu = ({
   label,
   icon,
   testId,
-  defaultMenuOpen,
   menuActions,
-  menuOpen,
-  suppressNextTooltip,
-  onChangeMenuOpen,
   onAction,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onChangeMenuOpen,
-  });
-
+  const suppressNextTooltip = useRef<boolean>(false);
   return (
-    <DropdownMenu.Root
-      {...{
-        open: optionsMenuOpen,
-        onOpenChange: (nextOpen: boolean) => {
-          if (!nextOpen && suppressNextTooltip) {
-            suppressNextTooltip.current = true;
-          }
-          return setOptionsMenuOpen(nextOpen);
-        },
-      }}
-    >
-      <Tooltip.Trigger asChild>
+    <MenuProvider onAction={onAction}>
+      <DropdownMenu.Root items={menuActions as MenuItem[]} suppressNextTooltip={suppressNextTooltip}>
         <DropdownMenu.Trigger asChild>
-          <Button
+          <IconButton
+            {...actionButtonProps}
+            classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
             variant='ghost'
-            density='fine'
-            classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            icon={icon ?? fallbackIcon}
+            iconOnly
+            label={toLocalizedString(label, t)}
             data-testid={testId}
-            aria-label={t('tree item actions label')}
-          >
-            <span className='sr-only'>{toLocalizedString(label, t)}</span>
-            <Icon icon={icon ?? fallbackIcon} size={4} />
-          </Button>
+            suppressNextTooltip={suppressNextTooltip}
+          />
         </DropdownMenu.Trigger>
-      </Tooltip.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content classNames='z-[31]'>
-          <DropdownMenu.Viewport>
-            {menuActions?.map((action) => {
-              const shortcut = getShortcut(action);
-              return (
-                <DropdownMenu.Item
-                  key={action.id}
-                  onClick={(event) => {
-                    if (action.properties?.disabled) {
-                      return;
-                    }
-                    event.stopPropagation();
-                    // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
-                    if (suppressNextTooltip) {
-                      suppressNextTooltip.current = true;
-                    }
-                    setOptionsMenuOpen(false);
-                    onAction?.(action);
-                  }}
-                  classNames='gap-2'
-                  disabled={action.properties?.disabled}
-                  {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                >
-                  {action.properties?.icon && <Icon icon={action.properties!.icon} size={4} />}
-                  <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
-                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-                </DropdownMenu.Item>
-              );
-            })}
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-};
-
-export const NavTreeItemActionContextMenu = (
-  props: PropsWithChildren<Pick<NavTreeItemActionMenuProps, 'menuActions' | 'onAction'>>,
-) => {
-  return (props.menuActions?.length ?? 0) > 0 ? <NavTreeItemActionContextMenuImpl {...props} /> : <>{props.children}</>;
-};
-
-const NavTreeItemActionContextMenuImpl = ({
-  menuActions,
-  onAction,
-  children,
-}: PropsWithChildren<Pick<NavTreeItemActionMenuProps, 'menuActions' | 'onAction'>>) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content classNames='z-[31]'>
-          <ContextMenu.Viewport>
-            {menuActions?.map((action) => {
-              const shortcut = getShortcut(action);
-              return (
-                <ContextMenu.Item
-                  key={action.id}
-                  onClick={(event) => {
-                    if (action.properties?.disabled) {
-                      return;
-                    }
-                    event.stopPropagation();
-                    onAction?.(action);
-                  }}
-                  classNames='gap-2'
-                  disabled={action.properties?.disabled}
-                  {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                >
-                  {action.properties?.icon && <Icon icon={action.properties?.icon} size={4} />}
-                  <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
-                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-                </ContextMenu.Item>
-              );
-            })}
-          </ContextMenu.Viewport>
-          <ContextMenu.Arrow />
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-};
-
-export const NavTreeItemActionSearchList = ({
-  menuActions,
-  icon,
-  label,
-  testId,
-  suppressNextTooltip,
-  onAction,
-}: Pick<
-  NavTreeItemActionMenuProps,
-  'icon' | 'menuActions' | 'testId' | 'label' | 'onAction' | 'suppressNextTooltip'
->) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const button = useRef<HTMLButtonElement | null>(null);
-
-  // TODO(burdon): Optionally sort.
-  const sortedActions = menuActions?.sort(({ properties: p1 }, { properties: p2 }) => {
-    const t1 = toLocalizedString(p1!.label, t).toLowerCase();
-    const t2 = toLocalizedString(p2!.label, t).toLowerCase();
-    return t1.localeCompare(t2);
-  });
-
-  // TODO(thure): Use LayoutPlugin’s global Dialog.
-  return (
-    <Dialog.Root
-      {...{
-        open: optionsMenuOpen,
-        onOpenChange: (nextOpen: boolean) => {
-          if (!nextOpen && suppressNextTooltip) {
-            suppressNextTooltip.current = true;
-          }
-          return setOptionsMenuOpen(nextOpen);
-        },
-      }}
-    >
-      <Tooltip.Trigger asChild>
-        <Dialog.Trigger asChild>
-          <Button
-            variant='ghost'
-            density='fine'
-            classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
-            data-testid={testId}
-            onKeyDownCapture={(event) => {
-              // TODO(thure): Why is only this `Button` affected and not `DropdownMenu.Trigger`’s?
-              if (button.current && button.current === event.target) {
-                switch (event.key) {
-                  case 'Enter':
-                  case ' ':
-                    // Capture this event and stop propagation to the drag start handler.
-                    event.stopPropagation();
-                    setOptionsMenuOpen(true);
-                    break;
-                  default:
-                }
-              }
-            }}
-            ref={button}
-          >
-            <Icon icon={icon ?? fallbackIcon} size={4} />
-          </Button>
-        </Dialog.Trigger>
-      </Tooltip.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay>
-          <Dialog.Content classNames='z-[31] is-full max-is-[24rem] pli-2 plb-1'>
-            <SearchList.Root label={t('tree item searchlist input placeholder')}>
-              <SearchList.Input placeholder={t('tree item searchlist input placeholder')} classNames='pli-3' />
-              <SearchList.Content classNames='min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto'>
-                {sortedActions?.map((action) => {
-                  const label = toLocalizedString(action.properties!.label, t);
-                  const shortcut = getShortcut(action);
-                  return (
-                    <SearchList.Item
-                      // TODO(burdon): Value should be id since label is not unique.
-                      value={label}
-                      key={action.id}
-                      onSelect={() => {
-                        if (action.properties?.disabled) {
-                          return;
-                        }
-                        if (suppressNextTooltip) {
-                          suppressNextTooltip.current = true;
-                        }
-                        setOptionsMenuOpen(false);
-                        onAction?.(action);
-                      }}
-                      classNames='flex items-center gap-2 pli-2'
-                      disabled={action.properties?.disabled}
-                      {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                    >
-                      {action.properties?.icon && <Icon icon={action.properties?.icon} size={4} />}
-                      <span className='grow truncate'>{label}</span>
-                      {shortcut && (
-                        <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
-                      )}
-                    </SearchList.Item>
-                  );
-                })}
-              </SearchList.Content>
-              <div role='none' className='flex items-center plb-2 pli-3'>
-                <span className={descriptionText}>{toLocalizedString(label, t)}</span>
-              </div>
-            </SearchList.Root>
-          </Dialog.Content>
-        </Dialog.Overlay>
-      </Dialog.Portal>
-    </Dialog.Root>
+      </DropdownMenu.Root>
+    </MenuProvider>
   );
 };
 
 export const NavTreeItemMonolithicAction = ({
   parent,
-  properties: { disabled, caller, testId, label, icon } = { label: 'never' },
+  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
   data: invoke,
-}: Action & { parent: Node; onAction?: (action: Action) => void }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  baseLabel,
+}: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
   return (
-    <Tooltip.Trigger asChild>
-      <Button
-        variant='ghost'
-        density='fine'
-        classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
-        disabled={disabled}
-        onClick={(event) => {
-          if (disabled) {
-            return;
-          }
-          event.stopPropagation();
-          void invoke?.(caller ? { node: parent, caller } : { node: parent });
-        }}
-        data-testid={testId}
-      >
-        <span className='sr-only'>{toLocalizedString(label, t)}</span>
-        <Icon icon={icon ?? fallbackIcon} size={4} />
-      </Button>
-    </Tooltip.Trigger>
+    <IconButton
+      {...actionButtonProps}
+      variant={variant}
+      classNames={mx(
+        'shrink-0',
+        hoverableControlItem,
+        hoverableOpenControlItem,
+        iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
+      )}
+      icon={icon ?? fallbackIcon}
+      iconOnly={iconOnly}
+      label={baseLabel}
+      disabled={disabled}
+      onClick={(event) => {
+        if (disabled) {
+          return;
+        }
+        event.stopPropagation();
+        void invoke?.(caller ? { node: parent, caller } : { node: parent });
+      }}
+      data-testid={testId}
+    />
   );
 };
 
 export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
 
-  return (
-    <Tooltip.Root
-      open={triggerTooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (suppressNextTooltip.current) {
-          setTriggerTooltipOpen(false);
-          suppressNextTooltip.current = false;
-        } else {
-          setTriggerTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      {baseLabel && (
-        <Tooltip.Portal>
-          <Tooltip.Content classNames='z-[31]' side='bottom'>
-            {baseLabel}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      )}
-      {monolithic && menuActions?.length === 1 ? (
-        <NavTreeItemMonolithicAction parent={node} {...menuActions[0]} />
-      ) : props.menuType === 'searchList' ? (
-        <NavTreeItemActionSearchList
-          {...props}
-          menuActions={menuActions}
-          suppressNextTooltip={suppressNextTooltip}
-          onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-        />
-      ) : (
-        <NavTreeItemActionDropdownMenu
-          {...props}
-          parent={node}
-          menuActions={menuActions}
-          suppressNextTooltip={suppressNextTooltip}
-          onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-        />
-      )}
-    </Tooltip.Root>
+  return monolithic && menuActions?.length === 1 ? (
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
+  ) : (
+    <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 === 'toolbar' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? 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 === 'toolbar' && !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/NotchStart.tsx

@@ -4,9 +4,9 @@
 
 import React from 'react';
 
-import { useIntentDispatcher, useResolvePlugin } from '@dxos/app-framework';
-import { ClientAction } from '@dxos/plugin-client/meta';
-import { parseObservabilityPlugin } from '@dxos/plugin-observability';
+import { createIntent, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
+import { ClientAction } from '@dxos/plugin-client/types';
+import { ObservabilityCapabilities } from '@dxos/plugin-observability';
 import { useIdentity } from '@dxos/react-client/halo';
 
 import { HaloButton } from './HaloButton';
@@ -14,16 +14,17 @@ import { HaloButton } from './HaloButton';
 // TODO(thure): Refactor to be handled by a more appropriate plugin (ClientPlugin?).
 export const NotchStart = () => {
   const identity = useIdentity();
-  const observabilityPlugin = useResolvePlugin(parseObservabilityPlugin);
-  const dispatch = useIntentDispatcher();
+  // TODO(wittjosiah): Can this be removed now?
+  const [observability] = useCapabilities(ObservabilityCapabilities.Observability);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   return (
     <HaloButton
-      size={8}
+      size={12}
       identityKey={identity?.identityKey.toHex()}
       hue={identity?.profile?.data?.hue}
       emoji={identity?.profile?.data?.emoji}
-      internal={observabilityPlugin?.provides?.observability?.group === 'dxos'}
-      onClick={() => dispatch({ action: ClientAction.SHARE_IDENTITY })}
+      internal={observability?.group === 'dxos'}
+      onClick={() => dispatch(createIntent(ClientAction.ShareIdentity))}
     />
   );
 };

package/src/components/index.ts

@@ -3,7 +3,10 @@
 //
 
 export * from './CommandsDialog';
+export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
+export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
 export * from './NotchStart';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type { FC } from 'react';
+
+import type { Node } from '@dxos/app-graph';
+import type { TreeProps } from '@dxos/react-ui-list';
+import type { MaybePromise } from '@dxos/util';
+
+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' | 'onOpenChange' | 'canDrop' | 'onSelect'
+> & {
+  tab: string;
+  onTabChange?: (node: NavTreeItemGraphNode) => void;
+  getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
+  getActions: (node: Node) => FlattenedActions;
+  loadDescendents?: (node: Node) => MaybePromise<void>;
+  renderItemEnd?: FC<{ node: Node; open: boolean }>;
+  popoverAnchorId?: string;
+  topbar?: boolean;
+};

package/src/events.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Events } from '@dxos/app-framework';
+
+import { NAVTREE_PLUGIN } from './meta';
+
+export namespace NavTreeEvents {
+  export const StateReady = Events.createStateEvent(NAVTREE_PLUGIN);
+}

package/src/hooks.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+
+import { useNavTreeContext } from './components/NavTreeContext';
+
+export const useLoadDescendents = (root?: Node) => {
+  const { loadDescendents } = useNavTreeContext();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [root]);
+};

package/src/index.ts

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NavTreePlugin } from './NavTreePlugin';
-
-export default NavTreePlugin;
-
+export { NavTreeCapabilities } from './capabilities';
+export { NavTreeEvents } from './events';
 export * from './NavTreePlugin';
+export * from './meta';
 export * from './util';

package/src/meta.ts

@@ -8,7 +8,9 @@ export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
 
 // TODO(wittjosiah): Factor out.
 export const KEY_BINDING = 'KeyBinding';
+// TODO(wittjosiah): Factor out.
+export const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
 
-export default {
+export const meta = {
   id: NAVTREE_PLUGIN,
 } satisfies PluginMeta;

package/src/stories/Graph.stories.tsx

@@ -18,7 +18,7 @@ import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree } from '../components';
+import { StorybookNavTree } from './StorybookNavTree';
 import { getActions, getChildren } from '../util';
 
 faker.seed(3);
@@ -53,9 +53,9 @@ const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }
 
 export const Default = {};
 
-const meta: Meta<typeof NavTree> = {
+const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/Graph',
-  component: NavTree,
+  component: StorybookNavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -78,9 +78,10 @@ const meta: Meta<typeof NavTree> = {
       });
     }, []);
 
-    return <NavTree {...args} />;
+    return <StorybookNavTree {...args} />;
   },
   args: {
+    root: graph.root,
     id: graph.root.id,
     getActions: (node: Node) => getActions(graph, node),
     getItems: (node?: Node) => graph.nodes(node ?? graph.root),