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

package/combobox/intl.js

@@ -0,0 +1,240 @@
+export const strings = {
+    "ar-AE": {
+        buttonLabel: "عرض المقترحات",
+        countAnnouncement: "{optionCount, plural, one {# خيار} other {# خيارات}} متاحة.",
+        focusAnnouncement: "{isGroupChange, select, true {المجموعة المدخلة {groupTitle}, مع {groupCount, plural, one {# خيار} other {# خيارات}}. } other {}}{optionText}{isSelected, select, true {, محدد} other {}}",
+        listboxLabel: "مقترحات",
+        selectedAnnouncement: "{optionText}، محدد",
+    },
+    "bg-BG": {
+        buttonLabel: "Покажи предложения",
+        countAnnouncement: "{optionCount, plural, one {# опция} other {# опции}} на разположение.",
+        focusAnnouncement: "{isGroupChange, select, true {Въведена група {groupTitle}, с {groupCount, plural, one {# опция} other {# опции}}. } other {}}{optionText}{isSelected, select, true {, избрани} other {}}",
+        listboxLabel: "Предложения",
+        selectedAnnouncement: "{optionText}, избрани",
+    },
+    "cs-CZ": {
+        buttonLabel: "Zobrazit doporučení",
+        countAnnouncement: "K dispozici {optionCount, plural, one {je # možnost} other {jsou/je # možnosti/-í}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Zadaná skupina „{groupTitle}“ {groupCount, plural, one {s # možností} other {se # možnostmi}}. } other {}}{optionText}{isSelected, select, true { (vybráno)} other {}}",
+        listboxLabel: "Návrhy",
+        selectedAnnouncement: "{optionText}, vybráno",
+    },
+    "da-DK": {
+        buttonLabel: "Vis forslag",
+        countAnnouncement: "{optionCount, plural, one {# mulighed tilgængelig} other {# muligheder tilgængelige}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Angivet gruppe {groupTitle}, med {groupCount, plural, one {# mulighed} other {# muligheder}}. } other {}}{optionText}{isSelected, select, true {, valgt} other {}}",
+        listboxLabel: "Forslag",
+        selectedAnnouncement: "{optionText}, valgt",
+    },
+    "de-DE": {
+        buttonLabel: "Empfehlungen anzeigen",
+        countAnnouncement: "{optionCount, plural, one {# Option} other {# Optionen}} verfügbar.",
+        focusAnnouncement: "{isGroupChange, select, true {Eingetretene Gruppe {groupTitle}, mit {groupCount, plural, one {# Option} other {# Optionen}}. } other {}}{optionText}{isSelected, select, true {, ausgewählt} other {}}",
+        listboxLabel: "Empfehlungen",
+        selectedAnnouncement: "{optionText}, ausgewählt",
+    },
+    "el-GR": {
+        buttonLabel: "Προβολή προτάσεων",
+        countAnnouncement: "{optionCount, plural, one {# επιλογή} other {# επιλογές }} διαθέσιμες.",
+        focusAnnouncement: "{isGroupChange, select, true {Εισαγμένη ομάδα {groupTitle}, με {groupCount, plural, one {# επιλογή} other {# επιλογές}}. } other {}}{optionText}{isSelected, select, true {, επιλεγμένο} other {}}",
+        listboxLabel: "Προτάσεις",
+        selectedAnnouncement: "{optionText}, επιλέχθηκε",
+    },
+    "en-US": {
+        focusAnnouncement: "{isGroupChange, select, true {Entered group {groupTitle}, with {groupCount, plural, one {# option} other {# options}}. } other {}}{optionText}{isSelected, select, true {, selected} other {}}",
+        countAnnouncement: "{optionCount, plural, one {# option} other {# options}} available.",
+        selectedAnnouncement: "{optionText}, selected",
+        buttonLabel: "Show suggestions",
+        listboxLabel: "Suggestions",
+    },
+    "es-ES": {
+        buttonLabel: "Mostrar sugerencias",
+        countAnnouncement: "{optionCount, plural, one {# opción} other {# opciones}} disponible(s).",
+        focusAnnouncement: "{isGroupChange, select, true {Se ha unido al grupo {groupTitle}, con {groupCount, plural, one {# opción} other {# opciones}}. } other {}}{optionText}{isSelected, select, true {, seleccionado} other {}}",
+        listboxLabel: "Sugerencias",
+        selectedAnnouncement: "{optionText}, seleccionado",
+    },
+    "et-EE": {
+        buttonLabel: "Kuva soovitused",
+        countAnnouncement: "{optionCount, plural, one {# valik} other {# valikud}} saadaval.",
+        focusAnnouncement: "{isGroupChange, select, true {Sisestatud rühm {groupTitle}, valikuga {groupCount, plural, one {# valik} other {# valikud}}. } other {}}{optionText}{isSelected, select, true {, valitud} other {}}",
+        listboxLabel: "Soovitused",
+        selectedAnnouncement: "{optionText}, valitud",
+    },
+    "fi-FI": {
+        buttonLabel: "Näytä ehdotukset",
+        countAnnouncement: "{optionCount, plural, one {# vaihtoehto} other {# vaihtoehtoa}} saatavilla.",
+        focusAnnouncement: "{isGroupChange, select, true {Siirtyi ryhmään {groupTitle}, jossa {groupCount, plural, one {# vaihtoehto} other {# vaihtoehtoa}}.} other {}}{optionText}{isSelected, select, true {, valittu} other {}}",
+        listboxLabel: "Ehdotukset",
+        selectedAnnouncement: "{optionText}, valittu",
+    },
+    "fr-FR": {
+        buttonLabel: "Afficher les suggestions",
+        countAnnouncement: "{optionCount, plural, one {# option} other {# options}} disponible(s).",
+        focusAnnouncement: "{isGroupChange, select, true {Groupe {groupTitle} rejoint, avec {groupCount, plural, one {# option} other {# options}}. } other {}}{optionText}{isSelected, select, true {, sélectionné(s)} other {}}",
+        listboxLabel: "Suggestions",
+        selectedAnnouncement: "{optionText}, sélectionné",
+    },
+    "he-IL": {
+        buttonLabel: "הצג הצעות",
+        countAnnouncement: "{optionCount, plural, one {אפשרות #} other {# אפשרויות}} במצב זמין.",
+        focusAnnouncement: "{isGroupChange, select, true {נכנס לקבוצה {groupTitle}, עם {groupCount, plural, one {אפשרות #} other {# אפשרויות}}. } other {}}{optionText}{isSelected, select, true {, נבחר} other {}}",
+        listboxLabel: "הצעות",
+        selectedAnnouncement: "{optionText}, נבחר",
+    },
+    "hr-HR": {
+        buttonLabel: "Prikaži prijedloge",
+        countAnnouncement: "Dostupno još: {optionCount, plural, one {# opcija} other {# opcije/a}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Unesena skupina {groupTitle}, s {groupCount, plural, one {# opcijom} other {# opcije/a}}. } other {}}{optionText}{isSelected, select, true {, odabranih} other {}}",
+        listboxLabel: "Prijedlozi",
+        selectedAnnouncement: "{optionText}, odabrano",
+    },
+    "hu-HU": {
+        buttonLabel: "Javaslatok megjelenítése",
+        countAnnouncement: "{optionCount, plural, one {# lehetőség} other {# lehetőség}} áll rendelkezésre.",
+        focusAnnouncement: "{isGroupChange, select, true {Belépett a(z) {groupTitle} csoportba, amely {groupCount, plural, one {# lehetőséget} other {# lehetőséget}} tartalmaz. } other {}}{optionText}{isSelected, select, true {, kijelölve} other {}}",
+        listboxLabel: "Javaslatok",
+        selectedAnnouncement: "{optionText}, kijelölve",
+    },
+    "it-IT": {
+        buttonLabel: "Mostra suggerimenti",
+        countAnnouncement: "{optionCount, plural, one {# opzione disponibile} other {# opzioni disponibili}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Ingresso nel gruppo {groupTitle}, con {groupCount, plural, one {# opzione} other {# opzioni}}. } other {}}{optionText}{isSelected, select, true {, selezionato} other {}}",
+        listboxLabel: "Suggerimenti",
+        selectedAnnouncement: "{optionText}, selezionato",
+    },
+    "ja-JP": {
+        buttonLabel: "候補を表示",
+        countAnnouncement: "{optionCount, plural, one {# 個のオプション} other {# 個のオプション}}を利用できます。",
+        focusAnnouncement: "{isGroupChange, select, true {入力されたグループ {groupTitle}、{groupCount, plural, one {# 個のオプション} other {# 個のオプション}}を含む。} other {}}{optionText}{isSelected, select, true {、選択済み} other {}}",
+        listboxLabel: "候補",
+        selectedAnnouncement: "{optionText}、選択済み",
+    },
+    "ko-KR": {
+        buttonLabel: "제안 사항 표시",
+        countAnnouncement: "{optionCount, plural, one {#개 옵션} other {#개 옵션}}을 사용할 수 있습니다.",
+        focusAnnouncement: "{isGroupChange, select, true {입력한 그룹 {groupTitle}, {groupCount, plural, one {#개 옵션} other {#개 옵션}}. } other {}}{optionText}{isSelected, select, true {, 선택됨} other {}}",
+        listboxLabel: "제안",
+        selectedAnnouncement: "{optionText}, 선택됨",
+    },
+    "lt-LT": {
+        buttonLabel: "Rodyti pasiūlymus",
+        countAnnouncement: "Yra {optionCount, plural, one {# parinktis} other {# parinktys (-ių)}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Įvesta grupė {groupTitle}, su {groupCount, plural, one {# parinktimi} other {# parinktimis (-ių)}}. } other {}}{optionText}{isSelected, select, true {, pasirinkta} other {}}",
+        listboxLabel: "Pasiūlymai",
+        selectedAnnouncement: "{optionText}, pasirinkta",
+    },
+    "lv-LV": {
+        buttonLabel: "Rādīt ieteikumus",
+        countAnnouncement: "Pieejamo opciju skaits: {optionCount, plural, one {# opcija} other {# opcijas}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Ievadīta grupa {groupTitle}, ar {groupCount, plural, one {# opciju} other {# opcijām}}. } other {}}{optionText}{isSelected, select, true {, atlasīta} other {}}",
+        listboxLabel: "Ieteikumi",
+        selectedAnnouncement: "{optionText}, atlasīta",
+    },
+    "nb-NO": {
+        buttonLabel: "Vis forslag",
+        countAnnouncement: "{optionCount, plural, one {# alternativ} other {# alternativer}} finnes.",
+        focusAnnouncement: "{isGroupChange, select, true {Angitt gruppe {groupTitle}, med {groupCount, plural, one {# alternativ} other {# alternativer}}. } other {}}{optionText}{isSelected, select, true {, valgt} other {}}",
+        listboxLabel: "Forslag",
+        selectedAnnouncement: "{optionText}, valgt",
+    },
+    "nl-NL": {
+        buttonLabel: "Suggesties weergeven",
+        countAnnouncement: "{optionCount, plural, one {# optie} other {# opties}} beschikbaar.",
+        focusAnnouncement: "{isGroupChange, select, true {Groep {groupTitle} ingevoerd met {groupCount, plural, one {# optie} other {# opties}}. } other {}}{optionText}{isSelected, select, true {, geselecteerd} other {}}",
+        listboxLabel: "Suggesties",
+        selectedAnnouncement: "{optionText}, geselecteerd",
+    },
+    "pl-PL": {
+        buttonLabel: "Wyświetlaj sugestie",
+        countAnnouncement: "dostępna/dostępne(-nych) {optionCount, plural, one {# opcja} other {# opcje(-i)}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Dołączono do grupy {groupTitle}, z {groupCount, plural, one {# opcją} other {# opcjami}}. } other {}}{optionText}{isSelected, select, true {, wybrano} other {}}",
+        listboxLabel: "Sugestie",
+        selectedAnnouncement: "{optionText}, wybrano",
+    },
+    "pt-BR": {
+        buttonLabel: "Mostrar sugestões",
+        countAnnouncement: "{optionCount, plural, one {# opção} other {# opções}} disponível.",
+        focusAnnouncement: "{isGroupChange, select, true {Grupo inserido {groupTitle}, com {groupCount, plural, one {# opção} other {# opções}}. } other {}}{optionText}{isSelected, select, true {, selecionado} other {}}",
+        listboxLabel: "Sugestões",
+        selectedAnnouncement: "{optionText}, selecionado",
+    },
+    "pt-PT": {
+        buttonLabel: "Apresentar sugestões",
+        countAnnouncement: "{optionCount, plural, one {# opção} other {# opções}} disponível.",
+        focusAnnouncement: "{isGroupChange, select, true {Grupo introduzido {groupTitle}, com {groupCount, plural, one {# opção} other {# opções}}. } other {}}{optionText}{isSelected, select, true {, selecionado} other {}}",
+        listboxLabel: "Sugestões",
+        selectedAnnouncement: "{optionText}, selecionado",
+    },
+    "ro-RO": {
+        buttonLabel: "Afișare sugestii",
+        countAnnouncement: "{optionCount, plural, one {# opțiune} other {# opțiuni}} disponibile.",
+        focusAnnouncement: "{isGroupChange, select, true {Grup {groupTitle} introdus, cu {groupCount, plural, one {# opțiune} other {# opțiuni}}. } other {}}{optionText}{isSelected, select, true {, selectat} other {}}",
+        listboxLabel: "Sugestii",
+        selectedAnnouncement: "{optionText}, selectat",
+    },
+    "ru-RU": {
+        buttonLabel: "Показать предложения",
+        countAnnouncement: "{optionCount, plural, one {# параметр} other {# параметров}} доступно.",
+        focusAnnouncement: "{isGroupChange, select, true {Введенная группа {groupTitle}, с {groupCount, plural, one {# параметром} other {# параметрами}}. } other {}}{optionText}{isSelected, select, true {, выбранными} other {}}",
+        listboxLabel: "Предложения",
+        selectedAnnouncement: "{optionText}, выбрано",
+    },
+    "sk-SK": {
+        buttonLabel: "Zobraziť návrhy",
+        countAnnouncement: "{optionCount, plural, one {# možnosť} other {# možnosti/-í}} k dispozícii.",
+        focusAnnouncement: "{isGroupChange, select, true {Zadaná skupina {groupTitle}, s {groupCount, plural, one {# možnosťou} other {# možnosťami}}. } other {}}{optionText}{isSelected, select, true {, vybraté} other {}}",
+        listboxLabel: "Návrhy",
+        selectedAnnouncement: "{optionText}, vybraté",
+    },
+    "sl-SI": {
+        buttonLabel: "Prikaži predloge",
+        countAnnouncement: "Na voljo je {optionCount, plural, one {# opcija} other {# opcije}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Vnesena skupina {groupTitle}, z {groupCount, plural, one {# opcija} other {# opcije}}. } other {}}{optionText}{isSelected, select, true {, izbrano} other {}}",
+        listboxLabel: "Predlogi",
+        selectedAnnouncement: "{optionText}, izbrano",
+    },
+    "sr-SP": {
+        buttonLabel: "Prikaži predloge",
+        countAnnouncement: "Dostupno još: {optionCount, plural, one {# opcija} other {# opcije/a}}.",
+        focusAnnouncement: "{isGroupChange, select, true {Unesena grupa {groupTitle}, s {groupCount, plural, one {# opcijom} other {# optione/a}}. } other {}}{optionText}{isSelected, select, true {, izabranih} other {}}",
+        listboxLabel: "Predlozi",
+        selectedAnnouncement: "{optionText}, izabrano",
+    },
+    "sv-SE": {
+        buttonLabel: "Visa förslag",
+        countAnnouncement: "{optionCount, plural, one {# alternativ} other {# alternativ}} tillgängliga.",
+        focusAnnouncement: "{isGroupChange, select, true {Ingick i gruppen {groupTitle} med {groupCount, plural, one {# alternativ} other {# alternativ}}. } other {}}{optionText}{isSelected, select, true {, valda} other {}}",
+        listboxLabel: "Förslag",
+        selectedAnnouncement: "{optionText}, valda",
+    },
+    "tr-TR": {
+        buttonLabel: "Önerileri göster",
+        countAnnouncement: "{optionCount, plural, one {# seçenek} other {# seçenekler}} kullanılabilir.",
+        focusAnnouncement: "{isGroupChange, select, true {Girilen grup {groupTitle}, ile {groupCount, plural, one {# seçenek} other {# seçenekler}}. } other {}}{optionText}{isSelected, select, true {, seçildi} other {}}",
+        listboxLabel: "Öneriler",
+        selectedAnnouncement: "{optionText}, seçildi",
+    },
+    "uk-UA": {
+        buttonLabel: "Показати пропозиції",
+        countAnnouncement: "{optionCount, plural, one {# параметр} other {# параметри(-ів)}} доступно.",
+        focusAnnouncement: "{isGroupChange, select, true {Введена група {groupTitle}, з {groupCount, plural, one {# параметр} other {# параметри(-ів)}}. } other {}}{optionText}{isSelected, select, true {, вибрано} other {}}",
+        listboxLabel: "Пропозиції",
+        selectedAnnouncement: "{optionText}, вибрано",
+    },
+    "zh-CN": {
+        buttonLabel: "显示建议",
+        countAnnouncement: "有 {optionCount, plural, one {# 个选项} other {# 个选项}}可用。",
+        focusAnnouncement: "{isGroupChange, select, true {进入了 {groupTitle} 组，其中有 {groupCount, plural, one {# 个选项} other {# 个选项}}. } other {}}{optionText}{isSelected, select, true {, 已选择} other {}}",
+        listboxLabel: "建议",
+        selectedAnnouncement: "{optionText}, 已选择",
+    },
+    "zh-TW": {
+        buttonLabel: "顯示建議",
+        countAnnouncement: "{optionCount, plural, one {# 選項} other {# 選項}} 可用。",
+        focusAnnouncement: "{isGroupChange, select, true {輸入的群組 {groupTitle}, 有 {groupCount, plural, one {# 選項} other {# 選項}}. } other {}}{optionText}{isSelected, select, true {, 已選取} other {}}",
+        listboxLabel: "建議",
+        selectedAnnouncement: "{optionText}, 已選取",
+    },
+};

package/compare/behaviour.d.ts

@@ -0,0 +1,101 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type ControlledState } from "../interactions/controllable.js";
+export type CompareOrientation = "horizontal" | "vertical";
+/** Motion of the animated settle (embla units: `duration` in fixed steps, `friction` 0–1). */
+export interface CompareMotionOptions {
+    duration?: number;
+    friction?: number;
+}
+export interface CompareStateOptions {
+    /** The before share in percent (controlled): a plain value, a two-way Signal or an accessor. */
+    value?: number | Signal<number> | (() => number);
+    /** Initial value (uncontrolled). @default 50 */
+    defaultValue?: number;
+    /** Called with every new value (each pointer move, each key). */
+    onChange?: (value: number) => void;
+    /** Called once an interaction ends (pointer release, each key). */
+    onChangeEnd?: (value: number) => void;
+    /** @default "horizontal" */
+    orientation?: CompareOrientation;
+    /** Disables pointer and keyboard interaction (the handle stays focusable-off). */
+    isDisabled?: boolean | (() => boolean | undefined);
+    /** Arrow key step (percent). @default 1 */
+    step?: number;
+    /** PageUp / PageDown / Shift+Arrow step (percent). @default 10 */
+    pageStep?: number;
+    /** A press anywhere on the surface jumps the divider there and drags it. @default false */
+    dragAnywhere?: boolean;
+    /** Animated settle for keys / surface jumps; `false` jumps. @default true */
+    animation?: boolean | CompareMotionOptions;
+    /** Writing direction (horizontal: the start edge). @default "ltr" */
+    direction?: "ltr" | "rtl";
+    /** Locale of the default `aria-valuetext` (percent). @default "en-US" */
+    locale?: string;
+}
+export interface CompareState {
+    readonly value: ControlledState<number>;
+    /** Rendered position while a settle animates; `null` at rest (the value renders). */
+    readonly position: Signal<number | null>;
+    /** Whether a pointer drags the divider. */
+    readonly dragging: Signal<boolean>;
+    readonly orientation: CompareOrientation;
+    readonly direction: "ltr" | "rtl";
+    readonly isDisabled: boolean | (() => boolean | undefined) | undefined;
+    readonly step: number;
+    readonly pageStep: number;
+    readonly dragAnywhere: boolean;
+    readonly onChangeEnd: ((value: number) => void) | undefined;
+    readonly locale: string;
+    /** Settle motion (`duration` 0 = jump). */
+    readonly duration: number;
+    readonly friction: number;
+}
+/** Default settle duration (embla units): a quick, slightly soft glide. */
+export declare const COMPARE_DURATION = 20;
+/** Default settle friction (embla engine constant). */
+export declare const COMPARE_FRICTION = 0.68;
+/** `data-rk` of the handle: every key `compareKeyDown` handles (a cold key on a resumed page never scrolls). */
+export declare const COMPARE_KEYS = "ArrowLeft ArrowRight ArrowUp ArrowDown PageUp PageDown Home End";
+/** Compare state (`createCompareState`): the value + the settle position. */
+export declare function createCompareState(options?: CompareStateOptions): CompareState;
+/** The value (percent, clamped). Reads. */
+export declare function compareValue(state: CompareState): number;
+/** The rendered divider position (percent): the settle position while it animates, else the value. Reads. */
+export declare function comparePosition(state: CompareState): number;
+/** Whether the compare is disabled now (live accessors read). */
+export declare function isCompareDisabled(state: CompareState): boolean;
+/** Localized percent text of the value (`aria-valuetext`). Reads. */
+export declare function compareValueText(state: CompareState): string;
+/** Inline style of the root (behaviour-critical: stacking context for the layers, gestures) + `--rv-compare-position`. Reads. */
+export declare function compareRootStyle(state: CompareState): Record<string, string>;
+/** Inline style of the "after" layer: on top of the "before" layer, clipped to the end side of the divider. Reads. */
+export declare function compareAfterStyle(state: CompareState): Record<string, string>;
+/** Inline style of the handle: centred on the divider across the whole cross axis, no browser gestures. Reads. */
+export declare function compareHandleStyle(state: CompareState): Record<string, string>;
+/** The root element of a compare part. */
+export declare const compareRootOf: (el: Element | null | undefined) => HTMLElement | null;
+/** The value (percent) at a pointer position over `rect` (`raw`: not clamped to 0–100). */
+export declare function compareValueAt(state: CompareState, rect: {
+    left: number;
+    top: number;
+    right: number;
+    width: number;
+    height: number;
+}, x: number, y: number, raw?: boolean): number;
+/**
+ * Moves the divider to `value` (percent, clamped): commits it (`onChange` when it differs) and moves the rendered
+ * position — `"animate"`: the settle motion glides there (jumps without animation / under reduced motion); `"follow"`
+ * (a drag): 1:1, except that a settle still running is retargeted (no visual jump); `"jump"`: at once.
+ */
+export declare function compareSetValue(state: CompareState, value: number, mode?: "animate" | "follow" | "jump", el?: Element | null): void;
+/**
+ * pointerdown of the handle (`fromSurface` false) or the root (`true`: only with `dragAnywhere`, and not when the press
+ * started on the handle). Grabs the divider and follows the pointer until release.
+ */
+export declare function comparePointerDown(event: PointerEvent, state: CompareState, fromSurface: boolean): void;
+/** Ends a drag (pointer up / cancel; a move after the root left the document): listeners off, text selection restored, `onChangeEnd`. */
+export declare function compareDragEnd(state: CompareState): void;
+/** keydown of the handle (ARIA slider keys, see the header). */
+export declare function compareKeyDown(event: KeyboardEvent, state: CompareState): void;
+/** Stops the motion and any drag. The parts register no unmount hook (a cleanup effect would boot a resumed page at load); a drag whose root left the document ends on its next move. */
+export declare function compareDispose(state: CompareState): void;

package/compare/behaviour.js

@@ -0,0 +1,288 @@
+// Rivet-authored (no upstream: React Aria / React Aria Components / Angular CDK have no compare slider): before / after
+// comparison behaviour — two overlapped layers and a draggable divider that reveals one over the other. Composed from cdk
+// primitives: `controllable` (value / defaultValue / onChange), `../interactions/utils.ts` text-selection lock (RA
+// useMove), `../interactions/focus-visible.tsx` modality, `useLocale` direction (RTL) and the house motion
+// `../motion` (embla-carousel 8.6.0 physics, MIT, © David Jerleke) for the animated settle.
+// - Value = the share of the "before" layer in percent (0–100), measured from the start edge (left in LTR, right in RTL,
+//   top when vertical). The "after" layer sits on top and is clipped to the end side by an inline `clip-path: inset(…)`
+//   (behaviour-critical: inline, never keyed on a class).
+// - Pointer: a press on the handle grabs it where it was hit (no jump) and follows the pointer 1:1 (continuous value,
+//   2 decimals); with `dragAnywhere` a press on the surface jumps there (animated) and keeps following the pointer.
+//   `onChange` per move, `onChangeEnd` on release. Window listeners while dragging (pointermove / pointerup / cancel).
+// - Keyboard (the handle is an ARIA slider): Arrow keys ± `step` (Shift: `pageStep`), PageUp / PageDown ± `pageStep`,
+//   Home / End 0 / 100. Horizontal: ArrowRight / ArrowUp increase (RTL: ArrowLeft / ArrowUp, React Aria slider rules);
+//   vertical: the divider follows the arrows spatially (ArrowDown / ArrowRight increase: the value grows downward).
+//   Keyed values snap to `step`; `onChange` + `onChangeEnd` once per key that moves the divider.
+// - Motion: keys and surface jumps commit the value at once and animate the rendered position (`position`, `null` at
+//   rest) with `Motion1D` (`animation` tunes duration / friction, `false` = jump); a drag is 1:1 (a running settle is
+//   retargeted, so a press-and-drag on the surface stays continuous). `prefers-reduced-motion: reduce` always jumps.
+// - State = plain signals + JSON (resumable): the runtime (Motion1D, drag) lives in a module WeakMap keyed by the state,
+//   created by the first interaction — nothing runs before it.
+import { signal, untrack } from "@rivetjs/reactivity";
+import { controllable, controlledValue, setControlledValue } from "../interactions/controllable.js";
+import { noteModality } from "../interactions/focus-visible.jsx";
+import { disableTextSelection, read, restoreTextSelection } from "../interactions/utils.js";
+import { Motion1D } from "../motion/index.js";
+/** Default settle duration (embla units): a quick, slightly soft glide. */
+export const COMPARE_DURATION = 20;
+/** Default settle friction (embla engine constant). */
+export const COMPARE_FRICTION = 0.68;
+/** `data-rk` of the handle: every key `compareKeyDown` handles (a cold key on a resumed page never scrolls). */
+export const COMPARE_KEYS = "ArrowLeft ArrowRight ArrowUp ArrowDown PageUp PageDown Home End";
+const clamp = (v) => (v < 0 ? 0 : v > 100 ? 100 : v);
+const round2 = (v) => Math.round(v * 100) / 100;
+/** Compare state (`createCompareState`): the value + the settle position. */
+export function createCompareState(options = {}) {
+    const animation = options.animation ?? true;
+    const motion = typeof animation === "object" ? animation : {};
+    return {
+        value: controllable(options.value, clamp(options.defaultValue ?? 50), options.onChange),
+        position: signal(null),
+        dragging: signal(false),
+        orientation: options.orientation === "vertical" ? "vertical" : "horizontal",
+        direction: options.direction === "rtl" ? "rtl" : "ltr",
+        isDisabled: options.isDisabled,
+        step: options.step && options.step > 0 ? options.step : 1,
+        pageStep: options.pageStep && options.pageStep > 0 ? options.pageStep : 10,
+        dragAnywhere: !!options.dragAnywhere,
+        onChangeEnd: options.onChangeEnd,
+        locale: options.locale ?? "en-US",
+        duration: animation === false ? 0 : (motion.duration ?? COMPARE_DURATION),
+        friction: motion.friction ?? COMPARE_FRICTION,
+    };
+}
+/** The value (percent, clamped). Reads. */
+export function compareValue(state) {
+    return clamp(Number(state.value.value()) || 0);
+}
+/** The rendered divider position (percent): the settle position while it animates, else the value. Reads. */
+export function comparePosition(state) {
+    return state.position() ?? compareValue(state);
+}
+/** Whether the compare is disabled now (live accessors read). */
+export function isCompareDisabled(state) {
+    return !!read(state.isDisabled);
+}
+/** Localized percent text of the value (`aria-valuetext`). Reads. */
+export function compareValueText(state) {
+    const value = Math.round(compareValue(state));
+    try {
+        return new Intl.NumberFormat(state.locale, { style: "percent", maximumFractionDigits: 0 }).format(value / 100);
+    }
+    catch {
+        return `${value}%`;
+    }
+}
+const pct = (v) => `${+v.toFixed(3)}%`;
+/** Inline style of the root (behaviour-critical: stacking context for the layers, gestures) + `--rv-compare-position`. Reads. */
+export function compareRootStyle(state) {
+    const style = { position: "relative", overflow: "hidden", "--rv-compare-position": pct(comparePosition(state)) };
+    if (state.dragAnywhere)
+        style["touch-action"] = state.orientation === "vertical" ? "pan-x" : "pan-y";
+    return style;
+}
+/** Inline style of the "after" layer: on top of the "before" layer, clipped to the end side of the divider. Reads. */
+export function compareAfterStyle(state) {
+    const p = pct(comparePosition(state));
+    const inset = state.orientation === "vertical" ? `inset(${p} 0 0 0)` : state.direction === "rtl" ? `inset(0 ${p} 0 0)` : `inset(0 0 0 ${p})`;
+    return { position: "absolute", inset: "0", "clip-path": inset, "-webkit-clip-path": inset };
+}
+/** Inline style of the handle: centred on the divider across the whole cross axis, no browser gestures. Reads. */
+export function compareHandleStyle(state) {
+    const p = pct(comparePosition(state));
+    if (state.orientation === "vertical")
+        return { position: "absolute", left: "0", right: "0", top: p, transform: "translateY(-50%)", "touch-action": "none" };
+    return state.direction === "rtl"
+        ? { position: "absolute", top: "0", bottom: "0", right: p, transform: "translateX(50%)", "touch-action": "none" }
+        : { position: "absolute", top: "0", bottom: "0", left: p, transform: "translateX(-50%)", "touch-action": "none" };
+}
+const runtimes = new WeakMap();
+const runtimeOf = (state) => {
+    let rt = runtimes.get(state);
+    if (!rt)
+        runtimes.set(state, (rt = { motion: undefined, drag: null }));
+    return rt;
+};
+const reducedMotion = (el) => {
+    const view = el?.ownerDocument?.defaultView ?? (typeof window === "undefined" ? undefined : window);
+    return !!view?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+};
+/** The root element of a compare part. */
+export const compareRootOf = (el) => el?.closest("[data-rv-compare]") ?? null;
+/** The value (percent) at a pointer position over `rect` (`raw`: not clamped to 0–100). */
+export function compareValueAt(state, rect, x, y, raw = false) {
+    const size = state.orientation === "vertical" ? rect.height : rect.width;
+    if (!size)
+        return 0;
+    const along = state.orientation === "vertical" ? y - rect.top : state.direction === "rtl" ? rect.right - x : x - rect.left;
+    const value = (along / size) * 100;
+    return raw ? value : clamp(value);
+}
+/**
+ * Moves the divider to `value` (percent, clamped): commits it (`onChange` when it differs) and moves the rendered
+ * position — `"animate"`: the settle motion glides there (jumps without animation / under reduced motion); `"follow"`
+ * (a drag): 1:1, except that a settle still running is retargeted (no visual jump); `"jump"`: at once.
+ */
+export function compareSetValue(state, value, mode = "jump", el) {
+    const next = round2(clamp(value));
+    const from = untrack(() => comparePosition(state));
+    setControlledValue(state.value, next);
+    const rt = runtimeOf(state);
+    const moving = untrack(state.position) !== null;
+    const still = !state.duration || reducedMotion(el);
+    if (mode === "follow" && moving && rt.motion && !still)
+        return rt.motion.to(next);
+    if (mode !== "animate" || still) {
+        if (moving) {
+            rt.motion?.stop();
+            state.position.set(null);
+        }
+        return;
+    }
+    if (Math.abs(from - next) < 0.001 && !moving)
+        return;
+    const motion = (rt.motion ??= Motion1D({
+        value: from,
+        duration: state.duration,
+        friction: state.friction,
+        render: (v) => state.position.set(v),
+        onSettle: () => state.position.set(null),
+    }));
+    if (!moving)
+        motion.to(from, true);
+    state.position.set(from);
+    motion.to(next);
+}
+const end = (state) => state.onChangeEnd?.(controlledValue(state.value));
+/**
+ * pointerdown of the handle (`fromSurface` false) or the root (`true`: only with `dragAnywhere`, and not when the press
+ * started on the handle). Grabs the divider and follows the pointer until release.
+ */
+export function comparePointerDown(event, state, fromSurface) {
+    if (isCompareDisabled(state))
+        return;
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+    const target = event.target;
+    if (fromSurface && (!state.dragAnywhere || target?.closest?.("[data-rv-compare-handle]")))
+        return;
+    const root = compareRootOf(event.currentTarget);
+    if (!root)
+        return;
+    const rt = runtimeOf(state);
+    if (rt.drag)
+        return;
+    noteModality(event);
+    event.preventDefault();
+    const handle = root.querySelector("[data-rv-compare-handle]");
+    handle?.focus({ preventScroll: true });
+    const rect = root.getBoundingClientRect();
+    const at = compareValueAt(state, rect, event.clientX, event.clientY);
+    let offset = 0;
+    if (fromSurface)
+        compareSetValue(state, at, "animate", root);
+    else
+        offset = untrack(() => compareValue(state)) - at;
+    const win = root.ownerDocument.defaultView ?? window;
+    const id = event.pointerId;
+    const onMove = (e) => {
+        if (e.pointerId !== id || !rt.drag)
+            return;
+        // No unmount hook (a cleanup effect would boot a resumed page at load): a drag whose root left the document ends here.
+        if (!root.isConnected)
+            return compareDispose(state);
+        compareSetValue(state, compareValueAt(state, rt.drag.rect, e.clientX, e.clientY, true) + rt.drag.offset, "follow", root);
+    };
+    const onUp = (e) => {
+        if (e.pointerId !== id)
+            return;
+        compareDragEnd(state);
+    };
+    win.addEventListener("pointermove", onMove);
+    win.addEventListener("pointerup", onUp);
+    win.addEventListener("pointercancel", onUp);
+    rt.drag = {
+        id,
+        offset,
+        rect,
+        root,
+        detach: () => {
+            win.removeEventListener("pointermove", onMove);
+            win.removeEventListener("pointerup", onUp);
+            win.removeEventListener("pointercancel", onUp);
+        },
+    };
+    disableTextSelection(root);
+    state.dragging.set(true);
+}
+/** Ends a drag (pointer up / cancel; a move after the root left the document): listeners off, text selection restored, `onChangeEnd`. */
+export function compareDragEnd(state) {
+    const rt = runtimes.get(state);
+    const drag = rt?.drag;
+    if (!rt || !drag)
+        return;
+    rt.drag = null;
+    drag.detach();
+    restoreTextSelection(drag.root);
+    state.dragging.set(false);
+    end(state);
+}
+/** keydown of the handle (ARIA slider keys, see the header). */
+export function compareKeyDown(event, state) {
+    if (isCompareDisabled(state))
+        return;
+    if (event.altKey || event.ctrlKey || event.metaKey)
+        return;
+    const vertical = state.orientation === "vertical";
+    const rtl = state.direction === "rtl" && !vertical;
+    const small = event.shiftKey ? state.pageStep : state.step;
+    const current = untrack(() => compareValue(state));
+    let next;
+    switch (event.key) {
+        case "ArrowRight":
+            next = current + (rtl ? -small : small);
+            break;
+        case "ArrowLeft":
+            next = current + (rtl ? small : -small);
+            break;
+        case "ArrowUp":
+            next = current + (vertical ? -small : small);
+            break;
+        case "ArrowDown":
+            next = current + (vertical ? small : -small);
+            break;
+        case "PageUp":
+            next = current + (vertical ? -state.pageStep : state.pageStep);
+            break;
+        case "PageDown":
+            next = current + (vertical ? state.pageStep : -state.pageStep);
+            break;
+        case "Home":
+            next = 0;
+            break;
+        case "End":
+            next = 100;
+            break;
+        default:
+            return;
+    }
+    event.preventDefault();
+    noteModality(event);
+    if (event.key !== "Home" && event.key !== "End") {
+        // Keyed values land on the `step` grid (a dragged 50.37 + 1 → 51, + 10 → 60).
+        const step = state.step;
+        next = next > current ? Math.floor(next / step + 1e-9) * step : Math.ceil(next / step - 1e-9) * step;
+    }
+    if (round2(clamp(next)) === current)
+        return;
+    compareSetValue(state, next, "animate", event.currentTarget);
+    end(state);
+}
+/** Stops the motion and any drag. The parts register no unmount hook (a cleanup effect would boot a resumed page at load); a drag whose root left the document ends on its next move. */
+export function compareDispose(state) {
+    compareDragEnd(state);
+    const rt = runtimes.get(state);
+    rt?.motion?.stop();
+    if (untrack(state.position) !== null)
+        state.position.set(null);
+}