@dxos/plugin-navtree 0.8.4-main.3f58842 → 0.8.4-main.67995b8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.3f58842",
+  "version": "0.8.4-main.67995b8",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,7 +11,8 @@
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "browser": "./dist/lib/browser/index.mjs",
+      "source": "./src/index.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -31,29 +32,29 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "effect": "3.17.0",
-    "@dxos/app-graph": "0.8.4-main.3f58842",
-    "@dxos/app-framework": "0.8.4-main.3f58842",
-    "@dxos/async": "0.8.4-main.3f58842",
-    "@dxos/debug": "0.8.4-main.3f58842",
-    "@dxos/echo": "0.8.4-main.3f58842",
-    "@dxos/invariant": "0.8.4-main.3f58842",
-    "@dxos/echo-schema": "0.8.4-main.3f58842",
-    "@dxos/keyboard": "0.8.4-main.3f58842",
-    "@dxos/live-object": "0.8.4-main.3f58842",
-    "@dxos/local-storage": "0.8.4-main.3f58842",
-    "@dxos/log": "0.8.4-main.3f58842",
-    "@dxos/plugin-deck": "0.8.4-main.3f58842",
-    "@dxos/plugin-graph": "0.8.4-main.3f58842",
-    "@dxos/plugin-observability": "0.8.4-main.3f58842",
-    "@dxos/protocols": "0.8.4-main.3f58842",
-    "@dxos/react-client": "0.8.4-main.3f58842",
-    "@dxos/react-ui-attention": "0.8.4-main.3f58842",
-    "@dxos/react-ui-list": "0.8.4-main.3f58842",
-    "@dxos/react-ui-menu": "0.8.4-main.3f58842",
-    "@dxos/react-ui-searchlist": "0.8.4-main.3f58842",
-    "@dxos/react-ui-stack": "0.8.4-main.3f58842",
-    "@dxos/util": "0.8.4-main.3f58842",
-    "@dxos/react-ui-tabs": "0.8.4-main.3f58842"
+    "@dxos/app-framework": "0.8.4-main.67995b8",
+    "@dxos/app-graph": "0.8.4-main.67995b8",
+    "@dxos/async": "0.8.4-main.67995b8",
+    "@dxos/debug": "0.8.4-main.67995b8",
+    "@dxos/echo": "0.8.4-main.67995b8",
+    "@dxos/echo-schema": "0.8.4-main.67995b8",
+    "@dxos/invariant": "0.8.4-main.67995b8",
+    "@dxos/live-object": "0.8.4-main.67995b8",
+    "@dxos/local-storage": "0.8.4-main.67995b8",
+    "@dxos/keyboard": "0.8.4-main.67995b8",
+    "@dxos/log": "0.8.4-main.67995b8",
+    "@dxos/plugin-deck": "0.8.4-main.67995b8",
+    "@dxos/plugin-graph": "0.8.4-main.67995b8",
+    "@dxos/plugin-observability": "0.8.4-main.67995b8",
+    "@dxos/protocols": "0.8.4-main.67995b8",
+    "@dxos/react-ui-attention": "0.8.4-main.67995b8",
+    "@dxos/react-ui-list": "0.8.4-main.67995b8",
+    "@dxos/react-client": "0.8.4-main.67995b8",
+    "@dxos/react-ui-menu": "0.8.4-main.67995b8",
+    "@dxos/react-ui-searchlist": "0.8.4-main.67995b8",
+    "@dxos/react-ui-stack": "0.8.4-main.67995b8",
+    "@dxos/react-ui-tabs": "0.8.4-main.67995b8",
+    "@dxos/util": "0.8.4-main.67995b8"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
@@ -63,16 +64,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.3f58842",
-    "@dxos/plugin-attention": "0.8.4-main.3f58842",
-    "@dxos/plugin-client": "0.8.4-main.3f58842",
-    "@dxos/plugin-space": "0.8.4-main.3f58842",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.3f58842",
-    "@dxos/plugin-theme": "0.8.4-main.3f58842",
-    "@dxos/random": "0.8.4-main.3f58842",
-    "@dxos/react-ui": "0.8.4-main.3f58842",
-    "@dxos/react-ui-theme": "0.8.4-main.3f58842",
-    "@dxos/storybook-utils": "0.8.4-main.3f58842"
+    "@dxos/echo-signals": "0.8.4-main.67995b8",
+    "@dxos/plugin-client": "0.8.4-main.67995b8",
+    "@dxos/plugin-attention": "0.8.4-main.67995b8",
+    "@dxos/plugin-space": "0.8.4-main.67995b8",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.67995b8",
+    "@dxos/random": "0.8.4-main.67995b8",
+    "@dxos/react-ui": "0.8.4-main.67995b8",
+    "@dxos/react-ui-theme": "0.8.4-main.67995b8",
+    "@dxos/storybook-utils": "0.8.4-main.67995b8",
+    "@dxos/plugin-theme": "0.8.4-main.67995b8"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -80,8 +81,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.3f58842",
-    "@dxos/react-ui": "0.8.4-main.3f58842"
+    "@dxos/react-ui": "0.8.4-main.67995b8",
+    "@dxos/react-ui-theme": "0.8.4-main.67995b8"
   },
   "publishConfig": {
     "access": "public"

package/src/components/NavTree/NavTree.tsx

@@ -10,11 +10,11 @@ import { Tabs } from '@dxos/react-ui-tabs';
 import { useLoadDescendents } from '../../hooks';
 import { type NavTreeItemGraphNode } from '../../types';
 import { useNavTreeContext } from '../NavTreeContext';
-import { L0Menu, L1Panels, type L1PanelsProps } from '../Sidebar';
+import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
 
 export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   const { tab, useItems, onBack } = useNavTreeContext();
@@ -56,7 +56,7 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
         path={path}
         parent={root}
       />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
+      <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
 };

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -12,16 +12,15 @@ import { useLoadDescendents } from '../../hooks';
 import { NAVTREE_PLUGIN } from '../../meta';
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
-import type { NavTreeItemColumnsProps } from '../types';
+import { type NavTreeItemColumnsProps } from '../types';
 
 export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-
   const { actions: _actions, groupedActions } = getActions(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
     a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );
 

package/src/components/Sidebar/L1Panel.tsx

@@ -5,68 +5,45 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { Button, type ButtonProps, Icon, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { 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 { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
 
-import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
-import { l0ItemType } from '../../util';
+import { meta } from '../../meta';
 import { useNavTreeContext } from '../NavTreeContext';
 import { NavTreeItemColumns } from '../NavTreeItem';
 
-const headingBackButtonLabel = 'inset-0 min-is-0 truncate flex items-center pis-2';
-
-const TitleButton = ({ title, onClick }: { title: string } & Pick<ButtonProps, 'onClick'>) => {
-  return (
-    <Button
-      variant='ghost'
-      classNames='pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal'
-      onClick={onClick}
-    >
-      <Icon icon='ph--caret-left--bold' size={3} />
-      <span className={mx(headingBackButtonLabel)}>{title}</span>
-    </Button>
-  );
-};
-
 export type L1PanelProps = {
   open?: boolean;
-  item: Node<any>;
   path: string[];
+  item: Node<any>;
   currentItemId: string;
   onBack?: () => void;
 };
 
-const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+/**
+ * Space or settings panel.
+ */
+export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
+  const { t } = useTranslation(meta.id);
+  const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
+  // NOTE(burdon): I'm very uneasy about this pattern of declaring hooks as context props.
+  const { useItems } = navTreeContext;
+  const title = toLocalizedString(item.properties.label, t);
 
   // TODO(wittjosiah): Support multiple alternate trees.
-  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  const alternateTree = useItems(item, { disposition: '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 useAlternateItems = useCallback(
     (node?: Node, { disposition }: { disposition?: string } = {}) => {
       // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
-      return navTreeContext.useItems(node, { disposition, sort: node?.id === alternateTree.id });
+      return useItems(node, { disposition, sort: node?.id === alternateTree.id });
     },
-    [navTreeContext, alternateTree],
+    [alternateTree, useItems],
   );
 
-  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}
@@ -83,26 +60,7 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
     >
       {item.id === currentItemId && (
         <>
-          <h2 className='flex items-center border-be border-subduedSeparator app-drag pli-1 density-coarse'>
-            {backCapable ? (
-              <TitleButton title={title} onClick={handleBack} />
-            ) : (
-              <span className='flex-1 truncate min-is-0 pis-6'>{title}</span>
-            )}
-            {alternateTree && !isAlternate && (
-              <IconButton
-                variant='ghost'
-                classNames={['shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1']}
-                iconOnly
-                size={5}
-                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>
+          <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
           <div role='none' className='overflow-y-auto'>
             {isAlternate ? (
               <Tree
@@ -134,41 +92,63 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
   );
 };
 
-const L1PanelCollection = ({ item, path, ...props }: L1PanelProps) => {
-  const { useItems } = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = useItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  return (
-    <>
-      {collectionItems
-        .filter((item) => l0ItemType(item) === 'tab')
-        .map((item) => (
-          <L1Panel key={item.id} item={item} path={groupPath} {...props} />
-        ))}
-    </>
-  );
-};
+/**
+ * Header row.
+ */
+const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
+  const { t } = useTranslation(meta.id);
+  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const title = toLocalizedString(item.properties.label, t);
 
-export type L1PanelsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
-  topLevelItems: Node<any>[];
-  path: string[];
-};
+  // TODO(wittjosiah): Support multiple alternate trees.
+  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
+  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+  const backCapable = item.id.startsWith('!') || isAlternate;
+
+  const handleOpen = useCallback(() => {
+    setAlternateTree?.(alternatePath, true);
+  }, [alternatePath, setAlternateTree]);
+
+  const handleBack = useCallback(() => {
+    if (isAlternate) {
+      setAlternateTree?.(alternatePath, false);
+    } else {
+      onBack?.();
+    }
+  }, [isAlternate, alternatePath, setAlternateTree, onBack]);
 
-export const L1Panels = ({ topLevelItems, onBack, ...props }: L1PanelsProps) => {
+  // TODO(burdon): Reuse same grid as tree?
   return (
-    <>
-      {topLevelItems.map((item) => {
-        const type = l0ItemType(item);
-        switch (type) {
-          case 'collection':
-            return <L1PanelCollection key={item.id} item={item} {...props} />;
-          case 'tab':
-            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
-          default:
-            return null;
-        }
-      })}
-    </>
+    <div className='flex is-full items-center border-be border-subduedSeparator app-drag density-coarse'>
+      <div className='is-6' />
+      <h2 className='flex-1 truncate min-is-0'>{title}</h2>
+      <div>
+        {(backCapable && (
+          <IconButton
+            variant='ghost'
+            icon='ph--arrow-u-down-left--regular'
+            iconOnly
+            size={5}
+            label={t('button back')}
+            classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+            onClick={handleBack}
+          />
+        )) ||
+          (alternateTree && !isAlternate && (
+            <IconButton
+              data-testid='treeView.alternateTreeButton'
+              variant='ghost'
+              icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+              iconOnly
+              size={5}
+              label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
+              classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+              onClick={handleOpen}
+            />
+          )) || <div />}
+      </div>
+      <NavTreeItemColumns open path={path} item={item} density='coarse' />
+    </div>
   );
 };

package/src/components/Sidebar/L1Tabs.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+
+import { useLoadDescendents } from '../../hooks';
+import { l0ItemType } from '../../util';
+import { useNavTreeContext } from '../NavTreeContext';
+import { L1Panel, type L1PanelProps } from './L1Panel';
+
+export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
+  path: string[];
+  topLevelItems: Node<any>[];
+};
+
+/**
+ * Each space is an L1 tab.
+ */
+export const L1Tabs = ({ topLevelItems, onBack, ...props }: L1TabsProps) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'tab':
+            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} {...props} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};
+
+/**
+ *
+ */
+const L1PanelCollection = ({ item, path, ...props }: L1PanelProps) => {
+  const { useItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = useItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  return (
+    <>
+      {collectionItems
+        .filter((item) => l0ItemType(item) === 'tab')
+        .map((item) => (
+          <L1Panel key={item.id} item={item} path={groupPath} {...props} />
+        ))}
+    </>
+  );
+};

package/src/components/Sidebar/index.ts

@@ -4,3 +4,4 @@
 
 export * from './L0Menu';
 export * from './L1Panel';
+export * from './L1Tabs';

package/src/translations.ts

@@ -18,6 +18,7 @@ export const translations = [
         'node actions menu invoker label': 'More options',
         'tree item actions label': 'More actions',
         'empty branch message': ' ',
+        'button back': 'Back to Space',
       },
     },
   },