@dxos/react-ui-list 0.8.4-main.66e292d → 0.8.4-main.69d29f4

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.66e292d",
+  "version": "0.8.4-main.69d29f4",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "type": "module",
@@ -24,39 +28,37 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@effect-atom/atom-react": "^0.4.6",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/invariant": "0.8.4-main.66e292d",
-    "@dxos/live-object": "0.8.4-main.66e292d",
-    "@dxos/react-ui": "0.8.4-main.66e292d",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.66e292d",
-    "@dxos/log": "0.8.4-main.66e292d",
-    "@dxos/debug": "0.8.4-main.66e292d",
-    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
-    "@dxos/react-ui-types": "0.8.4-main.66e292d",
-    "@dxos/util": "0.8.4-main.66e292d",
-    "@dxos/echo": "0.8.4-main.66e292d"
+    "@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"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.11",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/storybook-utils": "0.8.4-main.66e292d",
-    "@dxos/random": "0.8.4-main.66e292d"
+    "@dxos/random": "0.8.4-main.69d29f4",
+    "@dxos/storybook-utils": "0.8.4-main.69d29f4"
   },
   "peerDependencies": {
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
-    "@dxos/react-ui": "0.8.4-main.66e292d"
+    "effect": "3.19.11",
+    "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"
   },
   "publishConfig": {
     "access": "public"

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

@@ -42,7 +42,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'ui/react-ui-list/Accordion',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ container: 'column' })],
+  decorators: [withTheme, withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Accordion>;
 
 export default meta;

package/src/components/Accordion/AccordionItem.tsx

@@ -7,7 +7,7 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
 import { Icon, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type ListItemRecord } from '../List';
 
@@ -59,7 +59,7 @@ export type AccordionItemBodyProps = ThemedClassName<PropsWithChildren>;
 
 export const AccordionItemBody = ({ children, classNames }: AccordionItemBodyProps) => {
   return (
-    <AccordionPrimitive.Content className='overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown'>
+    <AccordionPrimitive.Content className='overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down'>
       <div role='none' className={mx('p-2', classNames)}>
         {children}
       </div>

package/src/components/Accordion/AccordionRoot.tsx

@@ -7,7 +7,7 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type ReactNode } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type ListItemRecord } from '../List';
 

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

@@ -2,31 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 
-import { live } from '@dxos/live-object';
 import { withTheme } from '@dxos/react-ui/testing';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { withRegistry } from '@dxos/storybook-utils';
+import { ghostHover, mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { List, type ListRootProps } from './List';
-import { TestItemSchema, type TestItemType, createList } from './testing';
+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 DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
+const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
+  const registry = useContext(RegistryContext);
+  const listAtom = useMemo(() => Atom.make<TestList>(createList(100)).pipe(Atom.keepAlive), []);
+  const list = useAtomValue(listAtom);
+  const items = list.items;
+
   const handleSelect = (item: TestItemType) => {
     console.log('select', item);
   };
   const handleDelete = (item: TestItemType) => {
-    const idx = items.findIndex((i) => i.id === item.id);
-    items.splice(idx, 1);
+    const prev = registry.get(listAtom);
+    registry.set(listAtom, {
+      ...prev,
+      items: prev.items.filter((i) => i.id !== item.id),
+    });
   };
   const handleMove = (from: number, to: number) => {
-    arrayMove(items, from, to);
+    const prev = registry.get(listAtom);
+    const newItems = [...prev.items];
+    arrayMove(newItems, from, to);
+    registry.set(listAtom, { ...prev, items: newItems });
   };
 
   return (
@@ -69,7 +81,11 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
   );
 };
 
-const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
+const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
+  const listAtom = useMemo(() => Atom.make<TestList>(createList(100)).pipe(Atom.keepAlive), []);
+  const list = useAtomValue(listAtom);
+  const items = list.items;
+
   return (
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
@@ -87,12 +103,10 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   );
 };
 
-const list = live(createList(100));
-
 const meta = {
   title: 'ui/react-ui-list/List',
   component: List.Root,
-  decorators: [withTheme],
+  decorators: [withTheme, withRegistry],
   parameters: {
     layout: 'fullscreen',
   },
@@ -103,7 +117,6 @@ export default meta;
 export const Default: StoryObj<typeof DefaultStory> = {
   render: DefaultStory,
   args: {
-    items: list.items,
     isItem: Schema.is(TestItemSchema),
   },
 };
@@ -111,7 +124,6 @@ export const Default: StoryObj<typeof DefaultStory> = {
 export const Simple: StoryObj<typeof SimpleStory> = {
   render: SimpleStory,
   args: {
-    items: list.items,
     isItem: Schema.is(TestItemSchema),
   },
 };

package/src/components/List/ListItem.tsx

@@ -31,7 +31,7 @@ import {
   type ThemedClassName,
   useTranslation,
 } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { useListContext } from './ListRoot';
 
@@ -195,7 +195,7 @@ export const ListItemDeleteButton = ({
   Omit<IconButtonProps, 'icon' | 'label'> & { autoHide?: boolean; label?: string }) => {
   const { state } = useListContext('DELETE_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   return (
     <IconButton
       iconOnly
@@ -232,7 +232,7 @@ export const ListItemButton = ({
 
 export const ListItemDragHandle = ({ disabled }: Pick<IconButtonProps, 'disabled'>) => {
   const { dragHandleRef } = useListItemContext('DRAG_HANDLE');
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   return (
     <IconButton
       iconOnly

package/src/components/List/ListRoot.tsx

@@ -26,14 +26,14 @@ export const [ListProvider, useListContext] = createContext<ListContext<any>>(LI
 
 export type ListRendererProps<T extends ListItemRecord> = {
   state: ListContext<T>['state'];
-  items: T[];
+  items: readonly T[];
 };
 
 const defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;
 
 export type ListRootProps<T extends ListItemRecord> = {
   children?: (props: ListRendererProps<T>) => ReactNode;
-  items?: T[];
+  items?: readonly T[];
   onMove?: (fromIndex: number, toIndex: number) => void;
 } & Pick<ListContext<T>, 'isItem' | 'getId' | 'readonly' | 'dragPreview'>;
 

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

@@ -4,28 +4,71 @@
 
 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 { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { type Live, live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 
 import { Path } from '../../util';
 
 import { type TestItem, createTree, updateState } from './testing';
-import { Tree, type TreeProps } from './Tree';
+import { Tree } from './Tree';
 import { type TreeData } from './TreeItem';
 
 faker.seed(1234);
 
-const DefaultStory = (props: TreeProps) => {
+const tree = createTree() as TestItem;
+
+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);
+    if (!atom) {
+      atom = Atom.make({ open: false, current: false }).pipe(Atom.keepAlive);
+      stateAtomsRef.current.set(path, atom);
+    }
+    return atom;
+  }, []);
+
+  const useItemState = useCallback(
+    (_path: string[]) => {
+      const path = useMemo(() => Path.create(..._path), [_path.join('~')]);
+      const atom = getOrCreateStateAtom(path);
+      return useAtomValue(atom);
+    },
+    [getOrCreateStateAtom],
+  );
+
+  const handleOpenChange = useCallback(
+    ({ path: _path, open }: { path: string[]; open: boolean }) => {
+      const path = Path.create(..._path);
+      const atom = getOrCreateStateAtom(path);
+      const prev = registry.get(atom);
+      registry.set(atom, { ...prev, open });
+    },
+    [getOrCreateStateAtom, registry],
+  );
+
+  const handleSelect = useCallback(
+    ({ path: _path, current }: { path: string[]; current: boolean }) => {
+      const path = Path.create(..._path);
+      const atom = getOrCreateStateAtom(path);
+      const prev = registry.get(atom);
+      registry.set(atom, { ...prev, current });
+    },
+    [getOrCreateStateAtom, registry],
+  );
+
   useEffect(() => {
     return monitorForElements({
       canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
       onDrop: ({ location, source }) => {
-        // Didn't drop on anything.
         if (!location.current.dropTargets.length) {
           return;
         }
@@ -44,72 +87,43 @@ const DefaultStory = (props: TreeProps) => {
     });
   }, []);
 
-  return <Tree {...props} />;
+  return (
+    <Tree
+      id={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} />
+        </div>
+      )}
+      onOpenChange={handleOpenChange}
+      onSelect={handleSelect}
+    />
+  );
 };
 
-const tree = live<TestItem>(createTree());
-const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
-
 const meta = {
   title: 'ui/react-ui-list/Tree',
 
-  decorators: [withTheme],
+  decorators: [withTheme, withRegistry],
   component: Tree,
   render: DefaultStory,
-  args: {
-    id: tree.id,
-    useItems: (parent?: TestItem) => {
-      return 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),
-      }),
-    }),
-    isOpen: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const object = state.get(path) ?? live({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, object);
-      }
-
-      return object.open;
-    },
-    isCurrent: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const object = state.get(path) ?? live({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, object);
-      }
-
-      return object.current;
-    },
-    renderColumns: () => {
-      return (
-        <div className='flex items-center'>
-          <Icon icon='ph--placeholder--regular' size={5} />
-        </div>
-      );
-    },
-    onOpenChange: ({ path: _path, open }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.open = open;
-    },
-    onSelect: ({ path: _path, current }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.current = current;
-    },
-  },
 } satisfies Meta<typeof Tree<TestItem>>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof DefaultStory>;
 
 export const Default: Story = {};
 

package/src/components/Tree/Tree.tsx

@@ -4,13 +4,12 @@
 
 import React, { useMemo } from 'react';
 
-import { type HasId } from '@dxos/echo/internal';
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
 import { type TreeContextType, TreeProvider } from './TreeContext';
 import { TreeItem, type TreeItemProps } from './TreeItem';
 
-export type TreeProps<T extends HasId = any, O = any> = {
+export type TreeProps<T extends { id: string } = any, O = any> = {
   root?: T;
   path?: string[];
   id: string;
@@ -28,14 +27,14 @@ export type TreeProps<T extends HasId = any, O = any> = {
     | 'levelOffset'
   >;
 
-export const Tree = <T extends HasId = any, O = any>({
+export const Tree = <T extends { id: string } = any, O = any>({
   root,
   path,
   id,
   useItems,
   getProps,
-  isOpen,
-  isCurrent,
+  useIsOpen,
+  useIsCurrent,
   draggable = false,
   gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
   classNames,
@@ -51,10 +50,10 @@ export const Tree = <T extends HasId = any, O = any>({
     () => ({
       useItems,
       getProps,
-      isOpen,
-      isCurrent,
+      useIsOpen,
+      useIsCurrent,
     }),
-    [useItems, getProps, isOpen, isCurrent],
+    [useItems, getProps, useIsOpen, useIsCurrent],
   );
   const items = useItems(root);
   const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);

package/src/components/Tree/TreeContext.tsx

@@ -22,8 +22,10 @@ export type TreeItemDataProps = {
 export type TreeContextType<T = any, O = any> = {
   useItems: (parent?: T, options?: O) => T[];
   getProps: (item: T, parent: string[]) => TreeItemDataProps;
-  isOpen: (path: string[], item: T) => boolean;
-  isCurrent: (path: string[], item: T) => boolean;
+  /** 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;
 };
 
 const TreeContext = createContext<null | TreeContextType>(null);

package/src/components/Tree/TreeItem.tsx

@@ -13,7 +13,6 @@ import {
 import * as Schema from 'effect/Schema';
 import React, { type FC, type KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type HasId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { TreeItem as NaturalTreeItem, Treegrid } from '@dxos/react-ui';
 import {
@@ -22,7 +21,7 @@ import {
   hoverableControls,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
-} from '@dxos/react-ui-theme';
+} from '@dxos/ui-theme';
 
 import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 import { useTree } from './TreeContext';
@@ -43,7 +42,7 @@ export const TreeDataSchema = Schema.Struct({
 export type TreeData = Schema.Schema.Type<typeof TreeDataSchema>;
 export const isTreeData = (data: unknown): data is TreeData => Schema.is(TreeDataSchema)(data);
 
-export type ColumnRenderer<T extends HasId = any> = FC<{
+export type ColumnRenderer<T extends { id: string } = any> = FC<{
   item: T;
   path: string[];
   open: boolean;
@@ -51,7 +50,7 @@ export type ColumnRenderer<T extends HasId = any> = FC<{
   setMenuOpen: (open: boolean) => void;
 }>;
 
-export type TreeItemProps<T extends HasId = any> = {
+export type TreeItemProps<T extends { id: string } = any> = {
   item: T;
   path: string[];
   levelOffset?: number;
@@ -65,7 +64,7 @@ export type TreeItemProps<T extends HasId = any> = {
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
 };
 
-const RawTreeItem = <T extends HasId = any>({
+const RawTreeItem = <T extends { id: string } = any>({
   item,
   path: _path,
   levelOffset = 2,
@@ -86,12 +85,12 @@ const RawTreeItem = <T extends HasId = any>({
   const [instruction, setInstruction] = useState<Instruction | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const { useItems, getProps, isOpen, isCurrent } = useTree();
+  const { useItems, getProps, useIsOpen, useIsCurrent } = useTree();
   const items = useItems(item);
   const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = getProps(item, _path);
   const path = useMemo(() => [..._path, id], [_path, id]);
-  const open = isOpen(path, item);
-  const current = isCurrent(path, item);
+  const open = useIsOpen(path, item);
+  const current = useIsCurrent(path, item);
   const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';

package/src/components/Tree/TreeItemHeading.tsx

@@ -6,7 +6,7 @@ import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallba
 
 import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { getStyles } from '@dxos/react-ui-theme';
+import { getStyles } from '@dxos/ui-theme';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct
 //   rather than just making the item unselectable.

package/src/components/Tree/testing.ts

@@ -6,13 +6,13 @@ import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-
 import * as Schema from 'effect/Schema';
 
 import { Obj } from '@dxos/echo';
-import { type HasId } from '@dxos/echo/internal';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 
 import { type TreeData } from './TreeItem';
 
-export type TestItem = HasId & {
+export type TestItem = {
+  id: string;
   name: string;
   icon?: string;
   items: TestItem[];