[milanb17]

Five commits, reviewable separately.

Pad animations and let them expand fullscreen

• The animation stage gets 16px of padding so drawings no longer run into the card's edges. The iframe and its slot overlays sit in an inner box, so host code peeks stay aligned.
• An Expand button in the animation header opens the figure in a fullscreen overlay over the canvas, the same shell behavior as diagram tours: themed, Escape closes, canvas scroll locked. The drawing is centred and the controls stay at the bottom. An inline placeholder holds the document's place, and focus goes to Close on open and back to Expand on close.
• The stage iframe now inherits the page's color-scheme instead of normal. In dark themes the mismatch made Chromium paint an opaque backdrop behind the frame, which the new padding made visible.

Opening or closing fullscreen reloads the stage at its current frame (the figure moves into a portal), so an in-progress transition restarts.

Remove Mermaid (Pele) from animations

whiteboard.mermaid laid out large graphs, but labels couldn't change between frames, chips couldn't travel edges, nodes didn't link to code, and wide graphs were shrunk until their labels were unreadable. Animations now have two modes: the scene, and the toolkit with raw HTML. The authoring guide now says to put a large graph in a flow_diagram beside a scene that animates only the part that changes.

This removes the stage's Mermaid code and styles, the Pele loader, the pele dependency and its test config, and the two Mermaid tests.

Existing boards: a stage that still calls whiteboard.mermaid() gets an inline error saying to rebuild it as a scene or a flow_diagram. The rest of the board, and the animation's controls, still render. Animations are experimental (behind a setting) and unreleased, so only recent dev boards can be affected.

Merge with main

#1428's guard against a stage navigating away keyed on stageKey, so the fresh iframe that fullscreen mounts was taken for a navigation and never booted ("The animation left its stage."). The guard now keys on the iframe element, which still catches a reload in the same frame. A new test goes fullscreen and back and checks the stage boots each time; it fails with the old guard.

Add scenarios to animations, with a labelled picker

Alternate paths used to be buttons that each agent drew inside the stage, and readers didn't recognise them as scenarios.

• An animation component can declare scenarios: 2 to 8 entries of { key, label, frames }, each an ordered path through the declared frames. The server rejects duplicate keys, a frame listed twice, and frames the animation doesn't declare.
• The block draws a picker labelled "Scenario" above the stage, using the kit's SegmentedControl. The stage starts on the first scenario (or the one already picked, across fullscreen), and picking another sends the stage its frames as the active path.
• whiteboard.setSequence still works for a branch the drawing itself decides. When its path matches a scenario, the picker shows that scenario.
• The authoring guide describes scenarios, and its checklist says alternate paths are scenarios, not buttons drawn in the stage.

Fold wide scenes into fewer columns and open columns for link labels

Found while testing a complex board (four-column scene, code peeks, three scenarios) in Desktop.

• At the default document width, a four-column scene didn't fit and stacked into one column, so the stage was about 430px tall. It now folds into fewer columns in row/column order: four become two rows of two (about 180px), and a cell spanning columns takes a whole row. It still stacks to one column when even that doesn't fit, and fullscreen shows all four.
• Link labels between cards in the same row were wider than the 48px column gap and got pushed off their lines. The gap now widens to fit the longest such label, up to 160px.

Keep the selected block's hint on it as the block resizes

In the board editor, the hint on a selected block was measured once. An animation grows as its frames add code peeks, so the hint stayed where the block used to end, inside a peek. It now follows the card's size.

Testing

• Isolated Desktop (padding/fullscreen change, before the Pele removal): light and dark, narrow window, Enter/Escape and focus return, frame controls and ArrowRight while fullscreen, frame position carried across open/close.
• Animation browser tests in blocks.browser.test.tsx (9 pass) and animation-authoring / instructions tests (15 pass).
• pnpm lint, pnpm format, canvas typecheck.
• Isolated Desktop, on a fresh board with a four-column scene, three code peeks and three scenarios, plus a raw-HTML animation with a peek: the picker switches paths, the scene folds 2×2 inline and keeps four columns in fullscreen, link labels sit by their lines, and the editor hint follows the block as it resizes.
• New browser tests for the picker and for folding and label gaps, and a review-api test for scenario validation.
• Not checked in Desktop: dark mode or a narrow window for the picker and fold.
• Not checked in Desktop after the Pele removal: an old board that calls whiteboard.mermaid, or reduced motion (nothing new animates).