@dxos/plugin-navtree 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/src/components/L1Panels.tsx

@@ -2,15 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useLayout } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
-import { Button, type ButtonProps, Icon, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Button, Icon, 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';
@@ -18,78 +17,12 @@ 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;
-};
-
-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>
-  );
-};
+export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
 
 const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
   const layout = useLayout();
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const 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}
@@ -99,56 +32,38 @@ 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 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 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>
           <div role='none' className='overflow-y-auto'>
-            {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}
-              />
-            )}
+            <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 { live, type Live } from '@dxos/live-object';
+import { create, type ReactiveObject } 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 = live<NodeArg<any>>(createTree());
-const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
+const tree = create<NodeArg<any>>(createTree());
+const state = new Map<string, ReactiveObject<{ 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) ?? live({ open: false, current: false });
+      const value = state.get(path) ?? create({ 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) ?? live({ open: false, current: false });
+      const value = state.get(path) ?? create({ 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, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
@@ -68,10 +68,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
-            if (
-              !disposition &&
-              (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')
-            ) {
+            if (node.properties.disposition === 'hidden') {
               return false;
             } else if (!disposition) {
               const action = isAction(node);
@@ -265,13 +262,6 @@ 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,
@@ -289,8 +279,6 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       onOpenChange,
       canDrop,
       onSelect: handleSelect,
-      isAlternateTree,
-      setAlternateTree,
     }),
     [
       tab,
@@ -308,8 +296,6 @@ 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, useDensityContext } from '@dxos/react-ui';
+import { useTranslation, toLocalizedString, IconButton } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
@@ -23,14 +23,10 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
 
 const fallbackIcon = 'ph--placeholder--regular';
 
-const fineActionButtonProps = {
+const actionButtonProps = {
   size: 4 as const,
   density: 'fine' as const,
 };
-const coarseActionButtonProps = {
-  size: 5 as const,
-  density: 'coarse' as const,
-};
 
 export const NavTreeItemActionDropdownMenu = ({
   label,
@@ -41,13 +37,12 @@ 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
-            {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+            {...actionButtonProps}
             classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
             variant='ghost'
             icon={icon ?? fallbackIcon}
@@ -68,10 +63,9 @@ export const NavTreeItemMonolithicAction = ({
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
-  const density = useDensityContext();
   return (
     <IconButton
-      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+      {...actionButtonProps}
       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 { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { 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, density = 'fine' }: NavTreeItemColumnsProps) => {
+export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
@@ -35,39 +35,37 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
   useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
 
   return (
-    <DensityProvider density={density}>
-      <div role='none' className='contents app-no-drag'>
-        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+    <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 ? (
           <NavTreeItemAction
-            testId={primaryAction.properties?.testId}
-            label={toLocalizedString(primaryAction.properties?.label, t)}
-            icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+            testId={`navtree.treeItem.actionsLevel${level}`}
+            label={t('tree item actions label')}
+            icon='ph--dots-three-vertical--regular'
             parent={item}
-            monolithic={isAction(primaryAction)}
-            menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
-            menuType={primaryAction.properties?.menuType}
+            menuActions={actions}
+            menuType='dropdown'
             caller={NAV_TREE_ITEM}
           />
         ) : (
           <Treegrid.Cell />
         )}
-        <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>
+      </ActionRoot>
+      {ItemEnd && <ItemEnd node={item} open={open} />}
+    </div>
   );
 });

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,7 +5,6 @@
 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';
 
@@ -16,7 +15,6 @@ export type NavTreeItemColumnsProps = {
   path: string[];
   item: Node;
   open: boolean;
-  density?: Density;
 };
 
 export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
@@ -34,6 +32,4 @@ 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 { live, type Live } from '@dxos/live-object';
+import { create, type ReactiveObject } 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, Live<{ open: boolean; current: boolean }>>();
+const state = new Map<string, ReactiveObject<{ 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) ?? live({ open: false, current: false });
+      const value = state.get(path) ?? create({ 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) ?? live({ open: false, current: false });
+      const value = state.get(path) ?? create({ 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 { live, type Live } from '@dxos/live-object';
+import { create, type ReactiveObject } 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 Live<any>> = {
+type ObjectFactory<T extends ReactiveObject<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 ? live(schema, createData()) : live(createData())),
+    createObject: () => (schema ? create(schema, createData()) : create(createData())),
   };
 };
 

package/src/translations.ts

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