@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/hooks.ts

@@ -2,21 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-// import { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 
-// import { useNavTreeContext } from './components';
+import { useNavTreeContext } from './components';
 
 export const useLoadDescendents = (root?: Node) => {
-  // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
-  // const { loadDescendents } = useNavTreeContext();
-  // useEffect(() => {
-  //   const frame = requestAnimationFrame(() => {
-  //     if (root) {
-  //       void loadDescendents?.(root);
-  //     }
-  //   });
-  //   return () => cancelAnimationFrame(frame);
-  // }, [root]);
+  const { loadDescendents } = useNavTreeContext();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [root]);
 };

package/src/stories/Graph.stories.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { batch } from '@preact/signals-core';
+import { type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
+
+import { Graph, ROOT_ID, type Node } from '@dxos/app-graph';
+import { registerSignalsRuntime } from '@dxos/echo-signals/react';
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { faker } from '@dxos/random';
+import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
+import { Path } from '@dxos/react-ui-list';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { StorybookNavTree } from './StorybookNavTree';
+import { getActions, getChildren } from '../util';
+
+faker.seed(3);
+registerSignalsRuntime();
+
+const createGraph = () => {
+  const graph = new Graph();
+
+  batch(() => {
+    (graph as any)._addNode({
+      id: ROOT_ID,
+      nodes: [...Array(2)].map((_, i) => ({
+        id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+        properties: { index: `a${i}`, label: faker.lorem.words(2), description: faker.lorem.sentence() },
+        nodes: [...Array(2)].map((_, j) => ({
+          id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+          properties: { index: `a${j}`, label: faker.lorem.words(2), description: faker.lorem.sentence() },
+          nodes: [...Array(2)].map((_, k) => ({
+            id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+            properties: { index: `a${k}`, label: faker.lorem.words(2), description: faker.lorem.sentence() },
+          })),
+        })),
+      })),
+    });
+  });
+
+  return graph;
+};
+
+const graph = createGraph();
+const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
+
+export const Default = {};
+
+const meta: Meta<typeof StorybookNavTree> = {
+  title: 'plugins/plugin-navtree/Graph',
+  component: StorybookNavTree,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  render: (args) => {
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => isTreeData(source.data),
+        onDrop: ({ location, source }) => {
+          // Didn't drop on anything.
+          if (!location.current.dropTargets.length) {
+            return;
+          }
+
+          const target = location.current.dropTargets[0];
+
+          const instruction: Instruction | null = extractInstruction(target.data);
+          if (instruction !== null) {
+            // TODO(wittjosiah): Implement drop logic.
+            console.log('update', instruction);
+          }
+        },
+      });
+    }, []);
+
+    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),
+    getProps: (node: Node, path: string[]) => {
+      const children = getChildren(graph, node, undefined, path);
+      const parentOf =
+        children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+      return {
+        id: node.id,
+        label: node.properties.label ?? node.id,
+        icon: node.properties.icon,
+        parentOf,
+      } satisfies PropsFromTreeItem;
+    },
+    isOpen: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const value = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, value);
+      }
+
+      return value.open;
+    },
+    isCurrent: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const value = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, value);
+      }
+
+      return value.current;
+    },
+    onOpenChange: ({ path: _path, open }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.open = open;
+    },
+    onSelect: ({ path: _path, current }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.current = current;
+    },
+  },
+};
+
+export default meta;

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/testing/generator.ts

@@ -2,11 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
-
 import { type NodeArg } from '@dxos/app-graph';
-import { TypedObject } from '@dxos/echo-schema';
-import { live, type Live } from '@dxos/live-object';
+import { S, TypedObject } from '@dxos/echo-schema';
+import { create, type ReactiveObject } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 
@@ -17,12 +15,12 @@ import { range } from '@dxos/util';
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => Schema.Schema.AnyNoContext;
+  createSchema?: () => S.Schema.AnyNoContext;
   createData: () => any;
 };
 
-type ObjectFactory<T extends Live<any>> = {
-  schema?: Schema.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
+type ObjectFactory<T extends ReactiveObject<any>> = {
+  schema?: S.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -32,7 +30,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
   const schema = createSchema?.();
   return {
     schema,
-    createObject: () => (schema ? live(schema, createData()) : live(createData())),
+    createObject: () => (schema ? create(schema, createData()) : create(createData())),
   };
 };
 
@@ -59,10 +57,10 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
   project: {
     createSchema: () =>
       class ProjectType extends TypedObject({ typename: 'example.com/type/Project', version: '0.1.0' })({
-        title: Schema.String,
-        repo: Schema.String,
-        status: Schema.String,
-        priority: Schema.Number,
+        title: S.String,
+        repo: S.String,
+        status: S.String,
+        priority: S.Number,
       }) {},
 
     createData: () => ({
@@ -89,7 +87,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): Schema.Schema.AnyNoContext[] {
+  get schema(): S.Schema.AnyNoContext[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 
@@ -133,11 +131,10 @@ export const createTree = () => {
       return {
         id: faker.string.uuid(),
         data: null,
-        type: 'category',
+        type: 'collection',
         properties: {
           label: l0.title,
           icon: 'ph--horse--regular',
-          disposition: 'collection',
         },
         nodes: [
           ...[...Array(4)].map(() => {

package/src/testing/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './app-graph-builder';
 export * from './generator';
 export * from './update-state';

package/src/translations.ts

@@ -8,7 +8,6 @@ export default [
   {
     'en-US': {
       [NAVTREE_PLUGIN]: {
-        'app menu label': 'App menu',
         'open settings label': 'Settings',
         'open commands label': 'Search commands',
         'commands dialog title': 'Commands',

package/src/util.ts

@@ -2,22 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Action, type Node, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
+import {
+  type Action,
+  type Node,
+  type NodeFilter,
+  type Graph,
+  ACTION_TYPE,
+  ACTION_GROUP_TYPE,
+  isAction,
+  isActionLike,
+} from '@dxos/app-graph';
 import { isNonNullable } from '@dxos/util';
 
 import { type FlattenedActions, type NavTreeItemGraphNode } from './types';
 
 export const getParent = (
-  graph: ReadableGraph,
+  graph: Graph,
   node: NavTreeItemGraphNode,
   path: string[],
 ): NavTreeItemGraphNode | undefined => {
   const parentId = path[path.length - 2];
-  return graph.getConnections(node.id, 'inbound').find((n) => n.id === parentId) as NavTreeItemGraphNode | undefined;
+  return graph.nodes(node, { relation: 'inbound' }).find((n) => n.id === parentId) as NavTreeItemGraphNode | undefined;
 };
 
 export const getPersistenceParent = (
-  graph: ReadableGraph,
+  graph: Graph,
   node: NavTreeItemGraphNode,
   path: string[],
   persistenceClass: string,
@@ -31,7 +40,7 @@ export const getPersistenceParent = (
 };
 
 export const resolveMigrationOperation = (
-  graph: ReadableGraph,
+  graph: Graph,
   activeNode: NavTreeItemGraphNode,
   destinationPath: string[],
   destinationRelatedNode?: NavTreeItemGraphNode,
@@ -74,12 +83,13 @@ export const sortActions = (actions: Action[]): Action[] =>
   });
 
 export const getChildren = (
-  graph: ReadableGraph,
+  graph: Graph,
   node: NavTreeItemGraphNode,
+  filter?: NodeFilter,
   path: readonly string[] = [],
 ): NavTreeItemGraphNode[] => {
   return graph
-    .getConnections(node.id, 'outbound')
+    .nodes(node, { relation: 'outbound', filter })
     .map((n) => {
       // Break cycles.
       const nextPath = [...path, node.id];
@@ -88,8 +98,8 @@ export const getChildren = (
     .filter(isNonNullable) as NavTreeItemGraphNode[];
 };
 
-export const getActions = (graph: ReadableGraph, node: Node): FlattenedActions => {
-  return graph.getActions(node.id).reduce(
+export const getActions = (graph: Graph, node: Node): FlattenedActions => {
+  return graph.actions(node).reduce(
     (acc: FlattenedActions, arg) => {
       if (arg.properties.disposition === 'item') {
         return acc;
@@ -97,7 +107,7 @@ export const getActions = (graph: ReadableGraph, node: Node): FlattenedActions =
 
       acc.actions.push(arg);
       if (!isAction(arg)) {
-        const actionGroup = graph.getActions(arg.id);
+        const actionGroup = graph.actions(arg);
         acc.groupedActions[arg.id] = actionGroup;
       }
       return acc;
@@ -106,6 +116,18 @@ export const getActions = (graph: ReadableGraph, node: Node): FlattenedActions =
   );
 };
 
+export const expandChildrenAndActions = (graph: Graph, node: Node) => {
+  return Promise.all([expandChildren(graph, node), expandActions(graph, node)]);
+};
+
+export const expandChildren = (graph: Graph, node: Node) => {
+  return graph.expand(node, 'outbound');
+};
+
+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';

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, contributes, type PluginContext, createIntent, LayoutAction } from '@dxos/app-framework';\nimport { createExtension, ROOT_ID } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';\n\nexport default (context: PluginContext) =>\n  contributes(\n    Capabilities.AppGraphBuilder,\n    createExtension({\n      id: NAVTREE_PLUGIN,\n      actions: (node) =>\n        Rx.make((get) =>\n          pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => [\n              {\n                id: COMMANDS_DIALOG,\n                data: async () => {\n                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n                  await dispatch(\n                    createIntent(LayoutAction.UpdateDialog, {\n                      part: 'dialog',\n                      subject: COMMANDS_DIALOG,\n                      options: {\n                        blockAlign: 'start',\n                      },\n                    }),\n                  );\n                },\n                properties: {\n                  label: ['open commands label', { ns: NAVTREE_PLUGIN }],\n                  icon: 'ph--magnifying-glass--regular',\n                  keyBinding: {\n                    macos: 'meta+k',\n                    windows: 'ctrl+k',\n                  },\n                },\n              },\n            ]),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  );\n"],
-  "mappings": ";;;;;;AAIA,SAASA,UAAU;AACnB,SAASC,QAAQC,YAAY;AAE7B,SAASC,cAAcC,aAAiCC,cAAcC,oBAAoB;AAC1F,SAASC,iBAAiBC,eAAe;AAIzC,IAAA,4BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC;EACJC,SAAS,CAACC,SACRC,GAAGC,KAAK,CAACC,QACPC,KACED,IAAIH,IAAAA,GACJK,OAAOC,QAAQ,CAACN,UAAUA,MAAKH,OAAOU,UAAUF,OAAOG,KAAKR,KAAAA,IAAQK,OAAOI,KAAI,CAAA,GAC/EJ,OAAOK,IAAI,MAAM;IACf;MACEb,IAAIc;MACJC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKtB,QAAQuB,cAAcrB,aAAasB,gBAAgB;AACzF,cAAMF,SACJG,aAAaC,aAAaC,cAAc;UACtCC,MAAM;UACNC,SAASV;UACTW,SAAS;YACPC,YAAY;UACd;QACF,CAAA,CAAA;MAEJ;MACAC,YAAY;QACVC,OAAO;UAAC;UAAuB;YAAEC,IAAI5B;UAAe;;QACpD6B,MAAM;QACNC,YAAY;UACVC,OAAO;UACPC,SAAS;QACX;MACF;IACF;GACD,GACDzB,OAAO0B,UAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
-  "names": ["Rx", "Option", "pipe", "Capabilities", "contributes", "createIntent", "LayoutAction", "createExtension", "ROOT_ID", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "NAVTREE_PLUGIN", "actions", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "ROOT_ID", "some", "none", "map", "COMMANDS_DIALOG", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "LayoutAction", "UpdateDialog", "part", "subject", "options", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "getOrElse"]
-}

package/dist/lib/browser/chunk-TLQLMZXU.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/capabilities.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineCapability } from '@dxos/app-framework';\nimport { type Live } from '@dxos/live-object';\n\nimport { NAVTREE_PLUGIN } from '../meta';\nimport { type NavTreeItemGraphNode } from '../types';\n\nexport namespace NavTreeCapabilities {\n  export const State = defineCapability<{\n    state: Map<string, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>;\n    getItem: (path: string[]) => Live<{ open: boolean; current: boolean; alternateTree?: boolean }>;\n    setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;\n    isOpen: (path: string[], item: NavTreeItemGraphNode) => boolean;\n    isCurrent: (path: string[], item: NavTreeItemGraphNode) => boolean;\n    isAlternateTree: (path: string[], item: NavTreeItemGraphNode) => boolean;\n  }>(`${NAVTREE_PLUGIN}/capability/state`);\n}\n"],
-  "mappings": ";;;;;AAIA,SAASA,wBAAwB;;UAMhBC,sBAAAA;uBACFC,QAAQC,iBAOlB,GAAGC,cAAAA,mBAAiC;AACzC,GATiBH,wBAAAA,sBAAAA,CAAAA,EAAAA;",
-  "names": ["defineCapability", "NavTreeCapabilities", "State", "defineCapability", "NAVTREE_PLUGIN"]
-}