GrToaster

toast.promise ведёт весь жизненный цикл запроса в одном тосте: «загружаем» переписывается в результат, а не закрывается ради нового — стек не дёргается.

const { promise } = useToast()

promise(api.sync(), {
  loading: { title: 'Синхронизируем', message: 'Отправляем изменения…' },
  success: result => ({ title: 'Готово', message: `${result.files} файлов` }),
  error: reason => ({ title: 'Не вышло', message: String(reason) }),
})

Строка вместо объекта — шорткат для { title }. Загрузочный тост показывается без автозакрытия, результат получает обычный таймаут.

Промис возвращается как есть и отказ не глотается — тост не заменяет обработку ошибки, catch по-прежнему на вызывающем. Если пользователь закрыл тост руками, пока запрос шёл, результат его не воскресит.

Точечно тост меняется через update(id, patch): он же перезапускает таймер, когда в патче приходит timeoutMs.

maxVisible у компонента ограничивает только видимые тосты. Сама очередь ограничена потолком состояния — по умолчанию 20; при переполнении вытесняются самые старые, вместе с их таймерами. Иначе поток событий (переподключение сокета, цикл ошибок) копил бы очередь и вываливал её на пользователя, когда стек освободится.

app.use(granularityToastPlugin, { maxToasts: 50 })

maxVisible держит число видимых тостов, но ничего не говорит про занятое ими место: подняв его до восьми, приложение получало колонку в пол-экрана поверх того интерфейса, ради которого уведомления и показывают.

collapse (по умолчанию 3) задаёт, со скольких видимых тостов стек схлопывается в стопку: передняя карточка видна целиком, из-под неё выглядывают края следующих, и весь стек занимает место одного тоста. collapse: false выключает схлопывание совсем.

Порог, а не переключатель: пока тостов два-три, колонка читается лучше стопки — все сообщения видны сразу, и прятать их незачем.

Разворачивают стопку наведение и фокус — те же два сигнала, что ставят таймеры на паузу (см. «Пауза автозакрытия»). Раз уж читать стек начали, отсчёт всё равно обязан остановиться, и заводить для разворота третий сигнал значило бы развести эти два события во времени.

Стопка растёт от своего угла вглубь экрана: у верхних углов вниз, у нижних — вверх. Содержимое карточек за передней погашено: из щели в двенадцать пикселей видны края карточек, а не обрывки строк.

Очередь этим не заменяется: стопка — про раскладку видимых тостов, очередь — про то, скольким вообще дают показаться.

dedupeKey у push() заменяет живой тост с тем же ключом и перезапускает его автозакрытие. Типовой источник дублей — навигация, переигрывающая одни и те же пропсы страницы: без ключа каждое повторение заводило бы новый тост.

push({ title: flash.success, tone: 'success', dedupeKey: `flash:${flash.success}` })

Ключ занят, только пока тост на экране. Это не то же самое, что помнить последний показанный текст: такая память не сбрасывается, и повтор действия с тем же текстом («Сохранено» второй раз) не показался бы вовсе. Закрылся тост — ключ свободен, и следующий push снова видимый.

Повтор заменяет тост целиком, как стадия promise(): message и кнопки от предыдущего вызова не донашиваются. Точечная правка показанного тоста — это update(id, patch), у неё патч-семантика.

Тост объявляет себя сам: role="status", а warning/danger — ассертивный role="alert". Постоянной обёртки-live-region над списком нет и не должно быть: вложение регионов с разной ассертивностью спецификацией не определено — браузеры и скринридеры расходятся вплоть до полной потери объявления. Контейнер остаётся именованным role="region" (regionLabel), это навигация, а не объявление.

Тост смахивается к своему краю экрана: стек справа уходит вправо, слева — влево. Смахивание вглубь экрана читалось бы как попытка достать что-то из-под тоста, а не выбросить его, поэтому движение «наоборот» идёт с сопротивлением — тост едет за пальцем, но не закрывается.

Порог — четверть ширины тоста, но не меньше 56px. Отпустили раньше — тост вернулся; отпустили дальше — закрылся. Обрыв жеста возвращает тост: если указатель забрал браузер (системный жест, звонок, потеря окна), пользователь жест не довёл, и дожимать его за него нельзя.

Пока тост тянут, его таймер стоит — иначе уведомление сгорало бы прямо под пальцем, посреди жеста.

Отпущенный тост уезжает за свой край и только потом закрывается. Отлёт — это тот же переход, что и у остальных состояний тоста, поэтому prefers-reduced-motion чинить нечем и не нужно: глобальный кламп сжимает переход до мгновенного, а сам жест — прямое манипулирование, а не движение интерфейса, и гасить его нечего.

swipe-dismiss="false" выключает жест; клавиатурный эквивалент при этом остаётся.

Тосты телепортированы в конец body, поэтому кнопка «Отменить» лежит за пределами разумного числа нажатий Tab. F6 (проп focusHotkey, false отключает) переводит фокус на верхний тост, дальше действия обходятся обычным Tab. Сам тост собственной остановкой Tab не является — tabindex="-1": всплывающее уведомление не должно перехватывать обход страницы.

То же снаружи — через ref:

<GrToaster ref="toaster" />

focus() возвращает false, если стек пуст.

Delete и Backspace на сфокусированном тосте закрывают его — то же действие, что смахивание. Фокус переходит на соседний тост, если он есть: падать на body посреди стека, который ещё читают, некуда. Закрыт последний — фокус возвращается туда, откуда пришли в стек (F6 или focus() запоминают этот элемент), если он ещё в документе. Так же ведут себя крестик и кнопки действий с dismissOnClick, когда фокус на них. Escape намеренно не занят — тостер не модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.

width — число (пиксели) или CSS-длина; уезжает в --gr-toaster-width, поэтому то же самое задаётся и темой. Дефолт — 360px, потолок — calc(100vw - 2rem).

Курсор, фокус внутри стека или начатое смахивание останавливает таймеры всех видимых тостов и замораживает полосу прогресса (WCAG 2.2.1). Тосты из очереди (сверх maxVisible) стоят на паузе всегда — отсчёт начинается, когда тост становится видимым.