@dxos/plugin-navtree 0.8.1 → 0.8.2-main.2f9c567

package/dist/types/src/testing/generator.d.ts

@@ -1,15 +1,15 @@
-import { S } from '@dxos/echo-schema';
-import { type ReactiveObject } from '@dxos/live-object';
+import { Schema } from 'effect';
+import { type Live } from '@dxos/live-object';
 export type TestItem = {
     id: string;
     type: string;
 } & Record<string, any>;
 type ObjectDataGenerator = {
-    createSchema?: () => S.Schema.AnyNoContext;
+    createSchema?: () => Schema.Schema.AnyNoContext;
     createData: () => any;
 };
-type ObjectFactory<T extends ReactiveObject<any>> = {
-    schema?: S.Schema.AnyNoContext;
+type ObjectFactory<T extends Live<any>> = {
+    schema?: Schema.Schema.AnyNoContext;
     createObject: () => T;
 };
 type ObjectFactoryMap = {
@@ -29,7 +29,7 @@ export declare class TestObjectGenerator {
         types?: string[];
         factories?: ObjectFactoryMap;
     });
-    get schema(): S.Schema.AnyNoContext[];
+    get schema(): Schema.Schema.AnyNoContext[];
     createObject({ types }?: {
         types?: string[];
     }): any;

package/dist/types/src/testing/generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQhE,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IAC3C,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,IAAI;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CAgCpE,CAAC;AAEF;;GAEG;AACH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,CAEpC;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE;AAeD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EtB,CAAC"}
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIhC,OAAO,EAAQ,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAQpD,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;IAChD,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CAgCpE,CAAC;AAEF;;GAEG;AACH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,CAEzC;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE;AAeD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EtB,CAAC"}

package/dist/types/src/translations.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     'en-US': {
         "dxos.org/plugin/navtree": {
+            'back label': string;
             'open settings label': string;
             'open commands label': string;
             'commands dialog title': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAMA,wBAcE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,wBAeE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.1",
+  "version": "0.8.2-main.2f9c567",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,29 +29,30 @@
     "@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.1",
-    "@dxos/app-graph": "0.8.1",
-    "@dxos/async": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/debug": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/keyboard": "0.8.1",
-    "@dxos/local-storage": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/plugin-deck": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/plugin-observability": "0.8.1",
-    "@dxos/plugin-theme": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/protocols": "0.8.1",
-    "@dxos/react-ui-list": "0.8.1",
-    "@dxos/react-ui-menu": "0.8.1",
-    "@dxos/react-ui-searchlist": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/react-ui-tabs": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "effect": "^3.13.3",
+    "@dxos/app-framework": "0.8.2-main.2f9c567",
+    "@dxos/app-graph": "0.8.2-main.2f9c567",
+    "@dxos/debug": "0.8.2-main.2f9c567",
+    "@dxos/echo-schema": "0.8.2-main.2f9c567",
+    "@dxos/async": "0.8.2-main.2f9c567",
+    "@dxos/invariant": "0.8.2-main.2f9c567",
+    "@dxos/keyboard": "0.8.2-main.2f9c567",
+    "@dxos/live-object": "0.8.2-main.2f9c567",
+    "@dxos/local-storage": "0.8.2-main.2f9c567",
+    "@dxos/log": "0.8.2-main.2f9c567",
+    "@dxos/plugin-client": "0.8.2-main.2f9c567",
+    "@dxos/plugin-observability": "0.8.2-main.2f9c567",
+    "@dxos/plugin-deck": "0.8.2-main.2f9c567",
+    "@dxos/plugin-theme": "0.8.2-main.2f9c567",
+    "@dxos/protocols": "0.8.2-main.2f9c567",
+    "@dxos/plugin-graph": "0.8.2-main.2f9c567",
+    "@dxos/react-client": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-list": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-menu": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-stack": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-searchlist": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-tabs": "0.8.2-main.2f9c567",
+    "@dxos/util": "0.8.2-main.2f9c567"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -60,18 +61,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.1",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/echo-signals": "0.8.2-main.2f9c567",
+    "@dxos/random": "0.8.2-main.2f9c567",
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/storybook-utils": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/capabilities.ts

@@ -3,17 +3,18 @@
 //
 
 import { defineCapability } from '@dxos/app-framework';
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 
 import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
 
 export namespace NavTreeCapabilities {
   export const State = defineCapability<{
-    state: Map<string, ReactiveObject<{ open: boolean; current: boolean }>>;
-    getItem: (path: string[]) => ReactiveObject<{ open: boolean; current: boolean }>;
-    setItem: (path: string[], key: 'open' | 'current', next: boolean) => void;
+    state: Map<string, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>;
+    getItem: (path: string[]) => Live<{ open: boolean; current: boolean; alternateTree?: boolean }>;
+    setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;
     isOpen: (path: string[], item: NavTreeItemGraphNode) => boolean;
     isCurrent: (path: string[], item: NavTreeItemGraphNode) => boolean;
+    isAlternateTree: (path: string[], item: NavTreeItemGraphNode) => boolean;
   }>(`${NAVTREE_PLUGIN}/capability/state`);
 }

package/src/capabilities/intent-resolver.ts

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Schema } from 'effect';
+
 import { contributes, type PluginsContext, Capabilities, createResolver, LayoutAction } from '@dxos/app-framework';
-import { S } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 
 import { NavTreeCapabilities } from './capabilities';
@@ -13,8 +14,8 @@ export default (context: PluginsContext) =>
     Capabilities.IntentResolver,
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Expose.fields.input> =>
-        S.is(LayoutAction.Expose.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Expose.fields.input> =>
+        Schema.is(LayoutAction.Expose.fields.input)(data),
       resolve: async ({ subject }) => {
         const { graph } = context.requestCapability(Capabilities.AppGraph);
         const { getItem, setItem } = context.requestCapability(NavTreeCapabilities.State);

package/src/capabilities/state.ts

@@ -5,13 +5,13 @@
 import { effect } from '@preact/signals-core';
 
 import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
-import { type ReactiveObject, create } from '@dxos/live-object';
+import { type Live, live } from '@dxos/live-object';
 import { Path } from '@dxos/react-ui-list';
 
 import { NavTreeCapabilities } from './capabilities';
 import { NAVTREE_PLUGIN } from '../meta';
 
-const KEY = `${NAVTREE_PLUGIN}/state`;
+const KEY = `${NAVTREE_PLUGIN}/state/v1`;
 
 const getInitialState = () => {
   const stringified = localStorage.getItem(KEY);
@@ -24,11 +24,11 @@ const getInitialState = () => {
     return cached.map(
       ([key, value]): [
         string,
-        ReactiveObject<{
+        Live<{
           open: boolean;
           current: boolean;
         }>,
-      ] => [key, create({ open: value.open, current: false })],
+      ] => [key, live({ open: value.open, current: false })],
     );
   } catch {}
 };
@@ -36,22 +36,22 @@ const getInitialState = () => {
 export default (context: PluginsContext) => {
   const layout = context.requestCapability(Capabilities.Layout);
 
-  // TODO(wittjosiah): This currently needs to be not a ReactiveObject at the root.
-  //   If it is a ReactiveObject then React errors when initializing new paths because of state change during render.
-  //   Ideally this could be a ReactiveObject but be able to access and update the root level without breaking render.
+  // 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, ReactiveObject<{ open: boolean; current: boolean }>>(
+  const state = new Map<string, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>(
     getInitialState() ?? [
       // TODO(thure): Initialize these dynamically.
-      ['root', create({ open: true, current: false })],
-      ['root~dxos.org/plugin/space-spaces', create({ open: true, current: false })],
-      ['root~dxos.org/plugin/files', create({ open: true, current: false })],
+      ['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) ?? create({ open: false, current: false });
+    const value = state.get(path) ?? live({ open: false, current: false, alternateTree: false });
     if (!state.has(path)) {
       state.set(path, value);
     }
@@ -59,7 +59,7 @@ export default (context: PluginsContext) => {
     return value;
   };
 
-  const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+  const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => {
     const value = getItem(path);
     value[key] = next;
 
@@ -68,6 +68,10 @@ export default (context: PluginsContext) => {
 
   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(() => {
@@ -93,5 +97,7 @@ export default (context: PluginsContext) => {
     });
   });
 
-  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent }, () => unsubscribe());
+  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent, isAlternateTree }, () =>
+    unsubscribe(),
+  );
 };

package/src/components/L1Panels.tsx

@@ -2,14 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { useLayout } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
-import { Button, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Button, type ButtonProps, Icon, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+import { byPosition } from '@dxos/util';
 
 import { useNavTreeContext } from './NavTreeContext';
 import { NavTreeItemColumns } from './NavTreeItemColumns';
@@ -17,12 +18,78 @@ import { useLoadDescendents } from '../hooks';
 import { NAVTREE_PLUGIN } from '../meta';
 import { l0ItemType } from '../util';
 
-export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
+export type L1PanelProps = {
+  item: Node<any>;
+  path: string[];
+  currentItemId: string;
+  onBack?: () => void;
+};
+
+const headingBackButtonLabel =
+  'absolute inset-0 min-is-0 truncate flex items-center pis-6 transition-[transform,opacity] ease-in-out duration-200';
+
+const HeadingBackButton = ({ title, onClick }: { title: string } & Pick<ButtonProps, 'onClick'>) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  return (
+    <Button
+      variant='ghost'
+      classNames='pli-1 flex-1 relative group text-start justify-start bs-[--rail-action] font-normal'
+      onClick={onClick}
+    >
+      <Icon icon='ph--caret-left--bold' size={3} />
+      <span
+        className={mx(
+          headingBackButtonLabel,
+          'translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100',
+        )}
+      >
+        {t('back label')}
+      </span>
+      <span
+        className={mx(
+          headingBackButtonLabel,
+          'translate-y-0 opacity-100 group-hover:-translate-y-2 group-hover:opacity-0 group-focus:-translate-y-2 group-focus:opacity-0',
+        )}
+      >
+        {title}
+      </span>
+    </Button>
+  );
+};
 
 const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
   const layout = useLayout();
-  const navTreeContext = useNavTreeContext();
+  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
   const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  // TODO(wittjosiah): Support multiple alternate trees.
+  const alternateTree = navTreeContext.getItems(item, 'alternate-tree')[0];
+  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
+  const handleOpen = useCallback(() => setAlternateTree?.(alternatePath, true), [alternatePath, setAlternateTree]);
+  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+  const alternateGetItems = useCallback(
+    (node?: Node, disposition?: string) => {
+      const items = navTreeContext.getItems(node, disposition);
+      if (node === alternateTree) {
+        // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
+        return items.toSorted((a, b) => byPosition(a.properties, b.properties));
+      }
+      return items;
+    },
+    [navTreeContext, alternateTree],
+  );
+
+  const handleBack = useCallback(() => {
+    if (isAlternate) {
+      setAlternateTree?.(alternatePath, false);
+    } else {
+      onBack?.();
+    }
+  }, [isAlternate, onBack, alternatePath, setAlternateTree]);
+
+  const title = toLocalizedString(item.properties.label, t);
+  const backCapable = item.id.startsWith('!') || isAlternate;
+
   return (
     <Tabs.Tabpanel
       key={item.id}
@@ -32,38 +99,56 @@ const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
         item.id === currentItemId && 'grid',
       ]}
       tabIndex={-1}
+      aria-label={title}
       {...(!layout.sidebarOpen && { inert: 'true' })}
     >
       {item.id === currentItemId && (
         <>
-          <h2 className='flex items-center border-be border-separator app-drag'>
-            <Button
-              variant='ghost'
-              density='fine'
-              classNames={mx(
-                'is-6 pli-0 dx-focus-ring-inset',
-                !item.id.startsWith('!') && 'invisible',
-                hoverableControlItem,
-                hoverableOpenControlItem,
-              )}
-              onClick={onBack}
-            >
-              <Icon icon='ph--caret-left--regular' size={3} />
-            </Button>
-            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
-            <NavTreeItemColumns path={path} item={item} open />
+          <h2 className='flex items-center border-be border-separator app-drag pis-1'>
+            {backCapable ? (
+              <HeadingBackButton title={title} onClick={handleBack} />
+            ) : (
+              <span className='flex-1 truncate min-is-0 pis-6'>{title}</span>
+            )}
+            {alternateTree && !isAlternate && (
+              <IconButton
+                variant='ghost'
+                classNames={mx('shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1')}
+                iconOnly
+                size={5}
+                density='coarse'
+                icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+                label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
+                data-testid='treeView.alternateTreeButton'
+                onClick={handleOpen}
+              />
+            )}
+            <NavTreeItemColumns path={path} item={item} open density='coarse' />
           </h2>
           <div role='none' className='overflow-y-auto'>
-            <Tree
-              {...navTreeContext}
-              id={item.id}
-              root={item}
-              path={path}
-              levelOffset={5}
-              draggable
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              renderColumns={NavTreeItemColumns}
-            />
+            {isAlternate ? (
+              <Tree
+                {...navTreeContext}
+                getItems={alternateGetItems}
+                id={alternateTree.id}
+                root={alternateTree}
+                path={alternatePath}
+                levelOffset={5}
+                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+                renderColumns={NavTreeItemColumns}
+              />
+            ) : (
+              <Tree
+                {...navTreeContext}
+                id={item.id}
+                root={item}
+                path={path}
+                levelOffset={5}
+                draggable
+                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+                renderColumns={NavTreeItemColumns}
+              />
+            )}
           </div>
         </>
       )}

package/src/components/NavTree.stories.tsx

@@ -10,7 +10,7 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect } from 'react';
 
 import { isActionLike, type NodeArg } from '@dxos/app-graph';
-import { create, type ReactiveObject } from '@dxos/live-object';
+import { live, type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { isTreeData, type TreeData } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-list';
@@ -21,8 +21,8 @@ import { createTree, updateState } from '../testing';
 
 faker.seed(1234);
 
-const tree = create<NodeArg<any>>(createTree());
-const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
+const tree = live<NodeArg<any>>(createTree());
+const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
 
 const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/NavTree',
@@ -73,7 +73,7 @@ const meta: Meta<typeof StorybookNavTree> = {
     }),
     isOpen: (_path: string[]) => {
       const path = Path.create(..._path);
-      const value = state.get(path) ?? create({ open: false, current: false });
+      const value = state.get(path) ?? live({ open: false, current: false });
       if (!state.has(path)) {
         state.set(path, value);
       }
@@ -82,7 +82,7 @@ const meta: Meta<typeof StorybookNavTree> = {
     },
     isCurrent: (_path: string[]) => {
       const path = Path.create(..._path);
-      const value = state.get(path) ?? create({ open: false, current: false });
+      const value = state.get(path) ?? live({ open: false, current: false });
       if (!state.has(path)) {
         state.set(path, value);
       }

package/src/components/NavTreeContainer.tsx

@@ -59,7 +59,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
   const layout = useLayout();
-  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
+  const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
@@ -68,7 +68,10 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
-            if (node.properties.disposition === 'hidden') {
+            if (
+              !disposition &&
+              (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')
+            ) {
               return false;
             } else if (!disposition) {
               const action = isAction(node);
@@ -262,6 +265,13 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     });
   }, [graph]);
 
+  const setAlternateTree = useCallback(
+    (path: string[], open: boolean) => {
+      setItem(path, 'alternateTree', open);
+    },
+    [setItem],
+  );
+
   const navTreeContextValue = useMemo(
     () => ({
       tab,
@@ -279,6 +289,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       onOpenChange,
       canDrop,
       onSelect: handleSelect,
+      isAlternateTree,
+      setAlternateTree,
     }),
     [
       tab,
@@ -296,6 +308,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       onOpenChange,
       canDrop,
       handleSelect,
+      isAlternateTree,
+      setAlternateTree,
     ],
   );
 

package/src/components/NavTreeItemAction.tsx

@@ -5,7 +5,7 @@
 import React, { type MutableRefObject, useRef } from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton } from '@dxos/react-ui';
+import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
@@ -23,10 +23,14 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
 
 const fallbackIcon = 'ph--placeholder--regular';
 
-const actionButtonProps = {
+const fineActionButtonProps = {
   size: 4 as const,
   density: 'fine' as const,
 };
+const coarseActionButtonProps = {
+  size: 5 as const,
+  density: 'coarse' as const,
+};
 
 export const NavTreeItemActionDropdownMenu = ({
   label,
@@ -37,12 +41,13 @@ export const NavTreeItemActionDropdownMenu = ({
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef<boolean>(false);
+  const density = useDensityContext();
   return (
     <MenuProvider onAction={onAction}>
       <DropdownMenu.Root items={menuActions as MenuItem[]} suppressNextTooltip={suppressNextTooltip}>
         <DropdownMenu.Trigger asChild>
           <IconButton
-            {...actionButtonProps}
+            {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
             classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
             variant='ghost'
             icon={icon ?? fallbackIcon}
@@ -63,9 +68,10 @@ export const NavTreeItemMonolithicAction = ({
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
+  const density = useDensityContext();
   return (
     <IconButton
-      {...actionButtonProps}
+      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
       variant={variant}
       classNames={mx(
         'shrink-0',