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

package/collections/row-stamps.js

@@ -0,0 +1,108 @@
+// 64 JSON / HTML-safe characters (no quote, backslash, `<`, `&`).
+const DIGITS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+/** Characters per row stamp (24 bits). */
+export const STAMP = 4;
+let h = 0, budget = 0;
+const ch = (c) => void (h = Math.imul(h ^ c, 16777619));
+const str = (s) => {
+    for (let i = 0; i < s.length; i++)
+        h = Math.imul(h ^ s.charCodeAt(i), 16777619);
+    ch(0);
+};
+const isPlain = (v) => {
+    const proto = Object.getPrototypeOf(v);
+    return proto === Object.prototype || proto === null;
+};
+// Data the server and the browser see alike (resume-decoded values): primitives, arrays, plain objects, dates. Functions
+// (slots, render functions, handlers: the server and browser compile them differently) and class instances count by kind only;
+// nesting below `depth` by kind and length. `budget` bounds the work per node (a tree node's value holds its subtree).
+function feed(v, depth) {
+    if (--budget < 0)
+        return;
+    switch (typeof v) {
+        case "string":
+            (ch(1), str(v));
+            return;
+        case "number":
+        case "bigint":
+            (ch(2), str(String(v)));
+            return;
+        case "boolean":
+            ch(v ? 3 : 4);
+            return;
+        case "undefined":
+            ch(5);
+            return;
+        case "function":
+            ch(6);
+            return;
+        case "object":
+            break;
+        default:
+            ch(7);
+            return;
+    }
+    if (v === null)
+        return ch(8);
+    if (Array.isArray(v)) {
+        (ch(9), str(String(v.length)));
+        if (depth > 0)
+            for (let i = 0; i < v.length; i++)
+                feed(v[i], depth - 1);
+        return;
+    }
+    if (v instanceof Date)
+        return (ch(10), str(String(v.getTime())));
+    if (!isPlain(v))
+        return ch(11);
+    ch(12);
+    if (depth > 0)
+        for (const k in v)
+            (str(k), feed(v[k], depth - 1));
+}
+function node(n) {
+    const live = n.constructor.liveProps;
+    (str(n.type), feed(n.key, 0), feed(n.textValue, 0), feed(n["aria-label"], 0), feed(n.rendered, 0));
+    const props = n.props;
+    if (props)
+        for (const k in props)
+            if (!live?.includes(k))
+                (str(k), feed(props[k], 2));
+    const value = n.value;
+    if (live && value !== null && typeof value === "object" && isPlain(value)) {
+        ch(12);
+        for (const k in value)
+            if (!live.includes(k))
+                (str(k), feed(value[k], 2));
+    }
+    else
+        feed(value, 3);
+}
+/**
+ * The row stamp of a built node: a 24-bit hash of what `sameRender` compares (type, key, text, `rendered`, props, value), as
+ * 4 characters. A section's stamp covers its child nodes too (`children`): its rows are a For the section part creates in
+ * its body (ListBoxSection), which a resumed page never re-runs, so a changed child re-creates the section row.
+ */
+export function stamp(n, children) {
+    h = 0x811c9dc5;
+    if (n) {
+        budget = 256;
+        node(n);
+        if (children)
+            for (const child of children)
+                ((budget = 256), node(child));
+    }
+    h ^= h >>> 15;
+    h = Math.imul(h, 0x2c1b3c6d);
+    h ^= h >>> 12;
+    return DIGITS[h & 63] + DIGITS[(h >>> 6) & 63] + DIGITS[(h >>> 12) & 63] + DIGITS[(h >>> 18) & 63];
+}
+/** The set of stamps in a baseline string. */
+export function stampSet(base) {
+    const set = new Set();
+    for (let i = 0; i + STAMP <= base.length; i += STAMP)
+        set.add(base.slice(i, i + STAMP));
+    return set;
+}
+/** The collection key of a `For` row key (`resumedKeys` boxes the keys of rows it re-creates). */
+export const rowKey = (key) => (typeof key === "object" ? key.k : key);

package/collections/server-dev.d.ts

@@ -3,3 +3,4 @@ export declare const slotProbing = false;
 export declare function probeSlots(_values: readonly (readonly [Context<any>, unknown])[], _content: unknown): void;
 export declare const idScoping = false;
 export declare function scopedIdUpdaters(): Map<string, unknown> | undefined;
+export declare function domRowItem(_item: unknown): void;

package/collections/server-dev.js

@@ -14,3 +14,5 @@ export const idScoping = false;
 export function scopedIdUpdaters() {
     return undefined;
 }
+// DOM-backed loader data (DOM-DATA): browsers register no rows (folds away).
+export function domRowItem(_item) { }

package/collections/server-off.d.ts

@@ -3,3 +3,4 @@ export declare const slotProbing = false;
 export declare function probeSlots(_values: readonly (readonly [Context<any>, unknown])[], _content: unknown): void;
 export declare const idScoping = false;
 export declare function scopedIdUpdaters(): Map<string, unknown> | undefined;
+export declare function domRowItem(_item: unknown): void;

package/collections/server-off.js

@@ -5,3 +5,5 @@ export const idScoping = false;
 export function scopedIdUpdaters() {
     return undefined;
 }
+// DOM-backed loader data (DOM-DATA): browsers register no rows (folds away).
+export function domRowItem(_item) { }

package/collections/server-on.d.ts

@@ -26,3 +26,4 @@ export declare const idScoping = true;
  * A's ids. Held weakly by the scope object: dropped with the render.
  */
 export declare function scopedIdUpdaters(): Map<string, unknown> | undefined;
+export declare function domRowItem(item: unknown): void;

package/collections/server-on.jsx

@@ -74,3 +74,13 @@ export function scopedIdUpdaters() {
         scopedIds.set(scope, (map = new Map()));
     return map;
 }
+/**
+ * DOM-backed loader data (DOM-DATA, `resume: { domData: true }` servers): a built collection row renders `item` (the
+ * node's `value`, the user's data object) although its `For` iterates keys. `@rivetjs/runtime/server-resume` installs the
+ * hook only in domData builds (`Symbol.for("rivet.domRowItem")`): the row then registers that object, so the item's
+ * strings the row shows as an element's whole text / a plain attribute travel as DOM paths. Elsewhere: nothing.
+ */
+const DOM_ROW_ITEM = Symbol.for("rivet.domRowItem");
+export function domRowItem(item) {
+    globalThis[DOM_ROW_ITEM]?.(item);
+}

package/drag-drop/directives/drag.d.ts

@@ -91,6 +91,12 @@ export interface DragSetup<T = any> {
     config?: DragDropConfig | null;
     /** `DirectionalityContext` value where the `<Drag>` rendered (else the document's). */
     dir?: Directionality | null;
+    /**
+     * Rivet: the `<Drag>` element's `ref()`. The instance is destroyed once it lets go of the element: a client unmount
+     * (`bindRef`'s cleanup) or, on a resumed page, the end of the server element's region (a row a `For` drops, a
+     * re-created region: the revived ref resets).
+     */
+    element?: () => HTMLElement | undefined;
 }
 /** Element that can be moved inside a `DropList` container (Angular `CdkDrag`). */
 export declare class DragInstance<T = any> {
@@ -112,6 +118,7 @@ export declare class DragInstance<T = any> {
     private _dragDropRegistry;
     private _destroyed;
     private _disposeSync;
+    private _disposeRelease;
     private _containerBeforeStarted;
     private _movedSubscription;
     private _handles;
@@ -163,6 +170,15 @@ export declare class DragInstance<T = any> {
     setFreeDragPosition(value: Point): void;
     /** Rivet: the props of a lazily created (bare) instance arrived with its own handler. */
     _setInputs(setup: DragSetup<T>): void;
+    /**
+     * Rivet: destroy the instance once `element` (the `<Drag>`'s `ref()`, `DragSetup.element`) stops holding this
+     * element (Angular `ngOnDestroy`). A server-rendered `<Drag>` runs no component code on a resumed page, so its lazily
+     * created instance had no destroy hook: a row a resumed `For` dropped stayed in the registry (`_dragInstances`, the
+     * document `touchmove` listener), its list's items and its sync effects. The resume runtime resets a revived ref when
+     * the region of its server element dies; client renders reset it on unmount (`bindRef`), like `drag.tsx`'s cleanup.
+     * False: destroyed (the element already left).
+     */
+    _releaseWith(element: (() => HTMLElement | undefined) | undefined): boolean;
     /** Rivet: sync what the DOM holds (handles, container state) before the ref sees a pointer down. */
     _beforePointerDown(): void;
     /** Angular `ngOnDestroy`. */

package/drag-drop/directives/drag.js

@@ -56,6 +56,7 @@ export class DragInstance {
     _dragDropRegistry;
     _destroyed = false;
     _disposeSync = null;
+    _disposeRelease = null;
     _containerBeforeStarted = null;
     _movedSubscription = null;
     _handles = [];
@@ -224,6 +225,32 @@ export class DragInstance {
         this._syncReactiveInputs();
         this._syncHostClasses();
     }
+    /**
+     * Rivet: destroy the instance once `element` (the `<Drag>`'s `ref()`, `DragSetup.element`) stops holding this
+     * element (Angular `ngOnDestroy`). A server-rendered `<Drag>` runs no component code on a resumed page, so its lazily
+     * created instance had no destroy hook: a row a resumed `For` dropped stayed in the registry (`_dragInstances`, the
+     * document `touchmove` listener), its list's items and its sync effects. The resume runtime resets a revived ref when
+     * the region of its server element dies; client renders reset it on unmount (`bindRef`), like `drag.tsx`'s cleanup.
+     * False: destroyed (the element already left).
+     */
+    _releaseWith(element) {
+        if (element && !this._disposeRelease && !this._destroyed) {
+            const release = (this._disposeRelease = createRoot((dispose) => {
+                let held = false;
+                effect(() => {
+                    if (element() === this.element)
+                        held = true;
+                    // Never held: a ref that already let go (its region died before this handler ran, a replayed press).
+                    else if (held || !this.element.isConnected)
+                        untrack(() => this.destroy());
+                });
+                return dispose;
+            }).value);
+            if (this._destroyed)
+                release();
+        }
+        return !this._destroyed;
+    }
     /** Rivet: sync what the DOM holds (handles, container state) before the ref sees a pointer down. */
     _beforePointerDown() {
         this._syncHandles();
@@ -241,6 +268,7 @@ export class DragInstance {
         }
         this._dragDropRegistry.removeDirectiveNode(this.element);
         this._disposeSync?.();
+        this._disposeRelease?.();
         this._containerBeforeStarted?.unsubscribe();
         this._movedSubscription?.unsubscribe();
         this._dragRef.dispose();

package/drag-drop/drag.jsx

@@ -47,7 +47,10 @@ export function Drag(props) {
         onDropped: props.onDropped,
         onMoved: props.onMoved,
     };
-    const setup = { inputs, config, dir };
+    // Client render: set once rendered. Resumed page: revived holding the server element, reset when its region dies;
+    // the instance (created by the first press) is destroyed with it (`DragInstance._releaseWith`).
+    const element = ref();
+    const setup = { inputs, config, dir, element };
     // Read every prop up front: an element with a spread resumes as one binding over all its
     // attributes, and reading `props` there would capture the whole props object (children included).
     const dom = globalDOMProps(props, OWNED);
@@ -75,8 +78,6 @@ export function Drag(props) {
         dragHostEvent(event, setup);
         onTouchStart?.(event);
     };
-    // Client render only: on the server the ref stays empty.
-    const element = ref();
     const node = elementType === "li" ? (<li {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
         {children}
       </li>) : elementType === "tr" ? (<tr {...dom} ref={element} id={id} class={className} class:cdk-drag-disabled={isDisabled()} data-disabled={isDisabled() ? "true" : undefined} data-rv-drag="" data-rv-drag-self-handle={selfHandle} data-rv-free-position={transform() ? "" : undefined} style={style} style:transform={transform()} onMouseDown={mouseDown} onTouchStart={touchStart} onDragStart={host}>
@@ -91,7 +92,8 @@ export function Drag(props) {
         {children}
       </div>);
     // Client-rendered: join a list that is being dragged over (Angular `addItem` on construction) and
-    // destroy the instance with the element (`ngOnDestroy`). Server-rendered drags live with the page.
+    // destroy the instance with the element (`ngOnDestroy`). Server-rendered drags (resumed page, no component code):
+    // the instance goes when the revived element ref resets (its region died), `DragInstance._releaseWith`.
     // (`getOwner()` is set on the server too: the element ref is what tells a client render apart.)
     queueMicrotask(() => {
         const el = element();

package/drag-drop/lazy-refs.js

@@ -6,14 +6,17 @@
 // Cold presses: the loader replays a `mousedown` / `touchstart` once the component chunks are in
 // (async). The replayed event is forwarded with its age: the ref counts the drag-start delay from the
 // original press and cancels the pending sequence when the press was released meanwhile
-// (`DragRef._pointerDownFromHost`). An item whose `<DropList>` chunk is still loading waits for the
-// list to register before it handles the press (so it never starts in standalone mode).
+// (`DragRef._pointerDownFromHost`). A replay is a press handled after its dispatch ended
+// (`eventPhase` NONE), however soon: preloaded / merged chunks replay it within a few ms, and its
+// `mouseup` / `touchend` (no resumed handler, so never held by the loader) reached no listener.
+// An item whose `<DropList>` chunk is still loading waits for the list to register before it
+// handles the press (so it never starts in standalone mode).
 import { DragInstance } from "./directives/drag.js";
 import { DropListInstance } from "./directives/drop-list.js";
 import { DRAG_ATTR, closestDropListElement, dragOf, dropListOf, drags, dropLists, isWake, wake, whenRegistered } from "./directives/registry.js";
 import { handleElements } from "./directives/drag-handle.js";
 import { toggleNativeDragInteractions } from "./dom/styling.js";
-/** A press handled this much later than it happened (ms) was replayed after its code loaded. */
+/** A press handled this much later than it happened (ms) is treated as replayed even during its dispatch. */
 const REPLAYED_AFTER = 50;
 /** Handler of a `<Drag>` element (`mousedown`, `touchstart`, `dragstart` + the wake event). */
 export function dragHostEvent(event, setup) {
@@ -32,6 +35,9 @@ export function dragHostEvent(event, setup) {
     if (instance)
         instance._setInputs(setup);
     const drag = instance ?? new DragInstance(element, setup);
+    // Dies with its element's `ref()` (a resumed row dropped, a client unmount): see `DragInstance._releaseWith`.
+    if (!drag._releaseWith(setup.element))
+        return;
     // The wake event, or a native `dragstart`: the ref's own listener prevents it when needed, except
     // for the `dragstart` that created the ref (its listener was added during the dispatch).
     if (event.type === "dragstart") {
@@ -41,7 +47,12 @@ export function dragHostEvent(event, setup) {
     }
     drag._beforePointerDown();
     const age = performance.now() - event.timeStamp;
-    drag._dragRef._pointerDownFromHost(event, age > REPLAYED_AFTER ? age : 0);
+    // Replayed: its dispatch is over (the loader's replay, `whenRegistered` above), or handled late. Age alone missed a
+    // replay faster than REPLAYED_AFTER: the press released before the code loaded then kept its sequence, and the next
+    // move started a drag of an element the replayed click may already have removed (KANBAN-BUILD 2026-10-19: ui-docs
+    // `showcase-kanban`, "Cannot read properties of null (reading 'insertBefore')" in `_startDragSequence`).
+    const replayed = event.eventPhase === Event.NONE || age > REPLAYED_AFTER;
+    drag._dragRef._pointerDownFromHost(event, replayed ? Math.max(age, Number.MIN_VALUE) : 0);
 }
 /** Handler of a `<DropList>` element (`mousedown`, `touchstart` and the wake event): creates its instance. */
 export function dropListHostEvent(event, setup) {

package/grid-list/behaviour.d.ts

@@ -160,6 +160,12 @@ export interface GridListItemAria extends SelectableItemStates {
 }
 /** Focus the row (focusMode "child": its first tabbable child) — react-aria's item `focus()`. */
 export declare function focusRow(props: AriaGridListItemOptions, row: HTMLElement | null): void;
+/**
+ * useGridListItem (virtualized) `aria-rowindex` of `key`: `node.index + 1`, or with sections its 1-based position
+ * among the collection's non-section keys. Rivet: the section scan is cached per committed collection (a virtualized
+ * GridList's rows each ask; upstream rescans per row).
+ */
+export declare function gridListRowIndex(collection: Collection<Node<unknown>>, key: Key, index?: number): number;
 /**
  * keydown (capture) on the row: Left / Right move between focusable children (arrow
  * keyboardNavigationBehavior, RTL aware) and back to the row; tree expand / collapse; Up / Down

package/grid-list/behaviour.js

@@ -336,15 +336,33 @@ function gridListItemAttrs(props, state) {
     };
     if (props.focusMode === "child" && props.allowsArrowNavigation && d.shared.keyboardNavigationBehavior === "tab")
         attrs.tabIndex = -1;
-    if (props.isVirtualized) {
-        const { collection } = state;
-        const nodes = [...collection];
-        attrs["aria-rowindex"] = nodes.find((n) => n.type === "section")
-            ? [...collection.getKeys()].filter((key) => collection.getItem(key)?.type !== "section").findIndex((key) => key === node.key) + 1
-            : node.index + 1;
-    }
+    if (props.isVirtualized)
+        attrs["aria-rowindex"] = gridListRowIndex(state.collection, node.key, node.index);
     return { ...attrs, ...d.treeAttrs };
 }
+const rowIndexes = new WeakMap();
+/**
+ * useGridListItem (virtualized) `aria-rowindex` of `key`: `node.index + 1`, or with sections its 1-based position
+ * among the collection's non-section keys. Rivet: the section scan is cached per committed collection (a virtualized
+ * GridList's rows each ask; upstream rescans per row).
+ */
+export function gridListRowIndex(collection, key, index = collection.getItem(key)?.index ?? 0) {
+    let keys = rowIndexes.get(collection);
+    if (keys === undefined) {
+        keys = null;
+        for (const n of collection)
+            if (n.type === "section") {
+                keys = new Map();
+                for (const k of collection.getKeys())
+                    if (collection.getItem(k)?.type !== "section")
+                        keys.set(k, keys.size + 1);
+                break;
+            }
+        if (collection.isFrozen !== false)
+            rowIndexes.set(collection, keys);
+    }
+    return keys ? (keys.get(key) ?? 0) : index + 1;
+}
 /** Attributes of the grid cell inside the row. */
 const gridListCellAttrs = () => ({ role: "gridcell", "aria-colindex": 1 });
 function handleTreeExpansionKeys(e, state, node, hasChildRows, direction, activeElement, row, allowsArrowNavigation) {

package/grid-list/index.d.ts

@@ -1,7 +1,7 @@
 import { type Signal } from "@rivetjs/reactivity";
 import { type CollectionProps } from "../collections/components.jsx";
 import { type ListState } from "../collections/list-state.js";
-import type { DisabledBehavior, Key, KeyboardDelegate, Node, Orientation, Selection, SelectionBehavior, SelectionMode } from "../collections/types.js";
+import type { Collection as ICollection, DisabledBehavior, Key, KeyboardDelegate, Node, Orientation, Selection, SelectionBehavior, SelectionMode } from "../collections/types.js";
 import { type DOMRenderProps } from "../utils/render.js";
 import { type GlobalDOMAttributes } from "../utils/dom-props.js";
 import { type LinkDOMProps } from "../utils/links.jsx";
@@ -100,6 +100,8 @@ export interface GridListInternal {
     version: () => unknown;
     /** Autocomplete filter (SelectableCollectionContext): rows it returns false for do not render. */
     filter?: ((textValue: string, node: Node<any>) => boolean) | undefined;
+    /** Rivet: the built collection of a virtualized GridList (rows read their `aria-rowindex` from it). */
+    collection?: (() => ICollection<Node<any>>) | undefined;
 }
 /** The GridList a part renders in (null outside a GridList, and inside a row's content). */
 export declare const GridListInternalContext: import("@rivetjs/reactivity").Context<GridListInternal | null>;

package/grid-list/index.jsx

@@ -6,10 +6,10 @@
 // @react-aria/gridlist port (`./behaviour.ts`).
 //
 // Rivet:
-// - B5 LIVE collection mode: the rows render in place (`data-key` on the row); the handlers read the
-//   collection back from the grid's DOM per event (`listStateView(state, shared)` →
-//   `listCollection(state)` → `domCollection`). Resumed pages need no item model; the grid and its
-//   rows resume from serializable state only (`createListState` signals + keys + plain item props).
+// - Rows render from the built collection (below; `data-key` on the row); the handlers read it per event
+//   (`listStateView(state, shared)` → `listCollection(state)`). Resumed pages ship no item model: the collection is
+//   rebuilt from the content, the grid and its rows resume from serializable state only (`createListState` signals +
+//   keys + plain item props).
 // - Row attributes are computed per row from a one-node collection of the row's own props
 //   (`rowCollection(spec)`) inside a `computed` (selection / focus / disabled reads are reactive);
 //   handlers rebuild the row node from the DOM collection per event (`eventNode`).
@@ -19,8 +19,13 @@
 //   `class` / `style` / `children` function asks for render props.
 // - `className` → `class` (default `rv-GridList`, `rv-GridListItem`, `rv-GridListSection`,
 //   `rv-GridListHeader`, `rv-GridListLoadingIndicator`).
+// - The GridList builds its collection (`computed(buildCollectionFrom(content))` in the body; LAZY-ROWS T3, 2026-10-19:
+//   always, virtualized only before): rows render from it through the renderer's keyed `For` (`renderNodeAt`, lazy-row
+//   eligible), handlers navigate it; a resumed page rebuilds it from the content on first need. Inside a
+//   `<CollectionVirtualizer layout={ListLayout | GridLayout}>` (RAC Virtualizer) rows render as views, the grid element
+//   is the scroll container (scroll forwarded to the renderer), the focused row is persisted, rows get `aria-rowindex`.
 // Deviation: `isEmpty` is known for `items` collections and, when `renderEmptyState` is set, for static
-//   children (built with `collectionOf`); static children without `renderEmptyState` count as non-empty.
+//   children (the built collection's size); static children without `renderEmptyState` count as non-empty.
 // Deviation: react-aria `useHasTabbableChild` (empty state with a tabbable child) is not tracked: an
 //   empty grid is always tabbable.
 // Deviation: the description / section heading ids (react-aria `useSlotId`) are always set on the
@@ -32,7 +37,7 @@
 import { computed, createContext, onCleanup, signal, untrack, useContext } from "@rivetjs/reactivity";
 import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
 import { buildCollection, HeaderNode, ItemNode, LoaderNode, SectionNode } from "../collections/base.js";
-import { Collection, CollectionRendererContext, DefaultCollectionRenderer, collectionOf, createBranchComponent, createLeafComponent, } from "../collections/components.jsx";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, buildCollectionFrom, createBranchComponent, createLeafComponent, } from "../collections/components.jsx";
 import { createListState, listSelectionManager } from "../collections/list-state.js";
 import { ListKeyboardDelegate, searchCollator } from "../selection/list-keyboard-delegate.js";
 import {} from "../utils/render.js";
@@ -52,7 +57,7 @@ import { SharedElementContext } from "../shared-element-transition/transition.js
 import { loadMoreSentinel } from "../utils/load-more-sentinel.jsx";
 import { SelectableCollectionContext } from "../autocomplete/contexts.js";
 import { eventNode, isFn, ringOf, rowCollection, rowSpec, slotRef, withDisabled } from "./row.js";
-import { gridListBlur, gridListAutoFocus, gridListFocus, gridListHighlightDescription, gridListItemClick, gridListItemDoubleClick, gridListItemDragStart, gridListItemFocus, gridListItemKeyDown, gridListItemKeyDownCapture, gridListItemKeyUp, gridListItemPointerCancel, gridListItemPointerDown, gridListItemPointerUp, gridListItemProps, gridListKeyDown, gridListKeyDownCapture, gridListMouseDown, gridListProps, gridListSectionProps, gridListSelectionCheckboxChange, gridListSelectionCheckboxProps, listStateView, } from "./behaviour.js";
+import { gridListBlur, gridListAutoFocus, gridListFocus, gridListHighlightDescription, gridListItemClick, gridListItemDoubleClick, gridListItemDragStart, gridListItemFocus, gridListItemKeyDown, gridListItemKeyDownCapture, gridListItemKeyUp, gridListItemPointerCancel, gridListItemPointerDown, gridListItemPointerUp, gridListItemProps, gridListRowIndex, gridListKeyDown, gridListKeyDownCapture, gridListMouseDown, gridListProps, gridListSectionProps, gridListSelectionCheckboxChange, gridListSelectionCheckboxProps, listStateView, } from "./behaviour.js";
 import { hasLive, isLive, liveKeys, liveView } from "../utils/live.jsx";
 import { liveRenderProps } from "../slots/index.jsx";
 /** RAC `GridListContext`. */
@@ -79,8 +84,17 @@ export function GridList(inProps) {
     const sharedElements = {};
     const isVirtualized = !!renderer.isVirtualized, layoutDelegate = renderer.layoutDelegate;
     const { locale, direction } = useLocale();
+    const content = () => (<Collection items={items} idScope={idScope}>
+      {children}
+    </Collection>);
+    // The list renders from its built collection (RAC: inside a Virtualizer only the visible window has rows; the
+    // handlers navigate the built collection, not the rendered DOM; LAZY-ROWS T3: every GridList, so its rows are the rows
+    // of the renderer's keyed `For`). A computed in the body: the compiler records it as a resumable computed (with the
+    // host's provider frame), so a resumed page rebuilds it from `content` on its first read.
+    const collection = computed(() => buildCollectionFrom(content));
     const state = createListState({
         id: props.id,
+        collection,
         selectionMode: props.selectionMode,
         selectionBehavior: props.selectionBehavior,
         // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
@@ -142,9 +156,6 @@ export function GridList(inProps) {
                 direction,
             }),
     });
-    const content = () => (<Collection items={items} idScope={idScope}>
-      {children}
-    </Collection>);
     const itemsOf = items;
     const isEmpty = itemsOf != null
         ? () => {
@@ -154,10 +165,7 @@ export function GridList(inProps) {
             return true;
         }
         : renderEmptyState
-            ? (() => {
-                const built = collectionOf(content);
-                return () => built().size === 0;
-            })()
+            ? () => collection().size === 0
             : () => false;
     const version = itemsOf != null ? (typeof itemsOf === "function" ? itemsOf : () => itemsOf) : () => null;
     const wantsStates = isFn(props.class) || isFn(props.style) || !!renderEmptyState;
@@ -177,10 +185,11 @@ export function GridList(inProps) {
     // Grid attributes (reactive): the render view only needs the size and the focused key.
     const gridAttrs = computed(() => {
         const empty = isEmpty();
-        const collection = buildCollection([]);
+        const none = buildCollection([]);
         const v = {
-            collection: { ...collection, size: empty ? 0 : 1 },
-            selectionManager: listSelectionManager(state, collection),
+            // Virtualized: the built collection (useGridList `aria-rowcount` = its size).
+            collection: isVirtualized ? collection() : { ...none, size: empty ? 0 : 1 },
+            selectionManager: listSelectionManager(state, none),
             disabledKeys: state.disabledKeys,
             list: shared,
         };
@@ -195,11 +204,20 @@ export function GridList(inProps) {
             list: shared,
         });
     };
-    const internal = { state, shared, locale, direction, keyboardNavigationBehavior, isVirtualized, version, filter };
+    const internal = { state, shared, locale, direction, keyboardNavigationBehavior, isVirtualized, version, filter, collection };
     const dom = globalDOMProps(props, GRID_OWNED);
     const slot = props.slot || undefined;
     const gridEl = createRef();
     const rootRef = mergeRefValues(ref, gridEl);
+    // Virtualized: the grid element is the scroll container (RAC scrollRef); its focused row stays rendered and its
+    // scroll events reach the renderer (the engine follows the scroll position).
+    const rootCollection = collection;
+    const focusedKey = isVirtualized ? state.selectionState.focusedKey : undefined;
+    const virtualScroll = isVirtualized ? customRenderer?.onScroll : undefined;
+    const scrolled = (e) => {
+        virtualScroll?.(e);
+        onScroll?.(e);
+    };
     // react-aria useSelectableCollection autoFocus mount effect (retried until the grid has items).
     if (autoFocus !== undefined)
         clientEffect(() => {
@@ -261,13 +279,19 @@ export function GridList(inProps) {
             },
             onFocus: (e) => focusStateFocus(ring, e),
             onBlur: (e) => focusStateBlur(ring, e),
-            onScroll: (e) => onScroll?.(e),
+            onScroll: (e) => scrolled(e),
             children: () => [
                 <Provider values={[
                         [GridListInternalContext, internal],
                         [SharedElementContext, sharedElements],
                     ]}>
-          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({
+                        collection: rootCollection,
+                        content,
+                        idScope,
+                        scrollRef: gridEl,
+                        focusedKey,
+                    })}
         </Provider>,
                 <Show when={isEmpty}>
           {() => renderEmptyState ? (<div role="row" aria-rowindex={1} style={{ display: "contents" }}>
@@ -301,13 +325,19 @@ export function GridList(inProps) {
             const v = view();
             gridListMouseDown(e, eventOptions(v, e.currentTarget), v);
             onMouseDown?.(e);
-        }} onFocus={(e) => focusStateFocus(ring, e)} onBlur={(e) => focusStateBlur(ring, e)} onScroll={onScroll ? (e) => onScroll(e) : undefined}>
+        }} onFocus={(e) => focusStateFocus(ring, e)} onBlur={(e) => focusStateBlur(ring, e)} onScroll={virtualScroll || onScroll ? scrolled : undefined}>
         <Provider values={[
             [GridListInternalContext, internal],
             // RAC: the items share one SharedElementTransition scope (a SelectionIndicator animates between them).
             [SharedElementContext, sharedElements],
         ]}>
-          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({
+            collection: rootCollection,
+            content,
+            idScope,
+            scrollRef: gridEl,
+            focusedKey,
+        })}
         </Provider>
         <Show when={isEmpty}>
           {() => renderEmptyState ? (<div role="row" aria-rowindex={1} style={{ display: "contents" }}>
@@ -331,6 +361,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     if (!ctx)
         throw new Error("GridListItem must be rendered inside a GridList.");
     const { state, shared, locale, direction, keyboardNavigationBehavior, isVirtualized } = ctx;
+    const built = ctx.collection;
     const key = item.key;
     const spec = rowSpec(key, item, props);
     // Live `isDisabled` (LIVE-SWEEP round 2): the row's spec with the current value (read in the computed / at event time).
@@ -361,6 +392,9 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
             list: shared,
         };
         const result = gridListItemProps(itemOptions(node), v);
+        // RA useGridListItem (virtualized): the row's index in the whole collection (the one-node collection's is 1).
+        if (isVirtualized && built)
+            result.rowProps["aria-rowindex"] = gridListRowIndex(built(), key);
         const checkbox = gridListSelectionCheckboxProps({ key, locale, id: checkboxId }, v).checkboxProps;
         return {
             ...result,
@@ -616,6 +650,8 @@ export const GridListHeaderInnerContext = resumableContext(createContext(null, {
 /** A GridListSection represents a section within a GridList (RAC `GridListSection`). */
 export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, function GridListSection(props, forwardedRef, item) {
     const { CollectionBranch } = useContext(CollectionRendererContext);
+    // The grid list's built collection (rows render from it); null outside a GridList (live content).
+    const collection = (useContext(GridListInternalContext)?.collection ?? null);
     const heading = createSlotId();
     const ariaLabel = props["aria-label"];
     const aria = gridListSectionProps({ "aria-label": ariaLabel, headingId: heading.id });
@@ -639,7 +675,7 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode,
                     [GridListHeaderContext, { ...aria.rowProps }],
                     [GridListHeaderInnerContext, { ...aria.rowHeaderProps, id: heading }],
                 ]}>
-            {CollectionBranch({ collection: null, parent: item })}
+            {CollectionBranch({ collection, parent: item })}
           </Provider>),
         };
         return props.render(attrs, undefined);
@@ -649,7 +685,7 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode,
             [GridListHeaderContext, { ...aria.rowProps }],
             [GridListHeaderInnerContext, { ...aria.rowHeaderProps, id: heading }],
         ]}>
-          {CollectionBranch({ collection: null, parent: item })}
+          {CollectionBranch({ collection, parent: item })}
         </Provider>
       </div>);
 });

package/interactions/press.jsx

@@ -23,7 +23,8 @@
 import { createContext, signal, useContext } from "@rivetjs/reactivity";
 import { resumableContext } from "@rivetjs/runtime/resume-format";
 import { mergeProps } from "./merge-props.jsx";
-import { disableTextSelection, focusWithoutScrolling, getEventTarget, getOwnerDocument, isMac, isVirtualClick, isVirtualPointerEvent, linkState, nodeContains, nonTextInputTypes, openLink, preventFocus, read, restoreTextSelection, } from "./utils.js";
+import { disableTextSelection, focusWithoutScrolling, getEventTarget, getOwnerDocument, isMac, isVirtualClick, isVirtualPointerEvent, linkState, nodeContains, nonTextInputTypes, preventFocus, read, restoreTextSelection, } from "./utils.js";
+import { openLink } from "../utils/links.jsx";
 /** `Press.track`: bind `dragstart` while pressed. */
 export const PRESS_TRACK_DRAG = 1;
 /** `Press.track`: bind `pointerenter` / `pointerleave` while pressed. */

package/interactions/utils.d.ts

@@ -1,8 +1,7 @@
 export { isAndroid, isChrome, isFirefox, isIOS, isIPad, isIPhone, isMac, isWebKit, isVirtualClick, isVirtualPointerEvent } from "../platform/index.js";
 export { getActiveElement, getOwnerDocument, getOwnerWindow, isFocusWithin, isShadowRoot, nodeContains } from "../utils/dom.js";
-export { focusWithoutScrolling, runAfterTransition } from "../utils/index.js";
-export { chain } from "./merge-props.jsx";
-export { linkState, openLink, type Modifiers } from "../utils/links.jsx";
+export { focusWithoutScrolling, runAfterTransition } from "../utils/transitions.js";
+export { linkState } from "../utils/link-state.js";
 export type PointerType = "mouse" | "pen" | "touch" | "keyboard" | "virtual";
 export type FocusableElement = HTMLElement | SVGElement;
 /** A value or an accessor of it (signals qualify): options are read at event time. */