@dxos/plugin-navtree 0.8.2-main.5ca3450 → 0.8.2-main.600d381

package/src/components/{L0Menu.tsx → Sidebar/L0Menu.tsx}

@@ -7,88 +7,92 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import {
-  attachClosestEdge,
   type Edge,
+  attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import React, { type MouseEvent, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  type MouseEvent,
+  type PropsWithChildren,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
 import { invariant } from '@dxos/invariant';
 import {
-  Popover,
+  Icon,
+  IconButton,
+  ListItem,
   ScrollArea,
-  toLocalizedString,
   Tooltip,
+  toLocalizedString,
   useMediaQuery,
-  useSidebars,
   useTranslation,
-  ListItem,
-  Icon,
 } from '@dxos/react-ui';
+import { MenuProvider, DropdownMenu, type MenuItem } 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 { useNavTreeContext } from './NavTreeContext';
-import { UserAccountAvatar } from './UserAccountAvatar';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-import { l0ItemType } from '../util';
+import { useLoadDescendents } from '../../hooks';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { l0ItemType } from '../../util';
+import { useNavTreeContext } from '../NavTreeContext';
+import { UserAccountAvatar } from '../UserAccountAvatar';
+
+//
+// L0Item
+//
+
+type L0ItemData = {
+  id: L0ItemProps['item']['id'];
+  type: 'l0Item';
+};
 
-type L0ItemData = { id: L0ItemProps['item']['id']; type: 'l0Item' };
+type L0ItemRootProps = {
+  item: Node<any>;
+  parent?: Node<any>;
+  path: string[];
+};
 
-type L0ItemProps = {
+type L0ItemProps = L0ItemRootProps & {
   item: Node<any>;
   parent?: Node<any>;
   path: string[];
   pinned?: boolean;
-  userAccount?: boolean;
   onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
-  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
   const [isLg] = useMediaQuery('lg', { ssr: false });
 
   return useCallback(
     (event: MouseEvent) => {
       switch (type) {
-        case 'tab':
-          // TODO(thure): This dispatch should rightly be in `onTabChange`, but that callback wasn’t reacting to changes
-          //  to its dependencies.
-          void dispatch(
-            createIntent(LayoutAction.UpdateSidebar, {
-              part: 'sidebar',
-              options: {
-                state:
-                  item.id === tab
-                    ? navigationSidebarState === 'expanded'
-                      ? isLg
-                        ? 'collapsed'
-                        : 'closed'
-                      : 'expanded'
-                    : 'expanded',
-              },
-            }),
-          );
-          return onTabChange?.(item);
-        case 'link':
-          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
         case 'action': {
           const {
             data: invoke,
             properties: { caller },
           } = item;
+
           return invoke?.(caller ? { node: parent, caller } : { node: parent });
         }
+
+        case 'tab':
+          return onTabChange?.(item);
+
+        case 'link':
+          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
       }
     },
-    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
+    [item, parent, type, tab, isCurrent, onSelect, onTabChange, isLg],
   );
 };
 
@@ -96,28 +100,70 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
-const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0ItemProps) => {
+const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
+  ({ item, parent, path, children }, forwardedRef) => {
+    const { getProps } = useNavTreeContext();
+    const { id, testId } = getProps?.(item, path) ?? {};
+    const type = l0ItemType(item);
+    const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
+
+    const { t } = useTranslation(NAVTREE_PLUGIN);
+    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 }
+        : type !== 'collection'
+          ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+          : { onClick: handleClick };
+
+    const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+
+    return (
+      <Tooltip.Trigger asChild delayDuration={0} side='right' content={localizedString}>
+        <Root
+          {...(rootProps as any)}
+          data-type={type}
+          className={mx(
+            'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group',
+            l0Breakpoints[item.properties.l0Breakpoint],
+          )}
+          ref={forwardedRef}
+        >
+          {children}
+        </Root>
+      </Tooltip.Trigger>
+    );
+  },
+);
+
+const L0Avator = ({ item }: Pick<L0ItemProps, 'item'>) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const itemElement = useRef<HTMLElement | null>(null);
-  const [closestEdge, setEdge] = useState<Edge | null>(null);
   const type = l0ItemType(item);
-  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
-  const { getProps, popoverAnchorId } = useNavTreeContext();
-  const { id, testId } = getProps?.(item, path) ?? {};
-  const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
-  const handleClick = useL0ItemClick({ item, path: itemPath, parent }, type);
-  const rootProps =
-    type === 'tab'
-      ? { 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 localizedString = toLocalizedString(item.properties.label, t);
   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>
+  );
+};
+
+// TODO(burdon): Factor out pinned (non-draggable) items.
+const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const itemElement = useRef<HTMLElement | null>(null);
+  const [closestEdge, setEdge] = useState<Edge | null>(null);
+  const type = l0ItemType(item);
+  const localizedString = toLocalizedString(item.properties.label, t);
+  const hue = item.properties.hue ?? null;
   const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
 
   useLayoutEffect(() => {
@@ -125,6 +171,7 @@ const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0Item
     if (!itemElement.current || !onRearrange) {
       return;
     }
+
     return combine(
       draggable({
         element: itemElement.current,
@@ -175,77 +222,40 @@ const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0Item
     );
   }, [item, onRearrange]);
 
-  const l0ItemTrigger = (
-    <Root
-      {...(rootProps as any)}
-      data-type={type}
-      className={mx(
-        'group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag',
-        l0Breakpoints[item.properties.l0Breakpoint],
-      )}
-      ref={itemElement}
-    >
-      {userAccount ? (
-        <UserAccountAvatar
-          userId={item.properties.userId}
-          hue={item.properties.hue}
-          emoji={item.properties.emoji}
-          status={item.properties.status}
-        />
-      ) : (
-        <div
-          role='none'
-          data-frame={true}
-          className={mx(
-            'absolute grid dx-focus-ring-group-indicator transition-colors',
-            type === 'tab' || pinned ? 'rounded' : 'rounded-full',
-            pinned
-              ? 'bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5'
-              : 'bg-groupSurface inset-inline-3 inset-block-2',
-          )}
-          {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
-        >
-          {(item.properties.icon && (
-            <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
-          )) ||
-            (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
-              <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
-                {avatarValue}
-              </span>
-            ) : (
-              item.properties.icon && (
-                <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
-              )
-            ))}
-        </div>
-      )}
+  return (
+    <L0ItemRoot ref={itemElement} item={item} parent={parent} path={path}>
       <div
         role='none'
-        className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+        data-frame={true}
+        className={mx(
+          'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded',
+          // TODO(burdon): Create reusable button/component and/or create var for size.
+          pinned
+            ? 'bg-transparent w-[50px] p-2 group-hover/l0item:bg-groupSurface'
+            : 'bg-groupSurface w-[50px] h-[50px]',
+        )}
+        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
+      >
+        {(item.properties.icon && <Icon icon={item.properties.icon} size={pinned ? 5 : 6} {...hueFgStyle} />) ||
+          (type === 'tab' && item.properties.disposition !== 'pin-end' && <L0Avator item={item} />)}
+      </div>
+      <div
+        role='none'
+        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
       />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
       {onRearrange && closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
-    </Root>
-  );
-
-  return popoverAnchorId === id ? (
-    <Popover.Anchor asChild>{l0ItemTrigger}</Popover.Anchor>
-  ) : (
-    <Tooltip.Root delayDuration={0}>
-      <Tooltip.Trigger asChild>{l0ItemTrigger}</Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='right'>
-          {localizedString}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    </L0ItemRoot>
   );
 };
 
-const L0Collection = ({ item, path, parent }: L0ItemProps) => {
+//
+// L0Collection
+//
+
+const L0Collection = ({ item, path }: L0ItemProps) => {
   const navTreeContext = useNavTreeContext();
   useLoadDescendents(item);
   const collectionItems = navTreeContext.getItems(item);
@@ -266,6 +276,7 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
     },
     [collectionItems, item.properties.onRearrangeChildren],
   );
+
   return (
     <div
       role='group'
@@ -287,26 +298,57 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
   );
 };
 
-export const L0Menu = ({
-  topLevelItems,
-  pinnedItems,
-  userAccountItem,
-  parent,
-  path,
-}: {
+//
+// L0Menu
+//
+
+export type L0MenuProps = {
+  menuActions: MenuItem[];
   topLevelItems: Node<any>[];
   pinnedItems: Node<any>[];
   userAccountItem: Node<any>;
   parent?: Node<any>;
   path: string[];
-}) => {
+};
+
+export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
   return (
-    <Tabs.Tablist classNames='group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag  pbe-[env(safe-area-inset-bottom)]'>
+    <Tabs.Tablist
+      classNames={[
+        'group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg',
+        'grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout',
+        '!is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]',
+      ]}
+    >
+      <div role='none' className='flex justify-center p-1'>
+        <MenuProvider>
+          <DropdownMenu.Root group={parent} items={menuActions}>
+            <DropdownMenu.Trigger asChild>
+              {/* TODO(wittjosiah): Use L0Item trigger. */}
+              {/* TODO(burdon): Replace with Sigil. */}
+              <IconButton
+                iconOnly
+                icon='ph--dots-three--regular'
+                size={5}
+                label={t('app menu label')}
+                classNames='w-[50px] _bg-primary-500'
+              />
+            </DropdownMenu.Trigger>
+          </DropdownMenu.Root>
+        </MenuProvider>
+      </div>
+
       <ScrollArea.Root>
         <ScrollArea.Viewport>
           <div
             role='none'
-            className='grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
+            className={mx([
+              'flex flex-col gap-2',
+              '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
+              '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]',
+            ])}
           >
             {topLevelItems.map((item) => {
               if (l0ItemType(item) === 'collection') {
@@ -321,6 +363,7 @@ export const L0Menu = ({
           </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
       </ScrollArea.Root>
+
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
         {pinnedItems
           .filter((item) => l0ItemType(item) !== 'collection')
@@ -328,11 +371,21 @@ export const L0Menu = ({
             <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
           ))}
       </div>
+
       {userAccountItem && (
-        <div role='none' className='grid py-2 app-no-drag'>
-          <L0Item key={userAccountItem.id} item={userAccountItem} parent={parent} path={path} userAccount />
+        <div role='none' className='grid app-no-drag'>
+          <L0ItemRoot key={userAccountItem.id} item={userAccountItem} parent={parent} path={path}>
+            <UserAccountAvatar
+              userId={userAccountItem.properties.userId}
+              hue={userAccountItem.properties.hue}
+              emoji={userAccountItem.properties.emoji}
+              status={userAccountItem.properties.status}
+              size={11}
+            />
+          </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/{L1Panels.tsx → Sidebar/L1Panel.tsx}

@@ -4,7 +4,6 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { useLayout } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
 import { Button, type ButtonProps, Icon, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
@@ -12,24 +11,16 @@ import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 import { byPosition } from '@dxos/util';
 
-import { useNavTreeContext } from './NavTreeContext';
-import { NavTreeItemColumns } from './NavTreeItemColumns';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-import { l0ItemType } from '../util';
+import { useLoadDescendents } from '../../hooks';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { l0ItemType } from '../../util';
+import { useNavTreeContext } from '../NavTreeContext';
+import { NavTreeItemColumns } from '../NavTreeItem';
 
-export type L1PanelProps = {
-  item: Node<any>;
-  path: string[];
-  currentItemId: string;
-  onBack?: () => void;
-};
-
-const headingBackButtonLabel =
-  'absolute inset-0 min-is-0 truncate flex items-center pis-6 transition-[transform,opacity] ease-in-out duration-200';
+const headingBackButtonLabel = 'absolute inset-0 min-is-0 truncate flex items-center pis-6';
 
+// TODO(burdon): Figure out better L1 back navigation.
 const HeadingBackButton = ({ title, onClick }: { title: string } & Pick<ButtonProps, 'onClick'>) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
       variant='ghost'
@@ -37,28 +28,20 @@ const HeadingBackButton = ({ title, onClick }: { title: string } & Pick<ButtonPr
       onClick={onClick}
     >
       <Icon icon='ph--caret-left--bold' size={3} />
-      <span
-        className={mx(
-          headingBackButtonLabel,
-          'translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100',
-        )}
-      >
-        {t('back label')}
-      </span>
-      <span
-        className={mx(
-          headingBackButtonLabel,
-          'translate-y-0 opacity-100 group-hover:-translate-y-2 group-hover:opacity-0 group-focus:-translate-y-2 group-focus:opacity-0',
-        )}
-      >
-        {title}
-      </span>
+      <span className={mx(headingBackButtonLabel)}>{title}</span>
     </Button>
   );
 };
 
-const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
-  const layout = useLayout();
+export type L1PanelProps = {
+  open?: boolean;
+  item: Node<any>;
+  path: string[];
+  currentItemId: string;
+  onBack?: () => void;
+};
+
+const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
   const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
   const { t } = useTranslation(NAVTREE_PLUGIN);
 
@@ -95,12 +78,14 @@ const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
       key={item.id}
       value={item.id}
       classNames={[
-        'absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr] pbs-[env(safe-area-inset-top)]',
+        'absolute inset-block-0 inline-end-0',
+        'is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]',
+        'pbs-[env(safe-area-inset-top)]',
         item.id === currentItemId && 'grid',
       ]}
       tabIndex={-1}
       aria-label={title}
-      {...(!layout.sidebarOpen && { inert: 'true' })}
+      {...(!open && { inert: 'true' })}
     >
       {item.id === currentItemId && (
         <>
@@ -156,7 +141,7 @@ const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
   );
 };
 
-const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
+const L1PanelCollection = ({ item, path, ...props }: L1PanelProps) => {
   const { getItems } = useNavTreeContext();
   useLoadDescendents(item);
   const collectionItems = getItems(item);
@@ -166,31 +151,27 @@ const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
       {collectionItems
         .filter((item) => l0ItemType(item) === 'tab')
         .map((item) => (
-          <L1Panel key={item.id} item={item} path={groupPath} currentItemId={currentItemId} />
+          <L1Panel key={item.id} item={item} path={groupPath} {...props} />
         ))}
     </>
   );
 };
 
-export const L1Panels = ({
-  topLevelItems,
-  path,
-  currentItemId,
-  onBack,
-}: Pick<L1PanelProps, 'onBack'> & {
+export type L1PanelsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
   topLevelItems: Node<any>[];
   path: string[];
-  currentItemId: string;
-}) => {
+};
+
+export const L1Panels = ({ topLevelItems, onBack, ...props }: L1PanelsProps) => {
   return (
     <>
       {topLevelItems.map((item) => {
         const type = l0ItemType(item);
         switch (type) {
           case 'collection':
-            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+            return <L1PanelCollection key={item.id} item={item} {...props} />;
           case 'tab':
-            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} onBack={onBack} />;
+            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
           default:
             return null;
         }

package/src/components/Sidebar/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './L0Menu';
+export * from './L1Panel';

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

@@ -5,17 +5,17 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React from 'react';
 
-import { UserAccountAvatar } from './UserAccountAvatar';
+import { withTheme } from '@dxos/storybook-utils';
 
-export const Default = (props: any) => {
-  return <UserAccountAvatar {...props} />;
-};
+import { UserAccountAvatar } from './UserAccountAvatar';
 
 const meta: Meta<typeof UserAccountAvatar> = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
   component: UserAccountAvatar,
+  decorators: [withTheme],
 };
 
 export default meta;
+
+export const Default = {};

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

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

package/src/components/UserAccountAvatar/index.ts

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

package/src/components/index.ts

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