Toast updates

[srcdev]

Add app-wide toast queue infrastructure (DisplayToastProvider + useToastQueue)

Summary

• useToastQueue composable — module-level singleton reactive queue (no Pinia). show() returns an ID, dismiss(id) removes a specific toast, clear() flushes all. Uses crypto.randomUUID() with a toast- prefix for guaranteed unique IDs. The queue is exposed as readonly to consumers.

• DisplayToastProvider component — placed once in the app layout. Consumes the queue and renders visible entries via Teleport to="body" + TransitionGroup. Supports position, alignment, fullWidth, and maxVisible props. Promotes pending entries to visible up to maxVisible, starts per-entry auto-dismiss timers, and handles Escape-key and close-button dismissal.

• Queue-driven stacking — toasts queue as pending and are promoted sequentially as visible slots open. When a visible toast is dismissed, the next pending entry enters immediately.

• FLIP animation for stack dismissal — @before-leave pins each departing toast's top/width before it becomes position: absolute, removing it from flex flow so remaining toasts FLIP-animate (via v-move) into their new positions smoothly rather than snapping. min-width is pinned on the container during each leave and released in @after-leave to prevent the right-anchored width: max-content container from collapsing and causing horizontal jitter.

• Enter animation fix — DisplayToastProvider now uses explicit showTop/showBottom keyframes (with from states) instead of relying on v-enter-from being captured by the animation engine, ensuring the slide-in is always visible.

• Updated demo page (pages/ui/display-toast.vue) — simplified to two trigger buttons ("Trigger Toast", "Queue Multiple") with a dev-only QA panel for all position/alignment/theme/auto-dismiss/maxVisible controls.

• New Storybook stories (DisplayToastProvider.stories.ts) — Default, BottomLeft, Stacked (maxVisible: 3), FullWidth stories with grouped arg controls for provider and toast config.

• 35 tests covering mount, empty state, show/promote, content rendering, data-theme, ARIA roles/live/describedby, tabindex, position/alignment/fullWidth classes, maxVisible gating, close-button dismiss, Escape-key dismiss, auto-dismiss timer, no-auto-dismiss, queue progression, progress bar, and clear().

• Skills updated — display-toast.md expanded to document both the standalone DisplayToast pattern and the new queue-based pattern side-by-side.

Test plan

• Trigger a single toast — verify slide-in animation (top and bottom positions)
• Queue multiple toasts with maxVisible=1 — verify sequential promotion on dismiss
• Queue multiple with maxVisible=3 — verify up to 3 visible, remaining in queue
• Dismiss a toast mid-stack — verify remaining toasts FLIP smoothly with no horizontal jitter
• Dismiss to promote next in queue — verify new toast enters cleanly (no right-edge flash)
• Verify auto-dismiss timer and progress bar
• Verify Escape key dismisses focused toast
• npm run test:run — all 35 tests pass

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
srcdev-design-system	Ready	Preview, Comment	Jun 15, 2026 11:54pm
srcdev-design-system-storybook	Ready	Preview, Comment	Jun 15, 2026 11:54pm

[Copilot]

Pull request overview

This PR introduces an app-wide toast queuing system for DisplayToast via a new useToastQueue composable and a single DisplayToastProvider renderer component, plus updated demo/docs and added test/story coverage.

Changes:

• Added useToastQueue singleton composable and ToastQueueEntry/Status types to drive an app-level toast queue.
• Added DisplayToastProvider to render queued toasts with Teleport + TransitionGroup (stacking, maxVisible gating, timers, Escape/close dismissal, FLIP-style movement).
• Updated the UI demo page and internal docs; added Storybook stories and a comprehensive provider test suite.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
app/types/components/display-toast.d.ts	Adds toast queue entry/status types to the shared component type exports.
app/composables/useToastQueue.ts	Implements singleton reactive queue API (show/dismiss/clear + currently promote).
app/components/01.atoms/toast/DisplayToastProvider.vue	New provider that renders queued toasts and manages promotion/timers/animations.
app/components/01.atoms/toast/tests/DisplayToastProvider.spec.ts	Adds provider tests (rendering, ARIA, maxVisible, dismiss paths, timers, clear).
app/components/01.atoms/toast/stories/DisplayToastProvider.stories.ts	Adds Storybook stories for provider positions/stacking/fullWidth.
app/pages/ui/display-toast.vue	Updates demo page to use provider + queue and adds a dev QA panel.
.claude/skills/index.md	Updates skills index entry to reflect new provider/queue pattern.
.claude/skills/components/display-toast.md	Expands docs to cover both standalone and queue/provider patterns.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.