@proyecto-viviana/ui 0.6.3 → 0.8.0-rc.1

package/src/tree/index.tsx

@@ -1,15 +1,34 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/TreeView.tsx
+
+// Port of packages/@react-spectrum/s2/src/TreeView.tsx.
+
 import {
   children as resolveChildren,
   createContext,
   createEffect,
   createMemo,
   createSignal,
-  mergeProps,
+  getOwner,
+  isDisposed,
   onCleanup,
-  splitProps,
+  runWithOwner,
   useContext,
-  type JSX,
+  createTrackedEffect,
+  type Owner,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Tree as HeadlessTree,
   TreeItem as HeadlessTreeItem,
@@ -19,6 +38,7 @@ import {
   TreeLoadMoreItem as HeadlessTreeLoadMoreItem,
   TreeStateContext as HeadlessTreeStateContext,
   TreeItemContext as HeadlessTreeItemContext,
+  SlotProvider,
   type TreeProps as HeadlessTreeProps,
   type TreeItemProps as HeadlessTreeItemProps,
   type TreeItemContentProps as HeadlessTreeItemContentProps,
@@ -26,7 +46,9 @@ import {
   type TreeExpandButtonProps as HeadlessTreeExpandButtonProps,
   type TreeRenderProps,
   type TreeItemRenderProps,
+  type TreeEmptyStateRenderProps,
   type TreeRenderItemState,
+  evaluateRenderChildren,
 } from "@proyecto-viviana/solidaria-components";
 import type { Key, TreeItemData } from "@proyecto-viviana/solid-stately";
 import { ActionButtonGroupContext } from "../button/group-context";
@@ -40,19 +62,13 @@ import {
 } from "../button/spectrum-context";
 import { IconContext } from "../icon";
 import Checkmark from "../icon/ui-icons/Checkmark";
-import Chevron from "../icon/ui-icons/Chevron";
 import { ActionMenuContext } from "../menu/ActionMenu";
 import { ProgressCircle } from "../progress/ProgressCircle";
-import { useProviderProps } from "../provider";
+import { createButton, mergeProps, createStringFormatter } from "@proyecto-viviana/solidaria";
+import { s2IntlStrings } from "../intl";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import type { StyleString } from "../style";
-import {
-  baseColor,
-  colorMix,
-  focusRing,
-  fontRelative,
-  space,
-  style,
-} from "../style" with { type: "macro" };
+import { baseColor, css, focusRing, space, style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import { edgeToText } from "../style/spectrum-theme" with { type: "macro" };
 import type { UnsafeClassName } from "../s2-internal/style-utils";
@@ -61,6 +77,8 @@ import {
   getAllowedOverrides,
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { Text, TextContext } from "../text";
+import { TextField } from "../textfield";
+import { attrString, splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type TreeSelectionStyle = "checkbox" | "highlight";
 export type TreeLoadingState =
@@ -81,6 +99,11 @@ export interface TreeProps<T extends object> extends Omit<
   items?: TreeItemData<T>[];
   /** Whether selection is shown with checkboxes or highlighted rows. @default 'checkbox' */
   selectionStyle?: TreeSelectionStyle;
+  /**
+   * Row height. `compact` is the 24px layer-tree row and expand control.
+   * Omitted and `regular` stay the 40px row.
+   */
+  density?: "regular" | "compact";
   /** Loading state forwarded to load-more behavior. */
   loadingState?: TreeLoadingState;
   /** Provides an action bar when items are selected. */
@@ -101,6 +124,18 @@ export interface TreeProps<T extends object> extends Omit<
   label?: JSX.Element;
   /** Legacy description helper. */
   description?: JSX.Element;
+  /**
+   * Commits an in-place label edit. Passing it enables F2 or a double press
+   * on the label. Enter commits, Escape cancels, and blur commits.
+   */
+  onRename?: (key: Key, name: string) => void;
+  /**
+   * Keys whose detail control is open. Child rows stay on expandedKeys.
+   * Omit it to keep the detail state inside the tree.
+   */
+  detailExpandedKeys?: Iterable<Key>;
+  /** Called when the detail control toggles a key. */
+  onDetailExpandedChange?: (keys: Set<Key>) => void;
 }
 
 export interface TreeItemProps<T extends object> extends Omit<
@@ -115,6 +150,11 @@ export interface TreeItemProps<T extends object> extends Omit<
   isDisabled?: boolean;
   /** Whether this item has children that may not be loaded yet. */
   hasChildItems?: boolean;
+  /**
+   * Shows the detail control. It toggles detailExpandedKeys only.
+   * Child rows stay on the tree expandedKeys control.
+   */
+  hasDetail?: boolean;
   /** Link target metadata. */
   href?: HeadlessTreeItemProps<T>["href"];
   target?: HeadlessTreeItemProps<T>["target"];
@@ -172,17 +212,21 @@ export interface TreeLoadMoreItemProps {
 
 type StaticTreeItem = {
   id: Key;
+  parentId?: Key;
   textValue?: string;
   isDisabled?: boolean;
   hasChildItems?: boolean;
   props: TreeItemProps<object>;
+  children?: StaticTreeItem[];
 };
 
 type ItemRegistration = {
   id: Key;
+  parentId?: Key;
   textValue?: string;
   isDisabled?: boolean;
   hasChildItems?: boolean;
+  hasDetail?: boolean;
   props?: TreeItemProps<object>;
 };
 
@@ -192,15 +236,62 @@ interface StaticCollectionContextValue {
   unregisterItem(id: Key): void;
 }
 
+interface TreeRenameFieldSession {
+  commit: (name: string) => void;
+  cancel: () => void;
+}
+
+interface TreeRenameController {
+  enabled: () => boolean;
+  editingKey: () => Key | null;
+  initialName: (key: Key) => string;
+  begin: (key: Key, name: string) => void;
+  commit: (key: Key, name: string) => void;
+  cancel: (key: Key) => void;
+  restoreRowFocus: (key: Key) => void;
+  register: (element: HTMLElement, session: TreeRenameFieldSession) => void;
+  unregister: (element: HTMLElement) => void;
+}
+
+interface TreeDetailController {
+  isExpanded: (key: Key) => boolean;
+  toggle: (key: Key) => void;
+}
+
 interface TreeViewContextValue {
   selectionStyle: TreeSelectionStyle;
+  density: "regular" | "compact";
+  rename: TreeRenameController;
+  detail: TreeDetailController;
 }
 
+const idleTreeRename: TreeRenameController = {
+  enabled: () => false,
+  editingKey: () => null,
+  initialName: () => "",
+  begin() {},
+  commit() {},
+  cancel() {},
+  restoreRowFocus() {},
+  register() {},
+  unregister() {},
+};
+
+const idleTreeDetail: TreeDetailController = {
+  isExpanded: () => false,
+  toggle() {},
+};
+
 export const TreeViewContext = createContext<SpectrumContextValue<TreeProps<object>>>(null);
 const InternalTreeViewContext = createContext<TreeViewContextValue>({
   selectionStyle: "checkbox",
+  density: "regular",
+  rename: idleTreeRename,
+  detail: idleTreeDetail,
 });
 const StaticTreeCollectionContext = createContext<StaticCollectionContextValue | null>(null);
+const StaticTreeParentContext = createContext<Key | null>(null);
+const SuppressNestedTreeItems = createContext(false);
 
 const treeViewWrapper = style(
   {
@@ -259,12 +350,10 @@ const emptyState = style({
   font: "body-sm",
 });
 
-const selectedBackground = colorMix("gray-25", "gray-900", 7);
-const selectedActiveBackground = colorMix("gray-25", "gray-900", 10);
-
 type TreeRowLayerProps = Partial<TreeItemRenderProps> & {
   isLink?: boolean;
   selectionStyle?: TreeSelectionStyle;
+  density?: "regular" | "compact";
 };
 
 const treeViewItem = style<TreeRowLayerProps>({
@@ -275,9 +364,10 @@ const treeViewItem = style<TreeRowLayerProps>({
   gridColumnEnd: -1,
   display: "grid",
   gridTemplateAreas: [
-    ". checkbox level-padding expand-button icon label actions actionmenu",
-    ". checkbox level-padding expand-button icon description actions actionmenu",
+    ". checkbox level-padding expand-button icon label actions actionmenu detail-button",
+    ". checkbox level-padding expand-button icon description actions actionmenu detail-button",
   ],
+  /* Empty when the row has no detail control, so the label start stays put. */
   gridTemplateColumns: [
     edgeToText(40),
     "auto",
@@ -287,6 +377,7 @@ const treeViewItem = style<TreeRowLayerProps>({
     "minmax(0,1fr)",
     "minmax(0,auto)",
     "auto",
+    "auto",
   ],
   gridTemplateRows: "1fr auto",
   alignItems: "baseline",
@@ -295,7 +386,14 @@ const treeViewItem = style<TreeRowLayerProps>({
   },
   columnGap: 0,
   paddingX: 0,
-  minHeight: 40,
+  /* Compact is the layer-tree row. Omitted and regular stay the 40px row. */
+  minHeight: {
+    default: 40,
+    density: {
+      compact: 24,
+      regular: 40,
+    },
+  },
   paddingY: 0,
   boxSizing: "border-box",
   textDecoration: "none",
@@ -331,30 +429,36 @@ const treeViewRowBackground = style<TreeRowLayerProps>({
   inset: 0,
   backgroundColor: {
     default: "gray-25",
+    /* Glasselated: the register paints tree rows with its own three-step row
+     * vocabulary — `--surface-hover` under the pointer, `--surface-active-soft`
+     * on the current row, `--surface-active` when the current row is also
+     * hovered or pressed. It draws one "current row" look regardless of how the
+     * row got selected, so both selection styles land on the same fills. */
     isHovered: {
-      default: "gray-900/5",
+      default: "surface-hover",
       selectionStyle: {
-        checkbox: selectedBackground,
+        checkbox: "[var(--surface-active-soft)]",
       },
     },
     isPressed: {
-      default: "gray-900/10",
+      default: "[var(--surface-active)]",
       selectionStyle: {
-        checkbox: selectedActiveBackground,
+        checkbox: "[var(--surface-active)]",
       },
     },
     isSelected: {
+      default: "[var(--surface-active-soft)]",
       selectionStyle: {
         checkbox: {
-          default: selectedBackground,
-          isHovered: selectedActiveBackground,
-          isPressed: selectedActiveBackground,
-          isFocusVisible: selectedActiveBackground,
+          default: "[var(--surface-active-soft)]",
+          isHovered: "[var(--surface-active)]",
+          isPressed: "[var(--surface-active)]",
+          isFocusVisible: "[var(--surface-active)]",
         },
         highlight: {
-          default: colorMix("gray-25", "blue-900", 10),
-          isHovered: colorMix("gray-25", "blue-900", 15),
-          isPressed: colorMix("gray-25", "blue-900", 15),
+          default: "[var(--surface-active-soft)]",
+          isHovered: "[var(--surface-active)]",
+          isPressed: "[var(--surface-active)]",
         },
       },
     },
@@ -407,7 +511,14 @@ const treeExpandButton = style<TreeRowLayerProps>({
   gridArea: "expand-button",
   alignSelf: "center",
   justifySelf: "center",
-  size: 40,
+  /* Same density as the row: compact is 24px, otherwise 40px. */
+  size: {
+    default: 40,
+    density: {
+      compact: 24,
+      regular: 40,
+    },
+  },
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -432,15 +543,57 @@ const treeExpandButton = style<TreeRowLayerProps>({
   disableTapHighlight: true,
 });
 
-const treeExpandIcon = style<TreeRowLayerProps>({
+/* Same hit target as the child chevron. It does not use that button's slot. */
+const treeDetailButton = style<TreeRowLayerProps>({
+  gridArea: "detail-button",
+  alignSelf: "center",
+  justifySelf: "center",
+  size: {
+    default: 40,
+    density: {
+      compact: 24,
+      regular: 40,
+    },
+  },
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderWidth: 0,
+  backgroundColor: "transparent",
+  color: {
+    default: "inherit",
+    isDisabled: {
+      default: "disabled",
+      forcedColors: "GrayText",
+    },
+  },
+  borderRadius: "default",
+  cursor: {
+    default: "default",
+    isDisabled: "not-allowed",
+  },
+  disableTapHighlight: true,
+});
+
+/* Glasselated: the register draws an OUTLINE tree — the disclosure affordance is
+ * the same mono ">" mark the nav rail and the list rows use, rotated 90° when the
+ * branch is open, not a filled chevron glyph. */
+const treeExpandMark = style<TreeRowLayerProps>({
+  fontFamily: "code",
+  fontSize: "[12px]",
+  fontWeight: "semi-bold",
+  lineHeight: "[1]",
+  color: {
+    default: "[var(--accent-primary)]",
+    isDisabled: {
+      default: "disabled",
+      forcedColors: "GrayText",
+    },
+  },
   rotate: {
     isExpanded: 90,
   },
   transition: "default",
-  "--iconPrimary": {
-    type: "fill",
-    value: "currentColor",
-  },
 });
 
 const treeCheckbox = style({
@@ -503,7 +656,7 @@ const treeSlotIcon = style({
   gridArea: "icon",
   gridRowEnd: "span 2",
   display: "block",
-  size: fontRelative(20),
+  size: "1lh",
   alignSelf: "center",
   marginEnd: "text-to-visual",
   "--iconPrimary": {
@@ -517,6 +670,10 @@ const treeLabel = style<TreeRowLayerProps>({
   minWidth: 0,
   alignSelf: "center",
   font: controlFont(),
+  /* Glasselated: tree rows are list rows — mono 12.5/600, same as ListView. */
+  fontFamily: "code",
+  fontSize: "[12.5px]",
+  fontWeight: "semi-bold",
   color: "inherit",
   overflow: "hidden",
   textOverflow: "ellipsis",
@@ -528,8 +685,10 @@ const treeDescription = style<TreeRowLayerProps>({
   minWidth: 0,
   alignSelf: "center",
   font: "ui-sm",
+  fontFamily: "code",
+  fontSize: "[11px]",
   color: {
-    default: baseColor("neutral-subdued"),
+    default: "[var(--terminal-dim)]",
     isDisabled: {
       default: "disabled",
       forcedColors: "GrayText",
@@ -554,6 +713,36 @@ const treeActionMenu = style({
   alignSelf: "center",
 });
 
+const treeSlotLayout = css(`
+  [slot="icon"], [data-slot="icon"], [data-rsp-slot="icon"] {
+    grid-area: icon;
+    grid-row-end: span 2;
+    align-self: center;
+  }
+  [slot="actions"], [data-slot="actions"], [data-rsp-slot="actions"] {
+    grid-area: actions;
+    grid-row-end: span 2;
+    align-self: center;
+    justify-self: end;
+  }
+  [slot="actionmenu"], [data-slot="actionmenu"], [data-rsp-slot="actionmenu"] {
+    grid-area: actionmenu;
+    grid-row-end: span 2;
+    align-self: center;
+  }
+  [slot="label"], [data-slot="label"], [data-rsp-slot="label"] {
+    grid-area: label;
+  }
+  [slot="description"], [data-slot="description"], [data-rsp-slot="description"] {
+    grid-area: description;
+  }
+  [data-renaming] [slot="label"],
+  [data-renaming] [data-slot="label"],
+  [data-renaming] [data-rsp-slot="label"] {
+    display: none;
+  }
+`);
+
 const treeLoadMore = style({
   minHeight: 32,
   display: "flex",
@@ -562,69 +751,199 @@ const treeLoadMore = style({
   color: "neutral-subdued",
 });
 
-function replaceManagedClass(element: Element, dataAttribute: string, nextClass: string): void {
-  const previousClass = element.getAttribute(dataAttribute);
-
-  for (const className of previousClass?.split(/\s+/).filter(Boolean) ?? []) {
-    element.classList.remove(className);
+const renameFieldSessions = new WeakMap<HTMLElement, TreeRenameFieldSession>();
+let renameKeyListenerCount = 0;
+
+function renameSessionFromEvent(
+  event: Event,
+): { field: HTMLElement; session: TreeRenameFieldSession } | null {
+  const target = event.target;
+  if (!(target instanceof Node)) return null;
+  let element: Element | null = target instanceof Element ? target : target.parentElement;
+  while (element) {
+    if (element instanceof HTMLElement) {
+      const session = renameFieldSessions.get(element);
+      if (session) return { field: element, session };
+    }
+    element = element.parentElement;
   }
+  return null;
+}
 
-  for (const className of nextClass.split(/\s+/).filter(Boolean)) {
-    element.classList.add(className);
+// Document capture is ahead of the row arrow walk and the tree typeahead.
+// Stopping here keeps the key in the input and leaves the browser default
+// (caret movement, inserted text) intact.
+function onDocumentRenameKeyDown(event: KeyboardEvent) {
+  const match = renameSessionFromEvent(event);
+  if (!match) return;
+  if (event.isComposing || event.keyCode === 229) {
+    event.stopImmediatePropagation();
+    return;
+  }
+  if (event.key === "Enter") {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const input = match.field.querySelector("input");
+    match.session.commit(input instanceof HTMLInputElement ? input.value : "");
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    match.session.cancel();
+    return;
   }
+  event.stopImmediatePropagation();
+}
 
-  element.setAttribute(dataAttribute, nextClass);
+function rowIsDisabled(row: HTMLElement): boolean {
+  return row.dataset.disabled != null || row.getAttribute("aria-disabled") === "true";
 }
 
-function applyItemSlotClasses(
-  root: HTMLElement | undefined,
-  renderProps: TreeItemRenderProps,
-  context: TreeViewContextValue,
-): void {
-  if (!root) {
-    return;
+function renameLabelText(row: HTMLElement): string {
+  const label = row.querySelector<HTMLElement>(
+    "[data-rsp-slot='label'], [slot='label'], [data-slot='label']",
+  );
+  const visible = label && !label.closest("[data-tree-rename]") ? label.textContent : null;
+  const text = visible ?? row.getAttribute("aria-label") ?? "";
+  return text.replace(/\s+/g, " ").trim();
+}
+
+function isRenameLabelTarget(row: HTMLElement, target: EventTarget | null): boolean {
+  if (!(target instanceof Element) || !row.contains(target)) return false;
+  if (
+    target.closest(
+      "[data-tree-rename], [data-rsp-slot='expand-button'], [data-rsp-slot='selection-indicator'], [data-rsp-slot='actionmenu'], [data-rsp-slot='actions'], input, textarea, button, a",
+    )
+  ) {
+    return false;
+  }
+  const label = target.closest("[data-rsp-slot='label'], [slot='label'], [data-slot='label']");
+  return label instanceof Element && row.contains(label);
+}
+
+function hideRenameLabels(row: HTMLElement, editing: boolean) {
+  row.toggleAttribute("data-renaming", editing);
+  const labels = row.querySelectorAll<HTMLElement>(
+    "[data-rsp-slot='label'], [slot='label'], [data-slot='label']",
+  );
+  for (const label of labels) {
+    if (label.closest("[data-tree-rename]")) continue;
+    label.hidden = editing;
   }
+}
 
-  const state = {
-    ...renderProps,
-    selectionStyle: context.selectionStyle,
+function writeUnlessDisposed(owner: Owner | null, write: () => void) {
+  if (owner && isDisposed(owner)) return;
+  runWithOwner(null, write);
+}
+
+function TreeRenameField(props: { itemKey: Key; initialName: string; class: string }): JSX.Element {
+  const { rename } = useContext(InternalTreeViewContext);
+  const [field, setField] = createSignal<HTMLDivElement | undefined>(undefined, {
+    ownedWrite: true,
+  });
+  const fieldOwner = getOwner();
+  let settled = false;
+
+  const currentName = () => {
+    const input = field()?.querySelector("input");
+    return input instanceof HTMLInputElement ? input.value : props.initialName;
   };
 
-  const gridCell = root.querySelector('[role="gridcell"]');
-  if (gridCell) {
-    replaceManagedClass(gridCell, "data-s2-treeview-cell-class", treeViewItemCell);
-  }
+  const commit = (name: string, restore: boolean) => {
+    if (settled) return;
+    settled = true;
+    if (fieldOwner && isDisposed(fieldOwner)) return;
+    rename.commit(props.itemKey, name);
+    if (restore) rename.restoreRowFocus(props.itemKey);
+  };
 
-  for (const element of Array.from(
-    root.querySelectorAll('[slot="label"], [data-slot="label"], [data-rsp-slot="label"]'),
-  )) {
-    replaceManagedClass(element, "data-s2-treeview-slot-class", treeLabel(state));
-    element.setAttribute("data-rsp-slot", "label");
-  }
+  const cancel = () => {
+    if (settled) return;
+    settled = true;
+    if (fieldOwner && isDisposed(fieldOwner)) return;
+    rename.cancel(props.itemKey);
+    rename.restoreRowFocus(props.itemKey);
+  };
 
-  for (const element of Array.from(
-    root.querySelectorAll(
-      '[slot="description"], [data-slot="description"], [data-rsp-slot="description"]',
-    ),
-  )) {
-    replaceManagedClass(element, "data-s2-treeview-slot-class", treeDescription(state));
-    element.setAttribute("data-rsp-slot", "description");
-  }
+  createEffect(
+    () => field(),
+    (element) => {
+      if (!element) return;
+      rename.register(element, {
+        commit: (name) => commit(name, true),
+        cancel,
+      });
+      return () => {
+        settled = true;
+        rename.unregister(element);
+      };
+    },
+  );
 
-  for (const element of Array.from(root.querySelectorAll('[slot="icon"], [data-slot="icon"]'))) {
-    replaceManagedClass(element, "data-s2-treeview-slot-class", treeSlotIcon);
-    element.setAttribute("data-rsp-slot", "icon");
-  }
+  const focusInput = (select = false) => {
+    if (settled) return;
+    const element = field();
+    if (!element?.isConnected) return;
+    const input = element.querySelector("input");
+    if (!(input instanceof HTMLInputElement)) return;
+    input.focus();
+    // Select on entry only; protective refocus must preserve the editing caret.
+    if (select) input.select();
+  };
 
-  for (const element of Array.from(root.querySelectorAll('[slot="actions"]'))) {
-    replaceManagedClass(element, "data-s2-treeview-slot-class", treeActions);
-    element.setAttribute("data-rsp-slot", "actions");
-  }
+  // Focus after the tree's row effect. A synchronous focus inside this effect
+  // lets that effect take the row and blur the field into a commit.
+  createEffect(
+    () => field(),
+    (element) => {
+      if (!element) return;
+      queueMicrotask(() => focusInput(true));
+    },
+  );
 
-  for (const element of Array.from(root.querySelectorAll('[slot="actionmenu"]'))) {
-    replaceManagedClass(element, "data-s2-treeview-slot-class", treeActionMenu);
-    element.setAttribute("data-rsp-slot", "actionmenu");
-  }
+  const stop = (event: Event) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <div
+      ref={setField}
+      class={props.class}
+      data-tree-rename=""
+      onPointerDown={stop}
+      onMouseDown={stop}
+      onClick={stop}
+      onDblClick={stop}
+    >
+      <TextField
+        aria-label={props.initialName}
+        size="S"
+        defaultValue={props.initialName}
+        onBlur={(event) => {
+          if (settled) return;
+          const element = field();
+          if (!element?.isConnected) return;
+          const next = event.relatedTarget;
+          if (next instanceof Node && element.contains(next)) return;
+          const row = element.closest("[data-tree-view-item]");
+          const active = document.activeElement;
+          const staysOnRow =
+            (next instanceof Node && !!row?.contains(next)) ||
+            (active instanceof Node &&
+              active !== element &&
+              !element.contains(active) &&
+              !!row?.contains(active));
+          if (staysOnRow) {
+            queueMicrotask(focusInput);
+            return;
+          }
+          commit(currentName(), false);
+        }}
+      />
+    </div>
+  );
 }
 
 function selectedKeySet(keys: "all" | Iterable<Key> | undefined): "all" | Set<Key> {
@@ -648,14 +967,34 @@ function isTextOnlyChildren(value: unknown): boolean {
 }
 
 function treeItemFromStatic(item: StaticTreeItem): TreeItemData<object> {
+  const children = item.children?.map(treeItemFromStatic);
   return {
     id: item.id,
     key: item.id,
     value: item.props as object,
     textValue: item.textValue ?? String(item.id),
     isDisabled: item.isDisabled,
-    hasChildItems: item.hasChildItems,
+    hasChildItems: item.hasChildItems || Boolean(children?.length),
+    children: children?.length ? children : undefined,
+  };
+}
+
+function nestStaticTreeItems(items: StaticTreeItem[]): StaticTreeItem[] {
+  const byParent = new Map<Key | null, StaticTreeItem[]>();
+  for (const item of items) {
+    const parentKey = item.parentId ?? null;
+    const group = byParent.get(parentKey);
+    if (group) group.push(item);
+    else byParent.set(parentKey, [item]);
+  }
+  const seen = new Set<Key>();
+  const nest = (item: StaticTreeItem): StaticTreeItem => {
+    if (seen.has(item.id)) return item;
+    seen.add(item.id);
+    const children = byParent.get(item.id)?.map(nest);
+    return children?.length ? { ...item, children } : item;
   };
+  return (byParent.get(null) ?? []).map(nest);
 }
 
 function mergeRegisteredTreeItems<T extends object>(
@@ -685,12 +1024,20 @@ function mergeRegisteredTreeItems<T extends object>(
 }
 
 export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as TreeProps<T> & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(
     useContext(TreeViewContext) as SpectrumContextValue<TreeProps<T>>,
     props.slot,
   );
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props) as TreeProps<T>;
+  const mergedProps = mergeProps<TreeProps<T>>(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "children",
     "items",
@@ -705,13 +1052,19 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     "ref",
     "label",
     "description",
+    "density",
     "hasMore",
     "onLoadMore",
+    "onRename",
+    "detailExpandedKeys",
+    "onDetailExpandedChange",
   ]);
   const selectionStyle = (): TreeSelectionStyle => local.selectionStyle ?? "checkbox";
+  const density = (): "regular" | "compact" =>
+    local.density === "compact" ? "compact" : "regular";
   const isLoading = () => local.loadingState === "loading" || local.loadingState === "loadingMore";
-  const [staticItems, setStaticItems] = createSignal<StaticTreeItem[]>([]);
-  const [registrationVersion, setRegistrationVersion] = createSignal(0);
+  const [staticItems, setStaticItems] = createSignal<StaticTreeItem[]>([], { ownedWrite: true });
+  const [registrationVersion, setRegistrationVersion] = createSignal(0, { ownedWrite: true });
   const registeredItems = new Map<Key, ItemRegistration>();
   const usesStaticChildren = () => local.items == null;
   const syncRegisteredItems = () => {
@@ -720,6 +1073,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
         .filter((item) => item.props)
         .map((item) => ({
           id: item.id,
+          parentId: item.parentId,
           textValue: item.textValue,
           isDisabled: item.isDisabled,
           hasChildItems: item.hasChildItems,
@@ -736,9 +1090,11 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       const previous = registeredItems.get(item.id);
       if (
         previous &&
+        previous.parentId === item.parentId &&
         previous.textValue === item.textValue &&
         previous.isDisabled === item.isDisabled &&
         previous.hasChildItems === item.hasChildItems &&
+        previous.hasDetail === item.hasDetail &&
         previous.props === item.props
       ) {
         return;
@@ -753,8 +1109,105 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       }
     },
   };
+  const treeOwner = getOwner();
+  const [editingKey, setEditingKey] = createSignal<Key | null>(null);
+  const initialNames = new Map<Key, string>();
+  let renameFrame: HTMLDivElement | undefined;
+  const writeEditingKey = (key: Key | null) => {
+    // Blur can commit while this tree is disposing (#623).
+    writeUnlessDisposed(treeOwner, () => setEditingKey(key));
+  };
+  const restoreRowFocus = (key: Key) => {
+    queueMicrotask(() => {
+      if (treeOwner && isDisposed(treeOwner)) return;
+      const root = renameFrame;
+      if (!root) return;
+      const row = root.querySelector<HTMLElement>(
+        `[data-tree-view-item][data-key="${CSS.escape(String(key))}"]`,
+      );
+      row?.focus();
+    });
+  };
+  const rename: TreeRenameController = {
+    enabled: () => local.onRename != null,
+    editingKey,
+    initialName(key) {
+      return initialNames.get(key) ?? "";
+    },
+    begin(key, name) {
+      if (local.onRename == null || editingKey() === key) return;
+      initialNames.set(key, name);
+      writeEditingKey(key);
+    },
+    commit(key, name) {
+      const callback = local.onRename;
+      if (editingKey() === key) {
+        writeEditingKey(null);
+        initialNames.delete(key);
+      }
+      if (treeOwner && isDisposed(treeOwner)) return;
+      callback?.(key, name);
+    },
+    cancel(key) {
+      if (editingKey() !== key) return;
+      writeEditingKey(null);
+      initialNames.delete(key);
+    },
+    restoreRowFocus,
+    register(element, session) {
+      renameFieldSessions.set(element, session);
+    },
+    unregister(element) {
+      renameFieldSessions.delete(element);
+    },
+  };
+  createEffect(
+    () => local.onRename != null,
+    (enabled) => {
+      if (!enabled) return;
+      if (renameKeyListenerCount === 0) {
+        document.addEventListener("keydown", onDocumentRenameKeyDown, true);
+      }
+      renameKeyListenerCount += 1;
+      return () => {
+        renameKeyListenerCount -= 1;
+        if (renameKeyListenerCount === 0) {
+          document.removeEventListener("keydown", onDocumentRenameKeyDown, true);
+        }
+      };
+    },
+  );
+  const [uncontrolledDetailKeys, setUncontrolledDetailKeys] = createSignal<Set<Key>>(new Set(), {
+    ownedWrite: true,
+  });
+  const detailExpandedSet = createMemo(() => {
+    const provided = local.detailExpandedKeys;
+    if (provided != null) return new Set<Key>(provided);
+    return uncontrolledDetailKeys();
+  });
+  const toggleDetail = (key: Key) => {
+    const next = new Set(detailExpandedSet());
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    if (local.detailExpandedKeys == null) {
+      writeUnlessDisposed(treeOwner, () => setUncontrolledDetailKeys(next));
+    }
+    if (treeOwner && isDisposed(treeOwner)) return;
+    local.onDetailExpandedChange?.(next);
+  };
+  const detail: TreeDetailController = {
+    isExpanded(key) {
+      return detailExpandedSet().has(key);
+    },
+    toggle(key) {
+      toggleDetail(key);
+    },
+  };
   const treeContext = createMemo<TreeViewContextValue>(() => ({
     selectionStyle: selectionStyle(),
+    density: density(),
+    rename,
+    detail,
   }));
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
   const mergedUnsafeStyle = () =>
@@ -766,7 +1219,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   const collectionItems = createMemo(() => {
     registrationVersion();
     if (usesStaticChildren()) {
-      return staticItems().map(treeItemFromStatic) as TreeItemData<T>[];
+      return nestStaticTreeItems(staticItems()).map(treeItemFromStatic) as TreeItemData<T>[];
     }
 
     return (local.items ?? []) as TreeItemData<T>[];
@@ -776,12 +1229,14 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   );
   const [actionSelectedKeys, setActionSelectedKeys] = createSignal<"all" | Set<Key>>(
     selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
+    { ownedWrite: true },
+  );
+  createEffect(
+    () => selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
+    (keys) => {
+      setActionSelectedKeys(keys);
+    },
   );
-  createEffect(() => {
-    setActionSelectedKeys(
-      selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),
-    );
-  });
   const onSelectionChange = (keys: "all" | Set<Key>) => {
     setActionSelectedKeys(keys === "all" ? "all" : new Set(keys));
     headlessProps.onSelectionChange?.(keys);
@@ -798,8 +1253,8 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
     ]
       .filter(Boolean)
       .join(" ");
-  const renderEmptyState = () => (
-    <div class={emptyState}>{headlessProps.renderEmptyState?.() ?? "No items"}</div>
+  const renderEmptyState = (emptyProps: TreeEmptyStateRenderProps) => (
+    <div class={emptyState}>{headlessProps.renderEmptyState?.(emptyProps) ?? "No items"}</div>
   );
   const renderItem = (item: TreeItemData<T>, state: TreeRenderItemState) =>
     usesStaticChildren() ? (
@@ -844,9 +1299,16 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
 
     return renderRegistrationItems(local.items ?? []);
   };
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const loadMoreContent = () => (
     <div class={treeLoadMore} data-rsp-slot="load-more">
-      {isLoading() ? <ProgressCircle isIndeterminate size="S" aria-label="Loading more" /> : null}
+      {isLoading() ? (
+        <ProgressCircle
+          isIndeterminate
+          size="S"
+          aria-label={stringFormatter().format("table.loadingMore")}
+        />
+      ) : null}
     </div>
   );
 
@@ -860,13 +1322,13 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
   // the wrapper is `display: contents`, so layout is untouched.
   // (A Tree hydration abort that once looked like a return-shape problem was
   // actually a repeated `local.children` read in ResolvedItemContent /
-  // TreeItemContent — see the read-once comments there.)
+  // TreeItemContent — see the shared-evaluation comments there.)
   const collection = () => (
-    <InternalTreeViewContext.Provider value={treeContext()}>
+    <InternalTreeViewContext value={treeContext()}>
       <div hidden inert aria-hidden="true" style={{ display: "none" }}>
-        <StaticTreeCollectionContext.Provider value={registrationContext}>
+        <StaticTreeCollectionContext value={registrationContext}>
           {registrationChildren()}
-        </StaticTreeCollectionContext.Provider>
+        </StaticTreeCollectionContext>
       </div>
       <HeadlessTree
         {...headlessProps}
@@ -885,17 +1347,21 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
         style={mergedUnsafeStyle()}
         data-tree-view=""
         data-selection-style={selectionStyle()}
+        data-density={density()}
         data-loading-state={local.loadingState ?? undefined}
       >
         {(item: TreeItemData<T>, state: TreeRenderItemState) => renderItem(item, state)}
       </HeadlessTree>
-    </InternalTreeViewContext.Provider>
+    </InternalTreeViewContext>
   );
 
   const hasChrome = () => Boolean(local.label || local.description || local.renderActionBar);
 
   return (
     <div
+      ref={(element: HTMLDivElement) => {
+        renameFrame = element;
+      }}
       class={hasChrome() ? treeViewWrapper(null, mergedStyles()) : undefined}
       style={hasChrome() ? mergedUnsafeStyle() : { display: "contents" }}
     >
@@ -908,13 +1374,18 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
 }
 
 export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element {
+  if (useContext(SuppressNestedTreeItems)) {
+    return null;
+  }
   const context = useContext(InternalTreeViewContext);
   const staticCollection = useContext(StaticTreeCollectionContext);
+  const staticParentId = useContext(StaticTreeParentContext);
   const collectionState = useContext(HeadlessTreeStateContext);
   const [local, headlessProps] = splitProps(props, [
     "children",
     "isDisabled",
     "hasChildItems",
+    "hasDetail",
     "href",
     "target",
     "download",
@@ -932,16 +1403,22 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
     "ref",
   ]);
 
-  createEffect(() => {
+  // A derived hasDetail installs its memo on read. Do that under this memo,
+  // not inside the registration effect.
+  const hasDetail = createMemo(() => !!local.hasDetail);
+
+  createTrackedEffect(() => {
     if (!staticCollection) {
       return;
     }
 
     staticCollection.registerItem({
       id: props.id,
-      textValue: headlessProps.textValue ?? headlessProps["aria-label"],
+      parentId: staticParentId ?? undefined,
+      textValue: attrString(headlessProps.textValue ?? headlessProps["aria-label"]),
       isDisabled: !!local.isDisabled,
       hasChildItems: !!local.hasChildItems,
+      hasDetail: hasDetail(),
       props: staticCollection.mode === "static" ? (props as TreeItemProps<object>) : undefined,
     });
   });
@@ -950,23 +1427,88 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
     staticCollection?.unregisterItem(props.id);
   });
 
+  const itemOwner = getOwner();
+  let renameRow: HTMLElement | undefined;
+  let detachRenameRow: (() => void) | undefined;
+  const [renameRowVersion, setRenameRowVersion] = createSignal(0, { ownedWrite: true });
+  onCleanup(() => detachRenameRow?.());
+  createEffect(
+    () => [renameRowVersion(), context.rename.editingKey()] as const,
+    ([, editingKey]) => {
+      const row = renameRow;
+      if (!row) return;
+      hideRenameLabels(row, editingKey === props.id);
+    },
+  );
+
+  function bindRenameRow(row: HTMLElement | null) {
+    detachRenameRow?.();
+    detachRenameRow = undefined;
+    renameRow = row ?? undefined;
+    if (!row || (itemOwner && isDisposed(itemOwner))) return;
+    let lastLabelAt = -1;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "F2" || !context.rename.enabled() || rowIsDisabled(row)) return;
+      const target = event.target;
+      if (!(target instanceof Node) || !row.contains(target)) return;
+      if (target instanceof Element && target.closest("[data-tree-rename], input, textarea")) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      context.rename.begin(props.id, renameLabelText(row));
+    };
+    const onPointer = (event: MouseEvent) => {
+      if (!context.rename.enabled() || rowIsDisabled(row)) return;
+      if (!isRenameLabelTarget(row, event.target)) return;
+      const now = event.timeStamp;
+      const repeated = lastLabelAt >= 0 && now - lastLabelAt < 500;
+      if (event.type === "click") lastLabelAt = now;
+      if (event.type !== "dblclick" && event.detail < 2 && !repeated) return;
+      event.preventDefault();
+      event.stopPropagation();
+      context.rename.begin(props.id, renameLabelText(row));
+    };
+    row.addEventListener("keydown", onKeyDown);
+    row.addEventListener("click", onPointer);
+    row.addEventListener("dblclick", onPointer);
+    detachRenameRow = () => {
+      row.removeEventListener("keydown", onKeyDown);
+      row.removeEventListener("click", onPointer);
+      row.removeEventListener("dblclick", onPointer);
+    };
+    writeUnlessDisposed(itemOwner, () => setRenameRowVersion((version) => version + 1));
+  }
+
+  // The probe must mount nested static items so they can register. The visible
+  // row suppresses those same nodes; the collection paints each as its own row.
+  if (staticCollection?.mode === "static") {
+    return (
+      <StaticTreeParentContext value={props.id}>
+        {(() => {
+          const children = local.children;
+          return typeof children === "function" ? null : children;
+        })()}
+      </StaticTreeParentContext>
+    );
+  }
+
   if (staticCollection) {
     return null;
   }
 
-  let itemElement: HTMLElement | undefined;
-  const assignItemRef = mergeContextRefs(local.ref, (element: HTMLElement) => {
-    itemElement = element;
-  });
+  const assignItemRef = mergeContextRefs(local.ref);
   const getRowLayerProps = (renderProps: TreeItemRenderProps): TreeRowLayerProps => ({
     ...renderProps,
     selectionStyle: context.selectionStyle,
+    density: context.density,
     isLink: !!local.href,
   });
   const getClassName = (renderProps: TreeItemRenderProps): string =>
     [
       local.UNSAFE_className,
       local.class,
+      treeSlotLayout,
       mergeStyles(
         treeViewItem({
           ...getRowLayerProps(renderProps),
@@ -1004,16 +1546,22 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
     !renderProps.isDisabled;
 
   function ItemChildren(renderProps: TreeItemRenderProps) {
-    createEffect(() => applyItemSlotClasses(itemElement, renderProps, context));
+    const slots = () => {
+      const state = getRowLayerProps(renderProps);
+      return {
+        default: { class: treeLabel(state), "data-rsp-slot": "label" },
+        label: { class: treeLabel(state), "data-rsp-slot": "label" },
+        description: { class: treeDescription(state), "data-rsp-slot": "description" },
+        icon: { class: treeSlotIcon, "data-rsp-slot": "icon" },
+        actions: { class: treeActions, "data-rsp-slot": "actions" },
+        actionmenu: { class: treeActionMenu, "data-rsp-slot": "actionmenu" },
+      };
+    };
 
     function ResolvedItemContent() {
-      const resolvedChildren = resolveChildren(() => {
-        // Read `local.children` once — a repeated props-children read re-instantiates child
-        // components on the server only, desynchronizing Solid's hydration keys and aborting
-        // hydration for the whole route. See Tab's ResolvedTabContent for the full note.
-        const rawChildren = local.children;
-        return typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren;
-      });
+      const resolvedChildren = resolveChildren(() =>
+        evaluateRenderChildren(local.children, renderProps),
+      );
       const childrenValue = () => resolvedChildren();
       const isTextOnly = () => isTextOnlyChildren(childrenValue());
 
@@ -1034,61 +1582,82 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
       );
     }
 
+    const editing = () => context.rename.editingKey() === props.id;
+
     return (
-      <TextContext.Provider value={textContext(renderProps) as SpectrumContextValue<any>}>
-        <IconContext.Provider
-          value={{
-            slot: "icon",
-            styles: treeSlotIcon,
-          }}
-        >
-          <ActionButtonGroupContext.Provider
-            value={{
-              slot: "actions",
-              size: "S",
-              styles: treeActions,
-            }}
-          >
-            <ActionMenuContext.Provider
+      <>
+        {editing() ? (
+          <TreeRenameField
+            itemKey={props.id}
+            initialName={context.rename.initialName(props.id)}
+            class={treeLabel(getRowLayerProps(renderProps))}
+          />
+        ) : null}
+        <SlotProvider slots={slots}>
+          <TextContext value={textContext(renderProps) as SpectrumContextValue<any>}>
+            <IconContext
               value={{
-                slot: "actionmenu",
-                size: "S",
-                menuSize: "S",
-                styles: treeActionMenu,
+                slot: "icon",
+                styles: treeSlotIcon,
               }}
             >
-              {shouldShowCheckbox(renderProps) ? (
-                <TreeSelectionCheckbox itemKey={props.id} renderProps={renderProps} />
-              ) : null}
-              <div
-                class={treeViewRowBackground(getRowLayerProps(renderProps))}
-                aria-hidden="true"
-              />
-              {renderProps.isFocusVisible ? (
-                <div
-                  class={treeViewRowFocusRing(getRowLayerProps(renderProps))}
-                  aria-hidden="true"
-                />
-              ) : null}
-              <span class={treeLevelPadding} aria-hidden="true" />
-              <TreeExpandButton renderProps={renderProps} />
-              {local.icon ? (
-                <span slot="icon" class={treeSlotIcon} data-rsp-slot="icon">
-                  {local.icon()}
-                </span>
-              ) : null}
-              <ResolvedItemContent />
-            </ActionMenuContext.Provider>
-          </ActionButtonGroupContext.Provider>
-        </IconContext.Provider>
-      </TextContext.Provider>
+              <ActionButtonGroupContext
+                value={{
+                  slot: "actions",
+                  size: "S",
+                  styles: treeActions,
+                }}
+              >
+                <ActionMenuContext
+                  value={{
+                    slot: "actionmenu",
+                    size: "S",
+                    menuSize: "S",
+                    styles: treeActionMenu,
+                  }}
+                >
+                  {shouldShowCheckbox(renderProps) ? (
+                    <TreeSelectionCheckbox itemKey={props.id} renderProps={renderProps} />
+                  ) : null}
+                  <div
+                    class={treeViewRowBackground(getRowLayerProps(renderProps))}
+                    aria-hidden="true"
+                  />
+                  {renderProps.isFocusVisible ? (
+                    <div
+                      class={treeViewRowFocusRing(getRowLayerProps(renderProps))}
+                      aria-hidden="true"
+                    />
+                  ) : null}
+                  <span class={treeLevelPadding} aria-hidden="true" />
+                  <TreeExpandButton renderProps={renderProps} />
+                  {hasDetail() ? (
+                    <TreeDetailButton itemKey={props.id} isDisabled={!!renderProps.isDisabled} />
+                  ) : null}
+                  {local.icon ? (
+                    <span slot="icon" class={treeSlotIcon} data-rsp-slot="icon">
+                      {local.icon()}
+                    </span>
+                  ) : null}
+                  <ResolvedItemContent />
+                </ActionMenuContext>
+              </ActionButtonGroupContext>
+            </IconContext>
+          </TextContext>
+        </SlotProvider>
+      </>
     );
   }
 
   return (
     <HeadlessTreeItem
       {...headlessProps}
-      ref={(element) => assignItemRef(element)}
+      id={props.id}
+      ref={(element) => {
+        assignItemRef(element);
+        bindRenameRow(element instanceof HTMLElement ? element : null);
+      }}
+      data-renaming={context.rename.editingKey() === props.id ? "" : undefined}
       hasChildItems={local.hasChildItems}
       isDisabled={local.isDisabled}
       href={local.href}
@@ -1106,22 +1675,31 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
       data-href={local.href || undefined}
       data-target={local.target || undefined}
       data-has-child-items={local.hasChildItems || undefined}
+      data-has-detail={hasDetail() ? "" : undefined}
+      data-detail-expanded={context.detail.isExpanded(props.id) ? "" : undefined}
     >
-      {(renderProps: TreeItemRenderProps) => <ItemChildren {...renderProps} />}
+      {(renderProps: TreeItemRenderProps) => (
+        <SuppressNestedTreeItems value={true}>
+          <ItemChildren {...renderProps} />
+        </SuppressNestedTreeItems>
+      )}
     </HeadlessTreeItem>
   );
 }
 
 export function TreeItemContent(props: TreeItemContentProps): JSX.Element {
+  if (useContext(StaticTreeCollectionContext)) {
+    return null;
+  }
   const [local, headlessProps] = splitProps(props, ["children", "class", "style"]);
 
   return (
     <HeadlessTreeItemContent {...headlessProps}>
       {(renderProps: HeadlessTreeItemContentRenderProps) => {
         const content = () => {
-          // Read `local.children` once — a repeated props-children read re-instantiates child
-          // components on the server only, desynchronizing Solid's hydration keys and aborting
-          // hydration for the whole route. See Tab's ResolvedTabContent for the full note.
+          // Share the authored-child value for classification and insertion here.
+          // Keep evaluation under this owner; repeated construction is not a
+          // universal getter-read rule or a global hydration-counter model.
           const rawChildren = local.children;
           return typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren;
         };
@@ -1138,16 +1716,58 @@ export function TreeItemContent(props: TreeItemContentProps): JSX.Element {
   );
 }
 
+function TreeDetailButton(props: { itemKey: Key; isDisabled: boolean }): JSX.Element {
+  const treeContext = useContext(InternalTreeViewContext);
+  const expanded = () => treeContext.detail.isExpanded(props.itemKey);
+  const renderState = (): TreeRowLayerProps => ({
+    isDisabled: props.isDisabled,
+    isExpanded: expanded(),
+    isExpandable: true,
+    density: treeContext.density,
+    selectionStyle: treeContext.selectionStyle,
+  });
+  const { buttonProps } = createButton({
+    elementType: "button",
+    get isDisabled() {
+      return props.isDisabled;
+    },
+    excludeFromTabOrder: true,
+    preventFocusOnPress: true,
+    onPress: () => {
+      if (props.isDisabled) return;
+      treeContext.detail.toggle(props.itemKey);
+    },
+  });
+
+  return (
+    <button
+      {...buttonProps}
+      class={treeDetailButton(renderState())}
+      data-rsp-slot="detail-button"
+      data-expanded={expanded() ? "" : undefined}
+      data-react-aria-prevent-focus=""
+      aria-expanded={expanded() ? "true" : "false"}
+      aria-label={expanded() ? "Hide details" : "Show details"}
+    >
+      <span aria-hidden="true" class={treeExpandMark({ ...renderState(), isExpanded: false })}>
+        {expanded() ? "–" : "+"}
+      </span>
+    </button>
+  );
+}
+
 export function TreeExpandButton(
   props: TreeExpandButtonProps & { renderProps?: TreeItemRenderProps },
 ): JSX.Element {
   const [local, headlessProps] = splitProps(props, ["class", "style", "children", "renderProps"]);
+  const treeContext = useContext(InternalTreeViewContext);
   const itemContext = useContext(HeadlessTreeItemContext);
   const isExpandable = () => Boolean(itemContext?.isExpandable ?? local.renderProps?.isExpandable);
   const renderState = () => ({
     ...(local.renderProps ?? {}),
     isExpandable: isExpandable(),
     isExpanded: Boolean(itemContext?.isExpanded ?? local.renderProps?.isExpanded),
+    density: treeContext.density,
   });
   const className = () => [treeExpandButton(renderState()), local.class].filter(Boolean).join(" ");
   const stopPlaceholderExpansion = (event: Event) => {
@@ -1160,7 +1780,7 @@ export function TreeExpandButton(
       <button
         {...headlessProps}
         type="button"
-        tabIndex={-1}
+        tabindex={-1}
         class={className()}
         style={local.style}
         aria-label="Expand"
@@ -1171,17 +1791,11 @@ export function TreeExpandButton(
         onMouseUp={stopPlaceholderExpansion}
         data-rsp-slot="expand-button"
       >
-        {(() => {
-          // Read `local.children` once — a repeated props-children read re-instantiates child
-          // components on the server only, desynchronizing Solid's hydration keys and aborting
-          // hydration for the whole route. See Tab's ResolvedTabContent for the full note.
-          const rawChildren = local.children;
-          return typeof rawChildren === "function"
-            ? rawChildren(renderState())
-            : (rawChildren ?? (
-                <Chevron size="S" class={treeExpandIcon({ ...renderState(), isExpanded: false })} />
-              ));
-        })()}
+        {evaluateRenderChildren(local.children, renderState()) ?? (
+          <span aria-hidden="true" class={treeExpandMark({ ...renderState(), isExpanded: false })}>
+            {">"}
+          </span>
+        )}
       </button>
     );
   }
@@ -1195,7 +1809,9 @@ export function TreeExpandButton(
     >
       {local.children ??
         (({ isExpanded }: { isExpanded: boolean }) => (
-          <Chevron size="S" class={treeExpandIcon({ ...renderState(), isExpanded })} />
+          <span aria-hidden="true" class={treeExpandMark({ ...renderState(), isExpanded })}>
+            {">"}
+          </span>
         ))}
     </HeadlessTreeExpandButton>
   );
@@ -1245,6 +1861,7 @@ export function TreeSelectionCheckbox(props: {
 
 export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
   const staticCollection = useContext(StaticTreeCollectionContext);
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const isLoading = () =>
     props.isLoading || props.loadingState === "loading" || props.loadingState === "loadingMore";
 
@@ -1264,7 +1881,11 @@ export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
       <div class={treeLoadMore} data-rsp-slot="load-more">
         {props.children ??
           (isLoading() ? (
-            <ProgressCircle isIndeterminate size="S" aria-label="Loading more" />
+            <ProgressCircle
+              isIndeterminate
+              size="S"
+              aria-label={stringFormatter().format("table.loadingMore")}
+            />
           ) : null)}
       </div>
     </HeadlessTreeLoadMoreItem>
@@ -1284,4 +1905,4 @@ export const TreeViewLoadMoreItem = TreeLoadMoreItem;
 export { Collection } from "@proyecto-viviana/solidaria-components";
 export { Text } from "../text";
 
-export type { Key, TreeItemData, TreeRenderItemState };
+export type { Key, TreeItemData, TreeRenderItemState, TreeRenderProps, TreeItemRenderProps };