@umriss-ui/calculation 0.4.4 → 0.4.6

package/docs/llms-full.md

@@ -1,4 +1,4 @@
-# @umriss-ui/calculation 0.4.4
+# @umriss-ui/calculation 0.4.6
 
 > React calculation view for data-dense applications - a derivation written as it is shown, evaluated by the library, folded and read line by line.
 
@@ -24,7 +24,76 @@ Built from: Calculation, Tree, Given, Select, Stat, Card, Badge.
 import { useState } from "react";
 import { Badge, Card, CardBody, CardHeader, FormField, Grid, Select, Stack, Stat, Text } from "@umriss-ui/core";
 import { Calculation, Difference, Given, Product, Quotient, Ref } from "@umriss-ui/calculation";
-import { DOWNTIME_MINUTES, INCIDENTS, MONTH_MINUTES, SERVICES } from "./operations";
+
+/* Data from the operations world, written out here so the example runs on its own. */
+
+const at = (day: number, hours: number, minutes = 0) => new Date(2026, 2, day, hours, minutes).getTime();
+const MINUTE = 60_000;
+
+/** Tuesday, 17 March 2026, 10:30 - the moment the screens are read at. */
+const NOW = at(17, 10, 30);
+
+interface Service {
+  id: string;
+  name: string;
+  team: string;
+  /** 1 is customer-facing and pages at night; 3 waits for the morning. */
+  tier: 1 | 2 | 3;
+  /** The latency objective: the 95th percentile stays below this, in ms. */
+  latencySlo: number;
+  /** The availability promised for a month, in per cent. */
+  availabilityTarget: number;
+}
+
+const SERVICES: readonly Service[] = [
+  { id: "checkout", name: "Checkout", team: "Payments", tier: 1, latencySlo: 300, availabilityTarget: 99.95 },
+  { id: "billing", name: "Billing", team: "Payments", tier: 1, latencySlo: 400, availabilityTarget: 99.9 },
+  { id: "sign-in", name: "Sign-in", team: "Identity", tier: 1, latencySlo: 200, availabilityTarget: 99.95 },
+  { id: "search", name: "Search", team: "Discovery", tier: 1, latencySlo: 250, availabilityTarget: 99.9 },
+  { id: "images", name: "Image service", team: "Discovery", tier: 2, latencySlo: 500, availabilityTarget: 99.5 },
+  { id: "notifications", name: "Notifications", team: "Messaging", tier: 2, latencySlo: 800, availabilityTarget: 99.5 },
+  { id: "webhooks", name: "Webhooks", team: "Integrations", tier: 2, latencySlo: 1000, availabilityTarget: 99.5 },
+  { id: "reports", name: "Reporting", team: "Insights", tier: 3, latencySlo: 2000, availabilityTarget: 99 },
+];
+
+interface Incident {
+  id: string;
+  title: string;
+  service: string;
+  severity: "SEV1" | "SEV2" | "SEV3";
+  opened: number;
+  acknowledged?: number;
+  resolved?: number;
+  /** An engineer's id. */
+  assignee: string;
+}
+
+const INCIDENTS: readonly Incident[] = [
+  { id: "INC-1048", title: "Checkout slow, card payments time out", service: "checkout", severity: "SEV1", opened: at(17, 9, 42), acknowledged: at(17, 9, 46), assignee: "jonas" },
+  { id: "INC-1047", title: "Webhook deliveries delayed", service: "webhooks", severity: "SEV3", opened: at(17, 7, 15), acknowledged: at(17, 8, 2), assignee: "ines" },
+  { id: "INC-1046", title: "Thumbnails missing for new uploads", service: "images", severity: "SEV2", opened: at(16, 22, 5), acknowledged: at(16, 22, 11), resolved: at(17, 0, 40), assignee: "tomasz" },
+  { id: "INC-1045", title: "Sign-in codes arrive late", service: "sign-in", severity: "SEV2", opened: at(16, 14, 20), acknowledged: at(16, 14, 24), resolved: at(16, 15, 5), assignee: "ada" },
+  { id: "INC-1044", title: "Monthly report export fails", service: "reports", severity: "SEV3", opened: at(15, 10, 0), acknowledged: at(16, 9, 12), resolved: at(16, 11, 30), assignee: "felix" },
+  { id: "INC-1043", title: "Search returns no results for some regions", service: "search", severity: "SEV1", opened: at(14, 18, 30), acknowledged: at(14, 18, 33), resolved: at(14, 19, 55), assignee: "leila" },
+  { id: "INC-1042", title: "Duplicate reminder e-mails", service: "notifications", severity: "SEV3", opened: at(13, 8, 45), acknowledged: at(13, 9, 30), resolved: at(13, 13, 0), assignee: "sam" },
+  { id: "INC-1041", title: "Invoices generated twice", service: "billing", severity: "SEV2", opened: at(12, 16, 10), acknowledged: at(12, 16, 18), resolved: at(12, 18, 40), assignee: "priya" },
+];
+
+/** The month so far: 1 March 00:00 to now, in minutes. */
+const MONTH_MINUTES = (NOW - at(1, 0)) / MINUTE;
+
+/** Minutes each service was down this month. With `MONTH_MINUTES` and the
+    service's target, what an availability is worked out from. */
+const DOWNTIME_MINUTES: Readonly<Record<string, number>> = {
+  checkout: 34,
+  billing: 18,
+  "sign-in": 41,
+  search: 85,
+  images: 120,
+  notifications: 12,
+  webhooks: 210,
+  reports: 95,
+};
 
 const SEVERITY_TONE = { SEV1: "danger", SEV2: "warning", SEV3: "neutral" } as const;
 
@@ -139,8 +208,6 @@ export default function ServiceAvailability() {
 }
 ```
 
-It imports `operations.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ### Price a tour
 
 A dispatcher at Ferrow Parcel prices a day's tour - energy, driver and vehicle - to see what each stop costs before quoting a customer.
@@ -157,7 +224,149 @@ Built from: Calculation, Tree, Given, Select, Stat, Card, Badge.
 import { useState } from "react";
 import { Badge, Card, CardBody, CardHeader, FormField, Grid, Select, Stack, Stat, Text } from "@umriss-ui/core";
 import { Calculation, Given, Product, Quotient, Sum } from "@umriss-ui/calculation";
-import { COST_RATES, DEPOTS, DRIVERS, TOURS, VEHICLES } from "./logistics";
+
+/* Data from the logistics world, written out here so the example runs on its own. */
+
+/** A small LCG - the same numbers on every computer. */
+function random(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
+}
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const MINUTE = 60_000;
+
+const DEPOTS = [
+  { id: "north", name: "North depot" },
+  { id: "river", name: "Riverside depot" },
+  { id: "east", name: "East Gate depot" },
+] as const;
+
+interface Vehicle {
+  id: string;
+  plate: string;
+  type: "van" | "e-van" | "truck";
+  /** Payload, in kg. */
+  capacity: number;
+  depot: string;
+}
+
+const VEHICLES: readonly Vehicle[] = [
+  { id: "v1", plate: "FP 214 K", type: "van", capacity: 1200, depot: "north" },
+  { id: "v2", plate: "FP 377 K", type: "e-van", capacity: 900, depot: "north" },
+  { id: "v3", plate: "FP 118 R", type: "truck", capacity: 7500, depot: "north" },
+  { id: "v4", plate: "FP 402 R", type: "van", capacity: 1200, depot: "river" },
+  { id: "v5", plate: "FP 455 R", type: "e-van", capacity: 900, depot: "river" },
+  { id: "v6", plate: "FP 290 E", type: "van", capacity: 1200, depot: "east" },
+  { id: "v7", plate: "FP 311 E", type: "e-van", capacity: 900, depot: "east" },
+  { id: "v8", plate: "FP 520 E", type: "truck", capacity: 7500, depot: "east" },
+];
+
+const DRIVERS = [
+  { id: "d1", name: "Martin Hale", depot: "north" },
+  { id: "d2", name: "Nadia Petrova", depot: "north" },
+  { id: "d3", name: "Owen Carter", depot: "north" },
+  { id: "d4", name: "Lucia Romero", depot: "river" },
+  { id: "d5", name: "Ben Adeyemi", depot: "river" },
+  { id: "d6", name: "Hanna Berg", depot: "east" },
+  { id: "d7", name: "Yusuf Demir", depot: "east" },
+  { id: "d8", name: "Clara Wendt", depot: "east" },
+] as const;
+
+const CUSTOMERS = [
+  "Holloway Garden Supplies",
+  "Marlow & Finch Books",
+  "Oakridge Pharmacy",
+  "Brixley Cycles",
+  "Tamsin's Bakery",
+  "Northfold Office",
+  "Pellham Hardware",
+  "Greywick Studio",
+  "Juniper Lane Florist",
+  "Ashcombe Dental",
+] as const;
+
+interface Stop {
+  id: string;
+  shipment: string;
+  customer: string;
+  /** The window the customer was promised, `[from, to]`. */
+  window: readonly [number, number];
+  /** When the tour plans to be there. */
+  arrival: number;
+}
+
+interface Tour {
+  id: string;
+  vehicle: string;
+  driver: string;
+  depot: string;
+  /** Leaves the depot, loaded; back at the depot. */
+  from: number;
+  to: number;
+  /** Minutes of loading before `from`. */
+  loading: number;
+  km: number;
+  stops: readonly Stop[];
+}
+
+/** One tour per vehicle. Stops every half hour or so, each with a two-hour
+    window; every seventh arrival misses its window - the late ones a
+    dispatcher looks for. */
+function tour(index: number): Tour {
+  const r = random(700 + index);
+  const vehicle = VEHICLES[index]!;
+  const truck = vehicle.type === "truck";
+  const from = at(truck ? 6 : 7, index % 2 === 0 ? 0 : 30);
+  const count = truck ? 5 : 8 + Math.floor(r() * 4);
+  const stops: Stop[] = [];
+  let arrival = from + (20 + Math.floor(r() * 15)) * MINUTE;
+  for (let i = 0; i < count; i++) {
+    const n = index * 20 + i;
+    const slot = Math.floor((arrival - at(0)) / (2 * 60 * MINUTE)) * 2;
+    /* A late stop's window closed half an hour or more before the arrival. */
+    const late = i >= 2 && n % 7 === 3;
+    const halfHour = 30 * MINUTE;
+    const windowFrom = late ? Math.floor(arrival / halfHour) * halfHour - 5 * halfHour : at(slot);
+    stops.push({
+      id: `s-${index + 1}-${i + 1}`,
+      shipment: `FP-${(1_004_210 + n * 13).toString()}`,
+      customer: CUSTOMERS[(n * 3) % CUSTOMERS.length]!,
+      window: [windowFrom, windowFrom + 2 * 60 * MINUTE],
+      arrival,
+    });
+    arrival += (truck ? 45 : 22) * MINUTE + Math.floor(r() * 18) * MINUTE;
+  }
+  return {
+    id: `T-${String(index + 1).padStart(2, "0")}`,
+    vehicle: vehicle.id,
+    driver: DRIVERS[index]!.id,
+    depot: vehicle.depot,
+    from,
+    to: arrival + 30 * MINUTE,
+    loading: truck ? 45 : 30,
+    km: Math.round((truck ? 140 : 70) + r() * 40),
+    stops,
+  };
+}
+
+const TOURS: readonly Tour[] = VEHICLES.map((_, index) => tour(index));
+
+/** What a tour costs, per unit - the inputs of a cost per tour. */
+const COST_RATES = {
+  /** Diesel, per litre; electricity, per kWh. */
+  dieselPerLitre: 1.68,
+  electricityPerKwh: 0.31,
+  /** Consumption per 100 km. */
+  per100Km: { van: 9.5, truck: 24, "e-van": 22 },
+  /** A driver's hour, all in. */
+  driverPerHour: 34.5,
+  /** Lease, insurance and upkeep, per day. */
+  vehiclePerDay: { van: 58, truck: 145, "e-van": 72 },
+} as const;
 
 const TYPE_NAME = { van: "Van", "e-van": "Electric van", truck: "Truck" } as const;
 const time = (at: number) => new Date(at).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
@@ -266,8 +475,6 @@ export default function PriceATour() {
 }
 ```
 
-It imports `logistics.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ### Check an invoice before approving it
 
 A cost-centre owner or the finance team at Carrow & Lisle checks what an invoice adds up to - discounts, VAT per rate - before signing it off.
@@ -284,54 +491,159 @@ Built from: Calculation, Tree, Given, Select, Card, Badge, Button, Alert.
 import { useState } from "react";
 import { Alert, Badge, Button, Card, CardBody, CardHeader, FormField, Grid, Select, Stack, Text } from "@umriss-ui/core";
 import { Calculation, Difference, Given, Product, Ref, Sum } from "@umriss-ui/calculation";
-import { APPROVALS, COST_CENTRES, INVOICES } from "./controlling";
-import type { InvoiceLine } from "./controlling";
 
-const WAITING = INVOICES.filter((one) => one.status === "awaiting approval");
-const DECISION_TONE = { approved: "success", rejected: "danger", pending: "neutral" } as const;
-const date = (at: number) => new Date(at).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
-const percent = (rate: number) => `${Math.round(rate * 100)}\u00a0%`;
+/* Data from the controlling world, written out here so the example runs on its own. */
 
-/** One line's net amount: quantity × unit price, times the share paid after a
-    discount. A function and not a component: the calculation reads its
-    elements by their type, so a wrapper of one's own would not be recognised. */
-function lineNet(line: InvoiceLine, id: string) {
-  return (
-    <Product key={id} id={id} label={line.description} unit="€" decimals={2}>
-      <Given label="Quantity" value={line.quantity} />
-      <Given label="Unit price" value={line.unitPrice} unit="€" decimals={2} />
-      {line.discount > 0 && (
-        <Difference label="Share paid" format="percent">
-          <Given label="List price" value={1} format="percent" />
-          <Given label="Discount" value={line.discount} format="percent" source="Framework agreement" />
-        </Difference>
-      )}
-    </Product>
-  );
+const on = (month: number, day: number) => new Date(2026, month - 1, day).getTime();
+
+interface CostCentre {
+  id: string;
+  name: string;
+  owner: string;
+  /** The budget of one month. */
+  monthlyBudget: number;
 }
 
-export default function CheckAnInvoice() {
-  const [invoiceId, setInvoiceId] = useState(WAITING[0]!.id);
-  const [decided, setDecided] = useState<Record<string, "approved" | "rejected">>({});
-  const invoice = WAITING.find((one) => one.id === invoiceId) ?? WAITING[0]!;
-  const centre = COST_CENTRES.find((one) => one.id === invoice.costCentre)!;
-  const approvals = APPROVALS.filter((one) => one.invoice === invoice.id);
-  const next = approvals.find((one) => one.decision === "pending");
-  const decision = decided[invoice.id];
+const COST_CENTRES: readonly CostCentre[] = [
+  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
+  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
+  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
+  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
+  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
+  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
+  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
+  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
+  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
+];
 
-  const lineIds = invoice.lines.map((_, i) => `line-${i}`);
-  const rates = [...new Set(invoice.lines.map((line) => line.vatRate))].filter((rate) => rate > 0);
-  /* The net a rate is charged on: the whole net where every line carries it,
-     one line on its own, or the sum of the lines that do. */
-  const netAt = (rate: number) => {
-    const ids = lineIds.filter((_, i) => invoice.lines[i]!.vatRate === rate);
-    if (ids.length === lineIds.length) return <Ref to="net" />;
-    if (ids.length === 1) return <Ref to={ids[0]!} />;
-    return (
-      <Sum label={`Net at ${percent(rate)}`} unit="€" decimals={2}>
-        {ids.map((id) => (
-          <Ref key={id} to={id} />
-        ))}
+interface InvoiceLine {
+  description: string;
+  quantity: number;
+  unitPrice: number;
+  /** A fraction: 0.1 is ten per cent off. */
+  discount: number;
+  /** A fraction: 0.19 or 0.07, or 0 where no VAT is charged. */
+  vatRate: number;
+}
+
+interface Invoice {
+  id: string;
+  supplier: string;
+  costCentre: string;
+  received: number;
+  due: number;
+  status: "awaiting approval" | "approved" | "paid" | "rejected";
+  lines: readonly InvoiceLine[];
+}
+
+const INVOICES: readonly Invoice[] = [
+  {
+    id: "INV-26-0318", supplier: "Brandlow Office Supply", costCentre: "CC-4400", received: on(3, 16), due: on(4, 15), status: "awaiting approval",
+    lines: [
+      { description: "Desk lamps, LED", quantity: 24, unitPrice: 48.9, discount: 0.1, vatRate: 0.19 },
+      { description: "Printer paper, box of 5 reams", quantity: 40, unitPrice: 21.5, discount: 0, vatRate: 0.19 },
+      { description: "Delivery", quantity: 1, unitPrice: 35, discount: 0, vatRate: 0.19 },
+    ],
+  },
+  {
+    id: "INV-26-0317", supplier: "Kettering & Shaw Events", costCentre: "CC-1200", received: on(3, 13), due: on(4, 12), status: "awaiting approval",
+    lines: [
+      { description: "Trade fair stand, 3 days", quantity: 1, unitPrice: 12_400, discount: 0.05, vatRate: 0.19 },
+      { description: "Catering, per guest", quantity: 180, unitPrice: 18.5, discount: 0, vatRate: 0.07 },
+    ],
+  },
+  {
+    id: "INV-26-0309", supplier: "Nimbrel Software", costCentre: "CC-4300", received: on(3, 9), due: on(4, 8), status: "approved",
+    lines: [
+      { description: "Design tool licences, annual", quantity: 12, unitPrice: 540, discount: 0.15, vatRate: 0.19 },
+      { description: "Onboarding session", quantity: 2, unitPrice: 890, discount: 0, vatRate: 0.19 },
+    ],
+  },
+  {
+    id: "INV-26-0302", supplier: "Fenwright Legal", costCentre: "CC-4100", received: on(3, 2), due: on(3, 16), status: "paid",
+    lines: [{ description: "Contract review, hours", quantity: 14.5, unitPrice: 260, discount: 0, vatRate: 0.19 }],
+  },
+  {
+    id: "INV-26-0226", supplier: "Corrin Travel", costCentre: "CC-1100", received: on(2, 26), due: on(3, 12), status: "paid",
+    lines: [
+      { description: "Rail tickets, sales conference", quantity: 22, unitPrice: 139, discount: 0, vatRate: 0.07 },
+      { description: "Hotel, nights", quantity: 44, unitPrice: 112, discount: 0.08, vatRate: 0.07 },
+    ],
+  },
+  {
+    id: "INV-26-0221", supplier: "Stellbrook Consulting", costCentre: "CC-2100", received: on(2, 21), due: on(3, 23), status: "rejected",
+    lines: [{ description: "Architecture review, days", quantity: 6, unitPrice: 1450, discount: 0, vatRate: 0 }],
+  },
+];
+
+interface Approval {
+  invoice: string;
+  step: "cost centre" | "finance";
+  approver: string;
+  decision: "approved" | "rejected" | "pending";
+  at?: number;
+  comment?: string;
+}
+
+/** Two signatures an invoice needs: its cost centre's owner, then finance. */
+const APPROVALS: readonly Approval[] = [
+  { invoice: "INV-26-0318", step: "cost centre", approver: "Olga Ivanova", decision: "pending" },
+  { invoice: "INV-26-0317", step: "cost centre", approver: "Rafael Ortiz", decision: "approved", at: on(3, 16) },
+  { invoice: "INV-26-0317", step: "finance", approver: "Martina Vogel", decision: "pending" },
+  { invoice: "INV-26-0309", step: "cost centre", approver: "Kenji Arai", decision: "approved", at: on(3, 10) },
+  { invoice: "INV-26-0309", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 11) },
+  { invoice: "INV-26-0302", step: "cost centre", approver: "Martina Vogel", decision: "approved", at: on(3, 3) },
+  { invoice: "INV-26-0302", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 3) },
+  { invoice: "INV-26-0226", step: "cost centre", approver: "Helen Marsh", decision: "approved", at: on(2, 27) },
+  { invoice: "INV-26-0226", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 2) },
+  { invoice: "INV-26-0221", step: "cost centre", approver: "Anika Sørensen", decision: "rejected", at: on(2, 24), comment: "Not ordered - the review was cancelled in January." },
+];
+
+const WAITING = INVOICES.filter((one) => one.status === "awaiting approval");
+const DECISION_TONE = { approved: "success", rejected: "danger", pending: "neutral" } as const;
+const date = (at: number) => new Date(at).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
+const percent = (rate: number) => `${Math.round(rate * 100)}\u00a0%`;
+
+/** One line's net amount: quantity × unit price, times the share paid after a
+    discount. A function and not a component: the calculation reads its
+    elements by their type, so a wrapper of one's own would not be recognised. */
+function lineNet(line: InvoiceLine, id: string) {
+  return (
+    <Product key={id} id={id} label={line.description} unit="€" decimals={2}>
+      <Given label="Quantity" value={line.quantity} />
+      <Given label="Unit price" value={line.unitPrice} unit="€" decimals={2} />
+      {line.discount > 0 && (
+        <Difference label="Share paid" format="percent">
+          <Given label="List price" value={1} format="percent" />
+          <Given label="Discount" value={line.discount} format="percent" source="Framework agreement" />
+        </Difference>
+      )}
+    </Product>
+  );
+}
+
+export default function CheckAnInvoice() {
+  const [invoiceId, setInvoiceId] = useState(WAITING[0]!.id);
+  const [decided, setDecided] = useState<Record<string, "approved" | "rejected">>({});
+  const invoice = WAITING.find((one) => one.id === invoiceId) ?? WAITING[0]!;
+  const centre = COST_CENTRES.find((one) => one.id === invoice.costCentre)!;
+  const approvals = APPROVALS.filter((one) => one.invoice === invoice.id);
+  const next = approvals.find((one) => one.decision === "pending");
+  const decision = decided[invoice.id];
+
+  const lineIds = invoice.lines.map((_, i) => `line-${i}`);
+  const rates = [...new Set(invoice.lines.map((line) => line.vatRate))].filter((rate) => rate > 0);
+  /* The net a rate is charged on: the whole net where every line carries it,
+     one line on its own, or the sum of the lines that do. */
+  const netAt = (rate: number) => {
+    const ids = lineIds.filter((_, i) => invoice.lines[i]!.vatRate === rate);
+    if (ids.length === lineIds.length) return <Ref to="net" />;
+    if (ids.length === 1) return <Ref to={ids[0]!} />;
+    return (
+      <Sum label={`Net at ${percent(rate)}`} unit="€" decimals={2}>
+        {ids.map((id) => (
+          <Ref key={id} to={id} />
+        ))}
       </Sum>
     );
   };
@@ -430,8 +742,6 @@ export default function CheckAnInvoice() {
 }
 ```
 
-It imports `controlling.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ### Explain the shift's OEE
 
 A shift lead at Brenholt Tile Works explains at the 10:30 handover why the kiln line's OEE stands where it stands.
@@ -446,99 +756,256 @@ Built from: Calculation, Tree, Given, Stat, Card, Alert.
 ```tsx
 import { Alert, Card, CardBody, CardHeader, Grid, Stack, Stat, Text } from "@umriss-ui/core";
 import { Calculation, Difference, Given, Product, Quotient, Ref } from "@umriss-ui/calculation";
-import { IDEAL_CYCLE_MINUTES, KILN, countAt, plant } from "./plant";
-
-/* The early shift starts at 06:00; 10:30 is minute 270 into it, so the
-   minutes 0 to 269 have passed. */
-const SHIFT = plant(17);
-const MINUTE = 270;
-const count = countAt(SHIFT, MINUTE - 1);
-const stopped = SHIFT.readings.filter((one) => one.minute < MINUTE && !one.running).map((one) => one.minute);
-const clock = (minute: number) => `${String(6 + Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`;
-
-const OEE_TARGET = 0.85;
-const OEE_LIMITS = [
-  { value: 0.75, side: "lower", severity: "warning" },
-  { value: 0.65, side: "lower", severity: "alarm" },
-] as const;
-
-export default function ExplainTheOee() {
-  return (
-    <Stack gap={4}>
-      <Grid minItemWidth="180px" gap={4} data-callout="1">
-        <Stat label="Planned so far" value={count.planned} unit="min" />
-        <Stat label="Belt stopped" value={count.downtime} unit="min" />
-        <Stat label="Tiles out of the kiln" value={count.total} unit="pcs" />
-        <Stat label="Of them good" value={count.good} unit="pcs" />
-      </Grid>
 
-      {stopped.length > 0 && (
-        <Alert tone="warning" title={`Feed stopped ${clock(stopped[0]!)} to ${clock(stopped.at(-1)! + 1)}`} data-callout="2">
-          The kiln's zone 3 went above {KILN.alarm} °C; tiles fired outside {KILN.tolerance[0]} to {KILN.tolerance[1]} °C
-          count as scrap.
-        </Alert>
-      )}
+/* Data from the plant world, written out here so the example runs on its own. */
 
-      <Card>
-        <CardHeader title={`OEE, early shift up to ${clock(MINUTE)}`} />
-        <CardBody>
-          <Stack gap={2}>
-            <div data-callout="3">
-              <Calculation aria-label="OEE of the early shift so far">
-                <Product label="OEE" format="percent" target={OEE_TARGET} limits={OEE_LIMITS}>
-                  <Quotient label="Availability" format="percent" explanation="Lost to stops of the belt.">
-                    <Difference id="runtime" label="Run time" unit="min">
-                      <Given id="planned" label="Planned production time" value={count.planned} unit="min" source="Shift calendar" />
-                      <Given label="Downtime" value={count.downtime} unit="min" source="Belt drive" />
-                    </Difference>
-                    <Ref to="planned" />
-                  </Quotient>
-                  <Quotient label="Performance" format="percent" explanation="Lost to jams and slow cycles.">
-                    <Product label="Ideal run time" unit="min">
-                      <Given label="Ideal cycle time" value={IDEAL_CYCLE_MINUTES} unit="min/pc" source="Kiln K1 rating" />
-                      <Given id="total" label="Total count" value={count.total} unit="pcs" source="Exit counter" />
-                    </Product>
-                    <Ref to="runtime" />
-                  </Quotient>
-                  <Quotient label="Quality" format="percent" explanation="Lost to scrap fired outside the tolerance.">
-                    <Given label="Good count" value={count.good} unit="pcs" source="Exit counter" />
-                    <Ref to="total" />
-                  </Quotient>
-                </Product>
-              </Calculation>
-            </div>
-            <Text size="sm" tone="muted" data-callout="4">
-              Hover a line: its operands and every place it is used light up.
-            </Text>
-          </Stack>
-        </CardBody>
-      </Card>
-    </Stack>
-  );
+/** A small LCG - reproducible across runs and platforms. */
+function random(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
 }
-```
 
-It imports `plant.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
-## Getting started
+/** The early shift, 06:00 to 14:00. */
+const SHIFT_MINUTES = 480;
 
-What a calculation is for, and what an application sets up before the first one.
+/** The kiln's zone 3, in °C: the numbers every part reads it against, once.
+    Between the two warnings lies the tolerance - a tile fired outside it is
+    scrap; `returnTo` is the alarm's dead band. */
+const KILN = { target: 1200, tolerance: [1185, 1215], alarm: 1230, returnTo: 1222 } as const;
 
-### Installation
+/** The kiln fires one tile every quarter of a minute when nothing holds it up -
+    the ideal cycle time of the OEE's performance. */
+const IDEAL_CYCLE_MINUTES = 0.25;
 
-Show a figure together with how it came about (a derivation, a statement of account): the operator before each number, the result above a double rule, and every figure opening into the numbers it came from.
+/** One minute of the line. */
+interface Reading {
+  /** Minutes since the start of the shift. */
+  minute: number;
+  /** Zone 3 of the kiln, in °C. */
+  kiln: number;
+  /** The exit pyrometer, in °C - `null` while it sends nothing. */
+  exit: number | null;
+  /** Whether the belt runs. */
+  running: boolean;
+  /** Tiles out of the kiln in this minute. */
+  fired: number;
+  /** Of them, the ones fired inside the tolerance. */
+  good: number;
+}
 
-```ts
-import { Calculation, Given, Difference, Quotient, Ref } from "@umriss-ui/calculation";
-```
+/** A tile taken off the belt and measured - one every ten minutes while it runs. */
+interface Sample {
+  minute: number;
+  /** The tile's length after firing, in mm (nominal 600). */
+  length: number;
+}
 
-Demo page: https://romanhaendler.github.io/umriss-ui/calculation/installation/
+/** A batch of tiles through the three stations. */
+interface Batch {
+  id: string;
+  name: string;
+  /** How many tiles the batch is planned for. */
+  tiles: number;
+  /** Minutes since the start of the shift, per station. */
+  press: readonly [number, number];
+  dryer: readonly [number, number];
+  kiln: readonly [number, number];
+}
 
-Install with `pnpm add @umriss-ui/calculation @umriss-ui/core`; core is a peer dependency and brings formats, wording and the assessment of targets and limits. React 18 or 19 as a peer as well.
+interface Plant {
+  readings: readonly Reading[];
+  samples: readonly Sample[];
+  batches: readonly Batch[];
+}
 
-The stylesheet loads itself: the package imports it and marks CSS as a side effect, so a bundler keeps it. `@umriss-ui/calculation/styles.css` stays exported for setups that link stylesheets by hand.
+/* When the exit pyrometer goes silent, and for how long. Fixed rather than
+   seeded, so that a running control room shows its reading turn stale, then
+   lost, and come back. */
+const SILENT_FROM = 288;
+const SILENT_FOR = 50;
 
-You write the figure as elements and hand in only the givens; the calculation performs every operation it shows, so the screen cannot disagree with the number. Start with [Calculation](#/calculation).
+/** The shift, from a seed. */
+function plant(seed: number): Plant {
+  const r = random(seed);
+
+  /* The one excursion: a burner overshoots somewhere between 02:30 and 03:30
+     into the shift, for half an hour, peaking near 1242 °C. The operator stops
+     the feed twenty-two minutes in, for eighteen minutes. The noise around it
+     is too small to reach a warning on its own, so this is the only crossing -
+     which is what the tests hold. */
+  const surgeFrom = 150 + Math.floor(r() * 60);
+  const surgeFor = 30;
+  const stopFrom = surgeFrom + 22;
+  const stopFor = 18;
+
+  /* The plan: batches through the kiln one after another, each pressed an
+     hour and dried half an hour before - the first ones during the night
+     shift. Tiles come out of the kiln only while a batch is in it, so the
+     OEE's count and the batches' counts are the same tiles. The plan is a
+     plan: a stop of the belt does not move it. */
+  const batches: Batch[] = [];
+  for (let at = 0, i = 0; at < SHIFT_MINUTES; i++) {
+    const length = 70 + Math.floor(r() * 25);
+    batches.push({
+      id: `b-${4121 + i}`,
+      name: `B-${4121 + i}`,
+      tiles: Math.round(length / IDEAL_CYCLE_MINUTES / 10) * 10,
+      press: [at - 60, at - 60 + length],
+      dryer: [at - 30, at - 30 + length],
+      kiln: [at, at + length],
+    });
+    at += length + 5;
+  }
+
+  const readings: Reading[] = [];
+  const samples: Sample[] = [];
+  let drift = 0;
+  for (let minute = 0; minute < SHIFT_MINUTES; minute++) {
+    drift = 0.9 * drift + (r() - 0.5) * 3;
+    const into = minute - surgeFrom;
+    const surge = into >= 0 && into <= surgeFor ? 42 * Math.sin((Math.PI * into) / surgeFor) : 0;
+    const kiln = Math.round((KILN.target + drift + surge) * 10) / 10;
+
+    const running = !(minute >= stopFrom && minute < stopFrom + stopFor);
+    const loaded = batches.some((batch) => batch.kiln[0] <= minute && minute < batch.kiln[1]);
+    const jam = r() < 0.12;
+    const fired = running && loaded ? (jam ? 3 : 4) : 0;
+    const inTolerance = kiln >= KILN.tolerance[0] && kiln <= KILN.tolerance[1];
+    const silent = minute >= SILENT_FROM && minute < SILENT_FROM + SILENT_FOR;
+    const exit = silent ? null : Math.round((kiln - 380 + (r() - 0.5) * 4) * 10) / 10;
+
+    readings.push({ minute, kiln, exit, running, fired, good: inTolerance ? fired : 0 });
+
+    if (running && minute % 10 === 0) {
+      /* Hotter shrinks more: the length follows the kiln, so the control
+         chart sees the excursion the trend sees. */
+      const length = 600 + (KILN.target - kiln) * 0.05 + (r() - 0.5) * 0.6;
+      samples.push({ minute, length: Math.round(length * 100) / 100 });
+    }
+  }
+
+  return { readings, samples, batches };
+}
+
+/** The readings up to and including the minute. */
+function upTo<T extends { minute: number }>(series: readonly T[], minute: number): readonly T[] {
+  return series.filter((one) => one.minute <= minute);
+}
+
+/** The shift's figures for the OEE, up to and including the minute. */
+interface ShiftCount {
+  /** Minutes of the shift so far. */
+  planned: number;
+  /** Minutes the belt stood. */
+  downtime: number;
+  /** Tiles out of the kiln. */
+  total: number;
+  /** Of them, inside the tolerance. */
+  good: number;
+}
+
+function countAt(p: Plant, minute: number): ShiftCount {
+  const so = upTo(p.readings, minute);
+  return {
+    planned: so.length,
+    downtime: so.filter((one) => !one.running).length,
+    total: so.reduce((sum, one) => sum + one.fired, 0),
+    good: so.reduce((sum, one) => sum + one.good, 0),
+  };
+}
+
+/* The early shift starts at 06:00; 10:30 is minute 270 into it, so the
+   minutes 0 to 269 have passed. */
+const SHIFT = plant(17);
+const MINUTE = 270;
+const count = countAt(SHIFT, MINUTE - 1);
+const stopped = SHIFT.readings.filter((one) => one.minute < MINUTE && !one.running).map((one) => one.minute);
+const clock = (minute: number) => `${String(6 + Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`;
+
+const OEE_TARGET = 0.85;
+const OEE_LIMITS = [
+  { value: 0.75, side: "lower", severity: "warning" },
+  { value: 0.65, side: "lower", severity: "alarm" },
+] as const;
+
+export default function ExplainTheOee() {
+  return (
+    <Stack gap={4}>
+      <Grid minItemWidth="180px" gap={4} data-callout="1">
+        <Stat label="Planned so far" value={count.planned} unit="min" />
+        <Stat label="Belt stopped" value={count.downtime} unit="min" />
+        <Stat label="Tiles out of the kiln" value={count.total} unit="pcs" />
+        <Stat label="Of them good" value={count.good} unit="pcs" />
+      </Grid>
+
+      {stopped.length > 0 && (
+        <Alert tone="warning" title={`Feed stopped ${clock(stopped[0]!)} to ${clock(stopped.at(-1)! + 1)}`} data-callout="2">
+          The kiln's zone 3 went above {KILN.alarm} °C; tiles fired outside {KILN.tolerance[0]} to {KILN.tolerance[1]} °C
+          count as scrap.
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader title={`OEE, early shift up to ${clock(MINUTE)}`} />
+        <CardBody>
+          <Stack gap={2}>
+            <div data-callout="3">
+              <Calculation aria-label="OEE of the early shift so far">
+                <Product label="OEE" format="percent" target={OEE_TARGET} limits={OEE_LIMITS}>
+                  <Quotient label="Availability" format="percent" explanation="Lost to stops of the belt.">
+                    <Difference id="runtime" label="Run time" unit="min">
+                      <Given id="planned" label="Planned production time" value={count.planned} unit="min" source="Shift calendar" />
+                      <Given label="Downtime" value={count.downtime} unit="min" source="Belt drive" />
+                    </Difference>
+                    <Ref to="planned" />
+                  </Quotient>
+                  <Quotient label="Performance" format="percent" explanation="Lost to jams and slow cycles.">
+                    <Product label="Ideal run time" unit="min">
+                      <Given label="Ideal cycle time" value={IDEAL_CYCLE_MINUTES} unit="min/pc" source="Kiln K1 rating" />
+                      <Given id="total" label="Total count" value={count.total} unit="pcs" source="Exit counter" />
+                    </Product>
+                    <Ref to="runtime" />
+                  </Quotient>
+                  <Quotient label="Quality" format="percent" explanation="Lost to scrap fired outside the tolerance.">
+                    <Given label="Good count" value={count.good} unit="pcs" source="Exit counter" />
+                    <Ref to="total" />
+                  </Quotient>
+                </Product>
+              </Calculation>
+            </div>
+            <Text size="sm" tone="muted" data-callout="4">
+              Hover a line: its operands and every place it is used light up.
+            </Text>
+          </Stack>
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}
+```
+
+## Getting started
+
+What a calculation is for, and what an application sets up before the first one.
+
+### Installation
+
+Show a figure together with how it came about (a derivation, a statement of account): the operator before each number, the result above a double rule, and every figure opening into the numbers it came from.
+
+```ts
+import { Calculation, Given, Difference, Quotient, Ref } from "@umriss-ui/calculation";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/calculation/installation/
+
+Install with `pnpm add @umriss-ui/calculation @umriss-ui/core`; core is a peer dependency and brings formats, wording and the assessment of targets and limits. React 18 or 19 as a peer as well.
+
+The stylesheet loads itself: the package imports it and marks CSS as a side effect, so a bundler keeps it. `@umriss-ui/calculation/styles.css` stays exported for setups that link stylesheets by hand.
+
+You write the figure as elements and hand in only the givens; the calculation performs every operation it shows, so the screen cannot disagree with the number. Start with [Calculation](#/calculation).
 
 #### Examples
 
@@ -610,73 +1077,230 @@ export default function FirstSum() {
 Nest operators for a figure made of factors: each folds with its formula under its name, and `Ref` stands for a quantity used twice.
 
 ```tsx
-import { countAt, IDEAL_CYCLE_MINUTES, plant, SHIFT_MINUTES } from "./plant";
 import { Calculation, Difference, Given, Product, Quotient, Ref } from "@umriss-ui/calculation";
 
-const COUNT = countAt(plant(17), SHIFT_MINUTES);
+/* Data from the plant world, written out here so the example runs on its own. */
 
-export default function Oee() {
-  return (
-    <Calculation aria-label="OEE of the kiln line, early shift">
-      <Product label="OEE" format="percent" target={0.85}>
-        <Quotient label="Availability" format="percent">
-          <Difference id="runtime" label="Run time" unit="min">
-            <Given id="planned" label="Planned production time" value={COUNT.planned} unit="min" />
-            <Given label="Downtime" value={COUNT.downtime} unit="min" />
-          </Difference>
-          <Ref to="planned" />
-        </Quotient>
-        <Quotient label="Performance" format="percent">
-          <Product label="Ideal run time" unit="min">
-            <Given label="Ideal cycle time" value={IDEAL_CYCLE_MINUTES} unit="min/tile" />
-            <Given id="total" label="Tiles fired" value={COUNT.total} unit="tiles" />
-          </Product>
-          <Ref to="runtime" />
-        </Quotient>
-        <Quotient label="Quality" format="percent">
-          <Given label="Good tiles" value={COUNT.good} unit="tiles" />
-          <Ref to="total" />
-        </Quotient>
-      </Product>
-    </Calculation>
-  );
+/** A small LCG - reproducible across runs and platforms. */
+function random(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
 }
-```
 
-It imports `plant.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+/** The early shift, 06:00 to 14:00. */
+const SHIFT_MINUTES = 480;
 
-##### Write a chain
+/** The kiln's zone 3, in °C: the numbers every part reads it against, once.
+    Between the two warnings lies the tolerance - a tile fired outside it is
+    scrap; `returnTo` is the alarm's dead band. */
+const KILN = { target: 1200, tolerance: [1185, 1215], alarm: 1230, returnTo: 1222 } as const;
 
-Put lines in a `Chain` for a sheet read top to bottom; each works into the value before it, and an `Interim` names that value.
+/** The kiln fires one tile every quarter of a minute when nothing holds it up -
+    the ideal cycle time of the OEE's performance. */
+const IDEAL_CYCLE_MINUTES = 0.25;
 
-```tsx
-import { Calculation, Chain, Given, Interim, Minus, Plus, Product, Ref } from "@umriss-ui/calculation";
+/** One minute of the line. */
+interface Reading {
+  /** Minutes since the start of the shift. */
+  minute: number;
+  /** Zone 3 of the kiln, in °C. */
+  kiln: number;
+  /** The exit pyrometer, in °C - `null` while it sends nothing. */
+  exit: number | null;
+  /** Whether the belt runs. */
+  running: boolean;
+  /** Tiles out of the kiln in this minute. */
+  fired: number;
+  /** Of them, the ones fired inside the tolerance. */
+  good: number;
+}
 
-export default function Invoice() {
-  return (
-    <Calculation aria-label="Invoice INV-26-0318, Brandlow Office Supply">
-      <Chain>
-        <Product id="lamps" label="Desk lamps, LED" unit="€" decimals={2}>
-          <Given label="Lamps" value={24} unit="pcs" />
-          <Given label="Price per lamp" value={48.9} unit="€/pc" decimals={2} />
-        </Product>
-        <Minus>
-          <Product label="Discount" unit="€" decimals={2}>
-            <Given label="Discount on lamps" value={0.1} format="percent" />
-            <Ref to="lamps" />
-          </Product>
-        </Minus>
-        <Plus>
-          <Product label="Printer paper" unit="€" decimals={2}>
-            <Given label="Boxes" value={40} unit="boxes" />
-            <Given label="Price per box" value={21.5} unit="€/box" decimals={2} />
-          </Product>
-        </Plus>
-        <Plus label="Delivery" value={35} unit="€" decimals={2} />
-        <Interim id="net" label="Net amount" unit="€" decimals={2} />
-        <Plus>
-          <Product label="VAT" unit="€" decimals={2}>
-            <Given label="VAT rate" value={0.19} format="percent" />
+/** A tile taken off the belt and measured - one every ten minutes while it runs. */
+interface Sample {
+  minute: number;
+  /** The tile's length after firing, in mm (nominal 600). */
+  length: number;
+}
+
+/** A batch of tiles through the three stations. */
+interface Batch {
+  id: string;
+  name: string;
+  /** How many tiles the batch is planned for. */
+  tiles: number;
+  /** Minutes since the start of the shift, per station. */
+  press: readonly [number, number];
+  dryer: readonly [number, number];
+  kiln: readonly [number, number];
+}
+
+interface Plant {
+  readings: readonly Reading[];
+  samples: readonly Sample[];
+  batches: readonly Batch[];
+}
+
+/* When the exit pyrometer goes silent, and for how long. Fixed rather than
+   seeded, so that a running control room shows its reading turn stale, then
+   lost, and come back. */
+const SILENT_FROM = 288;
+const SILENT_FOR = 50;
+
+/** The shift, from a seed. */
+function plant(seed: number): Plant {
+  const r = random(seed);
+
+  /* The one excursion: a burner overshoots somewhere between 02:30 and 03:30
+     into the shift, for half an hour, peaking near 1242 °C. The operator stops
+     the feed twenty-two minutes in, for eighteen minutes. The noise around it
+     is too small to reach a warning on its own, so this is the only crossing -
+     which is what the tests hold. */
+  const surgeFrom = 150 + Math.floor(r() * 60);
+  const surgeFor = 30;
+  const stopFrom = surgeFrom + 22;
+  const stopFor = 18;
+
+  /* The plan: batches through the kiln one after another, each pressed an
+     hour and dried half an hour before - the first ones during the night
+     shift. Tiles come out of the kiln only while a batch is in it, so the
+     OEE's count and the batches' counts are the same tiles. The plan is a
+     plan: a stop of the belt does not move it. */
+  const batches: Batch[] = [];
+  for (let at = 0, i = 0; at < SHIFT_MINUTES; i++) {
+    const length = 70 + Math.floor(r() * 25);
+    batches.push({
+      id: `b-${4121 + i}`,
+      name: `B-${4121 + i}`,
+      tiles: Math.round(length / IDEAL_CYCLE_MINUTES / 10) * 10,
+      press: [at - 60, at - 60 + length],
+      dryer: [at - 30, at - 30 + length],
+      kiln: [at, at + length],
+    });
+    at += length + 5;
+  }
+
+  const readings: Reading[] = [];
+  const samples: Sample[] = [];
+  let drift = 0;
+  for (let minute = 0; minute < SHIFT_MINUTES; minute++) {
+    drift = 0.9 * drift + (r() - 0.5) * 3;
+    const into = minute - surgeFrom;
+    const surge = into >= 0 && into <= surgeFor ? 42 * Math.sin((Math.PI * into) / surgeFor) : 0;
+    const kiln = Math.round((KILN.target + drift + surge) * 10) / 10;
+
+    const running = !(minute >= stopFrom && minute < stopFrom + stopFor);
+    const loaded = batches.some((batch) => batch.kiln[0] <= minute && minute < batch.kiln[1]);
+    const jam = r() < 0.12;
+    const fired = running && loaded ? (jam ? 3 : 4) : 0;
+    const inTolerance = kiln >= KILN.tolerance[0] && kiln <= KILN.tolerance[1];
+    const silent = minute >= SILENT_FROM && minute < SILENT_FROM + SILENT_FOR;
+    const exit = silent ? null : Math.round((kiln - 380 + (r() - 0.5) * 4) * 10) / 10;
+
+    readings.push({ minute, kiln, exit, running, fired, good: inTolerance ? fired : 0 });
+
+    if (running && minute % 10 === 0) {
+      /* Hotter shrinks more: the length follows the kiln, so the control
+         chart sees the excursion the trend sees. */
+      const length = 600 + (KILN.target - kiln) * 0.05 + (r() - 0.5) * 0.6;
+      samples.push({ minute, length: Math.round(length * 100) / 100 });
+    }
+  }
+
+  return { readings, samples, batches };
+}
+
+/** The readings up to and including the minute. */
+function upTo<T extends { minute: number }>(series: readonly T[], minute: number): readonly T[] {
+  return series.filter((one) => one.minute <= minute);
+}
+
+/** The shift's figures for the OEE, up to and including the minute. */
+interface ShiftCount {
+  /** Minutes of the shift so far. */
+  planned: number;
+  /** Minutes the belt stood. */
+  downtime: number;
+  /** Tiles out of the kiln. */
+  total: number;
+  /** Of them, inside the tolerance. */
+  good: number;
+}
+
+function countAt(p: Plant, minute: number): ShiftCount {
+  const so = upTo(p.readings, minute);
+  return {
+    planned: so.length,
+    downtime: so.filter((one) => !one.running).length,
+    total: so.reduce((sum, one) => sum + one.fired, 0),
+    good: so.reduce((sum, one) => sum + one.good, 0),
+  };
+}
+
+const COUNT = countAt(plant(17), SHIFT_MINUTES);
+
+export default function Oee() {
+  return (
+    <Calculation aria-label="OEE of the kiln line, early shift">
+      <Product label="OEE" format="percent" target={0.85}>
+        <Quotient label="Availability" format="percent">
+          <Difference id="runtime" label="Run time" unit="min">
+            <Given id="planned" label="Planned production time" value={COUNT.planned} unit="min" />
+            <Given label="Downtime" value={COUNT.downtime} unit="min" />
+          </Difference>
+          <Ref to="planned" />
+        </Quotient>
+        <Quotient label="Performance" format="percent">
+          <Product label="Ideal run time" unit="min">
+            <Given label="Ideal cycle time" value={IDEAL_CYCLE_MINUTES} unit="min/tile" />
+            <Given id="total" label="Tiles fired" value={COUNT.total} unit="tiles" />
+          </Product>
+          <Ref to="runtime" />
+        </Quotient>
+        <Quotient label="Quality" format="percent">
+          <Given label="Good tiles" value={COUNT.good} unit="tiles" />
+          <Ref to="total" />
+        </Quotient>
+      </Product>
+    </Calculation>
+  );
+}
+```
+
+##### Write a chain
+
+Put lines in a `Chain` for a sheet read top to bottom; each works into the value before it, and an `Interim` names that value.
+
+```tsx
+import { Calculation, Chain, Given, Interim, Minus, Plus, Product, Ref } from "@umriss-ui/calculation";
+
+export default function Invoice() {
+  return (
+    <Calculation aria-label="Invoice INV-26-0318, Brandlow Office Supply">
+      <Chain>
+        <Product id="lamps" label="Desk lamps, LED" unit="€" decimals={2}>
+          <Given label="Lamps" value={24} unit="pcs" />
+          <Given label="Price per lamp" value={48.9} unit="€/pc" decimals={2} />
+        </Product>
+        <Minus>
+          <Product label="Discount" unit="€" decimals={2}>
+            <Given label="Discount on lamps" value={0.1} format="percent" />
+            <Ref to="lamps" />
+          </Product>
+        </Minus>
+        <Plus>
+          <Product label="Printer paper" unit="€" decimals={2}>
+            <Given label="Boxes" value={40} unit="boxes" />
+            <Given label="Price per box" value={21.5} unit="€/box" decimals={2} />
+          </Product>
+        </Plus>
+        <Plus label="Delivery" value={35} unit="€" decimals={2} />
+        <Interim id="net" label="Net amount" unit="€" decimals={2} />
+        <Plus>
+          <Product label="VAT" unit="€" decimals={2}>
+            <Given label="VAT rate" value={0.19} format="percent" />
             <Ref to="net" />
           </Product>
         </Plus>
@@ -818,9 +1442,55 @@ export default function UsedTwice() {
 `.map` inside an operator works; folded, a line with more than four operands says how many it holds instead of a long formula.
 
 ```tsx
-import { DOWNTIME_MINUTES, MONTH_MINUTES, SERVICES } from "./operations";
 import { Calculation, Difference, Given, Product, Quotient } from "@umriss-ui/calculation";
 
+/* Data from the operations world, written out here so the example runs on its own. */
+
+const at = (day: number, hours: number, minutes = 0) => new Date(2026, 2, day, hours, minutes).getTime();
+const MINUTE = 60_000;
+
+/** Tuesday, 17 March 2026, 10:30 - the moment the screens are read at. */
+const NOW = at(17, 10, 30);
+
+interface Service {
+  id: string;
+  name: string;
+  team: string;
+  /** 1 is customer-facing and pages at night; 3 waits for the morning. */
+  tier: 1 | 2 | 3;
+  /** The latency objective: the 95th percentile stays below this, in ms. */
+  latencySlo: number;
+  /** The availability promised for a month, in per cent. */
+  availabilityTarget: number;
+}
+
+const SERVICES: readonly Service[] = [
+  { id: "checkout", name: "Checkout", team: "Payments", tier: 1, latencySlo: 300, availabilityTarget: 99.95 },
+  { id: "billing", name: "Billing", team: "Payments", tier: 1, latencySlo: 400, availabilityTarget: 99.9 },
+  { id: "sign-in", name: "Sign-in", team: "Identity", tier: 1, latencySlo: 200, availabilityTarget: 99.95 },
+  { id: "search", name: "Search", team: "Discovery", tier: 1, latencySlo: 250, availabilityTarget: 99.9 },
+  { id: "images", name: "Image service", team: "Discovery", tier: 2, latencySlo: 500, availabilityTarget: 99.5 },
+  { id: "notifications", name: "Notifications", team: "Messaging", tier: 2, latencySlo: 800, availabilityTarget: 99.5 },
+  { id: "webhooks", name: "Webhooks", team: "Integrations", tier: 2, latencySlo: 1000, availabilityTarget: 99.5 },
+  { id: "reports", name: "Reporting", team: "Insights", tier: 3, latencySlo: 2000, availabilityTarget: 99 },
+];
+
+/** The month so far: 1 March 00:00 to now, in minutes. */
+const MONTH_MINUTES = (NOW - at(1, 0)) / MINUTE;
+
+/** Minutes each service was down this month. With `MONTH_MINUTES` and the
+    service's target, what an availability is worked out from. */
+const DOWNTIME_MINUTES: Readonly<Record<string, number>> = {
+  checkout: 34,
+  billing: 18,
+  "sign-in": 41,
+  search: 85,
+  images: 120,
+  notifications: 12,
+  webhooks: 210,
+  reports: 95,
+};
+
 /* The services a booking passes through, in order. */
 const PATH = ["sign-in", "search", "checkout", "billing", "notifications"];
 
@@ -843,8 +1513,6 @@ export default function FromData() {
 }
 ```
 
-It imports `operations.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ##### Hold a figure to its limits
 
 `limits` are assessed through core's `assess()`; the verdict stands as a word beneath the number, never as a colour alone.
@@ -1327,10 +1995,33 @@ Where the figures leave the labels less room than they need, and less than 10 re
 `metrics` puts several numbers on every line, each in its own column; every `value` is then an object with a number per metric.
 
 ```tsx
-import { PEOPLE } from "./planning";
 import { Calculation, Given, Sum } from "@umriss-ui/calculation";
 import type { Metric } from "@umriss-ui/calculation";
 
+/* Data from the planning world, written out here so the example runs on its own. */
+
+interface Person {
+  id: string;
+  name: string;
+  role: "Developer" | "Designer" | "Product manager" | "QA engineer";
+  team: "Web" | "Apps";
+  /** Hours a week they can be planned for. */
+  capacity: number;
+}
+
+const PEOPLE: readonly Person[] = [
+  { id: "maya", name: "Maya Lindgren", role: "Product manager", team: "Web", capacity: 32 },
+  { id: "arjun", name: "Arjun Mehta", role: "Developer", team: "Web", capacity: 40 },
+  { id: "chloe", name: "Chloe Durand", role: "Developer", team: "Web", capacity: 40 },
+  { id: "noah", name: "Noah Fischer", role: "Designer", team: "Web", capacity: 24 },
+  { id: "eva", name: "Eva Novak", role: "QA engineer", team: "Web", capacity: 40 },
+  { id: "luis", name: "Luis Moreno", role: "Product manager", team: "Apps", capacity: 40 },
+  { id: "hana", name: "Hana Sato", role: "Developer", team: "Apps", capacity: 40 },
+  { id: "kofi", name: "Kofi Mensah", role: "Developer", team: "Apps", capacity: 32 },
+  { id: "freya", name: "Freya Olsen", role: "Designer", team: "Apps", capacity: 40 },
+  { id: "david", name: "David Kowalski", role: "QA engineer", team: "Apps", capacity: 20 },
+];
+
 const METRICS: Metric[] = [
   { id: "heads", label: "Headcount", unit: "HC" },
   { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
@@ -1354,8 +2045,6 @@ export default function TwoTeams() {
 }
 ```
 
-It imports `planning.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ##### A number one metric does not have
 
 `null` for one metric makes absent only what depends on it in that metric, with the reason; the other metric sums on.
@@ -1391,22 +2080,82 @@ export default function NotRecorded() {
 A tree of sums, built from data: every cost centre folds to its total and opens into its teams, each metric summed on its own.
 
 ```tsx
-import { COST_CENTRES, TEAMS } from "./controlling";
 import { Calculation, Given, Sum } from "@umriss-ui/calculation";
 import type { Metric } from "@umriss-ui/calculation";
 
-const METRICS: Metric[] = [
-  { id: "heads", label: "Headcount", unit: "HC" },
-  { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
-];
+/* Data from the controlling world, written out here so the example runs on its own. */
 
-const COMMERCIAL = ["CC-1100", "CC-1200", "CC-3100"];
+interface CostCentre {
+  id: string;
+  name: string;
+  owner: string;
+  /** The budget of one month. */
+  monthlyBudget: number;
+}
 
-export default function BusinessLine() {
-  return (
-    <Calculation aria-label="Staff of the commercial business line, 17 March" metrics={METRICS}>
-      <Sum label="Commercial">
-        {COMMERCIAL.map((id) => (
+const COST_CENTRES: readonly CostCentre[] = [
+  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
+  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
+  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
+  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
+  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
+  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
+  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
+  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
+  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
+];
+
+interface Team {
+  /** The cost centre the team books to. */
+  costCentre: string;
+  name: string;
+  /** People employed, whatever their hours. */
+  headcount: number;
+  /** Full-time equivalents: contracted hours over 40 a week. */
+  fte: number;
+  /** Staff cost of a month, in thousand euros. */
+  monthlyCost: number;
+}
+
+/** Every team, on 17 March: 102 people, 91.5 full-time equivalents. */
+const TEAMS: readonly Team[] = [
+  { costCentre: "CC-1100", name: "Field sales North", headcount: 9, fte: 8.6, monthlyCost: 61.2 },
+  { costCentre: "CC-1100", name: "Field sales South", headcount: 8, fte: 7.5, monthlyCost: 53.9 },
+  { costCentre: "CC-1100", name: "Inside sales", headcount: 6, fte: 5.2, monthlyCost: 29.8 },
+  { costCentre: "CC-1100", name: "Key accounts", headcount: 4, fte: 4.0, monthlyCost: 33.6 },
+  { costCentre: "CC-1200", name: "Brand", headcount: 3, fte: 2.8, monthlyCost: 19.4 },
+  { costCentre: "CC-1200", name: "Online marketing", headcount: 4, fte: 3.5, monthlyCost: 24.1 },
+  { costCentre: "CC-1200", name: "Trade fairs", headcount: 2, fte: 1.5, monthlyCost: 10.2 },
+  { costCentre: "CC-3100", name: "Service desk", headcount: 7, fte: 5.9, monthlyCost: 31.3 },
+  { costCentre: "CC-3100", name: "Returns", headcount: 3, fte: 2.5, monthlyCost: 12.6 },
+  { costCentre: "CC-2100", name: "Seating", headcount: 6, fte: 5.8, monthlyCost: 43.5 },
+  { costCentre: "CC-2100", name: "Desks", headcount: 7, fte: 6.5, monthlyCost: 48.1 },
+  { costCentre: "CC-2100", name: "Storage", headcount: 5, fte: 4.6, monthlyCost: 33.9 },
+  { costCentre: "CC-2100", name: "Test lab", headcount: 3, fte: 2.5, monthlyCost: 16.8 },
+  { costCentre: "CC-2200", name: "Industrial design", headcount: 4, fte: 3.6, monthlyCost: 27.2 },
+  { costCentre: "CC-2200", name: "Colour and material", headcount: 2, fte: 1.8, monthlyCost: 12.9 },
+  { costCentre: "CC-4100", name: "Accounting", headcount: 5, fte: 4.4, monthlyCost: 27.5 },
+  { costCentre: "CC-4100", name: "Controlling", headcount: 3, fte: 3.0, monthlyCost: 21.3 },
+  { costCentre: "CC-4200", name: "Recruiting", headcount: 2, fte: 1.8, monthlyCost: 12.4 },
+  { costCentre: "CC-4200", name: "Payroll", headcount: 2, fte: 1.5, monthlyCost: 9.6 },
+  { costCentre: "CC-4300", name: "Workplace", headcount: 4, fte: 3.8, monthlyCost: 24.2 },
+  { costCentre: "CC-4300", name: "Applications", headcount: 5, fte: 4.5, monthlyCost: 34.8 },
+  { costCentre: "CC-4400", name: "Buildings", headcount: 3, fte: 3.0, monthlyCost: 16.9 },
+  { costCentre: "CC-4400", name: "Canteen", headcount: 5, fte: 3.2, monthlyCost: 14.7 },
+];
+
+const METRICS: Metric[] = [
+  { id: "heads", label: "Headcount", unit: "HC" },
+  { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
+];
+
+const COMMERCIAL = ["CC-1100", "CC-1200", "CC-3100"];
+
+export default function BusinessLine() {
+  return (
+    <Calculation aria-label="Staff of the commercial business line, 17 March" metrics={METRICS}>
+      <Sum label="Commercial">
+        {COMMERCIAL.map((id) => (
           <Sum key={id} label={COST_CENTRES.find((centre) => centre.id === id)!.name}>
             {TEAMS.filter((team) => team.costCentre === id).map((team) => (
               <Given key={team.name} label={team.name} value={{ heads: team.headcount, fte: team.fte }} />
@@ -1419,8 +2168,6 @@ export default function BusinessLine() {
 }
 ```
 
-It imports `controlling.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ##### Staff movement as a chain
 
 The chain works per metric too: joiners added, leavers taken away, and every interim closes with its units.
@@ -1456,10 +2203,70 @@ export default function StaffMovement() {
 Any number of metrics, each with its unit and places. Narrow, where the figures leave the label too little room, each line puts them beneath its label.
 
 ```tsx
-import { COST_CENTRES, TEAMS } from "./controlling";
 import { Calculation, Given, Sum } from "@umriss-ui/calculation";
 import type { Metric } from "@umriss-ui/calculation";
 
+/* Data from the controlling world, written out here so the example runs on its own. */
+
+interface CostCentre {
+  id: string;
+  name: string;
+  owner: string;
+  /** The budget of one month. */
+  monthlyBudget: number;
+}
+
+const COST_CENTRES: readonly CostCentre[] = [
+  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
+  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
+  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
+  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
+  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
+  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
+  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
+  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
+  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
+];
+
+interface Team {
+  /** The cost centre the team books to. */
+  costCentre: string;
+  name: string;
+  /** People employed, whatever their hours. */
+  headcount: number;
+  /** Full-time equivalents: contracted hours over 40 a week. */
+  fte: number;
+  /** Staff cost of a month, in thousand euros. */
+  monthlyCost: number;
+}
+
+/** Every team, on 17 March: 102 people, 91.5 full-time equivalents. */
+const TEAMS: readonly Team[] = [
+  { costCentre: "CC-1100", name: "Field sales North", headcount: 9, fte: 8.6, monthlyCost: 61.2 },
+  { costCentre: "CC-1100", name: "Field sales South", headcount: 8, fte: 7.5, monthlyCost: 53.9 },
+  { costCentre: "CC-1100", name: "Inside sales", headcount: 6, fte: 5.2, monthlyCost: 29.8 },
+  { costCentre: "CC-1100", name: "Key accounts", headcount: 4, fte: 4.0, monthlyCost: 33.6 },
+  { costCentre: "CC-1200", name: "Brand", headcount: 3, fte: 2.8, monthlyCost: 19.4 },
+  { costCentre: "CC-1200", name: "Online marketing", headcount: 4, fte: 3.5, monthlyCost: 24.1 },
+  { costCentre: "CC-1200", name: "Trade fairs", headcount: 2, fte: 1.5, monthlyCost: 10.2 },
+  { costCentre: "CC-3100", name: "Service desk", headcount: 7, fte: 5.9, monthlyCost: 31.3 },
+  { costCentre: "CC-3100", name: "Returns", headcount: 3, fte: 2.5, monthlyCost: 12.6 },
+  { costCentre: "CC-2100", name: "Seating", headcount: 6, fte: 5.8, monthlyCost: 43.5 },
+  { costCentre: "CC-2100", name: "Desks", headcount: 7, fte: 6.5, monthlyCost: 48.1 },
+  { costCentre: "CC-2100", name: "Storage", headcount: 5, fte: 4.6, monthlyCost: 33.9 },
+  { costCentre: "CC-2100", name: "Test lab", headcount: 3, fte: 2.5, monthlyCost: 16.8 },
+  { costCentre: "CC-2200", name: "Industrial design", headcount: 4, fte: 3.6, monthlyCost: 27.2 },
+  { costCentre: "CC-2200", name: "Colour and material", headcount: 2, fte: 1.8, monthlyCost: 12.9 },
+  { costCentre: "CC-4100", name: "Accounting", headcount: 5, fte: 4.4, monthlyCost: 27.5 },
+  { costCentre: "CC-4100", name: "Controlling", headcount: 3, fte: 3.0, monthlyCost: 21.3 },
+  { costCentre: "CC-4200", name: "Recruiting", headcount: 2, fte: 1.8, monthlyCost: 12.4 },
+  { costCentre: "CC-4200", name: "Payroll", headcount: 2, fte: 1.5, monthlyCost: 9.6 },
+  { costCentre: "CC-4300", name: "Workplace", headcount: 4, fte: 3.8, monthlyCost: 24.2 },
+  { costCentre: "CC-4300", name: "Applications", headcount: 5, fte: 4.5, monthlyCost: 34.8 },
+  { costCentre: "CC-4400", name: "Buildings", headcount: 3, fte: 3.0, monthlyCost: 16.9 },
+  { costCentre: "CC-4400", name: "Canteen", headcount: 5, fte: 3.2, monthlyCost: 14.7 },
+];
+
 const METRICS: Metric[] = [
   { id: "heads", label: "Headcount", unit: "HC" },
   { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
@@ -1489,17 +2296,88 @@ export default function StaffCost() {
 }
 ```
 
-It imports `controlling.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ##### The whole company
 
 Three levels from data - business line, cost centre, team - and three metrics: 23 teams folded to three lines a reader opens one by one.
 
 ```tsx
-import { BUSINESS_LINES, COST_CENTRES, TEAMS } from "./controlling";
 import { Calculation, Given, Sum } from "@umriss-ui/calculation";
 import type { Metric } from "@umriss-ui/calculation";
 
+/* Data from the controlling world, written out here so the example runs on its own. */
+
+interface CostCentre {
+  id: string;
+  name: string;
+  owner: string;
+  /** The budget of one month. */
+  monthlyBudget: number;
+}
+
+const COST_CENTRES: readonly CostCentre[] = [
+  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
+  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
+  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
+  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
+  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
+  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
+  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
+  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
+  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
+];
+
+interface Team {
+  /** The cost centre the team books to. */
+  costCentre: string;
+  name: string;
+  /** People employed, whatever their hours. */
+  headcount: number;
+  /** Full-time equivalents: contracted hours over 40 a week. */
+  fte: number;
+  /** Staff cost of a month, in thousand euros. */
+  monthlyCost: number;
+}
+
+/** Every team, on 17 March: 102 people, 91.5 full-time equivalents. */
+const TEAMS: readonly Team[] = [
+  { costCentre: "CC-1100", name: "Field sales North", headcount: 9, fte: 8.6, monthlyCost: 61.2 },
+  { costCentre: "CC-1100", name: "Field sales South", headcount: 8, fte: 7.5, monthlyCost: 53.9 },
+  { costCentre: "CC-1100", name: "Inside sales", headcount: 6, fte: 5.2, monthlyCost: 29.8 },
+  { costCentre: "CC-1100", name: "Key accounts", headcount: 4, fte: 4.0, monthlyCost: 33.6 },
+  { costCentre: "CC-1200", name: "Brand", headcount: 3, fte: 2.8, monthlyCost: 19.4 },
+  { costCentre: "CC-1200", name: "Online marketing", headcount: 4, fte: 3.5, monthlyCost: 24.1 },
+  { costCentre: "CC-1200", name: "Trade fairs", headcount: 2, fte: 1.5, monthlyCost: 10.2 },
+  { costCentre: "CC-3100", name: "Service desk", headcount: 7, fte: 5.9, monthlyCost: 31.3 },
+  { costCentre: "CC-3100", name: "Returns", headcount: 3, fte: 2.5, monthlyCost: 12.6 },
+  { costCentre: "CC-2100", name: "Seating", headcount: 6, fte: 5.8, monthlyCost: 43.5 },
+  { costCentre: "CC-2100", name: "Desks", headcount: 7, fte: 6.5, monthlyCost: 48.1 },
+  { costCentre: "CC-2100", name: "Storage", headcount: 5, fte: 4.6, monthlyCost: 33.9 },
+  { costCentre: "CC-2100", name: "Test lab", headcount: 3, fte: 2.5, monthlyCost: 16.8 },
+  { costCentre: "CC-2200", name: "Industrial design", headcount: 4, fte: 3.6, monthlyCost: 27.2 },
+  { costCentre: "CC-2200", name: "Colour and material", headcount: 2, fte: 1.8, monthlyCost: 12.9 },
+  { costCentre: "CC-4100", name: "Accounting", headcount: 5, fte: 4.4, monthlyCost: 27.5 },
+  { costCentre: "CC-4100", name: "Controlling", headcount: 3, fte: 3.0, monthlyCost: 21.3 },
+  { costCentre: "CC-4200", name: "Recruiting", headcount: 2, fte: 1.8, monthlyCost: 12.4 },
+  { costCentre: "CC-4200", name: "Payroll", headcount: 2, fte: 1.5, monthlyCost: 9.6 },
+  { costCentre: "CC-4300", name: "Workplace", headcount: 4, fte: 3.8, monthlyCost: 24.2 },
+  { costCentre: "CC-4300", name: "Applications", headcount: 5, fte: 4.5, monthlyCost: 34.8 },
+  { costCentre: "CC-4400", name: "Buildings", headcount: 3, fte: 3.0, monthlyCost: 16.9 },
+  { costCentre: "CC-4400", name: "Canteen", headcount: 5, fte: 3.2, monthlyCost: 14.7 },
+];
+
+interface BusinessLine {
+  name: string;
+  /** Its cost centres, in the order a report lists them. */
+  costCentres: readonly string[];
+}
+
+/** How the company reports: three business lines over the nine cost centres. */
+const BUSINESS_LINES: readonly BusinessLine[] = [
+  { name: "Commercial", costCentres: ["CC-1100", "CC-1200", "CC-3100"] },
+  { name: "Product", costCentres: ["CC-2100", "CC-2200"] },
+  { name: "Corporate services", costCentres: ["CC-4100", "CC-4200", "CC-4300", "CC-4400"] },
+];
+
 const METRICS: Metric[] = [
   { id: "heads", label: "Headcount", unit: "HC" },
   { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
@@ -1533,8 +2411,6 @@ export default function WholeCompany() {
 }
 ```
 
-It imports `controlling.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 #### When to use something else
 
 - A ratio across two metrics, such as FTE per head → a calculation of its own, a `Quotient` of two givens
@@ -1708,73 +2584,209 @@ Demo page: https://romanhaendler.github.io/umriss-ui/calculation/worked-examples
 Eight tours from data, some sixty quantities: the sheet stands open, every tree in it folded, and the stale diesel price says so.
 
 ```tsx
-import { COST_RATES, TOURS, VEHICLES } from "./logistics";
 import { Calculation, Chain, DividedBy, Given, Interim, Plus, Product, Sum } from "@umriss-ui/calculation";
 
-const typeOf = (vehicleId: string) => VEHICLES.find((vehicle) => vehicle.id === vehicleId)!.type;
-const hours = (tour: (typeof TOURS)[number]) => (tour.to - tour.from) / 3_600_000 + tour.loading / 60;
-const DIESEL = TOURS.filter((tour) => typeOf(tour.vehicle) !== "e-van");
-const ELECTRIC = TOURS.filter((tour) => typeOf(tour.vehicle) === "e-van");
-const STOPS = TOURS.reduce((sum, tour) => sum + tour.stops.length, 0);
+/* Data from the logistics world, written out here so the example runs on its own. */
 
-const AGES = { stale: 24 * 3_600_000, lost: 14 * 24 * 3_600_000 };
+/** A small LCG - the same numbers on every computer. */
+function random(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+    return s / 4294967296;
+  };
+}
 
-export default function CostPerTour() {
-  return (
-    <Calculation aria-label="Cost per stop, all tours, Tuesday">
-      <Chain>
-        <Product label="Drivers" unit="€" decimals={2}>
-          <Sum label="Driver hours" unit="h" decimals={1}>
-            {TOURS.map((tour) => (
-              <Given key={tour.id} label={`Hours, ${tour.id}`} value={hours(tour)} unit="h" decimals={1} />
-            ))}
-          </Sum>
-          <Given label="Driver rate, all in" value={COST_RATES.driverPerHour} unit="€/h" decimals={2} />
-        </Product>
-        <Plus>
-          <Product label="Diesel" unit="€" decimals={2}>
-            <Sum label="Diesel used" unit="l" decimals={1}>
-              {DIESEL.map((tour) => (
-                <Product key={tour.id} label={`Diesel, ${tour.id}`} unit="l" decimals={1}>
-                  <Given label={`Distance, ${tour.id}`} value={tour.km} unit="km" />
-                  <Given label={`Consumption, ${tour.id}`} value={COST_RATES.per100Km[typeOf(tour.vehicle)] / 100} unit="l/km" />
-                </Product>
-              ))}
-            </Sum>
-            <Given
-              label="Diesel price"
-              value={COST_RATES.dieselPerLitre}
-              unit="€/l"
-              decimals={2}
-              source="Fuel card, weekly price"
-              asOf={new Date(2026, 2, 14, 6, 0)}
-              ages={AGES}
-            />
-          </Product>
-        </Plus>
-        <Plus>
-          <Product label="Electricity" unit="€" decimals={2}>
-            <Sum label="Electricity used" unit="kWh" decimals={1}>
-              {ELECTRIC.map((tour) => (
-                <Product key={tour.id} label={`Electricity, ${tour.id}`} unit="kWh" decimals={1}>
-                  <Given label={`Distance, ${tour.id}`} value={tour.km} unit="km" />
-                  <Given label={`Consumption, ${tour.id}`} value={COST_RATES.per100Km["e-van"] / 100} unit="kWh/km" />
-                </Product>
-              ))}
-            </Sum>
-            <Given label="Electricity price" value={COST_RATES.electricityPerKwh} unit="€/kWh" decimals={2} source="Depot tariff 2026" />
-          </Product>
-        </Plus>
-        <Plus>
-          <Sum label="Vehicle days" unit="€" decimals={2}>
-            {TOURS.map((tour) => (
-              <Given key={tour.id} label={`Vehicle day, ${tour.id}`} value={COST_RATES.vehiclePerDay[typeOf(tour.vehicle)]} unit="€" decimals={2} />
-            ))}
-          </Sum>
-        </Plus>
-        <Interim label="Cost of the day's tours" unit="€" decimals={2} />
-        <DividedBy label="Stops" value={STOPS} unit="stops" />
-        <Interim
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const MINUTE = 60_000;
+
+interface Vehicle {
+  id: string;
+  plate: string;
+  type: "van" | "e-van" | "truck";
+  /** Payload, in kg. */
+  capacity: number;
+  depot: string;
+}
+
+const VEHICLES: readonly Vehicle[] = [
+  { id: "v1", plate: "FP 214 K", type: "van", capacity: 1200, depot: "north" },
+  { id: "v2", plate: "FP 377 K", type: "e-van", capacity: 900, depot: "north" },
+  { id: "v3", plate: "FP 118 R", type: "truck", capacity: 7500, depot: "north" },
+  { id: "v4", plate: "FP 402 R", type: "van", capacity: 1200, depot: "river" },
+  { id: "v5", plate: "FP 455 R", type: "e-van", capacity: 900, depot: "river" },
+  { id: "v6", plate: "FP 290 E", type: "van", capacity: 1200, depot: "east" },
+  { id: "v7", plate: "FP 311 E", type: "e-van", capacity: 900, depot: "east" },
+  { id: "v8", plate: "FP 520 E", type: "truck", capacity: 7500, depot: "east" },
+];
+
+const DRIVERS = [
+  { id: "d1", name: "Martin Hale", depot: "north" },
+  { id: "d2", name: "Nadia Petrova", depot: "north" },
+  { id: "d3", name: "Owen Carter", depot: "north" },
+  { id: "d4", name: "Lucia Romero", depot: "river" },
+  { id: "d5", name: "Ben Adeyemi", depot: "river" },
+  { id: "d6", name: "Hanna Berg", depot: "east" },
+  { id: "d7", name: "Yusuf Demir", depot: "east" },
+  { id: "d8", name: "Clara Wendt", depot: "east" },
+] as const;
+
+const CUSTOMERS = [
+  "Holloway Garden Supplies",
+  "Marlow & Finch Books",
+  "Oakridge Pharmacy",
+  "Brixley Cycles",
+  "Tamsin's Bakery",
+  "Northfold Office",
+  "Pellham Hardware",
+  "Greywick Studio",
+  "Juniper Lane Florist",
+  "Ashcombe Dental",
+] as const;
+
+interface Stop {
+  id: string;
+  shipment: string;
+  customer: string;
+  /** The window the customer was promised, `[from, to]`. */
+  window: readonly [number, number];
+  /** When the tour plans to be there. */
+  arrival: number;
+}
+
+interface Tour {
+  id: string;
+  vehicle: string;
+  driver: string;
+  depot: string;
+  /** Leaves the depot, loaded; back at the depot. */
+  from: number;
+  to: number;
+  /** Minutes of loading before `from`. */
+  loading: number;
+  km: number;
+  stops: readonly Stop[];
+}
+
+/** One tour per vehicle. Stops every half hour or so, each with a two-hour
+    window; every seventh arrival misses its window - the late ones a
+    dispatcher looks for. */
+function tour(index: number): Tour {
+  const r = random(700 + index);
+  const vehicle = VEHICLES[index]!;
+  const truck = vehicle.type === "truck";
+  const from = at(truck ? 6 : 7, index % 2 === 0 ? 0 : 30);
+  const count = truck ? 5 : 8 + Math.floor(r() * 4);
+  const stops: Stop[] = [];
+  let arrival = from + (20 + Math.floor(r() * 15)) * MINUTE;
+  for (let i = 0; i < count; i++) {
+    const n = index * 20 + i;
+    const slot = Math.floor((arrival - at(0)) / (2 * 60 * MINUTE)) * 2;
+    /* A late stop's window closed half an hour or more before the arrival. */
+    const late = i >= 2 && n % 7 === 3;
+    const halfHour = 30 * MINUTE;
+    const windowFrom = late ? Math.floor(arrival / halfHour) * halfHour - 5 * halfHour : at(slot);
+    stops.push({
+      id: `s-${index + 1}-${i + 1}`,
+      shipment: `FP-${(1_004_210 + n * 13).toString()}`,
+      customer: CUSTOMERS[(n * 3) % CUSTOMERS.length]!,
+      window: [windowFrom, windowFrom + 2 * 60 * MINUTE],
+      arrival,
+    });
+    arrival += (truck ? 45 : 22) * MINUTE + Math.floor(r() * 18) * MINUTE;
+  }
+  return {
+    id: `T-${String(index + 1).padStart(2, "0")}`,
+    vehicle: vehicle.id,
+    driver: DRIVERS[index]!.id,
+    depot: vehicle.depot,
+    from,
+    to: arrival + 30 * MINUTE,
+    loading: truck ? 45 : 30,
+    km: Math.round((truck ? 140 : 70) + r() * 40),
+    stops,
+  };
+}
+
+const TOURS: readonly Tour[] = VEHICLES.map((_, index) => tour(index));
+
+/** What a tour costs, per unit - the inputs of a cost per tour. */
+const COST_RATES = {
+  /** Diesel, per litre; electricity, per kWh. */
+  dieselPerLitre: 1.68,
+  electricityPerKwh: 0.31,
+  /** Consumption per 100 km. */
+  per100Km: { van: 9.5, truck: 24, "e-van": 22 },
+  /** A driver's hour, all in. */
+  driverPerHour: 34.5,
+  /** Lease, insurance and upkeep, per day. */
+  vehiclePerDay: { van: 58, truck: 145, "e-van": 72 },
+} as const;
+
+const typeOf = (vehicleId: string) => VEHICLES.find((vehicle) => vehicle.id === vehicleId)!.type;
+const hours = (tour: (typeof TOURS)[number]) => (tour.to - tour.from) / 3_600_000 + tour.loading / 60;
+const DIESEL = TOURS.filter((tour) => typeOf(tour.vehicle) !== "e-van");
+const ELECTRIC = TOURS.filter((tour) => typeOf(tour.vehicle) === "e-van");
+const STOPS = TOURS.reduce((sum, tour) => sum + tour.stops.length, 0);
+
+const AGES = { stale: 24 * 3_600_000, lost: 14 * 24 * 3_600_000 };
+
+export default function CostPerTour() {
+  return (
+    <Calculation aria-label="Cost per stop, all tours, Tuesday">
+      <Chain>
+        <Product label="Drivers" unit="€" decimals={2}>
+          <Sum label="Driver hours" unit="h" decimals={1}>
+            {TOURS.map((tour) => (
+              <Given key={tour.id} label={`Hours, ${tour.id}`} value={hours(tour)} unit="h" decimals={1} />
+            ))}
+          </Sum>
+          <Given label="Driver rate, all in" value={COST_RATES.driverPerHour} unit="€/h" decimals={2} />
+        </Product>
+        <Plus>
+          <Product label="Diesel" unit="€" decimals={2}>
+            <Sum label="Diesel used" unit="l" decimals={1}>
+              {DIESEL.map((tour) => (
+                <Product key={tour.id} label={`Diesel, ${tour.id}`} unit="l" decimals={1}>
+                  <Given label={`Distance, ${tour.id}`} value={tour.km} unit="km" />
+                  <Given label={`Consumption, ${tour.id}`} value={COST_RATES.per100Km[typeOf(tour.vehicle)] / 100} unit="l/km" />
+                </Product>
+              ))}
+            </Sum>
+            <Given
+              label="Diesel price"
+              value={COST_RATES.dieselPerLitre}
+              unit="€/l"
+              decimals={2}
+              source="Fuel card, weekly price"
+              asOf={new Date(2026, 2, 14, 6, 0)}
+              ages={AGES}
+            />
+          </Product>
+        </Plus>
+        <Plus>
+          <Product label="Electricity" unit="€" decimals={2}>
+            <Sum label="Electricity used" unit="kWh" decimals={1}>
+              {ELECTRIC.map((tour) => (
+                <Product key={tour.id} label={`Electricity, ${tour.id}`} unit="kWh" decimals={1}>
+                  <Given label={`Distance, ${tour.id}`} value={tour.km} unit="km" />
+                  <Given label={`Consumption, ${tour.id}`} value={COST_RATES.per100Km["e-van"] / 100} unit="kWh/km" />
+                </Product>
+              ))}
+            </Sum>
+            <Given label="Electricity price" value={COST_RATES.electricityPerKwh} unit="€/kWh" decimals={2} source="Depot tariff 2026" />
+          </Product>
+        </Plus>
+        <Plus>
+          <Sum label="Vehicle days" unit="€" decimals={2}>
+            {TOURS.map((tour) => (
+              <Given key={tour.id} label={`Vehicle day, ${tour.id}`} value={COST_RATES.vehiclePerDay[typeOf(tour.vehicle)]} unit="€" decimals={2} />
+            ))}
+          </Sum>
+        </Plus>
+        <Interim label="Cost of the day's tours" unit="€" decimals={2} />
+        <DividedBy label="Stops" value={STOPS} unit="stops" />
+        <Interim
           label="Cost per stop"
           unit="€/stop"
           decimals={2}
@@ -1786,18 +2798,78 @@ export default function CostPerTour() {
 }
 ```
 
-It imports `logistics.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ##### Invoices with discount and VAT
 
 Each invoice is a chain from its lines, discounts and VAT by rate; as operands of one sum they fold to their totals.
 
 ```tsx
 import type { ReactElement } from "react";
-import { INVOICES } from "./controlling";
-import type { Invoice } from "./controlling";
 import { Calculation, Chain, Difference, Given, Interim, Plus, Product, Ref, Sum } from "@umriss-ui/calculation";
 
+/* Data from the controlling world, written out here so the example runs on its own. */
+
+const on = (month: number, day: number) => new Date(2026, month - 1, day).getTime();
+
+interface InvoiceLine {
+  description: string;
+  quantity: number;
+  unitPrice: number;
+  /** A fraction: 0.1 is ten per cent off. */
+  discount: number;
+  /** A fraction: 0.19 or 0.07, or 0 where no VAT is charged. */
+  vatRate: number;
+}
+
+interface Invoice {
+  id: string;
+  supplier: string;
+  costCentre: string;
+  received: number;
+  due: number;
+  status: "awaiting approval" | "approved" | "paid" | "rejected";
+  lines: readonly InvoiceLine[];
+}
+
+const INVOICES: readonly Invoice[] = [
+  {
+    id: "INV-26-0318", supplier: "Brandlow Office Supply", costCentre: "CC-4400", received: on(3, 16), due: on(4, 15), status: "awaiting approval",
+    lines: [
+      { description: "Desk lamps, LED", quantity: 24, unitPrice: 48.9, discount: 0.1, vatRate: 0.19 },
+      { description: "Printer paper, box of 5 reams", quantity: 40, unitPrice: 21.5, discount: 0, vatRate: 0.19 },
+      { description: "Delivery", quantity: 1, unitPrice: 35, discount: 0, vatRate: 0.19 },
+    ],
+  },
+  {
+    id: "INV-26-0317", supplier: "Kettering & Shaw Events", costCentre: "CC-1200", received: on(3, 13), due: on(4, 12), status: "awaiting approval",
+    lines: [
+      { description: "Trade fair stand, 3 days", quantity: 1, unitPrice: 12_400, discount: 0.05, vatRate: 0.19 },
+      { description: "Catering, per guest", quantity: 180, unitPrice: 18.5, discount: 0, vatRate: 0.07 },
+    ],
+  },
+  {
+    id: "INV-26-0309", supplier: "Nimbrel Software", costCentre: "CC-4300", received: on(3, 9), due: on(4, 8), status: "approved",
+    lines: [
+      { description: "Design tool licences, annual", quantity: 12, unitPrice: 540, discount: 0.15, vatRate: 0.19 },
+      { description: "Onboarding session", quantity: 2, unitPrice: 890, discount: 0, vatRate: 0.19 },
+    ],
+  },
+  {
+    id: "INV-26-0302", supplier: "Fenwright Legal", costCentre: "CC-4100", received: on(3, 2), due: on(3, 16), status: "paid",
+    lines: [{ description: "Contract review, hours", quantity: 14.5, unitPrice: 260, discount: 0, vatRate: 0.19 }],
+  },
+  {
+    id: "INV-26-0226", supplier: "Corrin Travel", costCentre: "CC-1100", received: on(2, 26), due: on(3, 12), status: "paid",
+    lines: [
+      { description: "Rail tickets, sales conference", quantity: 22, unitPrice: 139, discount: 0, vatRate: 0.07 },
+      { description: "Hotel, nights", quantity: 44, unitPrice: 112, discount: 0.08, vatRate: 0.07 },
+    ],
+  },
+  {
+    id: "INV-26-0221", supplier: "Stellbrook Consulting", costCentre: "CC-2100", received: on(2, 21), due: on(3, 23), status: "rejected",
+    lines: [{ description: "Architecture review, days", quantity: 6, unitPrice: 1450, discount: 0, vatRate: 0 }],
+  },
+];
+
 const OPEN = INVOICES.filter((invoice) => invoice.status === "awaiting approval" || invoice.status === "approved");
 const percent = (rate: number) => `${Math.round(rate * 100)} %`;
 
@@ -1865,16 +2937,18 @@ export default function Invoices() {
 }
 ```
 
-It imports `controlling.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
 ##### OEE of a hall, weighted by planned time
 
 Three lines from data, three levels deep; line C's downtime is `null`, so its OEE and the hall's are missing while A and B stand.
 
 ```tsx
-import { SHIFT_MINUTES } from "./plant";
 import { Calculation, Difference, Given, Product, Quotient, Ref, Sum } from "@umriss-ui/calculation";
 
+/* Data from the plant world, written out here so the example runs on its own. */
+
+/** The early shift, 06:00 to 14:00. */
+const SHIFT_MINUTES = 480;
+
 interface Line {
   name: string;
   planned: number;
@@ -1938,1587 +3012,3 @@ export default function HallOee() {
   );
 }
 ```
-
-It imports `plant.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
-
-## Files the examples show
-
-The demos' shared data, which some examples import from beside themselves. Copied with the example, it runs.
-
-### `controlling.ts`
-
-```ts
-/**
- * The controlling world: Carrow & Lisle, a mid-sized maker of office
- * furniture, and its finance team's view of the year 2026.
- *
- * The standing cast:
- * - `COST_CENTRES` - nine cost centres with their owner and monthly budget;
- * - `MONTHS` and `LEDGER` - per cost centre and month: the budget, the actual
- *   where the month is closed (January and February), the forecast for every
- *   month; Marketing overspends, IT runs under;
- * - `INVOICES` - incoming invoices with their lines (quantity, unit price,
- *   discount, VAT rate), and `APPROVALS`, who signed which, or has yet to;
- * - `TEAMS` - the teams of each cost centre with their headcount, full-time
- *   equivalents and monthly staff cost, and `BUSINESS_LINES`, which cost
- *   centres each of the three business lines holds.
- *
- * Amounts in euros. "Now" is Tuesday, 17 March 2026. Plain data and small pure
- * functions, no imports: copy the file beside an example and it runs.
- */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-const on = (month: number, day: number) => new Date(2026, month - 1, day).getTime();
-
-export interface CostCentre {
-  id: string;
-  name: string;
-  owner: string;
-  /** The budget of one month. */
-  monthlyBudget: number;
-}
-
-export const COST_CENTRES: readonly CostCentre[] = [
-  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
-  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
-  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
-  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
-  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
-  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
-  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
-  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
-  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
-];
-
-/** The year's months, as `"2026-01"` … `"2026-12"`. */
-export const MONTHS: readonly string[] = Array.from({ length: 12 }, (_, i) => `2026-${String(i + 1).padStart(2, "0")}`);
-
-/** The months whose books are closed: they have an actual. */
-export const CLOSED_MONTHS = 2;
-
-export interface LedgerRow {
-  costCentre: string;
-  month: string;
-  budget: number;
-  /** `null` while the month is open. */
-  actual: number | null;
-  forecast: number;
-}
-
-/* Where a cost centre lands against its budget, as a factor: Marketing's
-   spring campaign overspends, IT's delayed licences underspend. */
-const TENDENCY: Readonly<Record<string, number>> = { "CC-1200": 1.14, "CC-4300": 0.88 };
-
-/** Budget, actual and forecast of every cost centre in every month. */
-export const LEDGER: readonly LedgerRow[] = COST_CENTRES.flatMap((centre, c) => {
-  const r = random(310 + c);
-  const tendency = TENDENCY[centre.id] ?? 1;
-  return MONTHS.map((month, m) => {
-    /* December pays the bonuses, August is the quiet month. */
-    const season = m === 11 ? 1.12 : m === 7 ? 0.9 : 1;
-    const budget = Math.round(centre.monthlyBudget * season);
-    const forecast = Math.round((budget * (tendency + (r() - 0.5) * 0.06)) / 100) * 100;
-    const actual = m < CLOSED_MONTHS ? Math.round(forecast * (1 + (r() - 0.5) * 0.08)) : null;
-    return { costCentre: centre.id, month, budget, actual, forecast };
-  });
-});
-
-export interface InvoiceLine {
-  description: string;
-  quantity: number;
-  unitPrice: number;
-  /** A fraction: 0.1 is ten per cent off. */
-  discount: number;
-  /** A fraction: 0.19 or 0.07, or 0 where no VAT is charged. */
-  vatRate: number;
-}
-
-export interface Invoice {
-  id: string;
-  supplier: string;
-  costCentre: string;
-  received: number;
-  due: number;
-  status: "awaiting approval" | "approved" | "paid" | "rejected";
-  lines: readonly InvoiceLine[];
-}
-
-export const INVOICES: readonly Invoice[] = [
-  {
-    id: "INV-26-0318", supplier: "Brandlow Office Supply", costCentre: "CC-4400", received: on(3, 16), due: on(4, 15), status: "awaiting approval",
-    lines: [
-      { description: "Desk lamps, LED", quantity: 24, unitPrice: 48.9, discount: 0.1, vatRate: 0.19 },
-      { description: "Printer paper, box of 5 reams", quantity: 40, unitPrice: 21.5, discount: 0, vatRate: 0.19 },
-      { description: "Delivery", quantity: 1, unitPrice: 35, discount: 0, vatRate: 0.19 },
-    ],
-  },
-  {
-    id: "INV-26-0317", supplier: "Kettering & Shaw Events", costCentre: "CC-1200", received: on(3, 13), due: on(4, 12), status: "awaiting approval",
-    lines: [
-      { description: "Trade fair stand, 3 days", quantity: 1, unitPrice: 12_400, discount: 0.05, vatRate: 0.19 },
-      { description: "Catering, per guest", quantity: 180, unitPrice: 18.5, discount: 0, vatRate: 0.07 },
-    ],
-  },
-  {
-    id: "INV-26-0309", supplier: "Nimbrel Software", costCentre: "CC-4300", received: on(3, 9), due: on(4, 8), status: "approved",
-    lines: [
-      { description: "Design tool licences, annual", quantity: 12, unitPrice: 540, discount: 0.15, vatRate: 0.19 },
-      { description: "Onboarding session", quantity: 2, unitPrice: 890, discount: 0, vatRate: 0.19 },
-    ],
-  },
-  {
-    id: "INV-26-0302", supplier: "Fenwright Legal", costCentre: "CC-4100", received: on(3, 2), due: on(3, 16), status: "paid",
-    lines: [{ description: "Contract review, hours", quantity: 14.5, unitPrice: 260, discount: 0, vatRate: 0.19 }],
-  },
-  {
-    id: "INV-26-0226", supplier: "Corrin Travel", costCentre: "CC-1100", received: on(2, 26), due: on(3, 12), status: "paid",
-    lines: [
-      { description: "Rail tickets, sales conference", quantity: 22, unitPrice: 139, discount: 0, vatRate: 0.07 },
-      { description: "Hotel, nights", quantity: 44, unitPrice: 112, discount: 0.08, vatRate: 0.07 },
-    ],
-  },
-  {
-    id: "INV-26-0221", supplier: "Stellbrook Consulting", costCentre: "CC-2100", received: on(2, 21), due: on(3, 23), status: "rejected",
-    lines: [{ description: "Architecture review, days", quantity: 6, unitPrice: 1450, discount: 0, vatRate: 0 }],
-  },
-];
-
-export interface Approval {
-  invoice: string;
-  step: "cost centre" | "finance";
-  approver: string;
-  decision: "approved" | "rejected" | "pending";
-  at?: number;
-  comment?: string;
-}
-
-/** Two signatures an invoice needs: its cost centre's owner, then finance. */
-export const APPROVALS: readonly Approval[] = [
-  { invoice: "INV-26-0318", step: "cost centre", approver: "Olga Ivanova", decision: "pending" },
-  { invoice: "INV-26-0317", step: "cost centre", approver: "Rafael Ortiz", decision: "approved", at: on(3, 16) },
-  { invoice: "INV-26-0317", step: "finance", approver: "Martina Vogel", decision: "pending" },
-  { invoice: "INV-26-0309", step: "cost centre", approver: "Kenji Arai", decision: "approved", at: on(3, 10) },
-  { invoice: "INV-26-0309", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 11) },
-  { invoice: "INV-26-0302", step: "cost centre", approver: "Martina Vogel", decision: "approved", at: on(3, 3) },
-  { invoice: "INV-26-0302", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 3) },
-  { invoice: "INV-26-0226", step: "cost centre", approver: "Helen Marsh", decision: "approved", at: on(2, 27) },
-  { invoice: "INV-26-0226", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 2) },
-  { invoice: "INV-26-0221", step: "cost centre", approver: "Anika Sørensen", decision: "rejected", at: on(2, 24), comment: "Not ordered - the review was cancelled in January." },
-];
-
-export interface Team {
-  /** The cost centre the team books to. */
-  costCentre: string;
-  name: string;
-  /** People employed, whatever their hours. */
-  headcount: number;
-  /** Full-time equivalents: contracted hours over 40 a week. */
-  fte: number;
-  /** Staff cost of a month, in thousand euros. */
-  monthlyCost: number;
-}
-
-/** Every team, on 17 March: 102 people, 91.5 full-time equivalents. */
-export const TEAMS: readonly Team[] = [
-  { costCentre: "CC-1100", name: "Field sales North", headcount: 9, fte: 8.6, monthlyCost: 61.2 },
-  { costCentre: "CC-1100", name: "Field sales South", headcount: 8, fte: 7.5, monthlyCost: 53.9 },
-  { costCentre: "CC-1100", name: "Inside sales", headcount: 6, fte: 5.2, monthlyCost: 29.8 },
-  { costCentre: "CC-1100", name: "Key accounts", headcount: 4, fte: 4.0, monthlyCost: 33.6 },
-  { costCentre: "CC-1200", name: "Brand", headcount: 3, fte: 2.8, monthlyCost: 19.4 },
-  { costCentre: "CC-1200", name: "Online marketing", headcount: 4, fte: 3.5, monthlyCost: 24.1 },
-  { costCentre: "CC-1200", name: "Trade fairs", headcount: 2, fte: 1.5, monthlyCost: 10.2 },
-  { costCentre: "CC-3100", name: "Service desk", headcount: 7, fte: 5.9, monthlyCost: 31.3 },
-  { costCentre: "CC-3100", name: "Returns", headcount: 3, fte: 2.5, monthlyCost: 12.6 },
-  { costCentre: "CC-2100", name: "Seating", headcount: 6, fte: 5.8, monthlyCost: 43.5 },
-  { costCentre: "CC-2100", name: "Desks", headcount: 7, fte: 6.5, monthlyCost: 48.1 },
-  { costCentre: "CC-2100", name: "Storage", headcount: 5, fte: 4.6, monthlyCost: 33.9 },
-  { costCentre: "CC-2100", name: "Test lab", headcount: 3, fte: 2.5, monthlyCost: 16.8 },
-  { costCentre: "CC-2200", name: "Industrial design", headcount: 4, fte: 3.6, monthlyCost: 27.2 },
-  { costCentre: "CC-2200", name: "Colour and material", headcount: 2, fte: 1.8, monthlyCost: 12.9 },
-  { costCentre: "CC-4100", name: "Accounting", headcount: 5, fte: 4.4, monthlyCost: 27.5 },
-  { costCentre: "CC-4100", name: "Controlling", headcount: 3, fte: 3.0, monthlyCost: 21.3 },
-  { costCentre: "CC-4200", name: "Recruiting", headcount: 2, fte: 1.8, monthlyCost: 12.4 },
-  { costCentre: "CC-4200", name: "Payroll", headcount: 2, fte: 1.5, monthlyCost: 9.6 },
-  { costCentre: "CC-4300", name: "Workplace", headcount: 4, fte: 3.8, monthlyCost: 24.2 },
-  { costCentre: "CC-4300", name: "Applications", headcount: 5, fte: 4.5, monthlyCost: 34.8 },
-  { costCentre: "CC-4400", name: "Buildings", headcount: 3, fte: 3.0, monthlyCost: 16.9 },
-  { costCentre: "CC-4400", name: "Canteen", headcount: 5, fte: 3.2, monthlyCost: 14.7 },
-];
-
-export interface BusinessLine {
-  name: string;
-  /** Its cost centres, in the order a report lists them. */
-  costCentres: readonly string[];
-}
-
-/** How the company reports: three business lines over the nine cost centres. */
-export const BUSINESS_LINES: readonly BusinessLine[] = [
-  { name: "Commercial", costCentres: ["CC-1100", "CC-1200", "CC-3100"] },
-  { name: "Product", costCentres: ["CC-2100", "CC-2200"] },
-  { name: "Corporate services", costCentres: ["CC-4100", "CC-4200", "CC-4300", "CC-4400"] },
-];
-```
-
-### `logistics.ts`
-
-```ts
-/**
- * The logistics world: Ferrow Parcel, a regional parcel carrier with three
- * depots.
- *
- * The standing cast:
- * - `DEPOTS`, `VEHICLES` (plate, type, payload, depot) and `DRIVERS`;
- * - `TOURS` - today's eight delivery tours, each with its vehicle, driver,
- *   start, end, distance and stops; a stop has a delivery window and the
- *   planned arrival, and a few arrive outside their window;
- * - `SHIPMENTS` - one per stop, with customer, weight, status and window;
- * - `VEHICLE_STATES` and `vehicleDay(vehicle)` - what a vehicle did through
- *   the day, quarter hour by quarter hour, for a state band;
- * - `COST_RATES` - what a kilometre, an hour and a vehicle day cost, the
- *   inputs of a cost per tour.
- *
- * "Now" is Tuesday, 17 March 2026, 10:30 local time. Plain data and small pure
- * functions, no imports: copy the file beside an example and it runs.
- */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
-const MINUTE = 60_000;
-
-/** Tuesday, 17 March 2026, 10:30 - the moment the screens are read at. */
-export const NOW = at(10, 30);
-
-export const DEPOTS = [
-  { id: "north", name: "North depot" },
-  { id: "river", name: "Riverside depot" },
-  { id: "east", name: "East Gate depot" },
-] as const;
-
-export interface Vehicle {
-  id: string;
-  plate: string;
-  type: "van" | "e-van" | "truck";
-  /** Payload, in kg. */
-  capacity: number;
-  depot: string;
-}
-
-export const VEHICLES: readonly Vehicle[] = [
-  { id: "v1", plate: "FP 214 K", type: "van", capacity: 1200, depot: "north" },
-  { id: "v2", plate: "FP 377 K", type: "e-van", capacity: 900, depot: "north" },
-  { id: "v3", plate: "FP 118 R", type: "truck", capacity: 7500, depot: "north" },
-  { id: "v4", plate: "FP 402 R", type: "van", capacity: 1200, depot: "river" },
-  { id: "v5", plate: "FP 455 R", type: "e-van", capacity: 900, depot: "river" },
-  { id: "v6", plate: "FP 290 E", type: "van", capacity: 1200, depot: "east" },
-  { id: "v7", plate: "FP 311 E", type: "e-van", capacity: 900, depot: "east" },
-  { id: "v8", plate: "FP 520 E", type: "truck", capacity: 7500, depot: "east" },
-];
-
-export const DRIVERS = [
-  { id: "d1", name: "Martin Hale", depot: "north" },
-  { id: "d2", name: "Nadia Petrova", depot: "north" },
-  { id: "d3", name: "Owen Carter", depot: "north" },
-  { id: "d4", name: "Lucia Romero", depot: "river" },
-  { id: "d5", name: "Ben Adeyemi", depot: "river" },
-  { id: "d6", name: "Hanna Berg", depot: "east" },
-  { id: "d7", name: "Yusuf Demir", depot: "east" },
-  { id: "d8", name: "Clara Wendt", depot: "east" },
-] as const;
-
-const CUSTOMERS = [
-  "Holloway Garden Supplies",
-  "Marlow & Finch Books",
-  "Oakridge Pharmacy",
-  "Brixley Cycles",
-  "Tamsin's Bakery",
-  "Northfold Office",
-  "Pellham Hardware",
-  "Greywick Studio",
-  "Juniper Lane Florist",
-  "Ashcombe Dental",
-] as const;
-
-export interface Stop {
-  id: string;
-  shipment: string;
-  customer: string;
-  /** The window the customer was promised, `[from, to]`. */
-  window: readonly [number, number];
-  /** When the tour plans to be there. */
-  arrival: number;
-}
-
-export interface Tour {
-  id: string;
-  vehicle: string;
-  driver: string;
-  depot: string;
-  /** Leaves the depot, loaded; back at the depot. */
-  from: number;
-  to: number;
-  /** Minutes of loading before `from`. */
-  loading: number;
-  km: number;
-  stops: readonly Stop[];
-}
-
-/** One tour per vehicle. Stops every half hour or so, each with a two-hour
-    window; every seventh arrival misses its window - the late ones a
-    dispatcher looks for. */
-function tour(index: number): Tour {
-  const r = random(700 + index);
-  const vehicle = VEHICLES[index]!;
-  const truck = vehicle.type === "truck";
-  const from = at(truck ? 6 : 7, index % 2 === 0 ? 0 : 30);
-  const count = truck ? 5 : 8 + Math.floor(r() * 4);
-  const stops: Stop[] = [];
-  let arrival = from + (20 + Math.floor(r() * 15)) * MINUTE;
-  for (let i = 0; i < count; i++) {
-    const n = index * 20 + i;
-    const slot = Math.floor((arrival - at(0)) / (2 * 60 * MINUTE)) * 2;
-    /* A late stop's window closed half an hour or more before the arrival. */
-    const late = i >= 2 && n % 7 === 3;
-    const halfHour = 30 * MINUTE;
-    const windowFrom = late ? Math.floor(arrival / halfHour) * halfHour - 5 * halfHour : at(slot);
-    stops.push({
-      id: `s-${index + 1}-${i + 1}`,
-      shipment: `FP-${(1_004_210 + n * 13).toString()}`,
-      customer: CUSTOMERS[(n * 3) % CUSTOMERS.length]!,
-      window: [windowFrom, windowFrom + 2 * 60 * MINUTE],
-      arrival,
-    });
-    arrival += (truck ? 45 : 22) * MINUTE + Math.floor(r() * 18) * MINUTE;
-  }
-  return {
-    id: `T-${String(index + 1).padStart(2, "0")}`,
-    vehicle: vehicle.id,
-    driver: DRIVERS[index]!.id,
-    depot: vehicle.depot,
-    from,
-    to: arrival + 30 * MINUTE,
-    loading: truck ? 45 : 30,
-    km: Math.round((truck ? 140 : 70) + r() * 40),
-    stops,
-  };
-}
-
-export const TOURS: readonly Tour[] = VEHICLES.map((_, index) => tour(index));
-
-export interface Shipment {
-  id: string;
-  customer: string;
-  /** In kg. */
-  weight: number;
-  status: "delivered" | "out for delivery" | "failed attempt";
-  window: readonly [number, number];
-  tour: string;
-}
-
-/** One shipment per stop. Before now, delivered - or a failed attempt, where
-    nobody was in; after now, out for delivery. */
-export const SHIPMENTS: readonly Shipment[] = TOURS.flatMap((one) =>
-  one.stops.map((stop) => {
-    const n = Number(stop.shipment.slice(3));
-    return {
-      id: stop.shipment,
-      customer: stop.customer,
-      weight: Math.round((VEHICLES.find((v) => v.id === one.vehicle)!.type === "truck" ? 180 : 2) + ((n * 7919) % 230) / 10),
-      status: stop.arrival > NOW ? "out for delivery" : n % 11 === 0 ? "failed attempt" : "delivered",
-      window: stop.window,
-      tour: one.id,
-    } satisfies Shipment;
-  }),
-);
-
-/** The closed set of vehicle states. The order is the code. */
-export const VEHICLE_STATES = [
-  { label: "Driving", color: "#2f6fb4" },
-  { label: "Loading", color: "#c08a2e" },
-  { label: "Idle", color: "#8a8f98" },
-  { label: "Break", color: "#6b8e5a" },
-] as const;
-
-export interface StatePoint {
-  t: number;
-  /** A code in `VEHICLE_STATES`; `null` before the tour and after it. */
-  state: number | null;
-}
-
-/** What a vehicle did from 05:00 to 19:00, quarter hour by quarter hour:
-    loading before its tour, driving between stops, idle at them now and then,
-    and a break around noon. */
-export function vehicleDay(vehicleId: string): StatePoint[] {
-  const one = TOURS.find((t) => t.vehicle === vehicleId);
-  if (one === undefined) throw new Error(`No vehicle "${vehicleId}".`);
-  const r = random(900 + TOURS.indexOf(one));
-  const points: StatePoint[] = [];
-  for (let t = at(5); t <= at(19); t += 15 * MINUTE) {
-    let state: number | null = null;
-    if (t >= one.from - one.loading * MINUTE && t < one.from) state = 1;
-    else if (t >= one.from && t < one.to) state = t >= at(12) && t < at(12, 30) ? 3 : r() < 0.18 ? 2 : 0;
-    points.push({ t, state });
-  }
-  return points;
-}
-
-/** What a tour costs, per unit - the inputs of a cost per tour. */
-export const COST_RATES = {
-  /** Diesel, per litre; electricity, per kWh. */
-  dieselPerLitre: 1.68,
-  electricityPerKwh: 0.31,
-  /** Consumption per 100 km. */
-  per100Km: { van: 9.5, truck: 24, "e-van": 22 },
-  /** A driver's hour, all in. */
-  driverPerHour: 34.5,
-  /** Lease, insurance and upkeep, per day. */
-  vehiclePerDay: { van: 58, truck: 145, "e-van": 72 },
-} as const;
-
-/* ---------------------------------------------------------------------------
-   For @umriss-ui/charts: an e-van's battery, the North depot's week and
-   fortnight, the delays by cause and the parcels per depot and hour.
-   --------------------------------------------------------------------------- */
-
-const on = (month: number, day: number, hours = 0) => new Date(2026, month - 1, day, hours).getTime();
-const HOUR = 60 * MINUTE;
-
-export interface BatteryPoint {
-  t: number;
-  /** State of charge, in per cent; `null` before the tour and after it. */
-  charge: number | null;
-}
-
-/** An e-van's battery through the day, with `vehicleDay`'s quarter hours:
-    full when the tour leaves, draining while it drives, a little while it
-    idles, and topped up at the depot's charger over the noon break. */
-export function batteryDay(vehicleId: string): BatteryPoint[] {
-  let charge = 100;
-  return vehicleDay(vehicleId).map(({ t, state }) => {
-    if (state === null) return { t, charge: null };
-    const now = charge;
-    charge = Math.max(0, Math.min(100, charge + [-4.8, 0, -0.6, 3][state]!));
-    return { t, charge: Math.round(now * 10) / 10 };
-  });
-}
-
-/** The North depot's sorting hours: Monday to Friday, 06:00 to 22:00. */
-export const SORTING_HOURS = Array.from({ length: 5 }, (_, day) => ({ from: on(3, 9 + day, 6), to: on(3, 9 + day, 22) }));
-
-export interface SortedPoint {
-  t: number;
-  /** Parcels sorted per hour. */
-  parcels: number;
-}
-
-/** Last week's sorting at the North depot, quarter hour by quarter hour -
-    only in its sorting hours. */
-export const SORTED: readonly SortedPoint[] = (() => {
-  const r = random(1963);
-  const points: SortedPoint[] = [];
-  let parcels = 420;
-  for (const { from } of SORTING_HOURS) {
-    for (let quarter = 0; quarter < 4 * 16; quarter++) {
-      parcels += (r() - 0.5) * 26;
-      points.push({ t: from + quarter * 15 * MINUTE, parcels: Math.round(parcels) });
-    }
-  }
-  return points;
-})();
-
-export interface DepotDay {
-  /** Day of March. */
-  day: number;
-  /** Pallets that arrived, and that left on the tours. */
-  arrived: number;
-  dispatched: number;
-  /** Pallets on hand at the end of the day. */
-  onHand: number;
-  /** The range the stock is meant to stay in; `null` while it was reset
-      after the stocktake. */
-  targetLow: number | null;
-  targetHigh: number | null;
-  /** A pallet count by hand - it never quite agrees with the books. */
-  counted: number;
-}
-
-/** The North depot's last fourteen days, 2 to 15 March. */
-export const DEPOT_DAYS: readonly DepotDay[] = (() => {
-  const r = random(2026);
-  let onHand = 62;
-  return Array.from({ length: 14 }, (_, i) => {
-    const arrived = 30 + r() * 25;
-    const dispatched = 22 + r() * 20;
-    onHand += (arrived - dispatched) * 0.35;
-    const reset = i >= 6 && i <= 8;
-    return {
-      day: i + 2,
-      arrived: Math.round(arrived),
-      dispatched: Math.round(dispatched),
-      onHand: Math.round(onHand),
-      targetLow: reset ? null : Math.round(onHand - 9 - r() * 3),
-      targetHigh: reset ? null : Math.round(onHand + 9 + r() * 3),
-      counted: Math.round(onHand + (r() - 0.5) * 26),
-    };
-  });
-})();
-
-export interface DayDelays {
-  /** The position on the x axis: the working day's index. */
-  day: number;
-  name: string;
-  /** Minutes late across all tours, by cause; `null` where it was not logged. */
-  traffic: number;
-  loading: number | null;
-  access: number;
-}
-
-/** Two working weeks, 2 to 13 March. On the first Wednesday the loading log
-    was not kept - a gap, not a zero - and on the second Thursday a closed
-    bridge takes the day. */
-export const DELAYS: readonly DayDelays[] = (() => {
-  const r = random(1204);
-  const names = ["Mon", "Tue", "Wed", "Thu", "Fri"];
-  return Array.from({ length: 10 }, (_, day) => ({
-    day,
-    name: `${names[day % 5]} ${2 + day + 2 * Math.floor(day / 5)}`,
-    traffic: Math.round((day === 8 ? 150 : 40) + r() * 30),
-    loading: day === 2 ? null : Math.round(10 + r() * 45),
-    access: Math.round(5 + r() * 25),
-  }));
-})();
-
-export interface DepotHour {
-  t: number;
-  /** Parcels loaded per hour at each depot. */
-  north: number;
-  river: number;
-  east: number;
-}
-
-/** Monday 06:00 to Tuesday 06:00, hour by hour. East Gate closes at night and
-    loads nothing - 0, not nothing. */
-export const PARCELS_PER_HOUR: readonly DepotHour[] = (() => {
-  const r = random(906);
-  return Array.from({ length: 25 }, (_, i) => {
-    const hour = (6 + i) % 24;
-    const night = hour >= 22 || hour < 6;
-    return {
-      t: on(3, 16, 6) + i * HOUR,
-      north: Math.round(120 + r() * 30),
-      river: Math.round((night ? 60 : 90) + r() * 25),
-      east: night ? 0 : Math.round(70 + r() * 30),
-    };
-  });
-})();
-```
-
-### `operations.ts`
-
-```ts
-/**
- * The operations world: Quillmere, a platform on which small businesses take
- * online bookings, run as a set of services by six teams.
- *
- * The standing cast:
- * - `SERVICES` - eight services with their team, tier, latency objective and
- *   availability target;
- * - `ENGINEERS` - the people on call, and `ONCALL`, who is primary and
- *   secondary this week;
- * - `metrics(service)` - latency and error rate every five minutes of today up
- *   to now; Checkout has a bad half hour from 09:40;
- * - `INCIDENTS` - the last week's incidents, one of them still open;
- * - `ALERT_TYPES` and `ALERTS` - what the alert list shows at 10:30;
- * - `DOWNTIME_MINUTES` - each service's downtime this month, for its
- *   availability.
- *
- * "Now" is Tuesday, 17 March 2026, 10:30 local time. Plain data and small pure
- * functions, no imports: copy the file beside an example and it runs.
- */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-const at = (day: number, hours: number, minutes = 0) => new Date(2026, 2, day, hours, minutes).getTime();
-const MINUTE = 60_000;
-
-/** Tuesday, 17 March 2026, 10:30 - the moment the screens are read at. */
-export const NOW = at(17, 10, 30);
-
-export interface Service {
-  id: string;
-  name: string;
-  team: string;
-  /** 1 is customer-facing and pages at night; 3 waits for the morning. */
-  tier: 1 | 2 | 3;
-  /** The latency objective: the 95th percentile stays below this, in ms. */
-  latencySlo: number;
-  /** The availability promised for a month, in per cent. */
-  availabilityTarget: number;
-}
-
-export const SERVICES: readonly Service[] = [
-  { id: "checkout", name: "Checkout", team: "Payments", tier: 1, latencySlo: 300, availabilityTarget: 99.95 },
-  { id: "billing", name: "Billing", team: "Payments", tier: 1, latencySlo: 400, availabilityTarget: 99.9 },
-  { id: "sign-in", name: "Sign-in", team: "Identity", tier: 1, latencySlo: 200, availabilityTarget: 99.95 },
-  { id: "search", name: "Search", team: "Discovery", tier: 1, latencySlo: 250, availabilityTarget: 99.9 },
-  { id: "images", name: "Image service", team: "Discovery", tier: 2, latencySlo: 500, availabilityTarget: 99.5 },
-  { id: "notifications", name: "Notifications", team: "Messaging", tier: 2, latencySlo: 800, availabilityTarget: 99.5 },
-  { id: "webhooks", name: "Webhooks", team: "Integrations", tier: 2, latencySlo: 1000, availabilityTarget: 99.5 },
-  { id: "reports", name: "Reporting", team: "Insights", tier: 3, latencySlo: 2000, availabilityTarget: 99 },
-];
-
-export interface Engineer {
-  id: string;
-  name: string;
-  team: string;
-}
-
-export const ENGINEERS: readonly Engineer[] = [
-  { id: "priya", name: "Priya Raman", team: "Payments" },
-  { id: "jonas", name: "Jonas Keller", team: "Payments" },
-  { id: "ada", name: "Ada Mwangi", team: "Identity" },
-  { id: "tomasz", name: "Tomasz Nowak", team: "Discovery" },
-  { id: "leila", name: "Leila Haddad", team: "Discovery" },
-  { id: "sam", name: "Sam Okafor", team: "Messaging" },
-  { id: "ines", name: "Ines Duarte", team: "Integrations" },
-  { id: "felix", name: "Felix Brandt", team: "Insights" },
-];
-
-export interface OnCall {
-  id: string;
-  engineer: string;
-  rotation: "primary" | "secondary";
-  from: number;
-  to: number;
-}
-
-/** Monday 16 to Monday 23 March, handed over every morning at 09:00: the
-    secondary of one day is the primary of the next. */
-export const ONCALL: readonly OnCall[] = Array.from({ length: 7 }, (_, day) => [
-  { rotation: "primary" as const, engineer: ENGINEERS[day % ENGINEERS.length]!.id },
-  { rotation: "secondary" as const, engineer: ENGINEERS[(day + 1) % ENGINEERS.length]!.id },
-].map(({ rotation, engineer }) => ({
-  id: `${rotation}-${16 + day}`,
-  engineer,
-  rotation,
-  from: at(16 + day, 9),
-  to: at(17 + day, 9),
-}))).flat();
-
-export interface MetricPoint {
-  t: number;
-  /** Median and 95th percentile latency, in ms. */
-  p50: number;
-  p95: number;
-  /** Failed requests, in per cent. */
-  errorRate: number;
-  /** Requests per minute. */
-  requests: number;
-}
-
-/** Requests per minute at the busiest hour, by tier. */
-const VOLUME = { 1: 900, 2: 400, 3: 120 } as const;
-
-/** A service's latency and error rate every five minutes of today, from
-    midnight up to now. Busy by day, quiet at night; Checkout's 95th percentile
-    climbs well past its objective from 09:40 to 10:10, and its errors with it. */
-export function metrics(serviceId: string): MetricPoint[] {
-  const index = SERVICES.findIndex((one) => one.id === serviceId);
-  const service = SERVICES[index];
-  if (service === undefined) throw new Error(`No service "${serviceId}".`);
-  const r = random(1000 + index * 37);
-  const points: MetricPoint[] = [];
-  let drift = 0;
-  for (let t = at(17, 0); t <= NOW; t += 5 * MINUTE) {
-    const hour = (t - at(17, 0)) / (60 * MINUTE);
-    const load = 0.35 + 0.65 * Math.max(0, Math.sin((Math.PI * (hour - 5)) / 16));
-    drift = 0.8 * drift + (r() - 0.5) * 0.08;
-    const base = service.latencySlo * (0.45 + 0.2 * load + drift);
-    const surge = serviceId === "checkout" && t >= at(17, 9, 40) && t < at(17, 10, 10) ? 1.9 : 1;
-    const p95 = Math.round(base * surge * (1 + r() * 0.08));
-    points.push({
-      t,
-      p50: Math.round(p95 * (0.42 + r() * 0.06)),
-      p95,
-      errorRate: Math.round((0.05 + r() * 0.12 + (surge > 1 ? 2.4 + r() : 0)) * 100) / 100,
-      requests: Math.round(VOLUME[service.tier] * load * (1 + (r() - 0.5) * 0.1)),
-    });
-  }
-  return points;
-}
-
-export interface Incident {
-  id: string;
-  title: string;
-  service: string;
-  severity: "SEV1" | "SEV2" | "SEV3";
-  opened: number;
-  acknowledged?: number;
-  resolved?: number;
-  /** An engineer's id. */
-  assignee: string;
-}
-
-export const INCIDENTS: readonly Incident[] = [
-  { id: "INC-1048", title: "Checkout slow, card payments time out", service: "checkout", severity: "SEV1", opened: at(17, 9, 42), acknowledged: at(17, 9, 46), assignee: "jonas" },
-  { id: "INC-1047", title: "Webhook deliveries delayed", service: "webhooks", severity: "SEV3", opened: at(17, 7, 15), acknowledged: at(17, 8, 2), assignee: "ines" },
-  { id: "INC-1046", title: "Thumbnails missing for new uploads", service: "images", severity: "SEV2", opened: at(16, 22, 5), acknowledged: at(16, 22, 11), resolved: at(17, 0, 40), assignee: "tomasz" },
-  { id: "INC-1045", title: "Sign-in codes arrive late", service: "sign-in", severity: "SEV2", opened: at(16, 14, 20), acknowledged: at(16, 14, 24), resolved: at(16, 15, 5), assignee: "ada" },
-  { id: "INC-1044", title: "Monthly report export fails", service: "reports", severity: "SEV3", opened: at(15, 10, 0), acknowledged: at(16, 9, 12), resolved: at(16, 11, 30), assignee: "felix" },
-  { id: "INC-1043", title: "Search returns no results for some regions", service: "search", severity: "SEV1", opened: at(14, 18, 30), acknowledged: at(14, 18, 33), resolved: at(14, 19, 55), assignee: "leila" },
-  { id: "INC-1042", title: "Duplicate reminder e-mails", service: "notifications", severity: "SEV3", opened: at(13, 8, 45), acknowledged: at(13, 9, 30), resolved: at(13, 13, 0), assignee: "sam" },
-  { id: "INC-1041", title: "Invoices generated twice", service: "billing", severity: "SEV2", opened: at(12, 16, 10), acknowledged: at(12, 16, 18), resolved: at(12, 18, 40), assignee: "priya" },
-];
-
-/** A kind of alert, shaped as `@umriss-ui/table`'s alarm list reads it. */
-export interface AlertType {
-  id: string;
-  label: string;
-  priority: "high" | "medium" | "low";
-}
-
-export const ALERT_TYPES: readonly AlertType[] = [
-  { id: "checkout-latency", label: "Checkout · p95 latency above 300 ms", priority: "high" },
-  { id: "checkout-errors", label: "Checkout · error rate above 2\u00a0%", priority: "high" },
-  { id: "webhooks-queue", label: "Webhooks · queue older than 5 min", priority: "medium" },
-  { id: "search-latency", label: "Search · p95 latency above 250 ms", priority: "medium" },
-  { id: "images-disk", label: "Image service · disk 85 % full", priority: "low" },
-  { id: "reports-job", label: "Reporting · nightly job late", priority: "low" },
-];
-
-/** One alert, shaped as `@umriss-ui/table`'s alarm list reads it. */
-export type Alert = {
-  id: string;
-  type: string;
-  lifecycle: "active-unacknowledged" | "active-acknowledged" | "resolved-unacknowledged" | "resolved-acknowledged";
-  raised: number;
-  resolved?: number;
-  acknowledgedAt?: number;
-} & (
-  | { availability?: "in-service" | "suppressed" | "disabled"; snooze?: undefined }
-  | { availability: "snoozed"; snooze: { until: number; by: string } }
-);
-
-/** The alerts as they stand at 10:30. */
-export const ALERTS: readonly Alert[] = [
-  { id: "a-1", type: "checkout-latency", lifecycle: "active-acknowledged", raised: at(17, 9, 41), acknowledgedAt: at(17, 9, 46) },
-  { id: "a-2", type: "checkout-errors", lifecycle: "resolved-unacknowledged", raised: at(17, 9, 43), resolved: at(17, 10, 11) },
-  { id: "a-3", type: "webhooks-queue", lifecycle: "active-acknowledged", raised: at(17, 7, 12), acknowledgedAt: at(17, 8, 2) },
-  { id: "a-4", type: "search-latency", lifecycle: "active-unacknowledged", raised: at(17, 10, 24) },
-  { id: "a-5", type: "search-latency", lifecycle: "resolved-acknowledged", raised: at(17, 8, 5), resolved: at(17, 8, 9), acknowledgedAt: at(17, 8, 6) },
-  { id: "a-6", type: "images-disk", lifecycle: "active-unacknowledged", raised: at(17, 6, 0), availability: "snoozed", snooze: { until: at(17, 14), by: "Tomasz Nowak" } },
-  { id: "a-7", type: "reports-job", lifecycle: "active-unacknowledged", raised: at(17, 4, 30), availability: "disabled" },
-];
-
-/** The month so far: 1 March 00:00 to now, in minutes. */
-export const MONTH_MINUTES = (NOW - at(1, 0)) / MINUTE;
-
-/** Minutes each service was down this month. With `MONTH_MINUTES` and the
-    service's target, what an availability is worked out from. */
-export const DOWNTIME_MINUTES: Readonly<Record<string, number>> = {
-  checkout: 34,
-  billing: 18,
-  "sign-in": 41,
-  search: 85,
-  images: 120,
-  notifications: 12,
-  webhooks: 210,
-  reports: 95,
-};
-
-/* ---------------------------------------------------------------------------
-   For @umriss-ui/charts: last week at any resolution, a load test, single
-   traced requests, the autoscaler's log, the expected range and yesterday's
-   success rates.
-   --------------------------------------------------------------------------- */
-
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-
-/** Monday, 9 March 2026, 00:00 - the start of last week. */
-export const LAST_WEEK = at(9, 0);
-
-/** Search returned nothing for some regions (INC-1043): Saturday, 18:30 to 19:55. */
-const SEARCH_OUTAGE = [at(14, 18, 30) - LAST_WEEK, at(14, 19, 55) - LAST_WEEK] as const;
-
-/** A service's last week, Monday to Monday, one point every `step`
-    milliseconds: busy by day, quieter at the weekend. During INC-1043 Search's
-    95th percentile more than doubles and its errors climb. The hour is counted,
-    not asked of a Date - a week of seconds is 604,800 points. */
-export function week(serviceId: string, step: number): MetricPoint[] {
-  const index = SERVICES.findIndex((one) => one.id === serviceId);
-  const service = SERVICES[index];
-  if (service === undefined) throw new Error(`No service "${serviceId}".`);
-  const r = random(2000 + index * 37);
-  const n = Math.floor((7 * DAY) / step);
-  const points = new Array<MetricPoint>(n);
-  /* The drift wanders at the same pace whatever the step. */
-  const keep = Math.pow(0.8, step / (5 * MINUTE));
-  const kick = 0.08 * Math.sqrt(1 - keep * keep) / 0.6;
-  let drift = 0;
-  for (let i = 0; i < n; i++) {
-    const offset = i * step;
-    const day = Math.floor(offset / DAY);
-    const hour = (offset % DAY) / HOUR;
-    const load = (day >= 5 ? 0.85 : 1) * (0.35 + 0.65 * Math.max(0, Math.sin((Math.PI * (hour - 5)) / 16)));
-    drift = keep * drift + (r() - 0.5) * kick;
-    const outage = serviceId === "search" && offset >= SEARCH_OUTAGE[0] && offset < SEARCH_OUTAGE[1];
-    const p95 = Math.round(service.latencySlo * (0.45 + 0.2 * load + drift) * (outage ? 2.3 : 1) * (1 + r() * 0.08));
-    points[i] = {
-      t: LAST_WEEK + offset,
-      p50: Math.round(p95 * (0.42 + r() * 0.06)),
-      p95,
-      errorRate: Math.round((0.05 + r() * 0.12 + (outage ? 3 : 0)) * 100) / 100,
-      requests: Math.round(VOLUME[service.tier] * load * (1 + (r() - 0.5) * 0.1)),
-    };
-  }
-  return points;
-}
-
-/** When this morning's load test of Search began. */
-export interface LoadTestPoint {
-  /** Minutes since the test began. */
-  minute: number;
-  /** CPU load of the busiest node, in per cent. */
-  cpu: number;
-  requestsPerHour: number;
-  /** 95th percentile latency, in ms. */
-  p95: number;
-}
-
-/** An hour of load test, minute by minute: three magnitudes far apart. */
-export const LOAD_TEST: readonly LoadTestPoint[] = (() => {
-  const r = random(99);
-  let cpu = 21;
-  let requestsPerHour = 128_000;
-  let p95 = 640;
-  return Array.from({ length: 60 }, (_, minute) => {
-    cpu += (r() - 0.5) * 0.9;
-    requestsPerHour += (r() - 0.5) * 9000;
-    p95 += (r() - 0.5) * 40;
-    return { minute, cpu, requestsPerHour, p95 };
-  });
-})();
-
-export interface Trace {
-  t: number;
-  /** How long the request took, end to end, in ms. */
-  ms: number;
-}
-
-/** Single Checkout requests traced end to end this morning, one every few
-    minutes from 06:00 - individual measurements, nothing in between. Slow
-    during the bad half hour, and now and then on their own. */
-export const TRACES: readonly Trace[] = (() => {
-  const r = random(4040);
-  const traces: Trace[] = [];
-  for (let t = at(17, 6, 2); t <= NOW; t += Math.round(1 + r() * 4) * MINUTE) {
-    const bad = t >= at(17, 9, 40) && t < at(17, 10, 10);
-    const ms = 150 + r() * 90 + (bad ? 110 + r() * 120 : r() < 0.05 ? 150 : 0);
-    traces.push({ t, ms: Math.round(ms) });
-  }
-  return traces;
-})();
-
-export interface ReplicaChange {
-  t: number;
-  /** Checkout's instances from here on; `null` while the autoscaler was paused. */
-  replicas: number | null;
-}
-
-/** Checkout's instances today, logged only when the autoscaler changes them.
-    It was paused for a database upgrade from 03:00 to 04:00; the last entry,
-    at now, closes the hold. */
-export const REPLICAS: readonly ReplicaChange[] = [
-  { t: at(17, 0), replicas: 4 },
-  { t: at(17, 3), replicas: null },
-  { t: at(17, 4), replicas: 3 },
-  { t: at(17, 6, 30), replicas: 5 },
-  { t: at(17, 8), replicas: 8 },
-  { t: at(17, 9, 45), replicas: 12 },
-  { t: at(17, 10, 15), replicas: 9 },
-  { t: NOW, replicas: 9 },
-];
-
-export interface ExpectedPoint {
-  t: number;
-  /** The range the requests per minute are expected in; `null` where the
-      job that computes it did not run. */
-  low: number | null;
-  high: number | null;
-}
-
-/** The range a service's requests per minute are expected in today, every
-    five minutes - the day's usual curve, give or take 15 %. The job that
-    computes it skipped 03:00 to 04:00. */
-export function expected(serviceId: string): ExpectedPoint[] {
-  const service = SERVICES.find((one) => one.id === serviceId);
-  if (service === undefined) throw new Error(`No service "${serviceId}".`);
-  const points: ExpectedPoint[] = [];
-  for (let t = at(17, 0); t <= NOW; t += 5 * MINUTE) {
-    const hour = (t - at(17, 0)) / HOUR;
-    const usual = VOLUME[service.tier] * (0.35 + 0.65 * Math.max(0, Math.sin((Math.PI * (hour - 5)) / 16)));
-    const skipped = hour >= 3 && hour < 4;
-    points.push({ t, low: skipped ? null : Math.round(usual * 0.85), high: skipped ? null : Math.round(usual * 1.15) });
-  }
-  return points;
-}
-
-export interface SuccessCell {
-  hour: number;
-  /** The row: the service's place in `SERVICES`. */
-  service: number;
-  /** Requests that succeeded, in per cent; `null` where there were none. */
-  success: number | null;
-}
-
-/** Yesterday, per service and hour: the share of requests that succeeded.
-    Webhooks has a bad late morning, 03:00 is bad everywhere (a DNS change),
-    and Reporting takes no requests before 06:00 - no requests, no share. */
-export const SUCCESS_BY_HOUR: readonly SuccessCell[] = (() => {
-  const r = random(23);
-  const cells: SuccessCell[] = [];
-  SERVICES.forEach((one, service) => {
-    for (let hour = 0; hour < 24; hour++) {
-      let success: number | null = 99.2 + r() * 0.8;
-      if (one.id === "webhooks" && hour >= 9 && hour < 14) success = 96 + r() * 1.5;
-      if (hour === 3) success = 97.4 + r() * 1;
-      if (one.id === "reports" && hour < 6) success = null;
-      cells.push({ hour, service, success: success === null ? null : Math.round(success * 100) / 100 });
-    }
-  });
-  return cells;
-})();
-```
-
-### `planning.ts`
-
-```ts
-/**
- * The planning world: Tidewell, a small studio that builds web and mobile
- * apps for its clients, in two teams.
- *
- * The standing cast:
- * - `PEOPLE` - ten people with their role, team and weekly capacity in hours;
- * - `PROJECTS` - four client projects, each with a colour;
- * - `SPRINTS` - two-week sprints; sprint 14 runs now, 9 to 20 March;
- * - `WORK` - the current sprint's work items with an estimate and a status,
- *   placed on a person over time; structurally a `Subtask` of
- *   `@umriss-ui/schedule` (`task` is the project, `lane` the person);
- * - `LEAVE` - holidays, sick days and training, to become blocked time;
- * - `BURNDOWN` - sprint 14's remaining hours at the end of each working day,
- *   up to yesterday.
- *
- * "Now" is Tuesday, 17 March 2026, 10:30 local time. Plain data and small pure
- * functions, no imports: copy the file beside an example and it runs.
- */
-
-const at = (day: number, hours = 9, minutes = 0) => new Date(2026, 2, day, hours, minutes).getTime();
-
-/** Tuesday, 17 March 2026, 10:30 - the moment the screens are read at. */
-export const NOW = at(17, 10, 30);
-
-export interface Person {
-  id: string;
-  name: string;
-  role: "Developer" | "Designer" | "Product manager" | "QA engineer";
-  team: "Web" | "Apps";
-  /** Hours a week they can be planned for. */
-  capacity: number;
-}
-
-export const PEOPLE: readonly Person[] = [
-  { id: "maya", name: "Maya Lindgren", role: "Product manager", team: "Web", capacity: 32 },
-  { id: "arjun", name: "Arjun Mehta", role: "Developer", team: "Web", capacity: 40 },
-  { id: "chloe", name: "Chloe Durand", role: "Developer", team: "Web", capacity: 40 },
-  { id: "noah", name: "Noah Fischer", role: "Designer", team: "Web", capacity: 24 },
-  { id: "eva", name: "Eva Novak", role: "QA engineer", team: "Web", capacity: 40 },
-  { id: "luis", name: "Luis Moreno", role: "Product manager", team: "Apps", capacity: 40 },
-  { id: "hana", name: "Hana Sato", role: "Developer", team: "Apps", capacity: 40 },
-  { id: "kofi", name: "Kofi Mensah", role: "Developer", team: "Apps", capacity: 32 },
-  { id: "freya", name: "Freya Olsen", role: "Designer", team: "Apps", capacity: 40 },
-  { id: "david", name: "David Kowalski", role: "QA engineer", team: "Apps", capacity: 20 },
-];
-
-/** A project, shaped as `@umriss-ui/schedule`'s `Task`: an id, a name and a
-    colour in both schemes. */
-export interface Project {
-  id: string;
-  name: string;
-  client: string;
-  color: string;
-}
-
-export const PROJECTS: readonly Project[] = [
-  { id: "shop", name: "Online shop relaunch", client: "Pembury Home", color: "light-dark(#2563eb, #6b9bff)" },
-  { id: "booking", name: "Booking app", client: "Saltmarsh Clinics", color: "light-dark(#0d9488, #3cc7b8)" },
-  { id: "portal", name: "Member portal", client: "Rowan Credit Union", color: "light-dark(#7c3aed, #a98bfa)" },
-  { id: "intranet", name: "Intranet", client: "Tidewell (internal)", color: "light-dark(#c2410c, #f08a52)" },
-];
-
-export interface Sprint {
-  id: string;
-  name: string;
-  from: number;
-  to: number;
-  goal: string;
-}
-
-/** Two weeks each, Monday 09:00 to the second Friday 17:00. */
-export const SPRINTS: readonly Sprint[] = [
-  { name: "Sprint 12", day: 9 - 28, goal: "Shop checkout on the new design" },
-  { name: "Sprint 13", day: 9 - 14, goal: "Booking app in the stores' beta" },
-  { name: "Sprint 14", day: 9, goal: "Member portal sign-in and profile" },
-  { name: "Sprint 15", day: 23, goal: "Shop search and filters" },
-  { name: "Sprint 16", day: 37, goal: "Booking reminders" },
-].map(({ name, day, goal }) => ({ id: name.toLowerCase().replace(" ", "-"), name, from: at(day), to: at(day + 11, 17), goal }));
-
-/** A work item, shaped as `@umriss-ui/schedule`'s `Subtask`. */
-export interface WorkItem {
-  id: string;
-  /** The project. */
-  task: string;
-  /** The person. */
-  lane: string;
-  from: number;
-  to: number;
-  name: string;
-  sprint: string;
-  /** Hours, as estimated at planning. */
-  estimate: number;
-  status: "to do" | "in progress" | "in review" | "done";
-}
-
-const item = (id: string, task: string, lane: string, from: number, to: number, name: string, estimate: number, status: WorkItem["status"]): WorkItem =>
-  ({ id, task, lane, from, to, name, sprint: "sprint-14", estimate, status });
-
-export const WORK: readonly WorkItem[] = [
-  item("w-101", "portal", "arjun", at(9), at(11, 17), "Sign-in with e-mail code", 18, "done"),
-  item("w-102", "portal", "arjun", at(12), at(17, 17), "Profile page", 26, "in progress"),
-  item("w-103", "portal", "chloe", at(9), at(10, 17), "Session handling", 12, "done"),
-  item("w-104", "shop", "chloe", at(11), at(13, 17), "Basket keeps items across devices", 20, "in review"),
-  item("w-105", "portal", "chloe", at(16), at(19, 17), "Change of address form", 24, "in progress"),
-  item("w-106", "portal", "noah", at(9), at(12, 13), "Profile page design", 14, "done"),
-  item("w-107", "shop", "noah", at(16), at(18, 17), "Search results layout", 12, "to do"),
-  item("w-108", "portal", "eva", at(12), at(13, 17), "Test plan for sign-in", 10, "done"),
-  item("w-109", "portal", "eva", at(17), at(20, 17), "Regression run", 20, "to do"),
-  item("w-110", "booking", "hana", at(9), at(13, 17), "Reminder scheduling service", 32, "done"),
-  item("w-111", "booking", "hana", at(16), at(20, 17), "Push notifications", 30, "in progress"),
-  item("w-112", "booking", "kofi", at(10), at(12, 17), "Calendar sync", 18, "done"),
-  item("w-113", "intranet", "kofi", at(16), at(18, 17), "News feed", 16, "in progress"),
-  item("w-114", "booking", "freya", at(9), at(11, 17), "Reminder settings screen", 16, "done"),
-  item("w-115", "booking", "freya", at(18), at(20, 17), "Store screenshots", 12, "to do"),
-  item("w-116", "booking", "david", at(16), at(19, 13), "Device test matrix", 14, "to do"),
-];
-
-export interface Leave {
-  id: string;
-  person: string;
-  from: number;
-  to: number;
-  reason: "Holiday" | "Sick" | "Training";
-}
-
-/** When people are away: blocked time on their lane. */
-export const LEAVE: readonly Leave[] = [
-  { id: "l-1", person: "noah", from: at(13, 0, 0), to: at(14, 0, 0), reason: "Sick" },
-  { id: "l-2", person: "arjun", from: at(18, 0, 0), to: at(21, 0, 0), reason: "Holiday" },
-  { id: "l-3", person: "kofi", from: at(13, 0, 0), to: at(14, 0, 0), reason: "Training" },
-  { id: "l-4", person: "freya", from: at(16, 0, 0), to: at(18, 0, 0), reason: "Holiday" },
-  { id: "l-5", person: "david", from: at(9, 0, 0), to: at(14, 0, 0), reason: "Holiday" },
-  { id: "l-6", person: "maya", from: at(19, 13, 0), to: at(20, 17, 0), reason: "Training" },
-];
-
-export interface BurndownPoint {
-  /** The working day, at 17:00. */
-  t: number;
-  /** Where the line would be, burning evenly. */
-  ideal: number;
-  /** Hours left, `null` for the days still to come. */
-  remaining: number | null;
-}
-
-/** Sprint 14's ten working days. The team fell behind in the first week, when
-    two were away, and is catching up. */
-export const BURNDOWN: readonly BurndownPoint[] = (() => {
-  const total = WORK.reduce((sum, one) => sum + one.estimate, 0);
-  const days = [9, 10, 11, 12, 13, 16, 17, 18, 19, 20];
-  const burnt = [0, 22, 38, 60, 71, 98];
-  return days.map((day, i) => ({
-    t: at(day, 17),
-    ideal: Math.round(total * (1 - i / (days.length - 1))),
-    remaining: burnt[i] === undefined ? null : total - burnt[i]!,
-  }));
-})();
-```
-
-### `plant.ts`
-
-```ts
-/**
- * The plant world: Brenholt Tile Works, a tile maker with one kiln line, and the
- * machine shop next door.
- *
- * The standing cast:
- * - the kiln line - press, dryer D1 and kiln K1 - over one early shift, minute
- *   by minute: readings, samples, batches and the alarms they raise (`plant`);
- * - the machine shop's plan for Tuesday, 17 March 2026: seven stations, six
- *   orders, their steps and the dependencies between them (`STATIONS`,
- *   `ORDERS`, `STEPS`, `MOVES`).
- *
- * Plain data and small pure functions, no imports: copy the file beside an
- * example and it runs. Seeded, so the same seed gives the same numbers on
- * every machine; nothing here reads a clock.
- */
-
-/* The few shapes the umriss packages expect, written out so this file needs
-   no import. The data is structurally what the packages take. */
-
-/** A limit set as `@umriss-ui/core` reads it. */
-interface LimitSet {
-  target?: number;
-  limits?: readonly { value: number; side: "upper" | "lower"; severity: "warning" | "alarm" }[];
-}
-
-/** An alarm's dead band, as `@umriss-ui/table` reads it. */
-interface ReturnBand {
-  direction: "upper" | "lower";
-  limit: number;
-  returnTo: number;
-}
-
-/** A kind of alarm, as `@umriss-ui/table` reads it. */
-interface AlarmType {
-  id: string;
-  label: string;
-  priority: "high" | "medium" | "low";
-  returnBand?: ReturnBand;
-}
-
-/** One alarm, as `@umriss-ui/table` reads it. */
-interface Alarm {
-  id: string;
-  type: string;
-  lifecycle: "active-unacknowledged" | "active-acknowledged" | "resolved-unacknowledged" | "resolved-acknowledged";
-  raised: number;
-  resolved?: number;
-  acknowledgedAt?: number;
-  availability?: "in-service" | "suppressed" | "disabled";
-}
-
-/** A task, a subtask and a dependency, as `@umriss-ui/schedule` reads them. */
-interface Task {
-  readonly id: string;
-  readonly name?: string;
-  readonly color: string;
-}
-interface Subtask {
-  readonly id: string;
-  readonly task: string;
-  readonly lane: string;
-  readonly from: number;
-  readonly to: number;
-  readonly leadIn?: number;
-  readonly leadOut?: number;
-}
-interface Dependency {
-  readonly id: string;
-  readonly from: string;
-  readonly to: string;
-  readonly lag: number;
-  readonly leaves?: "main" | "leadOut";
-  readonly arrives?: "main" | "leadIn";
-}
-
-/** 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;
-  };
-}
-
-/* ---------------------------------------------------------------------------
-   The kiln line over an early shift.
-
-   Every part of a control room reads from this one shift - the trend, the
-   tiles, the alarm list, the control chart, the plan and the OEE. The limit
-   the kiln crosses in the trend is the alarm in the list, the verdict on the
-   tile and the scrap in the OEE, because all four are read off the same
-   minute of the same readings. The line counts in minutes from the start of
-   the shift, and whoever draws it adds the instant the shift began.
-
-   The line generates alarms, which is exactly what the library does not do
-   (ADR-0009): it decides that a reading above the limit is an alarm, and when
-   it has come back far enough to clear. The table's model takes it from
-   there.
-   --------------------------------------------------------------------------- */
-
-/** The early shift, 06:00 to 14:00. */
-export const SHIFT_MINUTES = 480;
-
-/** The kiln's zone 3, in °C: the numbers every part reads it against, once.
-    Between the two warnings lies the tolerance - a tile fired outside it is
-    scrap; `returnTo` is the alarm's dead band. */
-export const KILN = { target: 1200, tolerance: [1185, 1215], alarm: 1230, returnTo: 1222 } as const;
-
-/** The same numbers as the limit set the tile and the verdict read. */
-export const KILN_LIMITS: LimitSet = {
-  target: KILN.target,
-  limits: [
-    { value: KILN.tolerance[1], side: "upper", severity: "warning" },
-    { value: KILN.alarm, side: "upper", severity: "alarm" },
-    { value: KILN.tolerance[0], side: "lower", severity: "warning" },
-  ],
-};
-
-/** The kiln fires one tile every quarter of a minute when nothing holds it up -
-    the ideal cycle time of the OEE's performance. */
-export const IDEAL_CYCLE_MINUTES = 0.25;
-
-/** The kiln alarm's condition and its dead band, as the table's model reads them. */
-const KILN_RETURN: ReturnBand = { direction: "upper", limit: KILN.alarm, returnTo: KILN.returnTo };
-
-/** What the four measuring points of the line can report. */
-export const ALARM_TYPES: readonly AlarmType[] = [
-  {
-    id: "kiln-high",
-    label: "Kiln K1 · zone 3 above alarm limit",
-    priority: "high",
-    /* The dead band: back below `returnTo`, not merely below the limit, or a
-       reading riding on the limit would raise an alarm a minute. */
-    returnBand: KILN_RETURN,
-  },
-  { id: "exit-silent", label: "Kiln K1 · exit pyrometer sends nothing", priority: "medium" },
-  { id: "belt-empty", label: "Kiln K1 · belt empty", priority: "medium" },
-  { id: "dryer-fan", label: "Dryer D1 · fan vibration high", priority: "low" },
-];
-
-/** One minute of the line. */
-export interface Reading {
-  /** Minutes since the start of the shift. */
-  minute: number;
-  /** Zone 3 of the kiln, in °C. */
-  kiln: number;
-  /** The exit pyrometer, in °C - `null` while it sends nothing. */
-  exit: number | null;
-  /** Whether the belt runs. */
-  running: boolean;
-  /** Tiles out of the kiln in this minute. */
-  fired: number;
-  /** Of them, the ones fired inside the tolerance. */
-  good: number;
-}
-
-/** A tile taken off the belt and measured - one every ten minutes while it runs. */
-export interface Sample {
-  minute: number;
-  /** The tile's length after firing, in mm (nominal 600). */
-  length: number;
-}
-
-/** A batch of tiles through the three stations. */
-export interface Batch {
-  id: string;
-  name: string;
-  /** How many tiles the batch is planned for. */
-  tiles: number;
-  /** Minutes since the start of the shift, per station. */
-  press: readonly [number, number];
-  dryer: readonly [number, number];
-  kiln: readonly [number, number];
-}
-
-export interface Plant {
-  readings: readonly Reading[];
-  samples: readonly Sample[];
-  batches: readonly Batch[];
-}
-
-/* When the exit pyrometer goes silent, and for how long. Fixed rather than
-   seeded, so that a running control room shows its reading turn stale, then
-   lost, and come back. */
-const SILENT_FROM = 288;
-const SILENT_FOR = 50;
-
-/* The dryer's vibration sensor is under maintenance all shift: its alarm is
-   active and disabled. */
-const DRYER_FAN_RAISED = 20;
-
-/** The shift, from a seed. */
-export function plant(seed: number): Plant {
-  const r = random(seed);
-
-  /* The one excursion: a burner overshoots somewhere between 02:30 and 03:30
-     into the shift, for half an hour, peaking near 1242 °C. The operator stops
-     the feed twenty-two minutes in, for eighteen minutes. The noise around it
-     is too small to reach a warning on its own, so this is the only crossing -
-     which is what the tests hold. */
-  const surgeFrom = 150 + Math.floor(r() * 60);
-  const surgeFor = 30;
-  const stopFrom = surgeFrom + 22;
-  const stopFor = 18;
-
-  /* The plan: batches through the kiln one after another, each pressed an
-     hour and dried half an hour before - the first ones during the night
-     shift. Tiles come out of the kiln only while a batch is in it, so the
-     OEE's count and the batches' counts are the same tiles. The plan is a
-     plan: a stop of the belt does not move it. */
-  const batches: Batch[] = [];
-  for (let at = 0, i = 0; at < SHIFT_MINUTES; i++) {
-    const length = 70 + Math.floor(r() * 25);
-    batches.push({
-      id: `b-${4121 + i}`,
-      name: `B-${4121 + i}`,
-      tiles: Math.round(length / IDEAL_CYCLE_MINUTES / 10) * 10,
-      press: [at - 60, at - 60 + length],
-      dryer: [at - 30, at - 30 + length],
-      kiln: [at, at + length],
-    });
-    at += length + 5;
-  }
-
-  const readings: Reading[] = [];
-  const samples: Sample[] = [];
-  let drift = 0;
-  for (let minute = 0; minute < SHIFT_MINUTES; minute++) {
-    drift = 0.9 * drift + (r() - 0.5) * 3;
-    const into = minute - surgeFrom;
-    const surge = into >= 0 && into <= surgeFor ? 42 * Math.sin((Math.PI * into) / surgeFor) : 0;
-    const kiln = Math.round((KILN.target + drift + surge) * 10) / 10;
-
-    const running = !(minute >= stopFrom && minute < stopFrom + stopFor);
-    const loaded = batches.some((batch) => batch.kiln[0] <= minute && minute < batch.kiln[1]);
-    const jam = r() < 0.12;
-    const fired = running && loaded ? (jam ? 3 : 4) : 0;
-    const inTolerance = kiln >= KILN.tolerance[0] && kiln <= KILN.tolerance[1];
-    const silent = minute >= SILENT_FROM && minute < SILENT_FROM + SILENT_FOR;
-    const exit = silent ? null : Math.round((kiln - 380 + (r() - 0.5) * 4) * 10) / 10;
-
-    readings.push({ minute, kiln, exit, running, fired, good: inTolerance ? fired : 0 });
-
-    if (running && minute % 10 === 0) {
-      /* Hotter shrinks more: the length follows the kiln, so the control
-         chart sees the excursion the trend sees. */
-      const length = 600 + (KILN.target - kiln) * 0.05 + (r() - 0.5) * 0.6;
-      samples.push({ minute, length: Math.round(length * 100) / 100 });
-    }
-  }
-
-  return { readings, samples, batches };
-}
-
-/** The readings up to and including the minute. */
-export function upTo<T extends { minute: number }>(series: readonly T[], minute: number): readonly T[] {
-  return series.filter((one) => one.minute <= minute);
-}
-
-/** How long ago the exit pyrometer last reported, in minutes - `0` while it
-    reports. What the tile's freshness is told. */
-export function exitSilence(p: Plant, minute: number): number {
-  for (let m = minute; m >= 0; m--) {
-    if (p.readings[m]?.exit !== null) return minute - m;
-  }
-  return minute;
-}
-
-/** When a condition held, as spans of minutes: `[from, to)`, `to` absent while
-    it still holds at the minute. */
-function spans(
-  readings: readonly Reading[],
-  minute: number,
-  raise: (one: Reading) => boolean,
-  clear: (one: Reading) => boolean,
-): { from: number; to?: number }[] {
-  const found: { from: number; to?: number }[] = [];
-  let open: { from: number; to?: number } | null = null;
-  for (const one of readings) {
-    if (one.minute > minute) break;
-    if (open === null && raise(one)) {
-      open = { from: one.minute };
-      found.push(open);
-    } else if (open !== null && clear(one)) {
-      open.to = one.minute;
-      open = null;
-    }
-  }
-  return found;
-}
-
-/**
- * The alarms of the shift as they stand at the minute: raised, resolved - and
- * acknowledged where the operator did, at the instant he did.
- *
- * `start` is the instant the shift began; the alarms carry instants because the
- * table's model does.
- */
-export function alarmsAt(
-  p: Plant,
-  minute: number,
-  start: number,
-  acknowledged: ReadonlyMap<string, number> = new Map(),
-): Alarm[] {
-  const instant = (m: number) => start + m * 60_000;
-  const alarms: Alarm[] = [];
-
-  const add = (
-    type: string,
-    span: { from: number; to?: number },
-    extra: { availability?: "suppressed" | "disabled" } = {},
-  ) => {
-    alarms.push({
-      id: `${type}-${span.from}`,
-      type,
-      lifecycle: span.to === undefined ? "active-unacknowledged" : "resolved-unacknowledged",
-      raised: instant(span.from),
-      ...(span.to === undefined ? {} : { resolved: instant(span.to) }),
-      ...extra,
-    });
-  };
-
-  for (const span of spans(p.readings, minute, (one) => one.kiln > KILN_RETURN.limit, (one) => one.kiln <= KILN_RETURN.returnTo)) {
-    add("kiln-high", span);
-  }
-  for (const span of spans(p.readings, minute, (one) => one.exit === null, (one) => one.exit !== null)) {
-    add("exit-silent", span);
-  }
-  /* The belt runs empty because the operator stopped the feed: the plant's
-     logic knows it, so the alarm is suppressed - there, and neutral. */
-  for (const span of spans(p.readings, minute, (one) => !one.running, (one) => one.running)) {
-    add("belt-empty", span, { availability: "suppressed" });
-  }
-  if (minute >= DRYER_FAN_RAISED) {
-    add("dryer-fan", { from: DRYER_FAN_RAISED }, { availability: "disabled" });
-  }
-
-  return alarms.map((alarm) => {
-    const at = acknowledged.get(alarm.id);
-    if (at === undefined) return alarm;
-    const lifecycle = alarm.resolved === undefined ? "active-acknowledged" : "resolved-acknowledged";
-    return { ...alarm, lifecycle, acknowledgedAt: at };
-  });
-}
-
-/** The shift's figures for the OEE, up to and including the minute. */
-export interface ShiftCount {
-  /** Minutes of the shift so far. */
-  planned: number;
-  /** Minutes the belt stood. */
-  downtime: number;
-  /** Tiles out of the kiln. */
-  total: number;
-  /** Of them, inside the tolerance. */
-  good: number;
-}
-
-export function countAt(p: Plant, minute: number): ShiftCount {
-  const so = upTo(p.readings, minute);
-  return {
-    planned: so.length,
-    downtime: so.filter((one) => !one.running).length,
-    total: so.reduce((sum, one) => sum + one.fired, 0),
-    good: so.reduce((sum, one) => sum + one.good, 0),
-  };
-}
-
-/* ---------------------------------------------------------------------------
-   The machine shop's plan: seven stations, six orders on their way through
-   them on Tuesday, 17 March 2026 - the day the browser suites freeze the
-   clock on.
-
-   Written out, not generated from a seed: a planner reads these as a day's
-   plan, and a finding is placed where it is on purpose - the overlap on the
-   mill, the violated dependency into the paint shop.
-   --------------------------------------------------------------------------- */
-
-const planAt = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
-const min = (n: number) => n * 60_000;
-
-export const DAY_OF_PLAN: readonly [number, number] = [planAt(5, 30), planAt(18)];
-
-export const STATIONS = [
-  { id: "saw", label: "Saw 1" },
-  { id: "lathe-1", label: "Lathe 1" },
-  { id: "lathe-2", label: "Lathe 2" },
-  { id: "mill", label: "Mill" },
-  { id: "press", label: "Press 2" },
-  { id: "paint", label: "Paint shop" },
-  { id: "qa", label: "Inspection" },
-] as const;
-
-/* Colours in both schemes, as the application's own tokens would give them. */
-export const ORDERS: readonly Task[] = [
-  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
-  { id: "a-2042", name: "A-2042 Shaft", color: "light-dark(#0d9488, #3cc7b8)" },
-  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
-  { id: "a-2044", name: "A-2044 Flange", color: "light-dark(#7c3aed, #a98bfa)" },
-  { id: "a-2045", name: "A-2045 Cover", color: "light-dark(#be185d, #f06aa6)" },
-  { id: "a-2046", name: "A-2046 Axle", color: "light-dark(#4d7c0f, #8fc43e)" },
-];
-
-export const STEPS: readonly Subtask[] = [
-  { id: "a-2041-1", task: "a-2041", lane: "saw", from: planAt(6), to: planAt(7), leadIn: min(15), leadOut: min(10) },
-  { id: "a-2041-2", task: "a-2041", lane: "mill", from: planAt(8), to: planAt(10, 30), leadIn: min(30), leadOut: min(15) },
-  { id: "a-2041-3", task: "a-2041", lane: "qa", from: planAt(11, 30), to: planAt(12, 15) },
-
-  { id: "a-2042-1", task: "a-2042", lane: "saw", from: planAt(7, 30), to: planAt(8, 15), leadIn: min(10) },
-  { id: "a-2042-2", task: "a-2042", lane: "lathe-1", from: planAt(9), to: planAt(11), leadIn: min(20), leadOut: min(15) },
-  { id: "a-2042-3", task: "a-2042", lane: "qa", from: planAt(13), to: planAt(13, 30) },
-
-  { id: "a-2043-1", task: "a-2043", lane: "press", from: planAt(6, 30), to: planAt(8), leadIn: min(30), leadOut: min(15) },
-  { id: "a-2043-2", task: "a-2043", lane: "mill", from: planAt(10), to: planAt(11, 30), leadIn: min(15) },
-  { id: "a-2043-3", task: "a-2043", lane: "paint", from: planAt(12), to: planAt(14), leadIn: min(20), leadOut: min(20) },
-
-  { id: "a-2044-1", task: "a-2044", lane: "lathe-2", from: planAt(6), to: planAt(8, 30), leadIn: min(20), leadOut: min(10) },
-  { id: "a-2044-2", task: "a-2044", lane: "press", from: planAt(9, 30), to: planAt(10, 45), leadIn: min(25) },
-  { id: "a-2044-3", task: "a-2044", lane: "paint", from: planAt(14, 45), to: planAt(16), leadIn: min(15), leadOut: min(15) },
-
-  { id: "a-2045-1", task: "a-2045", lane: "lathe-1", from: planAt(12), to: planAt(13, 30), leadIn: min(15), leadOut: min(10) },
-  { id: "a-2045-2", task: "a-2045", lane: "press", from: planAt(14, 15), to: planAt(15), leadIn: min(20) },
-  { id: "a-2045-3", task: "a-2045", lane: "qa", from: planAt(15, 45), to: planAt(16, 30) },
-
-  { id: "a-2046-1", task: "a-2046", lane: "lathe-2", from: planAt(10), to: planAt(12), leadIn: min(20), leadOut: min(15) },
-  { id: "a-2046-2", task: "a-2046", lane: "mill", from: planAt(13), to: planAt(14, 30), leadIn: min(20), leadOut: min(10) },
-  { id: "a-2046-3", task: "a-2046", lane: "qa", from: planAt(15), to: planAt(15, 30) },
-];
-
-export const MOVES: readonly Dependency[] = [
-  { id: "t-2041-1", from: "a-2041-1", to: "a-2041-2", lag: min(10) },
-  { id: "t-2041-2", from: "a-2041-2", to: "a-2041-3", lag: min(20) },
-  { id: "t-2042-1", from: "a-2042-1", to: "a-2042-2", lag: min(15) },
-  { id: "t-2042-2", from: "a-2042-2", to: "a-2042-3", lag: min(30), leaves: "main" },
-  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", lag: min(45) },
-  /* Leaves the mill at 11:30 and has 10 minutes to reach the paint shop's
-     lead-in at 11:40 - it takes 25: a violated dependency, on purpose. */
-  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", lag: min(25) },
-  { id: "t-2044-1", from: "a-2044-1", to: "a-2044-2", lag: min(20) },
-  { id: "t-2044-2", from: "a-2044-2", to: "a-2044-3", lag: min(60), arrives: "main" },
-  { id: "t-2045-1", from: "a-2045-1", to: "a-2045-2", lag: min(15) },
-  { id: "t-2045-2", from: "a-2045-2", to: "a-2045-3", lag: min(15) },
-  { id: "t-2046-1", from: "a-2046-1", to: "a-2046-2", lag: min(20) },
-  { id: "t-2046-2", from: "a-2046-2", to: "a-2046-3", lag: min(10), leaves: "main" },
-];
-```