@dxos/react-ui-list 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.d05539e30a",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,33 +33,33 @@
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/debug": "0.8.4-main.d05539e30a",
-    "@dxos/echo": "0.8.4-main.d05539e30a",
-    "@dxos/invariant": "0.8.4-main.d05539e30a",
-    "@dxos/log": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui": "0.8.4-main.d05539e30a",
-    "@dxos/react-list": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.d05539e30a",
-    "@dxos/util": "0.8.4-main.d05539e30a",
-    "@dxos/ui-types": "0.8.4-main.d05539e30a",
-    "@dxos/ui-theme": "0.8.4-main.d05539e30a"
+    "@dxos/debug": "0.8.4-main.d9fc60f731",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/invariant": "0.8.4-main.d9fc60f731",
+    "@dxos/log": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/react-list": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-types": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.20.0",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^8.0.13",
-    "@dxos/random": "0.8.4-main.d05539e30a",
-    "@dxos/storybook-utils": "0.8.4-main.d05539e30a"
+    "vite": "^8.0.14",
+    "@dxos/random": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
-    "effect": "3.20.0",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui": "0.8.4-main.d05539e30a"
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Combobox/Combobox.tsx

@@ -37,7 +37,8 @@ import {
   type ThemedClassName,
   useId,
 } from '@dxos/react-ui';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { Picker, type PickerInputProps, type PickerItemProps } from '../Picker';
 

package/src/components/RowList/RowList.tsx

@@ -79,7 +79,7 @@ import React, { type FocusEvent, type ForwardedRef, type MouseEvent, type PropsW
 
 import { List, ListItem } from '@dxos/react-list';
 import { ScrollArea, type ScrollAreaRootProps } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/react-ui';
 
 const ROW_LIST_NAME = 'RowList';
 const ROW_LIST_ROOT_NAME = 'RowList.Root';

package/src/components/Tree/Tree.stories.tsx

@@ -93,6 +93,9 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
             icon: parent.icon,
             ...((parent.items?.length ?? 0) > 0 && {
               parentOf: parent.items!.map(({ id }) => id),
+              count: parent.items!.length,
+              // Demonstrate the rose "new/modified" badge on a subset of branches (replaces the neutral count).
+              ...(parent.name.length % 3 === 0 && { modifiedCount: (parent.name.length % 5) + 1 }),
             }),
           };
         }).pipe(Atom.keepAlive);
@@ -179,7 +182,7 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
       draggable={draggable}
       renderColumns={() => (
         <div className='flex items-center'>
-          <Icon icon='ph--placeholder--regular' />
+          <Icon icon='ph--circle-dashed--regular' />
         </div>
       )}
       onOpenChange={handleOpenChange}

package/src/components/Tree/Tree.tsx

@@ -35,7 +35,7 @@ export const Tree = <T extends { id: string } = any>({
   path,
   id,
   draggable = false,
-  gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
+  gridTemplateColumns = '[tree-row-start] minmax(0, 1fr) min-content [tree-row-end]',
   levelOffset,
   renderColumns,
   blockInstruction,

package/src/components/Tree/TreeContext.tsx

@@ -22,6 +22,10 @@ export type TreeItemDataProps = {
   iconHue?: string;
   disabled?: boolean;
   testId?: string;
+  /** Optional item count rendered as a neutral badge directly after the label. */
+  count?: number;
+  /** Optional count of new/modified items; when greater than zero it shows as a rose badge in place of `count`. */
+  modifiedCount?: number;
 };
 
 export interface TreeModel<T extends { id: string } = any> {

package/src/components/Tree/TreeItem.tsx

@@ -119,6 +119,8 @@ const RawTreeItem = <T extends { id: string } = any>({
     iconHue,
     disabled,
     testId,
+    count,
+    modifiedCount,
   } = useAtomValue(itemPropsAtom(path));
   const childIds = useAtomValue(childIdsAtom(item.id));
   const open = useAtomValue(itemOpenAtom(path));
@@ -336,6 +338,8 @@ const RawTreeItem = <T extends { id: string } = any>({
               className={headingClassName}
               icon={icon}
               iconHue={iconHue}
+              count={count}
+              modifiedCount={modifiedCount}
               onSelect={handleSelect}
               ref={buttonRef}
             />

package/src/components/Tree/TreeItemHeading.tsx

@@ -4,7 +4,7 @@
 
 import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallback } from 'react';
 
-import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Button, Icon, type Label, Tag, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 import { getStyles } from '@dxos/ui-theme';
 
@@ -17,12 +17,16 @@ export type TreeItemHeadingProps = {
   iconHue?: string;
   disabled?: boolean;
   current?: boolean;
+  /** Optional item count rendered as a neutral badge directly after the label. */
+  count?: number;
+  /** Optional count of new/modified items; when greater than zero it replaces {@link count} with a rose badge. */
+  modifiedCount?: number;
   onSelect?: (option: boolean) => void;
 };
 
 export const TreeItemHeading = memo(
   forwardRef<HTMLButtonElement, TreeItemHeadingProps>(
-    ({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
+    ({ label, className, icon, iconHue, disabled, current, count, modifiedCount, onSelect }, forwardedRef) => {
       const { t } = useTranslation();
       const styles = iconHue ? getStyles(iconHue) : undefined;
 
@@ -57,7 +61,7 @@ export const TreeItemHeading = memo(
             data-testid='treeItem.heading'
             variant='ghost'
             classNames={[
-              'grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent',
+              'grow shrink min-w-0 justify-start gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent',
               'disabled:cursor-default disabled:opacity-100',
               className,
             ]}
@@ -66,15 +70,38 @@ export const TreeItemHeading = memo(
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && (
-              <Icon size={5} icon={icon ?? 'ph--placeholder--regular'} classNames={['my-1', styles?.foreground]} />
-            )}
-            <span className='flex-1 w-0 truncate text-start font-normal' data-tooltip>
+            {icon && <Icon size={5} icon={icon ?? 'ph--circle-dashed--regular'} classNames={['my-1', styles?.text]} />}
+            <span className='min-w-0 truncate text-start font-normal' data-tooltip>
               {toLocalizedString(label, t)}
             </span>
+            <CountBadge count={count} modifiedCount={modifiedCount} />
           </Button>
         </TextTooltip>
       );
     },
   ),
 );
+
+/**
+ * Renders the count badge after a tree item label.
+ * A positive `modifiedCount` (e.g. new/unread items) shows as a rose badge in place of the neutral total `count`.
+ */
+const CountBadge = ({ count, modifiedCount }: Pick<TreeItemHeadingProps, 'count' | 'modifiedCount'>) => {
+  if (typeof modifiedCount === 'number' && modifiedCount > 0) {
+    return (
+      <Tag palette='rose' classNames='shrink-0 text-center [min-inline-size:1.5rem] tabular-nums'>
+        {modifiedCount}
+      </Tag>
+    );
+  }
+
+  if (typeof count === 'number') {
+    return (
+      <Tag palette='neutral' classNames='shrink-0 text-center [min-inline-size:1.5rem] tabular-nums'>
+        {count}
+      </Tag>
+    );
+  }
+
+  return null;
+};

package/src/components/Tree/TreeItemToggle.tsx

@@ -21,7 +21,7 @@ export const TreeItemToggle = memo(
           data-testid='treeItem.toggle'
           aria-expanded={open}
           variant='ghost'
-          density='fine'
+          density='md'
           classNames={[
             'h-full w-6 px-0',
             '[&_svg]:transition-transform [&_svg]:duration-200',