@umriss-ui/charts 0.5.0 → 0.7.0

package/docs/llms-full.md

@@ -0,0 +1,4031 @@
+# @umriss-ui/charts 0.7.0
+
+> Canvas-based chart library - few chart kinds, uncompromisingly clean, high performance.
+
+Install with `pnpm add @umriss-ui/charts`. This text is generated from the package's demo (https://romanhaendler.github.io/umriss-ui/charts/): every page with its import line, its examples - the source exactly as it runs, with the package name where the demo imports its own source - its props tables generated from the code, and why it is built the way it is. The pages index stands in https://romanhaendler.github.io/umriss-ui/charts/llms.txt.
+
+## Chart
+
+The container and its axes: what is drawn on, and what the drawing is measured against.
+
+### Chart
+
+The container: it holds the data, measures its host and draws its series on canvas - series and axes are its children, and their order in the JSX is the drawing order.
+
+```ts
+import { Chart } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/chart
+
+#### Examples
+
+##### Mixed series kinds
+
+```tsx
+/* One chart, four series kinds, shared axes: inflow and outflow as grouped bars,
+   a corridor as a band area with a gap, the stock as a line and samples as a
+   scatter.
+
+   The order in the JSX decides what lies over what - and at the same time the
+   palette colour. That is the whole composition rule: a series is an element,
+   not an entry in a configuration object. */
+
+import { Area, Bar, Chart, Legend, Line, Scatter, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { mixedData, type MixedPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function Mixed() {
+  return (
+    <Chart data={mixedData} height={320} ariaLabel="Bars, area, line and scatter in one chart">
+      <XAxis accessor={(d: MixedPoint) => d.t} label="Period" tickCount={7} />
+      <YAxis accessor={(d: MixedPoint) => d.stock} label="Quantity" />
+      <Bar accessor={(d: MixedPoint) => d.inflow} name="Inflow" />
+      <Bar accessor={(d: MixedPoint) => d.outflow} name="Outflow" />
+      <Area
+        accessor={(d: MixedPoint) => d.corridorUpper}
+        baseline={(d: MixedPoint) => d.corridorLower}
+        name="Corridor (with a gap)"
+      />
+      <Line accessor={(d: MixedPoint) => d.stock} name="Stock" strokeWidth={2} />
+      <Scatter accessor={(d: MixedPoint) => d.sample} name="Samples" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Size and resize
+
+```tsx
+/* 100 % width in a draggable container, a fixed size beside it, and a chart in a
+   collapsible surrounding.
+
+   The three cases a chart meets in an application, and the one thing they have
+   in common: the chart measures its host rather than being told a pixel. A
+   container that collapses to nothing and comes back has to redraw at the width
+   it finds, not at the one it had. */
+
+import { useState } from "react";
+import { Chart, Line, XAxis, YAxis } from "@umriss-ui/charts";
+import { basicData, type Point } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function Sizes() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <>
+      <div className="resizable">
+        <Chart data={basicData} height={200} ariaLabel="Full width, draggable">
+          <XAxis accessor={(d: Point) => d.t} />
+          <YAxis accessor={(d: Point) => d.a} />
+          <Line accessor={(d: Point) => d.a} name="Series A" />
+        </Chart>
+      </div>
+      <button className="demo-button" onClick={() => setCollapsed((v) => !v)}>{collapsed ? "Expand" : "Collapse"}</button>
+      {!collapsed && (
+        <div className="side-by-side">
+          <Chart data={basicData} width={420} height={180} ariaLabel="Fixed size">
+            <XAxis accessor={(d: Point) => d.t} />
+            <YAxis accessor={(d: Point) => d.a} />
+            <Line accessor={(d: Point) => d.a} name="Series A" />
+          </Chart>
+          <div className="narrow">
+            <Chart data={basicData} height={180} ariaLabel="Narrow container">
+              <XAxis accessor={(d: Point) => d.t} />
+              <YAxis accessor={(d: Point) => d.a} />
+              <Line accessor={(d: Point) => d.a} name="Series A" />
+            </Chart>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Nothing to show
+
+```tsx
+/* A chart with nothing to show says so. No data, only gaps, or every series
+   hidden: the axes and the frame stay where they are, and the plot area says
+   "No data" - or whatever the caller puts into `empty`, in any language. An
+   empty frame that says nothing looks like a chart of a line that stood
+   still. */
+
+import { Chart, Line, XAxis, YAxis } from "@umriss-ui/charts";
+
+interface Reading {
+  t: number;
+  celsius: number;
+}
+
+const nothing: Reading[] = [];
+
+function Furnace({ empty }: { empty?: string }) {
+  return (
+    <Chart data={nothing} height={220} ariaLabel="A furnace without readings" empty={empty}>
+      <XAxis accessor={(d: Reading) => d.t} time />
+      <YAxis accessor={(d: Reading) => d.celsius} label="°C" />
+      <Line accessor={(d: Reading) => d.celsius} name="Furnace 1" />
+    </Chart>
+  );
+}
+
+export default function Empty() {
+  return (
+    <div className="pair">
+      <div>
+        <p className="pair-caption">no empty - the default</p>
+        <Furnace />
+      </div>
+      <div>
+        <p className="pair-caption">empty="Furnace 1 is not reporting"</p>
+        <Furnace empty="Furnace 1 is not reporting" />
+      </div>
+    </div>
+  );
+}
+```
+
+##### Cursor sync
+
+```tsx
+/* Three charts of one kiln, stacked: its temperature, the flue gas and the gas
+   it burns. `syncId` gives them one pointer - hover one, and the other two draw
+   their crosshair at the same instant; the tooltip stays where the pointer is.
+   Zoom is not shared by the library: the three pass one controlled domain
+   between them, so a zoom in any of them zooms all three. Each plot begins
+   where its own y axis ends; labels of one width - three figures here - keep
+   the three crosshairs in one column. */
+
+import { useState } from "react";
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { kilnData, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const CHANNELS = [
+  { name: "Kiln", unit: "°C", value: (d: KilnPoint) => d.temperature },
+  { name: "Flue gas", unit: "°C", value: (d: KilnPoint) => d.flue },
+  { name: "Gas", unit: "m³/h", value: (d: KilnPoint) => d.gas },
+] as const;
+
+export default function CursorSync() {
+  const [domain, setDomain] = useState<"data" | readonly [number, number]>("data");
+  return (
+    <div>
+      {CHANNELS.map((c) => (
+        <Chart key={c.name} data={kilnData} height={140} syncId="kiln" ariaLabel={`${c.name} across a week`}>
+          <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} />
+          <YAxis accessor={c.value} label={c.unit} domain="visible" tickCount={4} />
+          <Line accessor={c.value} name={c.name} />
+          <Tooltip mode="x" />
+        </Chart>
+      ))}
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### By keyboard and screen reader
+
+```tsx
+/* A chart with a tooltip is one tab stop (ADR-0030). Tab into it: the Active
+   point stands at the newest value, ← and → walk the readings, ↑ and ↓ choose
+   the series read first, Home and End go to the ends, Escape clears. Where the
+   axis is zoomable, + and − zoom, Shift with ← or → pans, 0 shows the week
+   again. A screen reader hears the values once the keys rest, and the plot
+   is described by a summary of what it shows.
+
+   The words are the chart's own register (ADR-0031): English without a value,
+   German from `@umriss-ui/charts/wording/de`. */
+
+import { useState } from "react";
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
+import { kilnData, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function KeyboardAndScreenReader() {
+  const [domain, setDomain] = useState<"data" | readonly [number, number]>("data");
+  return (
+    <div>
+      <Chart data={kilnData} height={200} ariaLabel="Kiln and flue gas across a week">
+        <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} />
+        <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" />
+        <Line accessor={(d: KilnPoint) => d.temperature} name="Kiln" />
+        <Line accessor={(d: KilnPoint) => d.flue} name="Flue gas" />
+        <Tooltip mode="x" />
+      </Chart>
+      <Chart
+        data={kilnData}
+        height={200}
+        ariaLabel="Ofen und Rauchgas über eine Woche"
+        wording={GERMAN_CHARTS_WORDING}
+      >
+        <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} />
+        <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" />
+        <Line accessor={(d: KilnPoint) => d.temperature} name="Ofen" />
+        <Line accessor={(d: KilnPoint) => d.flue} name="Rauchgas" />
+        <Tooltip mode="x" />
+      </Chart>
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Told apart without colour
+
+```tsx
+/* Four courses a reader has to tell apart - and colour is not enough for
+   every reader, nor for a grey printout. With `encoding="marks"` each series
+   carries a dash pattern and a marker shape as well as its colour, chosen by
+   the same palette place: the first stays solid with circles, the second is
+   dashed with squares, the third dotted with triangles, and so on. The legend's
+   chips show the same.
+
+   Left without it, as every chart is by default; right with it. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { configData, type Point } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+function Courses({ encoding }: { encoding?: "marks" }) {
+  return (
+    <Chart data={configData} height={240} ariaLabel="Four courses" encoding={encoding}>
+      <XAxis accessor={(d: Point) => d.t} label="Hour" />
+      <YAxis accessor={(d: Point) => d.a} />
+      <Line accessor={(d: Point) => d.a} name="Line A" />
+      <Line accessor={(d: Point) => d.b} name="Line B" />
+      <Line accessor={(d: Point) => d.c} name="Line C" />
+      <Line accessor={(d: Point) => d.d} name="Line D" />
+      <Legend />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+
+export default function ToldApartWithoutColour() {
+  return (
+    <div className="pair">
+      <div>
+        <p className="pair-caption">by colour - the default</p>
+        <Courses />
+      </div>
+      <div>
+        <p className="pair-caption">encoding="marks"</p>
+        <Courses encoding="marks" />
+      </div>
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Marks on every kind
+
+```tsx
+/* Encoding by marks on every kind in one chart: the bars take a hatch across
+   their fill, the corridor a dash on its outline and a hatch in its own
+   colour, the line its dash and markers, the samples their shape - each by
+   its palette place, so the pairing of colour and mark is the same in every
+   chart of an application. */
+
+import { Area, Bar, Chart, Legend, Line, Scatter, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { mixedData, type MixedPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function MarksOnEveryKind() {
+  return (
+    <Chart data={mixedData} height={320} ariaLabel="Bars, area, line and scatter, told apart by marks" encoding="marks">
+      <XAxis accessor={(d: MixedPoint) => d.t} label="Period" tickCount={7} />
+      <YAxis accessor={(d: MixedPoint) => d.stock} label="Quantity" />
+      <Bar accessor={(d: MixedPoint) => d.inflow} name="Inflow" />
+      <Bar accessor={(d: MixedPoint) => d.outflow} name="Outflow" />
+      <Area
+        accessor={(d: MixedPoint) => d.corridorUpper}
+        baseline={(d: MixedPoint) => d.corridorLower}
+        name="Corridor"
+      />
+      <Line accessor={(d: MixedPoint) => d.stock} name="Stock" strokeWidth={2} />
+      <Scatter accessor={(d: MixedPoint) => d.sample} name="Samples" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Bands, limits and cells
+
+```tsx
+/* What a plant screen says in colour alone - a state, a tolerance, a verdict
+   per cell - told by marks as well. Each state is hatched by its name, in the
+   order the names first come (the first plain), the tolerance band is
+   hatched in its own colour, and a matrix hatches each step of its
+   colouring. A reader who
+   cannot tell the fault's red from the setup's amber still tells the hatches
+   apart, and the legend shows which is which. */
+
+import { Chart, Legend, LimitBand, LimitLine, Line, Matrix, StateBand, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { MACHINES, PLANT_STATES, matrixData, shiftData, type CellPoint, type StatePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function BandsLimitsAndCells() {
+  return (
+    <div className="side-by-side">
+      <Chart data={shiftData} height={280} ariaLabel="Furnace temperature against its tolerance above its states" encoding="marks">
+        <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" tickCount={4} />
+        <YAxis accessor={(d: StatePoint) => d.temperature} domain={[740, 900]} label="°C" />
+        <YAxis id="lane" position="right" accessor={() => 0} domain={[0, 5]} ticks={[0.45]} tickFormat={() => "Furnace 1"} />
+        <LimitBand from={780} to={820} severity="warning" label="Tolerance" />
+        <LimitLine value={860} severity="alarm" label="Alarm" />
+        <StateBand
+          accessor={(d: StatePoint) => d.m1}
+          states={PLANT_STATES}
+          yAxisId="lane"
+          laneFrom={0}
+          laneTo={0.9}
+          name="Furnace 1"
+        />
+        <Line accessor={(d: StatePoint) => d.temperature} name="Temperature" strokeWidth={1.75} />
+        <Legend placement="top" />
+        <Tooltip mode="x" />
+      </Chart>
+      <Chart data={matrixData} height={280} ariaLabel="OEE per machine and hour, by assessment and by marks" encoding="marks">
+        <XAxis accessor={(d: CellPoint) => d.hour} ticks={[0, 6, 12, 18]} tickFormat={(v) => `${v}:00`} label="Hour" />
+        <YAxis
+          accessor={(d: CellPoint) => d.machine}
+          ticks={MACHINES.map((_, i) => i)}
+          tickFormat={(v) => MACHINES[v] ?? ""}
+        />
+        <Matrix
+          accessor={(d: CellPoint) => d.machine}
+          value={(d: CellPoint) => d.oee}
+          coloring={{
+            kind: "assessment",
+            limits: {
+              limits: [
+                { value: 70, side: "lower", severity: "warning" },
+                { value: 40, side: "lower", severity: "alarm" },
+              ],
+            },
+          }}
+          name="OEE"
+        />
+        <Legend placement="top" />
+        <Tooltip mode="nearest" />
+      </Chart>
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `ChartProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` (required) | `readonly T[]` | — | Shared data basis (required); access only through accessors (R-2.4). |
+| `width` | `number \| "100%"` | — | Width in CSS pixels, or `"100%"` for the host's. Without a value the chart measures its host and follows it through a ResizeObserver. |
+| `height` | `number` | — | Height in CSS pixels; 300 without a value. Unlike the width, the chart does not take its host's. |
+| `padding` | `number \| Partial<Padding>` | — | Outer spacing of the plot area in CSS pixels. |
+| `ariaLabel` | `string` | — | Required in DEV through a warning (R-7.6). |
+| `className` | `string` | — | Goes to the root element, as it does everywhere in this workspace. |
+| `style` | `CSSProperties` | — | Goes to the root element. The plot area is measured, never styled from here: a height set past the component is a height the scene does not know about. |
+| `empty` | `ReactNode` | — | Shown in the middle of the plot area when no visible series has a point to show - no data, only gaps, or every series hidden. Axes and frame stay. Without a value the wording's `empty`; this prop wins over it. |
+| `wording` | `Partial<ChartsWording>` | — | The chart's words (ADR-0031): English without a value, entries left out fall back to English. German: `GERMAN_CHARTS_WORDING` from `@umriss-ui/charts/wording/de`. |
+| `encoding` | `"color" \| "marks"` | — | How series are told apart. `"color"` (the default): by their colour. `"marks"`: by a dash and a marker shape as well - a line, an area and a scatter -, and by a hatch - a bar, a state, a matrix cell, a limit band -, chosen by the same palette place as the colour, so that a reader who does not see the colours still tells them apart; the legend's chips show the same. A caller's own `dash` wins over the place's. |
+| `syncId` | `string` | — | Charts with the same id share the pointer's x position, in domain units: each draws its crosshair there, the tooltip stays with the chart under the pointer. Zoom is not shared - give every chart the same controlled `domain`. |
+| `onPerf` | `(perf: ChartPerf) => void` | — | Instrumentation for the benchmark page (R-5.1); not needed otherwise. |
+| `children` | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it (R-2.1), and the order in the JSX is the drawing order. |
+
+#### Why it is like this
+
+##### Every scale is affine, and the draw loop relies on it
+
+A scale here is a slope and an offset, never a callback the loop asks per point. At a million points the difference is not a micro-optimisation but the difference between a chart and a freeze: the loop reads two numbers and multiplies. Everything that is not affine - a log axis, a category scale - is therefore not a scale in this library but a mapping that happens earlier, in materialisation. See `docs/adr/0001-affine-scale-contract.md`.
+
+##### Two layers, and a hover touches only one
+
+The series lie on one canvas, crosshair and markers on a second above it. A hover redraws the overlay and leaves the series where they are - which is why the frame rate stays at sixty while the pointer travels over a million points. The benchmark page measures exactly that.
+
+##### Canvas for the marks, DOM for everything that is read
+
+Axes, ticks, labels, legend and tooltip are elements. They can be selected, read by a screen reader, styled with tokens and found by a test. Only what would be thousands of nodes - the marks themselves - is drawn.
+
+### Axis
+
+What a value is measured against: extent, ticks and labelling, several per orientation - and an operating time axis that leaves the empty hours out and says so.
+
+```ts
+import { XAxis, YAxis, operatingCalendar } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/axis
+
+#### Examples
+
+##### Domain, ticks and tooltip
+
+```tsx
+/* A fixed domain [0, 100], a tickFormat of its own, markers `always`, a custom
+   tooltip through the render prop, mode `nearest`.
+
+   The explicit type argument on `Tooltip<Point>` is what makes the hit fully
+   typed in the render prop - without it the callback would take the widest
+   shape the container can offer. */
+
+import { useMemo } from "react";
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import type { TooltipHit } from "@umriss-ui/charts";
+import { configData, type Point } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+function CustomTooltip({ hit }: { hit: TooltipHit<Point> }) {
+  const point = hit.points[0];
+  return (
+    <div className="custom-tooltip">
+      <strong>Index {hit.xValue}</strong>
+      {point === undefined ? null : (
+        <span>
+          {point.seriesName}: {point.yValue.toFixed(2)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default function Configuration() {
+  const configFormat = useMemo(() => (v: number) => `${v.toFixed(0)} pt`, []);
+
+  return (
+    <Chart
+      data={configData}
+      height={280}
+      padding={{ top: 12, right: 16, bottom: 8, left: 8 }}
+      ariaLabel="Configured course with a fixed domain"
+    >
+      <XAxis accessor={(d: Point) => d.t} label="Index" tickCount={6} />
+      <YAxis accessor={(d: Point) => d.a} domain={[0, 100]} tickFormat={configFormat} label="Points" />
+      <Line accessor={(d: Point) => d.a} name="Series A" markers="always" strokeWidth={2} />
+      <Line accessor={(d: Point) => d.b} name="Series B" markers="always" color="#7c3aed" />
+      <Legend placement="bottom" />
+      <Tooltip<Point> mode="nearest" render={(hit) => <CustomTooltip hit={hit} />} />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Multiple axes
+
+```tsx
+/* Three y axes with clearly different extents: one on the left, two stacked on
+   the right (the second lies outside, separated by the gap). The series "large"
+   is bound to a second x axis on top and counts in relative steps - the tooltip
+   still compares the series correctly in pixel space.
+
+   Only the first registered axis per orientation draws a grid. Two grids over
+   one plot area are two rulers over one drawing. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { axesData, type DualPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function Axes() {
+  return (
+    <Chart data={axesData} height={340} ariaLabel="Three extents on three y axes">
+      <XAxis accessor={(d: DualPoint) => d.t} label="Step" />
+      <XAxis id="top" position="top" accessor={(d: DualPoint) => d.t - 2000} label="Step (relative)" />
+      <YAxis id="small" position="left" label="small" accessor={(d: DualPoint) => d.small} />
+      <YAxis id="large" position="right" label="large" accessor={(d: DualPoint) => d.large} />
+      <YAxis id="medium" position="right" label="medium" accessor={(d: DualPoint) => d.medium} />
+      <Line accessor={(d: DualPoint) => d.small} yAxisId="small" name="small" />
+      <Line
+        accessor={(d: DualPoint) => d.large}
+        xAxisId="top"
+        yAxisId="large"
+        name="large"
+        dash={[4, 4]}
+      />
+      <Line accessor={(d: DualPoint) => d.medium} yAxisId="medium" name="medium" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Operating time axis
+
+```tsx
+/* The same week, only without the hours in which nobody was there: Monday to
+   Friday, 6 to 22 o'clock.
+
+   On a wall clock axis the chart would consist, for a good forty per cent, of
+   flat lines over an empty hall. Every removed span carries a break mark - a
+   chart that takes a weekend out and does not say so claims a continuity it does
+   not have. The scale stays affine; the mapping happens in materialisation
+   (ADR-0001). */
+
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { WEEK_CALENDAR, weekData, type WeekPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const weekdayAndTime = (v: number) =>
+  new Date(v).toLocaleString("en-GB", { weekday: "short", hour: "2-digit", minute: "2-digit" });
+
+export default function OperatingTime() {
+  return (
+    <Chart data={weekData} height={280} ariaLabel="Output across the operating time of one week">
+      <XAxis
+        accessor={(d: WeekPoint) => d.t}
+        calendar={WEEK_CALENDAR}
+        tickFormat={weekdayAndTime}
+        tickCount={8}
+        label="Operating time"
+      />
+      <YAxis accessor={(d: WeekPoint) => d.output} label="Pieces/h" />
+      <Line accessor={(d: WeekPoint) => d.output} name="Output" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Time axis
+
+```tsx
+/* A day of hall temperature on a time axis: `time` says the values are
+   instants, and the axis stands its ticks on the local clock and labels them by
+   level - the hours, and the date where the day changes. No `tickFormat`; one
+   would take over, in any language. */
+
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { hallData, type HallPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function TimeAxis() {
+  return (
+    <Chart data={hallData} height={260} ariaLabel="Hall temperature across a day and a night">
+      <XAxis accessor={(d: HallPoint) => d.t} time />
+      <YAxis accessor={(d: HallPoint) => d.temperature} label="°C" />
+      <Line accessor={(d: HallPoint) => d.temperature} name="Hall" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Zoom and pan
+
+```tsx
+/* A week of kiln temperature, one reading a minute - too long to read a shift
+   in. `onDomainChange` makes the x axis zoomable: Ctrl or ⌘ with the wheel, or
+   a pinch, zooms around the pointer, a drag pans, a double click shows the
+   whole week again. The axis only proposes; the domain stays the caller's,
+   who passes it back - and could clamp it on the way. */
+
+import { useState } from "react";
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { kilnData, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function ZoomAndPan() {
+  const [domain, setDomain] = useState<"data" | readonly [number, number]>("data");
+  return (
+    <Chart data={kilnData} height={260} ariaLabel="Kiln temperature across a week, zoomable">
+      <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} />
+      <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" />
+      <Line accessor={(d: KilnPoint) => d.temperature} name="Kiln" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### The visible domain
+
+```tsx
+/* The same week, opened on Wednesday afternoon, when the burner tripped. With
+   `domain="visible"` the y axis fits what the x domain shows: the twenty
+   minutes the kiln fell and the hour it took to climb back, not the week's
+   600 to 850 °C that would press them flat. Zoom out - Ctrl or ⌘ with the
+   wheel, or a double click - and the axis follows. */
+
+import { useState } from "react";
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { DAY_MS, HOUR_MS, WEEK_START, kilnData, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const WEDNESDAY = WEEK_START + 2 * DAY_MS;
+
+export default function VisibleDomain() {
+  const [domain, setDomain] = useState<readonly [number, number]>([
+    WEDNESDAY + 12 * HOUR_MS,
+    WEDNESDAY + 17 * HOUR_MS,
+  ]);
+  return (
+    <Chart data={kilnData} height={260} ariaLabel="Kiln temperature on Wednesday afternoon, the y axis fitted to it">
+      <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} />
+      <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" domain="visible" />
+      <Line accessor={(d: KilnPoint) => d.temperature} name="Kiln" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Aligned ticks
+
+```tsx
+/* Two quantities, two y axes, one grid: the kiln's temperature on the left and
+   the gas it burns on the right. Only the first axis draws grid lines; with
+   `alignTicks` the gas axis takes its tick count and widens its own domain
+   until each of its ticks stands on one of those lines - in steps of 1, 2 or
+   5, never 17.3. Without it the right labels would float between the lines,
+   and a reader would take a line for a value it is not. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { kilnData, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function AlignedTicks() {
+  return (
+    <Chart data={kilnData} height={260} ariaLabel="Kiln temperature and gas flow across a week on one grid">
+      <XAxis accessor={(d: KilnPoint) => d.t} time />
+      <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" />
+      <YAxis id="gas" position="right" accessor={(d: KilnPoint) => d.gas} label="m³/h" alignTicks />
+      <Line accessor={(d: KilnPoint) => d.temperature} name="Temperature" />
+      <Line accessor={(d: KilnPoint) => d.gas} yAxisId="gas" name="Gas" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `XAxisProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `domain` | `"nice" \| "data" \| readonly [number, number]` | — | `"nice"` widens the data's extent to ticks, `"data"` keeps it, a pair is fixed - the one a zoom passes back. |
+| `position` | `"bottom" \| "top"` | — | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own. |
+| `time` | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it. |
+| `calendar` | `readonly OperatingInterval[]` | — | Operating calendar: the intervals in which time counts. With it the axis stands in operating time - weekends and night shifts are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation (ADR-0001). |
+| `onDomainChange` | `(domain: [number, number]) => void` | — | Zoom and pan, controlled: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click proposes the whole data range. Each proposes a domain in the axis' units and changes nothing; the caller passes it back as `domain`, clamped as it likes. Without a handler the axis does not zoom, and the plain wheel always scrolls the page. |
+| `axisId` | `string` | — | Axis on which the value lies. Without one, the first axis of the orientation. |
+| `orientation` | `"x" \| "y"` | — | Whether the value lies on the x or on the y axis. Without one, y: a limit is nearly always a value and not a moment. |
+| `severity` | `Severity` | — | Two severities, not five: five urgencies are five colours, and five colours on a plant screen are noise. |
+| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is. |
+| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. |
+| `inExtent` | `boolean` | — | Whether the value widens the axis extent, so that the limit is certainly visible. Default true; the head of this file says why. |
+| `role` | `LimitRole` | — | A chosen specification limit (the default) or a calculated control limit. They look different because they mean different things (ADR-0008). |
+
+##### `YAxisProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `domain` | `"nice" \| "data" \| "visible" \| readonly [number, number]` | — | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point. |
+| `alignTicks` | `boolean` | — | On a further y axis: take the first y axis' tick count and widen this axis' domain until its ticks fall on that one's grid lines, the steps still 1-2-5 - one grid serves both. `tickCount` then does not apply; on the first y axis it changes nothing. |
+| `position` | `"left" \| "right"` | — | Which edge the axis stands at. Several y axes per side are stacked outwards, so that extents of clearly different magnitude stay readable. |
+| `axisId` | `string` | — | Axis on which the value lies. Without one, the first axis of the orientation. |
+| `orientation` | `"x" \| "y"` | — | Whether the value lies on the x or on the y axis. Without one, y: a limit is nearly always a value and not a moment. |
+| `severity` | `Severity` | — | Two severities, not five: five urgencies are five colours, and five colours on a plant screen are noise. |
+| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is. |
+| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. |
+| `inExtent` | `boolean` | — | Whether the value widens the axis extent, so that the limit is certainly visible. Default true; the head of this file says why. |
+| `role` | `LimitRole` | — | A chosen specification limit (the default) or a calculated control limit. They look different because they mean different things (ADR-0008). |
+
+#### Why it is like this
+
+##### Operating time is a mapping, not a scale
+
+An operating calendar takes out the hours in which nobody was there - nights, weekends. The obvious implementation is a scale that skips them. This one does not: every scale in the library stays affine, a slope and an offset the draw loop multiplies with. Instead the x values are mapped into operating time once, during materialisation, and the scale never learns that a weekend existed. The drawing loop pays nothing for the calendar. See `docs/adr/0001-affine-scale-contract.md`.
+
+##### Removed time is a gap, and the axis says so
+
+A measurement from an hour the calendar removed has no place on the axis. It is not laid on the edge of the interval, where it would pile up on what really happened there; it becomes a gap, like every missing value in this library - never drawn, never hit. The seam itself is where Friday evening and Monday morning now stand side by side, and every removed span gets a break mark on the axis at that seam. A chart that took a weekend out without saying so would claim a continuity it does not have.
+
+## Series
+
+The kinds a chart can draw. They share the axes and mix freely; the order in the JSX decides what lies over what.
+
+### Line
+
+A course over an axis - with markers, a dash pattern and a gap that stays a gap instead of being interpolated.
+
+```ts
+import { Line } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/line
+
+#### Examples
+
+##### One series
+
+```tsx
+/* One series, default axes, grid only on the first y axis. */
+
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { basicData, type Point } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function Basic() {
+  return (
+    <Chart data={basicData} height={280} ariaLabel="Basic course of one series">
+      <XAxis accessor={(d: Point) => d.t} label="Index" />
+      <YAxis accessor={(d: Point) => d.a} />
+      <Line accessor={(d: Point) => d.a} name="Series A" />
+      <Tooltip />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Several series and gaps
+
+```tsx
+/* Four series, the legend on top, one dashed series and one series with a gap -
+   the line is interrupted, not interpolated. A gap is a hole and never a value
+   the chart invents (CONTEXT.md, **Gap**). The one reading inside the gap has
+   no neighbour to be joined to; it keeps its marker, whatever the number of
+   points. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { multiData, type Point } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function MultiSeries() {
+  return (
+    <Chart data={multiData} height={300} ariaLabel="Four series with a legend">
+      <XAxis accessor={(d: Point) => d.t} label="Index" />
+      <YAxis accessor={(d: Point) => d.a} label="Value" />
+      <Line accessor={(d: Point) => d.a} name="Series A" />
+      <Line accessor={(d: Point) => d.b} name="Series B" />
+      <Line accessor={(d: Point) => d.c} name="Series C" dash={[4, 4]} />
+      <Line accessor={(d: Point) => d.d} name="Series D (with a gap)" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Step line
+
+```tsx
+/* A set point is not a ramp: it holds until the next entry and jumps there.
+   `step` draws a line that way - sample-and-hold - beside the temperature that
+   follows it. The set point is logged only when it changes; while no recipe is
+   loaded it is a gap, and the hold ends where the gap begins. The tooltip
+   reports the entry the hold began with, not the nearer one after it. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { corridorData, setPoints, type CorridorPoint, type SetPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function StepLine() {
+  return (
+    <Chart data={corridorData} height={260} ariaLabel="Furnace temperature following its set point">
+      <XAxis accessor={(d: { t: number }) => d.t} time />
+      <YAxis accessor={(d: CorridorPoint) => d.temperature} label="°C" />
+      <Line data={setPoints} accessor={(d: SetPoint) => d.setPoint} name="Set point" step strokeWidth={2} />
+      <Line accessor={(d: CorridorPoint) => d.temperature} name="Temperature" />
+      <Legend />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `LineProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap (R-2.5). |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent - a fixed `domain` keeps the axis still. Its legend entry stays, drawn back. Controlled: the caller sets it, typically from `Legend onToggle`. |
+| `format` | `(value: number) => string` | — | The value as the tooltip writes it; without one the y axis' `tickFormat`, then the default. |
+| `color` | `string` | — | Any CSS colour value; without one the palette --uc-series-N. |
+| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. |
+| `strokeWidth` | `number` | — | Line width in CSS pixels. |
+| `dash` | `readonly number[]` | — | Dash pattern as a run of lengths in CSS pixels; without one a solid line. |
+| `markers` | `"auto" \| "always" \| "never"` | — | When the individual points are drawn as marks: `auto` every point up to 60 points and above that only a point between two gaps - it has no line to be seen by - `always`, or `never`, not even that one. |
+| `step` | `boolean` | — | Sample-and-hold: each value holds as a horizontal until the next sample and jumps there - a set point, a digital signal. A gap ends the hold at its x. The tooltip reports the sample the hold began with. |
+
+### Area
+
+A filled course, or a corridor between two channels - the baseline is a channel of its own and never a second series.
+
+```ts
+import { Area } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/area
+
+#### Examples
+
+##### Filled down to 0
+
+```tsx
+/* One area, filled down to 0: the power draw of a line over the early shift.
+
+   Without a baseline the foot is 0, and that 0 enters the extent of the y axis -
+   a draw has a natural zero, and an axis that started at 30 kW would make the
+   break look like a shutdown. Fill and outline are set here explicitly: the fill
+   carries the quantity, the outline the course. */
+
+import { Area, Chart, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { powerData, type PowerPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function Filled() {
+  return (
+    <Chart data={powerData} height={260} ariaLabel="Power draw of one line over the early shift">
+      <XAxis accessor={(d: PowerPoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: PowerPoint) => d.kw} label="kW" />
+      <Area accessor={(d: PowerPoint) => d.kw} name="Power draw" fillOpacity={0.35} strokeWidth={2} />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### A corridor with a gap
+
+```tsx
+/* A corridor between two channels, and the measured temperature inside it.
+
+   The lower edge is the `baseline` accessor - a channel of the same series, not a
+   second series the area is filled towards. During the recipe change there is
+   no corridor: the fill gets a hole there, while the line runs on, because the
+   furnace was measured the whole time. */
+
+import { Area, Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { corridorData, type CorridorPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function Corridor() {
+  return (
+    <Chart data={corridorData} height={280} ariaLabel="Furnace temperature inside the corridor of its recipe">
+      <XAxis accessor={(d: CorridorPoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: CorridorPoint) => d.temperature} label="°C" />
+      {/* An outline runs along the upper edge only; a corridor has two edges, so
+          it gets neither. */}
+      <Area
+        accessor={(d: CorridorPoint) => d.upper}
+        baseline={(d: CorridorPoint) => d.lower}
+        name="Recipe corridor"
+        strokeWidth={0}
+      />
+      <Line accessor={(d: CorridorPoint) => d.temperature} name="Furnace temperature" strokeWidth={1.75} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Stacked areas
+
+```tsx
+/* The output of three lines over a day, stacked: the upper edge is the plant's
+   output, each band a line's part of it. Every Area with the same `stack`
+   stands on the ones registered before it.
+
+   Line 3 stands at night and reports 0 - its band closes to a line, and the
+   plant's edge drops with it. A stacked band carries a quantity, so the fill
+   is stronger than a lone area's and the outline thin: the edges are the
+   boundaries between parts, not courses of their own. */
+
+import { Area, Chart, Legend, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { lineOutputData, type LineOutput } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function StackedAreas() {
+  return (
+    <Chart data={lineOutputData} height={280} ariaLabel="Output of three lines over a day, stacked">
+      <XAxis accessor={(d: LineOutput) => d.t} time domain="data" />
+      <YAxis accessor={(d: LineOutput) => d.line1} label="Pieces per hour" />
+      <Area accessor={(d: LineOutput) => d.line1} name="Line 1" stack="plant" fillOpacity={0.5} strokeWidth={1} />
+      <Area accessor={(d: LineOutput) => d.line2} name="Line 2" stack="plant" fillOpacity={0.5} strokeWidth={1} />
+      <Area accessor={(d: LineOutput) => d.line3} name="Line 3" stack="plant" fillOpacity={0.5} strokeWidth={1} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `AreaProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | Upper edge; null/undefined/NaN/±Infinity means a gap (R-2.5). |
+| `baseline` | `Accessor<T>` | — | Lower edge; without a value the fixed baseline 0. In a `stack` the stack below is the lower edge, and this is not read. |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent - a fixed `domain` keeps the axis still. Its legend entry stays, drawn back. Controlled: the caller sets it, typically from `Legend onToggle`. |
+| `format` | `(value: number) => string` | — | The value as the tooltip writes it; without one the y axis' `tickFormat`, then the default. |
+| `color` | `string` | — | Any CSS colour value; without one the palette --uc-series-N. |
+| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. |
+| `stack` | `string` | — | The stack this series stands in: every Bar and Area with the same id on the same x and y axis stands on the ones registered before it. A gap stacks as zero; negative values stack downward from zero. The tooltip names each series' own value and the stack's total. |
+| `normalize` | `boolean` | — | On any member of a stack, every x of the stack sums to 100 %: each value becomes its share, and the y axis reads in percent unless it has a `tickFormat`. The total stays the readings' own sum, written in the series' `format`. |
+| `fillOpacity` | `number` | — | Opacity of the fill, from 0 to 1; the outline stays fully opaque. |
+| `strokeWidth` | `number` | — | Width of the outline along the upper edge in CSS pixels; 0 leaves it out. |
+| `dash` | `readonly number[]` | — | Dash pattern of the outline as a run of lengths in CSS pixels; without one a solid outline. The fill stays whole. |
+
+#### Why it is like this
+
+##### The baseline is a channel, not a second series
+
+A corridor has two edges, and the obvious way to draw it is two series and a fill between them. This library does not do that: the lower edge is the `baseline` accessor of the same `Area`, materialised into a second channel beside the first. One series has one name, one colour, one legend entry and one gap - where either edge is missing, the fill has a hole, and there is no way for the two edges to disagree about where it is. A fill „towards another series“ would make the order of the JSX a statement about geometry, and hiding one of the two would leave the other filled towards nothing. The kinds share one materialisation shape, and a second channel is how an area fits into it; see `docs/adr/0002-bars-on-a-numeric-x-axis.md`.
+
+##### Without a baseline the foot is 0, and 0 is in the extent
+
+A filled area says „this much“, and a quantity is read from its foot. So the fixed baseline 0 enters the extent of the y axis like the values do - an axis that began at the smallest value would cut the foot off, and a dip would read as a shutdown. A course that has no natural zero is a **Line**, not an area.
+
+### Bar
+
+Bars on the numeric x axis, grouped where several stand side by side (ADR-0002).
+
+```ts
+import { Bar } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/bar
+
+#### Examples
+
+##### One bar per shift
+
+```tsx
+/* Scrap per shift: one bar series, the shifts as positions 0 to 8 on the
+   ordinary numeric x axis, named by the tickFormat (ADR-0002).
+
+   A category is a number the axis places and a function names - no band scale,
+   no category axis. `ticks` puts one tick under every bar; without it the 1-2-5
+   algorithm would pick its own positions and name every second shift. */
+
+import { Bar, Chart, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { scrapData, type ShiftScrap } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function PerShift() {
+  return (
+    <Chart data={scrapData} height={260} ariaLabel="Scrap per shift over three days">
+      <XAxis
+        accessor={(d: ShiftScrap) => d.shift}
+        ticks={scrapData.map((d) => d.shift)}
+        tickFormat={(v) => scrapData[v]?.name ?? ""}
+      />
+      <YAxis accessor={(d: ShiftScrap) => d.scrap} label="Pieces" />
+      <Bar accessor={(d: ShiftScrap) => d.scrap} name="Scrap" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Grouped bars
+
+```tsx
+/* Planned and made, side by side: two bar series on the same x axis share the
+   step and stand next to each other, centred on the day as a group.
+
+   `barWidth` is the fraction of the step the whole group takes - so both series
+   carry the same value, and a different one would be a DEV warning. The plan
+   gets a quiet `color` of its own: it is the reference, and the palette colour
+   goes to what was made. A token, so that it follows the colour scheme - the
+   canvas resolves it like the palette. */
+
+import { Bar, Chart, Legend, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { outputData, type DayOutput } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function Grouped() {
+  return (
+    <Chart data={outputData} height={280} ariaLabel="Planned and made output per working day">
+      <XAxis
+        accessor={(d: DayOutput) => d.day}
+        ticks={outputData.map((d) => d.day)}
+        tickFormat={(v) => outputData[v]?.name ?? ""}
+      />
+      <YAxis accessor={(d: DayOutput) => d.actual} label="Pieces" />
+      <Bar accessor={(d: DayOutput) => d.planned} name="Planned" color="var(--uc-color-text)" barWidth={0.7} />
+      <Bar accessor={(d: DayOutput) => d.actual} name="Made" barWidth={0.7} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Above and below plan
+
+```tsx
+/* The deviation from plan, per working day: above plan upwards, below plan
+   downwards, the foot at 0 in the middle of the axis.
+
+   The foot of a bar is 0 and not the bottom of the axis - which is what lets one
+   series carry both signs. The deviation is computed in the accessor, not
+   stored: it is the difference of two numbers the data already has. */
+
+import { Bar, Chart, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { outputData, type DayOutput } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const signed = (v: number) => (v > 0 ? `+${v.toFixed(0)}` : v.toFixed(0));
+
+export default function Deviation() {
+  return (
+    <Chart data={outputData} height={280} ariaLabel="Deviation from plan per working day">
+      <XAxis
+        accessor={(d: DayOutput) => d.day}
+        ticks={outputData.map((d) => d.day)}
+        tickFormat={(v) => outputData[v]?.name ?? ""}
+      />
+      <YAxis accessor={(d: DayOutput) => d.actual - d.planned} tickFormat={signed} label="Pieces" />
+      <Bar accessor={(d: DayOutput) => d.actual - d.planned} name="Deviation from plan" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Stacked bars
+
+```tsx
+/* Downtime by reason, stacked: each day's bar is its whole downtime, and each
+   reason a part of it. Every Bar with the same `stack` stands on the ones
+   registered before it - the order in the JSX is the order from the foot up.
+
+   The material log was not kept on the first Wednesday. That day's bar says
+   so: its material segment is missing, the breakdown stands directly on the
+   setup - a gap stacks as zero -, and the tooltip names the reasons it has
+   and their total. */
+
+import { Bar, Chart, Legend, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { downtimeData, type DayDowntime } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function Stacked() {
+  return (
+    <Chart data={downtimeData} height={280} ariaLabel="Downtime per working day by reason">
+      <XAxis
+        accessor={(d: DayDowntime) => d.day}
+        ticks={downtimeData.map((d) => d.day)}
+        tickFormat={(v) => downtimeData[v]?.name ?? ""}
+      />
+      <YAxis accessor={(d: DayDowntime) => d.setup} label="Minutes" />
+      <Bar accessor={(d: DayDowntime) => d.setup} name="Setup" stack="downtime" />
+      <Bar accessor={(d: DayDowntime) => d.material} name="Material" stack="downtime" />
+      <Bar accessor={(d: DayDowntime) => d.breakdown} name="Breakdown" stack="downtime" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Shares of a whole
+
+```tsx
+/* The same downtime as shares: `normalize` on a stack makes every day sum to
+   100 %, so the question moves from "how long" to "of what". The breakdown on
+   the second Thursday is no longer the tallest bar - it is the widest part.
+
+   The y axis reads in percent by itself, and so does the tooltip's row per
+   reason. The total stays in minutes: it is the one number the shares hide,
+   and `format` writes it, as it would write any reading. */
+
+import { Bar, Chart, Legend, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { downtimeData, type DayDowntime } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const minutes = (v: number) => `${v} min`;
+
+export default function Percent() {
+  return (
+    <Chart data={downtimeData} height={280} ariaLabel="Share of each reason in the downtime per working day">
+      <XAxis
+        accessor={(d: DayDowntime) => d.day}
+        ticks={downtimeData.map((d) => d.day)}
+        tickFormat={(v) => downtimeData[v]?.name ?? ""}
+      />
+      <YAxis accessor={(d: DayDowntime) => d.setup} />
+      <Bar accessor={(d: DayDowntime) => d.setup} name="Setup" stack="downtime" normalize format={minutes} />
+      <Bar accessor={(d: DayDowntime) => d.material} name="Material" stack="downtime" normalize format={minutes} />
+      <Bar accessor={(d: DayDowntime) => d.breakdown} name="Breakdown" stack="downtime" normalize format={minutes} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `BarProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | Height; null/undefined/NaN/±Infinity means a gap (R-2.5). |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent - a fixed `domain` keeps the axis still. Its legend entry stays, drawn back. Controlled: the caller sets it, typically from `Legend onToggle`. |
+| `format` | `(value: number) => string` | — | The value as the tooltip writes it; without one the y axis' `tickFormat`, then the default. |
+| `color` | `string` | — | Any CSS colour value; without one the palette --uc-series-N. |
+| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. |
+| `stack` | `string` | — | The stack this series stands in: every Bar and Area with the same id on the same x and y axis stands on the ones registered before it. A gap stacks as zero; negative values stack downward from zero. The tooltip names each series' own value and the stack's total. |
+| `normalize` | `boolean` | — | On any member of a stack, every x of the stack sums to 100 %: each value becomes its share, and the y axis reads in percent unless it has a `tickFormat`. The total stays the readings' own sum, written in the series' `format`. |
+| `barWidth` | `number` | — | Width as a fraction of the step; just under 1, so that neighbours do not touch. Several bar series share this fraction. |
+
+#### Why it is like this
+
+##### Bars sit on a numeric x axis
+
+Every other chart library draws bars against a band scale over categories. This one does not: a bar has a position and a width in domain units, on the same axis a line uses. That is what lets a bar, a line and a scatter share one chart and one tooltip without translating between two kinds of axis - and it is what makes a Pareto possible, where the bars are categories and the cumulative line is not. Categories are passed as numeric positions with a naming `tickFormat`. See `docs/adr/0002-bars-on-a-numeric-x-axis.md`.
+
+##### What it costs, said plainly
+
+A band scale would place bars automatically and keep their gaps even. Here the width is a number the caller sets, and grouped bars divide it among themselves. The trade was made for the mixed chart, and the mixed chart is the case this library exists for.
+
+### Scatter
+
+Individual points without a connecting line - samples, measurements, anything that is not a course.
+
+```ts
+import { Scatter } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/scatter
+
+#### Examples
+
+##### Individual measurements
+
+```tsx
+/* Wall thickness, sampled by hand whenever the inspector came by: individual
+   measurements, drawn as points and joined by nothing.
+
+   A line between two samples would claim a thickness at every moment in
+   between, and nobody measured one. `radius` is in CSS pixels; a little larger
+   than the default, because each point here is a person's walk to the line. */
+
+import { Chart, Scatter, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { thicknessData, type ThicknessSample } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function Measurements() {
+  return (
+    <Chart data={thicknessData} height={260} ariaLabel="Wall thickness samples over one shift">
+      <XAxis accessor={(d: ThicknessSample) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: ThicknessSample) => d.mm} label="mm" />
+      <Scatter accessor={(d: ThicknessSample) => d.mm} name="Wall thickness" radius={4} />
+      <Tooltip mode="nearest" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Samples against a set point
+
+```tsx
+/* Fill weights read against their set point: the set point as a line, the
+   samples as points over it, and those out of tolerance with `tone="alarm"`.
+
+   The outliers are a series of their own and not a colour per point - a
+   scatter has one colour, and the tone is a role the theme resolves, so the
+   alarm here is the same red as an alarm limit. The two channels never both
+   carry a value, so no sample is drawn twice. */
+
+import { Chart, Legend, Line, Scatter, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { weightData, type WeightSample } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function OverACourse() {
+  return (
+    <Chart data={weightData} height={300} ariaLabel="Fill weight samples against their set point">
+      <XAxis accessor={(d: WeightSample) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: WeightSample) => d.setPoint} label="g" />
+      <Line accessor={(d: WeightSample) => d.setPoint} name="Set point" dash={[4, 4]} />
+      <Scatter accessor={(d: WeightSample) => d.sample} name="Sample" radius={2.5} />
+      <Scatter accessor={(d: WeightSample) => d.outlier} name="Out of tolerance" tone="alarm" radius={4} />
+      <Legend placement="top" />
+      <Tooltip mode="nearest" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `ScatterProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap (R-2.5). |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent - a fixed `domain` keeps the axis still. Its legend entry stays, drawn back. Controlled: the caller sets it, typically from `Legend onToggle`. |
+| `format` | `(value: number) => string` | — | The value as the tooltip writes it; without one the y axis' `tickFormat`, then the default. |
+| `color` | `string` | — | Any CSS colour value; without one the palette --uc-series-N. |
+| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. |
+| `radius` | `number` | — | Point radius in CSS pixels. |
+
+### StateBand
+
+What a machine was doing, as a partition of the time axis: every segment ends where the next begins, and a state is a number the state list names (ADR-0007).
+
+```ts
+import { StateBand } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/stateband
+
+#### Examples
+
+##### One machine over a shift
+
+```tsx
+/* What one machine did over a shift, as a band: production, setup, fault,
+   maintenance - every segment ends where the next begins.
+
+   No `laneFrom`, no `laneTo`: without them a band fills the whole domain of its
+   y axis, and a chart of one machine needs nothing else. The y axis carries a
+   single tick in the middle of the band, and the tickFormat names the machine
+   there. The legend names the states, not the series - a band is read by its
+   colours. */
+
+import { Chart, Legend, StateBand, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { PLANT_STATES, shiftData, type StatePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function Shift() {
+  return (
+    <Chart data={shiftData} height={150} ariaLabel="States of Furnace 1 over one shift">
+      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={() => 0} domain={[0, 1]} ticks={[0.5]} tickFormat={() => "Furnace 1"} grid={false} />
+      <StateBand accessor={(d: StatePoint) => d.m1} states={PLANT_STATES} name="Furnace 1" />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### A state under a course
+
+```tsx
+/* The furnace temperature, and under it the furnace's state in a lane of its
+   own: where the band turns to fault, the curve climbs.
+
+   The lane stands on a second y axis, in its domain units - the bottom unit of
+   five, the rest is air for the curve. Two charts one above the other would
+   need their x axes kept in step by hand; one chart has one x axis, and the
+   cause lies exactly under its effect. */
+
+import { Chart, Legend, Line, StateBand, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { PLANT_STATES, shiftData, type StatePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function UnderACourse() {
+  return (
+    <Chart data={shiftData} height={320} ariaLabel="Furnace temperature above the states of the furnace">
+      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: StatePoint) => d.temperature} domain={[720, 900]} label="°C" />
+      <YAxis
+        id="lane"
+        position="right"
+        accessor={() => 0}
+        domain={[0, 5]}
+        ticks={[0.4]}
+        tickFormat={() => "State"}
+      />
+      <StateBand
+        accessor={(d: StatePoint) => d.m1}
+        states={PLANT_STATES}
+        yAxisId="lane"
+        laneFrom={0}
+        laneTo={0.8}
+        name="Furnace 1"
+      />
+      <Line accessor={(d: StatePoint) => d.temperature} name="Furnace temperature" strokeWidth={1.75} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `StateBandProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | Index of the state in `states`; null/undefined/NaN/±Infinity is a gap - and a gap stays a hole, it gets no colour for "unknown". A colour would be a claim about the interval. |
+| `states` (required) | `readonly StateEntry[]` | — | The closed set of states, in the order of their codes. |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent - a fixed `domain` keeps the axis still. Its legend entry stays, drawn back. Controlled: the caller sets it, typically from `Legend onToggle`. |
+| `laneFrom` | `number` | — | Lower edge of the lane in domain units of the y axis. |
+| `laneTo` | `number` | — | Upper edge of the lane in domain units of the y axis. |
+
+#### Why it is like this
+
+##### A state is a number
+
+The accessor of a state band returns the **index** of a state in the state list, not a string and not a colour. The list is the code: it fixes the order, the name and the colour in one place, so that two charts of the same plant cannot disagree about what yellow means. See `docs/adr/0007-a-state-is-a-number.md`.
+
+##### A band is a partition, and a hole is not a state
+
+Every segment ends where the next begins - that is what makes it a band. Where a machine reports nothing, a hole stays: there is no colour for „unknown“, because a fifth colour in the legend would claim a state that was never measured. Work with an explicit end - idle time between jobs, two jobs on one machine - is occupancy, and it belongs to `@umriss-ui/schedule`.
+
+### Matrix
+
+One value per cell across two discrete axes - coloured by assessment or across a gradient, with a hole where nothing was measured.
+
+```ts
+import { Matrix, DEFAULT_GRADIENT } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/matrix
+
+#### Examples
+
+##### Matrix
+
+```tsx
+/* Eight machines across twenty-four hours at a glance. Above by assessment - the
+   same limits that colour a tile - below across a gradient.
+
+   A bad HOUR everywhere looks different from a bad MACHINE, and exactly that
+   difference is the reason for the form. Where nothing was measured, a hole
+   stays. */
+
+import { Chart, Matrix, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { MACHINES, matrixData, type CellPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function MatrixExample() {
+  return (
+    <div className="side-by-side">
+      <Chart data={matrixData} height={260} ariaLabel="OEE per machine and hour, by assessment">
+        <XAxis
+          accessor={(d: CellPoint) => d.hour}
+          ticks={[0, 6, 12, 18]}
+          tickFormat={(v) => `${v}:00`}
+          label="Hour"
+        />
+        <YAxis
+          accessor={(d: CellPoint) => d.machine}
+          ticks={MACHINES.map((_, i) => i)}
+          tickFormat={(v) => MACHINES[v] ?? ""}
+        />
+        <Matrix
+          accessor={(d: CellPoint) => d.machine}
+          value={(d: CellPoint) => d.oee}
+          coloring={{
+            kind: "assessment",
+            limits: {
+              limits: [
+                { value: 70, side: "lower", severity: "warning" },
+                { value: 40, side: "lower", severity: "alarm" },
+              ],
+            },
+          }}
+          name="OEE"
+        />
+        <Tooltip mode="nearest" />
+      </Chart>
+      <Chart data={matrixData} height={260} ariaLabel="OEE per machine and hour, as a gradient">
+        <XAxis
+          accessor={(d: CellPoint) => d.hour}
+          ticks={[0, 6, 12, 18]}
+          tickFormat={(v) => `${v}:00`}
+          label="Hour"
+        />
+        <YAxis
+          accessor={(d: CellPoint) => d.machine}
+          ticks={MACHINES.map((_, i) => i)}
+          tickFormat={(v) => MACHINES[v] ?? ""}
+        />
+        <Matrix accessor={(d: CellPoint) => d.machine} value={(d: CellPoint) => d.oee} name="OEE" />
+        <Tooltip mode="nearest" />
+      </Chart>
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `MatrixProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | Row position on the y axis. |
+| `value` (required) | `Accessor<T>` | — | The value that decides the colour. |
+| `coloring` | `MatrixColoring` | — | Without a value the default gradient across the data range. |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent - a fixed `domain` keeps the axis still. Its legend entry stays, drawn back. Controlled: the caller sets it, typically from `Legend onToggle`. |
+| `format` | `(value: number) => string` | — | The value as the tooltip writes it; without one the default. The y axis' `tickFormat` writes the row, not the value. |
+
+## Monitoring
+
+A value read against its limits - and its shape over time.
+
+### LimitLine
+
+The limits a curve is read against: a line as a landmark above the series, a band as ground below them - the same limit model the components of @umriss-ui/core use (ADR-0006).
+
+```ts
+import { LimitLine, LimitBand } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/limitline
+
+#### Examples
+
+##### Limits and state band
+
+```tsx
+/* The core of a plant screen: a curve, the limits it is read against, and below
+   it the state of three machines.
+
+   Everything in ONE chart on ONE x axis - which is exactly why the fault at
+   12:15 lies visibly below the temperature jump. A band lies below every series,
+   a limit line above them: the one is ground, the other a landmark. Machine 3
+   reports nothing for a while; a hole stays there, no colour for "unknown". */
+
+import { Chart, Legend, LimitBand, LimitLine, Line, StateBand, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { PLANT_STATES, shiftData, type StatePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+/* The lanes of a stack: one domain unit per machine. The labelling goes through
+   the axis' tickFormat - there is no lane concept of its own. */
+const LANE_TICKS = [0.45, 1.45, 2.45];
+/* Lane 0 lies at the bottom - the list therefore runs from the bottom upwards. */
+const LANE_NAMES = ["Mill 3", "Press 2", "Furnace 1"];
+
+export default function LimitsAndState() {
+  return (
+    <Chart
+      data={shiftData}
+      height={340}
+      ariaLabel="Furnace temperature with a warning and an alarm limit above the states of three machines"
+    >
+      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: StatePoint) => d.temperature} domain={[740, 900]} label="°C" />
+      {/* The lane axis: one unit per machine, the rest is air for the curve
+          above it. Not a pixel in this file. */}
+      <YAxis
+        id="lanes"
+        position="right"
+        accessor={() => 0}
+        domain={[0, 8]}
+        ticks={LANE_TICKS}
+        tickFormat={(v) => LANE_NAMES[Math.floor(v)] ?? ""}
+      />
+      <LimitBand from={780} to={820} severity="warning" label="Tolerance" />
+      <LimitLine value={820} severity="warning" label="Warning limit" />
+      <LimitLine value={860} severity="alarm" label="Alarm limit" />
+      <StateBand
+        accessor={(d: StatePoint) => d.m1}
+        states={PLANT_STATES}
+        yAxisId="lanes"
+        laneFrom={2}
+        laneTo={2.9}
+        name="Furnace 1"
+      />
+      <StateBand
+        accessor={(d: StatePoint) => d.m2}
+        states={PLANT_STATES}
+        yAxisId="lanes"
+        laneFrom={1}
+        laneTo={1.9}
+        name="Press 2"
+      />
+      <StateBand
+        accessor={(d: StatePoint) => d.m3}
+        states={PLANT_STATES}
+        yAxisId="lanes"
+        laneFrom={0}
+        laneTo={0.9}
+        name="Mill 3"
+      />
+      <Line accessor={(d: StatePoint) => d.temperature} name="Furnace temperature" strokeWidth={1.75} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `LimitLineProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` (required) | `number` | — | Where the line lies, in domain units of its axis. |
+| `axisId` | `string` | — | Axis on which the value lies. Without one, the first axis of the orientation. |
+| `orientation` | `"x" \| "y"` | — | Whether the value lies on the x or on the y axis. Without one, y: a limit is nearly always a value and not a moment. |
+| `severity` | `Severity` | — | Two severities, not five: five urgencies are five colours, and five colours on a plant screen are noise. |
+| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is. |
+| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. |
+| `inExtent` | `boolean` | — | Whether the value widens the axis extent, so that the limit is certainly visible. Default true; the head of this file says why. |
+| `role` | `LimitRole` | — | A chosen specification limit (the default) or a calculated control limit. They look different because they mean different things (ADR-0008). |
+
+##### `LimitBandProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `from` (required) | `number` | — | Lower edge of the band, in domain units of its axis. |
+| `to` (required) | `number` | — | Upper edge, in domain units of its axis. A band drawn backwards (`from` above `to`) is drawn between the two all the same - the pair is a range, not a direction. |
+| `axisId` | `string` | — | Axis on which the value lies. Without one, the first axis of the orientation. |
+| `orientation` | `"x" \| "y"` | — | Whether the value lies on the x or on the y axis. Without one, y: a limit is nearly always a value and not a moment. |
+| `severity` | `Severity` | — | Two severities, not five: five urgencies are five colours, and five colours on a plant screen are noise. |
+| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is. |
+| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. |
+| `inExtent` | `boolean` | — | Whether the value widens the axis extent, so that the limit is certainly visible. Default true; the head of this file says why. |
+| `role` | `LimitRole` | — | A chosen specification limit (the default) or a calculated control limit. They look different because they mean different things (ADR-0008). |
+
+#### Why it is like this
+
+##### The limit model lives in both packages, on purpose
+
+A limit is a value, a side and a severity; a verdict is what a number *is* given those limits. The same model stands in `@umriss-ui/core` and here - duplicated deliberately, because the alternative was a dependency between two packages that are meant to be usable apart. What holds the two copies together is not discipline but a conformance test that runs both versions from one case table. See `docs/adr/0006-the-limit-model-lives-in-both-packages.md`.
+
+##### A line is a landmark, a band is ground
+
+The band lies below every series, the line above them. That is not a taste in layering: a tolerance band is the area a value should be in, and a curve has to be readable on top of it, while a limit is the thing a reader looks for and must not be covered by a stroke that happens to run along it.
+
+##### The colour follows the severity, and nothing else
+
+A limit carries `severity`, and the tone is derived from it. Handing a colour in instead would put the rule in the application and the presentation in the library, and the two would drift apart the moment a bound moves.
+
+### ControlChart
+
+Center line, control limits and the rule violations of a process - out of a named reference window, never out of what happens to be visible (ADR-0008).
+
+```ts
+import { ControlChart, controlLimits, violations } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/controlchart
+
+#### Examples
+
+##### Control chart
+
+```tsx
+/* Two kinds of limit, and they look different because they mean different
+   things.
+
+   The SPECIFICATION limits (dashed, coloured) are chosen: what the customer
+   assumes. The CONTROL limits (solid, neutral) are calculated: what this process
+   normally does - and out of a named reference window, never out of what happens
+   to be visible (ADR-0008). From value 62 the process drifts; the run rule fires
+   long before a point leaves the specification. */
+
+import { Chart, ControlChart, LimitLine, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { measurementData, type Measurement } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+/* The control limits come out of the first 60 per cent of the series - the
+   period in which the process demonstrably ran in control. */
+const REFERENCE_WINDOW = { kind: "referenceWindow", from: 0, to: 54 } as const;
+
+export default function ControlChartExample() {
+  return (
+    <Chart data={measurementData} height={300} ariaLabel="Control chart of a feature inspection">
+      <XAxis accessor={(d: Measurement) => d.n} label="Inspection" />
+      <YAxis accessor={(d: Measurement) => d.value} label="mm" />
+      <LimitLine value={13.2} severity="alarm" label="USL" />
+      <LimitLine value={11.8} severity="alarm" label="LSL" />
+      <ControlChart
+        accessor={(d: Measurement) => d.value}
+        data={measurementData}
+        origin={REFERENCE_WINDOW}
+        name="Feature Ø"
+        labelUpper="UCL"
+        labelLower="LCL"
+        violationName="Feature Ø - rule violation"
+      />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `ControlChartProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `accessor` (required) | `Accessor<T>` | — | The values of the chart. |
+| `data` (required) | `readonly T[]` | — | Required: the limits arise out of these values, not out of what happens to be visible. |
+| `origin` (required) | `ControlLimitOrigin` | — | Given, or from a named reference window - never tacitly from everything on the screen (ADR-0008). |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV - an unnamed series is a colour nobody can look up. |
+| `format` | `(value: number) => string` | — | The value as the tooltip writes it - on the line and on the violations; without one the y axis' `tickFormat`, then the default. |
+| `color` | `string` | — | Any CSS colour value; without one the palette --uc-series-N. |
+| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value for the line; the theme resolves it. The violations are always "alarm". |
+| `rules` | `Partial<RuleOptions>` | — | Switchable one by one; run lengths are parameters. |
+| `zoneLines` | `boolean` | — | The faint zone lines at one and two sigma. Rule 4 is about the two-sigma zone; without them a reader cannot check it. |
+| `labelUpper` | `string` | — | Labels of the control limits in the axis band. Without a value, none: the package brings no text along, not even "UCL" and "LCL". |
+| `labelLower` | `string` | — | The same for the lower control limit. Named separately because a chart may well want one of the two labelled and not the other. |
+| `violationName` | `string` | — | Name of the scatter of violations in the legend and the tooltip. Without a value, none: a legend then carries it as "Series n" and warns once in DEV. Before this, a German suffix stood on the name of the chart. |
+| `onViolations` | `(found: readonly Violation[]) => void` | — | The violations as data - they can be listed beside the chart as well as marked on it. |
+
+#### Why it is like this
+
+##### A control limit is not a specification limit
+
+Two numbers on a control chart look alike and mean opposite things. A **specification limit** is chosen: what the customer assumes, what the drawing says. A **control limit** is calculated: what this process actually does when nothing is wrong with it. A process can sit comfortably inside the specification and be out of control, and that is the case the chart exists to show. See `docs/adr/0008-control-limits-are-not-specification-limits.md`.
+
+##### Never computed from what happens to be visible
+
+The limits come from a named **reference window** - a period in which the process demonstrably ran in control - and never from the data the chart is currently showing. Limits recomputed over a drifting process drift with it, and the chart then certifies every state as normal, most confidently at the moment it stops being so.
+
+##### The rules fire before a point leaves the specification
+
+Outlier, run, trend and two-of-three: four rules over the zones, and the point of them is the warning that comes early. They are exported as pure functions, so an application that draws something else can still ask the same question.
+
+### Pareto
+
+Sorted descending with a cumulative line: the pure module that sorts, accumulates and collects the tail - the composition stays the caller's.
+
+```ts
+import { pareto } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/pareto
+
+#### Examples
+
+##### Pareto
+
+```tsx
+/* The first question after a bad week. Bars sorted descending, the cumulative
+   line on a second y axis on the right, categories as indices on the ordinary
+   numeric x axis (ADR-0002).
+
+   The long tail is collected into "Other" and stands LAST - independently of its
+   value, because otherwise the chart would claim there is a downtime reason
+   called "Other" in third place.
+
+   `pareto()` is the pure module: sort, accumulate, collect. The composition
+   below it is four lines and belongs to the caller - which is why there is no
+   <Pareto> that would co-own the second axis. */
+
+import { useMemo } from "react";
+import { Bar, Chart, Legend, LimitLine, Line, Tooltip, XAxis, YAxis, pareto } from "@umriss-ui/charts";
+import type { ParetoEntry } from "@umriss-ui/charts";
+import { DOWNTIME_REASONS } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function ParetoExample() {
+  const result = useMemo(() => pareto(DOWNTIME_REASONS, { collectRank: 6, remainderName: "Other" }), []);
+  const entries = result.entries;
+
+  return (
+    <Chart data={entries as ParetoEntry[]} height={300} ariaLabel="Downtime reasons by frequency">
+      <XAxis
+        accessor={(d: ParetoEntry) => d.index}
+        ticks={entries.map((e) => e.index)}
+        tickFormat={(v) => entries[v]?.name ?? ""}
+      />
+      <YAxis accessor={(d: ParetoEntry) => d.value} label="Minutes" />
+      <YAxis
+        id="share"
+        position="right"
+        accessor={(d: ParetoEntry) => d.cumulative * 100}
+        domain={[0, 100]}
+        tickFormat={(v) => `${v.toFixed(0)} %`}
+        label="cumulative"
+      />
+      <Bar accessor={(d: ParetoEntry) => d.value} name="Downtime" barWidth={0.72} />
+      <Line
+        accessor={(d: ParetoEntry) => d.cumulative * 100}
+        yAxisId="share"
+        name="cumulative"
+        markers="always"
+        strokeWidth={1.75}
+      />
+      <LimitLine value={80} axisId="share" severity="warning" label="80 %" inExtent={false} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+## Around the chart
+
+What stands beside the series: what a hover says, what the colours mean - and what the whole thing costs.
+
+### Tooltip & Legend
+
+What a hover reports and what the colours mean: the hit as a whole x position or as the nearest point, the legend above or below the plot.
+
+```ts
+import { Tooltip, Legend, DataTable } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/tooltip
+
+#### Examples
+
+##### Mode x or nearest
+
+```tsx
+/* The same two furnaces twice: on the left the tooltip reports every series at
+   the x position, on the right only the point nearest the pointer.
+
+   `"x"` answers "what was everything at 08:40"; `"nearest"` answers "which
+   curve is this". The hit is searched per series in its own axis space and
+   compared in pixels, so the crosshair snaps to a data point and never stands
+   between two. Hover to see the difference - a picture of the page cannot. */
+
+import { Chart, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { furnaceData, type FurnacePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+function Furnaces({ mode }: { mode: "x" | "nearest" }) {
+  return (
+    <Chart data={furnaceData} height={220} ariaLabel={`Two furnace temperatures, tooltip mode ${mode}`}>
+      <XAxis accessor={(d: FurnacePoint) => d.t} tickFormat={timeOfDay} tickCount={4} />
+      <YAxis accessor={(d: FurnacePoint) => d.f1} label="°C" />
+      <Line accessor={(d: FurnacePoint) => d.f1} name="Furnace 1" />
+      <Line accessor={(d: FurnacePoint) => d.f2} name="Furnace 2" />
+      <Tooltip mode={mode} />
+    </Chart>
+  );
+}
+
+export default function XOrNearest() {
+  return (
+    <div className="pair">
+      <div>
+        <p className="pair-caption">mode="x" - every series at the x position</p>
+        <Furnaces mode="x" />
+      </div>
+      <div>
+        <p className="pair-caption">mode="nearest" - only the nearest point</p>
+        <Furnaces mode="nearest" />
+      </div>
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Content of one's own
+
+```tsx
+/* A tooltip in the plant's language: "Furnace 1 - 812 °C, 4 °C above set
+   point" instead of a name and a number.
+
+   The render prop receives the hit - the x value and one entry per series, each
+   with its datum - and returns what stands in the box. The set point is not a
+   series here but a field of the datum, which is exactly what the render prop
+   can read and the built-in tooltip cannot know. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import type { TooltipHit } from "@umriss-ui/charts";
+import { furnaceData, type FurnacePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+function PlantTooltip({ hit }: { hit: TooltipHit<FurnacePoint> }) {
+  return (
+    <div className="custom-tooltip">
+      <strong>{timeOfDay(hit.xValue)}</strong>
+      {hit.points.map((point) => {
+        const off = point.yValue - point.datum.setPoint;
+        return (
+          <span key={point.seriesName}>
+            {point.seriesName} - {point.yValue.toFixed(0)} °C, {Math.abs(off).toFixed(0)} °C{" "}
+            {off >= 0 ? "above" : "below"} set point
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function OwnContent() {
+  return (
+    <Chart data={furnaceData} height={280} ariaLabel="Two furnace temperatures with a tooltip in plant language">
+      <XAxis accessor={(d: FurnacePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: FurnacePoint) => d.f1} label="°C" />
+      <Line accessor={(d: FurnacePoint) => d.f1} name="Furnace 1" />
+      <Line accessor={(d: FurnacePoint) => d.f2} name="Furnace 2" />
+      <Legend placement="top" />
+      <Tooltip<FurnacePoint> mode="x" render={(hit) => <PlantTooltip hit={hit} />} />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Legend above or below
+
+```tsx
+/* The legend above the plot and below it. Above is the default: a chart without
+   `placement` looks like the left one, and `placement="top"` says the same thing
+   out loud.
+
+   A legend stands beside the plot area, never inside it - it takes its height
+   from the chart, not from the curves. Hovering an entry lifts its series and
+   draws the others faint. */
+
+import { Chart, Legend, Line, XAxis, YAxis } from "@umriss-ui/charts";
+import { furnaceData, type FurnacePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function LegendPlacement() {
+  return (
+    <div className="pair">
+      <div>
+        <p className="pair-caption">no placement - above, the default</p>
+        <Chart data={furnaceData} height={220} ariaLabel="Legend above the plot">
+          <XAxis accessor={(d: FurnacePoint) => d.t} tickFormat={timeOfDay} tickCount={4} />
+          <YAxis accessor={(d: FurnacePoint) => d.f1} label="°C" />
+          <Line accessor={(d: FurnacePoint) => d.f1} name="Furnace 1" />
+          <Line accessor={(d: FurnacePoint) => d.f2} name="Furnace 2" />
+          <Legend />
+        </Chart>
+      </div>
+      <div>
+        <p className="pair-caption">placement="bottom"</p>
+        <Chart data={furnaceData} height={220} ariaLabel="Legend below the plot">
+          <XAxis accessor={(d: FurnacePoint) => d.t} tickFormat={timeOfDay} tickCount={4} />
+          <YAxis accessor={(d: FurnacePoint) => d.f1} label="°C" />
+          <Line accessor={(d: FurnacePoint) => d.f1} name="Furnace 1" />
+          <Line accessor={(d: FurnacePoint) => d.f2} name="Furnace 2" />
+          <Legend placement="bottom" />
+        </Chart>
+      </div>
+    </div>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Value format per series
+
+```tsx
+/* A furnace and the line it heats, on two y axes: each series writes its value
+   in its own unit, through `format`. Without it the tooltip would take the y
+   axis' `tickFormat`, and without that the default - a bare number beside
+   another bare number. No render prop is needed for "°C". Hover to read it. */
+
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { corridorData, powerData, type CorridorPoint, type PowerPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const celsius = (v: number) => `${v.toFixed(1)} °C`;
+const kilowatts = (v: number) => `${v.toFixed(0)} kW`;
+
+export default function ValueFormat() {
+  return (
+    <Chart data={corridorData} height={260} ariaLabel="Furnace temperature and power draw with their units">
+      <XAxis accessor={(d: { t: number }) => d.t} time />
+      <YAxis accessor={(d: CorridorPoint) => d.temperature} label="°C" />
+      <YAxis id="power" position="right" accessor={(d: PowerPoint) => d.kw} label="kW" />
+      <Line accessor={(d: CorridorPoint) => d.temperature} name="Furnace" format={celsius} />
+      <Line data={powerData} accessor={(d: PowerPoint) => d.kw} yAxisId="power" name="Power draw" format={kilowatts} />
+      <Legend />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### Legend that hides a series
+
+```tsx
+/* The legend as a switch. `hidden` is the caller's state and `onToggle` hands
+   it the name of the entry clicked - the chart keeps nothing of its own. A
+   hidden series is not drawn and gives up its say in the extent, so the y axis
+   closes in on what is left; its entry stays, struck through, to be clicked
+   back. Without `onToggle` a legend is not clickable. */
+
+import { useState } from "react";
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { furnaceData, type FurnacePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function TogglingLegend() {
+  const [hidden, setHidden] = useState<ReadonlySet<string>>(() => new Set(["Set point"]));
+  const toggle = (name: string) =>
+    setHidden((previous) => {
+      const next = new Set(previous);
+      if (!next.delete(name)) next.add(name);
+      return next;
+    });
+
+  return (
+    <Chart data={furnaceData} height={260} ariaLabel="Two furnaces and their set point, one series hidden">
+      <XAxis accessor={(d: FurnacePoint) => d.t} time />
+      <YAxis accessor={(d: FurnacePoint) => d.f1} label="°C" />
+      <Line accessor={(d: FurnacePoint) => d.f1} name="Furnace 1" hidden={hidden.has("Furnace 1")} />
+      <Line accessor={(d: FurnacePoint) => d.f2} name="Furnace 2" hidden={hidden.has("Furnace 2")} />
+      <Line
+        accessor={(d: FurnacePoint) => d.setPoint}
+        name="Set point"
+        dash={[4, 4]}
+        hidden={hidden.has("Set point")}
+      />
+      <Legend onToggle={toggle} />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### The values as a table
+
+```tsx
+/* The chart's values as a table, for a reader who wants them all at once
+   rather than walked. `<DataTable />` puts a key at the end of the legend;
+   "Show data" lays a plain table over the plot - the time in the first column,
+   then one column per visible series, every value in the format the tooltip
+   writes it in - and "Hide data" gives the picture back.
+
+   The table lists what the chart shows: hide a series in the legend, or zoom
+   the axis, and the table follows. */
+
+import { useState } from "react";
+import { Chart, DataTable, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { furnaceData, type FurnacePoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const timeOfDay = (v: number) =>
+  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+const celsius = (v: number) => `${v.toFixed(1)} °C`;
+
+export default function ValuesAsTable() {
+  const [hidden, setHidden] = useState<readonly string[]>([]);
+  const toggle = (name: string) =>
+    setHidden((h) => (h.includes(name) ? h.filter((n) => n !== name) : [...h, name]));
+  return (
+    <Chart data={furnaceData} height={260} ariaLabel="Two furnaces over the early shift">
+      <XAxis accessor={(d: FurnacePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <YAxis accessor={(d: FurnacePoint) => d.f1} label="°C" />
+      <Line accessor={(d: FurnacePoint) => d.f1} name="Furnace 1" format={celsius} hidden={hidden.includes("Furnace 1")} />
+      <Line accessor={(d: FurnacePoint) => d.f2} name="Furnace 2" format={celsius} hidden={hidden.includes("Furnace 2")} />
+      <Legend onToggle={toggle} />
+      <Tooltip mode="x" />
+      <DataTable />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### A week as a table
+
+```tsx
+/* A week of a kiln, a reading a minute: 10,080 rows, and no reader wants
+   them all. Above 500 rows the table lists the course the way the line is
+   drawn - the first, lowest, highest and last value of each stretch of the
+   week - and its caption says how many readings the rows stand for. Zoom in
+   (Ctrl or ⌘ with the wheel) and the table lists every reading again.
+
+   Without a legend the key stands on a line of its own. */
+
+import { useState } from "react";
+import { Chart, DataTable, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { kilnData, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const celsius = (v: number) => `${v.toFixed(0)} °C`;
+
+export default function WeekAsTable() {
+  const [domain, setDomain] = useState<"data" | readonly [number, number]>("data");
+  return (
+    <Chart data={kilnData} height={240} ariaLabel="Kiln temperature across a week">
+      <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} label="Time" />
+      <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" />
+      <Line accessor={(d: KilnPoint) => d.temperature} name="Kiln" format={celsius} />
+      <Tooltip mode="x" />
+      <DataTable />
+    </Chart>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `TooltipProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `mode` | `"x" \| "nearest"` | — | "x": every series at the x position; "nearest": only the nearest point. |
+| `render` | `(hit: TooltipHit<T>) => ReactNode` | — | Render prop for content of one's own; without it the built-in tooltip applies. Compared by its source text, like `tickFormat` - with the same closure limit. |
+
+##### `LegendProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on. Without a value, above it. |
+| `onToggle` | `(name: string) => void` | — | Called with an entry's name when it is clicked - the series' name, or a state's label. The caller flips `hidden` on the series it means. Without it the legend is not clickable. |
+
+#### Why it is like this
+
+##### Every series is searched in its own axis space
+
+A chart here can hold several x axes, and a series knows only its own. So the hit is not one search over „the data“ but one binary search per series, over its own materialised x values, in the domain units of its own axis. The candidates are then compared in pixels - the one space all axes share. Comparing domain values across two axes would be comparing hours with pieces.
+
+##### The crosshair snaps to a point
+
+The crosshair stands on the data point that was hit, not under the pointer. A line between two samples is drawn, but nothing was measured there, and a crosshair between two points would invite reading off a value nobody has. In mode `"x"` the tooltip lists every series at that position; in mode `"nearest"` only the one point nearest the pointer, which is the question to ask when curves cross.
+
+### Benchmark
+
+Millions of points, measured instead of claimed - and the proof that a hover draws the overlay layer and nothing else.
+
+```ts
+import { Chart } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/benchmark
+
+#### Examples
+
+##### Benchmark
+
+```tsx
+/* Benchmark example (R-5.1 to R-5.3).
+
+   Three series; lines and the area downsample on their own above two points
+   per pixel column (charts-long-series 03). A hover draws the overlay layer
+   exclusively - the FPS display proves it. Switchable between three lines and a
+   mixed set of a bar, an area and a line.
+
+   Excluded from the screenshot comparisons (R-5.1) - it measures the moment it
+   exists, so a picture of it would compare two different runs.
+   Shows: the time of materialisation, the time of the last series draw and an FPS
+   counter that runs while the mouse moves over the plot area.
+   Live mode appends 10 points/s and shifts the data window along - the axis width
+   has to stay calm through the hysteresis (R-5.3). */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Area, Bar, Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import type { ChartPerf } from "@umriss-ui/charts";
+import { load, random, type LoadPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+const SIZES = [1_000, 100_000, 1_000_000] as const;
+const WINDOW = 400;
+
+/** Series kinds of the measuring run. A filled mark and a rectangle per point are
+    different work from a stroked path - the measurements in the capability record
+    must not hold for lines only. */
+type Mode = "lines" | "mixed";
+
+export default function Benchmark() {
+  const [data, setData] = useState<readonly LoadPoint[]>(() => load(5, 1_000));
+  const [perf, setPerf] = useState<ChartPerf>({
+    materializeMs: 0,
+    seriesDrawMs: 0,
+    points: 0,
+  });
+  const [fps, setFps] = useState<number | null>(null);
+  const [live, setLive] = useState(false);
+  const [mode, setMode] = useState<Mode>("lines");
+
+  const onPerf = useCallback((p: ChartPerf) => setPerf(p), []);
+
+  /* FPS measurement: runs only while the pointer is over the plot area. What is
+     measured is the actual frame rate of the page - if it drops, the series layer
+     is drawing along (which it must not do on a hover). */
+  const measuring = useRef<number | null>(null);
+  const startMeasuring = useCallback(() => {
+    if (measuring.current !== null) return;
+    let frames = 0;
+    let start = performance.now();
+    const step = () => {
+      frames++;
+      const now = performance.now();
+      if (now - start >= 400) {
+        setFps(Math.round((frames * 1000) / (now - start)));
+        frames = 0;
+        start = now;
+      }
+      measuring.current = requestAnimationFrame(step);
+    };
+    measuring.current = requestAnimationFrame(step);
+  }, []);
+  const stopMeasuring = useCallback(() => {
+    if (measuring.current !== null) cancelAnimationFrame(measuring.current);
+    measuring.current = null;
+    setFps(null);
+  }, []);
+  useEffect(() => stopMeasuring, [stopMeasuring]);
+
+  /* Streaming test (R-5.3): 10 points/s, a travelling window. */
+  useEffect(() => {
+    if (!live) return;
+    const r = random(4711);
+    const timer = window.setInterval(() => {
+      setData((previous) => {
+        const last = previous[previous.length - 1];
+        if (last === undefined) return previous;
+        const next: LoadPoint = {
+          t: last.t + 1,
+          s1: last.s1 + (r() - 0.5) * 3,
+          s2: last.s2 + (r() - 0.5) * 2.4,
+          s3: last.s3 + (r() - 0.5) * 3.6,
+        };
+        const grown = [...previous, next];
+        return grown.length > WINDOW ? grown.slice(grown.length - WINDOW) : grown;
+      });
+    }, 100);
+    return () => window.clearInterval(timer);
+  }, [live]);
+
+  const loadPoints = (n: number) => {
+    setLive(false);
+    setData(load(5, n));
+  };
+
+  return (
+    <>
+      <div className="demo-actions">
+        {SIZES.map((n) => (
+          <button key={n} className="demo-button" onClick={() => loadPoints(n)}>
+            {n.toLocaleString("en-US")} points
+          </button>
+        ))}
+        <button className="demo-button" onClick={() => setLive((v) => !v)}>{live ? "Stop live" : "Live"}</button>
+        <button
+          className="demo-button"
+          data-role="mode"
+          onClick={() => setMode((m) => (m === "lines" ? "mixed" : "lines"))}
+        >
+          {mode === "lines" ? "Mixed" : "Lines only"}
+        </button>
+      </div>
+      <dl className="metrics">
+        <div>
+          <dt>Points</dt>
+          <dd>{perf.points.toLocaleString("en-US")}</dd>
+        </div>
+        <div>
+          <dt>Materialisation</dt>
+          <dd>{perf.materializeMs.toFixed(1)} ms</dd>
+        </div>
+        <div>
+          <dt>Series draw</dt>
+          <dd>{perf.seriesDrawMs.toFixed(1)} ms</dd>
+        </div>
+        <div>
+          <dt>FPS (hover)</dt>
+          <dd>{fps === null ? "–" : fps}</dd>
+        </div>
+      </dl>
+      <div onPointerEnter={startMeasuring} onPointerLeave={stopMeasuring}>
+        <Chart
+          data={data}
+          height={320}
+          ariaLabel="Benchmark with three series"
+          onPerf={onPerf}
+        >
+          <XAxis accessor={(d: LoadPoint) => d.t} label="Index" />
+          <YAxis accessor={(d: LoadPoint) => d.s1} />
+          {mode === "lines" ? (
+            <Line accessor={(d: LoadPoint) => d.s1} name="S1" />
+          ) : (
+            <Bar accessor={(d: LoadPoint) => d.s1} name="S1" />
+          )}
+          {mode === "lines" ? (
+            <Line accessor={(d: LoadPoint) => d.s2} name="S2" />
+          ) : (
+            <Area accessor={(d: LoadPoint) => d.s2} name="S2" />
+          )}
+          <Line accessor={(d: LoadPoint) => d.s3} name="S3" />
+          <Legend placement="top" />
+          <Tooltip mode="x" />
+        </Chart>
+      </div>
+    </>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### A week of seconds
+
+```tsx
+/* A week of a kiln at one reading a second: 604,800 points per series, two
+   series. Lines and areas downsample on their own above two points per pixel
+   column: each column draws where the course entered it, its lowest and its
+   highest reading and where it left - a spike stays a spike -, so the week
+   costs a path of a few thousand points instead of 1.2 million. Zoom in with
+   Ctrl or ⌘ and the wheel: from about half an hour on, the chart draws every
+   reading again. The tooltip always reads the raw data.
+
+   It measures, like the benchmark above it - the time of the last series
+   draw -, and is therefore not photographed either (R-5.1). */
+
+import { useCallback, useState } from "react";
+import { Chart, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import type { ChartPerf } from "@umriss-ui/charts";
+import { kiln, type KilnPoint } from "../../data";
+
+/* The plant this is drawn from stands in the second tab, so that the
+   example can be copied whole. */
+
+export default function WeekOfSeconds() {
+  // Made on first render, not on import: 604,800 readings are no page's
+  // business until this one is open.
+  const [data] = useState(() => kiln(2024, 1000));
+  const [domain, setDomain] = useState<"data" | readonly [number, number]>("data");
+  const [drawMs, setDrawMs] = useState(0);
+  const onPerf = useCallback((p: ChartPerf) => setDrawMs(p.seriesDrawMs), []);
+  return (
+    <>
+      <dl className="metrics">
+        <div>
+          <dt>Points</dt>
+          <dd>{(2 * data.length).toLocaleString("en-US")}</dd>
+        </div>
+        <div>
+          <dt>Series draw</dt>
+          <dd>{drawMs.toFixed(1)} ms</dd>
+        </div>
+      </dl>
+      <Chart data={data} height={300} ariaLabel="Kiln temperature and gas flow across a week, one reading a second" onPerf={onPerf}>
+        <XAxis accessor={(d: KilnPoint) => d.t} time domain={domain} onDomainChange={setDomain} />
+        <YAxis accessor={(d: KilnPoint) => d.temperature} label="°C" domain="visible" />
+        <YAxis id="gas" position="right" accessor={(d: KilnPoint) => d.gas} label="m³/h" domain="visible" />
+        <Line accessor={(d: KilnPoint) => d.temperature} name="Temperature" />
+        <Line accessor={(d: KilnPoint) => d.gas} yAxisId="gas" name="Gas" />
+        <Legend placement="top" />
+        <Tooltip mode="x" />
+      </Chart>
+    </>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+## The rest of the API
+
+Exported as well, and named on no page above: the pure modules behind the components, and the types they are made of. Each with its declaration as the package's `.d.ts` carries it.
+
+### `invalidateTheme`
+
+```ts
+/** Explicit invalidation: devalue the cache, every living chart reads anew and
+    redraws. */
+function invalidateTheme(): void;
+```
+
+### `ResolvedTheme`
+
+```ts
+interface ResolvedTheme {
+    colorAxis: string;
+    colorGrid: string;
+    colorText: string;
+    colorBg: string;
+    /** Colours of the two limit severities. A limit carries the colour of its
+        severity, not that of its series - it belongs to none. */
+    colorWarning: string;
+    colorAlarm: string;
+    /** The third outcome of an assessment. "unknown" deliberately has no
+        colour: a missing value becomes a hole like every gap in this library, and
+        a hole carries no colour, because a colour would be a claim. */
+    colorOk: string;
+    font: string;
+    fontMono: string;
+    series: readonly string[];
+    /** The page is in forced colours: every colour above is a system colour, and
+        the chart encodes by marks whatever its `encoding`. */
+    forced: boolean;
+}
+```
+
+### `LinearScale`
+
+```ts
+class LinearScale implements Scale {
+    readonly domain: readonly [number, number];
+    readonly range: readonly [number, number];
+    /** Pre-computed line equation px = v·m + b - the draw loop uses it directly. */
+    readonly m: number;
+    readonly b: number;
+    constructor(domain: readonly [number, number], range: readonly [number, number]);
+    toPx(v: number): number;
+    fromPx(px: number): number;
+    ticks(n: number): number[];
+}
+```
+
+### `assess`
+
+```ts
+/** What the value is, given the limit set. A pure function of the two.
+
+    A missing or non-finite value yields `unknown` - and nothing else: the
+    deviation of a value nobody has is unknown to everybody too.
+
+    A bound is violated when the value lies beyond it, not when it lies on it. A
+    value exactly on the upper bound is in order. That is decided once here
+    (ADR-0006), so that two building blocks on the same screen do not disagree
+    about the edge.
+
+    Where several bounds are violated the most severe wins; among equally severe
+    ones the one the value lies furthest beyond. Under a tie in both, the one
+    named first.
+
+    No hysteresis: that would need the previous state, and a function of one
+    value has none. Exactly that is the property which makes this module safe to
+    duplicate. */
+function assess(value: number | null | undefined, set?: LimitSet): Assessment;
+```
+
+### `verdictWeight`
+
+```ts
+/** How heavily a verdict weighs, as a number - for sorting and comparing, as
+    when a matrix is to bring its worst cell to the top. It stands here so that
+    the order is not reinvented at every call site. */
+function verdictWeight(verdict: Verdict): number;
+```
+
+### `Assessment`
+
+```ts
+/** The verdict and what led to it. */
+interface Assessment {
+    verdict: Verdict;
+    /** The violated limit - the same object the caller passed in, so that it can
+        be recognised against the caller's own data. Absent where none is
+        violated. */
+    limit?: Limit;
+    /** The amount beyond the bound, always positive. Absent where none is
+        violated. */
+    excess?: number;
+    /** The signed distance from the target. Absent where none is set - a missing
+        target yields no deviation of zero.
+  
+        Two fields and not one: excess and deviation are two numbers, and a single
+        field meaning the one thing when a bound is violated and the other
+        otherwise reads well and is wrong at three in the morning. */
+    deviation?: number;
+}
+```
+
+### `Limit`
+
+```ts
+/** A bound: a value, a side and a severity. No more - a tolerance band is
+    derived and never an input (two limits of equal severity on opposite sides
+    enclose one). That keeps the one-sided case, which is the more common one,
+    free of a `null` on the other edge. */
+interface Limit {
+    value: number;
+    side: Side;
+    severity: Severity;
+}
+```
+
+### `LimitSet`
+
+```ts
+/** The set a value is read against: its bounds and, where there is one, its
+    target.
+
+    The target is not a limit. It is missed, never violated, and it is never the
+    edge of a region. Conflating the two is how a tile turns red for being above
+    target. */
+interface LimitSet {
+    /** In any order; none, one or several. */
+    limits?: readonly Limit[];
+    target?: number;
+}
+```
+
+### `Side`
+
+```ts
+/** Whether a limit is an upper or a lower bound. */
+type Side = "upper" | "lower";
+```
+
+### `Verdict`
+
+```ts
+/** What a value is. Four outcomes, not three.
+
+    `unknown` is an outcome of its own and not a `null` return: a `null`
+    invites `?? "ok"` at the call site, and that very expression is the defect
+    this module exists to prevent. A value nobody has is a reason to look and
+    not a reason to relax. */
+type Verdict = "ok" | "unknown" | "warning" | "alarm";
+```
+
+### `sigmaFromLimit`
+
+```ts
+/** Sigma calculated back from a limit that stands on paper. For callers whose
+    baseline has been handed down as a centre line and a control limit. */
+function sigmaFromLimit(center: number, upper: number): number;
+```
+
+### `zones`
+
+```ts
+/** The faintly drawn zone lines. Rule 4 is about the two-sigma zone, and a
+    reader cannot check it against a chart that does not show it. */
+function zones(limits: ControlLimits, multiples?: readonly number[]): Zone[];
+```
+
+### `ruleOutlier`
+
+```ts
+/** Rule 1 (Nelson 1, Western Electric 1): one point beyond three sigma.
+    Beyond, not on it - a point exactly on the limit violates nothing. */
+function ruleOutlier(values: readonly number[], limits: ControlLimits): number[];
+```
+
+### `ruleRun`
+
+```ts
+/** Rule 2 (Nelson 2): a run of points on one side of the centre line. The
+    default length is nine - Nelson. Western Electric counts eight; that is why
+    the length is a parameter and not a literal, so that a works with a rule of
+    its own need not argue with the library. */
+function ruleRun(values: readonly number[], limits: ControlLimits, length?: number): number[];
+```
+
+### `ruleTrend`
+
+```ts
+/** Rule 3 (Nelson 3): a run of nothing but rises or nothing but falls. The
+    default length is six points, so five steps - Nelson. Two equal values are
+    neither a rise nor a fall and break the run. */
+function ruleTrend(values: readonly number[], length?: number): number[];
+```
+
+### `ruleTwoOfThree`
+
+```ts
+/** Rule 4 (Nelson 5): two of three consecutive points beyond two sigma on the
+    same side. Reported are the points beyond the zone, not the one in between -
+    that one is unremarkable and, marked, would look like a measurement error. */
+function ruleTwoOfThree(values: readonly number[], limits: ControlLimits): number[];
+```
+
+### `violatedIndices`
+
+```ts
+/** All violated indices, ascending and free of duplicates - the scatter drawn
+    beside the line. */
+function violatedIndices(found: readonly Violation[]): number[];
+```
+
+### `defaultRules`
+
+```ts
+/** All four rules, with Nelson's run lengths: nine points on one side, six
+    points in succession rising or falling. Western Electric counts eight; both
+    lengths are therefore parameters. */
+const defaultRules: RuleOptions;
+```
+
+### `ControlLimits`
+
+```ts
+/** Centre line, estimated spread and the control limits at three sigma. */
+interface ControlLimits {
+    readonly center: number;
+    /** Estimated spread of a single value, not the distance to the limit. */
+    readonly sigma: number;
+    readonly upper: number;
+    readonly lower: number;
+}
+```
+
+### `RuleName`
+
+```ts
+/** Name of a rule, the way it is switched on and off in `violations`. */
+type RuleName = "outlier" | "run" | "trend" | "twoOfThree";
+```
+
+### `Zone`
+
+```ts
+/** A zone line: k times sigma above and below the centre line. */
+interface Zone {
+    readonly k: number;
+    readonly upper: number;
+    readonly lower: number;
+}
+```
+
+### `paretoDefaults`
+
+```ts
+const defaultOptions: Omit<ParetoOptions, "remainderName">;
+// exported as paretoDefaults
+```
+
+### `ParetoSettings`
+
+```ts
+/** What a call may specify: a collect rank only together with the name of the
+    remainder it creates. */
+type ParetoSettings = {
+    readonly cutoff?: number;
+} & ({
+    readonly collectRank?: undefined;
+    readonly remainderName?: undefined;
+} | {
+    readonly collectRank: number;
+    readonly remainderName: string;
+});
+```
+
+### `ParetoItem`
+
+```ts
+/** An item, the way the caller counts it. */
+interface ParetoItem {
+    readonly name: string;
+    readonly value: number;
+}
+```
+
+### `ParetoOptions`
+
+```ts
+interface ParetoOptions {
+    /** The share whose crossing is sought. Whoever lands exactly on it counts as
+        the crossing: the question is "which reasons make up eighty per cent", and
+        whoever reaches eighty exactly belongs to them. */
+    readonly cutoff: number;
+    /** How many items stay on their own. Everything behind that becomes a single
+        entry. Beyond the number of items no remainder arises at all - not an empty
+        one. Default: infinity, so no collecting. */
+    readonly collectRank: number;
+    /** Name of the collected remainder. `@umriss-ui/charts` has no wording module
+        - every string it draws comes from the caller - and no module is introduced
+        for a single label. Hence no default either: until library-audit 03 the
+        default here was "Sonstige", the one German word the package brought along
+        itself. */
+    readonly remainderName?: string;
+}
+```
+
+### `ParetoResult`
+
+```ts
+interface ParetoResult {
+    readonly entries: readonly ParetoEntry[];
+    /** Total of the drawn entries - after collecting, the same as before. */
+    readonly total: number;
+    /** Index of the first entry whose cumulative share reaches the cutoff; -1
+        when it is never reached. */
+    readonly cutoffIndex: number;
+}
+```
+
+### `calendarFrom`
+
+```ts
+/** Calendar from an input - a built calendar is passed straight through, a raw
+    list is built once and remembered. */
+function calendarFrom(input: CalendarInput): OperatingCalendar;
+```
+
+### `toOperatingTime`
+
+```ts
+/** Wall clock time → operating time.
+
+    A point in a removed interval is a gap and becomes `NaN` - the encoding every
+    gap of this library already uses, and the drawing loop breaks the mark at it
+    of its own accord. Not the edge of the interval: a measurement from a time
+    which, according to the calendar, did not exist could not be laid there
+    honestly; it would pile up on what really does lie there. The same holds
+    before the first and after the last interval.
+
+    The end of one interval and the beginning of the next fall on the same value:
+    in operating time they are neighbours, and the line between two points on
+    either side is drawn. That is not a lie but the whole purpose of the axis; the
+    mark in the axis band tells the reader that time was taken out there. */
+function toOperatingTime(wallClock: number, input: CalendarInput): number;
+```
+
+### `toWallClock`
+
+```ts
+/** Operating time → wall clock time; outside [0, total] there is none.
+
+    At a seam - the end of an interval which is at the same time the beginning of
+    the next - the beginning of the next comes out: from there time counts again,
+    and a pointer aiming there aims at the coming shift. Only the end of the last
+    interval has no next and comes back as itself. */
+function toWallClock(operatingTime: number, input: CalendarInput): number;
+```
+
+### `mapSeries`
+
+```ts
+/** Map a whole series inwards - the route materialisation takes when it wants to
+    go it in one piece. Only the first n values are touched. */
+function mapSeries(input: CalendarInput, source: Float64Array, n: number, target: Float64Array): void;
+```
+
+### `removedIntervals`
+
+```ts
+/** The removed spans between the operating intervals, for the mark in the axis
+    band. A chart that takes a weekend out and does not say so claims a
+    continuity it does not have. Before the first and after the last interval
+    there is nothing to mark: that lies outside the axis' extent. */
+function removedIntervals(input: CalendarInput): RemovedSpan[];
+```
+
+### `breaks`
+
+```ts
+/** The breaks in operating time that lie within the extent [from, to] - what the
+    axis must mark, in domain units. */
+function breaks(input: CalendarInput, from: number, to: number): number[];
+```
+
+### `operatingTicks`
+
+```ts
+/** Tick values for an axis extent that already stands in OPERATING TIME - the
+    route the axis layout takes.
+
+    The extent is trimmed to the operating time that exists (an extent widened to
+    nice boundaries reaches beyond it), calculated back into wall clock time, and
+    the candidates arise there. The step comes from the span in operating time and
+    not from the one in wall clock time: roughly one candidate per step of
+    operating time survives, and calculated from the wall clock span, four out of
+    ten wanted ticks would be left. */
+function operatingTicks(input: CalendarInput, from: number, to: number, count: number, offset?: number): number[];
+```
+
+### `operatingTimeTicks`
+
+```ts
+/** Ticks for an operating time axis, from an extent in WALL CLOCK TIME.
+
+    The candidates arise in wall clock time on multiples of the step - hours,
+    shift changes, days - whatever lies in removed time falls away, the rest is
+    mapped. Never the other way round: ticks generated in operating time land in
+    the middle of a shift and yield an axis labelled 14.5 and 29.0 which nobody
+    can read.
+
+    The offset shifts the grid; with it a local time hits its own midnight without
+    this module having to know about time zones.
+
+    If two candidates fall on the same operating time - the end of one shift and
+    the beginning of the next - the earlier one stays: two labels on the same
+    pixel would be one too many.
+
+    Both times come back, because the axis needs both: the operating time to
+    place the tick, the wall clock time to label it. */
+function operatingTimeTicks(input: CalendarInput, from: number, to: number, step: number, offset?: number): OperatingTimeTick[];
+```
+
+### `timeStep`
+
+```ts
+/** Step for tick candidates in wall clock time, at an intended count. Rounded up
+    to the next readable step, so that no more ticks arise than wanted. Above the
+    day steps it continues in whole days. */
+function timeStep(span: number, count: number): number;
+```
+
+### `SECOND`
+
+```ts
+const SECOND = 1000;
+```
+
+### `MINUTE`
+
+```ts
+const MINUTE: number;
+```
+
+### `DAY`
+
+```ts
+const DAY: number;
+```
+
+### `CalendarInput`
+
+```ts
+/** Every function of this module takes either: the raw list as it stands on the
+    axis, or the calendar built from it. */
+type CalendarInput = OperatingCalendar | readonly OperatingInterval[];
+```
+
+### `OperatingCalendar`
+
+```ts
+/** An operating calendar: sorted, merged intervals with the operating time
+    accumulated before each one begins. An empty calendar is no calendar: it maps
+    unchanged.
+
+    Build once, then pass around: the mapping runs once per point, and were it to
+    sort and accumulate every time, the calendar would be the most expensive
+    thing about the frame. */
+interface OperatingCalendar {
+    readonly intervals: readonly OperatingInterval[];
+    /** Operating time accumulated before the respective interval begins. */
+    readonly offsets: readonly number[];
+    /** The whole operating time - the axis' extent is [0, total]. */
+    readonly total: number;
+}
+```
+
+### `OperatingTimeTick`
+
+```ts
+/** A tick: where it stands on the clock and where it lies on the axis. */
+interface OperatingTimeTick {
+    readonly wallClock: number;
+    readonly operatingTime: number;
+}
+```
+
+### `RemovedSpan`
+
+```ts
+/** A removed span and the place it collapses onto. */
+interface RemovedSpan {
+    readonly from: number;
+    readonly to: number;
+    /** Operating time on which the whole span lies - a point, not a stretch. */
+    readonly operatingTime: number;
+}
+```
+
+### `AreaSeriesConfig`
+
+```ts
+interface AreaSeriesConfig<T = unknown> extends SeriesBase<T>, Stackable {
+    kind: "area";
+    /** Lower edge; without a value the fixed baseline 0. */
+    baseline?: Accessor<T>;
+    /** Opacity of the fill; the outline stays fully opaque. */
+    fillOpacity: number;
+    strokeWidth: number;
+    /** Dash pattern of the outline. */
+    dash?: readonly number[];
+}
+```
+
+### `LimitBandConfig`
+
+```ts
+interface LimitBandConfig extends LimitBase {
+    kind: "band";
+    from: number;
+    to: number;
+}
+```
+
+### `LimitConfig`
+
+```ts
+type LimitConfig = LimitLineConfig | LimitBandConfig;
+```
+
+### `LimitLineConfig`
+
+```ts
+interface LimitLineConfig extends LimitBase {
+    kind: "line";
+    value: number;
+}
+```
+
+### `MatrixSeriesConfig`
+
+```ts
+interface MatrixSeriesConfig<T = unknown> extends SeriesBase<T> {
+    kind: "matrix";
+    /** The value that decides the colour - the third channel (ADR-0011).
+        The base accessor yields the row position, not this value. */
+    value: Accessor<T>;
+    coloring: MatrixColoring;
+}
+```
+
+### `StateSeriesConfig`
+
+```ts
+interface StateSeriesConfig<T = unknown> extends SeriesBase<T> {
+    kind: "state";
+    /** The closed set of states. The accessor yields the index into it - a number,
+        not a key (ADR-0007). */
+    states: readonly StateEntry[];
+    /** Lower edge of the lane in domain units of the y axis; without a value the
+        beginning of the axis domain. */
+    laneFrom?: number;
+    /** Upper edge of the lane; without a value the end of the axis domain. */
+    laneTo?: number;
+}
+```
+
+### `AxisConfig`
+
+```ts
+interface AxisConfig<T = unknown> {
+    id: string;
+    orientation: AxisOrientation;
+    position: AxisPosition;
+    accessor: (d: T, index: number) => number;
+    label?: string;
+    tickCount?: number;
+    tickFormat?: (v: number) => string;
+    /** "visible" is a y axis' only: the extent of what its series show inside
+        their x axis' domain. */
+    domain: "nice" | "data" | "visible" | readonly [number, number];
+    /** undefined = the default per R-4.15 (only the first registered axis per
+        orientation). */
+    grid?: boolean;
+    /** Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are
+        not numbers but places: the lanes of a state stack, the categories of a
+        Pareto. */
+    ticks?: readonly number[];
+    /** The values are instants in milliseconds: ticks on local boundaries,
+        labels by level. A calendar implies it. */
+    time?: boolean;
+    /** Operating calendar: the intervals in which time counts. With it,
+        materialisation maps wall clock time onto operating time before the scale
+        calculates - the scale stays affine (ADR-0001). */
+    calendar?: readonly OperatingInterval[];
+    /** y axes only: this axis' ticks on the first y axis' grid. */
+    alignTicks?: boolean;
+    /** x axes only: where wheel, drag, pinch and double click propose a
+        domain. Without it the axis does not zoom. */
+    onDomainChange?: (domain: [number, number]) => void;
+}
+```
+
+### `AxisOrientation`
+
+```ts
+type AxisOrientation = "x" | "y";
+```
+
+### `AxisPosition`
+
+```ts
+type AxisPosition = "bottom" | "top" | "left" | "right";
+```
+
+### `BarSeriesConfig`
+
+```ts
+interface BarSeriesConfig<T = unknown> extends SeriesBase<T>, Stackable {
+    kind: "bar";
+    /** Width as a fraction of the step; the group shares this fraction. */
+    barWidth: number;
+}
+```
+
+### `LegendConfig`
+
+```ts
+interface LegendConfig {
+    placement: "top" | "bottom";
+}
+```
+
+### `LineSeriesConfig`
+
+```ts
+interface LineSeriesConfig<T = unknown> extends SeriesBase<T> {
+    kind: "line";
+    strokeWidth: number;
+    dash?: readonly number[];
+    markers: "auto" | "always" | "never";
+    /** Sample-and-hold: each value holds until the next sample. */
+    step?: boolean;
+}
+```
+
+### `MaterializedSeries`
+
+```ts
+/** Materialised series: the draw loop works only on this (R-2.7).
+    Gaps (null/undefined/NaN/±Infinity out of the accessor) are encoded as NaN
+    (R-2.5). */
+interface MaterializedSeries {
+    x: Float64Array;
+    y: Float64Array;
+    /** Lower edge, where the baseline is an accessor of its own; otherwise null.
+        A fixed baseline needs no channel - it is a number (R-2.7). */
+    y0: Float64Array | null;
+    /** Value channel: the third value per point, which today only the matrix
+        needs. Named rather than overloading y0 - a property that only some kinds
+        carry does not belong in the shared type with a comment (ADR-0011). null
+        for every kind that does not use it. */
+    w: Float64Array | null;
+    length: number;
+}
+```
+
+### `Rect`
+
+```ts
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+```
+
+### `Scale`
+
+```ts
+interface Scale {
+    domain: readonly [number, number];
+    range: readonly [number, number];
+    /** Affine coefficients of the mapping px = v·m + b.
+  
+        They stand in the interface because the drawing code reads them and
+        computes inline in the point loop instead of calling toPx() per point -
+        that is what carries 60 fps at millions of points. Every scale of this
+        library is affine; see docs/adr/0001-affine-scale-contract.md, which also
+        says what a later log scale would cost. */
+    readonly m: number;
+    readonly b: number;
+    toPx(v: number): number;
+    fromPx(px: number): number;
+    ticks(n: number): number[];
+}
+```
+
+### `ScatterSeriesConfig`
+
+```ts
+interface ScatterSeriesConfig<T = unknown> extends SeriesBase<T> {
+    kind: "scatter";
+    /** Point radius in CSS pixels. */
+    radius: number;
+}
+```
+
+### `SeriesBase`
+
+```ts
+interface SeriesBase<T = unknown> {
+    /** Y value; null/undefined/NaN/±Infinity means a gap (R-2.5). */
+    accessor: Accessor<T>;
+    /** Series-own data; overrides the container data (R-2.4). */
+    data?: readonly T[];
+    xAxisId: string;
+    yAxisId: string;
+    name?: string;
+    /** The value in the tooltip; before the y axis' `tickFormat`. Compared by its
+        source text, as an accessor is. */
+    format?: (value: number) => string;
+    color?: string;
+    /** A role instead of a colour value: the theme resolves it, in both themes.
+        For series that mean something rather than just being the next one - the
+        violating points of a control chart, say. `color` beats it. */
+    tone?: "ok" | "warning" | "alarm";
+    /** Not drawn, not hit, not in its axes' extent; its legend entry stays. */
+    hidden?: boolean;
+}
+```
+
+### `SeriesConfig`
+
+```ts
+type SeriesConfig<T = unknown> = LineSeriesConfig<T> | AreaSeriesConfig<T> | BarSeriesConfig<T> | ScatterSeriesConfig<T> | StateSeriesConfig<T> | MatrixSeriesConfig<T>;
+```
+
+### `SeriesKind`
+
+```ts
+type SeriesKind = SeriesConfig["kind"];
+```
+
+### `TooltipConfig`
+
+```ts
+interface TooltipConfig<T = unknown> {
+    mode: "x" | "nearest";
+    render?: (hit: TooltipHit<T>) => ReactNode;
+}
+```
+
+### `TooltipPoint`
+
+```ts
+/** One hit per series in the tooltip (R-4.4). */
+interface TooltipPoint<T = unknown> {
+    seriesName: string;
+    color: string;
+    /** The point's x value on its own x axis - with several x axes it can
+        differ from the hit's. */
+    xValue: number;
+    /** The point's y value; in a stack its own value, not its top - in a
+        normalised stack its share in percent. */
+    yValue: number;
+    datum: T;
+    index: number;
+    /** Only for the matrix: the value out of the value channel. It stands here and
+        not in yValue, because yValue is the position on the y axis - for a matrix
+        therefore the row. Putting both into one field would be exactly the
+        overloading ADR-0011 is written against. */
+    value?: number;
+    /** Only for state series: the section being pointed at.
+        A duration does not stand here - it is the difference of two numbers the
+        entry already carries, and formatting it would presuppose knowing what the
+        x axis means. The caller knows that, not this library. */
+    segment?: {
+        from: number;
+        to: number;
+        label: string;
+    };
+}
+```
+
+### `resolveColours`
+
+```ts
+/** Any number of CSS colours - a token, `light-dark(…)`, `var(--…)`, a
+    literal - resolved to values a canvas can draw, in the scheme that applies
+    at `root`. The same probe `resolveTheme` uses, for a canvas of a
+    neighbouring package (ADR-0022): the schedule draws its subtasks with the
+    colours of @umriss-ui/core and of its caller, not with the chart palette.
+
+    Not cached: the caller keeps the result and reads anew when
+    `subscribeTheme` tells it to. Where no resolution comes back (a DOM
+    without a style engine), a colour is given back as it stands. */
+function resolveColours<K extends string>(root: Element, colours: Readonly<Record<K, string>>): Record<K, string>;
+```
+
+### `subscribeTheme`
+
+```ts
+/** Subscribe to theme invalidations - a switch of `color-scheme` on the
+    document, the system's preference, or `invalidateTheme()`. The scenes of
+    the charts use it, and so does any canvas that resolved its colours with
+    `resolveColours`. Returns the unsubscribe. */
+function subscribeTheme(notify: () => void): () => void;
+```
+
+### `toOperatingTimeClamped`
+
+```ts
+/** Wall clock time → operating time, but without NaN: whatever lies in removed
+    time falls onto the seam that this span collapses onto anyway; whatever lies
+    before the first or after the last interval onto 0 or onto the whole
+    operating time respectively.
+
+    Why this exists: the materialised x values must stay ascending. Binary search
+    - for a hit as for a segment boundary - assumes that, and every comparison
+    with NaN is false, so that a search over a block of NaN silently lands on the
+    wrong point. The clamped value is a POSITION, not a statement: the point
+    itself is carried as a gap and is never drawn and never hit. */
+function toOperatingTimeClamped(wallClock: number, input: CalendarInput): number;
+```
+
+### `localOffset`
+
+```ts
+/** The local offset at an instant, as the shift of a grid that is to lie on
+    local time: `wallClock = offset + k · step`. Taken at one instant, it holds
+    for a grid up to the next clock change. */
+function localOffset(instant: number): number;
+```
+
+### `DEFAULT_CHARTS_WORDING`
+
+```ts
+const DEFAULT_CHARTS_WORDING: ChartsWording;
+```
+
+### `DataTableGroup`
+
+```ts
+/** One table of the data table: the series of one x axis, or one matrix. Every
+    cell is text already, in the format the tooltip writes. */
+interface DataTableGroup {
+    key: string;
+    caption: string;
+    columns: readonly string[];
+    /** The first cell of each row is its x - the row's heading. */
+    rows: readonly (readonly string[])[];
+}
+```
+
+## Files the examples show
+
+The demo's own data, which some examples import from beside themselves. Copied with the example, it runs.
+
+### `data.ts`
+
+```ts
+/* Deterministic, generic number series (R-6.2).
+   Seed-based, so that screenshots are stable; deliberately without any subject
+   matter. */
+
+export interface Point {
+  t: number;
+  a: number;
+  b: number;
+  c: number;
+  d: number | null;
+}
+
+/** A small LCG - reproducible across runs and platforms. */
+export function random(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
+}
+
+/** A series with four channels; channel d contains a deliberate gap (R-2.5),
+    and one reading in the middle of it - a point between two gaps. */
+export function series(seed: number, n: number, gap = false): Point[] {
+  const r = random(seed);
+  const points: Point[] = new Array<Point>(n);
+  let a = 50;
+  let b = 30;
+  let c = 70;
+  let d = 45;
+  const gapFrom = Math.floor(n * 0.42);
+  const gapTo = Math.floor(n * 0.55);
+  const lone = Math.floor((gapFrom + gapTo) / 2);
+  for (let i = 0; i < n; i++) {
+    a += (r() - 0.5) * 6;
+    b += (r() - 0.48) * 4;
+    c += (r() - 0.52) * 5;
+    d += (r() - 0.5) * 7;
+    points[i] = {
+      t: i,
+      a,
+      b,
+      c,
+      d: gap && i >= gapFrom && i <= gapTo && i !== lone ? null : d,
+    };
+  }
+  return points;
+}
+
+export interface DualPoint {
+  t: number;
+  small: number;
+  large: number;
+  medium: number;
+}
+
+/** Two to three series with clearly different extents. */
+export function dualSeries(seed: number, n: number): DualPoint[] {
+  const r = random(seed);
+  const points: DualPoint[] = new Array<DualPoint>(n);
+  let small = 21;
+  let large = 128000;
+  let medium = 640;
+  for (let i = 0; i < n; i++) {
+    small += (r() - 0.5) * 0.9;
+    large += (r() - 0.5) * 9000;
+    medium += (r() - 0.5) * 40;
+    points[i] = { t: 2000 + i, small, large, medium };
+  }
+  return points;
+}
+
+export interface LoadPoint {
+  t: number;
+  s1: number;
+  s2: number;
+  s3: number;
+}
+
+/** Data set for the benchmark example: three series of any length. */
+export function load(seed: number, n: number): LoadPoint[] {
+  const r = random(seed);
+  const points: LoadPoint[] = new Array<LoadPoint>(n);
+  let s1 = 100;
+  let s2 = 60;
+  let s3 = 140;
+  for (let i = 0; i < n; i++) {
+    s1 += r() - 0.5;
+    s2 += (r() - 0.5) * 0.8;
+    s3 += (r() - 0.5) * 1.2;
+    points[i] = { t: i, s1, s2, s3 };
+  }
+  return points;
+}
+
+export interface MixedPoint {
+  t: number;
+  inflow: number;
+  outflow: number;
+  stock: number;
+  /** A corridor with a deliberate gap - the fill gets a hole there. */
+  corridorLower: number | null;
+  corridorUpper: number | null;
+  sample: number;
+}
+
+/** Data set of the mixed example: two bar series, a corridor as a band area with a
+    gap, a line above it and samples as a scatter. Few periods, so that individual
+    bars stay visible. */
+export function mixed(seed: number, n: number): MixedPoint[] {
+  const r = random(seed);
+  const points: MixedPoint[] = new Array<MixedPoint>(n);
+  let stock = 62;
+  const gapFrom = Math.floor(n * 0.45);
+  const gapTo = Math.floor(n * 0.62);
+  for (let i = 0; i < n; i++) {
+    const inflow = 30 + r() * 25;
+    const outflow = 22 + r() * 20;
+    stock += (inflow - outflow) * 0.35;
+    const inGap = i >= gapFrom && i <= gapTo;
+    points[i] = {
+      t: i + 1,
+      inflow,
+      outflow,
+      stock,
+      corridorLower: inGap ? null : stock - 9 - r() * 3,
+      corridorUpper: inGap ? null : stock + 9 + r() * 3,
+      sample: stock + (r() - 0.5) * 26,
+    };
+  }
+  return points;
+}
+
+/* ---------------------------------------------------------------------------
+   Data of the operation instruments.
+
+   Up to here every series in this file is deliberately without subject matter
+   (R-6.2): a curve is a curve, and "Series A" says enough. From here on that no
+   longer works. A state band without states, a Pareto without fault reasons and a
+   control chart without a measurement series show nothing - with these instruments
+   the meaning IS the subject. What remains is the other half of the rule, and that
+   is the important one: everything here is seed-based and therefore identical
+   across runs and platforms.
+   --------------------------------------------------------------------------- */
+
+export const HOUR_MS = 3_600_000;
+export const DAY_MS = 24 * HOUR_MS;
+
+/** Monday, 16 March 2026, 00:00 local time - the anchor of every time series
+    below. */
+export const WEEK_START = new Date("2026-03-16T00:00:00").getTime();
+
+export interface StatePoint {
+  t: number;
+  /** A code in PLANT_STATES. */
+  m1: number;
+  m2: number;
+  /** A machine without a report: a gap stands here. */
+  m3: number | null;
+  temperature: number;
+}
+
+/** The closed set of states of the demo. The order is the code. */
+export const PLANT_STATES = [
+  { label: "Production", color: "#2f7d51" },
+  { label: "Setup", color: "#c08a2e" },
+  { label: "Fault", color: "#b4483f" },
+  { label: "Maintenance", color: "#5b6b8c" },
+] as const;
+
+/** One shift of three machines: states per quarter of an hour, plus a temperature
+    curve on the same x axis - that is what shows why the band sits in the same
+    chart and not beside it. */
+export function shift(seed: number, n: number): StatePoint[] {
+  const r = random(seed);
+  const points: StatePoint[] = new Array<StatePoint>(n);
+  const start = WEEK_START + 6 * HOUR_MS;
+  let m1 = 0;
+  let m2 = 0;
+  let m3: number | null = 0;
+  let temperature = 806;
+  for (let i = 0; i < n; i++) {
+    if (r() < 0.16) m1 = Math.floor(r() * 4);
+    if (r() < 0.12) m2 = Math.floor(r() * 3);
+    // From a point on, machine 3 reports nothing any more: the band gets a hole,
+    // and a hole is not a colour for "unknown".
+    if (i > n * 0.62 && i < n * 0.78) m3 = null;
+    else if (r() < 0.1) m3 = Math.floor(r() * 3);
+    temperature += (r() - 0.5) * 9 + (m1 === 2 ? 6 : -0.6);
+    points[i] = {
+      t: start + i * 15 * 60_000,
+      m1,
+      m2,
+      m3,
+      temperature,
+    };
+  }
+  return points;
+}
+
+export interface Measurement {
+  n: number;
+  value: number;
+}
+
+/** Individual values of a feature inspection. The process runs cleanly and then
+    begins to drift - in such a way that the run rule fires and not only the
+    outlier rule. */
+export function measurements(seed: number, n: number): Measurement[] {
+  const r = random(seed);
+  const points: Measurement[] = new Array<Measurement>(n);
+  for (let i = 0; i < n; i++) {
+    const drift = i > n * 0.68 ? (i - n * 0.68) * 0.05 : 0;
+    const outlier = i === Math.floor(n * 0.42) ? 0.9 : 0;
+    points[i] = { n: i, value: 12.5 + (r() - 0.5) * 0.34 + drift + outlier };
+  }
+  return points;
+}
+
+export interface DowntimeReason {
+  name: string;
+  value: number;
+}
+
+/** Downtime reasons of one week, in an arbitrary input order - the sorting is the
+    job of the Pareto module, not of the data. */
+export const DOWNTIME_REASONS: readonly DowntimeReason[] = [
+  { name: "Tool breakage", value: 34 },
+  { name: "Material shortage", value: 128 },
+  { name: "Setup over plan", value: 96 },
+  { name: "Sensor fault", value: 21 },
+  { name: "Coolant", value: 12 },
+  { name: "Operator error", value: 47 },
+  { name: "Power dip", value: 8 },
+  { name: "Labeller", value: 6 },
+  { name: "Conveyor", value: 5 },
+  { name: "Small part", value: 3 },
+];
+
+export interface CellPoint {
+  /** Hour of the day. */
+  hour: number;
+  /** The row: the machine. */
+  machine: number;
+  /** Overall equipment effectiveness in per cent; null = no measurement. */
+  oee: number | null;
+}
+
+export const MACHINES = [
+  "Press 1",
+  "Press 2",
+  "Mill 3",
+  "Mill 4",
+  "Furnace 1",
+  "Furnace 2",
+  "Assembly A",
+  "Assembly B",
+] as const;
+
+/** Machine × hour. One machine has a bad hour, one whole hour is bad everywhere -
+    only the difference makes the matrix worth reading. And a few cells are
+    missing: a hole, not a zero. */
+export function utilizationMatrix(seed: number): CellPoint[] {
+  const r = random(seed);
+  const cells: CellPoint[] = [];
+  for (let m = 0; m < MACHINES.length; m++) {
+    for (let h = 0; h < 24; h++) {
+      let oee: number | null = 62 + r() * 32;
+      if (m === 3 && h > 9 && h < 15) oee = 18 + r() * 12; // one machine
+      if (h === 21) oee = 24 + r() * 10; // one hour, everywhere
+      if (m === 6 && h > 1 && h < 5) oee = null; // no measurement
+      cells.push({ hour: h, machine: m, oee });
+    }
+  }
+  return cells;
+}
+
+export interface WeekPoint {
+  t: number;
+  output: number;
+}
+
+/** A working week: values only during the shifts. On a wall clock axis this chart
+    would consist, for a good forty per cent, of flat lines over an empty hall. */
+export function week(seed: number): WeekPoint[] {
+  const r = random(seed);
+  const points: WeekPoint[] = [];
+  let value = 420;
+  for (let day = 0; day < 5; day++) {
+    for (let quarter = 0; quarter < 4 * 16; quarter++) {
+      const hour = 6 + quarter / 4;
+      value += (r() - 0.5) * 26;
+      points.push({
+        t: WEEK_START + day * DAY_MS + hour * HOUR_MS,
+        output: value,
+      });
+    }
+  }
+  return points;
+}
+
+/** The operating calendar to go with it: Monday to Friday, 6 to 22 o'clock. */
+export const WEEK_CALENDAR = Array.from({ length: 5 }, (_, day) => ({
+  from: WEEK_START + day * DAY_MS + 6 * HOUR_MS,
+  to: WEEK_START + day * DAY_MS + 22 * HOUR_MS,
+}));
+
+/* ---------------------------------------------------------------------------
+   Data of the kind pages.
+
+   Area, Bar, Scatter and the tooltip each get a page with examples of their
+   own, and each example shows one property. The data is plant data like the
+   instruments' above, and for the same reason: a filled area of "Series A"
+   does not say why it is filled down to 0, a power draw does.
+   --------------------------------------------------------------------------- */
+
+export interface PowerPoint {
+  t: number;
+  /** Power draw of the line in kW. */
+  kw: number;
+}
+
+/** The power draw of one line over the early shift, every five minutes: the
+    start-up, production, the break at half past nine and a setup towards the
+    end. A draw has a natural 0, which is why the area is filled down to it. */
+export function powerDraw(seed: number): PowerPoint[] {
+  const r = random(seed);
+  const start = WEEK_START + 6 * HOUR_MS;
+  const points: PowerPoint[] = [];
+  for (let i = 0; i <= 8 * 12; i++) {
+    const hour = 6 + i / 12;
+    let base = 182;
+    if (hour < 6.5) base = 30 + (hour - 6) * 300; // start-up
+    else if (hour >= 9.5 && hour < 10) base = 42; // break
+    else if (hour >= 12 && hour < 12.75) base = 75; // setup
+    points.push({ t: start + i * 5 * 60_000, kw: base + (r() - 0.5) * 18 });
+  }
+  return points;
+}
+
+export interface CorridorPoint {
+  t: number;
+  /** The corridor the recipe permits; null during the recipe change. */
+  lower: number | null;
+  upper: number | null;
+  /** The measured temperature - always there, also where no corridor is. */
+  temperature: number;
+}
+
+/** A hardening furnace over one shift. The corridor comes from the recipe;
+    during the change from one recipe to the next there is none - a gap, not a
+    corridor of zero width - and the temperature climbs to the new one. */
+export function corridor(seed: number): CorridorPoint[] {
+  const r = random(seed);
+  const start = WEEK_START + 6 * HOUR_MS;
+  const points: CorridorPoint[] = [];
+  let temperature = 842;
+  for (let i = 0; i <= 8 * 12; i++) {
+    const hour = 6 + i / 12;
+    const change = hour >= 10 && hour < 11;
+    const target = hour < 10 ? 840 : 880;
+    temperature += (target - temperature) * 0.12 + (r() - 0.5) * 6;
+    points.push({
+      t: start + i * 5 * 60_000,
+      lower: change ? null : target - 12,
+      upper: change ? null : target + 12,
+      temperature,
+    });
+  }
+  return points;
+}
+
+export interface ShiftScrap {
+  /** The position on the x axis: the shift's index, named by the tickFormat. */
+  shift: number;
+  name: string;
+  /** Scrap in pieces. */
+  scrap: number;
+}
+
+/** Scrap per shift over three days. The night shift runs on fewer hands and
+    scraps more - that is the one thing a reader is to find. */
+export function scrapPerShift(seed: number): ShiftScrap[] {
+  const r = random(seed);
+  const days = ["Mon", "Tue", "Wed"];
+  const shifts = ["early", "late", "night"];
+  return days.flatMap((day, d) =>
+    shifts.map((shift, s) => ({
+      shift: d * 3 + s,
+      name: `${day} ${shift}`,
+      scrap: Math.round((s === 2 ? 38 : 18) + r() * 14),
+    })),
+  );
+}
+
+export interface DayOutput {
+  /** The position on the x axis: the working day's index. */
+  day: number;
+  name: string;
+  /** Pieces planned and made. */
+  planned: number;
+  actual: number;
+}
+
+/** Two working weeks of one line, planned against made. Some days above plan,
+    some below - the deviation has both signs. */
+export function planAndActual(seed: number): DayOutput[] {
+  const r = random(seed);
+  const names = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+  const points: DayOutput[] = [];
+  for (let day = 0; day < 10; day++) {
+    const planned = day % 5 === 4 ? 1600 : 2000;
+    const date = new Date(WEEK_START + (day + 2 * Math.floor(day / 5)) * DAY_MS).getDate();
+    points.push({
+      day,
+      name: `${names[day % 5]} ${date}`,
+      planned,
+      actual: Math.round(planned + (r() - 0.55) * 520),
+    });
+  }
+  return points;
+}
+
+export interface DayDowntime {
+  /** The position on the x axis: the working day's index. */
+  day: number;
+  name: string;
+  /** Minutes stopped, per reason; null where the reason was not logged. */
+  setup: number;
+  material: number | null;
+  breakdown: number;
+}
+
+/** Two working weeks of downtime by reason. On one Wednesday the material log
+    was not kept - a gap, not a zero - and on the second Thursday a breakdown
+    takes the day. */
+export function downtimePerDay(seed: number): DayDowntime[] {
+  const r = random(seed);
+  const names = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+  return Array.from({ length: 10 }, (_, day) => ({
+    day,
+    name: `${names[day % 5]} ${new Date(WEEK_START + (day + 2 * Math.floor(day / 5)) * DAY_MS).getDate()}`,
+    setup: Math.round(40 + r() * 30),
+    material: day === 2 ? null : Math.round(10 + r() * 45),
+    breakdown: Math.round((day === 8 ? 150 : 5) + r() * 25),
+  }));
+}
+
+export interface LineOutput {
+  t: number;
+  /** Pieces per hour of each of three lines. */
+  line1: number;
+  line2: number;
+  line3: number;
+}
+
+/** A day of three lines, hour by hour from six to six. Line 3 runs the early
+    and late shift only - at night it stands, and says 0, not nothing. */
+export function outputPerLine(seed: number): LineOutput[] {
+  const r = random(seed);
+  return Array.from({ length: 25 }, (_, i) => {
+    const hour = (6 + i) % 24;
+    const night = hour >= 22 || hour < 6;
+    return {
+      t: WEEK_START + (6 + i) * HOUR_MS,
+      line1: Math.round(120 + r() * 30),
+      line2: Math.round((night ? 60 : 90) + r() * 25),
+      line3: night ? 0 : Math.round(70 + r() * 30),
+    };
+  });
+}
+
+export interface SetPoint {
+  t: number;
+  /** The set point in °C; null while no recipe is loaded. */
+  setPoint: number | null;
+}
+
+/** The set point of the hardening furnace above, logged only when it changes -
+    a raise at 08:30, the recipe change from 10 to 11 o'clock without one, and a
+    last entry at the end of the shift that closes the hold. */
+export const setPoints: readonly SetPoint[] = [
+  { t: WEEK_START + 6 * HOUR_MS, setPoint: 840 },
+  { t: WEEK_START + 8.5 * HOUR_MS, setPoint: 845 },
+  { t: WEEK_START + 10 * HOUR_MS, setPoint: null },
+  { t: WEEK_START + 11 * HOUR_MS, setPoint: 880 },
+  { t: WEEK_START + 14 * HOUR_MS, setPoint: 880 },
+];
+
+export interface ThicknessSample {
+  t: number;
+  /** Wall thickness in mm. */
+  mm: number;
+}
+
+/** Wall thickness of a pipe, sampled by hand over a shift - whenever the
+    inspector came by, not on a clock. Individual measurements, not a course:
+    nothing was measured between two of them. */
+export function wallThickness(seed: number, n: number): ThicknessSample[] {
+  const r = random(seed);
+  const points: ThicknessSample[] = [];
+  let t = WEEK_START + 6 * HOUR_MS;
+  for (let i = 0; i < n; i++) {
+    t += (4 + r() * 16) * 60_000;
+    points.push({ t, mm: 3.2 + (r() - 0.5) * 0.24 + (r() < 0.08 ? 0.18 : 0) });
+  }
+  return points;
+}
+
+export interface WeightSample {
+  t: number;
+  /** The set point of the fill weight in g. */
+  setPoint: number;
+  /** A sample within tolerance; null where it is an outlier. */
+  sample: number | null;
+  /** A sample outside tolerance; null where it is none. */
+  outlier: number | null;
+}
+
+/** Fill weights of a filling line against their set point, which changes with
+    the product at eleven. A sample further than the tolerance from its set
+    point is an outlier - the two channels never both carry a value. */
+export function fillWeights(seed: number, n: number, tolerance: number): WeightSample[] {
+  const r = random(seed);
+  const points: WeightSample[] = [];
+  const start = WEEK_START + 6 * HOUR_MS;
+  for (let i = 0; i < n; i++) {
+    const t = start + (i * 8 * HOUR_MS) / (n - 1);
+    const setPoint = t < WEEK_START + 11 * HOUR_MS ? 500 : 525;
+    const value = setPoint + (r() - 0.5) * 16 + (r() < 0.06 ? (r() < 0.5 ? -1 : 1) * 14 : 0);
+    const out = Math.abs(value - setPoint) > tolerance;
+    points.push({ t, setPoint, sample: out ? null : value, outlier: out ? value : null });
+  }
+  return points;
+}
+
+export interface FurnacePoint {
+  t: number;
+  /** Temperatures of the two furnaces in °C. */
+  f1: number;
+  f2: number;
+  /** The set point both run at. */
+  setPoint: number;
+}
+
+/** Two furnaces at one set point over the early shift, every ten minutes -
+    close enough that "which one is it" is a question the tooltip answers. */
+export function furnaces(seed: number): FurnacePoint[] {
+  const r = random(seed);
+  const start = WEEK_START + 6 * HOUR_MS;
+  const points: FurnacePoint[] = [];
+  let f1 = 806;
+  let f2 = 800;
+  for (let i = 0; i <= 8 * 6; i++) {
+    f1 += (808 - f1) * 0.15 + (r() - 0.45) * 5;
+    f2 += (808 - f2) * 0.1 + (r() - 0.55) * 5;
+    points.push({ t: start + i * 10 * 60_000, f1, f2, setPoint: 808 });
+  }
+  return points;
+}
+
+export interface HallPoint {
+  t: number;
+  /** Hall temperature in °C. */
+  temperature: number;
+}
+
+/** A day of hall temperature from Monday noon, every quarter hour - warm while
+    the ovens run, cooling through the night. Crosses midnight on purpose. */
+export function hallTemperature(seed: number): HallPoint[] {
+  const r = random(seed);
+  const start = WEEK_START + 12 * HOUR_MS;
+  const points: HallPoint[] = [];
+  let temperature = 24;
+  for (let i = 0; i <= 24 * 4; i++) {
+    const t = start + i * 15 * 60_000;
+    const hour = new Date(t).getHours();
+    const target = hour >= 6 && hour < 22 ? 25 : 18;
+    temperature += (target - temperature) * 0.08 + (r() - 0.5) * 0.4;
+    points.push({ t, temperature });
+  }
+  return points;
+}
+
+export interface KilnPoint {
+  t: number;
+  /** Kiln temperature in °C. */
+  temperature: number;
+  /** Gas flow in m³/h. */
+  gas: number;
+  /** Draught in Pa - the kiln runs below the hall's pressure. */
+  draught: number;
+  /** Flue gas temperature in °C: the harder the kiln fires, the hotter it
+      leaves. */
+  flue: number;
+}
+
+/** A week of a kiln from Monday midnight, one reading every `step`
+    milliseconds: 850 °C while the shifts run on weekdays, held at 600 °C at
+    night and over the weekend, the gas following the heat it has to make. On
+    Wednesday at 14:00 the burner trips for twenty minutes. The week has no
+    clock change, so the hour is counted rather than asked of a Date - a week
+    of seconds is 604,800 of them. */
+export function kiln(seed: number, step: number): KilnPoint[] {
+  const r = random(seed);
+  const n = Math.floor((7 * DAY_MS) / step);
+  const points = new Array<KilnPoint>(n);
+  // Ten minutes to answer: the same kiln at any step.
+  const k = Math.min(1, step / 600_000);
+  let temperature = 600;
+  let gas = 22;
+  for (let i = 0; i < n; i++) {
+    const offset = i * step;
+    const day = Math.floor(offset / DAY_MS);
+    const minute = Math.floor((offset % DAY_MS) / 60_000);
+    const running = day < 5 && minute >= 6 * 60 && minute < 22 * 60;
+    const tripped = day === 2 && minute >= 14 * 60 && minute < 14 * 60 + 20;
+    const target = running ? 850 : 600;
+    // What holds the temperature; above it the kiln heats, below it cools.
+    const holding = running ? 38 : 22;
+    const demand = tripped ? 0 : Math.max(0, holding + (target - temperature) * 0.3);
+    gas += (demand - gas) * Math.min(1, k * 4);
+    temperature += (gas - holding) * k;
+    const shown = temperature + (r() - 0.5) * 4;
+    const reading = Math.max(0, gas + (r() - 0.5) * 1.5);
+    points[i] = {
+      t: WEEK_START + offset,
+      temperature: shown,
+      gas: reading,
+      draught: -8 - gas * 0.12 + (r() - 0.5) * 1.2,
+      flue: 250 + reading * 3,
+    };
+  }
+  return points;
+}
+
+/* ---------------------------------------------------------------------------
+   The series the examples show.
+
+   They stand here and not in the example files because several examples share
+   one of them - `basicData` is the course in three examples - and because R-6.2
+   wants one seed per series, not one per place it is drawn. An example imports
+   what it needs; nobody inlines a second generator.
+   --------------------------------------------------------------------------- */
+
+export const basicData = series(42, 120);
+export const multiData = series(7, 90, true);
+export const configData = series(1312, 24);
+export const axesData = dualSeries(99, 60);
+export const mixedData = mixed(2026, 14);
+export const shiftData = shift(4711, 64);
+export const measurementData = measurements(815, 90);
+export const matrixData = utilizationMatrix(23);
+export const weekData = week(1963);
+export const powerData = powerDraw(612);
+export const corridorData = corridor(1400);
+export const scrapData = scrapPerShift(333);
+export const outputData = planAndActual(1017);
+export const thicknessData = wallThickness(88, 36);
+export const weightData = fillWeights(4040, 97, 9);
+export const furnaceData = furnaces(2718);
+export const hallData = hallTemperature(1603);
+export const kilnData = kiln(2024, 60_000);
+export const downtimeData = downtimePerDay(1204);
+export const lineOutputData = outputPerLine(906);
+```