[milanb17]

Stacked on #1483 (the references and the scene API live there).

An animation's whiteboard.scene draws every card as the same box, so a reader cannot tell a database from the service in front of it, or a third-party API from one of ours, without reading each title. This gives cards three presentational options and leaves the kinds out of the API: the typings and the authoring instructions say which form fits what, and two references draw their cards that way.

The options

On SceneCardOptions (actor, store, table), and as data-form, data-outline and data-color on a hand-made wb-node:

Option	Values	Drawn as
form	box (default), pill, cut, cylinder, drum, stack, window, bars	border radii, corner-shape: bevel, a lid pseudo-element for the cylinder and the drum, a box-shadow stack, a title-bar rule, side rules
outline	solid (default), dashed, dotted	border style
color	ink, accent, teal, violet	border colour at rest (and the card's dot); a frame's tone takes over while set

teal and violet join the stage theme as --wb-teal (the software map's storage colour) and --wb-violet (the merged purple), so both follow light and dark. Highlights, tones, enter/exit/only and the card's content work unchanged on every form; the stack keeps its echoes under the highlight ring.

The option is called form rather than shape because lint reserves "shape" in identifiers.

Suggested defaults, not a schema

whiteboard.d.ts and the scene section of animation.md suggest: window for a client, bars for a service or worker of this codebase, cylinder for a database, drum for a cache, stack for a queue or topic, pill for a start or end, cut for a branch, outline: "dashed" for a third-party service, teal for stores and violet for queues. Nothing in the runtime knows those words.

The request-across-layers and cache-fill-evict references use them; their READMEs say so.

Verification

• Every animation browser test, including the references harness stepping all nine references through every frame: 30 passed. The stage kit variables test passes with the two new colours.
• pnpm lint, pnpm format and the canvas typecheck (which holds whiteboard.d.ts to the runtime's types) are clean.
• The screenshots are frames the harness saved (VITE_ANIMATION_SHOTS=1), dark theme. Not checked: light theme and an isolated Desktop. The screenshots live on pr-assets/scene-card-forms, as pr-assets/home-pr-pills did; delete that branch with this PR.

Second commit: a frame's remaining time along its step underline

While an animation plays, the marker under the step showing is drawn left to right over the frame's duration, on a wash of the full underline, so the one mark that says "this step" also says how much of it is left. Frames without labels sweep a ring around the current dot. Designed first on the "Play timer" page of the Animations Scratchpad Paper file.

• Only while playing: a frame reached by hand draws its underline whole, as before.
• Pause holds the line where it is and Play resumes from there; a jump to another frame forgets it; Replay starts over.
• Time up with the stage still settling holds the line full.
• The strip and dots draw it with a CSS animation from inline custom properties (--frame-timer-fill, --frame-timer-ms, --frame-timer-rest), so nothing ticks in React. Reduced motion shows the whole underline at once, as today.
• Two browser tests in blocks.browser.test.tsx: play runs the clock on the current step, pause holds it with a fraction between 0 and 1, a hand step drops it; and an unlabelled animation sweeps its current dot.

Third commit: steady height, ported from #1459

#1459 could not merge onto the animations branch mechanically, since the block it changed had split into a frame player, a clip player and a paint-in. Its changes are ported here by hand: the hidden measuring copy (measure / slotSizes on init, measured back), contentBottom and measureFrames in the runtime, the block's measuredHeight rule with its one-second fallback and remeasure triggers (stage, scenario, theme, width, slot heights), and the caption row keeping its tallest caption, now in StopCaption for both players. Clips are not measured. Its tests come along; the animation and block browser suites pass (97). #1459 can be closed once this merges.

Fourth commit: an expanded animation scales up

Expand gave the stage the overlay's width but never made the drawing bigger. Now the stage keeps its inline width fullscreen and the block scales the whole canvas, code peeks included, to fit the room the controls leave, at most 2x, centred; a room smaller than the inline stage scrolls as before. The measured-height logic is untouched because the stage still lays out at one width. One browser test expands a block in a wide host and checks the stage scales above 1x, keeps its inline layout width, and its footprint grows with it.

Seen while checking, not from these commits: a scene with four declared columns folded to two rows at a 614px stage keeps a 150px stage height, so the second row is clipped, inline and expanded alike. Reproduced on the commit before the steady-height port. Worth its own look.

Fifth to seventh commits: scene layout, pacing, groups, change marks and a legend

• Cards size to their content, 140 to 300px, centred in their columns, so a folded scene no longer stretches a card into a slab around a line of text.
• Edges are straight and level: a fanned pair's offset moves the whole line, and scene rows centre their cards so an edge between a short card and a tall one runs level.
• Play replays a still frame: a new stage's first frame, or the frame after a jump or Replay, is shown again with its motion when Play reaches it. A send's chip travels at half its old speed, 900 to 2400 ms, after a short lead. One browser test covers the replay.
• s.group({ id, at, title, color }) draws a washed, titled box behind the cards in its cells; hidden when the scene folds.
• change: "added" | "modified" | "removed" on a card marks what the review did to that part: dot and left stripe in the change colour, struck title when removed. A frame's tone still colours the card over it.
• s.legend([...]) draws one row under the scene, a card-shaped glyph with the entry's marks and a label each.
• The typings and animation.md describe all of it; request-across-layers groups its server, marks the API as modified and carries a legend. The cylinder form's text sits centred in its body.

Later commits: layout room, routing, the state-only dot, an architecture reference

• Storage-form labels centre in their drum or cylinder; the card dot shows only with a tone or change mark.
• A new reference, video-platform-architecture: four grouped layers, forms, a dashed CDN and a legend, with upload and playback scenarios.
• An edge bows clear of a card by the card's reach across the line, not its longest side, and a card near the line is passed toward the stage's middle; a frame hides other frames' chips.
• A grouped scene opens its rows and columns to 72px so the layers stand apart and cross-layer edges can be followed.
• Fullscreen, the stage always lays out at its inline width and scales to fit, down to 0.4x beside the tour pane, so it never folds, loses its groups, or measures a folded height.