@umriss-ui/calculation 0.3.6 → 0.4.0

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { JSX } from 'react';
 import { Limit } from '@umriss-ui/core';
 import { ReactNode } from 'react';
 
-export declare function Calculation({ children, className, style, ...rest }: CalculationProps): JSX.Element;
+export declare function Calculation({ children, className, style, metrics, ...rest }: CalculationProps): JSX.Element;
 
 /** `className` and `style` size and place the surface; every other attribute -
  `aria-label` first of all - lands on the list the surface holds. */
@@ -14,6 +14,12 @@ export declare interface CalculationProps extends Omit<HTMLAttributes<HTMLUListE
      `<Chain>`, the two mixing freely; `<Ref>` for a quantity defined
      elsewhere. */
     children: ReactNode;
+    /** Several numbers per quantity, side by side - headcount and full-time
+     equivalents of the same teams (ADR-0038). Every `value` is then an
+     object with a number for each metric id; unit and places are the
+     metric's. A calculation with metrics only adds and subtracts, and
+     assesses no target or limits. */
+    metrics?: readonly Metric[];
 }
 
 /** A calculation read top to bottom, as on paper. */
@@ -25,8 +31,9 @@ export declare interface ChainOperandProps extends Omit<GivenProps, "label" | "v
     label?: string;
     /** The operand's number, where the line is a given written in place.
      Absent as for a `Given`: the line and every interim after it are
-     absent, with the reason. */
-    value?: number | null;
+     absent, with the reason. With `metrics`, an object by metric id, as on
+     a `Given`. */
+    value?: number | null | MetricValues;
     /** Instead of `label` and `value`: exactly one quantity - a tree, a
      `<Ref>` or a `<Chain>`. */
     children?: ReactNode;
@@ -53,8 +60,9 @@ export declare const Given: (props: GivenProps) => null;
 export declare interface GivenProps extends QuantityProps {
     /** The number the calculation starts from. Absent (`null`, `undefined`,
      not finite) makes every quantity that depends on it absent, with the
-     reason - never zero. */
-    value: number | null | undefined;
+     reason - never zero. Where the calculation has `metrics`, an object with
+     a number for each metric id instead; absence then stays in its metric. */
+    value: number | null | undefined | MetricValues;
     /** Where the number came from: a system, a report, a person. */
     source?: string;
     /** When the number was true - not when it was fetched. */
@@ -67,6 +75,27 @@ export declare interface GivenProps extends QuantityProps {
 /** Names the value of a chain where it stands. */
 export declare const Interim: (props: QuantityProps) => null;
 
+/** One of several numbers every quantity carries side by side (ADR-0038):
+ headcount and full-time equivalents of the same teams. Each metric is
+ worked on its own, with the same derivation. */
+export declare interface Metric {
+    /** The key of this metric's number in every `value` object. */
+    id: string;
+    /** The metric's name, in the head above its column and in each row's
+     sentence. */
+    label: string;
+    /** A label written after the number where a result closes, and beneath the
+     metric's name in the head. Never converted and never checked. */
+    unit?: string;
+    /** Fixed number of fraction digits as shown, for every quantity of this
+     metric. Without it: a given as given, at most two for a derived number. */
+    decimals?: number;
+}
+
+/** A given's numbers where the calculation has metrics: one per metric id,
+ `null` where the number is absent. */
+export declare type MetricValues = Readonly<Record<string, number | null>>;
+
 /** Takes its operand from the value before it. */
 export declare const Minus: (props: ChainOperandProps) => null;
 

package/docs/llms-full.md

@@ -1,4 +1,4 @@
-# @umriss-ui/calculation 0.3.6
+# @umriss-ui/calculation 0.4.0
 
 > React calculation view for data-dense applications - a derivation written as it is shown, evaluated by the library, folded and read line by line.
 
@@ -290,7 +290,7 @@ 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)} %`;
+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
@@ -408,7 +408,7 @@ export default function CheckAnInvoice() {
                 ))}
               </Stack>
               {decision === undefined ? (
-                <Stack direction="row" gap={2} data-callout="5">
+                <Stack direction="row" gap={2} wrap data-callout="5">
                   <Button variant="primary" onClick={() => setDecided({ ...decided, [invoice.id]: "approved" })}>
                     Approve as {next?.approver ?? "approver"}
                   </Button>
@@ -706,6 +706,7 @@ export default function Invoice() {
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `children` (required) | `ReactNode` | — | The result: exactly one quantity - a tree (`<Sum>`, `<Difference>`, `<Product>`, `<Quotient>` with their operands, `<Given>` as leaves) or a `<Chain>`, the two mixing freely; `<Ref>` for a quantity defined elsewhere. |
+| `metrics` | `readonly Metric[]` | — | Several numbers per quantity, side by side - headcount and full-time equivalents of the same teams (ADR-0038). Every `value` is then an object with a number for each metric id; unit and places are the metric's. A calculation with metrics only adds and subtracts, and assesses no target or limits. |
 
 Also takes every attribute of the rendered element – without `children`.
 
@@ -1152,7 +1153,7 @@ export default function ErrorBudget() {
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `label` | `string` | — | The operand's name, where the line is a given written in place. Left out where the line holds a quantity as its child. |
-| `value` | `number \| null` | — | The operand's number, where the line is a given written in place. Absent as for a `Given`: the line and every interim after it are absent, with the reason. |
+| `value` | `number \| null \| MetricValues` | — | The operand's number, where the line is a given written in place. Absent as for a `Given`: the line and every interim after it are absent, with the reason. With `metrics`, an object by metric id, as on a `Given`. |
 | `children` | `ReactNode` | — | Instead of `label` and `value`: exactly one quantity - a tree, a `<Ref>` or a `<Chain>`. |
 | `source` | `string` | — | Where the number came from: a system, a report, a person. From `GivenProps`. |
 | `asOf` | `Date \| number` | — | When the number was true - not when it was fetched. From `GivenProps`. |
@@ -1287,7 +1288,7 @@ export default function InGerman() {
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` (required) | `number \| null \| undefined` | — | The number the calculation starts from. Absent (`null`, `undefined`, not finite) makes every quantity that depends on it absent, with the reason - never zero. |
+| `value` (required) | `number \| null \| undefined \| MetricValues` | — | The number the calculation starts from. Absent (`null`, `undefined`, not finite) makes every quantity that depends on it absent, with the reason - never zero. Where the calculation has `metrics`, an object with a number for each metric id instead; absence then stays in its metric. |
 | `source` | `string` | — | Where the number came from: a system, a report, a person. |
 | `asOf` | `Date \| number` | — | When the number was true - not when it was fetched. |
 | `ages` | `FreshnessAges` | — | The ages at which `asOf` turns stale and lost. With both, the given carries a freshness through core; with `asOf` alone, only the time. |
@@ -1301,6 +1302,263 @@ export default function InGerman() {
 | `explanation` | `string` | — | A sentence of plain text beside the line: why the quantity is here, or what it means. From `QuantityProps`. |
 | `aside` | `ReactNode` | — | Content of the caller's own beside the line - a sparkline, a link. It never takes part in the calculation. From `QuantityProps`. |
 
+### Metrics
+
+Several numbers on every line, side by side (columns, measures): headcount and full-time equivalents of the same teams, summed by the same derivation. Reach for it where one sheet has to answer in more than one unit.
+
+```ts
+import { Calculation, Given, Sum, Chain, Plus, Minus, Interim } from "@umriss-ui/calculation";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/calculation/metrics/
+
+`metrics` on the calculation names each metric once, with its unit and places; every `value` is then an object with a number for each metric id. Each metric is worked on its own - nothing ever takes numbers from two of them (ADR-0038).
+
+The head names each metric above its column. The unit stands again only where a result closes: the Result, an interim, the line that closes an open derivation.
+
+A number one metric does not have is `null`, and makes absent only what depends on it in that metric; the badge says which metric, the sentence the full reason.
+
+Where the figures leave the labels less room than they need, and less than 10 rem, each line puts them on a line beneath its label, still in their columns. The component measures this: it depends on the labels, the number of metrics and their digits, not on a breakpoint.
+
+#### Examples
+
+##### Headcount and full-time equivalents
+
+`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";
+
+const METRICS: Metric[] = [
+  { id: "heads", label: "Headcount", unit: "HC" },
+  { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
+];
+
+/* A full-time week is 40 hours. */
+const staffOf = (team: "Web" | "Apps") => {
+  const people = PEOPLE.filter((person) => person.team === team);
+  return { heads: people.length, fte: people.reduce((sum, person) => sum + person.capacity, 0) / 40 };
+};
+
+export default function TwoTeams() {
+  return (
+    <Calculation aria-label="Staff of Tidewell" metrics={METRICS}>
+      <Sum label="Tidewell">
+        <Given label="Web team" value={staffOf("Web")} />
+        <Given label="Apps team" value={staffOf("Apps")} />
+      </Sum>
+    </Calculation>
+  );
+}
+```
+
+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.
+
+```tsx
+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 },
+];
+
+export default function NotRecorded() {
+  return (
+    <Calculation aria-label="Staff of customer service" metrics={METRICS}>
+      <Sum label="Customer service">
+        <Given label="Service desk" value={{ heads: 7, fte: 5.9 }} />
+        <Given label="Returns" value={{ heads: 3, fte: 2.5 }} />
+        <Given
+          label="Working students"
+          value={{ heads: 4, fte: null }}
+          explanation="Paid by the hour; no contracted hours to count."
+        />
+      </Sum>
+    </Calculation>
+  );
+}
+```
+
+##### Team, cost centre, business line
+
+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 },
+];
+
+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 }} />
+            ))}
+          </Sum>
+        ))}
+      </Sum>
+    </Calculation>
+  );
+}
+```
+
+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.
+
+```tsx
+import { Calculation, Chain, Given, Interim, Minus, Plus } 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 },
+];
+
+export default function StaffMovement() {
+  return (
+    <Calculation aria-label="Staff movement of Carrow & Lisle since 1 January" metrics={METRICS}>
+      <Chain>
+        <Given label="Staff on 1 January" value={{ heads: 100, fte: 89.9 }} source="Payroll" />
+        <Plus label="Joiners" value={{ heads: 5, fte: 4.6 }} />
+        <Minus label="Leavers" value={{ heads: 2, fte: 1.8 }} />
+        <Interim label="Under contract" />
+        <Minus label="Gone on parental leave" value={{ heads: 2, fte: 1.6 }} />
+        <Plus label="Back from parental leave" value={{ heads: 1, fte: 0.4 }} explanation="Back part-time, 16 hours a week." />
+        <Interim label="Staff on 17 March" />
+      </Chain>
+    </Calculation>
+  );
+}
+```
+
+##### A third metric: staff cost
+
+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";
+
+const METRICS: Metric[] = [
+  { id: "heads", label: "Headcount", unit: "HC" },
+  { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
+  { id: "cost", label: "Staff cost a month", unit: "k€", decimals: 1 },
+];
+
+const PRODUCT = ["CC-2100", "CC-2200"];
+
+export default function StaffCost() {
+  return (
+    <Calculation aria-label="Staff and staff cost of the product business line" metrics={METRICS}>
+      <Sum label="Product">
+        {PRODUCT.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, cost: team.monthlyCost }}
+              />
+            ))}
+          </Sum>
+        ))}
+      </Sum>
+    </Calculation>
+  );
+}
+```
+
+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";
+
+const METRICS: Metric[] = [
+  { id: "heads", label: "Headcount", unit: "HC" },
+  { id: "fte", label: "Full-time equivalents", unit: "FTE", decimals: 1 },
+  { id: "cost", label: "Staff cost a month", unit: "k€", decimals: 1 },
+];
+
+const centreName = (id: string) => COST_CENTRES.find((centre) => centre.id === id)!.name;
+
+export default function WholeCompany() {
+  return (
+    <Calculation aria-label="Staff of Carrow & Lisle, 17 March" metrics={METRICS}>
+      <Sum label="Carrow & Lisle">
+        {BUSINESS_LINES.map((line) => (
+          <Sum key={line.name} label={line.name}>
+            {line.costCentres.map((id) => (
+              <Sum key={id} label={centreName(id)}>
+                {TEAMS.filter((team) => team.costCentre === id).map((team) => (
+                  <Given
+                    key={team.name}
+                    label={team.name}
+                    value={{ heads: team.headcount, fte: team.fte, cost: team.monthlyCost }}
+                  />
+                ))}
+              </Sum>
+            ))}
+          </Sum>
+        ))}
+      </Sum>
+    </Calculation>
+  );
+}
+```
+
+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
+- Many figures per row, sorted and filtered → `Table` from @umriss-ui/table
+
+#### API
+
+##### `Metric`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` (required) | `string` | — | The key of this metric's number in every `value` object. |
+| `label` (required) | `string` | — | The metric's name, in the head above its column and in each row's sentence. |
+| `unit` | `string` | — | A label written after the number where a result closes, and beneath the metric's name in the head. Never converted and never checked. |
+| `decimals` | `number` | — | Fixed number of fraction digits as shown, for every quantity of this metric. Without it: a given as given, at most two for a derived number. |
+
+#### Known limits
+
+- A calculation with metrics only adds and subtracts: `Product`, `Quotient`, `Times` and `DividedBy` fail on the first render, since a factor would need a unit in every metric.
+- Unit, format and places belong to the metric; on a quantity they fail on the first render, and so does a missing or unknown metric key in a `value`.
+- No target or limits with metrics: an assessment per cell is not there yet.
+
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0032-what-umriss-is-not.md).
+
 ## In practice
 
 What a calculation does when the numbers are not what they should be, and whole figures worked in full.
@@ -1700,7 +1958,10 @@ The demos' shared data, which some examples import from beside themselves. Copie
  *   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.
+ *   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.
@@ -1852,6 +2113,58 @@ export const APPROVALS: readonly Approval[] = [
   { 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`
@@ -2388,7 +2701,7 @@ export interface AlertType {
 
 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 %", 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" },
@@ -2600,6 +2913,167 @@ export const SUCCESS_BY_HOUR: readonly SuccessCell[] = (() => {
 })();
 ```
 
+### `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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umriss-ui/calculation",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "React calculation view for data-dense applications - a derivation written as it is shown, evaluated by the library, folded and read line by line.",
   "license": "MIT",
   "author": "Roman Händler",
@@ -47,7 +47,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@umriss-ui/core": "^0.15.0"
+    "@umriss-ui/core": "^0.16.0"
   },
   "devDependencies": {
     "@fontsource/geist-mono": "^5.3.0",
@@ -61,8 +61,8 @@
     "typescript": "^5.6.3",
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.3.0",
-    "@umriss-ui/demo": "0.0.0",
-    "@umriss-ui/core": "0.15.0"
+    "@umriss-ui/core": "0.16.0",
+    "@umriss-ui/demo": "0.0.0"
   },
   "scripts": {
     "props": "node --disable-warning=ExperimentalWarning --experimental-strip-types demo/props.ts",