@dxos/plugin-navtree 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/testing/generator.ts

@@ -2,12 +2,12 @@
 // 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 { faker } from '@dxos/random';
+import { type Node } from '@dxos/app-graph';
+import { DXN, Obj, Type } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
+import { random } from '@dxos/random';
 import { range } from '@dxos/util';
 
 // TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
@@ -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())),
   };
 };
 
@@ -43,36 +43,33 @@ export const Priority = [1, 2, 3, 4, 5];
 export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
   document: {
     createData: () => ({
-      title: faker.lorem.sentence(3),
-      body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),
+      title: random.lorem.sentence(3),
+      body: random.lorem.sentences({ min: 1, max: random.number.int({ min: 1, max: 3 }) }),
     }),
   },
 
   image: {
     createData: () => ({
-      title: faker.lorem.sentence(3),
-      image: faker.helpers.arrayElement(data.images),
-      body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,
+      title: random.lorem.sentence(3),
+      image: random.helpers.arrayElement(data.images),
+      body: random.datatype.boolean() ? random.lorem.sentences() : undefined,
     }),
   },
 
   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.makeObject(DXN.make('com.example.type.project', '0.1.0'))),
 
     createData: () => ({
-      title: faker.commerce.productName(),
-      repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,
-      status: faker.helpers.arrayElement(Status),
-      priority: faker.helpers.arrayElement(Priority),
+      title: random.commerce.productName(),
+      repo: random.datatype.boolean({ probability: 0.3 }) ? random.internet.url() : undefined,
+      status: random.helpers.arrayElement(Status),
+      priority: random.helpers.arrayElement(Priority),
     }),
   },
 };
@@ -92,12 +89,12 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): Schema.Schema.AnyNoContext[] {
+  get schema(): Type.AnyObj[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 
   createObject({ types }: { types?: string[] } = {}) {
-    const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));
+    const type = random.helpers.arrayElement(types ?? Object.keys(this.factories));
     const factory = this.factories[type];
     return factory?.createObject();
   }
@@ -134,19 +131,19 @@ export const createTree = () => {
     nodes: [...Array(4)].map(() => {
       const l0 = generator.createObject();
       return {
-        id: faker.string.uuid(),
+        id: random.string.uuid(),
         data: null,
         type: 'category',
         properties: {
           label: l0.title,
           icon: 'ph--horse--regular',
-          disposition: 'collection',
+          disposition: 'workspace',
         },
         nodes: [
           ...[...Array(4)].map(() => {
             const l1 = generator.createObject();
             return {
-              id: faker.string.uuid(),
+              id: random.string.uuid(),
               data: null,
               type: 'document',
               properties: {
@@ -155,48 +152,48 @@ export const createTree = () => {
               },
               nodes: [
                 {
-                  id: `${faker.string.uuid()}__a1`,
+                  id: `${random.string.uuid()}__a1`,
                   data: () => {},
                   type: 'action',
                   properties: {
-                    label: faker.lorem.words(2),
+                    label: random.lorem.words(2),
                     icon: 'ph--boat--regular',
                   },
                 },
                 {
-                  id: `${faker.string.uuid()}__a2`,
+                  id: `${random.string.uuid()}__a2`,
                   data: () => {},
                   type: 'action',
                   properties: {
-                    label: faker.lorem.words(2),
+                    label: random.lorem.words(2),
                     icon: 'ph--train-simple--regular',
                   },
                 },
               ],
-            } satisfies NodeArg<any>;
+            } satisfies Node.NodeArg<any>;
           }),
           {
-            id: `${faker.string.uuid()}__a1`,
+            id: `${random.string.uuid()}__a1`,
             data: () => {},
             type: 'action',
             properties: {
-              label: faker.lorem.words(2),
+              label: random.lorem.words(2),
               icon: 'ph--boat--regular',
             },
           },
           {
-            id: `${faker.string.uuid()}__a2`,
+            id: `${random.string.uuid()}__a2`,
             data: () => {},
             type: 'action',
             properties: {
-              label: faker.lorem.words(2),
+              label: random.lorem.words(2),
               icon: 'ph--train-simple--regular',
             },
           },
         ],
-      } 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,21 +4,19 @@
 
 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': ' ',
-        'button back': 'Back to Space',
+        'app-menu.label': 'App menu',
+        '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/NavTreeCapabilities.ts

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

package/src/types/NavTreeEvents.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @import-as-namespace
+
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+
+import { meta } from '#meta';
+
+export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(meta.id);

package/src/types/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './schema';
+
+export * as NavTreeCapabilities from './NavTreeCapabilities';
+export * as NavTreeEvents from './NavTreeEvents';

package/src/{types.ts → types/schema.ts}

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type Label } from '@dxos/react-ui';
 import { type MaybePromise, type Position } from '@dxos/util';
 
-export type NavTreeItemGraphNode = Node<
+export type NavTreeItemGraphNode = Node.Node<
   any,
   Partial<
     NodeProperties & {
@@ -14,7 +14,7 @@ export type NavTreeItemGraphNode = Node<
       persistenceKey: string;
       acceptPersistenceClass: Set<string>;
       acceptPersistenceKey: Set<string>;
-      onRearrangeChildren: (nextOrder: NavTreeItemGraphNode[]) => MaybePromise<void>;
+      onRearrange: (nextOrder: unknown[]) => MaybePromise<void>;
       onCopy: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
       onTransferStart: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
       onTransferEnd: (activeNode: NavTreeItemGraphNode, destinationParent: NavTreeItemGraphNode) => MaybePromise<void>;
@@ -23,18 +23,19 @@ export type NavTreeItemGraphNode = Node<
 >;
 
 export type FlattenedActions = {
-  actions: ActionLike[];
-  groupedActions: Record<string, Action[]>;
+  actions: Node.ActionLike[];
+  groupedActions: Record<string, Node.Action[]>;
 };
 
 type SharedProperties = {
-  label: Label;
-  icon?: string;
+  testId?: string;
   disabled?: boolean;
   position?: Position;
-  testId?: string;
+  label: Label;
   className?: string;
   headingClassName?: string;
+  icon?: string;
+  iconHue?: string;
 };
 
 export type NodeProperties = SharedProperties & {
@@ -42,6 +43,10 @@ export type NodeProperties = SharedProperties & {
   error?: string;
   modified?: boolean;
   palette?: string;
+  /** Optional item count rendered as a neutral badge after the label. */
+  count?: number;
+  /** Optional count of new/modified items; when greater than zero it shows as a rose badge in place of `count`. */
+  modifiedCount?: number;
 };
 
 export type ActionProperties = SharedProperties & {

package/src/util.ts

@@ -2,22 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Action, type Node, type ReadableGraph, isActionLike } from '@dxos/app-graph';
+import { Graph, Node } from '@dxos/plugin-graph';
 import { isNonNullable } from '@dxos/util';
 
-import { type NavTreeItemGraphNode } from './types';
+import { type NavTreeItemGraphNode } from '#types';
 
 export const getParent = (
-  graph: ReadableGraph,
+  graph: Graph.ReadableGraph,
   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.getConnections(graph, node.id, Node.childRelation('inbound')).find(
+    (n: Node.Node) => n.id === parentId,
+  ) as NavTreeItemGraphNode | undefined;
 };
 
 export const getPersistenceParent = (
-  graph: ReadableGraph,
+  graph: Graph.ReadableGraph,
   node: NavTreeItemGraphNode,
   path: string[],
   persistenceClass: string,
@@ -31,7 +33,7 @@ export const getPersistenceParent = (
 };
 
 export const resolveMigrationOperation = (
-  graph: ReadableGraph,
+  graph: Graph.ReadableGraph,
   activeNode: NavTreeItemGraphNode,
   destinationPath: string[],
   destinationRelatedNode?: NavTreeItemGraphNode,
@@ -60,7 +62,7 @@ export const resolveMigrationOperation = (
 };
 
 // TODO(wittjosiah): Move into node implementation?
-export const sortActions = (actions: Action[]): Action[] =>
+export const sortActions = (actions: Node.Action[]): Node.Action[] =>
   actions.sort((a, b) => {
     if (a.properties.disposition === b.properties.disposition) {
       return 0;
@@ -74,13 +76,12 @@ export const sortActions = (actions: Action[]): Action[] =>
   });
 
 export const getChildren = (
-  graph: ReadableGraph,
+  graph: Graph.ReadableGraph,
   node: NavTreeItemGraphNode,
   path: readonly string[] = [],
 ): NavTreeItemGraphNode[] => {
-  return graph
-    .getConnections(node.id, 'outbound')
-    .map((n) => {
+  return Graph.getConnections(graph, node.id, 'child')
+    .map((n: Node.Node) => {
       // Break cycles.
       const nextPath = [...path, node.id];
       return nextPath.includes(n.id) ? undefined : (n as NavTreeItemGraphNode);
@@ -88,13 +89,23 @@ export const getChildren = (
     .filter(isNonNullable) as NavTreeItemGraphNode[];
 };
 
-export const l0ItemType = (item: Node<any>) => {
-  if (item.properties.disposition === 'collection') {
-    return 'collection';
-  } else if (isActionLike(item)) {
+/**
+ * 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') {
+    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';
-  } else if (item.properties.disposition === 'navigation') {
-    return 'link';
   } else {
     return 'tab';
   }

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+//
+// Copyright 2026 DXOS.org
+//
+
+declare module '*.mdl?raw' {
+  const content: string;
+  export default content;
+}

package/dist/lib/browser/app-graph-builder-6JDBQ25U.mjs

@@ -1,45 +0,0 @@
-import {
-  COMMANDS_DIALOG,
-  NAVTREE_PLUGIN
-} from "./chunk-ERDGQTH5.mjs";
-
-// src/capabilities/app-graph-builder.ts
-import { Rx } from "@effect-rx/rx-react";
-import { Option, pipe } from "effect";
-import { Capabilities, LayoutAction, contributes, createIntent } from "@dxos/app-framework";
-import { ROOT_ID, createExtension } from "@dxos/plugin-graph";
-var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBuilder, createExtension({
-  id: NAVTREE_PLUGIN,
-  actions: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
-    {
-      id: COMMANDS_DIALOG,
-      data: async () => {
-        const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-        await dispatch(createIntent(LayoutAction.UpdateDialog, {
-          part: "dialog",
-          subject: COMMANDS_DIALOG,
-          options: {
-            blockAlign: "start"
-          }
-        }));
-      },
-      properties: {
-        label: [
-          "open commands label",
-          {
-            ns: NAVTREE_PLUGIN
-          }
-        ],
-        icon: "ph--magnifying-glass--regular",
-        keyBinding: {
-          macos: "meta+k",
-          windows: "ctrl+k"
-        }
-      }
-    }
-  ]), Option.getOrElse(() => [])))
-}));
-export {
-  app_graph_builder_default as default
-};
-//# sourceMappingURL=app-graph-builder-6JDBQ25U.mjs.map

package/dist/lib/browser/app-graph-builder-6JDBQ25U.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, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { ROOT_ID, createExtension } 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,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,SAASC,uBAAuB;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", "LayoutAction", "contributes", "createIntent", "ROOT_ID", "createExtension", "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-ERDGQTH5.mjs

@@ -1,16 +0,0 @@
-// src/meta.ts
-var NAVTREE_PLUGIN = "dxos.org/plugin/navtree";
-var KEY_BINDING = "KeyBinding";
-var COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
-var meta = {
-  id: NAVTREE_PLUGIN,
-  name: "Navtree"
-};
-
-export {
-  NAVTREE_PLUGIN,
-  KEY_BINDING,
-  COMMANDS_DIALOG,
-  meta
-};
-//# sourceMappingURL=chunk-ERDGQTH5.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';\n\n// TODO(wittjosiah): Factor out.\nexport const KEY_BINDING = 'KeyBinding';\n// TODO(wittjosiah): Factor out.\nexport const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;\n\nexport const meta: PluginMeta = {\n  id: NAVTREE_PLUGIN,\n  name: 'Navtree',\n};\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAEpB,IAAMC,kBAAkB,GAAGF,cAAAA;AAE3B,IAAMG,OAAmB;EAC9BC,IAAIJ;EACJK,MAAM;AACR;",
-  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "COMMANDS_DIALOG", "meta", "id", "name"]
-}