@dxos/react-ui-list 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.69d29f4",
+  "version": "0.8.4-main.6fa680abb7",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,35 +30,35 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.4-main.69d29f4",
-    "@dxos/echo": "0.8.4-main.69d29f4",
-    "@dxos/invariant": "0.8.4-main.69d29f4",
-    "@dxos/log": "0.8.4-main.69d29f4",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4",
-    "@dxos/ui-types": "0.8.4-main.69d29f4",
-    "@dxos/util": "0.8.4-main.69d29f4"
+    "@dxos/debug": "0.8.4-main.6fa680abb7",
+    "@dxos/invariant": "0.8.4-main.6fa680abb7",
+    "@dxos/log": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/echo": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-types": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.69d29f4",
-    "@dxos/storybook-utils": "0.8.4-main.69d29f4"
+    "vite": "^7.1.11",
+    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
+    "@dxos/random": "0.8.4-main.6fa680abb7"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Accordion/Accordion.stories.tsx

@@ -22,9 +22,9 @@ const items: TestItem[] = Array.from({ length: 10 }, (_, i) => ({
 
 const DefaultStory = () => {
   return (
-    <Accordion.Root<TestItem> items={items} classNames='is-[40rem]'>
+    <Accordion.Root<TestItem> items={items} classNames='w-[40rem]'>
       {({ items }) => (
-        <div className='flex flex-col is-full border-y border-separator divide-y divide-separator'>
+        <div className='flex flex-col w-full border-y border-separator divide-y divide-separator'>
           {items.map((item) => (
             <Accordion.Item key={item.id} item={item} classNames='border-x border-separator'>
               <Accordion.ItemHeader>{item.name}</Accordion.ItemHeader>
@@ -42,7 +42,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'ui/react-ui-list/Accordion',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Accordion>;
 
 export default meta;

package/src/components/Accordion/AccordionItem.tsx

@@ -43,7 +43,7 @@ export type AccordionItemHeaderProps = ThemedClassName<AccordionPrimitive.Accord
 export const AccordionItemHeader = ({ classNames, children, ...props }: AccordionItemHeaderProps) => {
   return (
     <AccordionPrimitive.Header {...props} className={mx(classNames)}>
-      <AccordionPrimitive.Trigger className='group flex items-center p-2 dx-focus-ring-inset is-full text-start'>
+      <AccordionPrimitive.Trigger className='group flex items-center p-2 dx-focus-ring-inset w-full text-start'>
         {children}
         <Icon
           icon='ph--caret-right--regular'

package/src/components/List/List.stories.tsx

@@ -7,7 +7,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useContext, useMemo } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { ghostHover, mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
@@ -16,7 +16,7 @@ import { List, type ListRootProps } from './List';
 import { TestItemSchema, type TestItemType, type TestList, createList } from './testing';
 
 // TODO(burdon): var-icon-size.
-const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2rem] rounded';
+const grid = 'grid grid-cols-[32px_1fr_32px] min-h-[2rem] rounded-sm';
 
 const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
   const registry = useContext(RegistryContext);
@@ -45,13 +45,13 @@ const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
     <List.Root<TestItemType> dragPreview items={items} getId={(item) => item.id} onMove={handleMove} {...props}>
       {({ items }) => (
         <>
-          <div className='flex flex-col is-full'>
+          <div className='flex flex-col w-full'>
             <div role='none' className={grid}>
               <div />
               <div className='flex items-center text-sm'>Items</div>
             </div>
 
-            <div role='list' className='is-full bs-full overflow-auto'>
+            <div role='list' className='w-full h-full overflow-auto'>
               {items?.map((item) => (
                 <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
                   <List.ItemDragHandle />
@@ -69,7 +69,7 @@ const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
 
           <List.ItemDragPreview<TestItemType>>
             {({ item }) => (
-              <List.ItemWrapper classNames={mx(grid, 'bg-modalSurface border border-separator')}>
+              <List.ItemWrapper classNames={mx(grid, 'bg-modal-surface border border-separator')}>
                 <List.ItemDragHandle />
                 <div className='flex items-center'>{item.name}</div>
               </List.ItemWrapper>
@@ -89,7 +89,7 @@ const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
   return (
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
-        <div role='list' className='is-full bs-full overflow-auto'>
+        <div role='list' className='w-full h-full overflow-auto'>
           {items?.map((item) => (
             <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
               <List.ItemDragHandle />
@@ -106,7 +106,7 @@ const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
 const meta = {
   title: 'ui/react-ui-list/List',
   component: List.Root,
-  decorators: [withTheme, withRegistry],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/List/ListItem.tsx

@@ -46,17 +46,17 @@ export type ItemDragState =
       container: HTMLElement;
     }
   | {
-      type: 'is-dragging';
+      type: 'w-dragging';
     }
   | {
-      type: 'is-dragging-over';
+      type: 'w-dragging-over';
       closestEdge: Edge | null;
     };
 
 export const idle: ItemDragState = { type: 'idle' };
 
 const stateStyles: { [Key in ItemDragState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {
-  'is-dragging': 'opacity-50',
+  'w-dragging': 'opacity-50',
 };
 
 type ListItemContext<T extends ListItemRecord> = {
@@ -124,8 +124,8 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
             }
           : undefined,
         onDragStart: () => {
-          setState({ type: 'is-dragging' });
-          setRootState({ type: 'is-dragging', item });
+          setState({ type: 'w-dragging' });
+          setRootState({ type: 'w-dragging', item });
         },
         onDrop: () => {
           setState(idle);
@@ -147,7 +147,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {
           const closestEdge = extractClosestEdge(self.data);
-          setState({ type: 'is-dragging-over', closestEdge });
+          setState({ type: 'w-dragging-over', closestEdge });
         },
         onDragLeave: () => {
           setState(idle);
@@ -155,10 +155,10 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
         onDrag: ({ self }) => {
           const closestEdge = extractClosestEdge(self.data);
           setState((current) => {
-            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
+            if (current.type === 'w-dragging-over' && current.closestEdge === closestEdge) {
               return current;
             }
-            return { type: 'is-dragging-over', closestEdge };
+            return { type: 'w-dragging-over', closestEdge };
           });
         },
         onDrop: () => {
@@ -172,7 +172,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
       <div ref={ref} role='listitem' className={mx('flex relative', classNames, stateStyles[state.type])} {...props}>
         {children}
-        {state.type === 'is-dragging-over' && state.closestEdge && (
+        {state.type === 'w-dragging-over' && state.closestEdge && (
           <NaturalListItem.DropIndicator edge={state.closestEdge} />
         )}
       </div>
@@ -255,7 +255,7 @@ export const ListItemDragPreview = <T extends ListItemRecord>({
 };
 
 export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('flex is-full gap-2', classNames)}>{children}</div>
+  <div className={mx('flex w-full gap-2', classNames)}>{children}</div>
 );
 
 export const ListItemTitle = ({

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

@@ -4,7 +4,7 @@
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 
@@ -17,6 +17,7 @@ import { Path } from '../../util';
 
 import { type TestItem, createTree, updateState } from './testing';
 import { Tree } from './Tree';
+import { type TreeModel } from './TreeContext';
 import { type TreeData } from './TreeItem';
 
 faker.seed(1234);
@@ -27,27 +28,111 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
   const registry = useContext(RegistryContext);
   const stateAtomsRef = useRef(new Map<string, Atom.Writable<{ open: boolean; current: boolean }>>());
 
-  const getOrCreateStateAtom = useCallback((path: string) => {
-    let atom = stateAtomsRef.current.get(path);
+  const getOrCreateStateAtom = useCallback((pathKey: string) => {
+    let atom = stateAtomsRef.current.get(pathKey);
     if (!atom) {
       atom = Atom.make({ open: false, current: false }).pipe(Atom.keepAlive);
-      stateAtomsRef.current.set(path, atom);
+      stateAtomsRef.current.set(pathKey, atom);
     }
     return atom;
   }, []);
 
-  const useItemState = useCallback(
-    (_path: string[]) => {
-      const path = useMemo(() => Path.create(..._path), [_path.join('~')]);
-      const atom = getOrCreateStateAtom(path);
-      return useAtomValue(atom);
-    },
+  // Build a lookup map of all items by ID.
+  const itemMap = useMemo(() => {
+    const map = new Map<string, TestItem>();
+    const walk = (item: TestItem) => {
+      map.set(item.id, item);
+      item.items?.forEach(walk);
+    };
+    walk(tree);
+    return map;
+  }, []);
+
+  // Build a child IDs map keyed by parent ID.
+  const childIdsMap = useMemo(() => {
+    const map = new Map<string, string[]>();
+    const walk = (item: TestItem) => {
+      if (item.items) {
+        map.set(
+          item.id,
+          item.items.map((child) => child.id),
+        );
+        item.items.forEach(walk);
+      }
+    };
+    // Root children.
+    map.set(
+      tree.id,
+      (tree.items ?? []).map((child) => child.id),
+    );
+    walk(tree);
+    return map;
+  }, []);
+
+  const childIdsFamily = useMemo(
+    () => Atom.family((id: string) => Atom.make(() => childIdsMap.get(id) ?? []).pipe(Atom.keepAlive)),
+    [childIdsMap],
+  );
+
+  const itemFamily = useMemo(
+    () => Atom.family((id: string) => Atom.make(() => itemMap.get(id)).pipe(Atom.keepAlive)),
+    [itemMap],
+  );
+
+  const itemPropsFamily = useMemo(
+    () =>
+      Atom.family((pathKey: string) => {
+        const id = pathKey.split('~').pop()!;
+        return Atom.make(() => {
+          const parent = itemMap.get(id);
+          if (!parent) {
+            return { id, label: id };
+          }
+          return {
+            id: parent.id,
+            label: parent.name,
+            icon: parent.icon,
+            ...((parent.items?.length ?? 0) > 0 && {
+              parentOf: parent.items!.map(({ id }) => id),
+            }),
+          };
+        }).pipe(Atom.keepAlive);
+      }),
+    [itemMap],
+  );
+
+  const itemOpenFamily = useMemo(
+    () =>
+      Atom.family((pathKey: string) => {
+        const stateAtom = getOrCreateStateAtom(pathKey);
+        return Atom.make((get) => get(stateAtom).open).pipe(Atom.keepAlive);
+      }),
+    [getOrCreateStateAtom],
+  );
+
+  const itemCurrentFamily = useMemo(
+    () =>
+      Atom.family((pathKey: string) => {
+        const stateAtom = getOrCreateStateAtom(pathKey);
+        return Atom.make((get) => get(stateAtom).current).pipe(Atom.keepAlive);
+      }),
     [getOrCreateStateAtom],
   );
 
+  const model: TreeModel<TestItem> = useMemo(
+    () => ({
+      childIds: (parentId?: string) => childIdsFamily(parentId ?? tree.id),
+      item: (id: string) => itemFamily(id),
+      itemProps: (path: string[]) => itemPropsFamily(path.join('~')),
+      itemOpen: (path: string[]) => itemOpenFamily(Path.create(...path)),
+      itemCurrent: (path: string[]) => itemCurrentFamily(Path.create(...path)),
+    }),
+    [childIdsFamily, itemFamily, itemPropsFamily, itemOpenFamily, itemCurrentFamily],
+  );
+
   const handleOpenChange = useCallback(
-    ({ path: _path, open }: { path: string[]; open: boolean }) => {
-      const path = Path.create(..._path);
+    ({ path: pathProp, open }: { path: string[]; open: boolean }) => {
+      const path = Path.create(...pathProp);
       const atom = getOrCreateStateAtom(path);
       const prev = registry.get(atom);
       registry.set(atom, { ...prev, open });
@@ -56,8 +141,8 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
   );
 
   const handleSelect = useCallback(
-    ({ path: _path, current }: { path: string[]; current: boolean }) => {
-      const path = Path.create(..._path);
+    ({ path: pathProp, current }: { path: string[]; current: boolean }) => {
+      const path = Path.create(...pathProp);
       const atom = getOrCreateStateAtom(path);
       const prev = registry.get(atom);
       registry.set(atom, { ...prev, current });
@@ -89,19 +174,10 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
 
   return (
     <Tree
+      model={model}
       id={tree.id}
+      rootId={tree.id}
       draggable={draggable}
-      useItems={(parent?: TestItem) => parent?.items ?? tree.items}
-      getProps={(parent: TestItem) => ({
-        id: parent.id,
-        label: parent.name,
-        icon: parent.icon,
-        ...((parent.items?.length ?? 0) > 0 && {
-          parentOf: parent.items!.map(({ id }) => id),
-        }),
-      })}
-      useIsOpen={(_path: string[]) => useItemState(_path).open}
-      useIsCurrent={(_path: string[]) => useItemState(_path).current}
       renderColumns={() => (
         <div className='flex items-center'>
           <Icon icon='ph--placeholder--regular' size={5} />
@@ -116,7 +192,7 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
 const meta = {
   title: 'ui/react-ui-list/Tree',
 
-  decorators: [withTheme, withRegistry],
+  decorators: [withTheme(), withRegistry],
   component: Tree,
   render: DefaultStory,
 } satisfies Meta<typeof Tree<TestItem>>;

package/src/components/Tree/Tree.tsx

@@ -1,20 +1,20 @@
 //
 // Copyright 2024 DXOS.org
-//
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
-import { type TreeContextType, TreeProvider } from './TreeContext';
-import { TreeItem, type TreeItemProps } from './TreeItem';
+import { type TreeModel, TreeProvider } from './TreeContext';
+import { TreeItemById, type TreeItemByIdProps, type TreeItemProps } from './TreeItem';
 
-export type TreeProps<T extends { id: string } = any, O = any> = {
-  root?: T;
+export type TreeProps<T extends { id: string } = any> = {
+  model: TreeModel<T>;
+  rootId?: string;
   path?: string[];
   id: string;
-} & TreeContextType<T, O> &
-  Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
+} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
   Pick<
     TreeItemProps<T>,
     | 'draggable'
@@ -24,17 +24,15 @@ export type TreeProps<T extends { id: string } = any, O = any> = {
     | 'canSelect'
     | 'onOpenChange'
     | 'onSelect'
+    | 'onItemHover'
     | 'levelOffset'
   >;
 
-export const Tree = <T extends { id: string } = any, O = any>({
-  root,
+export const Tree = <T extends { id: string } = any>({
+  model,
+  rootId,
   path,
   id,
-  useItems,
-  getProps,
-  useIsOpen,
-  useIsCurrent,
   draggable = false,
   gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
   classNames,
@@ -45,37 +43,29 @@ export const Tree = <T extends { id: string } = any, O = any>({
   canSelect,
   onOpenChange,
   onSelect,
-}: TreeProps<T, O>) => {
-  const context = useMemo(
-    () => ({
-      useItems,
-      getProps,
-      useIsOpen,
-      useIsCurrent,
-    }),
-    [useItems, getProps, useIsOpen, useIsCurrent],
-  );
-  const items = useItems(root);
+  onItemHover,
+}: TreeProps<T>) => {
+  const childIds = useAtomValue(model.childIds(rootId));
   const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);
 
+  const childProps: Omit<TreeItemByIdProps, 'id' | 'last'> = {
+    path: treePath,
+    levelOffset,
+    draggable,
+    renderColumns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onOpenChange,
+    onSelect,
+    onItemHover,
+  };
+
   return (
     <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
-      <TreeProvider value={context}>
-        {items.map((item, index) => (
-          <TreeItem
-            key={item.id}
-            item={item}
-            last={index === items.length - 1}
-            path={treePath}
-            levelOffset={levelOffset}
-            draggable={draggable}
-            renderColumns={renderColumns}
-            blockInstruction={blockInstruction}
-            canDrop={canDrop}
-            canSelect={canSelect}
-            onOpenChange={onOpenChange}
-            onSelect={onSelect}
-          />
+      <TreeProvider value={model}>
+        {childIds.map((childId, index) => (
+          <TreeItemById key={childId} id={childId} last={index === childIds.length - 1} {...childProps} />
         ))}
       </TreeProvider>
     </Treegrid.Root>

package/src/components/Tree/TreeContext.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
 import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
@@ -11,6 +12,10 @@ export type TreeItemDataProps = {
   id: string;
   label: Label;
   parentOf?: string[];
+  /** When `false`, the item cannot be dragged (overrides tree-level `draggable`). */
+  draggable?: boolean;
+  /** When `false`, the item does not participate as a drop target. */
+  droppable?: boolean;
   className?: string;
   headingClassName?: string;
   icon?: string;
@@ -19,16 +24,20 @@ export type TreeItemDataProps = {
   testId?: string;
 };
 
-export type TreeContextType<T = any, O = any> = {
-  useItems: (parent?: T, options?: O) => T[];
-  getProps: (item: T, parent: string[]) => TreeItemDataProps;
-  /** Hook that subscribes to and returns the open state for a tree item. */
-  useIsOpen: (path: string[], item: T) => boolean;
-  /** Hook that subscribes to and returns the current state for a tree item. */
-  useIsCurrent: (path: string[], item: T) => boolean;
-};
+export interface TreeModel<T extends { id: string } = any> {
+  /** Atom family: resolve item by ID (content). */
+  item: (id: string) => Atom.Atom<T | undefined>;
+  /** Atom family: open state keyed by path. */
+  itemOpen: (path: string[]) => Atom.Atom<boolean>;
+  /** Atom family: current (selected) state keyed by path. */
+  itemCurrent: (path: string[]) => Atom.Atom<boolean>;
+  /** Atom family: display props for an item at a given path (path includes item's own ID at end). */
+  itemProps: (path: string[]) => Atom.Atom<TreeItemDataProps>;
+  /** Atom family: outbound child IDs for a parent ID (topology). Undefined = root. */
+  childIds: (parentId?: string) => Atom.Atom<string[]>;
+}
 
-const TreeContext = createContext<null | TreeContextType>(null);
+const TreeContext = createContext<TreeModel | null>(null);
 
 export const TreeProvider = TreeContext.Provider;