@eifi1/ui-kit 0.4.1 → 0.5.0

package/src/components/slider.tsx

@@ -0,0 +1,313 @@
+import { forwardRef, useId } from "react";
+import type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+/**
+ * A range control on a native `<input type="range">`.
+ *
+ * Lenkbank wrote the first one (`shared/ui/slider-field.tsx`) and then the case for
+ * moving it here (`docs/ui-kit-slider-proposal.md`). This is that proposal's "stage 1"
+ * primitive — the track, the thumb, the scale and the accessibility — plus the label
+ * line and tick marks its SpeedSlider needed. The four decisions it argues should be
+ * made once are made here, and each carries its note below:
+ *
+ *  1. a logarithmic scale whose far-left stop means exactly zero ({@link SliderProps.zeroStop});
+ *  2. `aria-valuetext`, so a log track does not announce its 0–1 position as the value;
+ *  3. a 24px pointer target, which needs the track and thumb drawn separately;
+ *  4. the number is the truth and the track a view of it: a value outside `min`–`max`
+ *     is kept and the thumb pins at the end — nothing here clamps what it was given.
+ *
+ * Controlled only, like `ToggleGroup` and `NumberInput`: there is no uncontrolled mode
+ * to get wrong, and neither app wants one. The package does no number formatting and
+ * holds no locale — `formatValue` is how the caller's `Intl` result gets in.
+ *
+ * Not here, deliberately (the proposal's list): two thumbs, vertical orientation, and
+ * a number box. A `NumberInput` goes in the `readout` slot when a typed value is
+ * wanted beside the track.
+ */
+
+/** On a log scale with {@link SliderProps.zeroStop}, the share of the track that is
+ *  the "off" stop. The first position to its right is `min`. */
+const ZERO_STOP = 0.02;
+
+/** Position resolution on a log track — 1000 stops, fine enough that a drag reads as
+ *  continuous. PageUp/PageDown still cross a tenth of the track at a time. */
+const LOG_STEP = 0.001;
+
+/**
+ * Where a value sits on a logarithmic track, 0–1.
+ *
+ * With `zeroStop`, zero and below is 0 and the decades between `min` and `max` are
+ * mapped onto the rest; without it, `min` is the far left. A value past either end
+ * pins there — that is the DISPLAY clamping, never the value's.
+ */
+export function toLogPosition(value: number, min: number, max: number, zeroStop = true): number {
+  if (value <= 0) return 0;
+  const share = Math.log(Math.max(value, min) / min) / Math.log(max / min);
+  const clamped = Math.min(1, Math.max(0, share));
+  return zeroStop ? ZERO_STOP + (1 - ZERO_STOP) * clamped : clamped;
+}
+
+/** The inverse of {@link toLogPosition}: the value at a track position. */
+export function fromLogPosition(position: number, min: number, max: number, zeroStop = true): number {
+  if (zeroStop) {
+    if (position < ZERO_STOP) return 0;
+    return min * Math.pow(max / min, (position - ZERO_STOP) / (1 - ZERO_STOP));
+  }
+  return min * Math.pow(max / min, position);
+}
+
+// The input is the pointer target, so its box is `h-6` (24px, WCAG 2.5.8) and the
+// track that LOOKS like a track is a 6px strip drawn inside it. Once the box is taller
+// than the track its background cannot be the track, and with `appearance-none`
+// nothing else draws one — measured in Chromium by Lenkbank, that is a bare thumb
+// floating on nothing, in the browser's blue. Hence the vendor pseudo-elements: the
+// two engines share no selector for either half, so each half is spelt twice.
+//
+// The fill up to the thumb: WebKit has no progress pseudo-element, so its track is a
+// two-stop gradient that breaks at `--slider-fill` (set inline from the position), and
+// the gradient runs the other way in a right-to-left document, where the native range
+// runs the other way too. Firefox draws the fill itself with `::-moz-range-progress`,
+// which follows the direction on its own.
+//
+// The thumb's `-mt-[5px]` centres a 16px thumb on a 6px track: WebKit lays the thumb
+// out from the track's top edge, Firefox centres it, so only one carries the offset.
+//
+// The focus ring goes on the THUMB, not the box: the box is the full width of the
+// row, and a ring round all of it says "this row is focused" rather than "the handle
+// you are about to move is". Offset in the surface colour, because the thumb is
+// --brand and a --brand ring touching it would be invisible.
+const TRACK = [
+  "block h-6 w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed",
+  // WebKit / Blink
+  "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full",
+  "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
+  "rtl:[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_left,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
+  "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
+  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--brand)] [&::-webkit-slider-thumb]:shadow",
+  "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]",
+  "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-[var(--bg-surface)]",
+  // Firefox
+  "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--border-strong)]",
+  "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-[var(--brand)]",
+  "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
+  "[&::-moz-range-thumb]:bg-[var(--brand)] [&::-moz-range-thumb]:shadow",
+  "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]",
+  "focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-[var(--bg-surface)]",
+].join(" ");
+
+/** A tick under the track. A bare number is a tick with no words. */
+export interface SliderMark {
+  value: number;
+  /** Shown under the tick — "30 km/h", "measured". Visual only: the value itself is
+   *  announced through `aria-valuetext`, so the marks row is hidden from assistive
+   *  technology rather than read out as a list of numbers after the slider. */
+  label?: ReactNode;
+}
+
+export interface SliderProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"
+  > {
+  /** The value. On a log scale this is the real value, not the track position. */
+  value: number;
+  /** The new value — a number, not the DOM event, like `ToggleGroup`. Fired on every
+   *  movement; debounce at the call site if each one costs a request. */
+  onChange: (value: number) => void;
+  /** The track's ends. Not a validity range: a `value` outside it is kept and the
+   *  thumb pins at the end (see the module note). On a log scale `min` must be
+   *  above zero — zero is what {@link zeroStop} is for. */
+  min: number;
+  max: number;
+  /** Step on a linear scale (the native default is 1). Ignored on a log scale, which
+   *  steps by track position — a fixed step is wrong at one end of every decade. */
+  step?: number;
+  /**
+   * How the track maps to the value. `"log"` for quantities that run over decades — a
+   * proportional gain of 0.5 and one of 200 are both ordinary, and on a linear track
+   * everything under a tenth of the range is the first pixel. Falls back to linear if
+   * `min` is not above zero or `max` not above `min`, where a logarithm has no answer.
+   */
+  scale?: "linear" | "log";
+  /**
+   * Log scale only: the far-left stop means exactly 0 ("off"), and the first step to
+   * its right is `min`. A logarithm cannot hold zero, and zero is often the question —
+   * should there be an integral term at all? Default `true`; turn it off for a scale
+   * where zero is meaningless (a zoom factor, a playback rate).
+   */
+  zeroStop?: boolean;
+  /**
+   * What a screen reader says for the value — "12.5 mm", "Off". Sets
+   * `aria-valuetext`. Without it a log track would announce its 0–1 POSITION ("0.63"
+   * for a gain of 12.5), so on a log scale the raw value is announced instead; pass
+   * this for anything with a unit or a locale.
+   */
+  formatValue?: (value: number) => string;
+  /** The words above the track, as a `<label for>`. Without it, pass `aria-label`. */
+  label?: ReactNode;
+  /** Something that belongs to the label rather than the value — in practice a
+   *  `FieldHint` "?". Rendered beside the label, outside the `<label>` element, so it
+   *  never becomes part of the slider's accessible name. */
+  hint?: ReactNode;
+  /** The value as the reader sees it, at the end of the label line — a formatted
+   *  number, or a `NumberInput` for typing one. Rendered as given. */
+  readout?: ReactNode;
+  /** Ticks under the track, at these values. Marks outside `min`–`max` are dropped. */
+  marks?: ReadonlyArray<number | SliderMark>;
+  /** Classes for the `<input>`. `className` styles the outer wrapper. */
+  inputClassName?: string;
+}
+
+/**
+ * A native range input with the kit's track and thumb, an optional label line
+ * (`label`, `hint`, `readout`), tick `marks`, and a logarithmic `scale`.
+ *
+ * Every other prop reaches the `<input>` — `name`, `id`, `aria-*`, `data-*`, `onBlur`,
+ * `onPointerUp` for commit-on-release — and `disabled` also fades the label line.
+ */
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
+  {
+    value,
+    onChange,
+    min,
+    max,
+    step,
+    scale = "linear",
+    zeroStop = true,
+    formatValue,
+    label,
+    hint,
+    readout,
+    marks,
+    className,
+    inputClassName,
+    id,
+    disabled,
+    style,
+    ...rest
+  },
+  ref,
+) {
+  const generated = useId();
+  const inputId = id ?? generated;
+  const log = scale === "log" && min > 0 && max > min;
+
+  // Everything the native element sees is a POSITION; everything the caller sees is a
+  // value. On a linear track the two are the same number.
+  const trackMin = log ? 0 : min;
+  const trackMax = log ? 1 : max;
+  const position = (v: number) => (log ? toLogPosition(v, min, max, zeroStop) : Math.min(max, Math.max(min, v)));
+  const current = position(value);
+  // 0–1 share of the track, for the fill and the marks. A zero-width range (min ===
+  // max) has no share to speak of; call it empty rather than divide by zero.
+  const share = (p: number) => (trackMax > trackMin ? (p - trackMin) / (trackMax - trackMin) : 0);
+  const outOfRange = value < min || value > max;
+
+  // `aria-valuetext` replaces the announced NUMBER and leaves the announced name
+  // alone. The caller's words first (`formatValue`, then a hand-written
+  // `aria-valuetext`); failing those, the real value wherever the
+  // native one would lie — every log position, and a linear value the thumb is only
+  // pinned at. `toPrecision(4)` keeps a log value from being read out to sixteen
+  // digits; it is not formatting, and `formatValue` is how to get a locale.
+  const valueText = formatValue
+    ? formatValue(value)
+    : (rest["aria-valuetext"] ??
+      (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const raw = Number(e.target.value);
+    if (!log) return onChange(raw);
+    // The gap between the zero stop and `min` has to be crossable by keyboard. An
+    // arrow key moves one LOG_STEP, which from zero lands inside the gap — and a gap
+    // that rounded to the nearer end would send it straight back to zero, trapping
+    // a keyboard user at "off". So inside the gap, moving up from zero means `min`
+    // and anything else means zero.
+    if (zeroStop && raw > 0 && raw < ZERO_STOP) return onChange(value <= 0 ? min : 0);
+    onChange(fromLogPosition(raw, min, max, zeroStop));
+  };
+
+  const normalizedMarks = (marks ?? [])
+    .map((m) => (typeof m === "number" ? { value: m } : m))
+    .filter((m) => m.value >= min && m.value <= max);
+  const hasMarkLabels = normalizedMarks.some((m) => m.label !== undefined);
+
+  const hasHeader = label !== undefined || hint !== undefined || readout !== undefined;
+  const plainReadout = typeof readout === "string" || typeof readout === "number";
+
+  return (
+    <div className={cn("w-full", disabled && "opacity-60", className)}>
+      {hasHeader && (
+        // `select-none` on the words is not a nicety (Lenkbank feedback #93): a
+        // mousedown on text beside a range input starts Chrome's native text drag, the
+        // cursor turns to no-drop and the thumb stops following the pointer for the
+        // rest of the gesture. The readout is only made unselectable when it is plain
+        // text — a NumberInput in that slot has to stay selectable to be editable.
+        <div className="flex items-center gap-2">
+          {label !== undefined && (
+            <label
+              htmlFor={inputId}
+              className="min-w-0 select-none text-xs font-medium text-[var(--text-secondary)]"
+            >
+              {label}
+            </label>
+          )}
+          {hint !== undefined && <span className="flex shrink-0 items-center">{hint}</span>}
+          {readout !== undefined && (
+            <span
+              className={cn(
+                "ms-auto shrink-0 text-xs tabular-nums text-[var(--text-primary)]",
+                plainReadout && "select-none",
+              )}
+            >
+              {readout}
+            </span>
+          )}
+        </div>
+      )}
+      <input
+        ref={ref}
+        id={label !== undefined ? inputId : id}
+        disabled={disabled}
+        {...rest}
+        type="range"
+        min={trackMin}
+        max={trackMax}
+        step={log ? LOG_STEP : step}
+        value={current}
+        aria-valuetext={valueText}
+        onChange={handleChange}
+        // The fill's break point, merged under the caller's own style.
+        style={{ ...style, "--slider-fill": `${share(current) * 100}%` } as CSSProperties}
+        className={cn(TRACK, inputClassName)}
+      />
+      {normalizedMarks.length > 0 && (
+        // `mx-2` insets the row by half a thumb on each side, which is exactly the
+        // range the thumb's CENTRE travels — so a tick at 0% sits under the thumb at
+        // `min`, not under the track's rounded end. Each tick is a zero-width column
+        // centred on its point, which centres its label on it in either direction
+        // without a `translate` that would need flipping for right-to-left.
+        <div
+          aria-hidden
+          className={cn("relative mx-2 -mt-1.5", hasMarkLabels ? "h-5" : "h-1.5")}
+        >
+          {normalizedMarks.map((m) => (
+            <span
+              key={m.value}
+              className="absolute top-0 flex w-0 flex-col items-center"
+              style={{ insetInlineStart: `${share(position(m.value)) * 100}%` }}
+            >
+              <span className="h-1.5 w-px shrink-0 bg-[var(--border-strong)]" />
+              {m.label !== undefined && (
+                <span className="mt-0.5 select-none whitespace-nowrap text-[11px] leading-tight text-[var(--text-muted)]">
+                  {m.label}
+                </span>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});
+Slider.displayName = "Slider";

package/src/components/sparkline.tsx

@@ -0,0 +1,329 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../lib/cn";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+
+/**
+ * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its
+ * accessible name is the ONLY way a screen reader learns what the shape says —
+ * "Sparkline, image" is not a summary. Each message takes the values already
+ * formatted, so the digits follow the locale and the sentence stays translatable.
+ */
+export interface SparklineLabels {
+  /** Last value above the first: "Rising from 12 to 40". */
+  rising: (first: string, last: string) => string;
+  /** Last value below the first. */
+  falling: (first: string, last: string) => string;
+  /** First and last are equal — the shape may still have moved in between. */
+  flat: (value: string) => string;
+  /** One value is a dot, not a trend. */
+  single: (value: string) => string;
+  /** No value at all (empty, or every point a gap). */
+  noData: string;
+  /** How the series' own name is joined to the summary when `label` is given. */
+  named: (name: string, summary: string) => string;
+}
+
+export const DEFAULT_SPARKLINE_LABELS: SparklineLabels = {
+  rising: (first, last) => `Rising from ${first} to ${last}`,
+  falling: (first, last) => `Falling from ${first} to ${last}`,
+  flat: (value) => `Unchanged at ${value}`,
+  single: (value) => `One value: ${value}`,
+  noData: "No data",
+  named: (name, summary) => `${name}: ${summary}`,
+};
+
+/**
+ * What colours the marks. Token names, not colours: every one resolves to a variable
+ * in tokens.css, so the sparkline re-skins with the palette like everything else.
+ *
+ *  - `chart` — the first series colour (`--chart-1`), the default.
+ *  - `income` / `expense` / `net` — the money trio.
+ *  - `signed` — a money series read by sign: bars each take income or expense by their
+ *    own value, a line or area takes the colour of its LAST value (where it ended up).
+ */
+export type SparklineTone =
+  | "chart"
+  | "brand"
+  | "muted"
+  | "income"
+  | "expense"
+  | "net"
+  | "signed"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+// `color`, not `stroke`/`fill`: every mark paints with `currentColor`, so one class
+// per element is enough and a signed bar chart needs no second lookup table.
+const TONE_CLASS: Record<Exclude<SparklineTone, "signed">, string> = {
+  chart: "text-[var(--chart-1)]",
+  brand: "text-[var(--brand)]",
+  muted: "text-[var(--text-muted)]",
+  income: "text-[var(--money-income)]",
+  expense: "text-[var(--money-expense)]",
+  net: "text-[var(--money-net)]",
+  success: "text-[var(--success)]",
+  warning: "text-[var(--warning)]",
+  danger: "text-[var(--danger)]",
+  info: "text-[var(--info)]",
+};
+
+const signedClass = (v: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.income);
+
+/** `children` is the marks and `width`/`height` are numbers here (or `fluid`), so
+ *  those three are the sparkline's own; everything else lands on the `<svg>`. */
+export interface SparklineProps
+  extends Omit<ComponentPropsWithoutRef<"svg">, "children" | "width" | "height"> {
+  /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks
+   *  there rather than drawing a zero or bridging across the missing point. */
+  data: ReadonlyArray<number | null | undefined>;
+  /** Width in px. Ignored under `fluid`. */
+  width?: number;
+  height?: number;
+  /** Fill the container's width instead of a fixed one (the height stays fixed). */
+  fluid?: boolean;
+  variant?: "line" | "area" | "bar";
+  tone?: SparklineTone;
+  /** Lower / upper end of the scale. Unset, the scale is the data's own tight range
+   *  (bars always include zero, since a bar's length IS its value). */
+  min?: number;
+  max?: number;
+  /** A dashed hairline at this value, e.g. `0` for a series that crosses zero, or a
+   *  target. It is pulled into the scale unless `min`/`max` exclude it. */
+  referenceValue?: number;
+  /** Dot on the last point (line/area) or dim every bar but the last. Default true —
+   *  the last value is the one the number beside a sparkline almost always is. */
+  highlightLast?: boolean;
+  strokeWidth?: number;
+  /** What the series is ("Price"), prefixed to the spoken summary. */
+  label?: string;
+  /** How a value is spoken in the summary. Defaults to `Intl.NumberFormat` in the
+   *  kit's locale, at most two decimals. */
+  formatValue?: (value: number) => string;
+  locale?: string;
+  labels?: Partial<SparklineLabels>;
+}
+
+const DEFAULT_WIDTH = 72;
+const DEFAULT_HEIGHT = 24;
+
+// One formatter per locale, not per render: a sparkline is a table-cell component and
+// a hundred rows would otherwise build a hundred identical `Intl.NumberFormat`s.
+const formatters = new Map<string, Intl.NumberFormat>();
+function defaultFormat(locale: string | undefined): (v: number) => string {
+  const key = locale ?? "";
+  let f = formatters.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+    formatters.set(key, f);
+  }
+  return (v) => f.format(v);
+}
+
+const isValue = (v: number | null | undefined): v is number => typeof v === "number" && Number.isFinite(v);
+
+/** The spoken summary, without the series name. Exported for callers that want the
+ *  same sentence elsewhere (a table's row description, a tooltip). */
+export function sparklineSummary(
+  data: ReadonlyArray<number | null | undefined>,
+  labels: SparklineLabels,
+  format: (value: number) => string,
+): string {
+  const values = data.filter(isValue);
+  if (values.length === 0) return labels.noData;
+  const first = values[0];
+  const last = values[values.length - 1];
+  if (values.length === 1) return labels.single(format(last));
+  if (last > first) return labels.rising(format(first), format(last));
+  if (last < first) return labels.falling(format(first), format(last));
+  return labels.flat(format(last));
+}
+
+/**
+ * A tiny trend line: shape only — no axes, no tooltip, no legend, no chart library.
+ *
+ * It is plain SVG on purpose. The two copies it replaces were recharts `LineChart`s,
+ * which is a ResizeObserver, a React tree of a dozen components and a 433 KB import
+ * per table cell; a sparkline is one `<path>`, cheap enough for every row of a table
+ * and small enough to live on the main barrel rather than behind `/chart`.
+ *
+ * The scale is TIGHT by default (the data's own min to max). A price that moved from
+ * 9.75 to 12.40 drawn against an implicit zero baseline is a nearly flat line at the
+ * top of the box — the one thing a shape-only chart must not do (keksdose dev#449).
+ * Bars are the exception: a bar's length is its value, so their scale includes zero.
+ *
+ * `role="img"` with a generated summary ("Rising from 12 to 40") as its name — the
+ * numbers beside it are the values, the sparkline says which way they have moved.
+ *
+ * Under `fluid` the SVG is stretched non-uniformly to the container's width, so every
+ * stroke is `non-scaling-stroke` and the last-point dot is a zero-length ROUND-CAPPED
+ * stroke rather than a `<circle>`: a stroke keeps its width under that transform,
+ * where a circle would be squashed into an ellipse.
+ */
+export function Sparkline({
+  data,
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fluid = false,
+  variant = "line",
+  tone = "chart",
+  min,
+  max,
+  referenceValue,
+  highlightLast = true,
+  strokeWidth = 1.5,
+  label,
+  formatValue,
+  locale,
+  labels,
+  className,
+  style,
+  ...rest
+}: SparklineProps) {
+  const text = useKitLabels("sparkline", DEFAULT_SPARKLINE_LABELS, labels);
+  const kitLocale = useKitLocale(locale);
+  const format = formatValue ?? defaultFormat(kitLocale);
+
+  const summary = sparklineSummary(data, text, format);
+  const name = label ? text.named(label, summary) : summary;
+
+  const W = width;
+  const H = height;
+  const points = data.map((v) => (isValue(v) ? v : null));
+  const values = points.filter(isValue);
+  const n = points.length;
+
+  // ── Scale ──
+  const bounds = [...values];
+  if (referenceValue !== undefined && isValue(referenceValue)) bounds.push(referenceValue);
+  if (variant === "bar") bounds.push(0);
+  let lo = min ?? (bounds.length ? Math.min(...bounds) : 0);
+  let hi = max ?? (bounds.length ? Math.max(...bounds) : 1);
+  if (hi === lo) {
+    // A constant series: centre it rather than divide by zero.
+    lo -= 1;
+    hi += 1;
+  }
+  const dot = strokeWidth + 1.5;
+  const pad = highlightLast && variant !== "bar" ? dot : strokeWidth / 2;
+  const clamp = (v: number) => Math.min(hi, Math.max(lo, v));
+  const y = (v: number) => pad + ((hi - clamp(v)) / (hi - lo)) * (H - 2 * pad);
+  const x = (i: number) => (n <= 1 ? W / 2 : pad + (i * (W - 2 * pad)) / (n - 1));
+  const r = (v: number) => Math.round(v * 100) / 100;
+
+  // Last DEFINED point — the series may well end in a gap. (No `findLastIndex`: the
+  // package targets ES2022.)
+  let lastIndex = -1;
+  for (let i = n - 1; i >= 0 && lastIndex < 0; i -= 1) if (points[i] !== null) lastIndex = i;
+  const lastValue = lastIndex >= 0 ? (points[lastIndex] ?? 0) : 0;
+  const lineClass = tone === "signed" ? signedClass(lastValue) : TONE_CLASS[tone];
+
+  // Contiguous runs between gaps. A run of one point is drawn as a dot, so a value
+  // isolated between two gaps is still visible.
+  const runs: Array<Array<[number, number]>> = [];
+  let run: Array<[number, number]> = [];
+  points.forEach((v, i) => {
+    if (v === null) {
+      if (run.length) runs.push(run);
+      run = [];
+    } else {
+      run.push([i, v]);
+    }
+  });
+  if (run.length) runs.push(run);
+
+  const linePath = (seg: Array<[number, number]>) =>
+    seg.map(([i, v], k) => `${k === 0 ? "M" : "L"}${r(x(i))} ${r(y(v))}`).join(" ");
+  const dotPath = (i: number, v: number) => `M${r(x(i))} ${r(y(v))} h0`;
+  // The area closes to zero when zero is on the scale, else to the bottom edge.
+  const areaBase = y(lo <= 0 && hi >= 0 ? 0 : lo);
+
+  const STROKE = {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    vectorEffect: "non-scaling-stroke",
+  } as const;
+
+  return (
+    <svg
+      role="img"
+      aria-label={name}
+      {...rest}
+      width={fluid ? "100%" : W}
+      height={H}
+      viewBox={`0 0 ${W} ${H}`}
+      preserveAspectRatio="none"
+      className={cn(fluid ? "block w-full" : "inline-block shrink-0 align-middle", "overflow-visible", className)}
+      style={style}
+    >
+      {referenceValue !== undefined && isValue(referenceValue) && referenceValue >= lo && referenceValue <= hi && (
+        <path
+          d={`M0 ${r(y(referenceValue))} H${W}`}
+          {...STROKE}
+          strokeWidth={1}
+          strokeDasharray="2 2"
+          className="text-[var(--border-strong)]"
+        />
+      )}
+
+      {variant === "bar"
+        ? (() => {
+            const slot = W / Math.max(n, 1);
+            const bw = Math.max(1, slot * 0.7);
+            const base = y(0);
+            return points.map((v, i) => {
+              if (v === null) return null;
+              const top = Math.min(y(v), base);
+              return (
+                <rect
+                  key={i}
+                  x={r(i * slot + (slot - bw) / 2)}
+                  y={r(top)}
+                  width={r(bw)}
+                  height={r(Math.abs(y(v) - base))}
+                  fill="currentColor"
+                  opacity={highlightLast && i !== lastIndex ? 0.55 : 1}
+                  className={tone === "signed" ? signedClass(v) : TONE_CLASS[tone]}
+                />
+              );
+            });
+          })()
+        : runs.map((seg, k) =>
+            seg.length === 1 ? (
+              <path
+                key={k}
+                d={dotPath(seg[0][0], seg[0][1])}
+                {...STROKE}
+                strokeWidth={strokeWidth * 2}
+                className={lineClass}
+              />
+            ) : (
+              <g key={k} className={lineClass}>
+                {variant === "area" && (
+                  <path
+                    d={`${linePath(seg)} L${r(x(seg[seg.length - 1][0]))} ${r(areaBase)} L${r(x(seg[0][0]))} ${r(areaBase)} Z`}
+                    fill="currentColor"
+                    fillOpacity={0.15}
+                    stroke="none"
+                  />
+                )}
+                <path d={linePath(seg)} {...STROKE} strokeWidth={strokeWidth} />
+              </g>
+            ),
+          )}
+
+      {highlightLast && variant !== "bar" && lastIndex >= 0 && (
+        <path
+          d={dotPath(lastIndex, lastValue)}
+          {...STROKE}
+          strokeWidth={dot * 2 - 1}
+          className={lineClass}
+          data-sparkline-last=""
+        />
+      )}
+    </svg>
+  );
+}