@dxos/react-ui-list 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/dist/lib/browser/index.mjs

@@ -44,7 +44,7 @@ var AccordionItemHeader = ({ classNames, children, ...props }) => {
     ...props,
     className: mx2(classNames)
   }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Trigger, {
-    className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
+    className: "group flex items-center p-2 dx-focus-ring-inset w-full text-start"
   }, children, /* @__PURE__ */ React2.createElement(Icon, {
     icon: "ph--caret-right--regular",
     size: 4,
@@ -68,29 +68,466 @@ var Accordion = {
   ItemBody: AccordionItemBody
 };
 
+// src/components/Combobox/Combobox.tsx
+import { createContext as createContext4 } from "@radix-ui/react-context";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React4, { forwardRef as forwardRef2, useCallback as useCallback2 } from "react";
+import { Button, Icon as Icon2, Popover, ScrollArea, useId } from "@dxos/react-ui";
+import { composable, composableProps, mx as mx4 } from "@dxos/ui-theme";
+
+// src/components/Picker/Picker.tsx
+import { Slot } from "@radix-ui/react-slot";
+import React3, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Input, useThemeContext } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
+
+// src/components/Picker/context.ts
+import { createContext as createContext3 } from "@radix-ui/react-context";
+var [PickerItemContextProvider, usePickerItemContext] = createContext3("PickerItem");
+var [PickerInputContextProvider, usePickerInputContext] = createContext3("PickerInput");
+
+// src/components/Picker/Picker.tsx
+var PickerRoot = ({ children }) => {
+  const [selectedValue, setSelectedValue] = useState(void 0);
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const [itemVersion, setItemVersion] = useState(0);
+  useEffect(() => {
+    const current = selectedValue !== void 0 ? itemsRef.current.get(selectedValue) : void 0;
+    const isValid = current !== void 0 && !current.disabled;
+    if (!isValid && itemsRef.current.size > 0) {
+      const entries = Array.from(itemsRef.current.entries()).filter(([, data]) => !data.disabled);
+      if (entries.length > 0) {
+        entries.sort(([, a], [, b]) => {
+          const position = a.element.compareDocumentPosition(b.element);
+          if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+          }
+          if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+          }
+          return 0;
+        });
+        const firstValue = entries[0]?.[0];
+        if (firstValue !== void 0 && firstValue !== selectedValue) {
+          setSelectedValue(firstValue);
+        }
+      } else if (selectedValue !== void 0) {
+        setSelectedValue(void 0);
+      }
+    }
+  }, [
+    itemVersion,
+    selectedValue
+  ]);
+  const registerItem = useCallback((value, element, onSelect, disabled) => {
+    if (element) {
+      itemsRef.current.set(value, {
+        element,
+        onSelect,
+        disabled
+      });
+      setItemVersion((v) => v + 1);
+    }
+  }, []);
+  const unregisterItem = useCallback((value) => {
+    itemsRef.current.delete(value);
+    setItemVersion((v) => v + 1);
+  }, []);
+  const getItemValues = useCallback(() => {
+    return Array.from(itemsRef.current.entries()).filter(([, data]) => !data.disabled).sort(([, a], [, b]) => {
+      const position = a.element.compareDocumentPosition(b.element);
+      return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : position & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+    }).map(([value]) => value);
+  }, []);
+  const triggerSelect = useCallback(() => {
+    if (selectedValue !== void 0) {
+      const item = itemsRef.current.get(selectedValue);
+      item?.onSelect?.();
+    }
+  }, [
+    selectedValue
+  ]);
+  const itemContextValue = useMemo(() => ({
+    selectedValue,
+    onSelectedValueChange: setSelectedValue,
+    registerItem,
+    unregisterItem
+  }), [
+    selectedValue,
+    registerItem,
+    unregisterItem
+  ]);
+  const inputContextValue = useMemo(() => ({
+    selectedValue,
+    onSelectedValueChange: setSelectedValue,
+    getItemValues,
+    triggerSelect
+  }), [
+    selectedValue,
+    getItemValues,
+    triggerSelect
+  ]);
+  return /* @__PURE__ */ React3.createElement(PickerInputContextProvider, inputContextValue, /* @__PURE__ */ React3.createElement(PickerItemContextProvider, itemContextValue, children));
+};
+PickerRoot.displayName = "Picker.Root";
+var PickerInput = /* @__PURE__ */ forwardRef(({ value, onValueChange, onChange, onKeyDown, autoFocus, ...props }, forwardedRef) => {
+  const { hasIosKeyboard } = useThemeContext();
+  const { selectedValue, onSelectedValueChange, getItemValues, triggerSelect } = usePickerInputContext("Picker.Input");
+  const handleChange = useCallback((event) => {
+    onValueChange?.(event.target.value);
+    onChange?.(event);
+  }, [
+    onValueChange,
+    onChange
+  ]);
+  const handleKeyDown = useCallback((event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    const values = getItemValues();
+    if (values.length === 0) {
+      if (event.key === "Escape") {
+        onValueChange?.("");
+      }
+      return;
+    }
+    const currentIndex = selectedValue !== void 0 ? values.indexOf(selectedValue) : -1;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, values.length - 1);
+        const nextValue = values[nextIndex];
+        if (nextValue !== void 0) {
+          onSelectedValueChange(nextValue);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const prevIndex = currentIndex === -1 ? values.length - 1 : Math.max(currentIndex - 1, 0);
+        const prevValue = values[prevIndex];
+        if (prevValue !== void 0) {
+          onSelectedValueChange(prevValue);
+        }
+        break;
+      }
+      case "Enter": {
+        if (selectedValue !== void 0) {
+          event.preventDefault();
+          triggerSelect();
+        }
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        const firstValue = values[0];
+        if (firstValue !== void 0) {
+          onSelectedValueChange(firstValue);
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        const lastValue = values[values.length - 1];
+        if (lastValue !== void 0) {
+          onSelectedValueChange(lastValue);
+        }
+        break;
+      }
+      case "Escape": {
+        event.preventDefault();
+        if (selectedValue !== void 0) {
+          onSelectedValueChange(void 0);
+        } else {
+          onValueChange?.("");
+        }
+        break;
+      }
+    }
+  }, [
+    selectedValue,
+    onSelectedValueChange,
+    getItemValues,
+    triggerSelect,
+    onValueChange,
+    onKeyDown
+  ]);
+  return /* @__PURE__ */ React3.createElement(Input.Root, null, /* @__PURE__ */ React3.createElement(Input.TextInput, {
+    ...props,
+    autoFocus: autoFocus && !hasIosKeyboard,
+    ...value !== void 0 && {
+      value
+    },
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref: forwardedRef
+  }));
+});
+PickerInput.displayName = "Picker.Input";
+var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disabled, asChild, children, ...props }, forwardedRef) => {
+  const { selectedValue, onSelectedValueChange, registerItem, unregisterItem } = usePickerItemContext("Picker.Item");
+  const internalRef = useRef(null);
+  const isSelected = selectedValue === value && !disabled;
+  useEffect(() => {
+    const element = internalRef.current;
+    if (element) {
+      registerItem(value, element, onSelect, disabled);
+    }
+    return () => unregisterItem(value);
+  }, [
+    value,
+    onSelect,
+    disabled,
+    registerItem,
+    unregisterItem
+  ]);
+  useEffect(() => {
+    if (isSelected && internalRef.current) {
+      internalRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    isSelected
+  ]);
+  const handleClick = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onSelectedValueChange(value);
+    onSelect?.();
+  }, [
+    disabled,
+    value,
+    onSelectedValueChange,
+    onSelect
+  ]);
+  const handleMouseDown = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ React3.createElement(Comp, {
+    ...props,
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    role: "option",
+    "aria-selected": isSelected,
+    "aria-disabled": disabled,
+    "data-selected": isSelected,
+    "data-disabled": disabled,
+    "data-value": value,
+    // Browser focus stays on the input; highlight is via `aria-selected`.
+    tabIndex: -1,
+    className: mx3("dx-hover dx-selected px-[var(--gutter,0.75rem)] py-1 cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", classNames),
+    onMouseDown: handleMouseDown,
+    onClick: handleClick
+  }, children);
+});
+PickerItem.displayName = "Picker.Item";
+var Picker = {
+  Root: PickerRoot,
+  Input: PickerInput,
+  Item: PickerItem
+};
+
+// src/components/Combobox/Combobox.tsx
+var COMBOBOX_NAME = "Combobox";
+var COMBOBOX_CONTENT_NAME = "ComboboxContent";
+var COMBOBOX_ITEM_NAME = "ComboboxItem";
+var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
+var [ComboboxProvider, useComboboxContext] = createContext4(COMBOBOX_NAME, {});
+var ComboboxRoot = ({ children, modal, modalId: modalIdProp, open: openProp, defaultOpen, onOpenChange: propsOnOpenChange, value: valueProp, defaultValue, onValueChange: propsOnValueChange, placeholder }) => {
+  const modalId = useId(COMBOBOX_NAME, modalIdProp);
+  const [open = false, onOpenChange] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: propsOnOpenChange
+  });
+  const [value = "", onValueChange] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: propsOnValueChange
+  });
+  return /* @__PURE__ */ React4.createElement(Popover.Root, {
+    open,
+    onOpenChange,
+    modal
+  }, /* @__PURE__ */ React4.createElement(ComboboxProvider, {
+    isCombobox: true,
+    modalId,
+    placeholder,
+    open,
+    onOpenChange,
+    value,
+    onValueChange
+  }, children));
+};
+var ComboboxContent = composable(({ children, ...props }, forwardedRef) => {
+  const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
+  return /* @__PURE__ */ React4.createElement(Popover.Content, {
+    ...composableProps(props, {
+      id: modalId
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React4.createElement(Popover.Viewport, {
+    classNames: "w-(--radix-popover-trigger-width)"
+  }, /* @__PURE__ */ React4.createElement(Picker.Root, null, children)));
+});
+ComboboxContent.displayName = COMBOBOX_CONTENT_NAME;
+var ComboboxTrigger = /* @__PURE__ */ forwardRef2(({ children, onClick, ...props }, forwardedRef) => {
+  const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
+  const handleClick = useCallback2((event) => {
+    onClick?.(event);
+    onOpenChange?.(true);
+  }, [
+    onClick,
+    onOpenChange
+  ]);
+  return /* @__PURE__ */ React4.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Button, {
+    ...props,
+    role: "combobox",
+    "aria-expanded": open,
+    "aria-controls": modalId,
+    "aria-haspopup": "dialog",
+    onClick: handleClick,
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", {
+    className: mx4("font-normal text-start flex-1 min-w-0 truncate me-2", !value && "text-subdued")
+  }, value || placeholder), /* @__PURE__ */ React4.createElement(Icon2, {
+    icon: "ph--caret-down--bold",
+    size: 3
+  }))));
+});
+ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
+var ComboboxVirtualTrigger = Popover.VirtualTrigger;
+var ComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement(Picker.Input, {
+    ...props,
+    classNames: [
+      "m-form-chrome mb-0 w-[calc(100%-2*var(--spacing-form-chrome))]",
+      classNames
+    ],
+    ref: forwardedRef
+  });
+});
+ComboboxInput.displayName = "Combobox.Input";
+var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
+    ...composableProps(props, {
+      classNames: [
+        "py-form-chrome",
+        classNames
+      ]
+    }),
+    role: "listbox",
+    centered: true,
+    padding: true,
+    thin: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, children));
+});
+ComboboxList.displayName = "Combobox.List";
+var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, value, label, icon, iconClassNames, checked, suffix, disabled, closeOnSelect = true, children }, forwardedRef) => {
+  const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
+  const handleSelect = useCallback2(() => {
+    onSelect?.();
+    if (value !== void 0) {
+      onValueChange?.(value);
+    }
+    if (closeOnSelect) {
+      onOpenChange?.(false);
+    }
+  }, [
+    onSelect,
+    onValueChange,
+    onOpenChange,
+    value,
+    closeOnSelect
+  ]);
+  return /* @__PURE__ */ React4.createElement(Picker.Item, {
+    value,
+    disabled,
+    onSelect: handleSelect,
+    ref: forwardedRef,
+    classNames: [
+      // Full width inside the viewport (no horizontal margin).
+      // `px-3 py-1`, `cursor-pointer`, `select-none` and the
+      // `dx-hover` / `dx-selected` pairing come from `Picker.Item`'s
+      // defaults; we only add the row-shape (flex / icons + label)
+      // and the disabled overrides on top.
+      "flex w-full gap-2 items-center",
+      disabled && "hover:bg-transparent data-[selected=true]:bg-transparent",
+      classNames
+    ]
+  }, children ?? /* @__PURE__ */ React4.createElement(React4.Fragment, null, icon && /* @__PURE__ */ React4.createElement(Icon2, {
+    icon,
+    classNames: iconClassNames
+  }), /* @__PURE__ */ React4.createElement("span", {
+    className: "w-0 grow truncate"
+  }, label), suffix && /* @__PURE__ */ React4.createElement("span", {
+    className: "shrink-0 text-description"
+  }, suffix), checked && /* @__PURE__ */ React4.createElement(Icon2, {
+    icon: "ph--check--regular"
+  })));
+});
+ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
+var ComboboxArrow = Popover.Arrow;
+var ComboboxEmpty = /* @__PURE__ */ forwardRef2(({ classNames, children }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref: forwardedRef,
+    role: "status",
+    className: mx4(classNames)
+  }, children);
+});
+ComboboxEmpty.displayName = "Combobox.Empty";
+var ComboboxPortal = Popover.Portal;
+var Combobox = {
+  Root: ComboboxRoot,
+  Portal: ComboboxPortal,
+  Content: ComboboxContent,
+  Trigger: ComboboxTrigger,
+  VirtualTrigger: ComboboxVirtualTrigger,
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Item: ComboboxItem,
+  Arrow: ComboboxArrow,
+  Empty: ComboboxEmpty
+};
+
 // src/components/List/ListItem.tsx
+import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { createContext as createContext4 } from "@radix-ui/react-context";
-import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { createContext as createContext6 } from "@radix-ui/react-context";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React6, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
 import { IconButton, ListItem as NaturalListItem, useTranslation } from "@dxos/react-ui";
-import { mx as mx3, osTranslations } from "@dxos/ui-theme";
+import { mx as mx5, osTranslations } from "@dxos/ui-theme";
 
 // src/components/List/ListRoot.tsx
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
-import { createContext as createContext3 } from "@radix-ui/react-context";
-import React3, { useCallback, useEffect, useState } from "react";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { createContext as createContext5 } from "@radix-ui/react-context";
+import React5, { useCallback as useCallback3, useEffect as useEffect2, useState as useState2 } from "react";
 var LIST_NAME = "List";
-var [ListProvider, useListContext] = createContext3(LIST_NAME);
+var [ListProvider, useListContext] = createContext5(LIST_NAME);
 var defaultGetId2 = (item) => item?.id;
 var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
-  const isEqual = useCallback((a, b) => {
+  const isEqual = useCallback3((a, b) => {
     const idA = getId?.(a);
     const idB = getId?.(b);
     if (idA !== void 0 && idB !== void 0) {
@@ -101,8 +538,8 @@ var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...pro
   }, [
     getId
   ]);
-  const [state, setState] = useState(idle);
-  useEffect(() => {
+  const [state, setState] = useState2(idle);
+  useEffect2(() => {
     if (!items) {
       return;
     }
@@ -138,7 +575,7 @@ var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...pro
     isEqual,
     onMove
   ]);
-  return /* @__PURE__ */ React3.createElement(ListProvider, {
+  return /* @__PURE__ */ React5.createElement(ListProvider, {
     state,
     setState,
     isItem,
@@ -159,23 +596,16 @@ var stateStyles = {
 };
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
-var [ListItemProvider, useListItemContext] = createContext4(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item, ...props }) => {
+var [ListItemProvider, useListItemContext] = createContext6(LIST_ITEM_NAME, defaultContext);
+var ListItem = ({ children, classNames, item, asChild, selected, ...props }) => {
+  const Comp = asChild ? Slot2 : "div";
   const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const ref = useRef(null);
-  const dragHandleRef = useRef(null);
-  const [state, setState] = useState2(idle);
-  useEffect2(() => {
-    const element = ref.current;
-    invariant(element, void 0, {
-      F: __dxlog_file,
-      L: 98,
-      S: void 0,
-      A: [
-        "element",
-        ""
-      ]
-    });
+  const rootRef = useRef2(null);
+  const dragHandleRef = useRef2(null);
+  const [state, setState] = useState3(idle);
+  useEffect3(() => {
+    const element = rootRef.current;
+    invariant(element, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 37, S: void 0, A: ["element", ""] });
     return combine(
       //
       // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
@@ -275,43 +705,44 @@ var ListItem = ({ children, classNames, item, ...props }) => {
   }, [
     item
   ]);
-  return /* @__PURE__ */ React4.createElement(ListItemProvider, {
+  return /* @__PURE__ */ React6.createElement(ListItemProvider, {
     item,
     dragHandleRef
-  }, /* @__PURE__ */ React4.createElement("div", {
-    ref,
+  }, /* @__PURE__ */ React6.createElement(Comp, {
+    ...props,
     role: "listitem",
-    className: mx3("flex relative", classNames, stateStyles[state.type]),
-    ...props
-  }, children, state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+    "aria-selected": selected,
+    className: mx5("relative p-1 dx-selected dx-hover", classNames, stateStyles[state.type]),
+    ref: rootRef
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React6.createElement(NaturalListItem.DropIndicator, {
     edge: state.closestEdge
-  })));
+  }));
 };
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
-  const { state } = useListContext("DELETE_BUTTON");
+var ListItemIconButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
+  const { state } = useListContext("ITEM_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
-  const { t } = useTranslation(osTranslations);
-  return /* @__PURE__ */ React4.createElement(IconButton, {
-    iconOnly: true,
-    variant: "ghost",
+  return /* @__PURE__ */ React6.createElement(IconButton, {
     ...props,
-    icon,
     disabled: isDisabled,
-    label: label ?? t("delete label"),
+    iconOnly,
+    variant,
     classNames: [
       classNames,
       autoHide && disabled && "hidden"
     ]
   });
 };
-var ListItemButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
-  const { state } = useListContext("ITEM_BUTTON");
+var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
+  const { state } = useListContext("DELETE_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ React4.createElement(IconButton, {
+  const { t } = useTranslation(osTranslations);
+  return /* @__PURE__ */ React6.createElement(IconButton, {
     ...props,
+    variant: "ghost",
     disabled: isDisabled,
-    iconOnly,
-    variant,
+    icon,
+    iconOnly: true,
+    label: label ?? t("delete.label"),
     classNames: [
       classNames,
       autoHide && disabled && "hidden"
@@ -321,13 +752,13 @@ var ListItemButton = ({ autoHide = true, iconOnly = true, variant = "ghost", cla
 var ListItemDragHandle = ({ disabled }) => {
   const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
   const { t } = useTranslation(osTranslations);
-  return /* @__PURE__ */ React4.createElement(IconButton, {
-    iconOnly: true,
+  return /* @__PURE__ */ React6.createElement(IconButton, {
     variant: "ghost",
-    label: t("drag handle label"),
-    ref: dragHandleRef,
+    disabled,
     icon: "ph--dots-six-vertical--regular",
-    disabled
+    iconOnly: true,
+    label: t("drag-handle.label"),
+    ref: dragHandleRef
   });
 };
 var ListItemDragPreview = ({ children }) => {
@@ -336,11 +767,13 @@ 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)
+var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React6.createElement("div", {
+  role: "none",
+  className: mx5("flex w-full gap-2", classNames)
 }, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React4.createElement("div", {
-  className: mx3("flex grow items-center truncate", classNames),
+var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React6.createElement("div", {
+  role: "none",
+  className: mx5("flex grow items-center truncate", classNames),
   ...props
 }, children);
 
@@ -351,31 +784,253 @@ var List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
   ItemTitle: ListItemTitle
 };
 
+// src/components/Listbox/Listbox.tsx
+import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
+import React8, { forwardRef as forwardRef3 } from "react";
+import { Icon as Icon3 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/ui-theme";
+
+// src/components/RowList/RowList.tsx
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React7, { useCallback as useCallback4 } from "react";
+import { List as List2, ListItem as ListItem2 } from "@dxos/react-list";
+import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+var ROW_LIST_NAME = "RowList";
+var ROW_LIST_ROOT_NAME = "RowList.Root";
+var ROW_LIST_VIEWPORT_NAME = "RowList.Viewport";
+var ROW_LIST_CONTENT_NAME = "RowList.Content";
+var ROW_NAME = "List.Row";
+var [createRowListContext, createRowListScope] = createContextScope(ROW_LIST_NAME, []);
+var [RowListProvider, useRowListContext] = createRowListContext(ROW_LIST_NAME);
+var Root2 = ({ selectedId, defaultSelectedId, onSelectChange, children }) => {
+  const [resolved, setResolved] = useControllableState2({
+    prop: selectedId,
+    defaultProp: defaultSelectedId,
+    onChange: (next) => {
+      if (next !== void 0) {
+        onSelectChange?.(next);
+      }
+    }
+  });
+  const setSelected = useCallback4((id) => setResolved(id), [
+    setResolved
+  ]);
+  return /* @__PURE__ */ React7.createElement(RowListProvider, {
+    scope: void 0,
+    selectedId: resolved,
+    setSelected
+  }, children);
+};
+Root2.displayName = ROW_LIST_ROOT_NAME;
+var Viewport = composable2((props, forwardedRef) => {
+  const { thin, padding, centered, children, ...rest } = props;
+  const composed = composableProps2(rest, {
+    classNames: "dx-container"
+  });
+  return /* @__PURE__ */ React7.createElement(ScrollArea2.Root, {
+    orientation: "vertical",
+    thin,
+    padding,
+    centered,
+    ...composed,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React7.createElement(ScrollArea2.Viewport, null, children));
+});
+Viewport.displayName = ROW_LIST_VIEWPORT_NAME;
+var firstEnabledOption = (ul) => {
+  if (!ul) {
+    return null;
+  }
+  return ul.querySelector('[role="option"]:not([aria-disabled="true"])');
+};
+var Content2 = composable2((props, forwardedRef) => {
+  useRowListContext(ROW_LIST_CONTENT_NAME, void 0);
+  const arrowGroup = useArrowNavigationGroup({
+    axis: "vertical",
+    memorizeCurrent: true
+  });
+  const { children, ...rest } = props;
+  const handleFocus = useCallback4((event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    const ul = event.currentTarget;
+    const selected = ul.querySelector('[role="option"][aria-selected="true"]:not([aria-disabled="true"])');
+    const target = selected ?? firstEnabledOption(ul);
+    target?.focus();
+  }, []);
+  const composed = composableProps2(rest, {
+    classNames: "flex flex-col"
+  });
+  return /* @__PURE__ */ React7.createElement(List2, {
+    variant: "unordered",
+    ...composed,
+    ...arrowGroup,
+    role: "listbox",
+    onFocus: handleFocus,
+    ref: forwardedRef
+  }, children);
+});
+Content2.displayName = ROW_LIST_CONTENT_NAME;
+var ROW_BASE = "dx-hover dx-selected px-3 py-2 cursor-pointer outline-none border-b border-separator last:border-b-0";
+var Row = composable2((props, forwardedRef) => {
+  const { id, disabled, onClick, onFocus, children, ...rest } = props;
+  const { selectedId, setSelected } = useRowListContext(ROW_NAME, void 0);
+  const isSelected = selectedId === id;
+  const handleClick = useCallback4((event) => {
+    if (disabled) {
+      return;
+    }
+    setSelected(id);
+    onClick?.(event);
+  }, [
+    disabled,
+    id,
+    setSelected,
+    onClick
+  ]);
+  const handleFocus = useCallback4((event) => {
+    if (!disabled && selectedId !== id) {
+      setSelected(id);
+    }
+    onFocus?.(event);
+  }, [
+    disabled,
+    selectedId,
+    id,
+    setSelected,
+    onFocus
+  ]);
+  const composed = composableProps2(rest, {
+    classNames: [
+      ROW_BASE,
+      disabled && "opacity-50 cursor-not-allowed"
+    ]
+  });
+  return /* @__PURE__ */ React7.createElement(ListItem2, {
+    ...composed,
+    role: "option",
+    tabIndex: 0,
+    "aria-selected": isSelected,
+    "aria-disabled": disabled || void 0,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    ref: forwardedRef
+  }, children);
+});
+Row.displayName = ROW_NAME;
+var useRowListSelection = (id) => {
+  const { selectedId } = useRowListContext("useRowListSelection", void 0);
+  return selectedId === id;
+};
+var RowList = {
+  Root: Root2,
+  Viewport,
+  Content: Content2
+};
+
+// src/components/Listbox/Listbox.tsx
+var commandItem = "flex items-center overflow-hidden";
+var LISTBOX_NAME = "Listbox";
+var LISTBOX_OPTION_NAME = "ListboxOption";
+var LISTBOX_OPTION_LABEL_NAME = "ListboxOptionLabel";
+var LISTBOX_OPTION_INDICATOR_NAME = "ListboxOptionIndicator";
+var [createListboxContext, createListboxScope] = createContextScope2(LISTBOX_NAME, [
+  createRowListScope
+]);
+var [createListboxOptionContext, createListboxOptionScope] = createContextScope2(LISTBOX_OPTION_NAME, [
+  createListboxScope
+]);
+var [ListboxOptionProvider, useListboxOptionContext] = createListboxOptionContext(LISTBOX_OPTION_NAME);
+var ListboxRoot = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  const { __listboxScope: _scope, children, classNames, value, defaultValue, onValueChange, autoFocus: _autoFocus, ...rootProps } = props;
+  return /* @__PURE__ */ React8.createElement(RowList.Root, {
+    selectedId: value,
+    defaultSelectedId: defaultValue,
+    onSelectChange: onValueChange
+  }, /* @__PURE__ */ React8.createElement(RowList.Content, {
+    ...rootProps,
+    classNames: mx6("w-full", classNames),
+    ref: forwardedRef
+  }, children));
+});
+ListboxRoot.displayName = LISTBOX_NAME;
+var ListboxOption = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  const { __listboxScope, children, classNames, value, ...rootProps } = props;
+  return /* @__PURE__ */ React8.createElement(Row, {
+    id: value,
+    ...rootProps,
+    classNames: mx6("dx-focus-ring rounded-xs", commandItem, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React8.createElement(ListboxOptionProviderHost, {
+    value
+  }, children));
+});
+ListboxOption.displayName = LISTBOX_OPTION_NAME;
+var ListboxOptionProviderHost = ({ value, children }) => {
+  const isSelected = useRowListSelection(value);
+  return /* @__PURE__ */ React8.createElement(ListboxOptionProvider, {
+    scope: void 0,
+    value,
+    isSelected
+  }, children);
+};
+var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
+  return /* @__PURE__ */ React8.createElement("span", {
+    ...rootProps,
+    className: mx6("grow truncate", classNames),
+    ref: forwardedRef
+  }, children);
+});
+ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
+var ListboxOptionIndicator = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  const { __listboxOptionScope, classNames, ...rootProps } = props;
+  const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
+  return /* @__PURE__ */ React8.createElement(Icon3, {
+    icon: "ph--check--regular",
+    ...rootProps,
+    classNames: mx6(!isSelected && "invisible", classNames),
+    ref: forwardedRef
+  });
+});
+ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
+var Listbox = {
+  Root: ListboxRoot,
+  Option: ListboxOption,
+  OptionLabel: ListboxOptionLabel,
+  OptionIndicator: ListboxOptionIndicator
+};
+
 // src/components/Tree/Tree.tsx
-import React8, { useMemo as useMemo2 } from "react";
+import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import React12, { useMemo as useMemo3 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
 // src/components/Tree/TreeContext.tsx
-import { createContext as createContext5, useContext } from "react";
+import { createContext as createContext7, useContext } from "react";
 import { raise } from "@dxos/debug";
-var TreeContext = /* @__PURE__ */ createContext5(null);
+var TreeContext = /* @__PURE__ */ createContext7(null);
 var TreeProvider = TreeContext.Provider;
 var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
 
 // src/components/Tree/TreeItem.tsx
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { useAtomValue } from "@effect-atom/atom-react";
 import * as Schema from "effect/Schema";
-import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import React11, { memo as memo3, useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { TreeItem as NaturalTreeItem, Treegrid } from "@dxos/react-ui";
-import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls } from "@dxos/ui-theme";
+import { TreeItem as NaturalTreeItem, Treegrid, TREEGRID_PARENT_OF_SEPARATOR } from "@dxos/react-ui";
+import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx7 } from "@dxos/ui-theme";
 
 // src/components/Tree/helpers.ts
 var DEFAULT_INDENTATION = 8;
@@ -384,19 +1039,19 @@ var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
 });
 
 // src/components/Tree/TreeItemHeading.tsx
-import React5, { forwardRef, memo, useCallback as useCallback2 } from "react";
-import { Button, Icon as Icon2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import React9, { forwardRef as forwardRef4, memo, useCallback as useCallback5 } from "react";
+import { Button as Button2, Icon as Icon4, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
 import { getStyles } from "@dxos/ui-theme";
-var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
   const { t } = useTranslation2();
   const styles = iconHue ? getStyles(iconHue) : void 0;
-  const handleSelect = useCallback2((event) => {
+  const handleSelect = useCallback5((event) => {
     onSelect?.(event.altKey);
   }, [
     onSelect
   ]);
-  const handleButtonKeydown = useCallback2((event) => {
+  const handleButtonKeydown = useCallback5((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
@@ -405,19 +1060,18 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ React5.createElement(TextTooltip, {
+  return /* @__PURE__ */ React9.createElement(TextTooltip, {
     text: toLocalizedString(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React5.createElement(Button, {
+  }, /* @__PURE__ */ React9.createElement(Button2, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
-    density: "fine",
     classNames: [
-      "grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent",
+      "grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent",
       "disabled:cursor-default disabled:opacity-100",
       className
     ],
@@ -427,33 +1081,33 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
-    icon: icon ?? "ph--placeholder--regular",
+  }, icon && /* @__PURE__ */ React9.createElement(Icon4, {
     size: 5,
+    icon: icon ?? "ph--placeholder--regular",
     classNames: [
-      "mlb-1",
-      styles?.icon
+      "my-1",
+      styles?.surfaceText
     ]
-  }), /* @__PURE__ */ React5.createElement("span", {
-    className: "flex-1 is-0 truncate text-start text-sm font-normal",
+  }), /* @__PURE__ */ React9.createElement("span", {
+    className: "flex-1 w-0 truncate text-start font-normal",
     "data-tooltip": true
   }, toLocalizedString(label, t))));
 }));
 
 // src/components/Tree/TreeItemToggle.tsx
-import React6, { forwardRef as forwardRef2, memo as memo2 } from "react";
+import React10, { forwardRef as forwardRef5, memo as memo2 } from "react";
 import { IconButton as IconButton2 } from "@dxos/react-ui";
-var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ open, isBranch, hidden, classNames, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React6.createElement(IconButton2, {
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React10.createElement(IconButton2, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
     variant: "ghost",
     density: "fine",
     classNames: [
-      "bs-full is-6 pli-0",
-      "[&_svg]:transition-[transform] [&_svg]:duration-200",
-      open && "[&_svg]:rotate-90",
+      "h-full w-6 px-0",
+      "[&_svg]:transition-transform [&_svg]:duration-200",
+      open ? "[&_svg]:rotate-90" : "[&_svg]:rotate-0",
       hidden ? "hidden" : !isBranch && "invisible",
       classNames
     ],
@@ -476,26 +1130,26 @@ var TreeDataSchema = Schema.Struct({
   item: Schema.Any
 });
 var isTreeData = (data) => Schema.is(TreeDataSchema)(data);
-var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _draggable, renderColumns: Columns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect }) => {
-  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, useIsOpen, useIsCurrent } = useTree();
-  const items = useItems(item);
-  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = getProps(item, _path);
-  const path = useMemo(() => [
-    ..._path,
-    id
+var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: draggableProp, renderColumns: Columns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
+  const rowRef = useRef3(null);
+  const buttonRef = useRef3(null);
+  const openRef = useRef3(false);
+  const cancelExpandRef = useRef3(null);
+  const [_state, setState] = useState4("idle");
+  const [instruction, setInstruction] = useState4(null);
+  const [menuOpen, setMenuOpen] = useState4(false);
+  const { itemProps: itemPropsAtom, childIds: childIdsAtom, itemOpen: itemOpenAtom, itemCurrent: itemCurrentAtom } = useTree();
+  const path = useMemo2(() => [
+    ...pathProp,
+    item.id
   ], [
-    _path,
-    id
+    pathProp,
+    item.id
   ]);
-  const open = useIsOpen(path, item);
-  const current = useIsCurrent(path, item);
+  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(itemPropsAtom(path));
+  const childIds = useAtomValue(childIdsAtom(item.id));
+  const open = useAtomValue(itemOpenAtom(path));
+  const current = useAtomValue(itemCurrentAtom(path));
   const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode = last ? "last-in-group" : open ? "expanded" : "standard";
@@ -503,122 +1157,132 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     item,
     path
   }) ?? true;
-  const cancelExpand = useCallback3(() => {
+  const data = {
+    id,
+    path,
+    item
+  };
+  const shouldSeedNativeDragData = typeof document !== "undefined" && document.body.hasAttribute("data-platform");
+  const cancelExpand = useCallback6(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
     }
   }, []);
-  useEffect3(() => {
-    if (!_draggable) {
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
+  const nativeDragText = id;
+  useEffect4(() => {
+    if (!draggableProp) {
       return;
     }
-    invariant2(buttonRef.current, void 0, {
-      F: __dxlog_file2,
-      L: 111,
-      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
-            });
-          }
+    invariant2(buttonRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 70, S: void 0, A: ["buttonRef.current", ""] });
+    const makeDraggable = () => draggable2({
+      element: buttonRef.current,
+      getInitialData: () => data,
+      getInitialDataForExternal: () => {
+        if (!shouldSeedNativeDragData) {
+          return {};
         }
-      }),
-      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-      dropTargetForElements2({
-        element: buttonRef.current,
-        getData: ({ input, element }) => {
-          return attachInstruction(data, {
-            input,
-            element,
-            indentPerLevel: DEFAULT_INDENTATION,
-            currentLevel: level,
-            mode,
-            block: isBranch ? [] : [
-              "make-child"
-            ]
-          });
-        },
-        canDrop: ({ source }) => {
-          const _canDrop = canDrop ?? (() => true);
-          return source.element !== buttonRef.current && _canDrop({
-            source: source.data,
-            target: data
+        return {
+          "text/plain": nativeDragText
+        };
+      },
+      onDragStart: () => {
+        setState("dragging");
+        if (open) {
+          openRef.current = true;
+          onOpenChange?.({
+            item,
+            path,
+            open: false
           });
-        },
-        getIsSticky: () => true,
-        onDrag: ({ self, source }) => {
-          const desired = extractInstruction(self.data);
-          const block = desired && blockInstruction?.({
-            instruction: desired,
-            source: source.data,
-            target: data
+        }
+      },
+      onDrop: () => {
+        setState("idle");
+        if (openRef.current) {
+          onOpenChange?.({
+            item,
+            path,
+            open: true
           });
-          const instruction2 = block && desired.type !== "instruction-blocked" ? {
-            type: "instruction-blocked",
-            desired
-          } : desired;
-          if (source.data.id !== id) {
-            if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
-              cancelExpandRef.current = setTimeout(() => {
-                onOpenChange?.({
-                  item,
-                  path,
-                  open: true
-                });
-              }, 500);
-            }
-            if (instruction2?.type !== "make-child") {
-              cancelExpand();
-            }
-            setInstruction(instruction2);
-          } else if (instruction2?.type === "reparent") {
-            setInstruction(instruction2);
-          } else {
-            setInstruction(null);
+        }
+      }
+    });
+    if (!isItemDroppable) {
+      return isItemDraggable ? makeDraggable() : void 0;
+    }
+    const dropTarget = dropTargetForElements2({
+      element: buttonRef.current,
+      getData: ({ input, element }) => {
+        return attachInstruction(data, {
+          input,
+          element,
+          indentPerLevel: DEFAULT_INDENTATION,
+          currentLevel: level,
+          mode,
+          block: isBranch ? [] : [
+            "make-child"
+          ]
+        });
+      },
+      canDrop: ({ source }) => {
+        const _canDrop = canDrop ?? (() => true);
+        return source.element !== buttonRef.current && _canDrop({
+          source: source.data,
+          target: data
+        });
+      },
+      getIsSticky: () => true,
+      onDrag: ({ self, source }) => {
+        const desired = extractInstruction(self.data);
+        const block = desired && blockInstruction?.({
+          instruction: desired,
+          source: source.data,
+          target: data
+        });
+        const instruction2 = block && desired.type !== "instruction-blocked" ? {
+          type: "instruction-blocked",
+          desired
+        } : desired;
+        if (source.data.id !== id) {
+          if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
+            cancelExpandRef.current = setTimeout(() => {
+              onOpenChange?.({
+                item,
+                path,
+                open: true
+              });
+            }, 500);
           }
-        },
-        onDragLeave: () => {
-          cancelExpand();
-          setInstruction(null);
-        },
-        onDrop: () => {
-          cancelExpand();
+          if (instruction2?.type !== "make-child") {
+            cancelExpand();
+          }
+          setInstruction(instruction2);
+        } else if (instruction2?.type === "reparent") {
+          setInstruction(instruction2);
+        } else {
           setInstruction(null);
         }
-      })
-    );
+      },
+      onDragLeave: () => {
+        cancelExpand();
+        setInstruction(null);
+      },
+      onDrop: () => {
+        cancelExpand();
+        setInstruction(null);
+      }
+    });
+    if (!isItemDraggable) {
+      return dropTarget;
+    }
+    return combine2(makeDraggable(), dropTarget);
   }, [
-    _draggable,
+    draggableProp,
+    isItemDraggable,
+    isItemDroppable,
     item,
     id,
     mode,
@@ -627,10 +1291,10 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     blockInstruction,
     canDrop
   ]);
-  useEffect3(() => () => cancelExpand(), [
+  useEffect4(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenToggle = useCallback3(() => onOpenChange?.({
+  const handleOpenToggle = useCallback6(() => onOpenChange?.({
     item,
     path,
     open: !open
@@ -640,7 +1304,7 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     path,
     open
   ]);
-  const handleSelect = useCallback3((option = false) => {
+  const handleSelect = useCallback6((option = false) => {
     if (isBranch && (option || current)) {
       handleOpenToggle();
     } else if (canSelectItem) {
@@ -665,7 +1329,7 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     handleOpenToggle,
     onSelect
   ]);
-  const handleKeyDown = useCallback3((event) => {
+  const handleKeyDown = useCallback6((event) => {
     switch (event.key) {
       case "ArrowRight":
       case "ArrowLeft":
@@ -678,44 +1342,57 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     handleOpenToggle,
     handleSelect
   ]);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Treegrid.Row, {
+  const handleItemHover = useCallback6(() => {
+    onItemHover?.({
+      item
+    });
+  }, [
+    onItemHover,
+    item
+  ]);
+  const handleContextMenu = useCallback6((event) => {
+    event.preventDefault();
+    setMenuOpen(true);
+  }, [
+    setMenuOpen
+  ]);
+  const childProps = {
+    draggable: draggableProp,
+    renderColumns: Columns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onItemHover,
+    onOpenChange,
+    onSelect
+  };
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Treegrid.Row, {
     ref: rowRef,
     key: id,
     id,
     "aria-labelledby": `${id}__label`,
-    parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
-    classNames: [
-      "grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface",
-      hoverableControls,
-      hoverableFocusedKeyboardControls,
-      hoverableFocusedWithinControls,
-      hoverableDescriptionIcons,
-      ghostHover,
-      ghostFocusWithin,
-      className
-    ],
+    parentOf: parentOf?.join(TREEGRID_PARENT_OF_SEPARATOR),
     "data-object-id": id,
     "data-testid": testId,
     // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
     //   without alerting the user (except for in the correct link element). See also:
     //   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description
     "aria-current": current ? "" : void 0,
+    classNames: mx7("grid grid-cols-subgrid col-[tree-row] mt-0.5 is-current:bg-active-surface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostFocusWithin, ghostHover, className),
     onKeyDown: handleKeyDown,
-    onContextMenu: (event) => {
-      event.preventDefault();
-      setMenuOpen(true);
-    }
-  }, /* @__PURE__ */ React7.createElement("div", {
+    onMouseEnter: handleItemHover,
+    onContextMenu: handleContextMenu
+  }, /* @__PURE__ */ React11.createElement("div", {
     role: "none",
     className: "indent relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndentation(level)
-  }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
+  }, /* @__PURE__ */ React11.createElement(Treegrid.Cell, {
     classNames: "flex items-center"
-  }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ React11.createElement(TreeItemToggle, {
     isBranch,
     open,
     onClick: handleOpenToggle
-  }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ React11.createElement(TreeItemHeading, {
     disabled,
     current,
     label,
@@ -724,46 +1401,41 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     iconHue,
     onSelect: handleSelect,
     ref: buttonRef
-  })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ React11.createElement(Columns, {
     item,
     path,
     open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ React7.createElement(NaturalTreeItem.DropIndicator, {
+  }), instruction && /* @__PURE__ */ React11.createElement(NaturalTreeItem.DropIndicator, {
     instruction,
     gap: 2
-  }))), open && items.map((item2, index) => /* @__PURE__ */ React7.createElement(TreeItem, {
-    key: item2.id,
-    item: item2,
+  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React11.createElement(TreeItemById, {
+    key: childId,
+    id: childId,
     path,
-    last: index === items.length - 1,
-    draggable: _draggable,
-    renderColumns: Columns,
-    blockInstruction,
-    canDrop,
-    canSelect,
-    onOpenChange,
-    onSelect
+    last: index === childIds.length - 1,
+    ...childProps
   })));
 };
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
+var RawTreeItemById = ({ id, ...props }) => {
+  const { item: itemAtom } = useTree();
+  const item = useAtomValue(itemAtom(id));
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ React11.createElement(TreeItem, {
+    item,
+    ...props
+  });
+};
+var TreeItemById = /* @__PURE__ */ memo3(RawTreeItemById);
 
 // src/components/Tree/Tree.tsx
-var Tree = ({ root, path, id, useItems, getProps, useIsOpen, useIsCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect }) => {
-  const context = useMemo2(() => ({
-    useItems,
-    getProps,
-    useIsOpen,
-    useIsCurrent
-  }), [
-    useItems,
-    getProps,
-    useIsOpen,
-    useIsCurrent
-  ]);
-  const items = useItems(root);
-  const treePath = useMemo2(() => path ? [
+var Tree = ({ model, rootId, path, id, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
+  const childIds = useAtomValue2(model.childIds(rootId));
+  const treePath = useMemo3(() => path ? [
     ...path,
     id
   ] : [
@@ -772,15 +1444,7 @@ var Tree = ({ root, path, id, useItems, getProps, useIsOpen, useIsCurrent, dragg
     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,
+  const childProps = {
     path: treePath,
     levelOffset,
     draggable: draggable3,
@@ -789,7 +1453,19 @@ var Tree = ({ root, path, id, useItems, getProps, useIsOpen, useIsCurrent, dragg
     canDrop,
     canSelect,
     onOpenChange,
-    onSelect
+    onSelect,
+    onItemHover
+  };
+  return /* @__PURE__ */ React12.createElement(Treegrid2.Root, {
+    gridTemplateColumns,
+    classNames
+  }, /* @__PURE__ */ React12.createElement(TreeProvider, {
+    value: model
+  }, childIds.map((childId, index) => /* @__PURE__ */ React12.createElement(TreeItemById, {
+    key: childId,
+    id: childId,
+    last: index === childIds.length - 1,
+    ...childProps
   }))));
 };
 
@@ -810,13 +1486,27 @@ var Path = {
 };
 export {
   Accordion,
+  Combobox,
+  DEFAULT_INDENTATION,
   List,
+  Listbox,
   Path,
+  Picker,
+  Row,
+  RowList,
   Tree,
   TreeDataSchema,
   TreeItem,
+  TreeItemById,
+  TreeItemToggle,
   TreeProvider,
+  createListboxScope,
+  createRowListScope,
   isTreeData,
+  paddingIndentation,
+  usePickerInputContext,
+  usePickerItemContext,
+  useRowListSelection,
   useTree
 };
 //# sourceMappingURL=index.mjs.map