@dxos/react-ui-list 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -1,4 +1,5 @@
 // packages/ui/react-ui-list/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";
@@ -6,6 +7,7 @@ import { Icon } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-list/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";
@@ -14,50 +16,70 @@ 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 }) => {
-  return /* @__PURE__ */ React.createElement(AccordionProvider, {
-    getId
-  }, /* @__PURE__ */ React.createElement(AccordionPrimitive.Root, {
-    type: "multiple",
-    value,
-    defaultValue,
-    onValueChange,
-    className: mx(classNames)
-  }, children?.({
-    items: items ?? []
-  })));
+  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();
+  }
 };
 
 // packages/ui/react-ui-list/src/components/Accordion/AccordionItem.tsx
 var ACCORDION_ITEM_NAME = "AccordionItem";
 var [AccordionItemProvider, useAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
 var AccordionItem = ({ children, classNames, item }) => {
-  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 _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();
+  }
 };
 var AccordionItemHeader = ({ classNames, children, ...props }) => {
-  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"
-  })));
+  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();
+  }
 };
 var AccordionItemBody = ({ children, classNames }) => {
-  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));
+  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();
+  }
 };
 
 // packages/ui/react-ui-list/src/components/Accordion/Accordion.tsx
@@ -69,6 +91,7 @@ var Accordion = {
 };
 
 // packages/ui/react-ui-list/src/components/List/ListItem.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 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";
@@ -81,6 +104,7 @@ import { Icon as Icon2, ListItem as NaturalListItem } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-list/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";
@@ -90,63 +114,68 @@ var LIST_NAME = "List";
 var [ListProvider, useListContext] = createContext3(LIST_NAME);
 var defaultGetId2 = (item) => item?.id;
 var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
-  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),
-      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);
+  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;
       }
-    });
-  }, [
-    items,
-    isEqual,
-    onMove
-  ]);
-  return /* @__PURE__ */ React3.createElement(ListProvider, {
-    state,
-    setState,
-    isItem,
-    ...props
-  }, children?.({
-    state,
-    items: items ?? []
-  }));
+    }, [
+      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);
+        }
+      });
+    }, [
+      items,
+      isEqual,
+      onMove
+    ]);
+    return /* @__PURE__ */ React3.createElement(ListProvider, {
+      state,
+      setState,
+      isItem,
+      ...props
+    }, children?.({
+      state,
+      items: items ?? []
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-list/src/components/List/ListItem.tsx
@@ -161,176 +190,201 @@ var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = createContext4(LIST_ITEM_NAME, defaultContext);
 var ListItem = ({ children, classNames, item, ...props }) => {
-  const { isItem, 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: 91,
-      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,
-        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);
-        },
-        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
-          });
-        },
-        onDrag: ({ self }) => {
-          const closestEdge = extractClosestEdge2(self.data);
-          setState((current) => {
-            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-              return current;
-            }
-            return {
+  var _effect = _useSignals4();
+  try {
+    const { isItem, 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: 91,
+        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,
+          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);
-        },
-        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
-  })));
+            });
+          },
+          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
+              };
+            });
+          },
+          onDragLeave: () => {
+            setState(idle);
+          },
+          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();
+  }
 };
 var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  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
-  }));
+  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 }) => {
-  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
-  });
+  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 ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
-  const { state } = useListContext("ITEM_BUTTON");
-  const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ React4.createElement(IconButton, {
-    disabled: isDisabled,
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ],
-    ...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 ListItemDragHandle = () => {
-  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  return /* @__PURE__ */ React4.createElement(IconButton, {
-    ref: dragHandleRef,
-    icon: "ph--dots-six-vertical--regular"
-  });
+  var _effect = _useSignals4();
+  try {
+    const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+    return /* @__PURE__ */ React4.createElement(IconButton, {
+      ref: dragHandleRef,
+      icon: "ph--dots-six-vertical--regular"
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var ListItemDragPreview = ({ children }) => {
   const { state } = useListContext("DRAG_PREVIEW");
@@ -338,13 +392,27 @@ var ListItemDragPreview = ({ children }) => {
     item: state.item
   }), state.container) : null;
 };
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React4.createElement("div", {
-  className: mx3("flex is-full gap-2", classNames)
-}, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React4.createElement("div", {
-  className: mx3("flex grow items-center truncate", classNames),
-  ...props
-}, children);
+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();
+  }
+};
 
 // packages/ui/react-ui-list/src/components/List/List.tsx
 var List = {
@@ -360,6 +428,7 @@ var List = {
 };
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 import React8, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
@@ -371,82 +440,95 @@ var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not
 var TreeProvider = TreeContext.Provider;
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 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 React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
-import { S } from "@dxos/echo-schema";
 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";
 
 // packages/ui/react-ui-list/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 { 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) => {
-  const { t } = useTranslation();
-  const handleSelect = useCallback2((event) => {
-    onSelect?.(event.altKey);
-  }, [
-    onSelect
-  ]);
-  const handleButtonKeydown = useCallback2((event) => {
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
+  var _effect = _useSignals5();
+  try {
+    const { t } = useTranslation();
+    const handleSelect = useCallback2((event) => {
       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))));
+    }, [
+      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();
+  }
 }));
 
 // packages/ui/react-ui-list/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) => {
-  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--regular",
-    size: 3,
-    classNames: mx5("transition duration-200", open && "rotate-90")
-  }));
+  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();
+  }
 }));
 
 // packages/ui/react-ui-list/src/components/Tree/helpers.ts
@@ -458,305 +540,311 @@ var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
 // packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
 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 = S.Struct({
-  id: S.String,
-  path: S.Array(S.String),
-  item: S.Any
+var TreeDataSchema = Schema.Struct({
+  id: Schema.String,
+  path: Schema.Array(Schema.String),
+  item: Schema.Any
 });
-var isTreeData = (data) => S.is(TreeDataSchema)(data);
+var isTreeData = (data) => 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 = 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 = useMemo(() => ({
-    id,
-    path,
-    item
-  }), [
-    id,
-    path,
-    item
-  ]);
-  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 cancelExpand = useCallback3(() => {
-    if (cancelExpandRef.current) {
-      clearTimeout(cancelExpandRef.current);
-      cancelExpandRef.current = null;
-    }
-  }, []);
-  useEffect3(() => {
-    if (!_draggable) {
-      return;
-    }
-    invariant2(buttonRef.current, void 0, {
-      F: __dxlog_file2,
-      L: 106,
-      S: void 0,
-      A: [
-        "buttonRef.current",
-        ""
-      ]
-    });
-    return combine2(
-      draggable2({
-        element: buttonRef.current,
-        getInitialData: () => data,
-        onDragStart: () => {
-          setState("dragging");
-          if (open) {
-            openRef.current = true;
-            onOpenChange?.({
-              item,
-              path,
-              open: false
-            });
+  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;
+      }
+      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) {
+              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
+        dropTargetForElements2({
+          element: buttonRef.current,
+          getData: ({ input, element }) => {
+            return 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
-      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.data, 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();
+          },
+          canDrop: ({ source }) => {
+            const _canDrop = canDrop ?? (() => true);
+            return source.element !== buttonRef.current && _canDrop(source.data, 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);
             }
-            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
-  ]);
-  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-groupSurface", 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);
-    }
-  }, /* @__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
-  })));
+        })
+      );
+    }, [
+      _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);
+      }
+    }, /* @__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();
+  }
 };
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
-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 = useMemo2(() => ({
-    getItems,
-    getProps,
-    isOpen,
-    isCurrent
-  }), [
-    getItems,
-    getProps,
-    isOpen,
-    isCurrent
-  ]);
-  const items = getItems(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
-  }))));
+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 = _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();
+  }
 };
 
 // packages/ui/react-ui-list/src/util/path.ts
-var SEPARATOR = "~";
+var SEPARATOR = "+";
 var Path = {
   create: (...args) => args.join(SEPARATOR),
   parts: (path) => path.split(SEPARATOR),
@@ -774,7 +862,6 @@ export {
   Accordion,
   List,
   Path,
-  RawTreeItem,
   Tree,
   TreeDataSchema,
   TreeItem,