@dxos/plugin-navtree 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { NavTreeOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, NavTreeOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -2,44 +2,52 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import * as Effect from 'effect/Effect';
+import React, { type ComponentProps } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { isGraphNode } from '@dxos/plugin-graph';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Node } from '@dxos/plugin-graph';
 
-import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../components';
-import { COMMANDS_DIALOG, meta } from '../meta';
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '#containers';
+import { COMMANDS_DIALOG } 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: `${meta.id}/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: `${meta.id}/document-title`,
-      role: 'document-title',
-      component: ({ data }) => <NavTreeDocumentTitle node={isGraphNode(data.subject) ? data.subject : undefined} />,
-    }),
-    createSurface({
-      id: `${meta.id}/search-input`,
-      role: 'search-input',
-      position: 'fallback',
-      component: () => <CommandsTrigger />,
-    }),
-  ]);
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: COMMANDS_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof CommandsDialogContent>>(AppSurface.Dialog, COMMANDS_DIALOG),
+        component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
+      }),
+      Surface.create({
+        id: 'navigation',
+        role: 'navigation',
+        filter: (data): data is { popoverAnchorId?: string; current: string } => typeof data.current === 'string',
+        component: ({ data, ref }) => {
+          return (
+            <NavTreeContainer
+              tab={data.current}
+              popoverAnchorId={data.popoverAnchorId as string | undefined}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'document-title',
+        role: 'document-title',
+        component: ({ data }) => (
+          <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
+        ),
+      }),
+      Surface.create({
+        id: 'search-input',
+        role: 'search-input',
+        position: 'last',
+        component: () => <CommandsTrigger />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/state.ts

@@ -2,104 +2,152 @@
 // Copyright 2025 DXOS.org
 //
 
-import { effect, untracked } from '@preact/signals-core';
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 
-import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
-import { type Live } from '@dxos/echo';
-import { live } from '@dxos/live-object';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Graph, Node } from '@dxos/plugin-graph';
 import { Path } from '@dxos/react-ui-list';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
+import { NavTreeCapabilities } from '#types';
 
-import { NavTreeCapabilities } from './capabilities';
+const KEY = `${meta.id}.state.v1`;
 
-const KEY = `${meta.id}/state/v1`;
+/** Default item state for new entries. */
+const defaultItemState: NavTreeCapabilities.NavTreeItemState = { open: false, current: false };
 
-const getInitialState = () => {
+/** L0 (top-level workspace) paths are direct children of root — not part of the expandable tree model. */
+const isTopLevelPath = (path: string[]): boolean => path.length === 2 && path[0] === Node.RootId;
+
+/** Default state entries for initial tree structure. */
+// TODO(thure): Initialize these dynamically.
+const defaultStateEntries: [string, NavTreeCapabilities.NavTreeItemState][] = [
+  ['root', { open: true, current: false }],
+];
+
+const getInitialState = (): Map<string, NavTreeCapabilities.NavTreeItemState> => {
   const stringified = localStorage.getItem(KEY);
   if (!stringified) {
-    return;
+    return new Map(defaultStateEntries);
   }
 
   try {
     const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
-    return cached.map(([key, value]): [string, Live<{ open: boolean; current: boolean }>] => [
-      key,
-      live({ open: value.open, current: false }),
-    ]);
-  } catch {}
+    return new Map(cached.map(([key, value]) => [key, { open: value.open, current: false }]));
+  } catch {
+    return new Map(defaultStateEntries);
+  }
 };
 
-export default (context: PluginContext) => {
-  const layout = context.getCapability(Capabilities.Layout);
-
-  // TODO(wittjosiah): This currently needs to be not a Live at the root.
-  //   If it is a Live then React errors when initializing new paths because of state change during render.
-  //   Ideally this could be a Live 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, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>(
-    getInitialState() ?? [
-      // TODO(thure): Initialize these dynamically.
-      ['root', live({ open: true, current: false })],
-      ['root~dxos.org/plugin/space-spaces', live({ open: true, current: false })],
-      ['root~dxos.org/plugin/files', live({ open: true, current: false })],
-    ],
-  );
-
-  const getItem = (_path: string[]) => {
-    const path = Path.create(..._path);
-    const value = state.get(path) ?? live({ open: false, current: false, alternateTree: false });
-    if (!state.has(path)) {
-      state.set(path, value);
-    }
-
-    return value;
-  };
-
-  const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', 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;
-  const isAlternateTree = (path: string[]) => {
-    const item = getItem(path);
-    return item.alternateTree ?? false;
-  };
-
-  let previous: string[] = [];
-  const unsubscribe = effect(() => {
-    const removed = previous.filter((id) => !layout.active.includes(id));
-    previous = layout.active;
-
-    const handleUpdate = () => {
-      removed.forEach((id) => {
-        const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
-        keys.forEach((key) => {
-          setItem(Path.parts(key), 'current', false);
-        });
-      });
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const layoutAtom = yield* Capability.get(AppCapabilities.Layout);
+
+    // Backing state for persistence (not reactive).
+    const backingState = getInitialState();
+
+    // Per-path atom family for fine-grained reactivity.
+    // keepAlive prevents atoms from being garbage collected when components unmount,
+    // ensuring state is preserved across deletion/restoration cycles.
+    const itemAtomFamily = Atom.family((pathString: string) =>
+      Atom.make<NavTreeCapabilities.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(
+        Atom.keepAlive,
+      ),
+    );
+
+    const getItemAtom = (path: string[]): Atom.Atom<NavTreeCapabilities.NavTreeItemState> => {
+      const pathString = Path.create(...path);
+      if (!backingState.has(pathString)) {
+        backingState.set(pathString, { ...defaultItemState });
+      }
+      return itemAtomFamily(pathString);
+    };
 
-      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);
-        });
-      });
+    const getItem = (path: string[]): NavTreeCapabilities.NavTreeItemState => {
+      return registry.get(getItemAtom(path));
     };
 
-    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
-    //   Keys are initialized on the first render of an item in the navtree.
-    //   This could be avoided if the location was a path as well and not just an id.
-    const timeout = setTimeout(handleUpdate, 500);
-    untracked(() => handleUpdate());
-    return () => clearTimeout(timeout);
-  });
-
-  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent, isAlternateTree }, () =>
-    unsubscribe(),
-  );
-};
+    const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+      const pathString = Path.create(...path);
+      const atom = itemAtomFamily(pathString);
+      const currentValue = registry.get(atom);
+      const newValue = { ...currentValue, [key]: next };
+
+      registry.set(atom, newValue);
+
+      if (!(key === 'open' && isTopLevelPath(path))) {
+        backingState.set(pathString, newValue);
+        localStorage.setItem(KEY, JSON.stringify(Array.from(backingState.entries())));
+      }
+    };
+
+    // Subscribe to layout changes to update current state.
+    let previous: string[] = [];
+    const unsubscribe = registry.subscribe(layoutAtom, (layout) => {
+      const removed = previous.filter((id) => !layout.active.includes(id));
+      previous = layout.active;
+
+      const handleUpdate = () => {
+        // Mark removed items as not current.
+        removed.forEach((id) => {
+          const keys = Array.from(backingState.keys()).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', false);
+          });
+        });
+
+        // Mark active items as current.
+        layout.active.forEach((id: string) => {
+          const keys = Array.from(new Set([...backingState.keys(), id])).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', true);
+          });
+        });
+      };
+
+      // TODO(wittjosiah): This is setTimeout because there's a race between the keys being initialized.
+      //   Keys are initialized on the first render of an item in the navtree.
+      //   This could be avoided if the location was a path as well and not just an id.
+      const timeout = setTimeout(handleUpdate, 500);
+      handleUpdate();
+      return () => clearTimeout(timeout);
+    });
+
+    // Once graph is ready, expand every node marked open in state so the graph has children loaded for rendering.
+    yield* Effect.gen(function* () {
+      const { graph } = yield* Capability.waitFor(AppCapabilities.AppGraph);
+
+      // Always expand the active workspace so its subtree is initialized.
+      const layout = registry.get(layoutAtom);
+      if (layout.workspace) {
+        Graph.expand(graph, layout.workspace, 'child');
+      }
+
+      // Expand persisted open nodes, skipping inactive workspace tabs.
+      const openPaths = Array.from(backingState.entries())
+        .filter(([, state]) => state.open)
+        .map(([pathString]) => Path.parts(pathString))
+        .filter((path) => !isTopLevelPath(path));
+      for (const path of openPaths) {
+        const nodeId = path[path.length - 1];
+        if (!nodeId) {
+          continue;
+        }
+        Graph.expand(graph, nodeId, 'child');
+      }
+    }).pipe(Effect.forkDaemon);
+
+    return Capability.contributes(
+      NavTreeCapabilities.State,
+      {
+        getItem,
+        getItemAtom,
+        setItem,
+      },
+      () => Effect.sync(() => unsubscribe()),
+    );
+  }),
+);

package/src/components/NavTree/NavTree.stories.tsx

@@ -2,42 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import React, { type KeyboardEvent, useCallback, useRef } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import {
-  Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  contributes,
-  createResolver,
-  defineCapability,
-} from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { live } from '@dxos/live-object';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
+import { withLayout } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+import { NavTreeContainer } from '#containers';
+import { storybookGraphBuilders } from '#testing';
+import { translations } from '#translations';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
-import { storybookGraphBuilders } from '../../testing';
-import { translations } from '../../translations';
-import { NavTreeContainer } from '../NavTreeContainer';
 
-faker.seed(1234);
+random.seed(1234);
 
-const StoryState = defineCapability<{ tab: string }>('story-state');
+const StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
 // TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
 // TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
@@ -51,12 +43,12 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   return (
     <div className='flex p-1 items-center border-b border-separator'>
       <IconButton
-        density='coarse'
-        icon='ph--atom--regular'
+        density='lg'
+        icon='ph--circle--regular'
         label='Test'
         iconOnly
         variant={hasAttention ? 'primary' : 'ghost'}
-        classNames='is-[--rail-action] bs-[--rail-action]'
+        classNames='w-(--dx-rail-action) h-(--dx-rail-action)'
       />
       <StackItem.ResizeHandle />
     </div>
@@ -79,22 +71,22 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
     <StackItem.Root
       item={{ id: attendableId }}
       {...attentionAttrs}
-      classNames='bg-baseSurface border-ie border-separator'
+      classNames='bg-base-surface border-e border-separator'
       size={30}
       onKeyDown={handleKeyDown}
       ref={rootElement}
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-be border-subduedSeparator'>
+        <Toolbar.Root classNames='border-b border-subdued-separator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
-        <div className={mx(container, 'm-2 bg-activeSurface')}>
+        <div className={mx(container, 'm-2 bg-current-surface')}>
           <Input.Root>
             <Input.Label>Level 1 (group)</Input.Label>
           </Input.Root>
-          <div className={mx(container, 'bg-baseSurface')}>
+          <div className={mx(container, 'bg-base-surface')}>
             <Input.Root>
               <Input.Label>Level 2 (base)</Input.Label>
               <Input.TextArea placeholder='Enter text' />
@@ -107,10 +99,10 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
 };
 
 const DefaultStory = () => {
-  const state = useCapability(StoryState);
+  const state = useAtomCapability(StoryState);
 
   return (
-    <Main.Root complementarySidebarState='closed'>
+    <Main.Root navigationSidebarState='expanded'>
       <Main.NavigationSidebar label='Navigation' classNames='grid'>
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
@@ -125,36 +117,38 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-navtree/NavTree',
+  title: 'plugins/plugin-navtree/components/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({
+          initialState: { sidebarState: 'expanded' },
+        }),
+
         NavTreePlugin(),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders(context)),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
       ],
+      capabilities: () => {
+        const storyStateAtom = Atom.make({ tab: 'root/space-0' }).pipe(Atom.keepAlive);
+        return [
+          Capability.contributes(StoryState, storyStateAtom),
+          Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
+          Capability.contributes(
+            Capabilities.OperationHandler,
+            OperationHandlerSet.make(
+              Operation.withHandler(LayoutOperation.SwitchWorkspace, ({ subject }) =>
+                Effect.gen(function* () {
+                  const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
+                  registry.set(storyStateAtom, { tab: subject });
+                }),
+              ),
+            ),
+          ),
+        ];
+      },
     }),
   ],
   parameters: {
@@ -168,7 +162,7 @@ export default meta;
 type Story = StoryObj<typeof NavTreeContainer>;
 
 export const Default: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
 
     // Find the element with treegrid role and click on its parent

package/src/components/NavTree/NavTree.tsx

@@ -2,56 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
-import { type TreeProps } from '@dxos/react-ui-list';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
+
+import { useLoadDescendents } from '#hooks';
 
-import { useLoadDescendents } from '../../hooks';
-import { type NavTreeItemGraphNode } from '../../types';
 import { useNavTreeContext } from '../NavTreeContext';
 import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
+export type NavTreeProps = { id: string; root?: Node.Node; tab: string } & Pick<L1TabsProps, 'open'>;
 
-export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
-  const { tab, useItems, onBack } = useNavTreeContext();
-  const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
-  const topLevelCollections = useItems(root, { disposition: 'collection' });
-  const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
-  const topLevelNavigation = useItems(root, { disposition: 'navigation' });
-  const l0Items = useMemo(
-    () => [
-      // prettier-ignore
-      ...topLevelCollections,
-      ...topLevelWorkspaces,
-      ...topLevelNavigation,
-    ],
-    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
-  );
-  const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
-  const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
-  const topLevelItems = useMemo(
-    () => [
-      // prettier-ignore
-      ...l0Items,
-      ...pinnedItems,
-      ...(userAccountItem ? [userAccountItem] : []),
-    ],
-    [l0Items, pinnedItems, userAccountItem],
-  );
+// TODO(wittjosiah): Refactor to Radix-style.
+export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab, ...props }, forwardedRef) => {
+  const { onBack, onItemHover } = useNavTreeContext();
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems } = useTopLevelNavItems(root);
 
   useLoadDescendents(root);
   const path = useMemo(() => [id], [id]);
 
   return (
     // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
-    //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
+    //  it uses RovingFocus and doesn't support moving focus to an item that is not a tab. Assess whether this situation
     //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
     //  not use `react-ui-tabs` at all.
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+    <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -59,8 +39,60 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
         userAccountItem={userAccountItem}
         path={path}
         parent={root}
+        onItemHover={onItemHover}
       />
       <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
+});
+
+/**
+ * Partitions root children into workspaces, pinned items, user-account, and top-level actions.
+ */
+const useTopLevelNavItems = (root?: Node.Node) => {
+  const { graph } = useAppGraph();
+  const rootId = root?.id ?? Node.RootId;
+  const rootOutboundItems = useConnections(graph, rootId, 'child');
+  const rootActions = useGraphActions(graph, rootId);
+
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo(() => {
+    const topLevelWorkspaces: Node.Node[] = [];
+    const outboundPinnedItems: Node.Node[] = [];
+    let userAccountItem: Node.Node | undefined;
+    for (const node of rootOutboundItems) {
+      switch (node.properties.disposition) {
+        case 'workspace':
+          topLevelWorkspaces.push(node);
+          break;
+        case 'pin-end':
+          outboundPinnedItems.push(node);
+          break;
+        case 'user-account':
+          userAccountItem ??= node;
+          break;
+      }
+    }
+
+    const topLevelActions = rootActions
+      .filter((action) => action.properties.disposition === 'menu')
+      .toSorted((a, b) => byPosition(a.properties, b.properties));
+    const pinnedItems = [
+      ...outboundPinnedItems,
+      ...rootActions.filter((action) => action.properties.disposition === 'pin-end'),
+    ].toSorted((a, b) => byPosition(a.properties, b.properties));
+
+    return {
+      pinnedItems,
+      topLevelActions,
+      userAccountItem,
+      l0Items: topLevelWorkspaces,
+    };
+  }, [rootActions, rootOutboundItems]);
+
+  const topLevelItems = useMemo(
+    () => [...l0Items, ...pinnedItems, ...(userAccountItem ? [userAccountItem] : [])],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  return { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems };
 };