export an animated HTML diagram, and a scenario layer to animate #26

A rendered diagram says what is connected but not what moves through it. An HTML target can, because it is the one output that can hold motion: data flowing along each edge, a branch taken under one condition and not another, a service going down and the path it recovers by.

Two pieces, deliberately split — the second one changes the input contract and the first one does not.

1. -o x.html with flow animation (no schema change)

One self-contained file, no CDN and no build step: the SVG the renderer already produces, plus dashes travelling along every edge in the direction the arrow points, plus pan and zoom. Uniform speed on every edge — a repeating dash offset animates one dash period over a fixed duration, so length does not change how fast it reads. Honours prefers-reduced-motion.

Nothing about the YAML changes, so every existing file gains this by re-rendering. write() in packages/cli/src/cli.ts grows a third branch beside .png; the animation itself belongs in packages/core next to the geometry, behind an opt-in prop so the static SVG and its snapshots are untouched.

2. Scenarios (schema change — decided, not built)

Shape decided: an edge or a node declares when it is alive, rather than a scenario listing what it changes. That matches the flat form the generators already write — no recursion, one line per element, and an agent can emit it in a single pass.

scenarios:
 - { id: normal, label: steady state }
 - { id: cache-down, label: Redis is down }
nodes:
 - { id: redis, type: redis, label: Redis, down: [cache-down] }
 - { id: rds, type: rds, label: RDS }
edges:
 - { from: api, to: redis, label: get, when: [normal] }
 - { from: api, to: rds, label: fallback, when: [cache-down] }

The HTML then carries one button per scenario: elements not alive in the selected one grey out, down: nodes are marked as failed, and only the live edges flow.

The known cost of this shape, accepted: an element is either alive or not, so a scenario that runs through stages — fails, is detected, is recreated, recovers — cannot be written as a sequence. The alternative considered was scenarios[].steps[] with times, which draws the recovery but asks the author to keep two lists in agreement and lets one typo kill a whole scene silently.

Layout must stay put across scenarios — a picture that reflows when a button is pressed loses the reader — so the graph is laid out once with every element present and scenarios only change what is drawn.