@dxos/plugin-navtree 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

package/src/components/NavTreeContainer.tsx

@@ -5,19 +5,28 @@
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { untracked } from '@preact/signals-core';
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
 
-import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher, Surface } from '@dxos/app-framework';
+import {
+  createIntent,
+  LayoutAction,
+  Surface,
+  useAppGraph,
+  useCapability,
+  useIntentDispatcher,
+  useLayout,
+} from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
-import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { useMediaQuery } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
-import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
-import { NAVTREE_PLUGIN } from '../meta';
+import { NAV_TREE_ITEM, NavTree } from './NavTree';
+import { NavTreeContext } from './NavTreeContext';
+import { type NavTreeContextValue } from './types';
+import { NavTreeCapabilities } from '../capabilities';
 import { type NavTreeItemGraphNode } from '../types';
 import {
   expandActions,
@@ -26,6 +35,7 @@ import {
   getChildren,
   getParent,
   resolveMigrationOperation,
+  expandChildrenAndActions,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -37,24 +47,29 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
-} & Pick<NavTreeProps, 'isOpen' | 'isCurrent' | 'onOpenChange'>;
+  topbar?: boolean;
+} & Pick<NavTreeContextValue, 'tab'>;
 
-export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
-  const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
+export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
+  const layout = useLayout();
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
   const getItems = useCallback(
-    (node?: Node) => {
+    (node?: Node, disposition?: string) => {
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
             const action = isActionLike(node);
-            const disposition = node.properties.disposition;
-            return !action || (action && disposition === 'item');
+            if (!disposition) {
+              return !action || node.properties.disposition === 'item';
+            }
+
+            return node.properties.disposition === disposition;
           });
         },
       });
@@ -96,6 +111,33 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     [graph],
   );
 
+  const onOpenChange = useCallback(
+    ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
+      // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
+      setItem(path, 'open', open);
+
+      if (graph) {
+        const node = graph.findNode(id);
+        return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
+      }
+    },
+    [graph],
+  );
+
+  const onTabChange = useCallback(
+    async (node: NavTreeItemGraphNode) => {
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
+      // Open the first item if the workspace is empty.
+      if (layout.active.length === 0) {
+        const [item] = getItems(node).filter((node) => !isActionLike(node));
+        if (item) {
+          await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
+        }
+      }
+    },
+    [dispatch, layout],
+  );
+
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
@@ -123,11 +165,19 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
 
       const current = isCurrent(path, node);
       if (!current) {
-        void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [node.id] } }));
+        void dispatch(
+          createIntent(LayoutAction.Open, {
+            part: 'main',
+            subject: [node.id],
+            options: { key: node.properties.key },
+          }),
+        );
       } else if (option) {
-        void dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [node.id] } }));
+        void dispatch(
+          createIntent(LayoutAction.Close, { part: 'main', subject: [node.id], options: { state: false } }),
+        );
       } else {
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: node.id }));
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
       }
 
       const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
@@ -136,10 +186,10 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
       }
 
       if (!isLg) {
-        closeNavigationSidebar();
+        void dispatch(createIntent(LayoutAction.UpdateSidebar, { part: 'sidebar', options: { state: 'closed' } }));
       }
     },
-    [graph, dispatch, isCurrent, isLg, closeNavigationSidebar],
+    [graph, dispatch, isCurrent, isLg],
   );
 
   // TODO(wittjosiah): Factor out hook.
@@ -201,20 +251,44 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     });
   }, [graph]);
 
-  // TODO(thure): What gives this an inline `overflow: initial`?
+  const navTreeContextValue = useMemo(
+    () => ({
+      tab,
+      onTabChange,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect: handleSelect,
+    }),
+    [
+      tab,
+      onTabChange,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      handleSelect,
+    ],
+  );
+
   return (
-    <NavTree
-      id={graph.root.id}
-      getActions={getActions}
-      getItems={getItems}
-      getProps={getProps}
-      isCurrent={isCurrent}
-      loadDescendents={loadDescendents}
-      renderItemEnd={renderItemEnd}
-      popoverAnchorId={popoverAnchorId}
-      canDrop={canDrop}
-      onSelect={handleSelect}
-      {...props}
-    />
+    <NavTreeContext.Provider value={navTreeContextValue}>
+      <NavTree root={graph.root} id={graph.root.id} />
+    </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+
+import { type NavTreeContextValue } from './types';
+
+export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
+
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));

package/src/components/NavTreeItemAction.tsx

@@ -24,11 +24,8 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
 const fallbackIcon = 'ph--placeholder--regular';
 
 const actionButtonProps = {
-  iconOnly: true,
   size: 4 as const,
-  variant: 'ghost' as const,
   density: 'fine' as const,
-  classNames: mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem),
 };
 
 export const NavTreeItemActionDropdownMenu = ({
@@ -46,7 +43,10 @@ export const NavTreeItemActionDropdownMenu = ({
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...actionButtonProps}
+            classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            variant='ghost'
             icon={icon ?? fallbackIcon}
+            iconOnly
             label={toLocalizedString(label, t)}
             data-testid={testId}
             suppressNextTooltip={suppressNextTooltip}
@@ -59,14 +59,22 @@ export const NavTreeItemActionDropdownMenu = ({
 
 export const NavTreeItemMonolithicAction = ({
   parent,
-  properties: { disabled, caller, testId, icon } = { label: 'never' },
+  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
   return (
     <IconButton
       {...actionButtonProps}
+      variant={variant}
+      classNames={mx(
+        'shrink-0',
+        hoverableControlItem,
+        hoverableOpenControlItem,
+        iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
+      )}
       icon={icon ?? fallbackIcon}
+      iconOnly={iconOnly}
       label={baseLabel}
       disabled={disabled}
       onClick={(event) => {

package/src/components/NavTreeItemColumns.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment, memo } from 'react';
+
+import { isAction } from '@dxos/app-graph';
+import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+
+import { NAV_TREE_ITEM } from './NavTree';
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemAction } from './NavTreeItemAction';
+import type { NavTreeItemColumnsProps } from './types';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+
+export const NavTreeItemColumns = memo(({ path, item, open }: 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) =>
+    a.properties?.disposition === 'toolbar' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
+    .flatMap((action) => (isAction(action) ? [action] : []))
+    .filter((action) => !action.properties?.hidden);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
+  useLoadDescendents(item);
+  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+
+  return (
+    <div role='none' className='contents app-no-drag'>
+      {primaryAction?.properties?.disposition === 'toolbar' && !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={`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>
+  );
+});

package/src/components/NotchStart.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { createIntent, useIntentDispatcher, useCapabilities } from '@dxos/app-framework';
+import { createIntent, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
 import { ClientAction } from '@dxos/plugin-client/types';
 import { ObservabilityCapabilities } from '@dxos/plugin-observability';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -19,7 +19,7 @@ export const NotchStart = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   return (
     <HaloButton
-      size={8}
+      size={12}
       identityKey={identity?.identityKey.toHex()}
       hue={identity?.profile?.data?.hue}
       emoji={identity?.profile?.data?.emoji}

package/src/components/index.ts

@@ -6,5 +6,7 @@ export * from './CommandsDialog';
 export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
+export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
 export * from './NotchStart';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type { FC } from 'react';
+
+import type { Node } from '@dxos/app-graph';
+import type { TreeProps } from '@dxos/react-ui-list';
+import type { MaybePromise } from '@dxos/util';
+
+import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
+
+export type NavTreeItemColumnsProps = {
+  path: string[];
+  item: Node;
+  open: boolean;
+};
+
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
+
+export type NavTreeContextValue = Pick<
+  TreeProps<NavTreeItemGraphNode>,
+  'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'
+> & {
+  tab: string;
+  onTabChange?: (node: NavTreeItemGraphNode) => void;
+  getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
+  getActions: (node: Node) => FlattenedActions;
+  loadDescendents?: (node: Node) => MaybePromise<void>;
+  renderItemEnd?: FC<{ node: Node; open: boolean }>;
+  popoverAnchorId?: string;
+  topbar?: boolean;
+};

package/src/hooks.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+
+import { useNavTreeContext } from './components/NavTreeContext';
+
+export const useLoadDescendents = (root?: Node) => {
+  const { loadDescendents } = useNavTreeContext();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [root]);
+};

package/src/stories/Graph.stories.tsx

@@ -18,7 +18,7 @@ import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree } from '../components';
+import { StorybookNavTree } from './StorybookNavTree';
 import { getActions, getChildren } from '../util';
 
 faker.seed(3);
@@ -53,9 +53,9 @@ const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }
 
 export const Default = {};
 
-const meta: Meta<typeof NavTree> = {
+const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/Graph',
-  component: NavTree,
+  component: StorybookNavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -78,9 +78,10 @@ const meta: Meta<typeof NavTree> = {
       });
     }, []);
 
-    return <NavTree {...args} />;
+    return <StorybookNavTree {...args} />;
   },
   args: {
+    root: graph.root,
     id: graph.root.id,
     getActions: (node: Node) => getActions(graph, node),
     getItems: (node?: Node) => graph.nodes(node ?? graph.root),

package/src/stories/StorybookNavTree.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { NavTree, NavTreeContext, type NavTreeContextValue, type NavTreeProps } from '../components';
+import { type NavTreeItemGraphNode } from '../types';
+
+export const StorybookNavTree = ({
+  getActions,
+  loadDescendents,
+  renderItemEnd,
+  popoverAnchorId,
+  getItems,
+  getProps,
+  isCurrent,
+  canDrop,
+  onSelect,
+  isOpen,
+  onOpenChange,
+  ...props
+}: NavTreeProps & NavTreeContextValue) => {
+  const [tab, setTab] = useState('never');
+
+  const contextValue = useMemo(
+    () => ({
+      tab,
+      onTabChange: (node: NavTreeItemGraphNode) => setTab(node.id),
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect,
+    }),
+    [
+      tab,
+      setTab,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect,
+    ],
+  );
+  return (
+    <NavTreeContext.Provider value={contextValue}>
+      <NavTree {...props} />
+    </NavTreeContext.Provider>
+  );
+};

package/src/translations.ts

@@ -13,12 +13,6 @@ export default [
         'commands dialog title': 'Commands',
         'command list input placeholder': 'Search for commands…',
         'node actions menu invoker label': 'More options',
-        'warning title': 'WARNING',
-        'technology preview message': 'Composer is still in technology preview.',
-        'learn more label': 'Learn more',
-        'released message': 'This version released {{released}}.',
-        'see release label': 'See release on GitHub',
-        'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
         'tree item actions label': 'More actions',
         'empty branch message': ' ',
       },

package/src/types.ts

@@ -4,7 +4,7 @@
 
 import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
 import { type Label } from '@dxos/react-ui';
-import { type MaybePromise } from '@dxos/util';
+import { type MaybePromise, type Position } from '@dxos/util';
 
 export type NavTreeItemGraphNode = Node<
   any,
@@ -31,6 +31,7 @@ type SharedProperties = {
   label: Label;
   icon?: string;
   disabled?: boolean;
+  position?: Position;
   testId?: string;
   className?: string;
   headingClassName?: string;

package/src/util.ts

@@ -10,6 +10,7 @@ import {
   ACTION_TYPE,
   ACTION_GROUP_TYPE,
   isAction,
+  isActionLike,
 } from '@dxos/app-graph';
 import { nonNullable } from '@dxos/util';
 
@@ -126,3 +127,56 @@ export const expandChildren = (graph: Graph, node: Node) => {
 export const expandActions = (graph: Graph, node: Node) => {
   return Promise.all([graph.expand(node, 'outbound', ACTION_TYPE), graph.expand(node, 'outbound', ACTION_GROUP_TYPE)]);
 };
+
+export const l0ItemType = (item: Node<any>) => {
+  if (item.properties.disposition === 'collection') {
+    return 'collection';
+  } else if (isActionLike(item)) {
+    return 'action';
+  } else if (item.properties.disposition === 'navigation') {
+    return 'link';
+  } else {
+    return 'tab';
+  }
+};
+
+// Regular expression to match renderable characters
+// Excludes control characters, combining marks, and other non-renderable characters
+const renderableCharRegex =
+  /^(?![\p{Control}\p{Mark}\p{Separator}\p{Surrogate}\p{Unassigned}])[\p{L}\p{N}\p{P}\p{S}\p{Emoji}]$/u;
+
+/**
+ * Returns the first two renderable characters from a string that are separated by non-word characters.
+ * Handles Unicode characters correctly.
+ *
+ * @param {string} label - The input string to process
+ * @returns {[string, string]} Array containing the two characters, or empty strings if not found
+ */
+export const getFirstTwoRenderableChars = (label: string) => {
+  // Convert string to array of Unicode characters
+  const characters = Array.from(label);
+
+  // Keep track of found renderable characters
+  const result = ['', ''];
+  let foundFirst = false;
+
+  for (let i = 0; i < characters.length; i++) {
+    const char = characters[i];
+
+    if (renderableCharRegex.test(char)) {
+      if (!foundFirst) {
+        result[0] = char;
+        foundFirst = true;
+      } else {
+        // Check if there's at least one non-word character between the first and current char
+        const textBetween = characters.slice(result[0].length, i).join('');
+        if (/[^\p{L}\p{N}_]/u.test(textBetween)) {
+          result[1] = char;
+          break;
+        }
+      }
+    }
+  }
+
+  return result;
+};