@dxos/plugin-navtree 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

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

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+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 { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
+import { GraphBuilder, Node, 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);
@@ -22,249 +22,178 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     return defaults;
   };
 
-  return [
-    // Create app menu actions.
-    createExtension({
-      id: 'app-menu',
-      actions: (node) =>
-        Rx.make((get) =>
-          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: `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) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                {
-                  id: 'user-account',
-                  type: 'user-account',
+      }),
+      // Create user account node.
+      GraphBuilder.createExtension({
+        id: 'user-account',
+        match: NodeMatcher.whenRoot,
+        connector: () =>
+          Effect.succeed([
+            Node.make({
+              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: [
+                Node.make({
+                  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) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                {
-                  id: 'spaces-root',
-                  type: 'spaces-root',
+                }),
+                Node.make({
+                  id: 'devices',
+                  type: 'devices',
+                  properties: {
+                    label: 'Devices',
+                    icon: 'ph--devices--regular',
+                  },
+                }),
+                Node.make({
+                  id: 'security',
+                  type: 'security',
                   properties: {
-                    label: 'Spaces',
-                    icon: 'ph--planet--regular',
-                    role: 'branch',
-                    disposition: 'collection',
+                    label: 'Security',
+                    icon: 'ph--key--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;
-            }
+          ]),
+      }),
+      // 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) =>
-          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) =>
-          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) =>
+              Node.make({
+                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: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'space-actions', index: i });
+              }),
+              properties: getProperties(`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) =>
-          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) =>
-          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) =>
+              Node.make({
+                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: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'object-actions', index: i });
+              }),
+              properties: getProperties(`action-${i}`, {
+                label: `Action ${i}`,
+                icon: faker.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-  ];
+      }),
+    ]),
+  );
 };

package/src/testing/generator.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+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-schema';
+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.AnyObj;
   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.AnyObj; // 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: 'com.example.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.AnyObj[] {
     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;

package/src/translations.ts

@@ -4,20 +4,20 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
 export const translations = [
   {
     'en-US': {
       [meta.id]: {
-        'app menu label': 'App menu',
-        'open settings label': 'Settings',
-        'open commands label': 'Search commands',
-        'commands dialog title': 'Commands',
-        'command list input placeholder': 'Search for commands…',
-        'node actions menu invoker label': 'More options',
-        'tree item actions label': 'More actions',
-        'empty branch message': ' ',
+        'app-menu.label': 'App menu',
+        'open-settings.label': 'Settings',
+        'open-commands.label': 'Search commands',
+        'commands-dialog.title': 'Commands',
+        'command-list-input.placeholder': 'Search for commands…',
+        'node-actions-menu-invoker.label': 'More options',
+        'tree-item-actions.label': 'More actions',
+        'button-back.button': 'Back to Space',
       },
     },
   },

package/src/types/capabilities.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+
+import { Capability } from '@dxos/app-framework';
+
+import { meta } from '#meta';
+
+export namespace NavTreeCapabilities {
+  export type NavTreeItemState = { open: boolean; current: boolean; alternateTree?: boolean };
+
+  export type NavTreeStateStore = {
+    getItem: (path: string[]) => NavTreeItemState;
+    getItemAtom: (path: string[]) => Atom.Atom<NavTreeItemState>;
+    setItem: (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => void;
+  };
+
+  export const State = Capability.make<NavTreeStateStore>(`${meta.id}.capability.state`);
+}

package/src/types/events.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 = AppActivationEvents.createStateEvent(meta.id);
+}

package/src/types/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './capabilities';
+export * from './events';
+export * from './schema';