@dxos/plugin-navtree 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c351d160a8",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,57 +33,58 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/app-graph": "0.8.4-main.bc674ce",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/keyboard": "0.8.4-main.bc674ce",
-    "@dxos/lit-ui": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-deck": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/plugin-observability": "0.8.4-main.bc674ce",
-    "@dxos/protocols": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-attention": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-menu": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-list": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-tabs": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-searchlist": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/app-framework": "0.8.4-main.c351d160a8",
+    "@dxos/app-graph": "0.8.4-main.c351d160a8",
+    "@dxos/app-toolkit": "0.8.4-main.c351d160a8",
+    "@dxos/async": "0.8.4-main.c351d160a8",
+    "@dxos/echo": "0.8.4-main.c351d160a8",
+    "@dxos/debug": "0.8.4-main.c351d160a8",
+    "@dxos/invariant": "0.8.4-main.c351d160a8",
+    "@dxos/lit-ui": "0.8.4-main.c351d160a8",
+    "@dxos/keyboard": "0.8.4-main.c351d160a8",
+    "@dxos/operation": "0.8.4-main.c351d160a8",
+    "@dxos/log": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-deck": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-graph": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-observability": "0.8.4-main.c351d160a8",
+    "@dxos/react-client": "0.8.4-main.c351d160a8",
+    "@dxos/protocols": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-attention": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-list": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-stack": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-searchlist": "0.8.4-main.c351d160a8",
+    "@dxos/util": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-tabs": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-menu": "0.8.4-main.c351d160a8"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/plugin-client": "0.8.4-main.bc674ce",
-    "@dxos/plugin-attention": "0.8.4-main.bc674ce",
-    "@dxos/plugin-space": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/plugin-theme": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/plugin-testing": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/plugin-attention": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-space": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-client": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-testing": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-theme": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8",
+    "@dxos/random": "0.8.4-main.c351d160a8",
+    "@dxos/storybook-utils": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui": "0.8.4-main.c351d160a8"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -4,25 +4,20 @@
 
 import * as Effect from 'effect/Effect';
 
-import { ActivationEvent, Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvent, ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from '@dxos/app-toolkit';
 import { Graph } from '@dxos/plugin-graph';
 import { type TreeData } from '@dxos/react-ui-list';
 
 import { AppGraphBuilder, Keyboard, OperationResolver, ReactSurface, State } from './capabilities';
-import { NODE_TYPE } from './components';
+import { NODE_TYPE } from './containers';
 import { meta } from './meta';
 import { translations } from './translations';
 import { NavTreeEvents } from './types';
 
 export const NavTreePlugin = Plugin.define(meta).pipe(
-  Plugin.addModule({
-    id: 'state',
-    activatesOn: Common.ActivationEvent.LayoutReady,
-    activatesAfter: [NavTreeEvents.StateReady],
-    activate: State,
-  }),
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addMetadataModule({
     metadata: {
       id: NODE_TYPE,
       metadata: {
@@ -39,23 +34,32 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
       },
     },
   }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    id: 'state',
+    activatesOn: AppActivationEvents.LayoutReady,
+    activatesAfter: [NavTreeEvents.StateReady],
+    activate: State,
+  }),
   Plugin.addModule({
     id: 'expose',
     activatesOn: ActivationEvent.allOf(
-      Common.ActivationEvent.OperationInvokerReady,
-      Common.ActivationEvent.AppGraphReady,
-      Common.ActivationEvent.LayoutReady,
+      ActivationEvents.OperationInvokerReady,
+      AppActivationEvents.AppGraphReady,
+      AppActivationEvents.LayoutReady,
       NavTreeEvents.StateReady,
     ),
     activate: Effect.fnUntraced(function* () {
-      const layout = yield* Common.Capability.getAtomValue(Common.Capability.Layout);
-      const { invokePromise } = yield* Capability.get(Common.Capability.OperationInvoker);
-      const { graph } = yield* Capability.get(Common.Capability.AppGraph);
+      const layout = yield* Capabilities.getAtomValue(AppCapabilities.Layout);
+      const { invokePromise } = yield* Capability.get(Capabilities.OperationInvoker);
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
       if (invokePromise && 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(graph, { target: layout.active[0] }, { timeout: 30_000 })
-          .then(() => invokePromise(Common.LayoutOperation.Expose, { subject: layout.active[0] }))
+          .then(() => invokePromise(LayoutOperation.Expose, { subject: layout.active[0] }))
           .catch(() => {});
       }
 
@@ -64,14 +68,8 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   }),
   Plugin.addModule({
     id: 'keyboard',
-    activatesOn: ActivationEvent.allOf(
-      Common.ActivationEvent.AppGraphReady,
-      Common.ActivationEvent.OperationInvokerReady,
-    ),
+    activatesOn: ActivationEvent.allOf(AppActivationEvents.AppGraphReady, ActivationEvents.OperationInvokerReady),
     activate: Keyboard,
   }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Common.Plugin.addAppGraphModule({ activate: AppGraphBuilder }),
   Plugin.make,
 );

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

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/operation';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 
@@ -20,7 +21,7 @@ export default Capability.makeModule(
           {
             id: COMMANDS_DIALOG,
             data: () =>
-              Operation.invoke(Common.LayoutOperation.UpdateDialog, {
+              Operation.invoke(LayoutOperation.UpdateDialog, {
                 subject: COMMANDS_DIALOG,
                 blockAlign: 'start',
               }),
@@ -36,6 +37,6 @@ export default Capability.makeModule(
         ]),
     });
 
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/keyboard/keyboard.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { debounce } from '@dxos/async';
 import { Keyboard } from '@dxos/keyboard';
 import { Graph, Node, runAction } from '@dxos/plugin-graph';
@@ -14,8 +15,8 @@ import { KEY_BINDING } from '../../meta';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    const { graph } = yield* Capability.get(Common.Capability.AppGraph);
-    const invoker = yield* Capability.get(Common.Capability.OperationInvoker);
+    const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+    const invoker = yield* Capability.get(Capabilities.OperationInvoker);
     const pluginContext = yield* Capability.Service;
 
     // TODO(wittjosiah): Factor out.
@@ -46,7 +47,7 @@ export default Capability.makeModule(
     };
 
     const eventHandler = debounce(() => {
-      Graph.traverse(graph, { visitor });
+      Graph.traverse(graph, { relation: ['child', 'action'], visitor });
     }, 500);
 
     const unsubscribe = graph.onNodeChanged.on(eventHandler);
@@ -55,7 +56,7 @@ export default Capability.makeModule(
     Keyboard.singleton.initialize();
     Keyboard.singleton.setCurrentContext(Node.RootId);
 
-    return Capability.contributes(Common.Capability.Null, null, () =>
+    return Capability.contributes(Capabilities.Null, null, () =>
       Effect.sync(() => {
         unsubscribe();
         Keyboard.singleton.destroy();

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -3,8 +3,11 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { expandAttendableId } from '@dxos/react-ui-attention';
 import { log } from '@dxos/log';
 import { OperationResolver } from '@dxos/operation';
 import { Graph } from '@dxos/plugin-graph';
@@ -13,27 +16,28 @@ import { NavTreeCapabilities } from '../../types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    return Capability.contributes(Common.Capability.OperationResolver, [
+    return Capability.contributes(Capabilities.OperationResolver, [
       OperationResolver.make({
-        operation: Common.LayoutOperation.Expose,
+        operation: LayoutOperation.Expose,
         handler: Effect.fnUntraced(function* ({ subject }) {
-          const { graph } = yield* Capability.get(Common.Capability.AppGraph);
+          const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
           const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);
-          yield* Effect.tryPromise(() => Graph.waitForPath(graph, { target: subject }, { timeout: 1_000 })).pipe(
-            Effect.andThen((path) => {
-              [...Array(path.length)].forEach((_, index) => {
-                const subpath = path.slice(0, index);
-                const value = getItem(subpath);
-                if (!value.open) {
-                  setItem(subpath, 'open', true);
-                }
-              });
-            }),
-            Effect.catchAll(() => {
-              log('Path to node not found', { subject });
-              return Effect.void;
-            }),
-          );
+
+          const prefixes = expandAttendableId(subject);
+
+          for (const qualifiedId of prefixes) {
+            Graph.expand(graph, qualifiedId, 'child');
+
+            const treePath = prefixes.slice(0, prefixes.indexOf(qualifiedId) + 1);
+            const state = getItem(treePath);
+            if (!state.open) {
+              setItem(treePath, 'open', true);
+            }
+          }
+
+          if (Option.isNone(Graph.getNode(graph, subject))) {
+            log('Node not found after expansion', { subject });
+          }
         }),
       }),
     ]);

package/src/capabilities/react-surface/react-surface.tsx

@@ -5,46 +5,45 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { Node } from '@dxos/plugin-graph';
 
-import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../../components';
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../../containers';
 import { COMMANDS_DIALOG, meta } from '../../meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
         id: COMMANDS_DIALOG,
         role: 'dialog',
         filter: (data): data is { props: { selected?: string } } => data.component === COMMANDS_DIALOG,
         component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
       }),
-      Common.createSurface({
-        id: `${meta.id}/navigation`,
+      Surface.create({
+        id: `${meta.id}.navigation`,
         role: 'navigation',
-        filter: (data): data is { popoverAnchorId?: string; topbar: boolean; current: string } =>
-          typeof data.current === 'string',
+        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}
-              topbar={data.topbar as boolean}
               ref={ref}
             />
           );
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/document-title`,
+      Surface.create({
+        id: `${meta.id}.document-title`,
         role: 'document-title',
         component: ({ data }) => (
           <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
         ),
       }),
-      Common.createSurface({
-        id: `${meta.id}/search-input`,
+      Surface.create({
+        id: `${meta.id}.search-input`,
         role: 'search-input',
         position: 'fallback',
         component: () => <CommandsTrigger />,

package/src/capabilities/state/state.ts

@@ -5,24 +5,25 @@
 import { Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+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 { type NavTreeCapabilities as NC, NavTreeCapabilities } from '../../types';
 
-const KEY = `${meta.id}/state/v1`;
+const KEY = `${meta.id}.state.v1`;
 
 /** Default item state for new entries. */
 const defaultItemState: NC.NavTreeItemState = { open: false, current: false, alternateTree: false };
 
+/** 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 }],
-  ['root~dxos.org/plugin/space-spaces', { open: true, current: false }],
-  ['root~dxos.org/plugin/files', { open: true, current: false }],
-];
+const defaultStateEntries: [string, NC.NavTreeItemState][] = [['root', { open: true, current: false }]];
 
 const getInitialState = (): Map<string, NC.NavTreeItemState> => {
   const stringified = localStorage.getItem(KEY);
@@ -40,8 +41,8 @@ const getInitialState = (): Map<string, NC.NavTreeItemState> => {
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
-    const layoutAtom = yield* Capability.get(Common.Capability.Layout);
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const layoutAtom = yield* Capability.get(AppCapabilities.Layout);
 
     // Backing state for persistence (not reactive).
     const backingState = getInitialState();
@@ -55,6 +56,9 @@ export default Capability.makeModule(
 
     const getItemAtom = (path: string[]): Atom.Atom<NC.NavTreeItemState> => {
       const pathString = Path.create(...path);
+      if (!backingState.has(pathString)) {
+        backingState.set(pathString, { ...defaultItemState });
+      }
       return itemAtomFamily(pathString);
     };
 
@@ -68,12 +72,12 @@ export default Capability.makeModule(
       const currentValue = registry.get(atom);
       const newValue = { ...currentValue, [key]: next };
 
-      // Update the atom.
       registry.set(atom, newValue);
 
-      // Update backing state and persist to localStorage.
-      backingState.set(pathString, newValue);
-      localStorage.setItem(KEY, JSON.stringify(Array.from(backingState.entries())));
+      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.
@@ -108,6 +112,30 @@ export default Capability.makeModule(
       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,
       {

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

@@ -8,22 +8,23 @@ import * as Effect from 'effect/Effect';
 import React, { type KeyboardEvent, useCallback, useRef } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useAtomCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { OperationResolver } from '@dxos/operation';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/ui-theme';
 
+import { NavTreeContainer } from '../../containers';
 import { NavTreePlugin } from '../../NavTreePlugin';
 import { storybookGraphBuilders } from '../../testing';
 import { translations } from '../../translations';
-import { NavTreeContainer } from '../NavTreeContainer';
 
 faker.seed(1234);
 
@@ -39,14 +40,14 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   const { hasAttention } = useAttention(attendableId);
   console.log('hasAttention', hasAttention);
   return (
-    <div className='flex p-1 items-center border-be border-separator'>
+    <div className='flex p-1 items-center border-b border-separator'>
       <IconButton
         density='coarse'
         icon='ph--atom--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>
@@ -69,22 +70,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-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' />
@@ -115,11 +116,12 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-navtree/NavTree',
+  title: 'plugins/plugin-navtree/components/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),
@@ -130,16 +132,16 @@ const meta = {
         NavTreePlugin(),
       ],
       capabilities: () => {
-        const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
+        const storyStateAtom = Atom.make({ tab: 'root/space-0' }).pipe(Atom.keepAlive);
         return [
           Capability.contributes(StoryState, storyStateAtom),
-          Capability.contributes(Common.Capability.AppGraphBuilder, storybookGraphBuilders()),
-          Capability.contributes(Common.Capability.OperationResolver, [
+          Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
+          Capability.contributes(Capabilities.OperationResolver, [
             OperationResolver.make({
-              operation: Common.LayoutOperation.SwitchWorkspace,
+              operation: LayoutOperation.SwitchWorkspace,
               handler: ({ subject }) =>
                 Effect.gen(function* () {
-                  const registry: Registry.Registry = yield* Capability.get(Common.Capability.AtomRegistry);
+                  const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
                   registry.set(storyStateAtom, { tab: subject });
                 }),
             }),
@@ -159,7 +161,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