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

package/listbox/index.jsx

@@ -0,0 +1,596 @@
+// Ported from react-aria-components ListBox (packages/react-aria-components/src/ListBox.tsx), Apache-2.0, © Adobe.
+// 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`.
+// - 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
+//   to the selection state. Option callbacks (`onAction`, `onHoverStart` / `onHoverEnd` / `onHoverChange`) are
+//   attached to the option element only when given (`on:rv-item-action`, `on:rv-hover-start` / `-end`).
+// - Render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`); `class` = RAC
+//   `className`; default classes `rv-ListBox`, `rv-ListBoxItem`, `rv-ListBoxSection`, `rv-ListBoxLoadingIndicator`.
+// - `items` preset: `<ListBox items={…} />` without children renders each item as a `ListBoxItem` (sections:
+//   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.
+// `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 { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { isSlot } from "@rivetjs/runtime/slot";
+import { ItemNode, LoaderNode, SectionNode } from "../collections/base.js";
+import {} from "../utils/render.js";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, SectionContext, buildCollectionFrom, createBranchComponent, createLeafComponent, isCollectionProbe, isHidden, resolveCollection, } from "../collections/components.jsx";
+import { createListState } from "../collections/list-state.js";
+import { HeaderContext, Header } from "../header/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { probeSlots } from "#server";
+import { SeparatorContext } from "../separator/index.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { SharedElementContext } from "../shared-element-transition/transition.jsx";
+import { SelectableCollectionContext } from "../autocomplete/contexts.js";
+import { DEFAULT_SLOT, Provider, contextProps, mergeRefValues, mergedIdOf, createSlotId, renderProps as resolveRenderProps, resumableContext, slotIdRef, } from "../slots/index.jsx";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { hasLive, liveAssign, liveAt, liveKeys, liveView } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { createId } from "../utils/id.js";
+import { RouterContext } from "../utils/links.jsx";
+import { loadMoreSentinel } from "../utils/load-more-sentinel.jsx";
+import { read } from "../interactions/utils.js";
+import { keyboardKeyDown, keyboardKeyUp } from "../interactions/keyboard.jsx";
+import { createListData, getItemId, listBoxAutoFocus, listBoxClearVirtualFocus, listBoxClick, listBoxDoubleClick, listBoxDragStart, listBoxFocusIn, listBoxFocusOut, listBoxKeyDown, listBoxKeyDownCapture, listBoxKeyUp, listBoxMouseDown, listBoxPointerCancel, listBoxPointerDown, listBoxPointerOut, listBoxPointerOver, listBoxPointerUp, listBoxProps, listBoxSectionProps, listBoxVirtualFocus, optionProps, } from "./behaviour.jsx";
+export { getItemId } from "./behaviour.jsx";
+/** RAC `ListBoxContext`: props for the ListBox inside a component (Select, ComboBox, Autocomplete…), optionally per slot. */
+export const ListBoxContext = resumableContext(createContext(null, { id: "rv-listbox" }));
+/** RAC `ListStateContext`: a parent's list state (Select, ComboBox); ListBox renders it instead of creating one. */
+export const ListStateContext = resumableContext(createContext(null, { id: "rv-list-state" }));
+/** Rivet: the listbox's shared option data (react-aria `listData`). */
+export const ListBoxDataContext = resumableContext(createContext(null, { id: "rv-listbox-data" }));
+/** Global DOM events the listbox element handles itself; the user's run after its own. */
+const OWNED = [
+    "onKeyDown",
+    "onKeyUp",
+    "onPointerDown",
+    "onPointerUp",
+    "onPointerCancel",
+    "onClick",
+    "onDblClick",
+    "onMouseDown",
+    "onPointerOver",
+    "onPointerOut",
+    "onFocusIn",
+    "onFocusOut",
+    "onDragStart",
+    "style",
+];
+/** Rivet `items` preset: an item object → `ListBoxItem` (sections: `{ children: [...] }` → `ListBoxSection`). */
+function presetItem(item) {
+    if (item && typeof item === "object" && Array.isArray(item.children)) {
+        const title = item.title ?? item.name;
+        return (<ListBoxSection id={item.id ?? item.key} aria-label={item["aria-label"]} items={item.children}>
+        {title != null ? <Header>{title}</Header> : null}
+        <Collection items={item.children}>{presetItem}</Collection>
+      </ListBoxSection>);
+    }
+    const label = item?.label ?? item?.name ?? item?.textValue ?? String(item);
+    return (<ListBoxItem id={item?.id ?? item?.key} textValue={item?.textValue ?? (typeof label === "string" ? label : undefined)} isDisabled={item?.isDisabled ?? item?.disabled} href={item?.href} aria-label={item?.["aria-label"]}>
+      {label}
+    </ListBoxItem>);
+}
+/** A listbox displays a list of options and allows a user to select one or more of them (RAC `ListBox`). */
+export function ListBox(inProps) {
+    const [props, ref] = contextProps(inProps, inProps.ref, ListBoxContext);
+    const state = useContext(ListStateContext);
+    if (state)
+        return <ListBoxInner state={state} props={props} listBoxRef={ref}/>;
+    const children = props.children === undefined && props.items != null ? presetItem : props.children;
+    // Inside a parent's build pass (closed Select / ComboBox popover): register the items only.
+    if (isHidden()) {
+        // Autocomplete's server id probe: merge the own id into the collection id (as ListBoxInner does), register nothing.
+        if (isCollectionProbe())
+            return (void contextProps(props, undefined, SelectableCollectionContext), null);
+        return Collection({ items: props.items, children, dependencies: props.dependencies });
+    }
+    return <StandaloneListBox props={props} listBoxRef={ref} children={children}/>;
+}
+function StandaloneListBox(input) {
+    const { props, listBoxRef, children } = input;
+    const layoutDelegate = useContext(CollectionRendererContext).layoutDelegate;
+    // 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");
+    const own = selectedKeys !== untrack(() => props.selectedKeys) ? liveAssign(props, { selectedKeys }) : props;
+    const state = createListState({
+        ...own,
+        // RAC ListBoxInner merges SelectableCollectionContext (Autocomplete) into the props useListBox reads the id
+        // from (mergeIds: the listbox's own id wins), so without an own id the list takes the collection id.
+        id: props.id ?? mergedIdOf(useContext(SelectableCollectionContext)?.id) ?? createId(),
+        items: undefined,
+        children: undefined,
+        collection: undefined,
+        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 isEmpty = () => (items != null ? isEmptyIterable(typeof items === "function" ? items() : items) : staticEmpty);
+    return <ListBoxInner state={state} props={own} listBoxRef={listBoxRef} content={content} isEmpty={isEmpty}/>;
+}
+/** Rivet: keys the listbox handles (`data-rk`): the resume loader holds them, so a cold key never scrolls the page. */
+const listBoxNavigationKeys = (layout, orientation) => "ArrowDown ArrowUp Home End PageUp PageDown Space Enter" + (orientation === "horizontal" || layout === "grid" ? " ArrowLeft ArrowRight" : "");
+const isEmptyIterable = (items) => {
+    if (Array.isArray(items))
+        return items.length === 0;
+    for (const _ of items)
+        return false;
+    return true;
+};
+function ListBoxInner(input) {
+    const { state, content } = input;
+    // RAC: SelectableCollectionContext (Autocomplete) merges under the listbox props.
+    const [merged, mergedRef] = contextProps(input.props, input.listBoxRef, SelectableCollectionContext);
+    const props = merged;
+    const layout = props.layout || "stack", orientation = props.orientation || "vertical";
+    const filter = props.filter;
+    // 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));
+    // A parent's built collection (filtered like RAC UNSTABLE_useFilteredListState); live mode: none.
+    const provided = state.collection;
+    const builtCollection = () => {
+        const c = resolveCollection(provided);
+        return filter && c.filter ? c.filter(filter) : c;
+    };
+    const collection = provided ? builtCollection : null;
+    const liveEmpty = input.isEmpty;
+    const isEmpty = () => (liveEmpty ? liveEmpty() : provided ? builtCollection().size === 0 : false);
+    const behaviour = {
+        data,
+        collection,
+        autoFocus: props.autoFocus,
+        shouldFocusWrap: props.shouldFocusWrap,
+        escapeKeyBehavior: props.escapeKeyBehavior,
+        disallowTypeAhead: props.disallowTypeAhead,
+        shouldUseVirtualFocus: props.shouldUseVirtualFocus,
+        orientation,
+        layout,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onFocusChange: props.onFocusChange,
+    };
+    // 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.
+    const labelledByProp = props["aria-labelledby"];
+    const labelledByAccessor = typeof labelledByProp === "function" ? labelledByProp : undefined;
+    const labelledBy = typeof labelledByProp === "function" ? undefined : labelledByProp;
+    const ariaLabelledBy = id !== state.id && labelledBy
+        ? labelledBy
+            .split(" ")
+            .map((part) => (part === state.id ? id : part))
+            .join(" ")
+        : labelledBy;
+    const aria = listBoxProps({ ...props, id, "aria-labelledby": ariaLabelledBy }, state, data).listBoxProps;
+    const values = {
+        isEmpty,
+        isFocused: () => data.isFocused(),
+        isFocusVisible: () => data.isFocused() && data.focusVisible(),
+        isDropTarget: () => false,
+        layout,
+        orientation,
+        state,
+    };
+    const rp = untrack(() => resolveRenderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-ListBox" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const { onKeyDown, onKeyUp, onPointerDown, onPointerUp, onPointerCancel, onClick, onDblClick, onMouseDown, onPointerOver, onPointerOut, onDragStart, onScroll, } = props;
+    const onFocusIn = props.onFocusIn;
+    const onFocusOut = props.onFocusOut;
+    const dom = globalDOMProps(props, OWNED);
+    const renderEmptyState = props.renderEmptyState;
+    const slot = props.slot || undefined;
+    const ariaLabel = aria["aria-label"], ariaLabelledby = aria["aria-labelledby"], ariaDescribedby = aria["aria-describedby"], ariaDetails = aria["aria-details"];
+    const tabIndex = aria.tabIndex;
+    const root = createRef();
+    const userRef = mergedRef;
+    if (read(props.autoFocus)) {
+        clientEffect(() => {
+            const el = root();
+            if (el)
+                untrack(() => listBoxAutoFocus(el, behaviour, state));
+        });
+    }
+    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;
+    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.
+        const renderBody = (<Provider values={[
+                [ListStateContext, state],
+                [ListBoxDataContext, data],
+                [SeparatorContext, { elementType: "div" }],
+                [SectionContext, { name: "ListBoxSection", render: ListBoxSectionInner }],
+                [SharedElementContext, sharedElements],
+            ]}>
+        {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection, content, scrollRef: root })}
+      </Provider>);
+        const attrs = {
+            ...dom,
+            ref: setRef,
+            id,
+            role: "listbox",
+            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);
+            },
+            onKeyUp: (e) => {
+                onKeyUp?.(e);
+                listBoxKeyUp(e, behaviour, state);
+            },
+            onPointerDown: (e) => {
+                listBoxPointerDown(e, behaviour, state);
+                onPointerDown?.(e);
+            },
+            onPointerUp: (e) => {
+                listBoxPointerUp(e, behaviour, state);
+                onPointerUp?.(e);
+            },
+            onPointerCancel: (e) => {
+                listBoxPointerCancel(e, behaviour, state);
+                onPointerCancel?.(e);
+            },
+            onClick: (e) => {
+                listBoxClick(e, behaviour, state);
+                onClick?.(e);
+            },
+            onDblClick: (e) => {
+                listBoxDoubleClick(e, behaviour, state);
+                onDblClick?.(e);
+            },
+            onMouseDown: (e) => {
+                listBoxMouseDown(e, behaviour, state);
+                onMouseDown?.(e);
+            },
+            onPointerOver: (e) => {
+                listBoxPointerOver(e, behaviour, state);
+                onPointerOver?.(e);
+            },
+            onPointerOut: (e) => {
+                listBoxPointerOut(e, behaviour, state);
+                onPointerOut?.(e);
+            },
+            onFocusIn: (e) => {
+                listBoxFocusIn(e, behaviour, state);
+                onFocusIn?.(e);
+            },
+            onFocusOut: (e) => {
+                listBoxFocusOut(e, behaviour, state);
+                onFocusOut?.(e);
+            },
+            onDragStart: (e) => {
+                listBoxDragStart(e, behaviour, state);
+                onDragStart?.(e);
+            },
+            onScroll: (e) => onScroll?.(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),
+            children: () => [
+                renderBody,
+                renderEmptyState ? (<Show when={isEmpty}>
+            {() => (<div role="option" style={{ display: "contents" }}>
+                {renderEmptyState(values)}
+              </div>)}
+          </Show>) : null,
+            ],
+        };
+        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);
+        }} onKeyUp={(e) => {
+            onKeyUp?.(e);
+            listBoxKeyUp(e, behaviour, state);
+        }} onPointerDown={(e) => {
+            listBoxPointerDown(e, behaviour, state);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            listBoxPointerUp(e, behaviour, state);
+            onPointerUp?.(e);
+        }} onPointerCancel={(e) => {
+            listBoxPointerCancel(e, behaviour, state);
+            onPointerCancel?.(e);
+        }} onClick={(e) => {
+            listBoxClick(e, behaviour, state);
+            onClick?.(e);
+        }} onDblClick={(e) => {
+            listBoxDoubleClick(e, behaviour, state);
+            onDblClick?.(e);
+        }} onMouseDown={(e) => {
+            listBoxMouseDown(e, behaviour, state);
+            onMouseDown?.(e);
+        }} onPointerOver={(e) => {
+            listBoxPointerOver(e, behaviour, state);
+            onPointerOver?.(e);
+        }} onPointerOut={(e) => {
+            listBoxPointerOut(e, behaviour, state);
+            onPointerOut?.(e);
+        }} onFocusIn={(e) => {
+            listBoxFocusIn(e, behaviour, state);
+            onFocusIn?.(e);
+        }} onFocusOut={(e) => {
+            listBoxFocusOut(e, behaviour, state);
+            onFocusOut?.(e);
+        }} 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}
+      {renderEmptyState ? (<Show when={isEmpty}>
+          {() => (<div role="option" style={{ display: "contents" }}>
+              {renderEmptyState(values)}
+            </div>)}
+        </Show>) : null}
+    </div>);
+}
+const listBoxVirtualFocusEvent = (e, b, s) => listBoxVirtualFocus(e, b, s);
+const listBoxClearFocusEvent = (e, b, s) => listBoxClearVirtualFocus(e, b, s);
+function ListBoxSectionInner(props, ref, section, className = "rv-ListBoxSection") {
+    const state = useContext(ListStateContext);
+    const { CollectionBranch } = useContext(CollectionRendererContext);
+    // RA useSlot: the heading id is kept while a Header consumes it. The children are built before the section's
+    // attributes (below), so on the server a Header has already marked the id: `slotIdRef(heading, false)` writes
+    // `aria-labelledby` only when the section has one (RAC's hydrated DOM; no IDREF to a missing element).
+    const heading = createSlotId();
+    const { headingProps, groupProps } = listBoxSectionProps({ heading: heading.id, "aria-label": props["aria-label"] ?? undefined });
+    const dom = globalDOMProps(props, ["style"]);
+    const cls = props.class ?? className;
+    const style = props.style;
+    const label = groupProps["aria-label"];
+    const collection = state.collection ? state.collection : null;
+    const children = provide(HeaderContext, { ...headingProps, id: heading }, () => CollectionBranch({ collection, parent: section }));
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref,
+            class: cls,
+            style,
+            role: "group",
+            "aria-label": label,
+            "aria-labelledby": () => slotIdRef(heading, false),
+            children: () => children,
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<section {...dom} ref={ref} class={cls} style={style} role="group" aria-label={label} aria-labelledby={slotIdRef(heading, false)}>
+      {children}
+    </section>);
+}
+/** A ListBoxSection represents a section within a ListBox (RAC `ListBoxSection`). */
+export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, ListBoxSectionInner);
+/** A ListBoxItem represents an individual option in a ListBox (RAC `ListBoxItem`). */
+export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function ListBoxItem(props, forwardedRef, item) {
+    const state = useContext(ListStateContext);
+    const data = useContext(ListBoxDataContext);
+    if (!state || !data)
+        throw new Error("ListBoxItem must be rendered inside a ListBox.");
+    const key = item.key;
+    // Live props (P5): `isDisabled` / class / style / children stay live (node props forward unread); the rest is
+    // read once (untracked body).
+    const option = untrack(() => listBoxItem(props, forwardedRef, item, state, data));
+    // Live-mode filtering (SelectableCollectionContext `filter`): the option hides itself. Tracked (outside the
+    // untracked body): on the server the filter read belongs to the collection row's resume region.
+    const filter = data.filter;
+    if (filter) {
+        const itemText = item.textValue, itemValue = item.value;
+        const visible = () => filter(itemText, { key, type: "item", textValue: itemText, value: itemValue });
+        // Server: the option renders right away, inside the collection row's resume region (a function child runs
+        // later, outside it: its bindings would outlive the row when filtering re-creates it; runtime gap).
+        return <Show when={visible}>{typeof document === "undefined" ? (visible() ? option() : null) : option}</Show>;
+    }
+    return option();
+});
+/** `data-rv-disabled` of a live item `isDisabled` (a returned arrow: resumable). */
+function rvDisabledAttr(isDisabled) {
+    return () => (isDisabled() ? "" : undefined);
+}
+function listBoxItem(props, forwardedRef, item, state, data) {
+    const key = item.key;
+    const live = hasLive(props);
+    const itemIsDisabled = live ? liveAt(liveView(props, ["isDisabled"]), "isDisabled") : props.isDisabled;
+    const children = props.children;
+    // useSlotId for the label / description Text slots (not for text children): kept while an element has the id.
+    const plain = children == null || typeof children === "string" || typeof children === "number";
+    const optionId = getItemId(data.id, key);
+    const labelId = plain ? undefined : createSlotId(optionId + "-label");
+    const descriptionId = plain ? undefined : createSlotId(optionId + "-description");
+    const labelRef = () => slotIdRef(labelId, false);
+    const descriptionRef = () => slotIdRef(descriptionId, false);
+    const opt = optionProps({
+        key,
+        itemIsDisabled,
+        hasAction: !!props.onAction,
+        "aria-label": props["aria-label"],
+        labelId: labelRef,
+        descriptionId: descriptionRef,
+    }, state, data);
+    const selectionMode = state.selectionState.selectionMode;
+    const values = {
+        isHovered: opt.isHovered,
+        isPressed: opt.isPressed,
+        isSelected: opt.isSelected,
+        isFocused: opt.isFocused,
+        isFocusVisible: opt.isFocusVisible,
+        isDisabled: opt.isDisabled,
+        selectionMode,
+        selectionBehavior: () => state.selectionState.selectionBehavior(),
+        allowsDragging: false,
+        isDragging: () => false,
+        isDropTarget: () => false,
+    };
+    const rp = resolveRenderProps({ class: props.class, style: props.style, children, values, defaultClassName: "rv-ListBoxItem" }, live ? liveRenderProps(props) : undefined);
+    const textSlots = labelId
+        ? { slots: { [DEFAULT_SLOT]: { id: labelId }, label: { id: labelId }, description: { id: descriptionId } } }
+        : { slots: { [DEFAULT_SLOT]: {}, label: {}, description: {} } };
+    const content = () => provide(TextContext, textSlots, () => provide(SelectionIndicatorContext, { isSelected: opt.isSelected }, () => rp.children()));
+    // Rivet (server): the option's attributes are written before its children: probe which label / description Text
+    // parts render (`slotIdRef(id, false)` above; RA useSlotId drops the others after hydration). Same providers as `content`.
+    if (typeof document === "undefined" && labelId)
+        probeSlots([
+            [TextContext, textSlots],
+            [SelectionIndicatorContext, { isSelected: opt.isSelected }],
+        ], () => rp.children());
+    const dom = globalDOMProps(props, ["onClick", "style"]);
+    const id = optionId;
+    const keyType = typeof key === "number" ? "number" : undefined;
+    const ariaLabel = props["aria-label"];
+    const textValue = props.textValue;
+    const onAction = props.onAction;
+    const { onHoverStart, onHoverEnd, onHoverChange, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick } = props;
+    const hasPress = !!(onPressStart || onPressEnd || onPressChange || onPress || onPressUp || onClick);
+    const hasHover = !!(onHoverStart || onHoverEnd || onHoverChange);
+    const href = props.href;
+    const itemDisabled = typeof itemIsDisabled === "function" ? rvDisabledAttr(itemIsDisabled) : itemIsDisabled ? "" : undefined;
+    // PROPS-CAPTURE: every prop the option closure reads is a local (reading `props` there captures the whole object).
+    const { hrefLang, target, rel, download, onKeyDown: itemKeyDown, onKeyUp: itemKeyUp } = props;
+    const optionAttrs = opt.optionProps;
+    const labelledBy = optionAttrs["aria-labelledby"];
+    const describedBy = optionAttrs["aria-describedby"];
+    const ariaDisabled = optionAttrs["aria-disabled"];
+    const ariaSelected = optionAttrs["aria-selected"];
+    const tabIndex = optionAttrs.tabIndex;
+    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.
+    const linkDom = liveAssign(dom, href ? { ping: props.ping, referrerpolicy: props.referrerPolicy, "data-rv-disabled": itemDisabled } : { "data-rv-disabled": itemDisabled });
+    const option = () => {
+        if (props.render) {
+            const attrs = {
+                ...linkDom,
+                ref,
+                id,
+                role: "option",
+                class: () => rp.class(),
+                style: () => rp.style(),
+                ...(href ? { href, hreflang: hrefLang, target, rel, download: download === true ? "" : download || undefined } : null),
+                "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: () => (href ? (tabIndex() ?? -1) : 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: (e) => itemKeyDown && keyboardKeyDown({ onKeyDown: itemKeyDown }, e),
+                onKeyUp: (e) => itemKeyUp && keyboardKeyUp({ onKeyUp: itemKeyUp }, e),
+                // Custom events: the spread takes `on<Type>` keys (no `on:` form); the handlers no-op without their prop.
+                "onRv-item-action": () => onAction?.(),
+                "onRv-item-press": (e) => itemPressEvent(e, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick),
+                "onRv-hover-start": (e) => hoverStart(e, onHoverStart, onHoverChange),
+                "onRv-hover-end": (e) => hoverEnd(e, onHoverEnd, onHoverChange),
+                children: () => content(),
+            };
+            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}>
+        {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}>
+        {content()}
+      </div>);
+    };
+    return option;
+}
+/** RA useSelectableItem's collectionItemProps chaining: the option's press callbacks, from the delegated press. */
+function itemPressEvent(e, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick) {
+    const ev = e.detail;
+    if (ev.type === "click")
+        return onClick?.(ev.event);
+    if (ev.type === "pressstart") {
+        onPressStart?.(ev);
+        onPressChange?.(true);
+    }
+    else if (ev.type === "pressup")
+        onPressUp?.(ev);
+    else if (ev.type === "pressend") {
+        onPressEnd?.(ev);
+        onPressChange?.(false);
+    }
+    else if (ev.type === "press")
+        onPress?.(ev);
+}
+function hoverStart(e, onHoverStart, onHoverChange) {
+    onHoverStart?.({ type: "hoverstart", target: e.currentTarget, pointerType: e.detail.pointerType });
+    onHoverChange?.(true);
+}
+function hoverEnd(e, onHoverEnd, onHoverChange) {
+    onHoverEnd?.({ type: "hoverend", target: e.currentTarget, pointerType: e.detail.pointerType });
+    onHoverChange?.(false);
+}
+/** A sentinel that loads more items when scrolled into view, with an optional loading row (RAC `ListBoxLoadMoreItem`). */
+export const ListBoxLoadMoreItem = /*#__PURE__*/ createLeafComponent(LoaderNode, function ListBoxLoadingIndicator(props, ref, _item) {
+    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);
+    loadMoreSentinel({ collection, onLoadMore, scrollOffset }, sentinel);
+    const dom = globalDOMProps(props, ["style"]);
+    const cls = props.class ?? "rv-ListBoxLoadingIndicator";
+    const style = props.style;
+    const children = props.children;
+    return (<>
+        <div style={{ position: "relative", width: 0, height: 0 }} inert>
+          <div data-testid="loadMoreSentinel" ref={sentinel} style={{ position: "absolute", height: "1px", width: "1px" }}/>
+        </div>
+        {children != null ? (<Show when={() => !!read(isLoading)}>
+            {() => (<div {...dom} ref={ref} class={cls} style={style} role="option" tabIndex={-1}>
+                {children}
+              </div>)}
+          </Show>) : null}
+      </>);
+});