@haruhimemoe/ui 0.2.0 → 0.4.0

package/dist/components/filters/ChoiceChips.js

@@ -0,0 +1,31 @@
+/**
+ * @file src/components/filters/ChoiceChips.tsx
+ * @desc One choice from a few, as a real radio group drawn as chips (the pools status and type
+ *       filters): native radio inputs under one name, so Tab reaches the checked chip, the arrow
+ *       keys move and pick, and screen readers hear "radio, 1 of 3, checked". Same look as Chip,
+ *       with the focus ring on the chip, not the hidden input. A labelled fieldset like ChipGroup.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../../utils/cx.js";
+import { CHIP, CHIP_OFF, CHIP_ON, CHIP_UNAVAILABLE } from "./chipStyles.js";
+import { GroupFrame } from "./GroupFrame.js";
+// A label around a hidden radio: it shows the input's focus and disabled state itself.
+const LABEL = "cursor-pointer has-focus-visible:outline-2 has-focus-visible:outline-h1 has-focus-visible:outline-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-40";
+/**
+ * @function ChoiceChips
+ * @param props {ChoiceChipsProps} label, options, the picked value and a change handler, plus
+ *        native fieldset props (`disabled` turns off every chip). Render it from client code.
+ * @returns {JSX.Element} a `<fieldset>` named by its label, with one radio chip per option
+ */
+export function ChoiceChips({ options, value, onChange, name, ...props }) {
+    const generated = useId();
+    return (_jsx(GroupFrame, { ...props, children: _jsx("div", { className: "flex flex-wrap items-center gap-1", children: options.map((option) => {
+                const on = option.value === value;
+                return (_jsxs("label", { className: cx(CHIP, LABEL, on ? CHIP_ON : CHIP_OFF, !on && !option.disabled && "hover:bg-b2", option.disabled && CHIP_UNAVAILABLE), children: [_jsx("input", { type: "radio", name: name ?? generated, value: option.value, checked: on, disabled: option.disabled, onChange: () => onChange(option.value), className: "sr-only" }), option.label] }, option.value));
+            }) }) }));
+}

package/dist/components/filters/FilterPanel.d.ts

@@ -1,19 +1,20 @@
 /**
  * @file src/components/filters/FilterPanel.tsx
  * @desc Filter panel (osu! beatmap listing style): a titled card of FilterRows with a live result
- *       count and a "Clear filters" link. On phones the rows fold away behind a disclosure button;
- *       from `sm` up they are always shown.
+ *       count and a "Clear filters" button. On phones the rows fold away behind a disclosure
+ *       button; from `sm` up they are always shown.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
+import { type HeadingLevel } from "../basics/cardStyles.js";
 /** Every native `<section>` prop except `title`, plus the panel's title, count and clear action. */
 export type FilterPanelProps = Omit<ComponentProps<"section">, "title"> & {
     /** The panel heading; it also names the panel and its phone disclosure button. */
     title: ReactNode;
     /** Heading level for the title (default 2). */
-    headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+    headingLevel?: HeadingLevel | undefined;
     /** Shown in an `<output aria-live="polite">`, so screen readers hear each new count. */
     resultCount?: ReactNode;
     /** True while any filter is set; shows the clear button. */

package/dist/components/filters/FilterPanel.js

@@ -1,16 +1,17 @@
 /**
  * @file src/components/filters/FilterPanel.tsx
  * @desc Filter panel (osu! beatmap listing style): a titled card of FilterRows with a live result
- *       count and a "Clear filters" link. On phones the rows fold away behind a disclosure button;
- *       from `sm` up they are always shown.
+ *       count and a "Clear filters" button. On phones the rows fold away behind a disclosure
+ *       button; from `sm` up they are always shown.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../../utils/cx.js";
+import { CARD, CARD_HEADING } from "../basics/cardStyles.js";
 /**
  * @function FilterPanel
  * @param props {FilterPanelProps} title, FilterRows as children, an optional result count and
@@ -38,7 +39,7 @@ export function FilterPanel({ title, headingLevel = 2, resultCount, active = fal
         cleared.current = false;
     }, [showClear]);
     const Heading = `h${headingLevel}`;
-    return (_jsxs("section", { "aria-labelledby": titleId, className: cx("flex flex-col gap-4 rounded-[10px] bg-b4 p-5 text-c2", className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Heading, { id: titleId, ref: headingRef, tabIndex: -1, className: "font-bold text-c1 text-lg", children: title }), _jsx("button", { type: "button", "aria-labelledby": titleId, "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen(!open), className: "inline-flex size-8 items-center justify-center rounded-full text-c2 transition-colors hover:bg-b3 hover:text-c1 sm:hidden", children: _jsx("span", { "aria-hidden": "true", children: open ? "▴" : "▾" }) })] }), _jsx("output", { "aria-live": "polite", className: "text-c3 text-sm", children: resultCount }), showClear ? (_jsx("button", { type: "button", onClick: () => {
+    return (_jsxs("section", { "aria-labelledby": titleId, className: cx("flex flex-col gap-4", CARD, className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Heading, { id: titleId, ref: headingRef, tabIndex: -1, className: CARD_HEADING, children: title }), _jsx("button", { type: "button", "aria-labelledby": titleId, "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen(!open), className: "inline-flex size-8 items-center justify-center rounded-full text-c2 transition-colors hover:bg-b3 hover:text-c1 sm:hidden", children: _jsx("span", { "aria-hidden": "true", children: open ? "▴" : "▾" }) })] }), _jsx("output", { "aria-live": "polite", className: "text-c3 text-sm", children: resultCount }), showClear ? (_jsx("button", { type: "button", onClick: () => {
                             cleared.current = true;
                             onClear();
                         }, className: "ml-auto font-bold text-h1 text-sm transition-colors hover:text-c1", children: clearLabel })) : null] }), _jsx("div", { id: bodyId, className: cx("flex-col gap-3", open ? "flex" : "hidden sm:flex"), children: children })] }));

package/dist/components/filters/FilterRow.d.ts

@@ -4,7 +4,7 @@
  *       the left and the controls on the right from `sm` up, stacked on phones.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 /** Every native `<fieldset>` prop (including `ref`), plus the row's label. */

package/dist/components/filters/FilterRow.js

@@ -5,10 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *       the left and the controls on the right from `sm` up, stacked on phones.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { useId } from "react";
 import { cx } from "../../utils/cx.js";
+import { FIELD_LABEL } from "../forms/fieldStyles.js";
 /**
  * @function FilterRow
  * @param props {FilterRowProps} the label, the row's controls as children, and native fieldset
@@ -18,5 +19,5 @@ import { cx } from "../../utils/cx.js";
  */
 export function FilterRow({ label, className, children, ...props }) {
     const labelId = useId();
-    return (_jsxs("fieldset", { "aria-labelledby": labelId, className: cx("flex flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-4", className), ...props, children: [_jsx("span", { id: labelId, className: "shrink-0 font-bold text-c3 text-sm sm:w-28", children: label }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+    return (_jsxs("fieldset", { "aria-labelledby": labelId, className: cx("flex flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-4", className), ...props, children: [_jsx("span", { id: labelId, className: `shrink-0 sm:w-28 ${FIELD_LABEL}`, children: label }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
 }

package/dist/components/filters/GroupFrame.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file src/components/filters/GroupFrame.tsx
+ * @desc The labelled fieldset that ChipGroup, ChoiceChips and RangeSlider share (internal): a
+ *       `<fieldset>` named by a bold label, or, with `hideLabel`, a bare fieldset with role none
+ *       that leaves the name to a surrounding FilterRow. Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** Every native `<fieldset>` prop, plus the group's label and whether a FilterRow names it. */
+export type GroupFrameProps = ComponentProps<"fieldset"> & {
+    /** Names the group (`aria-labelledby`), shown above the controls. */
+    label: ReactNode;
+    /**
+     * Leave the name to a surrounding FilterRow: no label shows, and the fieldset is not a group
+     * of its own (role none), so screen readers hear the row's name once.
+     */
+    hideLabel?: boolean | undefined;
+};
+/**
+ * @function GroupFrame
+ * @param props {GroupFrameProps} the label, hideLabel, the controls as children, and native
+ *        fieldset props (`className` merges last)
+ * @returns {JSX.Element} a `<fieldset>` labelled by its label, or with role none and no label
+ */
+export declare function GroupFrame({ label, hideLabel, className, children, ...props }: GroupFrameProps): import("react").JSX.Element;

package/dist/components/filters/GroupFrame.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/filters/GroupFrame.tsx
+ * @desc The labelled fieldset that ChipGroup, ChoiceChips and RangeSlider share (internal): a
+ *       `<fieldset>` named by a bold label, or, with `hideLabel`, a bare fieldset with role none
+ *       that leaves the name to a surrounding FilterRow. Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { useId } from "react";
+import { cx } from "../../utils/cx.js";
+import { FIELD_LABEL } from "../forms/fieldStyles.js";
+/**
+ * @function GroupFrame
+ * @param props {GroupFrameProps} the label, hideLabel, the controls as children, and native
+ *        fieldset props (`className` merges last)
+ * @returns {JSX.Element} a `<fieldset>` labelled by its label, or with role none and no label
+ */
+export function GroupFrame({ label, hideLabel = false, className, children, ...props }) {
+    const labelId = useId();
+    return (_jsxs("fieldset", { 
+        // Inside a FilterRow (hideLabel), the row's fieldset is the group. A second group with the
+        // same name would be read twice. The fieldset stays, so `disabled` still reaches every
+        // control inside it.
+        role: hideLabel ? "none" : undefined, "aria-labelledby": hideLabel ? undefined : labelId, className: cx("flex flex-col gap-2", className), ...props, children: [hideLabel ? null : (_jsx("span", { id: labelId, className: FIELD_LABEL, children: label })), children] }));
+}

package/dist/components/filters/RangeBox.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file src/components/filters/RangeBox.tsx
+ * @desc One of RangeSlider's two edit boxes (internal): a short text field on the shared field
+ *       look that holds what is being typed, commits it on blur or Enter, and puts the value
+ *       back on Escape.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type HTMLAttributes } from "react";
+/** The box's name, the value it shows, its keyboard and state, and what to do with typing. */
+export type RangeBoxProps = {
+    /** The accessible name ("Minimum Star rating"). */
+    label: string;
+    /** The current value as display text, shown while nothing is being typed. */
+    text: string;
+    inputMode: HTMLAttributes<HTMLInputElement>["inputMode"];
+    disabled: boolean;
+    /** Gets the typed text on blur or Enter, when there is any. */
+    onCommit: (draft: string) => void;
+};
+/**
+ * @function RangeBox
+ * @param props {RangeBoxProps} the name, the shown text, the input mode, disabled, and the
+ *        commit handler
+ * @returns {JSX.Element} a text `<input>` that shows the value, or the typing in progress
+ */
+export declare function RangeBox({ label, text, inputMode, disabled, onCommit }: RangeBoxProps): import("react").JSX.Element;

package/dist/components/filters/RangeBox.js

@@ -0,0 +1,41 @@
+/**
+ * @file src/components/filters/RangeBox.tsx
+ * @desc One of RangeSlider's two edit boxes (internal): a short text field on the shared field
+ *       look that holds what is being typed, commits it on blur or Enter, and puts the value
+ *       back on Escape.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { fieldClasses } from "../forms/fieldStyles.js";
+// The field look, sized for a short value. The slider's group dims itself when disabled, so the
+// box keeps full opacity instead of dimming twice.
+const BOX = fieldClasses("w-18 shrink-0 px-2 py-1 text-center tabular-nums disabled:cursor-not-allowed disabled:opacity-100");
+/**
+ * @function RangeBox
+ * @param props {RangeBoxProps} the name, the shown text, the input mode, disabled, and the
+ *        commit handler
+ * @returns {JSX.Element} a text `<input>` that shows the value, or the typing in progress
+ */
+export function RangeBox({ label, text, inputMode, disabled, onCommit }) {
+    const [draft, setDraft] = useState(null);
+    const commit = () => {
+        if (draft === null)
+            return;
+        setDraft(null);
+        onCommit(draft);
+    };
+    return (_jsx("input", { type: "text", inputMode: inputMode, autoComplete: "off", "aria-label": label, disabled: disabled, value: draft ?? text, onChange: (event) => setDraft(event.currentTarget.value), onBlur: commit, onKeyDown: (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                commit();
+            }
+            else if (event.key === "Escape" && draft !== null) {
+                event.preventDefault();
+                setDraft(null);
+            }
+        }, className: BOX }));
+}

package/dist/components/filters/RangeSlider.d.ts

@@ -3,26 +3,25 @@
  * @desc Two-thumb range slider with an editable box at each end (star rating, length, BPM). Two
  *       native range inputs share one track; the thumbs can't cross. With `openEnded`, the top
  *       end at `max` means "no upper limit": it shows "max+" and reports `null`. When both thumbs
- *       sit on one value, a drag moves whichever end can go the way the pointer goes.
+ *       sit on one value, a drag moves whichever end can go the way the pointer goes. The math
+ *       lives in rangeMath.ts and the boxes in RangeBox.tsx.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import { type ComponentProps, type HTMLAttributes } from "react";
-/** A range as `[low, high]`. `high` is `null` for an open top end (no upper limit). */
-export type RangeSliderValue = [number, number | null];
-/** Every native `<fieldset>` prop except `onChange` and `children`, plus the range. */
-export type RangeSliderProps = Omit<ComponentProps<"fieldset">, "onChange" | "children" | "inputMode"> & {
+import type { HTMLAttributes } from "react";
+import { type GroupFrameProps } from "./GroupFrame.js";
+import { type RangeSliderValue } from "./rangeMath.js";
+export type { RangeSliderValue };
+/** Every native `<fieldset>` prop except `onChange`, `children` and `inputMode`, plus the range. */
+export type RangeSliderProps = Omit<GroupFrameProps, "onChange" | "children" | "inputMode"> & {
     /** Names the group, and the ends as "Minimum <label>" and "Maximum <label>". */
     label: string;
-    /**
-     * Leave the group name to a surrounding FilterRow: no label shows, and the fieldset is not a
-     * group of its own (role none). The ends are still named from `label`.
-     */
-    hideLabel?: boolean | undefined;
+    /** The low bound. If it is above `max`, the two swap. */
     min: number;
+    /** The high bound. */
     max: number;
-    /** Step between values (default 1). Typed values snap to it. */
+    /** Step between values (default 1; 0, negative or NaN also mean 1). Typed values snap to it. */
     step?: number | undefined;
     /** The current range. A `null` top end means open (shown at `max`). */
     value: Readonly<RangeSliderValue>;
@@ -59,4 +58,4 @@ export type RangeSliderProps = Omit<ComponentProps<"fieldset">, "onChange" | "ch
  *          Page Up/Down ten steps, Home/End as far as it can go. The boxes commit on blur or
  *          Enter; Escape puts the value back.
  */
-export declare function RangeSlider({ label, hideLabel, min, max, step, value, onChange, format, parse, inputMode, openEnded, minLabel, maxLabel, disabled, className, ...props }: RangeSliderProps): import("react").JSX.Element;
+export declare function RangeSlider({ label, min: rawMin, max: rawMax, step: rawStep, value, onChange, format, parse, inputMode, openEnded, minLabel, maxLabel, disabled, className, ...props }: RangeSliderProps): import("react").JSX.Element;

package/dist/components/filters/RangeSlider.js

@@ -3,26 +3,19 @@
  * @desc Two-thumb range slider with an editable box at each end (star rating, length, BPM). Two
  *       native range inputs share one track; the thumbs can't cross. With `openEnded`, the top
  *       end at `max` means "no upper limit": it shows "max+" and reports `null`. When both thumbs
- *       sit on one value, a drag moves whichever end can go the way the pointer goes.
+ *       sit on one value, a drag moves whichever end can go the way the pointer goes. The math
+ *       lives in rangeMath.ts and the boxes in RangeBox.tsx.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState, } from "react";
+import { useRef } from "react";
 import { cx } from "../../utils/cx.js";
-const decimalsOf = (n) => {
-    const text = String(n);
-    const dot = text.indexOf(".");
-    return dot === -1 ? 0 : text.length - dot - 1;
-};
-const clamp = (n, low, high) => Math.min(Math.max(n, low), high);
-// A comma reads as the decimal point: comma-locale keypads (de, fr, pl, pt-BR, ru) type "5,5".
-const defaultParse = (text) => {
-    const n = Number(text.replace(",", "."));
-    return Number.isFinite(n) ? n : null;
-};
+import { GroupFrame } from "./GroupFrame.js";
+import { RangeBox } from "./RangeBox.js";
+import { defaultParse, dragEnd, nextRange, normalizeRange, percent, rangeBounds, readDraft, thumbTarget, } from "./rangeMath.js";
 // Native range inputs, stacked on one track. Only the thumbs take the pointer, so either thumb
 // can be dragged wherever they sit. The focus ring goes on the thumb, not the full-width input:
 // solid h1, so it clears 3:1 on the panel. Forced-colors mode drops box-shadow rings, so the
@@ -31,9 +24,6 @@ const RANGE = "pointer-events-none absolute inset-x-0 top-1/2 h-4 w-full -transl
     "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-h1 [&::-webkit-slider-thumb]:bg-c1 " +
     "[&::-moz-range-track]:bg-transparent [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-h1 [&::-moz-range-thumb]:bg-c1 " +
     "focus-visible:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-h1 focus-visible:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-h1";
-// The field look (border b3 on b6, h1 border on focus), sized for a short value. The group dims
-// itself when disabled, so the boxes do not dim twice.
-const BOX = "w-18 shrink-0 rounded-md border border-b3 bg-b6 px-2 py-1 text-center text-c1 text-sm tabular-nums placeholder:text-c4 focus-visible:border-h1 focus-visible:outline-hidden disabled:cursor-not-allowed";
 /**
  * @function RangeSlider
  * @param props {RangeSliderProps} label, bounds, step, the current range and a change handler,
@@ -44,78 +34,26 @@ const BOX = "w-18 shrink-0 rounded-md border border-b3 bg-b6 px-2 py-1 text-cent
  *          Page Up/Down ten steps, Home/End as far as it can go. The boxes commit on blur or
  *          Enter; Escape puts the value back.
  */
-export function RangeSlider({ label, hideLabel = false, min, max, step = 1, value, onChange, format = String, parse = defaultParse, inputMode = parse === defaultParse ? "decimal" : "text", openEnded = false, minLabel = `Minimum ${label}`, maxLabel = `Maximum ${label}`, disabled = false, className, ...props }) {
-    const labelId = useId();
-    const [drafts, setDrafts] = useState({ low: null, high: null });
+export function RangeSlider({ label, min: rawMin, max: rawMax, step: rawStep = 1, value, onChange, format = String, parse = defaultParse, inputMode = parse === defaultParse ? "decimal" : "text", openEnded = false, minLabel = `Minimum ${label}`, maxLabel = `Maximum ${label}`, disabled = false, className, ...props }) {
     // The pointer drag in progress, and the end it moves (picked on its first change).
     const drag = useRef(null);
-    // Normalize what came in (it may come from a URL): inside the bounds, low <= high. A NaN or
-    // infinite end means no limit on that end, like an empty box.
-    const low = Number.isFinite(value[0]) ? clamp(value[0], min, max) : min;
-    const top = value[1] !== null && Number.isFinite(value[1]) ? value[1] : null;
-    const highOpen = openEnded && (top === null || top >= max);
-    const high = top === null ? max : clamp(top, low, max);
-    const highOut = highOpen ? null : high;
-    const decimals = Math.max(decimalsOf(step), decimalsOf(min));
-    const snap = (n) => Number((min + Math.round((n - min) / step) * step).toFixed(decimals));
-    const percent = (n) => (max === min ? 0 : ((n - min) / (max - min)) * 100);
+    const bounds = rangeBounds(rawMin, rawMax, rawStep);
+    const { min, max, step } = bounds;
+    const state = normalizeRange(value, bounds, openEnded);
+    const { low, high, highOpen } = state;
     const openText = `${format(max)}+`;
-    const text = {
-        low: format(low),
-        high: highOpen ? openText : format(high),
-    };
     const commit = (end, n) => {
-        if (end === "low") {
-            const next = clamp(snap(n), min, high);
-            if (next !== low)
-                onChange([next, highOut]);
-            return;
-        }
-        const snapped = clamp(snap(n), low, max);
-        const next = openEnded && (n >= max || snapped >= max) ? null : snapped;
-        if (next !== highOut)
-            onChange([low, next]);
+        const next = nextRange(end, n, state, bounds, openEnded);
+        if (next)
+            onChange(next);
     };
-    const setDraft = (end, draft) => setDrafts((current) => ({ ...current, [end]: draft }));
-    const commitDraft = (end) => {
-        const draft = drafts[end];
-        if (draft === null)
-            return;
-        setDraft(end, null);
-        const trimmed = draft.trim().replace(/\+$/, "").trim();
-        // An empty box means no limit on that end.
-        if (trimmed === "") {
-            commit(end, end === "low" ? min : max);
-            return;
-        }
-        const n = parse(trimmed);
-        if (n !== null && Number.isFinite(n))
+    const commitDraft = (end) => (draft) => {
+        const n = readDraft(draft, end, bounds, parse);
+        if (n !== null)
             commit(end, n);
     };
-    const onBoxKeyDown = (end) => (event) => {
-        if (event.key === "Enter") {
-            event.preventDefault();
-            commitDraft(end);
-        }
-        else if (event.key === "Escape" && drafts[end] !== null) {
-            event.preventDefault();
-            setDraft(end, null);
-        }
-    };
     const onThumbKeyDown = (end) => (event) => {
-        const current = end === "low" ? low : high;
-        const big = step * 10;
-        const moves = {
-            ArrowLeft: current - step,
-            ArrowDown: current - step,
-            ArrowRight: current + step,
-            ArrowUp: current + step,
-            PageDown: current - big,
-            PageUp: current + big,
-            Home: min,
-            End: max,
-        };
-        const next = moves[event.key];
+        const next = thumbTarget(event.key, end === "low" ? low : high, bounds);
         if (next === undefined)
             return;
         event.preventDefault();
@@ -131,31 +69,30 @@ export function RangeSlider({ label, hideLabel = false, min, max, step = 1, valu
         window.addEventListener("pointerup", done);
         window.addEventListener("pointercancel", done);
     };
-    // With both thumbs on one value, only the top one can be grabbed, and it can only move one way.
-    // So a drag's first move picks the end: toward the other thumb's side, the other end moves.
-    // The drag keeps that end until the pointer lifts. Changes without a pointer (assistive tech
-    // stepping a slider) always move their own end.
+    // A drag keeps the end its first move picked until the pointer lifts. Changes without a
+    // pointer (assistive tech stepping a slider) always move their own end.
     const onThumbChange = (end) => (event) => {
         const n = Number(event.currentTarget.value);
         const gesture = drag.current;
-        if (gesture && gesture.end === null) {
-            const parked = low === high;
-            gesture.end =
-                parked && end === "high" && n < low
-                    ? "low"
-                    : parked && end === "low" && n > high
-                        ? "high"
-                        : end;
-        }
+        if (gesture && gesture.end === null)
+            gesture.end = dragEnd(end, n, state);
         commit(gesture?.end ?? end, n);
     };
-    const box = (end) => (_jsx("input", { type: "text", inputMode: inputMode, autoComplete: "off", "aria-label": end === "low" ? minLabel : maxLabel, disabled: disabled, value: drafts[end] ?? text[end], onChange: (event) => setDraft(end, event.currentTarget.value), onBlur: () => commitDraft(end), onKeyDown: onBoxKeyDown(end), className: BOX }));
-    const lowPercent = percent(low);
-    const highPercent = highOpen ? 100 : percent(high);
-    return (_jsxs("fieldset", { 
-        // Inside a FilterRow (hideLabel), the row's fieldset is the group; see ChipGroup.
-        role: hideLabel ? "none" : undefined, "aria-labelledby": hideLabel ? undefined : labelId, disabled: disabled, className: cx("flex flex-col gap-2 disabled:opacity-50", className), ...props, children: [hideLabel ? null : (_jsx("span", { id: labelId, className: "font-bold text-c3 text-sm", children: label })), _jsxs("div", { className: "flex items-center gap-3", children: [box("low"), _jsxs("div", { className: "relative h-5 min-w-0 flex-1", children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-b3" }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-x-2 top-1/2 h-1.5 -translate-y-1/2", children: _jsx("div", { "data-range-fill": "", className: "absolute inset-y-0 rounded-full bg-h1 forced-colors:bg-[Highlight]", style: { left: `${lowPercent}%`, right: `${100 - highPercent}%` } }) }), _jsx("input", { type: "range", "aria-label": minLabel, "aria-valuetext": format(low), min: min, max: max, step: step, value: low, disabled: disabled, onChange: onThumbChange("low"), onKeyDown: onThumbKeyDown("low"), onPointerDown: onThumbPointerDown, 
-                                // Past the middle, the low thumb sits on top, so two thumbs parked at the top end can
-                                // still be pulled apart.
-                                className: cx(RANGE, lowPercent > 50 && "z-10") }), _jsx("input", { type: "range", "aria-label": maxLabel, "aria-valuetext": highOpen ? openText : format(high), min: min, max: max, step: step, value: high, disabled: disabled, onChange: onThumbChange("high"), onKeyDown: onThumbKeyDown("high"), onPointerDown: onThumbPointerDown, className: RANGE })] }), box("high")] })] }));
+    const thumb = (end) => ({
+        type: "range",
+        "aria-label": end === "low" ? minLabel : maxLabel,
+        "aria-valuetext": end === "low" ? format(low) : highOpen ? openText : format(high),
+        min,
+        max,
+        step,
+        value: end === "low" ? low : high,
+        disabled,
+        onChange: onThumbChange(end),
+        onKeyDown: onThumbKeyDown(end),
+        onPointerDown: onThumbPointerDown,
+    });
+    const box = (end) => (_jsx(RangeBox, { label: end === "low" ? minLabel : maxLabel, text: end === "low" ? format(low) : highOpen ? openText : format(high), inputMode: inputMode, disabled: disabled, onCommit: commitDraft(end) }));
+    const lowPercent = percent(low, bounds);
+    const highPercent = highOpen ? 100 : percent(high, bounds);
+    return (_jsx(GroupFrame, { label: label, disabled: disabled, className: cx("disabled:opacity-50", className), ...props, children: _jsxs("div", { className: "flex items-center gap-3", children: [box("low"), _jsxs("div", { className: "relative h-5 min-w-0 flex-1", children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-b3" }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-x-2 top-1/2 h-1.5 -translate-y-1/2", children: _jsx("div", { "data-range-fill": "", className: "absolute inset-y-0 rounded-full bg-h1 forced-colors:bg-[Highlight]", style: { left: `${lowPercent}%`, right: `${100 - highPercent}%` } }) }), _jsx("input", { ...thumb("low"), className: cx(RANGE, lowPercent > 50 && "z-10") }), _jsx("input", { ...thumb("high"), className: RANGE })] }), box("high")] }) }));
 }

package/dist/components/filters/chipStyles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file src/components/filters/chipStyles.ts
+ * @desc The chip look that Chip and ChoiceChips share (the osu! beatmap listing pills): the pill,
+ *       pink when on, b3 when off. In forced-colors mode an "on" chip takes the system highlight
+ *       colors, so on and off still look different.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** The pill: rounded, px-2.5 py-0.5, bold text-xs. */
+export declare const CHIP = "rounded-full px-2.5 py-0.5 font-bold text-xs transition-colors";
+/** A chip that is on (pressed or checked). */
+export declare const CHIP_ON = "bg-h1 text-b6 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
+/** A chip that is off. */
+export declare const CHIP_OFF = "bg-b3 text-c2";
+/** A chip that can't be used right now: dimmed, with a not-allowed cursor. */
+export declare const CHIP_UNAVAILABLE = "cursor-not-allowed opacity-40";

package/dist/components/filters/chipStyles.js

@@ -0,0 +1,17 @@
+/**
+ * @file src/components/filters/chipStyles.ts
+ * @desc The chip look that Chip and ChoiceChips share (the osu! beatmap listing pills): the pill,
+ *       pink when on, b3 when off. In forced-colors mode an "on" chip takes the system highlight
+ *       colors, so on and off still look different.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** The pill: rounded, px-2.5 py-0.5, bold text-xs. */
+export const CHIP = "rounded-full px-2.5 py-0.5 font-bold text-xs transition-colors";
+/** A chip that is on (pressed or checked). */
+export const CHIP_ON = "bg-h1 text-b6 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
+/** A chip that is off. */
+export const CHIP_OFF = "bg-b3 text-c2";
+/** A chip that can't be used right now: dimmed, with a not-allowed cursor. */
+export const CHIP_UNAVAILABLE = "cursor-not-allowed opacity-40";

package/dist/components/filters/rangeMath.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @file src/components/filters/rangeMath.ts
+ * @desc RangeSlider's math (internal), free of React so it tests on its own: guarded bounds and
+ *       step, the incoming range normalized, snapping, the thumbs' keyboard moves, which end a
+ *       drag moves, and what a typed box or a thumb move commits.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** A range as `[low, high]`. `high` is `null` for an open top end (no upper limit). */
+export type RangeSliderValue = [number, number | null];
+/** One end of the range. */
+export type End = "low" | "high";
+/** The bounds and step after guarding: `min <= max`, and a step that is finite and above 0. */
+export type RangeBounds = {
+    min: number;
+    max: number;
+    step: number;
+    decimals: number;
+};
+/** The range as shown: both ends inside the bounds and in order, and whether the top is open. */
+export type RangeState = {
+    low: number;
+    high: number;
+    highOpen: boolean;
+    highOut: number | null;
+};
+/**
+ * @function defaultParse
+ * @param text {string} a typed value, without a trailing "+"
+ * @returns {number | null} the number, reading a comma as the decimal point (comma-locale keypads
+ *          type "5,5"), or null when it isn't one
+ */
+export declare const defaultParse: (text: string) => number | null;
+/**
+ * @function rangeBounds
+ * @param min {number} the low bound as passed
+ * @param max {number} the high bound as passed
+ * @param step {number} the step as passed
+ * @returns {RangeBounds} the bounds in order (swapped when `max < min`) and the step, or 1 when
+ *          the step is 0, negative or not finite, so snapping never divides by zero
+ */
+export declare const rangeBounds: (min: number, max: number, step: number) => RangeBounds;
+/**
+ * @function normalizeRange
+ * @param value {Readonly<RangeSliderValue>} the range as it came in (from a URL, say)
+ * @param bounds {RangeBounds} the guarded bounds
+ * @param openEnded {boolean} whether a top end at `max` means no upper limit
+ * @returns {RangeState} both ends inside the bounds with low <= high. A NaN or infinite end means
+ *          no limit on that end, like an empty box.
+ */
+export declare const normalizeRange: (value: Readonly<RangeSliderValue>, { min, max }: RangeBounds, openEnded: boolean) => RangeState;
+/**
+ * @function snap
+ * @param n {number} a value
+ * @param bounds {RangeBounds} the guarded bounds
+ * @returns {number} the nearest step from `min`, rounded to the step's decimals (no float noise)
+ */
+export declare const snap: (n: number, { min, step, decimals }: RangeBounds) => number;
+/**
+ * @function percent
+ * @param n {number} a value inside the bounds
+ * @param bounds {RangeBounds} the guarded bounds
+ * @returns {number} where it sits on the track, 0 to 100 (0 when `min` equals `max`)
+ */
+export declare const percent: (n: number, { min, max }: RangeBounds) => number;
+/**
+ * @function thumbTarget
+ * @param key {string} the key pressed on a thumb
+ * @param current {number} that thumb's value
+ * @param bounds {RangeBounds} the guarded bounds
+ * @returns {number | undefined} where the key sends the thumb (arrows one step, Page Up/Down ten
+ *          steps, Home and End to the bounds), or undefined for any other key
+ */
+export declare const thumbTarget: (key: string, current: number, { min, max, step }: RangeBounds) => number | undefined;
+/**
+ * @function dragEnd
+ * @param end {End} the thumb the drag started on
+ * @param n {number} the drag's first value
+ * @param state {RangeState} the range before the drag
+ * @returns {End} the end the drag moves. With both thumbs on one value, only the top thumb can be
+ *          grabbed and it can only go one way, so a first move toward the other side moves the
+ *          other end.
+ */
+export declare const dragEnd: (end: End, n: number, { low, high }: RangeState) => End;
+/**
+ * @function nextRange
+ * @param end {End} the end that moves
+ * @param n {number} where it moves to, before snapping
+ * @param state {RangeState} the range now
+ * @param bounds {RangeBounds} the guarded bounds
+ * @param openEnded {boolean} whether a top end at `max` reports null
+ * @returns {RangeSliderValue | null} the new range (snapped, the thumbs uncrossed, an open top
+ *          end as null), or null when nothing changed
+ */
+export declare const nextRange: (end: End, n: number, state: RangeState, bounds: RangeBounds, openEnded: boolean) => RangeSliderValue | null;
+/**
+ * @function readDraft
+ * @param draft {string} what was typed in an end's box
+ * @param end {End} which box
+ * @param bounds {RangeBounds} the guarded bounds
+ * @param parse {(text: string) => number | null} the caller's reader
+ * @returns {number | null} the value to commit: an empty box is no limit on that end (`min` or
+ *          `max`), a trailing "+" is ignored, and text `parse` can't read gives null
+ */
+export declare const readDraft: (draft: string, end: End, { min, max }: RangeBounds, parse: (text: string) => number | null) => number | null;