@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/components/slider.tsx

@@ -1,338 +0,0 @@
-import { useId } from "react";
-import type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { useFieldMessages, type FieldHelpProps } from "./field-parts";
-
-/**
- * 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-[0.3125rem]` centres a 1rem thumb on a 0.375rem track — half the
-// difference — in rem since 0.32 (§3.2): the thumb and track grow with the text, and the
-// 5px it was left the thumb low of the track at 125 % and further at 150 %. 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. Its width is the kit's
-// focus frame (`--focus-ring-width`, §5) — spelt out per engine, since `FOCUS_RING`'s
-// classes cannot carry the pseudo-element.
-//
-// At Large the box is the 48 px touch target (§4) — the track stays centred in it, and
-// the marks row below is pulled up by as much (see `MARKS_LARGE`).
-const TRACK = [
-  "block h-6 large:h-[48px] 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-[0.3125rem] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
-  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:shadow",
-  "focus-visible:[&::-webkit-slider-thumb]:ring-focus focus-visible:[&::-webkit-slider-thumb]:ring-brand",
-  "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-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-brand",
-  "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
-  "[&::-moz-range-thumb]:bg-brand [&::-moz-range-thumb]:shadow",
-  "focus-visible:[&::-moz-range-thumb]:ring-focus focus-visible:[&::-moz-range-thumb]:ring-brand",
-  "focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-surface",
-].join(" ");
-
-// The marks row sits `-mt-1.5` under a 1.5rem box, tucked against the track. In the 48 px
-// box at Large the track's lower edge is `(48px + 0.375rem) / 2` down, so the row comes
-// up by `(48px − 0.375rem) / 2` less the same 0.1875rem gap: `24px − 0.375rem`.
-const MARKS_LARGE = "large:-mt-[calc(24px-0.375rem)]";
-
-/** 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"
-    >,
-    FieldHelpProps {
-  /** 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.
-   *
-   *  {@link Select}'s rule since 0.34 (DUP-2, refactor audit 2026-10): plain TEXT is a
-   *  caption under the track, on the slider's `aria-describedby`, and so is a FieldHint
-   *  at Large and on a touch screen, where a "?" cannot be hovered open (§4) — the
-   *  Kurvenschmiede controller panel's Kp/Ki/Kd facts were a lone "?" on a phone. A
-   *  `HelpPopover` stays beside the label at every size. */
-  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;
-  /** The `<input type="range">`. A React 19 ref prop since 0.34 (MOD-4, refactor audit
-   *  2026-10); it was `forwardRef`. */
-  ref?: Ref<HTMLInputElement>;
-}
-
-/**
- * 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 function Slider({
-  ref,
-  value,
-  onChange,
-  min,
-  max,
-  step,
-  scale = "linear",
-  zeroStop = true,
-  formatValue,
-  label,
-  hint,
-  help,
-  readout,
-  marks,
-  className,
-  inputClassName,
-  id,
-  disabled,
-  style,
-  ...rest
-}: SliderProps) {
-  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);
-
-  // The label line's "?", or the caption under the track (DUP-2).
-  const messages = useFieldMessages({
-    hint,
-    help,
-    name: label ?? rest["aria-label"],
-    describedBy: rest["aria-describedby"],
-  });
-  const labelHint = messages.labelHint;
-  const hasHeader = label !== undefined || labelHint !== 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.
-        // `flex-wrap`: a readout wider than the room beside the label (a value plus a
-        // link button, "0 / 60 / 120 km/h · Alle Geschwindigkeiten") used to print on
-        // top of it at 390px (lenkbank L1). Each keeps its own width, so the readout
-        // drops to a line of its own, still at the end, only when the two don't fit.
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
-          {label !== undefined && (
-            <label htmlFor={inputId} className="min-w-0 select-none text-xs font-medium text-secondary">
-              {label}
-            </label>
-          )}
-          {labelHint !== undefined && <span className="flex shrink-0 items-center">{labelHint}</span>}
-          {readout !== undefined && (
-            <span className={cn("ms-auto max-w-full text-xs tabular-nums 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}
-        aria-describedby={messages.describedBy}
-        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", MARKS_LARGE, 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-caption leading-tight text-muted">
-                  {m.label}
-                </span>
-              )}
-            </span>
-          ))}
-        </div>
-      )}
-      {messages.below}
-    </div>
-  );
-}

package/src/components/sparkline-labels.ts

@@ -1,14 +0,0 @@
-// The English words of ./sparkline, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./sparkline re-exports them.
-
-import type { SparklineLabels } from "./sparkline";
-
-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}`,
-};

package/src/components/sparkline.tsx

@@ -1,322 +0,0 @@
-import type { ComponentPropsWithRef } from "react";
-import { cn } from "../lib/cn";
-import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
-import { useTextSize } from "../theme/text-size";
-import { DEFAULT_SPARKLINE_LABELS } from "./sparkline-labels";
-import { formatWithMinus } from "../lib/minus";
-
-/**
- * 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;
-}
-
-// Defined in ./sparkline-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_SPARKLINE_LABELS };
-
-/**
- * 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-brand",
-  muted: "text-muted",
-  income: "text-money-income",
-  expense: "text-money-expense",
-  net: "text-money-net",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger",
-  info: "text-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<ComponentPropsWithRef<"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 at Normal. Ignored under `fluid`. The drawn box is this × the text
-   *  size's scale (0.32, docs/text-size-harmonization.md §3.2): a sparkline stands beside
-   *  a figure, and a 72 × 24 trend under a 150 % number reads as a speck. The strokes
-   *  stay px (`non-scaling-stroke`), as every chart's do. */
-  width?: number;
-  /** Height in px at Normal, × the scale likewise. */
-  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?: LabelOverride<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) => formatWithMinus(f, 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 { scale } = useTextSize();
-  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}
-      // The drawing stays in its own units (the viewBox); only the box it is shown in
-      // grows, uniformly, so nothing is distorted and the strokes keep their px width.
-      width={fluid ? "100%" : W * scale}
-      height={H * scale}
-      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>
-  );
-}