@dxos/plugin-navtree 0.8.1-staging.9eaf14f → 0.8.2-main.12df754

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',

package/src/components/NavTreeItemColumns.tsx

@@ -5,7 +5,7 @@
 import React, { Fragment, memo } from 'react';
 
 import { isAction } from '@dxos/app-graph';
-import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
 
 import { NAV_TREE_ITEM } from './NavTree';
 import { useNavTreeContext } from './NavTreeContext';
@@ -14,7 +14,7 @@ import type { NavTreeItemColumnsProps } from './types';
 import { useLoadDescendents } from '../hooks';
 import { NAVTREE_PLUGIN } from '../meta';
 
-export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
+export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
@@ -35,37 +35,39 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
   useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
 
   return (
-    <div role='none' className='contents app-no-drag'>
-      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
-        <NavTreeItemAction
-          testId={primaryAction.properties?.testId}
-          label={toLocalizedString(primaryAction.properties?.label, t)}
-          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-          parent={item}
-          monolithic={isAction(primaryAction)}
-          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
-          menuType={primaryAction.properties?.menuType}
-          caller={NAV_TREE_ITEM}
-        />
-      ) : (
-        <Treegrid.Cell />
-      )}
-      <ActionRoot>
-        {actions.length > 0 ? (
+    <DensityProvider density={density}>
+      <div role='none' className='contents app-no-drag'>
+        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
           <NavTreeItemAction
-            testId={`navtree.treeItem.actionsLevel${level}`}
-            label={t('tree item actions label')}
-            icon='ph--dots-three-vertical--regular'
+            testId={primaryAction.properties?.testId}
+            label={toLocalizedString(primaryAction.properties?.label, t)}
+            icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
             parent={item}
-            menuActions={actions}
-            menuType='dropdown'
+            monolithic={isAction(primaryAction)}
+            menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
+            menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />
         ) : (
           <Treegrid.Cell />
         )}
-      </ActionRoot>
-      {ItemEnd && <ItemEnd node={item} open={open} />}
-    </div>
+        <ActionRoot>
+          {actions.length > 0 ? (
+            <NavTreeItemAction
+              testId={`navtree.treeItem.actionsLevel${level}`}
+              label={t('tree item actions label')}
+              icon='ph--dots-three-vertical--regular'
+              parent={item}
+              menuActions={actions}
+              menuType='dropdown'
+              caller={NAV_TREE_ITEM}
+            />
+          ) : (
+            <Treegrid.Cell />
+          )}
+        </ActionRoot>
+        {ItemEnd && <ItemEnd node={item} open={open} />}
+      </div>
+    </DensityProvider>
   );
 });

package/src/components/UserAccountAvatar.tsx

@@ -27,7 +27,7 @@ export const UserAccountAvatar = (props: UserAccountAvatarProps) => {
           status={props.status ?? 'active'}
           hue={props.hue || fallbackValue.hue}
           fallback={props.emoji || fallbackValue.emoji}
-          data-testid='treeview.userAccount'
+          data-testid='treeView.userAccount'
         />
       </Avatar.Root>
     </div>

package/src/components/types.ts

@@ -5,6 +5,7 @@
 import type { FC } from 'react';
 
 import type { Node } from '@dxos/app-graph';
+import type { Density } from '@dxos/react-ui';
 import type { TreeProps } from '@dxos/react-ui-list';
 import type { MaybePromise } from '@dxos/util';
 
@@ -15,6 +16,7 @@ export type NavTreeItemColumnsProps = {
   path: string[];
   item: Node;
   open: boolean;
+  density?: Density;
 };
 
 export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
@@ -32,4 +34,6 @@ export type NavTreeContextValue = Pick<
     renderItemEnd?: FC<{ node: Node; open: boolean }>;
     popoverAnchorId?: string;
     topbar?: boolean;
+    isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
+    setAlternateTree?: (path: string[], open: boolean) => void;
   };

package/src/stories/Graph.stories.tsx

@@ -12,7 +12,7 @@ import React, { useEffect } from 'react';
 
 import { Graph, ROOT_ID, type Node } from '@dxos/app-graph';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
-import { create, type ReactiveObject } from '@dxos/live-object';
+import { live, type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-list';
@@ -49,7 +49,7 @@ const createGraph = () => {
 };
 
 const graph = createGraph();
-const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
+const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
 
 export const Default = {};
 
@@ -98,7 +98,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);
       }
@@ -107,7 +107,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/testing/generator.ts

@@ -4,7 +4,7 @@
 
 import { type NodeArg } from '@dxos/app-graph';
 import { S, TypedObject } from '@dxos/echo-schema';
-import { create, type ReactiveObject } from '@dxos/live-object';
+import { live, type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 
@@ -19,7 +19,7 @@ type ObjectDataGenerator = {
   createData: () => any;
 };
 
-type ObjectFactory<T extends ReactiveObject<any>> = {
+type ObjectFactory<T extends Live<any>> = {
   schema?: S.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
@@ -30,7 +30,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
   const schema = createSchema?.();
   return {
     schema,
-    createObject: () => (schema ? create(schema, createData()) : create(createData())),
+    createObject: () => (schema ? live(schema, createData()) : live(createData())),
   };
 };
 

package/src/translations.ts

@@ -8,6 +8,7 @@ export default [
   {
     'en-US': {
       [NAVTREE_PLUGIN]: {
+        'back label': 'Back',
         'open settings label': 'Settings',
         'open commands label': 'Search commands',
         'commands dialog title': 'Commands',

package/dist/lib/browser/chunk-4RQJXI4D.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/capabilities.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineCapability } from '@dxos/app-framework';\nimport { type ReactiveObject } from '@dxos/live-object';\n\nimport { NAVTREE_PLUGIN } from '../meta';\nimport { type NavTreeItemGraphNode } from '../types';\n\nexport namespace NavTreeCapabilities {\n  export const State = defineCapability<{\n    state: Map<string, ReactiveObject<{ open: boolean; current: boolean }>>;\n    getItem: (path: string[]) => ReactiveObject<{ open: boolean; current: boolean }>;\n    setItem: (path: string[], key: 'open' | 'current', next: boolean) => void;\n    isOpen: (path: string[], item: NavTreeItemGraphNode) => boolean;\n    isCurrent: (path: string[], item: NavTreeItemGraphNode) => boolean;\n  }>(`${NAVTREE_PLUGIN}/capability/state`);\n}\n"],
-  "mappings": ";;;;;AAIA,SAASA,wBAAwB;;UAMhBC,sBAAAA;uBACFC,QAAQC,iBAMlB,GAAGC,cAAAA,mBAAiC;AACzC,GARiBH,wBAAAA,sBAAAA,CAAAA,EAAAA;",
-  "names": ["defineCapability", "NavTreeCapabilities", "State", "defineCapability", "NAVTREE_PLUGIN"]
-}