@dxos/plugin-navtree 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/containers/NavTreeContainer/NavTreeContainer.tsx

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
@@ -14,10 +14,11 @@ import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { type TreeData, isTreeData } from '@dxos/react-ui-list';
 import { arrayMove } from '@dxos/util';
 
-import { NAV_TREE_ITEM, NavTree, NavTreeContext } from '../../components';
-import { useNavTreeModel, useNavTreeState } from '../../hooks';
-import { meta } from '../../meta';
-import { type NavTreeItemGraphNode } from '../../types';
+import { NAV_TREE_ITEM, NavTree, NavTreeContext } from '#components';
+import { useNavTreeModel, useNavTreeState } from '#hooks';
+import { meta } from '#meta';
+import { type NavTreeItemGraphNode } from '#types';
+
 import { filterItems, getParent, resolveMigrationOperation } from '../../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -41,7 +42,7 @@ export type NavTreeContainerProps = {
 export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProps>(
   ({ tab, popoverAnchorId }, forwardedRef) => {
     const [isLg] = useMediaQuery('lg');
-    const { invokeSync, invokePromise } = useOperationInvoker();
+    const { invokePromise } = useOperationInvoker();
     const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const { getItem, setItem } = useNavTreeState();
@@ -83,7 +84,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
           navigationSidebarState: currentSidebarState,
           isLg: latestIsLg,
         } = latestRef.current;
-        invokeSync(LayoutOperation.UpdateSidebar, {
+        void invokePromise(LayoutOperation.UpdateSidebar, {
           state:
             node.id === activeTab
               ? currentSidebarState === 'expanded'
@@ -94,17 +95,21 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               : 'expanded',
         });
 
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: node.id });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: node.id });
 
         // Open the first item if the workspace is empty.
         if (activeItems.length === 0) {
           const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
           if (item && item.data) {
-            invokeSync(LayoutOperation.Open, { subject: [item.id] });
+            if (layout.mode === 'multi') {
+              void invokePromise(LayoutOperation.Set, { subject: [item.id] });
+            } else {
+              void invokePromise(LayoutOperation.Open, { subject: [item.id] });
+            }
           }
         }
       },
-      [invokeSync, graph],
+      [invokePromise, graph, layout.mode],
     );
 
     const blockInstruction = useCallback(
@@ -138,9 +143,13 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
 
         const current = getItem(path).current;
         if (!current) {
-          invokeSync(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          if (layout.mode === 'multi') {
+            void invokePromise(LayoutOperation.Set, { subject: [node.id] });
+          } else {
+            void invokePromise(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          }
         } else if (option) {
-          invokeSync(LayoutOperation.Close, { subject: [node.id] });
+          void invokePromise(LayoutOperation.Close, { subject: [node.id] });
         } else {
           void invokePromise(LayoutOperation.ScrollIntoView, { subject: node.id });
         }
@@ -153,13 +162,13 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         }
 
         if (!isLg) {
-          invokeSync(LayoutOperation.UpdateSidebar, { state: 'closed' });
+          void invokePromise(LayoutOperation.UpdateSidebar, { state: 'closed' });
         }
       },
-      [graph, invokeSync, invokePromise, getItem, runAction, isLg],
+      [graph, invokePromise, getItem, runAction, isLg, layout.mode],
     );
 
-    const handleBack = useCallback(() => invokeSync(LayoutOperation.RevertWorkspace), [invokeSync]);
+    const handleBack = useCallback(() => void invokePromise(LayoutOperation.RevertWorkspace), [invokePromise]);
 
     // TODO(wittjosiah): Factor out hook.
     useEffect(() => {
@@ -221,13 +230,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
       });
     }, [graph]);
 
-    const setAlternateTree = useCallback(
-      (path: string[], open: boolean) => {
-        setItem(path, 'alternateTree', open);
-      },
-      [setItem],
-    );
-
     const onItemHover = useCallback(({ item }: { item: Node.Node }) => Graph.expand(graph, item.id, 'child'), [graph]);
 
     const navTreeContextValue = useMemo(
@@ -238,7 +240,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         onBack: handleBack,
         onOpenChange: handleOpenChange,
         onSelect: handleSelect,
@@ -251,7 +252,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         handleBack,
         handleOpenChange,
         handleSelect,

package/src/containers/NavTreeDocumentTitle/NavTreeDocumentTitle.tsx

@@ -7,12 +7,12 @@ import { type Node } from '@dxos/app-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export const NavTreeDocumentTitle = ({ node }: { node?: Node.Node }) => {
   const { t } = useTranslation(meta.id);
   useEffect(() => {
-    document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: osTranslations });
+    document.title = node ? toLocalizedString(node.properties.label, t) : t('current-app.name', { ns: osTranslations });
   }, [node?.properties?.label]);
   return null;
 };

package/src/containers/NavTreeDocumentTitle/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NavTreeDocumentTitle } from './NavTreeDocumentTitle';
-
-export default NavTreeDocumentTitle;
+export { NavTreeDocumentTitle as default } from './NavTreeDocumentTitle';

package/src/experimental/Tree.stories.tsx

@@ -5,14 +5,14 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Icon, IconButton, Panel, ScrollArea } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
 
-faker.seed(1234);
+random.seed(1234);
 
 // TODO(burdon): Generate.
 const data: TreeNodeData[] = [
@@ -21,34 +21,34 @@ const data: TreeNodeData[] = [
     title: 'plugins/Root',
     children: [
       {
-        id: faker.string.uuid(),
+        id: random.string.uuid(),
         title: 'plugins/Personal Space',
         color: 'text-green-400',
         iconName: 'ph--house--regular',
         children: [
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
           },
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
           },
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
             children: [
               {
-                id: faker.string.uuid(),
-                title: faker.commerce.productName(),
+                id: random.string.uuid(),
+                title: random.commerce.productName(),
                 children: [
                   {
-                    id: faker.string.uuid(),
-                    title: faker.commerce.productName(),
+                    id: random.string.uuid(),
+                    title: random.commerce.productName(),
                   },
                   {
-                    id: faker.string.uuid(),
-                    title: faker.commerce.productName(),
+                    id: random.string.uuid(),
+                    title: random.commerce.productName(),
                   },
                 ],
               },
@@ -57,24 +57,24 @@ const data: TreeNodeData[] = [
         ],
       },
       {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
         iconName: 'ph--planet--regular',
         children: [
           {
-            id: faker.string.uuid(),
-            title: faker.commerce.productName(),
+            id: random.string.uuid(),
+            title: random.commerce.productName(),
           },
         ],
       },
       {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
         iconName: 'ph--sailboat--regular',
       },
       {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
         iconName: 'ph--planet--regular',
       },
     ],
@@ -122,8 +122,8 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
       });
 
       (parent!.children ??= []).push({
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
+        id: random.string.uuid(),
+        title: random.commerce.productName(),
       });
 
       setOpenItems((open) => ({ ...open, [parent!.id]: true }));
@@ -135,9 +135,9 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   const handleCreateSpace = () => {
     setItems((items) => {
       items[0].children?.push({
-        id: faker.string.uuid(),
+        id: random.string.uuid(),
         iconName: 'ph--planet--regular',
-        title: faker.commerce.productName(),
+        title: random.commerce.productName(),
       });
 
       return { ...items };

package/src/experimental/Tree.tsx

@@ -195,7 +195,7 @@ export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
       className={mx(
         'group w-full items-center cursor-pointer bg-hover-surface',
         // TODO(burdon): Use data-active.
-        selected?.[id] && 'bg-active-surface',
+        selected?.[id] && 'bg-current-surface',
         className,
       )}
       onClick={() => selected && onChangeSelected?.(id, !selected[id])}
@@ -220,7 +220,7 @@ export const TreeNode = (props: TreeNodeProps & { ancestors?: TreeNodeData[] })
   const { root, header } = getSlots?.(props.node, open?.[id] ?? false, depth, ancestors) ?? {};
 
   return (
-    <div role='none' className={mx('flex flex-col', root)}>
+    <div className={mx('flex flex-col', root)}>
       <TreeNodeRow {...props} className={header} />
       {(children?.length ?? 0) > 0 && open?.[id] && <TreeChildNodes {...props} ancestors={ancestors} />}
     </div>

package/src/hooks/useActions.ts

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph, Node, useActions as useGraphActions } from '@dxos/plugin-graph';
 
-import { type FlattenedActions } from '../types';
+import { type FlattenedActions } from '#types';
 
 /** Returns flattened actions and grouped sub-actions for a given graph node. */
 export const useActions = (node: Node.Node): FlattenedActions => {

package/src/hooks/useNavTreeModel.ts

@@ -7,14 +7,14 @@ import * as Option from 'effect/Option';
 import { useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck';
 import { type Node } from '@dxos/plugin-graph';
 import { Path, type TreeModel } from '@dxos/react-ui-list';
 import { mx } from '@dxos/ui-theme';
 
-import { type NavTreeItemGraphNode } from '../types';
-import { filterItems } from '../util';
+import { type NavTreeItemGraphNode } from '#types';
 
+import { filterItems } from '../util';
 import { useNavTreeState } from './useNavTreeState';
 
 // TODO(wittjosiah): Move companion/hidden nodes to their own edge categories so this filter is unnecessary.

package/src/hooks/useNavTreeState.ts

@@ -7,12 +7,12 @@ import { useMemo } from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 
-import { NavTreeCapabilities } from '../types';
+import { NavTreeCapabilities } from '#types';
 
 export type UseNavTreeStateResult = {
   getItem: (path: string[]) => NavTreeCapabilities.NavTreeItemState;
   getItemAtom: (path: string[]) => Atom.Atom<NavTreeCapabilities.NavTreeItemState>;
-  setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;
+  setItem: (path: string[], key: 'open' | 'current', next: boolean) => void;
 };
 
 /**
@@ -33,10 +33,3 @@ export const useNavTreeItemState = (path: string[]): NavTreeCapabilities.NavTree
   const atom = useMemo(() => getItemAtom(path), [getItemAtom, pathKey]);
   return useAtomValue(atom);
 };
-
-/**
- * Hook that subscribes to the alternateTree state for a tree item.
- */
-export const useIsAlternateTree = (path: string[], _item?: any): boolean => {
-  return useNavTreeItemState(path).alternateTree ?? false;
-};

package/src/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export { NavTreeCapabilities, NavTreeEvents } from './types';
-export * from './NavTreePlugin';
 export * from './meta';
+export * from './types';
 export * from './util';

package/src/meta.ts

@@ -8,10 +8,12 @@ import { trim } from '@dxos/util';
 export const meta: Plugin.Meta = {
   id: 'org.dxos.plugin.navtree',
   name: 'Navtree',
+  author: 'DXOS',
   description: trim`
     Hierarchical navigation tree for browsing spaces, folders, and objects.
     Provides sidebar navigation with collapsible sections and quick access to workspace content.
   `,
+  tags: ['system'],
 };
 
 // TODO(wittjosiah): Factor out.

package/src/operations/expose.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { log } from '@dxos/log';
+import { Graph } from '@dxos/plugin-graph';
+import { expandAttendableId } from '@dxos/react-ui-attention';
+
+import { NavTreeCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Expose> = LayoutOperation.Expose.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ subject }) {
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+      const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);
+
+      const prefixes = expandAttendableId(subject);
+
+      for (const qualifiedId of prefixes) {
+        Graph.expand(graph, qualifiedId, 'child');
+
+        const treePath = prefixes.slice(0, prefixes.indexOf(qualifiedId) + 1);
+        const state = getItem(treePath);
+        if (!state.open) {
+          setItem(treePath, 'open', true);
+        }
+      }
+
+      if (Option.isNone(Graph.getNode(graph, subject))) {
+        log('Node not found after expansion', { subject });
+      }
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const NavTreeOperationHandlerSet = OperationHandlerSet.lazy(() => import('./expose'));

package/src/plugin.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const NavTreePlugin = Plugin.lazy(meta, () => import('#plugin'));
+
+export { NavTreeOperationHandlerSet } from './operations';

package/src/testing/app-graph-builder.ts

@@ -7,8 +7,8 @@ import * as Effect from 'effect/Effect';
 
 import { type BuilderExtensions } from '@dxos/app-graph';
 import { log } from '@dxos/log';
-import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
-import { faker } from '@dxos/random';
+import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
+import { random } from '@dxos/random';
 
 export const storybookGraphBuilders = (): BuilderExtensions => {
   const propertiesCache = new Map<string, Record<string, unknown>>();
@@ -37,7 +37,7 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
               }),
               properties: {
                 label: `Action ${i}`,
-                icon: faker.properties.icon(),
+                icon: random.properties.icon(),
                 disposition: 'menu',
               },
             })),
@@ -49,7 +49,7 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
         match: NodeMatcher.whenRoot,
         connector: () =>
           Effect.succeed([
-            {
+            Node.make({
               id: 'user-account',
               type: 'user-account',
               properties: {
@@ -57,37 +57,37 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
                 icon: 'ph--user--regular',
                 disposition: 'user-account',
                 userId: '1234567890ABCDEF',
-                hue: faker.properties.hue(),
-                emoji: faker.properties.emoji(),
+                hue: random.properties.hue(),
+                emoji: random.properties.emoji(),
                 status: 'active',
               },
               nodes: [
-                {
+                Node.make({
                   id: 'profile',
                   type: 'profile',
                   properties: {
                     label: 'Profile',
                     icon: 'ph--user--regular',
                   },
-                },
-                {
+                }),
+                Node.make({
                   id: 'devices',
                   type: 'devices',
                   properties: {
                     label: 'Devices',
                     icon: 'ph--devices--regular',
                   },
-                },
-                {
+                }),
+                Node.make({
                   id: 'security',
                   type: 'security',
                   properties: {
                     label: 'Security',
                     icon: 'ph--key--regular',
                   },
-                },
+                }),
               ],
-            },
+            }),
           ]),
       }),
       // Create space (workspace) nodes directly under root.
@@ -111,16 +111,18 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
               return value;
             });
 
-            return Array.from({ length: get(count) }, (_, i) => ({
-              id: `space-${i}`,
-              type: 'space',
-              properties: getProperties(`space-${i}`, {
-                label: `Space ${i}`,
-                icon: faker.properties.icon(),
-                hue: faker.properties.hue(),
-                disposition: 'workspace',
+            return Array.from({ length: get(count) }, (_, i) =>
+              Node.make({
+                id: `space-${i}`,
+                type: 'space',
+                properties: getProperties(`space-${i}`, {
+                  label: `Space ${i}`,
+                  icon: random.properties.icon(),
+                  hue: random.properties.hue(),
+                  disposition: 'workspace',
+                }),
               }),
-            }));
+            );
           }),
       }),
       // Create space actions.
@@ -136,7 +138,7 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
               }),
               properties: getProperties(`action-${i}`, {
                 label: `Action ${i}`,
-                icon: faker.properties.icon(),
+                icon: random.properties.icon(),
               }),
             })),
           ),
@@ -162,14 +164,16 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
               return value;
             });
 
-            return Array.from({ length: get(count) }, (_, i) => ({
-              id: `object-${i}`,
-              type: 'object',
-              properties: getProperties(`object-${i}`, {
-                label: `Object ${i}`,
-                icon: faker.properties.icon(),
+            return Array.from({ length: get(count) }, (_, i) =>
+              Node.make({
+                id: `object-${i}`,
+                type: 'object',
+                properties: getProperties(`object-${i}`, {
+                  label: `Object ${i}`,
+                  icon: random.properties.icon(),
+                }),
               }),
-            }));
+            );
           }),
       }),
       // Create object actions.
@@ -185,7 +189,7 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
               }),
               properties: getProperties(`action-${i}`, {
                 label: `Action ${i}`,
-                icon: faker.properties.icon(),
+                icon: random.properties.icon(),
               }),
             })),
           ),