feat(playback): speed tiers, a full Step, and the phone's Playback speed with 12 pairs a step (v0.24.0)

[MerciHanrim]

Summary

Part of #330: the last of its three playback pull requests (v0.24.0). Playback speed now decides how much a step draws, Step always draws the full movement, and the phone gets a Playback speed choice and fewer moving markers. A presentation layer only: the engine, the RNG, files, share links, digests and simulation results are unchanged, and the speed is still not saved.

What changes

• Three speed tiers, read once when a step starts (src/store/playbackTier.ts). Full, 400 ms a step or slower: the token travels with its +N beside it, as in v0.22.0. Fast, 200–399 ms: the token travels and +N shows from the arrive beat. Very fast, below 200 ms: the moved path flashes (pb-path--flash) from its onset to the arrive beat, then the token appears at the end with +N. Changing the speed during a step changes its pace, not what it draws; the next step takes the new tier.
• Step always draws the full tier, whatever the speed.
• Unchanged by the tier: state beads, the Gate path, arrival cues, the Pool pulse and the Converter mark (v0.23.0), the 24-pair budget and its stable order, reduced motion and L0.
• The phone's Playback speed. ⋯ → Playback speed opens a sheet with Slow (1 s), Normal (0.6 s, the default), Fast (0.3 s) and Very fast (0.12 s); the current one is pressed and checked, and the More row shows its name. The new rows are 44 px. The run bar still has no seed.
• The phone profile, fixed when a step starts. On a phone layout without reduced motion a step draws at most 12 token–badge pairs, the first 12 of the same stable order as the desktop's 24, and no departure ring. Every move past the 12 keeps its path highlight and arrival cue; the chosen pairs keep their +N; Pool pulses and Converter marks stay. A rotation or resize mid-step makes nothing in that step appear or disappear. Under reduced motion the phone uses the desktop profile, so its static form is unchanged.

Current limit

A step with about 300 simultaneous moves draws at roughly 70–200 ms a frame on a desktop development build, on main as on this branch; hiding the pulse or the cues does not change it. Recorded in docs/simulation-playback.md §PB6.1, not optimised here.

Contract changes

• docs/simulation-playback.md §PB6.1: the tier table and its rules, the display profile (phone 12, no departure ring, fixed per step, reduced motion uses the desktop profile, the L0 pulse within the budget), and the current limit.
• docs/mobile.md §MV4: the Playback speed sheet and the fewer moving elements; MV-D7 updated.
• docs/visual-language.md §VL9: the tiers.

Tests

• New e2e/playback-speed-tiers.spec.ts, 9 tests: the full, fast and very fast tiers with the tier read once per step; Step at full tier at 120 ms; the phone profile (the first 12 of the desktop pairs, no .pb-cue--depart, the 18 moves past 12 with their path and arrival cue); the profile fixed across a mid-step resize; the phone speed sheet; reduced motion within 24 on the phone; the tiers are a view only (values at 120 ms equal the same steps advanced without cues).
• src/store/playbackTier.test.ts: the 400 / 200 ms boundaries, the phone speeds' tiers, the 12 and 24 caps.
• e2e/mobile.spec.ts: the secondary-label contrast walk counts the new More row (15) and its submenu marker list adds Playback speed; titles unchanged.
• Test list: chromium 1,919 → 1,928 (+9), mobile 117 and portable 15 unchanged, total 2,052 → 2,061; no title renamed or removed.

Baselines

Three replaced, approved after an off (main 1a1ce1b) / on (this branch) capture of all 76, each side captured twice to separate noise, compared on every channel: playback-visual play-depart-light-L2-mobile, play-depart-dark-L2-mobile and play-depart-forced-colors-L2-mobile (no departure ring on the phone; 85, 109 and 85 px, of which 0, 19 and 3 px are ±1–2 per channel anti-aliasing beside the removed ring layer, the same in every capture). The desktop play-depart-*-chromium baselines are unchanged. Four that differed between captures of the same side are noise and were left as they are (ko-desktop-app-chromium, ko-long-label-and-tip-chromium, frame-colours-chromium, state-inspector-light-chromium). The other 73 are byte-identical.

Checks run locally

• npx tsc -b, unit tests 3,289 passed, every source check:*, oxlint at its 39-warning baseline.
• Every spec that owns baselines, 1 worker, retries 0, twice in a row: chromium 243 passed and mobile 88 passed in both runs, 0 failed, 0 retried; after them all 76 baselines are byte-identical to the approved set.
• The full e2e, 2 workers, retries 0: chromium 1,925 passed and 3 skipped, mobile 113 passed and 4 skipped; 0 failed, 0 retried.
• A large-graph probe, main against this branch at each tier: frame times equal or better, at most 24 tokens and badges at every tier.

Release

v0.24.0: package.json, the release-note entry (three lines in 18 languages, 16 without native review; the Portuguese lines are identical in pt-BR and pt-PT), nine phone strings, .changes/playback-speed-tiers.json, CHANGELOG.md, README.md. The release date is set to the Seoul day of the merge right before it.

[cloudflare-workers-and-pages]

Deploying cozy-loop-studio with    Cloudflare Pages

Latest commit:	4e17549
Status:	✅  Deploy successful!
Preview URL:	https://946c69eb.cozy-loop-studio.pages.dev
Branch Preview URL:	https://feat-play-speed-tiers.cozy-loop-studio.pages.dev

View logs