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

package/interactions/utils.js

@@ -5,18 +5,19 @@
 //
 // One implementation per helper: platform probes come from `../platform` (return `undefined` on the
 // server), DOM / shadow-DOM functions from `../utils/dom.ts`, `runAfterTransition` /
-// `focusWithoutScrolling` from `../utils/index.ts`, `chain` from `./merge-props.tsx`, `openLink` /
-// `linkState` from `../utils/links.tsx` (the flag usePress and focus-visible read is the one the
-// router sets). They are re-exported here for the hooks (and existing importers).
+// `focusWithoutScrolling` from the leaf `../utils/transitions.ts`, `linkState` from the leaf
+// `../utils/link-state.ts` (the flag usePress and focus-visible read is the one `openLink` sets).
+// They are re-exported here for the hooks. Leaves only (DOCS-COLD 2026-10-20): `chain` (`./merge-props.tsx`)
+// and `openLink` (`../utils/links.tsx`) are imported from their modules, so a focus / overlay helper
+// importing this file does not pull prop merging or the router module into its chunk.
 import { getEventTarget as domEventTarget } from "../utils/dom.js";
 import { isIOS, isWebKit } from "../platform/index.js";
 import { getActiveElement, getOwnerDocument, getOwnerWindow, isShadowRoot, nodeContains } from "../utils/dom.js";
-import { focusWithoutScrolling, runAfterTransition } from "../utils/index.js";
+import { focusWithoutScrolling, runAfterTransition } from "../utils/transitions.js";
 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 } from "../utils/links.jsx";
+export { focusWithoutScrolling, runAfterTransition } from "../utils/transitions.js";
+export { linkState } from "../utils/link-state.js";
 /** Read a `MaybeAccessor` (functions are called; signals are functions). */
 export function read(value) {
     return typeof value === "function" ? value() : value;

package/listbox/behaviour.jsx

@@ -17,9 +17,10 @@
 //   list's `onAction(key)`, then the bubbling `react-aria-item-action` (useSelectableItem).
 // - Option hover callbacks: `rv-hover-start` / `rv-hover-end` events on the option element (same scheme).
 // - Items marked `data-rv-long-press` (a long press interaction, `@rivetjs/cdk/morph/item`) select on press up.
-// Deviation: no drag and drop (C8), no `isVirtualized` posinset/setsize (Virtualizer lane).
+// Deviation: no drag and drop (C8).
 import { signal, untrack } from "@rivetjs/reactivity";
 import { listCollection, listSelectionManager } from "../collections/list-state.js";
+import { itemPosition } from "../collections/nodes.js";
 import { SelectionManager } from "../selection/manager.js";
 import { isFocusedKey } from "../selection/keyed.js";
 import { selectableCollectionAutoFocus, selectableCollectionBlur, selectableCollectionClearVirtualFocus, selectableCollectionFocus, selectableCollectionKeyDown, selectableCollectionKeyDownCapture, selectableCollectionMouseDown, selectableCollectionVirtualFocus, } from "../selection/selectable-collection.js";
@@ -179,20 +180,28 @@ export function optionProps(props, state, data) {
     const states = () => selectableItemStates(options());
     const isFocused = () => states().isFocused;
     const id = getItemId(data.id, key);
+    const attrs = {
+        id,
+        role: "option",
+        "data-key": String(key),
+        "data-key-type": typeof key === "number" ? "number" : undefined,
+        "data-collection": data.id,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props.labelId,
+        "aria-describedby": props.descriptionId,
+        "aria-disabled": () => (states().isDisabled ? "true" : undefined),
+        "aria-selected": () => (state.selectionState.selectionMode === "none" ? undefined : states().isSelected ? "true" : "false"),
+        tabIndex: () => (read(data.shouldUseVirtualFocus) || states().isDisabled ? undefined : isFocusedKey(state.selectionState, key) ? 0 : -1),
+    };
+    if (data.isVirtualized)
+        // useOption: a virtualized list renders a window of its options; their position comes from the collection.
+        // (Object-literal arrows: resumable closures.)
+        Object.assign(attrs, {
+            "aria-posinset": () => optionPosInSet(state, key),
+            "aria-setsize": () => optionSetSize(state, key),
+        });
     return {
-        optionProps: {
-            id,
-            role: "option",
-            "data-key": String(key),
-            "data-key-type": typeof key === "number" ? "number" : undefined,
-            "data-collection": data.id,
-            "aria-label": props["aria-label"],
-            "aria-labelledby": props.labelId,
-            "aria-describedby": props.descriptionId,
-            "aria-disabled": () => (states().isDisabled ? "true" : undefined),
-            "aria-selected": () => (state.selectionState.selectionMode === "none" ? undefined : states().isSelected ? "true" : "false"),
-            tabIndex: () => (read(data.shouldUseVirtualFocus) || states().isDisabled ? undefined : isFocusedKey(state.selectionState, key) ? 0 : -1),
-        },
+        optionProps: attrs,
         isSelected: () => states().isSelected,
         isDisabled: () => states().isDisabled,
         isFocused,
@@ -203,6 +212,20 @@ export function optionProps(props, state, data) {
         hasAction: () => states().hasAction,
     };
 }
+/** The built collection of a list state (a virtualized ListBox renders from it). */
+function builtOf(state) {
+    const c = state.collection;
+    return typeof c === "function" ? c() : c;
+}
+// Position within the option's section (`itemPosition`: sections are groups; RA counts the header in `index`).
+const optionPosInSet = (state, key) => {
+    const c = builtOf(state);
+    return c ? itemPosition(c, key)?.[0] : undefined;
+};
+const optionSetSize = (state, key) => {
+    const c = builtOf(state);
+    return c ? itemPosition(c, key)?.[1] : undefined;
+};
 function rootOf(e) {
     return e.currentTarget;
 }

package/listbox/index.jsx

@@ -2,10 +2,12 @@
 // Parts: ListBox, ListBoxItem, ListBoxSection, ListBoxLoadMoreItem (+ Header / Text / Separator / Collection /
 // SelectionIndicator inside); contexts ListBoxContext, ListStateContext.
 // Rivet:
-// - Collections run in live mode (`../collections/components.tsx`): options render in place and the listbox reads
-//   its collection back from the rendered options at event time (no item model on resumed pages). A ListStateContext
-//   from a parent (Select, ComboBox) whose state carries a built `collection` renders node by node instead
-//   (`CollectionRoot({ collection })`), filtered by the SelectableCollectionContext `filter`.
+// - A standalone ListBox builds its collection (`computed(buildCollectionFrom(content))` in the body, B5 build mode;
+//   LAZY-ROWS T3, 2026-10-19 — live mode before) and renders node by node (`CollectionRoot({ collection })`): options
+//   are the rows of the renderer's keyed `For` (`(key) => renderNodeAt(collection, key)`, lazy-row eligible), the
+//   handlers navigate the built collection; a resumed page rebuilds it from the content on first need (no per-option
+//   state). A ListStateContext from a parent (Select, ComboBox) whose state carries a built `collection` renders from
+//   that one, filtered by the SelectableCollectionContext `filter`.
 // - One delegated handler set on the listbox element runs useSelectableList + every option's useSelectableItem /
 //   useHover (`./behaviour.tsx`); option `data-hovered` / `data-pressed` are written by those handlers, root
 //   `data-focused` / `data-focus-visible` bind to the ListData focus signals they set; option `data-selected` / `data-focused` / `data-focus-visible` / `data-disabled` bind
@@ -17,14 +19,13 @@
 //   objects with a `children` array → `ListBoxSection` + `Header`).
 // - Option label / description slot ids (useSlotId) are created only for non-text children (text children can hold
 //   no `<Text slot>`: RA's effect would drop the ids anyway).
-// - `isEmpty`: `items` length, else the built size of the children when `renderEmptyState` is given (a build pass),
-//   else false; with a parent state, its collection size.
+// - `isEmpty`: `items` length, else the built size of the children when `renderEmptyState` is given, else false; with a parent state, its collection size.
 // `render` (RAC DOMRenderProps) on ListBox (`<div>`), ListBoxSection (`<section>`) and ListBoxItem (`<div>` / `<a>`): given, the attributes object goes to `render(attrs, renderProps)`
 //   (custom events as `on<Type>` keys: `onRv-item-press`). Deviations: no drag and drop (`dragAndDropHooks`, drop indicators: C8); `ListBoxContext` is not re-provided to the
 //   options (its value holds the JSX children: not serializable); no FocusScope; the SharedElementTransition scope is
 //   a `SharedElementContext` provide;
 //   live-mode filtering hides options but keeps empty sections.
-import { createContext, provide, untrack, useContext } from "@rivetjs/reactivity";
+import { computed, createContext, provide, untrack, useContext } from "@rivetjs/reactivity";
 import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
 import { isSlot } from "@rivetjs/runtime/slot";
 import { ItemNode, LoaderNode, SectionNode } from "../collections/base.js";
@@ -105,7 +106,16 @@ export function ListBox(inProps) {
 }
 function StandaloneListBox(input) {
     const { props, listBoxRef, children } = input;
-    const layoutDelegate = useContext(CollectionRendererContext).layoutDelegate;
+    const renderer = useContext(CollectionRendererContext);
+    const layoutDelegate = renderer.layoutDelegate;
+    const items = props.items;
+    const dependencies = props.dependencies;
+    const content = () => Collection({ items: items, children, dependencies });
+    // The list renders from its built collection (RAC: inside a Virtualizer only the visible window has options; LAZY-ROWS
+    // T3: every standalone list, so its options are the rows of the renderer's keyed `For`, `(key) => renderNodeAt(…)`).
+    // A computed in the body (the compiler records it as a resumable computed with the host's provider frame): a resumed
+    // page rebuilds it from `content` on its first read, so no per-option state ships.
+    const collection = computed(() => buildCollectionFrom(content));
     // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written); the copy reads no
     // `selectedKeys` getter (a resumed region is not re-created on a change).
     const selectedKeys = liveKeys(props, "selectedKeys");
@@ -117,16 +127,13 @@ function StandaloneListBox(input) {
         id: props.id ?? mergedIdOf(useContext(SelectableCollectionContext)?.id) ?? createId(),
         items: undefined,
         children: undefined,
-        collection: undefined,
+        collection,
         layoutDelegate,
     });
-    const items = props.items;
-    const dependencies = props.dependencies;
-    const content = () => Collection({ items: items, children, dependencies });
     // isEmpty: the items' length, or (with an empty state to show) the size of a built collection of the children.
     const empty = props.renderEmptyState;
     // Static children do not change: their emptiness is computed once (a build pass, only with an empty state).
-    const staticEmpty = items != null ? false : empty && children != null ? untrack(() => buildCollectionFrom(() => Collection({ children })).size === 0) : children == null;
+    const staticEmpty = items != null ? false : empty && children != null ? untrack(() => collection().size === 0) : children == null;
     const isEmpty = () => (items != null ? isEmptyIterable(typeof items === "function" ? items() : items) : staticEmpty);
     return <ListBoxInner state={state} props={own} listBoxRef={listBoxRef} content={content} isEmpty={isEmpty}/>;
 }
@@ -149,6 +156,12 @@ function ListBoxInner(input) {
     // RAC mergeIds: the ListBox's own id wins over the parent's (ComboBox listbox / Autocomplete collection id).
     const id = props.id || state.id;
     const data = createListData(props, id, state.collection ? undefined : filter, useContext(RouterContext));
+    const renderer = useContext(CollectionRendererContext);
+    // Resumable (as GridList): the render path's lazy collection slot captures `customRenderer`, undefined for the default renderer.
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const isVirtualized = !!renderer.isVirtualized && !!state.collection;
+    if (isVirtualized)
+        data.isVirtualized = true;
     // A parent's built collection (filtered like RAC UNSTABLE_useFilteredListState); live mode: none.
     const provided = state.collection;
     const builtCollection = () => {
@@ -171,6 +184,7 @@ function ListBoxInner(input) {
         onFocus: props.onFocus,
         onBlur: props.onBlur,
         onFocusChange: props.onFocusChange,
+        isVirtualized: isVirtualized || undefined,
     };
     // mergeIds: a parent's label self-reference (ComboBox `labelsProps(listBoxId, …)`) follows the merged id.
     // A host's accessor (Select: the menu is labelled by its Label only while one renders) is read in the binding.
@@ -212,13 +226,18 @@ function ListBoxInner(input) {
         });
     }
     const setRef = mergeRefValues(root, userRef);
-    const renderer = useContext(CollectionRendererContext);
-    // Resumable (as GridList): the render path's lazy collection slot captures `customRenderer`, undefined for the default renderer.
-    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    // Virtualized: the listbox element is the scroll container (RAC scrollRef); its focused option stays rendered.
+    const focusedKey = isVirtualized ? state.selectionState.focusedKey : undefined;
+    const virtualScroll = isVirtualized ? customRenderer?.onScroll : undefined;
+    const virtualScrolled = (e) => {
+        virtualScroll?.(e);
+        onScroll?.(e);
+    };
+    const scrolled = virtualScroll ? virtualScrolled : onScroll;
     const sharedElements = {};
     if (props.render) {
-        // The body is a compiled `<Provider>` binding (resumable, as Menu), not the eager `provide()` chain of the default
-        // path: a render closure capturing that chain's result cannot be serialized.
+        // The body is a compiled `<Provider>` binding (resumable, as Menu; the default path below uses the same one): a render
+        // closure capturing an eager `provide()` chain's result cannot be serialized.
         const renderBody = (<Provider values={[
                 [ListStateContext, state],
                 [ListBoxDataContext, data],
@@ -226,7 +245,7 @@ function ListBoxInner(input) {
                 [SectionContext, { name: "ListBoxSection", render: ListBoxSectionInner }],
                 [SharedElementContext, sharedElements],
             ]}>
-        {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection, content, scrollRef: root })}
+        {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection, content, scrollRef: root, focusedKey })}
       </Provider>);
         const attrs = {
             ...dom,
@@ -303,7 +322,7 @@ function ListBoxInner(input) {
                 listBoxDragStart(e, behaviour, state);
                 onDragStart?.(e);
             },
-            onScroll: (e) => onScroll?.(e),
+            onScroll: (e) => scrolled?.(e),
             // Custom events: the spread takes `on<Type>` keys (no `on:` form).
             "onReact-aria-focus": (e) => listBoxVirtualFocusEvent(e, behaviour, state),
             "onReact-aria-clear-focus": (e) => listBoxClearFocusEvent(e, behaviour, state),
@@ -318,9 +337,6 @@ function ListBoxInner(input) {
         };
         return props.render(attrs, values);
     }
-    const body = provide(ListStateContext, state, () => provide(ListBoxDataContext, data, () => provide(SeparatorContext, { elementType: "div" }, () => provide(SectionContext, { name: "ListBoxSection", render: ListBoxSectionInner }, () => 
-    // RAC: the options share one SharedElementTransition scope (a SelectionIndicator animates between them).
-    provide(SharedElementContext, sharedElements, () => renderer.CollectionRoot({ collection, content, scrollRef: root }))))));
     return (<div {...dom} ref={setRef} id={id} role="listbox" preload="visible" slot={slot} class={rp.class()} style={rp.style()} data-collection={id} aria-label={ariaLabel} aria-labelledby={labelledByAccessor ? labelledByAccessor() : ariaLabelledby} aria-describedby={ariaDescribedby} aria-details={ariaDetails} aria-orientation={orientation} aria-multiselectable={state.selectionState.selectionMode === "multiple" ? "true" : undefined} tabIndex={tabIndex()} data-empty={dataBool(isEmpty())} data-focused={dataBool(data.isFocused())} data-focus-visible={dataBool(data.isFocused() && data.focusVisible())} data-layout={layout} data-orientation={orientation} data-rk={listBoxNavigationKeys(layout, orientation)} onKeyDownCapture={(e) => listBoxKeyDownCapture(e, behaviour, state)} onKeyDown={(e) => {
             onKeyDown?.(e);
             listBoxKeyDown(e, behaviour, state);
@@ -360,8 +376,21 @@ function ListBoxInner(input) {
         }} onDragStart={(e) => {
             listBoxDragStart(e, behaviour, state);
             onDragStart?.(e);
-        }} onScroll={onScroll} on:react-aria-focus={(e) => listBoxVirtualFocusEvent(e, behaviour, state)} on:react-aria-clear-focus={(e) => listBoxClearFocusEvent(e, behaviour, state)}>
-      {body}
+        }} onScroll={scrolled} on:react-aria-focus={(e) => listBoxVirtualFocusEvent(e, behaviour, state)} on:react-aria-clear-focus={(e) => listBoxClearFocusEvent(e, behaviour, state)}>
+      {/* A compiled `<Provider>` (as the `render` path, GridList, Table): the renderer's keyed `For` is created inside its
+            child region, so the reads of its `each` (the collection: items, Autocomplete filter) re-run only that region on a
+            resumed page. An eager provide() chain in the body created the For in the ListBox's enclosing region: its first
+            change re-created the whole ListBox (a fresh state whose focus the adopted options' resumed bindings never see). */}
+      <Provider values={[
+            [ListStateContext, state],
+            [ListBoxDataContext, data],
+            [SeparatorContext, { elementType: "div" }],
+            [SectionContext, { name: "ListBoxSection", render: ListBoxSectionInner }],
+            // RAC: the options share one SharedElementTransition scope (a SelectionIndicator animates between them).
+            [SharedElementContext, sharedElements],
+        ]}>
+        {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection, content, scrollRef: root, focusedKey })}
+      </Provider>
       {renderEmptyState ? (<Show when={isEmpty}>
           {() => (<div role="option" style={{ display: "contents" }}>
               {renderEmptyState(values)}
@@ -495,6 +524,9 @@ function listBoxItem(props, forwardedRef, item, state, data) {
     const ariaDisabled = optionAttrs["aria-disabled"];
     const ariaSelected = optionAttrs["aria-selected"];
     const tabIndex = optionAttrs.tabIndex;
+    // useOption (virtualized list): the option's position in the whole collection.
+    const posInSet = optionAttrs["aria-posinset"];
+    const setSize = optionAttrs["aria-setsize"];
     const ref = forwardedRef;
     // `ping` / `referrerpolicy` are missing from the anchor typings: spread.
     // `data-rv-disabled` (the item's own isDisabled, read by DOM collections) goes through the spread: an accessor when live.
@@ -520,6 +552,8 @@ function listBoxItem(props, forwardedRef, item, state, data) {
                 "aria-describedby": () => describedBy?.(),
                 "aria-disabled": () => ariaDisabled(),
                 "aria-selected": () => ariaSelected(),
+                "aria-posinset": () => posInSet?.(),
+                "aria-setsize": () => setSize?.(),
                 tabindex: () => (href ? (tabIndex() ?? -1) : tabIndex()),
                 "data-selected": () => dataBool(opt.isSelected()),
                 "data-disabled": () => dataBool(opt.isDisabled()),
@@ -537,9 +571,9 @@ function listBoxItem(props, forwardedRef, item, state, data) {
             };
             return props.render(attrs, values);
         }
-        return href ? (<a {...linkDom} ref={ref} id={id} role="option" class={rp.class()} style={rp.style()} href={href} hreflang={hrefLang} target={target} rel={rel} download={download === true ? "" : download || undefined} data-key={String(key)} data-key-type={keyType} data-collection={data.id} data-text-value={textValue} data-rv-action={onAction ? "" : undefined} data-rv-press={hasPress ? "" : undefined} aria-label={ariaLabel} aria-labelledby={labelledBy?.()} aria-describedby={describedBy?.()} aria-disabled={ariaDisabled()} aria-selected={ariaSelected()} tabIndex={tabIndex() ?? -1} data-selected={dataBool(opt.isSelected())} data-disabled={dataBool(opt.isDisabled())} data-focused={dataBool(opt.isFocused())} data-focus-visible={dataBool(opt.isFocusVisible())} data-selection-mode={selectionMode === "none" ? undefined : selectionMode} onKeyDown={itemKeyDown ? (e) => keyboardKeyDown({ onKeyDown: itemKeyDown }, e) : undefined} onKeyUp={itemKeyUp ? (e) => keyboardKeyUp({ onKeyUp: itemKeyUp }, e) : undefined} on:rv-item-action={onAction ? () => onAction() : undefined} on:rv-item-press={hasPress ? (e) => itemPressEvent(e, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick) : undefined} on:rv-hover-start={hasHover ? (e) => hoverStart(e, onHoverStart, onHoverChange) : undefined} on:rv-hover-end={hasHover ? (e) => hoverEnd(e, onHoverEnd, onHoverChange) : undefined}>
+        return href ? (<a {...linkDom} ref={ref} id={id} role="option" class={rp.class()} style={rp.style()} href={href} hreflang={hrefLang} target={target} rel={rel} download={download === true ? "" : download || undefined} data-key={String(key)} data-key-type={keyType} data-collection={data.id} data-text-value={textValue} data-rv-action={onAction ? "" : undefined} data-rv-press={hasPress ? "" : undefined} aria-label={ariaLabel} aria-labelledby={labelledBy?.()} aria-describedby={describedBy?.()} aria-disabled={ariaDisabled()} aria-selected={ariaSelected()} aria-posinset={posInSet?.()} aria-setsize={setSize?.()} tabIndex={tabIndex() ?? -1} data-selected={dataBool(opt.isSelected())} data-disabled={dataBool(opt.isDisabled())} data-focused={dataBool(opt.isFocused())} data-focus-visible={dataBool(opt.isFocusVisible())} data-selection-mode={selectionMode === "none" ? undefined : selectionMode} onKeyDown={itemKeyDown ? (e) => keyboardKeyDown({ onKeyDown: itemKeyDown }, e) : undefined} onKeyUp={itemKeyUp ? (e) => keyboardKeyUp({ onKeyUp: itemKeyUp }, e) : undefined} on:rv-item-action={onAction ? () => onAction() : undefined} on:rv-item-press={hasPress ? (e) => itemPressEvent(e, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick) : undefined} on:rv-hover-start={hasHover ? (e) => hoverStart(e, onHoverStart, onHoverChange) : undefined} on:rv-hover-end={hasHover ? (e) => hoverEnd(e, onHoverEnd, onHoverChange) : undefined}>
         {content()}
-      </a>) : (<div {...linkDom} ref={ref} id={id} role="option" class={rp.class()} style={rp.style()} data-key={String(key)} data-key-type={keyType} data-collection={data.id} data-text-value={textValue} data-rv-action={onAction ? "" : undefined} data-rv-press={hasPress ? "" : undefined} aria-label={ariaLabel} aria-labelledby={labelledBy?.()} aria-describedby={describedBy?.()} aria-disabled={ariaDisabled()} aria-selected={ariaSelected()} tabIndex={tabIndex()} data-selected={dataBool(opt.isSelected())} data-disabled={dataBool(opt.isDisabled())} data-focused={dataBool(opt.isFocused())} data-focus-visible={dataBool(opt.isFocusVisible())} data-selection-mode={selectionMode === "none" ? undefined : selectionMode} onKeyDown={itemKeyDown ? (e) => keyboardKeyDown({ onKeyDown: itemKeyDown }, e) : undefined} onKeyUp={itemKeyUp ? (e) => keyboardKeyUp({ onKeyUp: itemKeyUp }, e) : undefined} on:rv-item-action={onAction ? () => onAction() : undefined} on:rv-item-press={hasPress ? (e) => itemPressEvent(e, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick) : undefined} on:rv-hover-start={hasHover ? (e) => hoverStart(e, onHoverStart, onHoverChange) : undefined} on:rv-hover-end={hasHover ? (e) => hoverEnd(e, onHoverEnd, onHoverChange) : undefined}>
+      </a>) : (<div {...linkDom} ref={ref} id={id} role="option" class={rp.class()} style={rp.style()} data-key={String(key)} data-key-type={keyType} data-collection={data.id} data-text-value={textValue} data-rv-action={onAction ? "" : undefined} data-rv-press={hasPress ? "" : undefined} aria-label={ariaLabel} aria-labelledby={labelledBy?.()} aria-describedby={describedBy?.()} aria-disabled={ariaDisabled()} aria-selected={ariaSelected()} aria-posinset={posInSet?.()} aria-setsize={setSize?.()} tabIndex={tabIndex()} data-selected={dataBool(opt.isSelected())} data-disabled={dataBool(opt.isDisabled())} data-focused={dataBool(opt.isFocused())} data-focus-visible={dataBool(opt.isFocusVisible())} data-selection-mode={selectionMode === "none" ? undefined : selectionMode} onKeyDown={itemKeyDown ? (e) => keyboardKeyDown({ onKeyDown: itemKeyDown }, e) : undefined} onKeyUp={itemKeyUp ? (e) => keyboardKeyUp({ onKeyUp: itemKeyUp }, e) : undefined} on:rv-item-action={onAction ? () => onAction() : undefined} on:rv-item-press={hasPress ? (e) => itemPressEvent(e, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick) : undefined} on:rv-hover-start={hasHover ? (e) => hoverStart(e, onHoverStart, onHoverChange) : undefined} on:rv-hover-end={hasHover ? (e) => hoverEnd(e, onHoverEnd, onHoverChange) : undefined}>
         {content()}
       </div>);
     };
@@ -576,8 +610,10 @@ export const ListBoxLoadMoreItem = /*#__PURE__*/ createLeafComponent(LoaderNode,
     const state = useContext(ListStateContext);
     const { isLoading, onLoadMore, scrollOffset } = props;
     const sentinel = createRef();
-    // RAC passes `state.collection`; live mode: the sentinel re-arms when the loading state changes.
-    const collection = state?.collection ? () => resolveCollection(state.collection) : () => (read(isLoading), null);
+    // RAC passes `state.collection` (re-created on every ListBox render: a loading change re-arms the observer); Rivet: the
+    // sentinel re-arms when the collection or the loading state changes (a live `isLoading` does not rebuild the collection).
+    const built = state?.collection;
+    const collection = () => (read(isLoading), built ? resolveCollection(built) : null);
     loadMoreSentinel({ collection, onLoadMore, scrollOffset }, sentinel);
     const dom = globalDOMProps(props, ["style"]);
     const cls = props.class ?? "rv-ListBoxLoadingIndicator";

package/menu/index.jsx

@@ -19,6 +19,9 @@
 //   (useSafelyMouseToSubmenu) attaches while the submenu is mounted.
 // - render props are accessors; `data-hovered` / `data-pressed` / `data-focus-visible` are written by the
 //   delegated handler (signals only when a `class` / `style` / `children` function asks for them).
+// - Inside a `<CollectionVirtualizer layout={ListLayout}>` the menu builds its collection (`builtCollectionOf`): the
+//   state's `virtual` (built collection + layout delegate) makes the delegated handler navigate it, items render as
+//   views with `aria-posinset` / `aria-setsize`, the menu element is the scroll container. Submenus: not covered.
 // - `class` = RAC `className` (defaults `rv-Menu`, `rv-MenuItem`, `rv-MenuSection`, `rv-MenuLoadingIndicator`).
 // - SelectableCollectionContext (Autocomplete) merges under the menu props: `shouldUseVirtualFocus` /
 //   `disallowTypeAhead` / `autoFocus` may be accessors (read in bindings; a client effect mirrors them into
@@ -26,8 +29,8 @@
 //   `Show`, live collection); `onFocusIn` goes on the menu element; `react-aria-focus` /
 //   `react-aria-clear-focus` are handled on the menu element.
 // `render` (RAC DOMRenderProps) on Menu (`<div>`), MenuSection (`<section>`) and MenuItem (`<div>` / `<a>`): given, the attributes object goes to `render(attrs, renderProps)`. Deviations: no FocusScope around the menu (the popover's focus scope contains focus;
-//   a standalone menu has no FocusManager); no virtualizer; `isEmpty` counts rendered (visible) items (live
-//   collection); live-mode filtering keeps empty sections (RAC drops them); no `--trigger-width` on the popover.
+//   a standalone menu has no FocusManager); `isEmpty` counts rendered (visible) items (live collection; a
+//   virtualized menu: its rendered window); live-mode filtering keeps empty sections (RAC drops them); no `--trigger-width` on the popover.
 import { _regionState, onCleanup, signal, untrack, useContext } from "@rivetjs/reactivity";
 import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
 import { isSlot } from "@rivetjs/runtime/slot";
@@ -39,7 +42,8 @@ import { globalDOMProps } from "../utils/dom-props.js";
 import { dataBool } from "../utils/data-attrs.jsx";
 import { PressResponder } from "../interactions/pressable.jsx";
 import { OverlayTriggerStateContext, PopoverContext } from "../overlay/contexts.js";
-import { CollectionRendererContext, Collection, SectionContext, createBranchComponent, createLeafComponent, isCollectionProbe, isHidden, } from "../collections/components.jsx";
+import { CollectionRendererContext, Collection, SectionContext, createBranchComponent, createLeafComponent, builtCollectionOf, isCollectionProbe, isHidden, } from "../collections/components.jsx";
+import { itemPosition } from "../collections/nodes.js";
 import { CollectionNode, ItemNode, LoaderNode, SectionNode } from "../collections/base.js";
 import { HeaderContext } from "../header/index.jsx";
 import { SeparatorContext } from "../separator/index.jsx";
@@ -60,6 +64,11 @@ function liveItemDisabled(state, key, own) {
     return () => itemDisabled(state, key, !!own());
 }
 /** `aria-disabled` of a live disabled flag. */
+/** `aria-posinset` (0) / `aria-setsize` (1) of a virtualized menu's item (`itemPosition`: per section). */
+function menuItemPosition(state, key, part) {
+    const collection = state.virtual?.collection();
+    return collection ? itemPosition(collection, key)?.[part] : undefined;
+}
 function ariaDisabledOf(disabled) {
     return () => (disabled() ? "true" : undefined);
 }
@@ -214,6 +223,15 @@ export function Menu(inProps) {
     const triggerState = useContext(RootMenuTriggerStateContext);
     const scope = useContext(SubmenuScopeContext);
     const userOnClose = props.onClose;
+    const items = props.items, children = props.children;
+    const content = () => <Collection items={items} children={children}/>;
+    const renderer = useContext(CollectionRendererContext);
+    // RAC: inside a Virtualizer the menu renders from its built collection (only the visible window has items; the
+    // delegated handler navigates the built collection, page keys use the layout). A local const arrow (resumable)
+    // over a per-instance memo key.
+    const builtKey = renderer.isVirtualized ? {} : null;
+    const virtualCollection = () => builtCollectionOf(builtKey, content);
+    const virtual = builtKey ? { collection: virtualCollection, layoutDelegate: renderer.layoutDelegate } : undefined;
     const state = createMenuState({
         selectionMode: props.selectionMode,
         // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
@@ -235,6 +253,7 @@ export function Menu(inProps) {
         level: scope ? scope.sub.submenuLevel + 1 : 0,
         ...(scope ? { submenuTrigger: scope.sub, parentId: scope.parentId } : {}),
         ...(props.id ? { id: props.id } : {}),
+        ...(virtual ? { virtual } : {}),
     });
     // MenuTrigger's reactive menu id (DialogContext `idRef` pattern): the trigger's aria-controls follows a Menu `id`
     // (RA mergeIds; on a resumed page the merge runs in the browser, where idSignal has no updaters).
@@ -284,9 +303,12 @@ export function Menu(inProps) {
             return () => menuSubmenuClosed(sub);
         });
     });
-    const items = props.items, children = props.children;
-    const content = () => <Collection items={items} children={children}/>;
-    const { CollectionRoot } = useContext(CollectionRendererContext);
+    const { CollectionRoot } = renderer;
+    // Virtualized: the menu element is the scroll container (RAC scrollRef); its focused item stays rendered and its
+    // scroll events reach the renderer.
+    const rootCollection = builtKey ? virtualCollection : null;
+    const focusedKey = builtKey ? state.focusedKey : undefined;
+    const virtualScroll = builtKey ? renderer.onScroll : undefined;
     // Items first (they count themselves for `data-empty`), then the element.
     const body = (<Provider values={[
             [MenuStateContext, state],
@@ -301,7 +323,7 @@ export function Menu(inProps) {
             // Ensure the root MenuTriggerState is defined, in case Menu is rendered outside a MenuTrigger.
             [RootMenuTriggerStateContext, state.root],
         ]}>
-      {() => CollectionRoot({ collection: null, content })}
+      {() => CollectionRoot({ collection: rootCollection, content, scrollRef: element, focusedKey })}
     </Provider>);
     const renderEmptyState = props.renderEmptyState;
     const dom = globalDOMProps(props, MENU_OWNED);
@@ -366,6 +388,7 @@ export function Menu(inProps) {
                 onDragStart?.(e);
             },
             onScroll: (e) => {
+                virtualScroll?.(e);
                 menuEvent(e, aria, state);
                 onScroll?.(e);
             },
@@ -416,6 +439,7 @@ export function Menu(inProps) {
             menuEvent(e, aria, state);
             onDragStart?.(e);
         }} onScroll={(e) => {
+            virtualScroll?.(e);
             menuEvent(e, aria, state);
             onScroll?.(e);
         }} on:react-aria-focus={(e) => menuVirtualFocus(e, state)} on:react-aria-clear-focus={(e) => menuClearVirtualFocus(e, state)}>
@@ -601,6 +625,13 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent(ItemNode, function Men
         "aria-haspopup": hasSubmenu ? "menu" : undefined,
         "data-has-submenu": dataBool(hasSubmenu),
     };
+    if (state.virtual)
+        // useMenuItem (virtualized): the item's position comes from the built collection (only a window is rendered).
+        // (Object-literal arrows: resumable closures.)
+        Object.assign(attrs, {
+            "aria-posinset": () => menuItemPosition(state, key, 0),
+            "aria-setsize": () => menuItemPosition(state, key, 1),
+        });
     const renderItem = () => {
         count();
         const content = body();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rivetjs/cdk",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "Headless, accessible components and utilities for Rivet: overlays, collections, focus, interactions, dates, drag and drop.",
   "license": "MIT",
   "type": "module",
@@ -614,9 +614,9 @@
     }
   },
   "dependencies": {
-    "@rivetjs/kit": "0.1.0-alpha.0",
-    "@rivetjs/reactivity": "0.1.0-alpha.0",
-    "@rivetjs/runtime": "0.1.0-alpha.0"
+    "@rivetjs/kit": "0.1.0-alpha.1",
+    "@rivetjs/reactivity": "0.1.0-alpha.1",
+    "@rivetjs/runtime": "0.1.0-alpha.1"
   },
   "engines": {
     "node": ">=24"

package/portal/index.d.ts

@@ -8,6 +8,14 @@ export declare function PortalProvider(props: {
     container?: PortalMount;
     children?: Content | (() => Content);
 }): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/**
+ * Rivet: optional hooks of the overlay layer, unset by default (cdk alone pays one property read per move).
+ * `place(host, from)` runs right after a `<Portal>` host moved from its in-place parent `from` (the trigger's subtree,
+ * still connected) to its mount; a styled layer copies scope attributes there (`@rivetjs/ui` stamps its theme scope).
+ */
+export declare const portalHooks: {
+    place?(host: HTMLElement, from: Element | null): void;
+};
 export interface PortalProps {
     /** Where to render. @default the nearest PortalProvider's container, else document.body */
     mount?: PortalMount;

package/portal/index.jsx

@@ -30,6 +30,12 @@ export function PortalProvider(props) {
       {renderSlot(children)}
     </Provider>);
 }
+/**
+ * Rivet: optional hooks of the overlay layer, unset by default (cdk alone pays one property read per move).
+ * `place(host, from)` runs right after a `<Portal>` host moved from its in-place parent `from` (the trigger's subtree,
+ * still connected) to its mount; a styled layer copies scope attributes there (`@rivetjs/ui` stamps its theme scope).
+ */
+export const portalHooks = {};
 /**
  * Render `children` at the end of `mount` (default `document.body`), inside a
  * `<div data-rivet-portal>`. Server: rendered in place and moved at `load`.
@@ -45,8 +51,9 @@ export function Portal(props) {
         if (element.parentNode !== target) {
             // Moving a node blurs focus inside it (content that focused itself on mount, e.g. a menu item).
             const focused = element.ownerDocument.activeElement;
-            const inside = !!focused && element.contains(focused);
+            const inside = !!focused && element.contains(focused), from = element.parentElement;
             target.append(element);
+            portalHooks.place?.(element, from);
             if (inside && element.ownerDocument.activeElement !== focused)
                 focused.focus({ preventScroll: true });
         }

package/radio-group/index.jsx

@@ -98,8 +98,11 @@ function RadioGroupItems(props) {
             return (<label {...itemDom} onMouseDown={(event) => {
                     // RAC Radio mergeProps(DOMProps, labelProps): the user's handler first, then RA useRadio's
                     // "Prevent label from being focused when mouse down on it" (the click still focuses the input).
+                    // Not for a press on the preset's visible native radio itself: canceling its mousedown cancels its
+                    // focus (RA's input usePress focuses it on pointerdown), so arrow keys after a click had no target.
                     option.onMouseDown?.(event);
-                    event.preventDefault();
+                    if (!(event.target instanceof HTMLInputElement))
+                        event.preventDefault();
                 }} class={itemClass} data-selected={state.selectedValue() === valueProp ? "true" : undefined} data-disabled={disabled || undefined} data-readonly={isReadOnly || undefined} data-invalid={invalid() ? "true" : undefined} data-required={isRequired || undefined}>
                 <input type="radio" id={inputId} class={props.inputClass} name={state.name} form={props.form} value={option.value} disabled={disabled || undefined} required={(isRequired && behaviour === "native") || undefined} aria-describedby={[descriptionId, invalid() && showsError() ? ids.errorMessageId : undefined, groupDescription].filter(Boolean).join(" ") || undefined} data-rv-error={validityError(state.validation)} checked={state.selectedValue() === option.value} onChange={(event) => radioChange(state, option.value, event)} onFocus={(event) => {
                     radioFocus(state, option.value, event);

package/selection/keyed.js

@@ -7,7 +7,7 @@
 // The selectors live in module WeakMaps keyed by the state's signals (shared by spread copies of a state, e.g.
 // `state/list.ts` ListState, and never serialized). `selector` is owner-free: its watcher lives while
 // bindings read keys.
-import { selector } from "@rivetjs/reactivity";
+import { memberKeys, selector } from "@rivetjs/reactivity";
 /** `selectionOf` result: not selected, in the selected Set, or covered by an "all" selection. */
 export const NOT_SELECTED = 0, IN_SELECTION = 1, ALL_SELECTED = 2;
 const EMPTY = new Set();
@@ -18,20 +18,10 @@ const hasFocus = new WeakMap();
 const selectionIn = (key, selection) => (selection === "all" ? ALL_SELECTED : selection.has(key) ? IN_SELECTION : NOT_SELECTED);
 const isEmpty = (_key, selection) => selection !== "all" && selection.size === 0;
 const onlyKey = () => [0];
-/** Keys whose membership may differ between two selections (null: "all" involved, compare every key). */
-function changedKeys(next, previous) {
-    if (next === "all" || previous === "all")
-        return null;
-    const keys = [];
-    for (const key of next)
-        if (!previous.has(key))
-            keys.push(key);
-    for (const key of previous)
-        if (!next.has(key))
-            keys.push(key);
-    return keys;
-}
-const changedFocus = (next, previous) => [next, previous];
+// Change hints are reactivity's own (`memberKeys`: keys in one of two Sets, null when "all" is involved; the default
+// pair hint for focus): resume knows them, so a lazy collection row reading `selectionOf` / `isFocusedKey` of a
+// signal-backed state wakes only when its key flips (LAZY-T6 keyed wake, `_trackReads` keyed hook).
+const changedKeys = memberKeys;
 /** The selection read of `state` (react-stately `useMultipleSelectionState`, or the single-key backing). */
 function readerOf(state) {
     const single = state.selectedKey;
@@ -63,7 +53,7 @@ export function isFocusedKey(state, key) {
     const id = state.focusedKey;
     let select = focused.get(id);
     if (select === undefined)
-        focused.set(id, (select = selector(id, undefined, { keys: changedFocus })));
+        focused.set(id, (select = selector(id)));
     return select(key);
 }
 /** `state.focusedKey() != null`; a binding re-runs only when that flips (not on every focus move). */