@dxos/plugin-navtree 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/NavTreeContainer.tsx

@@ -4,20 +4,20 @@
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { untracked } from '@preact/signals-core';
 import React, { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { Surface, useAppGraph, useCapability, useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
-import { type Node, ROOT_ID, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { type TreeData, type TreeItemDataProps, isTreeData } from '@dxos/react-ui-list';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { arrayMove, byPosition } from '@dxos/util';
 
-import { NavTreeCapabilities } from '../capabilities';
+import { useIsAlternateTree, useIsCurrent, useIsOpen, useNavTreeState } from '../hooks';
 import { meta } from '../meta';
 import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
 import { getChildren, getParent, resolveMigrationOperation } from '../util';
@@ -29,38 +29,38 @@ import { type NavTreeContextValue } from './types';
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
-  <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
+const renderItemEnd = ({ node, open }: { node: Node.Node; open: boolean }) => (
+  <Surface.Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
-const getChildrenFilter = (node: Node): node is Node =>
-  untracked(
-    () => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden',
-  );
+const getChildrenFilter = (node: Node.Node): node is Node.Node =>
+  !Node.isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden';
 
-const filterItems = (node: Node, disposition?: string) => {
+const filterItems = (node: Node.Node, disposition?: string) => {
   if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
     return false;
   } else if (!disposition) {
-    const action = isAction(node);
+    const action = Node.isAction(node);
     return !action || node.properties.disposition === 'item';
   } else {
     return node.properties.disposition === disposition;
   }
 };
 
-const getItems = (graph: ReadableGraph, node?: Node, disposition?: string) => {
-  return graph.getConnections(node?.id ?? ROOT_ID, 'outbound').filter((node) => filterItems(node, disposition));
+const getItems = (graph: Graph.ReadableGraph, node?: Node.Node, disposition?: string) => {
+  return Graph.getConnections(graph, node?.id ?? Node.RootId, 'outbound').filter((node) =>
+    filterItems(node, disposition),
+  );
 };
 
-const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
+const useItems = (node?: Node.Node, options?: { disposition?: string; sort?: boolean }) => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, node?.id ?? ROOT_ID);
+  const connections = useConnections(graph, node?.id ?? Node.RootId);
   const filtered = connections.filter((node) => filterItems(node, options?.disposition));
   return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
-const useActions = (node: Node): FlattenedActions => {
+const useActions = (node: Node.Node): FlattenedActions => {
   const { graph } = useAppGraph();
   const actions = useGraphActions(graph, node.id);
 
@@ -73,8 +73,8 @@ const useActions = (node: Node): FlattenedActions => {
           }
 
           acc.actions.push(arg);
-          if (!isAction(arg)) {
-            const actionGroup = graph.getActions(arg.id);
+          if (!Node.isAction(arg)) {
+            const actionGroup = Graph.getActions(graph, arg.id);
             acc.groupedActions[arg.id] = actionGroup;
           }
           return acc;
@@ -93,14 +93,15 @@ export type NavTreeContainerProps = {
 export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProps>(
   ({ tab, popoverAnchorId, topbar }, forwardedRef) => {
     const [isLg] = useMediaQuery('lg');
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { invokeSync, invokePromise } = useOperationInvoker();
+    const runAction = useActionRunner();
     const { graph } = useAppGraph();
-    const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+    const { getItem, setItem } = useNavTreeState();
     const layout = useLayout();
     const { navigationSidebarState } = useSidebars(meta.id);
 
     const getProps = useCallback(
-      (node: Node, path: string[]): TreeItemDataProps => {
+      (node: Node.Node, path: string[]): TreeItemDataProps => {
         const children = getChildren(graph, node, path).filter(getChildrenFilter);
         const parentOf =
           children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
@@ -120,64 +121,49 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
     );
 
     const loadDescendents = useCallback(
-      (node: Node) => {
-        graph.expand(node.id, 'outbound');
+      (node: Node.Node) => {
+        Graph.expand(graph, node.id, 'outbound');
         // Load one level deeper, which resolves some juddering observed on open/close.
-        graph.getConnections(node.id, 'outbound').forEach((child) => {
-          graph.expand(child.id, 'outbound');
+        Graph.getConnections(graph, node.id, 'outbound').forEach((child) => {
+          Graph.expand(graph, child.id, 'outbound');
         });
       },
       [graph],
     );
 
     const handleOpenChange = useCallback(
-      ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
+      ({ item: { id }, path, open }: { item: Node.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);
-        graph.expand(id, 'outbound');
+        Graph.expand(graph, id, 'outbound');
       },
       [graph],
     );
 
     const handleTabChange = useCallback(
-      async (node: NavTreeItemGraphNode) => {
-        await dispatch(
-          createIntent(LayoutAction.UpdateSidebar, {
-            part: 'sidebar',
-            options: {
-              state:
-                node.id === tab
-                  ? navigationSidebarState === 'expanded'
-                    ? isLg
-                      ? 'collapsed'
-                      : 'closed'
-                    : 'expanded'
-                  : 'expanded',
-            },
-          }),
-        );
+      (node: NavTreeItemGraphNode) => {
+        invokeSync(LayoutOperation.UpdateSidebar, {
+          state:
+            node.id === tab
+              ? navigationSidebarState === 'expanded'
+                ? isLg
+                  ? 'collapsed'
+                  : 'closed'
+                : 'expanded'
+              : 'expanded',
+        });
 
-        await dispatch(
-          createIntent(LayoutAction.SwitchWorkspace, {
-            part: 'workspace',
-            subject: node.id,
-          }),
-        );
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: node.id });
 
         // Open the first item if the workspace is empty.
         if (layout.active.length === 0) {
-          const [item] = getItems(graph, node).filter((node) => !isActionLike(node));
+          const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
           if (item && item.data) {
-            await dispatch(
-              createIntent(LayoutAction.Open, {
-                part: 'main',
-                subject: [item.id],
-              }),
-            );
+            invokeSync(LayoutOperation.Open, { subject: [item.id] });
           }
         }
       },
-      [dispatch, layout.active, tab, navigationSidebarState, isLg],
+      [invokeSync, layout.active, tab, navigationSidebarState, isLg],
     );
 
     const blockInstruction = useCallback(
@@ -191,75 +177,48 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
       return target.item.properties.canDrop?.(source) ?? false;
     }, []);
 
-    const canSelect = useCallback(({ item }: { item: Node }) => {
+    const canSelect = useCallback(({ item }: { item: Node.Node }) => {
       return item.properties.selectable ?? true;
     }, []);
 
     const handleSelect = useCallback(
-      ({ item: node, path, option }: { item: Node; path: string[]; option: boolean }) => {
+      ({ item: node, path, option }: { item: Node.Node; path: string[]; option: boolean }) => {
         if (!node.data) {
           return;
         }
 
-        if (isAction(node)) {
-          const [parent] = graph.getConnections(node.id, 'inbound');
-          void (parent && node.data({ parent, caller: NAV_TREE_ITEM }));
+        if (Node.isAction(node)) {
+          const [parent] = Graph.getConnections(graph, node.id, 'inbound');
+          if (parent) {
+            void runAction(node, { parent, caller: NAV_TREE_ITEM });
+          }
           return;
         }
 
-        const current = isCurrent(path, node);
+        const current = getItem(path).current;
         if (!current) {
-          void dispatch(
-            createIntent(LayoutAction.Open, {
-              part: 'main',
-              subject: [node.id],
-              options: { key: node.properties.key },
-            }),
-          );
+          invokeSync(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
         } else if (option) {
-          void dispatch(
-            createIntent(LayoutAction.Close, {
-              part: 'main',
-              subject: [node.id],
-              options: { state: false },
-            }),
-          );
+          invokeSync(LayoutOperation.Close, { subject: [node.id] });
         } else {
-          void dispatch(
-            createIntent(LayoutAction.ScrollIntoView, {
-              part: 'current',
-              subject: node.id,
-            }),
-          );
+          void invokePromise(LayoutOperation.ScrollIntoView, { subject: node.id });
         }
 
-        const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
-        if (isAction(defaultAction)) {
-          void (defaultAction.data as () => void)();
+        const defaultAction = Graph.getActions(graph, node.id).find(
+          (action) => action.properties?.disposition === 'default',
+        );
+        if (Node.isAction(defaultAction)) {
+          void runAction(defaultAction);
         }
 
         if (!isLg) {
-          void dispatch(
-            createIntent(LayoutAction.UpdateSidebar, {
-              part: 'sidebar',
-              options: { state: 'closed' },
-            }),
-          );
+          invokeSync(LayoutOperation.UpdateSidebar, { state: 'closed' });
         }
       },
-      [graph, dispatch, isCurrent, isLg],
+      [graph, invokeSync, invokePromise, getItem, isLg, runAction],
     );
 
-    const handleBack = useCallback(
-      () =>
-        dispatch(
-          createIntent(LayoutAction.RevertWorkspace, {
-            part: 'workspace',
-            options: { revert: true },
-          }),
-        ),
-      [dispatch],
-    );
+    const handleBack = useCallback(() => invokeSync(LayoutOperation.RevertWorkspace), [invokeSync]);
 
     // TODO(wittjosiah): Factor out hook.
     useEffect(() => {
@@ -297,7 +256,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               case 'rearrange': {
                 const nextItems = sourceItems.map(({ data }) => data);
                 arrayMove(nextItems, sourceIndex, targetIndex);
-                void sourceParent?.properties.onRearrangeChildren?.(nextItems);
+                void sourceNode.properties.onRearrange?.(nextItems);
                 break;
               }
               case 'copy': {
@@ -333,9 +292,9 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         canDrop,
         canSelect,
         getProps,
-        isAlternateTree,
-        isCurrent,
-        isOpen,
+        useIsAlternateTree,
+        useIsCurrent,
+        useIsOpen,
         loadDescendents,
         onBack: handleBack,
         onOpenChange: handleOpenChange,
@@ -358,9 +317,6 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         handleOpenChange,
         handleSelect,
         handleTabChange,
-        isAlternateTree,
-        isCurrent,
-        isOpen,
         loadDescendents,
         popoverAnchorId,
         renderItemEnd,
@@ -373,7 +329,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
 
     return (
       <NavTreeContext.Provider value={navTreeContextValue}>
-        <NavTree id={ROOT_ID} root={graph.root} open={layout.sidebarOpen} ref={forwardedRef} />
+        <NavTree id={Node.RootId} root={Graph.getRoot(graph)} open={layout.sidebarOpen} ref={forwardedRef} />
       </NavTreeContext.Provider>
     );
   },

package/src/components/NavTreeDocumentTitle.tsx

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

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -3,8 +3,12 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Node } from '@dxos/app-graph';
+import { corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
 
@@ -18,7 +22,7 @@ const parent = {
     label: faker.lorem.words(2),
     icon: 'ph--circle--regular',
   },
-} satisfies NodeArg<any>;
+} satisfies Node.NodeArg<any>;
 
 // TODO(burdon): Factor out across tests.
 const menuActions = faker.helpers.multiple(
@@ -26,14 +30,15 @@ const menuActions = faker.helpers.multiple(
     ({
       id: faker.string.uuid(),
       type: 'action',
-      data: () => {
-        console.log('invoke');
-      },
+      data: () =>
+        Effect.sync(() => {
+          console.log('invoke');
+        }),
       properties: {
         label: faker.lorem.words(2),
         icon: 'ph--circle--regular',
       },
-    }) satisfies NodeArg<any>,
+    }) satisfies Node.NodeArg<any>,
   { count: 20 },
 );
 
@@ -46,7 +51,12 @@ const meta = {
     menuActions,
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
-  decorators: [withTheme],
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [...corePlugins(), RuntimePlugin()],
+    }),
+  ],
   parameters: {
     layout: 'centered',
   },

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -4,19 +4,20 @@
 
 import React from 'react';
 
-import { type Action, type Node } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
+import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
 import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
-import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
-  parent: Node;
+  parent: Node.Node;
   caller?: string;
   monolithic?: boolean;
-  menuActions?: Action[];
+  menuActions?: Node.Action[];
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
@@ -40,8 +41,10 @@ export const NavTreeItemActionDropdownMenu = ({
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(meta.id);
   const density = useDensityContext();
+  const runAction = useActionRunner();
+
   return (
-    <MenuProvider>
+    <MenuProvider onAction={runAction}>
       <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
         <DropdownMenu.Trigger asChild>
           <IconButton
@@ -59,13 +62,16 @@ export const NavTreeItemActionDropdownMenu = ({
   );
 };
 
-export const NavTreeItemMonolithicAction = ({
-  parent,
-  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
-  data: invoke,
-  baseLabel,
-}: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
+export const NavTreeItemMonolithicAction = (
+  props: Node.Action & { parent: Node.Node; onAction?: (action: Node.Action) => void; baseLabel: string },
+) => {
+  const {
+    parent,
+    properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
+    baseLabel,
+  } = props;
   const density = useDensityContext();
+  const runAction = useActionRunner();
   return (
     <IconButton
       {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
@@ -86,7 +92,7 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
 
-        void invoke?.(caller ? { parent, caller } : { parent });
+        void runAction(props, caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
     />

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,7 +4,7 @@
 
 import React, { Fragment, memo } from 'react';
 
-import { isAction } from '@dxos/app-graph';
+import { Node } from '@dxos/app-graph';
 import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { useLoadDescendents } from '../../hooks';
@@ -26,11 +26,11 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
   );
 
   const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
-    .flatMap((action) => (isAction(action) ? [action] : []))
+    .flatMap((action) => (Node.isAction(action) ? [action] : []))
     .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
   useLoadDescendents(item);
-  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+  useLoadDescendents(primaryAction && !Node.isAction(primaryAction) ? (primaryAction as Node.Node) : undefined);
 
   const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
 
@@ -43,8 +43,8 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
             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]}
+            monolithic={Node.isAction(primaryAction)}
+            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />