[pdevito3]

Why

On a phone, while a bottom sheet is open, index.css shows only the newest toast and hides the others visually (#126). React Aria starts the timer of a toast when the toast mounts, so the hidden toasts closed while the user could not see them. An error toast behind a newer success toast was lost.

Closes #128

What changed

• toastQueue is now a ShownToastQueue. It pauses the timer of a hidden toast, and gives the toast its full time again when it shows. Its resumeAll does not restart a hidden toast when the pointer or the focus leaves the toast region. It pauses a timer before it starts it again, because React Aria starts a second timeout for a timer that runs.
• Toaster puts a ResizeObserver on each toast. A toast that index.css hides is 1 px by 1 px, so the observer tells the queue that it is hidden. index.css stays the one place that decides which toasts show.

Scope

• Each toast shows in turn while the sheet is open, each for its full time. When the sheet closes, all toasts that are left show, as before.
• No "+N more" line. The user sees each waiting toast when the toast before it closes, and the line would make the toast area over the sheet taller again.
• Desktop and narrow screens without a bottom sheet keep their timing, with one exception. On main, a toast added while the pointer was on the toasts closed at 5 s under a second hover, because React Aria started a second timer. Now it waits for the hover to end. No toast mounts again, so a screen reader announces each toast once.

Tradeoffs

• A "+N more" line alone does not stop an error from timing out unseen.
• To show the next toast only when the visible one leaves, the region would render one toast at a time. Each older toast would mount again and a screen reader would announce it a second time.
• A JavaScript copy of the CSS condition (screen width and an open bottom sheet) would put the same rule in two places.

Blast Radius

Every toast goes through this queue. On a desktop, the observer always reports a shown toast, and markShown does nothing for a toast that was never hidden. The queue uses the public pause, resume, and reset methods of the React Aria timer, and package.json already pins react-aria-components to ~1.22.1 for the UNSTABLE_ toast API.

Verification

• pnpm test:e2e: three new scenarios in tests/features/toasts/toasts.spec.ts stop the clock at 667x375 and move it by hand. They fail on main and pass with the fix. 36 passed. The toast specs passed 180 of 180 with --repeat-each=10 and --repeat-each=20 on 4 workers.
• pnpm test: a new test in toaster.test.tsx adds a toast while the pointer is on the toasts, then hides it with a newer toast. It fails on main and passed 10 of 10 with the fix. 81 passed.
• Real time, sheet open, Success then Error then Info, at 667x375 and 390x844. Before: Success was hidden and closed at 5.2 s unseen, and Error showed for 0.95 s. After: Info shows 0.3-5.2 s, Error 5.2-11.2 s, and Success 11.2-16.2 s.
• Screenshots in light and dark at 667x375, 390x844, and 1280x800. Desktop toasts have the same pixels before and after, except for run-to-run noise in the theme toggle. pnpm lint and pnpm build pass.

Sheet open, Success then Error then Info, 5 s later. Before: no toast shows. After: the error shows.

Before	After

[pdevito3]

Open findings from the review gate. Both stay as they are, for the reasons below.

L1 (low): the pause flag can stay set when the region empties while it has focus. The queue copies React Aria's own behavior here. ToastRegion stays mounted when it is empty, so its focus-within listener clears the flag on the next focus change. Opening a bottom sheet moves the focus, so the flag is clear before a toast can be hidden.

Not re-reviewed: the last change to resumeAll. The final review found that React Aria starts a second timeout when it resumes a timer that already runs, and that a pause stops only the newest one. A toast that came while the pointer was on the toasts could then close at its first deadline while it was hidden. While I wrote the test for it, I found a second path to the same fault: resumeAll started the timer of a toast that had not rendered yet, and React Aria then started it again on mount. The queue now pauses a timer before it starts it again, and it skips a toast that has not rendered yet. The new test in toaster.test.tsx fails on main and failed 6 of 6 with the earlier queue. It passed 10 of 10 with this one. The review playbook allows only two review passes, so no independent reviewer has read this change.