From 628606d565a8bbfdec9a71d1135bd9ef165d08c2 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 15:47:46 +0100
Subject: [PATCH 1/7] refactor(studio): move the chart card's dataset builders
 to chartDatasets.ts

barDatasets, lineDatasets, barCap and legendShown move out of ChartCard.tsx
unchanged, so code outside the card can build the same Chart.js datasets.
motion-kit draws a chart card's plot from them.
---
 .../Studio/canvas/cards/ChartCard.tsx         | 117 ++++--------------
 .../Studio/canvas/chart/chartDatasets.ts      | 116 +++++++++++++++++
 2 files changed, 140 insertions(+), 93 deletions(-)
 create mode 100644 src/components/organisms/Studio/canvas/chart/chartDatasets.ts

diff --git a/src/components/organisms/Studio/canvas/cards/ChartCard.tsx b/src/components/organisms/Studio/canvas/cards/ChartCard.tsx
index b2c4e06..d2c9a4b 100644
--- a/src/components/organisms/Studio/canvas/cards/ChartCard.tsx
+++ b/src/components/organisms/Studio/canvas/cards/ChartCard.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import type { ScriptableContext } from 'chart.js';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Bar, Line } from 'react-chartjs-2';
 
+import { barDatasets, legendShown, lineDatasets } from '../chart/chartDatasets';
 import {
     buildChartOptions,
     checkerPattern,
     type RowsLayout,
-    seriesPair,
     seriesVars,
 } from '../chart/chartSetup';
 import cardStyles from './Card.module.scss';
@@ -21,14 +20,7 @@ import { cardEdges, type Fit, useFittedRows, useFontsReady } from './useFittedRo
 
 import type { ChartWidget } from '@/lib/chat/widgets';
 import { chartAlt } from '@/lib/studio/chartAlt';
-import {
-    BAR_THICKNESS,
-    CARD_BORDERS,
-    fittedRows,
-    plotHeight,
-    plotShape,
-} from '@/lib/studio/chartFit';
-import { lonePoints } from '@/lib/studio/linePoints';
+import { CARD_BORDERS, fittedRows, plotHeight, plotShape } from '@/lib/studio/chartFit';
 import { legendLabels } from '@/lib/studio/seriesLabels';
 import type { ThemeDerived } from '@/lib/studio/theme';
 
@@ -164,90 +156,33 @@ const ChartCard = ({
             }),
         [widget, scale, theme, rows, fontsReady, onLayout],
     );
-    // A ranking's bars keep one thickness under their names.
-    const barCap = (rows ? BAR_THICKNESS : 28) * scale;
     const barData = useMemo(
         () => ({
             labels: widget.categories,
-            datasets: widget.series.map((s, si) => ({
-                label: s.label,
-                data: s.values,
-                hidden: hiddenSeries.includes(si),
-                // A transposed comparison runs as one series, so every bar
-                // takes the accent: colour would otherwise repeat the name
-                // the category axis already carries.
-                backgroundColor: () => checkerPattern(seriesPair(theme.series, si), scale),
-                // Hover resolves the weave into the solid base color.
-                hoverBackgroundColor: seriesPair(theme.series, si)[0],
-                // The cap is a fixed fraction of the bar's width — clearly
-                // rounded ("half-square") at every thickness, never a full
-                // bulb. Bar elements aren't measured when options resolve,
-                // so the width is derived from the scale: the category slot
-                // shared by the visible datasets, with Chart.js's default
-                // 0.8/0.9 category/bar percentages.
-                borderRadius: (ctx: ScriptableContext<'bar'>) => {
-                    const { chart } = ctx;
-                    // The category slot is measured across the index axis,
-                    // which is y once the chart is transposed.
-                    const indexScale = chart.scales[widget.horizontal ? 'y' : 'x'];
-                    const visible = chart.data.datasets.filter((_, i) =>
-                        chart.isDatasetVisible(i),
-                    ).length;
-                    const categories = chart.data.labels?.length || 1;
-
-                    if (!indexScale || !visible) {
-                        return 4 * scale;
-                    }
-
-                    const span = widget.horizontal ? indexScale.height : indexScale.width;
-                    const slot = (span / categories) * 0.8;
-                    const width = Math.min((slot / visible) * 0.9, barCap);
-
-                    return Math.max(1, width / 3);
-                },
-                borderSkipped: (widget.horizontal ? 'left' : 'bottom') as 'left' | 'bottom',
-                maxBarThickness: barCap,
-            })),
+            datasets: barDatasets({
+                widget,
+                scale,
+                theme,
+                hidden: hiddenSeries,
+                fill: (pair) => checkerPattern(pair, scale),
+                rows,
+            }),
         }),
-        [widget, scale, hiddenSeries, theme, barCap],
+        [widget, scale, hiddenSeries, theme, rows],
     );
-    const lineData = useMemo(() => {
-        const dotRadius = 3 * scale;
-        const hoverRadius = 3.5 * scale;
-        const borderWidth = 2.5 * scale;
-        // Chart.js resolves a hovered point's ring from pointHoverBorderWidth,
-        // then hoverBorderWidth, whose point default is 1.
-        const hoverBorderWidth = 1;
-        // Chart.js sizes the clip margin from the first and last points only,
-        // so an interior dot on an axis limit would be cut; clip to the outer
-        // edge of the lone dot or of the hover disc, whichever is larger.
-        const clip = Math.max(dotRadius + borderWidth / 2, hoverRadius + hoverBorderWidth / 2);
-
-        return {
+    const lineData = useMemo(
+        () => ({
             labels: widget.categories,
-            datasets: widget.series.map((s, si) => ({
-                label: s.label,
-                data: s.values,
-                hidden: hiddenSeries.includes(si),
-                borderColor: seriesPair(theme.series, si)[0],
-                // A missing value breaks the line, so a value with a gap on
-                // both sides has no segment. It gets a dot, which Chart.js
-                // fills from the dataset colours below, like the hover disc.
-                pointRadius: lonePoints(s.values).map((lone) => (lone ? dotRadius : 0)),
-                // The point fill (hover disc and lone dots): the checkered
-                // weave of the bars. The tooltip swatch comes from seriesPalette.
-                backgroundColor: () => checkerPattern(seriesPair(theme.series, si), scale),
-                borderWidth,
-                // Round joins keep a sharp dip or peak at an axis limit within
-                // half the line width, inside the clip margin.
-                borderJoinStyle: 'round' as const,
-                pointHoverRadius: hoverRadius,
-                pointHoverBorderWidth: hoverBorderWidth,
-                pointHitRadius: 8 * scale,
-                clip,
-            })),
-        };
-    }, [widget, scale, hiddenSeries, theme]);
+            datasets: lineDatasets({
+                widget,
+                scale,
+                theme,
+                hidden: hiddenSeries,
+                fill: (pair) => checkerPattern(pair, scale),
+            }),
+        }),
+        [widget, scale, hiddenSeries, theme],
+    );
 
     // What a screen reader is told the canvas shows: Chart.js marks it
     // role="img" and leaves it unnamed, and the card's title is a separate
@@ -259,11 +194,7 @@ const ChartCard = ({
     // away (QA-57).
     const names = useMemo(() => legendLabels(widget.series.map((s) => s.label)), [widget]);
 
-    // A legend tells series apart, so a chart of one series has none (the
-    // title names it), and neither has a transposed comparison, whose one
-    // series is the period already in the title.
-    const showLegend =
-        widget.series.length > 1 && widget.series.some((s) => s.label) && !widget.horizontal;
+    const showLegend = legendShown(widget);
 
     return (
         <article ref={cardRef} className={cardStyles.card}>
diff --git a/src/components/organisms/Studio/canvas/chart/chartDatasets.ts b/src/components/organisms/Studio/canvas/chart/chartDatasets.ts
new file mode 100644
index 0000000..12b0a85
--- /dev/null
+++ b/src/components/organisms/Studio/canvas/chart/chartDatasets.ts
@@ -0,0 +1,116 @@
+import type { ScriptableContext } from 'chart.js';
+
+import { seriesPair } from './chartSetup';
+
+import type { ChartWidget } from '@/lib/chat/widgets';
+import { BAR_THICKNESS } from '@/lib/studio/chartFit';
+import { lonePoints } from '@/lib/studio/linePoints';
+import type { SeriesPair, ThemeDerived } from '@/lib/studio/theme';
+
+/**
+ * A chart card's Chart.js datasets, bar and line. The fill of bars and of
+ * line points is the checkered weave, which needs a DOM canvas in the
+ * browser, so the caller hands in how a series pair becomes a fill.
+ */
+
+type DatasetInputs = {
+    widget: ChartWidget;
+    scale: number;
+    theme: ThemeDerived;
+    // Series the legend has parked, by index.
+    hidden: readonly number[];
+    fill: (pair: SeriesPair) => CanvasPattern | string;
+};
+
+// A legend tells series apart, so a chart of one series has none (the
+// title names it), and neither has a transposed comparison, whose one
+// series is the period already in the title.
+export const legendShown = (widget: ChartWidget): boolean =>
+    widget.series.length > 1 && widget.series.some((s) => s.label) && !widget.horizontal;
+
+// A ranking's bars keep one thickness under their names.
+export const barCap = (rows: boolean, scale: number): number => (rows ? BAR_THICKNESS : 28) * scale;
+
+export const barDatasets = ({
+    widget,
+    scale,
+    theme,
+    hidden,
+    fill,
+    rows,
+}: DatasetInputs & { rows: boolean }) => {
+    const cap = barCap(rows, scale);
+
+    return widget.series.map((s, si) => ({
+        label: s.label,
+        data: s.values,
+        hidden: hidden.includes(si),
+        // A transposed comparison runs as one series, so every bar
+        // takes the accent: colour would otherwise repeat the name
+        // the category axis already carries.
+        backgroundColor: () => fill(seriesPair(theme.series, si)),
+        // Hover resolves the weave into the solid base color.
+        hoverBackgroundColor: seriesPair(theme.series, si)[0],
+        // The cap is a fixed fraction of the bar's width — clearly
+        // rounded ("half-square") at every thickness, never a full
+        // bulb. Bar elements aren't measured when options resolve,
+        // so the width is derived from the scale: the category slot
+        // shared by the visible datasets, with Chart.js's default
+        // 0.8/0.9 category/bar percentages.
+        borderRadius: (ctx: ScriptableContext<'bar'>) => {
+            const { chart } = ctx;
+            // The category slot is measured across the index axis,
+            // which is y once the chart is transposed.
+            const indexScale = chart.scales[widget.horizontal ? 'y' : 'x'];
+            const visible = chart.data.datasets.filter((_, i) => chart.isDatasetVisible(i)).length;
+            const categories = chart.data.labels?.length || 1;
+
+            if (!indexScale || !visible) {
+                return 4 * scale;
+            }
+
+            const span = widget.horizontal ? indexScale.height : indexScale.width;
+            const slot = (span / categories) * 0.8;
+            const width = Math.min((slot / visible) * 0.9, cap);
+
+            return Math.max(1, width / 3);
+        },
+        borderSkipped: (widget.horizontal ? 'left' : 'bottom') as 'left' | 'bottom',
+        maxBarThickness: cap,
+    }));
+};
+
+export const lineDatasets = ({ widget, scale, theme, hidden, fill }: DatasetInputs) => {
+    const dotRadius = 3 * scale;
+    const hoverRadius = 3.5 * scale;
+    const borderWidth = 2.5 * scale;
+    // Chart.js resolves a hovered point's ring from pointHoverBorderWidth,
+    // then hoverBorderWidth, whose point default is 1.
+    const hoverBorderWidth = 1;
+    // Chart.js sizes the clip margin from the first and last points only,
+    // so an interior dot on an axis limit would be cut; clip to the outer
+    // edge of the lone dot or of the hover disc, whichever is larger.
+    const clip = Math.max(dotRadius + borderWidth / 2, hoverRadius + hoverBorderWidth / 2);
+
+    return widget.series.map((s, si) => ({
+        label: s.label,
+        data: s.values,
+        hidden: hidden.includes(si),
+        borderColor: seriesPair(theme.series, si)[0],
+        // A missing value breaks the line, so a value with a gap on
+        // both sides has no segment. It gets a dot, which Chart.js
+        // fills from the dataset colours below, like the hover disc.
+        pointRadius: lonePoints(s.values).map((lone) => (lone ? dotRadius : 0)),
+        // The point fill (hover disc and lone dots): the checkered
+        // weave of the bars. The tooltip swatch comes from seriesPalette.
+        backgroundColor: () => fill(seriesPair(theme.series, si)),
+        borderWidth,
+        // Round joins keep a sharp dip or peak at an axis limit within
+        // half the line width, inside the clip margin.
+        borderJoinStyle: 'round' as const,
+        pointHoverRadius: hoverRadius,
+        pointHoverBorderWidth: hoverBorderWidth,
+        pointHitRadius: 8 * scale,
+        clip,
+    }));
+};

From 18bab3fac52791af097f84802efa3eeaac4a3123 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 15:47:46 +0100
Subject: [PATCH 2/7] feat(motion-kit): render the Studio and capture site
 pages as Claude Motion films

pnpm motion-kit <spec> renders a Studio workspace from the app's own
components (Header, WorkspaceToolbar, ChatPanel with PlanCard and
ApprovedPlanPill, the card components) as one static HTML fragment and
its scoped CSS, with each chart drawn by Chart.js into SVG. pnpm
motion-kit capture <page> drives Chrome through the running site and
snapshots each state of any route as inert HTML and CSS.

The manifest records the app's own keyframes and transitions, read in
Chrome. A cue sheet beside the spec times the film: typing that grows the
prompt as PromptForm does, streamed replies, the plan approved into its
pill, cards arriving with their own keyframes, series drawing, and a
camera that centres on named hooks. runtime/dfo-motion.js plays it as a
pure function of time, restoring each element's own style every frame.

Every run writes the Motion store documents and a preview.html that plays
the film from disk. The generator refuses a cue, spec or module a film
cannot play: a missing hook, state or keyframe, a field of the wrong
type, a store document over 200 KiB, an outside URL, a media query it
cannot decide. motion-kit/demos/kenya-debt-health.json is the worked
example, and motion-kit/README.md documents the specs, cues and outputs.
---
 motion-kit/README.md                         | 279 ++++++++
 motion-kit/browser.ts                        |  22 +
 motion-kit/build.ts                          | 496 +++++++++++++
 motion-kit/capture.ts                        | 308 ++++++++
 motion-kit/chart.tsx                         | 388 ++++++++++
 motion-kit/cli.ts                            |  59 ++
 motion-kit/css.ts                            | 330 +++++++++
 motion-kit/cues.ts                           | 245 +++++++
 motion-kit/demos/kenya-debt-health.cues.json | 199 ++++++
 motion-kit/demos/kenya-debt-health.json      | 510 +++++++++++++
 motion-kit/fontMetrics.ts                    | 214 ++++++
 motion-kit/html.ts                           | 143 ++++
 motion-kit/motion.ts                         | 386 ++++++++++
 motion-kit/pageCss.ts                        | 207 ++++++
 motion-kit/pages/ids-source.json             |  20 +
 motion-kit/pages/kenya-debt-search.json      |  23 +
 motion-kit/preview.ts                        | 153 ++++
 motion-kit/recorder.ts                       | 449 ++++++++++++
 motion-kit/render.tsx                        | 708 +++++++++++++++++++
 motion-kit/runtime/dfo-motion.js             | 584 +++++++++++++++
 motion-kit/snapshot.ts                       | 563 +++++++++++++++
 motion-kit/spec.ts                           | 372 ++++++++++
 motion-kit/stateClasses.ts                   | 158 +++++
 motion-kit/stubs/next-link.tsx               |  20 +
 motion-kit/stubs/next-navigation.ts          |  19 +
 motion-kit/stubs/server-only.ts              |   2 +
 motion-kit/test/capture.test.ts              | 391 ++++++++++
 motion-kit/test/motion-kit.test.ts           | 571 +++++++++++++++
 package.json                                 |   4 +-
 pnpm-lock.yaml                               |  10 +
 30 files changed, 7832 insertions(+), 1 deletion(-)
 create mode 100644 motion-kit/README.md
 create mode 100644 motion-kit/browser.ts
 create mode 100644 motion-kit/build.ts
 create mode 100644 motion-kit/capture.ts
 create mode 100644 motion-kit/chart.tsx
 create mode 100644 motion-kit/cli.ts
 create mode 100644 motion-kit/css.ts
 create mode 100644 motion-kit/cues.ts
 create mode 100644 motion-kit/demos/kenya-debt-health.cues.json
 create mode 100644 motion-kit/demos/kenya-debt-health.json
 create mode 100644 motion-kit/fontMetrics.ts
 create mode 100644 motion-kit/html.ts
 create mode 100644 motion-kit/motion.ts
 create mode 100644 motion-kit/pageCss.ts
 create mode 100644 motion-kit/pages/ids-source.json
 create mode 100644 motion-kit/pages/kenya-debt-search.json
 create mode 100644 motion-kit/preview.ts
 create mode 100644 motion-kit/recorder.ts
 create mode 100644 motion-kit/render.tsx
 create mode 100644 motion-kit/runtime/dfo-motion.js
 create mode 100644 motion-kit/snapshot.ts
 create mode 100644 motion-kit/spec.ts
 create mode 100644 motion-kit/stateClasses.ts
 create mode 100644 motion-kit/stubs/next-link.tsx
 create mode 100644 motion-kit/stubs/next-navigation.ts
 create mode 100644 motion-kit/stubs/server-only.ts
 create mode 100644 motion-kit/test/capture.test.ts
 create mode 100644 motion-kit/test/motion-kit.test.ts

diff --git a/motion-kit/README.md b/motion-kit/README.md
new file mode 100644
index 0000000..ca1e992
--- /dev/null
+++ b/motion-kit/README.md
@@ -0,0 +1,279 @@
+# motion-kit
+
+motion-kit renders the DFO Studio workspace, and captures any other page of the site, as static HTML and CSS for Claude Motion. A Motion film is a 1920×1080 sandboxed stage that builds its DOM from text modules and animates it as a function of time, with no React, no `<script>` and no external URLs. motion-kit turns the Studio's own components into markup and compiled CSS the film can hold, so a demo shows the real interface rather than a redrawing of it.
+
+A demo is a JSON spec: the conversation, the plan, the activity and the cards. The generator is the same for every demo.
+
+## Command
+
+```sh
+pnpm motion-kit motion-kit/demos/kenya-debt-health.json
+pnpm motion-kit path/to/spec.json --out some/dir
+```
+
+Output goes to `motion-kit/dist/<spec name>/` unless `--out` names a directory. Each run replaces that directory, and refuses one that holds files but no `manifest.json`, so `--out` cannot wipe a folder of specs. `dist/` is ignored by git. The run takes about three seconds. It reads the app's motion in Google Chrome, found as the page capture finds it (`CHROMIUM_PATH` or the installed Chrome), and fails without one.
+
+## The demo spec
+
+The types live in `motion-kit/spec.ts` and reuse the app's own: `Widget` from `src/lib/chat/widgets.ts`, `ChatMessage` and `PlanState` from `useChat.ts`, `ActivityEntry` from `src/lib/studio/activity.ts`.
+
+| Field      | Meaning                                                                                                                                                                                                             |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`    | The conversation title in the tools row.                                                                                                                                                                            |
+| `question` | The prompt the film types into the chat input. It is also copied to the manifest.                                                                                                                                   |
+| `messages` | The transcript, as `ChatMessage` values. A bot message needs text, follow-ups, chips or a plan. One bot message may carry `plan`, the `ApprovedPlan` the user approved for that answer, shown as the pill under it. |
+| `plan`     | Optional. The plan awaiting approval as useChat holds it, a `PlanState`: the plan card with its ledger of choices and, when `live`, the approve bar, in the chat foot.                                              |
+| `activity` | Optional. The Activity tab's turns.                                                                                                                                                                                 |
+| `cards`    | Each card's `widget` and its `slot`: `col` and `row` in grid cells, whole numbers from 0, and optional `w` and `h`, whole numbers from 1.                                                                           |
+| `viewport` | Optional. CSS px at a 16 px root; 1280×800 when absent. At least 660 px wide: below that the Studio takes its phone layout, which the generator does not render.                                                    |
+
+A slot without `w` or `h` takes the span the Studio gives a fresh card of that kind (`spawnSpan` in `canvas/layout.ts`). A chart's spawn height is an estimate, so give a chart card the `h` the Studio settles on: the Kenya chart is 24×21. Card ids must be letters, digits, `_` or `-`, since they name hooks.
+
+Every card belongs to the turn of the last bot message, so each bot message of that turn lists the cards as chips, as the Studio does.
+
+`motion-kit/demos/kenya-debt-health.json` is the worked example: Kenya's external debt service against health aid, including HIV, from 2015 to 2024, with two stat cards, a line chart, a plan with two scope choices and one planner decision, and the same plan approved under the answer.
+
+### The plan's two states
+
+The film shows the plan awaiting approval and then approved. In the Studio these are two renders of `ChatPanel`: while `chat.plan` is set, `PlanCard` and its `PlanApproveBar` sit in the chat foot and the input reads "Propose changes or ask a follow up..."; once the user approves, `chat.plan` is null and the answer the approval resumed carries the plan, which `ChatMessage` shows as `ApprovedPlanPill` under the answer's card chips. Neither render depends on the other, so the fragment holds both: the plan card and bar in the foot and the pill under its answer. The manifest's `states` names the hooks of each, and the attributes that change once the plan is approved:
+
+```json
+"states": {
+    "pending": { "hooks": ["plan", "plan-bar", "plan-approve"] },
+    "approved": {
+        "hooks": ["plan-pill"],
+        "attrs": { "prompt": { "placeholder": "Ask a follow up...", "aria-label": "Ask a follow up" } }
+    }
+}
+```
+
+A film shows one state by hiding the other's hooks. The chat foot loses the card's height when its hooks are hidden with `display: none` or folded by a `hide` cue, as it does in the Studio.
+
+### The cue sheet
+
+A demo's camera keys and cues live beside its spec as `<spec name>.cues.json` (`kenya-debt-health.cues.json`). The generator copies it into the output as `cues.json`, and fails, listing every problem, when:
+
+- a cue or key names a hook the fragment lacks, in `v`, `from`, `points` or a key's `hook`, or a cue's `sel` finds nothing inside its hook;
+- an `animate` cue plays keyframes the render lacks, animates a hook the app does not animate, or names both a hook and keyframes;
+- a `state` cue switches to a state the manifest lacks, a `tab` cue has no `from`, or a `type` cue has no `text`;
+- a cue's `kind` is not one of `show`, `pop`, `stream`, `draw`, `type`, `press`, `hide`, `remove`, `tab`, `animate` and `state`, or it has no `at`;
+- a number field (`dur`, `dy`, `wps`, `cps`, `clearAt`, a key's `z`, `hold`, `cx`, `cy` or `from`) holds anything but a number, or `drift` is not three numbers;
+- a key's `t` does not come after the key before it. A spec without a cue sheet renders without one.
+
+A camera key is `{ "t": 5.4, "hook": "msg-1", "z": 1.7, "hold": 3 }`: at `t` s the view centres on the hook, or on `cx` and `cy` in stage px, at zoom `z`, measured as the layout stands at `t`, and stays for `hold` s before easing to the next key. `drift: [dx, dy, dz]` moves the resting view per second, and `from` starts the move to this key at that time. A sheet with no keys holds the whole stage in view.
+
+| Kind      | Does                                                                                                    | Fields                        |
+| --------- | ------------------------------------------------------------------------------------------------------- | ----------------------------- |
+| `show`    | Shows the element at `at`, out of the layout before. With `dur` over 0 it fades and rises `dy` px.      | `dur` (0.4), `dy` (10)        |
+| `pop`     | Shows it with a scale-up. For overlays of the film's own; product cards use `animate`.                  | `dur` (0.45)                  |
+| `stream`  | Shows its text word by word, each word taking room as it lands.                                         | `wps` (9)                     |
+| `draw`    | Draws an SVG path, a chart series, along its length; `points` names the series' dots, shown at the end. | `dur` (1.6), `points`         |
+| `type`    | Types `text` into a field, which grows as `PromptForm`'s does, and empties it at `clearAt`.             | `text`, `cps` (24), `clearAt` |
+| `press`   | Presses a button.                                                                                       |                               |
+| `remove`  | Takes the element out at once, as the app unmounts it.                                                  |                               |
+| `hide`    | Fades the element and folds its height. For overlays of the film's own.                                 | `dur` (0.4)                   |
+| `tab`     | Switches the chat panel to the view `v` from the view `from`. Studio only.                              | `from`                        |
+| `animate` | Plays the app's own animations on `v` (or `sel` inside it), or every one with the keyframes `name`.     | `name`                        |
+| `state`   | Sets the attributes of the manifest state `to`, such as the prompt's placeholder after approval.        | `to`                          |
+
+A page capture takes a cue sheet the same way, `<page spec name>.cues.json`, checked against the page's hooks. It has no app motion or states, so the generator refuses `animate`, `state` and `tab` cues. A film mounts one captured state per scene, so a cue or key that belongs to one state names it in `in` (`"in": "results"`) and plays only there; one without `in` plays in every state. The generator checks each cue's hooks against the states it plays in, from the manifest's `boxes`. A cue's `sel` inside a captured hook is checked when the film mounts, so an error shows in the preview.
+
+## Outputs
+
+| File                        | Contents                                                                                                                                               |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `studio.html`               | One fragment: the header, the tools row, the chat panel and the whiteboard with every card placed, inside `<div class="dfo-ui">`.                      |
+| `dfo-ui.css`                | Everything the fragment needs, scoped under `.dfo-ui`. Split into `dfo-ui.css~1`, `dfo-ui.css~2` and so on when its store document would pass 200 KiB. |
+| `manifest.json`             | The viewport, the hooks, the plan's states, card slots in cells and px, each chart's series with its path length, and the app's motion (below).        |
+| `cues.json`                 | The cue sheet, when the spec has one.                                                                                                                  |
+| `shared.js`                 | The runtime, `runtime/dfo-motion.js`, which Motion runs once before any scene.                                                                         |
+| `store/modules/<file>.json` | Each file above as a Motion store document, `{"kind": "css" \| "html" \| "json" \| "js", "text": "…"}`, ready to send.                                 |
+| `preview.html`              | The film played in a browser, outside Motion (below). Not a module.                                                                                    |
+
+## Preview
+
+Every run writes `preview.html` beside the modules: one page with every module inline, opened straight from disk.
+
+```sh
+open motion-kit/dist/kenya-debt-health/preview.html
+```
+
+The page mounts the film with `shared.js` in a stand-in for Motion's stage and plays the cue sheet from 0 to the runtime's `end`, when the last cue finishes or the last camera hold ends, with a play button and a scrubber. `?t=9.5` opens it at 9.5 s; a page capture has a menu of its states, and `?state=typed` opens one. A runtime error shows above the stage. The stand-in implements the part of Motion's `kit` the runtime calls (`preview.ts`), so a scene's own timing and Motion's export are untested here: check the published film in Motion before sharing it.
+
+### Hooks
+
+Elements an animation drives carry a `data-v` attribute. The manifest's `hooks` lists every one in the fragment.
+
+| Hook                         | Element                                                                                                                                                                       |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `chat`                       | The chat panel.                                                                                                                                                               |
+| `view-chat`, `view-activity` | The panel's two stacked views. The visible one has the class in the manifest's `classes.viewActive`.                                                                          |
+| `msg-<i>`                    | Message `i` of the spec's `messages`.                                                                                                                                         |
+| `prompt`, `send`             | The chat input's text field and its send button.                                                                                                                              |
+| `plan`                       | The plan card awaiting approval, when the spec has a `plan`.                                                                                                                  |
+| `plan-bar`, `plan-approve`   | The "Start building?" bar under the plan card, and its Approve button, when the plan is `live`.                                                                               |
+| `plan-pill`                  | The approved plan's pill under its answer, when a bot message carries a `plan`.                                                                                               |
+| `activity-<i>`               | Turn `i` of the spec's `activity`.                                                                                                                                            |
+| `activity-<i>-<j>`           | The `j`th step line shown in that turn. The Studio folds finished steps behind "Show N completed steps", so only steps still pending or running, and failed ones, have lines. |
+| `canvas`                     | The whiteboard's scrolling box.                                                                                                                                               |
+| `card-<id>`                  | A card's slot. Its manifest entry has `col`, `row`, `w`, `h` in cells and `x`, `y`, `width`, `height` in px from the sheet's top-left corner.                                 |
+| `series-<id>-<i>`            | Series `i` of a chart card: the line's path, or the group of a series' bars. The manifest gives a line's `length` for a draw-on.                                              |
+| `points-<id>-<i>`            | The dots of a line's values that have a gap on both sides, when there are any.                                                                                                |
+
+### The app's motion
+
+The film's stylesheet has no motion, but the manifest keeps the app's own, read in Chrome from the fragment under the stylesheet with its motion left in (`motion.ts`), so custom properties, the `animation` and `transition` shorthands and the cascade resolve as in the Studio. An element is named by its hook as `{ "v": "card-x" }`, by a path inside the nearest hook as `{ "v": "msg-1", "sel": "> div:nth-child(3) > button:nth-child(1)" }`, or, with no hook above it, by a path from the fragment's root as `{ "sel": ".dfo-ui > section:nth-child(1) > …" }`; the runtime's `q(v, sel)` reads the first two.
+
+- `animations`: every element, and `::before` or `::after`, whose `animation-name` is not `none`, one entry per animation: `name`, `duration` and `delay` in seconds, `timing`, `iterations` (a number or `"infinite"`), `fill` and `direction`.
+- `keyframes`: each animation's keyframes by name, as `{ "offset": 0–1, "style": { property: value } }` steps with the declared values, `rem` already in px.
+- `transitions`: by toggle, `.<class>` or `[attribute="value"]`, the elements a toggle changes and how they ease there: `toggle` (`add`, `remove` or `set`), the element toggled (`on`), the element that moves (`element`) and its `properties`, each with `duration`, `timing` and `delay` in the state the toggle lands in. A class toggle is a class a component adds beside one of the element's own classes in a `classNames(…)` call (`stateClasses.ts`); an attribute toggle is a `data-*` or `aria-*` value the stylesheet tests for, or another element carries. A toggle is listed only where it changes the computed value of a property the element transitions.
+
+For Kenya the manifest holds these animations, all running once:
+
+| Keyframes                         | Duration | Delay             | Fill        | Elements                                           |
+| --------------------------------- | -------- | ----------------- | ----------- | -------------------------------------------------- |
+| `Studio_module_board-in`          | 0.35 s   | 0.45 s            | `backwards` | `canvas`                                           |
+| `Studio_module_bar-in`            | 0.4 s    | 0.5, 0.57, 0.64 s | `both`      | The header's New Chat, Customize and Share buttons |
+| `WorkspaceToolbar_module_ws-rise` | 0.5 s    | 0.4, 0.5, 0.55 s  | `both`      | The tools row's chat tabs, title and card tabs     |
+| `ChatPanel_module_chat-in`        | 0.65 s   | 0.25 s            | `backwards` | `chat`                                             |
+| `Card_module_widget-in`           | 0.45 s   | 0                 | `both`      | Each card's `article`, inside `card-<id>`          |
+
+The plan card has no entrance or exit keyframes of its own, and the status line's `status-shimmer` is absent because the fragment renders no turn in progress. Its transitions include the tab switch (`.ChatPanel_module_viewActive`: opacity 0.3 s and translate 0.35 s), the chat collapse (`.ChatPanel_module_chatHidden`: translate and opacity, 0.9 s after 0.1 s), the segmented tabs (`[data-active="true"]`: colour 0.3 s), the plan's steps dimming while a switch runs (`.PlanCard_module_dim`: opacity 0.25 s) and a card chip opening (`.WidgetChips_module_chipOpen`).
+
+Every keyframe in the Kenya render animates `opacity` and `translate` only. `ChatPanel_module_chat-in` starts at `translate: calc(-100% - var(--page-gutter, 32px)) 0`, a share of the panel's own width. Of the keyframes in the bundle, two animate another property, `background-position`: `ChatPanel_module_status-shimmer` (the status line's sweep) and `LivePlaceholder_module_bone-sweep` (a loading card's skeleton). `PlanLedger_module_spin` turns with `rotate`, and `Header_module_menu-in`, `AccountMenu_module_account-in` and `ChatPanel_module_thinking-pulse` use `scale`.
+
+## How the fragment is made
+
+`build.ts` bundles `render.tsx` with esbuild for Node, resolving imports as the app's build does: `*.module.scss` through Sass and esbuild's CSS modules, `*.svg` through SVGR with `svgo.config.cjs`, `@/` to `src/`, and stubs for `next/navigation`, `next/link` and `server-only`. `render.tsx` renders with `renderToStaticMarkup`.
+
+`Studio.tsx` and `Whiteboard.tsx` fill themselves from effects, so `render.tsx` rebuilds their skeleton with the same classes and slot geometry and renders the app's components inside it: `Header`, `WorkspaceToolbar`, `ChatPanel` with a plain object in place of `useChat` (so `PlanCard`, `PlanLedger`, `PlanApproveBar` and `ApprovedPlanPill` render as the Studio renders them), and `CardBody`, `CardHead` and `CardChrome` for the cards. It renders the workspace a second time without the pending plan to read what the chat input says once the plan is approved.
+
+A chart card keeps `ChartCard`'s DOM, but its canvas becomes an inline SVG. `chart.tsx` runs Chart.js in Node with the app's `buildChartOptions` and the datasets from `canvas/chart/chartDatasets.ts`, against a 2D context (`recorder.ts`) that records every path and piece of text instead of painting. Shapes become SVG paths; text becomes absolutely placed HTML, since the film animates words as HTML. Text is measured with Outfit's advance widths, read from the `@fontsource/outfit` WOFF files (`fontMetrics.ts`), so the axes take the room they take in the browser; `parseFont` reads every canvas font string, with or without a style word, for both the measuring and the HTML labels. A ranking (horizontal bars) is drawn again until the value axis it reports gives back the height it was drawn at, where the Studio's measuring stops, and the generator fails if that takes more than ten draws.
+
+`css.ts` then compiles `src/styles/main.scss` without its fluid root size, adds the CSS of every module in the bundle, and:
+
+- removes `@keyframes`, `@font-face` and every `animation` and `transition` declaration, which leaves each element in its resting state (with `keepMotion`, the copy Chrome reads the motion from, only `@font-face` goes);
+- decides each media query at the viewport and keeps or drops its rules: `all` and `screen` match, `print` does not, and `and`, `or` and `not (…)` combine features; it fails on any other media type, a feature it has no rule for, nested parentheses, or `and` mixed with `or`;
+- converts `rem` at 16 px and viewport units at the viewport to px;
+- scopes every selector under `.dfo-ui`, with `:root`, `html` and `body` becoming the wrapper;
+- points `--font-outfit` and `--font-dm-mono` at the film's `--sans` and `--mono`, falling back to Outfit and DM Mono by name.
+
+The generator fails if the CSS keeps a URL that is not a `data:` URL (in `url()` or a quoted `@import`), if the fragment holds anything a film cannot hold (the check page captures run, below; its links point at `#`), if a hook the spec calls for (the chat, prompt and send button, each message, plan state, activity turn, card and chart series) is missing or doubled, or if a module's store document, its text as JSON with its kind, passes 200 KiB.
+
+## After a UI change
+
+Run the command again. The fragment comes from the components, the CSS from the SCSS and the charts from `buildChartOptions` and `chartDatasets.ts`, so a change there reaches the next run with no edit here. Check the result in a browser, then run `pnpm test`: `motion-kit/test/motion-kit.test.ts` checks the chart axes and ranking labels, what the modules may hold, the plan states and motion read from the Kenya render, and the spec, cue sheet, selector and unit rules.
+
+Edit `render.tsx` when `Studio.tsx` or `Whiteboard.tsx` change their own markup (the skeleton and slot classes), when `ChatPanel` or a card component takes new props or `useChat` returns new fields, or when a component starts to show a state that it only sets in an effect.
+
+## Where the fragment differs from the live Studio
+
+- A chart's plot is drawn at the 16:9 box `plotHeight` gives its width. The Studio measures the card's title, legend and source line and fits the card to them; the fragment lets a chart card grow past its slot instead, so give the slot the height the Studio settles on.
+- The transcript opens at its top. The Studio scrolls it to the latest message.
+- The toolbar's active tabs are painted directly. The Studio measures the active tab and slides an indicator under it.
+- Activity clock times are UTC, so the markup is the same on every machine.
+- Chart text is measured without kerning, a fraction of a px wider than the browser's measurement.
+- Both plan states are in the markup at once. The chat input's placeholder is the pending plan's ("Propose changes or ask a follow up..."); the manifest's `states.approved.attrs` gives the one to set once the plan is approved.
+- The answer the approval resumed holds its whole text while the plan still waits, where the Studio's transcript has an empty bot message until the answer streams in. A film hides the text until its `stream` cue.
+- A chart card's plot is `plotHeight` tall, where the Studio's plot box is the card's whole cells less its chrome, a few px taller.
+
+## Page capture
+
+The Studio is rendered from its components. Every other page of the site, whose content is real site data (search answers, source pages, docs, the homepage, the tools pages), is captured from the running site instead:
+
+```sh
+pnpm dev --port 3100
+pnpm motion-kit capture motion-kit/pages/kenya-debt-search.json --base http://localhost:3100
+pnpm motion-kit capture path/to/page.json --out some/dir
+```
+
+`--base` defaults to `http://localhost:3000`. Output goes to `motion-kit/dist/<spec file name>/` unless `--out` names a directory, which is replaced as for the Studio. The capture drives Google Chrome through `playwright-core` and never downloads a browser: it uses the installed Chrome, or the Chrome or Chromium executable that `CHROMIUM_PATH` names. A search answer can take up to two minutes to stream in, so a step waits up to three minutes for its element.
+
+### The page spec
+
+The types are `PageSpec`, `PageHook` and `PageStep` in `motion-kit/spec.ts`, and `readPageSpec` checks a spec before the browser starts.
+
+| Field      | Meaning                                                                                                                 |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `name`     | Letters, digits, `_` or `-`.                                                                                            |
+| `path`     | The route and its query, such as `/data?q=External+debt+of+Kenya`.                                                      |
+| `viewport` | Optional. CSS px; 1280×800 when absent.                                                                                 |
+| `hooks`    | Optional. `{ "v": "prompt", "selector": "textarea" }` stamps `data-v="prompt"` on the one element a CSS selector finds. |
+| `steps`    | Optional. What the browser does, in order, with a `capture` step wherever a state is wanted.                            |
+
+| Step                               | Does                                                                             |
+| ---------------------------------- | -------------------------------------------------------------------------------- |
+| `{ type: "click", selector }`      | Clicks the element. `hover` and `focus` take the same shape.                     |
+| `{ type: "type", selector, text }` | Types the text into the element, key by key.                                     |
+| `{ type: "press", key }`           | Presses a key, such as `Enter` or `Tab`.                                         |
+| `{ type: "wait", selector?, ms? }` | Waits for the element to show, then for `ms`. Needs one of the two.              |
+| `{ type: "scroll", selector?, y }` | Scrolls the element, or the window when there is no selector, to `y` px.         |
+| `{ type: "capture", state }`       | Snapshots the page as the state `state`: letters, digits, `_` or `-`, used once. |
+
+A spec with no `capture` step captures once at the end, as `page`. Step selectors are Playwright selectors, so `text=Rows in your data` and `a:has-text("(IDS)")` work, and a click fails when its selector finds more than one element. Hook selectors are plain CSS. A hook may be absent from some states (a search's answer is absent before the search), but the capture fails when its selector finds two elements in any state or nothing in every state.
+
+`motion-kit/pages/kenya-debt-search.json` captures the data search empty, with "External debt of Kenya" typed and its candidate shown, and with the answer. `motion-kit/pages/ids-source.json` opens that answer's "About this answer" panel, follows its link to the World Bank International Debt Statistics source page, and captures the page at the top and scrolled by 700 px.
+
+### What a capture holds
+
+Each state's fragment is the page's body, inside `<div class="dfo-ui" data-viewport="1280x800" data-state="…">`. Two `<div>`s stand for the root and the body, `<div data-mk-html>` and `<div data-mk-body>`, and carry their attributes. Before a state is snapshot, its fonts load and its finite animations and transitions finish. The snapshot is taken from an inert copy of the page (`snapshot.ts`), in which:
+
+- `<script>`, `<noscript>`, `<style>`, `<link>`, `<template>`, comments, event attributes and elements with a shadow root (Next's dev overlay and route announcer) are removed;
+- an `<iframe>`, `<video>`, `<audio>`, `<object>` or `<embed>` becomes an empty box of its size;
+- a `<canvas>`, a Chart.js chart included, becomes an `<img>` of its pixels at two device px per CSS px;
+- images, SVG `<image>`s and `url()`s in `style` attributes become `data:` URLs, and a link's `href` becomes `#`; whatever cannot be fetched, and any other URL that leaves the page, is dropped; a stylesheet that answers with an error status when it is read again fails the capture;
+- form controls carry their current state as attributes: `value`, `checked`, `selected`, and a textarea's text;
+- hovered, focused and active elements carry `data-mk-hover`, `data-mk-focus`, `data-mk-focus-visible`, `data-mk-focus-within` and `data-mk-active`;
+- a scrolled element's children (the body's, for the window) carry a `translate` of minus the scroll offset, and fixed and stuck elements are moved back to where they show.
+
+The generator then checks each fragment for anything a film cannot hold and fails if it finds a script, a canvas, a frame, an event attribute or an outside URL.
+
+The stylesheet is every stylesheet the page loaded, cut down to the rules whose selectors find an element in at least one state, with pseudo-elements set aside and interaction states counted as met (`pageCss.ts`). `@font-face` and `@import` rules go, and the `url()`s left are fetched and inlined as `data:` URLs. Selectors for `:root`, `html` and `body` are pointed at `[data-mk-html]` and `[data-mk-body]`, and `:hover`, `:focus`, `:focus-visible`, `:focus-within` and `:active` at the matching `data-mk-*` attribute, so a film shows a hover or a focus ring by setting the attribute. `filmCss` then freezes, decides, converts and scopes the result as it does for the Studio, with `rem` converted at the page's own root size.
+
+The manifest's `dropped` lists everything removed that a viewer could have seen.
+
+### Outputs
+
+| File                        | Contents                                                                                   |
+| --------------------------- | ------------------------------------------------------------------------------------------ |
+| `<state>.html`              | One fragment per captured state.                                                           |
+| `dfo-ui.css`                | The rules every state uses, split into `dfo-ui.css~1`, `~2` and so on past 200 KiB stored. |
+| `manifest.json`             | The viewport, the modules, the hooks and each hook's box in every state.                   |
+| `shared.js`                 | The runtime, as for the Studio.                                                            |
+| `store/modules/<file>.json` | Each file above as a Motion store document.                                                |
+| `preview.html`              | The film played in a browser, as for the Studio.                                           |
+
+A page's manifest names each state's fragment in `modules.html`, where the Studio's names its one fragment as a string:
+
+```json
+{
+    "viewport": { "width": 1280, "height": 800 },
+    "rootFontSize": 16,
+    "path": "/data",
+    "modules": {
+        "css": ["dfo-ui.css~1", "dfo-ui.css~2"],
+        "html": { "empty": "empty.html", "typed": "typed.html", "results": "results.html" }
+    },
+    "hooks": ["prompt", "answer"],
+    "boxes": {
+        "prompt": {
+            "empty": { "x": 38, "y": 240.59, "width": 1212, "height": 68 },
+            "typed": { "x": 30, "y": 180.59, "width": 1220, "height": 68 },
+            "results": null
+        }
+    },
+    "dropped": [
+        "<iframe src=\"https://web.cmp.usercentrics.eu/cdcs/v/1.0.0/index.html\"> (left as an empty box)"
+    ]
+}
+```
+
+A box is the element's bounding box in viewport px from the top-left corner; `null` means the hook is absent from that state.
+
+### Where a capture differs from the live page
+
+- The page is frozen at rest. Running animations, the typing caret and anything the page draws after the capture step are absent, so a state that waits on data needs a `wait` step for the element that shows it.
+- Elements with a shadow root are dropped, so a third-party widget that renders into one does not show.
+- Frames and media are empty boxes.
+- A stylesheet shared by every state applies to every state, so a rule from a stylesheet a later route loads can also match an earlier state's markup.
+- An image in the CSS is inlined whole wherever a rule that uses it is kept: the world map behind page heroes and the site footer adds about 180 KiB to every page that has either.
diff --git a/motion-kit/browser.ts b/motion-kit/browser.ts
new file mode 100644
index 0000000..55d8b1e
--- /dev/null
+++ b/motion-kit/browser.ts
@@ -0,0 +1,22 @@
+import { chromium, type Browser } from 'playwright-core';
+
+/**
+ * Chrome as installed on this machine, or the Chromium at `CHROMIUM_PATH`.
+ * Never downloads a browser.
+ */
+export const launchBrowser = async (): Promise<Browser> => {
+    const executablePath = process.env.CHROMIUM_PATH;
+
+    try {
+        return await chromium.launch(executablePath ? { executablePath } : { channel: 'chrome' });
+    } catch (error) {
+        throw new Error(
+            executablePath
+                ? `motion-kit: no browser starts at CHROMIUM_PATH=${executablePath}. ` +
+                      'Point it at a Chrome or Chromium executable, or unset it to use the installed Chrome.'
+                : 'motion-kit: Google Chrome is not installed where Playwright looks for it. ' +
+                      'Install Chrome, or set CHROMIUM_PATH to a Chrome or Chromium executable.',
+            { cause: error },
+        );
+    }
+};
diff --git a/motion-kit/build.ts b/motion-kit/build.ts
new file mode 100644
index 0000000..fa58b9d
--- /dev/null
+++ b/motion-kit/build.ts
@@ -0,0 +1,496 @@
+import { mkdir, mkdtemp, readdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { tmpdir } from 'node:os';
+import { basename, dirname, extname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { build, type Plugin } from 'esbuild';
+import type { Browser } from 'playwright-core';
+import { compile } from 'sass';
+
+import { launchBrowser } from './browser.ts';
+import { dropRootFontSize, externalUrls, filmCss, splitCss } from './css.ts';
+import { type CueSheet, readCues } from './cues.ts';
+import { htmlLeaks } from './html.ts';
+import { type Motion, readMotion } from './motion.ts';
+import { previewHtml } from './preview.ts';
+import { CELL, DEFAULT_VIEWPORT, ROOT_FONT_SIZE, readSpec, type Viewport } from './spec.ts';
+import { type Source, stateClasses, type StyleModules } from './stateClasses.ts';
+
+/**
+ * The generator: bundles render.tsx with esbuild (SCSS modules, SVGR icons
+ * and Next stubs as the app's build would resolve them), renders the spec,
+ * compiles the stylesheet the markup needs and writes the film's modules.
+ */
+
+export const KIT = dirname(fileURLToPath(import.meta.url));
+const REPO = resolve(KIT, '..');
+const STYLES = join(REPO, 'src/styles');
+const MASKS = join(REPO, 'src/assets/masks');
+export const FONTS = join(REPO, 'node_modules/@fontsource/outfit/files');
+
+/** The largest module the film's store takes. */
+export const MODULE_LIMIT = 200 * 1024;
+
+const requireHere = createRequire(import.meta.url);
+
+// --- esbuild plugins ----------------------------------------------------------
+
+const compileScss = (path: string): string =>
+    compile(path, { loadPaths: [STYLES], style: 'expanded' }).css;
+
+// `*.module.scss` as CSS modules (esbuild's local-css: deterministic names
+// from the file name and the class); any other `.scss` as global CSS.
+const scssPlugin: Plugin = {
+    name: 'scss',
+    setup(bundle) {
+        bundle.onLoad({ filter: /\.scss$/ }, (args) => ({
+            contents: compileScss(args.path),
+            loader: args.path.endsWith('.module.scss') ? 'local-css' : 'css',
+            resolveDir: dirname(args.path),
+        }));
+    },
+};
+
+// `*.svg` imported from code becomes a React component through SVGR with
+// svgo.config.cjs, as next.config.ts sets it up. A stylesheet's url() and
+// the mask files stay data URLs. SVGR comes from @svgr/webpack's own
+// dependencies, the copy the app's build uses.
+type SvgrTransform = (
+    code: string,
+    config: Record<string, unknown>,
+    state: { filePath: string },
+) => Promise<string>;
+
+const svgPlugin = (): Plugin => {
+    const fromWebpack = createRequire(requireHere.resolve('@svgr/webpack'));
+    const { transform } = fromWebpack('@svgr/core') as { transform: SvgrTransform };
+    const plugins = [fromWebpack('@svgr/plugin-svgo'), fromWebpack('@svgr/plugin-jsx')];
+    const svgoConfig = requireHere(join(REPO, 'svgo.config.cjs')) as object;
+
+    return {
+        name: 'svgr',
+        setup(bundle) {
+            bundle.onResolve({ filter: /\.svg$/ }, async (args) => {
+                if (args.kind === 'url-token' || args.pluginData === 'svgr') {
+                    return undefined;
+                }
+
+                const found = await bundle.resolve(args.path, {
+                    kind: args.kind,
+                    resolveDir: args.resolveDir,
+                    importer: args.importer,
+                    pluginData: 'svgr',
+                });
+
+                if (found.errors.length || found.path.startsWith(MASKS)) {
+                    return found.errors.length ? { errors: found.errors } : undefined;
+                }
+
+                return { path: found.path, namespace: 'svgr' };
+            });
+            bundle.onLoad({ filter: /.*/, namespace: 'svgr' }, async (args) => ({
+                contents: await transform(
+                    await readFile(args.path, 'utf8'),
+                    { plugins, svgoConfig, exportType: 'default' },
+                    { filePath: args.path },
+                ),
+                loader: 'jsx',
+                resolveDir: dirname(args.path),
+            }));
+        },
+    };
+};
+
+// Every SCSS module the bundle imports goes through a wrapper that records
+// its class map under its path from the repo root, so stateClasses.ts can
+// name the classes the components toggle as the bundle hashed them.
+const STYLE_MODULES = '__motionKitStyleModules';
+
+const styleModulesPlugin: Plugin = {
+    name: 'style-modules',
+    setup(bundle) {
+        bundle.onResolve({ filter: /\.module\.scss$/ }, async (args) => {
+            if (args.pluginData === 'recorded') {
+                return undefined;
+            }
+
+            const found = await bundle.resolve(args.path, {
+                kind: args.kind,
+                resolveDir: args.resolveDir,
+                importer: args.importer,
+                pluginData: 'recorded',
+            });
+
+            return found.errors.length
+                ? { errors: found.errors }
+                : { path: found.path, namespace: 'style-modules' };
+        });
+        bundle.onLoad({ filter: /.*/, namespace: 'style-modules' }, (args) => ({
+            contents: [
+                `import styles from ${JSON.stringify(args.path)};`,
+                `(globalThis.${STYLE_MODULES} ??= {})[${JSON.stringify(relative(REPO, args.path))}] = styles;`,
+                'export default styles;',
+            ].join('\n'),
+            loader: 'js',
+            resolveDir: dirname(args.path),
+            pluginData: 'recorded',
+        }));
+    },
+};
+
+const STUBS: Record<string, string> = {
+    'next/navigation': join(KIT, 'stubs/next-navigation.ts'),
+    'next/link': join(KIT, 'stubs/next-link.tsx'),
+    'server-only': join(KIT, 'stubs/server-only.ts'),
+};
+
+const stubPlugin: Plugin = {
+    name: 'next-stubs',
+    setup(bundle) {
+        bundle.onResolve({ filter: /^(next\/navigation|next\/link|server-only)$/ }, (args) => ({
+            path: STUBS[args.path]!,
+        }));
+    },
+};
+
+// --- the renderer -------------------------------------------------------------
+
+type Renderer = Pick<typeof import('./render.tsx'), 'renderStudio' | 'layoutDefaultChart'>;
+
+/** render.tsx bundled for Node and loaded, with the CSS its imports pulled
+ *  in (every module of every component in the bundle), the class map of
+ *  each SCSS module and the app's TSX sources in the bundle. */
+export const loadRenderer = async (): Promise<{
+    renderer: Renderer;
+    moduleCss: string;
+    styleModules: StyleModules;
+    sources: Source[];
+}> => {
+    const out = await mkdtemp(join(tmpdir(), 'motion-kit-'));
+
+    try {
+        const result = await build({
+            entryPoints: [join(KIT, 'render.tsx')],
+            absWorkingDir: REPO,
+            bundle: true,
+            platform: 'node',
+            format: 'cjs',
+            target: 'node22',
+            outdir: out,
+            write: false,
+            metafile: true,
+            jsx: 'automatic',
+            loader: {
+                '.svg': 'dataurl',
+                '.woff': 'dataurl',
+                '.woff2': 'dataurl',
+                '.png': 'dataurl',
+            },
+            define: { 'process.env.NODE_ENV': '"production"' },
+            plugins: [styleModulesPlugin, scssPlugin, svgPlugin(), stubPlugin],
+            logLevel: 'silent',
+        });
+        const js = result.outputFiles.find((file) => file.path.endsWith('.js'));
+        const css = result.outputFiles.find((file) => file.path.endsWith('.css'));
+
+        if (!js) {
+            throw new Error('motion-kit: esbuild wrote no bundle');
+        }
+
+        const bundlePath = join(out, 'render.cjs');
+
+        await writeFile(bundlePath, js.contents);
+
+        const renderer = requireHere(bundlePath) as Renderer;
+        const scope = globalThis as { [STYLE_MODULES]?: StyleModules };
+        const sources = await Promise.all(
+            Object.keys(result.metafile.inputs)
+                .filter((path) => path.startsWith('src/') && path.endsWith('.tsx'))
+                .map(async (path) => ({ path, text: await readFile(join(REPO, path), 'utf8') })),
+        );
+
+        return {
+            renderer,
+            moduleCss: css?.text ?? '',
+            styleModules: scope[STYLE_MODULES] ?? {},
+            sources,
+        };
+    } finally {
+        await rm(out, { recursive: true, force: true });
+    }
+};
+
+// The app's globals (main.scss) without the fluid root size: the fragment
+// sits at a 16 px root.
+const globalCss = (): string => dropRootFontSize(compileScss(join(STYLES, 'main.scss')));
+
+// --- outputs ------------------------------------------------------------------
+
+export type Module = { name: string; kind: 'css' | 'html' | 'json' | 'js'; text: string };
+
+export type Generated = {
+    outDir: string;
+    modules: Module[];
+    manifest: Record<string, unknown>;
+};
+
+const bytes = (text: string) => Buffer.byteLength(text);
+
+/** A module as the film's store holds it, the document the limit applies to. */
+const storeDocument = ({ kind, text }: Pick<Module, 'kind' | 'text'>) =>
+    JSON.stringify({ kind, text });
+
+/** The film's stylesheet as one `dfo-ui.css` module, or `dfo-ui.css~1`,
+ *  `~2` and so on when its store document passes the module limit. Refuses
+ *  a stylesheet that points outside the film. */
+export const cssModules = (css: string): Module[] => {
+    const leaks = externalUrls(css);
+
+    if (leaks.length) {
+        throw new Error(`motion-kit: the CSS points outside the film: ${leaks.join(', ')}`);
+    }
+
+    // A piece's text costs its JSON-escaped bytes, without the quotes, on
+    // top of the wrapper an empty document takes.
+    const pieces = splitCss(
+        css,
+        MODULE_LIMIT - bytes(storeDocument({ kind: 'css', text: '' })),
+        (text) => bytes(JSON.stringify(text)) - 2,
+    );
+
+    return pieces.map((text, index) => ({
+        name: pieces.length === 1 ? 'dfo-ui.css' : `dfo-ui.css~${index + 1}`,
+        kind: 'css',
+        text,
+    }));
+};
+
+export const manifestModule = (manifest: Record<string, unknown>): Module => ({
+    name: 'manifest.json',
+    kind: 'json',
+    text: `${JSON.stringify(manifest, null, 2)}\n`,
+});
+
+/**
+ * Writes `files` plus the runtime as `shared.js` to `target`, each as a
+ * file and as a Motion store document under `store/modules/`, after
+ * checking every module's store document against the limit, and
+ * `preview.html` to play them (`preview.ts`). Replaces a previous film at
+ * `target`; refuses a non-empty directory without a `manifest.json`.
+ */
+export const writeFilm = async (target: string, files: Module[]): Promise<Module[]> => {
+    const modules: Module[] = [
+        ...files,
+        // Motion runs a film's shared.js once before any scene: the runtime
+        // that mounts and animates the fragment.
+        {
+            name: 'shared.js',
+            kind: 'js',
+            text: await readFile(join(KIT, 'runtime/dfo-motion.js'), 'utf8'),
+        },
+    ];
+
+    for (const file of modules) {
+        const size = bytes(storeDocument(file));
+
+        if (size > MODULE_LIMIT) {
+            throw new Error(
+                `motion-kit: ${file.name} is ${size} bytes stored, over the ${MODULE_LIMIT} limit`,
+            );
+        }
+    }
+
+    const existing: string[] = await readdir(target).catch((error: NodeJS.ErrnoException) => {
+        if (error.code === 'ENOENT') {
+            return [];
+        }
+
+        throw new Error(`motion-kit: cannot write the film to ${target}`, { cause: error });
+    });
+
+    if (existing.length && !existing.includes('manifest.json')) {
+        throw new Error(
+            `motion-kit: ${target} holds files and no manifest.json, so it is not a film to replace`,
+        );
+    }
+
+    await rm(target, { recursive: true, force: true });
+    await mkdir(join(target, 'store/modules'), { recursive: true });
+
+    for (const file of modules) {
+        await writeFile(join(target, file.name), file.text);
+        await writeFile(join(target, 'store/modules', `${file.name}.json`), storeDocument(file));
+    }
+
+    await writeFile(join(target, 'preview.html'), previewHtml(basename(target), modules));
+
+    return modules;
+};
+
+/** A checked cue sheet as the film's `cues.json`. */
+export const cuesModule = (cues: CueSheet): Module => ({
+    name: 'cues.json',
+    kind: 'json',
+    text: `${JSON.stringify(cues, null, 2)}\n`,
+});
+
+/** The JSON file at `path`, with the path in the error when it does not parse. */
+export const readJson = async (path: string): Promise<unknown> => {
+    const text = await readFile(path, 'utf8');
+
+    try {
+        return JSON.parse(text);
+    } catch (error) {
+        throw new Error(`motion-kit: ${path} is not valid JSON: ${(error as Error).message}`, {
+            cause: error,
+        });
+    }
+};
+
+/** The cue sheet beside the spec, `<spec>.cues.json`, or null without one. */
+export const cuesBeside = async (specPath: string): Promise<unknown> => {
+    const path = join(dirname(specPath), `${basename(specPath, extname(specPath))}.cues.json`);
+
+    try {
+        return JSON.parse(await readFile(path, 'utf8'));
+    } catch (error) {
+        if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+            return null;
+        }
+
+        throw new Error(`motion-kit: cannot read the cue sheet ${path}`, { cause: error });
+    }
+};
+
+/**
+ * In Chrome, the fragment under the stylesheet with its motion kept: the
+ * app's motion as data (motion.ts), and the cues whose `sel` finds nothing
+ * inside their hook.
+ */
+const inspectFragment = async ({
+    browser,
+    viewport,
+    html,
+    motionCss,
+    states,
+    cues,
+}: {
+    browser: Browser;
+    viewport: Viewport;
+    html: string;
+    motionCss: string;
+    states: Parameters<typeof readMotion>[1]['stateClasses'];
+    cues: CueSheet | null;
+}): Promise<Motion> => {
+    const page = await browser.newPage({ viewport });
+
+    try {
+        await page.setContent(
+            `<!doctype html><html><head><style>${motionCss}</style></head>` +
+                `<body style="margin:0">${html}</body></html>`,
+        );
+
+        const motion = await readMotion(page, { motionCss, stateClasses: states });
+        const targets = (cues?.cues ?? []).flatMap(({ v, sel }) => (sel ? [{ v, sel }] : []));
+        const lost = await page.evaluate(
+            (list) =>
+                list.filter(({ v, sel }) => !document.querySelector(`[data-v="${v}"] ${sel}`)),
+            targets,
+        );
+
+        if (lost.length) {
+            throw new Error(
+                `cue sheet: nothing at ${lost.map(({ v, sel }) => `"${sel}" in "${v}"`).join(', ')}`,
+            );
+        }
+
+        return motion;
+    } finally {
+        await page.close();
+    }
+};
+
+// In-page links lead nowhere in a film; `#` keeps them links for `:link`
+// and `[href]`, as a capture leaves them.
+const inertLinks = (html: string): string =>
+    html.replace(/(<a\s(?:[^>]*\s)?href=")(?!#|data:)[^"]*"/g, '$1#"');
+
+export const generate = async ({
+    specPath,
+    outDir,
+    browser,
+}: {
+    specPath: string;
+    outDir?: string;
+    // A running browser to read the motion in; one is launched and closed
+    // when absent.
+    browser?: Browser;
+}): Promise<Generated> => {
+    const spec = readSpec(await readJson(specPath));
+    const rawCues = await cuesBeside(specPath);
+    const viewport = spec.viewport ?? DEFAULT_VIEWPORT;
+    const target = outDir ?? join(KIT, 'dist', basename(specPath, extname(specPath)));
+    // The activity log prints clock times in the process's zone; UTC makes
+    // the markup the same on every machine.
+    process.env.TZ = 'UTC';
+
+    const { renderer, moduleCss, styleModules, sources } = await loadRenderer();
+    const rendered = renderer.renderStudio(spec, { fontsDir: FONTS });
+    const html = inertLinks(rendered.html);
+    const leaks = htmlLeaks(html);
+
+    if (leaks.length) {
+        throw new Error(`motion-kit: the Studio fragment still holds ${leaks.join(', ')}`);
+    }
+
+    const cues =
+        rawCues === null
+            ? null
+            : readCues(rawCues, rendered.hooks, { states: Object.keys(rendered.states) });
+    const stylesheet = `${globalCss()}\n${moduleCss}\n${rendered.css}`;
+    const css = cssModules(filmCss(stylesheet, viewport));
+    const own = browser ? null : await launchBrowser();
+    const motion = await inspectFragment({
+        browser: browser ?? own!,
+        viewport,
+        html,
+        motionCss: filmCss(stylesheet, viewport, { keepMotion: true }),
+        states: stateClasses(sources, styleModules, REPO),
+        cues,
+    }).finally(() => own?.close());
+
+    // Once the motion is read, the keyframe names an `animate` cue plays.
+    if (cues) {
+        readCues(cues, rendered.hooks, {
+            states: Object.keys(rendered.states),
+            keyframes: Object.keys(motion.keyframes),
+            animated: [...new Set(motion.animations.flatMap(({ v }) => (v ? [v] : [])))],
+        });
+    }
+    const manifest = {
+        viewport,
+        rootFontSize: ROOT_FONT_SIZE,
+        cell: CELL,
+        question: spec.question,
+        modules: {
+            css: css.map((file) => file.name),
+            html: 'studio.html',
+            ...(cues ? { cues: 'cues.json' } : {}),
+        },
+        hooks: rendered.hooks,
+        states: rendered.states,
+        classes: rendered.classes,
+        cards: rendered.cards,
+        charts: rendered.charts,
+        ...motion,
+    };
+    const modules = await writeFilm(target, [
+        ...css,
+        { name: 'studio.html', kind: 'html', text: html },
+        manifestModule(manifest),
+        ...(cues ? [cuesModule(cues)] : []),
+    ]);
+
+    return { outDir: relative(process.cwd(), target) || '.', modules, manifest };
+};
diff --git a/motion-kit/capture.ts b/motion-kit/capture.ts
new file mode 100644
index 0000000..4e86422
--- /dev/null
+++ b/motion-kit/capture.ts
@@ -0,0 +1,308 @@
+import { basename, extname, join, relative } from 'node:path';
+
+import type { Browser, Page } from 'playwright-core';
+
+import { launchBrowser } from './browser.ts';
+import {
+    cssModules,
+    cuesBeside,
+    cuesModule,
+    KIT,
+    manifestModule,
+    type Module,
+    readJson,
+    writeFilm,
+} from './build.ts';
+import { readCues } from './cues.ts';
+import { htmlLeaks } from './html.ts';
+import { filmCss } from './css.ts';
+import { pageCss, parseSheet, type ParsedSheet, usageSelectors } from './pageCss.ts';
+import { type Box, matchSelectors, snapshotPage, stampHooks } from './snapshot.ts';
+import { DEFAULT_VIEWPORT, type PageSpec, type PageStep, pageSteps, readPageSpec } from './spec.ts';
+
+/**
+ * `pnpm motion-kit capture`: drives a route of the running site through a
+ * page spec's steps in Chrome and writes each captured state as a static
+ * fragment, with one stylesheet for all of them. See motion-kit/README.md.
+ */
+
+export const DEFAULT_BASE = 'http://localhost:3000';
+
+// A search answer can take two minutes to stream in.
+const STEP_TIMEOUT = 180_000;
+
+// The longest a capture waits for finite CSS animations to come to rest.
+const SETTLE_MS = 3_000;
+
+const runStep = async (page: Page, step: Exclude<PageStep, { type: 'capture' }>) => {
+    switch (step.type) {
+        case 'click':
+            return page.locator(step.selector).click();
+        case 'hover':
+            return page.locator(step.selector).hover();
+        case 'focus':
+            return page.locator(step.selector).focus();
+        case 'type':
+            return page.locator(step.selector).pressSequentially(step.text);
+        case 'press':
+            return page.keyboard.press(step.key);
+        case 'wait':
+            if (step.selector) {
+                await page.locator(step.selector).first().waitFor({ state: 'visible' });
+            }
+
+            if (step.ms) {
+                await page.waitForTimeout(step.ms);
+            }
+
+            return;
+        case 'scroll':
+            if (step.selector) {
+                return page
+                    .locator(step.selector)
+                    .evaluate(
+                        (element, y) => element.scrollTo({ top: y, behavior: 'instant' }),
+                        step.y,
+                    );
+            }
+
+            return page.evaluate((y) => window.scrollTo({ top: y, behavior: 'instant' }), step.y);
+    }
+};
+
+// Fonts loaded and every finite animation and transition finished, so the
+// live page shows the resting state the film's CSS freezes it in.
+const settle = (page: Page) =>
+    page.evaluate(async (limit) => {
+        await document.fonts.ready;
+
+        const finite = document
+            .getAnimations()
+            .filter((animation) => animation.effect?.getComputedTiming().endTime !== Infinity);
+
+        await Promise.race([
+            Promise.all(finite.map((animation) => animation.finished.catch(() => undefined))),
+            new Promise((resolve) => setTimeout(resolve, limit)),
+        ]);
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    }, SETTLE_MS);
+
+export type CapturedState = { state: string; html: string; boxes: Record<string, Box | null> };
+
+export type Capture = {
+    states: CapturedState[];
+    css: string;
+    rootFontSize: number;
+    dropped: string[];
+};
+
+/**
+ * Opens `spec.path` on `base`, runs the steps and snapshots the page at
+ * each capture step. The stylesheet keeps the rules any state uses. Fails
+ * when a hook's selector finds more than one element in a state or nothing
+ * in every state, or when a fragment still holds something a film cannot.
+ */
+export const capturePage = async ({
+    spec,
+    base,
+    browser,
+    stepTimeout = STEP_TIMEOUT,
+}: {
+    spec: PageSpec;
+    base: string;
+    browser: Browser;
+    // How long a step waits for its element, in ms.
+    stepTimeout?: number;
+}): Promise<Capture> => {
+    const viewport = spec.viewport ?? DEFAULT_VIEWPORT;
+    // Two device px per CSS px keep canvas pixels sharp on the larger stage.
+    const context = await browser.newContext({ viewport, deviceScaleFactor: 2 });
+
+    try {
+        const page = await context.newPage();
+
+        page.setDefaultTimeout(stepTimeout);
+        await page.goto(new URL(spec.path, base).href, { waitUntil: 'load' });
+
+        const hooks = spec.hooks ?? [];
+        const sheets = new Map<string, ParsedSheet>();
+        const used = new Set<string>();
+        const states: CapturedState[] = [];
+        const dropped = new Set<string>();
+        let rootFontSize = 0;
+
+        for (const step of pageSteps(spec)) {
+            if (step.type !== 'capture') {
+                await runStep(page, step);
+                continue;
+            }
+
+            await settle(page);
+
+            const boxes = await page.evaluate(stampHooks, hooks);
+            const snapshot = await page.evaluate(snapshotPage, { viewport, state: step.state });
+            const leaks = htmlLeaks(snapshot.html);
+
+            if (leaks.length) {
+                throw new Error(
+                    `motion-kit: state "${step.state}" still holds ${leaks.join(', ')}`,
+                );
+            }
+
+            for (const source of snapshot.sheets) {
+                if (!sheets.has(source.key)) {
+                    sheets.set(source.key, parseSheet(source));
+                }
+            }
+
+            const selectors = usageSelectors([...sheets.values()]).filter(
+                (selector) => !used.has(selector),
+            );
+            const matched = await page.evaluate(matchSelectors, selectors);
+
+            selectors.forEach((selector, index) => {
+                if (matched[index]) {
+                    used.add(selector);
+                }
+            });
+
+            for (const line of snapshot.dropped) {
+                dropped.add(line);
+            }
+
+            rootFontSize ||= snapshot.rootFontSize;
+            states.push({ state: step.state, html: snapshot.html, boxes });
+        }
+
+        for (const { v, selector } of hooks) {
+            if (states.every(({ boxes }) => !boxes[v])) {
+                throw new Error(
+                    `motion-kit: hook "${v}": "${selector}" matches nothing in any state`,
+                );
+            }
+        }
+
+        const cssDropped: string[] = [];
+        const css = await pageCss({
+            sheets: [...sheets.values()],
+            used,
+            dropped: cssDropped,
+            inline: async (url) => {
+                const response = await context.request.get(url).catch(() => null);
+
+                if (!response?.ok()) {
+                    return null;
+                }
+
+                const type =
+                    response.headers()['content-type']?.split(';')[0] ?? 'application/octet-stream';
+
+                return `data:${type};base64,${(await response.body()).toString('base64')}`;
+            },
+        });
+
+        return {
+            states,
+            css,
+            rootFontSize,
+            dropped: [...dropped, ...cssDropped],
+        };
+    } finally {
+        await context.close();
+    }
+};
+
+export type GeneratedPage = {
+    outDir: string;
+    modules: Module[];
+    manifest: Record<string, unknown>;
+    dropped: string[];
+};
+
+/** Reads the page spec at `specPath`, captures it from `base` and writes
+ *  the film's modules to `outDir` (`motion-kit/dist/<spec file name>`). */
+export const generatePage = async ({
+    specPath,
+    base = DEFAULT_BASE,
+    outDir,
+    browser,
+    stepTimeout,
+}: {
+    specPath: string;
+    base?: string;
+    outDir?: string;
+    // A running browser to capture in; one is launched and closed when absent.
+    browser?: Browser;
+    stepTimeout?: number;
+}): Promise<GeneratedPage> => {
+    const spec = readPageSpec(await readJson(specPath));
+    const viewport = spec.viewport ?? DEFAULT_VIEWPORT;
+    const target = outDir ?? join(KIT, 'dist', basename(specPath, extname(specPath)));
+    const hooks = (spec.hooks ?? []).map(({ v }) => v);
+    // A capture has no app motion or states, so its cue sheet may name
+    // neither.
+    const rawCues = await cuesBeside(specPath);
+    const states = pageSteps(spec).flatMap((step) => (step.type === 'capture' ? [step.state] : []));
+    const cues =
+        rawCues === null ? null : readCues(rawCues, hooks, { keyframes: [], page: { states } });
+    const own = browser ? null : await launchBrowser();
+
+    try {
+        const capture = await capturePage({
+            spec,
+            base,
+            browser: browser ?? own!,
+            stepTimeout,
+        });
+        const css = cssModules(
+            filmCss(capture.css, viewport, { rootFontSize: capture.rootFontSize }),
+        );
+        const manifest = {
+            viewport,
+            rootFontSize: capture.rootFontSize,
+            path: spec.path,
+            modules: {
+                css: css.map((file) => file.name),
+                html: Object.fromEntries(
+                    capture.states.map(({ state }) => [state, `${state}.html`]),
+                ),
+                ...(cues ? { cues: 'cues.json' } : {}),
+            },
+            hooks,
+            boxes: Object.fromEntries(
+                hooks.map((v) => [
+                    v,
+                    Object.fromEntries(capture.states.map(({ state, boxes }) => [state, boxes[v]])),
+                ]),
+            ),
+            dropped: capture.dropped,
+        };
+
+        // Once captured, each cue's hooks are checked against its states.
+        if (cues) {
+            readCues(cues, hooks, {
+                keyframes: [],
+                page: { states, boxes: manifest.boxes },
+            });
+        }
+        const modules = await writeFilm(target, [
+            ...css,
+            ...capture.states.map(({ state, html }): Module => ({
+                name: `${state}.html`,
+                kind: 'html',
+                text: html,
+            })),
+            manifestModule(manifest),
+            ...(cues ? [cuesModule(cues)] : []),
+        ]);
+
+        return {
+            outDir: relative(process.cwd(), target) || '.',
+            modules,
+            manifest,
+            dropped: capture.dropped,
+        };
+    } finally {
+        await own?.close();
+    }
+};
diff --git a/motion-kit/chart.tsx b/motion-kit/chart.tsx
new file mode 100644
index 0000000..21ec690
--- /dev/null
+++ b/motion-kit/chart.tsx
@@ -0,0 +1,388 @@
+import { Chart, type ChartConfiguration, type Plugin } from 'chart.js';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { parseFont } from './fontMetrics.ts';
+import { RecordedPattern, RecordingCanvas, type Shape, type Text } from './recorder.ts';
+
+import {
+    barDatasets,
+    lineDatasets,
+} from '@/components/organisms/Studio/canvas/chart/chartDatasets';
+import {
+    buildChartOptions,
+    checkerPattern,
+    type RowsLayout,
+} from '@/components/organisms/Studio/canvas/chart/chartSetup';
+import type { ChartWidget } from '@/lib/chat/widgets';
+import { plotHeight, plotShape } from '@/lib/studio/chartFit';
+import { valueAxisTitle } from '@/lib/studio/chartValue';
+import type { ThemeDerived } from '@/lib/studio/theme';
+
+/**
+ * A chart card's plot without a browser. Chart.js runs in Node against a
+ * recording 2D context, with the app's own options (`buildChartOptions`)
+ * and datasets (`chartDatasets`), and draws one frame. What it drew becomes
+ * an inline SVG for the shapes and absolutely placed HTML for every piece
+ * of text, since the film animates words as HTML.
+ */
+
+export type MeasureText = (font: string, text: string) => number;
+
+export type ChartLayout = {
+    width: number;
+    height: number;
+    shapes: Shape[];
+    texts: Text[];
+    // The value axis as Chart.js built it.
+    valueTicks: { value: number; label: string }[];
+    valueTitle: string | null;
+    // A ranking's value-axis band in px, as the last draw reported it; null
+    // for other charts.
+    band: number | null;
+};
+
+// The design cell; the generator lays out at a scale of 1.
+const CELL = 20;
+const SCALE = 1;
+
+// A ranking's first layout, before it knows how tall its value axis is:
+// the budget the app's estimate gives that axis (BAND_BUDGET in chartFit).
+const FIRST_BAND = 2.5 * CELL;
+
+// How many draws a ranking gets to settle its value axis.
+const RANKING_PASSES = 10;
+
+// `checkerPattern` builds its tile on a DOM canvas. While a chart is laid
+// out, `document` makes recording canvases, so the tile is recorded as the
+// app draws it. Chart.js reads the DOM only when `window` exists as well,
+// so it keeps to its Node platform.
+const withRecordingDocument = <T,>(measure: MeasureText, run: () => T): T => {
+    const scope = globalThis as { document?: unknown };
+    const previous = scope.document;
+
+    scope.document = {
+        createElement: () => new RecordingCanvas(0, 0, measure),
+    };
+
+    try {
+        return run();
+    } finally {
+        scope.document = previous;
+    }
+};
+
+const drawOnce = ({
+    widget,
+    line,
+    theme,
+    width,
+    height,
+    measure,
+    onLayout,
+}: {
+    widget: ChartWidget;
+    line: boolean;
+    theme: ThemeDerived;
+    width: number;
+    height: number;
+    measure: MeasureText;
+    onLayout?: (layout: RowsLayout) => void;
+}): Omit<ChartLayout, 'band'> => {
+    const rows = plotShape(widget, line).kind === 'rows';
+    const canvas = new RecordingCanvas(width, height, measure);
+    const record = canvas.context;
+    const options = buildChartOptions(SCALE, rows || widget.categories.length > 14, theme, {
+        horizontal: widget.horizontal,
+        unit: widget.unit,
+        rows,
+        onLayout,
+    });
+    const fill = (pair: [string, string]) => checkerPattern(pair, SCALE);
+    const datasets = line
+        ? lineDatasets({ widget, scale: SCALE, theme, hidden: [], fill })
+        : barDatasets({ widget, scale: SCALE, theme, hidden: [], fill, rows });
+    // Tells the record which dataset each shape belongs to.
+    const tagDatasets: Plugin = {
+        id: 'motionKitDatasets',
+        beforeDatasetDraw: (_chart, { index }) => {
+            record.dataset = index;
+        },
+        afterDatasetDraw: () => {
+            record.dataset = null;
+        },
+    };
+    const config = {
+        type: line ? 'line' : 'bar',
+        data: { labels: widget.categories, datasets },
+        options: { ...options, responsive: false, animation: false, devicePixelRatio: 1 },
+        plugins: [tagDatasets],
+    } as ChartConfiguration;
+    const chart = new Chart(canvas as unknown as HTMLCanvasElement, config);
+
+    record.clear();
+    chart.draw();
+
+    const valueScale = chart.scales[widget.horizontal ? 'x' : 'y'];
+    const title = valueAxisTitle(widget.unit);
+    const layout = {
+        width,
+        height,
+        shapes: record.shapes,
+        texts: record.texts,
+        valueTicks: (valueScale?.ticks ?? []).map((tick) => ({
+            value: tick.value,
+            label: String(tick.label),
+        })),
+        valueTitle: title.display ? title.text : null,
+    };
+
+    chart.destroy();
+
+    return layout;
+};
+
+const fail = (message: string): never => {
+    throw new Error(`chart: ${message}`);
+};
+
+/**
+ * Lays a chart out at `width` px, at the height the app's plot box takes at
+ * that width (`plotHeight`). A ranking's height depends on its value axis,
+ * which Chart.js sizes from the height it is given, so it is redrawn until
+ * the axis it reports gives back the height it was drawn at, the point
+ * where ChartCard's measuring stops resizing the card. Throws when that
+ * does not happen within a few draws.
+ *
+ * A short ranking can stop there with its axis unsettled (RowsLayout): one
+ * or two rows give Chart.js too little height for the whole value axis, in
+ * the Studio as here.
+ */
+export const layoutChart = ({
+    widget,
+    line,
+    theme,
+    width,
+    measure,
+}: {
+    widget: ChartWidget;
+    line: boolean;
+    theme: ThemeDerived;
+    width: number;
+    measure: MeasureText;
+}): ChartLayout =>
+    withRecordingDocument(measure, () => {
+        const shape = plotShape(widget, line);
+        const heightFor = (band: number) =>
+            Math.round(plotHeight(shape, { plotWidth: width, band, cell: CELL }));
+        const draw = (height: number, onLayout?: (layout: RowsLayout) => void) =>
+            drawOnce({ widget, line, theme, width, height, measure, onLayout });
+
+        if (shape.kind !== 'rows') {
+            return { ...draw(heightFor(0)), band: null };
+        }
+
+        let height = shape.rows * CELL + FIRST_BAND;
+
+        for (let pass = 0; pass < RANKING_PASSES; pass++) {
+            const reports: RowsLayout[] = [];
+            const layout = draw(height, (report) => reports.push(report));
+            const { band } = reports.at(-1) ?? fail(`ranking "${widget.id}" reported no layout`);
+
+            if (heightFor(band) === height) {
+                return { ...layout, band };
+            }
+
+            height = heightFor(band);
+        }
+
+        return fail(
+            `ranking "${widget.id}" did not settle its value axis in ${RANKING_PASSES} draws`,
+        );
+    });
+
+// --- SVG and HTML -------------------------------------------------------------
+
+// Chart.js names the face ("Outfit"); the film's stylesheet supplies it
+// through the same variable the app's CSS uses.
+const fontStyle = (font: string): CSSProperties => {
+    const { style, weight, size, family } = parseFont(font);
+
+    return {
+        fontStyle: style,
+        fontWeight: weight,
+        fontSize: `${size}px`,
+        fontFamily: /outfit/i.test(family) ? 'var(--font-outfit)' : family,
+    };
+};
+
+const ALIGN_X: Record<CanvasTextAlign, string> = {
+    left: '0',
+    start: '0',
+    center: '-50%',
+    right: '-100%',
+    end: '-100%',
+};
+
+// With a line height of 1 the line box is the em box, so its middle is the
+// canvas's "middle" baseline.
+const ALIGN_Y: Record<CanvasTextBaseline, string> = {
+    top: '0',
+    hanging: '0',
+    middle: '-50%',
+    alphabetic: '-80%',
+    ideographic: '-100%',
+    bottom: '-100%',
+};
+
+const Label = ({ text }: { text: Text }) => (
+    <span
+        style={{
+            position: 'absolute',
+            left: text.x,
+            top: text.y,
+            lineHeight: 1,
+            whiteSpace: 'pre',
+            color: String(text.color),
+            transformOrigin: '0 0',
+            transform: `${text.rotation ? `rotate(${text.rotation.toFixed(4)}rad) ` : ''}translate(${ALIGN_X[text.align]}, ${ALIGN_Y[text.baseline]})`,
+            ...fontStyle(text.font),
+        }}
+    >
+        {text.text}
+    </span>
+);
+
+const strokeProps = (shape: Shape) => ({
+    fill: 'none',
+    stroke: String(shape.paint),
+    strokeWidth: shape.lineWidth,
+    strokeLinecap: shape.lineCap,
+    strokeLinejoin: shape.lineJoin,
+    strokeDasharray: shape.lineDash.length ? shape.lineDash.join(' ') : undefined,
+    opacity: shape.alpha === 1 ? undefined : shape.alpha,
+});
+
+export type SeriesPath = { index: number; hook: string; length: number | null };
+
+/**
+ * The plot as markup: one SVG of the shapes, the labels over it. A line's
+ * segments become one path per series (`series-<card>-<i>`), with its
+ * total length for a draw-on; a line's lone dots ride in
+ * `points-<card>-<i>`; a bar series is a group of its bars.
+ */
+export const renderPlot = (
+    layout: ChartLayout,
+    cardId: string,
+    line: boolean,
+): { node: ReactNode; series: SeriesPath[] } => {
+    const patterns = new Map<RecordedPattern, string>();
+    const paintOf = (paint: unknown): string => {
+        if (!(paint instanceof RecordedPattern)) {
+            return String(paint);
+        }
+
+        let id = patterns.get(paint);
+
+        if (!id) {
+            id = `chk-${cardId}-${patterns.size}`;
+            patterns.set(paint, id);
+        }
+
+        return `url(#${id})`;
+    };
+    const fillProps = (shape: Shape) => ({
+        fill: paintOf(shape.paint),
+        opacity: shape.alpha === 1 ? undefined : shape.alpha,
+    });
+    const shapeNode = (shape: Shape, key: number) =>
+        shape.kind === 'stroke' ? (
+            <path key={key} d={shape.d} {...strokeProps(shape)} />
+        ) : (
+            <path key={key} d={shape.d} {...fillProps(shape)} />
+        );
+
+    const scaleNodes = layout.shapes.filter((shape) => shape.dataset === null).map(shapeNode);
+    const datasets = [...new Set(layout.shapes.flatMap((shape) => shape.dataset ?? []))].toSorted(
+        (a, b) => a - b,
+    );
+    const series: SeriesPath[] = [];
+    const seriesNodes = datasets.map((index) => {
+        const own = layout.shapes.filter((shape) => shape.dataset === index);
+        const hook = `series-${cardId}-${index}`;
+
+        if (!line) {
+            series.push({ index, hook, length: null });
+
+            return (
+                <g key={hook} data-v={hook}>
+                    {own.map(shapeNode)}
+                </g>
+            );
+        }
+
+        // A line strokes each run between gaps on its own; a lone value's
+        // dot is an arc, filled and ringed.
+        const runs = own.filter((shape) => shape.kind === 'stroke' && !shape.d.includes('A'));
+        const dots = own.filter((shape) => !runs.includes(shape));
+        const length = runs.reduce((sum, shape) => sum + shape.length, 0);
+        const pointsHook = `points-${cardId}-${index}`;
+
+        series.push({ index, hook, length: Math.round(length * 100) / 100 });
+
+        return (
+            <g key={hook}>
+                {runs.length > 0 && (
+                    <path
+                        data-v={hook}
+                        d={runs.map((shape) => shape.d).join('')}
+                        {...strokeProps(runs[0]!)}
+                    />
+                )}
+                {dots.length > 0 && <g data-v={pointsHook}>{dots.map(shapeNode)}</g>}
+            </g>
+        );
+    });
+
+    const defs = [...patterns].map(([pattern, id]) => (
+        <pattern
+            key={id}
+            id={id}
+            width={pattern.width}
+            height={pattern.height}
+            patternUnits="userSpaceOnUse"
+        >
+            {pattern.shapes.map((shape, key) => (
+                <path key={key} d={shape.d} fill={String(shape.paint)} />
+            ))}
+        </pattern>
+    ));
+
+    const node = (
+        <div
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: layout.width,
+                height: layout.height,
+            }}
+        >
+            <svg
+                width={layout.width}
+                height={layout.height}
+                viewBox={`0 0 ${layout.width} ${layout.height}`}
+                aria-hidden="true"
+                style={{ position: 'absolute', top: 0, left: 0, overflow: 'visible' }}
+            >
+                {defs.length > 0 && <defs>{defs}</defs>}
+                {scaleNodes}
+                {seriesNodes}
+            </svg>
+            {layout.texts.map((text, key) => (
+                <Label key={key} text={text} />
+            ))}
+        </div>
+    );
+
+    return { node, series };
+};
diff --git a/motion-kit/cli.ts b/motion-kit/cli.ts
new file mode 100644
index 0000000..b66cb91
--- /dev/null
+++ b/motion-kit/cli.ts
@@ -0,0 +1,59 @@
+/**
+ * `pnpm motion-kit <spec.json> [--out dir]`: renders a demo spec to the
+ * film's modules.
+ * `pnpm motion-kit capture <page.json> [--base url] [--out dir]`: captures a
+ * page of the running site. See motion-kit/README.md.
+ */
+
+import { parseArgs } from 'node:util';
+
+import type { Module } from './build.ts';
+
+const { positionals, values } = parseArgs({
+    allowPositionals: true,
+    options: { out: { type: 'string' }, base: { type: 'string' } },
+});
+
+const capturing = positionals[0] === 'capture';
+const specs = capturing ? positionals.slice(1) : positionals;
+
+if (specs.length !== 1 || (values.base && !capturing)) {
+    console.error(
+        'usage: pnpm motion-kit <spec.json> [--out dir]\n' +
+            '       pnpm motion-kit capture <page.json> [--base http://localhost:3000] [--out dir]',
+    );
+    process.exit(2);
+}
+
+const report = (outDir: string, modules: Module[]) => {
+    for (const file of modules) {
+        console.log(
+            `${outDir}/${file.name}  ${(Buffer.byteLength(file.text) / 1024).toFixed(1)} KiB`,
+        );
+    }
+};
+
+try {
+    if (capturing) {
+        const { generatePage } = await import('./capture.ts');
+        const generated = await generatePage({
+            specPath: specs[0]!,
+            base: values.base,
+            outDir: values.out,
+        });
+
+        report(generated.outDir, generated.modules);
+
+        for (const line of generated.dropped) {
+            console.log(`dropped: ${line}`);
+        }
+    } else {
+        const { generate } = await import('./build.ts');
+        const { outDir, modules } = await generate({ specPath: specs[0]!, outDir: values.out });
+
+        report(outDir, modules);
+    }
+} catch (error) {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+}
diff --git a/motion-kit/css.ts b/motion-kit/css.ts
new file mode 100644
index 0000000..809e1d6
--- /dev/null
+++ b/motion-kit/css.ts
@@ -0,0 +1,330 @@
+import postcss, { type AtRule, type Node, type Root, type Rule } from 'postcss';
+
+import { ROOT_FONT_SIZE, type Viewport, WRAPPER } from './spec.ts';
+
+/**
+ * The app's compiled CSS made safe for a film: frozen at its final frame,
+ * fixed to one viewport and scoped under one wrapper class.
+ *
+ * - Motion is removed: `@keyframes`, every `animation*` and `transition*`
+ *   declaration, and `@font-face` (the film names its faces). With
+ *   `keepMotion` the motion stays, so a browser can read it (motion.ts).
+ * - Media queries are decided for the viewport: a true one gives up its
+ *   rules, a false one is dropped. A media type, feature or condition this
+ *   cannot decide is an error.
+ * - `rem` becomes px at the 16 px root and viewport units become px at the
+ *   viewport, so neither depends on the film's own page.
+ * - Every selector is put under `.dfo-ui`; `:root`, `html` and `body` become
+ *   the wrapper itself.
+ * - The two font variables read the film's `--sans` and `--mono` first.
+ */
+
+const ROOT_PX = ROOT_FONT_SIZE;
+
+const FONT_VARIABLES: Record<string, string> = {
+    '--font-outfit': 'var(--sans, "Outfit", system-ui, sans-serif)',
+    '--font-dm-mono': 'var(--mono, "DM Mono", ui-monospace, monospace)',
+};
+
+const MOTION = /^(-webkit-|-moz-)?(animation|transition)(-|$)/;
+
+// --- media queries ------------------------------------------------------------
+
+const length = (value: string): number => {
+    const match = /^(-?[\d.]+)(px|rem|em)?$/.exec(value.trim());
+
+    if (!match) {
+        throw new Error(`css: cannot read the media length "${value}"`);
+    }
+
+    return Number(match[1]) * (match[2] === 'rem' || match[2] === 'em' ? ROOT_PX : 1);
+};
+
+// One `(feature: value)` test at the viewport, on a screen with a fine
+// pointer that hovers, at 1x, with no motion preference stated.
+const feature = (test: string, { width, height }: Viewport): boolean => {
+    const [rawName, rawValue = ''] = test.split(':').map((part) => part.trim());
+    const name = rawName!.replace(/^-webkit-/, '');
+    const value = rawValue.toLowerCase();
+
+    switch (name) {
+        case 'min-width':
+        case 'min-device-width':
+            return width >= length(value);
+        case 'max-width':
+        case 'max-device-width':
+            return width <= length(value);
+        case 'min-height':
+        case 'min-device-height':
+            return height >= length(value);
+        case 'max-height':
+        case 'max-device-height':
+            return height <= length(value);
+        case 'orientation':
+            return value === (width >= height ? 'landscape' : 'portrait');
+        case 'hover':
+        case 'any-hover':
+            return value === 'hover';
+        case 'pointer':
+        case 'any-pointer':
+            return value === 'fine';
+        case 'min-device-pixel-ratio':
+            return Number(value) <= 1;
+        case 'min-resolution':
+            return length(value.replace('dpi', '')) <= 96;
+        case 'prefers-reduced-motion':
+        case 'prefers-contrast':
+        case 'forced-colors':
+            return value === 'no-preference' || value === 'none';
+        case 'prefers-color-scheme':
+            return value === 'light';
+        default:
+            throw new Error(`css: no rule decides the media feature "${test}"`);
+    }
+};
+
+// `(a) and (b) …`, `(a) or (b) …` or `not (a)`; after a media type only
+// `and` may join. Nested conditions are refused.
+const condition = (text: string, viewport: Viewport, { or }: { or: boolean }): boolean => {
+    const negated = /^not\s+(.*)$/i.exec(text);
+    const parts = (negated?.[1] ?? text).split(/\s+(and|or)\s+/i);
+    const joins = new Set(parts.filter((_, index) => index % 2).map((join) => join.toLowerCase()));
+    const tests = parts
+        .filter((_, index) => index % 2 === 0)
+        .map((part) => /^\(([^()]+)\)$/.exec(part.trim())?.[1]);
+
+    if (
+        tests.includes(undefined) ||
+        joins.size > 1 ||
+        (negated && parts.length > 1) ||
+        (!or && joins.has('or'))
+    ) {
+        throw new Error(`css: cannot decide the media condition "${text}"`);
+    }
+
+    // Every feature is read, so one this cannot decide is an error whatever
+    // the others give.
+    const results = tests.map((test) => feature(test!, viewport));
+    const matched = joins.has('or') ? results.some(Boolean) : results.every(Boolean);
+
+    return negated ? !matched : matched;
+};
+
+// The film plays on a screen: `screen` and `all` match, `print` does not,
+// and any other type is an error.
+const mediaType = (type: string): boolean => {
+    switch (type.toLowerCase()) {
+        case 'all':
+        case 'screen':
+            return true;
+        case 'print':
+            return false;
+        default:
+            throw new Error(`css: no rule decides the media type "${type}"`);
+    }
+};
+
+const TYPED_QUERY = /^(?:(only|not)\s+)?([a-z-]+)(?:\s+and\s+(.+))?$/i;
+
+export const mediaMatches = (params: string, viewport: Viewport): boolean =>
+    params.split(',').some((raw) => {
+        const query = raw.trim();
+
+        if (/^(not\s+)?\(/i.test(query)) {
+            return condition(query, viewport, { or: true });
+        }
+
+        const [, modifier, type, rest] = TYPED_QUERY.exec(query) ?? [];
+
+        if (!type) {
+            throw new Error(`css: cannot read the media query "${query}"`);
+        }
+
+        const typeMatches = mediaType(type);
+        const conditionMatches = rest === undefined || condition(rest, viewport, { or: false });
+        const matched = typeMatches && conditionMatches;
+
+        return modifier?.toLowerCase() === 'not' ? !matched : matched;
+    });
+
+// --- units and selectors ------------------------------------------------------
+
+export const toPx = (value: string, viewport: Viewport, rootPx: number): string =>
+    value.replace(
+        /(-?\d*\.?\d+)(rem|vw|vh|dvh|svh|lvh|dvw|svw|lvw|vmin|vmax)\b/g,
+        (_whole, number: string, unit: string) => {
+            const n = Number(number);
+            const per = {
+                rem: rootPx,
+                vmin: Math.min(viewport.width, viewport.height) / 100,
+                vmax: Math.max(viewport.width, viewport.height) / 100,
+            }[unit];
+            const axis = unit.endsWith('w') ? viewport.width / 100 : viewport.height / 100;
+            const px = n * (per ?? axis);
+
+            return `${Math.round(px * 1000) / 1000}px`;
+        },
+    );
+
+const ROOT_SELECTOR = /^(?::root|html|body)(?![\w-])/;
+
+export const scopeSelector = (selector: string): string => {
+    const trimmed = selector.trim();
+
+    if (ROOT_SELECTOR.test(trimmed)) {
+        // `html body`, `:root body`: the wrapper stands for both.
+        const rest = trimmed.replace(ROOT_SELECTOR, '').replace(/^\s+(?:body)(?![\w-])/, '');
+
+        return `.${WRAPPER}${rest}`;
+    }
+
+    return `.${WRAPPER} ${trimmed}`;
+};
+
+const insideKeyframes = (rule: Rule): boolean => {
+    for (let parent: Node | undefined = rule.parent; parent; parent = parent.parent) {
+        if (parent.type === 'atrule' && /keyframes$/i.test((parent as AtRule).name)) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+/** The stylesheet without the font size `html` rules set on the root. */
+export const dropRootFontSize = (css: string): string => {
+    const root = postcss.parse(css);
+
+    root.walkRules((rule) => {
+        if (rule.selector.trim() === 'html') {
+            rule.walkDecls('font-size', (decl) => {
+                decl.remove();
+            });
+        }
+    });
+
+    return root.toResult().css;
+};
+
+/** The stylesheet frozen, decided for `viewport` and scoped. `rem` is
+ *  converted at `rootFontSize`, the page's root size (16 px when absent);
+ *  media queries keep the browser's 16 px `em`. `keepMotion` leaves the
+ *  keyframes, animations and transitions in place. */
+export const filmCss = (
+    css: string,
+    viewport: Viewport,
+    {
+        rootFontSize = ROOT_PX,
+        keepMotion = false,
+    }: { rootFontSize?: number; keepMotion?: boolean } = {},
+): string => {
+    const root: Root = postcss.parse(css);
+
+    // Collected first, so a rule moved out of a matching query is still
+    // decided where it lands.
+    const atRules: AtRule[] = [];
+
+    root.walkAtRules((atRule) => {
+        atRules.push(atRule);
+    });
+
+    for (const atRule of atRules) {
+        const name = atRule.name.toLowerCase();
+
+        if ((!keepMotion && /keyframes$/.test(name)) || name === 'font-face') {
+            atRule.remove();
+        } else if (name === 'media') {
+            if (mediaMatches(atRule.params, viewport)) {
+                atRule.replaceWith(atRule.nodes ?? []);
+            } else {
+                atRule.remove();
+            }
+        }
+    }
+
+    root.walkDecls((decl) => {
+        if (!keepMotion && MOTION.test(decl.prop)) {
+            decl.remove();
+
+            return;
+        }
+
+        decl.value = FONT_VARIABLES[decl.prop] ?? toPx(decl.value, viewport, rootFontSize);
+    });
+
+    root.walkRules((rule) => {
+        if (!insideKeyframes(rule)) {
+            rule.selectors = rule.selectors.map(scopeSelector);
+        }
+    });
+
+    // Rules left empty by the removals.
+    root.walkRules((rule) => {
+        if (!rule.nodes.length) {
+            rule.remove();
+        }
+    });
+
+    root.append(
+        postcss.rule({
+            selector: `.${WRAPPER}`,
+            nodes: [
+                postcss.decl({ prop: 'position', value: 'relative' }),
+                postcss.decl({ prop: 'width', value: `${viewport.width}px` }),
+                postcss.decl({ prop: 'height', value: `${viewport.height}px` }),
+                postcss.decl({ prop: 'overflow', value: 'hidden' }),
+                // The containing block of the app's fixed bars and panels.
+                postcss.decl({ prop: 'contain', value: 'strict' }),
+                postcss.decl({ prop: 'font-size', value: `${ROOT_PX}px` }),
+            ],
+        }),
+    );
+
+    return root.toResult().css;
+};
+
+/** URLs in the stylesheet that would leave the film: anything not `data:`,
+ *  in a `url()` or a quoted `@import`. */
+export const externalUrls = (css: string): string[] =>
+    [
+        ...css.matchAll(/url\(\s*(['"]?)([^'")]*)\1\s*\)/g),
+        ...css.matchAll(/@import\s+(['"])([^'"]*)\1/gi),
+    ]
+        .map((match) => match[2]!)
+        .filter((url) => !url.startsWith('data:') && !url.startsWith('#'));
+
+/**
+ * The stylesheet in pieces of at most `limit`, cut between top-level rules
+ * so each piece parses alone. One piece when it fits. `size` measures a
+ * piece, its UTF-8 bytes when absent; it must add up over concatenation,
+ * as a JSON-escaped length does.
+ */
+export const splitCss = (
+    css: string,
+    limit: number,
+    size: (text: string) => number = Buffer.byteLength,
+): string[] => {
+    const pieces: string[] = [];
+    let piece = '';
+    let pieceSize = 0;
+
+    for (const node of postcss.parse(css).nodes) {
+        const text = `${node.toString()}\n`;
+        const textSize = size(text);
+
+        if (textSize > limit) {
+            throw new Error(`css: one rule is larger than ${limit} bytes`);
+        }
+
+        if (pieceSize + textSize > limit) {
+            pieces.push(piece);
+            piece = '';
+            pieceSize = 0;
+        }
+
+        piece += text;
+        pieceSize += textSize;
+    }
+
+    return piece ? [...pieces, piece] : pieces;
+};
diff --git a/motion-kit/cues.ts b/motion-kit/cues.ts
new file mode 100644
index 0000000..06043c9
--- /dev/null
+++ b/motion-kit/cues.ts
@@ -0,0 +1,245 @@
+/**
+ * A demo's cue sheet, `<spec>.cues.json` beside the spec: the film's camera
+ * keys and the cues that animate the fragment's hooks. The generator checks
+ * it against the render and copies it into the output as `cues.json`.
+ */
+
+export const CUE_KINDS = [
+    'show',
+    'pop',
+    'stream',
+    'draw',
+    'type',
+    'press',
+    'hide',
+    'remove',
+    'tab',
+    'animate',
+    'state',
+] as const;
+
+export type CueKind = (typeof CUE_KINDS)[number];
+
+/** A camera key: at `t` s the view rests on `hook` (or a point) at zoom `z`.
+ *  A page capture's key may hold for one captured state only, `in`. */
+export type CameraKey = { t: number; hook?: string; in?: string } & Record<string, unknown>;
+
+/** A cue on hook `v`, or on `sel` inside it, starting at `at` s. A `tab`
+ *  cue names the view it leaves in `from`; a `draw` cue may name the line's
+ *  dots in `points`. An `animate` cue plays the app's animations on `v`, or
+ *  every one with the keyframes `name`; a `state` cue switches to the
+ *  manifest state `to` and names no hook. A page capture's cue may play in
+ *  one captured state only, `in`. */
+export type Cue = {
+    v?: string;
+    name?: string;
+    to?: string;
+    sel?: string;
+    kind: CueKind;
+    at: number;
+    from?: string;
+    points?: string;
+    in?: string;
+} & Record<string, unknown>;
+
+export type CueSheet = { keys: CameraKey[]; cues: Cue[] };
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const KINDS = new Set<string>(CUE_KINDS);
+
+/** What a cue sheet may name besides hooks: the render's keyframe names and
+ *  manifest states. Keyframe names go unchecked when `keyframes` is absent,
+ *  as before the motion has been read. `page` is a page capture's states and
+ *  each hook's box in each (null where the hook is absent); with it, a cue
+ *  or key may name its state in `in`, and its hooks must be in that state,
+ *  or in every state when it names none. Hooks go unchecked against states
+ *  when `boxes` is absent, as before the page is captured. */
+export type CueTargets = {
+    keyframes?: readonly string[];
+    // The hooks the app animates; unchecked when absent, as before the
+    // motion has been read.
+    animated?: readonly string[];
+    states?: readonly string[];
+    page?: { states: readonly string[]; boxes?: Record<string, Record<string, unknown>> };
+};
+
+/**
+ * The cue sheet as parsed JSON, checked against the render's `hooks`: every
+ * hook, keyframe name and state a cue or key names is in the render, every
+ * cue has a known kind and a start time, and the keys run forward in time.
+ * Lists every problem.
+ */
+export const readCues = (
+    raw: unknown,
+    hooks: readonly string[],
+    { keyframes, animated, states = [], page }: CueTargets = {},
+): CueSheet => {
+    const known = new Set(hooks);
+    const problems: string[] = [];
+    // The captured states an item plays in, or null when its `in` is wrong.
+    const playsIn = (where: string, item: Record<string, unknown>) => {
+        if (item.in === undefined) {
+            return page?.states ?? [];
+        }
+
+        if (!page) {
+            problems.push(`${where} names a state in "in", which only a page capture's may`);
+
+            return null;
+        }
+
+        if (typeof item.in !== 'string' || !page.states.includes(item.in)) {
+            problems.push(`${where} is in "${String(item.in)}", which is not a captured state`);
+
+            return null;
+        }
+
+        return [item.in];
+    };
+    const hook = (where: string, value: unknown, shownIn: readonly string[] | null = []) => {
+        if (typeof value !== 'string' || !known.has(value)) {
+            problems.push(`${where} names "${String(value)}", which is not a hook of the fragment`);
+
+            return;
+        }
+
+        const boxes = page?.boxes;
+        const absent = boxes
+            ? (shownIn ?? []).filter((state) => boxes[value]?.[state] == null)
+            : [];
+
+        if (absent.length) {
+            problems.push(`${where} names "${value}", which is absent from ${absent.join(', ')}`);
+        }
+    };
+
+    // Optional numeric fields must be numbers, or the runtime computes NaN
+    // and the cue silently never moves.
+    const numbers = (where: string, item: Record<string, unknown>, fields: readonly string[]) => {
+        for (const field of fields) {
+            if (item[field] !== undefined && !Number.isFinite(item[field])) {
+                problems.push(`${where} has a "${field}" that is not a number`);
+            }
+        }
+    };
+
+    if (!isRecord(raw) || !Array.isArray(raw.keys) || !Array.isArray(raw.cues)) {
+        throw new Error('cue sheet: expected an object with "keys" and "cues" arrays');
+    }
+
+    const keys: unknown[] = raw.keys;
+    const cues: unknown[] = raw.cues;
+
+    keys.forEach((key, index) => {
+        const where = `key ${index}`;
+
+        if (!isRecord(key) || typeof key.t !== 'number') {
+            problems.push(`${where} needs a time "t" in seconds`);
+
+            return;
+        }
+
+        const previous = keys[index - 1] as { t?: unknown } | undefined;
+
+        if (typeof previous?.t === 'number' && key.t <= previous.t) {
+            problems.push(
+                `${where} at ${key.t} s does not come after key ${index - 1} at ${previous.t} s`,
+            );
+        }
+
+        const shownIn = playsIn(where, key);
+
+        numbers(where, key, ['z', 'hold', 'cx', 'cy', 'from']);
+
+        if (
+            key.drift !== undefined &&
+            !(
+                Array.isArray(key.drift) &&
+                key.drift.length === 3 &&
+                key.drift.every(Number.isFinite)
+            )
+        ) {
+            problems.push(`${where} needs "drift" as three numbers`);
+        }
+
+        if (key.hook !== undefined) {
+            hook(where, key.hook, shownIn);
+        }
+    });
+
+    cues.forEach((cue, index) => {
+        const where = `cue ${index}`;
+
+        if (!isRecord(cue)) {
+            problems.push(`${where} must be an object`);
+
+            return;
+        }
+
+        const shownIn = playsIn(where, cue);
+
+        if (page && ['animate', 'state', 'tab'].includes(cue.kind as string)) {
+            problems.push(`${where} is a "${String(cue.kind)}" cue, which needs the Studio`);
+        } else if (cue.kind === 'state') {
+            if (typeof cue.to !== 'string' || !states.includes(cue.to)) {
+                problems.push(
+                    `${where} switches to "${String(cue.to)}", which is not a manifest state`,
+                );
+            }
+        } else if (cue.kind === 'animate' && cue.v === undefined) {
+            if (typeof cue.name !== 'string' || (keyframes && !keyframes.includes(cue.name))) {
+                problems.push(
+                    `${where} plays "${String(cue.name)}", which is not a keyframe of the render`,
+                );
+            }
+        } else if (cue.kind === 'animate' && cue.name !== undefined) {
+            problems.push(`${where} names both a hook and keyframes; an animate cue takes one`);
+        } else {
+            hook(where, cue.v, shownIn);
+
+            if (cue.kind === 'animate' && animated && !animated.includes(cue.v as string)) {
+                problems.push(
+                    `${where} animates "${String(cue.v)}", which the app does not animate`,
+                );
+            }
+        }
+
+        if (cue.kind === 'tab' && cue.from === undefined) {
+            problems.push(`${where} needs "from", the view the tab leaves`);
+        }
+
+        if (cue.kind === 'type' && typeof cue.text !== 'string') {
+            problems.push(`${where} needs the "text" to type`);
+        }
+
+        numbers(where, cue, ['dur', 'dy', 'wps', 'cps', 'clearAt']);
+
+        if (typeof cue.kind !== 'string' || !KINDS.has(cue.kind)) {
+            problems.push(
+                `${where} has the kind "${String(cue.kind)}"; kinds are ${CUE_KINDS.join(', ')}`,
+            );
+        }
+
+        if (typeof cue.at !== 'number') {
+            problems.push(`${where} needs a start time "at" in seconds`);
+        }
+
+        if (cue.sel !== undefined && (typeof cue.sel !== 'string' || !cue.sel)) {
+            problems.push(`${where} has an empty "sel"`);
+        }
+
+        for (const field of ['from', 'points'] as const) {
+            if (cue[field] !== undefined) {
+                hook(`${where} "${field}"`, cue[field], shownIn);
+            }
+        }
+    });
+
+    if (problems.length) {
+        throw new Error(`cue sheet:\n- ${problems.join('\n- ')}`);
+    }
+
+    return raw as CueSheet;
+};
diff --git a/motion-kit/demos/kenya-debt-health.cues.json b/motion-kit/demos/kenya-debt-health.cues.json
new file mode 100644
index 0000000..cb35838
--- /dev/null
+++ b/motion-kit/demos/kenya-debt-health.cues.json
@@ -0,0 +1,199 @@
+{
+    "keys": [
+        {
+            "t": 0,
+            "hold": 1.0
+        },
+        {
+            "t": 1.9,
+            "hook": "prompt",
+            "z": 1.9,
+            "hold": 2.7
+        },
+        {
+            "t": 5.4,
+            "hook": "msg-1",
+            "z": 1.7,
+            "hold": 3.0
+        },
+        {
+            "t": 9.2,
+            "hook": "plan",
+            "z": 1.6,
+            "hold": 1.2
+        },
+        {
+            "t": 11.3,
+            "hook": "canvas",
+            "z": 1.2,
+            "hold": 3.3
+        },
+        {
+            "t": 15.4,
+            "hook": "card-debt-vs-health",
+            "z": 1.8,
+            "hold": 2.6,
+            "drift": [0, 0, 0.01]
+        },
+        {
+            "t": 18.8,
+            "z": 1,
+            "hold": 6
+        }
+    ],
+    "cues": [
+        {
+            "name": "Studio_module_board-in",
+            "kind": "animate",
+            "at": 0
+        },
+        {
+            "name": "Studio_module_bar-in",
+            "kind": "animate",
+            "at": 0
+        },
+        {
+            "name": "WorkspaceToolbar_module_ws-rise",
+            "kind": "animate",
+            "at": 0
+        },
+        {
+            "name": "ChatPanel_module_chat-in",
+            "kind": "animate",
+            "at": 0
+        },
+        {
+            "v": "prompt",
+            "kind": "type",
+            "at": 0.9,
+            "cps": 26,
+            "clearAt": 4.5,
+            "text": "Compare Kenya's external debt service with its health aid since 2015, including HIV"
+        },
+        {
+            "v": "send",
+            "kind": "press",
+            "at": 4.3
+        },
+        {
+            "v": "msg-0",
+            "kind": "show",
+            "at": 4.5,
+            "dur": 0
+        },
+        {
+            "v": "msg-1",
+            "sel": ".ChatPanel_module_botText",
+            "kind": "stream",
+            "at": 5.0,
+            "wps": 12
+        },
+        {
+            "v": "msg-1",
+            "sel": ".MessageFeedback_module_feedback",
+            "kind": "show",
+            "at": 8.3,
+            "dur": 0
+        },
+        {
+            "v": "plan",
+            "kind": "show",
+            "at": 8.6,
+            "dur": 0
+        },
+        {
+            "v": "plan-bar",
+            "kind": "show",
+            "at": 8.6,
+            "dur": 0
+        },
+        {
+            "v": "plan-approve",
+            "kind": "press",
+            "at": 10.0
+        },
+        {
+            "v": "plan",
+            "kind": "remove",
+            "at": 10.2
+        },
+        {
+            "v": "plan-bar",
+            "kind": "remove",
+            "at": 10.2
+        },
+        {
+            "kind": "state",
+            "to": "approved",
+            "at": 10.2
+        },
+        {
+            "v": "plan-pill",
+            "kind": "show",
+            "at": 10.2,
+            "dur": 0
+        },
+        {
+            "v": "card-debt-service-2024",
+            "kind": "animate",
+            "at": 11.4
+        },
+        {
+            "v": "card-health-aid-2024",
+            "kind": "animate",
+            "at": 11.8
+        },
+        {
+            "v": "card-debt-vs-health",
+            "kind": "animate",
+            "at": 12.3
+        },
+        {
+            "v": "msg-1",
+            "sel": ".WidgetChips_module_chips",
+            "kind": "show",
+            "at": 12.6,
+            "dur": 0
+        },
+        {
+            "v": "series-debt-vs-health-0",
+            "kind": "draw",
+            "at": 12.7,
+            "dur": 1.8
+        },
+        {
+            "v": "series-debt-vs-health-1",
+            "kind": "draw",
+            "at": 12.9,
+            "dur": 1.8
+        },
+        {
+            "v": "msg-2",
+            "sel": ".ChatPanel_module_botText",
+            "kind": "stream",
+            "at": 18.4,
+            "wps": 14
+        },
+        {
+            "v": "msg-2",
+            "sel": ".MessageFeedback_module_feedback",
+            "kind": "show",
+            "at": 21.6,
+            "dur": 0
+        },
+        {
+            "v": "msg-2",
+            "sel": ".WidgetChips_module_chips",
+            "kind": "show",
+            "at": 21.8,
+            "dur": 0
+        },
+        {
+            "v": "msg-2",
+            "sel": ".ChatPanel_module_followups",
+            "kind": "show",
+            "at": 22.0,
+            "dur": 0
+        }
+    ]
+}
diff --git a/motion-kit/demos/kenya-debt-health.json b/motion-kit/demos/kenya-debt-health.json
new file mode 100644
index 0000000..73ef869
--- /dev/null
+++ b/motion-kit/demos/kenya-debt-health.json
@@ -0,0 +1,510 @@
+{
+    "title": "Kenya: debt service against health aid",
+    "question": "Compare Kenya's external debt service with its health aid since 2015, including HIV",
+    "messages": [
+        {
+            "role": "user",
+            "text": "Compare Kenya's external debt service with its health aid since 2015, including HIV"
+        },
+        {
+            "role": "bot",
+            "text": "This compares two sources, the World Bank's debt statistics and the OECD's aid records, so here is a plan before I fetch anything. Health aid counts purposes 120 and 130, which covers HIV/AIDS."
+        },
+        {
+            "role": "bot",
+            "text": "Kenya paid **$5.7bn** in external debt service in 2024, nearly eight times the **$741m** it received in health aid.\n\nIn 2015 the two were close: $890m against $778m. Debt service has risen sixfold since, while health aid, HIV programmes included, has stayed between $600m and $930m a year.",
+            "followups": [
+                "Show debt service as a share of exports",
+                "Break health aid down by donor"
+            ],
+            "plan": {
+                "plan_version_id": "pv_3f8a61e2",
+                "version": 1,
+                "revision": "rev_7d2e91c4",
+                "title": "Kenya's external debt service against its health aid, 2015 to 2024",
+                "summary": "Counts Kenya's total external debt service from the World Bank and the health aid it received from the OECD, including HIV, in current US dollars, 2015 to 2024.",
+                "steps": [
+                    {
+                        "label": "Fetch Kenya's external debt service",
+                        "gives_answer": false
+                    },
+                    {
+                        "label": "Fetch health aid Kenya received",
+                        "gives_answer": false
+                    },
+                    {
+                        "label": "Align both series to a common basis",
+                        "gives_answer": false
+                    },
+                    {
+                        "label": "Compare debt service with health aid",
+                        "gives_answer": true
+                    }
+                ],
+                "choices": [
+                    {
+                        "question": "Health aid",
+                        "chosen": "Health and population (120, 130)"
+                    },
+                    {
+                        "question": "Aid flow",
+                        "chosen": "Gross disbursements"
+                    },
+                    {
+                        "question": "Comparison",
+                        "chosen": "Debt service as a multiple of health aid"
+                    }
+                ],
+                "caveats": [
+                    "Debt service and health aid come from different providers, so the two series are aligned on year but counted separately."
+                ]
+            }
+        }
+    ],
+    "plan": {
+        "title": "Kenya's external debt service against its health aid, 2015 to 2024",
+        "summary": "Counts Kenya's total external debt service from the World Bank and the health aid it received from the OECD, including HIV, in current US dollars, 2015 to 2024.",
+        "steps": [
+            {
+                "id": "retrieve_debt_service",
+                "label": "Fetch Kenya's external debt service",
+                "description": "Retrieves Kenya's total external debt service (DT.TDS.DECT.CD), 2015 to 2024."
+            },
+            {
+                "id": "retrieve_health_aid",
+                "label": "Fetch health aid Kenya received",
+                "description": "Retrieves gross ODA disbursements to Kenya for health (120) and population and reproductive health (130), which includes HIV/AIDS, 2015 to 2024."
+            },
+            {
+                "id": "align",
+                "label": "Align both series to a common basis",
+                "description": "Aligns both series on year, in current US dollars, 2015 to 2024."
+            },
+            {
+                "id": "compare",
+                "label": "Compare debt service with health aid",
+                "description": "Computes debt service as a multiple of health aid each year."
+            }
+        ],
+        "answerStepId": "compare",
+        "decisions": [
+            {
+                "id": "health_scope",
+                "question": "Health aid",
+                "chosen": "Health and population (120, 130)",
+                "reason": "Purpose 130 holds STD control including HIV/AIDS (13040), which the question asks to include.",
+                "resolved_by": "default",
+                "alternatives": ["Health only (120)"],
+                "choice_id": "health_aid/purpose",
+                "active_option_id": "purposes_120_130",
+                "options": [
+                    {
+                        "option_id": "purposes_120_130",
+                        "label": "Health and population (120, 130)",
+                        "status": "available",
+                        "reason": null,
+                        "years": null
+                    },
+                    {
+                        "option_id": "purpose_120",
+                        "label": "Health only (120)",
+                        "status": "available",
+                        "reason": null,
+                        "years": null
+                    }
+                ]
+            },
+            {
+                "id": "aid_flow",
+                "question": "Aid flow",
+                "chosen": "Gross disbursements",
+                "reason": "Disbursements count the aid that arrived in each year.",
+                "resolved_by": "default",
+                "alternatives": ["Net disbursements", "Commitments"],
+                "choice_id": "health_aid/flow",
+                "active_option_id": "gross_disbursements",
+                "options": [
+                    {
+                        "option_id": "gross_disbursements",
+                        "label": "Gross disbursements",
+                        "status": "available",
+                        "reason": null,
+                        "years": null
+                    },
+                    {
+                        "option_id": "net_disbursements",
+                        "label": "Net disbursements",
+                        "status": "available",
+                        "reason": null,
+                        "years": null
+                    },
+                    {
+                        "option_id": "commitments",
+                        "label": "Commitments",
+                        "status": "partial",
+                        "reason": null,
+                        "years": [[2017, 2024]]
+                    }
+                ]
+            },
+            {
+                "id": "comparison",
+                "question": "Comparison",
+                "chosen": "Debt service as a multiple of health aid",
+                "reason": "A multiple reads the gap between the two in one number a year.",
+                "resolved_by": "default",
+                "alternatives": ["Both series side by side"],
+                "choice_id": "decision/comparison",
+                "active_option_id": "option_0",
+                "options": [
+                    {
+                        "option_id": "option_0",
+                        "label": "Debt service as a multiple of health aid",
+                        "status": "available",
+                        "reason": null,
+                        "years": null
+                    },
+                    {
+                        "option_id": "option_1",
+                        "label": "Both series side by side",
+                        "status": "available",
+                        "reason": null,
+                        "years": null
+                    }
+                ]
+            }
+        ],
+        "caveats": [
+            "Debt service and health aid come from different providers, so the two series are aligned on year but counted separately."
+        ],
+        "movedElsewhere": [],
+        "version": 1,
+        "actions": ["approve", "amend", "reject", "switch"],
+        "interruptId": "int_5c1e0a9d2b7f4e31",
+        "live": true,
+        "revision": "rev_7d2e91c4",
+        "baseline": {
+            "health_aid/purpose": {
+                "optionId": "purposes_120_130",
+                "label": "Health and population (120, 130)"
+            },
+            "health_aid/flow": {
+                "optionId": "gross_disbursements",
+                "label": "Gross disbursements"
+            },
+            "decision/comparison": {
+                "optionId": "option_0",
+                "label": "Debt service as a multiple of health aid"
+            }
+        },
+        "changed": [],
+        "switched": null,
+        "stepsUpdated": false,
+        "switching": null,
+        "notice": null
+    },
+    "activity": [
+        {
+            "turn": 1,
+            "prompt": "Compare Kenya's external debt service with its health aid since 2015, including HIV",
+            "startedAt": 1793179200000,
+            "endedAt": 1793179209800,
+            "tools": [
+                {
+                    "id": "s1-fetch",
+                    "name": "Fetch the data",
+                    "args": {
+                        "tool": "get_data"
+                    },
+                    "summary": "10 observations · 2015 to 2024 · World Bank International Debt Statistics",
+                    "startedAt": 1793179201200,
+                    "durationMs": 420,
+                    "state": "complete"
+                },
+                {
+                    "id": "s1-card",
+                    "name": "Create a canvas component",
+                    "args": {
+                        "tool": "write_component"
+                    },
+                    "summary": "created",
+                    "startedAt": 1793179201700,
+                    "durationMs": 180,
+                    "widgetId": "debt-service-2024",
+                    "state": "complete"
+                },
+                {
+                    "id": "s2-fetch",
+                    "name": "Fetch the data",
+                    "args": {
+                        "tool": "get_data"
+                    },
+                    "summary": "10 observations · 2015 to 2024 · OECD Creditor Reporting System",
+                    "startedAt": 1793179202100,
+                    "durationMs": 460,
+                    "state": "complete"
+                },
+                {
+                    "id": "s2-card",
+                    "name": "Create a canvas component",
+                    "args": {
+                        "tool": "write_component"
+                    },
+                    "summary": "created",
+                    "startedAt": 1793179202700,
+                    "durationMs": 170,
+                    "widgetId": "health-aid-2024",
+                    "state": "complete"
+                },
+                {
+                    "id": "s3-align",
+                    "name": "Align both series to a common basis",
+                    "args": {
+                        "tool": "align"
+                    },
+                    "summary": "aligned on year, current USD, 2015-2024 overlap",
+                    "startedAt": 1793179203000,
+                    "durationMs": 90,
+                    "state": "complete"
+                },
+                {
+                    "id": "s4-compare",
+                    "name": "Compare debt service with health aid",
+                    "args": {
+                        "tool": "compare"
+                    },
+                    "summary": "debt service ÷ health aid: 1.14x in 2015, 7.65x in 2024",
+                    "startedAt": 1793179203200,
+                    "durationMs": 140,
+                    "state": "complete"
+                },
+                {
+                    "id": "s4-card",
+                    "name": "Create a canvas component",
+                    "args": {
+                        "tool": "write_component"
+                    },
+                    "summary": "created",
+                    "startedAt": 1793179203500,
+                    "durationMs": 210,
+                    "widgetId": "debt-vs-health",
+                    "state": "complete"
+                }
+            ]
+        }
+    ],
+    "cards": [
+        {
+            "widget": {
+                "kind": "key_number",
+                "id": "debt-service-2024",
+                "label": "Kenya's external debt service, 2024",
+                "value": "5.7B",
+                "unit": "USD",
+                "stat": {
+                    "value": 5670,
+                    "period": "2024",
+                    "unit": {
+                        "currency": "USD",
+                        "magnitude": "millions",
+                        "prices": "current",
+                        "base_year": null
+                    }
+                },
+                "ref": {
+                    "component_id": "cmp_ab5693efcac8",
+                    "revision": 1
+                },
+                "source": "World Bank International Debt Statistics (DT.TDS.DECT.CD)",
+                "info": {
+                    "label": "International Debt Statistics · 1 indicator(s)",
+                    "sourceId": "IDS",
+                    "sourceName": "World Bank International Debt Statistics",
+                    "sourceCount": 1,
+                    "indicatorCount": 1,
+                    "years": {
+                        "start": "2015",
+                        "end": "2024"
+                    },
+                    "unit": "US Dollar, current prices",
+                    "indicators": [
+                        {
+                            "id": "DT.TDS.DECT.CD",
+                            "name": "Debt service on external debt, total (TDS, current US$)",
+                            "description": "Total debt service is the sum of principal repayments and interest actually paid in currency, goods, or services on long-term debt, interest paid on short-term debt, and repayments to the IMF."
+                        }
+                    ],
+                    "licence": "CC BY 4.0",
+                    "dataThrough": "2024",
+                    "lastRefreshed": "2026-10-20",
+                    "citation": "World Bank, International Debt Statistics (DT.TDS.DECT.CD).",
+                    "sources": [
+                        {
+                            "id": "IDS",
+                            "name": "World Bank International Debt Statistics",
+                            "licence": "CC BY 4.0",
+                            "url": "https://www.worldbank.org/en/programs/debt-statistics/ids",
+                            "retrieved": "2026-10-20"
+                        }
+                    ]
+                }
+            },
+            "slot": {
+                "col": 1,
+                "row": 1
+            }
+        },
+        {
+            "widget": {
+                "kind": "key_number",
+                "id": "health-aid-2024",
+                "label": "Health aid to Kenya, incl. HIV, 2024",
+                "value": "741.0M",
+                "unit": "USD",
+                "stat": {
+                    "value": 741,
+                    "period": "2024",
+                    "unit": {
+                        "currency": "USD",
+                        "magnitude": "millions",
+                        "prices": "current",
+                        "base_year": null
+                    }
+                },
+                "ref": {
+                    "component_id": "cmp_104b23d4567e",
+                    "revision": 1
+                },
+                "source": "OECD CRS, gross ODA disbursements, purposes 120 + 130",
+                "info": {
+                    "label": "Creditor Reporting System · 1 indicator(s)",
+                    "sourceId": "CRS",
+                    "sourceName": "OECD Creditor Reporting System",
+                    "sourceCount": 1,
+                    "indicatorCount": 1,
+                    "years": {
+                        "start": "2015",
+                        "end": "2024"
+                    },
+                    "unit": "US Dollar, current prices",
+                    "indicators": [
+                        {
+                            "id": "CRS.ODA.GROSS.120_130",
+                            "name": "Gross ODA disbursements, health (120) and population and reproductive health (130)",
+                            "description": "Gross official development assistance disbursed to Kenya for health and for population policies and reproductive health, which includes STD control including HIV/AIDS (13040)."
+                        }
+                    ],
+                    "licence": "OECD Terms and Conditions",
+                    "dataThrough": "2024",
+                    "lastRefreshed": "2026-10-20",
+                    "citation": "OECD, Creditor Reporting System: gross ODA disbursements, purposes 120 and 130.",
+                    "sources": [
+                        {
+                            "id": "CRS",
+                            "name": "OECD Creditor Reporting System",
+                            "licence": "OECD Terms and Conditions",
+                            "url": "https://data-explorer.oecd.org/",
+                            "retrieved": "2026-10-20"
+                        }
+                    ]
+                }
+            },
+            "slot": {
+                "col": 1,
+                "row": 11
+            }
+        },
+        {
+            "widget": {
+                "kind": "chart",
+                "id": "debt-vs-health",
+                "chartType": "line",
+                "title": "Kenya: external debt service and health aid, 2015–2024",
+                "unit": "USD",
+                "categories": [
+                    "2015",
+                    "2016",
+                    "2017",
+                    "2018",
+                    "2019",
+                    "2020",
+                    "2021",
+                    "2022",
+                    "2023",
+                    "2024"
+                ],
+                "series": [
+                    {
+                        "label": "External debt service",
+                        "values": [
+                            890000000, 1119000000, 1546000000, 2791000000, 4492000000, 2833000000,
+                            2446000000, 3337000000, 3873000000, 5670000000
+                        ]
+                    },
+                    {
+                        "label": "Health aid, incl. HIV",
+                        "values": [
+                            778000000, 833000000, 927000000, 795000000, 729000000, 797000000,
+                            832000000, 812000000, 614000000, 741000000
+                        ]
+                    }
+                ],
+                "ref": {
+                    "component_id": "cmp_a373db60b862",
+                    "revision": 1
+                },
+                "source": "World Bank International Debt Statistics (DT.TDS.DECT.CD); OECD CRS, gross ODA disbursements, purposes 120 + 130",
+                "info": {
+                    "label": "International Debt Statistics; Creditor Reporting System · 2 indicator(s)",
+                    "sourceId": "IDS",
+                    "sourceName": "World Bank International Debt Statistics",
+                    "sourceCount": 2,
+                    "indicatorCount": 2,
+                    "years": {
+                        "start": "2015",
+                        "end": "2024"
+                    },
+                    "unit": "US Dollar, current prices",
+                    "indicators": [
+                        {
+                            "id": "DT.TDS.DECT.CD",
+                            "name": "Debt service on external debt, total (TDS, current US$)",
+                            "description": "Total debt service is the sum of principal repayments and interest actually paid in currency, goods, or services on long-term debt, interest paid on short-term debt, and repayments to the IMF."
+                        },
+                        {
+                            "id": "CRS.ODA.GROSS.120_130",
+                            "name": "Gross ODA disbursements, health (120) and population and reproductive health (130)",
+                            "description": "Gross official development assistance disbursed to Kenya for health and for population policies and reproductive health, which includes STD control including HIV/AIDS (13040)."
+                        }
+                    ],
+                    "licence": "CC BY 4.0; OECD Terms and Conditions",
+                    "dataThrough": "2024",
+                    "lastRefreshed": "2026-10-20",
+                    "citation": "World Bank, International Debt Statistics (DT.TDS.DECT.CD); OECD, Creditor Reporting System, gross ODA disbursements, purposes 120 and 130.",
+                    "sources": [
+                        {
+                            "id": "IDS",
+                            "name": "World Bank International Debt Statistics",
+                            "licence": "CC BY 4.0",
+                            "url": "https://www.worldbank.org/en/programs/debt-statistics/ids",
+                            "retrieved": "2026-10-20"
+                        },
+                        {
+                            "id": "CRS",
+                            "name": "OECD Creditor Reporting System",
+                            "licence": "OECD Terms and Conditions",
+                            "url": "https://data-explorer.oecd.org/",
+                            "retrieved": "2026-10-20"
+                        }
+                    ]
+                }
+            },
+            "slot": {
+                "col": 22,
+                "row": 1,
+                "w": 24,
+                "h": 21
+            }
+        }
+    ]
+}
diff --git a/motion-kit/fontMetrics.ts b/motion-kit/fontMetrics.ts
new file mode 100644
index 0000000..502317e
--- /dev/null
+++ b/motion-kit/fontMetrics.ts
@@ -0,0 +1,214 @@
+import { readFileSync } from 'node:fs';
+import { inflateSync } from 'node:zlib';
+
+/**
+ * Advance widths read from a WOFF 1.0 font file, so text measured in Node
+ * has the width the browser gives it in that face. Kerning is left out, which
+ * makes a measured string a fraction of a px wider than the browser's.
+ */
+
+export type Metrics = {
+    unitsPerEm: number;
+    // Advance in font units by code point.
+    advance: (codePoint: number) => number | undefined;
+};
+
+const tables = (file: Buffer): Map<string, Buffer> => {
+    if (file.toString('latin1', 0, 4) !== 'wOFF') {
+        throw new Error('fontMetrics: not a WOFF 1.0 file');
+    }
+
+    const count = file.readUInt16BE(12);
+    const found = new Map<string, Buffer>();
+
+    for (let i = 0; i < count; i++) {
+        const entry = 44 + i * 20;
+        const tag = file.toString('latin1', entry, entry + 4);
+        const offset = file.readUInt32BE(entry + 4);
+        const compressed = file.readUInt32BE(entry + 8);
+        const original = file.readUInt32BE(entry + 12);
+        const data = file.subarray(offset, offset + compressed);
+
+        found.set(tag, compressed < original ? inflateSync(data) : data);
+    }
+
+    return found;
+};
+
+// Code point → glyph id from a format 4 (BMP) or format 12 (full range)
+// subtable.
+const glyphMap = (cmap: Buffer): Map<number, number> => {
+    const map = new Map<number, number>();
+    const count = cmap.readUInt16BE(2);
+
+    for (let i = 0; i < count; i++) {
+        const platform = cmap.readUInt16BE(4 + i * 8);
+        const encoding = cmap.readUInt16BE(6 + i * 8);
+        const at = cmap.readUInt32BE(8 + i * 8);
+        const format = cmap.readUInt16BE(at);
+        const unicode = platform === 0 || (platform === 3 && (encoding === 1 || encoding === 10));
+
+        if (!unicode) {
+            continue;
+        }
+
+        if (format === 4) {
+            const segments = cmap.readUInt16BE(at + 6) / 2;
+            const ends = at + 14;
+            const starts = ends + segments * 2 + 2;
+            const deltas = starts + segments * 2;
+            const ranges = deltas + segments * 2;
+
+            for (let s = 0; s < segments; s++) {
+                const start = cmap.readUInt16BE(starts + s * 2);
+                const end = cmap.readUInt16BE(ends + s * 2);
+                const delta = cmap.readInt16BE(deltas + s * 2);
+                const range = cmap.readUInt16BE(ranges + s * 2);
+
+                for (let code = start; code <= end && code !== 0xffff; code++) {
+                    let glyph: number;
+
+                    if (range === 0) {
+                        glyph = (code + delta) & 0xffff;
+                    } else {
+                        const raw = cmap.readUInt16BE(ranges + s * 2 + range + (code - start) * 2);
+
+                        glyph = raw === 0 ? 0 : (raw + delta) & 0xffff;
+                    }
+
+                    if (glyph) {
+                        map.set(code, glyph);
+                    }
+                }
+            }
+        } else if (format === 12) {
+            const groups = cmap.readUInt32BE(at + 12);
+
+            for (let g = 0; g < groups; g++) {
+                const group = at + 16 + g * 12;
+                const start = cmap.readUInt32BE(group);
+                const end = cmap.readUInt32BE(group + 4);
+                const first = cmap.readUInt32BE(group + 8);
+
+                for (let code = start; code <= end; code++) {
+                    map.set(code, first + code - start);
+                }
+            }
+        }
+    }
+
+    return map;
+};
+
+export const readMetrics = (path: string): Metrics => {
+    const font = tables(readFileSync(path));
+    const head = font.get('head');
+    const hhea = font.get('hhea');
+    const hmtx = font.get('hmtx');
+    const cmap = font.get('cmap');
+
+    if (!head || !hhea || !hmtx || !cmap) {
+        throw new Error(`fontMetrics: ${path} lacks head, hhea, hmtx or cmap`);
+    }
+
+    const metricCount = hhea.readUInt16BE(34);
+    const glyphs = glyphMap(cmap);
+    // Glyphs past the last full metric share its advance.
+    const advanceOf = (glyph: number) => hmtx.readUInt16BE(Math.min(glyph, metricCount - 1) * 4);
+
+    return {
+        unitsPerEm: head.readUInt16BE(18),
+        advance: (codePoint) => {
+            const glyph = glyphs.get(codePoint);
+
+            return glyph === undefined ? undefined : advanceOf(glyph);
+        },
+    };
+};
+
+/** A string's width in px at `size` px. A character the face lacks counts as
+ *  the face's average advance over printable ASCII. */
+export const textWidth = (metrics: Metrics, text: string, size: number): number => {
+    let units = 0;
+
+    for (const char of text) {
+        units += metrics.advance(char.codePointAt(0)!) ?? averageAdvance(metrics);
+    }
+
+    return (units / metrics.unitsPerEm) * size;
+};
+
+const averages = new WeakMap<Metrics, number>();
+
+const averageAdvance = (metrics: Metrics): number => {
+    let average = averages.get(metrics);
+
+    if (average === undefined) {
+        let sum = 0;
+        let count = 0;
+
+        for (let code = 0x20; code < 0x7f; code++) {
+            const advance = metrics.advance(code);
+
+            if (advance !== undefined) {
+                sum += advance;
+                count++;
+            }
+        }
+
+        average = count ? sum / count : metrics.unitsPerEm / 2;
+        averages.set(metrics, average);
+    }
+
+    return average;
+};
+
+// --- canvas font strings --------------------------------------------------------
+
+export type FontSpec = { style: string; weight: string; size: number; family: string };
+
+// `[style] [weight] <size>px <family>`, the shape Chart.js and the app's
+// own canvas code write ("normal 700 8px Outfit", "700 8px Outfit").
+const FONT = /^(?:(italic|oblique|normal)\s+)?(?:(\d{3}|bold|normal)\s+)?([\d.]+)px\s+(.+)$/;
+
+/** A canvas font string read into its parts, the weight as a number
+ *  ("bold" is 700, "normal" or none is 400). Throws on any other shape. */
+export const parseFont = (font: string): FontSpec => {
+    const match = FONT.exec(font.trim());
+
+    if (!match) {
+        throw new Error(`fontMetrics: cannot read the font "${font}"`);
+    }
+
+    const [, style = 'normal', weight, size, family] = match;
+
+    return {
+        style,
+        weight: weight === 'bold' ? '700' : !weight || weight === 'normal' ? '400' : weight,
+        size: Number(size),
+        family: family!,
+    };
+};
+
+/** Text widths in Outfit, the only face Chart.js is given, read from the
+ *  @fontsource WOFF files in `fontsDir`. */
+export const outfitMeasure = (fontsDir: string) => {
+    const faces = new Map<string, Metrics>();
+
+    return (font: string, text: string): number => {
+        const { weight, size, family } = parseFont(font);
+
+        if (!/^\s*"?outfit/i.test(family)) {
+            throw new Error(`fontMetrics: text measured in "${font}", which is not Outfit`);
+        }
+
+        let metrics = faces.get(weight);
+
+        if (!metrics) {
+            metrics = readMetrics(`${fontsDir}/outfit-latin-${weight}-normal.woff`);
+            faces.set(weight, metrics);
+        }
+
+        return textWidth(metrics, text, size);
+    };
+};
diff --git a/motion-kit/html.ts b/motion-kit/html.ts
new file mode 100644
index 0000000..964f35b
--- /dev/null
+++ b/motion-kit/html.ts
@@ -0,0 +1,143 @@
+/**
+ * A reader for the markup `renderToStaticMarkup` writes, enough to find
+ * elements and add attributes to them. React writes every attribute value
+ * double-quoted with `<`, `>` and `"` escaped, and no comments or raw text
+ * elements in this tree, so a tag is always `<name …>`, `<name …/>` or
+ * `</name>`. Also the leak check every film fragment, rendered or
+ * captured, must pass.
+ */
+
+export type Element = {
+    name: string;
+    classes: string[];
+    attrs: Record<string, string>;
+    // Where the opening tag starts and where its `>` (or `/>`) begins.
+    start: number;
+    insertAt: number;
+    parent: Element | null;
+    children: Element[];
+};
+
+const VOID = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'source',
+    'track',
+    'wbr',
+]);
+
+const TAG = /<(\/?)([a-zA-Z][\w:-]*)((?:\s+[^\s=>/]+(?:="[^"]*")?)*)\s*(\/?)>/g;
+const ATTR = /([^\s=]+)(?:="([^"]*)")?/g;
+
+export const parseMarkup = (html: string): Element[] => {
+    const roots: Element[] = [];
+    const open: Element[] = [];
+
+    for (const match of html.matchAll(TAG)) {
+        const [whole, closing, name, attrText = '', selfClosing] = match;
+        const tag = name!.toLowerCase();
+
+        if (closing) {
+            const top = open.pop();
+
+            if (top?.name !== tag) {
+                throw new Error(`markup: </${tag}> closes <${top?.name ?? 'nothing'}>`);
+            }
+
+            continue;
+        }
+
+        const attrs: Record<string, string> = {};
+
+        for (const [, key, value] of attrText.matchAll(ATTR)) {
+            attrs[key!] = value ?? '';
+        }
+
+        const parent = open.at(-1) ?? null;
+        const element: Element = {
+            name: tag,
+            classes: (attrs.class ?? '').split(/\s+/).filter(Boolean),
+            attrs,
+            start: match.index,
+            insertAt: match.index + whole.length - (selfClosing ? 2 : 1),
+            parent,
+            children: [],
+        };
+
+        (parent ? parent.children : roots).push(element);
+
+        if (!selfClosing && !VOID.has(tag)) {
+            open.push(element);
+        }
+    }
+
+    if (open.length) {
+        throw new Error(`markup: <${open.at(-1)!.name}> is never closed`);
+    }
+
+    return roots;
+};
+
+/** Every element under `roots`, depth first, in document order. */
+export const walk = (roots: Element[]): Element[] =>
+    roots.flatMap((element) => [element, ...walk(element.children)]);
+
+export const hasClass = (element: Element, className: string): boolean =>
+    element.classes.includes(className);
+
+/** Writes `name="value"` into each element's opening tag. */
+export const addAttributes = (
+    html: string,
+    additions: { element: Element; name: string; value: string }[],
+): string => {
+    const escape = (value: string) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+    let out = html;
+
+    for (const { element, name, value } of additions.toSorted(
+        (a, b) => b.element.insertAt - a.element.insertAt,
+    )) {
+        out = `${out.slice(0, element.insertAt)} ${name}="${escape(value)}"${out.slice(element.insertAt)}`;
+    }
+
+    return out;
+};
+
+/** Markup a film cannot hold: what the sanitiser exists to remove. One line
+ *  per kind found; empty when the fragment is clean. */
+export const htmlLeaks = (html: string): string[] => {
+    const leaks = new Set<string>();
+
+    for (const [, tag] of html.matchAll(
+        /<(script|noscript|iframe|canvas|object|embed|link|style)[\s>]/gi,
+    )) {
+        leaks.add(`<${tag!.toLowerCase()}>`);
+    }
+
+    for (const [, name] of html.matchAll(/\s(on[a-z]+)=/gi)) {
+        leaks.add(`${name} attribute`);
+    }
+
+    for (const [, name, value] of html.matchAll(
+        /\s((?:xlink:)?href|src|srcset|poster|action|formaction)="([^"]*)"/gi,
+    )) {
+        if (!value!.startsWith('data:') && !value!.startsWith('#')) {
+            leaks.add(`${name}="${value}"`);
+        }
+    }
+
+    for (const [, url] of html.matchAll(/url\(\s*(?:&quot;|['"])?([^'")&]*)/gi)) {
+        if (!url!.startsWith('data:') && !url!.startsWith('#')) {
+            leaks.add(`url(${url})`);
+        }
+    }
+
+    return [...leaks];
+};
diff --git a/motion-kit/motion.ts b/motion-kit/motion.ts
new file mode 100644
index 0000000..7fd0f3f
--- /dev/null
+++ b/motion-kit/motion.ts
@@ -0,0 +1,386 @@
+import type { Page } from 'playwright-core';
+import postcss from 'postcss';
+
+import type { StateClasses } from './stateClasses.ts';
+import { WRAPPER } from './spec.ts';
+
+/**
+ * The app's own motion, read as data before the film's stylesheet drops
+ * it. The fragment is loaded in Chrome under the stylesheet with its motion
+ * kept (`filmCss(…, { keepMotion: true })`), so the cascade, custom
+ * properties and the `animation` and `transition` shorthands resolve as the
+ * Studio resolves them.
+ *
+ * - `animations`: every element (and `::before`/`::after`) whose computed
+ *   `animation-name` is not `none`, with the animation's timing.
+ * - `keyframes`: the declared steps of each keyframes rule those name.
+ * - `transitions`: what a state class or attribute toggle changes and how
+ *   it eases there. A toggle is a state class a component adds beside one of
+ *   the element's classes (stateClasses.ts), or a value the stylesheet names
+ *   for an attribute the element carries (`[data-active="true"]`). A toggle
+ *   is listed when it changes the computed value of a property the element,
+ *   or one inside it, transitions in the state it lands in.
+ */
+
+/** An element of the fragment: a hook (`v`), `sel` inside a hook, or `sel`
+ *  alone from the fragment's root, as the runtime's `q(v, sel)` reads. */
+export type Target = { v?: string; sel?: string };
+
+export type AnimationEntry = Target & {
+    pseudo?: '::before' | '::after';
+    name: string;
+    // Seconds.
+    duration: number;
+    timing: string;
+    delay: number;
+    iterations: number | 'infinite';
+    fill: string;
+    direction: string;
+};
+
+export type Keyframe = { offset: number; style: Record<string, string> };
+
+export type TransitionTiming = {
+    property: string;
+    duration: number;
+    timing: string;
+    delay: number;
+};
+
+export type TransitionEntry = {
+    // `add` or `remove` for a class; `set` gives an attribute the value the
+    // key names.
+    toggle: 'add' | 'remove' | 'set';
+    on: Target;
+    element: Target;
+    properties: TransitionTiming[];
+};
+
+export type Motion = {
+    keyframes: Record<string, Keyframe[]>;
+    animations: AnimationEntry[];
+    // By toggle: `.class` or `[attribute="value"]`.
+    transitions: Record<string, TransitionEntry[]>;
+};
+
+// --- stylesheet ---------------------------------------------------------------
+
+/** Each `data-*` or `aria-*` attribute an `[name="value"]` selector
+ *  tests, with the values it tests for. */
+export const attributeValues = (css: string): Record<string, string[]> => {
+    const values = new Map<string, Set<string>>();
+
+    postcss.parse(css).walkRules((rule) => {
+        for (const match of rule.selector.matchAll(
+            /\[((?:data|aria)-[\w-]+)=(?:"([^"]*)"|'([^']*)'|([\w-]+))\]/g,
+        )) {
+            const name = match[1]!;
+
+            values.set(
+                name,
+                (values.get(name) ?? new Set()).add(match[2] ?? match[3] ?? match[4]!),
+            );
+        }
+    });
+
+    return Object.fromEntries([...values].map(([name, set]) => [name, [...set].toSorted()]));
+};
+
+const OFFSET = /^(from|to|(-?[\d.]+)%)$/;
+
+/** The declared steps of every `@keyframes` rule named in `names`. The last
+ *  rule of a name wins, as in the cascade. */
+export const keyframesOf = (css: string, names: Set<string>): Record<string, Keyframe[]> => {
+    const found: Record<string, Keyframe[]> = {};
+
+    postcss.parse(css).walkAtRules(/keyframes$/i, (atRule) => {
+        const name = atRule.params.trim();
+
+        if (!names.has(name)) {
+            return;
+        }
+
+        const steps: Keyframe[] = [];
+
+        atRule.walkRules((rule) => {
+            const style: Record<string, string> = {};
+
+            rule.walkDecls((decl) => {
+                style[decl.prop] = decl.important ? `${decl.value} !important` : decl.value;
+            });
+
+            for (const selector of rule.selectors) {
+                const match = OFFSET.exec(selector.trim());
+
+                if (!match) {
+                    throw new Error(`motion: keyframe "${selector}" of "${name}" is not an offset`);
+                }
+
+                const offset =
+                    match[1] === 'from' ? 0 : match[1] === 'to' ? 1 : Number(match[2]) / 100;
+
+                steps.push({ offset, style });
+            }
+        });
+
+        found[name] = steps.toSorted((a, b) => a.offset - b.offset);
+    });
+
+    const missing = [...names].filter((name) => !found[name]);
+
+    if (missing.length) {
+        throw new Error(`motion: no @keyframes for ${missing.join(', ')}`);
+    }
+
+    return found;
+};
+
+// --- in the browser -----------------------------------------------------------
+
+type PageInput = {
+    wrapper: string;
+    stateClasses: StateClasses;
+    attributes: Record<string, string[]>;
+};
+
+type PageOutput = Pick<Motion, 'animations' | 'transitions'> & { refused: string[] };
+
+// Runs in the page: no closure over this module.
+const readPage = ({ wrapper, stateClasses, attributes }: PageInput): PageOutput => {
+    const root = document.querySelector<HTMLElement>(`.${wrapper}`)!;
+    const elements = [root, ...root.querySelectorAll<Element>('*')];
+    const refused: string[] = [];
+
+    const target = (element: Element): Target => {
+        const steps: string[] = [];
+        let node: Element = element;
+
+        while (node !== root && !node.getAttribute('data-v')) {
+            const parent = node.parentElement!;
+
+            steps.unshift(`${node.localName}:nth-child(${[...parent.children].indexOf(node) + 1})`);
+            node = parent;
+        }
+
+        const v = node.getAttribute('data-v');
+        const path = steps.length ? `> ${steps.join(' > ')}` : undefined;
+
+        if (v) {
+            return path ? { v, sel: path } : { v };
+        }
+
+        return { sel: path ? `.${wrapper} ${path}` : `.${wrapper}` };
+    };
+
+    // A computed list split at its top-level commas.
+    const list = (value: string): string[] => {
+        const parts: string[] = [];
+        let depth = 0;
+        let part = '';
+
+        for (const char of value) {
+            depth += char === '(' ? 1 : char === ')' ? -1 : 0;
+
+            if (char === ',' && depth === 0) {
+                parts.push(part.trim());
+                part = '';
+            } else {
+                part += char;
+            }
+        }
+
+        return [...parts, part.trim()];
+    };
+    const seconds = (value: string) =>
+        Math.round(parseFloat(value) * (value.endsWith('ms') ? 1 : 1000)) / 1000;
+    // The ith entry of a list the browser repeats to the names' length.
+    const nth = (values: string[], index: number) => values[index % values.length]!;
+
+    const animations: AnimationEntry[] = [];
+
+    for (const element of elements) {
+        for (const pseudo of [null, '::before', '::after'] as const) {
+            const style = getComputedStyle(element, pseudo);
+
+            if (pseudo && style.content === 'none') {
+                continue;
+            }
+
+            const names = list(style.animationName);
+
+            names.forEach((name, index) => {
+                if (name === 'none') {
+                    return;
+                }
+
+                const iterations = nth(list(style.animationIterationCount), index);
+
+                animations.push({
+                    ...target(element),
+                    ...(pseudo ? { pseudo } : {}),
+                    name,
+                    duration: seconds(nth(list(style.animationDuration), index)),
+                    timing: nth(list(style.animationTimingFunction), index),
+                    delay: seconds(nth(list(style.animationDelay), index)),
+                    iterations: iterations === 'infinite' ? 'infinite' : Number(iterations),
+                    fill: nth(list(style.animationFillMode), index),
+                    direction: nth(list(style.animationDirection), index),
+                });
+            });
+        }
+    }
+
+    // The properties `element` transitions in its current state, with how.
+    const transitioned = (element: Element): TransitionTiming[] => {
+        const style = getComputedStyle(element);
+        const properties = list(style.transitionProperty);
+        const durations = list(style.transitionDuration);
+        const timings = list(style.transitionTimingFunction);
+        const delays = list(style.transitionDelay);
+
+        return properties.flatMap((property, index) => {
+            const duration = seconds(nth(durations, index));
+            const delay = seconds(nth(delays, index));
+
+            if (property === 'none' || property.startsWith('--') || duration + delay <= 0) {
+                return [];
+            }
+
+            if (property === 'all') {
+                refused.push(`"transition: all" on ${JSON.stringify(target(element))}`);
+
+                return [];
+            }
+
+            return [{ property, duration, timing: nth(timings, index), delay }];
+        });
+    };
+
+    type Toggle = { key: string; toggle: TransitionEntry['toggle']; on: Element; flip: () => void };
+
+    const toggles: Toggle[] = [];
+    // An attribute's values: those the stylesheet tests for and those the
+    // fragment's elements carry, so an active tab can turn inactive too.
+    const valuesOf = new Map(
+        Object.entries(attributes).map(([name, values]) => [name, new Set(values)]),
+    );
+
+    for (const element of elements) {
+        for (const [name, values] of valuesOf) {
+            const value = element.getAttribute(name);
+
+            if (value !== null) {
+                values.add(value);
+            }
+        }
+    }
+
+    for (const element of elements) {
+        const states = new Set([...element.classList].flatMap((name) => stateClasses[name] ?? []));
+
+        for (const state of states) {
+            toggles.push({
+                key: `.${state}`,
+                toggle: element.classList.contains(state) ? 'remove' : 'add',
+                on: element,
+                flip: () => element.classList.toggle(state),
+            });
+        }
+
+        for (const name of element.getAttributeNames()) {
+            const current = element.getAttribute(name)!;
+
+            for (const value of valuesOf.get(name) ?? []) {
+                if (value !== current) {
+                    toggles.push({
+                        key: `[${name}="${value}"]`,
+                        toggle: 'set',
+                        on: element,
+                        flip: () =>
+                            element.setAttribute(
+                                name,
+                                element.getAttribute(name) === value ? current : value,
+                            ),
+                    });
+                }
+            }
+        }
+    }
+
+    // Values are compared at rest: with every animation and transition off,
+    // so a running entrance or a transition a toggle starts cannot show
+    // its start value. The timings are read with them back on.
+    const still = document.createElement('style');
+
+    still.textContent =
+        '*, *::before, *::after { animation: none !important; transition: none !important; }';
+    document.head.append(still);
+
+    // Computed values from the typed OM: unlike getComputedStyle's resolved
+    // values, a box's size or grid tracks do not change with its layout, so
+    // a toggle that only hides an ancestor changes nothing here.
+    const at = (element: Element, properties: TransitionTiming[]) => {
+        const style = element.computedStyleMap();
+
+        return properties.map(({ property }) => String(style.get(property)));
+    };
+    const transitions: Record<string, TransitionEntry[]> = {};
+
+    for (const { key, toggle, on, flip } of toggles) {
+        const subtree = [on, ...on.querySelectorAll('*')];
+
+        flip();
+        still.disabled = true;
+
+        const timings = subtree.map(transitioned);
+
+        still.disabled = false;
+
+        const after = subtree.map((element, index) => at(element, timings[index]!));
+
+        flip();
+
+        subtree.forEach((element, index) => {
+            const before = at(element, timings[index]!);
+            const properties = timings[index]!.filter(
+                (_, which) => before[which] !== after[index]![which],
+            );
+
+            if (properties.length) {
+                (transitions[key] ??= []).push({
+                    toggle,
+                    on: target(on),
+                    element: target(element),
+                    properties,
+                });
+            }
+        });
+    }
+
+    still.remove();
+
+    return { animations, transitions, refused };
+};
+
+/** The motion of the fragment loaded in `page` under the stylesheet with
+ *  its motion kept, `motionCss`. Throws on a transition it cannot read. */
+export const readMotion = async (
+    page: Page,
+    { motionCss, stateClasses }: { motionCss: string; stateClasses: StateClasses },
+): Promise<Motion> => {
+    const { animations, transitions, refused } = await page.evaluate(readPage, {
+        wrapper: WRAPPER,
+        stateClasses,
+        attributes: attributeValues(motionCss),
+    });
+
+    if (refused.length) {
+        throw new Error(`motion: cannot read ${refused.join('; ')}`);
+    }
+
+    return {
+        keyframes: keyframesOf(motionCss, new Set(animations.map(({ name }) => name))),
+        animations,
+        transitions,
+    };
+};
diff --git a/motion-kit/pageCss.ts b/motion-kit/pageCss.ts
new file mode 100644
index 0000000..ab4fc07
--- /dev/null
+++ b/motion-kit/pageCss.ts
@@ -0,0 +1,207 @@
+import postcss, {
+    type AtRule,
+    type ChildNode,
+    type Container,
+    type Node,
+    type Root,
+    type Rule,
+} from 'postcss';
+
+import type { SheetSource } from './snapshot.ts';
+
+/**
+ * A captured page's stylesheets cut down to the rules its states use, with
+ * their URLs inlined and their root and interaction selectors pointed at
+ * what the fragment holds instead. `filmCss` does the rest.
+ */
+
+// Pseudo-elements never match an element; a rule that styles one is used
+// when its element is.
+const PSEUDO_ELEMENT =
+    /::?(?:before|after|first-line|first-letter)(?![\w-])|::[\w-]+(?:\([^()]*\))?/g;
+
+// The states a static page cannot be in, as `snapshotPage` marks them.
+const INTERACTION = /:(hover|active|focus-visible|focus-within|focus)(?![\w-])/g;
+
+const HAS_INTERACTION = new RegExp(INTERACTION.source);
+
+const NOT = /:not\(([^()]*)\)/g;
+
+/**
+ * The selector the browser tests to decide whether a rule is used: the
+ * selector without pseudo-elements, with interaction states counted as
+ * met, since any state of an element a film shows may be animated to.
+ */
+export const usageSelector = (selector: string): string => {
+    const met = selector
+        .replace(NOT, (whole, inner: string) => (HAS_INTERACTION.test(inner) ? ':where(*)' : whole))
+        .replace(INTERACTION, ':where(*)')
+        .replace(PSEUDO_ELEMENT, '')
+        .trim();
+
+    // `::selection` alone styles every element.
+    return met === '' || /[>+~]$/.test(met) ? `${met}*` : met;
+};
+
+/**
+ * The selector as it applies to the fragment: `html` and `:root` become
+ * `[data-mk-html]`, `body` becomes `[data-mk-body]`, and each interaction
+ * state the mark `snapshotPage` sets.
+ */
+export const fragmentSelector = (selector: string): string =>
+    selector
+        .replace(/(?<![\w.#:[-]):root(?![\w-])/g, '[data-mk-html]')
+        .replace(/(?<![\w.#:[="'-])html(?![\w-])/g, '[data-mk-html]')
+        .replace(/(?<![\w.#:[="'-])body(?![\w-])/g, '[data-mk-body]')
+        .replace(INTERACTION, (_whole, state: string) => `[data-mk-${state}]`);
+
+const insideKeyframes = (node: ChildNode): boolean => {
+    for (let parent: Node | undefined = node.parent; parent; parent = parent.parent) {
+        if (parent.type === 'atrule' && /keyframes$/i.test((parent as AtRule).name)) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+const styleRules = (root: Root): Rule[] => {
+    const rules: Rule[] = [];
+
+    root.walkRules((rule) => {
+        if (!insideKeyframes(rule)) {
+            rules.push(rule);
+        }
+    });
+
+    return rules;
+};
+
+export type ParsedSheet = { source: SheetSource; root: Root };
+
+/** The sheet parsed, inside `@media` when its owner names a media list. */
+export const parseSheet = (source: SheetSource): ParsedSheet => {
+    const root = postcss.parse(source.text, { from: undefined });
+
+    if (source.media && source.media !== 'all') {
+        const media = postcss.atRule({ name: 'media', params: source.media });
+
+        media.append(root.nodes);
+        root.append(media);
+    }
+
+    return { source, root };
+};
+
+/** Every usage selector the sheets' style rules test. */
+export const usageSelectors = (sheets: ParsedSheet[]): string[] => [
+    ...new Set(
+        sheets.flatMap(({ root }) =>
+            styleRules(root).flatMap((rule) => rule.selectors.map(usageSelector)),
+        ),
+    ),
+];
+
+const removeEmpty = (container: Container) => {
+    for (const node of [...(container.nodes ?? [])]) {
+        if (node.type === 'atrule' || node.type === 'rule') {
+            if (node.nodes) {
+                removeEmpty(node);
+
+                // A block at-rule with nothing left in it does nothing.
+                if (!node.nodes.length) {
+                    node.remove();
+                }
+            }
+        }
+    }
+};
+
+/**
+ * The sheets' rules that `used` says a state uses, as one stylesheet with
+ * fragment selectors. `@font-face` and `@import` go (the film names its own
+ * faces and fetches nothing), and an `@import` is reported in `dropped`.
+ * Every other `url()` is passed to `inline`, which returns a `data:` URL or
+ * null to drop the declaration (also reported).
+ */
+export const pageCss = async ({
+    sheets,
+    used,
+    inline,
+    dropped,
+}: {
+    sheets: ParsedSheet[];
+    used: Set<string>;
+    inline: (url: string) => Promise<string | null>;
+    dropped: string[];
+}): Promise<string> => {
+    const texts: string[] = [];
+
+    for (const { source, root: parsed } of sheets) {
+        const root = parsed.clone();
+
+        root.walkAtRules((atRule) => {
+            const name = atRule.name.toLowerCase();
+
+            if (name === 'font-face') {
+                atRule.remove();
+            } else if (name === 'import') {
+                dropped.push(`@import ${atRule.params} in ${source.base}`);
+                atRule.remove();
+            }
+        });
+
+        for (const rule of styleRules(root)) {
+            const kept = rule.selectors.filter((selector) => used.has(usageSelector(selector)));
+
+            if (kept.length) {
+                rule.selectors = kept.map(fragmentSelector);
+            } else {
+                rule.remove();
+            }
+        }
+
+        removeEmpty(root);
+
+        const declarations: { value: string; set: (value: string | null) => void }[] = [];
+
+        root.walkDecls((decl) => {
+            if (/url\(/i.test(decl.value)) {
+                declarations.push({
+                    value: decl.value,
+                    set: (value) => (value === null ? decl.remove() : (decl.value = value)),
+                });
+            }
+        });
+
+        for (const { value, set } of declarations) {
+            let out: string | null = value;
+
+            for (const match of value.matchAll(/url\(\s*(['"]?)([^'")]*)\1\s*\)/g)) {
+                const url = match[2]!;
+
+                if (url.startsWith('data:') || url.startsWith('#')) {
+                    continue;
+                }
+
+                const href = new URL(url, source.base).href;
+                const data = await inline(href);
+
+                if (!data) {
+                    dropped.push(`url(${href})`);
+                    out = null;
+                    break;
+                }
+
+                out = out.replace(match[0], `url("${data}")`);
+            }
+
+            set(out);
+        }
+
+        removeEmpty(root);
+        texts.push(root.toResult().css);
+    }
+
+    return texts.join('\n');
+};
diff --git a/motion-kit/pages/ids-source.json b/motion-kit/pages/ids-source.json
new file mode 100644
index 0000000..6ae5959
--- /dev/null
+++ b/motion-kit/pages/ids-source.json
@@ -0,0 +1,20 @@
+{
+    "name": "ids-source",
+    "path": "/data?q=External+debt+of+Kenya",
+    "viewport": { "width": 1280, "height": 800 },
+    "hooks": [{ "v": "title", "selector": "main h1" }],
+    "steps": [
+        { "type": "wait", "selector": "text=Rows in your data" },
+        { "type": "click", "selector": "button:has-text(\"About\")" },
+        { "type": "wait", "ms": 1000 },
+        { "type": "capture", "state": "about" },
+        {
+            "type": "click",
+            "selector": "a[href$=\"/WorldBankInternationalDebtStatistics\"]:has-text(\"(IDS)\")"
+        },
+        { "type": "wait", "selector": "text=Transformation Log", "ms": 1000 },
+        { "type": "capture", "state": "source" },
+        { "type": "scroll", "y": 700 },
+        { "type": "capture", "state": "scrolled" }
+    ]
+}
diff --git a/motion-kit/pages/kenya-debt-search.json b/motion-kit/pages/kenya-debt-search.json
new file mode 100644
index 0000000..7e20e01
--- /dev/null
+++ b/motion-kit/pages/kenya-debt-search.json
@@ -0,0 +1,23 @@
+{
+    "name": "kenya-debt-search",
+    "path": "/data",
+    "viewport": { "width": 1280, "height": 800 },
+    "hooks": [
+        { "v": "prompt", "selector": "textarea[class*=\"DataPrompt\"]" },
+        { "v": "answer", "selector": "h1[class*=\"sentence\"]" }
+    ],
+    "steps": [
+        { "type": "capture", "state": "empty" },
+        { "type": "click", "selector": "textarea[class*=\"DataPrompt\"]" },
+        {
+            "type": "type",
+            "selector": "textarea[class*=\"DataPrompt\"]",
+            "text": "External debt of Kenya"
+        },
+        { "type": "wait", "selector": "text=Looks like a match" },
+        { "type": "capture", "state": "typed" },
+        { "type": "press", "key": "Enter" },
+        { "type": "wait", "selector": "text=Rows in your data", "ms": 3000 },
+        { "type": "capture", "state": "results" }
+    ]
+}
diff --git a/motion-kit/preview.ts b/motion-kit/preview.ts
new file mode 100644
index 0000000..f441841
--- /dev/null
+++ b/motion-kit/preview.ts
@@ -0,0 +1,153 @@
+/**
+ * `preview.html`, written beside a film's modules: one page that mounts the
+ * film in a stand-in for Motion's stage and plays it from its cue sheet, so a
+ * film can be checked in a browser before its modules go to Motion. It holds
+ * every module inline and opens from disk.
+ *
+ * The stand-in implements the part of Motion's `kit` that the runtime and
+ * the film's scenes call: `stage`, `module`, `json`, `css`, `h`, `el`,
+ * `seg`, `lerp`, the `eo`, `ei`, `eio` and `eob` eases and `typist`. A
+ * scene's own timing is absent: the page plays the cue sheet from 0 to the
+ * runtime's `end`, when its last cue or camera hold ends. `?t=4.2` opens it paused at 4.2 s, and
+ * `?state=typed` opens a captured page's state.
+ */
+
+import type { Module } from './build.ts';
+
+// Escapes `<` so no module text can close the inline script.
+const inline = (value: unknown) => JSON.stringify(value).replace(/</g, '\\u003c');
+
+export const previewHtml = (title: string, modules: Module[]): string => {
+    const texts = Object.fromEntries(modules.map((file) => [file.name, file.text]));
+
+    return `<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>${title.replace(/[<&]/g, '')} preview</title>
+<style>
+    body { margin: 0; background: #1d1d1f; color: #eee; font: 13px system-ui, sans-serif; }
+    #bar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
+    #bar input[type=range] { flex: 1; }
+    #time { font-variant-numeric: tabular-nums; width: 9ch; }
+    #error { color: #ff8a80; white-space: pre-wrap; padding: 0 16px; }
+    #stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; background: #fff; }
+</style>
+<div id="bar">
+    <button id="play" type="button">Play</button>
+    <input id="scrub" type="range" min="0" step="0.01" value="0">
+    <span id="time"></span>
+    <select id="state" hidden></select>
+</div>
+<div id="error"></div>
+<div id="stage"></div>
+<script>
+const MODULES = ${inline(texts)};
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+const stage = document.getElementById('stage');
+const kit = {
+    stage,
+    module: (name) => MODULES[name] ?? null,
+    json: (name) => JSON.parse(MODULES[name]),
+    css(text) {
+        const style = document.createElement('style');
+        style.textContent = text;
+        stage.append(style);
+    },
+    h(html) {
+        const template = document.createElement('template');
+        template.innerHTML = html.trim();
+        return template.content.firstElementChild;
+    },
+    el(tag, options = {}) {
+        const el = document.createElement(tag);
+        if (options.text != null) el.textContent = options.text;
+        return el;
+    },
+    seg: (t, a, b) => clamp01((t - a) / (b - a)),
+    lerp: (a, b, p) => a + (b - a) * p,
+    eo: (x) => 1 - (1 - x) ** 3,
+    ei: (x) => x ** 3,
+    eio: (x) => (x < 0.5 ? 4 * x ** 3 : 1 - (-2 * x + 2) ** 3 / 2),
+    eob: (x, s = 1.4) => 1 + (s + 1) * (x - 1) ** 3 + s * (x - 1) ** 2,
+    typist: (text, t0, cps) => ({
+        at: (t) => text.slice(0, Math.max(0, Math.floor((t - t0) * cps))),
+        end: t0 + text.length / cps,
+    }),
+};
+
+const params = new URLSearchParams(location.search);
+const cues = MODULES['cues.json'] ? kit.json('cues.json') : { keys: [], cues: [] };
+let length = 1;
+const scrub = document.getElementById('scrub');
+const time = document.getElementById('time');
+const play = document.getElementById('play');
+const select = document.getElementById('state');
+const html = kit.json('manifest.json').modules.html;
+let film = null;
+let playing = null;
+
+const fit = () => {
+    const scale = Math.min(innerWidth / 1920, (innerHeight - 60) / 1080);
+    stage.style.transform = 'scale(' + scale + ')';
+    stage.style.marginBottom = 1080 * (scale - 1) + 'px';
+};
+
+const show = (t) => {
+    scrub.value = t;
+    time.textContent = (+t).toFixed(2) + ' s';
+    try {
+        film?.render(+t);
+    } catch (error) {
+        document.getElementById('error').textContent = error.stack;
+        throw error;
+    }
+};
+
+const mount = (state) => {
+    stage.replaceChildren();
+    try {
+        new Function('kit', MODULES['shared.js'])(kit);
+        film = DFO.mount(kit, { keys: cues.keys, state }).cue(cues.cues);
+        length = Math.max(1, film.end);
+        scrub.max = length;
+    } catch (error) {
+        document.getElementById('error').textContent = error.stack;
+        throw error;
+    }
+    show(scrub.value);
+};
+
+if (typeof html !== 'string') {
+    select.hidden = false;
+    for (const name of Object.keys(html)) select.add(new Option(name, name));
+    select.value = params.get('state') ?? select.value;
+    select.onchange = () => mount(select.value);
+}
+
+scrub.value = params.get('t') ?? 0;
+scrub.oninput = () => show(scrub.value);
+play.onclick = () => {
+    if (playing) {
+        cancelAnimationFrame(playing);
+        playing = null;
+        play.textContent = 'Play';
+        return;
+    }
+    const from = +scrub.value >= length ? 0 : +scrub.value;
+    const start = performance.now();
+    play.textContent = 'Pause';
+    const frame = (now) => {
+        const t = Math.min(length, from + (now - start) / 1000);
+        show(t);
+        playing = t < length ? requestAnimationFrame(frame) : null;
+        if (!playing) play.textContent = 'Play';
+    };
+    playing = requestAnimationFrame(frame);
+};
+addEventListener('resize', fit);
+fit();
+mount(typeof html === 'string' ? undefined : select.value);
+</script>
+</html>
+`;
+};
diff --git a/motion-kit/recorder.ts b/motion-kit/recorder.ts
new file mode 100644
index 0000000..c163f74
--- /dev/null
+++ b/motion-kit/recorder.ts
@@ -0,0 +1,449 @@
+/**
+ * A 2D canvas context that draws nothing and writes down what it was asked
+ * to draw: every stroked or filled path as SVG path data in canvas px, and
+ * every piece of text with its place, angle, font and alignment. Chart.js
+ * draws into it, so the SVG built from the record is Chart.js's own layout.
+ *
+ * It covers the part of CanvasRenderingContext2D that Chart.js's bar and
+ * line charts use. Clipping is recorded as nothing: the shapes Chart.js clips
+ * already sit inside the plot.
+ */
+
+type Matrix = [a: number, b: number, c: number, d: number, e: number, f: number];
+
+const IDENTITY: Matrix = [1, 0, 0, 1, 0, 0];
+
+type Style = {
+    matrix: Matrix;
+    fillStyle: unknown;
+    strokeStyle: unknown;
+    lineWidth: number;
+    lineCap: CanvasLineCap;
+    lineJoin: CanvasLineJoin;
+    lineDash: number[];
+    globalAlpha: number;
+    font: string;
+    textAlign: CanvasTextAlign;
+    textBaseline: CanvasTextBaseline;
+};
+
+export type Shape = {
+    kind: 'fill' | 'stroke';
+    d: string;
+    // The fill or stroke as Chart.js set it: a colour, or whatever the
+    // dataset's fill callback returned.
+    paint: unknown;
+    lineWidth: number;
+    lineCap: CanvasLineCap;
+    lineJoin: CanvasLineJoin;
+    lineDash: number[];
+    alpha: number;
+    // The drawn length of a stroked path, every subpath summed.
+    length: number;
+    // Which dataset was drawing, or null for the scales.
+    dataset: number | null;
+};
+
+export type Text = {
+    text: string;
+    x: number;
+    y: number;
+    // Radians, clockwise, as the context was rotated.
+    rotation: number;
+    font: string;
+    color: unknown;
+    align: CanvasTextAlign;
+    baseline: CanvasTextBaseline;
+};
+
+/** A pattern made from a recorded tile: what `createPattern` hands back. Its
+ *  string tag is the one Chart.js checks for to leave a fill alone. */
+export class RecordedPattern {
+    readonly width: number;
+    readonly height: number;
+    readonly shapes: Shape[];
+
+    constructor(width: number, height: number, shapes: Shape[]) {
+        this.width = width;
+        this.height = height;
+        this.shapes = shapes;
+    }
+
+    get [Symbol.toStringTag](): string {
+        return 'CanvasPattern';
+    }
+}
+
+const round = (value: number) => Math.round(value * 100) / 100;
+
+const multiply = (m: Matrix, n: Matrix): Matrix => [
+    m[0] * n[0] + m[2] * n[1],
+    m[1] * n[0] + m[3] * n[1],
+    m[0] * n[2] + m[2] * n[3],
+    m[1] * n[2] + m[3] * n[3],
+    m[0] * n[4] + m[2] * n[5] + m[4],
+    m[1] * n[4] + m[3] * n[5] + m[5],
+];
+
+type Point = { x: number; y: number };
+
+export class RecordingContext {
+    canvas: unknown;
+    shapes: Shape[] = [];
+    texts: Text[] = [];
+    // Set by the drawing plugin around each dataset's draw.
+    dataset: number | null = null;
+
+    private state: Style = {
+        matrix: IDENTITY,
+        fillStyle: '#000',
+        strokeStyle: '#000',
+        lineWidth: 1,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        lineDash: [],
+        globalAlpha: 1,
+        font: '10px sans-serif',
+        textAlign: 'start',
+        textBaseline: 'alphabetic',
+    };
+    private stack: Style[] = [];
+    private path: string[] = [];
+    private length = 0;
+    private current: Point | null = null;
+    private start: Point | null = null;
+
+    // Properties Chart.js sets but the record has no use for.
+    lineDashOffset = 0;
+    miterLimit = 10;
+    globalCompositeOperation = 'source-over';
+    imageSmoothingEnabled = true;
+    shadowBlur = 0;
+    shadowColor = 'transparent';
+    shadowOffsetX = 0;
+    shadowOffsetY = 0;
+    direction: CanvasDirection = 'inherit';
+
+    private readonly measure: (font: string, text: string) => number;
+
+    constructor(measure: (font: string, text: string) => number) {
+        this.measure = measure;
+    }
+
+    clear(): void {
+        this.shapes = [];
+        this.texts = [];
+    }
+
+    // --- state --------------------------------------------------------------
+
+    save(): void {
+        this.stack.push({ ...this.state, lineDash: [...this.state.lineDash] });
+    }
+
+    restore(): void {
+        this.state = this.stack.pop() ?? this.state;
+    }
+
+    get fillStyle(): unknown {
+        return this.state.fillStyle;
+    }
+
+    set fillStyle(value: unknown) {
+        this.state.fillStyle = value;
+    }
+
+    get strokeStyle(): unknown {
+        return this.state.strokeStyle;
+    }
+
+    set strokeStyle(value: unknown) {
+        this.state.strokeStyle = value;
+    }
+
+    get lineWidth(): number {
+        return this.state.lineWidth;
+    }
+
+    set lineWidth(value: number) {
+        this.state.lineWidth = value;
+    }
+
+    get lineCap(): CanvasLineCap {
+        return this.state.lineCap;
+    }
+
+    set lineCap(value: CanvasLineCap) {
+        this.state.lineCap = value;
+    }
+
+    get lineJoin(): CanvasLineJoin {
+        return this.state.lineJoin;
+    }
+
+    set lineJoin(value: CanvasLineJoin) {
+        this.state.lineJoin = value;
+    }
+
+    get globalAlpha(): number {
+        return this.state.globalAlpha;
+    }
+
+    set globalAlpha(value: number) {
+        this.state.globalAlpha = value;
+    }
+
+    get font(): string {
+        return this.state.font;
+    }
+
+    set font(value: string) {
+        this.state.font = value;
+    }
+
+    get textAlign(): CanvasTextAlign {
+        return this.state.textAlign;
+    }
+
+    set textAlign(value: CanvasTextAlign) {
+        this.state.textAlign = value;
+    }
+
+    get textBaseline(): CanvasTextBaseline {
+        return this.state.textBaseline;
+    }
+
+    set textBaseline(value: CanvasTextBaseline) {
+        this.state.textBaseline = value;
+    }
+
+    setLineDash(segments: number[]): void {
+        this.state.lineDash = [...segments];
+    }
+
+    getLineDash(): number[] {
+        return [...this.state.lineDash];
+    }
+
+    // --- transform ----------------------------------------------------------
+
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void {
+        this.state.matrix = [a, b, c, d, e, f];
+    }
+
+    resetTransform(): void {
+        this.state.matrix = IDENTITY;
+    }
+
+    translate(x: number, y: number): void {
+        this.state.matrix = multiply(this.state.matrix, [1, 0, 0, 1, x, y]);
+    }
+
+    rotate(angle: number): void {
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+
+        this.state.matrix = multiply(this.state.matrix, [cos, sin, -sin, cos, 0, 0]);
+    }
+
+    scale(x: number, y: number): void {
+        this.state.matrix = multiply(this.state.matrix, [x, 0, 0, y, 0, 0]);
+    }
+
+    private apply(x: number, y: number): Point {
+        const [a, b, c, d, e, f] = this.state.matrix;
+
+        return { x: a * x + c * y + e, y: b * x + d * y + f };
+    }
+
+    // --- paths --------------------------------------------------------------
+
+    beginPath(): void {
+        this.path = [];
+        this.length = 0;
+        this.current = null;
+        this.start = null;
+    }
+
+    moveTo(x: number, y: number): void {
+        const point = this.apply(x, y);
+
+        this.path.push(`M${round(point.x)} ${round(point.y)}`);
+        this.current = point;
+        this.start = point;
+    }
+
+    lineTo(x: number, y: number): void {
+        if (!this.current) {
+            this.moveTo(x, y);
+
+            return;
+        }
+
+        const point = this.apply(x, y);
+
+        this.path.push(`L${round(point.x)} ${round(point.y)}`);
+        this.length += Math.hypot(point.x - this.current.x, point.y - this.current.y);
+        this.current = point;
+    }
+
+    closePath(): void {
+        if (this.current && this.start) {
+            this.path.push('Z');
+            this.length += Math.hypot(this.start.x - this.current.x, this.start.y - this.current.y);
+            this.current = this.start;
+        }
+    }
+
+    rect(x: number, y: number, w: number, h: number): void {
+        this.moveTo(x, y);
+        this.lineTo(x + w, y);
+        this.lineTo(x + w, y + h);
+        this.lineTo(x, y + h);
+        this.closePath();
+    }
+
+    arc(x: number, y: number, r: number, from: number, to: number, ccw = false): void {
+        const [a, b, c, d] = this.state.matrix;
+        const radius = r * Math.sqrt(Math.abs(a * d - b * c));
+        const at = (angle: number) => this.apply(x + r * Math.cos(angle), y + r * Math.sin(angle));
+        let sweep = ccw ? from - to : to - from;
+
+        if (sweep >= 2 * Math.PI) {
+            sweep = 2 * Math.PI;
+        } else {
+            sweep = ((sweep % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
+        }
+
+        const first = at(from);
+
+        if (this.current) {
+            this.lineTo(x + r * Math.cos(from), y + r * Math.sin(from));
+        } else {
+            this.path.push(`M${round(first.x)} ${round(first.y)}`);
+            this.current = first;
+            this.start = first;
+        }
+
+        if (sweep === 0 || radius === 0) {
+            return;
+        }
+
+        // SVG cannot draw a whole circle as one arc, so every arc is drawn in
+        // halves or less.
+        const steps = Math.ceil(sweep / Math.PI);
+        const direction = ccw ? -1 : 1;
+
+        for (let i = 1; i <= steps; i++) {
+            const angle = from + (direction * sweep * i) / steps;
+            const point = at(angle);
+
+            this.path.push(
+                `A${round(radius)} ${round(radius)} 0 0 ${ccw ? 0 : 1} ${round(point.x)} ${round(point.y)}`,
+            );
+            this.current = point;
+        }
+
+        this.length += radius * sweep;
+    }
+
+    // --- painting -----------------------------------------------------------
+
+    private record(kind: Shape['kind']): void {
+        if (!this.path.length) {
+            return;
+        }
+
+        this.shapes.push({
+            kind,
+            d: this.path.join(''),
+            paint: kind === 'fill' ? this.state.fillStyle : this.state.strokeStyle,
+            lineWidth: this.state.lineWidth,
+            lineCap: this.state.lineCap,
+            lineJoin: this.state.lineJoin,
+            lineDash: [...this.state.lineDash],
+            alpha: this.state.globalAlpha,
+            length: round(this.length),
+            dataset: this.dataset,
+        });
+    }
+
+    stroke(): void {
+        this.record('stroke');
+    }
+
+    fill(): void {
+        this.record('fill');
+    }
+
+    clip(): void {}
+
+    fillRect(x: number, y: number, w: number, h: number): void {
+        const saved = { path: this.path, length: this.length, current: this.current };
+
+        this.beginPath();
+        this.rect(x, y, w, h);
+        this.record('fill');
+        Object.assign(this, saved);
+    }
+
+    strokeRect(x: number, y: number, w: number, h: number): void {
+        const saved = { path: this.path, length: this.length, current: this.current };
+
+        this.beginPath();
+        this.rect(x, y, w, h);
+        this.record('stroke');
+        Object.assign(this, saved);
+    }
+
+    clearRect(): void {}
+
+    // --- text ---------------------------------------------------------------
+
+    fillText(text: string, x: number, y: number): void {
+        const [a, b] = this.state.matrix;
+        const point = this.apply(x, y);
+
+        this.texts.push({
+            text,
+            x: round(point.x),
+            y: round(point.y),
+            rotation: Math.atan2(b, a),
+            font: this.state.font,
+            color: this.state.fillStyle,
+            align: this.state.textAlign,
+            baseline: this.state.textBaseline,
+        });
+    }
+
+    strokeText(): void {}
+
+    createPattern(image: RecordingCanvas): RecordedPattern {
+        return new RecordedPattern(image.width, image.height, [...image.context.shapes]);
+    }
+
+    measureText(text: string): TextMetrics {
+        const width = this.measure(this.state.font, text);
+
+        return { width, actualBoundingBoxLeft: 0, actualBoundingBoxRight: width } as TextMetrics;
+    }
+}
+
+/** A canvas element whose 2D context is a recording one. */
+export class RecordingCanvas {
+    width: number;
+    height: number;
+    style: Record<string, string> = {};
+    readonly context: RecordingContext;
+
+    constructor(width: number, height: number, measure: (font: string, text: string) => number) {
+        this.width = width;
+        this.height = height;
+        this.context = new RecordingContext(measure);
+        this.context.canvas = this;
+    }
+
+    getContext(): RecordingContext {
+        return this.context;
+    }
+}
diff --git a/motion-kit/render.tsx b/motion-kit/render.tsx
new file mode 100644
index 0000000..b469ee2
--- /dev/null
+++ b/motion-kit/render.tsx
@@ -0,0 +1,708 @@
+import classNames from 'classnames';
+import type { CSSProperties } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { type ChartLayout, layoutChart, renderPlot, type SeriesPath } from './chart.tsx';
+import { outfitMeasure } from './fontMetrics.ts';
+import { addAttributes, type Element, hasClass, parseMarkup, walk } from './html.ts';
+import { CELL, DEFAULT_VIEWPORT, type DemoSpec, WRAPPER } from './spec.ts';
+
+import Button from '@/components/atoms/Button/Button';
+import buttonStyles from '@/components/atoms/Button/Button.module.scss';
+import GridPattern from '@/components/atoms/GridPattern/GridPattern';
+import segmentedStyles from '@/components/molecules/SegmentedTabs/SegmentedTabs.module.scss';
+import Header from '@/components/organisms/Header/Header';
+import cardStyles from '@/components/organisms/Studio/canvas/cards/Card.module.scss';
+import CardBody from '@/components/organisms/Studio/canvas/cards/CardBody';
+import CardChrome from '@/components/organisms/Studio/canvas/cards/CardChrome';
+import CardHead from '@/components/organisms/Studio/canvas/cards/CardHead';
+import chartStyles from '@/components/organisms/Studio/canvas/cards/ChartCard.module.scss';
+import type { CardExtras } from '@/components/organisms/Studio/canvas/cards/types';
+import { legendShown } from '@/components/organisms/Studio/canvas/chart/chartDatasets';
+import { seriesVars } from '@/components/organisms/Studio/canvas/chart/chartSetup';
+import {
+    effectiveKind,
+    GAP,
+    heightIsDerived,
+    resolveCardView,
+    spawnSpan,
+    widgetTitle,
+} from '@/components/organisms/Studio/canvas/layout';
+import boardStyles from '@/components/organisms/Studio/canvas/Whiteboard.module.scss';
+import type { useChat } from '@/components/organisms/Studio/hooks/useChat';
+import studioStyles from '@/components/organisms/Studio/Studio.module.scss';
+import activityStyles from '@/components/organisms/Studio/workspace/ActivityLog.module.scss';
+import pillStyles from '@/components/organisms/Studio/workspace/ApprovedPlanPill.module.scss';
+import ChatPanel from '@/components/organisms/Studio/workspace/ChatPanel';
+import chatStyles from '@/components/organisms/Studio/workspace/ChatPanel.module.scss';
+import barStyles from '@/components/organisms/Studio/workspace/PlanApproveBar.module.scss';
+import planStyles from '@/components/organisms/Studio/workspace/PlanCard.module.scss';
+import WorkspaceToolbar from '@/components/organisms/Studio/workspace/WorkspaceToolbar';
+import type { ChartWidget, Widget } from '@/lib/chat/widgets';
+import { cardRefOf } from '@/lib/studio/cardDownload';
+import { legendLabels } from '@/lib/studio/seriesLabels';
+import { DEFAULT_THEME, deriveTheme, type ThemeDerived, themeVars } from '@/lib/studio/theme';
+import { isPrompt } from '@/lib/studio/transcript';
+
+/**
+ * The Studio workspace as static markup: the skeleton of Studio.tsx and the
+ * slots of Whiteboard.tsx, rebuilt here because both fill themselves from
+ * effects, around the app's own components (Header, WorkspaceToolbar,
+ * ChatPanel, CardBody, CardHead, CardChrome). A chart card keeps
+ * ChartCard's DOM with the canvas swapped for the plot Chart.js draws in
+ * Node (chart.tsx).
+ */
+
+// A card's padding and border on each side (Card.module.scss `.card`):
+// rem(16) and 1 px, which the plot's width leaves out.
+const CARD_INSET = 2 * 16 + 2;
+
+const noop = () => {};
+
+export type CardOut = {
+    id: string;
+    kind: Widget['kind'];
+    hook: string;
+    col: number;
+    row: number;
+    w: number;
+    h: number;
+    // px on the whiteboard sheet, from its top-left corner.
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+
+export type ChartOut = {
+    cardId: string;
+    line: boolean;
+    plot: { width: number; height: number };
+    valueTicks: ChartLayout['valueTicks'];
+    valueTitle: string | null;
+    series: (SeriesPath & { label: string })[];
+};
+
+export type Rendered = {
+    html: string;
+    hooks: string[];
+    cards: CardOut[];
+    charts: ChartOut[];
+    // Hashed class names an animation toggles: the chat panel's active view.
+    classes: Record<string, string>;
+    // Rules for the states the app sets from measurements in effects.
+    css: string;
+    states: PlanStates;
+};
+
+/** The plan's two states, both in the one fragment: the hooks that belong
+ *  to each, for a film to show one and hide the other, and the attributes
+ *  that change once the plan is approved (the chat input's placeholder and
+ *  label), by hook. A state the spec does not hold is absent. */
+export type PlanStates = {
+    pending?: { hooks: string[] };
+    approved?: { hooks: string[]; attrs: Record<string, Record<string, string>> };
+};
+
+// --- cards ----------------------------------------------------------------------
+
+const extrasFor = (widget: Widget): CardExtras => {
+    const { view, choices } = resolveCardView(widget, undefined);
+    const isText = widget.kind === 'text';
+
+    return {
+        pinned: false,
+        title: widgetTitle(widget),
+        view,
+        viewChoices: choices,
+        onPin: noop,
+        onRemove: noop,
+        onAsk: noop,
+        onInfo: isText ? null : noop,
+        onDownload: cardRefOf(widget) ? noop : null,
+        onDownloadImage: noop,
+        onEdit: noop,
+        editLabel: isText ? 'Edit Card' : 'Edit Title',
+        onNote: isText ? null : noop,
+        onRemoveNote: isText ? null : noop,
+        onView: noop,
+        onShare: noop,
+        readOnly: false,
+    };
+};
+
+// ChartCard's DOM (head, legend, plot, chrome) around the drawn plot.
+const StaticChartCard = ({
+    widget,
+    theme,
+    extras,
+    plot,
+    plotHeight,
+}: {
+    widget: ChartWidget;
+    theme: ThemeDerived;
+    extras: CardExtras;
+    plot: React.ReactNode;
+    plotHeight: number;
+}) => {
+    const names = legendLabels(widget.series.map((s) => s.label));
+
+    // The app measures the card's chrome and gives the card the rows that
+    // chrome and the plot need. Here the plot keeps its height and the card
+    // grows past its slot when the chrome needs more than the slot gives.
+    return (
+        <article className={cardStyles.card} style={{ height: 'auto', minHeight: '100%' }}>
+            <CardHead {...extras} />
+            {legendShown(widget) && (
+                <ul className={chartStyles.legend}>
+                    {widget.series.map((s, index) => (
+                        <li key={s.label}>
+                            <button
+                                type="button"
+                                title={s.label}
+                                aria-pressed
+                                aria-label={`${s.label} — hide this series`}
+                                className={chartStyles.legendItem}
+                            >
+                                <span
+                                    className={chartStyles.legendDot}
+                                    style={seriesVars(theme.series, index)}
+                                />
+                                <span className={chartStyles.legendName}>{names[index]}</span>
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+            <div className={chartStyles.plot} style={{ flex: '1 0 auto', minHeight: plotHeight }}>
+                {plot}
+            </div>
+            <CardChrome source={widget.source} info={widget.info} onInfo={extras.onInfo} />
+        </article>
+    );
+};
+
+type Placed = {
+    widget: Widget;
+    col: number;
+    row: number;
+    w: number;
+    h: number;
+    body: React.ReactNode;
+};
+
+// A Whiteboard slot (Whiteboard.tsx): position and size in cells, the card
+// box with its grab bar and resize grip, the card inside.
+const Slot = ({ placed }: { placed: Placed }) => {
+    const { widget, col, row, w, h, body } = placed;
+    const { view } = resolveCardView(widget, undefined);
+    const isText = widget.kind === 'text';
+
+    return (
+        <div
+            className={boardStyles.slot}
+            data-card-id={widget.id}
+            data-v={`card-${widget.id}`}
+            style={
+                {
+                    left: col * CELL,
+                    top: row * CELL,
+                    zIndex: 1,
+                    translate: '0px 0px',
+                    width: w * CELL,
+                    height: h * CELL,
+                    '--tilt': '0deg',
+                } as CSSProperties
+            }
+        >
+            <div className={boardStyles.cardBox} data-draggable="">
+                <span className={boardStyles.handle} data-nowave="" />
+                {!isText && (
+                    <span
+                        className={classNames(
+                            boardStyles.resizeGrip,
+                            heightIsDerived(widget, view) && boardStyles.resizeGripWidth,
+                        )}
+                        data-nowave=""
+                    >
+                        <svg viewBox="0 0 10 10" aria-hidden="true">
+                            <path d="M2.5 9 9 2.5M6 9 9 6" />
+                        </svg>
+                    </span>
+                )}
+                {body}
+            </div>
+        </div>
+    );
+};
+
+// --- the workspace --------------------------------------------------------------
+
+const cardTabsOf = (widgets: Widget[]) => {
+    // Studio.tsx's tabs: a kind gets a tab once it is on the sheet.
+    const counts = widgets.reduce<Record<string, number>>((acc, widget) => {
+        const kind = effectiveKind(widget, undefined);
+
+        acc[kind] = (acc[kind] ?? 0) + 1;
+
+        return acc;
+    }, {});
+    const tabFor = (id: string, label: string, kind: string) =>
+        counts[kind] ? [{ id, label, count: counts[kind] }] : [];
+
+    return [
+        { id: 'all', label: 'All', count: widgets.length },
+        ...tabFor('stats', 'Stats', 'key_number'),
+        ...tabFor('charts', 'Charts', 'chart'),
+        ...tabFor('tables', 'Tables', 'table'),
+        ...tabFor('notes', 'Notes', 'text'),
+    ];
+};
+
+const chatOf = (spec: DemoSpec): ReturnType<typeof useChat> => {
+    // Every card belongs to the turn of the last answer.
+    const lastBot = spec.messages.findLastIndex((message) => message.role === 'bot');
+    const turn = spec.messages.slice(0, Math.max(lastBot, 0)).filter(isPrompt).length;
+
+    return {
+        messages: spec.messages,
+        widgets: spec.cards.map(({ widget }) => ({ ...widget, turn })),
+        queued: [],
+        activity: spec.activity ?? [],
+        status: null,
+        statusDetail: null,
+        statusSince: null,
+        stalled: false,
+        thinking: false,
+        clarify: null,
+        plan: spec.plan ?? null,
+        agentRemovals: 0,
+        takeAgentRemoved: () => [],
+        syncCanvas: noop,
+        reportHidden: noop,
+        canvasVersion: 0,
+        send: noop,
+        unqueue: noop,
+        answerClarify: noop,
+        skipClarify: noop,
+        respondPlan: noop,
+        switchChoice: noop,
+        applyChoice: noop,
+        stop: noop,
+        reset: noop,
+        hydrate: noop,
+        snapshot: () => ({ sessionId: null, componentRefs: [], turnCount: turn, canvas: null }),
+    };
+};
+
+const Workspace = ({ spec, placed }: { spec: DemoSpec; placed: Placed[] }) => {
+    const theme = deriveTheme(DEFAULT_THEME);
+    const widgets = spec.cards.map((card) => card.widget);
+    const rightCol = Math.max(0, ...placed.map((card) => card.col + card.w));
+    const bottomRow = Math.max(0, ...placed.map((card) => card.row + card.h));
+
+    return (
+        <section className={studioStyles.section}>
+            <div
+                className={classNames(studioStyles.canvas, studioStyles.canvasDocked)}
+                aria-hidden="true"
+            >
+                <div className={studioStyles.canvasInner}>
+                    <GridPattern variant="light" cell={CELL} />
+                </div>
+            </div>
+
+            <div
+                className={studioStyles.canvasContent}
+                style={themeVars(theme) as CSSProperties}
+                data-v="canvas"
+            >
+                <div
+                    className={boardStyles.board}
+                    style={{ width: (rightCol + GAP) * CELL, height: (bottomRow + GAP) * CELL }}
+                >
+                    <div className={boardStyles.gridLayer} style={{ top: -CELL, left: -CELL }}>
+                        <GridPattern variant="light" cell={CELL} />
+                    </div>
+                    {placed.map((card) => (
+                        <Slot key={card.widget.id} placed={card} />
+                    ))}
+                </div>
+            </div>
+
+            <Header variant="studio" onBack={noop} account={false}>
+                <Button
+                    variant="bordered"
+                    className={studioStyles.barExtra}
+                    style={{ '--i': 0 } as CSSProperties}
+                    onClick={noop}
+                >
+                    New Chat
+                </Button>
+                <Button
+                    variant="bordered"
+                    className={studioStyles.barExtra}
+                    style={{ '--i': 1 } as CSSProperties}
+                    onClick={noop}
+                >
+                    Customize
+                </Button>
+                <Button
+                    variant="dark"
+                    wide
+                    icon="arrow-up-right"
+                    className={studioStyles.barExtra}
+                    style={{ '--i': 2 } as CSSProperties}
+                    onClick={noop}
+                >
+                    Share
+                </Button>
+            </Header>
+
+            <div className={studioStyles.workspace}>
+                <WorkspaceToolbar
+                    chatTab="chat"
+                    onChatTab={noop}
+                    chatCollapsed={false}
+                    onChatCollapsed={noop}
+                    cardTabs={widgets.length ? cardTabsOf(widgets) : null}
+                    cardsTab="all"
+                    onCardsTab={noop}
+                    solo={false}
+                    readOnly={false}
+                    title={spec.title}
+                    onEditTitle={noop}
+                    phone={false}
+                    onNewChat={noop}
+                    onCustomize={noop}
+                    onShare={noop}
+                />
+                <ChatPanel
+                    editTarget={null}
+                    onClearEditTarget={noop}
+                    chat={chatOf(spec)}
+                    tab="chat"
+                    collapsed={false}
+                    gone={false}
+                    readOnly={false}
+                    shareMarks={[]}
+                    titles={{}}
+                    views={{}}
+                    onCanvas={() => true}
+                    onGo={noop}
+                    onAdd={noop}
+                    onRemove={noop}
+                />
+            </div>
+        </section>
+    );
+};
+
+// --- hooks ----------------------------------------------------------------------
+
+const only = (elements: Element[], what: string): Element => {
+    if (elements.length !== 1) {
+        throw new Error(`render: expected one ${what}, found ${elements.length}`);
+    }
+
+    return elements[0]!;
+};
+
+/** The hooks of each plan state: the card awaiting approval with its
+ *  approve bar (pending), and the pill under the answer (approved). A
+ *  state the spec does not hold has none. */
+const planHooks = (spec: DemoSpec): { pending: string[]; approved: string[] } => ({
+    pending: spec.plan ? ['plan', ...(spec.plan.live ? ['plan-bar', 'plan-approve'] : [])] : [],
+    approved: spec.messages.some((message) => message.role === 'bot' && message.plan)
+        ? ['plan-pill']
+        : [],
+});
+
+// The chat input's attributes in `markup`.
+const promptAttrs = (markup: string): Record<string, string> => {
+    const foot = only(
+        walk(parseMarkup(markup)).filter((el) => hasClass(el, chatStyles.chatFoot!)),
+        'chat foot',
+    );
+
+    return only(
+        walk(foot.children).filter((el) => el.name === 'textarea'),
+        'prompt field',
+    ).attrs;
+};
+
+const planStates = (spec: DemoSpec, placed: Placed[], markup: string): PlanStates => {
+    const { pending, approved } = planHooks(spec);
+
+    if (!approved.length) {
+        return pending.length ? { pending: { hooks: pending } } : {};
+    }
+
+    // What the chat foot says once no plan waits: rendered without the plan.
+    const before = promptAttrs(markup);
+    const after = promptAttrs(
+        renderToStaticMarkup(<Workspace spec={{ ...spec, plan: undefined }} placed={placed} />),
+    );
+    const changed = Object.entries(after).filter(([name, value]) => before[name] !== value);
+
+    return {
+        ...(pending.length ? { pending: { hooks: pending } } : {}),
+        approved: {
+            hooks: approved,
+            attrs: changed.length ? { prompt: Object.fromEntries(changed) } : {},
+        },
+    };
+};
+
+// The hooks inside the app's own components, found by their classes.
+const chatHooks = (html: string, spec: DemoSpec): string => {
+    const all = walk(parseMarkup(html));
+    const within = (root: Element) => walk(root.children);
+    const additions: { element: Element; name: string; value: string }[] = [];
+    const hook = (element: Element, value: string) =>
+        additions.push({ element, name: 'data-v', value });
+
+    const panel = only(
+        all.filter((el) => hasClass(el, chatStyles.chatPanel!)),
+        'chat panel',
+    );
+    const views = all.filter((el) => hasClass(el, chatStyles.view!));
+    const [chatView, activityView] = views;
+
+    if (views.length !== 2 || !chatView || !activityView) {
+        throw new Error(`render: expected the chat and activity views, found ${views.length}`);
+    }
+
+    hook(panel, 'chat');
+    hook(chatView, 'view-chat');
+    hook(activityView, 'view-activity');
+
+    const transcript = only(
+        within(chatView).filter((el) => hasClass(el, chatStyles.chatScroll!)),
+        'transcript',
+    );
+
+    if (transcript.children.length !== spec.messages.length) {
+        throw new Error(
+            `render: ${spec.messages.length} messages drew ${transcript.children.length} elements`,
+        );
+    }
+
+    transcript.children.forEach((element, index) => hook(element, `msg-${index}`));
+
+    const foot = only(
+        within(chatView).filter((el) => hasClass(el, chatStyles.chatFoot!)),
+        'chat foot',
+    );
+
+    hook(
+        only(
+            within(foot).filter((el) => el.name === 'textarea'),
+            'prompt field',
+        ),
+        'prompt',
+    );
+    hook(
+        only(
+            within(foot).filter((el) => el.name === 'button' && el.attrs.type === 'submit'),
+            'send button',
+        ),
+        'send',
+    );
+
+    // The plan awaiting approval (PlanCard in the chat foot) and the approved
+    // plan under its answer (ApprovedPlanPill): planHooks names them.
+    const names = planHooks(spec);
+
+    if (names.pending.length) {
+        const card = only(
+            within(foot).filter((el) => el.name === 'section' && hasClass(el, planStyles.plan!)),
+            'plan card',
+        );
+
+        hook(card, 'plan');
+
+        if (spec.plan?.live) {
+            const bar = only(
+                within(foot).filter((el) => hasClass(el, barStyles.bar!)),
+                'approve bar',
+            );
+
+            hook(bar, 'plan-bar');
+            hook(
+                only(
+                    within(bar).filter(
+                        (el) => el.name === 'button' && hasClass(el, buttonStyles.dark!),
+                    ),
+                    'Approve button',
+                ),
+                'plan-approve',
+            );
+        }
+    }
+
+    if (names.approved.length) {
+        hook(
+            only(
+                within(transcript).filter((el) => hasClass(el, pillStyles.pill!)),
+                'approved plan pill',
+            ),
+            'plan-pill',
+        );
+    }
+
+    within(activityView)
+        .filter((el) => el.name === 'section' && hasClass(el, activityStyles.turn!))
+        .forEach((turn, index) => {
+            hook(turn, `activity-${index}`);
+            within(turn)
+                .filter((el) => el.name === 'li' && hasClass(el, activityStyles.tool!))
+                .forEach((line, step) => hook(line, `activity-${index}-${step}`));
+        });
+
+    // The app's entrance reveals start hidden until an observer marks them;
+    // the film shows them revealed.
+    for (const element of all) {
+        if ('data-reveal' in element.attrs || 'data-reveal-group' in element.attrs) {
+            additions.push({ element, name: 'data-revealed', value: '' });
+        }
+    }
+
+    return addAttributes(html, additions);
+};
+
+const hooksIn = (html: string): string[] =>
+    walk(parseMarkup(html)).flatMap((element) => element.attrs['data-v'] ?? []);
+
+// SegmentedTabs measures the active tab in an effect and slides its
+// indicator (SegmentedTabs.module.scss `.indicator`: the pill's full height,
+// charcoal, the tab's own radius) under it. The film paints the active tab.
+const measuredStates = `.${segmentedStyles.choice}[data-active="true"] { background-color: var(--color-charcoal); }\n`;
+
+/** A chart laid out in the default theme at `width` px, as a card shows it. */
+export const layoutDefaultChart = (
+    widget: ChartWidget,
+    { line, width, fontsDir }: { line: boolean; width: number; fontsDir: string },
+): ChartLayout =>
+    layoutChart({
+        widget,
+        line,
+        theme: deriveTheme(DEFAULT_THEME),
+        width,
+        measure: outfitMeasure(fontsDir),
+    });
+
+// --- entry ----------------------------------------------------------------------
+
+export const renderStudio = (spec: DemoSpec, { fontsDir }: { fontsDir: string }): Rendered => {
+    const theme = deriveTheme(DEFAULT_THEME);
+    const measure = outfitMeasure(fontsDir);
+    const charts: ChartOut[] = [];
+
+    const placed: Placed[] = spec.cards.map(({ widget, slot }) => {
+        const resolved = resolveCardView(widget, undefined);
+        const span = spawnSpan(widget, resolved);
+        const w = slot.w ?? span.w;
+        const h = slot.h ?? span.h;
+        const extras = extrasFor(widget);
+        const { view, chartSource } = resolved;
+        let body: React.ReactNode;
+
+        if ((view === 'chart-bar' || view === 'chart-line') && chartSource) {
+            const line = view === 'chart-line';
+            const layout = layoutChart({
+                widget: chartSource,
+                line,
+                theme,
+                width: w * CELL - CARD_INSET,
+                measure,
+            });
+            const plot = renderPlot(layout, widget.id, line);
+
+            charts.push({
+                cardId: widget.id,
+                line,
+                plot: { width: layout.width, height: layout.height },
+                valueTicks: layout.valueTicks,
+                valueTitle: layout.valueTitle,
+                series: plot.series.map((path) => ({
+                    ...path,
+                    label: chartSource.series[path.index]?.label ?? '',
+                })),
+            });
+            body = (
+                <StaticChartCard
+                    widget={chartSource}
+                    theme={theme}
+                    extras={extras}
+                    plot={plot.node}
+                    plotHeight={layout.height}
+                />
+            );
+        } else {
+            body = (
+                <CardBody
+                    widget={widget}
+                    view={view}
+                    chartSource={chartSource}
+                    scale={1}
+                    theme={theme}
+                    widthCells={w}
+                    heightCells={h}
+                    onFit={noop}
+                    extras={extras}
+                />
+            );
+        }
+
+        return { widget, col: slot.col, row: slot.row, w, h, body };
+    });
+
+    const viewport = spec.viewport ?? DEFAULT_VIEWPORT;
+    const markup = renderToStaticMarkup(<Workspace spec={spec} placed={placed} />);
+    const html = chatHooks(markup, spec);
+    const states = planStates(spec, placed, markup);
+    const hooks = hooksIn(html);
+    const expected = [
+        'chat',
+        'canvas',
+        'prompt',
+        'send',
+        ...spec.messages.map((_, index) => `msg-${index}`),
+        ...(states.pending?.hooks ?? []),
+        ...(states.approved?.hooks ?? []),
+        ...(spec.activity ?? []).map((_, index) => `activity-${index}`),
+        ...spec.cards.map(({ widget }) => `card-${widget.id}`),
+        ...charts.flatMap((chart) => chart.series.map((series) => series.hook)),
+    ];
+
+    for (const name of expected) {
+        const count = hooks.filter((other) => other === name).length;
+
+        if (count !== 1) {
+            throw new Error(`render: hook "${name}" appears ${count} times`);
+        }
+    }
+
+    return {
+        html: `<div class="${WRAPPER}" data-viewport="${viewport.width}x${viewport.height}">${html}</div>`,
+        hooks,
+        cards: placed.map(({ widget, col, row, w, h }) => ({
+            id: widget.id,
+            kind: widget.kind,
+            hook: `card-${widget.id}`,
+            col,
+            row,
+            w,
+            h,
+            x: col * CELL,
+            y: row * CELL,
+            width: w * CELL,
+            height: h * CELL,
+        })),
+        charts,
+        classes: { viewActive: chatStyles.viewActive! },
+        css: measuredStates,
+        states,
+    };
+};
diff --git a/motion-kit/runtime/dfo-motion.js b/motion-kit/runtime/dfo-motion.js
new file mode 100644
index 0000000..b71a1b6
--- /dev/null
+++ b/motion-kit/runtime/dfo-motion.js
@@ -0,0 +1,584 @@
+// The film's shared.js: places a generated Studio or a captured page on a
+// Motion stage and animates it from a cue sheet. Runs once before any scene;
+// each scene calls DFO.mount(kit, …) with its own kit. Plain ES, no imports:
+// Motion runs it as-is in its sandbox.
+//
+// What the app does in JavaScript is mirrored here from its components:
+// PromptForm grows its field up to MAX_LINES, and ChatPanel pins the
+// transcript to its latest line. What the app does in CSS plays from the
+// manifest's own keyframes, timings and easing (cue kind `animate`).
+window.DFO = (() => {
+    const STAGE = { width: 1920, height: 1080 };
+
+    // PromptForm.tsx MAX_LINES.
+    const PROMPT_MAX_LINES = 5;
+
+    const manifestOf = (kit) => JSON.parse(kit.module('manifest.json'));
+
+    const cssOf = (kit, manifest) =>
+        manifest.modules.css.map((name) => kit.module(name)).join('\n');
+
+    // CSS easing functions, as the browser evaluates them.
+    const bezier = (x1, y1, x2, y2) => {
+        const at = (a, b, s) => 3 * a * s * (1 - s) ** 2 + 3 * b * s * s * (1 - s) + s ** 3;
+        return (x) => {
+            if (x <= 0 || x >= 1) return x <= 0 ? 0 : 1;
+            let lo = 0;
+            let hi = 1;
+            for (let i = 0; i < 40; i++) {
+                const mid = (lo + hi) / 2;
+                if (at(x1, x2, mid) < x) lo = mid;
+                else hi = mid;
+            }
+            return at(y1, y2, (lo + hi) / 2);
+        };
+    };
+    const NAMED = {
+        linear: (x) => x,
+        ease: bezier(0.25, 0.1, 0.25, 1),
+        'ease-in': bezier(0.42, 0, 1, 1),
+        'ease-out': bezier(0, 0, 0.58, 1),
+        'ease-in-out': bezier(0.42, 0, 0.58, 1),
+    };
+    const easing = (spec) => {
+        if (NAMED[spec]) return NAMED[spec];
+        const cubic = /^cubic-bezier\(([^)]+)\)$/.exec(spec);
+        if (cubic) return bezier(...cubic[1].split(',').map(Number));
+        const steps = /^steps\((\d+)(?:,\s*([\w-]+))?\)$/.exec(spec);
+        if (steps) {
+            const n = Number(steps[1]);
+            const start = steps[2] === 'jump-start' || steps[2] === 'start';
+            return (x) => Math.min(1, Math.floor(x * n + (start ? 1 : 0)) / n);
+        }
+        throw new Error('DFO: unknown easing ' + spec);
+    };
+
+    // Where a keyframe list leaves a property unset at 0% or 100%, the element
+    // shows its own value: opacity 1, no offset, no scaling.
+    const NUMBER = /-?\d*\.?\d+(?:e-?\d+)?/g;
+    const resting = (prop, sample) => {
+        if (prop === 'opacity') return '1';
+        if (prop === 'translate') return sample.replace(NUMBER, '0');
+        if (prop === 'scale') return sample.replace(NUMBER, '1');
+        if (prop === 'transform') {
+            return sample.replace(
+                /([a-zA-Z3]+)\(([^)]*)\)/g,
+                (_, fn, args) =>
+                    fn + '(' + args.replace(NUMBER, /^scale/.test(fn) ? '1' : '0') + ')',
+            );
+        }
+        return null;
+    };
+    // Interpolates two values of one shape number by number; a value of
+    // another shape switches at the midpoint, as discrete CSS properties do.
+    const mix = (a, b, p) => {
+        const an = a.match(NUMBER) ?? [];
+        const bn = b.match(NUMBER) ?? [];
+        if (an.length !== bn.length || a.replace(NUMBER, '#') !== b.replace(NUMBER, '#')) {
+            return p < 0.5 ? a : b;
+        }
+        let i = 0;
+        return a.replace(NUMBER, () => {
+            const v = Number(an[i]) + (Number(bn[i]) - Number(an[i])) * p;
+            i++;
+            return String(Math.round(v * 1000) / 1000);
+        });
+    };
+
+    // A keyframe list as full 0%..100% steps, each holding every property.
+    const steps = (frames) => {
+        const props = [...new Set(frames.flatMap((f) => Object.keys(f.style)))];
+        const sorted = [...frames].sort((a, b) => a.offset - b.offset);
+        const ends = [];
+        if (sorted[0].offset > 0) ends.push({ offset: 0, style: {} });
+        ends.push(...sorted);
+        if (sorted[sorted.length - 1].offset < 1) ends.push({ offset: 1, style: {} });
+        for (const prop of props) {
+            const sample = sorted.find((f) => f.style[prop] != null).style[prop];
+            for (const f of ends) {
+                if (f.style[prop] == null) f.style = { ...f.style, [prop]: resting(prop, sample) };
+            }
+        }
+        return { props, frames: ends };
+    };
+    const sample = ({ props, frames }, p) => {
+        const out = {};
+        let i = 0;
+        while (i < frames.length - 2 && frames[i + 1].offset <= p) i++;
+        const a = frames[i];
+        const b = frames[i + 1];
+        const local = b.offset === a.offset ? 1 : (p - a.offset) / (b.offset - a.offset);
+        for (const prop of props) {
+            const from = a.style[prop];
+            const to = b.style[prop];
+            out[prop] =
+                from == null || to == null ? (local < 0.5 ? from : to) : mix(from, to, local);
+        }
+        return out;
+    };
+
+    // One CSS animation from the manifest, as a function of seconds since it
+    // was triggered: null where the element shows its own style.
+    const player = (entry, frames) => {
+        const ease = easing(entry.timing);
+        const fill = entry.fill;
+        const runs = entry.iterations === 'infinite' ? Infinity : entry.iterations;
+        const plan = steps(frames);
+        // Iteration `pass` at progress p, in the direction it plays.
+        const at = (pass, p) => {
+            const odd = pass % 2 === 1;
+            const back =
+                entry.direction === 'reverse' ||
+                (entry.direction === 'alternate' && odd) ||
+                (entry.direction === 'alternate-reverse' && !odd);
+            return sample(plan, ease(back ? 1 - p : p));
+        };
+        return (local) => {
+            const t = local - entry.delay;
+            if (t < 0) return fill === 'backwards' || fill === 'both' ? at(0, 0) : null;
+            const total = entry.duration * runs;
+            if (t >= total) {
+                if (fill !== 'forwards' && fill !== 'both') return null;
+                const part = runs % 1;
+                return part ? at(Math.floor(runs), part) : at(runs - 1, 1);
+            }
+            return at(Math.floor(t / entry.duration), (t % entry.duration) / entry.duration);
+        };
+    };
+
+    // Wraps every word inside `el` in a span, once, and returns the spans in
+    // reading order, so a cue can reveal them by count.
+    const wordSpans = (kit, el) => {
+        const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            if (node.nodeValue.trim()) nodes.push(node);
+        }
+
+        const spans = [];
+
+        for (const node of nodes) {
+            const frag = el.ownerDocument.createDocumentFragment();
+
+            for (const part of node.nodeValue.split(/(\s+)/)) {
+                if (!part) continue;
+                if (/^\s+$/.test(part)) {
+                    frag.append(part);
+                    continue;
+                }
+                const span = kit.el('span', { text: part });
+                spans.push(span);
+                frag.append(span);
+            }
+            node.replaceWith(frag);
+        }
+
+        return spans;
+    };
+
+    // Prepares one cue against the mounted fragment; returns `apply(t)`, the
+    // elements whose style it writes (`touches`), whether it sets attributes
+    // or classes instead (`attrs`) and the time it ends. Every
+    // frame starts from those elements' own inline styles (`mount` restores
+    // them), so a cue writes only what it shows at t, and cues apply in list
+    // order: a later cue on the same element wins.
+    const prepare = (kit, studio, cue) => {
+        const { seg, eo, ei, eob, lerp } = kit;
+
+        if (cue.kind === 'animate') {
+            // Plays the app's own animation: every manifest entry on the hook
+            // (or inside it, or with that keyframe name), triggered at `at`.
+            const entries = (studio.manifest.animations ?? []).filter((a) =>
+                cue.name
+                    ? a.name === cue.name
+                    : a.v === cue.v && (cue.sel == null || a.sel === cue.sel),
+            );
+            if (!entries.length)
+                throw new Error('DFO: no app animation for ' + (cue.name ?? cue.v));
+            const runs = entries.map((entry) => {
+                const el = entry.v
+                    ? studio.q(entry.v, entry.sel)
+                    : studio.root.querySelector(entry.sel);
+                if (!el) throw new Error('DFO: nothing at ' + entry.sel);
+                return { el, play: player(entry, studio.manifest.keyframes[entry.name]) };
+            });
+            const end = Math.max(
+                ...entries.map((a) =>
+                    a.iterations === 'infinite' ? 0 : a.delay + a.duration * a.iterations,
+                ),
+            );
+            return {
+                touches: runs.map((r) => r.el),
+                end: cue.at + end,
+                apply(t) {
+                    for (const { el, play } of runs) {
+                        const style = play(t - cue.at);
+                        for (const prop of Object.keys(style ?? {})) el.style[prop] = style[prop];
+                    }
+                },
+            };
+        }
+
+        if (cue.kind === 'state') {
+            // Switches the fragment's attributes to a manifest state's, as the
+            // app does when the plan is approved (the prompt's placeholder).
+            const attrs = studio.manifest.states?.[cue.to]?.attrs ?? {};
+            const changes = Object.entries(attrs).flatMap(([hook, values]) =>
+                Object.entries(values).map(([name, value]) => {
+                    const el = studio.q(hook);
+                    return { el, name, value, was: el.getAttribute(name) };
+                }),
+            );
+            return {
+                touches: [],
+                attrs: true,
+                end: cue.at,
+                apply(t) {
+                    for (const c of changes) {
+                        const v = t >= cue.at ? c.value : c.was;
+                        if (v == null) c.el.removeAttribute(c.name);
+                        else c.el.setAttribute(c.name, v);
+                    }
+                },
+            };
+        }
+
+        const el = studio.q(cue.v, cue.sel);
+        const s = el.style;
+        const dur = cue.dur ?? 0.4;
+        const only = (end, apply) => ({ touches: [el], end, apply });
+        // An entering element takes no room before its time.
+        const before = (t) => {
+            if (t >= cue.at) return false;
+            s.display = 'none';
+            return true;
+        };
+
+        switch (cue.kind) {
+            case 'show':
+                // dur 0: the element simply appears, as a new message does.
+                return only(cue.at + dur, (t) => {
+                    if (before(t) || !dur) return;
+                    const p = eo(seg(t, cue.at, cue.at + dur));
+                    s.opacity = p;
+                    s.transform = 'translateY(' + lerp(cue.dy ?? 10, 0, p) + 'px)';
+                });
+            case 'pop': {
+                // For film overlays; product cards use `animate`.
+                const end = cue.at + (cue.dur ?? 0.45);
+                return only(end, (t) => {
+                    if (before(t)) return;
+                    const p = seg(t, cue.at, end);
+                    s.opacity = eo(Math.min(1, p * 1.6));
+                    s.transform = 'scale(' + lerp(0.94, 1, eob(p, 1.5)) + ')';
+                });
+            }
+            case 'stream': {
+                // The words are spans of the cue's own, so they keep their
+                // state between frames and change only when the count does.
+                const spans = wordSpans(kit, el);
+                const wps = cue.wps ?? 9;
+                let shown = -1;
+                return only(cue.at + spans.length / wps, (t) => {
+                    before(t);
+                    const n = Math.max(0, Math.min(spans.length, Math.floor((t - cue.at) * wps)));
+                    if (n === shown) return;
+                    // Unstreamed words take no room, so the transcript grows
+                    // line by line as the app's does.
+                    spans.forEach((span, i) => (span.style.display = i < n ? '' : 'none'));
+                    shown = n;
+                });
+            }
+            case 'draw': {
+                if (typeof el.getTotalLength !== 'function')
+                    throw new Error('DFO: a draw cue needs an SVG shape at ' + cue.v);
+                const length = el.getTotalLength();
+                const points = cue.points ? studio.q(cue.points) : null;
+                const end = cue.at + (cue.dur ?? 1.6);
+                return {
+                    touches: points ? [el, points] : [el],
+                    end,
+                    apply(t) {
+                        if (before(t)) return;
+                        const p = kit.eio(seg(t, cue.at, end));
+                        s.strokeDasharray = String(length);
+                        s.strokeDashoffset = String(length * (1 - p));
+                        if (points) points.style.opacity = p >= 1 ? 1 : 0;
+                    },
+                };
+            }
+            case 'type': {
+                const typer = kit.typist(cue.text, cue.at, cue.cps ?? 24);
+                return only(Math.max(typer.end, cue.clearAt ?? 0), (t) => {
+                    const text = cue.clearAt != null && t >= cue.clearAt ? '' : typer.at(t);
+                    el.value = text;
+                    el.textContent = text;
+                    // PromptForm's own sizing: the field's content height,
+                    // capped at MAX_LINES lines.
+                    s.height = 'auto';
+                    const line = parseFloat(getComputedStyle(el).lineHeight) || el.scrollHeight;
+                    s.height = Math.min(el.scrollHeight, line * PROMPT_MAX_LINES) + 'px';
+                });
+            }
+            case 'press':
+                return only(cue.at + 0.16, (t) => {
+                    if (t < cue.at) return;
+                    s.transform =
+                        'scale(' +
+                        (1 - 0.06 * Math.sin(Math.PI * seg(t, cue.at, cue.at + 0.16))) +
+                        ')';
+                });
+            case 'remove':
+                // Gone at once, as the app unmounts it (the pending plan on approval).
+                return only(cue.at, (t) => {
+                    if (t >= cue.at) s.display = 'none';
+                });
+            case 'hide':
+                // For film overlays: fades out, then folds the height it has
+                // as earlier cues leave it.
+                return only(cue.at + 0.2 + dur, (t) => {
+                    if (t < cue.at) return;
+                    const height = el.offsetHeight;
+                    const fold = kit.eio(seg(t, cue.at + 0.2, cue.at + 0.2 + dur));
+                    s.opacity = 1 - ei(seg(t, cue.at, cue.at + 0.25));
+                    if (fold <= 0) return;
+                    s.overflow = 'hidden';
+                    s.height = lerp(height, 0, fold) + 'px';
+                    if (fold < 1) return;
+                    s.marginTop = s.marginBottom = '0';
+                    s.visibility = 'hidden';
+                });
+            case 'tab': {
+                // Switches the chat panel between Chat and Activity at `at`.
+                const active = studio.manifest.classes?.viewActive;
+                if (!active) throw new Error('DFO: a tab cue needs the Studio, not a page capture');
+                const from = studio.q(cue.from);
+                return {
+                    touches: [],
+                    attrs: true,
+                    end: cue.at,
+                    apply(t) {
+                        const on = t >= cue.at;
+                        el.classList.toggle(active, on);
+                        from.classList.toggle(active, !on);
+                    },
+                };
+            }
+            default:
+                throw new Error('DFO: unknown cue kind ' + cue.kind + ' on ' + cue.v);
+        }
+    };
+
+    /**
+     * Mounts the generated Studio, or one captured page state, in a scene.
+     * Options: `state` (a captured page's state; default its first), `keys`
+     * (camera keys; a key may name a `hook` to centre on), `fit` (scale on
+     * top of fitting the stage), `desk` (the colour around the frame). A
+     * capture's key or cue that names a state in `in` plays in that state only.
+     * Returns:
+     * - q(hook, sel?): the element with that data-v hook, or `sel` inside it;
+     * - focus(hook, z): a camera key centred on that element;
+     * - cue(list): adds cues; render(t): applies cues, then the camera;
+     * - end: when the last cue or camera hold ends, in seconds.
+     *
+     * Camera keys are {t, cx, cy, z, hold?, from?, drift?} in stage px, where
+     * the whole frame fits the stage at z = 1: the view rests on a key for
+     * `hold` seconds, then eases to the next one, arriving at its `t`. A key
+     * that names a hook follows that element where the layout has put it at
+     * that moment.
+     */
+    const mount = (kit, options = {}) => {
+        const manifest = manifestOf(kit);
+        const { width, height } = manifest.viewport;
+        const fit = Math.min(STAGE.width / width, STAGE.height / height) * (options.fit ?? 1);
+        const left = (STAGE.width - width * fit) / 2;
+        const top = (STAGE.height - height * fit) / 2;
+
+        kit.css(cssOf(kit, manifest));
+        kit.css(
+            '.dfo-desk { position:absolute; inset:0; overflow:hidden; background:' +
+                (options.desk ?? '#ecece0') +
+                ' }' +
+                '.dfo-cam { position:absolute; left:0; top:0; width:' +
+                STAGE.width +
+                'px; height:' +
+                STAGE.height +
+                'px; transform-origin:0 0 }' +
+                '.dfo-frame { position:absolute; transform-origin:0 0; border-radius:14px; overflow:hidden;' +
+                ' box-shadow:0 24px 70px rgba(0,0,0,.12) }',
+        );
+
+        const desk = kit.h(
+            '<div class="dfo-desk"><div class="dfo-cam"><div class="dfo-frame"></div></div></div>',
+        );
+        const camLayer = desk.firstChild;
+        const frame = camLayer.firstChild;
+        // A Studio render has one fragment; a page capture has one per state.
+        const html = manifest.modules.html;
+        const state =
+            typeof html === 'string' ? undefined : (options.state ?? Object.keys(html)[0]);
+        const file = state === undefined ? html : html[state];
+        if (!file) throw new Error('DFO: no captured state ' + state);
+        // A capture's cue or key with `in` plays in that state only.
+        const here = (item) => item.in == null || item.in === state;
+        frame.innerHTML = kit.module(file);
+        Object.assign(frame.style, {
+            left: left + 'px',
+            top: top + 'px',
+            width: width + 'px',
+            height: height + 'px',
+            transform: 'scale(' + fit + ')',
+        });
+        kit.stage.append(desk);
+
+        // ChatPanel keeps its transcript at scrollTop = scrollHeight. A film
+        // cannot scroll an element, so the same offset moves the transcript's
+        // children with `translate`, which no cue uses.
+        const transcript = frame.querySelector('[data-v="view-chat"] [class*="chatScroll"]');
+        let shift = 0;
+        const pin = () => {
+            if (!transcript) return;
+            for (const child of transcript.children) child.style.translate = '';
+            shift = Math.max(0, transcript.scrollHeight - transcript.clientHeight);
+            for (const child of transcript.children) {
+                child.style.translate = shift ? '0 ' + -shift + 'px' : '';
+            }
+        };
+
+        const cues = [];
+        let keys = [];
+        // Each element a cue styles, with its own inline style, which every
+        // frame starts from so no cue's value outlives its time.
+        const own = new Map();
+        const apply = (t) => {
+            for (const [el, style] of own) el.setAttribute('style', style);
+            // Attributes and classes first (`state` and `tab`): a cue that
+            // measures, such as the prompt's height under its placeholder,
+            // must see this frame's.
+            for (const c of cues) if (c.attrs) c.apply(t);
+            for (const c of cues) if (!c.attrs) c.apply(t);
+        };
+
+        // An element's box in stage px at z = 1, from layout offsets inside
+        // the frame, so the player's own scaling of the stage cannot skew it.
+        const box = (el) => {
+            let x = 0;
+            let y = 0;
+            let node = el;
+            while (node && node !== frame) {
+                x += node.offsetLeft;
+                y += node.offsetTop;
+                node = node.offsetParent;
+            }
+            if (node !== frame)
+                throw new Error('DFO: cannot place ' + (el.dataset.v ?? el.className));
+            if (transcript && transcript !== el && transcript.contains(el)) y -= shift;
+            return {
+                x: left + x * fit,
+                y: top + y * fit,
+                w: el.offsetWidth * fit,
+                h: el.offsetHeight * fit,
+            };
+        };
+
+        // A key that names a hook centres on that element as the layout
+        // stands at the key's own time: the cues are applied at k.t to
+        // measure it. A fixed time gives a fixed layout, so it is measured
+        // once.
+        const placed = new Map();
+        const point = (k) => {
+            if (!k.hook) return k;
+            if (!placed.has(k)) {
+                apply(k.t);
+                pin();
+                const r = box(studio.q(k.hook));
+                placed.set(k, { ...k, cx: r.x + r.w / 2, cy: r.y + r.h / 2 });
+            }
+            return placed.get(k);
+        };
+
+        const view = (t) => {
+            const at = (k, s) => {
+                const d = k.drift ?? [0, 0, 0];
+                const dt = Math.max(0, s - k.t);
+                return {
+                    cx: k.cx + d[0] * dt,
+                    cy: k.cy + d[1] * dt,
+                    lz: Math.log(k.z) + d[2] * dt,
+                };
+            };
+            let i = 0;
+            while (i + 1 < keys.length && keys[i + 1].t <= t) i++;
+            const a = point(keys[i]);
+            const next = keys[i + 1];
+            if (!next || t <= a.t) return at(a, Math.max(t, a.t));
+            const from = next.from ?? a.t + (a.hold ?? 0);
+            if (t <= from) return at(a, t);
+            const b = point(next);
+            const p = kit.eio(kit.seg(t, from, b.t));
+            const s = at(a, from);
+            return {
+                cx: kit.lerp(s.cx, b.cx, p),
+                cy: kit.lerp(s.cy, b.cy, p),
+                lz: kit.lerp(s.lz, Math.log(b.z), p),
+            };
+        };
+
+        const studio = {
+            manifest,
+            root: frame,
+            // `sel` narrows to a descendant, for controls with no hook of their own.
+            q(hook, sel) {
+                const base = '[data-v="' + hook + '"]';
+                const el = frame.querySelector(sel ? base + ' ' + sel : base);
+                if (!el) throw new Error('DFO: nothing at ' + hook + (sel ? ' ' + sel : ''));
+                return el;
+            },
+            box,
+            focus(hook, z = 1.6) {
+                const r = box(studio.q(hook));
+                return { cx: r.x + r.w / 2, cy: r.y + r.h / 2, z };
+            },
+            cue(list) {
+                for (const c of list.filter(here)) {
+                    const prepared = prepare(kit, studio, c);
+                    for (const el of prepared.touches) {
+                        if (!own.has(el)) own.set(el, el.getAttribute('style') ?? '');
+                    }
+                    cues.push(prepared);
+                }
+                return studio;
+            },
+            // When the last cue ends or the camera's last hold does.
+            get end() {
+                const last = keys[keys.length - 1];
+                return Math.max(last.t + (last.hold ?? 0), ...cues.map((c) => c.end));
+            },
+            render(t) {
+                // The camera first: placing a key may apply the cues at
+                // another time, so the cues for t come after.
+                const v = view(t);
+                apply(t);
+                pin();
+                const z = Math.exp(v.lz);
+                camLayer.style.transform =
+                    'translate(' +
+                    (STAGE.width / 2 - v.cx * z) +
+                    'px,' +
+                    (STAGE.height / 2 - v.cy * z) +
+                    'px) scale(' +
+                    z +
+                    ')';
+            },
+        };
+
+        const wide = { cx: STAGE.width / 2, cy: STAGE.height / 2, z: 1 };
+        // No keys holds the whole stage in view.
+        const mine = (options.keys ?? []).filter(here);
+        keys = (mine.length ? mine : [{ t: 0 }]).map((k) => ({ ...wide, ...k }));
+        return studio;
+    };
+
+    return { mount };
+})();
diff --git a/motion-kit/snapshot.ts b/motion-kit/snapshot.ts
new file mode 100644
index 0000000..e22fe00
--- /dev/null
+++ b/motion-kit/snapshot.ts
@@ -0,0 +1,563 @@
+/**
+ * The functions a page capture runs inside the browser, through Playwright's
+ * `page.evaluate`. Playwright sends each one as source text, so each is
+ * self-contained: no imports, no helpers from this module, only its
+ * argument and the page's globals.
+ */
+
+import type { PageHook } from './spec.ts';
+
+/** A box in viewport px. */
+export type Box = { x: number; y: number; width: number; height: number };
+
+/** A stylesheet's text and the URL its relative `url()`s resolve against.
+ *  `media` is the owner's `media` attribute, when it has one. */
+export type SheetSource = { key: string; base: string; text: string; media: string };
+
+export type Snapshot = {
+    // The state as one `<div class="dfo-ui">` fragment.
+    html: string;
+    // The computed font size of the page's root element, in px.
+    rootFontSize: number;
+    // What the sanitiser removed and could not inline, one line each.
+    dropped: string[];
+    sheets: SheetSource[];
+};
+
+/**
+ * Stamps each hook's `data-v` on the one element its selector finds, after
+ * clearing the stamps of an earlier state, and returns each hook's box, or
+ * null when the selector finds nothing in this state. Throws when a
+ * selector finds more than one element.
+ */
+export function stampHooks(hooks: PageHook[]): Record<string, Box | null> {
+    for (const element of document.querySelectorAll('[data-v]')) {
+        element.removeAttribute('data-v');
+    }
+
+    const boxes: Record<string, Box | null> = {};
+    const round = (n: number) => Math.round(n * 100) / 100;
+
+    for (const { v, selector } of hooks) {
+        const found = document.querySelectorAll(selector);
+
+        if (found.length > 1) {
+            throw new Error(`hook "${v}": "${selector}" matches ${found.length} elements`);
+        }
+
+        const element = found[0];
+
+        if (!element) {
+            boxes[v] = null;
+            continue;
+        }
+
+        element.setAttribute('data-v', v);
+
+        const rect = element.getBoundingClientRect();
+
+        boxes[v] = {
+            x: round(rect.x),
+            y: round(rect.y),
+            width: round(rect.width),
+            height: round(rect.height),
+        };
+    }
+
+    return boxes;
+}
+
+/** For each selector, whether it finds an element in the page now. A
+ *  selector the browser cannot parse finds nothing. */
+export function matchSelectors(selectors: string[]): boolean[] {
+    return selectors.map((selector) => {
+        try {
+            return document.querySelector(selector) !== null;
+        } catch {
+            return false;
+        }
+    });
+}
+
+/**
+ * The page as it stands, made static for a film:
+ *
+ * - `document.body` is copied into an inert document (no scripts run, no
+ *   custom element upgrades, no loads) inside `<div class="dfo-ui">`, with
+ *   `<div data-mk-html>` and `<div data-mk-body>` standing for the root and
+ *   the body and carrying their attributes;
+ * - scripts, styles, links, frames, media, templates, comments, event
+ *   attributes and elements with a shadow root are removed;
+ * - a canvas becomes an `<img>` of its pixels, and images, `<image>`s and
+ *   inline `url()`s become `data:` URLs; what cannot be fetched is dropped
+ *   and reported, as is any other URL that leaves the page;
+ * - form controls carry their current value, checked and selected states
+ *   as attributes;
+ * - hovered, focused and active elements carry `data-mk-hover`,
+ *   `data-mk-focus`, `data-mk-focus-visible`, `data-mk-focus-within` and
+ *   `data-mk-active`, which the stylesheet's dynamic pseudo-classes become;
+ * - a scrolled element's children (the body's, for the window) are
+ *   translated by the scroll offset, and a fixed or stuck element is moved
+ *   back to where it shows.
+ *
+ * Also returns the text of every stylesheet in the page.
+ */
+export async function snapshotPage({
+    viewport,
+    state,
+}: {
+    viewport: { width: number; height: number };
+    state: string;
+}): Promise<Snapshot> {
+    const dropped: string[] = [];
+    const drop = (what: string) => {
+        if (!dropped.includes(what)) {
+            dropped.push(what);
+        }
+    };
+    const inside = (url: string) => url.startsWith('data:') || url.startsWith('#');
+    const absolute = (url: string) => new URL(url, document.baseURI).href;
+    const cache = new Map<string, Promise<string | null>>();
+    const dataUrl = (url: string): Promise<string | null> => {
+        const href = absolute(url);
+
+        if (!cache.has(href)) {
+            cache.set(
+                href,
+                (async () => {
+                    try {
+                        const response = await fetch(href);
+
+                        if (!response.ok) {
+                            return null;
+                        }
+
+                        const blob = await response.blob();
+
+                        return await new Promise<string>((resolve, reject) => {
+                            const reader = new FileReader();
+
+                            reader.onload = () => resolve(String(reader.result));
+                            reader.onerror = () => reject(reader.error);
+                            reader.readAsDataURL(blob);
+                        });
+                    } catch {
+                        return null;
+                    }
+                })(),
+            );
+        }
+
+        return cache.get(href)!;
+    };
+    const inlineCssUrls = async (text: string, what: string): Promise<string> => {
+        let out = text;
+
+        for (const match of text.matchAll(/url\(\s*(['"]?)([^'")]*)\1\s*\)/g)) {
+            const url = match[2]!;
+
+            if (inside(url)) {
+                continue;
+            }
+
+            const data = await dataUrl(url);
+
+            if (!data) {
+                drop(`${what}: url(${url})`);
+            }
+
+            out = out.replace(match[0], data ? `url("${data}")` : 'none');
+        }
+
+        return out;
+    };
+
+    // --- measurements on the live page, before anything changes -------------
+
+    const scroller = document.scrollingElement ?? document.documentElement;
+    const live = [document.body, ...document.body.querySelectorAll('*')];
+    const computed = live.map((element) => getComputedStyle(element));
+    const sticky = live.filter((_, index) => computed[index]!.position === 'sticky');
+    const stuckAt = sticky.map((element) => element.getBoundingClientRect());
+
+    // Where each sticky element would sit unstuck: static takes the same
+    // room in the flow, so switching them all at once moves nothing else.
+    const inlinePosition = sticky.map((element) => (element as HTMLElement).style.position);
+
+    for (const element of sticky) {
+        (element as HTMLElement).style.position = 'static';
+    }
+
+    const unstuckAt = sticky.map((element) => element.getBoundingClientRect());
+
+    sticky.forEach((element, index) => {
+        (element as HTMLElement).style.position = inlinePosition[index]!;
+    });
+
+    // --- the copy -------------------------------------------------------------
+
+    const inert = document.implementation.createHTMLDocument('');
+    const copies = (() => {
+        const body = inert.importNode(document.body, true);
+
+        return [body, ...body.querySelectorAll('*')];
+    })();
+    const shift = new Map<Element, { x: number; y: number }>();
+    const addShift = (element: Element, x: number, y: number) => {
+        const current = shift.get(element) ?? { x: 0, y: 0 };
+
+        shift.set(element, { x: current.x + x, y: current.y + y });
+    };
+    // What the scroll translation moved each live element's descendants by.
+    const scrolled = new Map<Element, { x: number; y: number }>();
+    const scrollOf = (element: Element) =>
+        element === document.body
+            ? { x: scroller.scrollLeft, y: scroller.scrollTop }
+            : { x: element.scrollLeft, y: element.scrollTop };
+
+    live.forEach((element, index) => {
+        const { x, y } = scrollOf(element);
+
+        if (!x && !y) {
+            return;
+        }
+
+        scrolled.set(element, { x, y });
+
+        for (const child of element.children) {
+            if (getComputedStyle(child).position !== 'fixed') {
+                addShift(child, -x, -y);
+            }
+        }
+
+        if (
+            [...element.childNodes].some((node) => node.nodeType === 3 && node.textContent?.trim())
+        ) {
+            drop(
+                `${copies[index]!.localName}: text beside the children of a scrolled element stays unscrolled`,
+            );
+        }
+    });
+
+    // A fixed element sits where it shows whatever its ancestors were moved by.
+    live.forEach((element, index) => {
+        if (computed[index]!.position !== 'fixed') {
+            return;
+        }
+
+        for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+            const moved = shift.get(parent);
+
+            if (moved) {
+                addShift(element, -moved.x, -moved.y);
+            }
+        }
+    });
+
+    sticky.forEach((element, index) => {
+        const dx = stuckAt[index]!.x - unstuckAt[index]!.x;
+        const dy = stuckAt[index]!.y - unstuckAt[index]!.y;
+
+        if (dx || dy) {
+            addShift(element, dx, dy);
+        }
+    });
+
+    const remove = new Set<Element>();
+    const pending: Promise<void>[] = [];
+    const MEDIA = new Set(['video', 'audio', 'object', 'embed', 'iframe', 'frame', 'portal']);
+    const GONE = new Set(['script', 'noscript', 'template', 'style', 'link', 'meta', 'base']);
+    const URL_ATTRIBUTES = [
+        'src',
+        'srcset',
+        'action',
+        'formaction',
+        'poster',
+        'ping',
+        'background',
+    ];
+
+    live.forEach((element, index) => {
+        const copy = copies[index]!;
+        const name = element.localName;
+        const style = computed[index]!;
+
+        if (GONE.has(name) || element.shadowRoot) {
+            if (element.shadowRoot) {
+                drop(`<${name}> with a shadow root`);
+            }
+
+            remove.add(copy);
+
+            return;
+        }
+
+        if (MEDIA.has(name)) {
+            // A box of the same size keeps the layout.
+            const box = inert.createElement('div');
+            const rect = element.getBoundingClientRect();
+
+            for (const key of ['class', 'data-v']) {
+                const value = element.getAttribute(key);
+
+                if (value !== null) {
+                    box.setAttribute(key, value);
+                }
+            }
+
+            box.setAttribute(
+                'style',
+                `display:${style.display === 'inline' ? 'inline-block' : style.display};width:${rect.width}px;height:${rect.height}px`,
+            );
+            copy.replaceWith(box);
+            drop(
+                `<${name}${element.getAttribute('src') ? ` src="${element.getAttribute('src')}"` : ''}> (left as an empty box)`,
+            );
+
+            return;
+        }
+
+        // Attributes: event handlers go; URLs that leave the page go.
+        for (const attribute of [...copy.attributes]) {
+            const key = attribute.name.toLowerCase();
+            const value = attribute.value;
+
+            if (key.startsWith('on')) {
+                copy.removeAttribute(attribute.name);
+            } else if ((key === 'href' || key === 'xlink:href') && !inside(value)) {
+                if (name === 'a' || name === 'area') {
+                    // `#` keeps the link a link for `:link` and `[href]`.
+                    copy.setAttribute(attribute.name, '#');
+                } else {
+                    drop(`<${name}> ${key}="${value}"`);
+                    copy.removeAttribute(attribute.name);
+                }
+            } else if (URL_ATTRIBUTES.includes(key) && !(name === 'img' && key === 'src')) {
+                if (!inside(value)) {
+                    copy.removeAttribute(attribute.name);
+                }
+            } else if (key === 'style' && /url\(/.test(value)) {
+                pending.push(
+                    inlineCssUrls(value, `<${name}> style`).then((text) => {
+                        // The scroll shift below may have set a translate
+                        // already; it outlives the rewrite.
+                        const { translate } = (copy as HTMLElement).style;
+
+                        copy.setAttribute('style', text);
+
+                        if (translate) {
+                            (copy as HTMLElement).style.translate = translate;
+                        }
+                    }),
+                );
+            }
+        }
+
+        copy.removeAttribute('autofocus');
+
+        if (name === 'img') {
+            const image = element as HTMLImageElement;
+            const source = image.currentSrc || image.src;
+
+            copy.removeAttribute('srcset');
+            copy.removeAttribute('sizes');
+
+            if (source && !source.startsWith('data:')) {
+                pending.push(
+                    dataUrl(source).then((data) => {
+                        if (data) {
+                            copy.setAttribute('src', data);
+                        } else {
+                            copy.removeAttribute('src');
+                            drop(`<img src="${source}">`);
+                        }
+                    }),
+                );
+            }
+        } else if (name === 'source') {
+            remove.add(copy);
+        } else if (name === 'image' && element.namespaceURI === 'http://www.w3.org/2000/svg') {
+            const href = element.getAttribute('href') ?? element.getAttribute('xlink:href');
+
+            if (href && !inside(href)) {
+                pending.push(
+                    dataUrl(href).then((data) => {
+                        if (data) {
+                            copy.setAttribute('href', data);
+                        } else {
+                            drop(`<image href="${href}">`);
+                        }
+                    }),
+                );
+            }
+        } else if (name === 'canvas') {
+            const canvas = element as HTMLCanvasElement;
+            const image = inert.createElement('img');
+
+            for (const attribute of copy.attributes) {
+                image.setAttribute(attribute.name, attribute.value);
+            }
+
+            try {
+                image.setAttribute('src', canvas.toDataURL('image/png'));
+            } catch {
+                drop('<canvas> whose pixels cannot be read (left blank)');
+            }
+
+            image.setAttribute('width', String(canvas.width));
+            image.setAttribute('height', String(canvas.height));
+
+            // The canvas's laid-out size, so the pixel buffer (device px)
+            // does not set it.
+            const rect = element.getBoundingClientRect();
+
+            image.style.width = `${rect.width}px`;
+            image.style.height = `${rect.height}px`;
+            copy.replaceWith(image);
+            copies[index] = image;
+        } else if (name === 'input') {
+            const input = element as HTMLInputElement;
+
+            if (input.type === 'checkbox' || input.type === 'radio') {
+                copy.toggleAttribute('checked', input.checked);
+            } else if (input.type !== 'file') {
+                copy.setAttribute('value', input.value);
+            }
+        } else if (name === 'textarea') {
+            copy.textContent = (element as HTMLTextAreaElement).value;
+        } else if (name === 'option') {
+            copy.toggleAttribute('selected', (element as HTMLOptionElement).selected);
+        }
+
+        // The interaction states the film cannot have, as attributes.
+        for (const [pseudo, mark] of [
+            [':hover', 'data-mk-hover'],
+            [':active', 'data-mk-active'],
+            [':focus', 'data-mk-focus'],
+            [':focus-visible', 'data-mk-focus-visible'],
+            [':focus-within', 'data-mk-focus-within'],
+        ] as const) {
+            if (element.matches(pseudo)) {
+                copies[index]!.setAttribute(mark, '');
+            }
+        }
+
+        const moved = shift.get(element);
+
+        if (moved) {
+            // The individual `translate` property composes with any
+            // `transform` the element has; an existing one is added to.
+            const [tx = '0px', ty = '0px', tz] =
+                style.translate === 'none' ? [] : style.translate.split(' ');
+            const add = (length: string, px: number) =>
+                length.endsWith('px') && !length.includes('(')
+                    ? `${parseFloat(length) + px}px`
+                    : `calc(${length} + ${px}px)`;
+
+            (copies[index] as HTMLElement).style.translate = [
+                add(tx, moved.x),
+                add(ty, moved.y),
+                ...(tz ? [tz] : []),
+            ].join(' ');
+        }
+    });
+
+    await Promise.all(pending);
+
+    for (const copy of remove) {
+        copy.remove();
+    }
+
+    const comments = inert.createTreeWalker(copies[0]!, NodeFilter.SHOW_COMMENT);
+    const commentNodes: Node[] = [];
+
+    while (comments.nextNode()) {
+        commentNodes.push(comments.currentNode);
+    }
+
+    for (const comment of commentNodes) {
+        comment.parentNode?.removeChild(comment);
+    }
+
+    // --- the fragment ---------------------------------------------------------
+
+    const stand = (tag: 'html' | 'body', source: Element): HTMLElement => {
+        const element = inert.createElement('div');
+
+        for (const attribute of source.attributes) {
+            if (!attribute.name.toLowerCase().startsWith('on')) {
+                element.setAttribute(attribute.name, attribute.value);
+            }
+        }
+
+        element.setAttribute(`data-mk-${tag}`, '');
+
+        return element;
+    };
+    const wrapper = inert.createElement('div');
+    const html = stand('html', document.documentElement);
+    const body = stand('body', copies[0]!);
+
+    body.append(...copies[0]!.childNodes);
+    html.append(body);
+    wrapper.append(html);
+    wrapper.setAttribute('class', 'dfo-ui');
+    wrapper.setAttribute('data-viewport', `${viewport.width}x${viewport.height}`);
+    wrapper.setAttribute('data-state', state);
+
+    // The root's background (or the body's, when the root has none) paints
+    // the whole viewport in a browser; the wrapper stands for the viewport.
+    const rootStyle = getComputedStyle(document.documentElement);
+    const canvasStyle =
+        rootStyle.backgroundColor === 'rgba(0, 0, 0, 0)' && rootStyle.backgroundImage === 'none'
+            ? computed[0]!
+            : rootStyle;
+
+    if (canvasStyle.backgroundColor !== 'rgba(0, 0, 0, 0)') {
+        wrapper.style.backgroundColor = canvasStyle.backgroundColor;
+    }
+
+    // --- the stylesheets ------------------------------------------------------
+
+    const sheets: SheetSource[] = [];
+
+    for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) {
+        if (sheet.disabled) {
+            continue;
+        }
+
+        const media = sheet.media.mediaText;
+
+        if (sheet.href) {
+            const response = await fetch(sheet.href).catch(() => null);
+
+            if (!response) {
+                drop(`stylesheet ${sheet.href}`);
+                continue;
+            }
+
+            // A sheet the server no longer has (a rebuild since the page
+            // loaded) would leave its rules out of the film unnoticed.
+            if (!response.ok) {
+                throw new Error(
+                    `motion-kit: stylesheet ${sheet.href} answered ${response.status} when re-read`,
+                );
+            }
+
+            sheets.push({ key: sheet.href, base: sheet.href, text: await response.text(), media });
+        } else {
+            const text =
+                sheet.ownerNode?.textContent ??
+                [...sheet.cssRules].map((rule) => rule.cssText).join('\n');
+
+            sheets.push({ key: `inline:${text}`, base: document.baseURI, text, media });
+        }
+    }
+
+    return {
+        html: wrapper.outerHTML,
+        rootFontSize: parseFloat(rootStyle.fontSize),
+        dropped,
+        sheets,
+    };
+}
diff --git a/motion-kit/spec.ts b/motion-kit/spec.ts
new file mode 100644
index 0000000..4455a28
--- /dev/null
+++ b/motion-kit/spec.ts
@@ -0,0 +1,372 @@
+/**
+ * The demo spec: one Studio conversation, frozen in its running state, that
+ * the generator renders to static markup. Every shape below is the app's
+ * own type, so a spec says exactly what the Studio would hold.
+ */
+
+import type { ChatMessage, PlanState } from '../src/components/organisms/Studio/hooks/useChat.ts';
+import type { Widget } from '../src/lib/chat/widgets.ts';
+import type { ActivityEntry } from '../src/lib/studio/activity.ts';
+
+/** Where a card sits on the whiteboard, in grid cells. `w` and `h` default
+ *  to the span the Studio gives a fresh card of that kind (`spawnSpan`). */
+export type CardSlot = { col: number; row: number; w?: number; h?: number };
+
+export type DemoCard = { widget: Widget; slot: CardSlot };
+
+export type Viewport = { width: number; height: number };
+
+export type DemoSpec = {
+    // The conversation title in the tools row.
+    title: string;
+    // The prompt the film types into the chat input.
+    question: string;
+    // The transcript. A bot message's `plan` is the plan the user approved
+    // for that answer, shown under it.
+    messages: ChatMessage[];
+    // The plan awaiting approval, as useChat holds it.
+    plan?: PlanState;
+    activity?: ActivityEntry[];
+    cards: DemoCard[];
+    // CSS px at a 16 px root; 1280×800 when absent.
+    viewport?: Viewport;
+};
+
+export const DEFAULT_VIEWPORT: Viewport = { width: 1280, height: 800 };
+
+/** The narrowest viewport a demo renders at: below it the Studio takes its
+ *  phone layout (`breakpoint(phone)`, under 660 px), which the generator
+ *  does not model. */
+export const MIN_DEMO_WIDTH = 660;
+
+// What PlanCard and PlanLedger read from a PlanState.
+const PLAN_FIELDS = [
+    'title',
+    'summary',
+    'steps',
+    'answerStepId',
+    'decisions',
+    'caveats',
+    'movedElsewhere',
+    'version',
+    'actions',
+    'interruptId',
+    'live',
+    'revision',
+    'baseline',
+    'changed',
+    'switched',
+    'stepsUpdated',
+    'switching',
+    'notice',
+] as const satisfies readonly (keyof PlanState)[];
+
+/** The design cell in px at a 16 px root (GRID_CELL in GridPattern). */
+export const CELL = 20;
+
+/** The class of the element that wraps the fragment and scopes its CSS. */
+export const WRAPPER = 'dfo-ui';
+
+/** The root font size the fragment is laid out at. */
+export const ROOT_FONT_SIZE = 16;
+
+const fail = (message: string): never => {
+    throw new Error(`demo spec: ${message}`);
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * The spec as parsed JSON, checked for what the generator relies on: the
+ * required fields, card ids that are unique and usable as hook names, and
+ * bot messages that render (an empty one renders nothing, so it would have
+ * no element to carry its hook).
+ */
+export const readSpec = (raw: unknown): DemoSpec => {
+    if (!isRecord(raw)) {
+        return fail('expected an object');
+    }
+
+    for (const key of ['title', 'question'] as const) {
+        if (typeof raw[key] !== 'string' || !raw[key]) {
+            fail(`"${key}" must be a non-empty string`);
+        }
+    }
+
+    if (!Array.isArray(raw.messages) || !Array.isArray(raw.cards)) {
+        return fail('"messages" and "cards" must be arrays');
+    }
+
+    if (raw.viewport !== undefined) {
+        const viewport = raw.viewport as Partial<Viewport>;
+
+        if (
+            !isRecord(viewport) ||
+            !Number.isInteger(viewport.width) ||
+            !Number.isInteger(viewport.height) ||
+            viewport.height! <= 0
+        ) {
+            fail('"viewport" needs whole, positive "width" and "height"');
+        }
+
+        if (viewport.width! < MIN_DEMO_WIDTH) {
+            fail(
+                `"viewport" is ${viewport.width} px wide; the Studio takes its phone layout ` +
+                    `under ${MIN_DEMO_WIDTH} px, which the generator does not render`,
+            );
+        }
+    }
+
+    if (raw.plan !== undefined) {
+        const missing = isRecord(raw.plan)
+            ? PLAN_FIELDS.filter((key) => !(key in (raw.plan as object)))
+            : PLAN_FIELDS;
+
+        if (missing.length) {
+            fail(`"plan" is a PlanState as useChat holds it; it lacks ${missing.join(', ')}`);
+        }
+    }
+
+    const spec = raw as DemoSpec;
+
+    spec.messages.forEach((message, index) => {
+        if (
+            message.role === 'bot' &&
+            !message.text &&
+            !message.followups?.length &&
+            !message.chips?.length &&
+            !message.plan
+        ) {
+            fail(`message ${index} is an empty bot turn, which renders nothing`);
+        }
+    });
+
+    if (spec.messages.filter((message) => message.role === 'bot' && message.plan).length > 1) {
+        fail('only one answer may carry an approved "plan"; its pill is the "plan-pill" hook');
+    }
+
+    const ids = new Set<string>();
+
+    for (const { widget, slot } of spec.cards) {
+        if (!/^[\w-]+$/.test(widget.id)) {
+            fail(`card id "${widget.id}" must be letters, digits, "_" or "-"`);
+        }
+
+        if (ids.has(widget.id)) {
+            fail(`card id "${widget.id}" is used twice`);
+        }
+
+        ids.add(widget.id);
+
+        if (!isRecord(slot)) {
+            return fail(`card "${widget.id}" needs a "slot"`);
+        }
+
+        for (const key of ['col', 'row'] as const) {
+            if (!Number.isInteger(slot[key]) || slot[key] < 0) {
+                fail(`card "${widget.id}" needs a whole, non-negative "${key}"`);
+            }
+        }
+
+        for (const key of ['w', 'h'] as const) {
+            const span = slot[key];
+
+            if (span !== undefined && (!Number.isInteger(span) || span <= 0)) {
+                fail(`card "${widget.id}" needs a whole, positive "${key}" when it sets one`);
+            }
+        }
+    }
+
+    return spec;
+};
+
+// --- page capture -------------------------------------------------------------
+
+/** A `data-v` hook stamped on the one element `selector` finds. */
+export type PageHook = { v: string; selector: string };
+
+export type PageStep =
+    | { type: 'click' | 'hover' | 'focus'; selector: string }
+    | { type: 'type'; selector: string; text: string }
+    | { type: 'press'; key: string }
+    | { type: 'wait'; selector?: string; ms?: number }
+    | { type: 'scroll'; selector?: string; y: number }
+    | { type: 'capture'; state: string };
+
+/** A route of the running site, driven through `steps` and snapshotted at
+ *  each `capture` step. */
+export type PageSpec = {
+    name: string;
+    // The route with its query, e.g. "/data?q=kenya+debt".
+    path: string;
+    // CSS px; 1280×800 when absent.
+    viewport?: Viewport;
+    hooks?: PageHook[];
+    // A spec with no capture step captures once at the end, as "page".
+    steps?: PageStep[];
+};
+
+const failPage = (message: string): never => {
+    throw new Error(`page spec: ${message}`);
+};
+
+const NAME = /^[\w-]+$/;
+
+const isText = (value: unknown): value is string => typeof value === 'string' && value !== '';
+
+const readStep = (raw: unknown, index: number): PageStep => {
+    const at = `step ${index}`;
+
+    if (!isRecord(raw)) {
+        return failPage(`${at} must be an object`);
+    }
+
+    const need = (key: string) => {
+        if (!isText(raw[key])) {
+            failPage(`${at} (${String(raw.type)}) needs a non-empty "${key}"`);
+        }
+    };
+    const optionalNumber = (key: string) => {
+        if (raw[key] !== undefined && (typeof raw[key] !== 'number' || raw[key] < 0)) {
+            failPage(`${at} (${String(raw.type)}) "${key}" must be a number of at least 0`);
+        }
+    };
+
+    switch (raw.type) {
+        case 'click':
+        case 'hover':
+        case 'focus':
+            need('selector');
+            break;
+        case 'type':
+            need('selector');
+
+            if (typeof raw.text !== 'string') {
+                failPage(`${at} (type) needs a "text" string`);
+            }
+
+            break;
+        case 'press':
+            need('key');
+            break;
+        case 'wait':
+            if (raw.selector !== undefined) {
+                need('selector');
+            }
+
+            optionalNumber('ms');
+
+            if (raw.selector === undefined && raw.ms === undefined) {
+                failPage(`${at} (wait) needs a "selector" or "ms"`);
+            }
+
+            break;
+        case 'scroll':
+            if (raw.selector !== undefined) {
+                need('selector');
+            }
+
+            if (typeof raw.y !== 'number') {
+                failPage(`${at} (scroll) needs a "y" number`);
+            }
+
+            break;
+        case 'capture':
+            need('state');
+
+            if (!NAME.test(raw.state as string)) {
+                failPage(`${at} state "${String(raw.state)}" must be letters, digits, "_" or "-"`);
+            }
+
+            break;
+        default:
+            failPage(`${at} has the unknown type "${String(raw.type)}"`);
+    }
+
+    return raw as PageStep;
+};
+
+/**
+ * The page spec as parsed JSON, checked for what the capture relies on: a
+ * name and a route, a whole-px viewport, hooks with unique names usable as
+ * `data-v` values, known steps with their fields, and capture states that
+ * are unique and usable as file names.
+ */
+export const readPageSpec = (raw: unknown): PageSpec => {
+    if (!isRecord(raw)) {
+        return failPage('expected an object');
+    }
+
+    if (!isText(raw.name) || !NAME.test(raw.name)) {
+        failPage('"name" must be letters, digits, "_" or "-"');
+    }
+
+    if (!isText(raw.path) || !raw.path.startsWith('/')) {
+        failPage('"path" must be a route starting with "/"');
+    }
+
+    if (raw.viewport !== undefined) {
+        const viewport = raw.viewport as Partial<Viewport>;
+
+        if (
+            !isRecord(viewport) ||
+            !Number.isInteger(viewport.width) ||
+            !Number.isInteger(viewport.height) ||
+            viewport.width! <= 0 ||
+            viewport.height! <= 0
+        ) {
+            failPage('"viewport" needs whole, positive "width" and "height"');
+        }
+    }
+
+    const hooks = raw.hooks ?? [];
+    const steps = raw.steps ?? [];
+
+    if (!Array.isArray(hooks) || !Array.isArray(steps)) {
+        return failPage('"hooks" and "steps" must be arrays');
+    }
+
+    const names = new Set<string>();
+
+    for (const hook of hooks) {
+        if (!isRecord(hook) || !isText(hook.v) || !isText(hook.selector)) {
+            failPage('each hook needs a non-empty "v" and "selector"');
+        }
+
+        const { v } = hook as PageHook;
+
+        if (!NAME.test(v)) {
+            failPage(`hook "${v}" must be letters, digits, "_" or "-"`);
+        }
+
+        if (names.has(v)) {
+            failPage(`hook "${v}" is named twice`);
+        }
+
+        names.add(v);
+    }
+
+    const states = new Set<string>();
+
+    for (const step of steps.map(readStep)) {
+        if (step.type === 'capture') {
+            if (states.has(step.state)) {
+                failPage(`state "${step.state}" is captured twice`);
+            }
+
+            states.add(step.state);
+        }
+    }
+
+    return raw as PageSpec;
+};
+
+/** The spec's steps, ending in a capture of "page" when none captures. */
+export const pageSteps = (spec: PageSpec): PageStep[] => {
+    const steps = spec.steps ?? [];
+
+    return steps.some((step) => step.type === 'capture')
+        ? steps
+        : [...steps, { type: 'capture', state: 'page' }];
+};
diff --git a/motion-kit/stateClasses.ts b/motion-kit/stateClasses.ts
new file mode 100644
index 0000000..8524151
--- /dev/null
+++ b/motion-kit/stateClasses.ts
@@ -0,0 +1,158 @@
+import { dirname, join, relative, resolve } from 'node:path';
+
+import ts from 'typescript';
+
+/**
+ * The state classes of the app's components: for each class a component
+ * always applies, the classes it adds to the same element on a condition,
+ * read from the `classNames(…)` calls in the component's source. A
+ * condition reads `cond && styles.x`, `cond ? styles.x : styles.y` or
+ * `{ [styles.x]: cond }`; the rest of the call's `styles.*` arguments are
+ * the element's own classes. Class names come out as the bundle hashed
+ * them, from the class map of each SCSS module (`styles`, by repo path).
+ */
+
+export type Source = { path: string; text: string };
+
+/** Class maps of the bundle's SCSS modules, by path from the repo root. */
+export type StyleModules = Record<string, Record<string, string>>;
+
+/** Each own class mapped to the state classes that toggle beside it. */
+export type StateClasses = Record<string, string[]>;
+
+const modulePath = (specifier: string, from: string, repo: string): string =>
+    relative(
+        repo,
+        specifier.startsWith('@/')
+            ? join(repo, 'src', specifier.slice(2))
+            : resolve(dirname(from), specifier),
+    );
+
+export const stateClasses = (
+    sources: Source[],
+    styles: StyleModules,
+    repo: string,
+): StateClasses => {
+    const found = new Map<string, Set<string>>();
+
+    for (const { path, text } of sources) {
+        const file = ts.createSourceFile(
+            path,
+            text,
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.TSX,
+        );
+        // The local names of the `classnames` import and of each SCSS module.
+        const joiners = new Set<string>();
+        const modules = new Map<string, Record<string, string>>();
+
+        for (const statement of file.statements) {
+            const name = ts.isImportDeclaration(statement) && statement.importClause?.name?.text;
+
+            if (!name || !ts.isStringLiteral(statement.moduleSpecifier)) {
+                continue;
+            }
+
+            const specifier = statement.moduleSpecifier.text;
+
+            if (specifier === 'classnames') {
+                joiners.add(name);
+            } else if (specifier.endsWith('.module.scss')) {
+                const map = styles[modulePath(specifier, path, repo)];
+
+                if (map) {
+                    modules.set(name, map);
+                }
+            }
+        }
+
+        if (!joiners.size || !modules.size) {
+            continue;
+        }
+
+        const className = (node: ts.Expression): string | undefined => {
+            if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.expression)) {
+                return modules.get(node.expression.text)?.[node.name.text];
+            }
+
+            if (
+                ts.isElementAccessExpression(node) &&
+                ts.isIdentifier(node.expression) &&
+                ts.isStringLiteral(node.argumentExpression)
+            ) {
+                return modules.get(node.expression.text)?.[node.argumentExpression.text];
+            }
+
+            return undefined;
+        };
+
+        const read = (
+            node: ts.Expression,
+            conditional: boolean,
+            own: string[],
+            states: string[],
+        ) => {
+            const inner = ts.isParenthesizedExpression(node) ? node.expression : node;
+            const name = className(inner);
+
+            if (name) {
+                (conditional ? states : own).push(name);
+            } else if (ts.isBinaryExpression(inner)) {
+                const operator = inner.operatorToken.kind;
+
+                if (operator === ts.SyntaxKind.AmpersandAmpersandToken) {
+                    read(inner.right, true, own, states);
+                } else if (
+                    operator === ts.SyntaxKind.BarBarToken ||
+                    operator === ts.SyntaxKind.QuestionQuestionToken
+                ) {
+                    read(inner.left, true, own, states);
+                    read(inner.right, true, own, states);
+                }
+            } else if (ts.isConditionalExpression(inner)) {
+                read(inner.whenTrue, true, own, states);
+                read(inner.whenFalse, true, own, states);
+            } else if (ts.isObjectLiteralExpression(inner)) {
+                for (const property of inner.properties) {
+                    if (
+                        ts.isPropertyAssignment(property) &&
+                        ts.isComputedPropertyName(property.name)
+                    ) {
+                        read(property.name.expression, true, own, states);
+                    }
+                }
+            }
+        };
+
+        const visit = (node: ts.Node) => {
+            if (
+                ts.isCallExpression(node) &&
+                ts.isIdentifier(node.expression) &&
+                joiners.has(node.expression.text)
+            ) {
+                const own: string[] = [];
+                const states: string[] = [];
+
+                for (const argument of node.arguments) {
+                    read(argument, false, own, states);
+                }
+
+                for (const base of own) {
+                    const set = found.get(base) ?? new Set();
+
+                    states.forEach((state) => set.add(state));
+                    found.set(base, set);
+                }
+            }
+
+            ts.forEachChild(node, visit);
+        };
+
+        visit(file);
+    }
+
+    return Object.fromEntries(
+        [...found].filter(([, set]) => set.size).map(([base, set]) => [base, [...set].toSorted()]),
+    );
+};
diff --git a/motion-kit/stubs/next-link.tsx b/motion-kit/stubs/next-link.tsx
new file mode 100644
index 0000000..ee8c0cc
--- /dev/null
+++ b/motion-kit/stubs/next-link.tsx
@@ -0,0 +1,20 @@
+import type { AnchorHTMLAttributes } from 'react';
+
+// Link's own props, which an anchor does not take.
+const LINK_PROPS = new Set(['prefetch', 'replace', 'scroll', 'shallow', 'locale']);
+
+/** `next/link` for a render outside Next: a plain anchor. */
+const Link = ({
+    href,
+    ...rest
+}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string | { pathname?: string };
+    [prop: string]: unknown;
+}) => (
+    <a
+        href={typeof href === 'string' ? href : (href.pathname ?? '')}
+        {...Object.fromEntries(Object.entries(rest).filter(([key]) => !LINK_PROPS.has(key)))}
+    />
+);
+
+export default Link;
diff --git a/motion-kit/stubs/next-navigation.ts b/motion-kit/stubs/next-navigation.ts
new file mode 100644
index 0000000..77fbf1a
--- /dev/null
+++ b/motion-kit/stubs/next-navigation.ts
@@ -0,0 +1,19 @@
+/**
+ * `next/navigation` for a render outside Next: the Studio's own path, a
+ * router that goes nowhere and no query.
+ */
+
+const noop = () => {};
+
+export const usePathname = (): string => '/studio';
+
+export const useRouter = () => ({
+    push: noop,
+    replace: noop,
+    refresh: noop,
+    back: noop,
+    forward: noop,
+    prefetch: noop,
+});
+
+export const useSearchParams = (): URLSearchParams => new URLSearchParams();
diff --git a/motion-kit/stubs/server-only.ts b/motion-kit/stubs/server-only.ts
new file mode 100644
index 0000000..59b90ef
--- /dev/null
+++ b/motion-kit/stubs/server-only.ts
@@ -0,0 +1,2 @@
+// `server-only` for a render outside Next: the import is a guard, nothing more.
+export {};
diff --git a/motion-kit/test/capture.test.ts b/motion-kit/test/capture.test.ts
new file mode 100644
index 0000000..8e0286d
--- /dev/null
+++ b/motion-kit/test/capture.test.ts
@@ -0,0 +1,391 @@
+/**
+ * Page capture: the page spec's validation, the sanitiser's leak check, and
+ * captures of a small fixture page served from this process, so the tests
+ * need Chrome (or CHROMIUM_PATH) but not the site. The browser tests skip
+ * when no browser starts.
+ */
+import assert from 'node:assert/strict';
+import { mkdtemp, readFile, readdir, rm, writeFile } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import type { AddressInfo } from 'node:net';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { after, before, test } from 'node:test';
+
+import type { Browser } from 'playwright-core';
+
+import { launchBrowser } from '../browser.ts';
+import { generatePage } from '../capture.ts';
+import { htmlLeaks } from '../html.ts';
+import { pageSteps, readPageSpec } from '../spec.ts';
+
+const PNG = Buffer.from(
+    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==',
+    'base64',
+);
+
+const FIXTURE = `<!doctype html>
+<html lang="en"><head>
+<link rel="stylesheet" href="/site.css">
+<style>.inline-used { color: rgb(1, 2, 3); } .inline-unused { color: red; }</style>
+<script>window.loaded = true;</script>
+</head>
+<body class="page">
+<header class="bar">Fixture</header>
+<button class="go" onclick="alert(1)">Go</button>
+<input class="field" type="text" placeholder="Search">
+<label><input class="tick" type="checkbox"> Tick</label>
+<textarea class="note"></textarea>
+<img class="logo" src="/logo.png" alt="">
+<img class="far" src="http://example.invalid/far.png" alt="">
+<div class="tile">tile</div>
+<div class="banner" style="background-image: url(/tile.png)">banner</div>
+<canvas class="chart" width="40" height="20"></canvas>
+<iframe src="/frame.html" width="100" height="50"></iframe>
+<noscript><p>no script</p></noscript>
+<a class="out" href="https://example.org/elsewhere">elsewhere</a>
+<div class="list"><p>one</p><p>two</p><p>three</p><p>four</p></div>
+<p class="twin">a</p><p class="twin">b</p>
+<p class="inline-used">styled inline</p>
+<div class="tall"></div>
+<script>
+const context = document.querySelector('.chart').getContext('2d');
+context.fillStyle = 'rgb(0, 128, 0)';
+context.fillRect(0, 0, 40, 20);
+</script>
+</body></html>`;
+
+const CSS = `
+body { margin: 0; padding-top: 3rem; font-size: 1rem; }
+.tall { height: 1000px; }
+.bar { position: fixed; top: 0; left: 0; right: 0; height: 2rem; }
+.tile { width: 50vw; background: url(/tile.png) repeat; }
+.tile:hover { outline: 2px solid rgb(0, 0, 255); }
+.go::before { content: '>'; }
+.list { height: 40px; overflow: auto; }
+.list p { height: 30px; margin: 0; }
+.never-rendered { color: red; }
+@media (max-width: 400px) { .tile { width: 10px; } }
+@keyframes spin { to { transform: rotate(1turn); } }
+`;
+
+const serve = async () => {
+    // Served once: the page loads it, and the capture's re-read finds it gone.
+    let flakyServed = false;
+    const server = createServer((request, response) => {
+        const files: Record<string, [string, string | Buffer]> = {
+            '/': ['text/html', FIXTURE],
+            '/flaky': ['text/html', '<link rel="stylesheet" href="/flaky.css"><p>flaky</p>'],
+            '/flaky.css': ['text/css', 'p { color: red; }'],
+            '/site.css': ['text/css', CSS],
+            '/logo.png': ['image/png', PNG],
+            '/tile.png': ['image/png', PNG],
+            '/frame.html': ['text/html', '<p>frame</p>'],
+        };
+        const path = new URL(request.url ?? '/', 'http://x').pathname;
+        const gone = path === '/flaky.css' && flakyServed;
+
+        flakyServed ||= path === '/flaky.css';
+
+        const file = gone ? undefined : files[path];
+
+        response.writeHead(file ? 200 : 404, { 'content-type': file?.[0] ?? 'text/plain' });
+        response.end(file?.[1] ?? 'not found');
+    });
+
+    await new Promise<void>((resolve) => server.listen(0, '127.0.0.1', resolve));
+
+    return { server, base: `http://127.0.0.1:${(server.address() as AddressInfo).port}` };
+};
+
+test('a page spec is checked for its route, hooks, steps and states', () => {
+    const spec = {
+        name: 'kenya',
+        path: '/data',
+        hooks: [{ v: 'prompt', selector: 'textarea' }],
+        steps: [
+            { type: 'capture', state: 'empty' },
+            { type: 'type', selector: 'textarea', text: 'Kenya' },
+            { type: 'wait', ms: 10 },
+            { type: 'scroll', y: 200 },
+            { type: 'capture', state: 'typed' },
+        ],
+    };
+
+    assert.deepEqual(readPageSpec(structuredClone(spec)), spec);
+
+    const refusals: [unknown, RegExp][] = [
+        [{ ...spec, name: 'a b' }, /"name"/],
+        [{ ...spec, path: 'data' }, /"path"/],
+        [{ ...spec, viewport: { width: 0, height: 800 } }, /"viewport"/],
+        [
+            {
+                ...spec,
+                hooks: [
+                    { v: 'x', selector: 'a' },
+                    { v: 'x', selector: 'b' },
+                ],
+            },
+            /named twice/,
+        ],
+        [{ ...spec, hooks: [{ v: 'x y', selector: 'a' }] }, /hook "x y"/],
+        [{ ...spec, steps: [{ type: 'drag', selector: 'a' }] }, /unknown type "drag"/],
+        [{ ...spec, steps: [{ type: 'type', selector: 'a' }] }, /"text"/],
+        [{ ...spec, steps: [{ type: 'click' }] }, /"selector"/],
+        [{ ...spec, steps: [{ type: 'wait' }] }, /"selector" or "ms"/],
+        [{ ...spec, steps: [{ type: 'scroll' }] }, /"y"/],
+        [{ ...spec, steps: [{ type: 'capture', state: 'a/b' }] }, /state "a\/b"/],
+        [
+            {
+                ...spec,
+                steps: [
+                    { type: 'capture', state: 'a' },
+                    { type: 'capture', state: 'a' },
+                ],
+            },
+            /captured twice/,
+        ],
+    ];
+
+    for (const [raw, message] of refusals) {
+        assert.throws(() => readPageSpec(raw), message);
+    }
+
+    assert.deepEqual(pageSteps({ name: 'p', path: '/', steps: [{ type: 'press', key: 'Tab' }] }), [
+        { type: 'press', key: 'Tab' },
+        { type: 'capture', state: 'page' },
+    ]);
+});
+
+test('the leak check finds what a film cannot hold', () => {
+    assert.deepEqual(
+        htmlLeaks(
+            '<div onclick="x()"><script>1</script><canvas></canvas>' +
+                '<img src="https://example.org/a.png"><a href="/data">x</a>' +
+                '<div style="background: url(&quot;/bg.png&quot;)"></div></div>',
+        ),
+        [
+            '<script>',
+            '<canvas>',
+            'onclick attribute',
+            'src="https://example.org/a.png"',
+            'href="/data"',
+            'url(/bg.png)',
+        ],
+    );
+    assert.deepEqual(
+        htmlLeaks(
+            '<div><img src="data:image/png;base64,AA"><a href="#">x</a>' +
+                '<div style="background: url(&quot;data:image/png;base64,AA&quot;)">once upon</div></div>',
+        ),
+        [],
+    );
+});
+
+let browser: Browser | null = null;
+let fixture: Awaited<ReturnType<typeof serve>>;
+let out: string;
+
+before(async () => {
+    browser = await launchBrowser().catch(() => null);
+    fixture = await serve();
+    out = await mkdtemp(join(tmpdir(), 'motion-kit-capture-'));
+});
+
+after(async () => {
+    await browser?.close();
+    fixture.server.close();
+    await rm(out, { recursive: true, force: true });
+});
+
+const capture = async (spec: unknown, name = 'fixture', cues?: unknown) => {
+    const specPath = join(out, `${name}.json`);
+
+    await writeFile(specPath, JSON.stringify(spec));
+
+    if (cues) {
+        await writeFile(join(out, `${name}.cues.json`), JSON.stringify(cues));
+    }
+
+    return generatePage({
+        specPath,
+        base: fixture.base,
+        outDir: join(out, name),
+        browser: browser!,
+        stepTimeout: 10_000,
+    });
+};
+
+test('a fixture page captures as static markup and the CSS its states use', async (t) => {
+    if (!browser) {
+        t.skip('no browser: install Chrome or set CHROMIUM_PATH');
+
+        return;
+    }
+
+    const { modules, manifest, dropped } = await capture(
+        {
+            name: 'fixture',
+            path: '/',
+            viewport: { width: 800, height: 600 },
+            hooks: [
+                { v: 'tile', selector: '.tile' },
+                { v: 'field', selector: '.field' },
+            ],
+            steps: [
+                { type: 'capture', state: 'start' },
+                { type: 'type', selector: '.field', text: 'Kenya "debt"' },
+                { type: 'type', selector: '.note', text: 'a <note>' },
+                { type: 'click', selector: '.tick' },
+                { type: 'scroll', selector: '.list', y: 50 },
+                { type: 'scroll', y: 40 },
+                { type: 'hover', selector: '.tile' },
+                { type: 'capture', state: 'filled' },
+            ],
+        },
+        'fixture',
+        {
+            keys: [{ t: 0 }, { t: 1, hook: 'tile', z: 2 }],
+            cues: [
+                { v: 'field', kind: 'type', text: 'Kenya', at: 0, cps: 10 },
+                { v: 'field', kind: 'remove', at: 1, in: 'start' },
+            ],
+        },
+    );
+    const text = (name: string) => modules.find((file) => file.name === name)!.text;
+    const start = text('start.html');
+    const filled = text('filled.html');
+    const css = text('dfo-ui.css');
+
+    for (const html of [start, filled]) {
+        assert.deepEqual(htmlLeaks(html), []);
+        assert.doesNotMatch(html, /<script|<canvas|<iframe|<noscript|\son[a-z]+=/i);
+        assert.doesNotMatch(html, /(?:src|href)="(?!data:|#)/);
+        // The canvas's pixels, as an image of the size it was laid out at.
+        assert.match(html, /<img class="chart" [^>]*src="data:image\/png;base64,/);
+        assert.match(html, /src="data:image\/png;base64,[^"]+" alt=""/);
+        assert.match(html, /^<div class="dfo-ui" data-viewport="800x600" data-state="\w+"/);
+        assert.match(
+            html,
+            /<div lang="en" data-mk-html=""><div class="page"[^>]* data-mk-body="">/,
+        );
+        assert.match(html, /<div class="tile" data-v="tile"/);
+    }
+
+    assert.match(
+        filled,
+        /class="field" type="text" placeholder="Search" data-v="field" value="Kenya &quot;debt&quot;"/,
+    );
+    assert.match(filled, /<textarea class="note"[^>]*>a &lt;note&gt;<\/textarea>/);
+    assert.match(filled, /class="tick" type="checkbox"[^>]*checked=""/);
+    assert.doesNotMatch(start, /checked/);
+    // The list's children move up by its scroll; the body's by the window's,
+    // and the fixed bar stays where it shows.
+    assert.match(filled, /<p style="translate: 0px -50px;">one/);
+    assert.match(
+        filled,
+        /<div class="tile" data-v="tile" data-mk-hover="" style="translate: 0px -40px;">/,
+    );
+    // A style rewritten for its url() keeps the shift.
+    assert.match(
+        filled,
+        /<div class="banner" style="background-image: url\(&quot;data:image\/png;base64,[^"]+; translate: 0px -40px;">/,
+    );
+    assert.match(filled, /<header class="bar">/);
+    assert.ok(
+        dropped.some((line) => line.startsWith('<img src="http://example.invalid/far.png">')),
+    );
+    assert.ok(dropped.some((line) => line.startsWith('<iframe src="/frame.html">')));
+
+    assert.match(css, /\.dfo-ui \.tile\[data-mk-hover\] \{\s*outline/);
+    assert.match(css, /\.dfo-ui \.inline-used/);
+    assert.match(css, /url\("data:image\/png;base64,/);
+    assert.match(
+        css,
+        /\.dfo-ui \[data-mk-body\] \{\s*margin: 0;\s*padding-top: 48px;\s*font-size: 16px/,
+    );
+    assert.match(css, /\.dfo-ui \.go::before/);
+    assert.match(css, /width: 400px/);
+    assert.doesNotMatch(css, /never-rendered|inline-unused|@keyframes|width: 10px/);
+
+    assert.deepEqual(manifest.modules, {
+        css: ['dfo-ui.css'],
+        html: { start: 'start.html', filled: 'filled.html' },
+        cues: 'cues.json',
+    });
+    assert.deepEqual(manifest.hooks, ['tile', 'field']);
+
+    const boxes = manifest.boxes as Record<string, Record<string, { y: number } | null>>;
+
+    assert.equal(boxes.tile!.filled!.y, boxes.tile!.start!.y - 40);
+
+    const stored = await readdir(join(out, 'fixture/store/modules'));
+
+    assert.deepEqual(stored.toSorted(), modules.map((file) => `${file.name}.json`).toSorted());
+    assert.equal(
+        JSON.parse(await readFile(join(out, 'fixture/store/modules/filled.html.json'), 'utf8'))
+            .kind,
+        'html',
+    );
+
+    // The preview plays the capture's cue sheet on the state it opens.
+    const page = await browser.newPage();
+
+    try {
+        await page.goto(
+            `${pathToFileURL(join(out, 'fixture/preview.html')).href}?state=filled&t=2`,
+        );
+        assert.equal(await page.locator('#error').textContent(), '');
+        assert.equal(await page.locator('#state').inputValue(), 'filled');
+        assert.equal(await page.locator('[data-v="field"]').inputValue(), 'Kenya');
+        // The cue `in` the other state is left out.
+        assert.ok(await page.locator('[data-v="field"]').isVisible());
+
+        // In its own state the `remove` hides the field from 1 s, and
+        // scrubbing back before it shows the field again.
+        const scrub = (t: number) =>
+            page.locator('#scrub').evaluate((input: HTMLInputElement, value) => {
+                input.value = String(value);
+                input.dispatchEvent(new Event('input'));
+            }, t);
+
+        await page.locator('#state').selectOption('start');
+        await scrub(2);
+        assert.ok(await page.locator('[data-v="field"]').isHidden());
+        await scrub(0.5);
+        assert.ok(await page.locator('[data-v="field"]').isVisible());
+    } finally {
+        await page.close();
+    }
+});
+
+test('a hook must find one element: never none in every state, never two', async (t) => {
+    if (!browser) {
+        t.skip('no browser: install Chrome or set CHROMIUM_PATH');
+
+        return;
+    }
+
+    await assert.rejects(
+        capture({ name: 'twin', path: '/', hooks: [{ v: 'twin', selector: '.twin' }] }, 'twin'),
+        /hook "twin": "\.twin" matches 2 elements/,
+    );
+    await assert.rejects(
+        capture({ name: 'none', path: '/', hooks: [{ v: 'gone', selector: '.gone' }] }, 'none'),
+        /hook "gone": "\.gone" matches nothing in any state/,
+    );
+});
+
+test('a stylesheet the server no longer has fails the capture', async (t) => {
+    if (!browser) {
+        t.skip('no browser: install Chrome or set CHROMIUM_PATH');
+
+        return;
+    }
+
+    await assert.rejects(
+        capture({ name: 'flaky', path: '/flaky' }, 'flaky'),
+        /stylesheet http:\/\/[\d.:]+\/flaky\.css answered 404/,
+    );
+});
diff --git a/motion-kit/test/motion-kit.test.ts b/motion-kit/test/motion-kit.test.ts
new file mode 100644
index 0000000..7de8384
--- /dev/null
+++ b/motion-kit/test/motion-kit.test.ts
@@ -0,0 +1,571 @@
+/**
+ * The motion-kit generator: the chart's value axis as Chart.js and
+ * `buildChartOptions` lay it out, what the film's modules may and may not
+ * hold, the motion and plan states read from the Kenya render, and the
+ * checks on specs, cue sheets, selectors and units. The chart and Kenya
+ * tests bundle render.tsx with esbuild (about a second), since the renderer
+ * imports the app's SCSS modules and SVG icons; the Kenya test also reads
+ * the motion in Chrome and is skipped where none is installed.
+ */
+import assert from 'node:assert/strict';
+import { mkdir, mkdtemp, readFile, readdir, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { after, before, test } from 'node:test';
+
+import postcss from 'postcss';
+import type { Browser } from 'playwright-core';
+
+import { launchBrowser } from '../browser.ts';
+import { cssModules, FONTS, generate, loadRenderer, MODULE_LIMIT, writeFilm } from '../build.ts';
+import { externalUrls, filmCss, mediaMatches, scopeSelector, toPx } from '../css.ts';
+import { readCues } from '../cues.ts';
+import { outfitMeasure, parseFont } from '../fontMetrics.ts';
+import type { Motion } from '../motion.ts';
+import { readSpec } from '../spec.ts';
+import type { ChartWidget } from '../../src/lib/chat/widgets.ts';
+import { plotHeight, plotShape } from '../../src/lib/studio/chartFit.ts';
+
+const KENYA = join(import.meta.dirname, '../demos/kenya-debt-health.json');
+
+const chart = (unit: string, series: (number | null)[][]): ChartWidget => ({
+    kind: 'chart',
+    id: 'c',
+    chartType: 'line',
+    title: 't',
+    unit,
+    categories: series[0]!.map((_, index) => String(2015 + index)),
+    series: series.map((values, index) => ({ label: `s${index}`, values })),
+});
+
+test('the value axis takes Chart.js nice steps under four ticks, in the app format', async () => {
+    const { renderer } = await loadRenderer();
+    const spec = JSON.parse(await readFile(KENYA, 'utf8'));
+    const kenya = spec.cards.find((card: { widget: ChartWidget }) => card.widget.kind === 'chart');
+    const axis = (widget: ChartWidget, line: boolean) => {
+        const layout = renderer.layoutDefaultChart(widget, { line, width: 446, fontsDir: FONTS });
+
+        const ticks = layout.valueTicks.map((tick) => tick.label);
+        const drawn = layout.texts.map((text) => text.text);
+
+        // What the axis holds is what reaches the film as HTML text.
+        assert.deepEqual(
+            [
+                ...ticks,
+                ...widget.categories,
+                ...(layout.valueTitle ? [layout.valueTitle] : []),
+            ].filter((label) => !drawn.includes(label)),
+            [],
+        );
+
+        return { ticks, title: layout.valueTitle };
+    };
+
+    // Max 5.67bn over at most 4 ticks: a 2bn step from zero.
+    assert.deepEqual(axis(kenya.widget, true), {
+        ticks: ['0', '2.0B', '4.0B', '6.0B'],
+        title: 'US Dollar',
+    });
+    // A percentage carries its sign on the ticks and has no axis title.
+    assert.deepEqual(
+        axis(
+            chart('Percent', [
+                [12.5, 33.1, 47.9],
+                [5, 9.5, null],
+            ]),
+            false,
+        ),
+        {
+            ticks: ['0%', '20%', '40%', '60%'],
+            title: null,
+        },
+    );
+    // Below zero the axis takes the same step down; thousands compact.
+    assert.deepEqual(
+        axis(
+            chart('Person', [
+                [-120, 340, 910],
+                [80, 200, 260],
+                [0, 50, 600],
+            ]),
+            true,
+        ),
+        {
+            ticks: ['-500', '0', '500', '1.0K'],
+            title: 'Person',
+        },
+    );
+});
+
+test('a ranking wraps its labels at the bold weight it draws them in, at a settled height', async () => {
+    const { renderer } = await loadRenderer();
+    const ranking: ChartWidget = {
+        kind: 'chart',
+        id: 'r',
+        chartType: 'bar',
+        horizontal: true,
+        title: 't',
+        unit: 'USD',
+        categories: ['Democratic Republic of the Congo', 'Kenya'],
+        series: [{ label: 's', values: [5.2e9, 3.1e9] }],
+    };
+    // The gutter is 34% of the plot: at 364 px, 123.8 px, which holds the
+    // name in Outfit 400 (122 px) but not in the 700 the gutter draws.
+    const width = 364;
+    const layout = renderer.layoutDefaultChart(ranking, { line: false, width, fontsDir: FONTS });
+    const drawn = layout.texts.map((text) => text.text);
+
+    assert.ok(drawn.includes('Democratic Republic of the'), drawn.join(' | '));
+    assert.ok(drawn.includes('Congo'), drawn.join(' | '));
+
+    // Drawn at the height its own value axis asks for, as the Studio's
+    // measuring ends, for one row (whose axis Chart.js caps) and two.
+    for (const rows of [1, 2]) {
+        const widget = {
+            ...ranking,
+            categories: ranking.categories.slice(0, rows),
+            series: [{ label: 's', values: [5.2e9, 3.1e9].slice(0, rows) }],
+        };
+        const settled = renderer.layoutDefaultChart(widget, {
+            line: false,
+            width,
+            fontsDir: FONTS,
+        });
+
+        assert.ok(settled.band !== null && settled.band > 0);
+        assert.equal(
+            Math.round(
+                plotHeight(plotShape(widget, false), {
+                    plotWidth: width,
+                    band: settled.band,
+                    cell: 20,
+                }),
+            ),
+            settled.height,
+        );
+    }
+});
+
+test('canvas font strings keep their weight with or without a style word', () => {
+    const measure = outfitMeasure(FONTS);
+    const text = 'Democratic Republic of the Congo';
+
+    assert.deepEqual(parseFont('700 8px Outfit'), {
+        style: 'normal',
+        weight: '700',
+        size: 8,
+        family: 'Outfit',
+    });
+    assert.equal(parseFont('italic bold 12.5px "Outfit", sans-serif').weight, '700');
+    assert.equal(parseFont('12px Outfit').weight, '400');
+    assert.equal(measure('700 8px Outfit', text), measure('normal 700 8px Outfit', text));
+    assert.ok(measure('700 8px Outfit', text) > measure('400 8px Outfit', text));
+    assert.throws(() => parseFont('8pt Outfit'), /cannot read/);
+    assert.throws(() => measure('8px DM Mono', text), /not Outfit/);
+});
+
+let browser: Browser | null = null;
+
+before(async () => {
+    browser = await launchBrowser().catch(() => null);
+});
+
+after(async () => {
+    await browser?.close();
+});
+
+test('the Kenya film modules hold no motion, no outside URL and no unscoped rule', async (t) => {
+    if (!browser) {
+        t.skip('Chrome is not installed');
+
+        return;
+    }
+
+    const out = await mkdtemp(join(tmpdir(), 'motion-kit-test-'));
+
+    try {
+        const { modules, manifest } = await generate({ specPath: KENYA, outDir: out, browser });
+        const css = modules.filter((file) => file.kind === 'css').map((file) => file.text);
+        const html = modules.find((file) => file.name === 'studio.html')!.text;
+
+        for (const text of css) {
+            assert.doesNotMatch(text, /@(-webkit-)?keyframes|@font-face/);
+            assert.doesNotMatch(
+                text,
+                /(^|[;{\s])(-webkit-|-moz-)?(animation|transition)[\w-]*\s*:/,
+            );
+            assert.deepEqual(externalUrls(text), []);
+            postcss.parse(text).walkRules((rule) => {
+                for (const selector of rule.selectors) {
+                    assert.match(selector, /^\.dfo-ui(?![\w-])/, selector);
+                    assert.doesNotMatch(
+                        selector,
+                        /(^|[\s,>+~(])(:root|html|body)(?![\w-])/,
+                        selector,
+                    );
+                }
+            });
+        }
+
+        for (const file of modules) {
+            assert.ok(Buffer.byteLength(file.text) <= MODULE_LIMIT, file.name);
+        }
+
+        const hooks = manifest.hooks as string[];
+
+        for (const hook of hooks) {
+            assert.equal(html.split(`data-v="${hook}"`).length - 1, 1, hook);
+        }
+
+        assert.ok(hooks.includes('series-debt-vs-health-1'));
+        assert.doesNotMatch(html, /<script|<canvas|<text[\s>]/);
+
+        // Both plan states are in the one fragment, each with its hooks.
+        assert.deepEqual(manifest.states, {
+            pending: { hooks: ['plan', 'plan-bar', 'plan-approve'] },
+            approved: {
+                hooks: ['plan-pill'],
+                attrs: {
+                    prompt: { placeholder: 'Ask a follow up...', 'aria-label': 'Ask a follow up' },
+                },
+            },
+        });
+
+        // The app's motion, read before the stylesheet dropped it: each card
+        // arrives with the card's own keyframes.
+        const { keyframes, animations, transitions } = manifest as unknown as Motion;
+        const arrivals = animations.filter(({ name }) => /widget-in$/.test(name));
+
+        assert.deepEqual(
+            arrivals.map(({ v }) => v),
+            ['card-debt-service-2024', 'card-health-aid-2024', 'card-debt-vs-health'],
+        );
+        assert.equal(arrivals[0]!.duration, 0.45);
+        assert.deepEqual(keyframes[arrivals[0]!.name], [
+            { offset: 0, style: { opacity: '0', translate: '0 10px' } },
+        ]);
+        assert.ok(animations.some(({ v, name }) => v === 'canvas' && /board-in$/.test(name)));
+        assert.deepEqual(
+            Object.keys(keyframes).toSorted(),
+            [...new Set(animations.map(({ name }) => name))].toSorted(),
+        );
+        // A tab switch eases the view in; a segmented tab turning active eases
+        // its colour.
+        assert.deepEqual(
+            transitions['.ChatPanel_module_viewActive']
+                ?.find(({ element }) => element.v === 'view-activity')
+                ?.properties.map(({ property }) => property),
+            ['opacity', 'translate'],
+        );
+        assert.ok(
+            transitions['[data-active="true"]']?.every(({ properties }) =>
+                properties.some(({ property }) => property === 'color'),
+            ),
+        );
+
+        // The cue sheet beside the spec rides along.
+        const cues = JSON.parse(modules.find((file) => file.name === 'cues.json')!.text);
+
+        assert.ok(
+            cues.cues.some(
+                ({ v, kind }: { v: string; kind: string }) =>
+                    v === 'plan-approve' && kind === 'press',
+            ),
+        );
+        assert.equal((manifest.modules as { cues?: string }).cues, 'cues.json');
+
+        const stored = await readdir(join(out, 'store/modules'));
+
+        assert.deepEqual(stored.toSorted(), modules.map((file) => `${file.name}.json`).toSorted());
+
+        for (const file of modules) {
+            const document = JSON.parse(
+                await readFile(join(out, 'store/modules', `${file.name}.json`), 'utf8'),
+            );
+
+            assert.deepEqual(document, { kind: file.kind, text: file.text });
+        }
+
+        // The preview plays the film through the runtime: every frame is the
+        // same played forwards or backwards, the prompt grows past one line
+        // as the question is typed, and approval swaps the plan for its pill.
+        const page = await browser.newPage();
+
+        try {
+            await page.goto(pathToFileURL(join(out, 'preview.html')).href);
+
+            const film = await page.evaluate(() => {
+                const scrub = document.querySelector<HTMLInputElement>('#scrub')!;
+                const at = (t: number) => {
+                    scrub.value = String(t);
+                    scrub.dispatchEvent(new Event('input'));
+                };
+                const shown = (hook: string) =>
+                    getComputedStyle(document.querySelector(`[data-v="${hook}"]`)!).display !==
+                    'none';
+                const prompt = document.querySelector<HTMLTextAreaElement>('[data-v="prompt"]')!;
+                const line = parseFloat(getComputedStyle(prompt).lineHeight);
+
+                const frame = (t: number) => {
+                    at(t);
+                    // An emptied inline style renders as none at all.
+                    return document
+                        .querySelector('.dfo-desk')!
+                        .outerHTML.replaceAll(' style=""', '');
+                };
+                const times = Array.from({ length: Math.ceil(Number(scrub.max) * 2) + 1 }, (_, i) =>
+                    Math.min(i / 2, Number(scrub.max)),
+                );
+                const forwards = times.map(frame);
+                const backwards = times.toReversed().map(frame).toReversed();
+                const differ = times.filter((_, i) => forwards[i] !== backwards[i]);
+
+                at(4.2);
+                const lines = Math.round(prompt.offsetHeight / line);
+                at(9.5);
+                const pending = [shown('plan'), shown('plan-pill')];
+                at(10.8);
+                const approved = [shown('plan'), shown('plan-pill')];
+
+                return {
+                    error: document.querySelector('#error')!.textContent,
+                    length: Number(scrub.max),
+                    differ,
+                    lines,
+                    pending,
+                    approved,
+                };
+            });
+
+            assert.equal(film.error, '');
+            assert.ok(film.length > 20, `the preview runs ${film.length} s`);
+            assert.deepEqual(film.differ, []);
+            assert.ok(film.lines > 1, `prompt is ${film.lines} line(s) tall`);
+            assert.deepEqual(film.pending, [true, false]);
+            assert.deepEqual(film.approved, [false, true]);
+        } finally {
+            await page.close();
+        }
+    } finally {
+        await rm(out, { recursive: true, force: true });
+    }
+});
+
+test('media queries are decided at the viewport, and an unknown feature or type is refused', () => {
+    const desktop = { width: 1280, height: 800 };
+
+    for (const [query, matches] of [
+        ['(min-width: 1024px) and (max-height: 710px)', false],
+        ['(max-width: 659px), (min-width: 1024px)', true],
+        ['(prefers-reduced-motion: reduce)', false],
+        ['(max-width: 600px) or (min-width: 1000px)', true],
+        ['not (max-width: 600px)', true],
+        ['only screen and (min-width: 1000px)', true],
+        ['screen and not (min-width: 1000px)', false],
+        ['print', false],
+        ['not print', true],
+        ['all', true],
+    ] as const) {
+        assert.equal(mediaMatches(query, desktop), matches, query);
+    }
+
+    for (const [query, problem] of [
+        ['(scripting: none)', /scripting/],
+        ['(max-width: 600px) or (scripting: none)', /scripting/],
+        ['tv and (min-width: 1000px)', /media type "tv"/],
+        ['screen and (max-width: 600px) or (min-width: 1000px)', /media condition/],
+        ['(min-width: 1px) and (max-width: 2px) or (hover: hover)', /media condition/],
+        ['((min-width: 1px))', /media condition/],
+    ] as const) {
+        assert.throws(() => mediaMatches(query, desktop), problem, query);
+    }
+});
+
+test('a stylesheet URL outside the film is found in a url() or a quoted @import', () => {
+    assert.deepEqual(
+        externalUrls(
+            '@import "https://fonts.example/x.css"; @import url(/y.css);' +
+                ' .a { background: url("data:image/png;base64,AA"); mask: url(#m); }',
+        ),
+        ['/y.css', 'https://fonts.example/x.css'],
+    );
+});
+
+test('the stylesheet splits so each store document, escaped, fits the module limit', () => {
+    // Backslashes and quotes double in JSON: the text alone would fit.
+    const rule = (index: number) => `.r${index}::before { content: "${'\\"'.repeat(200)}"; }\n`;
+    const css = Array.from({ length: 300 }, (_, index) => rule(index)).join('');
+    const modules = cssModules(css);
+
+    assert.ok(Buffer.byteLength(css) < MODULE_LIMIT);
+    assert.ok(modules.length > 1);
+
+    for (const { kind, text } of modules) {
+        assert.ok(Buffer.byteLength(JSON.stringify({ kind, text })) <= MODULE_LIMIT);
+    }
+});
+
+test('a film replaces a previous film, never a directory of other files', async () => {
+    const out = await mkdtemp(join(tmpdir(), 'motion-kit-out-'));
+    const film = join(out, 'film');
+    const manifest = { name: 'manifest.json', kind: 'json', text: '{}' } as const;
+
+    try {
+        await writeFilm(film, [manifest]);
+        await writeFilm(film, [manifest]);
+        await mkdir(join(out, 'specs'));
+        await writeFile(join(out, 'specs/demo.json'), '{}');
+        await assert.rejects(writeFilm(join(out, 'specs'), [manifest]), /specs holds files/);
+        assert.equal(await readFile(join(out, 'specs/demo.json'), 'utf8'), '{}');
+    } finally {
+        await rm(out, { recursive: true, force: true });
+    }
+});
+
+test('selectors go under the wrapper, which stands for :root, html and body', () => {
+    for (const [selector, scoped] of [
+        ['.card', '.dfo-ui .card'],
+        ['html', '.dfo-ui'],
+        ['html body', '.dfo-ui'],
+        [':root body .page', '.dfo-ui .page'],
+        [':root[data-theme="dark"]', '.dfo-ui[data-theme="dark"]'],
+        ['body > main', '.dfo-ui > main'],
+        ['bodyText', '.dfo-ui bodyText'],
+        ['html-root', '.dfo-ui html-root'],
+    ]) {
+        assert.equal(scopeSelector(selector!), scoped, selector);
+    }
+});
+
+test('rem and viewport units become px at the root size and viewport', () => {
+    const viewport = { width: 1280, height: 800 };
+
+    for (const [value, px] of [
+        ['1.5rem', '24px'],
+        ['-.5rem 0', '-8px 0'],
+        ['calc(100dvh - 2rem)', 'calc(800px - 32px)'],
+        ['10vmin 10vmax', '80px 128px'],
+        ['33.333vw', '426.662px'],
+        ['50svh 1lvw', '400px 12.8px'],
+        ['2em 10px', '2em 10px'],
+    ]) {
+        assert.equal(toPx(value!, viewport, 16), px, value);
+    }
+
+    // A page captured at its own root size converts at that size.
+    assert.equal(toPx('2rem', viewport, 10), '20px');
+});
+
+test('a spec at a phone viewport or with a card off the grid is refused', () => {
+    const spec = { title: 't', question: 'q', messages: [], cards: [] };
+
+    assert.doesNotThrow(() => readSpec({ ...spec, viewport: { width: 660, height: 800 } }));
+    assert.throws(
+        () => readSpec({ ...spec, viewport: { width: 390, height: 844 } }),
+        /390 px wide.*660 px/,
+    );
+
+    const card = (slot: object) => ({ ...spec, cards: [{ widget: { id: 'c' }, slot }] });
+
+    assert.doesNotThrow(() => readSpec(card({ col: 0, row: 0, w: 24, h: 3 })));
+
+    for (const [slot, problem] of [
+        [{ col: -1, row: 0 }, /non-negative "col"/],
+        [{ col: 0, row: 1.5 }, /non-negative "row"/],
+        [{ col: 0, row: 0, w: '24' }, /positive "w"/],
+        [{ col: 0, row: 0, h: -3 }, /positive "h"/],
+        [{ col: 0, row: 0, w: 0 }, /positive "w"/],
+    ] as const) {
+        assert.throws(() => readSpec(card(slot)), problem, JSON.stringify(slot));
+    }
+});
+
+test('a cue sheet names fragment hooks, known kinds and keys in time order', () => {
+    const hooks = ['prompt', 'plan', 'plan-approve'];
+    const good = {
+        keys: [{ t: 0 }, { t: 1.3, hook: 'prompt', z: 1.9 }],
+        cues: [{ v: 'plan-approve', kind: 'press', at: 10 }],
+    };
+
+    assert.deepEqual(readCues(good, hooks), good);
+
+    for (const [sheet, problem] of [
+        [
+            {
+                ...good,
+                cues: [
+                    { v: 'plan', sel: '.x', kind: 'press', at: 1 },
+                    { v: 'gone', kind: 'show', at: 1 },
+                ],
+            },
+            /cue 1 names "gone"/,
+        ],
+        [{ ...good, cues: [{ v: 'plan', kind: 'wiggle', at: 1 }] }, /kind "wiggle"/],
+        [{ ...good, cues: [{ v: 'plan', kind: 'show' }] }, /start time "at"/],
+        [{ ...good, keys: [{ t: 2 }, { t: 1 }] }, /key 1 at 1 s does not come after key 0 at 2 s/],
+        [{ ...good, keys: [{ t: 0, hook: 'msg-9' }] }, /key 0 names "msg-9"/],
+        [
+            { ...good, cues: [{ v: 'plan', kind: 'tab', at: 1, from: 'view-x' }] },
+            /"from" names "view-x"/,
+        ],
+        [{ ...good, cues: [{ v: 'plan', kind: 'tab', at: 1 }] }, /needs "from"/],
+        [{ ...good, cues: [{ v: 'prompt', kind: 'type', at: 1 }] }, /needs the "text"/],
+        [{ ...good, cues: [{ v: 'plan', kind: 'show', at: 1, dur: '1' }] }, /"dur" that is not/],
+        [{ ...good, keys: [{ t: 0, drift: [0, 1] }] }, /"drift" as three numbers/],
+        [
+            { ...good, cues: [{ v: 'plan', name: 'x', kind: 'animate', at: 1 }] },
+            /both a hook and keyframes/,
+        ],
+    ] as const) {
+        assert.throws(() => readCues(sheet, hooks), problem);
+    }
+
+    assert.throws(
+        () =>
+            readCues({ keys: [], cues: [{ v: 'plan', kind: 'animate', at: 0 }] }, hooks, {
+                animated: ['prompt'],
+            }),
+        /which the app does not animate/,
+    );
+
+    // A page capture's cue or key plays in every state, or in its `in` one,
+    // and its hooks must be there.
+    const page = {
+        states: ['empty', 'typed'],
+        boxes: { prompt: { empty: {}, typed: {} }, plan: { empty: null, typed: {} } },
+    };
+    const staged = {
+        keys: [{ t: 0, hook: 'plan', in: 'typed' }],
+        cues: [
+            { v: 'prompt', kind: 'type', text: 'x', at: 0 },
+            { v: 'plan', kind: 'show', at: 1, in: 'typed' },
+        ],
+    };
+
+    assert.deepEqual(readCues(staged, hooks, { page }), staged);
+
+    for (const [sheet, targets, problem] of [
+        [{ keys: [], cues: [{ v: 'plan', kind: 'show', at: 1 }] }, { page }, /absent from empty/],
+        [{ keys: [{ t: 0, in: 'done' }], cues: [] }, { page }, /not a captured state/],
+        [staged, {}, /only a page capture's may/],
+        [
+            { keys: [], cues: [{ v: 'plan', kind: 'animate', at: 0, in: 'typed' }] },
+            { page },
+            /needs the Studio/,
+        ],
+    ] as const) {
+        assert.throws(() => readCues(sheet, hooks, targets), problem);
+    }
+});
+
+test('the stylesheet keeps its motion, scoped, only when asked', () => {
+    const css =
+        '@keyframes spin { from { rotate: 0deg } to { rotate: 1turn } } .a { animation: spin 1s; margin: 1rem }';
+    const kept = filmCss(css, { width: 1280, height: 800 }, { keepMotion: true });
+    const frozen = filmCss(css, { width: 1280, height: 800 });
+
+    assert.match(kept, /@keyframes spin\s*\{\s*from\s*\{/);
+    assert.match(kept, /\.dfo-ui \.a\s*\{\s*animation: spin 1s;\s*margin: 16px/);
+    assert.doesNotMatch(frozen, /keyframes|animation/);
+});
diff --git a/package.json b/package.json
index ad779ee..6fbf608 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,9 @@
     "lint": "eslint",
     "lint:css": "stylelint \"src/**/*.scss\"",
     "lint:css:fix": "stylelint \"src/**/*.scss\" --fix",
+    "motion-kit": "node motion-kit/cli.ts",
     "typecheck": "tsc --noEmit",
-    "test": "node --test db/test/*.test.ts src/lib/search/test/*.test.ts src/lib/studio/test/*.test.ts src/lib/chat/test/*.test.ts src/lib/proxy/test/*.test.ts src/lib/auth/test/*.test.ts src/lib/mail/test/*.test.ts src/lib/sources/test/*.test.ts src/lib/test/*.test.ts src/lib/docs/test/*.test.ts",
+    "test": "node --test db/test/*.test.ts src/lib/search/test/*.test.ts src/lib/studio/test/*.test.ts src/lib/chat/test/*.test.ts src/lib/proxy/test/*.test.ts src/lib/auth/test/*.test.ts src/lib/mail/test/*.test.ts src/lib/sources/test/*.test.ts src/lib/test/*.test.ts src/lib/docs/test/*.test.ts motion-kit/test/*.test.ts",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,json,scss}\"",
     "optimize:svg": "svgo -f src/assets -r",
     "db:generate": "drizzle-kit generate",
@@ -66,6 +67,7 @@
     "esbuild": "^0.25.0",
     "eslint": "^9",
     "eslint-config-next": "16.3.0",
+    "playwright-core": "^1.64.1",
     "postcss": "^8.5.26",
     "postcss-scss": "^4.0.9",
     "prettier": "3.9.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18dca21..16f4500 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,9 @@ importers:
       eslint-config-next:
         specifier: 16.3.0
         version: 16.3.0(@typescript-eslint/parser@8.67.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5)(typescript@5.9.3)
+      playwright-core:
+        specifier: ^1.64.1
+        version: 1.64.1
       postcss:
         specifier: ^8.5.26
         version: 8.5.26
@@ -5314,6 +5317,11 @@ packages:
     resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
+  playwright-core@1.64.1:
+    resolution: {integrity: sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   points-on-curve@0.2.0:
     resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
 
@@ -11783,6 +11791,8 @@ snapshots:
 
   picomatch@4.0.5: {}
 
+  playwright-core@1.64.1: {}
+
   points-on-curve@0.2.0: {}
 
   points-on-path@0.2.1:

From 458dcd6339c3962e9bd31f6f982de7954e4d0075 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 15:47:46 +0100
Subject: [PATCH 3/7] docs(skills): add the dfo-motion-demo skill

The skill takes a demo from a data question to a published Motion film:
the figures from the DFO MCP server (health aid as CRS 120 plus 130), a
Studio or page-capture spec, the cue sheet, generating and previewing,
and loading the modules into a film. .gitignore now keeps
.claude/skills/ while ignoring the rest of .claude/.
---
 .claude/skills/dfo-motion-demo/SKILL.md | 123 ++++++++++++++++++++++++
 .gitignore                              |   3 +-
 2 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 .claude/skills/dfo-motion-demo/SKILL.md

diff --git a/.claude/skills/dfo-motion-demo/SKILL.md b/.claude/skills/dfo-motion-demo/SKILL.md
new file mode 100644
index 0000000..ac84c4e
--- /dev/null
+++ b/.claude/skills/dfo-motion-demo/SKILL.md
@@ -0,0 +1,123 @@
+---
+name: dfo-motion-demo
+description: Make a demo film of the DFO website for Claude Motion with motion-kit, from a data question to a published film that shows the real Studio or any other page of the site. Covers checking the figures with the DFO MCP server, writing a Studio spec or a page-capture spec, timing it with a cue sheet, generating the modules, checking them in the local preview, and loading them into a Motion film. Use whenever someone asks for a DFO demo video, a Motion film, a screen-recording-style walkthrough of the Studio, data search, a source page or any route of the site, turning a storyboard into a film, or changing an existing DFO film, even if they only say "make a demo of X" or "animate this question".
+---
+
+# DFO demo films with motion-kit
+
+A film shows the site itself, so viewers see what they would see using DFO. `motion-kit/` renders the Studio from the app's own components, and captures any other route from the running site, as static HTML and CSS a Motion film can hold. A cue sheet then drives it: typing, replies, the plan, cards arriving, charts drawing, and the camera. Because the markup comes from the components, a regenerated film follows the site as it changes.
+
+`motion-kit/README.md` is the reference for every spec field, cue kind and output file. Read "The demo spec" and "The cue sheet" before a Studio film, and "Page capture" before any other page.
+
+One generator run makes one film's modules: one Studio render, or one page capture with several states. A demo that needs both is two films.
+
+## 1. Get the figures from DFO
+
+Every number on screen is a claim about the world made in DFO's name, so it comes from the DFO MCP server and is checked before anything is built. Use `search` to find the dataset, `get_data` to fetch it, and the analysis tools (`aggregate`, `quotient_of`, `growth`) for derived figures. Keep each figure's dataset, unit, year and source. For a demo with many figures, send an agent to recompute them independently and compare.
+
+House conventions:
+
+- Health aid is OECD CRS purposes 120 (health) plus 130 (population policies and reproductive health, which holds HIV/AIDS). Fetch with `breakdown {"code_system": "crsPurpose", "level": 1}` and sum both. Purpose 120 alone misses HIV money such as PEPFAR and undercounts Kenya's health aid by more than half.
+- Name the definition where the figure shows, as the Kenya answer does: "Health aid counts purposes 120 and 130, which covers HIV/AIDS."
+- Use the latest complete year DFO holds and current US dollars unless the question says otherwise, and round as the Studio does ($5.7bn, $741m).
+
+Before writing the spec, show the user the figures, their sources and any ratio built from them, and make the wording of each claim match its number ("nearly eight times" for 7.7).
+
+## 2. Choose what the film shows
+
+- **The Studio** (a question, its plan, the board and the answer): a Studio spec in `motion-kit/demos/<name>.json`, rendered from the components. Capturing the live Studio would need a real conversation with the planner, so the renderer builds it from a spec instead.
+- **Any other page** (data search, a source page, docs, the homepage, tools): a page spec in `motion-kit/pages/<name>.json`, captured from the running site in Chrome. Each `capture` step is one state of the page, and a film mounts one state per scene.
+
+## 3. Write the spec
+
+### Studio
+
+Start from `motion-kit/demos/kenya-debt-health.json`. The types are in `motion-kit/spec.ts` and reuse the app's own (`ChatMessage`, `PlanState`, `Widget`), so the plan, choices and cards render as the Studio shows them today. Points that catch people out:
+
+- `question` is the prompt typed into the chat input, and the first message repeats it.
+- The top-level `plan` is the one waiting for approval. The answer the approval resumed carries the same plan as its `plan`, which shows as the pill under it.
+- Card ids are letters, digits, `_` or `-`, since they name hooks. Give a chart card the `h` the Studio settles on (the Kenya chart is 24×21), because the renderer cannot measure the live card.
+- `viewport` is at least 660 px wide; below that the Studio switches to its phone layout, which the renderer does not draw.
+
+### Any other page
+
+Start from `motion-kit/pages/kenya-debt-search.json`. The capture reads the running site, so start it first:
+
+```bash
+pnpm dev --port 3100
+```
+
+Name the elements the film animates or the camera visits in `hooks`, each a plain CSS selector that finds one element. Write the steps a user would take, with a `wait` for anything that arrives with data and a `capture` wherever the film needs a state. A search answer can take two minutes to stream, and a capture without the `wait` freezes the page before it arrives.
+
+## 4. Write the cue sheet
+
+The cue sheet sits beside the spec as `<name>.cues.json`, with camera `keys` and `cues`. Times are seconds from the start of the film. Start from `motion-kit/demos/kenya-debt-health.cues.json`, which follows the Studio's own sequence:
+
+- At 0, `animate` the page-load entrance by keyframe name (`Studio_module_board-in`, `Studio_module_bar-in`, `WorkspaceToolbar_module_ws-rise`, `ChatPanel_module_chat-in`). These play the app's own keyframes with its timings, which is what makes the film feel like the Studio.
+- `type` the question at about 26 characters a second, and `press` send. `show` the user's message with `dur: 0`, since a new message simply appears, and use `clearAt` to empty the field.
+- `stream` the reply's text (`sel: ".ChatPanel_module_botText"`) at 12 to 14 words a second.
+- `show` the plan and its bar, `press` Approve, then at one moment `remove` both, switch `state` to `approved` and `show` the pill. That is what the Studio does on approval.
+- `animate` each card on its hook a few tenths of a second apart, then `draw` each chart series over about 1.8 s.
+
+Camera keys centre on a hook at zoom `z`, measured as the page stands at that key's time. Zoom 1.6 to 1.9 makes text readable and 1 shows the whole page. Hold at least 2.5 s on anything the viewer must read, and end wide so the last frame shows the whole answer. A Kenya-length film runs 20 to 30 s.
+
+For a page capture, a cue or key that belongs to one state names it in `in` (`"in": "results"`). One without `in` plays in every state, so its hooks must exist in all of them. Captures have no app motion, so `animate`, `state` and `tab` cues are Studio-only.
+
+## 5. Generate and preview
+
+```bash
+pnpm motion-kit motion-kit/demos/<name>.json
+pnpm motion-kit capture motion-kit/pages/<name>.json --base http://localhost:3100
+```
+
+The generator checks the spec and cue sheet against the render and lists every problem it finds: a missing hook, state or keyframe, a cue field of the wrong type, a module over 200 KiB, an outside URL. Fix them and run it again. Each run replaces `motion-kit/dist/<name>/`.
+
+Then open `motion-kit/dist/<name>/preview.html`. It plays the cue sheet through the film's own runtime, with a scrubber, `?t=9.5` to open at a time and a state menu for captures; a runtime error shows above the stage. The built-in browser cannot open `file://` pages, so serve the folder for it:
+
+```bash
+python3 -m http.server 8765 --bind 127.0.0.1 --directory motion-kit/dist
+```
+
+Look at a frame at every beat (before typing, the prompt grown, the plan, after approval, the cards, the end) and scrub the whole film both ways. When something looks wrong, compare it with the live site in the same state. Show the user those frames before publishing, since a change is cheaper here than in Motion.
+
+What the kit cannot do yet, so the user knows before they watch:
+
+- The page-load entrance makes the first frame, which Motion uses as the thumbnail, mostly empty. Start the cue sheet after the entrance if the thumbnail matters.
+- A chart's plot can sit a few px off the live card's.
+- The activity log can only show settled steps folded behind their toggle.
+- A capture is frozen at rest: the typing caret and anything still animating are absent.
+
+## 6. Publish to Motion
+
+1. Find the Motion type with the Artifact tool (`action: "list"`, `scope: "types"`) and create a film from its `type_url` with a `title` and `auto_open: "after_first_write"`. The result carries the type's instructions and references (`film-api.md`, `finalize.md`). Read them: they define the store and the `kit` API, and where they differ from this skill they are right.
+2. Write the store with one `ArtifactData` `batch`:
+    - `film/meta`: `{ "v": 1, "title": …, "updatedAt": … }`.
+    - `modules/<file>` for every file in `motion-kit/dist/<name>/store/modules/`, each with `file_path` pointing at that `<file>.json`. The documents are large and exact, and a retyped copy drifts from what the preview checked.
+    - `modules/scenes.json`, then one `modules/scene-<id>.js` per scene.
+3. Scenes split the film into named beats whose `dur` values sum to the preview's length. Every scene mounts the same render and reads one film clock, so cuts between scenes do not show:
+
+```js
+kit.scene('plan', {
+    init(kit) {
+        const d = kit.json('cues.json');
+        this.studio = window.DFO.mount(kit, { keys: d.keys }).cue(d.cues);
+        this.t0 = kit.start;
+    },
+    render(t) {
+        this.studio.render(this.t0 + t);
+    },
+});
+```
+
+For a page capture, each scene mounts its state, and the runtime keeps only the cues and keys for that state: `window.DFO.mount(kit, { state: 'results', keys: d.keys }).cue(d.cues)`.
+
+`scenes.json` follows the type's instructions. The Kenya film uses `"stage": "final"`, 1920×1080 at 60 fps, a `#ecece0` background, and the fonts the stylesheet points at: Outfit as `sans` and DM Mono as `mono`. Add music only when the user asks for it.
+
+To change a published film, regenerate, `get` each changed module's version, and `set` only the changed modules with `if_version`, so a concurrent edit in Motion is not overwritten.
+
+## 7. Before calling it done
+
+- The figures on screen match what DFO returned in step 1.
+- The preview scrubs from 0 to the end with no error.
+- The user has watched the film in Motion. The built-in browser is not signed in to claude.ai and cannot play it, so ask the user to check it there.
+- The spec and cue sheet are saved under `motion-kit/demos/` or `motion-kit/pages/`, where they can be committed. `motion-kit/dist/` is ignored by git.
diff --git a/.gitignore b/.gitignore
index f0e73d5..e7063ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,5 +29,6 @@ CLAUDE.md
 *.pem
 npm-debug.log*
 
-/.claude
+/.claude/*
+!/.claude/skills/
 /.idea

From 9157618c9d5e9b4d9c3044eb7f0f2fc1e17c0159 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 16:10:03 +0100
Subject: [PATCH 4/7] feat(motion-kit): play a page capture's states as one
 film

The runtime measured a hook from layout offsets, which leave out the
translate a capture uses for its scroll, so a camera key on a hook in a
scrolled state aimed hundreds of px off. box() now measures the element
as rendered inside the frame and divides out the frame's own scale, so
every transform inside the frame counts, the transcript pin included.

A capture's preview.html offers "film" when its camera keys name states:
it mounts each state from its first key's time, as the film's scenes do,
so a whole capture film plays and scrubs before it reaches Motion.

motion-kit/pages/uganda-oda-search.json captures a data search on the
site, "ODA to Uganda since 2015": the question typed, its match, the
answer, the measure menu, net disbursements chosen, and the results
table, with a cue sheet that frames each state.
---
 .claude/skills/dfo-motion-demo/SKILL.md      |  6 +--
 motion-kit/README.md                         |  2 +-
 motion-kit/pages/uganda-oda-search.cues.json | 37 ++++++++++++++++++
 motion-kit/pages/uganda-oda-search.json      | 41 ++++++++++++++++++++
 motion-kit/preview.ts                        | 35 ++++++++++++++---
 motion-kit/runtime/dfo-motion.js             | 32 +++++++--------
 motion-kit/test/capture.test.ts              | 12 ++++++
 7 files changed, 138 insertions(+), 27 deletions(-)
 create mode 100644 motion-kit/pages/uganda-oda-search.cues.json
 create mode 100644 motion-kit/pages/uganda-oda-search.json

diff --git a/.claude/skills/dfo-motion-demo/SKILL.md b/.claude/skills/dfo-motion-demo/SKILL.md
index ac84c4e..a0f4a11 100644
--- a/.claude/skills/dfo-motion-demo/SKILL.md
+++ b/.claude/skills/dfo-motion-demo/SKILL.md
@@ -19,7 +19,7 @@ House conventions:
 
 - Health aid is OECD CRS purposes 120 (health) plus 130 (population policies and reproductive health, which holds HIV/AIDS). Fetch with `breakdown {"code_system": "crsPurpose", "level": 1}` and sum both. Purpose 120 alone misses HIV money such as PEPFAR and undercounts Kenya's health aid by more than half.
 - Name the definition where the figure shows, as the Kenya answer does: "Health aid counts purposes 120 and 130, which covers HIV/AIDS."
-- Use the latest complete year DFO holds and current US dollars unless the question says otherwise, and round as the Studio does ($5.7bn, $741m).
+- Use the latest complete year DFO holds and current US dollars unless the question says otherwise, and round as the Studio does: billions to one decimal, millions whole.
 
 Before writing the spec, show the user the figures, their sources and any ratio built from them, and make the wording of each claim match its number ("nearly eight times" for 7.7).
 
@@ -72,7 +72,7 @@ pnpm motion-kit capture motion-kit/pages/<name>.json --base http://localhost:310
 
 The generator checks the spec and cue sheet against the render and lists every problem it finds: a missing hook, state or keyframe, a cue field of the wrong type, a module over 200 KiB, an outside URL. Fix them and run it again. Each run replaces `motion-kit/dist/<name>/`.
 
-Then open `motion-kit/dist/<name>/preview.html`. It plays the cue sheet through the film's own runtime, with a scrubber, `?t=9.5` to open at a time and a state menu for captures; a runtime error shows above the stage. The built-in browser cannot open `file://` pages, so serve the folder for it:
+Then open `motion-kit/dist/<name>/preview.html`. It plays the cue sheet through the film's own runtime, with a scrubber and `?t=9.5` to open at a time; a runtime error shows above the stage. A capture's menu offers each state and, when its camera keys name states, "film", which switches state at each state's first key as the film's scenes will. The built-in browser cannot open `file://` pages, so serve the folder for it:
 
 ```bash
 python3 -m http.server 8765 --bind 127.0.0.1 --directory motion-kit/dist
@@ -109,7 +109,7 @@ kit.scene('plan', {
 });
 ```
 
-For a page capture, each scene mounts its state, and the runtime keeps only the cues and keys for that state: `window.DFO.mount(kit, { state: 'results', keys: d.keys }).cue(d.cues)`.
+For a page capture, each scene mounts its state, and the runtime keeps only the cues and keys for that state: `window.DFO.mount(kit, { state: 'results', keys: d.keys }).cue(d.cues)`. Start each scene where its state's first camera key is, so the film cuts where the preview does. `desk` sets the colour around the page: use the page's own background (the data search is `#3d3d3d`) so the frame's edges do not show. `motion-kit/pages/uganda-oda-search.json` and its cue sheet are the worked example: a search typed, its match, the answer, the measure refined and the table.
 
 `scenes.json` follows the type's instructions. The Kenya film uses `"stage": "final"`, 1920×1080 at 60 fps, a `#ecece0` background, and the fonts the stylesheet points at: Outfit as `sans` and DM Mono as `mono`. Add music only when the user asks for it.
 
diff --git a/motion-kit/README.md b/motion-kit/README.md
index ca1e992..ba656ab 100644
--- a/motion-kit/README.md
+++ b/motion-kit/README.md
@@ -98,7 +98,7 @@ Every run writes `preview.html` beside the modules: one page with every module i
 open motion-kit/dist/kenya-debt-health/preview.html
 ```
 
-The page mounts the film with `shared.js` in a stand-in for Motion's stage and plays the cue sheet from 0 to the runtime's `end`, when the last cue finishes or the last camera hold ends, with a play button and a scrubber. `?t=9.5` opens it at 9.5 s; a page capture has a menu of its states, and `?state=typed` opens one. A runtime error shows above the stage. The stand-in implements the part of Motion's `kit` the runtime calls (`preview.ts`), so a scene's own timing and Motion's export are untested here: check the published film in Motion before sharing it.
+The page mounts the film with `shared.js` in a stand-in for Motion's stage and plays the cue sheet from 0 to the runtime's `end`, when the last cue finishes or the last camera hold ends, with a play button and a scrubber. `?t=9.5` opens it at 9.5 s; a page capture has a menu of its states, and `?state=typed` opens one. When a capture's camera keys name states, the menu also offers "film", the default, which mounts each state from its first key's time, as the film's scenes do. A runtime error shows above the stage. The stand-in implements the part of Motion's `kit` the runtime calls (`preview.ts`), so a scene's own timing and Motion's export are untested here: check the published film in Motion before sharing it.
 
 ### Hooks
 
diff --git a/motion-kit/pages/uganda-oda-search.cues.json b/motion-kit/pages/uganda-oda-search.cues.json
new file mode 100644
index 0000000..3ae0c33
--- /dev/null
+++ b/motion-kit/pages/uganda-oda-search.cues.json
@@ -0,0 +1,37 @@
+{
+    "keys": [
+        { "t": 0, "hold": 0.7, "in": "empty" },
+        { "t": 1.5, "cx": 736, "cy": 370, "z": 1.5, "hold": 1.9, "in": "empty" },
+        { "t": 3.4, "cx": 736, "cy": 360, "z": 1.5, "hold": 0.6, "in": "typed" },
+        { "t": 4.8, "cx": 736, "cy": 720, "z": 1.5, "hold": 1.8, "in": "typed" },
+        { "t": 6.6, "hold": 0.9, "in": "answer" },
+        { "t": 8.0, "cx": 847, "cy": 477, "z": 1.35, "hold": 1.5, "in": "answer" },
+        { "t": 10.2, "cx": 1319, "cy": 323, "z": 1.9, "hold": 1.2, "in": "answer" },
+        { "t": 11.4, "cx": 661, "cy": 360, "z": 1.7, "hold": 3.2, "in": "menu" },
+        {
+            "t": 14.6,
+            "cx": 661,
+            "cy": 360,
+            "z": 1.7,
+            "hold": 3.8,
+            "drift": [0, 0, 0.01],
+            "in": "refined"
+        },
+        { "t": 18.4, "hold": 1.0, "in": "table" },
+        { "t": 20.0, "cx": 960, "cy": 560, "z": 1.15, "hold": 2.4, "in": "table" },
+        { "t": 23.2, "hold": 1.2, "in": "table" }
+    ],
+    "cues": [
+        {
+            "v": "prompt",
+            "kind": "type",
+            "text": "ODA to Uganda since 2015",
+            "at": 1.0,
+            "cps": 16,
+            "in": "empty"
+        },
+        { "v": "match", "kind": "show", "at": 3.8, "dur": 0.4, "in": "typed" },
+        { "v": "measure", "kind": "press", "at": 11.6, "in": "menu" },
+        { "v": "menu", "kind": "show", "at": 11.8, "dur": 0.3, "dy": 6, "in": "menu" }
+    ]
+}
diff --git a/motion-kit/pages/uganda-oda-search.json b/motion-kit/pages/uganda-oda-search.json
new file mode 100644
index 0000000..2df1205
--- /dev/null
+++ b/motion-kit/pages/uganda-oda-search.json
@@ -0,0 +1,41 @@
+{
+    "name": "uganda-oda-search",
+    "path": "/data",
+    "viewport": { "width": 1280, "height": 800 },
+    "hooks": [
+        { "v": "prompt", "selector": "textarea[class*=\"DataPrompt\"]" },
+        { "v": "match", "selector": "[class*=\"__cardsTitle\"]" },
+        { "v": "answer", "selector": "h1[class*=\"__sentence\"]" },
+        {
+            "v": "measure",
+            "selector": "h1[class*=\"__sentence\"] > span[class*=\"__slot\"]:first-of-type"
+        },
+        { "v": "menu", "selector": "[role=\"menu\"][class*=\"__slotMenu\"]" },
+        { "v": "count", "selector": "[class*=\"__countRow\"]" },
+        { "v": "results", "selector": "div[class$=\"__results\"]" }
+    ],
+    "steps": [
+        { "type": "wait", "ms": 1500 },
+        { "type": "capture", "state": "empty" },
+        { "type": "click", "selector": "textarea[class*=\"DataPrompt\"]" },
+        {
+            "type": "type",
+            "selector": "textarea[class*=\"DataPrompt\"]",
+            "text": "ODA to Uganda since 2015"
+        },
+        { "type": "wait", "selector": "text=Looks like a match", "ms": 1500 },
+        { "type": "capture", "state": "typed" },
+        { "type": "press", "key": "Enter" },
+        { "type": "wait", "selector": "text=Rows in your data", "ms": 3000 },
+        { "type": "capture", "state": "answer" },
+        { "type": "click", "selector": "h1 >> text=Gross disbursements" },
+        { "type": "wait", "selector": "text=Select Measure", "ms": 800 },
+        { "type": "capture", "state": "menu" },
+        { "type": "click", "selector": "[role=\"menuitem\"]:has-text(\"net disbursements\")" },
+        { "type": "wait", "selector": "h1:has-text(\"Net disbursements\")", "ms": 3000 },
+        { "type": "capture", "state": "refined" },
+        { "type": "scroll", "y": 600 },
+        { "type": "wait", "ms": 800 },
+        { "type": "capture", "state": "table" }
+    ]
+}
diff --git a/motion-kit/preview.ts b/motion-kit/preview.ts
index f441841..baf6448 100644
--- a/motion-kit/preview.ts
+++ b/motion-kit/preview.ts
@@ -8,8 +8,10 @@
  * the film's scenes call: `stage`, `module`, `json`, `css`, `h`, `el`,
  * `seg`, `lerp`, the `eo`, `ei`, `eio` and `eob` eases and `typist`. A
  * scene's own timing is absent: the page plays the cue sheet from 0 to the
- * runtime's `end`, when its last cue or camera hold ends. `?t=4.2` opens it paused at 4.2 s, and
- * `?state=typed` opens a captured page's state.
+ * runtime's `end`, when its last cue or camera hold ends. `?t=4.2` opens it
+ * paused at 4.2 s, and `?state=typed` opens a captured page's state. A
+ * capture whose camera keys name states (`in`) also plays as the film,
+ * switching to each state at its first key, as the film's scenes would.
  */
 
 import type { Module } from './build.ts';
@@ -85,6 +87,19 @@ const select = document.getElementById('state');
 const html = kit.json('manifest.json').modules.html;
 let film = null;
 let playing = null;
+// A capture's states in the order their first camera key shows them, and
+// whether the page is playing them as the film.
+const FILM = '';
+const starts = [];
+for (const key of cues.keys) {
+    if (key.in != null && !starts.some((s) => s.state === key.in)) {
+        starts.push({ state: key.in, t: key.t });
+    }
+}
+starts.sort((a, b) => a.t - b.t);
+const stateAt = (t) => starts.filter((s) => s.t <= t).pop()?.state ?? starts[0].state;
+let auto = false;
+let mounted;
 
 const fit = () => {
     const scale = Math.min(innerWidth / 1920, (innerHeight - 60) / 1080);
@@ -96,6 +111,7 @@ const show = (t) => {
     scrub.value = t;
     time.textContent = (+t).toFixed(2) + ' s';
     try {
+        if (auto && stateAt(+t) !== mounted) mountState(stateAt(+t));
         film?.render(+t);
     } catch (error) {
         document.getElementById('error').textContent = error.stack;
@@ -103,22 +119,31 @@ const show = (t) => {
     }
 };
 
-const mount = (state) => {
+// Mounts one state (or the Studio's one fragment); returns when it ends.
+const mountState = (state) => {
     stage.replaceChildren();
     try {
         new Function('kit', MODULES['shared.js'])(kit);
         film = DFO.mount(kit, { keys: cues.keys, state }).cue(cues.cues);
-        length = Math.max(1, film.end);
-        scrub.max = length;
     } catch (error) {
         document.getElementById('error').textContent = error.stack;
         throw error;
     }
+    mounted = state;
+    return film.end;
+};
+
+const mount = (choice) => {
+    auto = choice === FILM;
+    const ends = auto ? starts.map((s) => mountState(s.state)) : [mountState(choice)];
+    length = Math.max(1, ...ends);
+    scrub.max = length;
     show(scrub.value);
 };
 
 if (typeof html !== 'string') {
     select.hidden = false;
+    if (starts.length) select.add(new Option('film', FILM));
     for (const name of Object.keys(html)) select.add(new Option(name, name));
     select.value = params.get('state') ?? select.value;
     select.onchange = () => mount(select.value);
diff --git a/motion-kit/runtime/dfo-motion.js b/motion-kit/runtime/dfo-motion.js
index b71a1b6..43554d7 100644
--- a/motion-kit/runtime/dfo-motion.js
+++ b/motion-kit/runtime/dfo-motion.js
@@ -436,11 +436,10 @@ window.DFO = (() => {
         // cannot scroll an element, so the same offset moves the transcript's
         // children with `translate`, which no cue uses.
         const transcript = frame.querySelector('[data-v="view-chat"] [class*="chatScroll"]');
-        let shift = 0;
         const pin = () => {
             if (!transcript) return;
             for (const child of transcript.children) child.style.translate = '';
-            shift = Math.max(0, transcript.scrollHeight - transcript.clientHeight);
+            const shift = Math.max(0, transcript.scrollHeight - transcript.clientHeight);
             for (const child of transcript.children) {
                 child.style.translate = shift ? '0 ' + -shift + 'px' : '';
             }
@@ -460,25 +459,22 @@ window.DFO = (() => {
             for (const c of cues) if (!c.attrs) c.apply(t);
         };
 
-        // An element's box in stage px at z = 1, from layout offsets inside
-        // the frame, so the player's own scaling of the stage cannot skew it.
+        // An element's box in stage px at z = 1, as it shows inside the frame:
+        // the frame's own rendered size gives the scale above it (the fit, the
+        // camera and the player's scaling of the stage), so every transform
+        // inside the frame counts, the transcript pin and a capture's scroll
+        // offset among them.
         const box = (el) => {
-            let x = 0;
-            let y = 0;
-            let node = el;
-            while (node && node !== frame) {
-                x += node.offsetLeft;
-                y += node.offsetTop;
-                node = node.offsetParent;
-            }
-            if (node !== frame)
+            if (!frame.contains(el) || !el.getClientRects().length)
                 throw new Error('DFO: cannot place ' + (el.dataset.v ?? el.className));
-            if (transcript && transcript !== el && transcript.contains(el)) y -= shift;
+            const f = frame.getBoundingClientRect();
+            const r = el.getBoundingClientRect();
+            const scale = f.width / frame.offsetWidth;
             return {
-                x: left + x * fit,
-                y: top + y * fit,
-                w: el.offsetWidth * fit,
-                h: el.offsetHeight * fit,
+                x: left + ((r.left - f.left) / scale) * fit,
+                y: top + ((r.top - f.top) / scale) * fit,
+                w: (r.width / scale) * fit,
+                h: (r.height / scale) * fit,
             };
         };
 
diff --git a/motion-kit/test/capture.test.ts b/motion-kit/test/capture.test.ts
index 8e0286d..e258dbd 100644
--- a/motion-kit/test/capture.test.ts
+++ b/motion-kit/test/capture.test.ts
@@ -339,6 +339,18 @@ test('a fixture page captures as static markup and the CSS its states use', asyn
         assert.equal(await page.locator('#error').textContent(), '');
         assert.equal(await page.locator('#state').inputValue(), 'filled');
         assert.equal(await page.locator('[data-v="field"]').inputValue(), 'Kenya');
+        // The runtime places a hook where the capture saw it, scrolled.
+        const placed = (await page.evaluate(
+            `film.box(document.querySelector('[data-v="tile"]')).y`,
+        )) as number;
+        const fit = Math.min(1920 / 800, 1080 / 600);
+
+        // Within two px of the page; ignoring the scroll puts it 40 px off.
+        assert.ok(
+            Math.abs(placed - (1080 - 600 * fit) / 2 - boxes.tile!.filled!.y * fit) < 2 * fit,
+            `placed at ${placed}`,
+        );
+
         // The cue `in` the other state is left out.
         assert.ok(await page.locator('[data-v="field"]').isVisible());
 

From d5887f19bc96af4f982120be4a77bb9b4af92194 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 16:12:02 +0100
Subject: [PATCH 5/7] fix(motion-kit): name split CSS modules as a film's store
 takes them

A stylesheet over the module limit split into dfo-ui.css~1, ~2 and so
on, but a Motion film's store names a module with letters, digits, _, .
and - only. The player could not load the pieces, so a large page
capture played without its stylesheet. The pieces are now dfo-ui-1.css,
dfo-ui-2.css and so on, and writeFilm refuses a module name the store
does not take or modules that hold more than 2 MiB together.
---
 motion-kit/README.md               | 20 ++++++++++----------
 motion-kit/build.ts                | 29 +++++++++++++++++++++++++----
 motion-kit/test/motion-kit.test.ts | 11 ++++++++++-
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/motion-kit/README.md b/motion-kit/README.md
index ba656ab..2642aba 100644
--- a/motion-kit/README.md
+++ b/motion-kit/README.md
@@ -83,7 +83,7 @@ A page capture takes a cue sheet the same way, `<page spec name>.cues.json`, che
 | File                        | Contents                                                                                                                                               |
 | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `studio.html`               | One fragment: the header, the tools row, the chat panel and the whiteboard with every card placed, inside `<div class="dfo-ui">`.                      |
-| `dfo-ui.css`                | Everything the fragment needs, scoped under `.dfo-ui`. Split into `dfo-ui.css~1`, `dfo-ui.css~2` and so on when its store document would pass 200 KiB. |
+| `dfo-ui.css`                | Everything the fragment needs, scoped under `.dfo-ui`. Split into `dfo-ui-1.css`, `dfo-ui-2.css` and so on when its store document would pass 200 KiB. |
 | `manifest.json`             | The viewport, the hooks, the plan's states, card slots in cells and px, each chart's series with its path length, and the app's motion (below).        |
 | `cues.json`                 | The cue sheet, when the spec has one.                                                                                                                  |
 | `shared.js`                 | The runtime, `runtime/dfo-motion.js`, which Motion runs once before any scene.                                                                         |
@@ -234,14 +234,14 @@ The manifest's `dropped` lists everything removed that a viewer could have seen.
 
 ### Outputs
 
-| File                        | Contents                                                                                   |
-| --------------------------- | ------------------------------------------------------------------------------------------ |
-| `<state>.html`              | One fragment per captured state.                                                           |
-| `dfo-ui.css`                | The rules every state uses, split into `dfo-ui.css~1`, `~2` and so on past 200 KiB stored. |
-| `manifest.json`             | The viewport, the modules, the hooks and each hook's box in every state.                   |
-| `shared.js`                 | The runtime, as for the Studio.                                                            |
-| `store/modules/<file>.json` | Each file above as a Motion store document.                                                |
-| `preview.html`              | The film played in a browser, as for the Studio.                                           |
+| File                        | Contents                                                                                             |
+| --------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `<state>.html`              | One fragment per captured state.                                                                     |
+| `dfo-ui.css`                | The rules every state uses, split into `dfo-ui-1.css`, `dfo-ui-2.css` and so on past 200 KiB stored. |
+| `manifest.json`             | The viewport, the modules, the hooks and each hook's box in every state.                             |
+| `shared.js`                 | The runtime, as for the Studio.                                                                      |
+| `store/modules/<file>.json` | Each file above as a Motion store document.                                                          |
+| `preview.html`              | The film played in a browser, as for the Studio.                                                     |
 
 A page's manifest names each state's fragment in `modules.html`, where the Studio's names its one fragment as a string:
 
@@ -251,7 +251,7 @@ A page's manifest names each state's fragment in `modules.html`, where the Studi
     "rootFontSize": 16,
     "path": "/data",
     "modules": {
-        "css": ["dfo-ui.css~1", "dfo-ui.css~2"],
+        "css": ["dfo-ui-1.css", "dfo-ui-2.css"],
         "html": { "empty": "empty.html", "typed": "typed.html", "results": "results.html" }
     },
     "hooks": ["prompt", "answer"],
diff --git a/motion-kit/build.ts b/motion-kit/build.ts
index fa58b9d..82eac07 100644
--- a/motion-kit/build.ts
+++ b/motion-kit/build.ts
@@ -237,12 +237,18 @@ export type Generated = {
 
 const bytes = (text: string) => Buffer.byteLength(text);
 
+// The names a Motion film's store takes for a module, and the most its
+// modules may hold together.
+const MODULE_NAME = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,63}$/;
+const FILM_LIMIT = 2 * 1024 * 1024;
+
 /** A module as the film's store holds it, the document the limit applies to. */
 const storeDocument = ({ kind, text }: Pick<Module, 'kind' | 'text'>) =>
     JSON.stringify({ kind, text });
 
-/** The film's stylesheet as one `dfo-ui.css` module, or `dfo-ui.css~1`,
- *  `~2` and so on when its store document passes the module limit. Refuses
+/** The film's stylesheet as one `dfo-ui.css` module, or `dfo-ui-1.css`,
+ *  `dfo-ui-2.css` and so on when its store document passes the module
+ *  limit. Refuses
  *  a stylesheet that points outside the film. */
 export const cssModules = (css: string): Module[] => {
     const leaks = externalUrls(css);
@@ -260,7 +266,7 @@ export const cssModules = (css: string): Module[] => {
     );
 
     return pieces.map((text, index) => ({
-        name: pieces.length === 1 ? 'dfo-ui.css' : `dfo-ui.css~${index + 1}`,
+        name: pieces.length === 1 ? 'dfo-ui.css' : `dfo-ui-${index + 1}.css`,
         kind: 'css',
         text,
     }));
@@ -275,7 +281,8 @@ export const manifestModule = (manifest: Record<string, unknown>): Module => ({
 /**
  * Writes `files` plus the runtime as `shared.js` to `target`, each as a
  * file and as a Motion store document under `store/modules/`, after
- * checking every module's store document against the limit, and
+ * checking each module's name and store document, and their total, against
+ * what a film's store takes, and
  * `preview.html` to play them (`preview.ts`). Replaces a previous film at
  * `target`; refuses a non-empty directory without a `manifest.json`.
  */
@@ -291,14 +298,28 @@ export const writeFilm = async (target: string, files: Module[]): Promise<Module
         },
     ];
 
+    let total = 0;
+
     for (const file of modules) {
         const size = bytes(storeDocument(file));
 
+        if (!MODULE_NAME.test(file.name)) {
+            throw new Error(`motion-kit: ${file.name} is not a name a film's store takes`);
+        }
+
         if (size > MODULE_LIMIT) {
             throw new Error(
                 `motion-kit: ${file.name} is ${size} bytes stored, over the ${MODULE_LIMIT} limit`,
             );
         }
+
+        total += size;
+    }
+
+    if (total > FILM_LIMIT) {
+        throw new Error(
+            `motion-kit: the modules hold ${total} bytes, over the ${FILM_LIMIT} limit`,
+        );
     }
 
     const existing: string[] = await readdir(target).catch((error: NodeJS.ErrnoException) => {
diff --git a/motion-kit/test/motion-kit.test.ts b/motion-kit/test/motion-kit.test.ts
index 7de8384..a75efbd 100644
--- a/motion-kit/test/motion-kit.test.ts
+++ b/motion-kit/test/motion-kit.test.ts
@@ -400,13 +400,18 @@ test('the stylesheet splits so each store document, escaped, fits the module lim
 
     assert.ok(Buffer.byteLength(css) < MODULE_LIMIT);
     assert.ok(modules.length > 1);
+    // Named as a film's store takes them.
+    assert.deepEqual(
+        modules.map(({ name }) => name),
+        modules.map((_, index) => `dfo-ui-${index + 1}.css`),
+    );
 
     for (const { kind, text } of modules) {
         assert.ok(Buffer.byteLength(JSON.stringify({ kind, text })) <= MODULE_LIMIT);
     }
 });
 
-test('a film replaces a previous film, never a directory of other files', async () => {
+test('a film replaces a previous film, never a directory of other files or a bad name', async () => {
     const out = await mkdtemp(join(tmpdir(), 'motion-kit-out-'));
     const film = join(out, 'film');
     const manifest = { name: 'manifest.json', kind: 'json', text: '{}' } as const;
@@ -418,6 +423,10 @@ test('a film replaces a previous film, never a directory of other files', async
         await writeFile(join(out, 'specs/demo.json'), '{}');
         await assert.rejects(writeFilm(join(out, 'specs'), [manifest]), /specs holds files/);
         assert.equal(await readFile(join(out, 'specs/demo.json'), 'utf8'), '{}');
+        await assert.rejects(
+            writeFilm(film, [manifest, { name: 'dfo-ui.css~1', kind: 'css', text: '' }]),
+            /dfo-ui.css~1 is not a name a film's store takes/,
+        );
     } finally {
         await rm(out, { recursive: true, force: true });
     }

From 812799b29f3d0436974c6af6bf6df437dce9fafb Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 16:17:15 +0100
Subject: [PATCH 6/7] chore(skills): move dfo-motion-demo to the one-data
 plugin marketplace

The skill now ships in the dfo-dev plugin of
ONEcampaign/one-data-claude-marketplace, so it leaves .claude/skills/
here and .gitignore ignores all of .claude/ again.
---
 .claude/skills/dfo-motion-demo/SKILL.md | 123 ------------------------
 .gitignore                              |   3 +-
 2 files changed, 1 insertion(+), 125 deletions(-)
 delete mode 100644 .claude/skills/dfo-motion-demo/SKILL.md

diff --git a/.claude/skills/dfo-motion-demo/SKILL.md b/.claude/skills/dfo-motion-demo/SKILL.md
deleted file mode 100644
index a0f4a11..0000000
--- a/.claude/skills/dfo-motion-demo/SKILL.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-name: dfo-motion-demo
-description: Make a demo film of the DFO website for Claude Motion with motion-kit, from a data question to a published film that shows the real Studio or any other page of the site. Covers checking the figures with the DFO MCP server, writing a Studio spec or a page-capture spec, timing it with a cue sheet, generating the modules, checking them in the local preview, and loading them into a Motion film. Use whenever someone asks for a DFO demo video, a Motion film, a screen-recording-style walkthrough of the Studio, data search, a source page or any route of the site, turning a storyboard into a film, or changing an existing DFO film, even if they only say "make a demo of X" or "animate this question".
----
-
-# DFO demo films with motion-kit
-
-A film shows the site itself, so viewers see what they would see using DFO. `motion-kit/` renders the Studio from the app's own components, and captures any other route from the running site, as static HTML and CSS a Motion film can hold. A cue sheet then drives it: typing, replies, the plan, cards arriving, charts drawing, and the camera. Because the markup comes from the components, a regenerated film follows the site as it changes.
-
-`motion-kit/README.md` is the reference for every spec field, cue kind and output file. Read "The demo spec" and "The cue sheet" before a Studio film, and "Page capture" before any other page.
-
-One generator run makes one film's modules: one Studio render, or one page capture with several states. A demo that needs both is two films.
-
-## 1. Get the figures from DFO
-
-Every number on screen is a claim about the world made in DFO's name, so it comes from the DFO MCP server and is checked before anything is built. Use `search` to find the dataset, `get_data` to fetch it, and the analysis tools (`aggregate`, `quotient_of`, `growth`) for derived figures. Keep each figure's dataset, unit, year and source. For a demo with many figures, send an agent to recompute them independently and compare.
-
-House conventions:
-
-- Health aid is OECD CRS purposes 120 (health) plus 130 (population policies and reproductive health, which holds HIV/AIDS). Fetch with `breakdown {"code_system": "crsPurpose", "level": 1}` and sum both. Purpose 120 alone misses HIV money such as PEPFAR and undercounts Kenya's health aid by more than half.
-- Name the definition where the figure shows, as the Kenya answer does: "Health aid counts purposes 120 and 130, which covers HIV/AIDS."
-- Use the latest complete year DFO holds and current US dollars unless the question says otherwise, and round as the Studio does: billions to one decimal, millions whole.
-
-Before writing the spec, show the user the figures, their sources and any ratio built from them, and make the wording of each claim match its number ("nearly eight times" for 7.7).
-
-## 2. Choose what the film shows
-
-- **The Studio** (a question, its plan, the board and the answer): a Studio spec in `motion-kit/demos/<name>.json`, rendered from the components. Capturing the live Studio would need a real conversation with the planner, so the renderer builds it from a spec instead.
-- **Any other page** (data search, a source page, docs, the homepage, tools): a page spec in `motion-kit/pages/<name>.json`, captured from the running site in Chrome. Each `capture` step is one state of the page, and a film mounts one state per scene.
-
-## 3. Write the spec
-
-### Studio
-
-Start from `motion-kit/demos/kenya-debt-health.json`. The types are in `motion-kit/spec.ts` and reuse the app's own (`ChatMessage`, `PlanState`, `Widget`), so the plan, choices and cards render as the Studio shows them today. Points that catch people out:
-
-- `question` is the prompt typed into the chat input, and the first message repeats it.
-- The top-level `plan` is the one waiting for approval. The answer the approval resumed carries the same plan as its `plan`, which shows as the pill under it.
-- Card ids are letters, digits, `_` or `-`, since they name hooks. Give a chart card the `h` the Studio settles on (the Kenya chart is 24×21), because the renderer cannot measure the live card.
-- `viewport` is at least 660 px wide; below that the Studio switches to its phone layout, which the renderer does not draw.
-
-### Any other page
-
-Start from `motion-kit/pages/kenya-debt-search.json`. The capture reads the running site, so start it first:
-
-```bash
-pnpm dev --port 3100
-```
-
-Name the elements the film animates or the camera visits in `hooks`, each a plain CSS selector that finds one element. Write the steps a user would take, with a `wait` for anything that arrives with data and a `capture` wherever the film needs a state. A search answer can take two minutes to stream, and a capture without the `wait` freezes the page before it arrives.
-
-## 4. Write the cue sheet
-
-The cue sheet sits beside the spec as `<name>.cues.json`, with camera `keys` and `cues`. Times are seconds from the start of the film. Start from `motion-kit/demos/kenya-debt-health.cues.json`, which follows the Studio's own sequence:
-
-- At 0, `animate` the page-load entrance by keyframe name (`Studio_module_board-in`, `Studio_module_bar-in`, `WorkspaceToolbar_module_ws-rise`, `ChatPanel_module_chat-in`). These play the app's own keyframes with its timings, which is what makes the film feel like the Studio.
-- `type` the question at about 26 characters a second, and `press` send. `show` the user's message with `dur: 0`, since a new message simply appears, and use `clearAt` to empty the field.
-- `stream` the reply's text (`sel: ".ChatPanel_module_botText"`) at 12 to 14 words a second.
-- `show` the plan and its bar, `press` Approve, then at one moment `remove` both, switch `state` to `approved` and `show` the pill. That is what the Studio does on approval.
-- `animate` each card on its hook a few tenths of a second apart, then `draw` each chart series over about 1.8 s.
-
-Camera keys centre on a hook at zoom `z`, measured as the page stands at that key's time. Zoom 1.6 to 1.9 makes text readable and 1 shows the whole page. Hold at least 2.5 s on anything the viewer must read, and end wide so the last frame shows the whole answer. A Kenya-length film runs 20 to 30 s.
-
-For a page capture, a cue or key that belongs to one state names it in `in` (`"in": "results"`). One without `in` plays in every state, so its hooks must exist in all of them. Captures have no app motion, so `animate`, `state` and `tab` cues are Studio-only.
-
-## 5. Generate and preview
-
-```bash
-pnpm motion-kit motion-kit/demos/<name>.json
-pnpm motion-kit capture motion-kit/pages/<name>.json --base http://localhost:3100
-```
-
-The generator checks the spec and cue sheet against the render and lists every problem it finds: a missing hook, state or keyframe, a cue field of the wrong type, a module over 200 KiB, an outside URL. Fix them and run it again. Each run replaces `motion-kit/dist/<name>/`.
-
-Then open `motion-kit/dist/<name>/preview.html`. It plays the cue sheet through the film's own runtime, with a scrubber and `?t=9.5` to open at a time; a runtime error shows above the stage. A capture's menu offers each state and, when its camera keys name states, "film", which switches state at each state's first key as the film's scenes will. The built-in browser cannot open `file://` pages, so serve the folder for it:
-
-```bash
-python3 -m http.server 8765 --bind 127.0.0.1 --directory motion-kit/dist
-```
-
-Look at a frame at every beat (before typing, the prompt grown, the plan, after approval, the cards, the end) and scrub the whole film both ways. When something looks wrong, compare it with the live site in the same state. Show the user those frames before publishing, since a change is cheaper here than in Motion.
-
-What the kit cannot do yet, so the user knows before they watch:
-
-- The page-load entrance makes the first frame, which Motion uses as the thumbnail, mostly empty. Start the cue sheet after the entrance if the thumbnail matters.
-- A chart's plot can sit a few px off the live card's.
-- The activity log can only show settled steps folded behind their toggle.
-- A capture is frozen at rest: the typing caret and anything still animating are absent.
-
-## 6. Publish to Motion
-
-1. Find the Motion type with the Artifact tool (`action: "list"`, `scope: "types"`) and create a film from its `type_url` with a `title` and `auto_open: "after_first_write"`. The result carries the type's instructions and references (`film-api.md`, `finalize.md`). Read them: they define the store and the `kit` API, and where they differ from this skill they are right.
-2. Write the store with one `ArtifactData` `batch`:
-    - `film/meta`: `{ "v": 1, "title": …, "updatedAt": … }`.
-    - `modules/<file>` for every file in `motion-kit/dist/<name>/store/modules/`, each with `file_path` pointing at that `<file>.json`. The documents are large and exact, and a retyped copy drifts from what the preview checked.
-    - `modules/scenes.json`, then one `modules/scene-<id>.js` per scene.
-3. Scenes split the film into named beats whose `dur` values sum to the preview's length. Every scene mounts the same render and reads one film clock, so cuts between scenes do not show:
-
-```js
-kit.scene('plan', {
-    init(kit) {
-        const d = kit.json('cues.json');
-        this.studio = window.DFO.mount(kit, { keys: d.keys }).cue(d.cues);
-        this.t0 = kit.start;
-    },
-    render(t) {
-        this.studio.render(this.t0 + t);
-    },
-});
-```
-
-For a page capture, each scene mounts its state, and the runtime keeps only the cues and keys for that state: `window.DFO.mount(kit, { state: 'results', keys: d.keys }).cue(d.cues)`. Start each scene where its state's first camera key is, so the film cuts where the preview does. `desk` sets the colour around the page: use the page's own background (the data search is `#3d3d3d`) so the frame's edges do not show. `motion-kit/pages/uganda-oda-search.json` and its cue sheet are the worked example: a search typed, its match, the answer, the measure refined and the table.
-
-`scenes.json` follows the type's instructions. The Kenya film uses `"stage": "final"`, 1920×1080 at 60 fps, a `#ecece0` background, and the fonts the stylesheet points at: Outfit as `sans` and DM Mono as `mono`. Add music only when the user asks for it.
-
-To change a published film, regenerate, `get` each changed module's version, and `set` only the changed modules with `if_version`, so a concurrent edit in Motion is not overwritten.
-
-## 7. Before calling it done
-
-- The figures on screen match what DFO returned in step 1.
-- The preview scrubs from 0 to the end with no error.
-- The user has watched the film in Motion. The built-in browser is not signed in to claude.ai and cannot play it, so ask the user to check it there.
-- The spec and cue sheet are saved under `motion-kit/demos/` or `motion-kit/pages/`, where they can be committed. `motion-kit/dist/` is ignored by git.
diff --git a/.gitignore b/.gitignore
index e7063ee..f0e73d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,5 @@ CLAUDE.md
 *.pem
 npm-debug.log*
 
-/.claude/*
-!/.claude/skills/
+/.claude
 /.idea

From 547b4067f963df2c5f04ec1ed31f0b0bffd32001 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Thu, 29 Oct 2026 16:29:44 +0100
Subject: [PATCH 7/7] fix(motion-kit): keep tab cues to their time, fixed
 elements in place and fonts in the preview

A tab or state cue wrote both its states at every frame, so a later cue
undid an earlier one: Chat to Activity at 5 s and back at 10 s showed
Activity at 0 s. The runtime now restores every attribute a cue writes
(style, class or a state's own) at the start of each frame, and a tab or
state cue writes only from its own time.

A capture translated an ancestor of a fixed element by the scroll, which
made that ancestor the fixed element's containing block: a header fixed
at 20 px showed thousands of px down. The scroll now moves the children
of an element that holds a fixed one, never the element itself, so fixed
elements stay anchored to the frame.

preview.html embeds Outfit and DM Mono from @fontsource and mounts the
film once they load, since the stylesheet carries no @font-face and a
machine without them wrapped text, and measured the camera, in fallback
fonts.
---
 motion-kit/README.md               |  2 +-
 motion-kit/build.ts                |  2 +-
 motion-kit/preview.ts              | 51 +++++++++++++++++++++-
 motion-kit/runtime/dfo-motion.js   | 68 ++++++++++++++++++------------
 motion-kit/snapshot.ts             | 55 ++++++++++++++----------
 motion-kit/test/capture.test.ts    | 11 +++++
 motion-kit/test/motion-kit.test.ts | 38 +++++++++++++++++
 7 files changed, 173 insertions(+), 54 deletions(-)

diff --git a/motion-kit/README.md b/motion-kit/README.md
index 2642aba..9d7e83f 100644
--- a/motion-kit/README.md
+++ b/motion-kit/README.md
@@ -98,7 +98,7 @@ Every run writes `preview.html` beside the modules: one page with every module i
 open motion-kit/dist/kenya-debt-health/preview.html
 ```
 
-The page mounts the film with `shared.js` in a stand-in for Motion's stage and plays the cue sheet from 0 to the runtime's `end`, when the last cue finishes or the last camera hold ends, with a play button and a scrubber. `?t=9.5` opens it at 9.5 s; a page capture has a menu of its states, and `?state=typed` opens one. When a capture's camera keys name states, the menu also offers "film", the default, which mounts each state from its first key's time, as the film's scenes do. A runtime error shows above the stage. The stand-in implements the part of Motion's `kit` the runtime calls (`preview.ts`), so a scene's own timing and Motion's export are untested here: check the published film in Motion before sharing it.
+The page mounts the film with `shared.js` in a stand-in for Motion's stage and plays the cue sheet from 0 to the runtime's `end`, when the last cue finishes or the last camera hold ends, with a play button and a scrubber. `?t=9.5` opens it at 9.5 s; a page capture has a menu of its states, and `?state=typed` opens one. When a capture's camera keys name states, the menu also offers "film", the default, which mounts each state from its first key's time, as the film's scenes do. A runtime error shows above the stage. The stylesheet has no `@font-face`, since a Motion film loads its own fonts, so the page embeds Outfit (300 to 800) and DM Mono (300 to 500) from `@fontsource` and mounts the film once they have loaded, so text wraps and the camera measures as in the film. The stand-in implements the part of Motion's `kit` the runtime calls (`preview.ts`), so a scene's own timing and Motion's export are untested here: check the published film in Motion before sharing it.
 
 ### Hooks
 
diff --git a/motion-kit/build.ts b/motion-kit/build.ts
index 82eac07..a5b548c 100644
--- a/motion-kit/build.ts
+++ b/motion-kit/build.ts
@@ -344,7 +344,7 @@ export const writeFilm = async (target: string, files: Module[]): Promise<Module
         await writeFile(join(target, 'store/modules', `${file.name}.json`), storeDocument(file));
     }
 
-    await writeFile(join(target, 'preview.html'), previewHtml(basename(target), modules));
+    await writeFile(join(target, 'preview.html'), await previewHtml(basename(target), modules));
 
     return modules;
 };
diff --git a/motion-kit/preview.ts b/motion-kit/preview.ts
index baf6448..7ab2400 100644
--- a/motion-kit/preview.ts
+++ b/motion-kit/preview.ts
@@ -12,15 +12,50 @@
  * paused at 4.2 s, and `?state=typed` opens a captured page's state. A
  * capture whose camera keys name states (`in`) also plays as the film,
  * switching to each state at its first key, as the film's scenes would.
+ *
+ * The stylesheet carries no `@font-face`, since a Motion film loads its
+ * fonts itself, so the page embeds Outfit and DM Mono from `@fontsource`
+ * and mounts the film once every face has loaded: text then wraps, and the
+ * camera measures, as in the film.
  */
 
+import { readFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
 import type { Module } from './build.ts';
 
+// The faces the app's stylesheet uses, as the film's fonts load them.
+const FACES = [
+    ...[300, 400, 500, 600, 700, 800].map((weight) => ({
+        family: 'Outfit',
+        file: `@fontsource/outfit/files/outfit-latin-${weight}-normal.woff2`,
+        weight,
+    })),
+    ...[300, 400, 500].map((weight) => ({
+        family: 'DM Mono',
+        file: `@fontsource/dm-mono/files/dm-mono-latin-${weight}-normal.woff2`,
+        weight,
+    })),
+];
+
+const MODULES_DIR = join(dirname(fileURLToPath(import.meta.url)), '../node_modules');
+
+const faces = () =>
+    Promise.all(
+        FACES.map(async ({ family, file, weight }) => ({
+            family,
+            weight,
+            data: (await readFile(join(MODULES_DIR, file))).toString('base64'),
+        })),
+    );
+
 // Escapes `<` so no module text can close the inline script.
 const inline = (value: unknown) => JSON.stringify(value).replace(/</g, '\\u003c');
 
-export const previewHtml = (title: string, modules: Module[]): string => {
+export const previewHtml = async (title: string, modules: Module[]): Promise<string> => {
     const texts = Object.fromEntries(modules.map((file) => [file.name, file.text]));
+    const fonts = await faces();
 
     return `<!doctype html>
 <html lang="en">
@@ -44,6 +79,7 @@ export const previewHtml = (title: string, modules: Module[]): string => {
 <div id="stage"></div>
 <script>
 const MODULES = ${inline(texts)};
+const FONTS = ${inline(fonts)};
 const clamp01 = (x) => Math.max(0, Math.min(1, x));
 const stage = document.getElementById('stage');
 const kit = {
@@ -171,7 +207,18 @@ play.onclick = () => {
 };
 addEventListener('resize', fit);
 fit();
-mount(typeof html === 'string' ? undefined : select.value);
+Promise.all(
+    FONTS.map(async ({ family, weight, data }) => {
+        const face = new FontFace(family, 'url(data:font/woff2;base64,' + data + ')', {
+            weight: String(weight),
+        });
+        document.fonts.add(await face.load());
+    }),
+)
+    .then(() => mount(typeof html === 'string' ? undefined : select.value))
+    .catch((error) => {
+        document.getElementById('error').textContent = error.stack ?? String(error);
+    });
 </script>
 </html>
 `;
diff --git a/motion-kit/runtime/dfo-motion.js b/motion-kit/runtime/dfo-motion.js
index 43554d7..3e0ecd7 100644
--- a/motion-kit/runtime/dfo-motion.js
+++ b/motion-kit/runtime/dfo-motion.js
@@ -178,11 +178,12 @@ window.DFO = (() => {
     };
 
     // Prepares one cue against the mounted fragment; returns `apply(t)`, the
-    // elements whose style it writes (`touches`), whether it sets attributes
-    // or classes instead (`attrs`) and the time it ends. Every
-    // frame starts from those elements' own inline styles (`mount` restores
-    // them), so a cue writes only what it shows at t, and cues apply in list
-    // order: a later cue on the same element wins.
+    // attributes it writes as [element, name] pairs (`touches`: `style` for
+    // most, `class` or the state's own for `tab` and `state`, which set
+    // `attrs`) and the time it ends. Every frame starts from those
+    // attributes' own values (`mount` restores them), so a cue writes only
+    // from its own time, and cues apply in list order: a later cue on the
+    // same element wins.
     const prepare = (kit, studio, cue) => {
         const { seg, eo, ei, eob, lerp } = kit;
 
@@ -209,7 +210,7 @@ window.DFO = (() => {
                 ),
             );
             return {
-                touches: runs.map((r) => r.el),
+                touches: runs.map((r) => [r.el, 'style']),
                 end: cue.at + end,
                 apply(t) {
                     for (const { el, play } of runs) {
@@ -225,21 +226,19 @@ window.DFO = (() => {
             // app does when the plan is approved (the prompt's placeholder).
             const attrs = studio.manifest.states?.[cue.to]?.attrs ?? {};
             const changes = Object.entries(attrs).flatMap(([hook, values]) =>
-                Object.entries(values).map(([name, value]) => {
-                    const el = studio.q(hook);
-                    return { el, name, value, was: el.getAttribute(name) };
-                }),
+                Object.entries(values).map(([name, value]) => ({
+                    el: studio.q(hook),
+                    name,
+                    value,
+                })),
             );
             return {
-                touches: [],
+                touches: changes.map((c) => [c.el, c.name]),
                 attrs: true,
                 end: cue.at,
                 apply(t) {
-                    for (const c of changes) {
-                        const v = t >= cue.at ? c.value : c.was;
-                        if (v == null) c.el.removeAttribute(c.name);
-                        else c.el.setAttribute(c.name, v);
-                    }
+                    if (t < cue.at) return;
+                    for (const c of changes) c.el.setAttribute(c.name, c.value);
                 },
             };
         }
@@ -247,7 +246,7 @@ window.DFO = (() => {
         const el = studio.q(cue.v, cue.sel);
         const s = el.style;
         const dur = cue.dur ?? 0.4;
-        const only = (end, apply) => ({ touches: [el], end, apply });
+        const only = (end, apply) => ({ touches: [[el, 'style']], end, apply });
         // An entering element takes no room before its time.
         const before = (t) => {
             if (t >= cue.at) return false;
@@ -297,7 +296,12 @@ window.DFO = (() => {
                 const points = cue.points ? studio.q(cue.points) : null;
                 const end = cue.at + (cue.dur ?? 1.6);
                 return {
-                    touches: points ? [el, points] : [el],
+                    touches: points
+                        ? [
+                              [el, 'style'],
+                              [points, 'style'],
+                          ]
+                        : [[el, 'style']],
                     end,
                     apply(t) {
                         if (before(t)) return;
@@ -355,13 +359,16 @@ window.DFO = (() => {
                 if (!active) throw new Error('DFO: a tab cue needs the Studio, not a page capture');
                 const from = studio.q(cue.from);
                 return {
-                    touches: [],
+                    touches: [
+                        [el, 'class'],
+                        [from, 'class'],
+                    ],
                     attrs: true,
                     end: cue.at,
                     apply(t) {
-                        const on = t >= cue.at;
-                        el.classList.toggle(active, on);
-                        from.classList.toggle(active, !on);
+                        if (t < cue.at) return;
+                        el.classList.add(active);
+                        from.classList.remove(active);
                     },
                 };
             }
@@ -447,11 +454,16 @@ window.DFO = (() => {
 
         const cues = [];
         let keys = [];
-        // Each element a cue styles, with its own inline style, which every
-        // frame starts from so no cue's value outlives its time.
+        // Each attribute a cue writes, by element and name, with its own value,
+        // which every frame starts from so no cue's value outlives its time.
         const own = new Map();
         const apply = (t) => {
-            for (const [el, style] of own) el.setAttribute('style', style);
+            for (const [el, values] of own) {
+                for (const [name, value] of values) {
+                    if (value == null) el.removeAttribute(name);
+                    else el.setAttribute(name, value);
+                }
+            }
             // Attributes and classes first (`state` and `tab`): a cue that
             // measures, such as the prompt's height under its placeholder,
             // must see this frame's.
@@ -539,8 +551,10 @@ window.DFO = (() => {
             cue(list) {
                 for (const c of list.filter(here)) {
                     const prepared = prepare(kit, studio, c);
-                    for (const el of prepared.touches) {
-                        if (!own.has(el)) own.set(el, el.getAttribute('style') ?? '');
+                    for (const [el, name] of prepared.touches) {
+                        if (!own.has(el)) own.set(el, new Map());
+                        const values = own.get(el);
+                        if (!values.has(name)) values.set(name, el.getAttribute(name));
                     }
                     cues.push(prepared);
                 }
diff --git a/motion-kit/snapshot.ts b/motion-kit/snapshot.ts
index e22fe00..7c7151d 100644
--- a/motion-kit/snapshot.ts
+++ b/motion-kit/snapshot.ts
@@ -97,8 +97,9 @@ export function matchSelectors(selectors: string[]): boolean[] {
  *   `data-mk-focus`, `data-mk-focus-visible`, `data-mk-focus-within` and
  *   `data-mk-active`, which the stylesheet's dynamic pseudo-classes become;
  * - a scrolled element's children (the body's, for the window) are
- *   translated by the scroll offset, and a fixed or stuck element is moved
- *   back to where it shows.
+ *   translated by the scroll offset, past any element that holds a fixed
+ *   one, so fixed elements stay where they show, and a stuck element is
+ *   moved back to where it shows.
  *
  * Also returns the text of every stylesheet in the page.
  */
@@ -208,49 +209,57 @@ export async function snapshotPage({
 
         shift.set(element, { x: current.x + x, y: current.y + y });
     };
-    // What the scroll translation moved each live element's descendants by.
-    const scrolled = new Map<Element, { x: number; y: number }>();
     const scrollOf = (element: Element) =>
         element === document.body
             ? { x: scroller.scrollLeft, y: scroller.scrollTop }
             : { x: element.scrollLeft, y: element.scrollTop };
-
-    live.forEach((element, index) => {
-        const { x, y } = scrollOf(element);
-
-        if (!x && !y) {
+    // A translated ancestor would become a fixed element's containing block
+    // and carry it away from where it shows, so the scroll moves an element
+    // that holds a fixed one by moving its other children instead.
+    const fixed = live.filter((_, index) => computed[index]!.position === 'fixed');
+    const scrollWith = (element: Element, x: number, y: number) => {
+        const index = live.indexOf(element);
+
+        if (computed[index]!.position === 'fixed') {
             return;
         }
 
-        scrolled.set(element, { x, y });
+        if (!fixed.some((other) => element.contains(other))) {
+            addShift(element, x, y);
 
-        for (const child of element.children) {
-            if (getComputedStyle(child).position !== 'fixed') {
-                addShift(child, -x, -y);
-            }
+            return;
         }
 
         if (
             [...element.childNodes].some((node) => node.nodeType === 3 && node.textContent?.trim())
         ) {
             drop(
-                `${copies[index]!.localName}: text beside the children of a scrolled element stays unscrolled`,
+                `${copies[index]!.localName}: text beside a scrolled element's moved children stays unscrolled`,
             );
         }
-    });
 
-    // A fixed element sits where it shows whatever its ancestors were moved by.
+        for (const child of element.children) {
+            scrollWith(child, x, y);
+        }
+    };
+
     live.forEach((element, index) => {
-        if (computed[index]!.position !== 'fixed') {
+        const { x, y } = scrollOf(element);
+
+        if (!x && !y) {
             return;
         }
 
-        for (let parent = element.parentElement; parent; parent = parent.parentElement) {
-            const moved = shift.get(parent);
+        if (
+            [...element.childNodes].some((node) => node.nodeType === 3 && node.textContent?.trim())
+        ) {
+            drop(
+                `${copies[index]!.localName}: text beside the children of a scrolled element stays unscrolled`,
+            );
+        }
 
-            if (moved) {
-                addShift(element, -moved.x, -moved.y);
-            }
+        for (const child of element.children) {
+            scrollWith(child, -x, -y);
         }
     });
 
diff --git a/motion-kit/test/capture.test.ts b/motion-kit/test/capture.test.ts
index e258dbd..5b11a63 100644
--- a/motion-kit/test/capture.test.ts
+++ b/motion-kit/test/capture.test.ts
@@ -49,6 +49,7 @@ const FIXTURE = `<!doctype html>
 <p class="twin">a</p><p class="twin">b</p>
 <p class="inline-used">styled inline</p>
 <div class="tall"></div>
+<div class="wrap"><p class="pin">pinned</p></div>
 <script>
 const context = document.querySelector('.chart').getContext('2d');
 context.fillStyle = 'rgb(0, 128, 0)';
@@ -59,6 +60,7 @@ context.fillRect(0, 0, 40, 20);
 const CSS = `
 body { margin: 0; padding-top: 3rem; font-size: 1rem; }
 .tall { height: 1000px; }
+.pin { position: fixed; top: 20px; right: 0; margin: 0; }
 .bar { position: fixed; top: 0; left: 0; right: 0; height: 2rem; }
 .tile { width: 50vw; background: url(/tile.png) repeat; }
 .tile:hover { outline: 2px solid rgb(0, 0, 255); }
@@ -336,6 +338,7 @@ test('a fixture page captures as static markup and the CSS its states use', asyn
         await page.goto(
             `${pathToFileURL(join(out, 'fixture/preview.html')).href}?state=filled&t=2`,
         );
+        await page.waitForFunction('film !== null');
         assert.equal(await page.locator('#error').textContent(), '');
         assert.equal(await page.locator('#state').inputValue(), 'filled');
         assert.equal(await page.locator('[data-v="field"]').inputValue(), 'Kenya');
@@ -351,6 +354,14 @@ test('a fixture page captures as static markup and the CSS its states use', asyn
             `placed at ${placed}`,
         );
 
+        // A fixed element inside an unscrolled wrapper stays where it showed,
+        // 20 px from the top, however far down the page the wrapper starts.
+        const pinned = (await page.evaluate(
+            `film.box(document.querySelector('.dfo-frame .pin')).y`,
+        )) as number;
+
+        assert.ok(Math.abs(pinned - 20 * fit) < 2 * fit, `pinned at ${pinned}`);
+
         // The cue `in` the other state is left out.
         assert.ok(await page.locator('[data-v="field"]').isVisible());
 
diff --git a/motion-kit/test/motion-kit.test.ts b/motion-kit/test/motion-kit.test.ts
index a75efbd..ad74a4e 100644
--- a/motion-kit/test/motion-kit.test.ts
+++ b/motion-kit/test/motion-kit.test.ts
@@ -294,6 +294,17 @@ test('the Kenya film modules hold no motion, no outside URL and no unscoped rule
 
         try {
             await page.goto(pathToFileURL(join(out, 'preview.html')).href);
+            // The page mounts the film once the app's fonts have loaded.
+            await page.waitForFunction('film !== null');
+            assert.deepEqual(
+                await page.evaluate(`[...document.fonts]
+                    .filter((face) => face.status === 'loaded')
+                    .map((face) => face.family + ' ' + face.weight)`),
+                [
+                    ...[300, 400, 500, 600, 700, 800].map((weight) => `Outfit ${weight}`),
+                    ...[300, 400, 500].map((weight) => `"DM Mono" ${weight}`),
+                ],
+            );
 
             const film = await page.evaluate(() => {
                 const scrub = document.querySelector<HTMLInputElement>('#scrub')!;
@@ -344,6 +355,33 @@ test('the Kenya film modules hold no motion, no outside URL and no unscoped rule
             assert.ok(film.lines > 1, `prompt is ${film.lines} line(s) tall`);
             assert.deepEqual(film.pending, [true, false]);
             assert.deepEqual(film.approved, [false, true]);
+
+            // Two tab cues, to Activity at 5 s and back at 10 s: each holds
+            // only from its own time, whichever order the frames come in.
+            const views = (await page.evaluate(`(() => {
+                stage.replaceChildren();
+                const tabs = DFO.mount(kit, {}).cue([
+                    { v: 'view-activity', from: 'view-chat', kind: 'tab', at: 5 },
+                    { v: 'view-chat', from: 'view-activity', kind: 'tab', at: 10 },
+                ]);
+                const active = kit.json('manifest.json').classes.viewActive;
+                const shown = (t) => {
+                    tabs.render(t);
+                    return ['view-chat', 'view-activity'].find((v) =>
+                        document.querySelector('[data-v="' + v + '"]').classList.contains(active),
+                    );
+                };
+                return [12, 0, 7, 12, 7, 0].map(shown);
+            })()`)) as string[];
+
+            assert.deepEqual(views, [
+                'view-chat',
+                'view-chat',
+                'view-activity',
+                'view-chat',
+                'view-activity',
+                'view-chat',
+            ]);
         } finally {
             await page.close();
         }