pageship 0.3.0 → 0.4.0

package/dist/skills/pageship-docs/references/plain-default.md

@@ -1,6 +1,6 @@
 # The plain default
 
-A document look: serif prose with sans headings, labels and figure text, a plum title band and section headings, steel-blue links, framed figures with a caption strip, and tinted callouts. Extend this stylesheet with the same variables and font stacks; keep its sizes, widths and print rules.
+A document look: serif prose with sans headings, labels and figure text, a title band and section headings in the first accent, links in the second, framed figures with a caption strip, and tinted callouts. Extend this stylesheet with the same variables and font stacks; keep its sizes, widths and print rules. Its colour values are a plum and steel-blue set that [the palette calculator](design.md#the-palette-calculator) replaces.
 
 ```css
 :root {

package/dist/skills/pageship-explainer/SKILL.md

@@ -3,14 +3,14 @@ name: pageship-explainer
 description: HTML explainers, as the second step of pageship-docs. For any request to explain how something works, or to write, regenerate, edit or move an explainer, load pageship-docs first; load this skill first only when the user names it.
 license: MIT
 metadata:
-  version: "0.3.0"
+  version: "0.4.0"
 ---
 
 # Explainer
 
 An explainer shows the reader how something works: the parts, what passes between them, and the rules that decide what happens next. Figures carry the explanation and short prose sits around them. A reader who looks only at the figures and their captions still learns the mechanism.
 
-Write it by [step 4 of pageship-docs](../pageship-docs/SKILL.md#4-write-the-file), with steps 2 to 4 below in place of its Sort. Unless `pageship-docs` loaded this skill, start as [it says](../pageship-docs/SKILL.md#starting-at-a-kind-or-pattern-skill).
+Write it by [step 4 of pageship-docs](../pageship-docs/SKILL.md#4-write-the-file), with steps 2 to 4 below in place of its Sort and Figures. Unless `pageship-docs` loaded this skill, start as [it says](../pageship-docs/SKILL.md#starting-at-a-kind-or-pattern-skill).
 
 ## 1. Gather
 
@@ -72,7 +72,7 @@ Headings, text and figure labels use the glossary's terms.
 
 1. **Title and answer.** An `h1` naming what the explainer covers, then the answer, with the date and author when the source gives them.
 2. **Overview.** The overview figure, after the sentences that introduce its parts.
-3. **One section per stage or rule.** Each holds at most two short paragraphs around its figure: one before it introducing what the figure adds, and one after it only for a number or exception the figure doesn't show. A section that needs more prose becomes two sections, each with its own claim and figure.
+3. **One section per stage or rule.** Each holds at most two short paragraphs around its figure: one before it introducing what the figure adds and why it matters to the answer, and one after it only for a number or exception the figure doesn't show. A section that needs more prose becomes two sections, each with its own claim and figure.
 4. **Exceptions and limits**, when there are any.
 5. **Open questions.**
 6. **Sources.** Each file, with line numbers for code, and each document the explainer draws on, as the source names them.
@@ -83,10 +83,18 @@ Done when every part, move, rule and end of the trace is in a figure or the text
 
 Read the file from the top against your concept list, your trace and each figure's claim, and fix what breaks a rule above. The answer still holds against each section: a condition, exception or open question that changes it, such as a check that runs on one branch only, is in the answer too, or the answer says less.
 
-Then get a fresh reading. Your own reading follows your trace, so it passes the sentences you meant to write. Start a subagent that has seen neither this conversation nor your trace, and give it only this task: "Read-only. Read [file] beside [each source file] and the Claims section of [the path of `pageship-docs/references/check.md`]. Quote every sentence, caption, label and tooltip that claims more than the source's words state, each with the source line it goes past. Then compare each figure's drawing with its caption and the source: quote every caption the drawing doesn't show, such as an arrow that starts at a part the source doesn't give that move, and every caption that makes two claims." Wait for its answer before you fix anything or hand over. Fix each quote it returns, or keep it and say in the hand-over why the source states it. Without subagents, read the file once more from the source's side: for each sentence, find the source line before you read the next, then compare each figure's drawing with its caption.
+Then get a fresh reading. Your own reading follows your trace, so it passes the sentences you meant to write. The reader task, with every path absolute, is: "Read-only. Read [file] beside [each source file] and the Claims section of [the path of `pageship-docs/references/check.md`]. Quote every sentence, caption, label and tooltip that claims more than the source's words state, each with the source line it goes past. Then compare each figure's drawing with its caption and the source: quote every caption the drawing doesn't show, such as an arrow that starts at a part the source doesn't give that move, and every caption that makes two claims."
 
-Done when every quote is fixed or its reason is in the hand-over.
+- **When you can start a subagent**, start one that has seen neither this conversation nor your trace, give it only the reader task, and wait for its answer before you fix anything or hand over.
+- **When you are a subagent that can't start one**, such as a Claude Code subagent, hand over with the reader task, as the hand-over says. The agent that started you runs the reader and brings you its quotes.
+- **Without subagents at all**, read the file once more from the source's side: for each sentence, find the source line before you read the next, then compare each figure's drawing with its caption.
+
+Fix each quote the fresh reading returns, or keep it and say in the hand-over why the source states it. Quotes that the agent that started you brings are the fresh reading's answer, so handling them completes it.
+
+Done when every quote is fixed or its reason is in the hand-over, or, as a subagent that couldn't start the reader, when your hand-over gives the reader task.
 
 ## Hand over
 
 The structure you introduced includes the sections and their order, each figure's form and why, and any worked example. Also list the behaviour you left out as outside the question.
+
+As a subagent that couldn't start the fresh reading's reader, also list "Fresh reading still to run", followed by the reader task word for word, with every path in it absolute.

package/dist/skills/pageship-interaction/SKILL.md

@@ -3,7 +3,7 @@ name: pageship-interaction
 description: Later step of pageship-docs: for a request to write or edit a document, load pageship-docs first; load this skill first only when the user names it. Pattern for controls in a Pageship HTML document, such as stepping through stages, tracing a path, tabs, filters, revealing detail and pointer states on charts and diagrams, loaded by a pageship- kind skill before it adds any control.
 license: MIT
 metadata:
-  version: "0.3.0"
+  version: "0.4.0"
 ---
 
 # Interaction
@@ -47,17 +47,19 @@ Then build each control by its pattern below and the rules under [Controls](#con
 
 ## Check
 
+Run the browser steps with [the check's browser tool](../pageship-docs/references/check.md#checks-in-a-browser).
+
 - Before any input, take a screenshot and confirm that every item, and every number, name and date the source gives for it, is on screen.
 - Tab through the page. Every control and each chart and diagram takes focus in reading order. Tabs, and the marks or nodes of a figure, also move with the arrow keys.
 - Use each control that selects or toggles, and confirm its state changed in its attribute and on screen.
-- Emulate print media and confirm every step, panel, item and detail shows.
+- In print, confirm every step, panel, item and detail shows.
 - Without a browser, read the script and confirm every control is a `button`, link, `summary` or labelled input with the state its pattern names.
 
 ## Patterns
 
 ### Step-through
 
-For a sequence of three to eight stages the reader follows one at a time.
+For a sequence of three to eight stages the reader follows one at a time. A diagram's steps play as a sequence by `pageship-motion` instead.
 
 - All stages are an ordered list in the HTML, each with its number, its name and its essential values. Every stage shows on load and in print; stepping marks one stage as current and dims the later ones.
 - The current stage carries `aria-current="step"` and a mark that is not colour alone, such as weight and a border.
@@ -68,7 +70,7 @@ For a sequence of three to eight stages the reader follows one at a time.
 
 ### Path trace
 
-A step-through over a diagram, for something that travels: a ticket through queues, a request through services. Draw the diagram as inline SVG by `pageship-diagram`, with every node keeping its text label at all times, and build the step-through around it as [the step-through reference](references/step-through.md) shows. The same current stage drives the list and the diagram: the current node and the connector into it take a thicker stroke.
+A sequence over a diagram, for something that travels: a ticket through queues, a request through services. Draw the diagram as inline SVG by `pageship-diagram`, with every node keeping its text label at all times, and play it as a sequence by `pageship-motion`, which gives the controls and the list of steps. The same current step drives the list and the diagram: the current node and the connector into it take a thicker stroke.
 
 ### Filter
 
@@ -111,5 +113,5 @@ For chart marks, diagram nodes and connectors, so the reader can point at one fo
 - **Focus.** Every control keeps its `:focus-visible` outline.
 - **Active state.** A control that selects or toggles something shows its state twice: in the attribute its pattern names (`aria-current`, `aria-pressed`, `aria-selected`, or `open` on `details`) and on screen by more than colour, such as weight, a border, an underline or a word. Style the active look from the attribute, such as `[aria-pressed="true"]`.
 - **Size.** Every control is at least 24 by 24 pixels, and its label says what it does ("Next stage", not "›" alone).
-- **State.** Keep it in page variables and the URL fragment.
+- **State.** Keep it in page variables, and in the URL fragment where the pattern records it.
 - **Script.** Put the script at the end of `body`.

package/dist/skills/pageship-interaction/references/pointer.md

@@ -103,6 +103,8 @@ Copy this script once, at the end of the `<body>`.
       const mark = title.parentElement;
       if (mark.matches("g, .target, .forecast")) continue;
       mark.dataset.tip = words(title);
+      // An SVG shape takes a name only with a role.
+      mark.setAttribute("role", "img");
       mark.setAttribute("aria-label", mark.dataset.tip);
       enlist(mark);
       title.remove();
@@ -111,6 +113,7 @@ Copy this script once, at the end of the `<body>`.
       // A node's <title>, such as a timeline event's, becomes its name and its one tooltip.
       for (const title of svg.querySelectorAll(".node > title")) {
         title.parentElement.dataset.label = words(title);
+        title.parentElement.setAttribute("role", "img");
         title.parentElement.setAttribute("aria-label", words(title));
         title.remove();
       }

package/dist/skills/pageship-interaction/references/step-through.md

@@ -1,46 +1,31 @@
 # Step-through
 
-The markup, style and script for [the step-through](../SKILL.md#step-through) and [the path trace](../SKILL.md#path-trace). Copy them unchanged; change only the ids, the steps and the labels.
+The markup, style and script for [the step-through](../SKILL.md#step-through). Copy them unchanged; change only the ids, the steps and the labels. A diagram's steps are a sequence by `pageship-motion`, not a step-through.
 
 ## Markup
 
-Give the step-through an `id` and the class `stepper`. List the steps as an ordered list, numbered with `data-step` from 1. Each step starts with its name in a `<strong>`, then its essential values. A path trace or a diagram's step-through puts its diagram, drawn by `pageship-diagram`, before the list, and marks each node and connector with the step that brings it in, using the same numbers. The controls and the status line carry `hidden`, so a reader without script never sees them.
+Give the step-through an `id` and the class `stepper`, with a heading. List the steps as an ordered list, numbered with `data-step` from 1. Each step starts with its name in a `<strong>`, then its essential values. The controls and the status line carry `hidden`, so a reader without script never sees them.
 
 ```html
-<figure class="diagram stepper" id="path">
-  <div class="scroll" tabindex="0" role="region" aria-label="Ticket path diagram">
-    <svg ...>
-      ...
-      <path class="edge" data-step="2" data-from="path-triage" data-to="path-billing" ... />
-      <g class="node" data-step="1" id="path-triage">...</g>
-    </svg>
-  </div>
+<section class="stepper" id="rollout">
+  <h3>The rollout, step by step</h3>
   <ol class="steps">
-    <li data-step="1"><strong>Triage</strong>: a ticket arrives in the triage queue.</li>
-    <li data-step="2">
-      <strong>Tagging</strong>: the triage responder tags it billing, bug or other.
-    </li>
+    <li data-step="1"><strong>Pilot</strong>: two teams, 4 to 18 March.</li>
+    <li data-step="2"><strong>Half the fleet</strong>: 310 devices from 25 March.</li>
+    <li data-step="3"><strong>Everyone</strong>: 8 April.</li>
   </ol>
-  <div class="step-controls" role="toolbar" aria-label="Step through the path" hidden>
+  <div class="step-controls" role="toolbar" aria-label="Step through the rollout" hidden>
     <button type="button" data-go="previous">Previous step</button>
     <button type="button" data-go="next">Next step</button>
     <button type="button" data-go="all">Show all steps</button>
   </div>
   <p class="step-status" role="status" aria-live="polite" hidden></p>
-  <figcaption>...</figcaption>
-</figure>
+</section>
 ```
 
-A step-through without a diagram is the same markup with a `<section class="stepper" id="...">` in place of the figure, a heading in place of the caption, and no SVG.
-
 ## Style
 
 ```css
-.stepper .is-current rect,
-.stepper .edge.is-current {
-  stroke: var(--accent);
-  stroke-width: 3;
-}
 .stepper li.is-current {
   font-weight: 600;
   border-left: 3px solid var(--accent);
@@ -143,4 +128,4 @@ Copy this script once, at the end of the `<body>`. It drives every `.stepper` on
 
 ## Check
 
-Press each control by keyboard, and the Left and Right arrow keys on them. Confirm the page opens showing every step, Next walks each step in turn and then shows every step again, the current step's list item carries `aria-current="step"`, and with reduced motion emulated every step stays at full strength. Open the page with a step's fragment, such as `#path-2`, and confirm it opens on that step.
+Press each control by keyboard, and the Left and Right arrow keys on them. Confirm the page opens showing every step, Next walks each step in turn and then shows every step again, the current step's list item carries `aria-current="step"`, and with reduced motion emulated every step stays at full strength. Open the page with a step's fragment, such as `#rollout-2`, and confirm it opens on that step.

package/dist/skills/pageship-key-figures/SKILL.md

@@ -3,7 +3,7 @@ name: pageship-key-figures
 description: Later step of pageship-docs: for a request to write or edit a document, load pageship-docs first; load this skill first only when the user names it. Pattern for the few numbers and callouts a Pageship HTML document opens with, loaded by a pageship- kind skill before it writes key figures.
 license: MIT
 metadata:
-  version: "0.3.0"
+  version: "0.4.0"
 ---
 
 # Key figures

package/dist/skills/pageship-media/SKILL.md

@@ -3,7 +3,7 @@ name: pageship-media
 description: Later step of pageship-docs: for a request to write or edit a document, load pageship-docs first; load this skill first only when the user names it. Pattern for images, video and audio in a Pageship HTML document, loaded by a pageship- kind skill before it shows media.
 license: MIT
 metadata:
-  version: "0.3.0"
+  version: "0.4.0"
 ---
 
 # Media
@@ -98,7 +98,7 @@ audio {
 
 ## Check
 
-Run this in the browser console and fix every item it returns:
+Run this in the page with [the check's browser tool](../pageship-docs/references/check.md#checks-in-a-browser) and fix every item it returns:
 
 ```js
 [

package/dist/skills/pageship-motion/SKILL.md

@@ -1,58 +1,61 @@
 ---
 name: pageship-motion
-description: Later step of pageship-docs: for a request to write or edit a document, load pageship-docs first; load this skill first only when the user names it. Pattern for animation and transitions in a Pageship HTML document, such as playing a change over time or moving a marker along a path, loaded by a pageship- kind skill before anything on the page moves.
+description: Later step of pageship-docs: for a request to write or edit a document, load pageship-docs first; load this skill first only when the user names it. Pattern for animation and transitions in a Pageship HTML document, such as a chart that grows into view, a sequence that plays through a diagram, or a marker moving along a path, loaded by a pageship- kind skill before it draws a chart, a graphic or a sequence, or before anything else on the page moves.
 license: MIT
 metadata:
-  version: "0.3.0"
+  version: "0.4.0"
 ---
 
 # Motion
 
-Motion shows the reader something they would otherwise have to work out: what caused what, the order things happen in, or how a value changes over time. Everything else on the page holds still.
+Motion shows the reader how a figure takes shape: the values a chart reaches, the order a process runs in, what caused what. Every chart, graphic and sequence plays once when it scrolls into view, and everything else on the page holds still.
 
 Unless another pageship- skill loaded this one, start as [pageship-docs says](../pageship-docs/SKILL.md#starting-at-a-kind-or-pattern-skill). Named for just an animation, the file holds the animation and the content it moves.
 
 ## 1. Decide what moves
 
-Motion has exactly three jobs, and each starts when the reader acts:
+Two kinds of figure play, each once, when it scrolls into view:
 
-- **Change.** A value or series changing over time, such as a backlog building week by week, played from a Play button.
-- **Order.** Stages or a path appearing in sequence as the reader steps or plays through them.
-- **Cause.** An event and its effect, such as a marker moving from one stage to the next when the reader presses Next.
+- **Charts and graphics.** Every chart, whatever its form: the forms `pageship-chart` lists and any it adds, small multiples, a graphic beside a key figure, an illustration, and a diagram with no step order, such as a system map, a state diagram or a tree. It opens on its initial state and plays to its values: bars grow from the baseline, a line draws from left to right, points appear, the parts of a share bar fill in, histogram bins rise, a diagram's nodes appear and then its connectors draw, a graphic builds up. `pageship-chart` names each form's entrance.
+- **Sequences.** A diagram that shows a process, a path, an order of events, or a cause and its effect, in steps: a marker moving along a path, stages lighting up in order, a packet travelling through a system, events appearing along a timeline. It plays from the first step to the last.
 
 A transition of 300 ms or less may also carry the eye across a change the reader just made, such as the highlight moving to the new stage.
 
-Everything else is still:
+Everything else holds still: text, headings and sections appear in full, and numbers show their final value from the start. Emphasis comes from position, size, weight and the accent colour, so nothing pulses, bounces, lifts on hover or drifts in the background, and no figure loops on its own.
 
-- Nothing moves on page load or as the reader scrolls.
-- Numbers show their final value and text shows in full from the start.
-- Nothing pulses, bounces, loops, lifts on hover or drifts in the background. Emphasis comes from position, size, weight and the accent colour.
+A request to make a document more engaging, lively or polished asks for clearer content and layout: a stronger summary, key figures up front, better headings, a table or a chart where it helps. The figures' own playback is all the motion it adds. When the user or a design skill asks for motion this section rules out, leave it out and say so in your hand-over.
 
-A request to make a document more engaging, lively or polished asks for clearer content and layout: a stronger summary, key figures up front, better headings, a table or a chart where it helps. It adds no motion. When the user or a design skill asks for motion this section rules out, leave it out and say so in your hand-over.
-
-Done when every planned motion has its job and the reader action that starts it, or you planned none.
+Done when every chart, graphic and sequence has its kind, and every other motion has its job and the reader action that starts it.
 
 ## 2. Build it so the still page tells the whole story
 
-- **The whole picture first.** Before the reader presses anything, the page shows the complete result: every week of the series, every stage of the path, with its values.
-- **Ends complete.** Playback stops at the end and shows the full picture again. It never loops.
-- **Paused keeps context.** When the reader pauses or steps part way, the parts not yet reached stay visible but faint, such as the later weeks drawn in a pale line.
-- **The values in text.** Every value a frame shows is also in text on the page, such as a table under the chart or labels on the path. A position line, such as "Week 5 of 13: 2 Aug, 162 open tickets", names the current frame, with `aria-live="polite"`.
-- **Controls.** Playback has a Play/Pause button whose label says what it will do, and Previous and Next buttons that step one frame, by the [controls rules](../pageship-interaction/SKILL.md#controls) of `pageship-interaction`.
-- **Pace.** A frame holds long enough to read its value: about 500 to 800 ms. A full playback takes about 10 seconds or less. Transitions between states take 150 to 300 ms with an ease-out curve.
-- **One thing at a time.** Animate only the element that carries the change, using `transform`, `opacity` or SVG attributes.
+- **The end state lives in the markup.** The HTML and SVG hold the final values: every bar at its height, every point, the marker at the end of its path. Script moves the figure to its initial state only when it is about to play. Without script, in print, under reduced motion, and before the figure scrolls into view, the reader sees the complete figure with every value.
+- **Plays once, in view.** When enough of the figure scrolls into view, it plays from its initial state and stops on the end state. A figure in view when the page loads plays at once. Loop, a button the reader turns on, is the only way a figure repeats; off again, it stops on the end state.
+- **The reader stays in control.** A chart has Replay and Loop. A sequence has Play/Pause, whose label says what it will do, Back, Next, Replay and Loop, and a position line naming the current step, such as "Step 2 of 5: Tagging", with `aria-live="polite"`. Script adds the buttons, by the [controls rules](../pageship-interaction/SKILL.md#controls) of `pageship-interaction`, so a reader without script never sees them.
+- **Paused keeps context.** When the reader pauses or steps part way through a sequence, the parts not yet reached stay visible but faint.
+- **The values in text.** Every value a frame shows is also in text on the page: a chart's printed values and its table, and a sequence's ordered list of steps with their values.
+- **Pace.** A chart's entrance takes about one second, two at most. A sequence's step holds long enough to read its value, about 500 to 800 ms, and a full playback takes about 10 seconds or less. Motion eases out, and the transitions of step 1 take 150 to 300 ms.
+- **One thing at a time.** Animate only the element that carries the change, with `transform`, `opacity` or SVG attributes.
+
+[The reference script](references/figure-motion.md) gives one timeline where each frame is computed from the step and the time within it, the controls, the start in view, reduced motion, and a marker along an SVG path, with a worked chart and sequence. It is optional: use it, adapt it, or write your own that keeps these rules.
+
+Done when each playing figure's markup holds its end state and its script holds its initial state and the way between.
 
 ## 3. Respect reduced motion
 
-Under `prefers-reduced-motion: reduce`, nothing tweens. Every control still works and changes the state at once: Next jumps to the next frame, and Play advances frame by frame with no movement between them.
+Under `prefers-reduced-motion: reduce`, nothing plays on its own: every figure stays on its end state after loading and scrolling. Every control still works and moves between states at once: Next jumps to the next step, Replay shows the first step, and Play shows each step in turn with no movement between them.
 
 - In CSS, turn off every animation and transition under that media query.
-- In script, check `matchMedia("(prefers-reduced-motion: reduce)").matches` each time before you animate, and set the end state directly when it is true.
+- In script, check `matchMedia("(prefers-reduced-motion: reduce)").matches` each time before you play, and set the state directly when it is true.
 
 ## Check
 
-- Load the page and wait two seconds without touching it. Nothing moved, and the screenshot shows the whole picture.
-- Press Play and let it run to the end. It stops on the full picture. Play again and pause part way: the parts not yet reached are still visible.
-- Emulate `prefers-reduced-motion: reduce` and use every control. Each state appears at once.
-- Emulate print media. The full picture prints, with no controls.
-- Without a browser, read the CSS and script against steps 1 to 3.
+Run the browser steps with [the check's browser tool](../pageship-docs/references/check.md#checks-in-a-browser). `html_preview` screenshots the page right after load, so a figure in view at load is caught at its initial state or part way; a step that waits for playback takes the step for a missing browser.
+
+- **Scripts off.** In a copy with the motion script removed, every chart and graphic shows every value and part, every sequence shows its whole picture, and no playback control shows.
+- **Before scrolling.** With script on, load the page at 1280px and look at a figure below the first screen before scrolling to it: a chart shows every value and a sequence its whole picture, with the controls present.
+- **Plays once, in view.** Scroll each figure into view: a chart or graphic plays from its initial state and a sequence from its first step, and each stops on the end state and stays there. Wait twice the playback's length and confirm nothing changed.
+- **Controls.** Replay plays again. Loop repeats the playback until turned off, then it stops on the end state. In a sequence, Play and Pause do what the label says, Back and Next move one step and the position line names it, and the parts not yet reached stay faint. Each works by keyboard and shows focus.
+- **Reduced motion.** After loading and scrolling, every figure is on its end state and nothing moved. Every control moves between states at once.
+- **Print.** Every figure shows its end state with every value, and no control.
+- **Without a browser**, read the markup and script against steps 1 to 3: the markup holds the end state, the script moves to the initial state only to play, nothing loops without the Loop button, and the script checks reduced motion before every play.

package/dist/skills/pageship-motion/references/figure-motion.js

@@ -0,0 +1,252 @@
+// Plays a figure once when it scrolls into view and gives the reader its controls, by the
+// pageship-motion rules. Copy the whole file into a <script> at the end of <body>, then call
+// animateFigure(figure, options) once per figure, as figure-motion.md shows.
+//
+// options.steps is a list of { duration, hold } in milliseconds: the motion of a step, then a
+// pause on its end state. options.frame(step, t) draws the figure at a step index and an eased
+// time t from 0 to 1 within it: frame(0, 0) is the initial state, and frame(last, 1) the end
+// state, which equals the markup. options.kind is "chart", with Replay and Loop, or "sequence",
+// with Play/Pause, Back, Next, Replay, Loop and a position line; a sequence also marks the
+// current and later parts on every [data-step] element in the figure. options.ease replaces the
+// ease-out curve. The call returns the controller it also stores on figure.motion.
+
+const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+const printing = matchMedia("print");
+
+function animateFigure(figure, { kind = "chart", steps, frame, ease = (t) => 1 - (1 - t) ** 3 }) {
+  const starts = [];
+  let end = 0;
+  for (const step of steps) {
+    starts.push(end);
+    end += (step.duration ?? 0) + (step.hold ?? 0);
+  }
+  const parts = figure.querySelectorAll("[data-step]");
+  const items = figure.querySelectorAll("ol.steps > li");
+  const name = (item) => (item?.querySelector("strong") ?? item)?.textContent.trim() ?? "";
+
+  // The controls, which only a reader with script sees.
+  const title = figure.querySelector("svg > title")?.textContent.trim();
+  const controls = document.createElement("div");
+  controls.className = "motion-controls";
+  controls.setAttribute("role", "toolbar");
+  controls.setAttribute("aria-label", title ? `Playback of ${title}` : "Playback");
+  const button = (label, pressed) => {
+    const element = document.createElement("button");
+    element.type = "button";
+    element.textContent = label;
+    if (pressed) element.setAttribute("aria-pressed", "false");
+    controls.append(element);
+    return element;
+  };
+  const sequence = kind === "sequence";
+  const playButton = sequence ? button("Play") : null;
+  const backButton = sequence ? button("Back") : null;
+  const nextButton = sequence ? button("Next") : null;
+  const replayButton = button("Replay");
+  const loopButton = button("Loop", true);
+  const status = sequence ? document.createElement("p") : null;
+  if (status) {
+    status.className = "motion-status";
+    status.setAttribute("role", "status");
+    status.setAttribute("aria-live", "polite");
+  }
+  const caption = figure.querySelector(":scope > figcaption");
+  if (caption) caption.before(controls, ...(status ? [status] : []));
+  else figure.append(controls, ...(status ? [status] : []));
+
+  // The position along the timeline, in milliseconds; `end` is the markup's end state. What
+  // shows is a state: a step, the eased time within it, and whether the whole figure is done.
+  let position = end;
+  // The state on screen, which Back, Next and a Play after them continue from.
+  let shown = { index: steps.length - 1, t: 1, done: true };
+  let playing = false;
+  let started = false;
+  let last = 0;
+  let pending = 0;
+
+  // The step a position falls in. A step's end belongs to it, not to the next step's start.
+  const stepAt = (at) => {
+    let index = steps.length - 1;
+    while (index > 0 && at <= starts[index]) index--;
+    return index;
+  };
+  const stateAt = (at) => {
+    if (at >= end) return { index: steps.length - 1, t: 1, done: true };
+    const index = stepAt(at);
+    const { duration = 0 } = steps[index];
+    return { index, t: duration ? Math.min(1, (at - starts[index]) / duration) : 1, done: false };
+  };
+  const label = () => {
+    if (playButton) playButton.textContent = playing ? "Pause" : "Play";
+  };
+  const render = (state) => {
+    const { index, t, done } = state;
+    shown = state;
+    frame(index, ease(t));
+    const current = done ? 0 : index + 1;
+    for (const part of parts) {
+      const n = Number(part.dataset.step);
+      part.classList.toggle("is-current", current > 0 && n === current);
+      part.classList.toggle("is-later", current > 0 && n > current);
+      if (part.tagName !== "LI") continue;
+      if (current > 0 && n === current) part.setAttribute("aria-current", "step");
+      else part.removeAttribute("aria-current");
+    }
+    if (status) {
+      status.textContent = current
+        ? `Step ${current} of ${steps.length}: ${name(items[current - 1])}`
+        : `Showing all ${steps.length} steps.`;
+    }
+    label();
+  };
+  const looping = () => loopButton.getAttribute("aria-pressed") === "true";
+  const pause = () => {
+    playing = false;
+    cancelAnimationFrame(pending);
+    clearTimeout(pending);
+    label();
+  };
+  const tick = (now) => {
+    if (!playing) return;
+    if (reducedMotion.matches) return finish();
+    // A tab in the background catches up at most 80 ms per frame, so it never jumps to the end.
+    // The first frame's time can come before the playback started, which adds nothing.
+    position = Math.min(end, position + Math.min(Math.max(0, now - last), 80));
+    last = now;
+    render(stateAt(position));
+    if (position < end) {
+      pending = requestAnimationFrame(tick);
+    } else if (looping()) {
+      // The end state shows for one frame before the next playback starts.
+      position = 0;
+      pending = requestAnimationFrame(tick);
+    } else {
+      pause();
+    }
+  };
+  // Under reduced motion, playback shows each step's end state for its time, with nothing between.
+  const stepwise = (index) => {
+    if (!playing) return;
+    if (index >= steps.length) {
+      if (!looping()) return finish();
+      index = 0;
+    }
+    const { duration = 0, hold = 0 } = steps[index];
+    position = starts[index] + duration;
+    render({ index, t: 1, done: false });
+    pending = setTimeout(() => stepwise(index + 1), Math.max(duration + hold, 600));
+  };
+  const play = (from) => {
+    started = true;
+    playing = true;
+    if (reducedMotion.matches) {
+      stepwise(from ?? (shown.done ? 0 : shown.t >= 1 ? shown.index + 1 : shown.index));
+      return;
+    }
+    // Playback continues from the state on screen, or starts over after the end.
+    if (from === 0 || shown.done) {
+      position = 0;
+      render(stateAt(0));
+    } else {
+      position = starts[shown.index] + (steps[shown.index].duration ?? 0) * shown.t;
+      render(shown);
+    }
+    last = performance.now();
+    pending = requestAnimationFrame(tick);
+  };
+  const replay = () => {
+    pause();
+    position = 0;
+    play(0);
+  };
+  const finish = () => {
+    pause();
+    position = end;
+    render(stateAt(end));
+  };
+  // Back and Next move between each step's end state and the end of the whole figure.
+  const go = (by) => {
+    pause();
+    started = true;
+    const states = steps.length + 1;
+    const at = shown.done ? steps.length : shown.index;
+    const to = (at + by + states) % states;
+    if (to === steps.length) return finish();
+    position = starts[to] + (steps[to].duration ?? 0);
+    render({ index: to, t: 1, done: false });
+  };
+  // Shows a step at an eased time t, for a check that needs a state part way.
+  const seek = (index, t) => {
+    pause();
+    started = true;
+    position = starts[index] + (steps[index].duration ?? 0) * t;
+    render({ index, t, done: false });
+  };
+
+  playButton?.addEventListener("click", () => (playing ? pause() : play()));
+  backButton?.addEventListener("click", () => go(-1));
+  nextButton?.addEventListener("click", () => go(1));
+  replayButton.addEventListener("click", replay);
+  loopButton.addEventListener("click", () => {
+    const on = !looping();
+    loopButton.setAttribute("aria-pressed", String(on));
+    if (on && !playing) play();
+  });
+  controls.addEventListener("keydown", (event) => {
+    const by = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
+    if (!by || !sequence) return;
+    event.preventDefault();
+    go(by);
+  });
+  addEventListener("beforeprint", finish);
+  printing.addEventListener("change", () => printing.matches && finish());
+
+  // The first time enough of the figure is in view, it plays from its initial state. Until
+  // then, under reduced motion and in print, the markup's end state shows. A figure taller than
+  // the window counts as in view once half the window shows it, so the thresholds run in small
+  // steps up to 35% to catch that crossing in a figure many windows tall.
+  const enough = (entry) =>
+    entry.isIntersecting &&
+    (entry.intersectionRatio >= 0.35 || entry.intersectionRect.height >= innerHeight / 2);
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (started) return observer.disconnect();
+      if (!entries.some(enough)) return;
+      observer.disconnect();
+      if (!reducedMotion.matches) replay();
+    },
+    { threshold: [0, 0.01, 0.02, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35] },
+  );
+  if (!printing.matches) observer.observe(figure);
+
+  render(stateAt(end));
+  figure.motion = {
+    play: () => play(),
+    pause,
+    replay,
+    back: () => go(-1),
+    next: () => go(1),
+    finish,
+    seek,
+  };
+  return figure.motion;
+}
+
+// The point a fraction t along an SVG path, in the SVG's own units.
+function alongPath(path, t) {
+  const length = path.getTotalLength();
+  const point = path.getPointAtLength(Math.min(1, Math.max(0, t)) * length);
+  return { x: point.x, y: point.y };
+}
+
+// Draws an SVG path up to a fraction t of its length. At 1 the path is as the markup draws it.
+function drawPath(path, t) {
+  if (t >= 1) {
+    path.removeAttribute("stroke-dasharray");
+    path.removeAttribute("stroke-dashoffset");
+    return;
+  }
+  const length = path.getTotalLength();
+  path.setAttribute("stroke-dasharray", `${length} ${length}`);
+  path.setAttribute("stroke-dashoffset", `${length * (1 - Math.max(0, t))}`);
+}