@umriss-ui/schedule 0.1.8 → 0.2.0

package/docs/llms-full.md

@@ -0,0 +1,3451 @@
+# @umriss-ui/schedule 0.2.0
+
+> The umriss schedule - subtasks on lanes over time, with transports, findings and controlled editing.
+
+Install with `pnpm add @umriss-ui/schedule`. This text is generated from the package's demo (https://romanhaendler.github.io/umriss-ui/schedule/): every page with its import line, its examples - the source exactly as it runs, with the package name where the demo imports its own source - its props tables generated from the code, and why it is built the way it is. The pages index stands in https://romanhaendler.github.io/umriss-ui/schedule/llms.txt.
+
+## Drawing
+
+What the schedule shows: lanes over time, the work on them, and everything a bar says besides its colour.
+
+### First schedule
+
+Subtasks on lanes over time, with a day band above and adaptive time ticks below - the whole picture in thirty lines.
+
+```ts
+import { Schedule, Lane, Subtasks, Transports } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/schedule
+
+#### Examples
+
+##### A day in the plant
+
+```tsx
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* The schedule draws what it is given: lanes in the order they are declared,
+   subtasks in the colour of their task, transports from one subtask's end to
+   the next one's start. The day band above names the day, the fine band below
+   steps from the hour down to the quarter hour as the time scale is zoomed.
+
+   Two findings stand in this plan on purpose: two orders claim the mill at
+   10:00, and the bracket cannot reach the paint shop in time. They are drawn,
+   offset and marked, and nothing moves them.
+
+   Drag the background to pan in both directions. The wheel scrolls the lanes
+   and, once they are at their end, the page; Ctrl or ⌘ with the wheel, or a
+   pinch, zooms; Shift with the wheel pans through time. `Transports` is declared
+   before `Subtasks`, so its lines run beneath the bars. */
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+  { id: "a-2044", name: "A-2044 Flange", color: "light-dark(#7c3aed, #a98bfa)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+  { id: "a-2044-2", task: "a-2044", lane: "press", from: at(9, 30), to: at(10, 45), setup: min(25) },
+  { id: "a-2044-3", task: "a-2044", lane: "paint", from: at(14, 45), to: at(16), setup: min(15), teardown: min(15) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2041-1", from: "a-2041-1", to: "a-2041-2", duration: min(10) },
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  { id: "t-2044-2", from: "a-2044-2", to: "a-2044-3", duration: min(60), arrives: "main" },
+  /* Leaves the mill at 11:30 and has ten minutes to reach the paint shop's
+     setup at 11:40 - it takes twenty-five. A late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+];
+
+export default function FirstSchedule() {
+  return (
+    <Schedule ariaLabel="Plan of Tuesday, 17 March" initialDomain={DAY_OF_PLAN} height={240}>
+      {STATIONS.map((station) => (
+        <Lane key={station.id} id={station.id} label={station.label} />
+      ))}
+      <Transports data={MOVES} />
+      <Subtasks data={STEPS} tasks={ORDERS} />
+    </Schedule>
+  );
+}
+```
+
+#### API
+
+##### `ScheduleProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `ariaLabel` (required) | `string` | — | What the schedule shows, for a screen reader: "Plan of week 38". |
+| `initialDomain` (required) | `readonly [number, number]` | — | The time in view when the schedule mounts, as two wall-clock instants. Pan and zoom take it from there; a new pair of values puts it back. |
+| `height` | `number` | — | Height in CSS pixels, both bands included. The width is the host's. |
+| `laneHeight` | `number` | — | Height of one lane in pixels. |
+| `headerWidth` | `number` | — | Width of the lane headers in pixels - at most 40 % of the schedule, so that on a phone the plot keeps the larger part. |
+| `calendar` | `CalendarInput` | — | An operating calendar: the intervals in which time counts. Nights and weekends outside them are cut out of the axis. Default: the wall clock. |
+| `zoomLimits` | `ZoomLimits` | — | The narrowest and widest time span zoom may reach, in milliseconds. Default: one hour to 28 days. |
+| `snap` | `"ticks" \| number \| SnapRaster \| false` | — | The raster a drag lands on: `"ticks"` - the fine band's current step -, a step in milliseconds from local midnight, a step with an offset (shifts at 06:00, 14:00 and 22:00 are eight hours offset by six), or `false` for none. It shapes the ghost and the intent, never the data. |
+| `intents` | `readonly IntentKind[]` | — | The intents the caller handles. Each one enables its interaction; none leaves a read-only schedule (ADR-0023). |
+| `canMoveTo` | `(subtask: Subtask, lane: string) => boolean` | — | Whether a subtask may go to a lane. Without it every lane is open; it narrows `"lane"`, it does not enable it. Asked once per lane when a drag takes hold, and asked again at the drop. The lanes it turns down are marked from the first frame of the drag - a planner sees the refusal before meeting it - and over one of them the ghost stays on the last lane that was allowed, the cursor says no and a line ties the ghost to the pointer. A refused lane costs the lane and nothing else: a drop after it still reports the move in time. It is asked for work dragged in from outside as well, with the key and task the application declared in `placing`. |
+| `onIntent` | `(intent: Intent) => void` | — | Called once per intent when a drag ends. The data changes only if the caller changes it. |
+| `onInteraction` | `(interaction: ScheduleInteraction) => void` | — | Click, context menu and hover, with what the pointer is on and where. While it is set, a right-click opens no browser menu. |
+| `selectedTask` | `string \| null` | — | The selected task, controlled. Leave it out and the schedule keeps the selection itself. |
+| `onSelectedTaskChange` | `(task: string \| null, subtask: string \| null) => void` | — | Called when a click selects a task or clears the selection, with the subtask that was clicked - null where the click was on a transport or on nothing. It is called again when another subtask of the same task is clicked. |
+| `collapsedGroups` | `readonly string[]` | — | The **Lane group**s that are folded, controlled. Leave it out and the schedule keeps them itself, starting from `defaultCollapsedGroups`. Folding changes the view and not the plan, which is why it is no intent: a caller that applies every intent it receives must never find a fold among them (ADR-0025). A folded outer group hides the inner ones without their entries leaving the list, so unfolding it gives back the view that was there. |
+| `defaultCollapsedGroups` | `readonly string[]` | — | Which groups are folded when the schedule mounts, where the schedule keeps the state itself. Ignored while `collapsedGroups` is given. |
+| `onCollapsedGroupsChange` | `(groups: readonly string[]) => void` | — | Called with the whole list when the planner folds or unfolds a group. |
+| `onDomainChange` | `(domain: readonly [number, number]) => void` | — | The visible time span after the planner panned or zoomed, as two wall-clock instants - for keeping a second schedule or a chart in step. A span handed in through `initialDomain` is not reported back. |
+| `placing` | `PlacingItem \| null` | — | What the application is dragging in from outside while it drags it - its key, task, the length of its main time, its setup and teardown. The browser hands the dragged data over only on the drop, so the ghost before it can only come from here: set it on your own `dragstart`, clear it on `dragend`. Without `"place"` in `intents` no drop is accepted. |
+| `route` | `TransportRoute` | — | How the transports are drawn: a `"curve"` that leaves and arrives forwards, a `"straight"` line, or `"orthogonal"` segments. A transport may say otherwise for itself. |
+| `attach` | `TransportAttachment` | — | Where a transport's ends sit on their bars: the `"centre"` of both, or the `"nearest"` edge - which is the shortest line between two stops. Within one lane both mean the middle. A transport may say otherwise for itself. It changes the picture and never a finding: whether a transport is late follows from its `leaves` and `arrives` alone. |
+| `ends` | `TransportEnds` | — | Whether a transport's two ends carry a dot (`"dot"`, the default) or the line stands alone (`"none"`). The dot says where the line is anchored - a help while a plan is being read, and noise in a plan full of short moves. A transport may say otherwise for itself. |
+| `label` | `(subtask: Subtask) => string` | — | What stands written in a bar: a function from a subtask to a line of text, or nothing for bars without text. The text is cut off with an ellipsis where the bar is too narrow for it and left out where even that would say nothing; a bar that began before the view keeps its text at the view's edge. |
+| `tooltip` | `false \| ((target: ScheduleTooltipTarget) => ReactNode)` | — | The tooltip on a hovered subtask or transport: its order, its times, its parts and its findings. `false` switches it off; a function receives what the pointer rests on and returns content of the application's own. |
+| `now` | `boolean \| number` | — | A line marking the present across the lanes: `true` follows the clock by the minute, an instant fixes it there. Off by default. |
+| `className` | `string` | — | Goes to the root element. |
+| `style` | `CSSProperties` | — | Goes to the root element. |
+| `children` | `ReactNode` | — | `Lane`, `Transports` and `Subtasks`, in the order they are to stand and be drawn. |
+
+#### Why it is like this
+
+##### The schedule changes nothing
+
+Drag a bar and the plan does not move. The schedule draws a ghost, assesses it as if it were data, and when the drag ends it **reports what was asked for** - a move, a lane, a stretch, a setup, a teardown, a place. The subtasks it was given are the subtasks it still has. See `docs/adr/0023-intents-not-mutations.md`.
+
+That is not caution, it is the only arrangement that can be true. A planning application has rules the schedule cannot know - a mould that fits one press, a shift that ends at two, an order that may not start before its material arrives - and a component that wrote to the plan first and asked afterwards would be wrong in exactly the cases that matter. Here the application is asked first, every time, and nothing is ever travelled to and then corrected.
+
+##### Every intent carries values, not differences
+
+A move says where the main time now starts and ends; it does not say "two hours later". Two intents from one drop - a move and a lane - can therefore be applied in either order, or one of them alone, or neither. `applyIntent` is the arithmetic, and it is exported so an application can run it without the component.
+
+##### What that costs, said plainly
+
+Nothing happens until you write the handler. The simplest useful schedule is a` useState` and one `map`. In exchange you get a component that cannot corrupt a plan, an undo that is yours, and a cascade (`ripple`) you may run or refuse.
+
+### Lanes
+
+One machine or station per lane, named by its header - in the order the lanes are declared, however many there are.
+
+```ts
+import { Lane } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/lane
+
+#### Examples
+
+##### What a lane header says
+
+```tsx
+import { Badge, Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* A lane is declared by its id - the one subtasks name - and a label. The label
+   is content, not a string: a name with its resource number, a status beside
+   it. It is real text, read by a screen reader, and it stays at the left edge
+   while the plot pans.
+
+   The lanes stand in the order they are declared. A subtask on a lane that is
+   not declared is not drawn. */
+
+const at = (hours: number) => new Date(2026, 2, 17, hours).getTime();
+
+const TASKS: Task[] = [{ id: "order", color: "light-dark(#7c3aed, #a98bfa)" }];
+
+const WORK: Subtask[] = [
+  { id: "one", task: "order", lane: "m-104", from: at(7), to: at(9) },
+  { id: "two", task: "order", lane: "m-231", from: at(9), to: at(11) },
+];
+
+export default function LaneHeaders() {
+  return (
+    <Schedule ariaLabel="Two presses" initialDomain={[at(6), at(12)]} height={150} headerWidth={200}>
+      <Lane
+        id="m-104"
+        label={
+          <Stack direction="row" gap={2} align="center">
+            <Text size="sm">Press 1</Text>
+            <Text size="xs" tone="muted" mono>
+              M-104
+            </Text>
+          </Stack>
+        }
+      />
+      <Lane
+        id="m-231"
+        label={
+          <Stack direction="row" gap={2} align="center">
+            <Text size="sm">Press 2</Text>
+            <Badge tone="warning">Service</Badge>
+          </Stack>
+        }
+      />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### More lanes than the height
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* Twenty lanes in 300 pixels: the lanes scroll, and the lane headers go with
+   them - vertically only. The day band and the time band hold still, and so
+   does the column of headers when the plot pans through time.
+
+   `height` is the whole schedule, both bands included; `laneHeight` and
+   `headerWidth` set the rest. Drag the background up and down to reach the
+   lower lanes. */
+
+const LINES: Task[] = [
+  { id: "line-a", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "line-b", color: "light-dark(#0d9488, #3cc7b8)" },
+];
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const CELLS = Array.from({ length: 20 }, (_, i) => ({ id: `cell-${i + 1}`, label: `Cell ${String(i + 1).padStart(2, "0")}` }));
+
+/* One subtask per cell, staggered by a quarter hour down the lanes. */
+const WORK: Subtask[] = CELLS.map((cell, i) => ({
+  id: `${cell.id}-job`,
+  task: i % 2 === 0 ? "line-a" : "line-b",
+  lane: cell.id,
+  from: at(7, 15 * i),
+  to: at(9, 15 * i),
+  setup: 15 * 60_000,
+}));
+
+export default function ManyLanes() {
+  return (
+    <Schedule
+      ariaLabel="Twenty cells, Tuesday morning"
+      initialDomain={[at(6), at(14)]}
+      height={300}
+      laneHeight={32}
+      headerWidth={110}
+    >
+      {CELLS.map((cell) => (
+        <Lane key={cell.id} id={cell.id} label={cell.label} />
+      ))}
+      <Subtasks data={WORK} tasks={LINES} />
+    </Schedule>
+  );
+}
+```
+
+#### API
+
+##### `LaneProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` (required) | `string` | — | The identity subtasks name in their `lane`. |
+| `label` | `ReactNode` | — | What the lane header says - the machine or station. Real text, read by a screen reader; without one the header shows the id. |
+
+#### Why it is like this
+
+##### A lane is not a row
+
+A row is a place in a list; a lane is a **machine**. Whatever stands on it stands on it because the plant put it there, and two things on one lane at one time are not a layout problem - they are a finding a planner has to see. That single sentence decides most of what this component does and does not do.
+
+It is why a lane keeps its height whatever lies on it, why nothing is ever moved to another lane to make room, and why the schedule has no notion of "fitting" work into the space available. A table may re-flow. A plan may not: the picture would stop being the plant.
+
+##### What that costs, said plainly
+
+A busy lane gets crowded, and the schedule does not tidy it up for you. Three overlapping stops are drawn overlapping, offset by a few pixels each so that all three can be seen and hit, and marked. If you want them apart, you move them - and then the plan really has changed, which is the point.
+
+### Lane groups
+
+Halls, lines and machine groups over the lanes - to any depth, and folded into one row when a planner wants the part they work on.
+
+```ts
+import { LaneGroup, Lane } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/lane-groups
+
+#### Examples
+
+##### A group of lanes
+
+```tsx
+import { Lane, LaneGroup, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `<LaneGroup>` puts structure over the lanes. It is not a lane itself:
+   nothing sits on it, no finding is reported for it, no intent names it. A
+   subtask still names a machine, and `canMoveTo` is still asked about a
+   machine - a group only says which machines belong together.
+
+   Declared by composition, so a group reads in JSX as it reads in the plant:
+   the lanes inside the tags are the lanes in the hall. A lane never names its
+   group; the group gives its id downwards, which is why moving a machine
+   between groups is moving a line of JSX.
+
+   An open group shows a slim head above its lanes, with its name and how many
+   lanes it holds. The chevron folds it - that is the next example.
+
+   The lanes keep the order they were DECLARED in, whatever group they are in.
+   That is the order a reader wrote and the only one they can predict. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "press-1", from: at(7), to: at(9), setup: min(30) },
+  { id: "a-2043-1", task: "a-2043", lane: "press-2", from: at(8), to: at(10, 30), teardown: min(15) },
+  { id: "a-2041-2", task: "a-2041", lane: "weld", from: at(10), to: at(12) },
+  { id: "a-2043-2", task: "a-2043", lane: "paint", from: at(11, 30), to: at(14) },
+];
+
+export default function AGroup() {
+  return (
+    <Schedule ariaLabel="Two presses in a hall, and two stations outside it" initialDomain={[at(6), at(15)]} height={240}>
+      <LaneGroup id="presses" label="Press shop">
+        <Lane id="press-1" label="Press 1" />
+        <Lane id="press-2" label="Press 2" />
+      </LaneGroup>
+      <Lane id="weld" label="Welding bay" />
+      <Lane id="paint" label="Paint shop" />
+      <Subtasks data={STEPS} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Hall, line, machine
+
+```tsx
+import { Lane, LaneGroup, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* Groups nest, to any depth, because plants do: a hall holds lines, a line
+   holds machines. Each level indents its header by one step, and each says how
+   many lanes lie under it - however deep.
+
+   Fold the inner line and the hall stays open around it. Fold the hall and the
+   line goes with it: what the reader sees is one row for the whole hall. The
+   inner fold is not forgotten while that happens - open the hall again and the
+   line is still folded, because folding the hall never touched the line's own
+   state. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: Subtask[] = [
+  { id: "s1", task: "a-2041", lane: "lathe-1", from: at(7), to: at(9) },
+  { id: "s2", task: "a-2043", lane: "lathe-2", from: at(8), to: at(10, 30) },
+  { id: "s3", task: "a-2041", lane: "mill", from: at(9, 30), to: at(11, 30) },
+  { id: "s4", task: "a-2043", lane: "press-1", from: at(11), to: at(13) },
+  { id: "s5", task: "a-2041", lane: "paint", from: at(12), to: at(14) },
+];
+
+export default function Nesting() {
+  return (
+    <Schedule ariaLabel="A hall with a turning line and a press, and a paint shop outside it" initialDomain={[at(6), at(15)]} height={330} headerWidth={200}>
+      <LaneGroup id="hall-a" label="Hall A">
+        <LaneGroup id="turning" label="Turning line">
+          <Lane id="lathe-1" label="Lathe 1" />
+          <Lane id="lathe-2" label="Lathe 2" />
+          <Lane id="mill" label="Mill" />
+        </LaneGroup>
+        <Lane id="press-1" label="Press 1" />
+      </LaneGroup>
+      <Lane id="paint" label="Paint shop" />
+      <Subtasks data={STEPS} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Which groups are folded, controlled
+
+```tsx
+import { useState } from "react";
+import { Button, Stack, Text } from "@umriss-ui/core";
+import { Lane, LaneGroup, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `collapsedGroups`, `defaultCollapsedGroups` and `onCollapsedGroupsChange`
+   are the shape `selectedTask` has: leave them out and the schedule keeps the
+   state itself; pass a list and the application owns it.
+
+   Owning it is worth something. The list can be stored with the planner's
+   other preferences, put in the address, or handed to a second schedule so two
+   views fold together. Here two buttons move it from outside, and the readout
+   is the application's own state.
+
+   It is NOT an intent. An intent asks to change the plan, and a caller that
+   applies every intent it receives must never find a fold among them: folding
+   says what is on screen and nothing about what the plant is doing. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [{ id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const STEPS: Subtask[] = [
+  { id: "s1", task: "a-2041", lane: "press-1", from: at(7), to: at(9) },
+  { id: "s2", task: "a-2041", lane: "press-2", from: at(9, 30), to: at(11) },
+  { id: "s3", task: "a-2041", lane: "weld-1", from: at(11, 30), to: at(13) },
+  { id: "s4", task: "a-2041", lane: "weld-2", from: at(13), to: at(14, 30) },
+];
+
+const ALL = ["presses", "welding"];
+
+export default function Controlled() {
+  const [folded, setFolded] = useState<readonly string[]>(["welding"]);
+
+  return (
+    <Stack gap={3}>
+      <Stack direction="row" gap={2}>
+        <Button size="sm" variant="secondary" onClick={() => setFolded(ALL)} data-fold-all>
+          Fold everything
+        </Button>
+        <Button size="sm" variant="secondary" onClick={() => setFolded([])} data-unfold-all>
+          Unfold everything
+        </Button>
+      </Stack>
+      <Schedule
+        ariaLabel="Two presses and two welding bays, folded from outside"
+        initialDomain={[at(6), at(15)]}
+        height={280}
+        collapsedGroups={folded}
+        onCollapsedGroupsChange={setFolded}
+      >
+        <LaneGroup id="presses" label="Press shop">
+          <Lane id="press-1" label="Press 1" />
+          <Lane id="press-2" label="Press 2" />
+        </LaneGroup>
+        <LaneGroup id="welding" label="Welding">
+          <Lane id="weld-1" label="Bay 1" />
+          <Lane id="weld-2" label="Bay 2" />
+        </LaneGroup>
+        <Subtasks data={STEPS} tasks={TASKS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-folded>
+        {folded.length === 0 ? "nothing folded" : folded.join(", ")}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+##### What a folded group shows
+
+```tsx
+import { useState } from "react";
+import { Lane, LaneGroup, Schedule, Subtasks, Transports, applyIntent, findings } from "@umriss-ui/schedule";
+import { Stack, Text } from "@umriss-ui/core";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* A folded group is not a closed box. It shows a **miniature**: every lane in
+   it as a thin strip, at a smaller scale, with its work in the tasks' own
+   colours. The real work, smaller - not a summary, not a packing, not a
+   utilisation band.
+
+   Fold the hall and watch what survives. The transport from the saw still
+   arrives, at the strip of the machine it arrives at. The overlap on the mill
+   is still marked, on the strip AND on the row, because folding is a planner
+   tidying the view and must never be a planner hiding a finding. Hover a strip
+   and the tooltip names the stop; click it and its whole task is outlined
+   across the plan.
+
+   What a strip does NOT show is everything that needs room to be read: no
+   appearance, no label, no progress rail, and no grips - a bar three pixels
+   high is not something to stretch by three pixels. That is what unfolding is
+   for.
+
+   A drag held over the folded hall opens it for the gesture, so work can be
+   moved into a group without preparing the view first. It shuts again when the
+   drag ends - the application did not fold anything, so its own list is never
+   written to and it hears nothing.
+
+   `findings()` is the proof that nothing moved: the list below is computed
+   from the data and does not change by one entry when the hall folds. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6, 30), to: at(8), teardown: min(15) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(9), to: at(11, 30), setup: min(30) },
+  { id: "a-2043-1", task: "a-2043", lane: "lathe", from: at(7), to: at(9) },
+  /* Claims the mill while the housing still has it: an overlap, on purpose. */
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(11), to: at(13), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(13, 30), to: at(15) },
+];
+
+const MOVES: Transport[] = [
+  /* Out of the saw, which stands outside the hall, into a machine inside it. */
+  { id: "t-1", from: "a-2041-1", to: "a-2041-2", duration: min(20) },
+  { id: "t-2", from: "a-2043-1", to: "a-2043-2", duration: min(30) },
+  { id: "t-3", from: "a-2043-2", to: "a-2043-3", duration: min(20) },
+];
+
+const FOUND = findings(STEPS, MOVES);
+
+export default function TheMiniature() {
+  const [folded, setFolded] = useState<readonly string[]>(["hall"]);
+  const [work, setWork] = useState<readonly Subtask[]>(STEPS);
+  const [last, setLast] = useState("Hold a bar over the folded hall");
+
+  return (
+    <Stack gap={3}>
+      <Schedule
+        ariaLabel="A hall that folds into one row"
+        initialDomain={[at(6), at(16)]}
+        height={240}
+        collapsedGroups={folded}
+        onCollapsedGroupsChange={setFolded}
+        intents={["move", "lane"]}
+        onIntent={(intent) => {
+          if (intent.kind === "place") return;
+          setWork((current) => current.map((step) => applyIntent(step, intent)));
+          setLast(`${intent.subtask}: ${intent.kind}`);
+        }}
+      >
+        <Lane id="saw" label="Saw 1" />
+        <LaneGroup id="hall" label="Hall A">
+          <Lane id="lathe" label="Lathe 1" />
+          <Lane id="mill" label="Mill" />
+        </LaneGroup>
+        <Lane id="paint" label="Paint shop" />
+        <Transports data={MOVES} />
+        <Subtasks data={work} tasks={TASKS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-last-move>
+        {last}
+      </Text>
+      <Text size="sm" mono tone="secondary" data-findings-count>
+        {FOUND.overlaps.length} overlap and {FOUND.lateTransports.length} late transport - folded or not
+      </Text>
+    </Stack>
+  );
+}
+```
+
+#### API
+
+##### `LaneGroupProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` (required) | `string` | — | The group's identity - what `collapsedGroups` names. It is never a lane: no subtask sits on it, no finding is reported for it, and no intent names it (ADR-0025). |
+| `label` | `ReactNode` | — | What the group's header says - the hall, the line, the machine group. Real text, read by a screen reader; without one the header shows the id. |
+| `children` | `ReactNode` | — | `Lane`s and further `LaneGroup`s, to any depth. |
+
+#### Why it is like this
+
+##### A folded group keeps every bar its place
+
+Folding is how a planner who works on the presses stops scrolling past the rest of the plant. It must not also be how they stop seeing it. So a folded group is not a closed box: it is a **miniature** - every lane in it as a thin strip, at a smaller scale, with its work in the tasks' own colours. The real work, smaller.
+
+Everything that was true of a bar stays true of its strip. A transport arrives at the strip of the machine it arrives at, not at the top of the group. An overlap is marked on the strip *and* on the row, because a three-pixel strip is not where an alarm can live alone. Hover names the stop; a click takes its whole task across the plan. And `findings()` returns the same list folded and unfolded, because it is computed from the data and folding is not data.
+
+##### A change of scale, not an arrangement
+
+This is where the component's two standing sentences would be easiest to break, and they are not broken. **A lane is not a row**: a strip is still that machine, and every real lane still resolves to exactly one place. **An overlap is never packed into sub-lanes**: nothing is moved to make anything fit - every bar keeps the time it has and the strip its lane has, smaller.
+
+##### What it costs, said plainly
+
+A strip shows what needs no room: where the work is and whose it is. It shows no appearance, no bar label and no progress rail, and it offers no grips - a bar three pixels high is not something to stretch by three pixels. That is what unfolding is for, and it is one click or one keystroke away.
+
+Nor is there a summary of any kind on a folded group - no band of how busy it is, no bar spanning its work. A summary is a claim the schedule computes, and once both are bars a planner cannot tell a computed claim from a drawn fact. See `docs/adr/0025-a-lane-group-is-structure-over-lanes-never-a-lane.md`.
+
+### Time axis and calendar
+
+The two bands, and the operating calendar that cuts the hours the plant does not run out of the axis.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/time-axis
+
+#### Examples
+
+##### Nights cut out of the axis
+
+```tsx
+import { useState } from "react";
+import { Lane, Schedule, Subtasks, Transports, applyIntent } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* The plant runs two shifts, 06:00 to 22:00. An operating calendar lists the
+   intervals in which time counts, and the axis leaves the rest out: three days
+   in the width of two, and no empty night between the evening's work and the
+   morning's. A dotted line marks each seam, because an axis that takes time
+   out and does not say so claims a continuity it does not have.
+
+   The calendar is a list of intervals and nothing more. Deriving it from a
+   shift plan with its holidays is the application's business - the schedule
+   draws what the list says.
+
+   Editing follows the calendar: drag the casting into the night and the ghost
+   stops at the seam where time counts again, so an intent never asks for a
+   time the plant does not run. */
+
+const at = (day: number, hours: number, minutes = 0) => new Date(2026, 2, 16 + day, hours, minutes).getTime();
+
+const SHIFTS = [0, 1, 2].map((day) => ({ from: at(day, 6), to: at(day, 22) }));
+
+const TASKS: Task[] = [{ id: "casting", color: "light-dark(#c2410c, #f08a52)" }];
+
+const STEPS: Subtask[] = [
+  { id: "pour", task: "casting", lane: "foundry", from: at(0, 18), to: at(0, 21, 30), setup: 30 * 60_000 },
+  { id: "fettle", task: "casting", lane: "fettling", from: at(1, 6, 30), to: at(1, 11), setup: 15 * 60_000 },
+  { id: "machine", task: "casting", lane: "machining", from: at(1, 20), to: at(2, 9), teardown: 30 * 60_000 },
+];
+
+const MOVES: Transport[] = [
+  { id: "cool", from: "pour", to: "fettle", duration: 20 * 60_000 },
+  { id: "carry", from: "fettle", to: "machine", duration: 45 * 60_000 },
+];
+
+export default function OperatingCalendar() {
+  const [steps, setSteps] = useState<readonly Subtask[]>(STEPS);
+  return (
+    <Schedule
+      ariaLabel="Three days of casting, nights removed"
+      initialDomain={[at(0, 6), at(2, 22)]}
+      calendar={SHIFTS}
+      height={220}
+      intents={["move"]}
+      onIntent={(intent) => setSteps((current) => current.map((step) => applyIntent(step, intent)))}
+    >
+      <Lane id="foundry" label="Foundry" />
+      <Lane id="fettling" label="Fettling" />
+      <Lane id="machining" label="Machining" />
+      <Transports data={MOVES} />
+      <Subtasks data={steps} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+### Pan and zoom
+
+Dragging the background, the wheel, Ctrl and a pinch: what moves the view, and what the view never changes.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/pan-and-zoom
+
+#### Examples
+
+##### Moving through the plan
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* Nothing here is configured. A schedule pans and zooms because that is what a
+   plan is for, and the gestures are the ones every scrolling surface has:
+
+     drag the background     pans through time AND through the lanes
+     the wheel               scrolls the lanes, and releases the page at the end
+     Shift with the wheel    pans through time
+     Ctrl or Cmd with it     zooms; a trackpad pinch arrives the same way
+     two fingers             zoom
+
+   The wheel releasing the page is the part worth saying out loud: a plan
+   halfway down a page must not swallow the scroll that was meant for the page.
+   Once the lanes are at their end, the wheel goes back to the document.
+
+   What moves is the VIEW and only the view. No data changes, nothing is
+   reported, no intent is raised: pan and zoom exchange the visible span and
+   the scroll, and nothing else (ADR-0001). `zoomLimits` says how far the span
+   may be taken - an hour to twenty-eight days, unless a caller says otherwise;
+   this one is held between two hours and two days, so the ends are reachable
+   in a few turns of the wheel. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+const HOUR = 60 * 60_000;
+
+const TASKS: Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+];
+
+const STEPS: Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(12), to: at(13, 30), setup: min(15) },
+];
+
+export default function PanAndZoom() {
+  return (
+    <Schedule
+      ariaLabel="A plan to pan and zoom"
+      initialDomain={[at(5, 30), at(18)]}
+      height={196}
+      zoomLimits={{ min: 2 * HOUR, max: 48 * HOUR }}
+    >
+      {STATIONS.map((station) => (
+        <Lane key={station.id} id={station.id} label={station.label} />
+      ))}
+      <Subtasks data={STEPS} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+### Now line
+
+A line across the lanes at the present moment, following the clock or fixed where a replay needs it.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/now-line
+
+#### Examples
+
+##### Where the present stands
+
+```tsx
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* `now` draws a line across the lanes at the present moment, and a mark where
+   it meets the time band. Everything to its left should have happened; what
+   still stands there in full colour is late, and a planner sees it at once.
+
+   In an application you write `now` and nothing else: it reads the clock and
+   moves on by the minute, so a schedule left open on a wall screen stays true.
+   This plan is a fixed Tuesday in March, and the real clock would put the line
+   outside it - where it would be as useless as the plan is old. An instant
+   instead of `true` fixes the line where it belongs, which is also what a
+   replay of a past shift needs, and what makes a picture of it hold still. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2041-1", from: "a-2041-1", to: "a-2041-2", duration: min(10) },
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+];
+
+const HALF_PAST_TEN = new Date(2026, 2, 17, 10, 30).getTime();
+
+export default function NowLine() {
+  return (
+    <Schedule
+      ariaLabel="Plan of Tuesday, 17 March, with the present"
+      initialDomain={DAY_OF_PLAN}
+      height={196}
+      now={HALF_PAST_TEN}
+    >
+      {STATIONS.map((station) => (
+        <Lane key={station.id} id={station.id} label={station.label} />
+      ))}
+      <Transports data={MOVES} />
+      <Subtasks data={STEPS} tasks={ORDERS} />
+    </Schedule>
+  );
+}
+```
+
+### Subtasks
+
+The drawn intervals: a main time with its setup and teardown, in the colour of the task they belong to.
+
+```ts
+import { Subtasks } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/subtasks
+
+#### Examples
+
+##### Main time, setup and teardown
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* A subtask is a main time with an optional setup before it and a teardown
+   after it. The main time is drawn full, setup and teardown faint in the same
+   colour with an edge: preparation reads as belonging to the work, and as not
+   being it.
+
+   Both are durations beside the main time, not times of their own - moving
+   the subtask takes them along, and each is changed on its own (see Intent). */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "housing", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const WORK: Subtask[] = [
+  { id: "plain", task: "housing", lane: "mill", from: at(6, 30), to: at(8) },
+  { id: "with-setup", task: "housing", lane: "mill", from: at(9), to: at(10, 30), setup: min(30) },
+  { id: "with-both", task: "housing", lane: "mill", from: at(11, 30), to: at(13), setup: min(20), teardown: min(40) },
+];
+
+export default function SetupAndTeardown() {
+  return (
+    <Schedule ariaLabel="Three subtasks on the mill" initialDomain={[at(6), at(14, 30)]} height={110}>
+      <Lane id="mill" label="Mill" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Colour is the task's
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* Every subtask of a task shares one colour, and the colour is the caller's:
+   any CSS colour, a token of the application, a `light-dark()` pair. Here it
+   means the order's priority rather than the order itself - two rush orders in
+   the danger colour, the rest in the accent.
+
+   A subtask whose task is not in `tasks` is drawn muted: it is on the plan, and
+   nobody said what it is. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [
+  { id: "rush-1", color: "var(--u-color-danger)" },
+  { id: "rush-2", color: "var(--u-color-danger)" },
+  { id: "normal", color: "var(--u-color-accent)" },
+];
+
+const WORK: Subtask[] = [
+  { id: "r1-a", task: "rush-1", lane: "saw", from: at(6), to: at(7) },
+  { id: "r1-b", task: "rush-1", lane: "lathe", from: at(7, 30), to: at(9) },
+  { id: "r2-a", task: "rush-2", lane: "saw", from: at(7, 15), to: at(8, 15) },
+  { id: "n-a", task: "normal", lane: "lathe", from: at(9, 30), to: at(11) },
+  { id: "unknown", task: "not-listed", lane: "saw", from: at(9), to: at(10, 30) },
+];
+
+export default function TaskColours() {
+  return (
+    <Schedule ariaLabel="Rush orders among the rest" initialDomain={[at(5, 30), at(11, 30)]} height={150}>
+      <Lane id="saw" label="Saw" />
+      <Lane id="lathe" label="Lathe" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+#### API
+
+##### `SubtasksProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` (required) | `readonly Subtask[]` | — | The subtasks, as the caller holds them. The schedule never changes one. |
+| `tasks` (required) | `readonly Task[]` | — | The tasks the subtasks belong to - their identity and their colour. A subtask whose task is not among them is drawn in a muted colour. |
+
+##### `Subtask`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` (required) | `string` | — | The caller's identity of the subtask. |
+| `task` (required) | `string` | — | The id of the task it belongs to. |
+| `lane` (required) | `string` | — | The id of the lane it sits on. |
+| `from` (required) | `number` | — | Start of the main time. |
+| `to` (required) | `number` | — | End of the main time. |
+| `setup` | `number` | — | Duration of the setup before the main time; none is zero. |
+| `teardown` | `number` | — | Duration of the teardown after the main time; none is zero. |
+| `name` | `string` | — | What the subtask is called, where the schedule names it. |
+| `appearance` | `readonly SubtaskAppearance[]` | — | What the bar says besides its colour: `"provisional"`, `"fixed"`, `"muted"`, `"open"`. Several hold at once; `"provisional"` and `"fixed"` contradict, and the later one in the list wins. |
+| `progress` | `number` | — | The share of the work that is done, from 0 to 1, drawn as a filled part of the bar. Without it nothing is claimed - an empty bar and a bar at zero per cent are two different statements. |
+
+##### `Task`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` (required) | `string` | — | The caller's identity of the task. |
+| `color` (required) | `string` | — | Any CSS colour - a literal, a token, `light-dark(…)`. The colour means what the caller's domain needs it to mean. |
+| `name` | `string` | — | What the task is called, where the schedule names it. |
+
+### Bar labels
+
+What stands written in a bar - cut off where it must be, left out where it would say nothing, held at the view's edge.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/bar-labels
+
+#### Examples
+
+##### What a bar says
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `label` writes a line into every bar: the order, the article, the quantity -
+   whatever a planner reads first. The text lies on the main time, because the
+   setup is not the work.
+
+   It is cut off with an ellipsis where the bar is too narrow, and left out
+   where even a word and an ellipsis would say nothing - the inspections at the
+   bottom are minutes long, and a row of dots in them would be worse than
+   nothing. A bar that begins before the view keeps its text at the edge, the
+   way the day band keeps its date: pan into the afternoon and watch the labels
+   stay.
+
+   The text's colour follows the bar's: the schedule reads the brightness of
+   the colour the caller gave the task and puts light text on a dark bar and
+   dark text on a pale one. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "qa", label: "Inspection" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2044", name: "A-2044 Flange", color: "light-dark(#7c3aed, #a98bfa)" },
+  { id: "a-2046", name: "A-2046 Axle", color: "light-dark(#4d7c0f, #8fc43e)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2044-2", task: "a-2044", lane: "press", from: at(9, 30), to: at(10, 45), setup: min(25) },
+  { id: "a-2041-3", task: "a-2041", lane: "qa", from: at(11, 30), to: at(12, 15) },
+  { id: "a-2046-3", task: "a-2046", lane: "qa", from: at(15), to: at(15, 30) },
+];
+
+const ORDER_NAMES = new Map(ORDERS.map((order) => [order.id, order.name ?? order.id]));
+
+export default function BarLabels() {
+  return (
+    <Schedule
+      ariaLabel="Plan of Tuesday, 17 March, with the orders written in"
+      initialDomain={DAY_OF_PLAN}
+      height={196}
+      label={(subtask) => ORDER_NAMES.get(subtask.task) ?? subtask.task}
+    >
+      {STATIONS.map((station) => (
+        <Lane key={station.id} id={station.id} label={station.label} />
+      ))}
+      <Subtasks data={STEPS} tasks={ORDERS} />
+    </Schedule>
+  );
+}
+```
+
+### Appearances
+
+What a bar says besides its colour: provisional, fixed, another shift's, running on - one channel of the drawing each.
+
+```ts
+import { Subtasks, resolveAppearance } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/appearances
+
+#### Examples
+
+##### Provisional: planned, not released
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `"provisional"` owns the FILL, and has none: the surface shows straight
+   through, with a dashed outline in the task's colour at full weight.
+
+   Empty, and not pale. A pale fill of the task colour already means something
+   in this picture - a setup or a teardown - and the released bar above carries
+   both, so the two statements stand side by side and cannot be mistaken for
+   one another. That was worth a channel of its own: a planner who has to ask
+   whether a faint end is preparation or a draft has lost the glance the plan
+   was drawn for. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "order", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const WORK: Subtask[] = [
+  { id: "released", task: "order", lane: "released", from: at(7), to: at(10), setup: min(30), teardown: min(30) },
+  { id: "draft", task: "order", lane: "draft", from: at(7), to: at(10), appearance: ["provisional"] },
+];
+
+export default function Provisional() {
+  return (
+    <Schedule ariaLabel="Released work above, provisional work below" initialDomain={[at(6, 30), at(11)]} height={144}>
+      <Lane id="released" label="Released, with setup" />
+      <Lane id="draft" label="Provisional" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Fixed: work that may not move
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `"fixed"` owns the ENDS: a cap at each end of the main time, three pixels
+   wide, in the colour the bar's own label takes, set just inside the end so
+   that the bar's colour frames it.
+
+   At its ends and not across its face, for two reasons. The statement is about
+   where the work begins and ends - that is where it is nailed down. And the
+   face belongs to the label: a pattern over the whole bar is the loudest mark
+   in the picture for the calmest thing it has to say, and it lies under the
+   word a planner came to read. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [{ id: "order", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const WORK: Subtask[] = [
+  { id: "movable", task: "order", lane: "movable", from: at(7), to: at(10) },
+  { id: "nailed", task: "order", lane: "nailed", from: at(7), to: at(10), appearance: ["fixed"] },
+];
+
+export default function Fixed() {
+  return (
+    <Schedule
+      ariaLabel="Work that may move above, fixed work below"
+      initialDomain={[at(6, 30), at(11)]}
+      height={144}
+      label={(subtask) => (subtask.id === "nailed" ? "A-2041 · fixed" : "A-2041")}
+    >
+      <Lane id="movable" label="May move" />
+      <Lane id="nailed" label="Fixed" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Muted: another shift's work
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `"muted"` owns the SATURATION: the task's colour mixed half into the
+   surface, at full height, opaque, and with no outline.
+
+   Full height, because a bar drawn half as high reads as a different KIND of
+   thing, and loses its label with its room. Opaque and unoutlined, because
+   transparency and an edge are what a setup is made of - and this example puts
+   a setup right beside it so the difference has to hold. Another crew's plan
+   should step back; it should not turn into preparation on the way. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "order", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const WORK: Subtask[] = [
+  { id: "ours", task: "order", lane: "ours", from: at(7), to: at(10), setup: min(30) },
+  { id: "theirs", task: "order", lane: "theirs", from: at(7), to: at(10), setup: min(30), appearance: ["muted"] },
+];
+
+export default function Muted() {
+  return (
+    <Schedule
+      ariaLabel="This shift's work above, another shift's below"
+      initialDomain={[at(6, 30), at(11)]}
+      height={144}
+      label={() => "A-2041 Housing"}
+    >
+      <Lane id="ours" label="This shift" />
+      <Lane id="theirs" label="Another shift" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Progress: how far the work has got
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `progress` is not an appearance but a share from 0 to 1, and it owns a RAIL:
+   a band inside the main time, set in from the bar's lower edge so that it is
+   a mark ON the bar and not the bar's own edge.
+
+   Inside the main time, and stopping where it stops: progress measures the
+   WORK, and a rail running on under the teardown would be measuring the
+   clearing away as well. The bar below carries a teardown, so that can be
+   seen.
+
+   A rail rather than a paler remainder, for the reason every appearance here
+   has: a paler part of a bar is preparation in this picture.
+
+   Leaving `progress` out claims nothing at all. A bar at zero per cent and a
+   bar that says nothing about progress are two different statements, and the
+   top lane is the second of them. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "order", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const WORK: Subtask[] = [
+  { id: "unclaimed", task: "order", lane: "unclaimed", from: at(7), to: at(10) },
+  { id: "started", task: "order", lane: "started", from: at(7), to: at(10), progress: 0.65, teardown: min(30) },
+];
+
+export default function Progress() {
+  return (
+    <Schedule ariaLabel="Work claiming nothing above, work at 65 per cent below" initialDomain={[at(6, 30), at(11)]} height={144}>
+      <Lane id="unclaimed" label="Says nothing" />
+      <Lane id="started" label="65 per cent done" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Open: work that goes on past the view
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `"open"` owns the FADE: where the bar passes the edge of the view it fades
+   into the surface instead of ending in an edge a reader would take for its
+   end.
+
+   At WHICHEVER edge it passes, left as well as right. An edge of the screen is
+   an edge of the screen on both sides, and a bar that began before the view
+   used to say nothing at all about it - the bottom lane is that case.
+
+   The middle lane passes neither edge, and carries no fade at all. That is not
+   an omission: the fade says "the edge of the screen is not the end of this
+   work", and a bar whose ends are both in view has no such edge to speak
+   about. Zoom out until it does and the fade appears. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [{ id: "order", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const WORK: Subtask[] = [
+  { id: "runs-on", task: "order", lane: "runs-on", from: at(7), to: at(13), appearance: ["open"] },
+  /* Wholly in view: both its ends are there to be seen, so there is no edge
+     of the screen to say anything about. */
+  { id: "whole", task: "order", lane: "whole", from: at(7), to: at(10), appearance: ["open"] },
+  { id: "began", task: "order", lane: "began", from: at(4), to: at(10), appearance: ["open"] },
+];
+
+export default function Open() {
+  return (
+    <Schedule ariaLabel="Work running past the view at either edge" initialDomain={[at(6, 30), at(11)]} height={188}>
+      <Lane id="runs-on" label="Runs on" />
+      <Lane id="whole" label="Wholly in view" />
+      <Lane id="began" label="Began before" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Several statements on one bar
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* A bar rarely has only one thing to say. Another shift's work may be frozen
+   and may run past the view, all at once - and it must then still read as
+   three statements and not as a smear.
+
+   It can, because each of them owns a different property of the drawing. The
+   saturation is muted, the ends are fixed, the edge of the view is open:
+   nothing is painted twice over, so nothing cancels anything out. That is the
+   whole reason the list is built that way, and this is the picture that proves
+   it.
+
+   Two of them are settled before the drawing begins. `"provisional"` and
+   `"fixed"` contradict - work cannot be planned and frozen at once - so the
+   later one in the list wins, and the bar shows exactly one of the two. The
+   rule is `resolveAppearance`; it is the caller's to read as well.
+
+   One combination has a visible order of its own: a FIXED bar that runs past
+   the view loses its cap at that edge. The fade is painted after the caps
+   because that is the truth of it - there is no end there to mark. The cap it
+   still carries is the end that really is in view.
+
+   The labels are here for one more reason. A bar's label takes whatever colour
+   reads on the bar, and a hollow bar is the surface - so provisional work is
+   labelled in the ordinary text colour, and a muted bar in whatever reads on
+   its mix. No bar loses its label to an appearance any more. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [
+  { id: "own", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "other", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const WORK: Subtask[] = [
+  /* Three statements, three channels: paler colour, capped ends, faded edge. */
+  {
+    id: "all-three",
+    task: "other",
+    lane: "all-three",
+    from: at(7),
+    to: at(13),
+    appearance: ["fixed", "muted", "open"],
+    setup: 30 * 60_000,
+  },
+  /* Provisional work that has got somewhere: the rail lies on the surface the
+     hollow bar leaves, in the colour text takes there. */
+  { id: "planned", task: "own", lane: "planned", from: at(7), to: at(10), appearance: ["provisional"], progress: 0.4 },
+  /* Both, in this order: `"fixed"` is the later word, so this bar is fixed. */
+  { id: "settled", task: "own", lane: "settled", from: at(7), to: at(10), appearance: ["provisional", "fixed"] },
+  /* And the other way round, which makes it provisional. */
+  { id: "reopened", task: "own", lane: "reopened", from: at(7), to: at(10), appearance: ["fixed", "provisional"] },
+];
+
+/** What stands in each bar. */
+const NAMES: Record<string, string> = {
+  "all-three": "A-2043 · night shift",
+  planned: "A-2041 · draft",
+  settled: "A-2041 · released",
+  reopened: "A-2041 · reopened",
+};
+
+const LANES = [
+  { id: "all-three", label: "Another shift, fixed, runs on" },
+  { id: "planned", label: "Provisional, 40 per cent" },
+  { id: "settled", label: "provisional then fixed" },
+  { id: "reopened", label: "fixed then provisional" },
+];
+
+export default function Combinations() {
+  return (
+    <Schedule
+      ariaLabel="Bars carrying several appearances at once"
+      initialDomain={[at(6, 30), at(11)]}
+      height={230}
+      label={(subtask) => NAMES[subtask.id] ?? subtask.id}
+    >
+      {LANES.map((lane) => (
+        <Lane key={lane.id} id={lane.id} label={lane.label} />
+      ))}
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+### Overlap
+
+Two subtasks claiming one lane at one time: offset, marked, and never packed into sub-lanes.
+
+```ts
+import { Subtasks } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/overlap
+
+#### Examples
+
+##### An overlap is a finding
+
+```tsx
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* Two subtasks that claim the same lane at the same time are both drawn: the
+   later one offset a few pixels and edged, the time they share marked across
+   the lane. They are never packed into sub-lanes - packing would turn the
+   double booking into layout and hide it.
+
+   Setup and teardown occupy the lane: the second pair below overlaps only
+   where one's teardown meets the other's setup, and that is an overlap too. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [
+  { id: "first", color: "light-dark(#0d9488, #3cc7b8)" },
+  { id: "second", color: "light-dark(#be185d, #f06aa6)" },
+];
+
+const WORK: Subtask[] = [
+  { id: "a", task: "first", lane: "press-1", from: at(7), to: at(9, 30) },
+  { id: "b", task: "second", lane: "press-1", from: at(8, 30), to: at(10, 30) },
+  { id: "c", task: "first", lane: "press-2", from: at(7), to: at(8, 30), teardown: min(30) },
+  { id: "d", task: "second", lane: "press-2", from: at(9, 15), to: at(10, 45), setup: min(30) },
+];
+
+export default function Overlap() {
+  return (
+    <Schedule ariaLabel="Two overlaps on two presses" initialDomain={[at(6, 30), at(11, 30)]} height={150}>
+      <Lane id="press-1" label="Press 1" />
+      <Lane id="press-2" label="Press 2" />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+#### Why it is like this
+
+##### An overlap is never packed into sub-lanes
+
+Every calendar you have used solves an overlap by splitting the column: two appointments at ten o'clock become two half-width boxes side by side. That is right for a calendar, where a column is a *day* and both things can happen. It is wrong for a plan, where a lane is a **machine** and both things cannot.
+
+Packing would make the picture tidy and the plan a lie: a planner would see two boxes that fit and read them as work that fits. So the bars stay where their times put them, each offset a few pixels below the last so that all of them can be seen and hit, and the shared time is marked underneath. The tidiness is given up on purpose.
+
+##### The offset has a floor and a ceiling
+
+Three levels of offset, and no more. A bar is made short enough that the deepest one still lies inside its lane, so an overlap never leaks into the machine below - which would be the same lie in a different direction.
+
+### Transports
+
+A task's moves between its subtasks, from an end to a start - with what they connect and where their lines touch.
+
+```ts
+import { Transports } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/transports
+
+#### Examples
+
+##### Where a transport anchors
+
+```tsx
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* A transport runs from one subtask's end to the next one's start - there is
+   no other kind. Where exactly is declared per transport: `leaves` at the end of
+   the main time or after the teardown, `arrives` at the start of the main time
+   or before the setup. The default is the outer pair: the part leaves once the
+   machine is cleared and must be there before the next one is set up.
+
+   The anchor is what the finding is judged by, so it should say what the
+   transport really connects. Above the default, below a transport that leaves
+   straight from the main time and arrives at it. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [
+  { id: "outer", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "inner", color: "light-dark(#4d7c0f, #8fc43e)" },
+];
+
+const WORK: Subtask[] = [
+  { id: "o-1", task: "outer", lane: "lathe", from: at(7), to: at(8, 30), teardown: min(30) },
+  { id: "o-2", task: "outer", lane: "mill", from: at(10, 30), to: at(12), setup: min(30) },
+  { id: "i-1", task: "inner", lane: "lathe", from: at(12), to: at(13, 30), teardown: min(30) },
+  { id: "i-2", task: "inner", lane: "mill", from: at(15), to: at(16), setup: min(30) },
+];
+
+const MOVES: Transport[] = [
+  { id: "outer-move", from: "o-1", to: "o-2", duration: min(60) },
+  { id: "inner-move", from: "i-1", to: "i-2", duration: min(60), leaves: "main", arrives: "main" },
+];
+
+export default function Anchors() {
+  return (
+    <Schedule ariaLabel="Two transports with different anchors" initialDomain={[at(6, 30), at(16, 30)]} height={150}>
+      <Lane id="lathe" label="Lathe" />
+      <Lane id="mill" label="Mill" />
+      <Transports data={MOVES} />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+##### Where a line touches its bars
+
+```tsx
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport, TransportAttachment } from "@umriss-ui/schedule";
+
+/* `attach` says where a transport's line begins and ends ON the bars: the
+   `"centre"` of both, or the `"nearest"` edge - the one facing the other stop.
+
+   `"nearest"` is the interesting one. A line leaves the lower edge of the
+   upper bar and meets the upper edge of the lower one, so a short move between
+   two neighbouring lanes is drawn as the short line it is instead of swinging
+   out of its lane and back. Within one lane there is no nearer edge, and both
+   mean the middle.
+
+   Not to be confused with the two ANCHORS, which say what a transport
+   connects and therefore whether it is late. This says only where the line
+   touches, and changes no finding. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "frame", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const STEPS: Subtask[] = [
+  { id: "saw", task: "frame", lane: "saw", from: at(7), to: at(8, 30) },
+  { id: "mill", task: "frame", lane: "mill", from: at(9), to: at(10, 30) },
+  { id: "press", task: "frame", lane: "press", from: at(11), to: at(12) },
+  /* Back up to the saw's lane: this is the move whose edges the attach
+     decides. */
+  { id: "check", task: "frame", lane: "saw", from: at(12, 30), to: at(13) },
+];
+
+const MOVES: Transport[] = [
+  { id: "to-mill", from: "saw", to: "mill", duration: min(20) },
+  { id: "to-press", from: "mill", to: "press", duration: min(20) },
+  { id: "to-check", from: "press", to: "check", duration: min(20) },
+];
+
+function Variant({ attach }: { attach: TransportAttachment }) {
+  return (
+    <Stack gap={1}>
+      <Text size="xs" tone="muted" mono>
+        attach=&quot;{attach}&quot;
+      </Text>
+      <Schedule ariaLabel={`A frame through three stations, lines from the ${attach}`} initialDomain={[at(6, 30), at(13, 30)]} height={188} attach={attach}>
+        <Lane id="saw" label="Saw" />
+        <Lane id="mill" label="Mill" />
+        <Lane id="press" label="Press" />
+        <Transports data={MOVES} />
+        <Subtasks data={STEPS} tasks={TASKS} />
+      </Schedule>
+    </Stack>
+  );
+}
+
+export default function Attach() {
+  return (
+    <Stack gap={4}>
+      <Variant attach="centre" />
+      <Variant attach="nearest" />
+    </Stack>
+  );
+}
+```
+
+##### Whether the ends carry a dot
+
+```tsx
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport, TransportEnds } from "@umriss-ui/schedule";
+
+/* `ends` decides whether a transport's two ends are marked with a dot. The dot
+   says where the line is anchored - a help while a plan is being read, and
+   noise in a plan full of short moves. So it is the caller's choice, and a
+   single transport may say otherwise for itself.
+
+   Picture only, like `route` and `attach`: no finding follows from it. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "frame", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const STEPS: Subtask[] = [
+  { id: "saw", task: "frame", lane: "saw", from: at(7), to: at(8) },
+  { id: "mill", task: "frame", lane: "mill", from: at(8, 30), to: at(9, 30) },
+  { id: "press", task: "frame", lane: "press", from: at(10), to: at(11) },
+];
+
+const MOVES: Transport[] = [
+  { id: "to-mill", from: "saw", to: "mill", duration: min(15) },
+  { id: "to-press", from: "mill", to: "press", duration: min(15) },
+];
+
+function Variant({ ends }: { ends: TransportEnds }) {
+  return (
+    <Stack gap={1}>
+      <Text size="xs" tone="muted" mono>
+        ends=&quot;{ends}&quot;
+      </Text>
+      <Schedule ariaLabel={`Three short moves, ends ${ends}`} initialDomain={[at(6, 30), at(11, 30)]} height={188} attach="nearest" ends={ends}>
+        <Lane id="saw" label="Saw" />
+        <Lane id="mill" label="Mill" />
+        <Lane id="press" label="Press" />
+        <Transports data={MOVES} />
+        <Subtasks data={STEPS} tasks={TASKS} />
+      </Schedule>
+    </Stack>
+  );
+}
+
+export default function Ends() {
+  return (
+    <Stack gap={4}>
+      <Variant ends="dot" />
+      <Variant ends="none" />
+    </Stack>
+  );
+}
+```
+
+##### A transport that cannot arrive in time
+
+```tsx
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* The forklift needs forty minutes from the saw to the press; the plan gives it
+   twenty-five. A late transport is drawn dashed in the colour of a finding, as
+   loud as a double booking, and the schedule moves nothing to make it fit.
+   Whether the press waits or the saw starts earlier is the planner's decision -
+   `ripple` offers the arithmetic for the first. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "frame", color: "light-dark(#c2410c, #f08a52)" }];
+
+const WORK: Subtask[] = [
+  { id: "cut", task: "frame", lane: "saw", from: at(7), to: at(8, 30), teardown: min(5) },
+  { id: "press", task: "frame", lane: "press", from: at(9, 15), to: at(10, 30), setup: min(15) },
+];
+
+const MOVES: Transport[] = [{ id: "forklift", from: "cut", to: "press", duration: min(40) }];
+
+export default function LateTransport() {
+  return (
+    <Schedule ariaLabel="A late transport from the saw to the press" initialDomain={[at(6, 30), at(11)]} height={150}>
+      <Lane id="saw" label="Saw" />
+      <Lane id="press" label="Press" />
+      <Transports data={MOVES} />
+      <Subtasks data={WORK} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+#### API
+
+##### `TransportsProps`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` (required) | `readonly Transport[]` | — | The transports, as the caller holds them. |
+
+##### `Transport`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `id` (required) | `string` | — | The caller's identity of the transport. |
+| `from` (required) | `string` | — | The id of the subtask it leaves. |
+| `to` (required) | `string` | — | The id of the subtask it arrives at. |
+| `duration` (required) | `number` | — | How long the move takes. |
+| `leaves` | `"main" \| "teardown"` | — | Where it leaves: at the end of the main time, or after the teardown. Default `"teardown"` - the part leaves once the machine is cleared. |
+| `arrives` | `"main" \| "setup"` | — | Where it arrives: at the start of the main time, or before the setup. Default `"setup"` - the part must be there before the machine is set up. |
+| `route` | `TransportRoute` | — | How this one is drawn, where it is not drawn like the rest. It changes the picture and never the finding: whether a transport is late follows from `leaves` and `arrives` alone. |
+| `attach` | `TransportAttachment` | — | Where on the bars this one's line attaches, where it does not attach like the rest. Also picture only, and not to be confused with the two anchors above: those say what the transport connects, this says where the line touches. |
+| `ends` | `TransportEnds` | — | Whether this one's ends are marked with a dot, where it is not marked like the rest. Also picture only. |
+
+### Routes
+
+How a transport is drawn between its two ends: a curve that leaves forwards, a straight line, or orthogonal segments.
+
+```ts
+import { Transports } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/routes
+
+#### Examples
+
+##### The shape of a transport's line
+
+```tsx
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport, TransportRoute } from "@umriss-ui/schedule";
+
+/* `route` gives a transport's line its shape, and nothing else:
+
+     "curve"        leaves forwards and arrives forwards - the default
+     "straight"     the shortest line between its two ends
+     "orthogonal"   out of the bar, across, and in again
+
+   A curve that leaves and arrives forwards says which way the work is going,
+   even where the arrival lies before the departure - such a move loops back,
+   which is the picture of what it is. Straight lines suit a plan read from a
+   distance; orthogonal ones suit a plant whose moves really do run along
+   aisles.
+
+   It is the schedule's option, and a single transport may say otherwise for
+   itself. Where its line touches the bars is `attach`, and whether its ends
+   carry a dot is `ends` - both on the Transports page, each its own thing.
+
+   None of the three touches a finding. Whether a transport can arrive in time
+   follows from its `leaves` and `arrives`, which say what it connects; these
+   say only how it looks. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "frame", color: "light-dark(#2563eb, #6b9bff)" }];
+
+const STEPS: Subtask[] = [
+  { id: "saw", task: "frame", lane: "saw", from: at(7), to: at(8, 30) },
+  { id: "mill", task: "frame", lane: "mill", from: at(9), to: at(10, 30) },
+  { id: "press", task: "frame", lane: "press", from: at(11), to: at(12) },
+  { id: "check", task: "frame", lane: "saw", from: at(12, 30), to: at(13) },
+];
+
+const MOVES: Transport[] = [
+  { id: "to-mill", from: "saw", to: "mill", duration: min(20) },
+  { id: "to-press", from: "mill", to: "press", duration: min(20) },
+  /* Back up to the saw's lane: the attach decides which edges this one meets. */
+  { id: "to-check", from: "press", to: "check", duration: min(20) },
+];
+
+function Variant({ route }: { route: TransportRoute }) {
+  return (
+    <Stack gap={1}>
+      <Text size="xs" tone="muted" mono>
+        route=&quot;{route}&quot;
+      </Text>
+      <Schedule
+        ariaLabel={`A frame through three stations, drawn ${route}`}
+        initialDomain={[at(6, 30), at(13, 30)]}
+        height={188}
+        route={route}
+        attach="nearest"
+      >
+        <Lane id="saw" label="Saw" />
+        <Lane id="mill" label="Mill" />
+        <Lane id="press" label="Press" />
+        <Transports data={MOVES} />
+        <Subtasks data={STEPS} tasks={TASKS} />
+      </Schedule>
+    </Stack>
+  );
+}
+
+export default function Routes() {
+  return (
+    <Stack gap={4}>
+      <Variant route="curve" />
+      <Variant route="straight" />
+      <Variant route="orthogonal" />
+    </Stack>
+  );
+}
+```
+
+## Reading
+
+What a planner takes out of the picture: what is selected, what the pointer is on, and what a second view makes of it.
+
+### Selection
+
+A click takes a whole task, across every lane - controlled or kept by the schedule, with the stop that was hit.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/selection
+
+#### Examples
+
+##### Selecting a task
+
+```tsx
+import { useState } from "react";
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* A click on a subtask selects its whole task: every subtask and every
+   transport of it is outlined, across all lanes. A click on a transport selects
+   the task it belongs to, a click on the empty plot clears the selection.
+
+   Here the selection is controlled - `selectedTask` and
+   `onSelectedTaskChange` -, so the application can show what is selected
+   elsewhere. Leave both out and the schedule keeps the selection itself.
+
+   The callback also carries the subtask that was clicked, so an application can
+   show the stop and not only the order; clicking another stop of the same order
+   reports again. Only the task is controlled - which stop is meant follows the
+   pointer. */
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "lathe-1", label: "Lathe 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2042", name: "A-2042 Shaft", color: "light-dark(#0d9488, #3cc7b8)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2042-1", task: "a-2042", lane: "saw", from: at(7, 30), to: at(8, 15), setup: min(10) },
+  { id: "a-2042-2", task: "a-2042", lane: "lathe-1", from: at(9), to: at(11), setup: min(20), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2042-1", from: "a-2042-1", to: "a-2042-2", duration: min(15) },
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  /* Leaves the mill at 11:30 and has ten minutes to reach the paint shop's
+     setup at 11:40 - it takes twenty-five. A late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+];
+
+export default function Selection() {
+  const [selected, setSelected] = useState<string | null>("a-2043");
+  const [stop, setStop] = useState<string | null>(null);
+  const order = ORDERS.find((o) => o.id === selected);
+
+  return (
+    <Stack gap={3}>
+      <Schedule
+        ariaLabel="Plan of Tuesday, 17 March"
+        initialDomain={DAY_OF_PLAN}
+        height={284}
+        selectedTask={selected}
+        onSelectedTaskChange={(task, subtask) => {
+          setSelected(task);
+          setStop(subtask);
+        }}
+      >
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Transports data={MOVES} />
+        <Subtasks data={STEPS} tasks={ORDERS} />
+      </Schedule>
+      <Text size="sm" tone="secondary" data-selected-order>
+        Selected: {order?.name ?? "nothing"}
+        {stop !== null ? `, at ${stop}` : ""}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+### Interactions
+
+Click, context menu and hover, each with its target and its position - for a menu, a detail panel or a status line.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/interactions
+
+#### Examples
+
+##### What the pointer reports
+
+```tsx
+import { useState } from "react";
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { ScheduleInteraction, Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* `onInteraction` hears a click, a context menu and a change of what is under
+   the pointer - each with its target and its position: the subtask and the part
+   of it, the transport, the lane, or nothing; the client point, the time and
+   the lane under it. What the application does with it is its own: open a
+   menu, show a detail, fill a status line like this one.
+
+   While `onInteraction` is set, a right-click opens no browser menu - the
+   application is expected to answer it.
+
+   `onSelectedTaskChange` is the second line below: a click reports the task it
+   selected together with the stop it hit, and clicking another stop of the same
+   task reports again. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "mill", label: "Mill" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2041-1", from: "a-2041-1", to: "a-2041-2", duration: min(10) },
+];
+
+const describe = (interaction: ScheduleInteraction): string => {
+  const { hit } = interaction;
+  /* To the nearest minute: a pixel is about a minute wide here. */
+  const time = new Date(Math.round(interaction.time / 60_000) * 60_000).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+  const target =
+    hit.kind === "subtask"
+      ? `subtask ${hit.subtask.id} (${hit.part})`
+      : hit.kind === "transport"
+        ? `transport ${hit.transport.id}`
+        : hit.kind === "lane"
+          ? `lane ${hit.lane}`
+          : "nothing";
+  return `${interaction.type}: ${target} at ${time}`;
+};
+
+export default function Interactions() {
+  const [last, setLast] = useState("Move the pointer over the plan");
+  const [selected, setSelected] = useState("nothing selected");
+
+  return (
+    <Stack gap={3}>
+      <Schedule
+        ariaLabel="Plan of Tuesday, 17 March"
+        initialDomain={DAY_OF_PLAN}
+        height={152}
+        onInteraction={(interaction) => setLast(describe(interaction))}
+        onSelectedTaskChange={(task, subtask) => setSelected(task === null ? "nothing selected" : `${task} at ${subtask ?? "-"}`)}
+      >
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Transports data={MOVES} />
+        <Subtasks data={STEPS} tasks={ORDERS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-last-interaction>
+        {last}
+      </Text>
+      <Text size="sm" mono tone="secondary" data-selection>
+        {selected}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+#### API
+
+##### `ScheduleInteraction`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `type` (required) | `"click" \| "contextmenu" \| "hover"` | — | `"hover"` is reported when the target under the pointer changes, not on every movement. |
+| `hit` (required) | `ScheduleHit` | — | What the pointer is on. |
+| `clientX` (required) | `number` | — | The pointer's horizontal client coordinate - where a `ContextMenu` opens. |
+| `clientY` (required) | `number` | — | The pointer's vertical client coordinate. |
+| `time` (required) | `number` | — | The wall-clock instant under the pointer. |
+| `lane` (required) | `string \| null` | — | The lane under the pointer, or null below the last one. |
+
+### Tooltip
+
+What the pointer rests on, named with its times and its findings - or replaced by content of the application's own.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/tooltip
+
+#### Examples
+
+##### What the tooltip says
+
+```tsx
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* Resting the pointer on a subtask names the order, the stop, its main time
+   and - where it has them - its setup and teardown, and then every finding on
+   it: with whom it overlaps, and by how much a transport of it is late. Try
+   the bracket in the paint shop at noon, or the housing on the mill at nine.
+
+   On a transport it names where the move goes from and to, how long it takes,
+   and whether it can arrive in time.
+
+   Every word comes from the wording of @umriss-ui/core and every number from
+   its formats, so a provider switches the tooltip with everything else. It
+   steps aside while a drag is in flight, and it is placed from its measured
+   size: beside the pointer where there is room, on the other side where there
+   is not. Nothing here configures it - this is what a schedule does by
+   itself. */
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  /* Leaves the mill at 11:30 and has ten minutes to reach the paint shop's
+     setup at 11:40 - it takes twenty-five. A late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+];
+
+export default function Tooltip() {
+  return (
+    <Schedule ariaLabel="Plan of Tuesday, 17 March, with its tooltip" initialDomain={DAY_OF_PLAN} height={196}>
+      {STATIONS.map((station) => (
+        <Lane key={station.id} id={station.id} label={station.label} />
+      ))}
+      <Transports data={MOVES} />
+      <Subtasks data={STEPS} tasks={ORDERS} />
+    </Schedule>
+  );
+}
+```
+
+##### A tooltip of the application's own
+
+```tsx
+import { Badge, Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports } from "@umriss-ui/schedule";
+import type { ScheduleTooltipTarget, Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* Resting the pointer on a subtask or a transport shows a tooltip: by default
+   the order, the stop, its times, setup and teardown, and every finding on it -
+   try the bracket in the paint shop at noon. Its words come from the provider's
+   wording, so a German application reads it in German.
+
+   `tooltip` takes a function instead, which receives what the pointer rests on
+   together with its findings and returns the application's own content - here
+   a customer that only the application knows. `tooltip={false}` switches it
+   off, for an application with a detail panel of its own. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  /* Leaves the mill at 11:30 and has ten minutes to reach the paint shop's
+     setup at 11:40 - it takes twenty-five. A late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+];
+
+const CUSTOMERS: Record<string, string> = {
+  "a-2041": "Brandt Metalworks",
+  "a-2042": "Keller & Sons",
+  "a-2043": "Northworks",
+  "a-2044": "Brandt Metalworks",
+  "a-2045": "Weiss Hydraulics",
+  "a-2046": "Northworks",
+};
+
+function OrderTooltip({ target }: { target: ScheduleTooltipTarget }) {
+  const task = target.task;
+  const findings = target.kind === "subtask" ? target.overlapping.length + target.lateTransports.length : target.late ? 1 : 0;
+  return (
+    <Stack gap={1}>
+      <Text size="sm" weight="semibold">
+        {task?.name ?? "Unknown order"}
+      </Text>
+      <Text size="xs" tone="secondary">
+        {task ? CUSTOMERS[task.id] : ""}
+      </Text>
+      {findings > 0 && <Badge tone="danger">{findings === 1 ? "1 finding" : `${findings} findings`}</Badge>}
+    </Stack>
+  );
+}
+
+export default function OwnTooltip() {
+  return (
+    <Schedule
+      ariaLabel="Plan of Tuesday, 17 March, with customers"
+      initialDomain={DAY_OF_PLAN}
+      height={196}
+      tooltip={(target) => <OrderTooltip target={target} />}
+    >
+      {STATIONS.map((station) => (
+        <Lane key={station.id} id={station.id} label={station.label} />
+      ))}
+      <Transports data={MOVES} />
+      <Subtasks data={STEPS} tasks={ORDERS} />
+    </Schedule>
+  );
+}
+```
+
+#### API
+
+##### `ScheduleTooltipTarget`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `kind` (required) | `"subtask" \| "transport"` | — | A subtask is hovered. A transport is hovered. |
+| `subtask` | `Subtask` | — | The hovered subtask. |
+| `task` (required) | `Task \| undefined` | — | Its task, where the tasks name it. |
+| `overlapping` | `readonly Subtask[]` | — | The subtasks it overlaps with on its lane. |
+| `lateTransports` | `readonly LateTransport[]` | — | The late transports leaving or reaching it. |
+| `transport` | `Transport` | — | The hovered transport. |
+| `from` | `Subtask \| undefined` | — | The subtask it leaves. |
+| `to` | `Subtask \| undefined` | — | The subtask it reaches. |
+| `late` | `LateTransport \| undefined` | — | Its finding, where it is late. |
+
+### Linked schedules
+
+Two plans of the same hours, kept in step through the span each reports when it is panned or zoomed.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/linked-schedules
+
+#### Examples
+
+##### Two schedules in step
+
+```tsx
+import { useState } from "react";
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* `onDomainChange` reports the visible span after the planner pans or zooms -
+   two wall-clock instants, at most once per frame. Handed to a second schedule
+   as its `initialDomain`, the two move together: pan or zoom either one and the
+   other follows. A span handed in is not reported back, so the two do not feed
+   each other.
+
+   The same span goes to a chart's time axis where an application wants the
+   plan and the measurements of the same hours under one another.
+
+   The two plans can stand a frame apart while a drag is in flight: a span is
+   reported once per frame, and the round trip through the application's state
+   arrives after the plan has moved on. It settles as soon as the drag ends. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "lathe-1", label: "Lathe 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+  { id: "qa", label: "Inspection" },
+];
+
+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)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2041-3", task: "a-2041", lane: "qa", from: at(11, 30), to: at(12, 15) },
+  { id: "a-2042-1", task: "a-2042", lane: "saw", from: at(7, 30), to: at(8, 15), setup: min(10) },
+  { id: "a-2042-2", task: "a-2042", lane: "lathe-1", from: at(9), to: at(11), setup: min(20), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+];
+
+const MACHINES = STATIONS.slice(0, 4);
+const ON_MACHINES = STEPS.filter((step) => MACHINES.some((machine) => machine.id === step.lane));
+const REST = STATIONS.slice(4);
+const ON_REST = STEPS.filter((step) => REST.some((machine) => machine.id === step.lane));
+export default function InStep() {
+  const [domain, setDomain] = useState(DAY_OF_PLAN);
+  return (
+    <Stack gap={2}>
+      <Schedule
+        ariaLabel="The machines of Tuesday, 17 March"
+        initialDomain={domain}
+        height={240}
+        onDomainChange={setDomain}
+      >
+        {MACHINES.map((machine) => (
+          <Lane key={machine.id} id={machine.id} label={machine.label} />
+        ))}
+        <Subtasks data={ON_MACHINES} tasks={ORDERS} />
+      </Schedule>
+      <Schedule ariaLabel="The rest of the plant, the same hours" initialDomain={domain} height={152} onDomainChange={setDomain}>
+        {REST.map((machine) => (
+          <Lane key={machine.id} id={machine.id} label={machine.label} />
+        ))}
+        <Subtasks data={ON_REST} tasks={ORDERS} />
+      </Schedule>
+      <Text size="xs" mono tone="muted" data-span>
+        {new Date(domain[0]).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })} –{" "}
+        {new Date(domain[1]).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+### The handle
+
+The arithmetic between a point on the screen and a time on a lane, for an application's own marks beside the plot.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/handle
+
+#### Examples
+
+##### A mark of the application's own
+
+```tsx
+import { useEffect, useRef, useState } from "react";
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
+import type { ScheduleHandle, Subtask, Task } from "@umriss-ui/schedule";
+
+/* `ScheduleHandle` is everything a schedule offers imperatively, and it is
+   arithmetic and nothing else: the two directions between a point on the
+   screen and a time on a lane.
+
+     clientPointOf(time, lane?)   the client point of a time, on a lane's middle
+     positionAt(clientX, clientY) the time and the lane at a client point
+     visibleDomain()              the span in view, as two wall-clock instants
+
+   Everything else a schedule does is props. This is here because an
+   application's own marks - a shift change, a delivery window, a pin on the
+   order somebody just rang about - are the application's DOM, not the
+   schedule's, and they have to be placed.
+
+   The pin above the plan is placed with `clientPointOf`, turned into a point
+   inside this example, and placed anew whenever the span moves. Pan or zoom
+   the plan and watch it follow. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(12), to: at(13, 30), setup: min(15) },
+];
+
+const SHIFT_CHANGE = at(14);
+
+export default function Handle() {
+  const plan = useRef<ScheduleHandle>(null);
+  const host = useRef<HTMLDivElement>(null);
+  const [domain, setDomain] = useState(DAY_OF_PLAN);
+  const [pin, setPin] = useState<number | null>(null);
+  const [under, setUnder] = useState("Move the pointer over the plan");
+
+  /* Placed relative to this example, so the client point is turned into one
+     inside it - and placed anew whenever the span moves. */
+  useEffect(() => {
+    const point = plan.current?.clientPointOf(SHIFT_CHANGE);
+    const left = host.current?.getBoundingClientRect().left;
+    setPin(point === undefined || point === null || left === undefined ? null : point.x - left);
+  }, [domain]);
+
+  return (
+    <Stack gap={2}>
+      <div ref={host} style={{ position: "relative", height: 12 }}>
+        {pin !== null && (
+          <Text size="xs" tone="muted" style={{ position: "absolute", top: -4, left: pin, transform: "translateX(-50%)" }} data-pin>
+            Shift change
+          </Text>
+        )}
+      </div>
+      <Schedule
+        ref={plan}
+        ariaLabel="A plan with a mark of the application's own"
+        initialDomain={domain}
+        height={196}
+        onDomainChange={setDomain}
+        onInteraction={(interaction) => {
+          /* `positionAt` is the other direction: a client point back to a time
+             and a lane. The interaction already carries both - this is for the
+             application's own listeners, which have only a point. */
+          const there = plan.current?.positionAt(interaction.clientX, interaction.clientY);
+          setUnder(
+            there == null
+              ? "off the plan"
+              : `${new Date(there.time).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })} on ${there.lane ?? "no lane"}`,
+          );
+        }}
+      >
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Subtasks data={STEPS} tasks={ORDERS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-under-pointer>
+        {under}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+## Editing
+
+Direct manipulation that changes nothing by itself: the schedule reports, the application decides.
+
+### Move and lane
+
+Dragging a subtask through time and onto another lane - the ghost while it is in flight, the intents when it ends.
+
+```ts
+import { Schedule, applyIntent } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/move-and-lane
+
+#### Examples
+
+##### Moving, and putting on another lane
+
+```tsx
+import { useState } from "react";
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports, applyIntent } from "@umriss-ui/schedule";
+import type { Intent, Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* `intents` lists what the application handles, and each name enables its
+   interaction: with `move` a subtask is dragged through time, with `lane`
+   onto another lane. Without `intents` the schedule is read-only - that is a
+   feature, not a lesser mode.
+
+   While the drag is in flight a ghost stands beside the unchanged plan, with
+   its new times and whatever finding the drop would create. When it ends, one
+   intent per change is reported. The plan changes only here, where the
+   application applies the intent - `applyIntent` is the arithmetic for it. */
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+  { id: "qa", label: "Inspection" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+  { id: "a-2045", name: "A-2045 Cover", color: "light-dark(#be185d, #f06aa6)" },
+  { id: "a-2046", name: "A-2046 Axle", color: "light-dark(#4d7c0f, #8fc43e)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2046-2", task: "a-2046", lane: "mill", from: at(13), to: at(14, 30), setup: min(20), teardown: min(10) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+  { id: "a-2045-3", task: "a-2045", lane: "qa", from: at(15, 45), to: at(16, 30) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  /* Leaves the mill at 11:30 and has ten minutes to reach the paint shop's
+     setup at 11:40 - it takes twenty-five. A late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+];
+
+export default function MoveAndLane() {
+  const [steps, setSteps] = useState(STEPS);
+  const [last, setLast] = useState<Intent | null>(null);
+
+  return (
+    <Stack gap={3}>
+      <Schedule
+        ariaLabel="Plan of Tuesday, 17 March, editable"
+        initialDomain={DAY_OF_PLAN}
+        height={284}
+        intents={["move", "lane"]}
+        onIntent={(intent) => {
+          setLast(intent);
+          setSteps((current) => current.map((step) => applyIntent(step, intent)));
+        }}
+      >
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Transports data={MOVES} />
+        <Subtasks data={steps} tasks={ORDERS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-last-intent>
+        {last === null ? "No intent yet" : JSON.stringify(last)}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+### Stretch, setup, teardown
+
+The other three edits: the edges of the main time, and the two grips a selected subtask offers for its preparation.
+
+```ts
+import { Schedule, applyIntent } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/stretch
+
+#### Examples
+
+##### Stretching, setup and teardown
+
+```tsx
+import { useState } from "react";
+import { Lane, Schedule, Subtasks, applyIntent } from "@umriss-ui/schedule";
+import type { Subtask, Task } from "@umriss-ui/schedule";
+
+/* The edges of the main time stretch it (`stretch`). Setup and teardown have
+   grips of their own, and they appear only on the selected subtask: a plan
+   where every bar bristles with handles is a plan nobody can read. Click a
+   subtask, then drag the grip at its outer edge (`setup`, `teardown`).
+
+   Each is changed on its own - stretching the main time leaves the setup as
+   long as it was. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "shaft", color: "light-dark(#0d9488, #3cc7b8)" }];
+
+const START: Subtask[] = [
+  { id: "turn", task: "shaft", lane: "lathe", from: at(8), to: at(10), setup: min(30), teardown: min(15) },
+  { id: "grind", task: "shaft", lane: "grinder", from: at(11), to: at(12, 30), setup: min(15) },
+];
+
+export default function StretchSetupTeardown() {
+  const [work, setWork] = useState(START);
+
+  return (
+    <Schedule
+      ariaLabel="A shaft on the lathe and the grinder"
+      initialDomain={[at(6), at(13, 30)]}
+      height={150}
+      intents={["stretch", "setup", "teardown"]}
+      onIntent={(intent) => setWork((current) => current.map((s) => applyIntent(s, intent)))}
+    >
+      <Lane id="lathe" label="Lathe" />
+      <Lane id="grinder" label="Grinder" />
+      <Subtasks data={work} tasks={TASKS} />
+    </Schedule>
+  );
+}
+```
+
+### Snapping
+
+The raster a drag lands on - the axis' own step, a duration, or a shift pattern with an offset.
+
+```ts
+import { Schedule, snapTime } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/snapping
+
+#### Examples
+
+##### Snapping to a raster
+
+```tsx
+import { useState } from "react";
+import { Lane, Schedule, Subtasks, applyIntent } from "@umriss-ui/schedule";
+import type { SnapRaster, Subtask, Task } from "@umriss-ui/schedule";
+
+/* A drag lands on a raster. By default that is the fine band's current step -
+   hours when zoomed out, quarter hours when zoomed in -, so what a planner drops
+   lands on a line they can read. The upper schedule snaps to the plant's shift
+   changes - eight hours, offset by six from local midnight: 06:00, 14:00,
+   22:00 on the plant's clock, whatever the time zone -; the lower one does not
+   snap at all.
+
+   Snapping shapes the ghost and therefore the intent. It never touches data
+   that is not being dragged. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const HOUR = 3_600_000;
+
+const SHIFTS: SnapRaster = { step: 8 * HOUR, offset: 6 * HOUR };
+
+const TASKS: Task[] = [{ id: "batch", color: "light-dark(#7c3aed, #a98bfa)" }];
+
+const BATCH: Subtask[] = [{ id: "cure", task: "batch", lane: "oven", from: at(6), to: at(14) }];
+
+function Oven({ snap, label }: { snap: SnapRaster | false; label: string }) {
+  const [work, setWork] = useState(BATCH);
+  return (
+    <Schedule
+      ariaLabel={label}
+      initialDomain={[at(4), at(24)]}
+      height={110}
+      snap={snap}
+      intents={["move"]}
+      onIntent={(intent) => setWork((current) => current.map((s) => applyIntent(s, intent)))}
+    >
+      <Lane id="oven" label={label} />
+      <Subtasks data={work} tasks={TASKS} />
+    </Schedule>
+  );
+}
+
+export default function Snapping() {
+  return (
+    <>
+      <Oven snap={SHIFTS} label="Shifts" />
+      <div style={{ height: 12 }} />
+      <Oven snap={false} label="Free" />
+    </>
+  );
+}
+```
+
+### Placing from outside
+
+Work that is not on the plan yet, dragged in from a list beside it with the browser's own drag and drop.
+
+```ts
+import { Schedule, subtaskFromPlace } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/placing
+
+#### Examples
+
+##### Dragging unplanned work onto the plan
+
+```tsx
+import { useState } from "react";
+import { Card, Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports, applyIntent, subtaskFromPlace } from "@umriss-ui/schedule";
+import type { Intent, PlacingItem, Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* Work that is not on the plan yet is dragged in from a list beside it - with
+   the browser's own drag and drop, so the source can be any list the
+   application has.
+
+   The browser hands the dragged data over only on the drop, so the ghost before
+   it cannot come from there: the application declares what it is dragging in
+   `placing`, on its own `dragstart`, and clears it on `dragend`. While the drag
+   is over a lane, the schedule shows the ghost at the snapped time with the
+   findings the drop would create - the last of the three below collides with
+   the press wherever it is put in the morning.
+
+   The drop reports a `place` intent: the key the application gave the item, the
+   task, the lane and the times. It creates no subtask itself - the id is the
+   application's, and `subtaskFromPlace` builds the subtask from the intent. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "saw", label: "Saw 1" },
+  { id: "press", label: "Press 2" },
+  { id: "qa", label: "Inspection" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+  { id: "a-2044", name: "A-2044 Flange", color: "light-dark(#7c3aed, #a98bfa)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-1", task: "a-2041", lane: "saw", from: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2044-2", task: "a-2044", lane: "press", from: at(9, 30), to: at(10, 45), setup: min(25) },
+  { id: "a-2041-3", task: "a-2041", lane: "qa", from: at(11, 30), to: at(12, 15) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2041-3", from: "a-2041-1", to: "a-2041-3", duration: min(20) },
+];
+
+const HOUR = 3_600_000;
+
+const WAITING: readonly (PlacingItem & { label: string })[] = [
+  { item: "a-2047", label: "A-2047 Cap · 2 h", task: "a-2041", duration: 2 * HOUR, setup: 15 * 60_000 },
+  { item: "a-2048", label: "A-2048 Ring · 1 h", task: "a-2042", duration: HOUR },
+  { item: "a-2049", label: "A-2049 Plate · 4 h", task: "a-2043", duration: 4 * HOUR, teardown: 20 * 60_000 },
+];
+
+export default function DragIn() {
+  const [plan, setPlan] = useState<{ steps: readonly Subtask[]; placed: number; last: string }>({
+    steps: STEPS,
+    placed: 0,
+    last: "Drag an order onto a lane",
+  });
+  const [placing, setPlacing] = useState<PlacingItem | null>(null);
+
+  /* One functional update, so that a second intent in the same tick - and the
+     counter the new id is built from - starts from the plan the first left. */
+  const onIntent = (intent: Intent) =>
+    setPlan((current) => {
+      if (intent.kind !== "place") {
+        return { ...current, steps: current.steps.map((step) => applyIntent(step, intent)), last: `${intent.kind} ${intent.subtask}` };
+      }
+      const placed = current.placed + 1;
+      const id = `${intent.item}-${placed}`;
+      return {
+        steps: [...current.steps, subtaskFromPlace(intent, id)],
+        placed,
+        last: `place ${intent.item} on ${intent.lane} as ${id}`,
+      };
+    });
+
+  return (
+    <Stack gap={3}>
+      <Stack direction="row" gap={2}>
+        {WAITING.map((order) => (
+          <Card key={order.item}>
+            <div
+              draggable
+              data-waiting={order.item}
+              onDragStart={(event) => {
+                event.dataTransfer.setData("text/plain", order.item);
+                event.dataTransfer.effectAllowed = "copy";
+                setPlacing(order);
+              }}
+              onDragEnd={() => setPlacing(null)}
+              style={{ cursor: "grab" }}
+            >
+              <Text size="sm">{order.label}</Text>
+            </div>
+          </Card>
+        ))}
+      </Stack>
+      <Schedule
+        ariaLabel="Plan of Tuesday, 17 March, with unplanned work beside it"
+        initialDomain={DAY_OF_PLAN}
+        height={196}
+        intents={["place", "move", "lane"]}
+        placing={placing}
+        onIntent={onIntent}
+      >
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Transports data={MOVES} />
+        <Subtasks data={plan.steps} tasks={ORDERS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-last-place>
+        {plan.last}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+### Where a subtask may go
+
+The lanes a piece of work may not go to, marked before the pointer arrives and refused without a warning colour.
+
+```ts
+import { Schedule } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/where-it-may-go
+
+#### Examples
+
+##### A rule of the plant, seen before it is met
+
+```tsx
+import { useState } from "react";
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, applyIntent } from "@umriss-ui/schedule";
+import type { Intent, Subtask, Task } from "@umriss-ui/schedule";
+
+/* Not every stop may go on every machine. A mould fits one press, a part that
+   has been set up may move in time but not to another station, and a plant
+   knows both - the schedule does not.
+
+   `canMoveTo` asks the application, once per lane when the drag takes hold and
+   again at the drop. The lanes it turns down are marked from the first frame:
+   drawn back and hatched, their headers with them, so that nobody has to try a
+   lane to learn it is closed. Over one of them the ghost stays on the last
+   lane that was allowed, the cursor says no, and a line ties the ghost to the
+   pointer it is not following - it is being held, not stuck.
+
+   A refusal costs the lane and nothing else. Drop after it and the move in
+   time is still reported: one rule of the plant must not take away the other
+   half of a gesture. And none of it wears a warning colour, because a mould
+   that fits one press is nobody's mistake.
+
+   It narrows `"lane"`; it does not enable it. Dragging in time keeps working
+   for everything below - a restriction on the lane is not a restriction on the
+   clock.
+
+   This example drags a part that is already on the plan. The same rule holds
+   for work dragged in from a list - that is the next example; how a drag from
+   outside is set up at all is its own chapter, *Placing from outside*. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [
+  { id: "wide", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "bound", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const PRESSES = ["press-1", "press-2"];
+
+const START: Subtask[] = [
+  { id: "free", task: "wide", lane: "press-1", from: at(7), to: at(9) },
+  { id: "moulded", task: "bound", lane: "press-2", from: at(9, 30), to: at(11, 30) },
+  { id: "welded", task: "wide", lane: "weld", from: at(12), to: at(14) },
+];
+
+/* The mould fits the two presses and nothing else; everything else may go
+   anywhere. A real plant reads this off its own master data. */
+const mayGo = (subtask: Subtask, lane: string) => subtask.task !== "bound" || PRESSES.includes(lane);
+
+export default function WhereItMayGo() {
+  const [work, setWork] = useState<readonly Subtask[]>(START);
+  const [last, setLast] = useState("Drag the moulded part onto the welding bay");
+
+  /* Only `move` and `lane` are enabled, so only those two arrive - but the
+     type is the whole union, and a `place` has no subtask to name. */
+  const onIntent = (intent: Intent) => {
+    if (intent.kind === "place") return;
+    setWork((current) => current.map((s) => applyIntent(s, intent)));
+    setLast(`${intent.subtask}: ${intent.kind}`);
+  };
+
+  return (
+    <Stack gap={3}>
+      <Schedule
+        ariaLabel="Two presses and a welding bay"
+        initialDomain={[at(6, 30), at(15)]}
+        height={190}
+        intents={["move", "lane"]}
+        canMoveTo={mayGo}
+        onIntent={onIntent}
+      >
+        <Lane id="press-1" label="Press 1" />
+        <Lane id="press-2" label="Press 2" />
+        <Lane id="weld" label="Welding bay" />
+        <Subtasks data={work} tasks={TASKS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-last-move>
+        {last}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+##### The same rule for work dragged in
+
+```tsx
+import { useState } from "react";
+import { Card, Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, subtaskFromPlace } from "@umriss-ui/schedule";
+import type { Intent, PlacingItem, Subtask, Task } from "@umriss-ui/schedule";
+
+/* `canMoveTo` is asked about work that is not on the plan yet too, with the
+   key and task the application declared in `placing`. The welding bay is
+   marked for the mould beside the plan exactly as it is for the one already on
+   it, and the ghost holds on the last lane that allowed it.
+
+   One thing is the platform's and not the schedule's: a native drag has no
+   cursor of its own to give, only the browser's answer to "may this be
+   dropped". That answer follows the GHOST here and not the pointer - while a
+   ghost stands somewhere allowed, a release lands there, because a ghost is
+   the promise of where a drop lands. It says "no drop" exactly when a release
+   would place nothing.
+
+   How a drag from a list is set up at all - `placing`, `dragstart`, `dragend`,
+   and what a `place` intent carries - is *Placing from outside*. Nothing of it
+   is repeated here. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+const TASKS: Task[] = [
+  { id: "wide", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "bound", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const PRESSES = ["press-1", "press-2"];
+
+const START: Subtask[] = [
+  { id: "free", task: "wide", lane: "press-1", from: at(7), to: at(9) },
+  { id: "welded", task: "wide", lane: "weld", from: at(12), to: at(14) },
+];
+
+/* The mould fits the two presses and nothing else. */
+const mayGo = (subtask: Subtask, lane: string) => subtask.task !== "bound" || PRESSES.includes(lane);
+
+const WAITING: PlacingItem & { label: string } = {
+  item: "mould",
+  label: "Mould A-77 · 2 h",
+  task: "bound",
+  duration: 2 * 60 * 60_000,
+};
+
+export default function FromOutside() {
+  const [work, setWork] = useState<readonly Subtask[]>(START);
+  const [placing, setPlacing] = useState<PlacingItem | null>(null);
+  const [last, setLast] = useState("Drag the mould onto the welding bay");
+
+  const onIntent = (intent: Intent) => {
+    if (intent.kind !== "place") return;
+    setWork((current) => [...current, subtaskFromPlace(intent, `${intent.item}-${current.length}`)]);
+    setLast(`${intent.item}: place on ${intent.lane}`);
+  };
+
+  return (
+    <Stack gap={3}>
+      <Card>
+        <div
+          draggable
+          data-waiting={WAITING.item}
+          onDragStart={(event) => {
+            event.dataTransfer.setData("text/plain", WAITING.item);
+            event.dataTransfer.effectAllowed = "copy";
+            setPlacing(WAITING);
+          }}
+          onDragEnd={() => setPlacing(null)}
+          style={{ cursor: "grab" }}
+        >
+          <Text size="sm">{WAITING.label}</Text>
+        </div>
+      </Card>
+      <Schedule
+        ariaLabel="A mould waiting beside two presses and a welding bay"
+        initialDomain={[at(6, 30), at(15)]}
+        height={190}
+        intents={["place"]}
+        placing={placing}
+        canMoveTo={mayGo}
+        onIntent={onIntent}
+      >
+        <Lane id="press-1" label="Press 1" />
+        <Lane id="press-2" label="Press 2" />
+        <Lane id="weld" label="Welding bay" />
+        <Subtasks data={work} tasks={TASKS} />
+      </Schedule>
+      <Text size="sm" mono tone="secondary" data-last-place>
+        {last}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+#### Why it is like this
+
+##### A refusal is not an error
+
+A mould that fits one press is nobody's mistake. Neither is a part that has been set up and may no longer change station. These are **rules of the plant**, and a planner who meets one has not done anything wrong - they have learned something about the plant. So a refusal here wears no warning colour, no red, no alarm, and no exclamation mark: the lane is drawn back and hatched, the cursor says no, and the word says it once, in the label's own type.
+
+##### Seen before it is met, not after
+
+The lanes a piece of work may not go to are marked the moment the drag takes hold - before the pointer has reached any of them. A refusal that only appears once you have tried is a small punishment for guessing; one that is already drawn is a map. The rule is asked once per lane and held for the gesture, which is also what keeps a plant of hundreds of orders fluid while a drag runs.
+
+##### The place is never travelled to and then corrected
+
+The ghost never stands on a lane the work may not go to. It holds on the last lane that allowed it, with a hairline back to the pointer, so that it reads as held rather than stuck - and so that the ghost stays what it is everywhere else in this component: the promise of where a drop lands.
+
+And a refusal costs only what it refuses. Drag across a closed lane and an hour earlier, drop, and the hour is still reported. One rule of the plant must not take away the other half of a gesture.
+
+### Ripple
+
+The cascade as arithmetic: the moves that push every successor whose transport no longer fits - for the application to run, or not.
+
+```ts
+import { ripple, shiftTask, applyIntent } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/ripple
+
+#### Examples
+
+##### Pushing the successors
+
+```tsx
+import { useState } from "react";
+import { Button, Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports, applyIntent, ripple } from "@umriss-ui/schedule";
+import type { MoveIntent, Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* The saw runs an hour late. `ripple` takes the data, the transports and that
+   one intent, and returns the moves that push every successor whose transport
+   no longer fits - by exactly what is missing, down the chain, never earlier.
+   The schedule never runs it; whether a successor may move is the plant's
+   decision, and this application decides with a button. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const TASKS: Task[] = [{ id: "bracket", color: "light-dark(#c2410c, #f08a52)" }];
+
+const START: Subtask[] = [
+  { id: "saw", task: "bracket", lane: "saw", from: at(6), to: at(7, 30) },
+  { id: "bend", task: "bracket", lane: "press", from: at(8), to: at(9) },
+  { id: "weld", task: "bracket", lane: "weld", from: at(9, 30), to: at(11) },
+];
+
+const MOVES: Transport[] = [
+  { id: "to-press", from: "saw", to: "bend", duration: min(20) },
+  { id: "to-weld", from: "bend", to: "weld", duration: min(15) },
+];
+
+const LATE: MoveIntent = { kind: "move", subtask: "saw", from: at(7), to: at(8, 30) };
+
+export default function Cascade() {
+  const [work, setWork] = useState<readonly Subtask[]>(START);
+  /* The cascade of the late saw - once the saw is late; before that there is
+     nothing to push. */
+  const late = work.some((s) => s.id === LATE.subtask && s.from === LATE.from);
+  const pushed = late ? ripple(work, MOVES, LATE) : [];
+
+  return (
+    <Stack gap={3}>
+      <Schedule ariaLabel="A bracket through saw, press and welding" initialDomain={[at(5, 30), at(13)]} height={190}>
+        <Lane id="saw" label="Saw" />
+        <Lane id="press" label="Press" />
+        <Lane id="weld" label="Welding" />
+        <Transports data={MOVES} />
+        <Subtasks data={work} tasks={TASKS} />
+      </Schedule>
+      <Stack direction="row" gap={2} align="center">
+        <Button size="sm" onClick={() => setWork((current) => current.map((s) => applyIntent(s, LATE)))} disabled={late}>
+          Saw an hour late
+        </Button>
+        <Button size="sm" onClick={() => setWork((current) => pushed.reduce((data, move) => data.map((s) => applyIntent(s, move)), current))} disabled={pushed.length === 0}>
+          Push {pushed.length} {pushed.length === 1 ? "successor" : "successors"}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={() => setWork(START)}>
+          Reset
+        </Button>
+      </Stack>
+      <Text size="xs" mono tone="muted">
+        {pushed.length === 0 ? "Nothing to push" : pushed.map((m) => m.subtask).join(", ")}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+### Demonstration
+
+A whole plant in a planner's hands: a context menu, the cascade, the findings, and every intent the schedule reports.
+
+```ts
+import { Schedule, findings, ripple, shiftTask } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/demonstration
+
+#### Examples
+
+##### Demonstration: the plan in the planner's hands
+
+```tsx
+import { useState } from "react";
+import { Checkbox, ContextMenu, MenuItem, MenuSeparator, Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports, applyIntent, findings, ripple, shiftTask } from "@umriss-ui/schedule";
+import type { Intent, ScheduleInteraction, Subtask } from "@umriss-ui/schedule";
+import { DAY_OF_PLAN, MOVES, ORDERS, STATIONS, STEPS } from "../../data";
+
+/* The one example that does not carry its own data. A demonstration is a whole
+   plant - seven stations, six orders and their moves through a Tuesday - and
+   ninety lines of it in this file would bury the thing it demonstrates. It is
+   shown instead: `data.ts` stands in the second tab of the code view, so a
+   reader sees it and can copy both. That is the named exception the check
+   allows, and the only one in this demo. */
+
+/* The whole recipe, as an application writes it.
+
+   The plan lives in the application's state. The schedule draws it, a drag
+   reports intents, and the application applies them - here, if asked, with the
+   cascade `ripple` computes over the successors. The findings below come from
+   the same data and change with every drop.
+
+   A right-click opens `ContextMenu` from @umriss-ui/core at the pointer: the
+   schedule reports the interaction with its target and position and knows
+   nothing of the menu. The entries act on the data the same way a drag does -
+   through intents; moving the whole order is `shiftTask`, one move per stop. */
+
+const QUARTER = 15 * 60_000;
+
+type Menu = { interaction: ScheduleInteraction; subtask: Subtask | null };
+
+type Plan = { steps: readonly Subtask[]; log: readonly string[] };
+
+const START: Plan = { steps: STEPS, log: [] };
+
+/* One drop can report two intents - a move and a lane - one after the other.
+   Each is applied to the plan as the previous one left it: a functional update,
+   not the plan this render happened to see. */
+function applied(plan: Plan, intent: Intent, cascade: boolean): Plan {
+  const pushed = cascade ? ripple(plan.steps, MOVES, intent) : [];
+  const steps = [intent, ...pushed].reduce((data, change) => data.map((step) => applyIntent(step, change)), plan.steps);
+  const subject = intent.kind === "place" ? intent.item : intent.subtask;
+  const line = `${intent.kind} ${subject}${pushed.length > 0 ? `, pushed ${pushed.length}` : ""}`;
+  return { steps, log: [line, ...plan.log].slice(0, 4) };
+}
+
+export default function Demonstration() {
+  const [plan, setPlan] = useState<Plan>(START);
+  const [cascade, setCascade] = useState(true);
+  const [menu, setMenu] = useState<Menu | null>(null);
+
+  const apply = (intent: Intent) => setPlan((current) => applied(current, intent, cascade));
+
+  const onInteraction = (interaction: ScheduleInteraction) => {
+    if (interaction.type !== "contextmenu") return;
+    const subtask = interaction.hit.kind === "subtask" ? interaction.hit.subtask : null;
+    setMenu({ interaction, subtask });
+  };
+
+  const found = findings(plan.steps, MOVES);
+  const target = menu?.subtask ?? null;
+
+  return (
+    <Stack gap={3}>
+      <Checkbox label="Push successors when a transport no longer fits" checked={cascade} onChange={(e) => setCascade(e.target.checked)} />
+      <Schedule
+        ariaLabel="Plan of Tuesday, 17 March, in the planner's hands"
+        initialDomain={DAY_OF_PLAN}
+        height={380}
+        intents={["move", "lane", "stretch", "setup", "teardown"]}
+        onIntent={apply}
+        onInteraction={onInteraction}
+      >
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Transports data={MOVES} />
+        <Subtasks data={plan.steps} tasks={ORDERS} />
+      </Schedule>
+      <ContextMenu
+        open={menu !== null}
+        position={{ x: menu?.interaction.clientX ?? 0, y: menu?.interaction.clientY ?? 0 }}
+        onOpenChange={(open) => {
+          if (!open) setMenu(null);
+        }}
+        ariaLabel={target !== null ? `Actions for ${target.id}` : "Actions for the plan"}
+      >
+        {target !== null ? (
+          <>
+            <MenuItem onSelect={() => apply({ kind: "move", subtask: target.id, from: target.from - QUARTER, to: target.to - QUARTER })}>
+              Earlier by a quarter hour
+            </MenuItem>
+            <MenuItem onSelect={() => apply({ kind: "move", subtask: target.id, from: target.from + QUARTER, to: target.to + QUARTER })}>
+              Later by a quarter hour
+            </MenuItem>
+            <MenuItem onSelect={() => shiftTask(plan.steps, target.task, QUARTER).forEach(apply)}>
+              The whole order later by a quarter hour
+            </MenuItem>
+            <MenuSeparator />
+            <MenuItem onSelect={() => apply({ kind: "setup", subtask: target.id, setup: 0 })} disabled={(target.setup ?? 0) === 0}>
+              Remove the setup
+            </MenuItem>
+          </>
+        ) : (
+          <MenuItem onSelect={() => setPlan(START)}>Reset the plan</MenuItem>
+        )}
+      </ContextMenu>
+      <Text size="sm" tone="secondary" data-findings-summary>
+        {found.overlaps.length} {found.overlaps.length === 1 ? "overlap" : "overlaps"}, {found.lateTransports.length}{" "}
+        {found.lateTransports.length === 1 ? "late transport" : "late transports"}
+      </Text>
+      <Text size="xs" mono tone="muted" data-intent-log>
+        {plan.log.length === 0 ? "Drag a subtask, or right-click one" : plan.log.join(" · ")}
+      </Text>
+    </Stack>
+  );
+}
+```
+
+It imports `data.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+## Findings
+
+What a planner opens a schedule for, as data beside the picture.
+
+### Findings as data
+
+Overlaps on a lane and late transports, computed from the data - to list, count and act on.
+
+```ts
+import { findings, overlaps, lateTransports } from "@umriss-ui/schedule";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/schedule/#/findings
+
+#### Examples
+
+##### The findings beside the picture
+
+```tsx
+import { Stack, Text } from "@umriss-ui/core";
+import { Lane, Schedule, Subtasks, Transports, findings } from "@umriss-ui/schedule";
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+/* What the schedule draws, `findings` returns: every overlap with its lane, the
+   two subtasks and the time they share, and every late transport with its
+   departure, its arrival and how much time is missing. It is a pure function of
+   the same data - a list, a count on a tile, a filter for "everything that does
+   not work" is one call away. `overlaps` and `lateTransports` are the two
+   halves on their own. */
+
+const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+const min = (n: number) => n * 60_000;
+
+const DAY_OF_PLAN: readonly [number, number] = [at(5, 30), at(18)];
+
+
+const STATIONS = [
+  { id: "mill", label: "Mill" },
+  { id: "press", label: "Press 2" },
+  { id: "paint", label: "Paint shop" },
+];
+
+const ORDERS: readonly Task[] = [
+  { id: "a-2041", name: "A-2041 Housing", color: "light-dark(#2563eb, #6b9bff)" },
+  { id: "a-2043", name: "A-2043 Bracket", color: "light-dark(#c2410c, #f08a52)" },
+];
+
+const STEPS: readonly Subtask[] = [
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+];
+
+const MOVES: readonly Transport[] = [
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  /* Leaves the mill at 11:30 and has ten minutes to reach the paint shop's
+     setup at 11:40 - it takes twenty-five. A late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+];
+
+const time = (instant: number) => new Date(instant).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+
+export default function AsData() {
+  const found = findings(STEPS, MOVES);
+
+  return (
+    <Stack gap={3}>
+      <Schedule ariaLabel="Plan of Tuesday, 17 March" initialDomain={DAY_OF_PLAN} height={196}>
+        {STATIONS.map((station) => (
+          <Lane key={station.id} id={station.id} label={station.label} />
+        ))}
+        <Transports data={MOVES} />
+        <Subtasks data={STEPS} tasks={ORDERS} />
+      </Schedule>
+      <ul style={{ margin: 0, paddingLeft: 18 }}>
+        {found.overlaps.map((o) => (
+          <Text as="li" size="sm" key={`${o.first}/${o.second}`}>
+            Overlap on {o.lane}: {o.first} and {o.second}, {time(o.from)}–{time(o.to)}
+          </Text>
+        ))}
+        {found.lateTransports.map((l) => (
+          <Text as="li" size="sm" key={l.transport}>
+            Late transport {l.transport}: {Math.round(l.shortBy / 60_000)} minutes short
+          </Text>
+        ))}
+      </ul>
+    </Stack>
+  );
+}
+```
+
+#### API
+
+##### `Overlap`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `lane` (required) | `string` | — | The lane both sit on. |
+| `first` (required) | `string` | — | The subtask that starts earlier (setup included); on a tie, the one that stands first in the data. |
+| `second` (required) | `string` | — | The other one. |
+| `from` (required) | `number` | — | Where the covering begins. |
+| `to` (required) | `number` | — | Where it ends. |
+
+##### `LateTransport`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `transport` (required) | `string` | — | The id of the transport. |
+| `departure` (required) | `number` | — | When it leaves, by its anchor. |
+| `arrival` (required) | `number` | — | When it has to have arrived, by its anchor. |
+| `shortBy` (required) | `number` | — | How much time is missing: departure plus duration, minus arrival. |
+
+## The rest of the API
+
+Exported as well, and named on no page above: the pure modules behind the components, and the types they are made of. Each with its declaration as the package's `.d.ts` carries it.
+
+### `occupied`
+
+```ts
+/** The interval a subtask occupies on its lane: setup and teardown included. */
+function occupied(subtask: Subtask): {
+    from: number;
+    to: number;
+};
+```
+
+### `LaneIntent`
+
+```ts
+/** Put the subtask on another lane. */
+interface LaneIntent {
+    readonly kind: "lane";
+    /** The id of the subtask. */
+    readonly subtask: string;
+    /** The id of the new lane. */
+    readonly lane: string;
+}
+```
+
+### `SetupIntent`
+
+```ts
+/** Change the setup on its own. */
+interface SetupIntent {
+    readonly kind: "setup";
+    /** The id of the subtask. */
+    readonly subtask: string;
+    /** The new duration of the setup. */
+    readonly setup: number;
+}
+```
+
+### `StretchIntent`
+
+```ts
+/** Stretch the main time at one or both of its edges. */
+interface StretchIntent {
+    readonly kind: "stretch";
+    /** The id of the subtask. */
+    readonly subtask: string;
+    /** The new start of the main time. */
+    readonly from: number;
+    /** The new end of the main time. */
+    readonly to: number;
+}
+```
+
+### `TeardownIntent`
+
+```ts
+/** Change the teardown on its own. */
+interface TeardownIntent {
+    readonly kind: "teardown";
+    /** The id of the subtask. */
+    readonly subtask: string;
+    /** The new duration of the teardown. */
+    readonly teardown: number;
+}
+```
+
+### `Findings`
+
+```ts
+/** Both kinds of finding over the same data. */
+interface Findings {
+    readonly overlaps: readonly Overlap[];
+    readonly lateTransports: readonly LateTransport[];
+}
+```
+
+### `PlaceIntent`
+
+```ts
+/** Put work on the plan that was not on it: the answer to a drag from outside
+    the schedule (schedule-refinement 07). It carries no subtask id - there is
+    no subtask yet; the caller creates one, with its own identity, from
+    `subtaskFromPlace`. */
+interface PlaceIntent {
+    readonly kind: "place";
+    /** The caller's key for the dragged item, as it declared it while dragging. */
+    readonly item: string;
+    /** The task the work belongs to. */
+    readonly task: string;
+    /** The lane it was dropped on. */
+    readonly lane: string;
+    /** Where its main time would start. */
+    readonly from: number;
+    /** Where its main time would end. */
+    readonly to: number;
+    /** The setup it was declared with. */
+    readonly setup?: number;
+    /** The teardown it was declared with. */
+    readonly teardown?: number;
+}
+```
+
+### `ResolvedAppearance`
+
+```ts
+/** What the drawing needs to know, with the contradiction already settled.
+
+    The four names are the ones this module was born with, and they are kept so
+    that a caller's code does not change because a picture did. Two of them are
+    now named after a drawing they no longer use, and the channel each one
+    really owns stands beside it (`sceneDraw.ts`, "ONE CHANNEL PER
+    STATEMENT"). */
+interface ResolvedAppearance {
+    /** `provisional`: the FILL - none at all, so the surface shows through, with
+        a dashed outline in the task colour. Planned, not released. */
+    readonly dashed: boolean;
+    /** `fixed`: the ENDS - a cap at each end of the main time. Not a hatch any
+        more; a hatch now says "not available" of a refused lane, and the name is
+        kept only so that this type did not change with the picture. */
+    readonly hatched: boolean;
+    /** `muted`: the SATURATION - the task colour mixed half into the surface,
+        opaque and at full height. Another shift's, another crew's. */
+    readonly muted: boolean;
+    /** `open`: the FADE, where the bar passes the edge of the view. It goes on
+        past what is drawn. */
+    readonly open: boolean;
+}
+```
+
+## Files the examples show
+
+The demo's own data, which some examples import from beside themselves. Copied with the example, it runs.
+
+### `data.ts`
+
+```ts
+/* The plant of the demo: seven stations, six orders on their way through them
+   on Tuesday, 17 March 2026 - the day the browser suites freeze the clock on.
+
+   Deterministic and 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 late transport into the paint shop. */
+
+import type { Subtask, Task, Transport } from "@umriss-ui/schedule";
+
+const at = (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] = [at(5, 30), at(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: at(6), to: at(7), setup: min(15), teardown: min(10) },
+  { id: "a-2041-2", task: "a-2041", lane: "mill", from: at(8), to: at(10, 30), setup: min(30), teardown: min(15) },
+  { id: "a-2041-3", task: "a-2041", lane: "qa", from: at(11, 30), to: at(12, 15) },
+
+  { id: "a-2042-1", task: "a-2042", lane: "saw", from: at(7, 30), to: at(8, 15), setup: min(10) },
+  { id: "a-2042-2", task: "a-2042", lane: "lathe-1", from: at(9), to: at(11), setup: min(20), teardown: min(15) },
+  { id: "a-2042-3", task: "a-2042", lane: "qa", from: at(13), to: at(13, 30) },
+
+  { id: "a-2043-1", task: "a-2043", lane: "press", from: at(6, 30), to: at(8), setup: min(30), teardown: min(15) },
+  { id: "a-2043-2", task: "a-2043", lane: "mill", from: at(10), to: at(11, 30), setup: min(15) },
+  { id: "a-2043-3", task: "a-2043", lane: "paint", from: at(12), to: at(14), setup: min(20), teardown: min(20) },
+
+  { id: "a-2044-1", task: "a-2044", lane: "lathe-2", from: at(6), to: at(8, 30), setup: min(20), teardown: min(10) },
+  { id: "a-2044-2", task: "a-2044", lane: "press", from: at(9, 30), to: at(10, 45), setup: min(25) },
+  { id: "a-2044-3", task: "a-2044", lane: "paint", from: at(14, 45), to: at(16), setup: min(15), teardown: min(15) },
+
+  { id: "a-2045-1", task: "a-2045", lane: "lathe-1", from: at(12), to: at(13, 30), setup: min(15), teardown: min(10) },
+  { id: "a-2045-2", task: "a-2045", lane: "press", from: at(14, 15), to: at(15), setup: min(20) },
+  { id: "a-2045-3", task: "a-2045", lane: "qa", from: at(15, 45), to: at(16, 30) },
+
+  { id: "a-2046-1", task: "a-2046", lane: "lathe-2", from: at(10), to: at(12), setup: min(20), teardown: min(15) },
+  { id: "a-2046-2", task: "a-2046", lane: "mill", from: at(13), to: at(14, 30), setup: min(20), teardown: min(10) },
+  { id: "a-2046-3", task: "a-2046", lane: "qa", from: at(15), to: at(15, 30) },
+];
+
+export const MOVES: readonly Transport[] = [
+  { id: "t-2041-1", from: "a-2041-1", to: "a-2041-2", duration: min(10) },
+  { id: "t-2041-2", from: "a-2041-2", to: "a-2041-3", duration: min(20) },
+  { id: "t-2042-1", from: "a-2042-1", to: "a-2042-2", duration: min(15) },
+  { id: "t-2042-2", from: "a-2042-2", to: "a-2042-3", duration: min(30), leaves: "main" },
+  { id: "t-2043-1", from: "a-2043-1", to: "a-2043-2", duration: min(45) },
+  /* Leaves the mill at 11:30 and has 10 minutes to reach the paint shop's
+     setup at 11:40 - it takes 25: a late transport, on purpose. */
+  { id: "t-2043-2", from: "a-2043-2", to: "a-2043-3", duration: min(25) },
+  { id: "t-2044-1", from: "a-2044-1", to: "a-2044-2", duration: min(20) },
+  { id: "t-2044-2", from: "a-2044-2", to: "a-2044-3", duration: min(60), arrives: "main" },
+  { id: "t-2045-1", from: "a-2045-1", to: "a-2045-2", duration: min(15) },
+  { id: "t-2045-2", from: "a-2045-2", to: "a-2045-3", duration: min(15) },
+  { id: "t-2046-1", from: "a-2046-1", to: "a-2046-2", duration: min(20) },
+  { id: "t-2046-2", from: "a-2046-2", to: "a-2046-3", duration: min(10), leaves: "main" },
+];
+```