@rivetjs/cdk 0.1.0-alpha.0 → 0.1.0-alpha.1

package/table/index.jsx

@@ -25,14 +25,15 @@
 //   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:
-// - Native table elements only (`table` / `thead` / `tr` / `th` / `td`): the Virtualizer table layout
-//   (`isVirtualized` → `div` elements) is not wired yet.
+// - 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, signal, untrack, useContext } from "@rivetjs/reactivity";
+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";
@@ -55,7 +56,8 @@ import { SharedElementContext } from "../shared-element-transition/transition.js
 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 { useFocusRing } from "../focus/focus-ring.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";
@@ -294,6 +296,61 @@ export function Table(inProps) {
             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();
@@ -357,6 +414,22 @@ export const TableHeader = /* @__PURE__ */ createBranchComponent(TableHeaderNode
     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);
@@ -364,7 +437,8 @@ export const TableHeader = /* @__PURE__ */ createBranchComponent(TableHeaderNode
             hoverStateLeave(interaction, e);
             onPointerLeave?.(e);
         }}>
-        <For each={rowKeys} by={(k) => k}>
+        {/* 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>);
@@ -394,6 +468,23 @@ function TableHeaderRow(props) {
             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 } }],
@@ -480,6 +571,55 @@ export const Column = /* @__PURE__ */ createLeafComponent(TableColumnNode, funct
     };
     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);
@@ -643,6 +783,19 @@ export const TableBody = /* @__PURE__ */ createBranchComponent(TableBodyNode, fu
     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}>
@@ -664,6 +817,12 @@ export const TableFooter = /* @__PURE__ */ createBranchComponent(TableFooterNode
     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>);
@@ -681,37 +840,43 @@ const ROW_OWNED = [
     "style",
     "id",
 ];
-/** 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 isVirtualized = internal.isVirtualized;
-    const locale = internal.locale;
-    const router = useRouter();
-    const rowBase = `${internal.gridId}-${normalizeKey(key)}`;
-    const expandButtonId = rowBase + "-expand";
-    const checkboxId = rowBase + "-checkbox";
-    const isTreeGrid = internal.data.treeColumn != null;
-    const { hasChildItems: hasChildItemsProp, onHoverStart, onHoverChange, onHoverEnd } = props;
-    const ropts = (v, el) => ({
-        node: v.collection.getItem(key),
-        isVirtualized,
+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,
-        router,
-        locale,
+        expandButtonId: r.expandButtonId,
+        router: r.router,
+        locale: r.locale,
         ref: el ?? undefined,
-    });
-    const row = elementRef();
-    const rowRef = mergeRefValues(row, forwardedRef);
+    };
+}
+/** 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(ropts(v), v, locale);
-        const hasChildItems = !!hasChildItemsProp || v.collection.getItem(n.lastChildKey)?.type !== "cell";
+        const aria = tableRowProps(rowOptions(r, v), v, locale);
+        const hasChildItems = !!r.hasChildItems || v.collection.getItem(n.lastChildKey)?.type !== "cell";
         return {
             aria,
             hasChildItems,
@@ -721,132 +886,221 @@ export const Row = /* @__PURE__ */ createBranchComponent(TableRowNode, function
             selectionBehavior: v.selectionManager.selectionBehavior,
         };
     });
-    const hovered = signal(false);
-    const pressed = signal(false);
-    const focusVisible = signal(false);
-    const within = useFocusRing({ within: true });
     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,
-        onHoverChange,
-        onHoverEnd,
-        states: { isHovered: hovered, isFocusVisible: focusVisible },
+        onHoverStart: r.onHoverStart,
+        onHoverChange: r.onHoverChange,
+        onHoverEnd: r.onHoverEnd,
+        states: { isHovered: r.hovered, isFocusVisible: r.focusVisible },
     };
-    // Row `isPressed` lives in the press memo of the row element: re-read it after the row's press handlers.
-    const syncPressed = (target) => {
-        const v = view();
-        if (v.collection.getItem(key))
-            pressed.set(tableRowProps(ropts(v, target), v, locale).isPressed);
-    };
-    const selectionMode = () => st()?.selectionMode ?? "none";
     const values = {
-        isHovered: () => hovered(),
-        isPressed: () => pressed(),
-        isSelected: () => !!st()?.aria.isSelected,
+        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: () => focusVisible(),
+        isFocusVisible: () => r.focusVisible(),
         isDisabled: () => !!st()?.aria.isDisabled,
-        selectionMode,
+        selectionMode: () => st()?.selectionMode ?? "none",
         selectionBehavior: () => st()?.selectionBehavior ?? "toggle",
         allowsDragging: () => false,
         isDragging: () => false,
         isDropTarget: () => false,
-        isFocusVisibleWithin: () => within.isFocusVisible(),
+        isFocusVisibleWithin: () => r.withinVisible(),
         id: key,
         hasChildItems: () => !!st()?.hasChildItems,
         isExpanded: () => !!st()?.isExpanded,
         level: () => st()?.level ?? 1,
         state: view,
     };
-    const rp = untrack(() => renderProps({
-        class: props.class,
-        style: props.style,
-        values,
-        defaultClassName: "rv-Row",
-        defaultStyle: { "--table-row-level": untrack(values.level) },
-    }, hasLive(props) ? liveRenderProps(props) : undefined));
-    // useTableSelectionCheckbox (Rivet: the id derives from the table id + row key, see header).
-    const checkboxProps = {
-        id: checkboxId,
-        "aria-label": untrack(() => tableSelectionCheckboxProps({ key, id: checkboxId, locale }, view()).checkboxProps["aria-label"]),
-        "aria-labelledby": untrack(() => `${checkboxId} ${getRowLabelledBy(view(), key)}`),
-        isSelected: () => !!st()?.aria.isSelected,
-        isDisabled: () => !view().selectionManager.canSelectItem(key),
-        onChange: (isSelected) => tableSelectionCheckboxChange(isSelected, { key }, 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()),
     };
-    const chevron = isTreeGrid
+}
+/** 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
         ? {
-            id: expandButtonId,
-            "aria-label": () => st()?.aria.expandButtonProps["aria-label"],
-            "aria-labelledby": untrack(() => st()?.aria.expandButtonProps["aria-labelledby"]),
-            isDisabled: () => !!st()?.aria.expandButtonProps.isDisabled,
-            excludeFromTabOrder: true,
-            preventFocusOnPress: true,
-            "data-react-aria-prevent-focus": "true",
-            onPress: () => {
-                const v = view();
-                tableRowExpandPress(ropts(v), v);
+            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;
-    // The built renderer only reads the parent key: a plain object, not the node class instance (resumable capture).
-    const branchParent = { key: key };
-    return (<tr {...dom} {...(st()?.aria.rowProps ?? { role: "row" })} ref={rowRef} class={rp.class()} style={rp.style()} data-disabled={dataBool(values.isDisabled())} data-selected={dataBool(values.isSelected())} data-focused={dataBool(values.isFocused())} data-pressed={dataBool(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())} onKeyDown={(e) => {
-            const v = view();
-            gridRowKeyDown(e, ropts(v), v);
+    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, ropts(v), v);
-            syncPressed(e.currentTarget);
-        }} onKeyUp={(e) => {
-            const v = view();
-            gridRowKeyUp(e, ropts(v), v);
-            syncPressed(e.currentTarget);
-        }} onFocusIn={(e) => {
+                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.
-            focusStateIn(interaction, e);
-            const v = view();
-            gridRowFocus(e, ropts(v), v);
-            within.focusProps.onFocusIn(e);
-        }} onFocusOut={(e) => within.focusProps.onFocusOut(e)} onPointerOver={(e) => hoverStateOver(interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
-            const v = view();
-            gridRowPointerDown(e, ropts(v), v);
-            syncPressed(e.currentTarget);
+            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) => {
-            const v = view();
-            gridRowPointerUp(e, ropts(v), v);
-            syncPressed(e.currentTarget);
+            rowOn(r, e, gridRowPointerUp, true);
             onPointerUp?.(e);
         }} onPointerCancel={(e) => {
-            const v = view();
-            gridRowPointerCancel(e, ropts(v), v);
-            syncPressed(e.currentTarget);
+            rowOn(r, e, gridRowPointerCancel, true);
             onPointerCancel?.(e);
-        }} onClick={(e) => {
-            const v = view();
-            gridRowClick(e, ropts(v), v);
-            syncPressed(e.currentTarget);
-        }} onDblClick={(e) => {
-            const v = view();
-            gridRowDoubleClick(e, ropts(v), v);
+        }} onClick={(e) => rowOn(r, e, gridRowClick, true)} onDblClick={(e) => {
+            rowOn(r, e, gridRowDoubleClick);
             onDblClick?.(e);
-        }} onDragStart={(e) => {
-            const v = view();
-            gridRowDragStart(e, ropts(v), v);
-        }}>
+        }} onDragStart={(e) => rowOn(r, e, gridRowDragStart)}>
         <Provider values={[
-            [CheckboxContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
-            [CheckboxFieldContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
-            [ButtonContext, { slots: { [DEFAULT_SLOT]: {}, chevron, drag: { style: { pointerEvents: "none" } } } }],
+            [CheckboxContext, checkboxSlots],
+            [CheckboxFieldContext, checkboxSlots],
+            [ButtonContext, buttons],
             [SelectionIndicatorContext, { isSelected: values.isSelected }],
             [RowFocusContext, { isFocusVisibleWithinRow: values.isFocusVisibleWithin }],
         ]}>
-          {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+          {/* 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) => {
@@ -857,38 +1111,48 @@ export const Row = /* @__PURE__ */ createBranchComponent(TableRowNode, function
     return Collection({ items: props.columns, children, idScope: props.id });
 });
 const CELL_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onClick", "style", "id"];
-/** 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 key = cell.key;
-    const rowKey = cell.parentKey;
-    const isVirtualized = internal.isVirtualized;
-    const { focusMode, allowsArrowNavigation } = props;
-    const nodeOf = (v) => {
-        const n = v.collection.getItem(key);
-        if (n)
-            n.column = v.collection.columns[n.index];
-        return n;
-    };
-    const copts = (v, n, el) => ({
+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,
-        focusMode,
-        allowsArrowNavigation,
+        isVirtualized: c.isVirtualized,
+        focusMode: c.focusMode,
+        allowsArrowNavigation: c.allowsArrowNavigation,
         shouldSelectOnPressUp: false,
-        ref: el ?? undefined,
-    });
+        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 = nodeOf(v);
+        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(copts(v, n), v),
+            ...tableCellProps(cellOptions(c, n), v),
             isSelected: v.selectionManager.isSelected(rowKey),
             isDisabled: v.selectionManager.isDisabled(rowKey),
             hasChildItems,
@@ -899,54 +1163,117 @@ export const Cell = /* @__PURE__ */ createLeafComponent(TableCellNode, function
             isTreeColumn: n.column?.key === v.treeColumn,
         };
     });
-    // Cell events with the node for the event (skipped once the cell left the collection).
-    const on = (e, fn) => {
-        const v = view();
-        const n = nodeOf(v);
-        if (n)
-            fn(e, copts(v, n), v);
-    };
-    const hovered = signal(false);
-    const focused = signal(false);
-    const focusVisible = signal(false);
-    const interaction = { states: { isHovered: hovered, isFocused: focused, isFocusVisible: focusVisible } };
     const values = {
         isPressed: () => !!st()?.isPressed,
-        isFocused: () => focused(),
-        isFocusVisible: () => focusVisible(),
-        isHovered: () => hovered(),
+        isFocused: () => c.focused(),
+        isFocusVisible: () => c.focusVisible(),
+        isHovered: () => c.hovered(),
         isSelected: () => !!st()?.isSelected,
         isDisabled: () => !!st()?.isDisabled,
-        isFocusVisibleWithinRow: rowFocus.isFocusVisibleWithinRow,
-        id: key,
+        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: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Cell" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    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);
-    return (<td {...dom} {...(st()?.gridCellProps ?? { role: "gridcell" })} ref={forwardedRef} class={rp.class()} style={rp.style()} data-focus-visible-within-row={dataBool(rowFocus.isFocusVisibleWithinRow())} 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())} onKeyDownCapture={(e) => on(e, gridCellKeyDownCapture)} onKeyDown={(e) => {
-            on(e, gridCellKeyDown);
+    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) => {
-            on(e, gridCellKeyUp);
+            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(interaction, e);
-            on(e, gridCellFocus);
-        }} onPointerOver={(e) => hoverStateOver(interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
-            on(e, gridCellPointerDown);
+            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) => {
-            on(e, gridCellPointerUp);
+            cellOn(c, e, gridCellPointerUp);
             onPointerUp?.(e);
         }} onClick={(e) => {
-            on(e, gridCellClick);
+            cellOn(c, e, gridCellClick);
             onClick?.(e);
         }}>
-      {provide(CollectionRendererContext, DefaultCollectionRenderer, () => rp.children())}
+      {provide(CollectionRendererContext, DefaultCollectionRenderer, () => cellOf(c).rp.children())}
     </td>);
 });
 /** A sentinel row: calls `onLoadMore` when scrolled near, and renders its children while `isLoading`. */
@@ -962,6 +1289,23 @@ export const TableLoadMoreItem = /* @__PURE__ */ createLeafComponent(LoaderNode,
     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>