@dxos/plugin-navtree 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
@@ -26,64 +27,63 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "effect": "3.16.13",
-    "@dxos/app-framework": "0.8.4-main.84f28bd",
-    "@dxos/app-graph": "0.8.4-main.84f28bd",
-    "@dxos/async": "0.8.4-main.84f28bd",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/echo": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/keyboard": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/local-storage": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/plugin-deck": "0.8.4-main.84f28bd",
-    "@dxos/plugin-graph": "0.8.4-main.84f28bd",
-    "@dxos/plugin-observability": "0.8.4-main.84f28bd",
-    "@dxos/protocols": "0.8.4-main.84f28bd",
-    "@dxos/react-client": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-attention": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-list": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-menu": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-searchlist": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-stack": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-tabs": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/app-framework": "0.8.4-main.a4bbb77",
+    "@dxos/app-graph": "0.8.4-main.a4bbb77",
+    "@dxos/async": "0.8.4-main.a4bbb77",
+    "@dxos/echo": "0.8.4-main.a4bbb77",
+    "@dxos/debug": "0.8.4-main.a4bbb77",
+    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
+    "@dxos/invariant": "0.8.4-main.a4bbb77",
+    "@dxos/keyboard": "0.8.4-main.a4bbb77",
+    "@dxos/lit-ui": "0.8.4-main.a4bbb77",
+    "@dxos/live-object": "0.8.4-main.a4bbb77",
+    "@dxos/local-storage": "0.8.4-main.a4bbb77",
+    "@dxos/log": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-deck": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-graph": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-observability": "0.8.4-main.a4bbb77",
+    "@dxos/protocols": "0.8.4-main.a4bbb77",
+    "@dxos/react-client": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-attention": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-list": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-menu": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-searchlist": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-stack": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-tabs": "0.8.4-main.a4bbb77",
+    "@dxos/util": "0.8.4-main.a4bbb77"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.88.0",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.84f28bd",
-    "@dxos/plugin-attention": "0.8.4-main.84f28bd",
-    "@dxos/plugin-space": "0.8.4-main.84f28bd",
-    "@dxos/plugin-client": "0.8.4-main.84f28bd",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.84f28bd",
-    "@dxos/plugin-theme": "0.8.4-main.84f28bd",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.0",
+    "@types/react-dom": "~19.2.0",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-signals": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-attention": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-client": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-space": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.a4bbb77",
+    "@dxos/plugin-theme": "0.8.4-main.a4bbb77",
+    "@dxos/random": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
+    "@dxos/storybook-utils": "0.8.4-main.a4bbb77"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -3,14 +3,14 @@
 //
 
 import {
-  definePlugin,
-  defineModule,
-  Events,
-  contributes,
   Capabilities,
+  Events,
+  LayoutAction,
   allOf,
+  contributes,
   createIntent,
-  LayoutAction,
+  defineModule,
+  definePlugin,
 } from '@dxos/app-framework';
 import { type TreeData } from '@dxos/react-ui-list';
 
@@ -20,76 +20,75 @@ import { NavTreeEvents } from './events';
 import { meta } from './meta';
 import { translations } from './translations';
 
-export const NavTreePlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/state`,
-      activatesOn: Events.LayoutReady,
-      activatesAfter: [NavTreeEvents.StateReady],
-      activate: State,
-    }),
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () =>
-        contributes(Capabilities.Metadata, {
-          id: NODE_TYPE,
-          metadata: {
-            parse: ({ item }: TreeData, type: string) => {
-              switch (type) {
-                case 'node':
-                  return item;
-                case 'object':
-                  return item.data;
-                case 'view-object':
-                  return { id: `${item.id}-view`, object: item.data };
-              }
-            },
+export const NavTreePlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/state`,
+    activatesOn: Events.LayoutReady,
+    activatesAfter: [NavTreeEvents.StateReady],
+    activate: State,
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () =>
+      contributes(Capabilities.Metadata, {
+        id: NODE_TYPE,
+        metadata: {
+          parse: ({ item }: TreeData, type: string) => {
+            switch (type) {
+              case 'node':
+                return item;
+              case 'object':
+                return item.data;
+              case 'view-object':
+                return { id: `${item.id}-view`, object: item.data };
+            }
           },
-        }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/expose`,
-      activatesOn: allOf(Events.DispatcherReady, Events.AppGraphReady, Events.LayoutReady, NavTreeEvents.StateReady),
-      activate: async (context) => {
-        const layout = context.getCapability(Capabilities.Layout);
-        const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-        const { graph } = context.getCapability(Capabilities.AppGraph);
-        if (dispatch && layout.active.length === 1) {
-          // TODO(wittjosiah): This should really be fired once the navtree renders for the first time.
-          //   That is the point at which the graph is expanded and the path should be available.
-          void graph
-            .waitForPath({ target: layout.active[0] }, { timeout: 30_000 })
-            .then(() => dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: layout.active[0] })))
-            .catch(() => {});
-        }
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/expose`,
+    activatesOn: allOf(Events.DispatcherReady, Events.AppGraphReady, Events.LayoutReady, NavTreeEvents.StateReady),
+    activate: async (context) => {
+      const layout = context.getCapability(Capabilities.Layout);
+      const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+      const { graph } = context.getCapability(Capabilities.AppGraph);
+      if (dispatch && layout.active.length === 1) {
+        // TODO(wittjosiah): This should really be fired once the navtree renders for the first time.
+        //   That is the point at which the graph is expanded and the path should be available.
+        void graph
+          .waitForPath({ target: layout.active[0] }, { timeout: 30_000 })
+          .then(() => dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: layout.active[0] })))
+          .catch(() => {});
+      }
 
-        return [];
-      },
-    }),
-    defineModule({
-      id: `${meta.id}/module/keyboard`,
-      activatesOn: Events.AppGraphReady,
-      activate: Keyboard,
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-  ]);
+      return [];
+    },
+  }),
+  defineModule({
+    id: `${meta.id}/module/keyboard`,
+    activatesOn: Events.AppGraphReady,
+    activate: Keyboard,
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+]);

package/src/capabilities/app-graph-builder.ts

@@ -5,16 +5,16 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { Capabilities, contributes, type PluginContext, createIntent, LayoutAction } from '@dxos/app-framework';
-import { createExtension, ROOT_ID } from '@dxos/plugin-graph';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import { ROOT_ID, createExtension } from '@dxos/plugin-graph';
 
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
+import { COMMANDS_DIALOG, meta } from '../meta';
 
 export default (context: PluginContext) =>
   contributes(
     Capabilities.AppGraphBuilder,
     createExtension({
-      id: NAVTREE_PLUGIN,
+      id: meta.id,
       actions: (node) =>
         Rx.make((get) =>
           pipe(
@@ -36,7 +36,7 @@ export default (context: PluginContext) =>
                   );
                 },
                 properties: {
-                  label: ['open commands label', { ns: NAVTREE_PLUGIN }],
+                  label: ['open commands label', { ns: meta.id }],
                   icon: 'ph--magnifying-glass--regular',
                   keyBinding: {
                     macos: 'meta+k',

package/src/capabilities/capabilities.ts

@@ -5,7 +5,7 @@
 import { defineCapability } from '@dxos/app-framework';
 import { type Live } from '@dxos/live-object';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
 
 export namespace NavTreeCapabilities {
@@ -16,5 +16,5 @@ export namespace NavTreeCapabilities {
     isOpen: (path: string[], item: NavTreeItemGraphNode) => boolean;
     isCurrent: (path: string[], item: NavTreeItemGraphNode) => boolean;
     isAlternateTree: (path: string[], item: NavTreeItemGraphNode) => boolean;
-  }>(`${NAVTREE_PLUGIN}/capability/state`);
+  }>(`${meta.id}/capability/state`);
 }

package/src/capabilities/intent-resolver.ts

@@ -4,7 +4,7 @@
 
 import { Schema } from 'effect';
 
-import { contributes, type PluginContext, Capabilities, createResolver, LayoutAction } from '@dxos/app-framework';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 
 import { NavTreeCapabilities } from './capabilities';

package/src/capabilities/keyboard.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities as AppCapabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities as AppCapabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { Keyboard } from '@dxos/keyboard';
-import { isAction, type Node } from '@dxos/plugin-graph';
+import { type Node, isAction } from '@dxos/plugin-graph';
 import { getHostPlatform } from '@dxos/util';
 
 import { KEY_BINDING } from '../meta';

package/src/capabilities/react-surface.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { isGraphNode } from '@dxos/plugin-graph';
 
-import { CommandsDialogContent, CommandsTrigger, NavTreeDocumentTitle, NavTreeContainer } from '../components';
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../components';
+import { COMMANDS_DIALOG, meta } from '../meta';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
@@ -19,7 +19,7 @@ export default () =>
       component: ({ data }) => <CommandsDialogContent {...data.props} />,
     }),
     createSurface({
-      id: `${NAVTREE_PLUGIN}/navigation`,
+      id: `${meta.id}/navigation`,
       role: 'navigation',
       filter: (data): data is { popoverAnchorId?: string; topbar: boolean; current: string } =>
         typeof data.current === 'string',
@@ -32,12 +32,12 @@ export default () =>
       ),
     }),
     createSurface({
-      id: `${NAVTREE_PLUGIN}/document-title`,
+      id: `${meta.id}/document-title`,
       role: 'document-title',
       component: ({ data }) => <NavTreeDocumentTitle node={isGraphNode(data.subject) ? data.subject : undefined} />,
     }),
     createSurface({
-      id: `${NAVTREE_PLUGIN}/search-input`,
+      id: `${meta.id}/search-input`,
       role: 'search-input',
       position: 'fallback',
       component: () => <CommandsTrigger />,

package/src/capabilities/state.ts

@@ -4,15 +4,16 @@
 
 import { effect, untracked } from '@preact/signals-core';
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { type Live } from '@dxos/echo';
 import { live } from '@dxos/live-object';
 import { Path } from '@dxos/react-ui-list';
 
+import { meta } from '../meta';
+
 import { NavTreeCapabilities } from './capabilities';
-import { NAVTREE_PLUGIN } from '../meta';
 
-const KEY = `${NAVTREE_PLUGIN}/state/v1`;
+const KEY = `${meta.id}/state/v1`;
 
 const getInitialState = () => {
   const stringified = localStorage.getItem(KEY);

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -4,11 +4,11 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { useActions } from '@dxos/plugin-graph';
-import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import {
   cardDialogContent,
@@ -19,11 +19,11 @@ import {
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, NAVTREE_PLUGIN } from '../../meta';
+import { KEY_BINDING, meta } from '../../meta';
 
 // TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
 export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const [selected, setSelected] = useState<string | undefined>(initial);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
@@ -63,7 +63,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
 
   return (
     <Dialog.Content classNames={cardDialogContent}>
-      <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: NAVTREE_PLUGIN })}</Dialog.Title>
+      <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
 
       {/* TODO(burdon): BUG: Overscrolls container. */}
       <SearchList.Root label={t('command list input placeholder')} classNames={cardDialogSearchListRoot}>

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -2,19 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import { MagnifyingGlass } from '@phosphor-icons/react';
 import React from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, useTranslation } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';
+import { COMMANDS_DIALOG, meta } from '../../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <Button
       classNames='m-1 pli-1 lg:pli-2'
@@ -31,7 +29,7 @@ export const CommandsTrigger = () => {
       }
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
-      <MagnifyingGlass className={getSize(5)} />
+      <Icon icon='ph--magnifying-glass--regular' size={5} />
     </Button>
   );
 };

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

@@ -2,9 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React from 'react';
 
@@ -28,10 +26,10 @@ import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { useAttentionAttributes, useAttention } from '@dxos/react-ui-attention';
+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/storybook-utils';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
 import { storybookGraphBuilders } from '../../testing';
@@ -116,20 +114,21 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof NavTreeContainer> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
         ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
         GraphPlugin(),
         IntentPlugin(),
         SettingsPlugin(),
         AttentionPlugin(),
         NavTreePlugin(),
+        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
       ],
       capabilities: (context) => [
         contributes(StoryState, live({ tab: 'space-0' })),
@@ -147,12 +146,12 @@ const meta: Meta<typeof NavTreeContainer> = {
         ]),
       ],
     }),
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof NavTreeContainer>;
 
 export default meta;
 
@@ -165,19 +164,20 @@ export const WithClient: Story = {
   decorators: [
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
+        ClientPlugin({
+          onClientInitialized: async ({ client }) => {
+            await client.halo.createIdentity();
+          },
+        }),
+        SpacePlugin({}),
         GraphPlugin(),
         IntentPlugin(),
         SettingsPlugin(),
         AttentionPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
         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) => [
@@ -195,6 +195,9 @@ export const WithClient: Story = {
         ]),
       ],
     }),
-    withLayout({ fullscreen: true }),
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };

package/src/components/NavTree/NavTree.tsx

@@ -10,11 +10,11 @@ import { Tabs } from '@dxos/react-ui-tabs';
 import { useLoadDescendents } from '../../hooks';
 import { type NavTreeItemGraphNode } from '../../types';
 import { useNavTreeContext } from '../NavTreeContext';
-import { L0Menu, L1Panels, type L1PanelsProps } from '../Sidebar';
+import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
 
 export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   const { tab, useItems, onBack } = useNavTreeContext();
@@ -47,6 +47,10 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   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
+    //  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'>
       <L0Menu
         menuActions={topLevelActions}
@@ -56,7 +60,7 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
         path={path}
         parent={root}
       />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
+      <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
 };