@lotics/ui 21.2.0 → 22.0.0

package/MIGRATION.md

@@ -4,6 +4,37 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 22.0.0 — `RangeSlider` is `Slider`, and single-value is a mode on it
+
+```ts
+import { RangeSlider, rangeSummary } from "@lotics/ui/range_slider";   // BEFORE
+import { Slider, rangeSummary } from "@lotics/ui/slider";              // AFTER
+
+<RangeSlider value={[lo, hi]} onValueChange={setBand} … />             // BEFORE
+<Slider range value={[lo, hi]} onValueChange={setBand} … />            // AFTER
+```
+
+`range` is the only addition to a range caller: every other prop, the drag, the keyboard
+contract and the rendered a11y anatomy are unchanged, and `rangeSummary` keeps its name and
+signature.
+
+The kit had no single-value slider at all — `RangeSlider`'s own doc sent a single free value to
+`NumberInput`, which is a typed field, not a drag. Apps that wanted one hand-rolled it. Adding a
+second `Slider` component beside `RangeSlider` would have been the parallel family the kit
+forbids, since single-vs-multi is a MODE: same geometry, same responder, same ARIA. So the
+component is named for what it is and the second thumb became the axis.
+
+New in the same change: `labels={false}` (suppress the built-in value line when the page prints
+the figure itself), `Home`/`End` jump to the bounds, and `@lotics/ui/slider_math` — the
+react-native-free geometry (`snapToStep`, `valueFraction`, `thumbOffset`, `thumbCenter`,
+`valueAt`), unit-tested and exported for a caller measuring its own track.
+
+A thumb also announces its POSITION now. `RangeSlider` passed `accessibilityValue={{min, max,
+now}}`, which neither react-native-web 0.21 nor React Native 0.86 forwards — every thumb reached
+the DOM as a bare `role="slider"` with no value, so a screen reader read "slider" and stopped.
+`Slider` passes `aria-valuemin` / `aria-valuemax` / `aria-valuenow`, which are first-class on
+`View` in both targets. A test asserting the old (absent) attributes was asserting a bug.
+
 ## 21.2.0 — `Stepper` is a list, not a progressbar
 
 No API changed, but the RENDERED role did, so a test that queried it breaks:

package/docs/catalog.md

@@ -159,7 +159,9 @@ plain sm tabular count beside it — the cell/heading/peek-trigger meter; a capt
 above a tiny bar reads misaligned. **The track clamps at 100%, the caption does not** — over
 its max it reads `2,100 / 2,000 · 105%`, because a meter that says "100%" when you are over
 tells the reader they are exactly at the limit. Numbers format in the reader's locale, so
-never hand-format the value you pass in) / `StackedProgressBar` / `StepProgress`, `Breakdown` (a
+never hand-format the value you pass in — when display precision differs from the true value
+(whole credits off a fractional balance), `formatValue` reshapes the caption text and leaves
+the fill and the percentage exact) / `StackedProgressBar` / `StepProgress`, `Breakdown` (a
 stacked bar + ranked share rows, pressable to drill; `maxRows` folds the long tail behind a
 "Show N more" toggle — `labels` to localize — so several facet cards align to one height in
 a row), `Funnel` (a CONVERSION funnel — ordered stages as bars that NARROW; the step
@@ -209,7 +211,7 @@ no assembly — reach for `PressDoor` only outside them.
 
 ### Filters & view controls
 
-`SearchInput`, `ChipGroup`, `FilterChip` (+ `RangeSlider`, `Counter`), `Chip`,
+`SearchInput`, `ChipGroup`, `FilterChip` (+ `Slider range`, `Counter`), `Chip`,
 `ColumnFilter` (the typed per-column filter pill + `columnFilterToConditions`).
 
 ### Overlays
@@ -576,7 +578,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`checkbox_input`** — `CheckboxInput`: checkbox + label as one labelled control.
 - **`switch`** — `Switch`: the bare toggle (a cell/toolbar boolean).
 - **`counter`** — `Counter`: increment/decrement numeric stepper (filter facet).
-- **`range_slider`** — `RangeSlider` + `rangeSummary`: min–max range control (filter facet).
+- **`slider`** — `Slider` + `rangeSummary`: drag a continuous number along a track. ONE thumb
+  by default (a volume, a threshold); `range` turns on the second and the value becomes
+  `[low, high]` (a price band, a filter facet). `labels={false}` when the caller prints the
+  figure itself.
+- **`slider_math`** — `snapToStep` / `valueFraction` / `thumbOffset` / `thumbCenter` /
+  `valueAt`: `Slider`'s react-native-free geometry, exported so a caller measuring its own
+  track lands on the same grid.
 
 ### Form & text inputs
 
@@ -778,7 +786,7 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `isColumnFilterActive` + `columnFilterSummary`: the typed per-column filter pill; for a
   register filtering on several columns.
 - **`filter_chip`** — `FilterChip` + `selectSummary`: the toolbar filter pill hosting a
-  facet (options, a `RangeSlider`, a `Counter`).
+  facet (options, a `Slider range`, a `Counter`).
 - **`summary_line`** — `SummaryLine`: the light inline summary of a register/list's FILTERED
   view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band.
 - **`use_selection`** — `useSelection`: always-on multi-select state for a register/list —

package/docs/composition.md

@@ -364,7 +364,7 @@ All view controls are 40px tall (`CONTROL_HEIGHT`), `sm` labels, in ONE wrapping
   counts in the label). Filters ONE list to a SUBSET — including by process stage / lifecycle
   state.
 - **`FilterChip`** is THE secondary-dimension filter — a compact chip that opens a composed
-  popover editor (`OptionList` multi / `RangeSlider` / `Counter` / date range). Single-select
+  popover editor (`OptionList` multi / `Slider range` / `Counter` / date range). Single-select
   closes on pick via the `{({ close }) => …}` render prop.
 - **`ColumnFilter`** is the TYPED column filter — give it a `FilterableColumn`
   (`type: "text" | "number" | "select"`) + a controlled `ColumnFilterValue` and it renders the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "21.2.0",
+  "version": "22.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -172,7 +172,8 @@
     "./form_switch": "./src/form_switch.tsx",
     "./chip": "./src/chip.tsx",
     "./filter_chip": "./src/filter_chip.tsx",
-    "./range_slider": "./src/range_slider.tsx",
+    "./slider": "./src/slider.tsx",
+    "./slider_math": "./src/slider_math.ts",
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
     "./text_link": "./src/text_link.tsx",

package/src/counter.tsx

@@ -20,7 +20,7 @@ export interface CounterProps {
  * a min-nights filter, an order line quantity. The Airbnb-style counter: two
  * bordered round buttons flanking the value, a hover wash on each, dimmed at
  * their bounds. For free numeric entry use `NumberInput`; for a wide continuous
- * range use `RangeSlider`.
+ * quantity use `Slider`.
  */
 export function Counter(props: CounterProps) {
   const { value, onValueChange, min = 0, max = Infinity, step = 1, accessibilityLabel, format } = props;

package/src/filter_chip.tsx

@@ -23,7 +23,7 @@ export interface FilterChipProps {
   onClear?: () => void;
   /** Label for the clear affordances (pass a translated string). */
   clearLabel?: string;
-  /** The editor revealed on press — a premium primitive (`RangeSlider`,
+  /** The editor revealed on press — a premium primitive (`Slider range`,
    *  `Counter`, `OptionList` multi) or any composed control. `FilterChip` owns
    *  the pill + popover chrome; the consumer owns the value and applies it.
    *  Pass a render function to receive `close` — the one editor that closes on
@@ -64,7 +64,7 @@ export function selectSummary(
  * × to clear. `FilterChip` bakes the consistent chrome — the preview pill, a
  * padded popover body for the composed editor, and a Clear footer when active —
  * so every filter looks and behaves the same. Drop a premium primitive inside
- * (`RangeSlider`, `Counter`, `OptionList` multi). With `footer` (+ controlled
+ * (`Slider range`, `Counter`, `OptionList` multi). With `footer` (+ controlled
  * `open`/`onOpenChange`) the same shell wraps a non-filter VALUE pill — a
  * setting gate with Cancel/Save — keeping it on the one pill surface. The table
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
@@ -119,7 +119,7 @@ export function FilterChip(props: FilterChipProps) {
 }
 
 const styles = StyleSheet.create({
-  // The popover hugs its content — a wide control (e.g. RangeSlider) sets its
+  // The popover hugs its content — a wide control (e.g. Slider) sets its
   // OWN fixed width; the shell never forces one. No extra padding: the editor and
   // the Clear footer then share the popover's own 8px inset, so a multi-select's
   // options, its select-all, and the Clear all line up on one left edge.

package/src/locale.tsx

@@ -289,8 +289,11 @@ export const en: LoticsLocale = {
     downloadAll: "Download all",
     downloadSelected: (n: number) => `Download (${n})`,
     delete: "Delete",
-    removeTitle: "Remove attachment?",
-    removeMessage: "This removes the file.",
+    // `FilesEditorRemove` removes the whole SELECTION, so the confirm is phrased for a set —
+    // singular copy under-reports what the button is about to do. And the kit does not know what
+    // the files hang off, so it says what it can see: the files, and that they are selected.
+    removeTitle: "Remove files?",
+    removeMessage: "The selected files will be removed.",
     removeCancel: "Cancel",
     removeConfirm: "Remove",
   },
@@ -438,7 +441,7 @@ export const vi: LoticsLocale = {
     downloadSelected: (n: number) => `Tải ${n} tệp`,
     delete: "Xóa",
     removeTitle: "Xóa tệp?",
-    removeMessage: "Tệp sẽ bị gỡ khỏi bản ghi.",
+    removeMessage: "Các tệp đã chọn sẽ bị xóa.",
     removeCancel: "Hủy",
     removeConfirm: "Xóa",
   },

package/src/progress_bar.tsx

@@ -16,6 +16,16 @@ export interface ProgressBarProps {
    * "1,250 / 2,500 · 50%" (separators follow the reader's locale). Reports the
    * TRUE ratio — over `max` it reads "105%" while the track stays clamped. */
   format?: ProgressBarFormat;
+  /**
+   * How `value` and `max` render inside the caption. Defaults to the reader's locale grouping.
+   *
+   * The escape hatch for a quantity whose natural precision is not its DISPLAY precision — a
+   * fractional credit balance metered to whole credits, a byte count shown as GB. Still the bar's
+   * job rather than the caller's: pass the true `value`/`max` so the track and the percentage stay
+   * exact, and let this reshape only the text. Pre-rounding the numbers you pass in moves the fill
+   * and the percentage too, which is how a 99.6%-full meter starts claiming it is exactly full.
+   */
+  formatValue?: (n: number) => string;
   color?: string;
   completeColor?: string;
   /** COMPACT: one row — the track (flex) with a plain sm tabular count beside
@@ -37,6 +47,7 @@ export function ProgressBar(props: ProgressBarProps) {
     max,
     title,
     format = "percentage",
+    formatValue,
     color = colors.blue["500"],
     completeColor = colors.green["500"],
     compact = false,
@@ -55,10 +66,11 @@ export function ProgressBar(props: ProgressBarProps) {
   const ratio = max > 0 ? Math.max(0, (value / max) * 100) : 0;
   const percentage = Math.min(100, ratio);
   const isComplete = ratio >= 100;
+  const num = formatValue ?? ((n: number) => n.toLocaleString(localeTag));
 
   if (compact) {
     const label =
-      format === "percentage" ? `${Math.round(ratio)}%` : `${value.toLocaleString(localeTag)}/${max.toLocaleString(localeTag)}`;
+      format === "percentage" ? `${Math.round(ratio)}%` : `${num(value)}/${num(max)}`;
     return (
       <View style={styles.compactRow}>
         <View style={[styles.track, styles.compactTrack]}>
@@ -75,7 +87,7 @@ export function ProgressBar(props: ProgressBarProps) {
 
   const caption =
     format === "fraction"
-      ? `${value.toLocaleString(localeTag)} / ${max.toLocaleString(localeTag)} · ${Math.round(ratio)}%`
+      ? `${num(value)} / ${num(max)} · ${Math.round(ratio)}%`
       : format === "percentage"
         ? `${Math.round(ratio)}%`
         : null;

package/src/slider.tsx

@@ -0,0 +1,302 @@
+import { useRef, useState } from "react";
+import {
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type ViewStyle,
+} from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+import { snapToStep, thumbCenter, thumbOffset, valueAt, type SliderScale } from "./slider_math";
+
+const THUMB = 20;
+
+export interface SliderBaseProps {
+  min: number;
+  max: number;
+  step?: number;
+  /** Render the value labels (money, units). Default: the bare number. */
+  format?: (value: number) => string;
+  /** Print the selected value(s) above the track. Turn OFF when the caller
+   *  renders the figure itself — a page that shows the volume at display size
+   *  under the control does not want it a second time in muted 14px. */
+  labels?: boolean;
+  /** Filled-track / thumb accent. Default the neutral ink. */
+  color?: string;
+  /** Base name. In `range` mode the thumbs announce "{label} minimum" /
+   *  "{label} maximum". */
+  accessibilityLabel: string;
+}
+
+export type SliderProps = SliderBaseProps &
+  (
+    | { range?: false; value: number; onValueChange: (value: number) => void }
+    | {
+        range: true;
+        value: [number, number];
+        onValueChange: (value: [number, number]) => void;
+      }
+  );
+
+type Thumb = "low" | "high";
+
+function SliderThumb(props: {
+  label: string;
+  min: number;
+  max: number;
+  now: number;
+  left: number;
+  color: string;
+  active: boolean;
+  keyProps: object;
+}) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <View
+      accessibilityRole="adjustable"
+      accessibilityLabel={props.label}
+      // The `aria-*` props, NOT `accessibilityValue={{min,max,now}}`: neither
+      // react-native-web 0.21 nor RN 0.86 forwards the object form, so the
+      // thumb reached the DOM as a bare `role="slider"` with no position — a
+      // screen reader announced "slider" and nothing else. These three are
+      // first-class on View in both targets.
+      aria-valuemin={props.min}
+      aria-valuemax={props.max}
+      aria-valuenow={props.now}
+      focusable
+      {...focusProps}
+      style={[
+        styles.thumb,
+        { left: props.left, borderColor: props.color },
+        props.active && styles.thumbActive,
+        focusVisible && { boxShadow: FOCUS_RING },
+      ]}
+      {...props.keyProps}
+    />
+  );
+}
+
+/**
+ * A short human summary of a range selection for a `FilterChip` preview —
+ * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
+ * `undefined` at the full range (no active filter). Mirrors `columnFilterSummary`.
+ */
+export function rangeSummary(
+  value: [number, number],
+  format: (n: number) => string = String,
+  bounds?: [number, number],
+): string | undefined {
+  const [low, high] = value;
+  if (!bounds) return `${format(low)}–${format(high)}`;
+  const atMin = low <= bounds[0];
+  const atMax = high >= bounds[1];
+  if (atMin && atMax) return undefined;
+  if (atMin) return `≤ ${format(high)}`;
+  if (atMax) return `≥ ${format(low)}`;
+  return `${format(low)}–${format(high)}`;
+}
+
+/**
+ * Drag a continuous number along a track — a volume, a price, a weight, a
+ * threshold. ONE thumb by default; `range` turns on the second and the value
+ * becomes `[low, high]` (a price band, a filter facet). Single and range are
+ * the same control in two modes, not two components: the geometry, the drag,
+ * the keyboard contract and the a11y anatomy are identical.
+ *
+ * Drag works on web and native (the RN Responder system), and every thumb is a
+ * keyboard-operable ARIA slider — arrows step it, and in `range` mode each
+ * thumb is clamped against the other. For a small discrete count use `Counter`;
+ * for a number typed exactly use `NumberInput`.
+ *
+ *   <Slider min={20} max={600} step={10} value={lots}
+ *           onValueChange={setLots} accessibilityLabel="Lots a month" />
+ *
+ *   <Slider range min={0} max={50_000_000} step={500_000} value={band}
+ *           onValueChange={setBand} format={toMillions} accessibilityLabel="Price" />
+ */
+export function Slider(props: SliderProps) {
+  const {
+    min,
+    max,
+    step = 1,
+    format,
+    labels = true,
+    color = colors.zinc[900],
+    accessibilityLabel,
+  } = props;
+  const [width, setWidth] = useState(0);
+  const [dragging, setDragging] = useState<Thumb | null>(null);
+  const active = useRef<Thumb | null>(null);
+
+  // One internal model: a low and a high. In single mode the fill runs from the
+  // track's start, so "low" is the floor rather than a second thumb.
+  const range = props.range === true;
+  const [low, high] = range ? props.value : [min, props.value];
+
+  const fmt = (n: number) => (format ? format(n) : String(n));
+  const scale: SliderScale = { min, max, step, width, thumb: THUMB };
+
+  const emit = (thumb: Thumb, v: number) => {
+    if (!range) {
+      props.onValueChange(v);
+      return;
+    }
+    // A thumb never crosses the other — low stays ≤ high.
+    if (thumb === "low") props.onValueChange([Math.min(v, high), high]);
+    else props.onValueChange([low, Math.max(v, low)]);
+  };
+
+  const closerThumb = (locationX: number): Thumb => {
+    if (!range) return "high";
+    const v = valueAt(locationX, scale);
+    return Math.abs(v - low) <= Math.abs(v - high) ? "low" : "high";
+  };
+
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
+
+  // The track is the responder; grant picks the nearer thumb. We refuse
+  // termination so a parent ScrollView can't steal the drag on a vertical wobble.
+  const responder = {
+    onStartShouldSetResponder: () => true,
+    onMoveShouldSetResponder: () => true,
+    onResponderTerminationRequest: () => false,
+    onResponderGrant: (e: GestureResponderEvent) => {
+      const t = closerThumb(e.nativeEvent.locationX);
+      active.current = t;
+      setDragging(t);
+      emit(t, valueAt(e.nativeEvent.locationX, scale));
+    },
+    onResponderMove: (e: GestureResponderEvent) => {
+      if (active.current) emit(active.current, valueAt(e.nativeEvent.locationX, scale));
+    },
+    onResponderRelease: () => {
+      active.current = null;
+      setDragging(null);
+    },
+    onResponderTerminate: () => {
+      active.current = null;
+      setDragging(null);
+    },
+  };
+
+  // Web keyboard handler, forwarded by react-native-web (cast like the mouse
+  // handlers elsewhere — RN's View types don't declare it).
+  const keyProps = (thumb: Thumb) =>
+    ({
+      onKeyDown: (e: { key: string; preventDefault: () => void }) => {
+        const now = thumb === "low" ? low : high;
+        const next =
+          e.key === "ArrowRight" || e.key === "ArrowUp"
+            ? now + step
+            : e.key === "ArrowLeft" || e.key === "ArrowDown"
+              ? now - step
+              : e.key === "Home"
+                ? min
+                : e.key === "End"
+                  ? max
+                  : null;
+        if (next === null) return;
+        e.preventDefault();
+        emit(thumb, snapToStep(next, scale));
+      },
+    }) as object;
+
+  const thumbs: Thumb[] = range ? ["low", "high"] : ["high"];
+  // One expression for both modes: in single mode `low` IS `min`, whose centre
+  // is exactly where the track background starts.
+  const fillFrom = thumbCenter(low, scale);
+
+  return (
+    <View style={styles.container}>
+      {labels ? (
+        <View style={styles.labels}>
+          {thumbs.map((thumb) => (
+            <Text key={thumb} size="sm" color="muted" tabular>
+              {fmt(thumb === "low" ? low : high)}
+            </Text>
+          ))}
+        </View>
+      ) : null}
+      <View style={styles.trackArea} onLayout={onLayout} {...responder}>
+        <View style={styles.trackBg} />
+        <View
+          style={[
+            styles.trackFill,
+            {
+              left: fillFrom,
+              width: Math.max(0, thumbCenter(high, scale) - fillFrom),
+              backgroundColor: color,
+            },
+          ]}
+        />
+        {thumbs.map((thumb) => {
+          const v = thumb === "low" ? low : high;
+          return (
+            <SliderThumb
+              key={thumb}
+              label={
+                range
+                  ? `${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`
+                  : accessibilityLabel
+              }
+              min={min}
+              max={max}
+              now={v}
+              left={thumbOffset(v, scale)}
+              color={color}
+              active={dragging === thumb}
+              keyProps={keyProps(thumb)}
+            />
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { gap: 10, minWidth: 240 },
+  labels: { flexDirection: "row", justifyContent: "space-between" },
+  trackArea: {
+    height: 28,
+    justifyContent: "center",
+    ...({ cursor: "pointer", touchAction: "none" } as ViewStyle),
+  },
+  trackBg: {
+    position: "absolute",
+    left: THUMB / 2,
+    right: THUMB / 2,
+    top: 11,
+    height: 6,
+    borderRadius: 999,
+    backgroundColor: colors.zinc[200],
+  },
+  trackFill: {
+    position: "absolute",
+    top: 11,
+    height: 6,
+    borderRadius: 999,
+  },
+  thumb: {
+    position: "absolute",
+    top: 4,
+    width: THUMB,
+    height: THUMB,
+    borderRadius: 999,
+    backgroundColor: colors.white,
+    borderWidth: 2,
+    ...({
+      cursor: "pointer",
+      boxShadow: "0 1px 3px rgba(38,38,38,0.18)",
+    } as ViewStyle),
+  },
+  thumbActive: {
+    // a soft halo while dragging — no size change, so the thumb never shifts
+    ...({
+      boxShadow: "0 1px 3px rgba(38,38,38,0.18), 0 0 0 6px rgba(38,38,38,0.10)",
+    } as ViewStyle),
+  },
+});

package/src/slider_math.ts

@@ -0,0 +1,63 @@
+/**
+ * `Slider`'s geometry, with no react-native import so it can be unit-tested.
+ *
+ * The one idea worth isolating: a thumb is a BOX, not a point. Browsers and
+ * every hand-rolled slider inset the travel by half a thumb at each end so the
+ * thumb never overhangs the control — which means the pointer→value map and the
+ * value→offset map must use the SAME inset, or the fill and the thumb disagree
+ * by up to a radius at the extremes.
+ */
+
+export interface SliderScale {
+  min: number;
+  max: number;
+  /** Grid the value snaps to. `0` or less means "do not snap". */
+  step: number;
+  /** Measured width of the track, in px. */
+  width: number;
+  /** Thumb diameter, in px. */
+  thumb: number;
+}
+
+type Bounds = Pick<SliderScale, "min" | "max" | "step">;
+
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+
+/** `max - min`, never zero — a degenerate range would divide by it. */
+const span = (b: Bounds) => b.max - b.min || 1;
+
+/** The travel a thumb's LEFT EDGE has, in px: the track less one whole thumb. */
+const usable = (s: SliderScale) => Math.max(0, s.width - s.thumb);
+
+/**
+ * Round to the step grid, then clamp into the bounds — in that order, so a
+ * grid that does not divide the range evenly can still reach both ends.
+ */
+export function snapToStep(raw: number, b: Bounds): number {
+  if (!Number.isFinite(raw)) return b.min;
+  if (b.step <= 0) return clamp(raw, b.min, b.max);
+  return clamp(Math.round((raw - b.min) / b.step) * b.step + b.min, b.min, b.max);
+}
+
+/** Where a value sits along the track, 0 at `min` and 1 at `max`. */
+export function valueFraction(value: number, b: Bounds): number {
+  return clamp((value - b.min) / span(b), 0, 1);
+}
+
+/** Left offset of a thumb's BOX for a value — never past either edge. */
+export function thumbOffset(value: number, s: SliderScale): number {
+  return valueFraction(value, s) * usable(s);
+}
+
+/** Centre of a thumb for a value — where the filled track has to stop. */
+export function thumbCenter(value: number, s: SliderScale): number {
+  return thumbOffset(value, s) + s.thumb / 2;
+}
+
+/** The snapped value under a pointer sitting `locationX` px from the track's
+ *  left edge. Inverts {@link thumbOffset}, inset included. */
+export function valueAt(locationX: number, s: SliderScale): number {
+  const travel = usable(s);
+  const fraction = travel === 0 ? 0 : clamp((locationX - s.thumb / 2) / travel, 0, 1);
+  return snapToStep(s.min + fraction * span(s), s);
+}

package/src/range_slider.tsx

@@ -1,213 +0,0 @@
-import { useRef, useState } from "react";
-import { StyleSheet, View, type GestureResponderEvent, type LayoutChangeEvent, type ViewStyle } from "react-native";
-import { Text } from "./text";
-import { colors } from "./colors";
-import { FOCUS_RING } from "./control_surface";
-import { useFocusRing } from "./use_focus_ring";
-
-const THUMB = 20;
-const R = THUMB / 2;
-
-export interface RangeSliderProps {
-  min: number;
-  max: number;
-  step?: number;
-  /** The controlled [low, high] selection. */
-  value: [number, number];
-  onValueChange: (value: [number, number]) => void;
-  /** Render the edge labels (money, units). Default: the bare number. */
-  format?: (value: number) => string;
-  /** Filled-track / thumb accent. Default the neutral ink. */
-  color?: string;
-  /** Base name — the thumbs announce "{label} minimum" / "{label} maximum". */
-  accessibilityLabel: string;
-}
-
-type Thumb = "low" | "high";
-
-function SliderThumb(props: {
-  label: string;
-  min: number;
-  max: number;
-  now: number;
-  left: number;
-  color: string;
-  active: boolean;
-  keyProps: object;
-}) {
-  const { focusVisible, focusProps } = useFocusRing();
-  return (
-    <View
-      accessibilityRole="adjustable"
-      accessibilityLabel={props.label}
-      accessibilityValue={{ min: props.min, max: props.max, now: props.now }}
-      focusable
-      {...focusProps}
-      style={[styles.thumb, { left: props.left, borderColor: props.color }, props.active && styles.thumbActive, focusVisible && { boxShadow: FOCUS_RING }]}
-      {...props.keyProps}
-    />
-  );
-}
-
-/**
- * A short human summary of a range selection for a `FilterChip` preview —
- * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
- * `undefined` at the full range (no active filter). Mirrors `columnFilterSummary`.
- */
-export function rangeSummary(
-  value: [number, number],
-  format: (n: number) => string = String,
-  bounds?: [number, number],
-): string | undefined {
-  const [low, high] = value;
-  if (!bounds) return `${format(low)}–${format(high)}`;
-  const atMin = low <= bounds[0];
-  const atMax = high >= bounds[1];
-  if (atMin && atMax) return undefined;
-  if (atMin) return `≤ ${format(high)}`;
-  if (atMax) return `≥ ${format(low)}`;
-  return `${format(low)}–${format(high)}`;
-}
-
-/**
- * A dual-thumb range slider — drag either end to bound a continuous number
- * (a price range, an amount, a weight). Drag works on web and native (the RN
- * Responder system), and each thumb is a keyboard-operable ARIA slider
- * (arrow keys step it, clamped against the other). For a small discrete count
- * use `Counter`; for a single free value use `NumberInput`.
- */
-export function RangeSlider(props: RangeSliderProps) {
-  const { min, max, step = 1, value, onValueChange, format, color = colors.zinc[900], accessibilityLabel } = props;
-  const [low, high] = value;
-  const [width, setWidth] = useState(0);
-  const [dragging, setDragging] = useState<Thumb | null>(null);
-  const active = useRef<Thumb | null>(null);
-
-  const fmt = (n: number) => (format ? format(n) : String(n));
-  const span = max - min || 1;
-  const usable = Math.max(0, width - THUMB); // the track inset by a thumb radius at each end
-  const pct = (v: number) => (v - min) / span;
-  const x = (v: number) => pct(v) * usable; // thumb box left, in px — never crosses the edge
-
-  const snap = (raw: number) => {
-    const stepped = Math.round((raw - min) / step) * step + min;
-    return Math.min(max, Math.max(min, stepped));
-  };
-
-  // A thumb never crosses the other — low stays ≤ high.
-  const setThumb = (thumb: Thumb, v: number) => {
-    if (thumb === "low") onValueChange([Math.min(v, high), high]);
-    else onValueChange([low, Math.max(v, low)]);
-  };
-
-  // locationX is relative to the track; the usable range maps [R, width−R] → [0,1].
-  const fromX = (thumb: Thumb, locationX: number) =>
-    setThumb(thumb, snap(min + Math.min(1, Math.max(0, (locationX - R) / (usable || 1))) * span));
-
-  const closerThumb = (locationX: number): Thumb => {
-    const f = Math.min(1, Math.max(0, (locationX - R) / (usable || 1)));
-    const v = min + f * span;
-    return Math.abs(v - low) <= Math.abs(v - high) ? "low" : "high";
-  };
-
-  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
-
-  // The track is the responder; grant picks the nearer thumb. We refuse
-  // termination so a parent ScrollView can't steal the drag on a vertical wobble.
-  const responder = {
-    onStartShouldSetResponder: () => true,
-    onMoveShouldSetResponder: () => true,
-    onResponderTerminationRequest: () => false,
-    onResponderGrant: (e: GestureResponderEvent) => {
-      const t = closerThumb(e.nativeEvent.locationX);
-      active.current = t;
-      setDragging(t);
-      fromX(t, e.nativeEvent.locationX);
-    },
-    onResponderMove: (e: GestureResponderEvent) => {
-      if (active.current) fromX(active.current, e.nativeEvent.locationX);
-    },
-    onResponderRelease: () => { active.current = null; setDragging(null); },
-    onResponderTerminate: () => { active.current = null; setDragging(null); },
-  };
-
-  // Web keyboard handler, forwarded by react-native-web (cast like the mouse
-  // handlers elsewhere — RN's View types don't declare it).
-  const keyProps = (thumb: Thumb) =>
-    ({
-      onKeyDown: (e: { key: string; preventDefault: () => void }) => {
-        const d = e.key === "ArrowRight" || e.key === "ArrowUp" ? step : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -step : 0;
-        if (d === 0) return;
-        e.preventDefault();
-        setThumb(thumb, snap((thumb === "low" ? low : high) + d));
-      },
-    }) as object;
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.labels}>
-        <Text size="sm" color="muted" tabular>{fmt(low)}</Text>
-        <Text size="sm" color="muted" tabular>{fmt(high)}</Text>
-      </View>
-      <View style={styles.trackArea} onLayout={onLayout} {...responder}>
-        <View style={styles.trackBg} />
-        <View style={[styles.trackFill, { left: x(low) + R, width: Math.max(0, x(high) - x(low)), backgroundColor: color }]} />
-        {(["low", "high"] as const).map((thumb) => {
-          const v = thumb === "low" ? low : high;
-          return (
-            <SliderThumb
-              key={thumb}
-              label={`${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`}
-              min={min}
-              max={max}
-              now={v}
-              left={x(v)}
-              color={color}
-              active={dragging === thumb}
-              keyProps={keyProps(thumb)}
-            />
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { gap: 10, minWidth: 240 },
-  labels: { flexDirection: "row", justifyContent: "space-between" },
-  trackArea: {
-    height: 28,
-    justifyContent: "center",
-    ...({ cursor: "pointer", touchAction: "none" } as ViewStyle),
-  },
-  trackBg: {
-    position: "absolute",
-    left: R,
-    right: R,
-    top: 11,
-    height: 6,
-    borderRadius: 999,
-    backgroundColor: colors.zinc[200],
-  },
-  trackFill: {
-    position: "absolute",
-    top: 11,
-    height: 6,
-    borderRadius: 999,
-  },
-  thumb: {
-    position: "absolute",
-    top: 4,
-    width: THUMB,
-    height: THUMB,
-    borderRadius: 999,
-    backgroundColor: colors.white,
-    borderWidth: 2,
-    ...({ cursor: "pointer", boxShadow: "0 1px 3px rgba(38,38,38,0.18)" } as ViewStyle),
-  },
-  thumbActive: {
-    // a soft halo while dragging — no size change, so the thumb never shifts
-    ...({ boxShadow: "0 1px 3px rgba(38,38,38,0.18), 0 0 0 6px rgba(38,38,38,0.10)" } as ViewStyle),
-  },
-});