@dxos/plugin-navtree 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

package/src/components/{UserAccountAvatar.tsx → UserAccountAvatar/UserAccountAvatar.tsx}

@@ -15,18 +15,18 @@ export type UserAccountAvatarProps = {
   status?: AvatarStatus;
 };
 
-export const UserAccountAvatar = (props: UserAccountAvatarProps) => {
-  const fallbackValue = hexToFallback(props.userId ?? '0');
+export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAccountAvatarProps) => {
+  const fallbackValue = hexToFallback(userId ?? '0');
 
   return (
     <div className='grid place-items-center' data-joyride='welcome/account'>
       <Avatar.Root>
         <Avatar.Content
           variant='circle'
-          size={props.size ?? 12}
-          status={props.status ?? 'active'}
-          hue={props.hue || fallbackValue.hue}
-          fallback={props.emoji || fallbackValue.emoji}
+          size={size ?? 12}
+          status={status ?? 'active'}
+          hue={hue || fallbackValue.hue}
+          fallback={emoji || fallbackValue.emoji}
           data-testid='treeView.userAccount'
         />
       </Avatar.Root>

package/src/components/UserAccountAvatar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './UserAccountAvatar';

package/src/components/index.ts

@@ -3,7 +3,6 @@
 //
 
 export * from './CommandsDialog';
-export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';

package/src/components/types.ts

@@ -9,31 +9,32 @@ import type { Density } from '@dxos/react-ui';
 import type { TreeProps } from '@dxos/react-ui-list';
 import type { MaybePromise } from '@dxos/util';
 
-import { type L1PanelProps } from './L1Panels';
+import { type L1PanelProps } from './Sidebar';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 
-export type NavTreeItemColumnsProps = {
-  path: string[];
-  item: Node;
-  open: boolean;
-  density?: Density;
-};
-
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
-
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode>,
-  'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'
+  'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
 > &
   Pick<L1PanelProps, 'onBack'> & {
     tab: string;
-    onTabChange?: (node: NavTreeItemGraphNode) => void;
-    getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
+    topbar?: boolean;
+    popoverAnchorId?: string;
+    renderItemEnd?: FC<{ node: Node; open: boolean }>;
+    useItems: (
+      node?: NavTreeItemGraphNode,
+      options?: { disposition?: string; sort?: boolean },
+    ) => NavTreeItemGraphNode[];
     getActions: (node: Node) => FlattenedActions;
     loadDescendents?: (node: Node) => MaybePromise<void>;
-    renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    popoverAnchorId?: string;
-    topbar?: boolean;
     isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
     setAlternateTree?: (path: string[], open: boolean) => void;
+    onTabChange?: (node: NavTreeItemGraphNode) => void;
   };
+
+export type NavTreeItemColumnsProps = {
+  path: string[];
+  item: Node;
+  open: boolean;
+  density?: Density;
+};

package/src/hooks.ts

@@ -2,20 +2,21 @@
 // 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) => {
-  const { loadDescendents } = useNavTreeContext();
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      if (root) {
-        void loadDescendents?.(root);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [root]);
+  // 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]);
 };

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

@@ -0,0 +1,224 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
+import { log } from '@dxos/log';
+import { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
+import { faker } from '@dxos/random';
+
+export const storybookGraphBuilders: BuilderExtensions = [
+  // 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(() => []),
+        ),
+      ),
+  }),
+  // 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',
+                properties: {
+                  label: 'User Account',
+                  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',
+                properties: {
+                  label: 'Spaces',
+                  icon: 'ph--planet--regular',
+                  role: 'branch',
+                  disposition: 'collection',
+                },
+              },
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create space nodes.
+  createExtension({
+    id: 'spaces',
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `space-${i}`,
+                type: 'space',
+                properties: {
+                  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: {
+                  label: `Action ${i}`,
+                  icon: faker.properties.icon(),
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create object nodes.
+  createExtension({
+    id: 'objects',
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `object-${i}`,
+                type: 'object',
+                properties: {
+                  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: {
+                  label: `Action ${i}`,
+                  icon: faker.properties.icon(),
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+];

package/src/testing/generator.ts

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

package/src/testing/index.ts

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

package/src/translations.ts

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

package/src/util.ts

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capabilities, contributes, type PluginsContext, createIntent, LayoutAction } from '@dxos/app-framework';\nimport { createExtension, type Node } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';\n\nexport default (context: PluginsContext) =>\n  contributes(\n    Capabilities.AppGraphBuilder,\n    createExtension({\n      id: NAVTREE_PLUGIN,\n      filter: (node): node is Node<null> => node.id === 'root',\n      actions: () => [\n        {\n          id: COMMANDS_DIALOG,\n          data: async () => {\n            const { dispatchPromise: dispatch } = context.requestCapability(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    }),\n  );\n"],
-  "mappings": ";;;;;;AAIA,SAASA,cAAcC,aAAkCC,cAAcC,oBAAoB;AAC3F,SAASC,uBAAkC;AAI3C,IAAA,4BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC;EACJC,QAAQ,CAACC,SAA6BA,KAAKH,OAAO;EAClDI,SAAS,MAAM;IACb;MACEJ,IAAIK;MACJC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKb,QAAQc,kBAAkBZ,aAAaa,gBAAgB;AAC7F,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,IAAInB;UAAe;;QACpDoB,MAAM;QACNC,YAAY;UACVC,OAAO;UACPC,SAAS;QACX;MACF;IACF;;AAEJ,CAAA,CAAA;",
-  "names": ["Capabilities", "contributes", "createIntent", "LayoutAction", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "NAVTREE_PLUGIN", "filter", "node", "actions", "COMMANDS_DIALOG", "data", "dispatchPromise", "dispatch", "requestCapability", "IntentDispatcher", "createIntent", "LayoutAction", "UpdateDialog", "part", "subject", "options", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows"]
-}