@dxos/plugin-navtree 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/components/NavTree.tsx

@@ -2,40 +2,130 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { Fragment, useCallback, useEffect, type FC } from 'react';
 
-import { Tabs } from '@dxos/react-ui-tabs';
-import { byPosition } from '@dxos/util';
+import { isAction, type Node } from '@dxos/app-graph';
+import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { Tree, type TreeProps } from '@dxos/react-ui-list';
+import { type MaybePromise } from '@dxos/util';
 
-import { L0Menu } from './L0Menu';
-import { L1Panels } from './L1Panels';
-import { useNavTreeContext } from './NavTreeContext';
-import { type NavTreeProps } from './types';
-import { useLoadDescendents } from '../hooks';
+import { NavTreeItemAction } from './NavTreeItemAction';
+import { NAVTREE_PLUGIN } from '../meta';
+import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export const NavTree = ({ id, root }: NavTreeProps) => {
-  const { getItems, tab } = useNavTreeContext();
-  const topLevelActions = getItems(root, 'item');
-  const topLevelCollections = getItems(root, 'collection');
-  const topLevelWorkspaces = getItems(root, 'workspace');
-  const topLevelNavigation = getItems(root, 'navigation');
-  const l0Items = useMemo(
-    () => [...topLevelActions, ...topLevelCollections, ...topLevelWorkspaces, ...topLevelNavigation],
-    [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
+export type NavTreeProps = Omit<
+  TreeProps<NavTreeItemGraphNode>,
+  'draggable' | 'gridTemplateColumns' | 'renderColumns'
+> &
+  Pick<NavTreeColumnsProps, 'getActions' | 'loadDescendents' | 'renderItemEnd' | 'popoverAnchorId'>;
+
+export const NavTree = ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, ...props }: NavTreeProps) => {
+  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
+    ({ item, path, open }) => {
+      return (
+        <NavTreeColumns
+          path={path}
+          node={item}
+          getActions={getActions}
+          open={open}
+          loadDescendents={loadDescendents}
+          renderItemEnd={renderItemEnd}
+          popoverAnchorId={popoverAnchorId}
+        />
+      );
+    },
+    [renderItemEnd, popoverAnchorId, loadDescendents],
+  );
+
+  return (
+    <Tree
+      {...props}
+      draggable
+      gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+      renderColumns={renderColumns}
+    />
   );
-  const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
-  const topLevelItems = useMemo(() => [...l0Items, ...pinnedItems], [l0Items, pinnedItems]);
+};
+
+type NavTreeColumnsProps = {
+  path: string[];
+  node: Node;
+  getActions: (node: Node) => FlattenedActions;
+  open: boolean;
+  loadDescendents?: (node: Node) => MaybePromise<void>;
+  renderItemEnd?: FC<{ node: Node; open: boolean }>;
+  popoverAnchorId?: string;
+};
+
+const NavTreeColumns = ({
+  path,
+  node,
+  getActions,
+  open,
+  loadDescendents,
+  renderItemEnd: ItemEnd,
+  popoverAnchorId,
+}: NavTreeColumnsProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  const level = path.length - 2;
+
+  const { actions: _actions, groupedActions } = getActions(node);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
+    a.properties?.disposition === 'toolbar' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
+    .flatMap((action) => (isAction(action) ? [action] : []))
+    .filter((action) => !action.properties?.hidden);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover.Anchor : Fragment;
 
-  useLoadDescendents(root);
-  const path = useMemo(() => [id], [id]);
+  // TODO(thure): Ideally this should not be necessary.
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      void loadDescendents?.(node);
+      if (primaryAction && !isAction(primaryAction)) {
+        void loadDescendents?.(primaryAction);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [primaryAction]);
 
   return (
-    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
-      <L0Menu topLevelItems={l0Items} pinnedItems={pinnedItems} path={path} parent={root} />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} />
-    </Tabs.Root>
+    <>
+      {primaryAction?.properties?.disposition === 'toolbar' ? (
+        <NavTreeItemAction
+          testId={primaryAction.properties?.testId}
+          label={toLocalizedString(primaryAction.properties?.label, t)}
+          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+          parent={node}
+          monolithic={isAction(primaryAction)}
+          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
+          menuType={primaryAction.properties?.menuType}
+          caller={NAV_TREE_ITEM}
+        />
+      ) : (
+        <Treegrid.Cell />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <NavTreeItemAction
+            testId={`navtree.treeItem.actionsLevel${level}`}
+            label={t('tree item actions label')}
+            icon='ph--dots-three-vertical--regular'
+            parent={node}
+            menuActions={actions}
+            menuType='dropdown'
+            caller={NAV_TREE_ITEM}
+          />
+        ) : (
+          <Treegrid.Cell />
+        )}
+      </ActionRoot>
+      {ItemEnd && <ItemEnd node={node} open={open} />}
+    </>
   );
 };

package/src/components/NavTreeContainer.tsx

@@ -5,28 +5,19 @@
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { untracked } from '@preact/signals-core';
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
+import React, { memo, useCallback, useEffect } from 'react';
 
-import {
-  createIntent,
-  LayoutAction,
-  Surface,
-  useAppGraph,
-  useCapability,
-  useIntentDispatcher,
-  useLayout,
-} from '@dxos/app-framework';
+import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher, Surface } from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
+import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery } from '@dxos/react-ui';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
-import { NAV_TREE_ITEM, NavTree } from './NavTree';
-import { NavTreeContext } from './NavTreeContext';
-import { type NavTreeContextValue } from './types';
-import { NavTreeCapabilities } from '../capabilities';
+import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
+import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
 import {
   expandActions,
@@ -35,7 +26,6 @@ import {
   getChildren,
   getParent,
   resolveMigrationOperation,
-  expandChildrenAndActions,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -47,29 +37,24 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
-  topbar?: boolean;
-} & Pick<NavTreeContextValue, 'tab'>;
+} & Pick<NavTreeProps, 'isOpen' | 'isCurrent' | 'onOpenChange'>;
 
-export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
+export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
+  const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useAppGraph();
-  const layout = useLayout();
-  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
+  const { graph } = useGraph();
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
   const getItems = useCallback(
-    (node?: Node, disposition?: string) => {
+    (node?: Node) => {
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
             const action = isActionLike(node);
-            if (!disposition) {
-              return !action || node.properties.disposition === 'item';
-            }
-
-            return node.properties.disposition === disposition;
+            const disposition = node.properties.disposition;
+            return !action || (action && disposition === 'item');
           });
         },
       });
@@ -111,33 +96,6 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph],
   );
 
-  const onOpenChange = useCallback(
-    ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
-      // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
-      setItem(path, 'open', open);
-
-      if (graph) {
-        const node = graph.findNode(id);
-        return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
-      }
-    },
-    [graph],
-  );
-
-  const onTabChange = useCallback(
-    async (node: NavTreeItemGraphNode) => {
-      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
-      // Open the first item if the workspace is empty.
-      if (layout.active.length === 0) {
-        const [item] = getItems(node).filter((node) => !isActionLike(node));
-        if (item) {
-          await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
-        }
-      }
-    },
-    [dispatch, layout],
-  );
-
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
@@ -165,19 +123,11 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
 
       const current = isCurrent(path, node);
       if (!current) {
-        void dispatch(
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [node.id],
-            options: { key: node.properties.key },
-          }),
-        );
+        void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [node.id] } }));
       } else if (option) {
-        void dispatch(
-          createIntent(LayoutAction.Close, { part: 'main', subject: [node.id], options: { state: false } }),
-        );
+        void dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [node.id] } }));
       } else {
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: node.id }));
       }
 
       const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
@@ -186,10 +136,10 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       }
 
       if (!isLg) {
-        void dispatch(createIntent(LayoutAction.UpdateSidebar, { part: 'sidebar', options: { state: 'closed' } }));
+        closeNavigationSidebar();
       }
     },
-    [graph, dispatch, isCurrent, isLg],
+    [graph, dispatch, isCurrent, isLg, closeNavigationSidebar],
   );
 
   // TODO(wittjosiah): Factor out hook.
@@ -251,44 +201,20 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     });
   }, [graph]);
 
-  const navTreeContextValue = useMemo(
-    () => ({
-      tab,
-      onTabChange,
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getItems,
-      getProps,
-      isCurrent,
-      isOpen,
-      onOpenChange,
-      canDrop,
-      onSelect: handleSelect,
-    }),
-    [
-      tab,
-      onTabChange,
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getItems,
-      getProps,
-      isCurrent,
-      isOpen,
-      onOpenChange,
-      canDrop,
-      handleSelect,
-    ],
-  );
-
+  // TODO(thure): What gives this an inline `overflow: initial`?
   return (
-    <NavTreeContext.Provider value={navTreeContextValue}>
-      <NavTree root={graph.root} id={graph.root.id} />
-    </NavTreeContext.Provider>
+    <NavTree
+      id={graph.root.id}
+      getActions={getActions}
+      getItems={getItems}
+      getProps={getProps}
+      isCurrent={isCurrent}
+      loadDescendents={loadDescendents}
+      renderItemEnd={renderItemEnd}
+      popoverAnchorId={popoverAnchorId}
+      canDrop={canDrop}
+      onSelect={handleSelect}
+      {...props}
+    />
   );
 });

package/src/components/NavTreeFooter.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { formatDistance } from 'date-fns/formatDistance';
+import React from 'react';
+
+import {
+  type LayoutPart,
+  SettingsAction,
+  useIntentDispatcher,
+  createIntent,
+  usePluginManager,
+} from '@dxos/app-framework';
+import { useConfig } from '@dxos/react-client';
+import {
+  Button,
+  Link,
+  Message,
+  Popover,
+  Tooltip,
+  Trans,
+  useDefaultValue,
+  useSidebars,
+  useTranslation,
+  Icon,
+  IconButton,
+} from '@dxos/react-ui';
+import { LayoutControls } from '@dxos/react-ui-stack';
+import { mx } from '@dxos/react-ui-theme';
+
+import { NAVTREE_PLUGIN } from '../meta';
+
+const buttonStyles = '!pli-1.5 text-xs font-normal';
+
+const repo = 'https://github.com/dxos/dxos';
+
+const VERSION_REGEX = /([\d.]+)/;
+
+export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
+  const layoutPart = useDefaultValue(props.layoutPart, () => 'sidebar');
+  const config = useConfig();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
+  const manager = usePluginManager();
+  const [_, v] = version?.match(VERSION_REGEX) ?? [];
+
+  const releaseUrl =
+    config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production'
+      ? `${repo}/releases/tag/v${version}`
+      : `${repo}/commit/${commitHash}`;
+
+  const previewUrl = 'https://docs.dxos.org/composer#technology-preview';
+
+  return (
+    <div
+      role='none'
+      className={mx(
+        'flex pbe-[env(safe-area-inset-bottom)] box-content justify-end',
+        layoutPart === 'complementary' && 'md:justify-end flex-row-reverse',
+      )}
+    >
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <Button variant='ghost' classNames={buttonStyles} {...(!navigationSidebarOpen && { tabIndex: -1 })}>
+            v{v}
+          </Button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            side='top'
+            role='message'
+            classNames='z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]'
+          >
+            <Message.Root valence='warning' className='rounded-be-none p-5'>
+              <Message.Title>
+                <Icon icon='ph--warning--duotone' size={6} classNames='inline mie-2' />
+                <span>{t('warning title')}</span>
+              </Message.Title>
+              <Message.Body>
+                {t('technology preview message')}
+                <br />
+                <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                  {t('learn more label')}
+                  <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
+                </Link>
+              </Message.Body>
+            </Message.Root>
+            <div role='none' className='plb-4 pli-5 space-b-2 text-baseText'>
+              {timestamp && (
+                <p>
+                  {t('released message', {
+                    released: formatDistance(new Date(timestamp), new Date(), { addSuffix: true }),
+                  })}
+                  <br />
+                  <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                    {t('see release label')}
+                    <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
+                  </Link>
+                </p>
+              )}
+              <p>
+                <Trans
+                  {...{
+                    t,
+                    i18nKey: 'powered by dxos message',
+                    components: {
+                      dxos: <Link href='https://dxos.org' target='_blank' rel='noreferrer' variant='neutral' />,
+                    },
+                  }}
+                />
+              </p>
+            </div>
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          {/* TODO(burdon): Reconcile with action created by LayoutPlugin. */}
+          <IconButton
+            icon='ph--gear-six--regular'
+            iconOnly
+            label={t('open settings label')}
+            size={4}
+            variant='ghost'
+            classNames={buttonStyles}
+            data-testid='treeView.openSettings'
+            data-joyride='welcome/settings'
+            {...(!navigationSidebarOpen && { tabIndex: -1 })}
+            iconClassNames='rotate-90'
+            onClick={() => dispatch(createIntent(SettingsAction.Open))}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content classNames='z-[12]'>
+            {t('open settings label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+
+      {/* NOTE(thure): Unpinning from the NavTree’s default position in Deck is temporarily disabled. */}
+      {manager.enabled.includes('dxos.org/plugin/deck') && (
+        <LayoutControls
+          variant='hide-disabled'
+          capabilities={{
+            incrementStart: false,
+            incrementEnd: false,
+          }}
+          onClick={(_type) => {
+            // TODO(Zan): If we inmplement pinning again, we should dispatch here.
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/NavTreeItemAction.tsx

@@ -24,8 +24,11 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
 const fallbackIcon = 'ph--placeholder--regular';
 
 const actionButtonProps = {
+  iconOnly: true,
   size: 4 as const,
+  variant: 'ghost' as const,
   density: 'fine' as const,
+  classNames: mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem),
 };
 
 export const NavTreeItemActionDropdownMenu = ({
@@ -43,10 +46,7 @@ export const NavTreeItemActionDropdownMenu = ({
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...actionButtonProps}
-            classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
-            variant='ghost'
             icon={icon ?? fallbackIcon}
-            iconOnly
             label={toLocalizedString(label, t)}
             data-testid={testId}
             suppressNextTooltip={suppressNextTooltip}
@@ -59,22 +59,14 @@ export const NavTreeItemActionDropdownMenu = ({
 
 export const NavTreeItemMonolithicAction = ({
   parent,
-  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
+  properties: { disabled, caller, testId, icon } = { label: 'never' },
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
   return (
     <IconButton
       {...actionButtonProps}
-      variant={variant}
-      classNames={mx(
-        'shrink-0',
-        hoverableControlItem,
-        hoverableOpenControlItem,
-        iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
-      )}
       icon={icon ?? fallbackIcon}
-      iconOnly={iconOnly}
       label={baseLabel}
       disabled={disabled}
       onClick={(event) => {

package/src/components/NotchStart.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { createIntent, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher, useCapabilities } from '@dxos/app-framework';
 import { ClientAction } from '@dxos/plugin-client/types';
 import { ObservabilityCapabilities } from '@dxos/plugin-observability';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -19,7 +19,7 @@ export const NotchStart = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   return (
     <HaloButton
-      size={12}
+      size={8}
       identityKey={identity?.identityKey.toHex()}
       hue={identity?.profile?.data?.hue}
       emoji={identity?.profile?.data?.emoji}

package/src/components/index.ts

@@ -6,7 +6,5 @@ export * from './CommandsDialog';
 export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
-export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
 export * from './NotchStart';
-export * from './types';

package/src/stories/Graph.stories.tsx

@@ -18,7 +18,7 @@ import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { StorybookNavTree } from './StorybookNavTree';
+import { NavTree } from '../components';
 import { getActions, getChildren } from '../util';
 
 faker.seed(3);
@@ -53,9 +53,9 @@ const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }
 
 export const Default = {};
 
-const meta: Meta<typeof StorybookNavTree> = {
+const meta: Meta<typeof NavTree> = {
   title: 'plugins/plugin-navtree/Graph',
-  component: StorybookNavTree,
+  component: NavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -78,10 +78,9 @@ const meta: Meta<typeof StorybookNavTree> = {
       });
     }, []);
 
-    return <StorybookNavTree {...args} />;
+    return <NavTree {...args} />;
   },
   args: {
-    root: graph.root,
     id: graph.root.id,
     getActions: (node: Node) => getActions(graph, node),
     getItems: (node?: Node) => graph.nodes(node ?? graph.root),

package/src/translations.ts

@@ -13,6 +13,12 @@ export default [
         'commands dialog title': 'Commands',
         'command list input placeholder': 'Search for commands…',
         'node actions menu invoker label': 'More options',
+        'warning title': 'WARNING',
+        'technology preview message': 'Composer is still in technology preview.',
+        'learn more label': 'Learn more',
+        'released message': 'This version released {{released}}.',
+        'see release label': 'See release on GitHub',
+        'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
         'tree item actions label': 'More actions',
         'empty branch message': ' ',
       },

package/src/types.ts

@@ -4,7 +4,7 @@
 
 import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
 import { type Label } from '@dxos/react-ui';
-import { type MaybePromise, type Position } from '@dxos/util';
+import { type MaybePromise } from '@dxos/util';
 
 export type NavTreeItemGraphNode = Node<
   any,
@@ -31,7 +31,6 @@ type SharedProperties = {
   label: Label;
   icon?: string;
   disabled?: boolean;
-  position?: Position;
   testId?: string;
   className?: string;
   headingClassName?: string;