@dxos/plugin-navtree 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/hooks/useNavTreeModel.ts

@@ -0,0 +1,118 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+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 { 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 { useNavTreeState } from './useNavTreeState';
+
+// TODO(wittjosiah): Move companion/hidden nodes to their own edge categories so this filter is unnecessary.
+const isVisibleChild = (node: Node.Node): boolean =>
+  node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden';
+
+/** Create an atom family for item display props keyed by path. */
+const createItemPropsFamily = (graph: ReturnType<typeof useAppGraph>['graph']) =>
+  Atom.family((pathKey: string) => {
+    const path = Path.parts(pathKey);
+    const id = Path.last(pathKey);
+    return Atom.make((get) => {
+      const nodeOpt = get(graph.node(id));
+      const node = Option.getOrElse(nodeOpt, () => undefined);
+      if (!node) {
+        return { id, label: id };
+      }
+      const safeChildren = get(graph.connections(node.id, 'child')).filter((child) => !path.includes(child.id));
+      const visibleChildren = safeChildren.filter(isVisibleChild);
+      const parentOf =
+        visibleChildren.length > 0
+          ? visibleChildren.map((child) => child.id)
+          : 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,
+        icon: node.properties.icon,
+        iconHue: node.properties.iconHue,
+        testId: node.properties.testId,
+      };
+    }).pipe(Atom.keepAlive);
+  });
+
+/** Create an atom family for outbound child IDs keyed by parent ID (pre-sorted by position on write). */
+const createChildIdsFamily = (graph: ReturnType<typeof useAppGraph>['graph']) =>
+  Atom.family((id: string) =>
+    Atom.make((get) => get(graph.connections(id, 'child')).map((child) => child.id)).pipe(Atom.keepAlive),
+  );
+
+/** Create an atom family for item resolution keyed by ID. */
+const createItemFamily = (graph: ReturnType<typeof useAppGraph>['graph']) =>
+  Atom.family((id: string) =>
+    Atom.make((get) => {
+      const node = Option.getOrElse(get(graph.node(id)), () => undefined);
+      return node && filterItems(node) ? node : undefined;
+    }).pipe(Atom.keepAlive),
+  );
+
+/** Create an atom family for open state keyed by path. */
+const createItemOpenFamily = (getItemAtom: ReturnType<typeof useNavTreeState>['getItemAtom']) =>
+  Atom.family((pathKey: string) => {
+    const path = Path.parts(pathKey);
+    const stateAtom = getItemAtom(path);
+    return Atom.make((get) => get(stateAtom).open).pipe(Atom.keepAlive);
+  });
+
+/** Create an atom family for current (selected) state keyed by path. */
+const createItemCurrentFamily = (getItemAtom: ReturnType<typeof useNavTreeState>['getItemAtom']) =>
+  Atom.family((pathKey: string) => {
+    const path = Path.parts(pathKey);
+    const stateAtom = getItemAtom(path);
+    return Atom.make((get) => get(stateAtom).current).pipe(Atom.keepAlive);
+  });
+
+/**
+ * Creates a TreeModel backed by the app graph and navtree state.
+ */
+export const useNavTreeModel = (rootId: string): TreeModel<NavTreeItemGraphNode> => {
+  const { graph } = useAppGraph();
+  const { getItemAtom } = useNavTreeState();
+
+  const itemPropsFamily = useMemo(() => createItemPropsFamily(graph), [graph]);
+  const childIdsFamily = useMemo(() => createChildIdsFamily(graph), [graph]);
+  const itemFamily = useMemo(() => createItemFamily(graph), [graph]);
+  const itemOpenFamily = useMemo(() => createItemOpenFamily(getItemAtom), [getItemAtom]);
+  const itemCurrentFamily = useMemo(() => createItemCurrentFamily(getItemAtom), [getItemAtom]);
+
+  return useMemo(
+    () => ({
+      item: (id: string) => itemFamily(id),
+      itemProps: (path: string[]) => itemPropsFamily(Path.create(...path)),
+      itemOpen: (path: string[]) => itemOpenFamily(Path.create(...path)),
+      itemCurrent: (path: string[]) => itemCurrentFamily(Path.create(...path)),
+      childIds: (parentId?: string) => childIdsFamily(parentId ?? rootId),
+    }),
+    [itemFamily, itemPropsFamily, itemOpenFamily, itemCurrentFamily, childIdsFamily, rootId],
+  );
+};

package/src/{hooks.ts → hooks/useNavTreeState.ts}

@@ -3,25 +3,11 @@
 //
 
 import { type Atom, useAtomValue } from '@effect-atom/atom-react';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { useCapability } from '@dxos/app-framework/react';
-import { type Node } from '@dxos/app-graph';
+import { useCapability } from '@dxos/app-framework/ui';
 
-import { useNavTreeContext } from './components';
-import { NavTreeCapabilities } from './types';
-
-export const useLoadDescendents = (root?: Node.Node) => {
-  const { loadDescendents } = useNavTreeContext();
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      if (root) {
-        void loadDescendents?.(root);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [root]);
-};
+import { NavTreeCapabilities } from '../types';
 
 export type UseNavTreeStateResult = {
   getItem: (path: string[]) => NavTreeCapabilities.NavTreeItemState;
@@ -43,28 +29,11 @@ export const useNavTreeState = (): UseNavTreeStateResult => {
  */
 export const useNavTreeItemState = (path: string[]): NavTreeCapabilities.NavTreeItemState => {
   const { getItemAtom } = useCapability(NavTreeCapabilities.State);
-  // Memoize the path to avoid creating new atoms on every render.
   const pathKey = useMemo(() => path.join('~'), [path]);
   const atom = useMemo(() => getItemAtom(path), [getItemAtom, pathKey]);
   return useAtomValue(atom);
 };
 
-/**
- * Hook that subscribes to the open state for a tree item.
- * Designed to be passed to Tree component as useIsOpen prop.
- */
-export const useIsOpen = (path: string[], _item?: any): boolean => {
-  return useNavTreeItemState(path).open;
-};
-
-/**
- * Hook that subscribes to the current state for a tree item.
- * Designed to be passed to Tree component as useIsCurrent prop.
- */
-export const useIsCurrent = (path: string[], _item?: any): boolean => {
-  return useNavTreeItemState(path).current;
-};
-
 /**
  * Hook that subscribes to the alternateTree state for a tree item.
  */

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/testing/app-graph-builder.ts

@@ -31,7 +31,7 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
         actions: () =>
           Effect.succeed(
             Array.from({ length: 5 }, (_, i) => ({
-              id: `app-menu/action-${i}`,
+              id: `action-${i}`,
               data: Effect.fnUntraced(function* () {
                 log.info('action', { id: 'app-menu', index: i });
               }),
@@ -130,11 +130,11 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
         actions: () =>
           Effect.succeed(
             Array.from({ length: 5 }, (_, i) => ({
-              id: `space-actions/action-${i}`,
+              id: `action-${i}`,
               data: Effect.fnUntraced(function* () {
                 log.info('action', { id: 'space-actions', index: i });
               }),
-              properties: getProperties(`space-actions/action-${i}`, {
+              properties: getProperties(`action-${i}`, {
                 label: `Action ${i}`,
                 icon: faker.properties.icon(),
               }),
@@ -179,11 +179,11 @@ export const storybookGraphBuilders = (): BuilderExtensions => {
         actions: () =>
           Effect.succeed(
             Array.from({ length: 5 }, (_, i) => ({
-              id: `object-actions/action-${i}`,
+              id: `action-${i}`,
               data: Effect.fnUntraced(function* () {
                 log.info('action', { id: 'object-actions', index: i });
               }),
-              properties: getProperties(`object-actions/action-${i}`, {
+              properties: getProperties(`action-${i}`, {
                 label: `Action ${i}`,
                 icon: faker.properties.icon(),
               }),

package/src/testing/generator.ts

@@ -17,12 +17,12 @@ import { range } from '@dxos/util';
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => Type.Obj.Any;
+  createSchema?: () => Type.AnyObj;
   createData: () => any;
 };
 
 type ObjectFactory<T> = {
-  schema?: Type.Obj.Any; // TODO(burdon): Support both typed and expando schema.
+  schema?: Type.AnyObj; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -65,7 +65,7 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
         priority: Schema.Number,
       }).pipe(
         Type.object({
-          typename: 'example.com/type/Project',
+          typename: 'com.example.type.project',
           version: '0.1.0',
         }),
       ),
@@ -94,7 +94,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): Type.Obj.Any[] {
+  get schema(): Type.AnyObj[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 

package/src/types/capabilities.ts

@@ -17,5 +17,5 @@ export namespace NavTreeCapabilities {
     setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;
   };
 
-  export const State = Capability.make<NavTreeStateStore>(`${meta.id}/capability/state`);
+  export const State = Capability.make<NavTreeStateStore>(`${meta.id}.capability.state`);
 }

package/src/types/events.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActivationEvent, Common } from '@dxos/app-framework';
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { meta } from '../meta';
 
 export namespace NavTreeEvents {
-  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(meta.id);
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(meta.id);
 }

package/src/util.ts

@@ -13,9 +13,9 @@ export const getParent = (
   path: string[],
 ): NavTreeItemGraphNode | undefined => {
   const parentId = path[path.length - 2];
-  return Graph.getConnections(graph, node.id, 'inbound').find((n: Node.Node) => n.id === parentId) as
-    | NavTreeItemGraphNode
-    | undefined;
+  return Graph.getConnections(graph, node.id, Node.childRelation('inbound')).find(
+    (n: Node.Node) => n.id === parentId,
+  ) as NavTreeItemGraphNode | undefined;
 };
 
 export const getPersistenceParent = (
@@ -80,7 +80,7 @@ export const getChildren = (
   node: NavTreeItemGraphNode,
   path: readonly string[] = [],
 ): NavTreeItemGraphNode[] => {
-  return Graph.getConnections(graph, node.id, 'outbound')
+  return Graph.getConnections(graph, node.id, 'child')
     .map((n: Node.Node) => {
       // Break cycles.
       const nextPath = [...path, node.id];
@@ -89,6 +89,20 @@ export const getChildren = (
     .filter(isNonNullable) as NavTreeItemGraphNode[];
 };
 
+/**
+ * Determines whether a node should be visible based on its disposition.
+ */
+export 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 = Node.isAction(node);
+    return !action || node.properties.disposition === 'item';
+  } else {
+    return node.properties.disposition === disposition;
+  }
+};
+
 export const l0ItemType = (item: Node.Node) => {
   if (Node.isActionLike(item)) {
     return 'action';

package/dist/lib/browser/app-graph-builder-RSMA6I22.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability, Common } from '@dxos/app-framework';\nimport { Operation } from '@dxos/operation';\nimport { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, meta } from '../../meta';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const extensions = yield* GraphBuilder.createExtension({\n      id: meta.id,\n      match: NodeMatcher.whenRoot,\n      actions: () =>\n        Effect.succeed([\n          {\n            id: COMMANDS_DIALOG,\n            data: () =>\n              Operation.invoke(Common.LayoutOperation.UpdateDialog, {\n                subject: COMMANDS_DIALOG,\n                blockAlign: 'start',\n              }),\n            properties: {\n              label: ['open commands label', { ns: meta.id }],\n              icon: 'ph--magnifying-glass--regular',\n              keyBinding: {\n                macos: 'meta+k',\n                windows: 'ctrl+k',\n              },\n            },\n          },\n        ]),\n    });\n\n    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);\n  }),\n);\n"],
-  "mappings": ";;;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,YAAYC,cAAc;AACnC,SAASC,iBAAiB;AAC1B,SAASC,cAAcC,mBAAmB;AAI1C,IAAA,4BAAeC,WAAWC,WACjBC,kBAAW,aAAA;AAChB,QAAMC,aAAa,OAAOC,aAAaC,gBAAgB;IACrDC,IAAIC,KAAKD;IACTE,OAAOC,YAAYC;IACnBC,SAAS,MACAC,eAAQ;MACb;QACEN,IAAIO;QACJC,MAAM,MACJC,UAAUC,OAAOC,OAAOC,gBAAgBC,cAAc;UACpDC,SAASP;UACTQ,YAAY;QACd,CAAA;QACFC,YAAY;UACVC,OAAO;YAAC;YAAuB;cAAEC,IAAIjB,KAAKD;YAAG;;UAC7CmB,MAAM;UACNC,YAAY;YACVC,OAAO;YACPC,SAAS;UACX;QACF;MACF;KACD;EACL,CAAA;AAEA,SAAO5B,WAAW6B,YAAYZ,OAAOjB,WAAW8B,iBAAiB3B,UAAAA;AACnE,CAAA,CAAA;",
-  "names": ["Effect", "Capability", "Common", "Operation", "GraphBuilder", "NodeMatcher", "Capability", "makeModule", "fnUntraced", "extensions", "GraphBuilder", "createExtension", "id", "meta", "match", "NodeMatcher", "whenRoot", "actions", "succeed", "COMMANDS_DIALOG", "data", "Operation", "invoke", "Common", "LayoutOperation", "UpdateDialog", "subject", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "contributes", "AppGraphBuilder"]
-}