@dxos/react-ui-list 0.8.1 → 0.8.2-main.10c050d

package/dist/types/src/components/Tree/Tree.stories.d.ts

@@ -1,7 +1,8 @@
 import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Tree } from './Tree';
-declare const meta: Meta<typeof Tree>;
+import { type TestItem } from './testing';
+declare const meta: Meta<typeof Tree<TestItem>>;
 export default meta;
 export declare const Default: {};
 export declare const Draggable: StoryObj<typeof Tree>;

package/dist/types/src/components/Tree/Tree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQ5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAU9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgF3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,CAI3C,CAAC"}
+{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQ5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAA2B,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAQnE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAgFrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,CAI3C,CAAC"}

package/dist/types/src/components/Tree/TreeContext.d.ts

@@ -10,7 +10,7 @@ export type PropsFromTreeItem = {
     testId?: string;
 };
 export type TreeContextType<T = any> = {
-    getItems: (parent?: T) => T[];
+    useItems: (parent?: T) => T[];
     getProps: (item: T, parent: string[]) => PropsFromTreeItem;
     isOpen: (path: string[], item: T) => boolean;
     isCurrent: (path: string[], item: T) => boolean;

package/dist/types/src/components/Tree/TreeItem.d.ts

@@ -1,13 +1,14 @@
-import React, { type FC } from 'react';
-import { S } from '@dxos/echo-schema';
-export declare const TreeDataSchema: S.Struct<{
-    id: typeof S.String;
-    path: S.Array$<typeof S.String>;
-    item: typeof S.Any;
+import { Schema } from 'effect';
+import { type FC } from 'react';
+import { type HasId } from '@dxos/echo-schema';
+export declare const TreeDataSchema: Schema.Struct<{
+    id: typeof Schema.String;
+    path: Schema.Array$<typeof Schema.String>;
+    item: typeof Schema.Any;
 }>;
-export type TreeData = S.Schema.Type<typeof TreeDataSchema>;
+export type TreeData = Schema.Schema.Type<typeof TreeDataSchema>;
 export declare const isTreeData: (data: unknown) => data is TreeData;
-export type TreeItemProps<T = any> = {
+export type TreeItemProps<T extends HasId = any> = {
     item: T;
     path: string[];
     levelOffset?: number;
@@ -33,6 +34,5 @@ export type TreeItemProps<T = any> = {
         option: boolean;
     }) => void;
 };
-export declare const RawTreeItem: <T = any>({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset, }: TreeItemProps<T>) => React.JSX.Element;
 export declare const TreeItem: FC<TreeItemProps>;
 //# sourceMappingURL=TreeItem.d.ts.map

package/dist/types/src/components/Tree/TreeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItem.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,EAA2D,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAEpH,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAqBtC,eAAO,MAAM,cAAc;;;;EAIzB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,eAAO,MAAM,UAAU,SAAU,OAAO,KAAG,IAAI,IAAI,QAAsC,CAAC;AAE1F,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,GAAG,IAAI;IACnC,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,EAAE,CAAC;QACjB,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,WAAW,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;KACtC,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,mIAU1B,aAAa,CAAC,CAAC,CAAC,sBAgNlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAwB,EAAE,CAAC,aAAa,CAAC,CAAC"}
+{"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItem.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAc,EAA2D,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAEpH,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAqB/C,eAAO,MAAM,cAAc;;;;EAIzB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,KAAG,IAAI,IAAI,QAA2C,CAAC;AAE/F,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,IAAI;IACjD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,EAAE,CAAC;QACjB,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,WAAW,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;KACtC,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7F,CAAC;AA+NF,eAAO,MAAM,QAAQ,EAAwB,EAAE,CAAC,aAAa,CAAC,CAAC"}

package/dist/types/src/components/Tree/TreeItemToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItemToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItemToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,0HAoB1B,CAAC"}
+{"version":3,"file":"TreeItemToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItemToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,0HAgB1B,CAAC"}

package/dist/types/src/components/Tree/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/helpers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC,eAAO,MAAM,kBAAkB,UAAW,MAAM;;CAE9C,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/helpers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,EAAE,oBAAiC;;CAEjF,CAAC"}

package/dist/types/src/components/Tree/testing.d.ts

@@ -1,17 +1,17 @@
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+import { type HasId } from '@dxos/echo-schema';
 import { type TreeData } from './TreeItem';
-export type TestItem = {
-    id: string;
+export type TestItem = HasId & {
     name: string;
     icon?: string;
     items: TestItem[];
 };
-export declare const TestItemSchema: S.Struct<{
-    id: typeof S.String;
-    name: typeof S.String;
-    icon: S.optional<typeof S.String>;
-    items: S.mutable<S.Array$<S.suspend<TestItem, TestItem, never>>>;
+export declare const TestItemSchema: Schema.Struct<{
+    id: import("@dxos/keys").ObjectIdClass;
+    name: typeof Schema.String;
+    icon: Schema.optional<typeof Schema.String>;
+    items: Schema.mutable<Schema.Array$<Schema.suspend<TestItem, TestItem, never>>>;
 }>;
 export declare const createTree: (n?: number, d?: number) => TestItem;
 export declare const updateState: ({ state, instruction, source, target, }: {

package/dist/types/src/components/Tree/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEtF,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAItC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;EAKzB,CAAC;AAEH,eAAO,MAAM,UAAU,8BAAmB,QAaxC,CAAC;AAmBH,eAAO,MAAM,WAAW,4CAKrB;IACD,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,SAgCA,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,KAAK,KAAK,EAAY,MAAM,mBAAmB,CAAC;AAIzD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;EAKzB,CAAC;AAEH,eAAO,MAAM,UAAU,GAAI,UAAK,EAAE,UAAK,KAAG,QAaxC,CAAC;AAmBH,eAAO,MAAM,WAAW,GAAI,yCAKzB;IACD,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,SAgCA,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.1",
+  "version": "0.8.2-main.10c050d",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,39 +25,40 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@preact/signals-core": "^1.6.0",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/react-ui-attention": "0.8.1",
-    "@dxos/react-ui-text-tooltip": "0.8.1",
-    "@dxos/react-ui-types": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "@dxos/debug": "0.8.2-main.10c050d",
+    "@dxos/echo-schema": "0.8.2-main.10c050d",
+    "@dxos/invariant": "0.8.2-main.10c050d",
+    "@dxos/live-object": "0.8.2-main.10c050d",
+    "@dxos/react-ui-attention": "0.8.2-main.10c050d",
+    "@dxos/react-ui-text-tooltip": "0.8.2-main.10c050d",
+    "@dxos/react-ui-types": "0.8.2-main.10c050d",
+    "@dxos/log": "0.8.2-main.10c050d",
+    "@dxos/util": "0.8.2-main.10c050d"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.13.3",
+    "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui": "0.8.1"
+    "@dxos/random": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/storybook-utils": "0.8.2-main.10c050d"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d"
   },
   "publishConfig": {
     "access": "public"

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

@@ -26,9 +26,9 @@ const DefaultStory = () => {
   return (
     <Accordion.Root<TestItem> items={items} classNames='w-[40rem]'>
       {({ items }) => (
-        <div className='flex flex-col w-full border-y border-divider divide-y divide-divider'>
+        <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-divider'>
+            <Accordion.Item key={item.id} item={item} classNames='border-x border-separator'>
               <Accordion.ItemHeader>{item.name}</Accordion.ItemHeader>
               <Accordion.ItemBody>
                 <p>{item.text}</p>

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

@@ -5,10 +5,10 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import { Schema } from 'effect';
 import React from 'react';
 
-import { S } from '@dxos/echo-schema';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { arrayMove } from '@dxos/util';
@@ -96,13 +96,13 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   );
 };
 
-const list = create(createList(100));
+const list = live(createList(100));
 
 export const Default: StoryObj<ListRootProps<TestItemType>> = {
   render: DefaultStory,
   args: {
     items: list.items,
-    isItem: S.is(TestItemSchema),
+    isItem: Schema.is(TestItemSchema),
   },
 };
 
@@ -110,6 +110,6 @@ export const Simple: StoryObj<ListRootProps<TestItemType>> = {
   render: SimpleStory,
   args: {
     items: list.items,
-    isItem: S.is(TestItemSchema),
+    isItem: Schema.is(TestItemSchema),
   },
 };

package/src/components/List/ListItem.tsx

@@ -30,7 +30,7 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { useListContext } from './ListRoot';
 
-export type ListItemRecord = {};
+export type ListItemRecord = any;
 
 export type ItemDragState =
   | {
@@ -96,7 +96,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
       draggable({
         element,
         dragHandle: dragHandleRef.current!,
-        getInitialData: () => item,
+        getInitialData: () => item as any,
         onGenerateDragPreview: dragPreview
           ? ({ nativeSetDragImage, source }) => {
               const rect = source.element.getBoundingClientRect();
@@ -104,10 +104,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
                 nativeSetDragImage,
                 getOffset: ({ container }) => {
                   const { height } = container.getBoundingClientRect();
-                  return {
-                    x: 20,
-                    y: height / 2,
-                  };
+                  return { x: 20, y: height / 2 };
                 },
                 render: ({ container }) => {
                   container.style.width = rect.width + 'px';
@@ -134,10 +131,10 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
       dropTargetForElements({
         element,
         canDrop: ({ source }) => {
-          return source.element !== element && isItem(source.data);
+          return (source.element !== element && isItem?.(source.data)) ?? false;
         },
         getData: ({ input }) => {
-          return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });
+          return attachClosestEdge(item as any, { element, input, allowedEdges: ['top', 'bottom'] });
         },
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {

package/src/components/List/ListRoot.tsx

@@ -15,7 +15,7 @@ type ListContext<T extends ListItemRecord> = {
   state: ItemDragState & { item?: T };
   setState: (state: ItemDragState & { item?: T }) => void;
   dragPreview?: boolean;
-  isItem: (item: any) => boolean;
+  isItem?: (item: any) => boolean;
   getId?: (item: T) => string; // TODO(burdon): Require if T doesn't conform to type.
 };
 
@@ -68,7 +68,7 @@ export const ListRoot = <T extends ListItemRecord>({
     }
 
     return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
+      canMonitor: ({ source }) => isItem?.(source.data) ?? false,
       onDrop: ({ location, source }) => {
         const target = location.current.dropTargets[0];
         if (!target) {
@@ -78,7 +78,7 @@ export const ListRoot = <T extends ListItemRecord>({
         const sourceData = source.data;
         const targetData = target.data;
 
-        if (!isItem(sourceData) || !isItem(targetData)) {
+        if (!isItem?.(sourceData) || !isItem?.(targetData)) {
           return;
         }
 

package/src/components/List/testing.ts

@@ -2,21 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { ObjectId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 
-export const TestItemSchema = S.Struct({
-  id: S.String,
-  name: S.String,
+export const TestItemSchema = Schema.Struct({
+  id: ObjectId,
+  name: Schema.String,
 });
 
-export type TestItemType = S.Schema.Type<typeof TestItemSchema>;
+export type TestItemType = Schema.Schema.Type<typeof TestItemSchema>;
 
-export const TestList = S.Struct({
-  items: S.mutable(S.Array(TestItemSchema)),
+export const TestList = Schema.Struct({
+  items: Schema.mutable(Schema.Array(TestItemSchema)),
 });
 
-export type TestList = S.Schema.Type<typeof TestList>;
+export type TestList = Schema.Schema.Type<typeof TestList>;
 
 export const createList = (n = 10): TestList => ({
   items: faker.helpers.multiple(

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

@@ -9,7 +9,7 @@ import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-a
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect } from 'react';
 
-import { create, type ReactiveObject } from '@dxos/live-object';
+import { live, type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -21,13 +21,13 @@ import { Path } from '../../util';
 
 faker.seed(1234);
 
-const tree = create<TestItem>(createTree());
-const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
+const tree = live<TestItem>(createTree());
+const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
 
-const meta: Meta<typeof Tree> = {
+const meta: Meta<typeof Tree<TestItem>> = {
   title: 'ui/react-ui-list/Tree',
   component: Tree,
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   render: (args) => {
     useEffect(() => {
       return monitorForElements({
@@ -57,7 +57,7 @@ const meta: Meta<typeof Tree> = {
   },
   args: {
     id: tree.id,
-    getItems: (testItem?: TestItem) => {
+    useItems: (testItem?: TestItem) => {
       return testItem?.items ?? tree.items;
     },
     getProps: (testItem: TestItem) => ({
@@ -70,7 +70,7 @@ const meta: Meta<typeof Tree> = {
     }),
     isOpen: (_path: string[]) => {
       const path = Path.create(..._path);
-      const object = state.get(path) ?? create({ open: false, current: false });
+      const object = state.get(path) ?? live({ open: false, current: false });
       if (!state.has(path)) {
         state.set(path, object);
       }
@@ -79,7 +79,7 @@ const meta: Meta<typeof Tree> = {
     },
     isCurrent: (_path: string[]) => {
       const path = Path.create(..._path);
-      const object = state.get(path) ?? create({ open: false, current: false });
+      const object = state.get(path) ?? live({ open: false, current: false });
       if (!state.has(path)) {
         state.set(path, object);
       }

package/src/components/Tree/Tree.tsx

@@ -4,20 +4,25 @@
 
 import React, { useMemo } from 'react';
 
+import { type HasId } from '@dxos/echo-schema';
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
 import { type TreeContextType, TreeProvider } from './TreeContext';
 import { TreeItem, type TreeItemProps } from './TreeItem';
 
-export type TreeProps<T = any> = { root?: T; path?: string[]; id: string } & TreeContextType &
+export type TreeProps<T extends HasId = any> = {
+  root?: T;
+  path?: string[];
+  id: string;
+} & TreeContextType<T> &
   Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
   Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
 
-export const Tree = <T = any,>({
+export const Tree = <T extends HasId = any>({
   root,
   path,
   id,
-  getItems,
+  useItems,
   getProps,
   isOpen,
   isCurrent,
@@ -32,14 +37,14 @@ export const Tree = <T = any,>({
 }: TreeProps<T>) => {
   const context = useMemo(
     () => ({
-      getItems,
+      useItems,
       getProps,
       isOpen,
       isCurrent,
     }),
-    [getItems, getProps, isOpen, isCurrent],
+    [useItems, getProps, isOpen, isCurrent],
   );
-  const items = getItems(root);
+  const items = useItems(root);
   const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);
 
   return (

package/src/components/Tree/TreeContext.tsx

@@ -19,7 +19,7 @@ export type PropsFromTreeItem = {
 };
 
 export type TreeContextType<T = any> = {
-  getItems: (parent?: T) => T[];
+  useItems: (parent?: T) => T[];
   getProps: (item: T, parent: string[]) => PropsFromTreeItem;
   isOpen: (path: string[], item: T) => boolean;
   isCurrent: (path: string[], item: T) => boolean;

package/src/components/Tree/TreeItem.tsx

@@ -10,9 +10,10 @@ import {
   type Instruction,
   type ItemMode,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { Schema } from 'effect';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC, type KeyboardEvent } from 'react';
 
-import { S } from '@dxos/echo-schema';
+import { type HasId } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
 import {
@@ -33,17 +34,17 @@ type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 const hoverableDescriptionIcons =
   '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';
 
-export const TreeDataSchema = S.Struct({
-  id: S.String,
-  path: S.Array(S.String),
-  item: S.Any,
+export const TreeDataSchema = Schema.Struct({
+  id: Schema.String,
+  path: Schema.Array(Schema.String),
+  item: Schema.Any,
 });
 
-export type TreeData = S.Schema.Type<typeof TreeDataSchema>;
+export type TreeData = Schema.Schema.Type<typeof TreeDataSchema>;
 
-export const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSchema)(data);
+export const isTreeData = (data: unknown): data is TreeData => Schema.is(TreeDataSchema)(data);
 
-export type TreeItemProps<T = any> = {
+export type TreeItemProps<T extends HasId = any> = {
   item: T;
   path: string[];
   levelOffset?: number;
@@ -61,7 +62,7 @@ export type TreeItemProps<T = any> = {
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
 };
 
-export const RawTreeItem = <T = any,>({
+const RawTreeItem = <T extends HasId = any>({
   item,
   path: _path,
   last,
@@ -72,17 +73,6 @@ export const RawTreeItem = <T = any,>({
   onSelect,
   levelOffset = 2,
 }: TreeItemProps<T>) => {
-  const { getItems, getProps, isOpen, isCurrent } = useTree();
-  const items = getItems(item);
-  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
-  const path = useMemo(() => [..._path, id], [_path, id]);
-  const open = isOpen(path, item);
-  const current = isCurrent(path, item);
-  const level = path.length - levelOffset;
-  const isBranch = !!parentOf;
-  const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
-  const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);
-
   const rowRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const openRef = useRef(false);
@@ -91,6 +81,16 @@ export const RawTreeItem = <T = any,>({
   const [instruction, setInstruction] = useState<Instruction | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
 
+  const { useItems, getProps, isOpen, isCurrent } = useTree();
+  const items = useItems(item);
+  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
+  const path = useMemo(() => [..._path, id], [_path, id]);
+  const open = isOpen(path, item);
+  const current = isCurrent(path, item);
+  const level = path.length - levelOffset;
+  const isBranch = !!parentOf;
+  const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
+
   const cancelExpand = useCallback(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
@@ -105,6 +105,8 @@ export const RawTreeItem = <T = any,>({
 
     invariant(buttonRef.current);
 
+    const data = { id, path, item } satisfies TreeData;
+
     // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
     return combine(
       draggable({
@@ -222,7 +224,7 @@ export const RawTreeItem = <T = any,>({
         aria-labelledby={`${id}__label`}
         parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
         classNames={mx(
-          'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface',
+          'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface',
           hoverableControls,
           hoverableFocusedKeyboardControls,
           hoverableFocusedWithinControls,

package/src/components/Tree/TreeItemToggle.tsx

@@ -26,11 +26,7 @@ export const TreeItemToggle = memo(
         classNames={mx('is-6 pli-0 dx-focus-ring-inset', hidden ? 'hidden' : !isBranch && 'invisible')}
         onClick={onToggle}
       >
-        <Icon
-          icon='ph--caret-right--regular'
-          size={3}
-          classNames={mx('transition duration-200', open && 'rotate-90')}
-        />
+        <Icon icon='ph--caret-right--bold' size={3} classNames={mx('transition duration-200', open && 'rotate-90')} />
       </Button>
     );
   }),

package/src/components/Tree/testing.ts

@@ -3,25 +3,25 @@
 //
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { Schema } from 'effect';
 
-import { S } from '@dxos/echo-schema';
+import { type HasId, ObjectId } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 
 import { type TreeData } from './TreeItem';
 
-export type TestItem = {
-  id: string;
+export type TestItem = HasId & {
   name: string;
   icon?: string;
   items: TestItem[];
 };
 
-export const TestItemSchema = S.Struct({
-  id: S.String,
-  name: S.String,
-  icon: S.optional(S.String),
-  items: S.mutable(S.Array(S.suspend((): S.Schema<TestItem> => TestItemSchema))),
+export const TestItemSchema = Schema.Struct({
+  id: ObjectId,
+  name: Schema.String,
+  icon: Schema.optional(Schema.String),
+  items: Schema.mutable(Schema.Array(Schema.suspend((): Schema.Schema<TestItem> => TestItemSchema))),
 });
 
 export const createTree = (n = 4, d = 4): TestItem => ({

package/src/util/path.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-const SEPARATOR = '~';
+const SEPARATOR = '+';
 
 export const Path = {
   create: (...args: string[]) => args.join(SEPARATOR),