@dxos/plugin-navtree 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/hooks.ts

@@ -2,13 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect } from 'react';
+import { type Atom, useAtomValue } from '@effect-atom/atom-react';
+import { useEffect, useMemo } from 'react';
 
+import { useCapability } from '@dxos/app-framework/react';
 import { type Node } from '@dxos/app-graph';
 
 import { useNavTreeContext } from './components';
+import { NavTreeCapabilities } from './types';
 
-export const useLoadDescendents = (root?: Node) => {
+export const useLoadDescendents = (root?: Node.Node) => {
   const { loadDescendents } = useNavTreeContext();
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
@@ -19,3 +22,52 @@ export const useLoadDescendents = (root?: Node) => {
     return () => cancelAnimationFrame(frame);
   }, [root]);
 };
+
+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;
+};
+
+/**
+ * Hook that provides access to navtree state functions.
+ * For reactive subscriptions, use `useNavTreeItemState` or `useAtomValue(getItemAtom(path))`.
+ */
+export const useNavTreeState = (): UseNavTreeStateResult => {
+  return useCapability(NavTreeCapabilities.State);
+};
+
+/**
+ * Hook that subscribes to a single navtree item's state.
+ * Use this for fine-grained reactivity.
+ */
+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.
+ */
+export const useIsAlternateTree = (path: string[], _item?: any): boolean => {
+  return useNavTreeItemState(path).alternateTree ?? false;
+};

package/src/index.ts

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

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/navtree',
   name: 'Navtree',
   description: trim`

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

@@ -2,16 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 
-import { type PluginContext } from '@dxos/app-framework';
+import { type BuilderExtensions } from '@dxos/app-graph';
 import { log } from '@dxos/log';
-import { type BuilderExtensions, ROOT_ID, createExtension } from '@dxos/plugin-graph';
+import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 import { faker } from '@dxos/random';
 
-export const storybookGraphBuilders = (context: PluginContext): BuilderExtensions => {
+export const storybookGraphBuilders = (): BuilderExtensions => {
   const propertiesCache = new Map<string, Record<string, unknown>>();
   const getProperties = (id: string, defaults: Record<string, unknown>) => {
     const cached = propertiesCache.get(id);
@@ -23,249 +22,174 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     return defaults;
   };
 
-  return [
-    // Create app menu actions.
-    createExtension({
-      id: 'app-menu',
-      actions: (node) =>
-        Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                    disposition: 'menu',
-                  },
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+  return Effect.runSync(
+    Effect.all([
+      // Create app menu actions.
+      GraphBuilder.createExtension({
+        id: 'app-menu',
+        match: NodeMatcher.whenRoot,
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `app-menu/action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'app-menu', index: i });
+              }),
+              properties: {
+                label: `Action ${i}`,
+                icon: faker.properties.icon(),
+                disposition: 'menu',
+              },
+            })),
           ),
-        ),
-    }),
-    // Create user account node.
-    createExtension({
-      id: 'user-account',
-      connector: (node) =>
-        Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
+      }),
+      // Create user account node.
+      GraphBuilder.createExtension({
+        id: 'user-account',
+        match: NodeMatcher.whenRoot,
+        connector: () =>
+          Effect.succeed([
+            {
+              id: 'user-account',
+              type: 'user-account',
+              properties: {
+                label: 'User profile',
+                icon: 'ph--user--regular',
+                disposition: 'user-account',
+                userId: '1234567890ABCDEF',
+                hue: faker.properties.hue(),
+                emoji: faker.properties.emoji(),
+                status: 'active',
+              },
+              nodes: [
                 {
-                  id: 'user-account',
-                  type: 'user-account',
+                  id: 'profile',
+                  type: 'profile',
                   properties: {
-                    label: 'User Account',
+                    label: 'Profile',
                     icon: 'ph--user--regular',
-                    disposition: 'user-account',
-                    userId: '1234567890ABCDEF',
-                    hue: faker.properties.hue(),
-                    emoji: faker.properties.emoji(),
-                    status: 'active',
                   },
-                  nodes: [
-                    {
-                      id: 'profile',
-                      type: 'profile',
-                      properties: {
-                        label: 'Profile',
-                        icon: 'ph--user--regular',
-                      },
-                    },
-                    {
-                      id: 'devices',
-                      type: 'devices',
-                      properties: {
-                        label: 'Devices',
-                        icon: 'ph--devices--regular',
-                      },
-                    },
-                    {
-                      id: 'security',
-                      type: 'security',
-                      properties: {
-                        label: 'Security',
-                        icon: 'ph--key--regular',
-                      },
-                    },
-                  ],
                 },
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-    // TODO(wittjosiah): This group node probably is unnecessary now with the flat L0 structure.
-    // Create spaces group node.
-    createExtension({
-      id: 'spaces-root',
-      position: 'hoist',
-      connector: (node) =>
-        Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
                 {
-                  id: 'spaces-root',
-                  type: 'spaces-root',
+                  id: 'devices',
+                  type: 'devices',
                   properties: {
-                    label: 'Spaces',
-                    icon: 'ph--planet--regular',
-                    role: 'branch',
-                    disposition: 'collection',
+                    label: 'Devices',
+                    icon: 'ph--devices--regular',
                   },
                 },
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-    // Create space nodes.
-    createExtension({
-      id: 'spaces',
-      connector: (node) => {
-        const count = Rx.make((get) => {
-          let value = 3;
-          const interval = setInterval(() => {
-            if (value >= 10) {
-              clearInterval(interval);
-              return;
-            }
+                {
+                  id: 'security',
+                  type: 'security',
+                  properties: {
+                    label: 'Security',
+                    icon: 'ph--key--regular',
+                  },
+                },
+              ],
+            },
+          ]),
+      }),
+      // Create space (workspace) nodes directly under root.
+      GraphBuilder.createExtension({
+        id: 'spaces',
+        match: NodeMatcher.whenRoot,
+        connector: (_, get) =>
+          Effect.sync(() => {
+            const count = Atom.make((get) => {
+              let value = 3;
+              const interval = setInterval(() => {
+                if (value >= 10) {
+                  clearInterval(interval);
+                  return;
+                }
 
-            value++;
-            get.setSelf(value);
-          }, 5000);
-          get.addFinalizer(() => clearInterval(interval));
-          return value;
-        });
+                value++;
+                get.setSelf(value);
+              }, 5000);
+              get.addFinalizer(() => clearInterval(interval));
+              return value;
+            });
 
-        return Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              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(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
-      },
-    }),
-    // Create space actions.
-    createExtension({
-      id: 'space-actions',
-      actions: (node) =>
-        Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: getProperties(`${node.id}/action-${i}`, {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+            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',
+              }),
+            }));
+          }),
+      }),
+      // Create space actions.
+      GraphBuilder.createExtension({
+        id: 'space-actions',
+        match: NodeMatcher.whenNodeType('space'),
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `space-actions/action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'space-actions', index: i });
+              }),
+              properties: getProperties(`space-actions/action-${i}`, {
+                label: `Action ${i}`,
+                icon: faker.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-    // Create object nodes.
-    createExtension({
-      id: 'objects',
-      connector: (node) => {
-        const count = Rx.make((get) => {
-          let value = 3;
-          const interval = setInterval(() => {
-            if (value >= 20) {
-              clearInterval(interval);
-              return;
-            }
+      }),
+      // Create object nodes.
+      GraphBuilder.createExtension({
+        id: 'objects',
+        match: NodeMatcher.whenNodeType('space'),
+        connector: (_, get) =>
+          Effect.sync(() => {
+            const count = Atom.make((get) => {
+              let value = 3;
+              const interval = setInterval(() => {
+                if (value >= 20) {
+                  clearInterval(interval);
+                  return;
+                }
 
-            value++;
-            get.setSelf(value);
-          }, 5000);
-          get.addFinalizer(() => clearInterval(interval));
-          return value;
-        });
+                value++;
+                get.setSelf(value);
+              }, 5000);
+              get.addFinalizer(() => clearInterval(interval));
+              return value;
+            });
 
-        return Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: get(count) }, (_, i) => ({
-                  id: `${node.id}/object-${i}`,
-                  type: 'object',
-                  properties: getProperties(`${node.id}/object-${i}`, {
-                    label: `Object ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
-      },
-    }),
-    // Create object actions.
-    createExtension({
-      id: 'object-actions',
-      actions: (node) =>
-        Rx.make((get) =>
-          Function.pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: getProperties(`${node.id}/action-${i}`, {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+            return Array.from({ length: get(count) }, (_, i) => ({
+              id: `object-${i}`,
+              type: 'object',
+              properties: getProperties(`object-${i}`, {
+                label: `Object ${i}`,
+                icon: faker.properties.icon(),
+              }),
+            }));
+          }),
+      }),
+      // Create object actions.
+      GraphBuilder.createExtension({
+        id: 'object-actions',
+        match: NodeMatcher.whenNodeType('object'),
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `object-actions/action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'object-actions', index: i });
+              }),
+              properties: getProperties(`object-actions/action-${i}`, {
+                label: `Action ${i}`,
+                icon: faker.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-  ];
+      }),
+    ]),
+  );
 };

package/src/testing/generator.ts

@@ -4,9 +4,9 @@
 
 import * as Schema from 'effect/Schema';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type Live, Obj, Type } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo/internal';
+import { type Node } from '@dxos/app-graph';
+import { Obj, Type } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 
@@ -17,12 +17,12 @@ import { range } from '@dxos/util';
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => Schema.Schema.AnyNoContext;
+  createSchema?: () => Type.Obj.Any;
   createData: () => any;
 };
 
-type ObjectFactory<T extends Live<any>> = {
-  schema?: Schema.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
+type ObjectFactory<T> = {
+  schema?: Type.Obj.Any; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -32,7 +32,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
   const schema = createSchema?.();
   return {
     schema,
-    createObject: () => (schema ? Obj.make(schema, createData()) : Obj.make(Type.Expando, createData())),
+    createObject: () => (schema ? Obj.make(schema, createData()) : Obj.make(TestSchema.Expando, createData())),
   };
 };
 
@@ -58,15 +58,17 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
 
   project: {
     createSchema: () =>
-      class ProjectType extends TypedObject({
-        typename: 'example.com/type/Project',
-        version: '0.1.0',
-      })({
+      Schema.Struct({
         title: Schema.String,
         repo: Schema.String,
         status: Schema.String,
         priority: Schema.Number,
-      }) {},
+      }).pipe(
+        Type.object({
+          typename: 'example.com/type/Project',
+          version: '0.1.0',
+        }),
+      ),
 
     createData: () => ({
       title: faker.commerce.productName(),
@@ -92,7 +94,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): Schema.Schema.AnyNoContext[] {
+  get schema(): Type.Obj.Any[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 
@@ -140,7 +142,7 @@ export const createTree = () => {
         properties: {
           label: l0.title,
           icon: 'ph--horse--regular',
-          disposition: 'collection',
+          disposition: 'workspace',
         },
         nodes: [
           ...[...Array(4)].map(() => {
@@ -173,7 +175,7 @@ export const createTree = () => {
                   },
                 },
               ],
-            } satisfies NodeArg<any>;
+            } satisfies Node.NodeArg<any>;
           }),
           {
             id: `${faker.string.uuid()}__a1`,
@@ -194,9 +196,9 @@ export const createTree = () => {
             },
           },
         ],
-      } satisfies NodeArg<any>;
+      } satisfies Node.NodeArg<any>;
     }),
-  } satisfies NodeArg<any>;
+  } satisfies Node.NodeArg<any>;
 
   return initialContent;
 };

package/src/testing/update-state.ts

@@ -4,22 +4,22 @@
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { log } from '@dxos/log';
 import { type TreeData } from '@dxos/react-ui-list';
 
-const removeItem = (tree: NodeArg<any>, source: TreeData) => {
+const removeItem = (tree: Node.NodeArg<any>, source: TreeData) => {
   const parent = getNode(tree, source.path.slice(1, -1));
-  const index = parent.nodes!.findIndex(({ id }) => id === source.id);
+  const index = parent.nodes!.findIndex((node: Node.NodeArg<any>) => node.id === source.id);
   const item = parent.nodes![index];
   parent.nodes!.splice(index, 1);
   return item;
 };
 
-const getNode = (tree: NodeArg<any>, path: string[]) => {
+const getNode = (tree: Node.NodeArg<any>, path: string[]) => {
   let node = tree;
   for (const part of path) {
-    node = node.nodes!.find(({ id }) => id === part)!;
+    node = node.nodes!.find((n: Node.NodeArg<any>) => n.id === part)!;
   }
   return node;
 };
@@ -31,7 +31,7 @@ export const updateState = ({
   source,
   target,
 }: {
-  state: NodeArg<any>;
+  state: Node.NodeArg<any>;
   instruction: Instruction;
   source: TreeData;
   target: TreeData;