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

package/select/select-parts.jsx

@@ -0,0 +1,293 @@
+// Ported from React Aria Components (Select.tsx: Select / SelectInner, parts form) and React Aria
+// (@react-aria/select useSelect, @react-aria/menu useMenuTrigger type "listbox"), Apache-2.0, © Adobe.
+//
+// RAC parts form of the Select (no `items`): `<Select><Label/><Button><SelectValue/></Button><Text slot="description"/>
+// <FieldError/><Popover><ListBox>…</ListBox></Popover></Select>`. The Select provides SelectContext,
+// SelectStateContext, SelectValueContext, LabelContext, ButtonContext, OverlayTriggerStateContext, PopoverContext,
+// ListBoxContext, ListStateContext, TextContext (description / errorMessage slots) and FieldErrorContext; the
+// collection is built from the children (B5 `collectionOf` = RAC CollectionBuilder: the closed popover's ListBox
+// registers its items in a build pass), and the HiddenSelect renders after the children (form value, autofill).
+// Rivet:
+// - render props are accessors (`class={({ isOpen }) => (isOpen() ? "open" : "")}`); `class` = RAC `className`,
+//   default `rv-Select`.
+// - state = `createSelectState({ collection })` (react-stately useSelectState with the built collection; region
+//   state): the closed trigger's typeahead / ArrowLeft / ArrowRight, HiddenSelect options and SelectValue read the
+//   built items through `selectEntries`. The ListBox renders on a list state over the same collection whose
+//   selection mirrors the value (`syncListSelection`, as the items preset).
+// - trigger: useMenuTrigger press callbacks (`selectTriggerPressStart` / `selectTriggerPress`) + the useSelect
+//   keyboard / focus handlers, given to the `<Button>` through `ButtonContext` (RAC: `triggerProps`).
+// - the trigger's `aria-labelledby` / `aria-describedby` follow the Label / description / error parts that render
+//   (RA useSlot / useSlotId); server: a slot probe (`probeSlots`) marks them before the trigger renders.
+// - `render` (RAC DOMRenderProps) replaces the root `<div>` (`render(attrs, renderProps)`).
+import { effect, signal, untrack } from "@rivetjs/reactivity";
+import { clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { focusSafely } from "../focus/index.js";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { ButtonContext } from "../button/index.jsx";
+import { collectionOf, isHidden } from "../collections/components.jsx";
+import { probeSlots, slotProbing } from "#server";
+import { FieldErrorContext } from "../form/field-error.jsx";
+import { useValidationBehavior, useValidationErrors } from "../form/index.jsx";
+import { resolveLocale } from "../i18n/index.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { LabelContext } from "../label/index.jsx";
+import { ListBoxContext, ListStateContext } from "../listbox/index.jsx";
+import { OverlayTriggerStateContext, PopoverContext } from "../overlay/contexts.js";
+import { createMultipleSelectionState } from "../selection/state.js";
+import { displayValidation } from "../state/form-validation.js";
+import { createSelectState, isSelectDisabled, isSelectRequired, selectedKeys, } from "../state/select.js";
+import { TextContext } from "../text/index.jsx";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { liveOptions } from "../utils/live.jsx";
+import { renderPropsOf } from "../slots/index.jsx";
+import { read } from "../interactions/utils.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { Provider, contextProps, createSlot, createSlotId, renderProps, slotIdRef, } from "../slots/index.jsx";
+import { HiddenSelect } from "./hidden-select.jsx";
+import { strings } from "./intl.js";
+import { SelectContext, SelectStateContext, SelectValueContext } from "./select-value.jsx";
+import { listId, popoverId, selectFocusWithin, selectLabelClick, selectListBlur, selectListChange, selectDisabled, selectDisabledAttr, selectRequiredAttr, selectProps, selectTriggerBlur, selectTriggerFocus, selectTriggerKeyDown, selectTriggerKeyDownCapture, selectTriggerKeyUp, selectTriggerPress, selectTriggerPressStart, syncListSelection, triggerId, TRIGGER_KEYS, valueId, } from "./behaviour.jsx";
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [LabelContext, ButtonContext, TextContext];
+const OWNED = ["style"];
+/** RAC Select, parts form: builds the collection from the children, then renders `SelectPartsInner`. */
+export function SelectParts(input) {
+    // RAC createHideableComponent: nothing inside a parent's collection build pass.
+    if (isHidden())
+        return null;
+    const [ctxProps, ref] = contextProps(input.props, input.props.ref, SelectContext);
+    // Live props (P5): `isDisabled` / `isInvalid` and the controlled `value` / `selectedKey` become accessors at the
+    // boundary (the select state reads them live); body reads are read once (untracked).
+    const props = liveOptions(ctxProps, LIVE_KEYS, CONTROLLED_KEYS);
+    return untrack(() => selectParts(props, ref));
+}
+/** Live by default (LIVE-SWEEP); read once: `id`, `name`, `form`, `selectionMode`, `disabledKeys`, `aria-label` /
+ *  `aria-labelledby`, `autoFocus`, `autoComplete`, `defaultValue`, `validationBehavior`, `validate`, handlers. */
+const LIVE_KEYS = ["isDisabled", "isInvalid", "isRequired", "placeholder", "aria-describedby"];
+const CONTROLLED_KEYS = ["value", "selectedKey"];
+function selectParts(props, ref) {
+    const { children } = props;
+    const disabledProp = props.isDisabled, requiredProp = props.isRequired;
+    const staticInvalid = typeof props.isInvalid === "function" ? false : props.isInvalid || false;
+    // RAC `useMemo(children(...))` + CollectionBuilder: the ListBox registers its items. Object-literal function value
+    // (a resumable symbol: the region state keeps the collection accessor).
+    const build = {
+        content: () => typeof children === "function" && !isSlot(children)
+            ? children({
+                isOpen: () => false,
+                isFocused: () => false,
+                isFocusVisible: () => false,
+                isDisabled: () => !!read(disabledProp),
+                isInvalid: () => staticInvalid,
+                isRequired: () => !!read(requiredProp),
+                defaultChildren: null,
+            })
+            : renderSlot(children),
+    };
+    const collection = collectionOf(build.content);
+    return <SelectPartsInner props={props} collection={() => collection()} selectRef={ref}/>;
+}
+function SelectPartsInner(input) {
+    return untrack(() => selectPartsInner(input));
+}
+function selectPartsInner(input) {
+    // Inside another field's server slot probe (`probeSlots`): this field's subtree holds none of that field's slots.
+    if (slotProbing)
+        return null;
+    const { props, collection, selectRef: ref } = input;
+    const validationBehavior = useValidationBehavior(props.validationBehavior);
+    const state = createSelectState({
+        ...props,
+        items: undefined,
+        collection,
+        validationBehavior,
+        validationErrors: useValidationErrors(),
+    });
+    const single = state.selectionMode === "single";
+    // Live props (P5): the live accessor (or the creation value) for bags / contexts; bindings read `isSelectDisabled`.
+    const isDisabled = selectDisabled(state);
+    const buttonRef = createRef();
+    // The listbox's selection: controlled by the value (`syncListSelection`), a pick reports through `selectListChange`
+    // (useSelectState: single keeps its key on re-press, duplicate events close the menu). Its own const: a resumable
+    // closure must not reference the object it is created in.
+    const listKeys = signal(new Set(untrack(() => selectedKeys(state))));
+    const selection = {
+        ...createMultipleSelectionState({
+            selectionMode: state.selectionMode,
+            disallowEmptySelection: single,
+            allowDuplicateSelectionEvents: true,
+            selectedKeys: listKeys,
+            disabledKeys: state.disabledKeys,
+            onSelectionChange: (keys) => selectListChange(state, listKeys, keys, buttonRef()),
+        }),
+        controlled: true,
+    };
+    // The listbox shows the current value however the menu opened, and follows it while open.
+    effect(() => syncListSelection(state, listKeys, selectedKeys(state)));
+    // RA useSlot: whether a Label renders (the trigger is labelled by it).
+    const initialLabel = !props["aria-label"] && !props["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    const aria = selectProps({ label: initialLabel, description: true, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] }, state);
+    // Without a rendered Label (read only when `initialLabel`, i.e. no aria name either): useSelect labels the trigger by
+    // its value alone and the menu not at all. Not a second `selectProps` call: `labelProps` would log its dev "no
+    // visible label" warning for every Select (it did, 2026-10-12, also with a `<Label>` child).
+    const labelledBy = aria.triggerProps["aria-labelledby"], labelledByNoLabel = valueId(state);
+    const menuLabelledBy = aria.menuProps["aria-labelledby"], menuLabelledByNoLabel = undefined;
+    const ownDescribedBy = props["aria-describedby"];
+    // RA useSlotId: the description / error ids are described-by while their part renders.
+    const validation = state.validation;
+    const isInvalid = () => displayValidation(validation).isInvalid;
+    const descriptionId = createSlotId(aria.ids.descriptionId);
+    const errorId = createSlotId(aria.ids.errorMessageId, isInvalid);
+    const { onFocus, onBlur, onFocusChange, onKeyDown, onKeyUp } = props;
+    const callbacks = { onFocus, onBlur, onFocusChange, onKeyDown, onKeyUp };
+    const locale = resolveLocale();
+    const placeholder = props.placeholder ?? formatMessage(strings, locale, "selectPlaceholder");
+    const autoFocus = props.autoFocus, autoComplete = props.autoComplete;
+    const listBoxRef = createRef();
+    // RA useFocusable autoFocus (the trigger Button only sets the attribute, which a client-rendered button ignores).
+    if (autoFocus) {
+        const auto = { done: false };
+        clientEffect(() => {
+            const el = buttonRef();
+            if (!auto.done && el)
+                untrack(() => focusSafely(el));
+            auto.done = true;
+        });
+    }
+    // The ListBox's list state (RAC ListStateContext = the select state): the built collection + the value-controlled selection.
+    const listState = {
+        id: listId(state),
+        selectionState: selection,
+        disabledKeys: selection.disabledKeys,
+        items: undefined,
+        children: undefined,
+        collection: () => collection(),
+        filter: undefined,
+        suppressTextValueWarning: false,
+        layoutDelegate: undefined,
+    };
+    // A const arrow (resumable closure): the FieldErrorContext value.
+    const fieldValidation = () => displayValidation(validation);
+    const values = [
+        [SelectContext, { placeholder }],
+        [SelectStateContext, state],
+        [SelectValueContext, { id: valueId(state) }],
+        [
+            LabelContext,
+            {
+                id: aria.labelProps.id,
+                elementType: "span",
+                ref: labelRef,
+                onClick: (event) => selectLabelClick(state, event),
+            },
+        ],
+        [
+            ButtonContext,
+            {
+                id: triggerId(state),
+                ref: buttonRef,
+                "aria-haspopup": "listbox",
+                "aria-expanded": () => (state.isOpen() ? "true" : "false"),
+                "aria-controls": () => (state.isOpen() ? listId(state) : undefined),
+                "aria-label": aria.triggerProps["aria-label"],
+                "aria-labelledby": () => (!initialLabel || hasLabel() ? labelledBy : labelledByNoLabel),
+                // Server: the slot probe below has marked the parts that render (`probeSlots`), so no id is kept on expectation.
+                "aria-describedby": () => [slotIdRef(descriptionId, false), slotIdRef(errorId, false), read(ownDescribedBy)].filter(Boolean).join(" ") || undefined,
+                "data-rk": TRIGGER_KEYS,
+                isDisabled,
+                autoFocus,
+                isPressed: () => state.isOpen(),
+                preventFocusOnPress: true,
+                onPressStart: (event) => selectTriggerPressStart(state, event),
+                onPress: (event) => selectTriggerPress(state, event),
+                onKeyDown: (event) => selectTriggerKeyDown(state, event, callbacks),
+                onKeyUp: (event) => selectTriggerKeyUp(state, event, callbacks),
+                onFocus: (event) => selectTriggerFocus(state, event, callbacks),
+                onBlur: (event) => selectTriggerBlur(state, event, callbacks),
+            },
+        ],
+        [OverlayTriggerStateContext, state],
+        [
+            PopoverContext,
+            {
+                id: popoverId(state),
+                trigger: "Select",
+                triggerRef: buttonRef,
+                scrollRef: listBoxRef,
+                placement: "bottom start",
+                "aria-labelledby": () => (!initialLabel || hasLabel() ? menuLabelledBy : menuLabelledByNoLabel),
+                clearContexts: CLEAR_CONTEXTS,
+            },
+        ],
+        [
+            ListBoxContext,
+            {
+                id: listId(state),
+                ref: listBoxRef,
+                "aria-labelledby": () => (!initialLabel || hasLabel() ? menuLabelledBy : menuLabelledByNoLabel),
+                autoFocus: () => untrack(state.focusStrategy) || true,
+                shouldSelectOnPressUp: true,
+                shouldFocusOnHover: true,
+                linkBehavior: "selection",
+                escapeKeyBehavior: "none",
+                onBlur: (event) => selectListBlur(state, event, callbacks),
+            },
+        ],
+        [ListStateContext, listState],
+        [TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorId } } }],
+        [FieldErrorContext, fieldValidation],
+    ];
+    // Values hoisted: no function in the `rp` initializer (spread sites capture `rp.class` / `rp.style`: per-key live views).
+    const rpValues = {
+        isOpen: () => state.isOpen(),
+        isFocused: () => state.isFocused(),
+        isFocusVisible: () => state.isFocused() && state.isFocusVisible(),
+        isDisabled: () => isSelectDisabled(state),
+        isInvalid,
+        isRequired: () => isSelectRequired(state),
+    };
+    const rp = renderPropsOf(props, { values: rpValues, defaultClassName: "rv-Select" });
+    // Rivet (server): the trigger renders before its Description / FieldError, and a resumed page never re-renders (RA
+    // useSlotId drops unrendered ids after hydration): probe which slotted parts render first.
+    if (typeof document === "undefined")
+        probeSlots(values, () => rp.children());
+    const dom = globalDOMProps(props, OWNED);
+    delete dom.id;
+    const slot = props.slot || undefined;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-focused": () => dataBool(state.isFocused()),
+            "data-focus-visible": () => dataBool(state.isFocused() && state.isFocusVisible()),
+            "data-open": () => dataBool(state.isOpen()),
+            "data-disabled": selectDisabledAttr(state),
+            "data-invalid": () => dataBool(isInvalid()),
+            "data-required": selectRequiredAttr(state),
+            onFocusIn: (event) => selectFocusWithin(state, event),
+            onFocusOut: (event) => selectFocusWithin(state, event),
+            onKeyDownCapture: (event) => selectTriggerKeyDownCapture(state, event),
+            children: () => [rp.children(), <HiddenSelect state={state} autoComplete={autoComplete} preloadVisible/>],
+        };
+        return (<Provider values={values}>
+        {props.render(attrs, {
+                isOpen: () => state.isOpen(),
+                isFocused: () => state.isFocused(),
+                isFocusVisible: () => state.isFocused() && state.isFocusVisible(),
+                isDisabled: () => isSelectDisabled(state),
+                isInvalid,
+                isRequired: () => isSelectRequired(state),
+            })}
+      </Provider>);
+    }
+    return (<Provider values={values}>
+      <div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-focused={dataBool(state.isFocused())} data-focus-visible={dataBool(state.isFocused() && state.isFocusVisible())} data-open={dataBool(state.isOpen())} data-disabled={dataBool(isSelectDisabled(state))} data-invalid={dataBool(isInvalid())} data-required={dataBool(isSelectRequired(state))} preload="visible" onFocusIn={(event) => selectFocusWithin(state, event)} onFocusOut={(event) => selectFocusWithin(state, event)} onKeyDownCapture={(event) => selectTriggerKeyDownCapture(state, event)}>
+        {rp.children()}
+        <HiddenSelect state={state} autoComplete={autoComplete}/>
+      </div>
+    </Provider>);
+}

package/select/select-value.d.ts

@@ -0,0 +1,58 @@
+import type { Content, Slot } from "@rivetjs/runtime/jsx-runtime";
+import { type ContextValue, type HTMLProps, type RefValue, type StyleObject } from "../slots/index.jsx";
+import type { SelectionBehavior } from "../collections/types.js";
+import { type Item, type SelectionMode, type SelectState } from "../state/select.js";
+/**
+ * Option render props of the Select `children` slot (adapted from RAC `ListBoxItemRenderProps`: accessors, read
+ * them inside bindings). SelectValue renders the slot too, with the states off.
+ */
+export interface ItemRenderProps {
+    isSelected: () => boolean;
+    isFocused: () => boolean;
+    isDisabled: boolean;
+    selectionMode: SelectionMode | "none";
+    selectionBehavior: () => SelectionBehavior;
+}
+/** What a Select gives its SelectValue (RAC: the Select's own props through `SelectContext`). */
+export interface SelectContextValue {
+    /** Temporary text that occupies the select when it is empty. @default 'Select an item' (localized). An accessor
+     *  (a live `placeholder` prop) is read in the placeholder text binding. */
+    placeholder?: string | (() => string | undefined) | undefined;
+    /** Rivet: the option renderer of the items preset; SelectValue renders the selected items with it. */
+    renderItem?: Slot<[item: () => Item, states: ItemRenderProps]> | undefined;
+}
+/** RAC `SelectContext`. */
+export declare const SelectContext: import("@rivetjs/reactivity").Context<ContextValue<SelectContextValue, HTMLDivElement>>;
+/** RAC `SelectStateContext`: the state of the nearest Select (extra children can read and change it). */
+export declare const SelectStateContext: import("@rivetjs/reactivity").Context<SelectState<SelectionMode> | null>;
+/** RAC `SelectValueContext`: SelectValue props from the Select (`useSelect` `valueProps`: its `id`). */
+export declare const SelectValueContext: import("@rivetjs/reactivity").Context<ContextValue<SelectValueProps, HTMLSpanElement>>;
+/** RAC `SelectValueRenderProps` (accessors). */
+export interface SelectValueRenderProps {
+    /** Whether the value is a placeholder. */
+    isPlaceholder: () => boolean;
+    /** @deprecated The item of the first selected key (RAC parts mode: its object value). */
+    selectedItem: () => any;
+    /** The items of the currently selected keys (RAC parts mode: their object values, `null` for static items). */
+    selectedItems: () => any[];
+    /** The textValue of the currently selected items. */
+    selectedText: () => string;
+    /** The state of the select. */
+    state: SelectState<SelectionMode>;
+}
+export interface SelectValueProps extends HTMLProps<"span"> {
+    /** @default 'rv-SelectValue' */
+    class?: string | ((values: SelectValueRenderProps & {
+        defaultClassName: string | undefined;
+    }) => string | undefined);
+    style?: StyleObject;
+    ref?: RefValue<HTMLSpanElement>;
+    /** Content, or a function of the render props (`defaultChildren`: the default content). */
+    children?: Content | ((values: SelectValueRenderProps & {
+        defaultChildren: Content | undefined;
+    }) => Content);
+}
+/** SelectValue `selectedText`: the text of a single item, or the items' texts as a localized list (reads the state). */
+export declare function selectedText(state: SelectState<SelectionMode>, locale: string): string;
+/** SelectValue renders the current value of a Select, or a placeholder if no value is selected. */
+export declare function SelectValue(props: SelectValueProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;

package/select/select-value.jsx

@@ -0,0 +1,142 @@
+// Ported from React Aria Components (Select.tsx: SelectValue, SelectContext, SelectStateContext,
+// SelectValueContext), Apache-2.0, © Adobe.
+//
+// SelectValue renders the current value of a Select, or a placeholder if no value is selected. It is
+// usually placed within the trigger button.
+// Rivet:
+// - render props are accessors (`({ selectedItems, isPlaceholder }) => …` with `selectedItems()`), the
+//   slots convention (`../slots/index.tsx`); the content sits in a keyed region (`Show keyed` on the selected keys: re-created when they change), so a value that turns
+//   from the placeholder text into elements on a resumed page re-renders as a region, never as a text
+//   binding ("Resumed text bindings must stay text").
+// - default children: the selected items' content — the Select's item renderer (`SelectContext`
+//   `renderItem`, the items preset's option renderer, called with item states off as RAC calls the item's
+//   render function) or the item label — and for multiple selection a localized list (`Intl.ListFormat`
+//   parts, each item in a `<span data-slot="value-item">`).
+// - contexts are registered (`resumableContext`, ids `rv-select`, `rv-select-state`, `rv-select-value`):
+//   a re-created region on a resumed page is re-provided with the (serializable) select state.
+// - RAC parts mode (the Select built its collection from the children): default children = each selected item's
+//   children (`ListBoxItem` content; a render function is called with every state off, as RAC), `selectedItems` /
+//   `selectedItem` = the items' object values (`null` for static items), as RAC. Hidden in a collection build pass
+//   (RAC createHideableComponent); the content clears `TextContext` (an item's `<Text slot="description">` must not
+//   take the Select's description id).
+// Deviation (items preset): `selectedItems` are the data items (`{ key, label, textValue, … }`).
+import { createContext } from "@rivetjs/reactivity";
+import { Show } from "@rivetjs/runtime/dom";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { listFormatter } from "../i18n/list-formatter.js";
+import { resumableContext, useContext, contextProps, slottedContext, } from "../slots/index.jsx";
+import { resolveLocale } from "../i18n/index.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { selectedItems } from "../state/select.js";
+import { isHiddenPart } from "../collections/hidden.js";
+import { slotProbing } from "#server";
+import { TextContext } from "../text/index.jsx";
+import { Provider } from "../slots/index.jsx";
+import { strings } from "./intl.js";
+/** RAC `SelectContext`. */
+export const SelectContext = resumableContext(createContext(null, { id: "rv-select" }));
+/** RAC `SelectStateContext`: the state of the nearest Select (extra children can read and change it). */
+export const SelectStateContext = resumableContext(createContext(null, { id: "rv-select-state" }));
+/** RAC `SelectValueContext`: SelectValue props from the Select (`useSelect` `valueProps`: its `id`). */
+export const SelectValueContext = resumableContext(createContext(null, { id: "rv-select-value" }));
+const listFormat = (locale) => listFormatter(locale);
+/** SelectValue `selectedText`: the text of a single item, or the items' texts as a localized list (reads the state). */
+export function selectedText(state, locale) {
+    const texts = selectedItems(state).map((item) => item.textValue ?? item.label);
+    return state.selectionMode === "single" ? (texts[0] ?? "") : listFormat(locale).format(texts);
+}
+// RAC SelectValue calls an item's render-function children with every state off.
+const ITEM_OFF = {
+    isHovered: () => false,
+    isPressed: () => false,
+    isSelected: () => false,
+    isFocused: () => false,
+    isFocusVisible: () => false,
+    isDisabled: () => false,
+    selectionMode: "single",
+    selectionBehavior: () => "toggle",
+    allowsDragging: false,
+    isDragging: () => false,
+    isDropTarget: () => false,
+};
+/** Whether the state's items come from a built collection (RAC parts mode). */
+const isParts = (state) => state.items === undefined && !!state.collection;
+/** A built item's children (RAC `item.props.children`; a render function gets the states off). */
+function itemContent(item) {
+    const content = item.content;
+    if (typeof content === "function" && !isSlot(content))
+        return content(ITEM_OFF);
+    return content != null ? renderSlot(content) : item.label;
+}
+const OFF = {
+    isSelected: () => false,
+    isFocused: () => false,
+    isDisabled: false,
+    selectionBehavior: () => "toggle",
+};
+/** RAC SelectValue `defaultChildren`: the selected items' content (multiple: a localized list); null when none. */
+function defaultContent(state, locale, render) {
+    const items = selectedItems(state);
+    if (!items.length)
+        return null;
+    const parts = isParts(state);
+    const content = (item) => (render ? render(() => item, { ...OFF, selectionMode: "single" }) : parts ? itemContent(item) : item.label);
+    if (state.selectionMode === "single")
+        return content(items[0]);
+    let index = 0;
+    return (<>
+      {listFormat(locale)
+            .formatToParts(items.map((item) => item.textValue ?? item.label))
+            .map((part) => (part.type === "element" ? <span data-slot="value-item">{content(items[index++])}</span> : part.value))}
+    </>);
+}
+/** A live placeholder's text (a returned arrow: resumable), the localized default when it reads `undefined`. */
+function livePlaceholder(placeholder, locale) {
+    return () => placeholder() ?? formatMessage(strings, locale, "selectPlaceholder");
+}
+function placeholderBranch(text) {
+    return () => text;
+}
+/** SelectValue renders the current value of a Select, or a placeholder if no value is selected. */
+export function SelectValue(props) {
+    // RAC createHideableComponent: nothing in the Select's collection build pass.
+    if (slotProbing || isHiddenPart())
+        return null;
+    const [merged, ref] = contextProps(props, props.ref, SelectValueContext);
+    const state = useContext(SelectStateContext);
+    const select = (slottedContext(SelectContext) ?? {});
+    const locale = resolveLocale();
+    const placeholderProp = select.placeholder;
+    // A live `placeholder` (accessor) stays text: the fallback branch binds it (static path: the string, unchanged).
+    const placeholder = typeof placeholderProp === "function" ? livePlaceholder(placeholderProp, locale) : (placeholderProp ?? formatMessage(strings, locale, "selectPlaceholder"));
+    // `Show` calls a function fallback once as its branch: the live one returns the text accessor (a text binding).
+    const fallback = typeof placeholder === "function" ? placeholderBranch(placeholder) : placeholder;
+    const renderItem = select.renderItem;
+    const { children, class: className, style, ...domProps } = merged;
+    // RAC parts mode: the items' object values (`item.value ?? null`); items preset: the data items.
+    const parts = isParts(state);
+    const values = {
+        isPlaceholder: () => selectedItems(state).length === 0,
+        selectedItem: () => (parts ? (selectedItems(state)[0]?.value ?? null) : (selectedItems(state)[0] ?? null)),
+        selectedItems: () => (parts ? selectedItems(state).map((item) => item.value ?? null) : selectedItems(state)),
+        selectedText: () => selectedText(state, locale),
+        state,
+    };
+    // Region key: the selected items (re-renders the content when they change; "" = placeholder).
+    const selectionKey = () => selectedItems(state)
+        .map((item) => typeof item.key + ":" + String(item.key))
+        .join(" ");
+    // Split at component time (a render function vs content), never in a binding reading signals.
+    const fn = typeof children === "function" && !isSlot(children) ? children : null;
+    const content = fn ? null : children;
+    const r = ref;
+    return (<span {...domProps} ref={r} class={typeof className === "function" ? className({ ...values, defaultClassName: "rv-SelectValue" }) : (className ?? "rv-SelectValue")} style={style} data-placeholder={values.isPlaceholder() ? "true" : undefined}>
+      <Provider values={[[TextContext, null]]}>
+        {fn ? (<Show when={() => "v" + selectionKey()} keyed>
+            {() => fn({ ...values, defaultChildren: defaultContent(state, locale, renderItem) ?? placeholder })}
+          </Show>) : content != null ? (renderSlot(content)) : (<Show when={selectionKey} keyed fallback={fallback}>
+            {() => defaultContent(state, locale, renderItem)}
+          </Show>)}
+      </Provider>
+    </span>);
+}

package/selection/dom-utils.d.ts

@@ -0,0 +1,25 @@
+import type { PointerType } from "./manager.js";
+export type { Modality } from "../interactions/focus-visible.jsx";
+export { _setInteractionModality, getInteractionModality, noteModality as trackModality } from "../interactions/focus-visible.jsx";
+export { isVirtualPointerEvent } from "../platform/index.js";
+export { getScrollParents, isScrollable, nodeContains, scrollIntoView, scrollIntoViewport } from "../utils/dom.js";
+export { focusWithoutScrolling } from "../utils/index.js";
+export { focusSafely } from "../focus/index.js";
+export { isOpeningLink } from "../utils/links.jsx";
+/** Pointer type of a DOM event (press-event `pointerType`): keyboard, virtual (screen readers / `element.click()`), mouse / pen / touch. */
+export declare function pointerTypeOf(event: Event): PointerType;
+export declare function getVirtuallyFocusedElement(doc: Document): Element | null;
+export declare function dispatchVirtualBlur(from: Element, to: Element | null): void;
+export declare function dispatchVirtualFocus(to: Element, from: Element | null): void;
+/** Move virtual focus (aria-activedescendant targets) from the current element to `to`. */
+export declare function moveVirtualFocus(to: Element | null): void;
+/**
+ * Open a link item like a click on it: an anchor opens itself (react-aria `openLink`, modifiers
+ * honoured, `linkState.isOpening` set); any other element with `href` gets a temporary anchor.
+ */
+export declare function openLink(target: HTMLElement, modifiers: {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+}, href?: string): void;

package/selection/dom-utils.js

@@ -0,0 +1,77 @@
+// Ported from @react-aria/focus (virtualFocus.ts: getVirtuallyFocusedElement, dispatchVirtualBlur /
+// Focus, moveVirtualFocus), Apache-2.0, © Adobe.
+//
+// Everything else the selection hooks need is re-exported from the package's single implementations:
+// modality from `../interactions/focus-visible.tsx` (`trackModality` = `noteModality`), scrolling and
+// `nodeContains` from `../utils/dom.ts`, `focusSafely` from `../focus`, `focusWithoutScrolling` from
+// `../utils`, virtual events from `../platform`, `openLink` / `isOpeningLink` from `../utils/links.tsx`.
+// `pointerTypeOf(event)` (Rivet: the press pointer type of any DOM event) lives here.
+import { isVirtualPointerEvent } from "../platform/index.js";
+import { openLink as openAnchor } from "../utils/links.jsx";
+export { _setInteractionModality, getInteractionModality, noteModality as trackModality } from "../interactions/focus-visible.jsx";
+export { isVirtualPointerEvent } from "../platform/index.js";
+export { getScrollParents, isScrollable, nodeContains, scrollIntoView, scrollIntoViewport } from "../utils/dom.js";
+export { focusWithoutScrolling } from "../utils/index.js";
+export { focusSafely } from "../focus/index.js";
+export { isOpeningLink } from "../utils/links.jsx";
+/** Pointer type of a DOM event (press-event `pointerType`): keyboard, virtual (screen readers / `element.click()`), mouse / pen / touch. */
+export function pointerTypeOf(event) {
+    if (event.type.startsWith("key"))
+        return "keyboard";
+    if (event.type.startsWith("pointer") && isVirtualPointerEvent(event))
+        return "virtual";
+    const pointer = event.pointerType;
+    if (pointer === "mouse" || pointer === "pen" || pointer === "touch")
+        return pointer;
+    if (event.type.startsWith("touch"))
+        return "touch";
+    // Virtual clicks: screen readers / element.click() (detail 0, no pointer).
+    if (event.type === "click" && event.detail === 0 && !pointer)
+        return "virtual";
+    return "mouse";
+}
+export function getVirtuallyFocusedElement(doc) {
+    const activeElement = doc.activeElement;
+    const activeDescendant = activeElement?.getAttribute("aria-activedescendant");
+    if (activeDescendant)
+        return doc.getElementById(activeDescendant) || activeElement;
+    return activeElement;
+}
+export function dispatchVirtualBlur(from, to) {
+    from.dispatchEvent(new FocusEvent("blur", { relatedTarget: to }));
+    from.dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget: to }));
+}
+export function dispatchVirtualFocus(to, from) {
+    to.dispatchEvent(new FocusEvent("focus", { relatedTarget: from }));
+    to.dispatchEvent(new FocusEvent("focusin", { bubbles: true, relatedTarget: from }));
+}
+/** Move virtual focus (aria-activedescendant targets) from the current element to `to`. */
+export function moveVirtualFocus(to) {
+    if (typeof document === "undefined")
+        return;
+    const from = getVirtuallyFocusedElement(to?.ownerDocument ?? document);
+    if (from !== to) {
+        if (from)
+            dispatchVirtualBlur(from, to);
+        if (to)
+            dispatchVirtualFocus(to, from);
+    }
+}
+/**
+ * Open a link item like a click on it: an anchor opens itself (react-aria `openLink`, modifiers
+ * honoured, `linkState.isOpening` set); any other element with `href` gets a temporary anchor.
+ */
+export function openLink(target, modifiers, href) {
+    if (target instanceof HTMLAnchorElement && (!href || target.getAttribute("href") === href))
+        return openAnchor(target, modifiers);
+    if (!href)
+        return;
+    const anchor = target.ownerDocument.createElement("a");
+    anchor.href = href;
+    const t = target.getAttribute("target");
+    if (t)
+        anchor.target = t;
+    target.appendChild(anchor);
+    openAnchor(anchor, modifiers);
+    anchor.remove();
+}

package/selection/keyed.d.ts

@@ -0,0 +1,19 @@
+import { type Signal } from "@rivetjs/reactivity";
+import type { Key, Selection } from "../collections/types.js";
+/** The state shape the helpers read (both `selection/state.ts` and `_adapters/collections.ts` states). */
+export interface KeyedSelectionSource {
+    readonly selectedKeys?: Signal<Selection> | undefined;
+    readonly selectedKey?: Signal<Key | null> | undefined;
+    readonly focusedKey: Signal<Key | null>;
+}
+/** `selectionOf` result: not selected, in the selected Set, or covered by an "all" selection. */
+export declare const NOT_SELECTED = 0, IN_SELECTION = 1, ALL_SELECTED = 2;
+export type KeySelection = typeof NOT_SELECTED | typeof IN_SELECTION | typeof ALL_SELECTED;
+/** Whether `key` is in the selection (`IN_SELECTION`), covered by "all" (`ALL_SELECTED`) or not; tracked per key. */
+export declare function selectionOf(state: KeyedSelectionSource, key: Key): KeySelection;
+/** Whether the selection is empty (not "all", no keys); a binding re-runs only when that flips. */
+export declare function isSelectionEmpty(state: KeyedSelectionSource): boolean;
+/** `state.focusedKey() === key`, tracked per key. */
+export declare function isFocusedKey(state: KeyedSelectionSource, key: Key): boolean;
+/** `state.focusedKey() != null`; a binding re-runs only when that flips (not on every focus move). */
+export declare function hasFocusedKey(state: KeyedSelectionSource): boolean;