Progress Bars IV

Build progress bars that fill concurrently, at most three at a time, and let the user pause and resume each one. This is the hard finale of the family: pausing a bar mid-fill frees its slot so a waiting bar can start, and resuming puts it back in contention. The twist is that a CSS transition can't be paused mid-flight — so progress moves from "hand it to CSS" to "drive it yourself in JavaScript", one tick at a time.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Several bars, each with a Pause/Resume button; at most three advance at once, and paused bars don't consume a slot.

Examples

start:           bars 0,1,2 advancing | 3,4 waiting
pause bar 1:     bars 0,2,3 advancing | 4 waiting   (1 frozen, slot went to 3)
resume bar 1:    1 rejoins; the cap still holds at three advancing
bar done:        its button disables; the next waiting bar advances

Each tick: walk the bars in order, advance the first 3 that are
NOT done and NOT paused. Skipped bars (paused/done) don't use a slot.

Notes

• Drive progress in JS. Because a paused bar must freeze mid-fill, hold a numeric progress (0–100) per bar and increment it on a timer — a CSS transition can't stop partway.
• Pause = skip, not stop. A paused bar is simply skipped when advancing, so it neither moves nor counts toward the three-at-a-time cap; a waiting bar takes the slot.
• Cap by counting as you go. Each tick, advance only the first three eligible (not done, not paused) bars; that single rule enforces the limit through pauses and resumes.
• Premium / hard. This combines timers, a concurrency cap, and per-item pause state — the trickiest member of the family.