@dxos/plugin-navtree 0.9.1-staging.ee54ba693a → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.9.1-staging.ee54ba693a",
+  "version": "0.11.0",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,76 +16,70 @@
     "#capabilities": {
       "source": "./src/capabilities/index.ts",
       "types": "./dist/types/src/capabilities/index.d.ts",
-      "default": "./dist/lib/neutral/capabilities/index.mjs"
+      "default": "./dist/lib/capabilities.mjs"
     },
     "#components": {
       "source": "./src/components/index.ts",
       "types": "./dist/types/src/components/index.d.ts",
-      "default": "./dist/lib/neutral/components/index.mjs"
+      "default": "./dist/lib/components.mjs"
     },
     "#containers": {
       "source": "./src/containers/index.ts",
       "types": "./dist/types/src/containers/index.d.ts",
-      "default": "./dist/lib/neutral/containers/index.mjs"
+      "default": "./dist/lib/containers.mjs"
     },
     "#hooks": {
       "source": "./src/hooks/index.ts",
       "types": "./dist/types/src/hooks/index.d.ts",
-      "default": "./dist/lib/neutral/hooks/index.mjs"
+      "default": "./dist/lib/hooks.mjs"
     },
     "#meta": {
       "source": "./src/meta.ts",
       "types": "./dist/types/src/meta.d.ts",
-      "default": "./dist/lib/neutral/meta.mjs"
+      "default": "./dist/lib/meta.mjs"
     },
     "#operations": {
       "source": "./src/operations/index.ts",
       "types": "./dist/types/src/operations/index.d.ts",
-      "default": "./dist/lib/neutral/operations/index.mjs"
+      "default": "./dist/lib/operations.mjs"
     },
     "#plugin": {
-      "source": {
-        "workerd": "./src/NavTreePlugin.workerd.ts",
-        "node": "./src/NavTreePlugin.node.ts",
-        "default": "./src/NavTreePlugin.tsx"
-      },
+      "source": "./src/NavTreePlugin.tsx",
       "types": "./dist/types/src/NavTreePlugin.d.ts",
-      "workerd": "./dist/lib/neutral/NavTreePlugin.workerd.mjs",
-      "node": "./dist/lib/neutral/NavTreePlugin.node.mjs",
-      "default": "./dist/lib/neutral/NavTreePlugin.mjs"
+      "default": "./dist/lib/NavTreePlugin.mjs"
     },
     "#testing": {
       "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
-      "default": "./dist/lib/neutral/testing/index.mjs"
+      "default": "./dist/lib/testing.mjs"
     },
     "#translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "default": "./dist/lib/translations.mjs"
     },
     "#types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "default": "./dist/lib/types.mjs"
     }
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "default": "./dist/lib/neutral/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
     "./plugin": {
       "source": "./src/plugin.ts",
       "types": "./dist/types/src/plugin.d.ts",
-      "default": "./dist/lib/neutral/plugin.mjs"
+      "import": "./dist/lib/plugin.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -98,26 +92,27 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
-    "@dxos/app-graph": "0.9.1-staging.ee54ba693a",
-    "@dxos/compute": "0.9.1-staging.ee54ba693a",
-    "@dxos/debug": "0.9.1-staging.ee54ba693a",
-    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
-    "@dxos/async": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo": "0.9.1-staging.ee54ba693a",
-    "@dxos/keyboard": "0.9.1-staging.ee54ba693a",
-    "@dxos/keys": "0.9.1-staging.ee54ba693a",
-    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/log": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-deck": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-search": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-tabs": "0.9.1-staging.ee54ba693a",
-    "@dxos/util": "0.9.1-staging.ee54ba693a"
+    "@effect-atom/atom": "^0.5.3",
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/app-graph": "0.11.0",
+    "@dxos/app-toolkit": "0.11.0",
+    "@dxos/async": "0.11.0",
+    "@dxos/compute": "0.11.0",
+    "@dxos/debug": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/keyboard": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/lit-ui": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/plugin-deck": "0.11.0",
+    "@dxos/plugin-graph": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/react-ui-list": "0.11.0",
+    "@dxos/react-ui-menu": "0.11.0",
+    "@dxos/react-ui-search": "0.11.0",
+    "@dxos/react-ui-tabs": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -127,15 +122,15 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/plugin-attention": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-space": "0.9.1-staging.ee54ba693a",
-    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a"
+    "vite": "^8.1.4",
+    "@dxos/plugin-attention": "0.11.0",
+    "@dxos/plugin-client": "0.11.0",
+    "@dxos/plugin-space": "0.11.0",
+    "@dxos/plugin-testing": "0.11.0",
+    "@dxos/plugin-theme": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -143,8 +138,8 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
+    "@dxos/ui-theme": "^0.11.0",
+    "@dxos/react-ui": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -6,6 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import { ActivationEvent, ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from '@dxos/app-toolkit';
+import { AttentionEvents } from '@dxos/plugin-attention';
 import { Graph } from '@dxos/plugin-graph';
 
 import { AppGraphBuilder, Keyboard, OperationHandler, ReactSurface, State } from '#capabilities';
@@ -23,7 +24,8 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({
     id: 'state',
-    activatesOn: AppActivationEvents.LayoutReady,
+    // Wait for AttentionReady too so the ViewState Manager (the expansion persistence backend) is available.
+    activatesOn: ActivationEvent.allOf(AppActivationEvents.LayoutReady, AttentionEvents.AttentionReady),
     firesAfterActivation: [NavTreeEvents.StateReady],
     activate: State,
   }),

package/src/capabilities/nav-tree-view-state.test.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Registry } from '@effect-atom/atom';
+import { describe, test } from 'vitest';
+
+import { LocalBackend, MemoryBackend, ViewState } from '@dxos/react-ui-attention';
+
+import { navTreeOpenAspect } from './nav-tree-view-state';
+
+// Minimal in-memory Storage stand-in (no real localStorage in the test runner).
+const fakeStorage = (): Storage => {
+  const map = new Map<string, string>();
+  return {
+    get length() {
+      return map.size;
+    },
+    key: (index) => [...map.keys()][index] ?? null,
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => void map.set(key, value),
+    removeItem: (key) => void map.delete(key),
+    clear: () => map.clear(),
+  } as Storage;
+};
+
+const makeManager = (registry: Registry.Registry, storage: Storage) =>
+  new ViewState.Manager({
+    registry,
+    backends: { memory: new MemoryBackend(), local: new LocalBackend({ registry, storage }) },
+  });
+
+describe('navTreeOpenAspect', () => {
+  test('declares a local aspect that defaults to collapsed', ({ expect }) => {
+    expect(navTreeOpenAspect.key).toEqual('navtree-open');
+    expect(navTreeOpenAspect.backend).toEqual('local');
+    expect(navTreeOpenAspect.defaultValue()).toEqual({ open: false });
+  });
+
+  test('expansion persists per path and re-seeds on reload', ({ expect }) => {
+    const storage = fakeStorage();
+
+    // First session: expand two paths.
+    const first = makeManager(Registry.make(), storage);
+    first.set(navTreeOpenAspect, 'root~a', { open: true });
+    first.set(navTreeOpenAspect, 'root~b', { open: true });
+
+    // Second session (new registry + manager, same storage) mirrors a reload: the persisted paths and
+    // their `open` values are recovered via `contexts` + `get` — exactly how navtree seeds backingState.
+    const second = makeManager(Registry.make(), storage);
+    expect(second.contexts(navTreeOpenAspect).toSorted()).toEqual(['root~a', 'root~b']);
+    expect(second.get(navTreeOpenAspect, 'root~a')).toEqual({ open: true });
+    expect(second.get(navTreeOpenAspect, 'unseen')).toEqual({ open: false });
+  });
+});

package/src/capabilities/nav-tree-view-state.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { ViewState } from '@dxos/react-ui-attention/types';
+
+/**
+ * Per-path navtree expansion, persisted (localStorage) via the ViewState `local` backend keyed by
+ * tree path — replaces the hand-rolled single-blob localStorage store. Only `open` is durable; the
+ * `current` highlight is ephemeral (driven by the active layout) and never persisted.
+ */
+export const navTreeOpenAspect = ViewState.define({
+  key: 'navtree-open',
+  backend: 'local',
+  schema: Schema.Struct({ open: Schema.Boolean }),
+  defaultValue: () => ({ open: false }),
+});

package/src/capabilities/{react-surface.tsx → react-surface.ts}

@@ -3,7 +3,7 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React, { type ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
@@ -20,27 +20,26 @@ export default Capability.makeModule(() =>
       Surface.create({
         id: COMMANDS_DIALOG,
         filter: AppSurface.component<ComponentProps<typeof CommandsDialogContent>>(AppSurface.Dialog, COMMANDS_DIALOG),
-        component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
+        component: CommandsDialogContent,
+        props: ({ data: { props }, ref }) => ({ ...props, ref }),
       }),
       Surface.create({
         id: 'navigation',
         filter: Surface.makeFilter(AppSurface.Navigation),
-        component: ({ data, ref }) => (
-          <NavTreeContainer tab={data.current} popoverAnchorId={data.popoverAnchorId} ref={ref} />
-        ),
+        component: NavTreeContainer,
+        props: ({ data: { current, popoverAnchorId }, ref }) => ({ tab: current, popoverAnchorId, ref }),
       }),
       Surface.create({
         id: 'documentTitle',
         filter: Surface.makeFilter(AppSurface.DocumentTitle),
-        component: ({ data }) => (
-          <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
-        ),
+        component: NavTreeDocumentTitle,
+        props: ({ data: { subject } }) => ({ node: Node.isGraphNode(subject) ? subject : undefined }),
       }),
       Surface.create({
         id: 'searchInput',
         filter: Surface.makeFilter(AppSurface.SearchInput),
         position: Position.last,
-        component: () => <CommandsTrigger />,
+        component: CommandsTrigger,
       }),
     ]),
   ),

package/src/capabilities/state.ts

@@ -2,21 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom';
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Graph, Node } from '@dxos/plugin-graph';
 import { Path } from '@dxos/react-ui-list';
 
-import { meta } from '#meta';
 import { NavTreeCapabilities } from '#types';
 
-const KEY = `${meta.profile.key}.state.v1`;
+import { navTreeOpenAspect } from './nav-tree-view-state';
 
-/** Default item state for new entries. */
-const defaultItemState: NavTreeCapabilities.NavTreeItemState = { open: false, current: false };
+/** Default `open` value for new entries; `current` is derived from the layout when the entry is created. */
+const defaultOpen = 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;
@@ -27,41 +27,52 @@ const defaultStateEntries: [string, NavTreeCapabilities.NavTreeItemState][] = [
   ['root', { open: true, current: false }],
 ];
 
-const getInitialState = (): Map<string, NavTreeCapabilities.NavTreeItemState> => {
-  const stringified = localStorage.getItem(KEY);
-  if (!stringified) {
-    return new Map(defaultStateEntries);
-  }
-
-  try {
-    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
-    return new Map(cached.map(([key, value]) => [key, { open: value.open, current: false }]));
-  } catch {
-    return new Map(defaultStateEntries);
-  }
-};
-
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const registry = yield* Capability.get(Capabilities.AtomRegistry);
     const layoutAtom = yield* Capability.get(AppCapabilities.Layout);
+    // Persistence backend for per-path expansion (`open`); replaces the hand-rolled localStorage blob.
+    const viewState = yield* Capability.get(AttentionCapabilities.ViewState);
+
+    // Mirror of the layout's active planks. An item registers its path only on its first render, which
+    // can happen long after the layout change that made it current, so entries derive `current` from
+    // this at creation time rather than waiting for the next layout notification.
+    let activeIds: readonly string[] = registry.get(layoutAtom).active;
+
+    /** Item state for a path not seen before: `current` follows the layout, `open` starts closed. */
+    const initialItemState = (pathString: string): NavTreeCapabilities.NavTreeItemState => ({
+      open: defaultOpen,
+      current: activeIds.includes(Path.last(pathString)),
+    });
 
-    // Backing state for persistence (not reactive).
-    const backingState = getInitialState();
+    // Backing state (not reactive), seeded from the persisted `open` values; `current` is ephemeral.
+    const persistedPaths = viewState.contexts(navTreeOpenAspect);
+    const backingState: Map<string, NavTreeCapabilities.NavTreeItemState> =
+      persistedPaths.length === 0
+        ? new Map(defaultStateEntries)
+        : new Map(
+            persistedPaths.map((pathString) => [
+              pathString,
+              {
+                open: viewState.get(navTreeOpenAspect, pathString).open,
+                current: activeIds.includes(Path.last(pathString)),
+              },
+            ]),
+          );
 
     // 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,
-      ),
+      Atom.make<NavTreeCapabilities.NavTreeItemState>(
+        backingState.get(pathString) ?? initialItemState(pathString),
+      ).pipe(Atom.keepAlive),
     );
 
     const getItemAtom = (path: string[]): Atom.Atom<NavTreeCapabilities.NavTreeItemState> => {
       const pathString = Path.create(...path);
       if (!backingState.has(pathString)) {
-        backingState.set(pathString, { ...defaultItemState });
+        backingState.set(pathString, initialItemState(pathString));
       }
       return itemAtomFamily(pathString);
     };
@@ -77,18 +88,18 @@ export default Capability.makeModule(
       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())));
+      // Track every touched path so the layout subscription can find it; only `open` is durable, and
+      // top-level workspace paths are excluded (their expansion is not part of the tree model).
+      backingState.set(pathString, newValue);
+      if (key === 'open' && !isTopLevelPath(path)) {
+        viewState.set(navTreeOpenAspect, pathString, { open: next });
       }
     };
 
     // 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 removed = activeIds.filter((id) => !layout.active.includes(id));
+      activeIds = layout.active;
 
       const handleUpdate = () => {
         // Mark removed items as not current.
@@ -108,12 +119,10 @@ export default Capability.makeModule(
         });
       };
 
-      // 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.
-      // Defer so item path atoms exist and we do not setState during tree render.
-      const timeout = setTimeout(handleUpdate, 500);
-      return () => clearTimeout(timeout);
+      // Deferred only far enough to leave the layout notification (writing item atoms synchronously here
+      // would set state during the tree's render pass). Items whose path is not registered yet no longer
+      // need waiting out — they seed `current` from `activeIds` when they register.
+      queueMicrotask(handleUpdate);
     });
 
     // Once graph is ready, expand every node marked open in state so the graph has children loaded for rendering.

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Atom, type Registry } from '@effect-atom/atom-react';
+import { Atom, type Registry } from '@effect-atom/atom';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React, { useEffect, useRef } from 'react';
@@ -10,7 +10,7 @@ import { expect, userEvent, within } from 'storybook/test';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { useAtomCapability } from '@dxos/app-framework/ui';
+import { useAtomCapability, useOperationInvoker } 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';
@@ -76,7 +76,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
       <Panel.Root
         {...attentionAttrs}
         role='article'
-        classNames='is-[30rem] shrink-0 bs-full bg-base-surface border-e border-separator'
+        classNames='w-[30rem] shrink-0 h-full dx-base-surface border-e border-separator'
       >
         <StoryPlankHeading attendableId={attendableId} />
         <Panel.Content classNames='grid'>
@@ -88,7 +88,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
             <Input.Root>
               <Input.Label>Level 1 (group)</Input.Label>
             </Input.Root>
-            <div className={mx(container, 'bg-base-surface')}>
+            <div className={mx(container, 'dx-base-surface')}>
               <Input.Root>
                 <Input.Label>Level 2 (base)</Input.Label>
                 <Input.TextArea placeholder='Enter text' />
@@ -110,7 +110,7 @@ const DefaultStory = () => {
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
       <Main.Content bounce handlesFocus>
-        <div role='none' className='flex grow overflow-x-auto'>
+        <div className='flex grow overflow-x-auto'>
           <StoryPlank attendableId='space-0:object-0' />
           <StoryPlank attendableId='space-0:object-1' />
         </div>
@@ -119,6 +119,18 @@ const DefaultStory = () => {
   );
 };
 
+/** A workspace absent from the graph (a dead link, or persisted deck state after a profile switch). */
+const MISSING_WORKSPACE = 'root/B4NRQGGJ7XSDT4WMGXCTZNBLTDYIWGXNQIB6JW3AVLW3G';
+
+const UnavailableWorkspaceStory = () => {
+  const { invokePromise } = useOperationInvoker();
+  useEffect(() => {
+    void invokePromise(LayoutOperation.SwitchWorkspace, { subject: MISSING_WORKSPACE });
+  }, [invokePromise]);
+
+  return <DefaultStory />;
+};
+
 const meta = {
   title: 'plugins/plugin-navtree/components/NavTree',
   component: NavTreeContainer,
@@ -211,3 +223,12 @@ export const Default: Story = {
     await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
   },
 };
+
+export const UnavailableWorkspace: Story = {
+  render: UnavailableWorkspaceStory,
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    // Plugin startup plus the message's own render delay; allow for a slow CI runner.
+    await canvas.findByTestId('navtree.workspace.unavailable', {}, { timeout: 15000 });
+  },
+};

package/src/components/NavTree/NavTree.tsx

@@ -5,7 +5,8 @@
 import React, { forwardRef, useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
+import { Node } from '@dxos/plugin-graph';
+import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph/hooks';
 import { type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { Position } from '@dxos/util';
@@ -61,25 +62,21 @@ const useTopLevelNavItems = (root?: 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;
+      if (Node.hasDisposition(node, 'workspace')) {
+        topLevelWorkspaces.push(node);
+      } else if (Node.hasDisposition(node, 'pin-end')) {
+        outboundPinnedItems.push(node);
+      } else if (Node.hasDisposition(node, 'user-account')) {
+        userAccountItem ??= node;
       }
     }
 
     const topLevelActions = rootActions
-      .filter((action) => action.properties.disposition === 'menu')
+      .filter((action) => Node.hasDisposition(action, 'menu'))
       .toSorted((a, b) => Position.compare(a.properties, b.properties));
     const pinnedItems = [
       ...outboundPinnedItems,
-      ...rootActions.filter((action) => action.properties.disposition === 'pin-end'),
+      ...rootActions.filter((action) => Node.hasDisposition(action, 'pin-end')),
     ].toSorted((a, b) => Position.compare(a.properties, b.properties));
 
     return {

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { useActionRunner } from '@dxos/plugin-graph';
+import { useActionRunner } from '@dxos/plugin-graph/hooks';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';

package/src/components/Sidebar/L0Menu.tsx

@@ -26,7 +26,7 @@ import React, {
 
 import { type Node } from '@dxos/app-graph';
 import { DxAvatar } from '@dxos/lit-ui/react';
-import { useActionRunner } from '@dxos/plugin-graph';
+import { useActionRunner } from '@dxos/plugin-graph/hooks';
 import {
   Icon,
   IconButton,
@@ -99,7 +99,13 @@ const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
         case 'tab':
           return onTabChange?.(item);
         case 'link':
-          return onSelect?.({ item, path, current: !getItem(path).current, option: event.altKey });
+          return onSelect?.({
+            item,
+            path,
+            current: !getItem(path).current,
+            option: event.altKey,
+            shift: event.shiftKey,
+          });
       }
     },
     [item, parent, type, getItem, onSelect, onTabChange, isLg, runAction],
@@ -325,7 +331,7 @@ export const L0Menu = ({
       classNames={[
         'group/l0 absolute z-[1] inset-y-0 start-0 rounded-is',
         'grid grid-cols-[var(--dx-l0-size)] grid-rows-[var(--dx-rail-size)_1fr_min-content_var(--dx-l0-size)] dx-contain-layout',
-        'w-(--dx-l0-size) bg-l0-surface dx-app-drag pb-[env(safe-area-inset-bottom)]',
+        'w-(--dx-l0-size) dx-l0-surface dx-app-drag pb-[env(safe-area-inset-bottom)]',
         '[body[data-platform="macos"]_&]:pt-[30px]',
         '[body[data-platform="ios"]_&]:pt-[max(env(safe-area-inset-top),0.25rem)]',
       ]}