@dxos/plugin-navtree 0.6.8-main.046e6cf

package/dist/types/src/translations.d.ts

@@ -0,0 +1,27 @@
+declare const _default: ({
+    'en-US': {
+        "react-ui-navtree": {
+            "tree item actions label": string;
+            "tree item searchlist input placeholder": string;
+            "empty branch message": string;
+        };
+    };
+} | {
+    'en-US': {
+        "dxos.org/plugin/navtree": {
+            'open settings label': string;
+            'open commands label': string;
+            'commands dialog title': string;
+            'command list input placeholder': string;
+            'node actions menu invoker label': string;
+            'warning title': string;
+            'technology preview message': string;
+            'learn more label': string;
+            'released message': string;
+            'see release label': string;
+            'powered by dxos message': string;
+        };
+    };
+})[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAmBE"}

package/dist/types/src/util.d.ts

@@ -0,0 +1,32 @@
+import { type Action, type Node, type NodeFilter, type Graph } from '@dxos/app-graph';
+import { type NavTreeItemNode, type NavTreeItemNodeProperties, type OpenItemIds } from '@dxos/react-ui-navtree';
+import { type MaybePromise } from '@dxos/util';
+export type NavTreeItemGraphNode = Node<any, NavTreeItemNodeProperties & Partial<{
+    persistenceClass: string;
+    persistenceKey: string;
+    acceptPersistenceClass: Set<string>;
+    acceptPersistenceKey: Set<string>;
+    onRearrangeChildren: (nextOrder: NavTreeItemGraphNode[]) => MaybePromise<void>;
+    onCopy: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
+    onTransferStart: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
+    onTransferEnd: (activeNode: NavTreeItemGraphNode, destinationParent: NavTreeItemGraphNode) => MaybePromise<void>;
+}>>;
+export type NavTreeItem = NavTreeItemNode<NavTreeItemGraphNode>;
+export declare const getParent: (graph: Graph, node: NavTreeItemGraphNode, path: string[]) => NavTreeItemGraphNode | undefined;
+export declare const getPersistenceParent: (graph: Graph, node: NavTreeItemGraphNode, path: string[], persistenceClass: string) => NavTreeItemGraphNode | null;
+export declare const resolveMigrationOperation: (graph: Graph, activeNode: NavTreeItemGraphNode, destinationPath: string[], destinationRelatedNode?: NavTreeItemGraphNode) => "transfer" | "copy" | "reject";
+export declare const sortActions: (actions: Action[]) => Action[];
+export declare const getTreeItemNode: (treeItems: NavTreeItemNode[], path?: string[]) => NavTreeItemNode | undefined;
+export declare const getChildren: (graph: Graph, node: NavTreeItemGraphNode, filter?: NodeFilter, path?: string[]) => NavTreeItemGraphNode[];
+type FlattenedActions = Required<Pick<NavTreeItemNode, 'actions' | 'groupedActions'>>;
+export declare const getActions: (graph: Graph, node: NavTreeItemGraphNode) => FlattenedActions;
+export declare const expandChildrenAndActions: (graph: Graph, node: Node) => Promise<[void, [void, void]]>;
+export declare const expandChildren: (graph: Graph, node: Node) => Promise<void>;
+export declare const expandActions: (graph: Graph, node: Node) => Promise<[void, void]>;
+/**
+ * Get a reactive tree node from a graph node.
+ */
+export declare const treeItemsFromRootNode: (graph: Graph, rootNode: NavTreeItemGraphNode, openItemIds: OpenItemIds, path?: string[], filter?: NodeFilter) => NavTreeItem[];
+export declare const expandOpenGraphNodes: (graph: Graph, openItemIds: OpenItemIds) => Promise<[void, [void, void]][]>;
+export {};
+//# sourceMappingURL=util.d.ts.map

package/dist/types/src/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,UAAU,EACf,KAAK,KAAK,EAIX,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,yBAAyB,EAC9B,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,YAAY,CAAC;AAE5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,GAAG,EACH,yBAAyB,GACvB,OAAO,CAAC;IACN,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpC,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,mBAAmB,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/E,MAAM,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACjF,eAAe,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1F,aAAa,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,oBAAoB,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAClH,CAAC,CACL,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,oBAAoB,CAAC,CAAC;AAEhE,eAAO,MAAM,SAAS,UACb,KAAK,QACN,oBAAoB,QACpB,MAAM,EAAE,KACb,oBAAoB,GAAG,SAGzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,UACxB,KAAK,QACN,oBAAoB,QACpB,MAAM,EAAE,oBACI,MAAM,KACvB,oBAAoB,GAAG,IAOzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC7B,KAAK,cACA,oBAAoB,mBACf,MAAM,EAAE,2BACA,oBAAoB,KAC5C,UAAU,GAAG,MAAM,GAAG,QAsBxB,CAAC;AAGF,eAAO,MAAM,WAAW,YAAa,MAAM,EAAE,KAAG,MAAM,EAWlD,CAAC;AAEL,eAAO,MAAM,eAAe,cAAe,eAAe,EAAE,SAAS,MAAM,EAAE,KAAG,eAAe,GAAG,SAQjG,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,KAAK,QACN,oBAAoB,WACjB,UAAU,SACb,MAAM,EAAE,KACb,oBAAoB,EAStB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC;AAEtF,eAAO,MAAM,UAAU,UAAW,KAAK,QAAQ,oBAAoB,KAAG,gBAYrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,KAAK,QAAQ,IAAI,kCAEhE,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,KAAK,QAAQ,IAAI,kBAEtD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,KAAK,QAAQ,IAAI,0BAErD,CAAC;AAmDF;;GAEG;AACH,eAAO,MAAM,qBAAqB,UACzB,KAAK,YACF,oBAAoB,eACjB,WAAW,SAClB,MAAM,EAAE,WACL,UAAU,KAClB,WAAW,EAEb,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,KAAK,eAAe,WAAW,oCAS1E,CAAC"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@dxos/plugin-navtree",
+  "version": "0.6.8-main.046e6cf",
+  "description": "DXOS Surface plugin for a tree view visualization of the graph.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "types": "./dist/types/src/meta.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact/signals-core": "^1.6.0",
+    "date-fns": "^3.3.1",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/app-graph": "0.6.8-main.046e6cf",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/debug": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/keyboard": "0.6.8-main.046e6cf",
+    "@dxos/log": "0.6.8-main.046e6cf",
+    "@dxos/local-storage": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/plugin-graph": "0.6.8-main.046e6cf",
+    "@dxos/plugin-observability": "0.6.8-main.046e6cf",
+    "@dxos/plugin-theme": "0.6.8-main.046e6cf",
+    "@dxos/protocols": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-deck": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-mosaic": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-navtree": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-searchlist": "0.6.8-main.046e6cf",
+    "@dxos/util": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/echo-signals": "0.6.8-main.046e6cf",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/NavTreePlugin.tsx

@@ -0,0 +1,262 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { MagnifyingGlass, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import {
+  type GraphBuilderProvides,
+  resolvePlugin,
+  type MetadataRecordsProvides,
+  type PluginDefinition,
+  type SurfaceProvides,
+  type TranslationsProvides,
+  type Plugin,
+  type IntentResolverProvides,
+  parseIntentPlugin,
+  LayoutAction,
+  type GraphProvides,
+  parseGraphPlugin,
+  NavigationAction,
+} from '@dxos/app-framework';
+import { createExtension, type Graph, isAction, isGraphNode, type Node } from '@dxos/app-graph';
+import { Keyboard } from '@dxos/keyboard';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { Path } from '@dxos/react-ui-mosaic';
+import { type OpenItemIds } from '@dxos/react-ui-navtree';
+import { getHostPlatform } from '@dxos/util';
+
+import {
+  CommandsDialogContent,
+  NODE_TYPE,
+  NavBarStart,
+  NavTreeContainer,
+  NavTreeDocumentTitle,
+  NotchStart,
+} from './components';
+import { CommandsTrigger } from './components/CommandsTrigger';
+import meta, { KEY_BINDING, NAVTREE_PLUGIN } from './meta';
+import translations from './translations';
+import { expandOpenGraphNodes, getActions, getChildren, type NavTreeItem, type NavTreeItemGraphNode } from './util';
+
+export type NavTreePluginProvides = SurfaceProvides &
+  MetadataRecordsProvides &
+  GraphBuilderProvides &
+  TranslationsProvides &
+  IntentResolverProvides;
+
+type NavTreeState = { root?: NavTreeItemGraphNode; openItemIds: OpenItemIds };
+
+export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
+  const state = new LocalStorageStore<NavTreeState>('dxos.org/settings/navtree', {
+    // TODO(thure): Do this dynamically.
+    openItemIds: { root: true, 'dxos.org/plugin/space-spaces': true, 'dxos.org/plugin/files': true },
+  });
+
+  let graphPlugin: Plugin<GraphProvides> | undefined;
+  let graph: Graph | undefined;
+
+  const handleOpenItemIdsChange = (nextOpenItemIds: OpenItemIds) => {
+    // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
+    state.values.openItemIds = nextOpenItemIds;
+    if (graph) {
+      void expandOpenGraphNodes(graph, nextOpenItemIds);
+    }
+  };
+
+  return {
+    meta,
+    ready: async (plugins) => {
+      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      graph = graphPlugin?.provides.graph;
+      if (!graph) {
+        return;
+      }
+
+      state.values.root = graph.root as NavTreeItemGraphNode;
+      getChildren(graph, state.values.root);
+      getActions(graph, state.values.root);
+
+      state.prop({ key: 'openItemIds', storageKey: 'openItemIds', type: LocalStorageStore.json<OpenItemIds>() });
+
+      void expandOpenGraphNodes(graph, state.values.openItemIds);
+
+      // TODO(wittjosiah): Factor out.
+      // TODO(wittjosiah): Handle removal of actions.
+      graph.subscribeTraverse({
+        visitor: (node, path) => {
+          let shortcut: string | undefined;
+          if (typeof node.properties.keyBinding === 'object') {
+            const availablePlatforms = Object.keys(node.properties.keyBinding);
+            const platform = getHostPlatform();
+            shortcut = availablePlatforms.includes(platform)
+              ? node.properties.keyBinding[platform]
+              : platform === 'ios'
+                ? node.properties.keyBinding.macos // Fallback to macos if ios-specific bindings not provided.
+                : platform === 'linux' || platform === 'unknown'
+                  ? node.properties.keyBinding.windows // Fallback to windows if platform-specific bindings not provided.
+                  : undefined;
+          } else {
+            shortcut = node.properties.keyBinding;
+          }
+
+          if (shortcut && isAction(node)) {
+            Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
+              shortcut,
+              handler: () => {
+                void node.data({ node, caller: KEY_BINDING });
+              },
+              data: node.properties.label,
+            });
+          }
+        },
+      });
+
+      // TODO(burdon): Create context and plugin.
+      Keyboard.singleton.initialize();
+      Keyboard.singleton.setCurrentContext(graphPlugin?.provides.graph.root.id);
+    },
+    unload: async () => {
+      Keyboard.singleton.destroy();
+    },
+    provides: {
+      metadata: {
+        records: {
+          [NODE_TYPE]: {
+            parse: (item: NavTreeItem, type: string) => {
+              switch (type) {
+                case 'node':
+                  return item.node;
+                case 'object':
+                  return item.node.data;
+                case 'view-object':
+                  return { id: `${item.id}-view`, object: item.node.data };
+              }
+            },
+          },
+        },
+      },
+      surface: {
+        component: ({ data, role }) => {
+          switch (data.component) {
+            case `${NAVTREE_PLUGIN}/Commands`: {
+              const selected = typeof data.subject === 'string' ? data.subject : undefined;
+              return <CommandsDialogContent selected={selected} />;
+            }
+          }
+
+          switch (role) {
+            case 'navigation':
+              if (state.values.root && state.values.openItemIds) {
+                return (
+                  <NavTreeContainer
+                    root={state.values.root}
+                    activeIds={data.activeIds as Set<string>}
+                    openItemIds={state.values.openItemIds}
+                    onOpenItemIdsChange={handleOpenItemIdsChange}
+                    attended={data.attended as Set<string>}
+                    popoverAnchorId={data.popoverAnchorId as string}
+                  />
+                );
+              }
+              break;
+
+            case 'document-title': {
+              return <NavTreeDocumentTitle node={isGraphNode(data.activeNode) ? data.activeNode : undefined} />;
+            }
+
+            case 'navbar-start': {
+              if (state.values.root && data.activeNode) {
+                return {
+                  node: (
+                    <NavBarStart
+                      activeNode={data.activeNode as Node}
+                      popoverAnchorId={data.popoverAnchorId as string | undefined}
+                    />
+                  ),
+                  disposition: 'hoist',
+                };
+              }
+              break;
+            }
+
+            case 'notch-start':
+              return <NotchStart />;
+
+            case 'search-input':
+              return {
+                node: <CommandsTrigger />,
+                disposition: 'fallback',
+              };
+          }
+
+          return null;
+        },
+      },
+      intent: {
+        resolver: (intent) => {
+          switch (intent.action) {
+            case NavigationAction.EXPOSE: {
+              if (graph && intent.data?.id) {
+                const path = graph.getPath({ target: intent.data.id });
+                if (Array.isArray(path)) {
+                  const additionalOpenItems = [...Array(path.length - 1)].reduce((acc: OpenItemIds, _, index) => {
+                    const itemId = Path.create(...path.slice(1, index + 1));
+                    if (itemId.length > 0) {
+                      acc[itemId] = true;
+                    }
+                    return acc;
+                  }, {});
+                  state.values.openItemIds = {
+                    ...additionalOpenItems,
+                    ...state.values.openItemIds,
+                  };
+                }
+              }
+              break;
+            }
+          }
+        },
+      },
+      graph: {
+        builder: (plugins) => {
+          // TODO(burdon): Move to separate plugin (for keys and command k). Move bindings from LayoutPlugin.
+          const intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+
+          return [
+            createExtension({
+              id: NAVTREE_PLUGIN,
+              filter: (node): node is Node<null> => node.id === 'root',
+              actions: () => [
+                {
+                  id: 'dxos.org/plugin/navtree/open-commands',
+                  data: async () => {
+                    await intentPlugin?.provides.intent.dispatch({
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        component: `${NAVTREE_PLUGIN}/Commands`,
+                        dialogBlockAlign: 'start',
+                      },
+                    });
+                  },
+                  properties: {
+                    label: ['open commands label', { ns: NAVTREE_PLUGIN }],
+                    icon: (props: IconProps) => <MagnifyingGlass {...props} />,
+                    iconSymbol: 'ph--magnifying-glass--regular',
+                    keyBinding: {
+                      macos: 'meta+k',
+                      windows: 'ctrl+k',
+                    },
+                  },
+                },
+              ],
+            }),
+          ];
+        },
+      },
+      translations,
+    },
+  };
+};

package/src/components/CommandsDialog.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotOutline } from '@phosphor-icons/react';
+import React, { useMemo, useState } from 'react';
+
+import { useIntentDispatcher, LayoutAction } from '@dxos/app-framework';
+import { type ActionLike, isActionGroup, isAction } from '@dxos/app-graph';
+import { Keyboard, keySymbols } from '@dxos/keyboard';
+import { useGraph } from '@dxos/plugin-graph';
+import { Button, Dialog, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+import { getHostPlatform } from '@dxos/util';
+
+import { KEY_BINDING, NAVTREE_PLUGIN } from '../meta';
+
+// TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
+export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const [selected, setSelected] = useState<string | undefined>(initial);
+  const dispatch = useIntentDispatcher();
+  const { graph } = useGraph();
+
+  // Traverse graph.
+  // TODO(burdon): Factor out commonality with shortcut dialog.
+  const allActions = useMemo(() => {
+    // TODO(burdon): Get from navtree (not keyboard).
+    const current = Keyboard.singleton.getCurrentContext();
+    const actionMap = new Set<string>();
+    const actions: ActionLike[] = [];
+    graph?.traverse({
+      visitor: (node, path) => {
+        if (
+          (isAction(node) || isActionGroup(node)) &&
+          !actionMap.has(node.id) &&
+          current.startsWith(path.slice(0, -1).join('/'))
+        ) {
+          actionMap.add(node.id);
+          actions.push(node);
+        }
+      },
+    });
+
+    actions.sort((a, b) => {
+      return toLocalizedString(a.properties.label, t)
+        ?.toLowerCase()
+        .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+    });
+
+    // console.log(JSON.stringify(actions, undefined, 2));
+    return actions;
+  }, [graph]);
+
+  const group = allActions.find(({ id }) => id === selected);
+  const actions = isActionGroup(group) ? graph.actions(group) : allActions;
+
+  return (
+    <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden mbs-12']}>
+      <Dialog.Title>{t('commands dialog title', { ns: NAVTREE_PLUGIN })}</Dialog.Title>
+
+      {/* TODO(burdon): BUG: Overscrolls container. */}
+      <SearchList.Root label={t('command list input placeholder')} classNames='flex flex-col grow overflow-hidden my-2'>
+        <SearchList.Input placeholder={t('command list input placeholder')} classNames='px-1 my-2' />
+        <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+          {actions?.map((action) => {
+            const label = toLocalizedString(action.properties.label, t);
+            const shortcut =
+              typeof action.properties.keyBinding === 'string'
+                ? action.properties.keyBinding
+                : action.properties.keyBinding?.[getHostPlatform()];
+            const Icon = action.properties.icon ?? DotOutline;
+            return (
+              <SearchList.Item
+                value={label}
+                key={action.id}
+                onSelect={() => {
+                  if (action.properties.disabled) {
+                    return;
+                  }
+
+                  if (isActionGroup(action)) {
+                    setSelected(action.id);
+                    return;
+                  }
+
+                  void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'dialog', state: false } });
+                  setTimeout(() => {
+                    const node = graph.nodes(group ?? action, { relation: 'inbound' })[0];
+                    void (node && isAction(action) && action.data({ node, caller: KEY_BINDING }));
+                  });
+                }}
+                classNames='flex items-center gap-2'
+                disabled={action.properties.disabled}
+                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+              >
+                <Icon className={mx(getSize(4), 'shrink-0', !action.properties.icon && 'invisible')} />
+                <span className='grow truncate'>{label}</span>
+                {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
+              </SearchList.Item>
+            );
+          })}
+        </SearchList.Content>
+      </SearchList.Root>
+
+      <Dialog.Close asChild>
+        <Button variant='primary' classNames='mbs-2'>
+          {t('close label', { ns: 'os' })}
+        </Button>
+      </Dialog.Close>
+    </Dialog.Content>
+  );
+};

package/src/components/CommandsTrigger.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import React from 'react';
+
+import { LayoutAction, useIntent } from '@dxos/app-framework';
+import { Button, useTranslation } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+import { NAVTREE_PLUGIN } from '../meta';
+
+// TODO(thure): Refactor to be handled by a more appropriate plugin.
+export const CommandsTrigger = () => {
+  const { dispatch } = useIntent();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  return (
+    <Button
+      classNames='pis-3 pie-2 gap-2 mli-1 mbs-1 min-bs-0 bs-[--rail-action] justify-start'
+      onClick={() =>
+        dispatch({
+          action: LayoutAction.SET_LAYOUT,
+          data: { element: 'dialog', component: `${NAVTREE_PLUGIN}/Commands`, dialogBlockAlign: 'start' },
+        })
+      }
+    >
+      <span className='fg-description text-base font-normal grow text-start'>
+        {t('command list input placeholder')}
+      </span>
+      <MagnifyingGlass className={getSize(5)} />
+    </Button>
+  );
+};

package/src/components/HaloButton.stories.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { HaloButton } from './HaloButton';
+
+export default {
+  title: 'plugin-navtree/HaloButton',
+  component: HaloButton,
+  actions: { argTypesRegex: '^on.*' },
+};
+
+export const Normal = (props: any) => {
+  return <HaloButton {...props} />;
+};

package/src/components/HaloButton.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { ConnectionState, useNetworkStatus } from '@dxos/react-client/mesh';
+import { Avatar, type Size } from '@dxos/react-ui';
+import { focusRing, mx } from '@dxos/react-ui-theme';
+import { hexToFallback } from '@dxos/util';
+
+const INTERNAL = 'https://avatars.githubusercontent.com/u/57182821';
+
+export type HaloButtonProps = {
+  size?: Size;
+  identityKey?: string;
+  hue?: string;
+  emoji?: string;
+  internal?: boolean;
+  onClick?: () => void;
+};
+
+export const HaloButton = (props: HaloButtonProps) => {
+  const { onClick, identityKey, internal, size = 8 } = props;
+  const fallbackValue = hexToFallback(identityKey ?? '0');
+  const { swarm: connectionState } = useNetworkStatus();
+  return (
+    <button className={mx(focusRing, 'rounded grid place-items-center')} onClick={onClick}>
+      <Avatar.Root
+        size={size}
+        variant='circle'
+        status={connectionState === ConnectionState.OFFLINE ? 'error' : internal ? 'internal' : 'active'}
+        hue={props.hue || fallbackValue.hue}
+      >
+        <Avatar.Frame data-testid='treeView.haloButton' data-joyride='welcome/halo'>
+          {internal ? <Avatar.Image href={INTERNAL} /> : <Avatar.Fallback text={props.emoji || fallbackValue.emoji} />}
+        </Avatar.Frame>
+      </Avatar.Root>
+    </button>
+  );
+};

package/src/components/NavBarStart.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotsThreeVertical } from '@phosphor-icons/react';
+import React, { Fragment } from 'react';
+
+import { getGraph, type Node } from '@dxos/app-graph';
+import { Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { PlankHeading } from '@dxos/react-ui-deck';
+
+import { KEY_BINDING, NAVTREE_PLUGIN } from '../meta';
+
+const TREE_ITEM_MAIN_HEADING = 'TreeItemMainHeading';
+
+export const NavBarStart = ({ activeNode, popoverAnchorId }: { activeNode: Node; popoverAnchorId?: string }) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  const ActionRoot =
+    popoverAnchorId === `dxos.org/ui/${TREE_ITEM_MAIN_HEADING}/${activeNode.id}` ||
+    popoverAnchorId === `dxos.org/ui/${KEY_BINDING}/${activeNode.id}`
+      ? Popover.Anchor
+      : Fragment;
+
+  const Icon = activeNode.properties?.icon ?? DotsThreeVertical;
+  const graph = getGraph(activeNode);
+  const actions = graph.actions(activeNode);
+  const label = toLocalizedString(activeNode.properties?.label, t);
+
+  const menuTriggerLabel = t('node actions menu invoker label');
+
+  return (
+    <>
+      <ActionRoot>
+        <PlankHeading.ActionsMenu
+          Icon={Icon}
+          attendableId={activeNode.id}
+          triggerLabel={menuTriggerLabel}
+          actions={actions}
+          onAction={(action) =>
+            typeof action.data === 'function' && action.data({ node: action as Node, caller: TREE_ITEM_MAIN_HEADING })
+          }
+        />
+      </ActionRoot>
+      <PlankHeading.Label attendableId={activeNode.id}>{label}</PlankHeading.Label>
+    </>
+  );
+};