@dxos/react-ui-list 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/dist/lib/browser/index.mjs

@@ -1,85 +1,63 @@
 // src/components/Accordion/AccordionItem.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 
 // src/components/Accordion/AccordionRoot.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { createContext } from "@radix-ui/react-context";
 import React from "react";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 var ACCORDION_NAME = "Accordion";
 var [AccordionProvider, useAccordionContext] = createContext(ACCORDION_NAME);
 var defaultGetId = (item) => item?.id;
 var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value, defaultValue, onValueChange }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(AccordionProvider, {
-      getId
-    }, /* @__PURE__ */ React.createElement(AccordionPrimitive.Root, {
-      type: "multiple",
-      value,
-      defaultValue,
-      onValueChange,
-      className: mx(classNames)
-    }, children?.({
-      items: items ?? []
-    })));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement(AccordionProvider, {
+    getId
+  }, /* @__PURE__ */ React.createElement(AccordionPrimitive.Root, {
+    type: "multiple",
+    value,
+    defaultValue,
+    onValueChange,
+    className: mx(classNames)
+  }, children?.({
+    items: items ?? []
+  })));
 };
 
 // src/components/Accordion/AccordionItem.tsx
 var ACCORDION_ITEM_NAME = "AccordionItem";
-var [AccordionItemProvider, useAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
+var [AccordionItemProvider, useDxAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
 var AccordionItem = ({ children, classNames, item }) => {
-  var _effect = _useSignals2();
-  try {
-    const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
-    return /* @__PURE__ */ React2.createElement(AccordionItemProvider, {
-      item
-    }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Item, {
-      value: getId(item),
-      className: mx2("overflow-hidden", classNames)
-    }, children));
-  } finally {
-    _effect.f();
-  }
+  const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
+  return /* @__PURE__ */ React2.createElement(AccordionItemProvider, {
+    item
+  }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Item, {
+    value: getId(item),
+    className: mx2("overflow-hidden", classNames)
+  }, children));
 };
 var AccordionItemHeader = ({ classNames, children, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Header, {
-      ...props,
-      className: mx2(classNames)
-    }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Trigger, {
-      className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
-    }, children, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--caret-right--regular",
-      size: 4,
-      classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
-    })));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Header, {
+    ...props,
+    className: mx2(classNames)
+  }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Trigger, {
+    className: "group flex items-center p-2 dx-focus-ring-inset w-full text-start"
+  }, children, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--caret-right--regular",
+    size: 4,
+    classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
+  })));
 };
 var AccordionItemBody = ({ children, classNames }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Content, {
-      className: "overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown"
-    }, /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: mx2("p-2", classNames)
-    }, children));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Content, {
+    className: "overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2("p-2", classNames)
+  }, children));
 };
 
 // src/components/Accordion/Accordion.tsx
@@ -91,91 +69,85 @@ var Accordion = {
 };
 
 // src/components/List/ListItem.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { createContext as createContext4 } from "@radix-ui/react-context";
-import React4, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
-import { Icon as Icon2, ListItem as NaturalListItem } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { IconButton, ListItem as NaturalListItem, useTranslation } from "@dxos/react-ui";
+import { mx as mx3, osTranslations } from "@dxos/ui-theme";
 
 // src/components/List/ListRoot.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import React3, { useCallback, useEffect, useState } from "react";
 var LIST_NAME = "List";
 var [ListProvider, useListContext] = createContext3(LIST_NAME);
 var defaultGetId2 = (item) => item?.id;
 var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    const isEqual = useCallback((a, b) => {
-      const idA = getId?.(a);
-      const idB = getId?.(b);
-      if (idA !== void 0 && idB !== void 0) {
-        return idA === idB;
-      } else {
-        return a === b;
-      }
-    }, [
-      getId
-    ]);
-    const [state, setState] = useState(idle);
-    useEffect(() => {
-      if (!items) {
-        return;
-      }
-      return monitorForElements({
-        canMonitor: ({ source }) => isItem?.(source.data) ?? false,
-        onDrop: ({ location, source }) => {
-          const target = location.current.dropTargets[0];
-          if (!target) {
-            return;
-          }
-          const sourceData = source.data;
-          const targetData = target.data;
-          if (!isItem?.(sourceData) || !isItem?.(targetData)) {
-            return;
-          }
-          const sourceIdx = items.findIndex((item) => isEqual(item, sourceData));
-          const targetIdx = items.findIndex((item) => isEqual(item, targetData));
-          if (targetIdx < 0 || sourceIdx < 0) {
-            return;
-          }
-          const closestEdgeOfTarget = extractClosestEdge(targetData);
-          const destinationIndex = getReorderDestinationIndex({
-            closestEdgeOfTarget,
-            startIndex: sourceIdx,
-            indexOfTarget: targetIdx,
-            axis: "vertical"
-          });
-          onMove?.(sourceIdx, destinationIndex);
+  const isEqual = useCallback((a, b) => {
+    const idA = getId?.(a);
+    const idB = getId?.(b);
+    if (idA !== void 0 && idB !== void 0) {
+      return idA === idB;
+    } else {
+      return a === b;
+    }
+  }, [
+    getId
+  ]);
+  const [state, setState] = useState(idle);
+  useEffect(() => {
+    if (!items) {
+      return;
+    }
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem?.(source.data) ?? false,
+      onDrop: ({ location, source }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
         }
-      });
-    }, [
-      items,
-      isEqual,
-      onMove
-    ]);
-    return /* @__PURE__ */ React3.createElement(ListProvider, {
-      state,
-      setState,
-      isItem,
-      ...props
-    }, children?.({
-      state,
-      items: items ?? []
-    }));
-  } finally {
-    _effect.f();
-  }
+        const sourceData = source.data;
+        const targetData = target.data;
+        if (!isItem?.(sourceData) || !isItem?.(targetData)) {
+          return;
+        }
+        const sourceIdx = items.findIndex((item) => isEqual(item, sourceData));
+        const targetIdx = items.findIndex((item) => isEqual(item, targetData));
+        if (targetIdx < 0 || sourceIdx < 0) {
+          return;
+        }
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+        const destinationIndex = getReorderDestinationIndex({
+          closestEdgeOfTarget,
+          startIndex: sourceIdx,
+          indexOfTarget: targetIdx,
+          axis: "vertical"
+        });
+        onMove?.(sourceIdx, destinationIndex);
+      }
+    });
+  }, [
+    items,
+    isEqual,
+    onMove
+  ]);
+  return /* @__PURE__ */ React3.createElement(ListProvider, {
+    state,
+    setState,
+    isItem,
+    ...props
+  }, children?.({
+    state,
+    items: items ?? []
+  }));
 };
 
 // src/components/List/ListItem.tsx
@@ -189,204 +161,169 @@ var stateStyles = {
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = createContext4(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item, ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-    const ref = useRef(null);
-    const dragHandleRef = useRef(null);
-    const [state, setState] = useState2(idle);
-    useEffect2(() => {
-      const element = ref.current;
-      invariant(element, void 0, {
-        F: __dxlog_file,
-        L: 93,
-        S: void 0,
-        A: [
-          "element",
-          ""
-        ]
-      });
-      return combine(
-        //
-        // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
-        //
-        draggable({
-          element,
-          dragHandle: dragHandleRef.current,
-          canDrag: () => !readonly,
-          getInitialData: () => item,
-          onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
-            const rect = source.element.getBoundingClientRect();
-            setCustomNativeDragPreview({
-              nativeSetDragImage,
-              getOffset: ({ container }) => {
-                const { height } = container.getBoundingClientRect();
-                return {
-                  x: 20,
-                  y: height / 2
-                };
-              },
-              render: ({ container }) => {
-                container.style.width = rect.width + "px";
-                setState({
-                  type: "preview",
-                  container
-                });
-                setRootState({
-                  type: "preview",
-                  container,
-                  item
-                });
-                return () => {
-                };
-              }
-            });
-          } : void 0,
-          onDragStart: () => {
-            setState({
-              type: "is-dragging"
-            });
-            setRootState({
-              type: "is-dragging",
-              item
-            });
-          },
-          onDrop: () => {
-            setState(idle);
-            setRootState(idle);
-          }
-        }),
-        //
-        // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
-        //
-        dropTargetForElements({
-          element,
-          canDrop: ({ source }) => {
-            return (source.element !== element && isItem?.(source.data)) ?? false;
-          },
-          getData: ({ input }) => {
-            return attachClosestEdge(item, {
-              element,
-              input,
-              allowedEdges: [
-                "top",
-                "bottom"
-              ]
-            });
-          },
-          getIsSticky: () => true,
-          onDragEnter: ({ self }) => {
-            const closestEdge = extractClosestEdge2(self.data);
-            setState({
-              type: "is-dragging-over",
-              closestEdge
-            });
-          },
-          onDragLeave: () => {
-            setState(idle);
-          },
-          onDrag: ({ self }) => {
-            const closestEdge = extractClosestEdge2(self.data);
-            setState((current) => {
-              if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-                return current;
-              }
+var ListItem = ({ children, classNames, item, asChild, selected, ...props }) => {
+  const Comp = asChild ? Slot : "div";
+  const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+  const rootRef = useRef(null);
+  const dragHandleRef = useRef(null);
+  const [state, setState] = useState2(idle);
+  useEffect2(() => {
+    const element = rootRef.current;
+    invariant(element, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 37, S: void 0, A: ["element", ""] });
+    return combine(
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
+      //
+      draggable({
+        element,
+        dragHandle: dragHandleRef.current,
+        canDrag: () => !readonly,
+        getInitialData: () => item,
+        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
+          const rect = source.element.getBoundingClientRect();
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: ({ container }) => {
+              const { height } = container.getBoundingClientRect();
               return {
-                type: "is-dragging-over",
-                closestEdge
+                x: 20,
+                y: height / 2
               };
-            });
-          },
-          onDrop: () => {
-            setState(idle);
-          }
-        })
-      );
-    }, [
-      item
-    ]);
-    return /* @__PURE__ */ React4.createElement(ListItemProvider, {
-      item,
-      dragHandleRef
-    }, /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "relative"
-    }, /* @__PURE__ */ React4.createElement("div", {
-      ref,
-      role: "listitem",
-      className: mx3("flex overflow-hidden", classNames, stateStyles[state.type]),
-      ...props
-    }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
-      edge: state.closestEdge
-    })));
-  } finally {
-    _effect.f();
-  }
+            },
+            render: ({ container }) => {
+              container.style.width = rect.width + "px";
+              setState({
+                type: "preview",
+                container
+              });
+              setRootState({
+                type: "preview",
+                container,
+                item
+              });
+              return () => {
+              };
+            }
+          });
+        } : void 0,
+        onDragStart: () => {
+          setState({
+            type: "is-dragging"
+          });
+          setRootState({
+            type: "is-dragging",
+            item
+          });
+        },
+        onDrop: () => {
+          setState(idle);
+          setRootState(idle);
+        }
+      }),
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
+      //
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => {
+          return (source.element !== element && isItem?.(source.data)) ?? false;
+        },
+        getData: ({ input }) => {
+          return attachClosestEdge(item, {
+            element,
+            input,
+            allowedEdges: [
+              "top",
+              "bottom"
+            ]
+          });
+        },
+        getIsSticky: () => true,
+        onDragEnter: ({ self }) => {
+          const closestEdge = extractClosestEdge2(self.data);
+          setState({
+            type: "is-dragging-over",
+            closestEdge
+          });
+        },
+        onDragLeave: () => {
+          setState(idle);
+        },
+        onDrag: ({ self }) => {
+          const closestEdge = extractClosestEdge2(self.data);
+          setState((current) => {
+            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
+              return current;
+            }
+            return {
+              type: "is-dragging-over",
+              closestEdge
+            };
+          });
+        },
+        onDrop: () => {
+          setState(idle);
+        }
+      })
+    );
+  }, [
+    item
+  ]);
+  return /* @__PURE__ */ React4.createElement(ListItemProvider, {
+    item,
+    dragHandleRef
+  }, /* @__PURE__ */ React4.createElement(Comp, {
+    ...props,
+    role: "listitem",
+    "aria-selected": selected,
+    className: mx3("relative p-1 dx-selected dx-hover", classNames, stateStyles[state.type]),
+    ref: rootRef
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+    edge: state.closestEdge
+  }));
 };
-var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("button", {
-      ref: forwardedRef,
-      className: mx3("flex items-center justify-center", classNames),
-      ...props
-    }, /* @__PURE__ */ React4.createElement(Icon2, {
-      icon,
-      classNames: "cursor-pointer",
-      size: 4
-    }));
-  } finally {
-    _effect.f();
-  }
-});
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    const { state } = useListContext("DELETE_BUTTON");
-    const isDisabled = state.type !== "idle" || disabled;
-    return /* @__PURE__ */ React4.createElement(IconButton, {
-      icon,
-      disabled: isDisabled,
-      classNames: [
-        classNames,
-        autoHide && disabled && "hidden"
-      ],
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
+var ListItemIconButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
+  const { state } = useListContext("ITEM_BUTTON");
+  const isDisabled = state.type !== "idle" || disabled;
+  return /* @__PURE__ */ React4.createElement(IconButton, {
+    ...props,
+    disabled: isDisabled,
+    iconOnly,
+    variant,
+    classNames: [
+      classNames,
+      autoHide && disabled && "hidden"
+    ]
+  });
 };
-var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    const { state } = useListContext("ITEM_BUTTON");
-    const isDisabled = state.type !== "idle" || disabled;
-    return /* @__PURE__ */ React4.createElement(IconButton, {
-      disabled: isDisabled,
-      classNames: [
-        classNames,
-        autoHide && disabled && "hidden"
-      ],
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
+var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
+  const { state } = useListContext("DELETE_BUTTON");
+  const isDisabled = state.type !== "idle" || disabled;
+  const { t } = useTranslation(osTranslations);
+  return /* @__PURE__ */ React4.createElement(IconButton, {
+    ...props,
+    variant: "ghost",
+    disabled: isDisabled,
+    icon,
+    iconOnly: true,
+    label: label ?? t("delete.label"),
+    classNames: [
+      classNames,
+      autoHide && disabled && "hidden"
+    ]
+  });
 };
 var ListItemDragHandle = ({ disabled }) => {
-  var _effect = _useSignals4();
-  try {
-    const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-    return /* @__PURE__ */ React4.createElement(IconButton, {
-      ref: dragHandleRef,
-      icon: "ph--dots-six-vertical--regular",
-      disabled
-    });
-  } finally {
-    _effect.f();
-  }
+  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+  const { t } = useTranslation(osTranslations);
+  return /* @__PURE__ */ React4.createElement(IconButton, {
+    variant: "ghost",
+    disabled,
+    icon: "ph--dots-six-vertical--regular",
+    iconOnly: true,
+    label: t("drag-handle.label"),
+    ref: dragHandleRef
+  });
 };
 var ListItemDragPreview = ({ children }) => {
   const { state } = useListContext("DRAG_PREVIEW");
@@ -394,27 +331,15 @@ var ListItemDragPreview = ({ children }) => {
     item: state.item
   }), state.container) : null;
 };
-var ListItemWrapper = ({ classNames, children }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("div", {
-      className: mx3("flex is-full gap-2", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var ListItemTitle = ({ classNames, children, ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("div", {
-      className: mx3("flex grow items-center truncate", classNames),
-      ...props
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
+var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React4.createElement("div", {
+  role: "none",
+  className: mx3("flex w-full gap-2", classNames)
+}, children);
+var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React4.createElement("div", {
+  role: "none",
+  className: mx3("flex grow items-center truncate", classNames),
+  ...props
+}, children);
 
 // src/components/List/List.tsx
 var List = {
@@ -423,14 +348,13 @@ var List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
-  ItemTitle: ListItemTitle,
-  IconButton
+  ItemTitle: ListItemTitle
 };
 
 // src/components/Tree/Tree.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
 import React8, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
@@ -442,103 +366,104 @@ var TreeProvider = TreeContext.Provider;
 var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
 
 // src/components/Tree/TreeItem.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
-import { Schema } from "effect";
+import { useAtomValue } from "@effect-atom/atom-react";
+import * as Schema from "effect/Schema";
 import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { Treegrid, TreeItem as NaturalTreeItem } from "@dxos/react-ui";
-import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/react-ui-theme";
+import { TreeItem as NaturalTreeItem, Treegrid, TREEGRID_PARENT_OF_SEPARATOR } from "@dxos/react-ui";
+import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/ui-theme";
+
+// src/components/Tree/helpers.ts
+var DEFAULT_INDENTATION = 8;
+var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
+  paddingInlineStart: `${(level - 1) * indentation}px`
+});
 
 // src/components/Tree/TreeItemHeading.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
-import { Button, Icon as Icon3, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import React5, { forwardRef, memo, useCallback as useCallback2 } from "react";
+import { Button, Icon as Icon2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
-  var _effect = _useSignals5();
-  try {
-    const { t } = useTranslation();
-    const handleSelect = useCallback2((event) => {
+import { getStyles } from "@dxos/ui-theme";
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
+  const { t } = useTranslation2();
+  const styles = iconHue ? getStyles(iconHue) : void 0;
+  const handleSelect = useCallback2((event) => {
+    onSelect?.(event.altKey);
+  }, [
+    onSelect
+  ]);
+  const handleButtonKeydown = useCallback2((event) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
       onSelect?.(event.altKey);
-    }, [
-      onSelect
-    ]);
-    const handleButtonKeydown = useCallback2((event) => {
-      if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        event.stopPropagation();
-        onSelect?.(event.altKey);
-      }
-    }, [
-      onSelect
-    ]);
-    return /* @__PURE__ */ React5.createElement(TextTooltip, {
-      text: toLocalizedString(label, t),
-      side: "bottom",
-      truncateQuery: "span[data-tooltip]",
-      onlyWhenTruncating: true,
-      asChild: true,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React5.createElement(Button, {
-      "data-testid": "treeItem.heading",
-      variant: "ghost",
-      density: "fine",
-      classNames: mx4("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
-      disabled,
-      onClick: handleSelect,
-      onKeyDown: handleButtonKeydown,
-      ...current && {
-        "aria-current": "location"
-      }
-    }, icon && /* @__PURE__ */ React5.createElement(Icon3, {
-      icon: icon ?? "ph--placeholder--regular",
-      size: 5,
-      classNames: "mlb-1"
-    }), /* @__PURE__ */ React5.createElement("span", {
-      className: "flex-1 is-0 truncate text-start text-sm font-normal",
-      "data-tooltip": true
-    }, toLocalizedString(label, t))));
-  } finally {
-    _effect.f();
-  }
+    }
+  }, [
+    onSelect
+  ]);
+  return /* @__PURE__ */ React5.createElement(TextTooltip, {
+    text: toLocalizedString(label, t),
+    side: "bottom",
+    truncateQuery: "span[data-tooltip]",
+    onlyWhenTruncating: true,
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement(Button, {
+    "data-testid": "treeItem.heading",
+    variant: "ghost",
+    classNames: [
+      "grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent",
+      "disabled:cursor-default disabled:opacity-100",
+      className
+    ],
+    disabled,
+    onClick: handleSelect,
+    onKeyDown: handleButtonKeydown,
+    ...current && {
+      "aria-current": "location"
+    }
+  }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: icon ?? "ph--placeholder--regular",
+    classNames: [
+      "my-1",
+      styles?.surfaceText
+    ]
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "flex-1 w-0 truncate text-start font-normal",
+    "data-tooltip": true
+  }, toLocalizedString(label, t))));
 }));
 
 // src/components/Tree/TreeItemToggle.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { forwardRef as forwardRef3, memo as memo2 } from "react";
-import { Button as Button2, Icon as Icon4 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
-  var _effect = _useSignals6();
-  try {
-    return /* @__PURE__ */ React6.createElement(Button2, {
-      ref: forwardedRef,
-      "data-testid": "treeItem.toggle",
-      "aria-expanded": open,
-      variant: "ghost",
-      density: "fine",
-      classNames: mx5("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
-      onClick: onToggle
-    }, /* @__PURE__ */ React6.createElement(Icon4, {
-      icon: "ph--caret-right--bold",
-      size: 3,
-      classNames: mx5("transition duration-200", open && "rotate-90")
-    }));
-  } finally {
-    _effect.f();
-  }
+import React6, { forwardRef as forwardRef2, memo as memo2 } from "react";
+import { IconButton as IconButton2 } from "@dxos/react-ui";
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React6.createElement(IconButton2, {
+    ref: forwardedRef,
+    "data-testid": "treeItem.toggle",
+    "aria-expanded": open,
+    variant: "ghost",
+    density: "fine",
+    classNames: [
+      "h-full w-6 px-0",
+      "[&_svg]:transition-transform [&_svg]:duration-200",
+      open ? "[&_svg]:rotate-90" : "[&_svg]:rotate-0",
+      hidden ? "hidden" : !isBranch && "invisible",
+      classNames
+    ],
+    size: 3,
+    icon: "ph--caret-right--bold",
+    iconOnly: true,
+    noTooltip: true,
+    label: open ? "Click to close" : "Click to open",
+    tabIndex: -1,
+    ...props
+  });
 }));
 
-// src/components/Tree/helpers.ts
-var DEFAULT_INDENTATION = 8;
-var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
-  paddingInlineStart: `${(level - 1) * indentation}px`
-});
-
 // src/components/Tree/TreeItem.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
 var hoverableDescriptionIcons = "[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]";
@@ -548,304 +473,343 @@ var TreeDataSchema = Schema.Struct({
   item: Schema.Any
 });
 var isTreeData = (data) => Schema.is(TreeDataSchema)(data);
-var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset = 2 }) => {
-  var _effect = _useSignals7();
-  try {
-    const rowRef = useRef2(null);
-    const buttonRef = useRef2(null);
-    const openRef = useRef2(false);
-    const cancelExpandRef = useRef2(null);
-    const [_state, setState] = useState3("idle");
-    const [instruction, setInstruction] = useState3(null);
-    const [menuOpen, setMenuOpen] = useState3(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 = last ? "last-in-group" : open ? "expanded" : "standard";
-    const cancelExpand = useCallback3(() => {
-      if (cancelExpandRef.current) {
-        clearTimeout(cancelExpandRef.current);
-        cancelExpandRef.current = null;
-      }
-    }, []);
-    useEffect3(() => {
-      if (!_draggable) {
-        return;
+var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: draggableProp, renderColumns: Columns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
+  const rowRef = useRef2(null);
+  const buttonRef = useRef2(null);
+  const openRef = useRef2(false);
+  const cancelExpandRef = useRef2(null);
+  const [_state, setState] = useState3("idle");
+  const [instruction, setInstruction] = useState3(null);
+  const [menuOpen, setMenuOpen] = useState3(false);
+  const { itemProps: itemPropsAtom, childIds: childIdsAtom, itemOpen: itemOpenAtom, itemCurrent: itemCurrentAtom } = useTree();
+  const path = useMemo(() => [
+    ...pathProp,
+    item.id
+  ], [
+    pathProp,
+    item.id
+  ]);
+  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(itemPropsAtom(path));
+  const childIds = useAtomValue(childIdsAtom(item.id));
+  const open = useAtomValue(itemOpenAtom(path));
+  const current = useAtomValue(itemCurrentAtom(path));
+  const level = path.length - levelOffset;
+  const isBranch = !!parentOf;
+  const mode = last ? "last-in-group" : open ? "expanded" : "standard";
+  const canSelectItem = canSelect?.({
+    item,
+    path
+  }) ?? true;
+  const data = {
+    id,
+    path,
+    item
+  };
+  const shouldSeedNativeDragData = typeof document !== "undefined" && document.body.hasAttribute("data-platform");
+  const cancelExpand = useCallback3(() => {
+    if (cancelExpandRef.current) {
+      clearTimeout(cancelExpandRef.current);
+      cancelExpandRef.current = null;
+    }
+  }, []);
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
+  const nativeDragText = id;
+  useEffect3(() => {
+    if (!draggableProp) {
+      return;
+    }
+    invariant2(buttonRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 70, S: void 0, A: ["buttonRef.current", ""] });
+    const makeDraggable = () => draggable2({
+      element: buttonRef.current,
+      getInitialData: () => data,
+      getInitialDataForExternal: () => {
+        if (!shouldSeedNativeDragData) {
+          return {};
+        }
+        return {
+          "text/plain": nativeDragText
+        };
+      },
+      onDragStart: () => {
+        setState("dragging");
+        if (open) {
+          openRef.current = true;
+          onOpenChange?.({
+            item,
+            path,
+            open: false
+          });
+        }
+      },
+      onDrop: () => {
+        setState("idle");
+        if (openRef.current) {
+          onOpenChange?.({
+            item,
+            path,
+            open: true
+          });
+        }
       }
-      invariant2(buttonRef.current, void 0, {
-        F: __dxlog_file2,
-        L: 106,
-        S: void 0,
-        A: [
-          "buttonRef.current",
-          ""
-        ]
-      });
-      const data = {
-        id,
-        path,
-        item
-      };
-      return combine2(
-        draggable2({
-          element: buttonRef.current,
-          getInitialData: () => data,
-          onDragStart: () => {
-            setState("dragging");
-            if (open) {
-              openRef.current = true;
-              onOpenChange?.({
-                item,
-                path,
-                open: false
-              });
-            }
-          },
-          onDrop: () => {
-            setState("idle");
-            if (openRef.current) {
+    });
+    if (!isItemDroppable) {
+      return isItemDraggable ? makeDraggable() : void 0;
+    }
+    const dropTarget = dropTargetForElements2({
+      element: buttonRef.current,
+      getData: ({ input, element }) => {
+        return attachInstruction(data, {
+          input,
+          element,
+          indentPerLevel: DEFAULT_INDENTATION,
+          currentLevel: level,
+          mode,
+          block: isBranch ? [] : [
+            "make-child"
+          ]
+        });
+      },
+      canDrop: ({ source }) => {
+        const _canDrop = canDrop ?? (() => true);
+        return source.element !== buttonRef.current && _canDrop({
+          source: source.data,
+          target: data
+        });
+      },
+      getIsSticky: () => true,
+      onDrag: ({ self, source }) => {
+        const desired = extractInstruction(self.data);
+        const block = desired && blockInstruction?.({
+          instruction: desired,
+          source: source.data,
+          target: data
+        });
+        const instruction2 = block && desired.type !== "instruction-blocked" ? {
+          type: "instruction-blocked",
+          desired
+        } : desired;
+        if (source.data.id !== id) {
+          if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
+            cancelExpandRef.current = setTimeout(() => {
               onOpenChange?.({
                 item,
                 path,
                 open: true
               });
-            }
+            }, 500);
           }
-        }),
-        // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-        dropTargetForElements2({
-          element: buttonRef.current,
-          getData: ({ input, element }) => {
-            return attachInstruction(data, {
-              input,
-              element,
-              indentPerLevel: DEFAULT_INDENTATION,
-              currentLevel: level,
-              mode,
-              block: isBranch ? [] : [
-                "make-child"
-              ]
-            });
-          },
-          canDrop: ({ source }) => {
-            const _canDrop = canDrop ?? (() => true);
-            return source.element !== buttonRef.current && _canDrop({
-              source: source.data,
-              target: data
-            });
-          },
-          getIsSticky: () => true,
-          onDrag: ({ self, source }) => {
-            const instruction2 = extractInstruction(self.data);
-            if (source.data.id !== id) {
-              if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
-                cancelExpandRef.current = setTimeout(() => {
-                  onOpenChange?.({
-                    item,
-                    path,
-                    open: true
-                  });
-                }, 500);
-              }
-              if (instruction2?.type !== "make-child") {
-                cancelExpand();
-              }
-              setInstruction(instruction2);
-            } else if (instruction2?.type === "reparent") {
-              setInstruction(instruction2);
-            } else {
-              setInstruction(null);
-            }
-          },
-          onDragLeave: () => {
-            cancelExpand();
-            setInstruction(null);
-          },
-          onDrop: () => {
+          if (instruction2?.type !== "make-child") {
             cancelExpand();
-            setInstruction(null);
           }
-        })
-      );
-    }, [
-      _draggable,
-      item,
-      id,
-      mode,
-      path,
-      open,
-      canDrop
-    ]);
-    useEffect3(() => () => cancelExpand(), [
-      cancelExpand
-    ]);
-    const handleOpenChange = useCallback3(() => onOpenChange?.({
-      item,
-      path,
-      open: !open
-    }), [
-      onOpenChange,
-      item,
-      path,
-      open
-    ]);
-    const handleSelect = useCallback3((option = false) => {
-      if (isBranch) {
-        handleOpenChange();
-      } else {
-        rowRef.current?.focus();
-        onSelect?.({
-          item,
-          path,
-          current: !current,
-          option
-        });
-      }
-    }, [
-      item,
-      path,
-      current,
-      isBranch,
-      handleOpenChange,
-      onSelect
-    ]);
-    const handleKeyDown = useCallback3((event) => {
-      switch (event.key) {
-        case "ArrowRight":
-          isBranch && !open && handleOpenChange();
-          break;
-        case "ArrowLeft":
-          isBranch && open && handleOpenChange();
-          break;
-        case " ":
-          handleSelect(event.altKey);
-          break;
-      }
-    }, [
-      isBranch,
-      open,
-      handleOpenChange,
-      handleSelect
-    ]);
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Treegrid.Row, {
-      ref: rowRef,
-      key: id,
-      id,
-      "aria-labelledby": `${id}__label`,
-      parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
-      classNames: mx6("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, className),
-      "data-itemid": id,
-      "data-testid": testId,
-      // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
-      //   without alerting the user (except for in the correct link element). See also:
-      //   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description
-      "aria-current": current ? "" : void 0,
-      onKeyDown: handleKeyDown,
-      onContextMenu: (event) => {
-        event.preventDefault();
-        setMenuOpen(true);
+          setInstruction(instruction2);
+        } else if (instruction2?.type === "reparent") {
+          setInstruction(instruction2);
+        } else {
+          setInstruction(null);
+        }
+      },
+      onDragLeave: () => {
+        cancelExpand();
+        setInstruction(null);
+      },
+      onDrop: () => {
+        cancelExpand();
+        setInstruction(null);
       }
-    }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
-      indent: true,
-      classNames: "relative grid grid-cols-subgrid col-[tree-row]",
-      style: paddingIndentation(level)
-    }, /* @__PURE__ */ React7.createElement("div", {
-      role: "none",
-      className: "flex items-center"
-    }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
-      isBranch,
-      open,
-      onToggle: handleOpenChange
-    }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
-      ref: buttonRef,
-      label,
-      icon,
-      className: headingClassName,
-      disabled,
-      current,
-      onSelect: handleSelect
-    })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
-      item,
-      path,
-      open,
-      menuOpen,
-      setMenuOpen
-    }), instruction && /* @__PURE__ */ React7.createElement(NaturalTreeItem.DropIndicator, {
-      instruction,
-      gap: 2
-    }))), open && items.map((item2, index) => /* @__PURE__ */ React7.createElement(TreeItem, {
-      key: item2.id,
-      item: item2,
-      path,
-      last: index === items.length - 1,
-      draggable: _draggable,
-      renderColumns: Columns,
-      canDrop,
-      onOpenChange,
-      onSelect
-    })));
-  } finally {
-    _effect.f();
-  }
+    });
+    if (!isItemDraggable) {
+      return dropTarget;
+    }
+    return combine2(makeDraggable(), dropTarget);
+  }, [
+    draggableProp,
+    isItemDraggable,
+    isItemDroppable,
+    item,
+    id,
+    mode,
+    path,
+    open,
+    blockInstruction,
+    canDrop
+  ]);
+  useEffect3(() => () => cancelExpand(), [
+    cancelExpand
+  ]);
+  const handleOpenToggle = useCallback3(() => onOpenChange?.({
+    item,
+    path,
+    open: !open
+  }), [
+    onOpenChange,
+    item,
+    path,
+    open
+  ]);
+  const handleSelect = useCallback3((option = false) => {
+    if (isBranch && (option || current)) {
+      handleOpenToggle();
+    } else if (canSelectItem) {
+      canSelect?.({
+        item,
+        path
+      });
+      rowRef.current?.focus();
+      onSelect?.({
+        item,
+        path,
+        current: !current,
+        option
+      });
+    }
+  }, [
+    item,
+    path,
+    current,
+    isBranch,
+    canSelectItem,
+    handleOpenToggle,
+    onSelect
+  ]);
+  const handleKeyDown = useCallback3((event) => {
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowLeft":
+        isBranch && handleOpenToggle();
+        break;
+    }
+  }, [
+    isBranch,
+    open,
+    handleOpenToggle,
+    handleSelect
+  ]);
+  const handleItemHover = useCallback3(() => {
+    onItemHover?.({
+      item
+    });
+  }, [
+    onItemHover,
+    item
+  ]);
+  const handleContextMenu = useCallback3((event) => {
+    event.preventDefault();
+    setMenuOpen(true);
+  }, [
+    setMenuOpen
+  ]);
+  const childProps = {
+    draggable: draggableProp,
+    renderColumns: Columns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onItemHover,
+    onOpenChange,
+    onSelect
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Treegrid.Row, {
+    ref: rowRef,
+    key: id,
+    id,
+    "aria-labelledby": `${id}__label`,
+    parentOf: parentOf?.join(TREEGRID_PARENT_OF_SEPARATOR),
+    "data-object-id": id,
+    "data-testid": testId,
+    // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
+    //   without alerting the user (except for in the correct link element). See also:
+    //   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description
+    "aria-current": current ? "" : void 0,
+    classNames: mx4("grid grid-cols-subgrid col-[tree-row] mt-0.5 is-current:bg-active-surface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostFocusWithin, ghostHover, className),
+    onKeyDown: handleKeyDown,
+    onMouseEnter: handleItemHover,
+    onContextMenu: handleContextMenu
+  }, /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "indent relative grid grid-cols-subgrid col-[tree-row]",
+    style: paddingIndentation(level)
+  }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
+    classNames: "flex items-center"
+  }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
+    isBranch,
+    open,
+    onClick: handleOpenToggle
+  }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
+    disabled,
+    current,
+    label,
+    className: headingClassName,
+    icon,
+    iconHue,
+    onSelect: handleSelect,
+    ref: buttonRef
+  })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
+    item,
+    path,
+    open,
+    menuOpen,
+    setMenuOpen
+  }), instruction && /* @__PURE__ */ React7.createElement(NaturalTreeItem.DropIndicator, {
+    instruction,
+    gap: 2
+  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React7.createElement(TreeItemById, {
+    key: childId,
+    id: childId,
+    path,
+    last: index === childIds.length - 1,
+    ...childProps
+  })));
 };
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
+var RawTreeItemById = ({ id, ...props }) => {
+  const { item: itemAtom } = useTree();
+  const item = useAtomValue(itemAtom(id));
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(TreeItem, {
+    item,
+    ...props
+  });
+};
+var TreeItemById = /* @__PURE__ */ memo3(RawTreeItemById);
 
 // src/components/Tree/Tree.tsx
-var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, canDrop, onOpenChange, onSelect }) => {
-  var _effect = _useSignals8();
-  try {
-    const context = useMemo2(() => ({
-      useItems,
-      getProps,
-      isOpen,
-      isCurrent
-    }), [
-      useItems,
-      getProps,
-      isOpen,
-      isCurrent
-    ]);
-    const items = useItems(root);
-    const treePath = useMemo2(() => path ? [
-      ...path,
-      id
-    ] : [
-      id
-    ], [
-      id,
-      path
-    ]);
-    return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
-      gridTemplateColumns,
-      classNames
-    }, /* @__PURE__ */ React8.createElement(TreeProvider, {
-      value: context
-    }, items.map((item, index) => /* @__PURE__ */ React8.createElement(TreeItem, {
-      key: item.id,
-      item,
-      last: index === items.length - 1,
-      path: treePath,
-      levelOffset,
-      draggable: draggable3,
-      renderColumns,
-      canDrop,
-      onOpenChange,
-      onSelect
-    }))));
-  } finally {
-    _effect.f();
-  }
+var Tree = ({ model, rootId, path, id, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
+  const childIds = useAtomValue2(model.childIds(rootId));
+  const treePath = useMemo2(() => path ? [
+    ...path,
+    id
+  ] : [
+    id
+  ], [
+    id,
+    path
+  ]);
+  const childProps = {
+    path: treePath,
+    levelOffset,
+    draggable: draggable3,
+    renderColumns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onOpenChange,
+    onSelect,
+    onItemHover
+  };
+  return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
+    gridTemplateColumns,
+    classNames
+  }, /* @__PURE__ */ React8.createElement(TreeProvider, {
+    value: model
+  }, childIds.map((childId, index) => /* @__PURE__ */ React8.createElement(TreeItemById, {
+    key: childId,
+    id: childId,
+    last: index === childIds.length - 1,
+    ...childProps
+  }))));
 };
 
 // src/util/path.ts
@@ -865,13 +829,17 @@ var Path = {
 };
 export {
   Accordion,
+  DEFAULT_INDENTATION,
   List,
   Path,
   Tree,
   TreeDataSchema,
   TreeItem,
+  TreeItemById,
+  TreeItemToggle,
   TreeProvider,
   isTreeData,
+  paddingIndentation,
   useTree
 };
 //# sourceMappingURL=index.mjs.map