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

package/src/capabilities/index.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const Keyboard = lazy(() => import('./keyboard'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+export const State = lazy(() => import('./state'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginsContext, Capabilities, createResolver, LayoutAction } from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+
+import { NavTreeCapabilities } from './capabilities';
+
+export default (context: PluginsContext) =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.Expose.fields.input> =>
+        S.is(LayoutAction.Expose.fields.input)(data),
+      resolve: async ({ subject }) => {
+        const { graph } = context.requestCapability(Capabilities.AppGraph);
+        const { getItem, setItem } = context.requestCapability(NavTreeCapabilities.State);
+
+        try {
+          const path = await graph.waitForPath({ target: subject }, { timeout: 1_000 });
+          [...Array(path.length)].forEach((_, index) => {
+            const subpath = path.slice(0, index);
+            const value = getItem(subpath);
+            if (!value.open) {
+              setItem(subpath, 'open', true);
+            }
+          });
+        } catch {
+          log('Path to node not found', { subject });
+        }
+      },
+    }),
+  );

package/src/capabilities/keyboard.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities as AppCapabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Keyboard } from '@dxos/keyboard';
+import { isAction } from '@dxos/plugin-graph';
+import { getHostPlatform } from '@dxos/util';
+
+import { KEY_BINDING } from '../meta';
+
+export default (context: PluginsContext) => {
+  const { graph } = context.requestCapability(AppCapabilities.AppGraph);
+
+  // TODO(wittjosiah): Factor out.
+  // TODO(wittjosiah): Handle removal of actions.
+  const unsubscribe = graph.subscribeTraverse({
+    visitor: (node, path) => {
+      let shortcut: string | undefined;
+      if (typeof node.properties.keyBinding === 'object') {
+        const availablePlatforms = Object.keys(node.properties.keyBinding);
+        const platform = getHostPlatform();
+        shortcut = availablePlatforms.includes(platform)
+          ? node.properties.keyBinding[platform]
+          : platform === 'ios'
+            ? node.properties.keyBinding.macos // Fallback to macos if ios-specific bindings not provided.
+            : platform === 'linux' || platform === 'unknown'
+              ? node.properties.keyBinding.windows // Fallback to windows if platform-specific bindings not provided.
+              : undefined;
+      } else {
+        shortcut = node.properties.keyBinding;
+      }
+
+      if (shortcut && isAction(node)) {
+        Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
+          shortcut,
+          handler: () => {
+            void node.data({ node, caller: KEY_BINDING });
+          },
+          data: node.properties.label,
+        });
+      }
+    },
+  });
+
+  // TODO(burdon): Create context and plugin.
+  Keyboard.singleton.initialize();
+  Keyboard.singleton.setCurrentContext(graph.root.id);
+
+  return contributes(AppCapabilities.Null, null, () => {
+    unsubscribe();
+    Keyboard.singleton.destroy();
+  });
+};

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { isGraphNode } from '@dxos/plugin-graph';
+
+import {
+  CommandsDialogContent,
+  CommandsTrigger,
+  NavTreeDocumentTitle,
+  NotchStart,
+  NavTreeContainer,
+} from '../components';
+import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: COMMANDS_DIALOG,
+      role: 'dialog',
+      filter: (data): data is { props: { selected?: string } } => data.component === COMMANDS_DIALOG,
+      component: ({ data }) => <CommandsDialogContent {...data.props} />,
+    }),
+    createSurface({
+      id: `${NAVTREE_PLUGIN}/navigation`,
+      role: 'navigation',
+      filter: (data): data is { popoverAnchorId?: string; topbar: boolean; current: string } =>
+        typeof data.current === 'string',
+      component: ({ data }) => (
+        <NavTreeContainer
+          tab={data.current}
+          popoverAnchorId={data.popoverAnchorId as string | undefined}
+          topbar={data.topbar as boolean}
+        />
+      ),
+    }),
+    createSurface({
+      id: `${NAVTREE_PLUGIN}/document-title`,
+      role: 'document-title',
+      component: ({ data }) => <NavTreeDocumentTitle node={isGraphNode(data.subject) ? data.subject : undefined} />,
+    }),
+    createSurface({
+      id: `${NAVTREE_PLUGIN}/notch-start`,
+      role: 'notch-start',
+      component: () => <NotchStart />,
+    }),
+    createSurface({
+      id: `${NAVTREE_PLUGIN}/search-input`,
+      role: 'search-input',
+      position: 'fallback',
+      component: () => <CommandsTrigger />,
+    }),
+  ]);

package/src/capabilities/state.ts

@@ -0,0 +1,97 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { type ReactiveObject, create } from '@dxos/live-object';
+import { Path } from '@dxos/react-ui-mosaic';
+
+import { NavTreeCapabilities } from './capabilities';
+import { NAVTREE_PLUGIN } from '../meta';
+
+const KEY = `${NAVTREE_PLUGIN}/state`;
+
+const getInitialState = () => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return;
+  }
+
+  try {
+    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
+    return cached.map(
+      ([key, value]): [
+        string,
+        ReactiveObject<{
+          open: boolean;
+          current: boolean;
+        }>,
+      ] => [key, create({ open: value.open, current: false })],
+    );
+  } catch {}
+};
+
+export default (context: PluginsContext) => {
+  const layout = context.requestCapability(Capabilities.Layout);
+
+  // TODO(wittjosiah): This currently needs to be not a ReactiveObject at the root.
+  //   If it is a ReactiveObject then React errors when initializing new paths because of state change during render.
+  //   Ideally this could be a ReactiveObject but be able to access and update the root level without breaking render.
+  //   Wrapping accesses and updates in `untracked` didn't seem to work in all cases.
+  const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>(
+    getInitialState() ?? [
+      // TODO(thure): Initialize these dynamically.
+      ['root', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/space-spaces', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/files', create({ open: true, current: false })],
+    ],
+  );
+
+  const getItem = (_path: string[]) => {
+    const path = Path.create(..._path);
+    const value = state.get(path) ?? create({ open: false, current: false });
+    if (!state.has(path)) {
+      state.set(path, value);
+    }
+
+    return value;
+  };
+
+  const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+    const value = getItem(path);
+    value[key] = next;
+
+    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
+  };
+
+  const isOpen = (path: string[]) => getItem(path).open;
+  const isCurrent = (path: string[]) => getItem(path).current;
+
+  let previous: string[] = [];
+  const unsubscribe = effect(() => {
+    const removed = previous.filter((id) => !layout.active.includes(id));
+    previous = layout.active;
+
+    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
+    //   This could be avoided if the location was a path as well and not just an id.
+    setTimeout(() => {
+      removed.forEach((id) => {
+        const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
+        keys.forEach((key) => {
+          setItem(Path.parts(key), 'current', false);
+        });
+      });
+
+      layout.active.forEach((id) => {
+        const keys = Array.from(new Set([...state.keys(), id])).filter((key) => Path.last(key) === id);
+        keys.forEach((key) => {
+          setItem(Path.parts(key), 'current', true);
+        });
+      });
+    });
+  });
+
+  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent }, () => unsubscribe());
+};

package/src/components/CommandsDialog.tsx

@@ -4,10 +4,9 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { useIntentDispatcher, LayoutAction } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { type ActionLike, isActionGroup, isAction } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
-import { useGraph } from '@dxos/plugin-graph';
 import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
@@ -19,8 +18,8 @@ import { KEY_BINDING, NAVTREE_PLUGIN } from '../meta';
 export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const [selected, setSelected] = useState<string | undefined>(initial);
-  const dispatch = useIntentDispatcher();
-  const { graph } = useGraph();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { graph } = useAppGraph();
 
   // Traverse graph.
   // TODO(burdon): Factor out commonality with shortcut dialog.
@@ -83,7 +82,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                     return;
                   }
 
-                  void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'dialog', state: false } });
+                  void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
                   setTimeout(() => {
                     const node = graph.nodes(group ?? action, { relation: 'inbound' })[0];
                     void (node && isAction(action) && action.data({ node, caller: KEY_BINDING }));

package/src/components/CommandsTrigger.tsx

@@ -5,24 +5,29 @@
 import { MagnifyingGlass } from '@phosphor-icons/react';
 import React from 'react';
 
-import { LayoutAction, useIntent } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, useTranslation } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { dispatch } = useIntent();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
-      classNames='w-full h-full !rounded-none'
+      classNames='m-1 pli-1 lg:pli-2'
       onClick={() =>
-        dispatch({
-          action: LayoutAction.SET_LAYOUT,
-          data: { element: 'dialog', component: `${NAVTREE_PLUGIN}/Commands`, dialogBlockAlign: 'start' },
-        })
+        dispatch(
+          createIntent(LayoutAction.UpdateDialog, {
+            part: 'dialog',
+            subject: COMMANDS_DIALOG,
+            options: {
+              blockAlign: 'start',
+            },
+          }),
+        )
       }
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>

package/src/components/L0Menu.tsx

@@ -0,0 +1,210 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type MouseEvent, useCallback, useMemo } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { Icon, toLocalizedString, Tooltip, useMediaQuery, useSidebars, useTranslation } from '@dxos/react-ui';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NotchStart } from './NotchStart';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { getFirstTwoRenderableChars, l0ItemType } from '../util';
+
+type L0ItemProps = {
+  item: Node<any>;
+  parent?: Node<any>;
+  path: string[];
+  pinned?: boolean;
+};
+
+const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
+  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const [isLg] = useMediaQuery('lg', { ssr: false });
+
+  return useCallback(
+    (event: MouseEvent) => {
+      switch (type) {
+        case 'tab':
+          // TODO(thure): This dispatch should rightly be in `onTabChange`, but that callback wasn’t reacting to changes
+          //  to its dependencies.
+          void dispatch(
+            createIntent(LayoutAction.UpdateSidebar, {
+              part: 'sidebar',
+              options: {
+                state:
+                  item.id === tab
+                    ? navigationSidebarState === 'expanded'
+                      ? isLg
+                        ? 'collapsed'
+                        : 'closed'
+                      : 'expanded'
+                    : 'expanded',
+              },
+            }),
+          );
+          return onTabChange?.(item);
+        case 'link':
+          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
+        case 'action': {
+          const {
+            data: invoke,
+            properties: { caller },
+          } = item;
+          return invoke?.(caller ? { node: parent, caller } : { node: parent });
+        }
+      }
+    },
+    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
+  );
+};
+
+const l0Breakpoints: Record<string, string> = {
+  lg: 'hidden lg:grid',
+};
+
+const L0Item = ({ item, parent, path, pinned }: L0ItemProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const type = l0ItemType(item);
+  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { getProps } = useNavTreeContext();
+  const { id, testId } = getProps?.(item, path) ?? {};
+  const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+  const handleClick = useL0ItemClick({ item, path: itemPath, parent }, type);
+  const rootProps =
+    type === 'tab'
+      ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+      : type !== 'collection'
+        ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+        : { onClick: handleClick };
+  const localizedString = toLocalizedString(item.properties.label, t);
+  const avatarValue = useMemo(
+    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('') : []),
+    [type, item.properties.label, t],
+  );
+
+  return (
+    <Tooltip.Root delayDuration={0}>
+      <Tooltip.Trigger asChild>
+        <Root
+          {...(rootProps as any)}
+          data-type={type}
+          className={mx(
+            'group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag',
+            l0Breakpoints[item.properties.l0Breakpoint],
+          )}
+        >
+          {type !== 'collection' && (
+            <div
+              role='none'
+              className={mx(
+                'absolute -z-[1] group-hover/l0i:bg-input dx-focus-ring-group-indicator transition-colors',
+                type === 'tab' || pinned ? 'rounded' : 'rounded-full',
+                pinned ? 'bg-transparent inset-inline-3 inset-block-0' : 'bg-input inset-inline-3 inset-block-2',
+              )}
+            />
+          )}
+          <div
+            role='none'
+            className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+          />
+          {type === 'tab' && item.properties.disposition !== 'pin-end' ? (
+            <span role='img' className='place-self-center text-3xl font-light'>
+              {avatarValue}
+            </span>
+          ) : (
+            item.properties.icon && (
+              <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' />
+            )
+          )}
+          <span id={`${item.id}__label`} className='sr-only'>
+            {localizedString}
+          </span>
+        </Root>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='right'>
+          {localizedString}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+const L0Collection = ({ item, path, parent }: L0ItemProps) => {
+  const navTreeContext = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = navTreeContext.getItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+  return (
+    <div
+      role='group'
+      className='contents group/l0c'
+      aria-labelledby={`${item.id}__label`}
+      data-itemid={id}
+      data-testid={testId}
+    >
+      {/* TODO(burdon): Option. */}
+      {/* <L0Item item={item} parent={parent} path={groupPath} /> */}
+      {collectionItems.map((collectionItem) => (
+        <L0Item key={collectionItem.id} item={collectionItem} parent={item} path={groupPath} />
+      ))}
+    </div>
+  );
+};
+
+export const L0Menu = ({
+  topLevelItems,
+  pinnedItems,
+  parent,
+  path,
+}: {
+  topLevelItems: Node<any>[];
+  pinnedItems: Node<any>[];
+  parent?: Node<any>;
+  path: string[];
+}) => {
+  return (
+    <Tabs.Tablist classNames='group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag'>
+      <div
+        role='none'
+        className='grid auto-rows-[calc(var(--l0-size)-.5rem)] min-bs-0 !overflow-y-auto plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]'
+      >
+        {topLevelItems.map((item) => {
+          if (l0ItemType(item) === 'collection') {
+            return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
+          } else {
+            return <L0Item key={item.id} item={item} parent={parent} path={path} />;
+          }
+        })}
+      </div>
+      <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
+        {pinnedItems
+          .filter((item) => l0ItemType(item) !== 'collection')
+          .map((item) => (
+            <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
+          ))}
+      </div>
+      <div role='none' className='grid p-2 app-no-drag'>
+        <NotchStart />
+      </div>
+      <div
+        role='none'
+        className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'
+        style={{
+          background:
+            'linear-gradient(to bottom, var(--dx-baseSurface) 0%, var(--dx-baseSurface) 70%, transparent 100%)',
+        }}
+      />
+    </Tabs.Tablist>
+  );
+};

package/src/components/L1Panels.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { useLayout } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-list';
+import { Tabs } from '@dxos/react-ui-tabs';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemColumns } from './NavTreeItemColumns';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { l0ItemType } from '../util';
+
+type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string };
+
+const L1Panel = ({ item, path, currentItemId }: L1PanelProps) => {
+  const layout = useLayout();
+  const navTreeContext = useNavTreeContext();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  return (
+    <Tabs.Tabpanel
+      key={item.id}
+      value={item.id}
+      classNames={[
+        'absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]',
+        item.id === currentItemId && 'grid',
+      ]}
+      tabIndex={-1}
+      {...(!layout.sidebarOpen && { inert: 'true' })}
+    >
+      {item.id === currentItemId && (
+        <>
+          <h2 className='flex items-center border-be border-separator pis-4 app-drag'>
+            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
+            <NavTreeItemColumns path={path} item={item} open />
+          </h2>
+          <div role='none' className='overflow-y-auto'>
+            <Tree
+              {...navTreeContext}
+              id={item.id}
+              root={item}
+              path={path}
+              levelOffset={5}
+              draggable
+              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+              renderColumns={NavTreeItemColumns}
+            />
+          </div>
+        </>
+      )}
+    </Tabs.Tabpanel>
+  );
+};
+
+const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
+  const { getItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = getItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  return (
+    <>
+      {collectionItems
+        .filter((item) => l0ItemType(item) === 'tab')
+        .map((item) => (
+          <L1Panel key={item.id} item={item} path={groupPath} currentItemId={currentItemId} />
+        ))}
+    </>
+  );
+};
+
+export const L1Panels = ({
+  topLevelItems,
+  path,
+  currentItemId,
+}: {
+  topLevelItems: Node<any>[];
+  path: string[];
+  currentItemId: string;
+}) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+          case 'tab':
+            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/components/NavTree.stories.tsx

@@ -16,7 +16,7 @@ import { isTreeData, type TreeData } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree } from './NavTree';
+import { StorybookNavTree } from '../stories/StorybookNavTree';
 import { createTree, updateState } from '../testing';
 
 faker.seed(1234);
@@ -24,9 +24,9 @@ faker.seed(1234);
 const tree = create<NodeArg<any>>(createTree());
 const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
 
-const meta: Meta<typeof NavTree> = {
+const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/NavTree',
-  component: NavTree,
+  component: StorybookNavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -52,7 +52,7 @@ const meta: Meta<typeof NavTree> = {
       });
     }, []);
 
-    return <NavTree {...args} />;
+    return <StorybookNavTree {...args} />;
   },
   args: {
     id: tree.id,
@@ -60,7 +60,7 @@ const meta: Meta<typeof NavTree> = {
       actions: arg.nodes?.filter((node) => isActionLike(node)) ?? [],
       groupedActions: {},
     }),
-    getItems: (testItem?: NodeArg<any>) => {
+    getItems: (testItem?: any) => {
       return testItem?.nodes ?? tree.nodes ?? [];
     },
     getProps: (testItem: NodeArg<any>) => ({