@ultimat3/ui 24.0.0 → 25.0.0

package/src/components/chart-ticks-view.ts

@@ -0,0 +1,173 @@
+// Axis arithmetic shared by every chart with a value axis: a "nice" scale (steps of 1, 2 or 5 ×
+// 10ⁿ, the only steps a reader can count in their head) and which category keys get a label.
+// Pure, so the server render and an island draw the same axis, and testable with no renderer.
+
+export interface NiceScale {
+  /** The axis' lowest tick — at or below the data's minimum. */
+  readonly min: number;
+  /** The axis' highest tick — at or above the data's maximum. */
+  readonly max: number;
+  readonly step: number;
+  /** `min`, `min + step`, … `max`, as exact decimals. */
+  readonly ticks: readonly number[];
+}
+
+const MANTISSAS = [1, 2, 5] as const;
+
+/** Rounds away binary noise: `0.1 + 0.2` is drawn as `0.3`, never `0.30000000000000004`. */
+const exact = (value: number): number => Number(value.toPrecision(12));
+
+/** The largest step of the 1-2-5 ladder at or below `raw`; 1 for a raw step that is not one. */
+export function niceStep(raw: number): number {
+  if (!Number.isFinite(raw) || raw <= 0) return 1;
+  const exp = Math.floor(Math.log10(raw));
+  const power = 10 ** exp;
+  const fraction = raw / power;
+  let mantissa = 1;
+  for (const candidate of MANTISSAS) if (candidate <= fraction * (1 + 1e-9)) mantissa = candidate;
+  return exact(mantissa * power);
+}
+
+/** The next rung of the ladder above `step`: 1 → 2 → 5 → 10 → 20. */
+function nextStep(step: number): number {
+  const exp = Math.floor(Math.log10(step));
+  const mantissa = Math.round(step / 10 ** exp);
+  if (mantissa === 1) return exact(2 * 10 ** exp);
+  if (mantissa === 2) return exact(5 * 10 ** exp);
+  return exact(10 ** (exp + 1));
+}
+
+/** Fraction digits a tick at `step` needs: 0 for 5 or 500, 1 for 0.5, 2 for 0.02. */
+export function tickDecimals(step: number): number {
+  if (!Number.isFinite(step) || step <= 0) return 0;
+  return Math.max(0, -Math.floor(Math.log10(step) + 1e-9));
+}
+
+/** A flat range has no height to divide: open it by a tenth of its size (or by 1 at zero). */
+function bounds(lo: number, hi: number): readonly [number, number] {
+  const a = Number.isFinite(lo) ? lo : 0;
+  const b = Number.isFinite(hi) ? hi : a;
+  const [low, high] = a <= b ? [a, b] : [b, a];
+  if (high > low) return [low, high];
+  if (low === 0) return [0, 1];
+  const open = Math.abs(low) * 0.1;
+  // Clamped, because a flat range at ±MAX_VALUE opens past float64 into ±Infinity.
+  return [Math.max(-Number.MAX_VALUE, low - open), Math.min(Number.MAX_VALUE, high + open)];
+}
+
+export interface NiceTicksOptions {
+  /**
+   * The data is whole numbers — a count. Steps are then at least 1, so no tick falls between two
+   * values the data can take: "0.4 signups" labels nothing, and it pushed the max off the labels.
+   */
+  readonly integer?: boolean | undefined;
+}
+
+/**
+ * The densest 1-2-5 labelling of `lo..hi` with at most `maxTicks` ticks (read as at least 2):
+ * start at the step that would fit exactly and climb the ladder until the count fits.
+ */
+export function niceTicks(
+  lo: number,
+  hi: number,
+  maxTicks = 6,
+  options: NiceTicksOptions = {},
+): NiceScale {
+  const cap = Math.max(2, Math.floor(maxTicks));
+  const [low, high] = bounds(lo, hi);
+  const fitted = niceStep((high - low) / (cap - 1));
+  // Every rung of the ladder from 1 up is a whole number, so flooring the START at 1 is enough.
+  let step = options.integer === true ? Math.max(1, fitted) : fitted;
+  for (let rung = 0; rung < MAX_RUNGS; rung += 1) {
+    const min = exact(Math.floor(low / step + 1e-9) * step);
+    const max = exact(Math.ceil(high / step - 1e-9) * step);
+    const count = Math.round((max - min) / step) + 1;
+    // Past float64's edge the ladder stops being one: `ceil(hi / step) * step` overflows, the
+    // next rung IS `Infinity`, and `NaN <= cap` is false forever — a LineChart SSR that never
+    // returned. An underflowing step collapses the range to one tick instead. Either way the
+    // data's own two ends are the only honest axis left.
+    if (!(step > 0 && Number.isFinite(step) && Number.isFinite(min) && Number.isFinite(max))) break;
+    if (count < 2) break;
+    if (count <= cap) {
+      const ticks = Array.from({ length: count }, (_, i) => exact(min + i * step));
+      return { min, max, step, ticks };
+    }
+    step = nextStep(step);
+  }
+  return edgeScale(low, high);
+}
+
+/**
+ * Rungs from the smallest subnormal step to the largest finite one: ~632 decades × 3. The loop
+ * already exits at the first non-finite rung; the bound makes termination a fact, not an argument.
+ */
+const MAX_RUNGS = 2_048;
+
+/** The fallback axis: just the data's two ends, which `bounds` has already made finite. */
+function edgeScale(low: number, high: number): NiceScale {
+  const span = high - low;
+  return {
+    min: low,
+    max: high,
+    step: Number.isFinite(span) && span > 0 ? span : Number.MAX_VALUE,
+    ticks: [low, high],
+  };
+}
+
+/**
+ * Which of `count` category keys carry a label, at most `max` of them: an even stride counted
+ * back from the NEWEST key, which is always labelled — on a time axis it is the one people read.
+ * The stride is at least `(count - 1) / (max - 1)` keys, which is what lets a label be capped at
+ * a fixed share of the axis and never touch its neighbour.
+ */
+export function axisLabelIndices(count: number, max: number): readonly number[] {
+  if (count <= 0) return [];
+  const cap = Math.max(2, Math.floor(max));
+  if (count <= cap) return Array.from({ length: count }, (_, i) => i);
+  const stride = Math.ceil((count - 1) / (cap - 1));
+  const out: number[] = [];
+  for (let index = count - 1; index >= 0; index -= stride) out.unshift(index);
+  return out;
+}
+
+/** Category labels a chart under its container breakpoint shows — a 390px phone. */
+export const NARROW_LABELS = 3;
+/** And at or above it. Each label is capped at ⅔ of the narrowest stride, so neither overlaps. */
+export const WIDE_LABELS = 6;
+
+export type LabelEdge = 'start' | 'middle' | 'end';
+
+export interface CategoryLabel {
+  readonly index: number;
+  /** Shown below the container breakpoint (`data-narrow`). */
+  readonly narrow: boolean;
+  /** Shown at or above it (`data-wide`). */
+  readonly wide: boolean;
+  /** The oldest key aligns to the start edge, the newest to the end, so neither leaves the box. */
+  readonly edge: LabelEdge;
+}
+
+/**
+ * Every key that either width labels, oldest first, each flagged with the width that shows it.
+ * The sheet hides by flag, so one server render serves the phone and the desktop with no JS.
+ */
+export function categoryLabels(count: number): readonly CategoryLabel[] {
+  const narrow = new Set(axisLabelIndices(count, NARROW_LABELS));
+  const wide = new Set(axisLabelIndices(count, WIDE_LABELS));
+  const indices = [...new Set([...narrow, ...wide])].sort((a, b) => a - b);
+  return indices.map((index) => ({
+    index,
+    narrow: narrow.has(index),
+    wide: wide.has(index),
+    edge: count === 1 ? 'middle' : index === 0 ? 'start' : index === count - 1 ? 'end' : 'middle',
+  }));
+}
+
+/**
+ * Which of `count` value-axis labels a narrow chart hides: every other one counted down from the
+ * TOP, once there are more than three — the highest tick is the one that bounds the data, so it is
+ * never the one dropped. Hidden labels keep their grid line; only the text goes.
+ */
+export function minorTicks(count: number): readonly boolean[] {
+  return Array.from({ length: count }, (_, i) => count > 3 && (count - 1 - i) % 2 === 1);
+}

package/src/components/data-table-view.ts

@@ -0,0 +1,68 @@
+// Where each DataTable value is visible, by the table's own width. A column's `priority` hides its
+// cell in a narrow table; the row's "more" disclosure shows the same value for exactly the widths
+// the cell is gone, so no value is ever on screen twice and none is ever nowhere.
+
+import { invalidValueError } from '../errors';
+
+/**
+ * The roles every DataTable element re-declares. Redundant on a table laid out as a table, and
+ * deliberately so: below `sm` the card view changes `display` on the table, its row groups, rows
+ * and cells, and WebKit drops the implicit table semantics of an element whose `display` changed —
+ * a screen reader then meets loose text with no row, no column and no header. The explicit role is
+ * the documented remedy, and ONE constant is the one place the redundancy is argued, rather than a
+ * lint suppression on every element.
+ */
+export const TABLE_ROLES = {
+  rowgroup: 'rowgroup',
+  row: 'row',
+  columnheader: 'columnheader',
+  cell: 'cell',
+} as const;
+
+/** 1 is always a cell; 2 is a cell from `md` up; 3 from `lg` up. Widths are the TABLE's. */
+export const COLUMN_PRIORITIES = [1, 2, 3] as const;
+export type ColumnPriority = (typeof COLUMN_PRIORITIES)[number];
+
+/**
+ * The `data-priority` / `data-more` values the stylesheet's width rules select on. Attributes, not
+ * classes: they are state the markup carries, and a test can read them where a CSS-module class
+ * resolves to nothing under `bun test`.
+ */
+export type PriorityAttr = '2' | '3';
+/** The rung the disclosure shows below — the widest range any of its columns is hidden over. */
+export type MoreUntil = 'md' | 'lg';
+
+/**
+ * The priority a column declared, refused when it is not one: the type stops a TypeScript caller,
+ * and nothing stops a column list parsed from config — a `priority: 4` used to be a column shown
+ * at every width with no word that it was not what was asked for.
+ */
+export function columnPriority(priority: unknown): ColumnPriority {
+  if (priority === undefined) return 1;
+  if (priority === 1 || priority === 2 || priority === 3) return priority;
+  throw invalidValueError('DataTable', priority, 'a column priority of 1, 2 or 3');
+}
+
+/** What a cell (and its header) carries; priority 1 carries nothing and is never hidden. */
+export function priorityAttr(priority: ColumnPriority): PriorityAttr | undefined {
+  return priority === 1 ? undefined : `${priority}`;
+}
+
+export interface MoreColumn<C> {
+  /** The columns whose values the disclosure may hold, in declaration order. */
+  readonly columns: readonly C[];
+  readonly until: MoreUntil;
+}
+
+/**
+ * The trailing "more" column, or `undefined` when every column is priority 1 — a table that
+ * hides nothing gets no extra column, no extra header and no extra bytes.
+ */
+export function moreColumn<C extends { readonly priority?: unknown }>(
+  columns: readonly C[],
+): MoreColumn<C> | undefined {
+  const hidden = columns.filter((column) => columnPriority(column.priority) > 1);
+  if (hidden.length === 0) return undefined;
+  const widest = Math.max(...hidden.map((column) => columnPriority(column.priority)));
+  return { columns: hidden, until: widest === 3 ? 'lg' : 'md' };
+}

package/src/components/donut-chart-view.ts

@@ -0,0 +1,120 @@
+// The arc maths of a DonutChart (and a Gauge's track): where each segment starts and ends, the
+// annular-sector path that draws it, and where its marker sits. Angles are radians from twelve
+// o'clock, clockwise — the way a reader goes round a clock face. Pure, so two renders agree.
+
+import { svgNumber } from './chart-frame-view';
+
+/** A 200 × 200 box; the ring is 32 units wide, which leaves room for a centre label inside. */
+export const DONUT = { size: 200, centre: 100, outer: 96, inner: 64, marker: 6 } as const;
+
+const TURN = Math.PI * 2;
+/** The gap between two neighbours, so a segment boundary reads without relying on colour. */
+const GAP = 0.03;
+/** The least sweep a non-zero segment is drawn with: a 0.1% share is still a visible sliver. */
+const MIN_SWEEP = 0.012;
+
+export interface CirclePoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export function pointOnCircle(cx: number, cy: number, r: number, angle: number): CirclePoint {
+  return { x: cx + r * Math.sin(angle), y: cy - r * Math.cos(angle) };
+}
+
+const at = (p: CirclePoint): string => `${svgNumber(p.x)},${svgNumber(p.y)}`;
+
+function sector(cx: number, cy: number, outer: number, inner: number, a0: number, a1: number) {
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  const o0 = pointOnCircle(cx, cy, outer, a0);
+  const o1 = pointOnCircle(cx, cy, outer, a1);
+  const i1 = pointOnCircle(cx, cy, inner, a1);
+  const i0 = pointOnCircle(cx, cy, inner, a0);
+  return (
+    `M${at(o0)} A${outer},${outer} 0 ${large} 1 ${at(o1)} ` +
+    `L${at(i1)} A${inner},${inner} 0 ${large} 0 ${at(i0)} Z`
+  );
+}
+
+/**
+ * The ring between radii `inner` and `outer` from angle `a0` to `a1`. A sweep of a whole turn is
+ * drawn as two halves: an SVG arc from a point back to itself has no direction and draws nothing.
+ */
+export function annularSector(
+  cx: number,
+  cy: number,
+  outer: number,
+  inner: number,
+  a0: number,
+  a1: number,
+): string {
+  if (!(a1 > a0)) return '';
+  if (a1 - a0 >= TURN - 1e-9) {
+    const half = a0 + Math.PI;
+    return `${sector(cx, cy, outer, inner, a0, half)} ${sector(cx, cy, outer, inner, half, a0 + TURN)}`;
+  }
+  return sector(cx, cy, outer, inner, a0, a1);
+}
+
+export interface DonutArc {
+  /** This value's part of the positive total; 0 for a value that is not drawn. */
+  readonly share: number;
+  /** The segment's slot on the ring, before the gap is taken off. */
+  readonly start: number;
+  readonly end: number;
+  /** What is actually drawn: the slot less half a gap at each end. */
+  readonly drawnStart: number;
+  readonly drawnEnd: number;
+  readonly path: string;
+  /** Mid-ring, mid-segment: where a focusable segment's hit sits. `null` for a share of 0. */
+  readonly anchor: CirclePoint | null;
+  /** The anchor again, or `null` where the segment is too narrow to hold a marker. */
+  readonly marker: CirclePoint | null;
+}
+
+const positive = (value: number): number => (Number.isFinite(value) && value > 0 ? value : 0);
+
+/** One arc per value, in order from twelve o'clock; a non-positive value is listed, not drawn. */
+export function donutArcs(values: readonly number[]): readonly DonutArc[] {
+  const { centre, outer, inner, marker } = DONUT;
+  const total = values.reduce((sum, value) => sum + positive(value), 0);
+  const drawn = values.filter((value) => positive(value) > 0).length;
+  const gap = drawn > 1 ? GAP : 0;
+  const mid = (outer + inner) / 2;
+  let cursor = 0;
+  return values.map((value): DonutArc => {
+    const share = total > 0 ? positive(value) / total : 0;
+    const start = cursor;
+    const end = cursor + share * TURN;
+    cursor = end;
+    if (share === 0) {
+      return {
+        share,
+        start,
+        end,
+        drawnStart: start,
+        drawnEnd: start,
+        path: '',
+        anchor: null,
+        marker: null,
+      };
+    }
+    const centreAngle = (start + end) / 2;
+    const sweep = Math.max(MIN_SWEEP, end - start - gap);
+    const drawnStart = gap === 0 ? start : centreAngle - sweep / 2;
+    const drawnEnd = gap === 0 ? end : centreAngle + sweep / 2;
+    // A marker needs about three of its own widths of arc, or it spills onto the neighbours.
+    const fits = sweep * mid >= marker * 3;
+    const anchor = pointOnCircle(centre, centre, mid, centreAngle);
+    return {
+      share,
+      start,
+      end,
+      drawnStart,
+      drawnEnd,
+      path: annularSector(centre, centre, outer, inner, drawnStart, drawnEnd),
+      anchor,
+      marker: fits ? anchor : null,
+    };
+  });
+}

package/src/components/file-input-view.ts

@@ -85,7 +85,7 @@ const BYTE_UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte'] as c
 const BYTE_STEP = 1000;
 
 /** A size a human reads, in the viewer's locale — never a hand-built "1.2 MB" string. */
-export function formatBytes(bytes: number, locale: string): string {
+export function formatFileSize(bytes: number, locale: string): string {
   const safe = Number.isFinite(bytes) && bytes > 0 ? bytes : 0;
   let value = safe;
   let index = 0;

package/src/components/gauge-view.ts

@@ -0,0 +1,43 @@
+// The dial of a Gauge, apart from its markup: a 270° ring open at the bottom, and the share of it
+// a value fills. `Gauge` takes that share from `meterShare` — one rule for "value of max", so a
+// Gauge and a Meter beside it can never disagree about what 7 of 4 draws.
+
+import { annularSector } from './donut-chart-view';
+
+/**
+ * 200 wide, cropped to 172 tall: the dial's open quarter is at the bottom, and the box ends just
+ * under the ring's lowest point (`gauge-view.test.ts` holds that) instead of spending the strip.
+ */
+export const GAUGE = {
+  width: 200,
+  height: 172,
+  centre: 100,
+  outer: 92,
+  inner: 74,
+  /** Seven-thirty: -135° from twelve o'clock. */
+  from: -Math.PI * 0.75,
+  sweep: Math.PI * 1.5,
+} as const;
+
+const clampShare = (share: number): number =>
+  Number.isFinite(share) ? Math.min(1, Math.max(0, share)) : 0;
+
+/** The angle where a fill of `share` stops. */
+export function gaugeFillEnd(share: number): number {
+  return GAUGE.from + clampShare(share) * GAUGE.sweep;
+}
+
+export interface GaugeArcs {
+  readonly track: string;
+  /** `''` at a share of 0 — an empty dial is the track alone, not a zero-width sliver. */
+  readonly fill: string;
+}
+
+export function gaugeArcs(share: number): GaugeArcs {
+  const { centre, outer, inner, from } = GAUGE;
+  const end = gaugeFillEnd(share);
+  return {
+    track: annularSector(centre, centre, outer, inner, from, gaugeFillEnd(1)),
+    fill: annularSector(centre, centre, outer, inner, from, end),
+  };
+}

package/src/components/heading-node.tsx

@@ -0,0 +1,62 @@
+// The heading element a composite renders, written out one intrinsic per level. `<Heading>` over
+// `headingTag(level)` is a string to the server's JSX factory and a COMPONENT to the island
+// build's Solid transform, which calls it and throws (#488, `intrinsic-root.test.ts`). PageHeader,
+// Section and Accordion all render through this, so the switch exists once.
+
+import type { JSX } from 'solid-js';
+import type { HeadingTag } from './heading-level';
+
+export interface HeadingNodeAttrs {
+  readonly id?: string | undefined;
+  readonly class?: string | undefined;
+}
+
+/**
+ * `tag` comes from `headingTag(level)`, resolved once by the caller so an off-scale level still
+ * throws `X_UI_INVALID_VALUE` there. `content` is an accessor: read inside the element, it stays
+ * reactive in an island.
+ */
+export function headingNode(
+  tag: HeadingTag,
+  attrs: HeadingNodeAttrs,
+  content: () => JSX.Element,
+): JSX.Element {
+  switch (tag) {
+    case 'h1':
+      return (
+        <h1 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h1>
+      );
+    case 'h2':
+      return (
+        <h2 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h2>
+      );
+    case 'h3':
+      return (
+        <h3 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h3>
+      );
+    case 'h4':
+      return (
+        <h4 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h4>
+      );
+    case 'h5':
+      return (
+        <h5 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h5>
+      );
+    case 'h6':
+      return (
+        <h6 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h6>
+      );
+  }
+}

package/src/components/image-source.ts

@@ -41,7 +41,7 @@ interface Candidate {
  * byte-stable whatever order the caller built the list in. `undefined` for an
  * empty list — the component omits the attribute rather than emitting an empty one.
  */
-export function srcsetFor(variants: readonly ImageVariant[] | undefined): string | undefined {
+export function variantSrcset(variants: readonly ImageVariant[] | undefined): string | undefined {
   if (variants === undefined || variants.length === 0) return undefined;
 
   const candidates = variants.map(toCandidate);
@@ -239,9 +239,9 @@ export interface ImageSourceSet {
 export function sourceSetsFor(sources: ImageSources | undefined): readonly ImageSourceSet[] {
   if (sources === undefined) return [];
   const sets: ImageSourceSet[] = [];
-  const avif = srcsetFor(sources.avif);
+  const avif = variantSrcset(sources.avif);
   if (avif !== undefined) sets.push({ type: 'image/avif', srcset: avif });
-  const webp = srcsetFor(sources.webp);
+  const webp = variantSrcset(sources.webp);
   if (webp !== undefined) sets.push({ type: 'image/webp', srcset: webp });
   return sets;
 }

package/src/components/line-chart-view.ts

@@ -0,0 +1,153 @@
+// The geometry of a LineChart / AreaChart, apart from its markup: the nice value scale over every
+// series, each point's position, the line through each unbroken run and the area under it. Pure,
+// so a server render and an island draw one chart; `null` is a gap, never a dive to zero.
+
+import type { ChartSeries } from './chart-frame-view';
+import { finiteOrNull } from './chart-frame-view';
+import type { NiceScale } from './chart-ticks-view';
+import { niceTicks } from './chart-ticks-view';
+
+/**
+ * 600 × 200, 3:1 — a dashboard row, not a hero. `pad` keeps a marker on the outermost point (and
+ * a stroke on the top grid line) inside the box. Labels are HTML outside the svg, like BarChart's
+ * (issue 494): inside a viewBox they would scale with it.
+ */
+export const LINE_CHART = { width: 600, height: 200, pad: 8 } as const;
+
+/** Past this many keys a marker per point is a second, lumpier line; only the newest is marked. */
+export const MARKERS_ON_EVERY_POINT_UP_TO = 24;
+
+export interface LinePoint {
+  /** The key's index — a gap skips an index, so this is not the point's position in the array. */
+  readonly index: number;
+  readonly x: number;
+  readonly y: number;
+  readonly value: number;
+}
+
+export interface LineSeriesGeometry {
+  readonly points: readonly LinePoint[];
+  /** `M … L …`, one `M` per unbroken run; `''` for a series with no value. */
+  readonly line: string;
+  /** Each run of two or more points closed down to the baseline; `''` when there is none. */
+  readonly area: string;
+}
+
+export interface LineTick {
+  readonly value: number;
+  readonly y: number;
+}
+
+export interface LineLayout {
+  readonly scale: NiceScale;
+  readonly ticks: readonly LineTick[];
+  /** The y of zero — or of the axis edge nearest it, for a range that does not cross zero. */
+  readonly baselineY: number;
+  /** The x of every key, gap or not — where its axis label sits. */
+  readonly keyX: readonly number[];
+  readonly series: readonly LineSeriesGeometry[];
+}
+
+export interface LineLayoutInput {
+  readonly keys: readonly string[];
+  readonly series: readonly ChartSeries[];
+  /** Start the axis at zero (the honest default for counts) or fit it to the data. */
+  readonly zero: boolean;
+  readonly maxTicks: number;
+}
+
+const round = (value: number): number => Math.round(value * 10) / 10;
+
+/**
+ * Every drawn value is a whole number — a count. Detected rather than asked for: a prop is one
+ * more thing a caller forgets, and the data already says it. One fraction anywhere turns it off.
+ */
+function allIntegers(input: LineLayoutInput): boolean {
+  return input.series.every((series) =>
+    input.keys.every((_, i) => {
+      const value = finiteOrNull(series.values[i]);
+      return value === null || Number.isInteger(value);
+    }),
+  );
+}
+
+function extent(input: LineLayoutInput): readonly [number, number] {
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const series of input.series) {
+    for (let i = 0; i < input.keys.length; i += 1) {
+      const value = finiteOrNull(series.values[i]);
+      if (value === null) continue;
+      lo = Math.min(lo, value);
+      hi = Math.max(hi, value);
+    }
+  }
+  if (lo > hi) return [0, 1];
+  return input.zero ? [Math.min(0, lo), Math.max(0, hi)] : [lo, hi];
+}
+
+function runsOf(points: readonly LinePoint[]): LinePoint[][] {
+  const runs: LinePoint[][] = [];
+  let previous = -2;
+  for (const point of points) {
+    if (point.index !== previous + 1 || runs.length === 0) runs.push([]);
+    runs.at(-1)?.push(point);
+    previous = point.index;
+  }
+  return runs;
+}
+
+const at = (point: LinePoint): string => `${point.x},${point.y}`;
+
+export function lineLayout(input: LineLayoutInput): LineLayout {
+  const [lo, hi] = extent(input);
+  const scale = niceTicks(lo, hi, input.maxTicks, { integer: allIntegers(input) });
+  const { width, height, pad } = LINE_CHART;
+  // Halved on both sides, which leaves the ratio exact (a power-of-two scale commutes with
+  // rounding): `max - min` over the full float64 range overflows to Infinity, and the bottom
+  // tick's `Infinity / Infinity` drew `y="NaN"`.
+  const half = scale.max / 2 - scale.min / 2;
+  const yOf = (value: number): number =>
+    round(pad + ((scale.max / 2 - value / 2) / half) * (height - pad * 2));
+  const count = input.keys.length;
+  const xOf = (index: number): number =>
+    count <= 1 ? width / 2 : round(pad + (index * (width - pad * 2)) / (count - 1));
+  const baselineY = yOf(Math.min(scale.max, Math.max(scale.min, 0)));
+
+  const series = input.series.map((one): LineSeriesGeometry => {
+    const points: LinePoint[] = [];
+    for (let index = 0; index < count; index += 1) {
+      const value = finiteOrNull(one.values[index]);
+      if (value !== null) points.push({ index, x: xOf(index), y: yOf(value), value });
+    }
+    const runs = runsOf(points);
+    const line = runs
+      .map((run) => run.map((point, i) => `${i === 0 ? 'M' : 'L'}${at(point)}`).join(' '))
+      .join(' ');
+    const area = runs
+      .filter((run) => run.length > 1)
+      .map((run) => {
+        const first = run[0] as LinePoint;
+        const last = run.at(-1) as LinePoint;
+        const top = run.map((point) => `L${at(point)}`).join(' ');
+        return `M${first.x},${baselineY} ${top} L${last.x},${baselineY} Z`;
+      })
+      .join(' ');
+    return { points, line, area };
+  });
+
+  return {
+    scale,
+    ticks: scale.ticks.map((value) => ({ value, y: yOf(value) })),
+    baselineY,
+    keyX: input.keys.map((_, index) => xOf(index)),
+    series,
+  };
+}
+
+/** The points that carry a marker: all of them on a short series, only the newest on a dense one. */
+export function markedPoints(points: readonly LinePoint[], keyCount: number): readonly LinePoint[] {
+  if (keyCount <= MARKERS_ON_EVERY_POINT_UP_TO) return points;
+  const last = points.at(-1);
+  return last === undefined ? [] : [last];
+}

package/src/components/money-view.ts

@@ -1,12 +1,7 @@
 // Pure formatting core behind <Money>. Split out so the rule "format through the
 // injected locale, never an ambient default" is testable without a renderer.
 
-import {
-  type FormatMoneyOptions,
-  formatMoney,
-  type Money,
-  money as makeMoney,
-} from '@ultimat3/money';
+import { type FormatMoneyOptions, formatMoney, fromMinor, type Money } from '@ultimat3/money';
 import { invalidValueError } from '../errors';
 
 /** A bare number is minor units in the context currency. */
@@ -36,7 +31,7 @@ export function toMoney(value: MoneyInput, currency: string): Money {
       throw invalidValueError('Money', value, 'an integer number of minor units');
     }
     // Delegated so the currency code is validated by the one authority on it.
-    return makeMoney(value, currency);
+    return fromMinor(value, currency);
   }
   if (!Number.isInteger(value.minor)) {
     throw invalidValueError('Money', value, 'an integer number of minor units');