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

package/dist/lib/node/index.cjs

@@ -31,7 +31,6 @@ __export(node_exports, {
   Accordion: () => Accordion,
   List: () => List,
   Path: () => Path,
-  RawTreeItem: () => RawTreeItem,
   Tree: () => Tree,
   TreeDataSchema: () => TreeDataSchema,
   TreeItem: () => TreeItem,
@@ -40,15 +39,18 @@ __export(node_exports, {
   useTree: () => useTree
 });
 module.exports = __toCommonJS(node_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var AccordionPrimitive2 = __toESM(require("@radix-ui/react-accordion"));
 var import_react_context = require("@radix-ui/react-context");
 var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
 var import_react_context2 = require("@radix-ui/react-context");
 var import_react2 = __toESM(require("react"));
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
@@ -59,27 +61,32 @@ var import_react_dom = require("react-dom");
 var import_invariant = require("@dxos/invariant");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
 var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var import_get_reorder_destination_index = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index");
 var import_react_context4 = require("@radix-ui/react-context");
 var import_react4 = __toESM(require("react"));
+var import_tracking5 = require("@preact-signals/safe-react/tracking");
 var import_react5 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react6 = require("react");
 var import_debug = require("@dxos/debug");
+var import_tracking6 = require("@preact-signals/safe-react/tracking");
 var import_combine2 = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var import_adapter3 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_tree_item = require("@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item");
+var import_effect = require("effect");
 var import_react7 = __toESM(require("react"));
-var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_tracking7 = require("@preact-signals/safe-react/tracking");
 var import_react8 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_text_tooltip = require("@dxos/react-ui-text-tooltip");
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_tracking8 = require("@preact-signals/safe-react/tracking");
 var import_react9 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
 var import_react_ui_theme6 = require("@dxos/react-ui-theme");
@@ -87,48 +94,68 @@ var ACCORDION_NAME = "Accordion";
 var [AccordionProvider, useAccordionContext] = (0, import_react_context2.createContext)(ACCORDION_NAME);
 var defaultGetId = (item) => item?.id;
 var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value, defaultValue, onValueChange }) => {
-  return /* @__PURE__ */ import_react2.default.createElement(AccordionProvider, {
-    getId
-  }, /* @__PURE__ */ import_react2.default.createElement(AccordionPrimitive.Root, {
-    type: "multiple",
-    value,
-    defaultValue,
-    onValueChange,
-    className: (0, import_react_ui_theme2.mx)(classNames)
-  }, children?.({
-    items: items ?? []
-  })));
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react2.default.createElement(AccordionProvider, {
+      getId
+    }, /* @__PURE__ */ import_react2.default.createElement(AccordionPrimitive.Root, {
+      type: "multiple",
+      value,
+      defaultValue,
+      onValueChange,
+      className: (0, import_react_ui_theme2.mx)(classNames)
+    }, children?.({
+      items: items ?? []
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var ACCORDION_ITEM_NAME = "AccordionItem";
 var [AccordionItemProvider, useAccordionItemContext] = (0, import_react_context.createContext)(ACCORDION_ITEM_NAME);
 var AccordionItem = ({ children, classNames, item }) => {
-  const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
-  return /* @__PURE__ */ import_react.default.createElement(AccordionItemProvider, {
-    item
-  }, /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Item, {
-    value: getId(item),
-    className: (0, import_react_ui_theme.mx)("overflow-hidden", classNames)
-  }, children));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
+    return /* @__PURE__ */ import_react.default.createElement(AccordionItemProvider, {
+      item
+    }, /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Item, {
+      value: getId(item),
+      className: (0, import_react_ui_theme.mx)("overflow-hidden", classNames)
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var AccordionItemHeader = ({ classNames, children, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Header, {
-    ...props,
-    className: (0, import_react_ui_theme.mx)(classNames)
-  }, /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Trigger, {
-    className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
-  }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
-    icon: "ph--caret-right--regular",
-    size: 4,
-    classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
-  })));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Header, {
+      ...props,
+      className: (0, import_react_ui_theme.mx)(classNames)
+    }, /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Trigger, {
+      className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
+    }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
+      icon: "ph--caret-right--regular",
+      size: 4,
+      classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var AccordionItemBody = ({ children, classNames }) => {
-  return /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Content, {
-    className: "overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("p-2", classNames)
-  }, children));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Content, {
+      className: "overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown"
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: (0, import_react_ui_theme.mx)("p-2", classNames)
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var Accordion = {
   Root: AccordionRoot,
@@ -140,63 +167,68 @@ var LIST_NAME = "List";
 var [ListProvider, useListContext] = (0, import_react_context4.createContext)(LIST_NAME);
 var defaultGetId2 = (item) => item?.id;
 var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
-  const isEqual = (0, import_react4.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] = (0, import_react4.useState)(idle);
-  (0, import_react4.useEffect)(() => {
-    if (!items) {
-      return;
-    }
-    return (0, import_adapter2.monitorForElements)({
-      canMonitor: ({ source }) => isItem(source.data),
-      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 = (0, import_closest_edge2.extractClosestEdge)(targetData);
-        const destinationIndex = (0, import_get_reorder_destination_index.getReorderDestinationIndex)({
-          closestEdgeOfTarget,
-          startIndex: sourceIdx,
-          indexOfTarget: targetIdx,
-          axis: "vertical"
-        });
-        onMove?.(sourceIdx, destinationIndex);
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const isEqual = (0, import_react4.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;
       }
-    });
-  }, [
-    items,
-    isEqual,
-    onMove
-  ]);
-  return /* @__PURE__ */ import_react4.default.createElement(ListProvider, {
-    state,
-    setState,
-    isItem,
-    ...props
-  }, children?.({
-    state,
-    items: items ?? []
-  }));
+    }, [
+      getId
+    ]);
+    const [state, setState] = (0, import_react4.useState)(idle);
+    (0, import_react4.useEffect)(() => {
+      if (!items) {
+        return;
+      }
+      return (0, import_adapter2.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 = (0, import_closest_edge2.extractClosestEdge)(targetData);
+          const destinationIndex = (0, import_get_reorder_destination_index.getReorderDestinationIndex)({
+            closestEdgeOfTarget,
+            startIndex: sourceIdx,
+            indexOfTarget: targetIdx,
+            axis: "vertical"
+          });
+          onMove?.(sourceIdx, destinationIndex);
+        }
+      });
+    }, [
+      items,
+      isEqual,
+      onMove
+    ]);
+    return /* @__PURE__ */ import_react4.default.createElement(ListProvider, {
+      state,
+      setState,
+      isItem,
+      ...props
+    }, children?.({
+      state,
+      items: items ?? []
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
 var idle = {
@@ -209,176 +241,201 @@ var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = (0, import_react_context3.createContext)(LIST_ITEM_NAME, defaultContext);
 var ListItem = ({ children, classNames, item, ...props }) => {
-  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const ref = (0, import_react3.useRef)(null);
-  const dragHandleRef = (0, import_react3.useRef)(null);
-  const [state, setState] = (0, import_react3.useState)(idle);
-  (0, import_react3.useEffect)(() => {
-    const element = ref.current;
-    (0, import_invariant.invariant)(element, void 0, {
-      F: __dxlog_file,
-      L: 91,
-      S: void 0,
-      A: [
-        "element",
-        ""
-      ]
-    });
-    return (0, import_combine.combine)(
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
-      //
-      (0, import_adapter.draggable)({
-        element,
-        dragHandle: dragHandleRef.current,
-        getInitialData: () => item,
-        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
-          const rect = source.element.getBoundingClientRect();
-          (0, import_set_custom_native_drag_preview.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
-      //
-      (0, import_adapter.dropTargetForElements)({
-        element,
-        canDrop: ({ source }) => {
-          return source.element !== element && isItem(source.data);
-        },
-        getData: ({ input }) => {
-          return (0, import_closest_edge.attachClosestEdge)(item, {
-            element,
-            input,
-            allowedEdges: [
-              "top",
-              "bottom"
-            ]
-          });
-        },
-        getIsSticky: () => true,
-        onDragEnter: ({ self }) => {
-          const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
-          setState({
-            type: "is-dragging-over",
-            closestEdge
-          });
-        },
-        onDrag: ({ self }) => {
-          const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
-          setState((current) => {
-            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-              return current;
-            }
-            return {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+    const ref = (0, import_react3.useRef)(null);
+    const dragHandleRef = (0, import_react3.useRef)(null);
+    const [state, setState] = (0, import_react3.useState)(idle);
+    (0, import_react3.useEffect)(() => {
+      const element = ref.current;
+      (0, import_invariant.invariant)(element, void 0, {
+        F: __dxlog_file,
+        L: 91,
+        S: void 0,
+        A: [
+          "element",
+          ""
+        ]
+      });
+      return (0, import_combine.combine)(
+        //
+        // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
+        //
+        (0, import_adapter.draggable)({
+          element,
+          dragHandle: dragHandleRef.current,
+          getInitialData: () => item,
+          onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
+            const rect = source.element.getBoundingClientRect();
+            (0, import_set_custom_native_drag_preview.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
+        //
+        (0, import_adapter.dropTargetForElements)({
+          element,
+          canDrop: ({ source }) => {
+            return (source.element !== element && isItem?.(source.data)) ?? false;
+          },
+          getData: ({ input }) => {
+            return (0, import_closest_edge.attachClosestEdge)(item, {
+              element,
+              input,
+              allowedEdges: [
+                "top",
+                "bottom"
+              ]
+            });
+          },
+          getIsSticky: () => true,
+          onDragEnter: ({ self }) => {
+            const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
+            setState({
               type: "is-dragging-over",
               closestEdge
-            };
-          });
-        },
-        onDragLeave: () => {
-          setState(idle);
-        },
-        onDrop: () => {
-          setState(idle);
-        }
-      })
-    );
-  }, [
-    item
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement(ListItemProvider, {
-    item,
-    dragHandleRef
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "none",
-    className: "relative"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref,
-    role: "listitem",
-    className: (0, import_react_ui_theme3.mx)("flex overflow-hidden", classNames, stateStyles[state.type]),
-    ...props
-  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.DropIndicator, {
-    edge: state.closestEdge
-  })));
+            });
+          },
+          onDrag: ({ self }) => {
+            const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
+            setState((current) => {
+              if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
+                return current;
+              }
+              return {
+                type: "is-dragging-over",
+                closestEdge
+              };
+            });
+          },
+          onDragLeave: () => {
+            setState(idle);
+          },
+          onDrop: () => {
+            setState(idle);
+          }
+        })
+      );
+    }, [
+      item
+    ]);
+    return /* @__PURE__ */ import_react3.default.createElement(ListItemProvider, {
+      item,
+      dragHandleRef
+    }, /* @__PURE__ */ import_react3.default.createElement("div", {
+      role: "none",
+      className: "relative"
+    }, /* @__PURE__ */ import_react3.default.createElement("div", {
+      ref,
+      role: "listitem",
+      className: (0, import_react_ui_theme3.mx)("flex overflow-hidden", classNames, stateStyles[state.type]),
+      ...props
+    }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.DropIndicator, {
+      edge: state.closestEdge
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var IconButton = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react3.default.createElement("button", {
-    ref: forwardedRef,
-    className: (0, import_react_ui_theme3.mx)("flex items-center justify-center", classNames),
-    ...props
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
-    icon,
-    classNames: "cursor-pointer",
-    size: 4
-  }));
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react3.default.createElement("button", {
+      ref: forwardedRef,
+      className: (0, import_react_ui_theme3.mx)("flex items-center justify-center", classNames),
+      ...props
+    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
+      icon,
+      classNames: "cursor-pointer",
+      size: 4
+    }));
+  } finally {
+    _effect.f();
+  }
 });
 var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", ...props }) => {
-  const { state } = useListContext("DELETE_BUTTON");
-  const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
-    icon,
-    disabled: isDisabled,
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ],
-    ...props
-  });
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { state } = useListContext("DELETE_BUTTON");
+    const isDisabled = state.type !== "idle" || disabled;
+    return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
+      icon,
+      disabled: isDisabled,
+      classNames: [
+        classNames,
+        autoHide && disabled && "hidden"
+      ],
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
-  const { state } = useListContext("ITEM_BUTTON");
-  const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
-    disabled: isDisabled,
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ],
-    ...props
-  });
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { state } = useListContext("ITEM_BUTTON");
+    const isDisabled = state.type !== "idle" || disabled;
+    return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
+      disabled: isDisabled,
+      classNames: [
+        classNames,
+        autoHide && disabled && "hidden"
+      ],
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var ListItemDragHandle = () => {
-  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
-    ref: dragHandleRef,
-    icon: "ph--dots-six-vertical--regular"
-  });
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+    return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
+      ref: dragHandleRef,
+      icon: "ph--dots-six-vertical--regular"
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var ListItemDragPreview = ({ children }) => {
   const { state } = useListContext("DRAG_PREVIEW");
@@ -386,13 +443,27 @@ var ListItemDragPreview = ({ children }) => {
     item: state.item
   }), state.container) : null;
 };
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ import_react3.default.createElement("div", {
-  className: (0, import_react_ui_theme3.mx)("flex is-full gap-2", classNames)
-}, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ import_react3.default.createElement("div", {
-  className: (0, import_react_ui_theme3.mx)("flex grow items-center truncate", classNames),
-  ...props
-}, children);
+var ListItemWrapper = ({ classNames, children }) => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
+      className: (0, import_react_ui_theme3.mx)("flex is-full gap-2", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var ListItemTitle = ({ classNames, children, ...props }) => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
+      className: (0, import_react_ui_theme3.mx)("flex grow items-center truncate", classNames),
+      ...props
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
 var List = {
   Root: ListRoot,
   Item: ListItem,
@@ -408,62 +479,72 @@ var TreeContext = /* @__PURE__ */ (0, import_react6.createContext)(null);
 var useTree = () => (0, import_react6.useContext)(TreeContext) ?? (0, import_debug.raise)(new Error("TreeContext not found"));
 var TreeProvider = TreeContext.Provider;
 var TreeItemHeading = /* @__PURE__ */ (0, import_react8.memo)(/* @__PURE__ */ (0, import_react8.forwardRef)(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
-  const { t } = (0, import_react_ui5.useTranslation)();
-  const handleSelect = (0, import_react8.useCallback)((event) => {
-    onSelect?.(event.altKey);
-  }, [
-    onSelect
-  ]);
-  const handleButtonKeydown = (0, import_react8.useCallback)((event) => {
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
+  var _effect = (0, import_tracking7.useSignals)();
+  try {
+    const { t } = (0, import_react_ui5.useTranslation)();
+    const handleSelect = (0, import_react8.useCallback)((event) => {
       onSelect?.(event.altKey);
-    }
-  }, [
-    onSelect
-  ]);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_text_tooltip.TextTooltip, {
-    text: (0, import_react_ui5.toLocalizedString)(label, t),
-    side: "bottom",
-    truncateQuery: "span[data-tooltip]",
-    onlyWhenTruncating: true,
-    asChild: true,
-    ref: forwardedRef
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Button, {
-    "data-testid": "treeItem.heading",
-    variant: "ghost",
-    density: "fine",
-    classNames: (0, import_react_ui_theme5.mx)("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__ */ import_react8.default.createElement(import_react_ui5.Icon, {
-    icon: icon ?? "ph--placeholder--regular",
-    size: 5,
-    classNames: "mlb-1"
-  }), /* @__PURE__ */ import_react8.default.createElement("span", {
-    className: "flex-1 is-0 truncate text-start text-sm font-normal",
-    "data-tooltip": true
-  }, (0, import_react_ui5.toLocalizedString)(label, t))));
+    }, [
+      onSelect
+    ]);
+    const handleButtonKeydown = (0, import_react8.useCallback)((event) => {
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect?.(event.altKey);
+      }
+    }, [
+      onSelect
+    ]);
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_text_tooltip.TextTooltip, {
+      text: (0, import_react_ui5.toLocalizedString)(label, t),
+      side: "bottom",
+      truncateQuery: "span[data-tooltip]",
+      onlyWhenTruncating: true,
+      asChild: true,
+      ref: forwardedRef
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Button, {
+      "data-testid": "treeItem.heading",
+      variant: "ghost",
+      density: "fine",
+      classNames: (0, import_react_ui_theme5.mx)("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__ */ import_react8.default.createElement(import_react_ui5.Icon, {
+      icon: icon ?? "ph--placeholder--regular",
+      size: 5,
+      classNames: "mlb-1"
+    }), /* @__PURE__ */ import_react8.default.createElement("span", {
+      className: "flex-1 is-0 truncate text-start text-sm font-normal",
+      "data-tooltip": true
+    }, (0, import_react_ui5.toLocalizedString)(label, t))));
+  } finally {
+    _effect.f();
+  }
 }));
 var TreeItemToggle = /* @__PURE__ */ (0, import_react9.memo)(/* @__PURE__ */ (0, import_react9.forwardRef)(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Button, {
-    ref: forwardedRef,
-    "data-testid": "treeItem.toggle",
-    "aria-expanded": open,
-    variant: "ghost",
-    density: "fine",
-    classNames: (0, import_react_ui_theme6.mx)("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
-    onClick: onToggle
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Icon, {
-    icon: "ph--caret-right--regular",
-    size: 3,
-    classNames: (0, import_react_ui_theme6.mx)("transition duration-200", open && "rotate-90")
-  }));
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Button, {
+      ref: forwardedRef,
+      "data-testid": "treeItem.toggle",
+      "aria-expanded": open,
+      variant: "ghost",
+      density: "fine",
+      classNames: (0, import_react_ui_theme6.mx)("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
+      onClick: onToggle
+    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Icon, {
+      icon: "ph--caret-right--bold",
+      size: 3,
+      classNames: (0, import_react_ui_theme6.mx)("transition duration-200", open && "rotate-90")
+    }));
+  } finally {
+    _effect.f();
+  }
 }));
 var DEFAULT_INDENTATION = 8;
 var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
@@ -471,301 +552,307 @@ var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
 });
 var __dxlog_file2 = "/home/runner/work/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]";
-var TreeDataSchema = import_echo_schema.S.Struct({
-  id: import_echo_schema.S.String,
-  path: import_echo_schema.S.Array(import_echo_schema.S.String),
-  item: import_echo_schema.S.Any
+var TreeDataSchema = import_effect.Schema.Struct({
+  id: import_effect.Schema.String,
+  path: import_effect.Schema.Array(import_effect.Schema.String),
+  item: import_effect.Schema.Any
 });
-var isTreeData = (data) => import_echo_schema.S.is(TreeDataSchema)(data);
+var isTreeData = (data) => import_effect.Schema.is(TreeDataSchema)(data);
 var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset = 2 }) => {
-  const { getItems, getProps, isOpen, isCurrent } = useTree();
-  const items = getItems(item);
-  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
-  const path = (0, import_react7.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 data = (0, import_react7.useMemo)(() => ({
-    id,
-    path,
-    item
-  }), [
-    id,
-    path,
-    item
-  ]);
-  const rowRef = (0, import_react7.useRef)(null);
-  const buttonRef = (0, import_react7.useRef)(null);
-  const openRef = (0, import_react7.useRef)(false);
-  const cancelExpandRef = (0, import_react7.useRef)(null);
-  const [_state, setState] = (0, import_react7.useState)("idle");
-  const [instruction, setInstruction] = (0, import_react7.useState)(null);
-  const [menuOpen, setMenuOpen] = (0, import_react7.useState)(false);
-  const cancelExpand = (0, import_react7.useCallback)(() => {
-    if (cancelExpandRef.current) {
-      clearTimeout(cancelExpandRef.current);
-      cancelExpandRef.current = null;
-    }
-  }, []);
-  (0, import_react7.useEffect)(() => {
-    if (!_draggable) {
-      return;
-    }
-    (0, import_invariant2.invariant)(buttonRef.current, void 0, {
-      F: __dxlog_file2,
-      L: 106,
-      S: void 0,
-      A: [
-        "buttonRef.current",
-        ""
-      ]
-    });
-    return (0, import_combine2.combine)(
-      (0, import_adapter3.draggable)({
-        element: buttonRef.current,
-        getInitialData: () => data,
-        onDragStart: () => {
-          setState("dragging");
-          if (open) {
-            openRef.current = true;
-            onOpenChange?.({
-              item,
-              path,
-              open: false
-            });
+  var _effect = (0, import_tracking6.useSignals)();
+  try {
+    const rowRef = (0, import_react7.useRef)(null);
+    const buttonRef = (0, import_react7.useRef)(null);
+    const openRef = (0, import_react7.useRef)(false);
+    const cancelExpandRef = (0, import_react7.useRef)(null);
+    const [_state, setState] = (0, import_react7.useState)("idle");
+    const [instruction, setInstruction] = (0, import_react7.useState)(null);
+    const [menuOpen, setMenuOpen] = (0, import_react7.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 = (0, import_react7.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 = (0, import_react7.useCallback)(() => {
+      if (cancelExpandRef.current) {
+        clearTimeout(cancelExpandRef.current);
+        cancelExpandRef.current = null;
+      }
+    }, []);
+    (0, import_react7.useEffect)(() => {
+      if (!_draggable) {
+        return;
+      }
+      (0, import_invariant2.invariant)(buttonRef.current, void 0, {
+        F: __dxlog_file2,
+        L: 106,
+        S: void 0,
+        A: [
+          "buttonRef.current",
+          ""
+        ]
+      });
+      const data = {
+        id,
+        path,
+        item
+      };
+      return (0, import_combine2.combine)(
+        (0, import_adapter3.draggable)({
+          element: buttonRef.current,
+          getInitialData: () => data,
+          onDragStart: () => {
+            setState("dragging");
+            if (open) {
+              openRef.current = true;
+              onOpenChange?.({
+                item,
+                path,
+                open: false
+              });
+            }
+          },
+          onDrop: () => {
+            setState("idle");
+            if (openRef.current) {
+              onOpenChange?.({
+                item,
+                path,
+                open: true
+              });
+            }
           }
-        },
-        onDrop: () => {
-          setState("idle");
-          if (openRef.current) {
-            onOpenChange?.({
-              item,
-              path,
-              open: true
+        }),
+        // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
+        (0, import_adapter3.dropTargetForElements)({
+          element: buttonRef.current,
+          getData: ({ input, element }) => {
+            return (0, import_tree_item.attachInstruction)(data, {
+              input,
+              element,
+              indentPerLevel: DEFAULT_INDENTATION,
+              currentLevel: level,
+              mode,
+              block: isBranch ? [] : [
+                "make-child"
+              ]
             });
-          }
-        }
-      }),
-      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-      (0, import_adapter3.dropTargetForElements)({
-        element: buttonRef.current,
-        getData: ({ input, element }) => {
-          return (0, import_tree_item.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.data, data);
-        },
-        getIsSticky: () => true,
-        onDrag: ({ self, source }) => {
-          const instruction2 = (0, import_tree_item.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();
+          },
+          canDrop: ({ source }) => {
+            const _canDrop = canDrop ?? (() => true);
+            return source.element !== buttonRef.current && _canDrop(source.data, data);
+          },
+          getIsSticky: () => true,
+          onDrag: ({ self, source }) => {
+            const instruction2 = (0, import_tree_item.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);
             }
-            setInstruction(instruction2);
-          } else if (instruction2?.type === "reparent") {
-            setInstruction(instruction2);
-          } else {
+          },
+          onDragLeave: () => {
+            cancelExpand();
+            setInstruction(null);
+          },
+          onDrop: () => {
+            cancelExpand();
             setInstruction(null);
           }
-        },
-        onDragLeave: () => {
-          cancelExpand();
-          setInstruction(null);
-        },
-        onDrop: () => {
-          cancelExpand();
-          setInstruction(null);
-        }
-      })
-    );
-  }, [
-    _draggable,
-    item,
-    id,
-    mode,
-    path,
-    open,
-    canDrop
-  ]);
-  (0, import_react7.useEffect)(() => () => cancelExpand(), [
-    cancelExpand
-  ]);
-  const handleOpenChange = (0, import_react7.useCallback)(() => onOpenChange?.({
-    item,
-    path,
-    open: !open
-  }), [
-    onOpenChange,
-    item,
-    path,
-    open
-  ]);
-  const handleSelect = (0, import_react7.useCallback)((option = false) => {
-    if (isBranch) {
-      handleOpenChange();
-    } else {
-      rowRef.current?.focus();
-      onSelect?.({
-        item,
-        path,
-        current: !current,
-        option
-      });
-    }
-  }, [
-    item,
-    path,
-    current,
-    isBranch,
-    handleOpenChange,
-    onSelect
-  ]);
-  const handleKeyDown = (0, import_react7.useCallback)((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__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Treegrid.Row, {
-    ref: rowRef,
-    key: id,
-    id,
-    "aria-labelledby": `${id}__label`,
-    parentOf: parentOf?.join(import_react_ui4.Treegrid.PARENT_OF_SEPARATOR),
-    classNames: (0, import_react_ui_theme4.mx)("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface", import_react_ui_theme4.hoverableControls, import_react_ui_theme4.hoverableFocusedKeyboardControls, import_react_ui_theme4.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme4.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);
-    }
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Treegrid.Cell, {
-    indent: true,
-    classNames: "relative grid grid-cols-subgrid col-[tree-row]",
-    style: paddingIndentation(level)
-  }, /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "none",
-    className: "flex items-center"
-  }, /* @__PURE__ */ import_react7.default.createElement(TreeItemToggle, {
-    isBranch,
-    open,
-    onToggle: handleOpenChange
-  }), /* @__PURE__ */ import_react7.default.createElement(TreeItemHeading, {
-    ref: buttonRef,
-    label,
-    icon,
-    className: headingClassName,
-    disabled,
-    current,
-    onSelect: handleSelect
-  })), Columns && /* @__PURE__ */ import_react7.default.createElement(Columns, {
-    item,
-    path,
-    open,
-    menuOpen,
-    setMenuOpen
-  }), instruction && /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.TreeItem.DropIndicator, {
-    instruction,
-    gap: 2
-  }))), open && items.map((item2, index) => /* @__PURE__ */ import_react7.default.createElement(TreeItem, {
-    key: item2.id,
-    item: item2,
-    path,
-    last: index === items.length - 1,
-    draggable: _draggable,
-    renderColumns: Columns,
-    canDrop,
-    onOpenChange,
-    onSelect
-  })));
+        })
+      );
+    }, [
+      _draggable,
+      item,
+      id,
+      mode,
+      path,
+      open,
+      canDrop
+    ]);
+    (0, import_react7.useEffect)(() => () => cancelExpand(), [
+      cancelExpand
+    ]);
+    const handleOpenChange = (0, import_react7.useCallback)(() => onOpenChange?.({
+      item,
+      path,
+      open: !open
+    }), [
+      onOpenChange,
+      item,
+      path,
+      open
+    ]);
+    const handleSelect = (0, import_react7.useCallback)((option = false) => {
+      if (isBranch) {
+        handleOpenChange();
+      } else {
+        rowRef.current?.focus();
+        onSelect?.({
+          item,
+          path,
+          current: !current,
+          option
+        });
+      }
+    }, [
+      item,
+      path,
+      current,
+      isBranch,
+      handleOpenChange,
+      onSelect
+    ]);
+    const handleKeyDown = (0, import_react7.useCallback)((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__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Treegrid.Row, {
+      ref: rowRef,
+      key: id,
+      id,
+      "aria-labelledby": `${id}__label`,
+      parentOf: parentOf?.join(import_react_ui4.Treegrid.PARENT_OF_SEPARATOR),
+      classNames: (0, import_react_ui_theme4.mx)("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface", import_react_ui_theme4.hoverableControls, import_react_ui_theme4.hoverableFocusedKeyboardControls, import_react_ui_theme4.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme4.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);
+      }
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Treegrid.Cell, {
+      indent: true,
+      classNames: "relative grid grid-cols-subgrid col-[tree-row]",
+      style: paddingIndentation(level)
+    }, /* @__PURE__ */ import_react7.default.createElement("div", {
+      role: "none",
+      className: "flex items-center"
+    }, /* @__PURE__ */ import_react7.default.createElement(TreeItemToggle, {
+      isBranch,
+      open,
+      onToggle: handleOpenChange
+    }), /* @__PURE__ */ import_react7.default.createElement(TreeItemHeading, {
+      ref: buttonRef,
+      label,
+      icon,
+      className: headingClassName,
+      disabled,
+      current,
+      onSelect: handleSelect
+    })), Columns && /* @__PURE__ */ import_react7.default.createElement(Columns, {
+      item,
+      path,
+      open,
+      menuOpen,
+      setMenuOpen
+    }), instruction && /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.TreeItem.DropIndicator, {
+      instruction,
+      gap: 2
+    }))), open && items.map((item2, index) => /* @__PURE__ */ import_react7.default.createElement(TreeItem, {
+      key: item2.id,
+      item: item2,
+      path,
+      last: index === items.length - 1,
+      draggable: _draggable,
+      renderColumns: Columns,
+      canDrop,
+      onOpenChange,
+      onSelect
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var TreeItem = /* @__PURE__ */ (0, import_react7.memo)(RawTreeItem);
-var Tree = ({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect, levelOffset }) => {
-  const context = (0, import_react5.useMemo)(() => ({
-    getItems,
-    getProps,
-    isOpen,
-    isCurrent
-  }), [
-    getItems,
-    getProps,
-    isOpen,
-    isCurrent
-  ]);
-  const items = getItems(root);
-  const treePath = (0, import_react5.useMemo)(() => path ? [
-    ...path,
-    id
-  ] : [
-    id
-  ], [
-    id,
-    path
-  ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Root, {
-    gridTemplateColumns,
-    classNames
-  }, /* @__PURE__ */ import_react5.default.createElement(TreeProvider, {
-    value: context
-  }, items.map((item, index) => /* @__PURE__ */ import_react5.default.createElement(TreeItem, {
-    key: item.id,
-    item,
-    last: index === items.length - 1,
-    path: treePath,
-    levelOffset,
-    draggable: draggable3,
-    renderColumns,
-    canDrop,
-    onOpenChange,
-    onSelect
-  }))));
+var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect, levelOffset }) => {
+  var _effect = (0, import_tracking5.useSignals)();
+  try {
+    const context = (0, import_react5.useMemo)(() => ({
+      useItems,
+      getProps,
+      isOpen,
+      isCurrent
+    }), [
+      useItems,
+      getProps,
+      isOpen,
+      isCurrent
+    ]);
+    const items = useItems(root);
+    const treePath = (0, import_react5.useMemo)(() => path ? [
+      ...path,
+      id
+    ] : [
+      id
+    ], [
+      id,
+      path
+    ]);
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Root, {
+      gridTemplateColumns,
+      classNames
+    }, /* @__PURE__ */ import_react5.default.createElement(TreeProvider, {
+      value: context
+    }, items.map((item, index) => /* @__PURE__ */ import_react5.default.createElement(TreeItem, {
+      key: item.id,
+      item,
+      last: index === items.length - 1,
+      path: treePath,
+      levelOffset,
+      draggable: draggable3,
+      renderColumns,
+      canDrop,
+      onOpenChange,
+      onSelect
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
-var SEPARATOR = "~";
+var SEPARATOR = "+";
 var Path = {
   create: (...args) => args.join(SEPARATOR),
   parts: (path) => path.split(SEPARATOR),
@@ -784,7 +871,6 @@ var Path = {
   Accordion,
   List,
   Path,
-  RawTreeItem,
   Tree,
   TreeDataSchema,
   TreeItem,