@dxos/plugin-navtree 0.7.5-main.9d2a38b → 0.7.5-main.e94eead

package/src/capabilities/react-surface.tsx

@@ -2,12 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { createSurface, Capabilities, contributes, useCapability } from '@dxos/app-framework';
-import { isGraphNode, type Node } from '@dxos/plugin-graph';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { isGraphNode } from '@dxos/plugin-graph';
 
-import { NavTreeCapabilities } from './capabilities';
 import {
   CommandsDialogContent,
   CommandsTrigger,
@@ -15,48 +14,28 @@ import {
   NotchStart,
   NavTreeContainer,
 } from '../components';
-import { NavTreeFooter } from '../components/NavTreeFooter';
 import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
-import { type NavTreeItemGraphNode } from '../types';
-import { expandChildrenAndActions } from '../util';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
       id: COMMANDS_DIALOG,
       role: 'dialog',
-      filter: (data): data is { subject?: string } => data.component === COMMANDS_DIALOG,
-      component: ({ data }) => <CommandsDialogContent selected={data.subject} />,
+      filter: (data): data is { props: { selected?: string } } => data.component === COMMANDS_DIALOG,
+      component: ({ data }) => <CommandsDialogContent {...data.props} />,
     }),
     createSurface({
       id: `${NAVTREE_PLUGIN}/navigation`,
       role: 'navigation',
-      component: ({ data }) => {
-        const { graph } = useCapability(Capabilities.AppGraph);
-        const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
-
-        const handleOpenChange = useCallback(
-          ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
-            // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
-            setItem(path, 'open', open);
-
-            if (graph) {
-              const node = graph.findNode(id);
-              return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
-            }
-          },
-          [graph],
-        );
-
-        return (
-          <NavTreeContainer
-            isOpen={isOpen}
-            isCurrent={isCurrent}
-            onOpenChange={handleOpenChange}
-            popoverAnchorId={data.popoverAnchorId as string | undefined}
-          />
-        );
-      },
+      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`,
@@ -68,15 +47,10 @@ export default () =>
       role: 'notch-start',
       component: () => <NotchStart />,
     }),
-    createSurface({
-      id: `${NAVTREE_PLUGIN}/header-end`,
-      role: 'header-end',
-      component: () => <NavTreeFooter />,
-    }),
     createSurface({
       id: `${NAVTREE_PLUGIN}/search-input`,
       role: 'search-input',
-      disposition: 'fallback',
+      position: 'fallback',
       component: () => <CommandsTrigger />,
     }),
   ]);

package/src/capabilities/state.ts

@@ -6,7 +6,7 @@ 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 { Path } from '@dxos/react-ui-list';
 
 import { NavTreeCapabilities } from './capabilities';
 import { NAVTREE_PLUGIN } from '../meta';
@@ -34,6 +34,8 @@ const getInitialState = () => {
 };
 
 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.
@@ -67,15 +69,10 @@ export default (context: PluginsContext) => {
   const isOpen = (path: string[]) => getItem(path).open;
   const isCurrent = (path: string[]) => getItem(path).current;
 
-  const location = context.requestCapability(Capabilities.Location);
-  const layout = context.requestCapability(Capabilities.Layout);
-
   let previous: string[] = [];
   const unsubscribe = effect(() => {
-    const part = layout.layoutMode === 'solo' ? 'solo' : 'main';
-    const current = location.active[part]?.map(({ id }) => id) ?? [];
-    const removed = previous.filter((id) => !current.includes(id));
-    previous = current;
+    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.
@@ -87,7 +84,7 @@ export default (context: PluginsContext) => {
         });
       });
 
-      current.forEach((id) => {
+      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);

package/src/components/CommandsDialog.tsx

@@ -4,10 +4,9 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { useIntentDispatcher, LayoutAction, createIntent } 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';
@@ -20,7 +19,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const [selected, setSelected] = useState<string | undefined>(initial);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useGraph();
+  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(createIntent(LayoutAction.SetLayout, { 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

@@ -17,13 +17,15 @@ export const CommandsTrigger = () => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
-      classNames='m-1 !pli-1 lg:!pli-2'
+      classNames='m-1 pli-1 lg:pli-2'
       onClick={() =>
         dispatch(
-          createIntent(LayoutAction.SetLayout, {
-            element: 'dialog',
-            component: COMMANDS_DIALOG,
-            dialogBlockAlign: 'start',
+          createIntent(LayoutAction.UpdateDialog, {
+            part: 'dialog',
+            subject: COMMANDS_DIALOG,
+            options: {
+              blockAlign: 'start',
+            },
           }),
         )
       }

package/src/components/L0Menu.tsx

@@ -0,0 +1,332 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
+import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
+import {
+  attachClosestEdge,
+  type Edge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import React, { type MouseEvent, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { invariant } from '@dxos/invariant';
+import {
+  Popover,
+  ScrollArea,
+  toLocalizedString,
+  Tooltip,
+  useMediaQuery,
+  useSidebars,
+  useTranslation,
+  ListItem,
+  Icon,
+} from '@dxos/react-ui';
+import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { mx } from '@dxos/react-ui-theme';
+import { arrayMove } from '@dxos/util';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NotchStart } from './NotchStart';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { getFirstTwoRenderableChars, l0ItemType } from '../util';
+
+type L0ItemData = { id: L0ItemProps['item']['id']; type: 'l0Item' };
+
+type L0ItemProps = {
+  item: Node<any>;
+  parent?: Node<any>;
+  path: string[];
+  pinned?: boolean;
+  onRearrange?: StackItemRearrangeHandler<L0ItemData>;
+};
+
+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, onRearrange }: L0ItemProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const itemElement = useRef<HTMLElement | null>(null);
+  const [closestEdge, setEdge] = useState<Edge | null>(null);
+  const type = l0ItemType(item);
+  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { getProps, popoverAnchorId } = 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 hue = item.properties.hue ?? null;
+  const avatarValue = useMemo(
+    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
+    [type, item.properties.label, t],
+  );
+  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
+
+  useLayoutEffect(() => {
+    // NOTE(thure): This is copied from StackItem, perhaps this should be DRYed out.
+    if (!itemElement.current || !onRearrange) {
+      return;
+    }
+    return combine(
+      draggable({
+        element: itemElement.current,
+        getInitialData: () => ({ id: item.id, type: 'l0Item' }) satisfies L0ItemData,
+        onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+          document.body.setAttribute('data-drag-preview', 'true');
+          const element = source.element.querySelector('[data-frame]') as HTMLElement;
+          scrollJustEnoughIntoView({ element });
+          const { x, y } = preserveOffsetOnSource({ element, input: location.current.input })({
+            container: (element.offsetParent ?? document.body) as HTMLElement,
+          });
+          nativeSetDragImage?.(element, x, y);
+        },
+        onDragStart: () => {
+          document.body.removeAttribute('data-drag-preview');
+          itemElement.current!.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');
+        },
+        onDrop: () => {
+          itemElement.current!.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');
+        },
+      }),
+      dropTargetForElements({
+        element: itemElement.current,
+        getData: ({ input, element }) => {
+          return attachClosestEdge(
+            { id: item.id, type: 'l0Item' },
+            { input, element, allowedEdges: ['top', 'bottom'] },
+          );
+        },
+        onDragEnter: ({ self, source }) => {
+          if (source.data.type === self.data.type) {
+            setEdge(extractClosestEdge(self.data));
+          }
+        },
+        onDrag: ({ self, source }) => {
+          if (source.data.type === self.data.type) {
+            setEdge(extractClosestEdge(self.data));
+          }
+        },
+        onDragLeave: () => setEdge(null),
+        onDrop: ({ self, source }) => {
+          setEdge(null);
+          if (source.data.type === self.data.type) {
+            onRearrange(source.data as L0ItemData, self.data as L0ItemData, extractClosestEdge(self.data));
+          }
+        },
+      }),
+    );
+  }, [item, onRearrange]);
+
+  const l0ItemTrigger = (
+    <Root
+      {...(rootProps as any)}
+      data-type={type}
+      className={mx(
+        'group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag',
+        l0Breakpoints[item.properties.l0Breakpoint],
+      )}
+      ref={itemElement}
+    >
+      <div
+        role='none'
+        data-frame={true}
+        className={mx(
+          'absolute grid dx-focus-ring-group-indicator transition-colors',
+          type === 'tab' || pinned ? 'rounded' : 'rounded-full',
+          pinned
+            ? 'bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5'
+            : 'bg-groupSurface inset-inline-3 inset-block-2',
+        )}
+        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
+      >
+        {(item.properties.icon && (
+          <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+        )) ||
+          (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
+            <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
+              {avatarValue}
+            </span>
+          ) : (
+            item.properties.icon && (
+              <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+            )
+          ))}
+      </div>
+      <div
+        role='none'
+        className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+      />
+      <span id={`${item.id}__label`} className='sr-only'>
+        {localizedString}
+      </span>
+      {onRearrange && closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+    </Root>
+  );
+
+  return popoverAnchorId === id ? (
+    <Popover.Anchor asChild>{l0ItemTrigger}</Popover.Anchor>
+  ) : (
+    <Tooltip.Root delayDuration={0}>
+      <Tooltip.Trigger asChild>{l0ItemTrigger}</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) ?? {};
+  const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
+    (source, target, closestEdge) => {
+      invariant(item.properties.onRearrangeChildren);
+      const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
+      const targetIndex = collectionItems.findIndex((i) => i.id === target.id);
+      const insertIndex =
+        source.id === target.id
+          ? sourceIndex
+          : targetIndex +
+            (sourceIndex < targetIndex ? (closestEdge === 'top' ? -1 : 0) : closestEdge === 'bottom' ? 1 : 0);
+      const nextOrder = arrayMove([...collectionItems], sourceIndex, insertIndex);
+      return item.properties.onRearrangeChildren(nextOrder);
+    },
+    [collectionItems, item.properties.onRearrangeChildren],
+  );
+  return (
+    <div
+      role='group'
+      className='contents group/l0c'
+      aria-labelledby={`${item.id}__label`}
+      data-itemid={id}
+      data-testid={testId}
+    >
+      {collectionItems.map((collectionItem) => (
+        <L0Item
+          key={collectionItem.id}
+          item={collectionItem}
+          parent={item}
+          path={groupPath}
+          {...(item.properties.onRearrangeChildren && { onRearrange: handleRearrange })}
+        />
+      ))}
+    </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  pbe-[env(safe-area-inset-bottom)]'>
+      <ScrollArea.Root>
+        <ScrollArea.Viewport>
+          <div
+            role='none'
+            className='grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),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>
+          <ScrollArea.Scrollbar orientation='vertical'>
+            <ScrollArea.Thumb />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <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,119 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { useLayout } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-list';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemColumns } from './NavTreeItemColumns';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { l0ItemType } from '../util';
+
+export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
+
+const L1Panel = ({ item, path, currentItemId, onBack }: 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] pbs-[env(safe-area-inset-top)]',
+        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'>
+            {item.properties.disposition === 'pin-end' && (
+              <IconButton
+                label={t('back label')}
+                iconOnly
+                icon='ph--caret-left--regular'
+                size={5}
+                density='fine'
+                variant='ghost'
+                classNames={mx(
+                  'shrink-0 mie-2 !p-0',
+                  'pointer-fine:pli-1',
+                  hoverableControlItem,
+                  hoverableOpenControlItem,
+                )}
+                onClick={onBack}
+              />
+            )}
+            <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,
+  onBack,
+}: Pick<L1PanelProps, 'onBack'> & {
+  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} onBack={onBack} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/components/NavTree.stories.tsx

@@ -13,10 +13,10 @@ import { isActionLike, type NodeArg } from '@dxos/app-graph';
 import { create, type ReactiveObject } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { isTreeData, type TreeData } from '@dxos/react-ui-list';
-import { Path } from '@dxos/react-ui-mosaic';
+import { Path } from '@dxos/react-ui-list';
 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>) => ({