@dxos/react-ui-list 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

package/dist/lib/browser/index.mjs

@@ -1,3 +1,580 @@
+// src/aspects/useListDisclosure.ts
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+var isMulti = (value) => value instanceof Set;
+var useListDisclosure = (opts) => {
+  const { mode, value, defaultValue, onValueChange } = opts;
+  const idPrefix = useId();
+  const wasControlledRef = useRef(Object.prototype.hasOwnProperty.call(opts, "value"));
+  if (Object.prototype.hasOwnProperty.call(opts, "value")) {
+    wasControlledRef.current = true;
+  }
+  const isControlled = wasControlledRef.current;
+  const [internalValue, setInternalValue] = useState(() => defaultValue);
+  useEffect(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [
+    isControlled,
+    value
+  ]);
+  const resolvedValue = isControlled ? value : internalValue;
+  const isExpanded = useCallback((id) => {
+    if (mode === "multi") {
+      return isMulti(resolvedValue) && resolvedValue.has(id);
+    }
+    return resolvedValue === id;
+  }, [
+    mode,
+    resolvedValue
+  ]);
+  const setExpanded = useCallback((id, expanded) => {
+    const computeNext = () => {
+      if (mode === "multi") {
+        const current = isMulti(resolvedValue) ? resolvedValue : /* @__PURE__ */ new Set();
+        const next2 = new Set(current);
+        if (expanded) {
+          next2.add(id);
+        } else {
+          next2.delete(id);
+        }
+        return next2;
+      }
+      return expanded ? id : void 0;
+    };
+    const next = computeNext();
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }, [
+    mode,
+    resolvedValue,
+    isControlled,
+    onValueChange
+  ]);
+  const bind = useCallback((id) => {
+    const expanded = isExpanded(id);
+    const triggerId = `${idPrefix}-${id}-trigger`;
+    const panelId = `${idPrefix}-${id}-panel`;
+    return {
+      expanded,
+      toggle: () => setExpanded(id, !expanded),
+      triggerId,
+      panelId,
+      triggerProps: {
+        id: triggerId,
+        "aria-expanded": expanded,
+        "aria-controls": panelId,
+        onClick: () => setExpanded(id, !expanded)
+      },
+      panelProps: {
+        id: panelId,
+        role: "region",
+        "aria-labelledby": triggerId
+      }
+    };
+  }, [
+    idPrefix,
+    isExpanded,
+    setExpanded
+  ]);
+  return {
+    bind
+  };
+};
+
+// src/aspects/useListGrid.ts
+import { useMemo } from "react";
+var useListGrid = ({ actionSlots = 0, expandable = false, trailing = false } = {}) => {
+  const gridTemplateColumns = useMemo(() => {
+    const tracks = [
+      "var(--dx-rail-item)",
+      "1fr"
+    ];
+    for (let index = 0; index < actionSlots; index++) {
+      tracks.push("var(--dx-rail-item)");
+    }
+    if (expandable) {
+      tracks.push("var(--dx-rail-item)");
+    }
+    if (trailing) {
+      tracks.push("var(--dx-rail-item)");
+    }
+    return tracks.join(" ");
+  }, [
+    actionSlots,
+    expandable,
+    trailing
+  ]);
+  return {
+    rowProps: {
+      className: "grid items-start gap-1",
+      style: {
+        gridTemplateColumns
+      }
+    }
+  };
+};
+
+// src/aspects/useListNavigation.ts
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+var containerRoleByMode = {
+  list: "list",
+  listbox: "listbox",
+  grid: "grid"
+};
+var itemRoleByMode = {
+  list: "listitem",
+  listbox: "option",
+  grid: "row"
+};
+var defaultAxisByMode = {
+  list: "vertical",
+  listbox: "vertical",
+  grid: "grid"
+};
+var findListboxEntryTarget = (container) => {
+  return container.querySelector('[role="option"][aria-selected="true"]:not([aria-disabled="true"])') ?? container.querySelector('[role="option"]:not([aria-disabled="true"])');
+};
+var useListNavigation = ({ mode, axis, memorizeCurrent = true }) => {
+  const tabsterAttrs = useArrowNavigationGroup({
+    axis: axis ?? defaultAxisByMode[mode],
+    memorizeCurrent
+  });
+  const handleFocus = useCallback2((event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (mode !== "listbox") {
+      return;
+    }
+    const target = findListboxEntryTarget(event.currentTarget);
+    target?.focus();
+  }, [
+    mode
+  ]);
+  const orientation = mode === "grid" ? void 0 : axis === "horizontal" ? "horizontal" : "vertical";
+  const containerProps = useMemo2(() => ({
+    role: containerRoleByMode[mode],
+    ...orientation && {
+      "aria-orientation": orientation
+    },
+    ...tabsterAttrs,
+    onFocus: handleFocus
+  }), [
+    mode,
+    orientation,
+    tabsterAttrs,
+    handleFocus
+  ]);
+  const itemRole = itemRoleByMode[mode];
+  const itemTabIndex = mode === "listbox" ? 0 : -1;
+  const itemProps = useCallback2(({ disabled } = {}) => ({
+    role: itemRole,
+    tabIndex: itemTabIndex,
+    ...disabled && {
+      "aria-disabled": true
+    }
+  }), [
+    itemRole,
+    itemTabIndex
+  ]);
+  return {
+    containerProps,
+    itemProps
+  };
+};
+
+// src/aspects/useListSelection.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var isMulti2 = (value) => value instanceof Set;
+var useListSelection = (opts) => {
+  const { mode, value, defaultValue, onValueChange, followsFocus } = opts;
+  const wasControlledRef = useRef2(Object.prototype.hasOwnProperty.call(opts, "value"));
+  if (Object.prototype.hasOwnProperty.call(opts, "value")) {
+    wasControlledRef.current = true;
+  }
+  const isControlled = wasControlledRef.current;
+  const [internalValue, setInternalValue] = useState2(() => defaultValue);
+  useEffect2(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [
+    isControlled,
+    value
+  ]);
+  const resolvedValue = isControlled ? value : internalValue;
+  const setResolvedValue = useCallback3((next) => {
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }, [
+    isControlled,
+    onValueChange,
+    mode
+  ]);
+  const isSelected = useCallback3((id) => {
+    if (mode === "multi") {
+      return isMulti2(resolvedValue) && resolvedValue.has(id);
+    }
+    return resolvedValue === id;
+  }, [
+    mode,
+    resolvedValue
+  ]);
+  const setSelected = useCallback3((id, selected) => {
+    if (mode === "multi") {
+      const current = isMulti2(resolvedValue) ? resolvedValue : /* @__PURE__ */ new Set();
+      const next = new Set(current);
+      if (selected) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
+      setResolvedValue(next);
+    } else {
+      setResolvedValue(selected ? id : void 0);
+    }
+  }, [
+    mode,
+    resolvedValue,
+    setResolvedValue
+  ]);
+  const followFocusDefault = mode === "single";
+  const trackFocus = followsFocus ?? followFocusDefault;
+  const bind = useCallback3((id, { disabled } = {}) => {
+    const selected = isSelected(id);
+    return {
+      selected,
+      toggle: () => {
+        if (!disabled) {
+          setSelected(id, mode === "multi" ? !selected : true);
+        }
+      },
+      rowProps: {
+        "aria-selected": selected,
+        onClick: () => {
+          if (disabled) {
+            return;
+          }
+          setSelected(id, mode === "multi" ? !selected : true);
+        },
+        ...trackFocus && {
+          onFocus: (event) => {
+            if (disabled || selected) {
+              return;
+            }
+            const container = event.currentTarget?.closest?.('[role="listbox"],[role="list"],[role="grid"]');
+            if (container && !container.contains(event.relatedTarget)) {
+              return;
+            }
+            setSelected(id, true);
+          }
+        }
+      }
+    };
+  }, [
+    isSelected,
+    mode,
+    setSelected,
+    trackFocus
+  ]);
+  return {
+    bind
+  };
+};
+
+// src/aspects/useReorder.ts
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { attachClosestEdge, 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 { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+var REORDER_LIST_KEY = "__dxosReorderListId";
+var reorderListIdCounter = 0;
+var allocateReorderListId = () => `reorder-${++reorderListIdCounter}`;
+var IDLE = {
+  type: "idle"
+};
+var useReorderList = ({ items, getId, onMove, axis = "vertical", readonly = false, getInitialData, canDrop, getDragPreview }) => {
+  const listIdRef = useRef3(null);
+  if (!listIdRef.current) {
+    listIdRef.current = allocateReorderListId();
+  }
+  const listId = listIdRef.current;
+  const itemsRef = useRef3(items);
+  itemsRef.current = items;
+  const getIdRef = useRef3(getId);
+  getIdRef.current = getId;
+  const onMoveRef = useRef3(onMove);
+  onMoveRef.current = onMove;
+  const canDropRef = useRef3(canDrop);
+  canDropRef.current = canDrop;
+  const getInitialDataRef = useRef3(getInitialData);
+  getInitialDataRef.current = getInitialData;
+  const getDragPreviewRef = useRef3(getDragPreview);
+  getDragPreviewRef.current = getDragPreview;
+  const readonlyRef = useRef3(readonly);
+  readonlyRef.current = readonly;
+  const [active, setActive] = useState3(null);
+  const findIndex = useCallback4((id) => {
+    return itemsRef.current.findIndex((item) => getIdRef.current(item) === id);
+  }, []);
+  const findIndexFromPayload = useCallback4((data) => {
+    if (!data || data[REORDER_LIST_KEY] !== listId) {
+      return -1;
+    }
+    const id = data.id;
+    return id ? findIndex(id) : -1;
+  }, [
+    listId,
+    findIndex
+  ]);
+  useEffect3(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => {
+        if (canDropRef.current) {
+          return canDropRef.current({
+            source
+          });
+        }
+        return source.data[REORDER_LIST_KEY] === listId;
+      },
+      onDrop: ({ location, source }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+        const sourceIdx = findIndexFromPayload(source.data);
+        const targetIdx = findIndexFromPayload(target.data);
+        if (sourceIdx < 0 || targetIdx < 0) {
+          return;
+        }
+        const destinationIndex = getReorderDestinationIndex({
+          closestEdgeOfTarget: extractClosestEdge(target.data),
+          startIndex: sourceIdx,
+          indexOfTarget: targetIdx,
+          axis
+        });
+        onMoveRef.current(sourceIdx, destinationIndex);
+      }
+    });
+  }, [
+    listId,
+    axis,
+    findIndexFromPayload
+  ]);
+  const controller = useMemo3(() => ({
+    listId,
+    getItem: (id) => {
+      const index = findIndex(id);
+      if (index < 0) {
+        return null;
+      }
+      return {
+        item: itemsRef.current[index],
+        index
+      };
+    },
+    bindItem: (id, refs, onItemState) => {
+      const lookup = () => {
+        const index2 = findIndex(id);
+        return {
+          item: itemsRef.current[index2],
+          index: index2
+        };
+      };
+      const { item, index } = lookup();
+      if (!item && index < 0) {
+        return () => {
+        };
+      }
+      const allowedEdges = axis === "vertical" ? [
+        "top",
+        "bottom"
+      ] : [
+        "left",
+        "right"
+      ];
+      return combine(draggable({
+        element: refs.row,
+        dragHandle: refs.handle,
+        canDrag: () => !readonlyRef.current,
+        getInitialData: () => {
+          const current = lookup();
+          return {
+            [REORDER_LIST_KEY]: listId,
+            id,
+            ...getInitialDataRef.current?.(current.item, current.index) ?? {}
+          };
+        },
+        onGenerateDragPreview: getDragPreviewRef.current ? ({ nativeSetDragImage, source }) => {
+          const rect = source.element.getBoundingClientRect();
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: ({ container }) => ({
+              x: 20,
+              y: container.getBoundingClientRect().height / 2
+            }),
+            render: ({ container }) => {
+              container.style.width = `${rect.width}px`;
+              onItemState({
+                type: "preview",
+                container
+              });
+              const current = lookup();
+              setActive({
+                id,
+                item: current.item,
+                container
+              });
+              return () => {
+                onItemState(IDLE);
+                setActive(null);
+              };
+            }
+          });
+        } : void 0,
+        onDragStart: () => {
+          onItemState({
+            type: "dragging"
+          });
+          const current = lookup();
+          setActive({
+            id,
+            item: current.item,
+            container: refs.row
+          });
+        },
+        onDrop: () => {
+          onItemState(IDLE);
+          setActive(null);
+        }
+      }), dropTargetForElements({
+        element: refs.row,
+        canDrop: ({ source }) => {
+          if (source.element === refs.row) {
+            return false;
+          }
+          if (canDropRef.current) {
+            return canDropRef.current({
+              source
+            });
+          }
+          return source.data[REORDER_LIST_KEY] === listId;
+        },
+        getData: ({ input }) => attachClosestEdge({
+          [REORDER_LIST_KEY]: listId,
+          id
+        }, {
+          element: refs.row,
+          input,
+          allowedEdges
+        }),
+        getIsSticky: () => true,
+        onDragEnter: ({ self }) => {
+          onItemState({
+            type: "dragging-over",
+            closestEdge: extractClosestEdge(self.data)
+          });
+        },
+        onDrag: ({ self }) => {
+          onItemState({
+            type: "dragging-over",
+            closestEdge: extractClosestEdge(self.data)
+          });
+        },
+        onDragLeave: () => onItemState(IDLE),
+        onDrop: () => onItemState(IDLE)
+      }));
+    }
+  }), [
+    listId,
+    axis,
+    findIndex
+  ]);
+  return {
+    controller,
+    active,
+    listId
+  };
+};
+var useReorderItem = (controller, id) => {
+  const [state, setState] = useState3(IDLE);
+  const rowElement = useRef3(null);
+  const handleElement = useRef3(null);
+  const cleanupRef = useRef3(null);
+  const tryRegister = useCallback4(() => {
+    if (!rowElement.current || !handleElement.current) {
+      return;
+    }
+    cleanupRef.current?.();
+    cleanupRef.current = controller.bindItem(id, {
+      row: rowElement.current,
+      handle: handleElement.current
+    }, setState);
+  }, [
+    controller,
+    id
+  ]);
+  const teardown = useCallback4(() => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    setState(IDLE);
+  }, []);
+  useEffect3(() => {
+    tryRegister();
+    return teardown;
+  }, [
+    tryRegister,
+    teardown
+  ]);
+  const rowRef = useCallback4((node) => {
+    rowElement.current = node;
+    if (node) {
+      tryRegister();
+    } else {
+      teardown();
+    }
+  }, [
+    tryRegister,
+    teardown
+  ]);
+  const handleRef = useCallback4((node) => {
+    handleElement.current = node;
+    if (node && rowElement.current) {
+      tryRegister();
+    } else if (!node) {
+      teardown();
+    }
+  }, [
+    tryRegister,
+    teardown
+  ]);
+  return {
+    rowRef,
+    handleRef,
+    state,
+    isDragging: state.type === "dragging",
+    closestEdge: state.type === "dragging-over" ? state.closestEdge : null
+  };
+};
+var useReorderAutoScroll = () => {
+  const cleanupRef = useRef3(null);
+  return useCallback4((node) => {
+    cleanupRef.current?.();
+    cleanupRef.current = node ? autoScrollForElements({
+      element: node
+    }) : null;
+  }, []);
+};
+
 // src/components/Accordion/AccordionItem.tsx
 import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
 import { createContext as createContext2 } from "@radix-ui/react-context";
@@ -39,16 +616,21 @@ var AccordionItem = ({ children, classNames, item }) => {
     className: mx2("overflow-hidden", classNames)
   }, children));
 };
-var AccordionItemHeader = ({ classNames, children, ...props }) => {
+var AccordionItemHeader = ({ classNames, children, icon, ...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 w-full text-start"
-  }, children, /* @__PURE__ */ React2.createElement(Icon, {
+    className: "group flex items-center justify-between gap-2 p-2 dx-focus-ring-inset w-full text-start"
+  }, icon && /* @__PURE__ */ React2.createElement(Icon, {
+    icon,
+    size: 4
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "min-w-0 flex-1 truncate"
+  }, children), /* @__PURE__ */ React2.createElement(Icon, {
     icon: "ph--caret-right--regular",
     size: 4,
-    classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
+    classNames: "shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90"
   })));
 };
 var AccordionItemBody = ({ children, classNames }) => {
@@ -70,14 +652,14 @@ var Accordion = {
 // 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 React4, { forwardRef as forwardRef2, useCallback as useCallback6 } from "react";
+import { Button, Icon as Icon2, Popover, ScrollArea, useId as useId2 } from "@dxos/react-ui";
 import { composable, composableProps } from "@dxos/react-ui";
 import { 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 React3, { forwardRef, useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 import { Input, useThemeContext } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/ui-theme";
 
@@ -88,10 +670,10 @@ var [PickerInputContextProvider, usePickerInputContext] = createContext3("Picker
 
 // 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 [selectedValue, setSelectedValue] = useState4(void 0);
+  const itemsRef = useRef4(/* @__PURE__ */ new Map());
+  const [itemVersion, setItemVersion] = useState4(0);
+  useEffect4(() => {
     const current = selectedValue !== void 0 ? itemsRef.current.get(selectedValue) : void 0;
     const isValid = current !== void 0 && !current.disabled;
     if (!isValid && itemsRef.current.size > 0) {
@@ -119,7 +701,7 @@ var PickerRoot = ({ children }) => {
     itemVersion,
     selectedValue
   ]);
-  const registerItem = useCallback((value, element, onSelect, disabled) => {
+  const registerItem = useCallback5((value, element, onSelect, disabled) => {
     if (element) {
       itemsRef.current.set(value, {
         element,
@@ -129,17 +711,17 @@ var PickerRoot = ({ children }) => {
       setItemVersion((v) => v + 1);
     }
   }, []);
-  const unregisterItem = useCallback((value) => {
+  const unregisterItem = useCallback5((value) => {
     itemsRef.current.delete(value);
     setItemVersion((v) => v + 1);
   }, []);
-  const getItemValues = useCallback(() => {
+  const getItemValues = useCallback5(() => {
     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(() => {
+  const triggerSelect = useCallback5(() => {
     if (selectedValue !== void 0) {
       const item = itemsRef.current.get(selectedValue);
       item?.onSelect?.();
@@ -147,7 +729,7 @@ var PickerRoot = ({ children }) => {
   }, [
     selectedValue
   ]);
-  const itemContextValue = useMemo(() => ({
+  const itemContextValue = useMemo4(() => ({
     selectedValue,
     onSelectedValueChange: setSelectedValue,
     registerItem,
@@ -157,7 +739,7 @@ var PickerRoot = ({ children }) => {
     registerItem,
     unregisterItem
   ]);
-  const inputContextValue = useMemo(() => ({
+  const inputContextValue = useMemo4(() => ({
     selectedValue,
     onSelectedValueChange: setSelectedValue,
     getItemValues,
@@ -173,14 +755,14 @@ 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) => {
+  const handleChange = useCallback5((event) => {
     onValueChange?.(event.target.value);
     onChange?.(event);
   }, [
     onValueChange,
     onChange
   ]);
-  const handleKeyDown = useCallback((event) => {
+  const handleKeyDown = useCallback5((event) => {
     onKeyDown?.(event);
     if (event.defaultPrevented) {
       return;
@@ -267,9 +849,9 @@ var PickerInput = /* @__PURE__ */ forwardRef(({ value, onValueChange, onChange,
 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 internalRef = useRef4(null);
   const isSelected = selectedValue === value && !disabled;
-  useEffect(() => {
+  useEffect4(() => {
     const element = internalRef.current;
     if (element) {
       registerItem(value, element, onSelect, disabled);
@@ -282,7 +864,7 @@ var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disa
     registerItem,
     unregisterItem
   ]);
-  useEffect(() => {
+  useEffect4(() => {
     if (isSelected && internalRef.current) {
       internalRef.current.scrollIntoView({
         block: "nearest",
@@ -292,7 +874,7 @@ var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disa
   }, [
     isSelected
   ]);
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback5(() => {
     if (disabled) {
       return;
     }
@@ -304,7 +886,7 @@ var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disa
     onSelectedValueChange,
     onSelect
   ]);
-  const handleMouseDown = useCallback((event) => {
+  const handleMouseDown = useCallback5((event) => {
     event.preventDefault();
   }, []);
   const Comp = asChild ? Slot : "div";
@@ -345,7 +927,7 @@ 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 modalId = useId2(COMBOBOX_NAME, modalIdProp);
   const [open = false, onOpenChange] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -384,7 +966,7 @@ var ComboboxContent = composable(({ children, ...props }, forwardedRef) => {
 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) => {
+  const handleClick = useCallback6((event) => {
     onClick?.(event);
     onOpenChange?.(true);
   }, [
@@ -439,7 +1021,7 @@ var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
 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(() => {
+  const handleSelect = useCallback6(() => {
     onSelect?.();
     if (value !== void 0) {
       onValueChange?.(value);
@@ -504,333 +1086,43 @@ var Combobox = {
   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 { 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 mx5, osTranslations } from "@dxos/ui-theme";
-
-// src/components/List/ListRoot.tsx
-import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { createContext as 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] = createContext5(LIST_NAME);
-var defaultGetId2 = (item) => item?.id;
-var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
-  const isEqual = useCallback3((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] = useState2(idle);
-  useEffect2(() => {
-    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__ */ React5.createElement(ListProvider, {
-    state,
-    setState,
-    isItem,
-    ...props
-  }, children?.({
-    state,
-    items: items ?? []
-  }));
-};
-
-// src/components/List/ListItem.tsx
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
-var idle = {
-  type: "idle"
-};
-var stateStyles = {
-  "is-dragging": "opacity-50"
-};
-var defaultContext = {};
-var LIST_ITEM_NAME = "ListItem";
-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 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
-      //
-      draggable({
-        element,
-        dragHandle: dragHandleRef.current,
-        canDrag: () => !readonly,
-        getInitialData: () => item,
-        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
-          const rect = source.element.getBoundingClientRect();
-          setCustomNativeDragPreview({
-            nativeSetDragImage,
-            getOffset: ({ container }) => {
-              const { height } = container.getBoundingClientRect();
-              return {
-                x: 20,
-                y: height / 2
-              };
-            },
-            render: ({ container }) => {
-              container.style.width = rect.width + "px";
-              setState({
-                type: "preview",
-                container
-              });
-              setRootState({
-                type: "preview",
-                container,
-                item
-              });
-              return () => {
-              };
-            }
-          });
-        } : void 0,
-        onDragStart: () => {
-          setState({
-            type: "is-dragging"
-          });
-          setRootState({
-            type: "is-dragging",
-            item
-          });
-        },
-        onDrop: () => {
-          setState(idle);
-          setRootState(idle);
-        }
-      }),
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
-      //
-      dropTargetForElements({
-        element,
-        canDrop: ({ source }) => {
-          return (source.element !== element && isItem?.(source.data)) ?? false;
-        },
-        getData: ({ input }) => {
-          return attachClosestEdge(item, {
-            element,
-            input,
-            allowedEdges: [
-              "top",
-              "bottom"
-            ]
-          });
-        },
-        getIsSticky: () => true,
-        onDragEnter: ({ self }) => {
-          const closestEdge = extractClosestEdge2(self.data);
-          setState({
-            type: "is-dragging-over",
-            closestEdge
-          });
-        },
-        onDragLeave: () => {
-          setState(idle);
-        },
-        onDrag: ({ self }) => {
-          const closestEdge = extractClosestEdge2(self.data);
-          setState((current) => {
-            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-              return current;
-            }
-            return {
-              type: "is-dragging-over",
-              closestEdge
-            };
-          });
-        },
-        onDrop: () => {
-          setState(idle);
-        }
-      })
-    );
-  }, [
-    item
-  ]);
-  return /* @__PURE__ */ React6.createElement(ListItemProvider, {
-    item,
-    dragHandleRef
-  }, /* @__PURE__ */ React6.createElement(Comp, {
-    ...props,
-    role: "listitem",
-    "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 ListItemIconButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
-  const { state } = useListContext("ITEM_BUTTON");
-  const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ React6.createElement(IconButton, {
-    ...props,
-    disabled: isDisabled,
-    iconOnly,
-    variant,
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ]
-  });
-};
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
-  const { state } = useListContext("DELETE_BUTTON");
-  const isDisabled = state.type !== "idle" || disabled;
-  const { t } = useTranslation(osTranslations);
-  return /* @__PURE__ */ React6.createElement(IconButton, {
-    ...props,
-    variant: "ghost",
-    disabled: isDisabled,
-    icon,
-    iconOnly: true,
-    label: label ?? t("delete.label"),
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ]
-  });
-};
-var ListItemDragHandle = ({ disabled }) => {
-  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  const { t } = useTranslation(osTranslations);
-  return /* @__PURE__ */ React6.createElement(IconButton, {
-    variant: "ghost",
-    disabled,
-    icon: "ph--dots-six-vertical--regular",
-    iconOnly: true,
-    label: t("drag-handle.label"),
-    ref: dragHandleRef
-  });
-};
-var ListItemDragPreview = ({ children }) => {
-  const { state } = useListContext("DRAG_PREVIEW");
-  return state?.type === "preview" ? /* @__PURE__ */ createPortal(children({
-    item: state.item
-  }), state.container) : null;
-};
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React6.createElement("div", {
-  className: mx5("flex w-full gap-2", classNames)
-}, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React6.createElement("div", {
-  className: mx5("flex grow items-center truncate", classNames),
-  ...props
-}, children);
-
-// src/components/List/List.tsx
-var List = {
-  Root: ListRoot,
-  Item: ListItem,
-  ItemDragPreview: ListItemDragPreview,
-  ItemWrapper: ListItemWrapper,
-  ItemDragHandle: ListItemDragHandle,
-  ItemIconButton: ListItemIconButton,
-  ItemDeleteButton: ListItemDeleteButton,
-  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/react-ui";
-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) => {
+import { createContext as createContext5 } from "@radix-ui/react-context";
+import React5, { forwardRef as forwardRef3, useCallback as useCallback7, useMemo as useMemo5 } from "react";
+import { List, ListItem } from "@dxos/react-list";
+import { Icon as Icon3, ScrollArea as ScrollArea2, composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/ui-theme";
+var LISTBOX_NAME = "Listbox";
+var LISTBOX_ROOT_NAME = "Listbox.Root";
+var LISTBOX_VIEWPORT_NAME = "Listbox.Viewport";
+var LISTBOX_CONTENT_NAME = "Listbox.Content";
+var LISTBOX_ITEM_NAME = "Listbox.Item";
+var LISTBOX_ITEM_LABEL_NAME = "Listbox.ItemLabel";
+var LISTBOX_INDICATOR_NAME = "Listbox.Indicator";
+var [ListboxProvider, useListboxContext] = createContext5(LISTBOX_NAME);
+var [ListboxItemProvider, useListboxItemContext] = createContext5(LISTBOX_ITEM_NAME);
+var Root2 = ({ value, defaultValue, onValueChange, autoFocus: _autoFocus, children }) => {
+  const selection = useListSelection({
+    mode: "single",
+    value,
+    defaultValue,
+    onValueChange: (next) => {
       if (next !== void 0) {
-        onSelectChange?.(next);
+        onValueChange?.(next);
       }
     }
   });
-  const setSelected = useCallback4((id) => setResolved(id), [
-    setResolved
+  const context = useMemo5(() => ({
+    selection
+  }), [
+    selection
   ]);
-  return /* @__PURE__ */ React7.createElement(RowListProvider, {
-    scope: void 0,
-    selectedId: resolved,
-    setSelected
-  }, children);
+  return /* @__PURE__ */ React5.createElement(ListboxProvider, context, children);
 };
-Root2.displayName = ROW_LIST_ROOT_NAME;
+Root2.displayName = LISTBOX_ROOT_NAME;
 var Viewport = composable2((props, forwardedRef) => {
   const { thin, padding, centered, children, ...rest } = props;
-  return /* @__PURE__ */ React7.createElement(ScrollArea2.Root, {
+  return /* @__PURE__ */ React5.createElement(ScrollArea2.Root, {
     ...composableProps2(rest, {
       classNames: "dx-container"
     }),
@@ -839,181 +1131,348 @@ var Viewport = composable2((props, forwardedRef) => {
     centered,
     orientation: "vertical",
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(ScrollArea2.Viewport, null, children));
+  }, /* @__PURE__ */ React5.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"])');
-};
+Viewport.displayName = LISTBOX_VIEWPORT_NAME;
 var Content2 = composable2((props, forwardedRef) => {
-  useRowListContext(ROW_LIST_CONTENT_NAME, void 0);
-  const arrowGroup = useArrowNavigationGroup({
-    axis: "vertical",
-    memorizeCurrent: true
+  useListboxContext(LISTBOX_CONTENT_NAME);
+  const navigation = useListNavigation({
+    mode: "listbox"
   });
   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, {
+  return /* @__PURE__ */ React5.createElement(List, {
     variant: "unordered",
     ...composed,
-    ...arrowGroup,
-    role: "listbox",
-    onFocus: handleFocus,
+    ...navigation.containerProps,
     ref: forwardedRef
   }, children);
 });
-Content2.displayName = ROW_LIST_CONTENT_NAME;
-var ROW_BASE = "dx-hover dx-selected px-3 py-2 cursor-pointer outline-none";
-var Row = composable2((props, forwardedRef) => {
+Content2.displayName = LISTBOX_CONTENT_NAME;
+var ITEM_BASE = "flex items-center dx-hover dx-selected px-3 py-2 cursor-pointer outline-none";
+var Item2 = 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;
+  const { selection } = useListboxContext(LISTBOX_ITEM_NAME);
+  const binding = selection.bind(id, {
+    disabled
+  });
+  const handleClick = useCallback7((event) => {
+    binding.rowProps.onClick(event);
+    if (!disabled) {
+      onClick?.(event);
     }
-    setSelected(id);
-    onClick?.(event);
   }, [
+    binding,
     disabled,
-    id,
-    setSelected,
     onClick
   ]);
-  const handleFocus = useCallback4((event) => {
-    if (!disabled && selectedId !== id) {
-      setSelected(id);
-    }
+  const handleFocus = useCallback7((event) => {
+    binding.rowProps.onFocus?.(event);
     onFocus?.(event);
   }, [
-    disabled,
-    selectedId,
-    id,
-    setSelected,
+    binding,
     onFocus
   ]);
   const composed = composableProps2(rest, {
     classNames: [
-      ROW_BASE,
+      ITEM_BASE,
       disabled && "opacity-50 cursor-not-allowed"
     ]
   });
-  return /* @__PURE__ */ React7.createElement(ListItem2, {
+  return /* @__PURE__ */ React5.createElement(ListItemProviderHost, {
+    id,
+    selected: binding.selected
+  }, /* @__PURE__ */ React5.createElement(ListItem, {
     ...composed,
     role: "option",
     tabIndex: 0,
-    "aria-selected": isSelected,
+    "aria-selected": binding.selected,
     "aria-disabled": disabled || void 0,
     onClick: handleClick,
     onFocus: handleFocus,
     ref: forwardedRef
-  }, children);
+  }, children));
 });
-Row.displayName = ROW_NAME;
-var useRowListSelection = (id) => {
-  const { selectedId } = useRowListContext("useRowListSelection", void 0);
-  return selectedId === id;
+Item2.displayName = LISTBOX_ITEM_NAME;
+var ListItemProviderHost = ({ id, selected, children }) => /* @__PURE__ */ React5.createElement(ListboxItemProvider, {
+  id,
+  selected
+}, children);
+var ItemLabel = /* @__PURE__ */ forwardRef3(({ classNames, children, ...rest }, forwardedRef) => /* @__PURE__ */ React5.createElement("span", {
+  ...rest,
+  className: mx5("grow truncate", classNames),
+  ref: forwardedRef
+}, children));
+ItemLabel.displayName = LISTBOX_ITEM_LABEL_NAME;
+var Indicator = /* @__PURE__ */ forwardRef3(({ classNames, ...rootProps }, forwardedRef) => {
+  const { selected } = useListboxItemContext(LISTBOX_INDICATOR_NAME);
+  return /* @__PURE__ */ React5.createElement(Icon3, {
+    icon: "ph--check--regular",
+    ...rootProps,
+    classNames: mx5(!selected && "invisible", classNames),
+    ref: forwardedRef
+  });
+});
+Indicator.displayName = LISTBOX_INDICATOR_NAME;
+var useListboxSelection = (id) => {
+  const { selection } = useListboxContext("useListboxSelection");
+  return selection.bind(id).selected;
 };
-var RowList = {
+var Listbox = {
   Root: Root2,
   Viewport,
-  Content: Content2
+  Content: Content2,
+  Item: Item2,
+  ItemLabel,
+  Indicator
 };
 
-// src/components/Listbox/Listbox.tsx
-var commandItem = "flex items-center overflow-hidden";
-var LISTBOX_NAME = "Listbox";
-var LISTBOX_OPTION_NAME = "ListboxOption";
-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.Root";
-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),
+// src/components/OrderedList/OrderedListItem.tsx
+import { createContext as createContext7 } from "@radix-ui/react-context";
+import React7, { useCallback as useCallback8 } from "react";
+import { IconBlock, IconButton, ListItem as NaturalListItem, ToggleIconButton, useTranslation } from "@dxos/react-ui";
+import { mx as mx7, osTranslations } from "@dxos/ui-theme";
+
+// src/components/OrderedList/OrderedListRoot.tsx
+import { createContext as createContext6 } from "@radix-ui/react-context";
+import React6, { useMemo as useMemo6 } from "react";
+import { ScrollArea as ScrollArea3, composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/ui-theme";
+var ORDERED_LIST_NAME = "OrderedList";
+var [OrderedListProvider, useOrderedListContext] = createContext6(ORDERED_LIST_NAME);
+var defaultGetId2 = (item) => item?.id;
+var noopMove = () => {
+};
+var OrderedListRoot = ({ items, getId = defaultGetId2, onMove = noopMove, readonly, expandedId, defaultExpandedId, onExpandedChange, children }) => {
+  const { controller, active } = useReorderList({
+    items,
+    getId,
+    onMove,
+    readonly
+  });
+  const disclosure = useListDisclosure({
+    mode: "single",
+    value: expandedId,
+    defaultValue: defaultExpandedId,
+    onValueChange: (next) => onExpandedChange?.(next)
+  });
+  const navigation = useListNavigation({
+    mode: "list"
+  });
+  const context = useMemo6(() => ({
+    reorder: controller,
+    disclosure,
+    navigation,
+    readonly,
+    active,
+    getId
+  }), [
+    controller,
+    disclosure,
+    navigation,
+    readonly,
+    active,
+    getId
+  ]);
+  return /* @__PURE__ */ React6.createElement(OrderedListProvider, context, children({
+    items
+  }));
+};
+var OrderedListContent = ({ classNames, children }) => {
+  const { navigation } = useOrderedListContext("OrderedList.Content");
+  return /* @__PURE__ */ React6.createElement("div", {
+    ...navigation.containerProps,
+    className: mx6("flex flex-col", classNames)
+  }, children);
+};
+var OrderedListViewport = composable3((props, forwardedRef) => {
+  const { thin, padding, centered, children, ...rest } = props;
+  const autoScrollRef = useReorderAutoScroll();
+  return /* @__PURE__ */ React6.createElement(ScrollArea3.Root, {
+    ...composableProps3(rest, {
+      classNames: "dx-container"
+    }),
+    thin,
+    padding,
+    centered,
+    orientation: "vertical",
     ref: forwardedRef
-  }, /* @__PURE__ */ React8.createElement(ListboxOptionProviderHost, {
-    value
+  }, /* @__PURE__ */ React6.createElement(ScrollArea3.Viewport, {
+    ref: autoScrollRef
   }, children));
 });
-ListboxOption.displayName = "Listbox.Option";
-var ListboxOptionProviderHost = ({ value, children }) => {
-  const isSelected = useRowListSelection(value);
-  return /* @__PURE__ */ React8.createElement(ListboxOptionProvider, {
-    scope: void 0,
-    value,
-    isSelected
-  }, children);
+OrderedListViewport.displayName = "OrderedList.Viewport";
+
+// src/components/OrderedList/OrderedListItem.tsx
+var ORDERED_LIST_ITEM_NAME = "OrderedListItem";
+var [OrderedListItemProvider, useOrderedListItemContext] = createContext7(ORDERED_LIST_ITEM_NAME);
+var OrderedListItem = ({ id, canDrag = true, hover = false, selected, onClick, classNames, style, children }) => {
+  const { reorder, disclosure, navigation } = useOrderedListContext(ORDERED_LIST_ITEM_NAME);
+  const { rowRef, handleRef, closestEdge, state } = useReorderItem(reorder, id);
+  const { expanded, toggle, triggerProps, panelProps } = disclosure.bind(id);
+  return /* @__PURE__ */ React7.createElement(OrderedListItemProvider, {
+    id,
+    expanded,
+    toggle,
+    canDrag,
+    handleRef,
+    triggerProps,
+    panelProps
+  }, /* @__PURE__ */ React7.createElement("div", {
+    ref: rowRef,
+    ...navigation.itemProps(),
+    style,
+    "aria-current": selected || void 0,
+    onClick,
+    className: mx7("relative dx-current", hover && "dx-hover", state.type === "dragging" && "opacity-50", classNames)
+  }, children, closestEdge && /* @__PURE__ */ React7.createElement(NaturalListItem.DropIndicator, {
+    edge: closestEdge
+  })));
 };
-var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement("span", {
-    ...rootProps,
-    className: mx6("grow truncate", classNames),
-    ref: forwardedRef
+var OrderedListDragHandle = () => {
+  const { readonly } = useOrderedListContext("OrderedListDragHandle");
+  const { canDrag, handleRef } = useOrderedListItemContext("OrderedListDragHandle");
+  const { t } = useTranslation(osTranslations);
+  const disabled = readonly || !canDrag;
+  return /* @__PURE__ */ React7.createElement(IconButton, {
+    variant: "ghost",
+    disabled,
+    noTooltip: true,
+    icon: "ph--dots-six-vertical--regular",
+    iconOnly: true,
+    label: t("drag-handle.label"),
+    ref: handleRef
+  });
+};
+var OrderedListTitle = ({ classNames, children, onClick, ...props }) => {
+  const { triggerProps } = useOrderedListItemContext("OrderedListTitle");
+  const handleClick = useCallback8((event) => {
+    onClick?.(event);
+    triggerProps.onClick(event);
+  }, [
+    onClick,
+    triggerProps
+  ]);
+  return /* @__PURE__ */ React7.createElement("div", {
+    ...props,
+    // The title row is also the disclosure trigger, so it carries the trigger's
+    // `id` + `aria-expanded` + `aria-controls` for assistive tech.
+    id: triggerProps.id,
+    "aria-expanded": triggerProps["aria-expanded"],
+    "aria-controls": triggerProps["aria-controls"],
+    className: mx7("flex grow items-center truncate cursor-pointer", classNames),
+    onClick: handleClick
   }, children);
-});
-ListboxOptionLabel.displayName = "Listbox.OptionLabel";
-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
+};
+var OrderedListIconButton = ({ autoHide = false, disabled, classNames, ...props }) => /* @__PURE__ */ React7.createElement(IconBlock, null, /* @__PURE__ */ React7.createElement(IconButton, {
+  ...props,
+  variant: "ghost",
+  iconOnly: true,
+  disabled,
+  classNames: [
+    classNames,
+    autoHide && disabled && "hidden"
+  ]
+}));
+var OrderedListDeleteButton = ({ autoHide = false, icon = "ph--x--regular", label, disabled, classNames, ...props }) => {
+  const { t } = useTranslation(osTranslations);
+  return /* @__PURE__ */ React7.createElement(OrderedListIconButton, {
+    ...props,
+    autoHide,
+    disabled,
+    icon,
+    label: label ?? t("delete.label"),
+    classNames
   });
-});
-ListboxOptionIndicator.displayName = "Listbox.OptionIndicator";
-var Listbox = {
-  Root: ListboxRoot,
-  Option: ListboxOption,
-  OptionLabel: ListboxOptionLabel,
-  OptionIndicator: ListboxOptionIndicator
+};
+var OrderedListExpandCaret = ({ onClick, ...props }) => {
+  const { t } = useTranslation(osTranslations);
+  const { expanded, toggle, triggerProps } = useOrderedListItemContext("OrderedListExpandCaret");
+  const handleClick = useCallback8((event) => {
+    toggle();
+    onClick?.(event);
+  }, [
+    toggle,
+    onClick
+  ]);
+  return /* @__PURE__ */ React7.createElement(ToggleIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    active: expanded,
+    icon: "ph--caret-right--regular",
+    label: t("toggle-expand.label"),
+    // Disclosure semantics are carried here for AT users that interact with the caret
+    // rather than the title.
+    "aria-expanded": triggerProps["aria-expanded"],
+    "aria-controls": triggerProps["aria-controls"],
+    onClick: handleClick,
+    ...props
+  });
+};
+var OrderedListDetailItem = ({ id, item, canDrag, title, titleClassNames, actions, trailing, expandable = true, classNames, children }) => {
+  const grid = useListGrid({
+    trailing: !!trailing
+  });
+  return /* @__PURE__ */ React7.createElement(OrderedListItem, {
+    id,
+    item,
+    canDrag,
+    // The grid template is inline so the row's three slots (handle / card / trailing)
+    // land in fixed-width tracks that share a baseline with the title row inside the card.
+    // See useListGrid for the rationale.
+    style: grid.rowProps.style,
+    classNames: mx7(grid.rowProps.className, "pb-1", classNames)
+  }, /* @__PURE__ */ React7.createElement(OrderedListDragHandle, null), /* @__PURE__ */ React7.createElement("div", {
+    className: "flex flex-col ring-1 ring-subdued-separator rounded-sm overflow-hidden"
+  }, /* @__PURE__ */ React7.createElement("div", {
+    className: "flex items-center min-h-[var(--dx-rail-item)]"
+  }, expandable ? /* @__PURE__ */ React7.createElement(OrderedListTitle, {
+    classNames: mx7("px-2", titleClassNames)
+  }, title) : (
+    // When the row is not expandable, render a plain (non-toggling) title so a click
+    // doesn't mutate hidden disclosure state. Mirrors `OrderedListTitle`'s structure
+    // minus the trigger plumbing.
+    /* @__PURE__ */ React7.createElement("div", {
+      className: mx7("flex grow items-center truncate px-2", titleClassNames)
+    }, title)
+  ), actions, expandable && /* @__PURE__ */ React7.createElement(OrderedListExpandCaret, null)), expandable && /* @__PURE__ */ React7.createElement(DetailPanel, null, children)), trailing);
+};
+var DetailPanel = ({ children }) => {
+  const { expanded, panelProps } = useOrderedListItemContext("OrderedListDetailItem.Panel");
+  if (!expanded || !children) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement("div", {
+    ...panelProps,
+    className: "px-2 pb-2"
+  }, children);
+};
+
+// src/components/OrderedList/OrderedList.tsx
+var OrderedList = {
+  Root: OrderedListRoot,
+  Viewport: OrderedListViewport,
+  Content: OrderedListContent,
+  Item: OrderedListItem,
+  DetailItem: OrderedListDetailItem,
+  DragHandle: OrderedListDragHandle,
+  Title: OrderedListTitle,
+  IconButton: OrderedListIconButton,
+  DeleteButton: OrderedListDeleteButton,
+  ExpandCaret: OrderedListExpandCaret
 };
 
 // src/components/Tree/Tree.tsx
 import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React12, { useMemo as useMemo3 } from "react";
+import React11, { useMemo as useMemo8 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
 // src/components/Tree/TreeContext.tsx
-import { createContext as createContext7, useContext } from "react";
+import { createContext as createContext8, useContext } from "react";
 import { raise } from "@dxos/debug";
-var TreeContext = /* @__PURE__ */ createContext7(null);
+var TreeContext = /* @__PURE__ */ createContext8(null);
 var TreeProvider = TreeContext.Provider;
 var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
 
@@ -1023,10 +1482,10 @@ 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 { useAtomValue } from "@effect-atom/atom-react";
 import * as Schema from "effect/Schema";
-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 React10, { memo as memo3, useCallback as useCallback10, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef5, useState as useState5 } from "react";
+import { invariant } from "@dxos/invariant";
 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";
+import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx8 } from "@dxos/ui-theme";
 
 // src/components/Tree/helpers.ts
 var DEFAULT_INDENTATION = 8;
@@ -1035,19 +1494,18 @@ var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
 });
 
 // src/components/Tree/TreeItemHeading.tsx
-import React9, { forwardRef as forwardRef4, memo, useCallback as useCallback5 } from "react";
-import { Button as Button2, Icon as Icon4, Tag, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { TextTooltip } from "@dxos/react-ui-text-tooltip";
+import React8, { forwardRef as forwardRef4, memo, useCallback as useCallback9 } from "react";
+import { Button as Button2, Icon as Icon4, Tag, TextTooltip, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { getStyles } from "@dxos/ui-theme";
 var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label, className, icon, iconHue, disabled, current, count, modifiedCount, onSelect }, forwardedRef) => {
   const { t } = useTranslation2();
   const styles = iconHue ? getStyles(iconHue) : void 0;
-  const handleSelect = useCallback5((event) => {
+  const handleSelect = useCallback9((event) => {
     onSelect?.(event.altKey);
   }, [
     onSelect
   ]);
-  const handleButtonKeydown = useCallback5((event) => {
+  const handleButtonKeydown = useCallback9((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
@@ -1056,14 +1514,14 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ React9.createElement(TextTooltip, {
+  return /* @__PURE__ */ React8.createElement(TextTooltip, {
     text: toLocalizedString(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React9.createElement(Button2, {
+  }, /* @__PURE__ */ React8.createElement(Button2, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
     classNames: [
@@ -1077,30 +1535,30 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ React9.createElement(Icon4, {
+  }, icon && /* @__PURE__ */ React8.createElement(Icon4, {
     size: 5,
     icon: icon ?? "ph--circle-dashed--regular",
     classNames: [
       "my-1",
       styles?.text
     ]
-  }), /* @__PURE__ */ React9.createElement("span", {
+  }), /* @__PURE__ */ React8.createElement("span", {
     className: "min-w-0 truncate text-start font-normal",
     "data-tooltip": true
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React9.createElement(CountBadge, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React8.createElement(CountBadge, {
     count,
     modifiedCount
   })));
 }));
 var CountBadge = ({ count, modifiedCount }) => {
   if (typeof modifiedCount === "number" && modifiedCount > 0) {
-    return /* @__PURE__ */ React9.createElement(Tag, {
+    return /* @__PURE__ */ React8.createElement(Tag, {
       palette: "rose",
       classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
     }, modifiedCount);
   }
   if (typeof count === "number") {
-    return /* @__PURE__ */ React9.createElement(Tag, {
+    return /* @__PURE__ */ React8.createElement(Tag, {
       palette: "neutral",
       classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
     }, count);
@@ -1109,10 +1567,10 @@ var CountBadge = ({ count, modifiedCount }) => {
 };
 
 // src/components/Tree/TreeItemToggle.tsx
-import React10, { forwardRef as forwardRef5, memo as memo2 } from "react";
+import React9, { forwardRef as forwardRef5, memo as memo2 } from "react";
 import { IconButton as IconButton2 } from "@dxos/react-ui";
 var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React10.createElement(IconButton2, {
+  return /* @__PURE__ */ React9.createElement(IconButton2, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
@@ -1136,7 +1594,7 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classN
 }));
 
 // src/components/Tree/TreeItem.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
 var hoverableDescriptionIcons = "[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]";
 var TreeDataSchema = Schema.Struct({
   id: Schema.String,
@@ -1145,15 +1603,15 @@ var TreeDataSchema = Schema.Struct({
 });
 var isTreeData = (data) => Schema.is(TreeDataSchema)(data);
 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 rowRef = useRef5(null);
+  const buttonRef = useRef5(null);
+  const openRef = useRef5(false);
+  const cancelExpandRef = useRef5(null);
+  const [_state, setState] = useState5("idle");
+  const [instruction, setInstruction] = useState5(null);
+  const [menuOpen, setMenuOpen] = useState5(false);
   const { itemProps: itemPropsAtom, childIds: childIdsAtom, itemOpen: itemOpenAtom, itemCurrent: itemCurrentAtom } = useTree();
-  const path = useMemo2(() => [
+  const path = useMemo7(() => [
     ...pathProp,
     item.id
   ], [
@@ -1177,7 +1635,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     item
   };
   const shouldSeedNativeDragData = typeof document !== "undefined" && document.body.hasAttribute("data-platform");
-  const cancelExpand = useCallback6(() => {
+  const cancelExpand = useCallback10(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
@@ -1186,11 +1644,11 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
   const isItemDraggable = draggableProp && itemDraggable !== false;
   const isItemDroppable = itemDroppable !== false;
   const nativeDragText = id;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!draggableProp) {
       return;
     }
-    invariant2(buttonRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 70, S: void 0, A: ["buttonRef.current", ""] });
+    invariant(buttonRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 70, S: void 0, A: ["buttonRef.current", ""] });
     const makeDraggable = () => draggable2({
       element: buttonRef.current,
       getInitialData: () => data,
@@ -1305,10 +1763,10 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     blockInstruction,
     canDrop
   ]);
-  useEffect4(() => () => cancelExpand(), [
+  useEffect5(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenToggle = useCallback6(() => onOpenChange?.({
+  const handleOpenToggle = useCallback10(() => onOpenChange?.({
     item,
     path,
     open: !open
@@ -1318,7 +1776,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     path,
     open
   ]);
-  const handleSelect = useCallback6((option = false) => {
+  const handleSelect = useCallback10((option = false) => {
     if (isBranch && (option || current)) {
       handleOpenToggle();
     } else if (canSelectItem) {
@@ -1343,7 +1801,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     handleOpenToggle,
     onSelect
   ]);
-  const handleKeyDown = useCallback6((event) => {
+  const handleKeyDown = useCallback10((event) => {
     switch (event.key) {
       case "ArrowRight":
       case "ArrowLeft":
@@ -1356,7 +1814,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     handleOpenToggle,
     handleSelect
   ]);
-  const handleItemHover = useCallback6(() => {
+  const handleItemHover = useCallback10(() => {
     onItemHover?.({
       item
     });
@@ -1364,7 +1822,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onItemHover,
     item
   ]);
-  const handleContextMenu = useCallback6((event) => {
+  const handleContextMenu = useCallback10((event) => {
     event.preventDefault();
     setMenuOpen(true);
   }, [
@@ -1380,7 +1838,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onOpenChange,
     onSelect
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Treegrid.Row, {
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Treegrid.Row, {
     ref: rowRef,
     key: id,
     id,
@@ -1392,20 +1850,31 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     //   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-current-surface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostFocusWithin, ghostHover, className),
+    classNames: mx8(
+      "grid grid-cols-subgrid col-[tree-row] mt-0.5 is-current:bg-current-surface",
+      // Highlight the row while a descendant marks an open popover anchor (e.g. inline rename).
+      "has-[[data-popover-anchor]]:bg-current-surface",
+      hoverableControls,
+      hoverableFocusedKeyboardControls,
+      hoverableFocusedWithinControls,
+      hoverableDescriptionIcons,
+      ghostFocusWithin,
+      ghostHover,
+      className
+    ),
     onKeyDown: handleKeyDown,
     onMouseEnter: handleItemHover,
     onContextMenu: handleContextMenu
-  }, /* @__PURE__ */ React11.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: "indent relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndentation(level)
-  }, /* @__PURE__ */ React11.createElement(Treegrid.Cell, {
+  }, /* @__PURE__ */ React10.createElement(Treegrid.Cell, {
     classNames: "flex items-center"
-  }, /* @__PURE__ */ React11.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ React10.createElement(TreeItemToggle, {
     isBranch,
     open,
     onClick: handleOpenToggle
-  }), /* @__PURE__ */ React11.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ React10.createElement(TreeItemHeading, {
     disabled,
     current,
     label,
@@ -1416,16 +1885,16 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     modifiedCount,
     onSelect: handleSelect,
     ref: buttonRef
-  })), Columns && /* @__PURE__ */ React11.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ React10.createElement(Columns, {
     item,
     path,
     open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ React11.createElement(NaturalTreeItem.DropIndicator, {
+  }), instruction && /* @__PURE__ */ React10.createElement(NaturalTreeItem.DropIndicator, {
     instruction,
     gap: 2
-  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React11.createElement(TreeItemById, {
+  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React10.createElement(TreeItemById, {
     key: childId,
     id: childId,
     path,
@@ -1440,7 +1909,7 @@ var RawTreeItemById = ({ id, ...props }) => {
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(TreeItem, {
+  return /* @__PURE__ */ React10.createElement(TreeItem, {
     item,
     ...props
   });
@@ -1450,7 +1919,7 @@ var TreeItemById = /* @__PURE__ */ memo3(RawTreeItemById);
 // src/components/Tree/Tree.tsx
 var Tree = ({ classNames, model, rootId, path, id, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] minmax(0, 1fr) min-content [tree-row-end]", levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
   const childIds = useAtomValue2(model.childIds(rootId));
-  const treePath = useMemo3(() => path ? [
+  const treePath = useMemo8(() => path ? [
     ...path,
     id
   ] : [
@@ -1471,12 +1940,12 @@ var Tree = ({ classNames, model, rootId, path, id, draggable: draggable3 = false
     onSelect,
     onItemHover
   };
-  return /* @__PURE__ */ React12.createElement(Treegrid2.Root, {
+  return /* @__PURE__ */ React11.createElement(Treegrid2.Root, {
     gridTemplateColumns,
     classNames
-  }, /* @__PURE__ */ React12.createElement(TreeProvider, {
+  }, /* @__PURE__ */ React11.createElement(TreeProvider, {
     value: model
-  }, childIds.map((childId, index) => /* @__PURE__ */ React12.createElement(TreeItemById, {
+  }, childIds.map((childId, index) => /* @__PURE__ */ React11.createElement(TreeItemById, {
     key: childId,
     id: childId,
     last: index === childIds.length - 1,
@@ -1503,25 +1972,28 @@ export {
   Accordion,
   Combobox,
   DEFAULT_INDENTATION,
-  List,
   Listbox,
+  OrderedList,
   Path,
   Picker,
-  Row,
-  RowList,
   Tree,
   TreeDataSchema,
   TreeItem,
   TreeItemById,
   TreeItemToggle,
   TreeProvider,
-  createListboxScope,
-  createRowListScope,
   isTreeData,
   paddingIndentation,
+  useListDisclosure,
+  useListGrid,
+  useListNavigation,
+  useListSelection,
+  useListboxSelection,
   usePickerInputContext,
   usePickerItemContext,
-  useRowListSelection,
+  useReorderAutoScroll,
+  useReorderItem,
+  useReorderList,
   useTree
 };
 //# sourceMappingURL=index.mjs.map