@dxos/react-ui-list 0.9.0 → 0.9.1-staging.ee54ba693a

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";
@@ -5,6 +582,82 @@ import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/ui-theme";
 
+// src/components/List.theme.ts
+import { tv } from "@dxos/ui-theme";
+var listStyles = tv({
+  slots: {
+    //
+    // Accordion
+    //
+    accordionItem: "overflow-hidden",
+    // Row trigger: spans the full width and pins the trailing caret to the inline-end edge.
+    accordionTrigger: "group flex items-start justify-between gap-2 p-2 dx-focus-ring-inset w-full text-start",
+    // Leading / trailing icon wrappers: fixed height so they sit on the centerline of the first
+    // content line even when the header spans multiple lines.
+    accordionTriggerIcon: "flex items-center h-6 shrink-0",
+    accordionTriggerContent: "min-w-0 flex-1",
+    // Slide animations are driven by Radix Accordion's data-state attribute.
+    accordionBody: "overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down",
+    accordionBodyContent: "p-2",
+    //
+    // Listbox
+    //
+    listboxViewport: "dx-container",
+    listboxContent: "flex flex-col",
+    // `dx-selected` pairs with `aria-selected="true"` set per-option (see
+    // `ui-theme/src/css/components/state.md`). `outline-none` removes the native focus
+    // ring; Tabster / `dx-focus-ring` handles keyboard focus at the container level.
+    listboxItem: "flex items-center dx-hover dx-selected px-3 py-2 cursor-pointer outline-none",
+    listboxItemLabel: "grow truncate",
+    //
+    // OrderedList
+    //
+    orderedListViewport: "dx-container",
+    orderedListContent: "flex flex-col",
+    // `dx-current` enables `aria-current` row styling (not listbox/option semantics).
+    orderedListItem: "relative dx-current",
+    // Bordered column wrapping title + detail panel in the master-detail layout.
+    orderedListDetailColumn: "flex flex-col ring-1 ring-subdued-separator rounded-sm overflow-hidden",
+    // `min-h` matches the shared rail-item track so handles, title, and caret share a baseline.
+    orderedListDetailTitleRow: "flex items-center min-h-[var(--dx-rail-item)]",
+    orderedListDetailPanel: "px-2 pb-2",
+    orderedListTitle: "flex grow items-center truncate cursor-pointer",
+    //
+    // Picker
+    //
+    // `px-[var(--gutter,…)]` aligns padding with sibling `Column.Center` content, falling back to
+    // 0.75rem when not nested under `Column.Root`.
+    pickerItem: "dx-hover dx-selected px-[var(--gutter,0.75rem)] py-1 cursor-pointer select-none",
+    //
+    // Combobox
+    //
+    // `m-form-chrome mb-0` mirrors the rest of the form-chrome padding convention.
+    comboboxInput: "m-form-chrome mb-0 w-[calc(100%-2*var(--spacing-form-chrome))]",
+    comboboxList: "py-form-chrome",
+    // Trigger value / placeholder text — grows and truncates; subdued when placeholder.
+    comboboxTriggerText: "font-normal text-start flex-1 min-w-0 truncate me-2",
+    // Item row adds flex layout; `dx-hover`/`dx-selected` and padding come from `Picker.Item`.
+    comboboxItem: "flex w-full gap-2 items-center",
+    comboboxItemDescription: "text-sm text-description truncate",
+    //
+    // ItemContent
+    //
+    // Two-column grid: fixed rail-item icon track + flexible content track.
+    itemContentRoot: "grid grid-cols-[var(--dx-rail-item)_minmax(0,1fr)] items-center gap-x-2 is-full min-is-0",
+    itemContentIcon: "col-start-1 row-start-1 place-self-center",
+    itemContentTitle: "col-start-2 row-start-1 min-is-0 truncate",
+    itemContentDescription: "col-start-2 row-start-2 min-is-0 truncate text-sm text-description",
+    //
+    // Empty
+    //
+    empty: "flex flex-col items-center justify-center gap-2 p-4 text-sm text-center text-description"
+  }
+});
+var listTheme = {
+  styles: listStyles
+};
+var listSlots = Object.keys(listTheme.styles());
+
 // src/components/Accordion/AccordionRoot.tsx
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { createContext } from "@radix-ui/react-context";
@@ -29,6 +682,7 @@ var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value,
 
 // src/components/Accordion/AccordionItem.tsx
 var ACCORDION_ITEM_NAME = "AccordionItem";
+var styles = listTheme.styles();
 var [AccordionItemProvider, useDxAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
 var AccordionItem = ({ children, classNames, item }) => {
   const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
@@ -36,26 +690,41 @@ var AccordionItem = ({ children, classNames, item }) => {
     item
   }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Item, {
     value: getId(item),
-    className: mx2("overflow-hidden", classNames)
+    className: styles.accordionItem({
+      class: mx2(classNames)
+    })
   }, children));
 };
-var AccordionItemHeader = ({ classNames, children, ...props }) => {
+var AccordionItemHeader = ({ classNames, children, icon, hover, ...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: styles.accordionTrigger({
+      class: hover && "dx-hover"
+    })
+  }, icon && /* @__PURE__ */ React2.createElement("span", {
+    className: styles.accordionTriggerIcon()
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon,
+    size: 4
+  })), /* @__PURE__ */ React2.createElement("div", {
+    className: styles.accordionTriggerContent()
+  }, children), /* @__PURE__ */ React2.createElement("span", {
+    className: styles.accordionTriggerIcon()
+  }, /* @__PURE__ */ React2.createElement(Icon, {
     icon: "ph--caret-right--regular",
     size: 4,
     classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
-  })));
+  }))));
 };
 var AccordionItemBody = ({ children, classNames }) => {
   return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Content, {
-    className: "overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down"
+    className: styles.accordionBody()
   }, /* @__PURE__ */ React2.createElement("div", {
-    className: mx2("p-2", classNames)
+    className: styles.accordionBodyContent({
+      class: mx2(classNames)
+    })
   }, children));
 };
 
@@ -70,14 +739,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";
 
@@ -87,14 +756,18 @@ var [PickerItemContextProvider, usePickerItemContext] = createContext3("PickerIt
 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(() => {
+var styles2 = listTheme.styles();
+var PickerRoot = ({ children, resetSelectionOnChange = false }) => {
+  const [selectedValue, setSelectedValue] = useState4(void 0);
+  const itemsRef = useRef4(/* @__PURE__ */ new Map());
+  const [itemVersion, setItemVersion] = useState4(0);
+  const prevItemVersionRef = useRef4(itemVersion);
+  useEffect4(() => {
+    const itemsChanged = prevItemVersionRef.current !== itemVersion;
+    prevItemVersionRef.current = itemVersion;
     const current = selectedValue !== void 0 ? itemsRef.current.get(selectedValue) : void 0;
     const isValid = current !== void 0 && !current.disabled;
-    if (!isValid && itemsRef.current.size > 0) {
+    if ((!isValid || resetSelectionOnChange && itemsChanged) && itemsRef.current.size > 0) {
       const entries = Array.from(itemsRef.current.entries()).filter(([, data]) => !data.disabled);
       if (entries.length > 0) {
         entries.sort(([, a], [, b]) => {
@@ -117,9 +790,10 @@ var PickerRoot = ({ children }) => {
     }
   }, [
     itemVersion,
-    selectedValue
+    selectedValue,
+    resetSelectionOnChange
   ]);
-  const registerItem = useCallback((value, element, onSelect, disabled) => {
+  const registerItem = useCallback5((value, element, onSelect, disabled) => {
     if (element) {
       itemsRef.current.set(value, {
         element,
@@ -129,17 +803,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 +821,7 @@ var PickerRoot = ({ children }) => {
   }, [
     selectedValue
   ]);
-  const itemContextValue = useMemo(() => ({
+  const itemContextValue = useMemo4(() => ({
     selectedValue,
     onSelectedValueChange: setSelectedValue,
     registerItem,
@@ -157,7 +831,7 @@ var PickerRoot = ({ children }) => {
     registerItem,
     unregisterItem
   ]);
-  const inputContextValue = useMemo(() => ({
+  const inputContextValue = useMemo4(() => ({
     selectedValue,
     onSelectedValueChange: setSelectedValue,
     getItemValues,
@@ -173,14 +847,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 +941,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 +956,7 @@ var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disa
     registerItem,
     unregisterItem
   ]);
-  useEffect(() => {
+  useEffect4(() => {
     if (isSelected && internalRef.current) {
       internalRef.current.scrollIntoView({
         block: "nearest",
@@ -292,7 +966,7 @@ var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disa
   }, [
     isSelected
   ]);
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback5(() => {
     if (disabled) {
       return;
     }
@@ -304,7 +978,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";
@@ -326,7 +1000,9 @@ var PickerItem = /* @__PURE__ */ forwardRef(({ classNames, value, onSelect, disa
     "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),
+    className: styles2.pickerItem({
+      class: mx3(disabled && "opacity-50 cursor-not-allowed", classNames)
+    }),
     onMouseDown: handleMouseDown,
     onClick: handleClick
   }, children);
@@ -339,13 +1015,14 @@ var Picker = {
 };
 
 // src/components/Combobox/Combobox.tsx
+var styles3 = listTheme.styles();
 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 modalId = useId2(COMBOBOX_NAME, modalIdProp);
   const [open = false, onOpenChange] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -370,7 +1047,7 @@ var ComboboxRoot = ({ children, modal, modalId: modalIdProp, open: openProp, def
     onValueChange
   }, children));
 };
-var ComboboxContent = composable(({ children, ...props }, forwardedRef) => {
+var ComboboxContent = composable(({ children, resetSelectionOnChange, ...props }, forwardedRef) => {
   const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
   return /* @__PURE__ */ React4.createElement(Popover.Content, {
     ...composableProps(props, {
@@ -379,12 +1056,14 @@ var ComboboxContent = composable(({ children, ...props }, forwardedRef) => {
     ref: forwardedRef
   }, /* @__PURE__ */ React4.createElement(Popover.Viewport, {
     classNames: "w-(--radix-popover-trigger-width)"
-  }, /* @__PURE__ */ React4.createElement(Picker.Root, null, children)));
+  }, /* @__PURE__ */ React4.createElement(Picker.Root, {
+    resetSelectionOnChange
+  }, 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) => {
+  const handleClick = useCallback6((event) => {
     onClick?.(event);
     onOpenChange?.(true);
   }, [
@@ -402,7 +1081,9 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef2(({ children, onClick, ...props
     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")
+    className: styles3.comboboxTriggerText({
+      class: !value && "text-subdued"
+    })
   }, value || placeholder), /* @__PURE__ */ React4.createElement(Icon2, {
     icon: "ph--caret-down--bold",
     size: 3
@@ -413,10 +1094,9 @@ 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
-    ],
+    classNames: styles3.comboboxInput({
+      class: classNames
+    }),
     ref: forwardedRef
   });
 });
@@ -424,10 +1104,9 @@ 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
-      ]
+      classNames: styles3.comboboxList({
+        class: classNames
+      })
     }),
     role: "listbox",
     centered: true,
@@ -437,9 +1116,9 @@ var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
   }, /* @__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) => {
+var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, value, label, description, 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);
@@ -459,20 +1138,22 @@ var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, value, l
     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
-    ]
+    classNames: styles3.comboboxItem({
+      // `px-3 py-1`, `cursor-pointer`, `select-none` and the `dx-hover` / `dx-selected`
+      // pairing come from `Picker.Item`'s defaults; the slot only adds row-shape (flex /
+      // icons + label). Disabled overrides are layered on per-instance.
+      class: mx4(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", {
+  }), description ? /* @__PURE__ */ React4.createElement("span", {
+    className: "w-0 grow flex flex-col"
+  }, /* @__PURE__ */ React4.createElement("span", {
+    className: "truncate"
+  }, label), /* @__PURE__ */ React4.createElement("span", {
+    className: styles3.comboboxItemDescription()
+  }, description)) : /* @__PURE__ */ React4.createElement("span", {
     className: "w-0 grow truncate"
   }, label), suffix && /* @__PURE__ */ React4.createElement("span", {
     className: "shrink-0 text-description"
@@ -504,516 +1185,676 @@ 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/DropIndicator/DropIndicator.tsx
+import React5 from "react";
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-(--line-thickness) left-[calc(var(--line-inset)+var(--terminal-radius))] right-(--line-inset) before:left-(--terminal-inset)",
+  vertical: "w-(--line-thickness) top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-(--line-inset) before:top-(--terminal-inset)"
+};
+var edgeStyles = {
+  top: "top-(--line-offset) before:top-(--offset-terminal)",
+  right: "right-(--line-offset) before:right-(--offset-terminal)",
+  bottom: "bottom-(--line-offset) before:bottom-(--offset-terminal)",
+  left: "left-(--line-offset) before:left-(--offset-terminal)"
+};
+var strokeSize = 2;
+var terminalSize = 8;
+var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+var DropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
+  const orientation = edgeToOrientationMap[edge];
+  return /* @__PURE__ */ React5.createElement("div", {
+    style: {
+      "--line-thickness": `${strokeSize}px`,
+      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+      "--line-inset": `${lineInset}px`,
+      "--terminal-size": `${terminalSize}px`,
+      "--terminal-radius": `${terminalSize / 2}px`,
+      "--terminal-inset": `${terminalInset}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
+    },
+    className: `absolute z-10 pointer-events-none bg-accent-bg before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
+  });
+};
 
-// 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";
+// src/components/Empty/Empty.tsx
+import React6 from "react";
+import { Icon as Icon3, composable as composable2, composableProps as composableProps2, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
+var Empty = composable2(({ label, icon, ...props }, forwardedRef) => {
+  const { t } = useTranslation(osTranslations);
+  const message = label ?? t("empty.label", {
+    defaultValue: "No items"
+  });
+  return /* @__PURE__ */ React6.createElement("div", {
+    ...composableProps2(props, {
+      classNames: "flex flex-col items-center justify-center gap-2 p-4 text-sm text-center text-description",
+      role: "status"
+    }),
+    ref: forwardedRef
+  }, icon && /* @__PURE__ */ React6.createElement(Icon3, {
+    icon,
+    size: 6,
+    classNames: "text-subdued"
+  }), /* @__PURE__ */ React6.createElement("span", null, message));
+});
+Empty.displayName = "Empty";
+
+// src/components/Listbox/Listbox.tsx
 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;
+import React8, { forwardRef as forwardRef4, useCallback as useCallback7, useMemo as useMemo5 } from "react";
+import { List, ListItem } from "@dxos/react-list";
+import { Icon as Icon5, ScrollArea as ScrollArea2, composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/ui-theme";
+
+// src/components/Listbox/ListItemContent.tsx
+import React7, { forwardRef as forwardRef3 } from "react";
+import { Icon as Icon4 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/ui-theme";
+var styles4 = listTheme.styles();
+var ListItemContent = /* @__PURE__ */ forwardRef3(({ classNames, icon, title, description }, forwardedRef) => /* @__PURE__ */ React7.createElement("div", {
+  ref: forwardedRef,
+  className: styles4.itemContentRoot({
+    class: mx5(classNames)
+  })
+}, icon != null && /* @__PURE__ */ React7.createElement("div", {
+  className: styles4.itemContentIcon()
+}, typeof icon === "string" ? /* @__PURE__ */ React7.createElement(Icon4, {
+  icon,
+  size: 5
+}) : icon), /* @__PURE__ */ React7.createElement("span", {
+  className: styles4.itemContentTitle()
+}, title), description != null && /* @__PURE__ */ React7.createElement("span", {
+  className: styles4.itemContentDescription()
+}, description)));
+ListItemContent.displayName = "ItemContent";
+
+// src/components/Listbox/Listbox.tsx
+var styles5 = listTheme.styles();
+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 selectable = value !== void 0 || defaultValue !== void 0 || onValueChange !== void 0;
+  const selection = useListSelection({
+    mode: "single",
+    value,
+    defaultValue,
+    onValueChange: (next) => {
+      if (next !== void 0) {
+        onValueChange?.(next);
+      }
     }
-  }, [
-    getId
+  });
+  const context = useMemo5(() => ({
+    selectable,
+    selection
+  }), [
+    selectable,
+    selection
   ]);
-  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"
+  return /* @__PURE__ */ React8.createElement(ListboxProvider, context, children);
 };
-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) => {
-      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) => {
+Root2.displayName = LISTBOX_ROOT_NAME;
+var Viewport = composable3((props, forwardedRef) => {
   const { thin, padding, centered, children, ...rest } = props;
-  return /* @__PURE__ */ React7.createElement(ScrollArea2.Root, {
-    ...composableProps2(rest, {
-      classNames: "dx-container"
+  return /* @__PURE__ */ React8.createElement(ScrollArea2.Root, {
+    ...composableProps3(rest, {
+      classNames: styles5.listboxViewport()
     }),
     thin,
     padding,
     centered,
     orientation: "vertical",
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(ScrollArea2.Viewport, null, children));
+  }, /* @__PURE__ */ React8.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
+Viewport.displayName = LISTBOX_VIEWPORT_NAME;
+var Content2 = composable3((props, forwardedRef) => {
+  const { selectable } = useListboxContext(LISTBOX_CONTENT_NAME);
+  const navigation = useListNavigation({
+    mode: selectable ? "listbox" : "list"
   });
   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"
+  const composed = composableProps3(rest, {
+    classNames: styles5.listboxContent()
   });
-  return /* @__PURE__ */ React7.createElement(List2, {
+  return /* @__PURE__ */ React8.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) => {
-  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;
+Content2.displayName = LISTBOX_CONTENT_NAME;
+var Item2 = composable3((props, forwardedRef) => {
+  const { id, disabled, onClick, onFocus, onMouseDown, children, ...rest } = props;
+  const { selectable, selection } = useListboxContext(LISTBOX_ITEM_NAME);
+  const binding = selection.bind(id, {
+    disabled
+  });
+  const selected = selectable && binding.selected;
+  const interactive = selectable || onClick != null;
+  const handleClick = useCallback7((event) => {
+    if (selectable) {
+      binding.rowProps.onClick(event);
+    }
+    if (!disabled) {
+      onClick?.(event);
     }
-    setSelected(id);
-    onClick?.(event);
   }, [
+    selectable,
+    binding,
     disabled,
-    id,
-    setSelected,
     onClick
   ]);
-  const handleFocus = useCallback4((event) => {
-    if (!disabled && selectedId !== id) {
-      setSelected(id);
+  const handleFocus = useCallback7((event) => {
+    if (selectable) {
+      binding.rowProps.onFocus?.(event);
     }
     onFocus?.(event);
   }, [
-    disabled,
-    selectedId,
-    id,
-    setSelected,
+    selectable,
+    binding,
     onFocus
   ]);
-  const composed = composableProps2(rest, {
-    classNames: [
-      ROW_BASE,
-      disabled && "opacity-50 cursor-not-allowed"
-    ]
+  const composed = composableProps3(rest, {
+    classNames: styles5.listboxItem({
+      class: [
+        !interactive && "cursor-default",
+        disabled && "opacity-50 cursor-not-allowed"
+      ]
+    })
   });
-  return /* @__PURE__ */ React7.createElement(ListItem2, {
+  return /* @__PURE__ */ React8.createElement(ListItemProviderHost, {
+    id,
+    selected
+  }, /* @__PURE__ */ React8.createElement(ListItem, {
     ...composed,
-    role: "option",
-    tabIndex: 0,
-    "aria-selected": isSelected,
+    role: selectable ? "option" : "listitem",
+    tabIndex: selectable ? 0 : -1,
+    "aria-selected": selectable ? selected : void 0,
     "aria-disabled": disabled || void 0,
     onClick: handleClick,
     onFocus: handleFocus,
+    onMouseDown,
     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__ */ React8.createElement(ListboxItemProvider, {
+  id,
+  selected
+}, children);
+var ItemLabel = /* @__PURE__ */ forwardRef4(({ classNames, children, ...rest }, forwardedRef) => /* @__PURE__ */ React8.createElement("span", {
+  ...rest,
+  className: styles5.listboxItemLabel({
+    class: mx6(classNames)
+  }),
+  ref: forwardedRef
+}, children));
+ItemLabel.displayName = LISTBOX_ITEM_LABEL_NAME;
+var Indicator = /* @__PURE__ */ forwardRef4(({ classNames, ...rootProps }, forwardedRef) => {
+  const { selected } = useListboxItemContext(LISTBOX_INDICATOR_NAME);
+  return /* @__PURE__ */ React8.createElement(Icon5, {
+    icon: "ph--check--regular",
+    ...rootProps,
+    classNames: mx6(!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,
+  ItemContent: ListItemContent,
+  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 React10, { useCallback as useCallback8 } from "react";
+import { IconBlock, IconButton, ToggleIconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { mx as mx8, osTranslations as osTranslations2 } from "@dxos/ui-theme";
+
+// src/components/OrderedList/OrderedListRoot.tsx
+import { createContext as createContext6 } from "@radix-ui/react-context";
+import React9, { useMemo as useMemo6 } from "react";
+import { ScrollArea as ScrollArea3, composable as composable4, composableProps as composableProps4 } from "@dxos/react-ui";
+import { mx as mx7 } from "@dxos/ui-theme";
+var styles6 = listTheme.styles();
+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__ */ React9.createElement(OrderedListProvider, context, children({
+    items
+  }));
+};
+var OrderedListContent = ({ classNames, children }) => {
+  const { navigation } = useOrderedListContext("OrderedList.Content");
+  return /* @__PURE__ */ React9.createElement("div", {
+    ...navigation.containerProps,
+    className: styles6.orderedListContent({
+      class: mx7(classNames)
+    })
+  }, children);
+};
+var OrderedListViewport = composable4((props, forwardedRef) => {
+  const { thin, padding, centered, children, ...rest } = props;
+  const autoScrollRef = useReorderAutoScroll();
+  return /* @__PURE__ */ React9.createElement(ScrollArea3.Root, {
+    ...composableProps4(rest, {
+      classNames: styles6.orderedListViewport()
+    }),
+    thin,
+    padding,
+    centered,
+    orientation: "vertical",
     ref: forwardedRef
-  }, /* @__PURE__ */ React8.createElement(ListboxOptionProviderHost, {
-    value
+  }, /* @__PURE__ */ React9.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
+OrderedListViewport.displayName = "OrderedList.Viewport";
+
+// src/components/OrderedList/OrderedListItem.tsx
+var styles7 = listTheme.styles();
+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__ */ React10.createElement(OrderedListItemProvider, {
+    id,
+    expanded,
+    toggle,
+    canDrag,
+    handleRef,
+    triggerProps,
+    panelProps
+  }, /* @__PURE__ */ React10.createElement("div", {
+    ref: rowRef,
+    ...navigation.itemProps(),
+    style,
+    "aria-current": selected || void 0,
+    onClick,
+    className: styles7.orderedListItem({
+      class: mx8(hover && "dx-hover", state.type === "dragging" && "opacity-50", classNames)
+    })
+  }, children, closestEdge && /* @__PURE__ */ React10.createElement(DropIndicator, {
+    edge: closestEdge
+  })));
+};
+var OrderedListDragHandle = () => {
+  const { readonly } = useOrderedListContext("OrderedListDragHandle");
+  const { canDrag, handleRef } = useOrderedListItemContext("OrderedListDragHandle");
+  const { t } = useTranslation2(osTranslations2);
+  const disabled = readonly || !canDrag;
+  return /* @__PURE__ */ React10.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__ */ React10.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: styles7.orderedListTitle({
+      class: mx8(classNames)
+    }),
+    onClick: handleClick
   }, children);
 };
-var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement("span", {
-    ...rootProps,
-    className: mx6("grow truncate", classNames),
-    ref: forwardedRef
+var OrderedListIconButton = ({ autoHide = false, disabled, classNames, ...props }) => /* @__PURE__ */ React10.createElement(IconBlock, null, /* @__PURE__ */ React10.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 } = useTranslation2(osTranslations2);
+  return /* @__PURE__ */ React10.createElement(OrderedListIconButton, {
+    ...props,
+    autoHide,
+    disabled,
+    icon,
+    label: label ?? t("delete.label"),
+    classNames
+  });
+};
+var OrderedListExpandCaret = ({ onClick, ...props }) => {
+  const { t } = useTranslation2(osTranslations2);
+  const { expanded, toggle, triggerProps } = useOrderedListItemContext("OrderedListExpandCaret");
+  const handleClick = useCallback8((event) => {
+    toggle();
+    onClick?.(event);
+  }, [
+    toggle,
+    onClick
+  ]);
+  return /* @__PURE__ */ React10.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__ */ React10.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: mx8(grid.rowProps.className, "pb-1", classNames)
+  }, /* @__PURE__ */ React10.createElement(OrderedListDragHandle, null), /* @__PURE__ */ React10.createElement("div", {
+    className: styles7.orderedListDetailColumn()
+  }, /* @__PURE__ */ React10.createElement("div", {
+    className: styles7.orderedListDetailTitleRow()
+  }, expandable ? /* @__PURE__ */ React10.createElement(OrderedListTitle, {
+    classNames: mx8("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__ */ React10.createElement("div", {
+      className: styles7.orderedListTitle({
+        class: mx8("cursor-auto px-2", titleClassNames)
+      })
+    }, title)
+  ), actions, expandable && /* @__PURE__ */ React10.createElement(OrderedListExpandCaret, null)), expandable && /* @__PURE__ */ React10.createElement(DetailPanel, null, children)), trailing);
+};
+var DetailPanel = ({ children }) => {
+  const { expanded, panelProps } = useOrderedListItemContext("OrderedListDetailItem.Panel");
+  if (!expanded || !children) {
+    return null;
+  }
+  return /* @__PURE__ */ React10.createElement("div", {
+    ...panelProps,
+    className: styles7.orderedListDetailPanel()
   }, 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 React16, { useMemo as useMemo8 } from "react";
+
+// src/components/Treegrid/Treegrid.tsx
+import { useFocusFinders } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React11, { forwardRef as forwardRef5, useCallback as useCallback9 } from "react";
+import { composable as composable5, composableProps as composableProps5 } from "@dxos/react-ui";
+import { mx as mx9 } from "@dxos/ui-theme";
+
+// src/components/Treegrid/Treegrid.theme.ts
+import { tv as tv2 } from "@dxos/ui-theme";
+var levelStyles = /* @__PURE__ */ new Map([
+  [
+    1,
+    "[&>.indent:first-of-type]:pl-0 font-medium"
+  ],
+  [
+    2,
+    "[&>.indent:first-of-type]:pl-0"
+  ],
+  [
+    3,
+    "[&>.indent:first-of-type]:pl-1"
+  ],
+  [
+    4,
+    "[&>.indent:first-of-type]:pl-2"
+  ],
+  [
+    5,
+    "[&>.indent:first-of-type]:pl-3"
+  ],
+  [
+    6,
+    "[&>.indent:first-of-type]:pl-4"
+  ],
+  [
+    7,
+    "[&>.indent:first-of-type]:pl-5"
+  ],
+  [
+    8,
+    "[&>.indent:first-of-type]:pl-6"
+  ]
+]);
+var treegridStyles = tv2({
+  slots: {
+    root: "grid",
+    row: "",
+    cell: ""
+  },
+  variants: {
+    // `indent` marks the cell that carries the per-level left padding (selected via `.indent`).
+    indent: {
+      true: {
+        cell: "indent"
+      }
+    }
+  }
 });
-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),
+var treegridTheme = {
+  styles: treegridStyles,
+  /** Row class for a 1-based depth level (clamped to 1–8). */
+  rowLevel: (level) => levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)) ?? ""
+};
+
+// src/components/Treegrid/Treegrid.tsx
+var styles8 = treegridTheme.styles();
+var TREEGRID_ROW_NAME = "Treegrid.Row";
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var TREEGRID_PATH_SEPARATOR = "~";
+var TREEGRID_PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = composable5(({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
+  const { className, role: _role, ...rest } = composableProps5(props, {
+    classNames
+  });
+  const Comp = asChild ? Slot2 : Primitive.div;
+  const { findFirstFocusable } = useFocusFinders();
+  const handleKeyDown = useCallback9((event) => {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        const direction = event.key === "ArrowDown" ? "down" : "up";
+        const target = event.target;
+        const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
+        if (!ancestorWithArrowKeys) {
+          const currentRow = target.closest('[role="row"]');
+          if (currentRow) {
+            const treegrid = currentRow.closest('[role="treegrid"]');
+            if (treegrid) {
+              const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
+              const currentIndex = rows.indexOf(currentRow);
+              const nextIndex = direction === "down" ? currentIndex + 1 : currentIndex - 1;
+              const targetRow = rows[nextIndex];
+              if (targetRow) {
+                const firstFocusable = findFirstFocusable(targetRow);
+                if (firstFocusable) {
+                  event.preventDefault();
+                  firstFocusable.focus();
+                }
+              }
+            }
+          }
+        }
+        break;
+      }
+    }
+    onKeyDownProp?.(event);
+  }, [
+    findFirstFocusable,
+    onKeyDownProp
+  ]);
+  return /* @__PURE__ */ React11.createElement(Comp, {
+    role: "treegrid",
+    ...rest,
+    className: styles8.root({
+      class: mx9(className)
+    }),
+    style: {
+      ...style,
+      gridTemplateColumns
+    },
+    onKeyDown: handleKeyDown,
     ref: forwardedRef
+  }, children);
+});
+var TreegridRow = /* @__PURE__ */ forwardRef5(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot2 : Primitive.div;
+  const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
+  const level = pathParts.length - 1;
+  const [open, onOpenChange] = useControllableState2({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
   });
+  return /* @__PURE__ */ React11.createElement(TreegridRowProvider, {
+    open,
+    onOpenChange,
+    scope: __treegridRowScope
+  }, /* @__PURE__ */ React11.createElement(Comp, {
+    role: "row",
+    "aria-level": level,
+    className: styles8.row({
+      class: mx9(treegridTheme.rowLevel(level), classNames)
+    }),
+    ...parentOf && {
+      "aria-expanded": open,
+      "aria-owns": parentOf
+    },
+    ...props,
+    id,
+    ref: forwardedRef
+  }, children));
 });
-ListboxOptionIndicator.displayName = "Listbox.OptionIndicator";
-var Listbox = {
-  Root: ListboxRoot,
-  Option: ListboxOption,
-  OptionLabel: ListboxOptionLabel,
-  OptionIndicator: ListboxOptionIndicator
+var TreegridCell = /* @__PURE__ */ forwardRef5(({ classNames, children, indent, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React11.createElement("div", {
+    role: "gridcell",
+    className: styles8.cell({
+      indent,
+      class: mx9(classNames)
+    }),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell
 };
 
-// src/components/Tree/Tree.tsx
-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 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 +1864,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 { 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 React15, { memo as memo3, useCallback as useCallback11, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef5, useState as useState5 } from "react";
+import { invariant } from "@dxos/invariant";
+import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx10 } from "@dxos/ui-theme";
 
 // src/components/Tree/helpers.ts
 var DEFAULT_INDENTATION = 8;
@@ -1034,20 +1875,62 @@ var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`
 });
 
+// src/components/Tree/TreeDropIndicator.tsx
+import React12 from "react";
+var edgeToOrientationMap2 = {
+  "reorder-above": "sibling",
+  "reorder-below": "sibling",
+  "make-child": "child",
+  "reparent": "child"
+};
+var orientationStyles2 = {
+  sibling: "h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-bg before:left-(--negative-terminal-size)",
+  child: "inset-0 border-[length:var(--line-thickness)] before:invisible"
+};
+var instructionStyles = {
+  "reorder-above": "top-(--line-offset) before:top-(--offset-terminal)",
+  "reorder-below": "bottom-(--line-offset) before:bottom-(--offset-terminal)",
+  "make-child": "border-accent-bg",
+  "reparent": ""
+};
+var strokeSize2 = 2;
+var terminalSize2 = 8;
+var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
+var TreeDropIndicator = ({ instruction, gap = 0 }) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
+  const isBlocked = instruction.type === "instruction-blocked";
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap2[desiredInstruction.type];
+  if (isBlocked) {
+    return null;
+  }
+  return /* @__PURE__ */ React12.createElement("div", {
+    style: {
+      "--line-thickness": `${strokeSize2}px`,
+      "--line-offset": `${lineOffset}`,
+      "--terminal-size": `${terminalSize2}px`,
+      "--terminal-radius": `${terminalSize2 / 2}px`,
+      "--negative-terminal-size": `-${terminalSize2}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
+      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
+    },
+    className: `absolute z-10 pointer-events-none before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
+  });
+};
+
 // 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 React13, { forwardRef as forwardRef6, memo, useCallback as useCallback10 } from "react";
+import { Button as Button2, Icon as Icon6, Tag, TextTooltip, toLocalizedString, useTranslation as useTranslation3 } 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) => {
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef6(({ label, className, icon, iconHue, disabled, current, count, modifiedCount, onSelect }, forwardedRef) => {
+  const { t } = useTranslation3();
+  const styles9 = iconHue ? getStyles(iconHue) : void 0;
+  const handleSelect = useCallback10((event) => {
     onSelect?.(event.altKey);
   }, [
     onSelect
   ]);
-  const handleButtonKeydown = useCallback5((event) => {
+  const handleButtonKeydown = useCallback10((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
@@ -1056,14 +1939,14 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ React9.createElement(TextTooltip, {
+  return /* @__PURE__ */ React13.createElement(TextTooltip, {
     text: toLocalizedString(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React9.createElement(Button2, {
+  }, /* @__PURE__ */ React13.createElement(Button2, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
     classNames: [
@@ -1077,31 +1960,31 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ React9.createElement(Icon4, {
+  }, icon && /* @__PURE__ */ React13.createElement(Icon6, {
     size: 5,
     icon: icon ?? "ph--circle-dashed--regular",
     classNames: [
       "my-1",
-      styles?.text
+      styles9?.text
     ]
-  }), /* @__PURE__ */ React9.createElement("span", {
+  }), /* @__PURE__ */ React13.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__ */ React13.createElement(CountBadge, {
     count,
     modifiedCount
   })));
 }));
 var CountBadge = ({ count, modifiedCount }) => {
   if (typeof modifiedCount === "number" && modifiedCount > 0) {
-    return /* @__PURE__ */ React9.createElement(Tag, {
-      palette: "rose",
+    return /* @__PURE__ */ React13.createElement(Tag, {
+      hue: "rose",
       classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
     }, modifiedCount);
   }
   if (typeof count === "number") {
-    return /* @__PURE__ */ React9.createElement(Tag, {
-      palette: "neutral",
+    return /* @__PURE__ */ React13.createElement(Tag, {
+      hue: "neutral",
       classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
     }, count);
   }
@@ -1109,10 +1992,10 @@ var CountBadge = ({ count, modifiedCount }) => {
 };
 
 // src/components/Tree/TreeItemToggle.tsx
-import React10, { forwardRef as forwardRef5, memo as memo2 } from "react";
+import React14, { forwardRef as forwardRef7, 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, {
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React14.createElement(IconButton2, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
@@ -1136,8 +2019,16 @@ 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 NavTreeSectionHeader = ({ label }) => {
+  const { t } = useTranslation4();
+  return /* @__PURE__ */ React15.createElement("div", {
+    role: "heading",
+    "aria-level": 2,
+    className: "col-[tree-row] pl-7 pt-3 pb-0.5 text-xs uppercase tracking-widest text-subdued hover:text-description select-none"
+  }, toLocalizedString2(label, t));
+};
 var TreeDataSchema = Schema.Struct({
   id: Schema.String,
   path: Schema.Array(Schema.String),
@@ -1145,22 +2036,22 @@ 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
   ], [
     pathProp,
     item.id
   ]);
-  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId, count, modifiedCount } = useAtomValue(itemPropsAtom(path));
+  const { id, parentOf, disposition, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId, count, modifiedCount } = useAtomValue(itemPropsAtom(path));
   const childIds = useAtomValue(childIdsAtom(item.id));
   const open = useAtomValue(itemOpenAtom(path));
   const current = useAtomValue(itemCurrentAtom(path));
@@ -1177,7 +2068,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 = useCallback11(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
@@ -1186,11 +2077,11 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
   const isItemDraggable = draggableProp && itemDraggable !== false;
   const isItemDroppable = itemDroppable !== false;
   const nativeDragText = id;
-  useEffect4(() => {
-    if (!draggableProp) {
+  useEffect5(() => {
+    if (!draggableProp || !isItemDraggable && !isItemDroppable) {
       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: 80, S: void 0, A: ["buttonRef.current", ""] });
     const makeDraggable = () => draggable2({
       element: buttonRef.current,
       getInitialData: () => data,
@@ -1305,10 +2196,10 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     blockInstruction,
     canDrop
   ]);
-  useEffect4(() => () => cancelExpand(), [
+  useEffect5(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenToggle = useCallback6(() => onOpenChange?.({
+  const handleOpenToggle = useCallback11(() => onOpenChange?.({
     item,
     path,
     open: !open
@@ -1318,7 +2209,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     path,
     open
   ]);
-  const handleSelect = useCallback6((option = false) => {
+  const handleSelect = useCallback11((option = false) => {
     if (isBranch && (option || current)) {
       handleOpenToggle();
     } else if (canSelectItem) {
@@ -1343,7 +2234,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     handleOpenToggle,
     onSelect
   ]);
-  const handleKeyDown = useCallback6((event) => {
+  const handleKeyDown = useCallback11((event) => {
     switch (event.key) {
       case "ArrowRight":
       case "ArrowLeft":
@@ -1356,7 +2247,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     handleOpenToggle,
     handleSelect
   ]);
-  const handleItemHover = useCallback6(() => {
+  const handleItemHover = useCallback11(() => {
     onItemHover?.({
       item
     });
@@ -1364,7 +2255,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onItemHover,
     item
   ]);
-  const handleContextMenu = useCallback6((event) => {
+  const handleContextMenu = useCallback11((event) => {
     event.preventDefault();
     setMenuOpen(true);
   }, [
@@ -1380,7 +2271,22 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onOpenChange,
     onSelect
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Treegrid.Row, {
+  if (disposition === "group") {
+    if (childIds.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(NavTreeSectionHeader, {
+      label
+    }), childIds.map((childId, index) => /* @__PURE__ */ React15.createElement(TreeItemById, {
+      key: childId,
+      id: childId,
+      path,
+      last: index === childIds.length - 1,
+      levelOffset: levelOffset + 1,
+      ...childProps
+    })));
+  }
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Treegrid.Row, {
     ref: rowRef,
     key: id,
     id,
@@ -1392,20 +2298,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: mx10(
+      "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__ */ React15.createElement("div", {
     className: "indent relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndentation(level)
-  }, /* @__PURE__ */ React11.createElement(Treegrid.Cell, {
+  }, /* @__PURE__ */ React15.createElement(Treegrid.Cell, {
     classNames: "flex items-center"
-  }, /* @__PURE__ */ React11.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ React15.createElement(TreeItemToggle, {
     isBranch,
     open,
     onClick: handleOpenToggle
-  }), /* @__PURE__ */ React11.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ React15.createElement(TreeItemHeading, {
     disabled,
     current,
     label,
@@ -1416,16 +2333,16 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     modifiedCount,
     onSelect: handleSelect,
     ref: buttonRef
-  })), Columns && /* @__PURE__ */ React11.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ React15.createElement(Columns, {
     item,
     path,
     open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ React11.createElement(NaturalTreeItem.DropIndicator, {
+  }), instruction && /* @__PURE__ */ React15.createElement(TreeDropIndicator, {
     instruction,
     gap: 2
-  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React11.createElement(TreeItemById, {
+  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React15.createElement(TreeItemById, {
     key: childId,
     id: childId,
     path,
@@ -1440,7 +2357,7 @@ var RawTreeItemById = ({ id, ...props }) => {
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(TreeItem, {
+  return /* @__PURE__ */ React15.createElement(TreeItem, {
     item,
     ...props
   });
@@ -1448,9 +2365,17 @@ var RawTreeItemById = ({ id, ...props }) => {
 var TreeItemById = /* @__PURE__ */ memo3(RawTreeItemById);
 
 // src/components/Tree/Tree.tsx
+var TreeChild = ({ id, path: parentPath, last, ...childProps }) => {
+  return /* @__PURE__ */ React16.createElement(TreeItemById, {
+    id,
+    path: parentPath,
+    last,
+    ...childProps
+  });
+};
 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 +2396,12 @@ var Tree = ({ classNames, model, rootId, path, id, draggable: draggable3 = false
     onSelect,
     onItemHover
   };
-  return /* @__PURE__ */ React12.createElement(Treegrid2.Root, {
+  return /* @__PURE__ */ React16.createElement(Treegrid.Root, {
     gridTemplateColumns,
     classNames
-  }, /* @__PURE__ */ React12.createElement(TreeProvider, {
+  }, /* @__PURE__ */ React16.createElement(TreeProvider, {
     value: model
-  }, childIds.map((childId, index) => /* @__PURE__ */ React12.createElement(TreeItemById, {
+  }, childIds.map((childId, index) => /* @__PURE__ */ React16.createElement(TreeChild, {
     key: childId,
     id: childId,
     last: index === childIds.length - 1,
@@ -1503,25 +2428,33 @@ export {
   Accordion,
   Combobox,
   DEFAULT_INDENTATION,
-  List,
+  DropIndicator,
+  Empty,
   Listbox,
+  OrderedList,
   Path,
   Picker,
-  Row,
-  RowList,
+  TREEGRID_PARENT_OF_SEPARATOR,
+  TREEGRID_PATH_SEPARATOR,
   Tree,
   TreeDataSchema,
   TreeItem,
   TreeItemById,
   TreeItemToggle,
   TreeProvider,
-  createListboxScope,
-  createRowListScope,
+  Treegrid,
   isTreeData,
   paddingIndentation,
+  useListDisclosure,
+  useListGrid,
+  useListNavigation,
+  useListSelection,
+  useListboxSelection,
   usePickerInputContext,
   usePickerItemContext,
-  useRowListSelection,
+  useReorderAutoScroll,
+  useReorderItem,
+  useReorderList,
   useTree
 };
 //# sourceMappingURL=index.mjs.map