@dxos/plugin-navtree 0.8.4-main.4a85c3132b → 0.8.4-main.51f1e5ca51

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(
@@ -131,16 +136,20 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         if (Node.isAction(node)) {
           const [parent] = Graph.getConnections(graph, node.id, Node.childRelation('inbound'));
           if (parent) {
-            void runAction(node, { parent, caller: NAV_TREE_ITEM });
+            void runAction(node, { parent, path, caller: NAV_TREE_ITEM });
           }
           return;
         }
 
         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(() => {
@@ -177,8 +186,9 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
             const targetNode = target.data.item as NavTreeItemGraphNode;
             const sourcePath = source.data.path as string[];
             const targetPath = target.data.path as string[];
+            const sameParent = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join();
             const operation =
-              sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+              sameParent && instruction.type !== 'make-child'
                 ? 'rearrange'
                 : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
             const sourceParent = getParent(graph, sourceNode, sourcePath);
@@ -207,7 +217,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               }
               case 'transfer': {
                 const target = instruction.type === 'make-child' ? targetNode : targetParent;
-                if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                if (!target?.properties.onTransferStart || target?.id === sourceParent?.id) {
                   break;
                 }
                 void target?.properties.onTransferStart(sourceNode, migrationIndex);
@@ -220,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(
@@ -237,7 +240,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         onBack: handleBack,
         onOpenChange: handleOpenChange,
         onSelect: handleSelect,
@@ -250,7 +252,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         blockInstruction,
         canDrop,
         canSelect,
-        setAlternateTree,
         handleBack,
         handleOpenChange,
         handleSelect,

package/src/containers/NavTreeContainer/index.ts

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

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/containers/index.ts

@@ -4,7 +4,7 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export { NODE_TYPE } from './NavTreeContainer/NavTreeContainer';
+export { NODE_TYPE } from './NavTreeContainer';
 
 export const CommandsDialogContent: ComponentType<any> = lazy(() => import('./CommandsDialogContent'));
 export const CommandsTrigger: ComponentType<any> = lazy(() => import('./CommandsTrigger'));

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/hooks/useActions.ts

@@ -7,32 +7,28 @@ 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.
- */
+/** Returns flattened actions and grouped sub-actions for a given graph node. */
 export const useActions = (node: Node.Node): FlattenedActions => {
   const { graph } = useAppGraph();
   const actions = useGraphActions(graph, node.id);
 
-  return useMemo(
-    () =>
-      actions.reduce(
-        (acc: FlattenedActions, arg) => {
-          if (arg.properties.disposition === 'item') {
-            return acc;
-          }
-
-          acc.actions.push(arg);
-          if (!Node.isAction(arg)) {
-            const actionGroup = Graph.getActions(graph, arg.id);
-            acc.groupedActions[arg.id] = actionGroup;
-          }
+  return useMemo(() => {
+    return actions.reduce(
+      (acc: FlattenedActions, arg) => {
+        if (arg.properties.disposition === 'item') {
           return acc;
-        },
-        { actions: [], groupedActions: {} },
-      ),
-    [actions],
-  );
+        }
+
+        acc.actions.push(arg);
+        if (!Node.isAction(arg)) {
+          const actionGroup = Graph.getActions(graph, arg.id);
+          acc.groupedActions[arg.id] = actionGroup;
+        }
+        return acc;
+      },
+      { actions: [], groupedActions: {} },
+    );
+  }, [actions]);
 };

package/src/hooks/useNavTreeModel.ts

@@ -12,9 +12,9 @@ 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.
@@ -40,10 +40,17 @@ const createItemPropsFamily = (graph: ReturnType<typeof useAppGraph>['graph']) =
           : node.properties.role === 'branch'
             ? []
             : undefined;
+      const parentId = path.length >= 2 ? path[path.length - 2] : undefined;
+      const parentNode = parentId ? Option.getOrElse(get(graph.node(parentId)), () => undefined) : undefined;
+      const droppable =
+        node.properties.droppable === false || parentNode?.properties.childrenDroppable === false ? false : undefined;
+
       return {
         id: node.id,
         parentOf,
         disabled: node.properties.disabled,
+        draggable: node.properties.draggable,
+        droppable,
         label: node.properties.label ?? node.id,
         className: mx(node.properties.className, node.properties.modified && 'italic'),
         headingClassName: node.properties.headingClassName,
@@ -65,8 +72,7 @@ const createItemFamily = (graph: ReturnType<typeof useAppGraph>['graph']) =>
   Atom.family((id: string) =>
     Atom.make((get) => {
       const node = Option.getOrElse(get(graph.node(id)), () => undefined);
-      const passed = node ? filterItems(node) : false;
-      return node && passed ? node : undefined;
+      return node && filterItems(node) ? node : undefined;
     }).pipe(Atom.keepAlive),
   );
 

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/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/navtree',
+  id: 'org.dxos.plugin.navtree',
   name: 'Navtree',
   description: trim`
     Hierarchical navigation tree for browsing spaces, folders, and objects.
@@ -17,4 +17,4 @@ export const meta: Plugin.Meta = {
 // TODO(wittjosiah): Factor out.
 export const KEY_BINDING = 'KeyBinding';
 // TODO(wittjosiah): Factor out.
-export const COMMANDS_DIALOG = `${meta.id}/CommandsDialog`;
+export const COMMANDS_DIALOG = `${meta.id}.commands-dialog`;

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'));