@dxos/plugin-navtree 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/src/components/Sidebar/L0Menu.tsx

@@ -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 { 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';
@@ -62,7 +72,7 @@ type L0ItemProps = L0ItemRootProps & {
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
   const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [isLg] = useMediaQuery('lg');
 
   return useCallback(
     (event: MouseEvent) => {
@@ -92,7 +102,7 @@ const l0Breakpoints: Record<string, string> = {
 };
 
 const l0ItemRoot =
-  'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
+  'group/l0item flex is-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
 
 const l0ItemContent = 'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm';
 
@@ -103,55 +113,45 @@ 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);
     const rootProps =
       type === 'tab'
-        ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+        ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-object-id': 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, 'data-testid': testId, 'data-object-id': id }
+          : { 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;
@@ -287,7 +287,7 @@ const L0Collection = ({ item, path }: L0ItemProps) => {
       role='group'
       className='contents group/l0c'
       aria-labelledby={`${item.id}__label`}
-      data-itemid={id}
+      data-object-id={id}
       data-testid={testId}
     >
       {collectionItems.map((collectionItem) => (
@@ -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

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { DensityProvider, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
@@ -28,11 +28,10 @@ export type L1PanelProps = {
 export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
   const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
-  // NOTE(burdon): I'm very uneasy about this pattern of declaring hooks as context props.
-  const { useItems } = navTreeContext;
   const title = toLocalizedString(item.properties.label, t);
 
   // TODO(wittjosiah): Support multiple alternate trees.
+  const { useItems } = navTreeContext;
   const alternateTree = useItems(item, { disposition: 'alternate-tree' })[0];
   const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
   const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
@@ -56,22 +55,22 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
       ]}
       tabIndex={-1}
       aria-label={title}
-      {...(!open && { inert: 'true' })}
+      {...(!open && { inert: true })}
     >
       {item.id === currentItemId && (
-        <>
+        <DensityProvider density='fine'>
           <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
           <div role='none' className='overflow-y-auto'>
             {isAlternate ? (
               <Tree
                 {...navTreeContext}
-                useItems={useAlternateItems}
                 id={alternateTree.id}
                 root={alternateTree}
                 path={alternatePath}
                 levelOffset={5}
                 gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
                 renderColumns={NavTreeItemColumns}
+                useItems={useAlternateItems}
               />
             ) : (
               <Tree
@@ -80,13 +79,13 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
                 root={item}
                 path={path}
                 levelOffset={5}
-                draggable
                 gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
                 renderColumns={NavTreeItemColumns}
+                draggable
               />
             )}
           </div>
-        </>
+        </DensityProvider>
       )}
     </Tabs.Tabpanel>
   );
@@ -123,31 +122,27 @@ 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
+          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/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/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);
 }

package/src/experimental/Tree.stories.tsx

@@ -2,15 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
 import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { Icon, IconButton } from '@dxos/react-ui';
-import { modalSurface, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/react-ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
 
@@ -32,7 +30,7 @@ const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Eleme
     <div className='flex'>
       {/* TODO(burdon): Custom thin scrollbar. */}
       {/* TODO(burdon): Horizontal scrolling within navtree? */}
-      <div className='flex flex-col overflow-y-auto w-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
+      <div className='flex flex-col overflow-y-auto is-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
       <div className='flex flex-col grow overflow-hidden'>{children}</div>
     </div>
   );
@@ -105,27 +103,6 @@ const data: TreeNodeData[] = [
   },
 ];
 
-export const Default = () => {
-  return <Container sidebar={<Sidebar mutate />} />;
-};
-
-export const Visitor = () => {
-  const [items] = useState(data);
-  const root = items[0];
-  const [openItems] = useState<ItemMap>({ [root.children![0].id]: true });
-  return (
-    <div className='flex flex-col'>
-      {Array.from(visitor(root, openItems)).map(({ node: { id, title }, depth }) => (
-        <div key={id} className='grid grid-cols-[40px_400px_400px] font-mono'>
-          <div>{depth}</div>
-          <div>{id}</div>
-          <div>{title}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
 const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   const [items, setItems] = useState(data);
   const root = items[0];
@@ -212,7 +189,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
         />
       </div>
 
-      <div className='flex items-center my-2 px-2 gap-2'>
+      <div className='flex items-center my-2 pli-2 gap-2'>
         <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
         <span className='grow text-sm' onClick={handleCreateSpace}>
           New space
@@ -223,10 +200,31 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
-};
+  decorators: [withTheme, withLayout({ container: 'column' })],
+} satisfies Meta<typeof Tree>;
 
 export default meta;
+
+export const Default = () => {
+  return <Container sidebar={<Sidebar mutate />} />;
+};
+
+export const Visitor = () => {
+  const [items] = useState(data);
+  const root = items[0];
+  const [openItems] = useState<ItemMap>({ [root.children![0].id]: true });
+  return (
+    <div className='flex flex-col'>
+      {Array.from(visitor(root, openItems)).map(({ node: { id, title }, depth }) => (
+        <div key={id} className='grid grid-cols-[40px_400px_400px] font-mono'>
+          <div>{depth}</div>
+          <div>{id}</div>
+          <div>{title}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/experimental/Tree.tsx

@@ -7,27 +7,19 @@ import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type ClassNameValue, Icon, type Size } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-// TODO(burdon): Rounded border if first/last.
-const styles = {
-  hover: 'hover:bg-slate-400 dark:hover:bg-slate-800',
-  selected: '!bg-slate-300 dark:!bg-slate-700',
-};
-
 export const IconButton = ({
   iconName,
   classNames,
   size = 4,
   onClick,
-  weight = 'regular',
 }: {
   iconName: string;
   classNames?: ClassNameValue;
   size?: Size;
-  weight?: 'regular' | 'duotone' | 'fill';
 } & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
   // TODO(burdon): Density aware.
   return (
-    <div className={mx('flex w-6 h-6 items-center justify-center select-none', classNames)} onClick={onClick}>
+    <div className={mx('flex is-6 bs-6 items-center justify-center select-none', classNames)} onClick={onClick}>
       <Icon icon={iconName} classNames='cursor-pointer' size={size} />
     </div>
   );
@@ -124,7 +116,6 @@ const StateIcon = ({ node, open, selected, active }: TreeNodeProps) => {
     <IconButton
       iconName={isActive ? 'ph--user-circle--regular' : 'ph--circle--regular'}
       size={4}
-      weight={selected?.[id] ? 'fill' : 'duotone'}
       classNames={mx(
         'text-slate-500',
         !isChildActive && 'opacity-0 transition duration-500',
@@ -158,15 +149,7 @@ const OpenIcon = ({
 const ItemIcon = ({
   node: { children, iconName = children?.length ? 'ph--folder--regular' : 'ph--file--regular', color },
 }: Pick<TreeNodeProps, 'node'>) => {
-  return (
-    (iconName && (
-      <IconButton
-        iconName={iconName}
-        classNames={color ?? 'text-neutral-700 dark:text-neutral-300'}
-        weight={color ? 'duotone' : 'regular'}
-      />
-    )) || <div />
-  );
+  return (iconName && <IconButton iconName={iconName} classNames={color ?? 'text-subdued'} />) || <div />;
 };
 
 const MenuItem = ({ node: { id }, onMenuAction }: Pick<TreeNodeProps, 'node' | 'onMenuAction'>) => {
@@ -210,9 +193,9 @@ export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
     <Grid
       style={{ paddingLeft: `${(depth - 1) * 24}px` }}
       className={mx(
-        'group w-full items-center cursor-pointer',
-        styles.hover,
-        selected?.[id] && styles.selected,
+        'group is-full items-center cursor-pointer bg-hoverSurface',
+        // TODO(burdon): Use data-active.
+        selected?.[id] && 'bg-activeSurface',
         className,
       )}
       onClick={() => selected && onChangeSelected?.(id, !selected[id])}
@@ -255,7 +238,7 @@ export const TreeChildNodes = ({
   } = props;
   return (
     <div className={mx('flex flex-col mt-0.5 gap-0.5', className)}>
-      {children?.map((child, i) => (
+      {children?.map((child) => (
         <TreeNode key={child.id} {...props} depth={depth + 1} node={child} ancestors={[...ancestors, props.node]} />
       ))}
     </div>

package/src/meta.ts

@@ -3,15 +3,18 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/navtree',
+  name: 'Navtree',
+  description: trim`
+    Hierarchical navigation tree for browsing spaces, folders, and objects.
+    Provides sidebar navigation with collapsible sections and quick access to workspace content.
+  `,
+};
 
 // TODO(wittjosiah): Factor out.
 export const KEY_BINDING = 'KeyBinding';
 // TODO(wittjosiah): Factor out.
-export const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
-
-export const meta: PluginMeta = {
-  id: NAVTREE_PLUGIN,
-  name: 'Navtree',
-};
+export const COMMANDS_DIALOG = `${meta.id}/CommandsDialog`;