Toast Kit

Promise-API с автоматическим переключением типа, очередь приоритетов с вытеснением, undo-действия с таймером прогресса, группировка тостов, headless-режим и полная дизайн-система через CSS custom properties — всё с единственной peer-зависимостью (Vue 3).

Возможности

• Promise API — toast.promise(promise, messages) автоматически переключает loading → success / error в зависимости от результата; возвращает исходный промис без изменений
• Очередь приоритетов — четыре уровня (critical / high / normal / low); при достижении лимита видимости высокоприоритетные тосты вытесняют низкоприоритетные; вытесненный тост переходит в очередь ожидания и появляется снова, когда освобождается место
• Undo-действия — toast.undo(message, { undo: { onUndo, duration } }) рендерит таймер с прогресс-баром; клик по «Undo» вызывает callback и закрывает тост; когда таймер истекает, действие подтверждается молча
• Группировка — тосты с одинаковым groupKey складываются в один со счётчиком +N; клик по счётчику разворачивает группу
• Headless-режим — useToastState() возвращает сырые реактивные данные очереди; рендерите с любым UI-фреймворком или полностью кастомной разметкой
• Мульти-инстансы — createToastContext() создаёт изолированную очередь; передайте её в useToast(ctx) и <ToastContainer :context="ctx" /> для микрофронтендов или изолированных зон уведомлений
• Дизайн-система — 30+ CSS custom properties (--vtk-*), покрывающих цвета, типографику, форму, тени, анимации и z-index; три встроенные темы (light, dark, system); инлайн-переопределение токенов через проп theme у <ToastContainer>
• SSR-безопасность — ядро не использует browser API; тосты, вызванные до монтирования <ToastContainer>, буферизуются и сбрасываются после монтирования (задержка 100 мс)
• Доступность — role="alert" для error, warning и приоритета critical; role="status" для остальных; aria-live="assertive" для приоритета critical; Escape закрывает тост в фокусе; фокус возвращается на ранее активный элемент при закрытии
• Поддержка касаний — свайп влево или вправо для закрытия (порог 40% захардкожен; включается/выключается на уровне тоста через swipeToDismiss)
• Поддержка RTL — отступ кнопки закрытия использует логическое CSS-свойство (margin-inline-start), поэтому зеркалируется автоматически, когда на <html> установлен dir="rtl"
• Пауза при наведении / потере фокуса — таймеры автоматически замораживаются; visibilitychange останавливает все таймеры, когда вкладка уходит в фон
• Анимации — только CSS slide + fade для каждой позиции; prefers-reduced-motion понижает до только fade
• Плагин Vue + модуль Nuxt — app.use(VueToastPlugin) для Vue 3; modules: ['vue-toast-kit/nuxt'] для Nuxt 3 с авто-импортами
• Без внешних runtime-зависимостей — только Vue 3 как peer-зависимость; полный ESM + CJS, tree-shakeable