@dxos/react-ui-list 0.9.1-main.c7dcc2e112 → 0.10.0

package/dist/lib/browser/index.mjs

@@ -63,14 +63,14 @@ var useListDisclosure = (opts) => {
       triggerId,
       panelId,
       triggerProps: {
-        id: triggerId,
+        "id": triggerId,
         "aria-expanded": expanded,
         "aria-controls": panelId,
-        onClick: () => setExpanded(id, !expanded)
+        "onClick": () => setExpanded(id, !expanded)
       },
       panelProps: {
-        id: panelId,
-        role: "region",
+        "id": panelId,
+        "role": "region",
         "aria-labelledby": triggerId
       }
     };
@@ -257,7 +257,7 @@ var useListSelection = (opts) => {
       },
       rowProps: {
         "aria-selected": selected,
-        onClick: () => {
+        "onClick": () => {
           if (disabled) {
             return;
           }
@@ -582,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";
@@ -606,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);
@@ -613,31 +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, icon, ...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 justify-between gap-2 p-2 dx-focus-ring-inset w-full text-start"
-  }, icon && /* @__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("span", {
-    className: "min-w-0 flex-1 truncate"
-  }, children), /* @__PURE__ */ React2.createElement(Icon, {
+  })), /* @__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: "shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90"
-  })));
+    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));
 };
 
@@ -669,14 +756,18 @@ var [PickerItemContextProvider, usePickerItemContext] = createContext3("PickerIt
 var [PickerInputContextProvider, usePickerInputContext] = createContext3("PickerInput");
 
 // src/components/Picker/Picker.tsx
-var PickerRoot = ({ children }) => {
+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]) => {
@@ -699,7 +790,8 @@ var PickerRoot = ({ children }) => {
     }
   }, [
     itemVersion,
-    selectedValue
+    selectedValue,
+    resetSelectionOnChange
   ]);
   const registerItem = useCallback5((value, element, onSelect, disabled) => {
     if (element) {
@@ -908,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);
@@ -921,6 +1015,7 @@ 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";
@@ -952,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, {
@@ -961,7 +1056,9 @@ 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) => {
@@ -984,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
@@ -995,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
   });
 });
@@ -1006,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,
@@ -1019,7 +1116,7 @@ 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 = useCallback6(() => {
     onSelect?.();
@@ -1041,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"
@@ -1086,12 +1185,97 @@ var Combobox = {
   Empty: ComboboxEmpty
 };
 
+// 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/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, { forwardRef as forwardRef3, useCallback as useCallback7, useMemo as useMemo5 } from "react";
+import React8, { forwardRef as forwardRef4, useCallback as useCallback7, useMemo as useMemo5 } from "react";
 import { List, ListItem } from "@dxos/react-list";
-import { Icon as Icon3, ScrollArea as ScrollArea2, composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
+import { 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";
@@ -1102,6 +1286,7 @@ 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,
@@ -1113,37 +1298,39 @@ var Root2 = ({ value, defaultValue, onValueChange, autoFocus: _autoFocus, childr
     }
   });
   const context = useMemo5(() => ({
+    selectable,
     selection
   }), [
+    selectable,
     selection
   ]);
-  return /* @__PURE__ */ React5.createElement(ListboxProvider, context, children);
+  return /* @__PURE__ */ React8.createElement(ListboxProvider, context, children);
 };
 Root2.displayName = LISTBOX_ROOT_NAME;
-var Viewport = composable2((props, forwardedRef) => {
+var Viewport = composable3((props, forwardedRef) => {
   const { thin, padding, centered, children, ...rest } = props;
-  return /* @__PURE__ */ React5.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__ */ React5.createElement(ScrollArea2.Viewport, null, children));
+  }, /* @__PURE__ */ React8.createElement(ScrollArea2.Viewport, null, children));
 });
 Viewport.displayName = LISTBOX_VIEWPORT_NAME;
-var Content2 = composable2((props, forwardedRef) => {
-  useListboxContext(LISTBOX_CONTENT_NAME);
+var Content2 = composable3((props, forwardedRef) => {
+  const { selectable } = useListboxContext(LISTBOX_CONTENT_NAME);
   const navigation = useListNavigation({
-    mode: "listbox"
+    mode: selectable ? "listbox" : "list"
   });
   const { children, ...rest } = props;
-  const composed = composableProps2(rest, {
-    classNames: "flex flex-col"
+  const composed = composableProps3(rest, {
+    classNames: styles5.listboxContent()
   });
-  return /* @__PURE__ */ React5.createElement(List, {
+  return /* @__PURE__ */ React8.createElement(List, {
     variant: "unordered",
     ...composed,
     ...navigation.containerProps,
@@ -1151,67 +1338,79 @@ var Content2 = composable2((props, forwardedRef) => {
   }, children);
 });
 Content2.displayName = LISTBOX_CONTENT_NAME;
-var ITEM_BASE = "flex items-center dx-hover dx-selected px-3 py-2 cursor-pointer outline-none";
-var Item2 = composable2((props, forwardedRef) => {
-  const { id, disabled, onClick, onFocus, children, ...rest } = props;
-  const { selection } = useListboxContext(LISTBOX_ITEM_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) => {
-    binding.rowProps.onClick(event);
+    if (selectable) {
+      binding.rowProps.onClick(event);
+    }
     if (!disabled) {
       onClick?.(event);
     }
   }, [
+    selectable,
     binding,
     disabled,
     onClick
   ]);
   const handleFocus = useCallback7((event) => {
-    binding.rowProps.onFocus?.(event);
+    if (selectable) {
+      binding.rowProps.onFocus?.(event);
+    }
     onFocus?.(event);
   }, [
+    selectable,
     binding,
     onFocus
   ]);
-  const composed = composableProps2(rest, {
-    classNames: [
-      ITEM_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__ */ React5.createElement(ListItemProviderHost, {
+  return /* @__PURE__ */ React8.createElement(ListItemProviderHost, {
     id,
-    selected: binding.selected
-  }, /* @__PURE__ */ React5.createElement(ListItem, {
+    selected
+  }, /* @__PURE__ */ React8.createElement(ListItem, {
     ...composed,
-    role: "option",
-    tabIndex: 0,
-    "aria-selected": binding.selected,
+    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));
 });
 Item2.displayName = LISTBOX_ITEM_NAME;
-var ListItemProviderHost = ({ id, selected, children }) => /* @__PURE__ */ React5.createElement(ListboxItemProvider, {
+var ListItemProviderHost = ({ id, selected, children }) => /* @__PURE__ */ React8.createElement(ListboxItemProvider, {
   id,
   selected
 }, children);
-var ItemLabel = /* @__PURE__ */ forwardRef3(({ classNames, children, ...rest }, forwardedRef) => /* @__PURE__ */ React5.createElement("span", {
+var ItemLabel = /* @__PURE__ */ forwardRef4(({ classNames, children, ...rest }, forwardedRef) => /* @__PURE__ */ React8.createElement("span", {
   ...rest,
-  className: mx5("grow truncate", classNames),
+  className: styles5.listboxItemLabel({
+    class: mx6(classNames)
+  }),
   ref: forwardedRef
 }, children));
 ItemLabel.displayName = LISTBOX_ITEM_LABEL_NAME;
-var Indicator = /* @__PURE__ */ forwardRef3(({ classNames, ...rootProps }, forwardedRef) => {
+var Indicator = /* @__PURE__ */ forwardRef4(({ classNames, ...rootProps }, forwardedRef) => {
   const { selected } = useListboxItemContext(LISTBOX_INDICATOR_NAME);
-  return /* @__PURE__ */ React5.createElement(Icon3, {
+  return /* @__PURE__ */ React8.createElement(Icon5, {
     icon: "ph--check--regular",
     ...rootProps,
-    classNames: mx5(!selected && "invisible", classNames),
+    classNames: mx6(!selected && "invisible", classNames),
     ref: forwardedRef
   });
 });
@@ -1226,20 +1425,22 @@ var Listbox = {
   Content: Content2,
   Item: Item2,
   ItemLabel,
+  ItemContent: ListItemContent,
   Indicator
 };
 
 // src/components/OrderedList/OrderedListItem.tsx
 import { createContext as createContext7 } from "@radix-ui/react-context";
-import React7, { useCallback as useCallback8 } from "react";
-import { IconBlock, IconButton, ListItem as NaturalListItem, ToggleIconButton, useTranslation } from "@dxos/react-ui";
-import { mx as mx7, osTranslations } from "@dxos/ui-theme";
+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 React6, { useMemo as useMemo6 } from "react";
-import { ScrollArea as ScrollArea3, composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/ui-theme";
+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;
@@ -1276,43 +1477,46 @@ var OrderedListRoot = ({ items, getId = defaultGetId2, onMove = noopMove, readon
     active,
     getId
   ]);
-  return /* @__PURE__ */ React6.createElement(OrderedListProvider, context, children({
+  return /* @__PURE__ */ React9.createElement(OrderedListProvider, context, children({
     items
   }));
 };
 var OrderedListContent = ({ classNames, children }) => {
   const { navigation } = useOrderedListContext("OrderedList.Content");
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     ...navigation.containerProps,
-    className: mx6("flex flex-col", classNames)
+    className: styles6.orderedListContent({
+      class: mx7(classNames)
+    })
   }, children);
 };
-var OrderedListViewport = composable3((props, forwardedRef) => {
+var OrderedListViewport = composable4((props, forwardedRef) => {
   const { thin, padding, centered, children, ...rest } = props;
   const autoScrollRef = useReorderAutoScroll();
-  return /* @__PURE__ */ React6.createElement(ScrollArea3.Root, {
-    ...composableProps3(rest, {
-      classNames: "dx-container"
+  return /* @__PURE__ */ React9.createElement(ScrollArea3.Root, {
+    ...composableProps4(rest, {
+      classNames: styles6.orderedListViewport()
     }),
     thin,
     padding,
     centered,
     orientation: "vertical",
     ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(ScrollArea3.Viewport, {
+  }, /* @__PURE__ */ React9.createElement(ScrollArea3.Viewport, {
     ref: autoScrollRef
   }, children));
 });
 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__ */ React7.createElement(OrderedListItemProvider, {
+  return /* @__PURE__ */ React10.createElement(OrderedListItemProvider, {
     id,
     expanded,
     toggle,
@@ -1320,23 +1524,25 @@ var OrderedListItem = ({ id, canDrag = true, hover = false, selected, onClick, c
     handleRef,
     triggerProps,
     panelProps
-  }, /* @__PURE__ */ React7.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     ref: rowRef,
     ...navigation.itemProps(),
     style,
     "aria-current": selected || void 0,
     onClick,
-    className: mx7("relative dx-current", hover && "dx-hover", state.type === "dragging" && "opacity-50", classNames)
-  }, children, closestEdge && /* @__PURE__ */ React7.createElement(NaturalListItem.DropIndicator, {
+    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 } = useTranslation(osTranslations);
+  const { t } = useTranslation2(osTranslations2);
   const disabled = readonly || !canDrag;
-  return /* @__PURE__ */ React7.createElement(IconButton, {
+  return /* @__PURE__ */ React10.createElement(IconButton, {
     variant: "ghost",
     disabled,
     noTooltip: true,
@@ -1355,18 +1561,20 @@ var OrderedListTitle = ({ classNames, children, onClick, ...props }) => {
     onClick,
     triggerProps
   ]);
-  return /* @__PURE__ */ React7.createElement("div", {
+  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: mx7("flex grow items-center truncate cursor-pointer", classNames),
+    className: styles7.orderedListTitle({
+      class: mx8(classNames)
+    }),
     onClick: handleClick
   }, children);
 };
-var OrderedListIconButton = ({ autoHide = false, disabled, classNames, ...props }) => /* @__PURE__ */ React7.createElement(IconBlock, null, /* @__PURE__ */ React7.createElement(IconButton, {
+var OrderedListIconButton = ({ autoHide = false, disabled, classNames, ...props }) => /* @__PURE__ */ React10.createElement(IconBlock, null, /* @__PURE__ */ React10.createElement(IconButton, {
   ...props,
   variant: "ghost",
   iconOnly: true,
@@ -1377,8 +1585,8 @@ var OrderedListIconButton = ({ autoHide = false, disabled, classNames, ...props
   ]
 }));
 var OrderedListDeleteButton = ({ autoHide = false, icon = "ph--x--regular", label, disabled, classNames, ...props }) => {
-  const { t } = useTranslation(osTranslations);
-  return /* @__PURE__ */ React7.createElement(OrderedListIconButton, {
+  const { t } = useTranslation2(osTranslations2);
+  return /* @__PURE__ */ React10.createElement(OrderedListIconButton, {
     ...props,
     autoHide,
     disabled,
@@ -1388,7 +1596,7 @@ var OrderedListDeleteButton = ({ autoHide = false, icon = "ph--x--regular", labe
   });
 };
 var OrderedListExpandCaret = ({ onClick, ...props }) => {
-  const { t } = useTranslation(osTranslations);
+  const { t } = useTranslation2(osTranslations2);
   const { expanded, toggle, triggerProps } = useOrderedListItemContext("OrderedListExpandCaret");
   const handleClick = useCallback8((event) => {
     toggle();
@@ -1397,7 +1605,7 @@ var OrderedListExpandCaret = ({ onClick, ...props }) => {
     toggle,
     onClick
   ]);
-  return /* @__PURE__ */ React7.createElement(ToggleIconButton, {
+  return /* @__PURE__ */ React10.createElement(ToggleIconButton, {
     iconOnly: true,
     variant: "ghost",
     active: expanded,
@@ -1415,7 +1623,7 @@ var OrderedListDetailItem = ({ id, item, canDrag, title, titleClassNames, action
   const grid = useListGrid({
     trailing: !!trailing
   });
-  return /* @__PURE__ */ React7.createElement(OrderedListItem, {
+  return /* @__PURE__ */ React10.createElement(OrderedListItem, {
     id,
     item,
     canDrag,
@@ -1423,30 +1631,32 @@ var OrderedListDetailItem = ({ id, item, canDrag, title, titleClassNames, action
     // land in fixed-width tracks that share a baseline with the title row inside the card.
     // See useListGrid for the rationale.
     style: grid.rowProps.style,
-    classNames: mx7(grid.rowProps.className, "pb-1", classNames)
-  }, /* @__PURE__ */ React7.createElement(OrderedListDragHandle, null), /* @__PURE__ */ React7.createElement("div", {
-    className: "flex flex-col ring-1 ring-subdued-separator rounded-sm overflow-hidden"
-  }, /* @__PURE__ */ React7.createElement("div", {
-    className: "flex items-center min-h-[var(--dx-rail-item)]"
-  }, expandable ? /* @__PURE__ */ React7.createElement(OrderedListTitle, {
-    classNames: mx7("px-2", titleClassNames)
+    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__ */ React7.createElement("div", {
-      className: mx7("flex grow items-center truncate px-2", titleClassNames)
+    /* @__PURE__ */ React10.createElement("div", {
+      className: styles7.orderedListTitle({
+        class: mx8("cursor-auto px-2", titleClassNames)
+      })
     }, title)
-  ), actions, expandable && /* @__PURE__ */ React7.createElement(OrderedListExpandCaret, null)), expandable && /* @__PURE__ */ React7.createElement(DetailPanel, null, children)), trailing);
+  ), 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__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     ...panelProps,
-    className: "px-2 pb-2"
+    className: styles7.orderedListDetailPanel()
   }, children);
 };
 
@@ -1466,8 +1676,180 @@ var OrderedList = {
 
 // src/components/Tree/Tree.tsx
 import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React11, { useMemo as useMemo8 } from "react";
-import { Treegrid as Treegrid2 } from "@dxos/react-ui";
+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"
+      }
+    }
+  }
+});
+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));
+});
+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/TreeContext.tsx
 import { createContext as createContext8, useContext } from "react";
@@ -1482,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 React10, { memo as memo3, useCallback as useCallback10, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef5, useState as useState5 } from "react";
+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 { TreeItem as NaturalTreeItem, Treegrid, TREEGRID_PARENT_OF_SEPARATOR } from "@dxos/react-ui";
-import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx8 } from "@dxos/ui-theme";
+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;
@@ -1493,19 +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 React8, { forwardRef as forwardRef4, memo, useCallback as useCallback9 } from "react";
-import { Button as Button2, Icon as Icon4, Tag, TextTooltip, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import 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 = useCallback9((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 = useCallback9((event) => {
+  const handleButtonKeydown = useCallback10((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
@@ -1514,14 +1939,14 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ React8.createElement(TextTooltip, {
+  return /* @__PURE__ */ React13.createElement(TextTooltip, {
     text: toLocalizedString(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React8.createElement(Button2, {
+  }, /* @__PURE__ */ React13.createElement(Button2, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
     classNames: [
@@ -1535,31 +1960,31 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ React8.createElement(Icon4, {
+  }, icon && /* @__PURE__ */ React13.createElement(Icon6, {
     size: 5,
     icon: icon ?? "ph--circle-dashed--regular",
     classNames: [
       "my-1",
-      styles?.text
+      styles9?.text
     ]
-  }), /* @__PURE__ */ React8.createElement("span", {
+  }), /* @__PURE__ */ React13.createElement("span", {
     className: "min-w-0 truncate text-start font-normal",
     "data-tooltip": true
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React8.createElement(CountBadge, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React13.createElement(CountBadge, {
     count,
     modifiedCount
   })));
 }));
 var CountBadge = ({ count, modifiedCount }) => {
   if (typeof modifiedCount === "number" && modifiedCount > 0) {
-    return /* @__PURE__ */ React8.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__ */ React8.createElement(Tag, {
-      palette: "neutral",
+    return /* @__PURE__ */ React13.createElement(Tag, {
+      hue: "neutral",
       classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
     }, count);
   }
@@ -1567,10 +1992,10 @@ var CountBadge = ({ count, modifiedCount }) => {
 };
 
 // src/components/Tree/TreeItemToggle.tsx
-import React9, { 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__ */ React9.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,
@@ -1596,6 +2021,14 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classN
 // 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),
@@ -1618,7 +2051,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     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));
@@ -1635,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 = useCallback10(() => {
+  const cancelExpand = useCallback11(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
@@ -1645,10 +2078,10 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
   const isItemDroppable = itemDroppable !== false;
   const nativeDragText = id;
   useEffect5(() => {
-    if (!draggableProp) {
+    if (!draggableProp || !isItemDraggable && !isItemDroppable) {
       return;
     }
-    invariant(buttonRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, 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,
@@ -1766,7 +2199,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
   useEffect5(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenToggle = useCallback10(() => onOpenChange?.({
+  const handleOpenToggle = useCallback11(() => onOpenChange?.({
     item,
     path,
     open: !open
@@ -1776,7 +2209,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     path,
     open
   ]);
-  const handleSelect = useCallback10((option = false) => {
+  const handleSelect = useCallback11((option = false) => {
     if (isBranch && (option || current)) {
       handleOpenToggle();
     } else if (canSelectItem) {
@@ -1801,7 +2234,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     handleOpenToggle,
     onSelect
   ]);
-  const handleKeyDown = useCallback10((event) => {
+  const handleKeyDown = useCallback11((event) => {
     switch (event.key) {
       case "ArrowRight":
       case "ArrowLeft":
@@ -1814,7 +2247,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     handleOpenToggle,
     handleSelect
   ]);
-  const handleItemHover = useCallback10(() => {
+  const handleItemHover = useCallback11(() => {
     onItemHover?.({
       item
     });
@@ -1822,7 +2255,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onItemHover,
     item
   ]);
-  const handleContextMenu = useCallback10((event) => {
+  const handleContextMenu = useCallback11((event) => {
     event.preventDefault();
     setMenuOpen(true);
   }, [
@@ -1838,7 +2271,22 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onOpenChange,
     onSelect
   };
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.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,
@@ -1850,7 +2298,7 @@ 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: mx8(
+    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",
@@ -1865,16 +2313,16 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     onKeyDown: handleKeyDown,
     onMouseEnter: handleItemHover,
     onContextMenu: handleContextMenu
-  }, /* @__PURE__ */ React10.createElement("div", {
+  }, /* @__PURE__ */ React15.createElement("div", {
     className: "indent relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndentation(level)
-  }, /* @__PURE__ */ React10.createElement(Treegrid.Cell, {
+  }, /* @__PURE__ */ React15.createElement(Treegrid.Cell, {
     classNames: "flex items-center"
-  }, /* @__PURE__ */ React10.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ React15.createElement(TreeItemToggle, {
     isBranch,
     open,
     onClick: handleOpenToggle
-  }), /* @__PURE__ */ React10.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ React15.createElement(TreeItemHeading, {
     disabled,
     current,
     label,
@@ -1885,16 +2333,16 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     modifiedCount,
     onSelect: handleSelect,
     ref: buttonRef
-  })), Columns && /* @__PURE__ */ React10.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ React15.createElement(Columns, {
     item,
     path,
     open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ React10.createElement(NaturalTreeItem.DropIndicator, {
+  }), instruction && /* @__PURE__ */ React15.createElement(TreeDropIndicator, {
     instruction,
     gap: 2
-  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React10.createElement(TreeItemById, {
+  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React15.createElement(TreeItemById, {
     key: childId,
     id: childId,
     path,
@@ -1909,7 +2357,7 @@ var RawTreeItemById = ({ id, ...props }) => {
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement(TreeItem, {
+  return /* @__PURE__ */ React15.createElement(TreeItem, {
     item,
     ...props
   });
@@ -1917,6 +2365,14 @@ 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 = useMemo8(() => path ? [
@@ -1940,12 +2396,12 @@ var Tree = ({ classNames, model, rootId, path, id, draggable: draggable3 = false
     onSelect,
     onItemHover
   };
-  return /* @__PURE__ */ React11.createElement(Treegrid2.Root, {
+  return /* @__PURE__ */ React16.createElement(Treegrid.Root, {
     gridTemplateColumns,
     classNames
-  }, /* @__PURE__ */ React11.createElement(TreeProvider, {
+  }, /* @__PURE__ */ React16.createElement(TreeProvider, {
     value: model
-  }, childIds.map((childId, index) => /* @__PURE__ */ React11.createElement(TreeItemById, {
+  }, childIds.map((childId, index) => /* @__PURE__ */ React16.createElement(TreeChild, {
     key: childId,
     id: childId,
     last: index === childIds.length - 1,
@@ -1972,16 +2428,21 @@ export {
   Accordion,
   Combobox,
   DEFAULT_INDENTATION,
+  DropIndicator,
+  Empty,
   Listbox,
   OrderedList,
   Path,
   Picker,
+  TREEGRID_PARENT_OF_SEPARATOR,
+  TREEGRID_PATH_SEPARATOR,
   Tree,
   TreeDataSchema,
   TreeItem,
   TreeItemById,
   TreeItemToggle,
   TreeProvider,
+  Treegrid,
   isTreeData,
   paddingIndentation,
   useListDisclosure,