@dxos/plugin-navtree 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/src/capabilities/state.ts

@@ -2,104 +2,148 @@
 // 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 { NAVTREE_PLUGIN } from '../meta';
+import { meta } from '#meta';
+import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '#types';
 
-import { NavTreeCapabilities } from './capabilities';
+const KEY = `${meta.id}.state.v1`;
 
-const KEY = `${NAVTREE_PLUGIN}/state/v1`;
+/** Default item state for new entries. */
+const defaultItemState: NC.NavTreeItemState = { open: false, current: false, alternateTree: 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, NC.NavTreeItemState][] = [['root', { open: true, current: false }]];
+
+const getInitialState = (): Map<string, NC.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<NC.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(Atom.keepAlive),
+    );
+
+    const getItemAtom = (path: string[]): Atom.Atom<NC.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[]): NC.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' | 'alternateTree', 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,45 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React from 'react';
-
-import {
-  Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  contributes,
-  createResolver,
-  defineCapability,
-  useCapability,
-} from '@dxos/app-framework';
+import * as Effect from 'effect/Effect';
+import React, { type KeyboardEvent, useCallback, useRef } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+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 { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { SpacePlugin } from '@dxos/plugin-space';
-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/operation';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
 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/storybook-utils';
+import { withLayout } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+import { NavTreeContainer } from '#containers';
+import { storybookGraphBuilders } from '#testing';
 
 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.
@@ -55,11 +44,11 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
     <div className='flex p-1 items-center border-b border-separator'>
       <IconButton
         density='coarse'
-        icon='ph--atom--regular'
+        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>
@@ -68,25 +57,36 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
 
 const StoryPlank = ({ attendableId }: { attendableId: string }) => {
   const attentionAttrs = useAttentionAttributes(attendableId);
+  const rootElement = useRef<HTMLDivElement | null>(null);
+
+  // NOTE(thure): This is the same workaround as in Plank, but that component is out of scope for this story.
+  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.target === event.currentTarget && event.key === 'Escape') {
+      rootElement.current?.closest('main')?.focus();
+    }
+  }, []);
 
   return (
     <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-b 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-active-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' />
@@ -99,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>
@@ -116,85 +116,93 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof NavTreeContainer> = {
-  title: 'plugins/plugin-navtree/NavTree',
+const meta = {
+  title: 'plugins/plugin-navtree/components/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({
+          initialState: { sidebarState: 'expanded' },
+        }),
+
         NavTreePlugin(),
       ],
-      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 });
+                }),
+              ),
+            ),
+          ),
+        ];
+      },
     }),
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof NavTreeContainer>;
 
 export default meta;
 
 type Story = StoryObj<typeof NavTreeContainer>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
 
-// TODO(wittjosiah): Deduplicate plugins/capabilities with default story.
-export const WithClient: Story = {
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
-        NavTreePlugin(),
-        ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        // Needs to be last so that the dialog and popovers have access to all contexts.
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        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;
-            },
-          }),
-        ]),
-      ],
-    }),
-    withLayout({ fullscreen: true }),
-  ],
+    // Find the element with treegrid role and click on its parent
+    const treegridElement = await canvas.findByRole('treegrid');
+    const treegridParent = treegridElement.parentElement;
+    if (treegridParent) {
+      await userEvent.click(treegridParent);
+    }
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is on an element with attribute data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Shift-Tab
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+
+    // Press Enter
+    await userEvent.keyboard('{Enter}');
+
+    // Confirm that focus is now on an element with data-attendable-id="space-0:object-0"
+    await expect(document.activeElement).toHaveAttribute('data-attendable-id', 'space-0:object-0');
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+  },
 };

package/src/components/NavTree/NavTree.tsx

@@ -2,52 +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 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],
-  );
+export type NavTreeProps = { id: string; root?: Node.Node; tab: string } & Pick<L1TabsProps, 'open'>;
+
+// 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 (
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+    // 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
+    //  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' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -55,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 {
+      topLevelActions,
+      l0Items: topLevelWorkspaces,
+      pinnedItems,
+      userAccountItem,
+    };
+  }, [rootActions, rootOutboundItems]);
+
+  const topLevelItems = useMemo(
+    () => [...l0Items, ...pinnedItems, ...(userAccountItem ? [userAccountItem] : [])],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  return { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems };
 };