@dxos/plugin-navtree 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77

package/src/components/NavTreeContainer.tsx

@@ -3,34 +3,35 @@
 //
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { untracked } from '@preact/signals-core';
 import React, { memo, useCallback, useEffect, useMemo } from 'react';
 
 import {
-  createIntent,
   LayoutAction,
   Surface,
+  createIntent,
   useAppGraph,
   useCapability,
   useIntentDispatcher,
   useLayout,
 } from '@dxos/app-framework';
-import { isAction, isActionLike, ROOT_ID, type Node, type ReadableGraph } from '@dxos/app-graph';
+import { type Node, ROOT_ID, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { useConnections } from '@dxos/plugin-graph';
+import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { isTreeData, type TreeItemDataProps, type TreeData } from '@dxos/react-ui-list';
+import { type TreeData, type TreeItemDataProps, isTreeData } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove, byPosition } from '@dxos/util';
 
+import { NavTreeCapabilities } from '../capabilities';
+import { meta } from '../meta';
+import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
+import { getChildren, getParent, resolveMigrationOperation } from '../util';
+
 import { NAV_TREE_ITEM, NavTree } from './NavTree';
 import { NavTreeContext } from './NavTreeContext';
 import { type NavTreeContextValue } from './types';
-import { NavTreeCapabilities } from '../capabilities';
-import { NAVTREE_PLUGIN } from '../meta';
-import { type NavTreeItemGraphNode } from '../types';
-import { getChildren, getParent, getActions as naturalGetActions, resolveMigrationOperation } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
@@ -40,7 +41,9 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 );
 
 const getChildrenFilter = (node: Node): node is Node =>
-  untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
+  untracked(
+    () => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden',
+  );
 
 const filterItems = (node: Node, disposition?: string) => {
   if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
@@ -64,6 +67,31 @@ const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean
   return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
+const useActions = (node: Node): FlattenedActions => {
+  const { graph } = useAppGraph();
+  const actions = useGraphActions(graph, node.id);
+
+  return useMemo(
+    () =>
+      actions.reduce(
+        (acc: FlattenedActions, arg) => {
+          if (arg.properties.disposition === 'item') {
+            return acc;
+          }
+
+          acc.actions.push(arg);
+          if (!isAction(arg)) {
+            const actionGroup = graph.getActions(arg.id);
+            acc.groupedActions[arg.id] = actionGroup;
+          }
+          return acc;
+        },
+        { actions: [], groupedActions: {} },
+      ),
+    [actions],
+  );
+};
+
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
@@ -75,9 +103,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const { graph } = useAppGraph();
   const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
   const layout = useLayout();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
-
-  const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
+  const { navigationSidebarState } = useSidebars(meta.id);
 
   const getProps = useCallback(
     (node: Node, path: string[]): TreeItemDataProps => {
@@ -269,7 +295,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     () => ({
       useItems,
       tab,
-      getActions,
+      useActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
@@ -287,7 +313,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     }),
     [
       tab,
-      getActions,
+      useActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,

package/src/components/NavTreeDocumentTitle.tsx

@@ -6,10 +6,10 @@ import { useEffect } from 'react';
 import { type Node } from '@dxos/app-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export const NavTreeDocumentTitle = ({ node }: { node?: Node }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   useEffect(() => {
     document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: 'appkit' });
   }, [node?.properties?.label]);

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
@@ -39,20 +37,20 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-const meta: Meta<typeof NavTreeItemAction> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout()],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
+  decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof NavTreeItemAction>;
 
 export default meta;
 

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -5,11 +5,11 @@
 import React from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
-import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
+import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
@@ -38,7 +38,7 @@ export const NavTreeItemActionDropdownMenu = ({
   menuActions,
   caller,
 }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const density = useDensityContext();
   return (
     <MenuProvider>
@@ -93,7 +93,7 @@ export const NavTreeItemMonolithicAction = ({
 };
 
 export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -5,21 +5,22 @@
 import React, { Fragment, memo } from 'react';
 
 import { isAction } from '@dxos/app-graph';
-import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { DensityProvider, Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { NavTreeItemAction } from './NavTreeItemAction';
 import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { type NavTreeItemColumnsProps } from '../types';
 
+import { NavTreeItemAction } from './NavTreeItemAction';
+
 export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+  const { t } = useTranslation(meta.id);
+  const { useActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-  const { actions: _actions, groupedActions } = getActions(item);
+  const { actions: _actions, groupedActions } = useActions(item);
   const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
     a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );

package/src/components/Sidebar/L0Menu.tsx

@@ -12,9 +12,9 @@ import {
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import React, {
-  forwardRef,
   type MouseEvent,
   type PropsWithChildren,
+  forwardRef,
   useCallback,
   useLayoutEffect,
   useMemo,
@@ -24,15 +24,25 @@ import React, {
 
 import { type Node } from '@dxos/app-graph';
 import { invariant } from '@dxos/invariant';
-import { Icon, ListItem, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { MenuProvider, DropdownMenu, type MenuItem } from '@dxos/react-ui-menu';
+import { DxAvatar } from '@dxos/lit-ui/react';
+import {
+  Icon,
+  ListItem,
+  ScrollArea,
+  type ThemedClassName,
+  Tooltip,
+  toLocalizedString,
+  useMediaQuery,
+  useTranslation,
+} from '@dxos/react-ui';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';
-import { arrayMove, getFirstTwoRenderableChars } from '@dxos/util';
+import { arrayMove } from '@dxos/util';
 
 import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { l0ItemType } from '../../util';
 import { useNavTreeContext } from '../NavTreeContext';
 import { UserAccountAvatar } from '../UserAccountAvatar';
@@ -103,7 +113,7 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
     const type = l0ItemType(item);
     const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
 
-    const { t } = useTranslation(NAVTREE_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const localizedString = toLocalizedString(item.properties.label, t);
 
     const handleClick = useL0ItemClick({ item, parent, path: itemPath }, type);
@@ -112,46 +122,36 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
         ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
         : type !== 'collection'
           ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-          : { onClick: handleClick };
-
-    const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+          : { onClick: handleClick, role: 'button' };
 
     return (
       <Tooltip.Trigger asChild delayDuration={0} side='right' content={localizedString}>
-        <Root
+        <Tabs.TabPrimitive
           {...(rootProps as any)}
           data-type={type}
           className={mx(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint])}
           ref={forwardedRef}
         >
           {children}
-        </Root>
+        </Tabs.TabPrimitive>
       </Tooltip.Trigger>
     );
   },
 );
 
-const L0Avatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const type = l0ItemType(item);
-  const hue = item.properties.hue ?? null;
-  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
-  const localizedString = toLocalizedString(item.properties.label, t);
-  const avatarValue = useMemo(
-    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
-    [type, item.properties.label, t],
-  );
-
-  return (
-    <span role='img' className='place-self-center text-xl font-light' {...hueFgStyle}>
-      {avatarValue}
-    </span>
-  );
-};
+export const L0ItemActiveTabIndicator = ({ classNames }: ThemedClassName<{}>) => (
+  <div
+    role='none'
+    className={mx(
+      'hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie',
+      classNames,
+    )}
+  />
+);
 
 // TODO(burdon): Factor out pinned (non-draggable) items.
 const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const itemElement = useRef<HTMLElement | null>(null);
   const [closestEdge, setEdge] = useState<Edge | null>(null);
   const localizedString = toLocalizedString(item.properties.label, t);
@@ -228,10 +228,7 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
       >
         <ItemAvatar item={item} />
       </div>
-      <div
-        role='none'
-        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie'
-      />
+      <L0ItemActiveTabIndicator />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
@@ -241,15 +238,18 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
 };
 
 const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
+  const { t } = useTranslation(meta.id);
   const type = l0ItemType(item);
   if (item.properties.icon) {
     const hue = item.properties.hue ?? null;
     const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
-    return <Icon icon={item.properties.icon} size={5} {...hueFgStyle} />;
+    return <Icon icon={item.properties.icon} size={6} {...hueFgStyle} />;
   }
 
   if (type === 'tab' && item.properties.disposition !== 'pin-end') {
-    return <L0Avatar item={item} />;
+    const hue = item.properties.hue ?? null;
+    const localizedString = toLocalizedString(item.properties.label, t);
+    return <DxAvatar hue={hue} hueVariant='surface' variant='square' size={12} fallback={localizedString} />;
   }
 
   return null;
@@ -317,7 +317,7 @@ export type L0MenuProps = {
 };
 
 export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <Tabs.Tablist
@@ -331,20 +331,22 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
       <MenuProvider>
         <DropdownMenu.Root group={parent} items={menuActions}>
           <Tooltip.Trigger content={t('app menu label')} side='right' asChild>
-            <DropdownMenu.Trigger
-              data-testid='spacePlugin.addSpace'
-              className={mx(l0ItemRoot, 'grid place-items-center')}
-            >
-              <div
-                role='none'
-                className={mx(
-                  l0ItemContent,
-                  'is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface',
-                )}
+            <Tabs.TabPrimitive value='options' asChild role='button'>
+              <DropdownMenu.Trigger
+                data-testid='spacePlugin.addSpace'
+                className={mx(l0ItemRoot, 'grid place-items-center dx-focus-ring-group')}
               >
-                <Icon icon='ph--list--regular' size={5} />
-              </div>
-            </DropdownMenu.Trigger>
+                <div
+                  role='none'
+                  className={mx(
+                    l0ItemContent,
+                    'is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface',
+                  )}
+                >
+                  <Icon icon='ph--list--regular' size={5} />
+                </div>
+              </DropdownMenu.Trigger>
+            </Tabs.TabPrimitive>
           </Tooltip.Trigger>
         </DropdownMenu.Root>
       </MenuProvider>
@@ -396,7 +398,6 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
           </L0ItemRoot>
         </div>
       )}
-
       <div
         role='none'
         className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'

package/src/components/Sidebar/L1Panel.tsx

@@ -56,7 +56,7 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
       ]}
       tabIndex={-1}
       aria-label={title}
-      {...(!open && { inert: 'true' })}
+      {...(!open && { inert: true })}
     >
       {item.id === currentItemId && (
         <>
@@ -123,31 +123,29 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
     <div className='flex is-full items-center border-be border-subduedSeparator app-drag density-coarse'>
       <div className='is-6' />
       <h2 className='flex-1 truncate min-is-0'>{title}</h2>
-      <div>
-        {(backCapable && (
+      {(backCapable && (
+        <IconButton
+          variant='ghost'
+          icon='ph--arrow-u-down-left--regular'
+          iconOnly
+          size={5}
+          label={t('button back')}
+          classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+          onClick={handleBack}
+        />
+      )) ||
+        (alternateTree && !isAlternate && (
           <IconButton
+            data-testid='treeView.alternateTreeButton'
             variant='ghost'
-            icon='ph--arrow-u-down-left--regular'
+            icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
             iconOnly
             size={5}
-            label={t('button back')}
+            label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
             classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-            onClick={handleBack}
+            onClick={handleOpen}
           />
-        )) ||
-          (alternateTree && !isAlternate && (
-            <IconButton
-              data-testid='treeView.alternateTreeButton'
-              variant='ghost'
-              icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
-              iconOnly
-              size={5}
-              label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
-              classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-              onClick={handleOpen}
-            />
-          )) || <div />}
-      </div>
+        ))}
       <NavTreeItemColumns open path={path} item={item} density='coarse' />
     </div>
   );

package/src/components/Sidebar/L1Tabs.tsx

@@ -9,6 +9,7 @@ import { type Node } from '@dxos/app-graph';
 import { useLoadDescendents } from '../../hooks';
 import { l0ItemType } from '../../util';
 import { useNavTreeContext } from '../NavTreeContext';
+
 import { L1Panel, type L1PanelProps } from './L1Panel';
 
 export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {

package/src/components/UserAccountAvatar/UserAccountAvatar.stories.tsx

@@ -2,20 +2,21 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { type Meta } from '@storybook/react-vite';
-
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { UserAccountAvatar } from './UserAccountAvatar';
 
-const meta: Meta<typeof UserAccountAvatar> = {
+const meta = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
-  component: UserAccountAvatar,
+
   decorators: [withTheme],
-};
+  component: UserAccountAvatar,
+} satisfies Meta<typeof UserAccountAvatar>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/UserAccountAvatar/UserAccountAvatar.tsx

@@ -7,6 +7,8 @@ import React from 'react';
 import { Avatar, type AvatarStatus, type Size } from '@dxos/react-ui';
 import { hexToFallback } from '@dxos/util';
 
+import { L0ItemActiveTabIndicator } from '../Sidebar';
+
 export type UserAccountAvatarProps = {
   size?: Size;
   userId?: string;
@@ -19,17 +21,23 @@ export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAcco
   const fallbackValue = hexToFallback(userId ?? '0');
 
   return (
-    <div className='grid place-items-center' data-joyride='welcome/account'>
-      <Avatar.Root>
-        <Avatar.Content
-          variant='circle'
-          size={size ?? 12}
-          status={status ?? 'active'}
-          hue={hue || fallbackValue.hue}
-          fallback={emoji || fallbackValue.emoji}
-          data-testid='treeView.userAccount'
-        />
-      </Avatar.Root>
-    </div>
+    <>
+      <L0ItemActiveTabIndicator classNames='inset-block-6' />
+      <div
+        className='grid place-items-center dx-focus-ring-group-indicator rounded-full'
+        data-joyride='welcome/account'
+      >
+        <Avatar.Root>
+          <Avatar.Content
+            variant='circle'
+            size={size ?? 12}
+            status={status ?? 'active'}
+            hue={hue || fallbackValue.hue}
+            fallback={emoji || fallbackValue.emoji}
+            data-testid='treeView.userAccount'
+          />
+        </Avatar.Root>
+      </div>
+    </>
   );
 };

package/src/components/types.ts

@@ -9,9 +9,10 @@ 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 './Sidebar';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 
+import type { L1PanelProps } from './Sidebar';
+
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
   'useItems' | 'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
@@ -21,7 +22,7 @@ export type NavTreeContextValue = Pick<
     topbar?: boolean;
     popoverAnchorId?: string;
     renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    getActions: (node: Node) => FlattenedActions;
+    useActions: (node: Node) => FlattenedActions;
     loadDescendents?: (node: Node) => MaybePromise<void>;
     isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
     setAlternateTree?: (path: string[], open: boolean) => void;

package/src/events.ts

@@ -4,8 +4,8 @@
 
 import { Events } from '@dxos/app-framework';
 
-import { NAVTREE_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace NavTreeEvents {
-  export const StateReady = Events.createStateEvent(NAVTREE_PLUGIN);
+  export const StateReady = Events.createStateEvent(meta.id);
 }