@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/table/index.jsx

@@ -0,0 +1,1326 @@
+// Ported from react-aria-components (src/Table.tsx: Table, TableHeader, Column, ColumnResizer,
+// TableBody, TableFooter, Row, Cell, TableLoadMoreItem, ResizableTableContainer, TableContext,
+// TableStateContext, TableColumnResizeStateContext, TableOptionsContext / useTableOptions,
+// RowFocusContext), Apache-2.0, © Adobe.
+//
+// A table displays data in rows and columns: keyboard navigation, row selection (checkboxes via
+// `<Checkbox slot="selection">`), sorting, column resizing, expandable rows (treegrid), links, actions.
+// Rivet:
+// - The collection is built from the content (`collectionOf`, B5 build mode) into `./collection.ts`
+//   `TableCollection` (RAC's internal class), flattened by the expanded keys and filtered by the
+//   SelectableCollectionContext `filter` in a computed; `CollectionRendererContext.CollectionRoot`
+//   renders the header / body / footer sections keyed by node key (resumed rows are adopted).
+// - State: `../state/table.ts` `createTableState` (signals + plain data); the react-stately `TableState`
+//   view (collection + SelectionManager instances) is rebuilt per event / binding. Handlers are inline
+//   arrows calling `./behaviour.ts` / `../grid/behaviour.ts` free functions with KEYS, never nodes.
+// - `TableStateContext` / `TableColumnResizeStateContext` provide ACCESSORS of the state views
+//   (`useContext(TableStateContext)!()`), not the views (deviation: views hold class instances).
+// - `tableOptions()` = RAC `useTableOptions()` (cdk naming: no `use*`).
+// - Render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`); `data-*`
+//   state values `"true"`; `class` = RAC `className` (defaults `rv-Table`, `rv-TableHeader`, `rv-Column`,
+//   `rv-ColumnResizer`, `rv-TableBody`, `rv-TableFooter`, `rv-Row`, `rv-Cell`, `rv-TableLoadingIndicator`,
+//   `rv-ResizableTableContainer`).
+// - react-aria `useDescription` elements (sort, sortable column, long-press, resizer descriptions) are
+//   rendered by the Table as hidden siblings after the `<table>` (server HTML carries them; a `<div>`
+//   inside `<table>` would be foster-parented by the HTML parser).
+// - Selection checkbox / expand button ids derive from the table id + row key (byte-stable server HTML).
+// Deviations:
+// - Inside a `<CollectionVirtualizer layout={TableLayout}>` (RAC useElementType) every part renders a `div` with its role
+//   (the JSX of each part is duplicated per element type: one compiled template per tag, the native path untouched);
+//   the grid element is the scroll container (it forwards `scroll` to the renderer) and the focused key is persisted.
+// - Drag and drop (`dragAndDropHooks`, drop indicators, `slot="drag"` button) not wired yet (DnD lane).
+// - No `FocusScope` wrapper (nothing here reads its context); the SharedElementTransition scope is a `SharedElementContext` provider entry.
+// - Header placeholder cells (nested columns, react-stately level) render nothing — RAC renders
+//   `node.render` of a placeholder (no render: throws); RAC `Column` is a leaf, so RAC tables never
+//   have them.
+import { computed, createContext, provide, runWithOwner, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Portal, Show, clientEffect, ref as elementRef } from "@rivetjs/runtime/dom";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, collectionOf, createBranchComponent, createLeafComponent, renderNodeAt, } from "../collections/components.jsx";
+import { LoaderNode } from "../collections/base.js";
+import { createTableState, tableState } from "../state/table.js";
+import { resetGridFocusedKey } from "../state/grid.js";
+import { createTableColumnResizeState, tableColumnResizeState } from "../state/table-column-resize.js";
+import { gridBlur, gridCellClick, gridCellFocus, gridCellKeyDown, gridCellKeyDownCapture, gridCellKeyUp, gridCellPointerDown, gridCellPointerUp, gridFocus, gridKeyDown, gridKeyDownCapture, gridMouseDown, gridRowClick, gridRowDoubleClick, gridRowDragStart, gridRowFocus, gridRowKeyDown, gridRowKeyUp, gridRowPointerCancel, gridRowPointerDown, gridRowPointerUp, gridShared, highlightSelectionDescription, } from "../grid/behaviour.js";
+import { getRowLabelledBy, normalizeKey, tableCellProps, tableColumnHeaderPress, tableColumnHeaderPressable, tableColumnHeaderProps, tableGridProps, tableHeaderRowProps, tableProps, tableRowExpandPress, tableRowKeyDown, tableRowProps, tableSelectAllCheckboxChange, tableSelectAllCheckboxProps, tableSelectionCheckboxChange, tableSelectionCheckboxProps, tableSortDescription, } from "./behaviour.js";
+import { focusColumnResizer, tableColumnResizeProps } from "./column-resize.jsx";
+import { TableBodyNode, TableCellNode, TableCollection, TableColumnNode, TableFooterNode, TableHeaderNode, TableRowNode } from "./collection.js";
+import { strings as tableStrings } from "./intl.js";
+import { strings as racStrings } from "./rac-intl.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { pressClick, pressDragStart, pressKeyDown, pressMouseDown, pressPointerDown, pressPointerEnter, pressPointerLeave, pressPointerUp, } from "../button/press.js";
+import { ButtonContext } from "../button/index.jsx";
+import { CheckboxContext, CheckboxFieldContext } from "../checkbox/index.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { SharedElementContext } from "../shared-element-transition/transition.jsx";
+import { FieldInputContext, SelectableCollectionContext } from "../autocomplete/contexts.js";
+import { DEFAULT_SLOT, Provider, contextProps, mergeRefValues, renderProps, resumableContext, } from "../slots/index.jsx";
+import { dataBool, focusStateBlur, focusStateFocus, focusStateIn, hoverStateEnter, hoverStateLeave, hoverStateOver, } from "../utils/data-attrs.jsx";
+import { focusRingBlur, focusRingFocus, useFocusRing } from "../focus/focus-ring.jsx";
+import { isFocusVisible } from "../interactions/focus-visible.jsx";
+import { focusSafely, getFocusableTreeWalker } from "../focus/index.js";
+import { getItemElement } from "../collections/dom.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { isScrollable } from "../utils/dom.js";
+import { useId } from "../utils/id.js";
+import { useLocale } from "../i18n/index.js";
+import { loadMoreSentinel } from "../utils/load-more-sentinel.jsx";
+import { useRouter } from "../utils/links.jsx";
+import { hasLive, liveKeys } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+export { TableCollection } from "./collection.js";
+const read = (value) => (typeof value === "function" ? value() : value);
+// ---------------------------------------------------------------------------------------------
+// Contexts
+// ---------------------------------------------------------------------------------------------
+/** RAC `TableContext`: props for the Tables inside a component, optionally per `slot`. */
+export const TableContext = resumableContext(createContext(null, { id: "rv-table" }));
+/** RAC `TableStateContext` (Rivet: an accessor of the state view of the enclosing Table). */
+export const TableStateContext = resumableContext(createContext(null, { id: "rv-table-state" }));
+/** RAC `TableColumnResizeStateContext` (Rivet: an accessor; null outside a ResizableTableContainer). */
+export const TableColumnResizeStateContext = resumableContext(createContext(null, { id: "rv-table-column-resize-state" }));
+const TableOptionsContext = resumableContext(createContext(null, { id: "rv-table-options" }));
+/** Returns options from the parent `<Table>` component (RAC `useTableOptions`). */
+export function tableOptions() {
+    return useContext(TableOptionsContext);
+}
+/** RAC `RowFocusContext` (Rivet: `isFocusVisibleWithinRow` is an accessor). */
+export const RowFocusContext = resumableContext(createContext({ isFocusVisibleWithinRow: () => false }, { id: "rv-row-focus" }));
+const TableInternalContext = resumableContext(createContext(null, { id: "rv-table-internal" }));
+const ResizableTableContainerContext = resumableContext(createContext(null, { id: "rv-resizable-table-container" }));
+const ColumnResizerContext = resumableContext(createContext(null, { id: "rv-column-resizer" }));
+const columnOf = (c, key) => (c.getItem(key) ?? undefined);
+/** Wraps a Table to enable column resizing (ColumnResizer); measures the scrollable width. */
+export function ResizableTableContainer(props) {
+    const container = elementRef();
+    const containerRef = mergeRefValues(container, props.ref);
+    const tableRef = elementRef();
+    const tableWidth = signal(0);
+    clientEffect(() => {
+        // Walk up the DOM from the Table to the ResizableTableContainer and stop when we reach the first
+        // scrollable element: what we measure to determine column widths (scrollbar widths).
+        const root = container();
+        let table = tableRef();
+        while (table && table !== root && !isScrollable(table))
+            table = table.parentElement;
+        const scroll = table ?? null;
+        if (!scroll)
+            return;
+        tableWidth.set(scroll.clientWidth);
+        const view = scroll.ownerDocument.defaultView;
+        if (!view || typeof view.ResizeObserver === "undefined")
+            return;
+        const observer = new view.ResizeObserver(() => tableWidth.set(scroll.clientWidth));
+        observer.observe(scroll, { box: "border-box" });
+        return () => observer.disconnect();
+    });
+    // Locals only (PROPS-CAPTURE: a literal reading `props.x` captures the whole props object).
+    const { onResizeStart, onResize, onResizeEnd } = props;
+    const ctx = { tableWidth, tableRef: tableRef, onResizeStart, onResize, onResizeEnd };
+    const dom = globalDOMProps(props, ["style"]);
+    const className = props.class || "rv-ResizableTableContainer";
+    const style = props.style;
+    const children = props.children;
+    return (<div {...dom} ref={containerRef} class={className} style={style}>
+      {provide(ResizableTableContainerContext, ctx, () => renderSlot(children))}
+    </div>);
+}
+/** Global DOM events / attributes Table handles itself; the user's run from its own handler. */
+const TABLE_OWNED = ["onMouseDown", "onScroll", "style", "id"];
+/**
+ * A table displays data in rows and columns and enables a user to navigate its contents via
+ * directional navigation keys, and optionally supports row selection and sorting.
+ */
+export function Table(inProps) {
+    const [tableCtxProps, tableCtxRef] = contextProps(inProps, inProps.ref, TableContext);
+    // RAC TableInner: the Autocomplete's SelectableCollectionContext merges under the table props.
+    const [props, userRef] = contextProps(tableCtxProps, tableCtxRef, SelectableCollectionContext);
+    const container = useContext(ResizableTableContainerContext);
+    const renderer = useContext(CollectionRendererContext);
+    // Module component functions are not serializable: resolve the renderer at the call site (`(custom ?? Default).X(…)`).
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const sharedElements = {};
+    const isVirtualized = !!renderer.isVirtualized;
+    const { locale, direction } = useLocale();
+    // Separate selection options so collection components can read them via tableOptions().
+    const selectionMode = props.selectionMode ?? "none";
+    const selectionBehavior = props.selectionBehavior ?? "toggle";
+    // Locals only (PROPS-CAPTURE: literals / closures reading `props.x` capture the whole props object).
+    const { disallowEmptySelection, onRowAction, onCellAction, shouldSelectOnPressUp, keyboardNavigationBehavior, escapeKeyBehavior, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-details": ariaDetails, } = props;
+    const options = {
+        selectionMode,
+        selectionBehavior: selectionMode === "none" ? null : selectionBehavior,
+        disallowEmptySelection: !!disallowEmptySelection,
+        allowsDragging: false,
+    };
+    const children = props.children;
+    // Object-literal arrows (not call-argument arrows): the build computed captures them, so they must be
+    // resumable closures.
+    const build = {
+        content: () => provide(TableOptionsContext, options, () => Collection({ children })),
+        createCollection: () => new TableCollection(),
+    };
+    const built = collectionOf(build.content, build.createCollection);
+    const data = createTableState({
+        selectionMode,
+        selectionBehavior,
+        // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
+        selectedKeys: liveKeys(props, "selectedKeys"),
+        defaultSelectedKeys: props.defaultSelectedKeys,
+        onSelectionChange: props.onSelectionChange,
+        disallowEmptySelection: props.disallowEmptySelection,
+        disabledKeys: props.disabledKeys,
+        disabledBehavior: props.disabledBehavior ?? "all",
+        sortDescriptor: props.sortDescriptor,
+        onSortChange: props.onSortChange,
+        expandedKeys: liveKeys(props, "expandedKeys"),
+        defaultExpandedKeys: props.defaultExpandedKeys,
+        onExpandedChange: props.onExpandedChange,
+        treeColumn: props.treeColumn,
+    });
+    const filter = props.filter;
+    // RAC: collection.withExpandedKeys(expandedKeys), then UNSTABLE_useFilteredTableState(state, filter).
+    const collection = computed(() => {
+        const c = built().withExpandedKeys(data.expandedKeys.value());
+        return filter ? c.filter(filter) : c;
+    });
+    const shared = gridShared({ onRowAction, onCellAction, shouldSelectOnPressUp, keyboardNavigationBehavior });
+    const gridId = useId(props.id);
+    const view = () => ({ ...tableState(data, collection()), grid: shared, gridId });
+    const sortDescriptionId = gridId + "-sort-description";
+    const descriptionId = gridId + "-description";
+    const internal = {
+        data,
+        collection,
+        gridId,
+        locale,
+        direction,
+        isVirtualized,
+        sortableDescriptionId: gridId + "-sortable-description",
+        resizerDescriptionId: gridId + "-resizer-description",
+    };
+    const aria = {
+        id: gridId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-details": ariaDetails,
+        isVirtualized,
+        layoutDelegate: renderer.layoutDelegate,
+        escapeKeyBehavior,
+        keyboardNavigationBehavior,
+        onRowAction,
+        onCellAction,
+        shouldSelectOnPressUp,
+        locale,
+        direction,
+        descriptionId,
+        sortDescriptionId,
+    };
+    const disallowTypeAhead = props.disallowTypeAhead;
+    const shouldUseVirtualFocus = props.shouldUseVirtualFocus;
+    const onFocusInFromContext = props.onFocusIn;
+    // The grid handler props for the event's table element (keyboard delegate over its DOM layout).
+    const gridOf = (v, e) => tableGridProps({ ...aria, disallowTypeAhead: !!read(disallowTypeAhead) }, v, e.currentTarget);
+    const el = elementRef();
+    const rootRef = mergeRefValues(mergeRefValues(el, userRef), container?.tableRef);
+    // react-aria useHasTabbableChild (empty table with a tabbable child: the table leaves the tab order).
+    const hasTabbableChild = signal(false);
+    clientEffect(() => {
+        const root = el();
+        if (!root || collection().size !== 0)
+            return;
+        const update = () => hasTabbableChild.set(!!getFocusableTreeWalker(root, { tabbable: true }).nextNode());
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ["tabIndex", "disabled"] });
+        return () => observer.disconnect();
+    });
+    // useGridState: reset the focused key when its row leaves the collection.
+    // `blurred`: target of the last focusout to nowhere (Rivet: Chromium fires focusout when the focused row is
+    // removed, jsdom / React's detached-node events do not — a blur whose target left the DOM keeps focus in the grid).
+    const focusMemo = { last: null, blurred: null };
+    clientEffect(() => {
+        const c = collection();
+        const selection = data.selectionState;
+        const previous = untrack(selection.focusedKey);
+        resetGridFocusedKey(data, focusMemo.last, c);
+        focusMemo.last = c;
+        // useSelectableItem's focus effect for the replacement key, after the rows re-rendered.
+        const next = untrack(selection.focusedKey);
+        if (next == null || next === previous)
+            return;
+        const wasFocused = untrack(selection.isFocused);
+        queueMicrotask(() => {
+            const lost = focusMemo.blurred;
+            if (untrack(selection.focusedKey) !== next || !(wasFocused || (lost && !lost.isConnected)))
+                return;
+            const item = getItemElement(el(), next);
+            if (item && item.ownerDocument.activeElement !== item)
+                focusSafely(item);
+        });
+    });
+    // Column resizing (ResizableTableContainer): the layout state over the measured width.
+    const resizeData = container ? createTableColumnResizeState({ tableWidth: container.tableWidth }) : null;
+    const layout = resizeData ? () => tableColumnResizeState(resizeData, view()) : null;
+    const focused = signal(false);
+    const focusVisible = signal(false);
+    const rootInteraction = { states: { isFocused: focused, isFocusVisible: focusVisible } };
+    const values = {
+        isFocused: () => focused(),
+        isFocusVisible: () => focusVisible(),
+        isDropTarget: () => false,
+        state: view,
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-Table" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const style = () => {
+        const s = rp.style();
+        // due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
+        return resizeData && !isVirtualized ? { ...s, tableLayout: "fixed", width: "min-content" } : s;
+    };
+    const onMouseDown = props.onMouseDown;
+    const onScroll = props.onScroll;
+    const slot = props.slot || undefined;
+    const dom = globalDOMProps(props, TABLE_OWNED);
+    const attrs = () => {
+        const a = tableProps(aria, view(), hasTabbableChild()).gridProps;
+        // Autocomplete virtual focus: the collection itself is never tabbable.
+        return read(shouldUseVirtualFocus) ? { ...a, tabIndex: undefined } : a;
+    };
+    const sortDescription = () => tableSortDescription({ locale }, view());
+    const longPressDescription = () => {
+        const v = view();
+        return highlightSelectionDescription({
+            selectionManager: v.selectionManager,
+            hasItemActions: !!(shared.actions.onRowAction || shared.actions.onCellAction),
+            locale,
+        });
+    };
+    if (isVirtualized) {
+        // RAC useElementType: inside a Virtualizer the table is `div`s (absolutely positioned views; a `<table>` cannot
+        // hold the view wrappers). The grid element is the scroll container; its focused row / cell stays rendered.
+        const virtualScroll = customRenderer?.onScroll;
+        const focusedKey = data.selectionState.focusedKey;
+        return (<>
+        <div {...dom} {...attrs()} ref={rootRef} class={rp.class()} style={style()} slot={slot} data-focused={dataBool(focused())} data-focus-visible={dataBool(focusVisible())} onKeyDownCapture={(e) => {
+                const v = view();
+                gridKeyDownCapture(e, gridOf(v, e), v);
+            }} onKeyDown={(e) => {
+                const v = view();
+                gridKeyDown(e, gridOf(v, e), v);
+            }} onFocusIn={(e) => {
+                const v = view();
+                gridFocus(e, gridOf(v, e), v);
+                onFocusInFromContext?.(e);
+            }} onFocusOut={(e) => {
+                focusMemo.blurred = e.relatedTarget == null ? e.target : null;
+                const v = view();
+                gridBlur(e, gridOf(v, e), v);
+            }} onFocus={(e) => focusStateFocus(rootInteraction, e)} onBlur={(e) => focusStateBlur(rootInteraction, e)} onMouseDown={(e) => {
+                const v = view();
+                gridMouseDown(e, gridOf(v, e), v);
+                onMouseDown?.(e);
+            }} onScroll={(e) => {
+                virtualScroll?.(e);
+                onScroll?.(e);
+            }}>
+          <Provider values={[
+                [TableStateContext, view],
+                [TableColumnResizeStateContext, layout],
+                [TableOptionsContext, options],
+                [TableInternalContext, internal],
+                [SelectableCollectionContext, null],
+                [FieldInputContext, null],
+                // RAC: the rows share one SharedElementTransition scope (a SelectionIndicator animates between them).
+                [SharedElementContext, sharedElements],
+            ]}>
+            {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: collection, scrollRef: el, focusedKey })}
+          </Provider>
+        </div>
+        <div id={sortDescriptionId} hidden>
+          {sortDescription() ?? ""}
+        </div>
+        <div id={internal.sortableDescriptionId} hidden>
+          {formatMessage(tableStrings, locale, "sortable")}
+        </div>
+        <div id={descriptionId} hidden>
+          {longPressDescription() ?? ""}
+        </div>
+        {resizeData ? (<div id={internal.resizerDescriptionId} hidden>
+            {formatMessage(tableStrings, locale, "resizerDescription")}
+          </div>) : null}
+      </>);
+    }
+    return (<>
+      <table {...dom} {...attrs()} ref={rootRef} class={rp.class()} style={style()} slot={slot} data-focused={dataBool(focused())} data-focus-visible={dataBool(focusVisible())} onKeyDownCapture={(e) => {
+            const v = view();
+            gridKeyDownCapture(e, gridOf(v, e), v);
+        }} onKeyDown={(e) => {
+            const v = view();
+            gridKeyDown(e, gridOf(v, e), v);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridFocus(e, gridOf(v, e), v);
+            onFocusInFromContext?.(e);
+        }} onFocusOut={(e) => {
+            focusMemo.blurred = e.relatedTarget == null ? e.target : null;
+            const v = view();
+            gridBlur(e, gridOf(v, e), v);
+        }} onFocus={(e) => focusStateFocus(rootInteraction, e)} onBlur={(e) => focusStateBlur(rootInteraction, e)} onMouseDown={(e) => {
+            const v = view();
+            gridMouseDown(e, gridOf(v, e), v);
+            onMouseDown?.(e);
+        }} onScroll={(e) => onScroll?.(e)}>
+        <Provider values={[
+            [TableStateContext, view],
+            [TableColumnResizeStateContext, layout],
+            [TableOptionsContext, options],
+            [TableInternalContext, internal],
+            [SelectableCollectionContext, null],
+            [FieldInputContext, null],
+            // RAC: the rows share one SharedElementTransition scope (a SelectionIndicator animates between them).
+            [SharedElementContext, sharedElements],
+        ]}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: collection, scrollRef: el })}
+        </Provider>
+      </table>
+      <div id={sortDescriptionId} hidden>
+        {sortDescription() ?? ""}
+      </div>
+      <div id={internal.sortableDescriptionId} hidden>
+        {formatMessage(tableStrings, locale, "sortable")}
+      </div>
+      <div id={descriptionId} hidden>
+        {longPressDescription() ?? ""}
+      </div>
+      {resizeData ? (<div id={internal.resizerDescriptionId} hidden>
+          {formatMessage(tableStrings, locale, "resizerDescription")}
+        </div>) : null}
+    </>);
+}
+const HOVER_OWNED = ["onPointerEnter", "onPointerLeave", "style"];
+/** A header within a `<Table>`, containing the table columns. */
+export const TableHeader = /* @__PURE__ */ createBranchComponent(TableHeaderNode, function TableHeader(props, ref) {
+    const internal = useContext(TableInternalContext);
+    const hovered = signal(false);
+    const { onHoverStart, onHoverChange, onHoverEnd } = props;
+    const interaction = {
+        onHoverStart,
+        onHoverChange,
+        onHoverEnd,
+        states: { isHovered: hovered },
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values: { isHovered: () => hovered() }, defaultClassName: "rv-TableHeader" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const { onPointerEnter, onPointerLeave } = props;
+    const dom = globalDOMProps(props, HOVER_OWNED);
+    const rowKeys = () => internal.collection().headerRows.map((row) => row.key);
+    if (internal.isVirtualized) {
+        // Virtualized (RAC useElementType): `div` row group inside the header view.
+        return (<div {...dom} role="rowgroup" ref={ref} class={rp.class()} style={rp.style()} onPointerEnter={(e) => {
+                hoverStateEnter(interaction, e);
+                onPointerEnter?.(e);
+            }} onPointerLeave={(e) => {
+                hoverStateLeave(interaction, e);
+                onPointerLeave?.(e);
+            }}>
+          {/* Not lazy (LAZY-T6): a header row holds the virtualizer's column views (a nested collection); a lazy
+                header row materialised mid-layout lost them. Header rows are few: nothing to save. */}
+          <For each={rowKeys} by={(k) => k} lazy={false}>
+            {(k) => <TableHeaderRow rowKey={untrack(k)}/>}
+          </For>
+        </div>);
+    }
+    return (<thead {...dom} role="rowgroup" ref={ref} class={rp.class()} style={rp.style()} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            onPointerLeave?.(e);
+        }}>
+        {/* Not lazy (LAZY-T6): header rows hold the column cells (a nested collection) and are few. */}
+        <For each={rowKeys} by={(k) => k} lazy={false}>
+          {(k) => <TableHeaderRow rowKey={untrack(k)}/>}
+        </For>
+      </thead>);
+}, (props) => Collection({ items: props.columns, children: props.children }));
+function TableHeaderRow(props) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const rowKey = props.rowKey;
+    const isVirtualized = internal.isVirtualized;
+    const locale = internal.locale;
+    const attrs = () => {
+        const v = view();
+        const row = v.collection.headerRows.find((r) => r.key === rowKey);
+        return row ? tableHeaderRowProps({ node: row, isVirtualized }, v).rowProps : { role: "row" };
+    };
+    // useTableSelectAllCheckbox
+    const checkboxProps = {
+        "aria-label": untrack(() => tableSelectAllCheckboxProps(view(), locale).checkboxProps["aria-label"]),
+        isSelected: () => tableSelectAllCheckboxProps(view(), locale).checkboxProps.isSelected,
+        isDisabled: () => tableSelectAllCheckboxProps(view(), locale).checkboxProps.isDisabled,
+        isIndeterminate: () => tableSelectAllCheckboxProps(view(), locale).checkboxProps.isIndeterminate,
+        onChange: () => tableSelectAllCheckboxChange(view()),
+    };
+    const cellKeys = () => {
+        const keys = [];
+        for (const n of internal.collection().getChildren(rowKey))
+            keys.push(n.key);
+        return keys;
+    };
+    if (isVirtualized) {
+        // Virtualized: `div` row; the virtualizer renders the column views.
+        const branchRenderer = useContext(CollectionRendererContext);
+        const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+        return (<div {...attrs()}>
+        <Provider values={[
+                [CheckboxContext, { slots: { selection: checkboxProps } }],
+                [CheckboxFieldContext, { slots: { selection: checkboxProps } }],
+            ]}>
+          {/* The virtualizer renders the header row's column views (positioned by the layout). */}
+          {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({
+                collection: internal.collection,
+                parent: { key: rowKey },
+            })}
+        </Provider>
+      </div>);
+    }
+    return (<tr {...attrs()}>
+      <Provider values={[
+            [CheckboxContext, { slots: { selection: checkboxProps } }],
+            [CheckboxFieldContext, { slots: { selection: checkboxProps } }],
+        ]}>
+        {/* Columns are in the key map; header placeholders (nested columns) render nothing. */}
+        <For each={cellKeys} by={(k) => k}>
+          {(k) => renderNodeAt(internal.collection, k)}
+        </For>
+      </Provider>
+    </tr>);
+}
+const COLUMN_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onClick", "onDragStart", "style", "id"];
+/** A column within a `<Table>`. */
+export const Column = /* @__PURE__ */ createLeafComponent(TableColumnNode, function Column(props, forwardedRef, column) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const layout = useContext(TableColumnResizeStateContext);
+    const key = column.key;
+    const isVirtualized = internal.isVirtualized;
+    const locale = internal.locale;
+    const descriptionId = internal.sortableDescriptionId;
+    const { focusMode, allowsArrowNavigation } = props;
+    const th = elementRef();
+    const thRef = mergeRefValues(th, forwardedRef);
+    const hopts = (v, el) => ({
+        node: columnOf(v.collection, key),
+        isVirtualized,
+        focusMode: focusMode ?? "child",
+        allowsArrowNavigation,
+        descriptionId,
+        locale,
+        ref: el ?? undefined,
+    });
+    const attrs = () => {
+        const v = view();
+        return columnOf(v.collection, key) ? tableColumnHeaderProps(hopts(v), v).columnHeaderProps : {};
+    };
+    const allowsSorting = () => !!columnOf(internal.collection(), key)?.props?.allowsSorting;
+    const sortDirection = () => {
+        const s = internal.data.sortDescriptor.value();
+        return s?.column === key ? s.direction : undefined;
+    };
+    const isResizing = () => !!layout && layout().resizingColumn === key;
+    const hovered = signal(false);
+    const pressed = signal(false);
+    const focused = signal(false);
+    const focusVisible = signal(false);
+    const interaction = {
+        isDisabled: () => !allowsSorting(),
+        states: { isHovered: hovered, isFocused: focused, isFocusVisible: focusVisible },
+    };
+    // usePress of useTableColumnHeader (options read per event).
+    const press = (v) => {
+        const o = hopts(v);
+        return {
+            isDisabled: !tableColumnHeaderPressable(o, v),
+            onPress: () => tableColumnHeaderPress(o, v, (k) => v.sort(k), view),
+            onPressStart: () => pressed.set(true),
+            onPressEnd: () => pressed.set(false),
+        };
+    };
+    const values = {
+        isHovered: () => hovered(),
+        isPressed: () => pressed(),
+        isFocused: () => focused(),
+        isFocusVisible: () => focusVisible(),
+        allowsSorting,
+        sortDirection,
+        isResizing,
+        startResize: () => {
+            if (!layout)
+                throw new Error("Wrap your <Table> in a <ResizableTableContainer> to enable column resizing");
+            layout().startResize(key);
+            view().setKeyboardNavigationDisabled(true);
+            focusColumnResizer(th() ?? null);
+        },
+        sort: (direction) => view().sort(key, direction),
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Column" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const style = () => {
+        const s = rp.style();
+        return layout ? { ...s, width: `${layout().getColumnWidth(key)}px` } : s;
+    };
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onClick } = props;
+    const dom = globalDOMProps(props, COLUMN_OWNED);
+    if (isVirtualized) {
+        // Virtualized (RAC useElementType): `div` column header inside its view.
+        return (<div {...dom} {...attrs()} ref={thRef} class={rp.class()} style={style()} data-resizing={dataBool(isResizing())} data-allows-sorting={dataBool(allowsSorting())} data-sort-direction={sortDirection()} onKeyDownCapture={(e) => {
+                const v = view();
+                gridCellKeyDownCapture(e, hopts(v), v);
+            }} onKeyDown={(e) => {
+                const v = view();
+                gridCellKeyDown(e, hopts(v), v);
+                pressKeyDown(press(v), e);
+            }} onKeyUp={(e) => {
+                const v = view();
+                gridCellKeyUp(e, hopts(v), v);
+            }} onFocusIn={(e) => {
+                const v = view();
+                gridCellFocus(e, hopts(v), v);
+            }} onFocus={(e) => {
+                focusStateFocus(interaction, e);
+            }} onBlur={(e) => {
+                focusStateBlur(interaction, e);
+            }} onPointerEnter={(e) => {
+                hoverStateEnter(interaction, e);
+                pressPointerEnter(press(view()), e);
+                onPointerEnter?.(e);
+            }} onPointerLeave={(e) => {
+                hoverStateLeave(interaction, e);
+                pressPointerLeave(press(view()), e);
+                onPointerLeave?.(e);
+            }} onPointerDown={(e) => {
+                const v = view();
+                gridCellPointerDown(e, hopts(v), v);
+                pressPointerDown(press(v), e);
+                onPointerDown?.(e);
+            }} onPointerUp={(e) => {
+                const v = view();
+                gridCellPointerUp(e, hopts(v), v);
+                pressPointerUp(press(v), e);
+                onPointerUp?.(e);
+            }} onMouseDown={(e) => pressMouseDown(press(view()), e)} onClick={(e) => {
+                const v = view();
+                gridCellClick(e, hopts(v), v);
+                pressClick(press(v), e);
+                onClick?.(e);
+            }} onDragStart={(e) => pressDragStart(press(view()), e)}>
+        {
+            // A binding (not a Provider child slot): a render function that reads render-prop accessors
+            // and returns text re-runs on change, as RAC re-renders.
+            provide(ColumnResizerContext, { columnKey: key, triggerRef: th }, () => provide(CollectionRendererContext, DefaultCollectionRenderer, () => rp.children()))}
+      </div>);
+    }
+    return (<th {...dom} {...attrs()} ref={thRef} class={rp.class()} style={style()} data-resizing={dataBool(isResizing())} data-allows-sorting={dataBool(allowsSorting())} data-sort-direction={sortDirection()} onKeyDownCapture={(e) => {
+            const v = view();
+            gridCellKeyDownCapture(e, hopts(v), v);
+        }} onKeyDown={(e) => {
+            const v = view();
+            gridCellKeyDown(e, hopts(v), v);
+            pressKeyDown(press(v), e);
+        }} onKeyUp={(e) => {
+            const v = view();
+            gridCellKeyUp(e, hopts(v), v);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridCellFocus(e, hopts(v), v);
+        }} onFocus={(e) => {
+            focusStateFocus(interaction, e);
+        }} onBlur={(e) => {
+            focusStateBlur(interaction, e);
+        }} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            pressPointerEnter(press(view()), e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            pressPointerLeave(press(view()), e);
+            onPointerLeave?.(e);
+        }} onPointerDown={(e) => {
+            const v = view();
+            gridCellPointerDown(e, hopts(v), v);
+            pressPointerDown(press(v), e);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            const v = view();
+            gridCellPointerUp(e, hopts(v), v);
+            pressPointerUp(press(v), e);
+            onPointerUp?.(e);
+        }} onMouseDown={(e) => pressMouseDown(press(view()), e)} onClick={(e) => {
+            const v = view();
+            gridCellClick(e, hopts(v), v);
+            pressClick(press(v), e);
+            onClick?.(e);
+        }} onDragStart={(e) => pressDragStart(press(view()), e)}>
+      {
+        // A binding (not a Provider child slot): a render function that reads render-prop accessors
+        // and returns text re-runs on change, as RAC re-renders.
+        provide(ColumnResizerContext, { columnKey: key, triggerRef: th }, () => provide(CollectionRendererContext, DefaultCollectionRenderer, () => rp.children()))}
+    </th>);
+});
+const RESIZER_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onClick", "onDragStart", "style"];
+/** A draggable / keyboard-adjustable handle that resizes its Column (inside a ResizableTableContainer). */
+export function ColumnResizer(props) {
+    const layout = useContext(TableColumnResizeStateContext);
+    if (!layout)
+        throw new Error("Wrap your <Table> in a <ResizableTableContainer> to enable column resizing");
+    const container = useContext(ResizableTableContainerContext);
+    const { columnKey, triggerRef } = useContext(ColumnResizerContext);
+    const internal = useContext(TableInternalContext);
+    const locale = internal.locale;
+    const direction = internal.direction;
+    const column = untrack(() => columnOf(internal.collection(), columnKey));
+    const ariaLabelProp = props["aria-label"];
+    const id = `${internal.gridId}-${normalizeKey(columnKey)}-resizer`;
+    const aria = tableColumnResizeProps({
+        column,
+        "aria-label": ariaLabelProp || formatMessage(racStrings, locale, "tableResizer"),
+        onResizeStart: container.onResizeStart,
+        onResize: container.onResize,
+        onResizeEnd: container.onResizeEnd,
+        triggerRef,
+        id,
+        descriptionId: internal.resizerDescriptionId,
+        locale,
+    }, layout);
+    const ring = useFocusRing();
+    const hovered = signal(false);
+    const { onHoverStart, onHoverChange, onHoverEnd } = props;
+    const interaction = { onHoverStart, onHoverChange, onHoverEnd, states: { isHovered: hovered } };
+    const resizableDirection = () => {
+        const l = layout();
+        const isEResizable = l.getColumnMinWidth(columnKey) >= l.getColumnWidth(columnKey);
+        const isWResizable = l.getColumnMaxWidth(columnKey) <= l.getColumnWidth(columnKey);
+        if (isEResizable)
+            return direction === "rtl" ? "right" : "left";
+        if (isWResizable)
+            return direction === "rtl" ? "left" : "right";
+        return "both";
+    };
+    const resizer = elementRef();
+    const resizerRef = mergeRefValues(resizer, props.ref);
+    // The cursor of the resizer (computed style) for the full-screen cursor overlay.
+    const cursor = signal("");
+    clientEffect(() => {
+        const node = resizer();
+        resizableDirection();
+        if (node)
+            cursor.set(node.ownerDocument.defaultView?.getComputedStyle(node).cursor ?? "");
+    });
+    const values = {
+        isHovered: () => hovered(),
+        isFocused: () => ring.isFocused(),
+        isFocusVisible: () => ring.isFocusVisible(),
+        isResizing: aria.isResizing,
+        resizableDirection,
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-ColumnResizer" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const r = aria.resizerProps;
+    const input = aria.inputProps;
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onClick } = props;
+    const dom = globalDOMProps(props, RESIZER_OWNED);
+    const { onFocus: inputFocus, onBlur: inputBlur, onChange: inputChange, style: inputStyle, ...inputAttrs } = input;
+    // Cursor overlay is used to style the cursor against the entire screen.
+    // Do not turn off pointer events or the cursor will no longer be styled.
+    return (<div {...dom} ref={resizerRef} role="presentation" class={rp.class()} style={{ ...rp.style(), touchAction: "none" }} data-rv-column-resizer="" data-focused={dataBool(ring.isFocused())} data-focus-visible={dataBool(ring.isFocusVisible())} data-resizing={dataBool(aria.isResizing())} data-resizable-direction={resizableDirection()} onKeyDown={(e) => {
+            r.onKeyDown(e);
+        }} onKeyUp={(e) => {
+            r.onKeyUp(e);
+        }} onPointerDown={(e) => {
+            r.onPointerDown(e);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            r.onPointerUp(e);
+            onPointerUp?.(e);
+        }} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            r.onPointerEnter(e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            r.onPointerLeave(e);
+            onPointerLeave?.(e);
+        }} onMouseDown={(e) => {
+            r.onMouseDown(e);
+            onMouseDown?.(e);
+        }} onClick={(e) => {
+            r.onClick(e);
+            onClick?.(e);
+        }} onDragStart={(e) => r.onDragStart(e)}>
+      {rp.children()}
+      <input {...inputAttrs} style={inputStyle} onFocus={(e) => {
+            inputFocus(e);
+            // The ring's focus-in (binds its own blur while focused).
+            ring.focusProps.onFocusIn(e);
+        }} onBlur={(e) => inputBlur(e)} onChange={(e) => inputChange(e)}/>
+      <Show when={() => aria.isResizing() && aria.isMouseResizing()}>
+        {() => (<Portal>
+            <div style={{ position: "fixed", top: "0", left: "0", bottom: "0", right: "0", cursor: cursor() }} data-testid="cursor-overlay"/>
+          </Portal>)}
+      </Show>
+    </div>);
+}
+/** The body of a `<Table>`, containing the table rows. */
+export const TableBody = /* @__PURE__ */ createBranchComponent(TableBodyNode, function TableBody(props, ref, node) {
+    const internal = useContext(TableInternalContext);
+    const branchRenderer = useContext(CollectionRendererContext);
+    const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+    // The built renderer only reads the parent key: a plain object, not the node class instance (resumable capture).
+    const branchParent = { key: node.key };
+    const isEmpty = () => internal.collection().size === 0;
+    const values = { isEmpty, isDropTarget: () => false };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-TableBody" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const renderEmptyState = props.renderEmptyState;
+    const numColumns = () => internal.collection().columnCount;
+    const dom = globalDOMProps(props, ["style", "id"]);
+    // TODO (upstream): TableBody doesn't support being the scrollable body of the table yet.
+    if (internal.isVirtualized) {
+        // Virtualized (RAC useElementType): `div` row group; the virtualizer renders the row views.
+        return (<div {...dom} role="rowgroup" ref={ref} class={rp.class()} style={rp.style()} data-empty={dataBool(isEmpty())}>
+        {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+        {renderEmptyState ? (<Show when={isEmpty}>
+            {() => (<div role="row" style={{ height: "100%" }}>
+                <div role="rowheader" aria-colspan={numColumns()} style={{ height: "100%" }}>
+                  {renderEmptyState(values)}
+                </div>
+              </div>)}
+          </Show>) : null}
+      </div>);
+    }
+    return (<tbody {...dom} role="rowgroup" ref={ref} class={rp.class()} style={rp.style()} data-empty={dataBool(isEmpty())}>
+      {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+      {renderEmptyState ? (<Show when={isEmpty}>
+          {() => (<tr role="row">
+              <td role="rowheader" colSpan={numColumns()}>
+                {renderEmptyState(values)}
+              </td>
+            </tr>)}
+        </Show>) : null}
+    </tbody>);
+});
+/** The footer of a `<Table>`, containing table rows. */
+export const TableFooter = /* @__PURE__ */ createBranchComponent(TableFooterNode, function TableFooter(props, ref, node) {
+    const internal = useContext(TableInternalContext);
+    const branchRenderer = useContext(CollectionRendererContext);
+    const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+    // The built renderer only reads the parent key: a plain object, not the node class instance (resumable capture).
+    const branchParent = { key: node.key };
+    const dom = globalDOMProps(props, ["style", "id"]);
+    const className = props.class || "rv-TableFooter";
+    const style = props.style;
+    if (internal.isVirtualized) {
+        // Virtualized (RAC useElementType): `div` row group.
+        return (<div {...dom} role="rowgroup" ref={ref} class={className} style={style}>
+        {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+      </div>);
+    }
+    return (<tfoot {...dom} role="rowgroup" ref={ref} class={className} style={style}>
+      {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+    </tfoot>);
+});
+/** Global DOM events Row handles itself (the user's chain after its own); RAC drops `onClick`. */
+const ROW_OWNED = [
+    "onPointerDown",
+    "onPointerUp",
+    "onPointerCancel",
+    "onPointerEnter",
+    "onPointerLeave",
+    "onDblClick",
+    "onDragStart",
+    "onClick",
+    "style",
+    "id",
+];
+const rowDerived = /* @__PURE__ */ new WeakMap();
+// Row slot values shared by every row (one resume entry each): context consumers copy them, never write.
+const NO_SLOT_PROPS = {};
+const DRAG_SLOT_PROPS = { style: { pointerEvents: "none" } };
+const ROW_BUTTONS = { slots: { [DEFAULT_SLOT]: NO_SLOT_PROPS, chevron: NO_SLOT_PROPS, drag: DRAG_SLOT_PROPS } };
+function rowOptions(r, v, el) {
+    return {
+        node: v.collection.getItem(r.key),
+        isVirtualized: r.isVirtualized,
+        shouldSelectOnPressUp: false,
+        expandButtonId: r.expandButtonId,
+        router: r.router,
+        locale: r.locale,
+        ref: el ?? undefined,
+    };
+}
+/** The derived parts of a row (built once per `RowData`; owner as `cellOf`). */
+function rowOf(r) {
+    let d = rowDerived.get(r);
+    if (!d)
+        rowDerived.set(r, (d = untrack(() => runWithOwner(null, () => deriveRow(r)))));
+    return d;
+}
+function initRow(r) {
+    const d = deriveRow(r);
+    rowDerived.set(r, d);
+    return d;
+}
+function deriveRow(r) {
+    const { view, key, locale } = r;
+    const st = computed(() => {
+        const v = view();
+        const n = v.collection.getItem(key);
+        if (!n)
+            return null;
+        const aria = tableRowProps(rowOptions(r, v), v, locale);
+        const hasChildItems = !!r.hasChildItems || v.collection.getItem(n.lastChildKey)?.type !== "cell";
+        return {
+            aria,
+            hasChildItems,
+            isExpanded: hasChildItems && v.expandedKeys.has(key),
+            level: n.level + 1,
+            selectionMode: v.selectionManager.selectionMode,
+            selectionBehavior: v.selectionManager.selectionBehavior,
+        };
+    });
+    const interaction = {
+        // because of https://bugs.webkit.org/show_bug.cgi?id=214609, hover only when selectable or with an action.
+        isDisabled: () => !st()?.aria.allowsSelection && !st()?.aria.hasAction,
+        onHoverStart: r.onHoverStart,
+        onHoverChange: r.onHoverChange,
+        onHoverEnd: r.onHoverEnd,
+        states: { isHovered: r.hovered, isFocusVisible: r.focusVisible },
+    };
+    const values = {
+        isHovered: () => r.hovered(),
+        isPressed: () => r.pressed(),
+        // Provided to the row's content (SelectionIndicatorContext, the selection checkbox): captures only `r`.
+        isSelected: () => !!rowOf(r).st()?.aria.isSelected,
+        isFocused: () => !!st()?.aria.isFocused,
+        isFocusVisible: () => r.focusVisible(),
+        isDisabled: () => !!st()?.aria.isDisabled,
+        selectionMode: () => st()?.selectionMode ?? "none",
+        selectionBehavior: () => st()?.selectionBehavior ?? "toggle",
+        allowsDragging: () => false,
+        isDragging: () => false,
+        isDropTarget: () => false,
+        isFocusVisibleWithin: () => r.withinVisible(),
+        id: key,
+        hasChildItems: () => !!st()?.hasChildItems,
+        isExpanded: () => !!st()?.isExpanded,
+        level: () => st()?.level ?? 1,
+        state: view,
+    };
+    const rp = untrack(() => renderProps({ class: r.class, style: r.style, values, defaultClassName: "rv-Row", defaultStyle: { "--table-row-level": untrack(values.level) } }, r.live));
+    // useFocusRing({ within: true }) over the row's own signals (the binding of `data-focus-visible-within` reads them).
+    const ring = {
+        props: { within: true },
+        focused: r.withinFocused,
+        visible: r.withinVisible,
+        state: { isFocused: false, isFocusVisible: isFocusVisible(), unsubscribe: null },
+    };
+    return { st, values, rp, interaction, ring };
+}
+/** Row `isPressed` lives in the press memo of the row element: re-read it after the row's press handlers. */
+function rowSyncPressed(r, target) {
+    const v = r.view();
+    if (v.collection.getItem(r.key))
+        r.pressed.set(tableRowProps(rowOptions(r, v, target), v, r.locale).isPressed);
+}
+/** A row event through a grid row handler (+ the pressed re-read). */
+function rowOn(r, e, fn, sync) {
+    const v = r.view();
+    fn(e, rowOptions(r, v), v);
+    if (sync)
+        rowSyncPressed(r, e.currentTarget);
+}
+/** The row's own attributes after the user's DOM props (one spread binding). */
+function rowAttrs(r) {
+    const { st, values, rp } = rowOf(r);
+    const selectionMode = values.selectionMode();
+    return {
+        ...(st()?.aria.rowProps ?? { role: "row" }),
+        class: rp.class(),
+        style: rp.style(),
+        "data-disabled": dataBool(values.isDisabled()),
+        "data-selected": dataBool(values.isSelected()),
+        "data-focused": dataBool(values.isFocused()),
+        "data-pressed": dataBool(r.pressed()),
+        "data-selection-mode": selectionMode === "none" ? undefined : selectionMode,
+        "data-expanded": dataBool(values.isExpanded()),
+        "data-has-child-items": dataBool(values.hasChildItems()),
+        "data-level": values.level(),
+        "data-focus-visible-within": dataBool(values.isFocusVisibleWithin()),
+    };
+}
+/** A row within a `<Table>`. */
+export const Row = /* @__PURE__ */ createBranchComponent(TableRowNode, function Row(props, forwardedRef, item) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const key = item.key;
+    const locale = internal.locale;
+    const rowBase = `${internal.gridId}-${normalizeKey(key)}`;
+    const expandButtonId = rowBase + "-expand";
+    const checkboxId = rowBase + "-checkbox";
+    const isTreeGrid = internal.data.treeColumn != null;
+    const live = hasLive(props);
+    const r = {
+        key,
+        view,
+        isVirtualized: internal.isVirtualized,
+        locale,
+        router: useRouter(),
+        expandButtonId,
+        hasChildItems: props.hasChildItems,
+        onHoverStart: props.onHoverStart,
+        onHoverChange: props.onHoverChange,
+        onHoverEnd: props.onHoverEnd,
+        hovered: signal(false),
+        pressed: signal(false),
+        focusVisible: signal(false),
+        withinFocused: signal(false),
+        withinVisible: signal(false),
+        class: live ? undefined : props.class,
+        style: live ? undefined : props.style,
+        live: live ? liveRenderProps(props, ["class", "style"]) : undefined,
+    };
+    const { values } = initRow(r);
+    // useTableSelectionCheckbox (Rivet: the id derives from the table id + row key, see header). One slots value for
+    // CheckboxContext + CheckboxFieldContext; closures capture `r` (the row region's providers are in its resume state).
+    const checkboxSlots = {
+        slots: {
+            [DEFAULT_SLOT]: NO_SLOT_PROPS,
+            selection: {
+                id: checkboxId,
+                "aria-label": untrack(() => tableSelectionCheckboxProps({ key, id: checkboxId, locale }, view()).checkboxProps["aria-label"]),
+                "aria-labelledby": untrack(() => `${checkboxId} ${getRowLabelledBy(view(), key)}`),
+                isSelected: values.isSelected,
+                isDisabled: () => !r.view().selectionManager.canSelectItem(r.key),
+                onChange: (isSelected) => tableSelectionCheckboxChange(isSelected, { key: r.key }, r.view()),
+            },
+        },
+    };
+    const buttons = isTreeGrid
+        ? {
+            slots: {
+                [DEFAULT_SLOT]: NO_SLOT_PROPS,
+                chevron: {
+                    id: expandButtonId,
+                    "aria-label": () => rowOf(r).st()?.aria.expandButtonProps["aria-label"],
+                    "aria-labelledby": untrack(() => rowOf(r).st()?.aria.expandButtonProps["aria-labelledby"]),
+                    isDisabled: () => !!rowOf(r).st()?.aria.expandButtonProps.isDisabled,
+                    excludeFromTabOrder: true,
+                    preventFocusOnPress: true,
+                    "data-react-aria-prevent-focus": "true",
+                    onPress: () => {
+                        const v = r.view();
+                        tableRowExpandPress(rowOptions(r, v), v);
+                    },
+                },
+                drag: DRAG_SLOT_PROPS,
+            },
+        }
+        : ROW_BUTTONS;
+    const { onPointerDown, onPointerUp, onPointerCancel, onPointerEnter, onPointerLeave, onDblClick } = props;
+    const dom = globalDOMProps(props, ROW_OWNED);
+    const branchRenderer = useContext(CollectionRendererContext);
+    const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+    if (r.isVirtualized) {
+        // Virtualized (RAC useElementType): `div` row inside its view; the virtualizer renders the cell views.
+        return (<div {...dom} {...rowAttrs(r)} ref={forwardedRef} onKeyDown={(e) => {
+                const v = r.view();
+                gridRowKeyDown(e, rowOptions(r, v), v);
+                if (!e.cancelBubble)
+                    tableRowKeyDown(e, rowOptions(r, v), v);
+                rowSyncPressed(r, e.currentTarget);
+            }} onKeyUp={(e) => rowOn(r, e, gridRowKeyUp, true)} onFocusIn={(e) => {
+                // The row's own focus (was a native `focus` listener per row; it ran before this focusin): its `blur` binds while focused.
+                const d = rowOf(r);
+                focusStateIn(d.interaction, e);
+                rowOn(r, e, gridRowFocus);
+                focusRingFocus(d.ring, e);
+            }} onFocusOut={(e) => focusRingBlur(rowOf(r).ring, e)} onPointerOver={(e) => hoverStateOver(rowOf(r).interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
+                rowOn(r, e, gridRowPointerDown, true);
+                onPointerDown?.(e);
+            }} onPointerUp={(e) => {
+                rowOn(r, e, gridRowPointerUp, true);
+                onPointerUp?.(e);
+            }} onPointerCancel={(e) => {
+                rowOn(r, e, gridRowPointerCancel, true);
+                onPointerCancel?.(e);
+            }} onClick={(e) => rowOn(r, e, gridRowClick, true)} onDblClick={(e) => {
+                rowOn(r, e, gridRowDoubleClick);
+                onDblClick?.(e);
+            }} onDragStart={(e) => rowOn(r, e, gridRowDragStart)}>
+          <Provider values={[
+                [CheckboxContext, checkboxSlots],
+                [CheckboxFieldContext, checkboxSlots],
+                [ButtonContext, buttons],
+                [SelectionIndicatorContext, { isSelected: values.isSelected }],
+                [RowFocusContext, { isFocusVisibleWithinRow: values.isFocusVisibleWithin }],
+            ]}>
+            {/* The built renderer only reads the parent key: the row data (`key`), not the node class instance (resumable capture). */}
+            {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: r })}
+          </Provider>
+        </div>);
+    }
+    return (<tr {...dom} {...rowAttrs(r)} ref={forwardedRef} onKeyDown={(e) => {
+            const v = r.view();
+            gridRowKeyDown(e, rowOptions(r, v), v);
+            if (!e.cancelBubble)
+                tableRowKeyDown(e, rowOptions(r, v), v);
+            rowSyncPressed(r, e.currentTarget);
+        }} onKeyUp={(e) => rowOn(r, e, gridRowKeyUp, true)} onFocusIn={(e) => {
+            // The row's own focus (was a native `focus` listener per row; it ran before this focusin): its `blur` binds while focused.
+            const d = rowOf(r);
+            focusStateIn(d.interaction, e);
+            rowOn(r, e, gridRowFocus);
+            focusRingFocus(d.ring, e);
+        }} onFocusOut={(e) => focusRingBlur(rowOf(r).ring, e)} onPointerOver={(e) => hoverStateOver(rowOf(r).interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
+            rowOn(r, e, gridRowPointerDown, true);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            rowOn(r, e, gridRowPointerUp, true);
+            onPointerUp?.(e);
+        }} onPointerCancel={(e) => {
+            rowOn(r, e, gridRowPointerCancel, true);
+            onPointerCancel?.(e);
+        }} onClick={(e) => rowOn(r, e, gridRowClick, true)} onDblClick={(e) => {
+            rowOn(r, e, gridRowDoubleClick);
+            onDblClick?.(e);
+        }} onDragStart={(e) => rowOn(r, e, gridRowDragStart)}>
+        <Provider values={[
+            [CheckboxContext, checkboxSlots],
+            [CheckboxFieldContext, checkboxSlots],
+            [ButtonContext, buttons],
+            [SelectionIndicatorContext, { isSelected: values.isSelected }],
+            [RowFocusContext, { isFocusVisibleWithinRow: values.isFocusVisibleWithin }],
+        ]}>
+          {/* The built renderer only reads the parent key: the row data (`key`), not the node class instance (resumable capture). */}
+          {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: r })}
+        </Provider>
+      </tr>);
+}, (props) => {
+    const children = props.children;
+    if (props.id == null && typeof children === "function" && !isSlot(children)) {
+        throw new Error("No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.");
+    }
+    return Collection({ items: props.columns, children, idScope: props.id });
+});
+const CELL_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onClick", "style", "id"];
+const cellDerived = /* @__PURE__ */ new WeakMap();
+function cellNode(c, v) {
+    const n = v.collection.getItem(c.key);
+    if (n)
+        n.column = v.collection.columns[n.index];
+    return n;
+}
+function cellOptions(c, n) {
+    return {
+        node: n,
+        isVirtualized: c.isVirtualized,
+        focusMode: c.focusMode,
+        allowsArrowNavigation: c.allowsArrowNavigation,
+        shouldSelectOnPressUp: false,
+        ref: undefined,
+    };
+}
+/**
+ * The derived parts of a cell: built by the component (`initCell`, under its owner) or, on a resumed page, on first
+ * use outside any owner (page lifetime, as the resume decoder creates captured computeds) — never under the binding /
+ * handler that asked first (its re-run would dispose the memoized computed).
+ */
+function cellOf(c) {
+    let d = cellDerived.get(c);
+    if (!d)
+        cellDerived.set(c, (d = untrack(() => runWithOwner(null, () => deriveCell(c)))));
+    return d;
+}
+function initCell(c) {
+    cellDerived.set(c, deriveCell(c));
+}
+function deriveCell(c) {
+    const { view, rowKey } = c;
+    const st = computed(() => {
+        const v = view();
+        const n = cellNode(c, v);
+        if (!n)
+            return null;
+        const row = v.collection.getItem(rowKey);
+        const hasChildItems = !!row && (!!row.props?.hasChildItems || v.collection.getItem(row.lastChildKey)?.type !== "cell");
+        return {
+            ...tableCellProps(cellOptions(c, n), v),
+            isSelected: v.selectionManager.isSelected(rowKey),
+            isDisabled: v.selectionManager.isDisabled(rowKey),
+            hasChildItems,
+            isExpanded: hasChildItems && v.expandedKeys.has(rowKey),
+            level: (row?.level ?? 0) + 1,
+            // colIndex is null, when there is no span, falling back to using the index
+            columnIndex: n.colIndex || n.index,
+            isTreeColumn: n.column?.key === v.treeColumn,
+        };
+    });
+    const values = {
+        isPressed: () => !!st()?.isPressed,
+        isFocused: () => c.focused(),
+        isFocusVisible: () => c.focusVisible(),
+        isHovered: () => c.hovered(),
+        isSelected: () => !!st()?.isSelected,
+        isDisabled: () => !!st()?.isDisabled,
+        isFocusVisibleWithinRow: c.within,
+        id: c.key,
+        columnIndex: () => st()?.columnIndex,
+        isTreeColumn: () => !!st()?.isTreeColumn,
+        isExpanded: () => !!st()?.isExpanded,
+        hasChildItems: () => !!st()?.hasChildItems,
+        level: () => st()?.level ?? 1,
+    };
+    const rp = untrack(() => renderProps({ class: c.class, style: c.style, children: c.children, values, defaultClassName: "rv-Cell" }, c.live));
+    const interaction = { states: { isHovered: c.hovered, isFocused: c.focused, isFocusVisible: c.focusVisible } };
+    return { st: st, values, rp, interaction };
+}
+/** A cell event with the node for the event (skipped once the cell left the collection). */
+function cellOn(c, e, fn) {
+    const v = c.view();
+    const n = cellNode(c, v);
+    if (n)
+        fn(e, cellOptions(c, n), v);
+}
+/** The cell's own attributes after the user's DOM props (one spread binding). */
+function cellAttrs(c) {
+    const { st, values, rp } = cellOf(c);
+    return {
+        ...(st()?.gridCellProps ?? { role: "gridcell" }),
+        class: rp.class(),
+        style: rp.style(),
+        "data-focus-visible-within-row": dataBool(c.within()),
+        "data-pressed": dataBool(values.isPressed()),
+        "data-selected": dataBool(values.isSelected()),
+        "data-column-index": values.columnIndex() ?? undefined,
+        "data-expanded": dataBool(values.isExpanded()),
+        "data-has-child-items": dataBool(values.hasChildItems()),
+        "data-level": values.level(),
+        "data-tree-column": dataBool(values.isTreeColumn()),
+        "data-disabled": dataBool(values.isDisabled()),
+    };
+}
+/** A cell within a table row. */
+export const Cell = /* @__PURE__ */ createLeafComponent(TableCellNode, function Cell(props, forwardedRef, cell) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const rowFocus = useContext(RowFocusContext);
+    const live = hasLive(props);
+    const c = {
+        key: cell.key,
+        rowKey: cell.parentKey,
+        view,
+        isVirtualized: internal.isVirtualized,
+        focusMode: props.focusMode,
+        allowsArrowNavigation: props.allowsArrowNavigation,
+        within: rowFocus.isFocusVisibleWithinRow,
+        hovered: signal(false),
+        focused: signal(false),
+        focusVisible: signal(false),
+        class: live ? undefined : props.class,
+        style: live ? undefined : props.style,
+        children: live ? undefined : props.children,
+        live: live ? liveRenderProps(props) : undefined,
+    };
+    initCell(c);
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onClick } = props;
+    const dom = globalDOMProps(props, CELL_OWNED);
+    if (c.isVirtualized) {
+        // Virtualized (RAC useElementType): `div` cell inside its view.
+        return (<div {...dom} {...cellAttrs(c)} ref={forwardedRef} onKeyDownCapture={(e) => cellOn(c, e, gridCellKeyDownCapture)} onKeyDown={(e) => {
+                cellOn(c, e, gridCellKeyDown);
+            }} onKeyUp={(e) => {
+                cellOn(c, e, gridCellKeyUp);
+            }} onFocusIn={(e) => {
+                // The cell's own focus (was a native `focus` listener per cell, before this focusin); its `blur` binds while focused.
+                focusStateIn(cellOf(c).interaction, e);
+                cellOn(c, e, gridCellFocus);
+            }} onPointerOver={(e) => hoverStateOver(cellOf(c).interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
+                cellOn(c, e, gridCellPointerDown);
+                onPointerDown?.(e);
+            }} onPointerUp={(e) => {
+                cellOn(c, e, gridCellPointerUp);
+                onPointerUp?.(e);
+            }} onClick={(e) => {
+                cellOn(c, e, gridCellClick);
+                onClick?.(e);
+            }}>
+        {provide(CollectionRendererContext, DefaultCollectionRenderer, () => cellOf(c).rp.children())}
+      </div>);
+    }
+    return (<td {...dom} {...cellAttrs(c)} ref={forwardedRef} onKeyDownCapture={(e) => cellOn(c, e, gridCellKeyDownCapture)} onKeyDown={(e) => {
+            cellOn(c, e, gridCellKeyDown);
+        }} onKeyUp={(e) => {
+            cellOn(c, e, gridCellKeyUp);
+        }} onFocusIn={(e) => {
+            // The cell's own focus (was a native `focus` listener per cell, before this focusin); its `blur` binds while focused.
+            focusStateIn(cellOf(c).interaction, e);
+            cellOn(c, e, gridCellFocus);
+        }} onPointerOver={(e) => hoverStateOver(cellOf(c).interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
+            cellOn(c, e, gridCellPointerDown);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            cellOn(c, e, gridCellPointerUp);
+            onPointerUp?.(e);
+        }} onClick={(e) => {
+            cellOn(c, e, gridCellClick);
+            onClick?.(e);
+        }}>
+      {provide(CollectionRendererContext, DefaultCollectionRenderer, () => cellOf(c).rp.children())}
+    </td>);
+});
+/** A sentinel row: calls `onLoadMore` when scrolled near, and renders its children while `isLoading`. */
+export const TableLoadMoreItem = /* @__PURE__ */ createLeafComponent(LoaderNode, function TableLoadingIndicator(props, ref, item) {
+    const internal = useContext(TableInternalContext);
+    const isLoading = props.isLoading;
+    const level = item.level + 1;
+    const numColumns = () => internal.collection().columns.length;
+    const sentinel = elementRef();
+    const { onLoadMore, scrollOffset, style: userStyle } = props;
+    loadMoreSentinel({ onLoadMore, collection: internal.collection, scrollOffset }, sentinel);
+    const children = props.children;
+    const className = props.class || "rv-TableLoadingIndicator";
+    const style = { "--table-row-level": level, ...userStyle };
+    const dom = globalDOMProps(props, ["style", "id"]);
+    if (internal.isVirtualized) {
+        // Virtualized (RAC useElementType): `div`s inside the loader view.
+        return (<>
+          <div style={{ height: "0" }} inert>
+            <div style={{ padding: "0", border: "0" }}>
+              <div data-testid="loadMoreSentinel" ref={sentinel} style={{ position: "relative", height: "1px", width: "1px" }}/>
+            </div>
+          </div>
+          <Show when={() => !!read(isLoading) && children != null}>
+            {() => (<div {...dom} ref={ref} role="row" class={className} style={style} aria-level={level} data-level={level}>
+                <div role="rowheader" aria-colspan={numColumns()}>
+                  {children}
+                </div>
+              </div>)}
+          </Show>
+        </>);
+    }
+    return (<>
+        {/* Always render the sentinel. For now onus is on the user for styling when using flex + gap. */}
+        <tr style={{ height: "0" }} inert>
+          <td style={{ padding: "0", border: "0" }}>
+            <div data-testid="loadMoreSentinel" ref={sentinel} style={{ position: "relative", height: "1px", width: "1px" }}/>
+          </td>
+        </tr>
+        <Show when={() => !!read(isLoading) && children != null}>
+          {() => (
+        // For now don't include aria-rowindex on loader since they aren't keyboard focusable.
+        <tr {...dom} ref={ref} role="row" class={className} style={style} aria-level={level} data-level={level}>
+              <td role="rowheader" colSpan={numColumns()}>
+                {children}
+              </td>
+            </tr>)}
+        </Show>
+      </>);
+});