Pomodoro Timer Dialog Block for React

So you can see it without a click, and so a poster or a gallery card never ages. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. In it the clock stands at 25:00 until you press Start, and then it really runs. The Focus button in the header opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same FocusFields component and share the block's state, including a clock that is already running. In your app keep the Dialog and drop the copy.

Focus, then a short break, then focus again, with a long break after the fourth focus, after which the count starts over. A finished focus fills the next session dot; Skip moves on without counting the round, and Reset puts the current phase back to its full length. Picking a phase by hand stops the clock at that phase's length. The phase moves by itself and says so once in the polite status, such as "Short break started"; it does not announce every second.

At the next start of a phase, never in the middle of one: type new minutes (1 to 90, whole numbers) under Durations and the running clock is untouched until a phase begins, a Skip, a Reset or the next Start from a fresh phase. A length that is out of range says so and the old length stays.

The status line speaks when you start, pause, resume, reset or skip, and when a phase changes: never every second. The digits are plain text you can read whenever you like, and the ring is decoration. Pause is a real button next to Start, and Reset and Skip are beside them. The clock is the catalog Timer, counting one second at a time; the ring's fill follows it and stops animating under reduced motion while the digits keep running.

Everything. Nothing plays, no sound is made, and no session is recorded: the dots, the chip and the clock live in this page's state. In your app save each finished focus on your server, play a sound or send a notification from the phase change (finish is the place), and persist the chosen lengths with the person's settings.

The copy shown on load docks to the foot of the page as a bottom sheet with its Done button pinned and the content scrolling above it; the phase switch, the ring and Start come first. The three phases wrap their labels instead of shrinking, and the durations sit in three narrow columns. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.