@soft-toast/vue 1.0.0

package/src/composables/useToast.test.ts

@@ -0,0 +1,230 @@
+import { describe, it, expect, beforeEach } from 'bun:test'
+import { useToast, toast } from './useToast'
+import { toastStore } from '../stores/toastStore'
+
+// Reset store state before each test
+beforeEach(() => {
+  toastStore.clearAll()
+})
+
+// ─── useToast() composable ────────────────────────────────────────────────────
+
+describe('useToast()', () => {
+  it('returns an object with all API methods', () => {
+    const t = useToast()
+    expect(typeof t.default).toBe('function')
+    expect(typeof t.success).toBe('function')
+    expect(typeof t.error).toBe('function')
+    expect(typeof t.warning).toBe('function')
+    expect(typeof t.info).toBe('function')
+    expect(typeof t.promise).toBe('function')
+    expect(typeof t.custom).toBe('function')
+    expect(typeof t.update).toBe('function')
+    expect(typeof t.dismiss).toBe('function')
+    expect(typeof t.dismissAll).toBe('function')
+    expect(typeof t.pause).toBe('function')
+    expect(typeof t.resume).toBe('function')
+  })
+
+  it('default() adds a toast with type "default"', () => {
+    const t = useToast()
+    const id = t.default('Hello')
+    const toasts = toastStore.toasts.value
+    expect(toasts.length).toBe(1)
+    expect(toasts[0].type).toBe('default')
+    expect(toasts[0].title).toBe('Hello')
+    expect(toasts[0].id).toBe(id)
+  })
+
+  it('success() adds a toast with type "success"', () => {
+    const t = useToast()
+    t.success('Done!')
+    expect(toastStore.toasts.value[0].type).toBe('success')
+    expect(toastStore.toasts.value[0].title).toBe('Done!')
+  })
+
+  it('error() adds a toast with type "error"', () => {
+    const t = useToast()
+    t.error('Oops!')
+    expect(toastStore.toasts.value[0].type).toBe('error')
+  })
+
+  it('warning() adds a toast with type "warning"', () => {
+    const t = useToast()
+    t.warning('Watch out!')
+    expect(toastStore.toasts.value[0].type).toBe('warning')
+  })
+
+  it('info() adds a toast with type "info"', () => {
+    const t = useToast()
+    t.info('FYI')
+    expect(toastStore.toasts.value[0].type).toBe('info')
+  })
+
+  it('custom() passes options through directly', () => {
+    const t = useToast()
+    t.custom({ type: 'success', title: 'Custom', description: 'My desc', duration: 9999 })
+    const added = toastStore.toasts.value[0]
+    expect(added.title).toBe('Custom')
+    expect(added.description).toBe('My desc')
+    expect(added.duration).toBe(9999)
+  })
+
+  it('update() changes an existing toast', () => {
+    const t = useToast()
+    const id = t.default('Before')
+    t.update(id, { title: 'After', type: 'success' })
+    const updated = toastStore.toasts.value.find(x => x.id === id)
+    expect(updated?.title).toBe('After')
+    expect(updated?.type).toBe('success')
+  })
+
+  it('dismiss() marks toast as isLeaving', () => {
+    const t = useToast()
+    const id = t.default('Bye')
+    t.dismiss(id)
+    const toast = toastStore.toasts.value.find(x => x.id === id)
+    expect(toast?.isLeaving).toBe(true)
+  })
+
+  it('pause() and resume() toggle isPaused', () => {
+    const t = useToast()
+    const id = t.default('Pausing')
+    t.pause(id)
+    expect(toastStore.toasts.value[0].isPaused).toBe(true)
+    t.resume(id)
+    expect(toastStore.toasts.value[0].isPaused).toBe(false)
+  })
+
+  it('forward options like duration, description, position', () => {
+    const t = useToast()
+    t.success('With opts', {
+      description: 'More info',
+      duration: 1234,
+      position: 'bottom-center'
+    })
+    const added = toastStore.toasts.value[0]
+    expect(added.description).toBe('More info')
+    expect(added.duration).toBe(1234)
+    expect(added.position).toBe('bottom-center')
+  })
+})
+
+// ─── toast (static object) ────────────────────────────────────────────────────
+
+describe('toast (static API)', () => {
+  it('toast.success() adds a success toast', () => {
+    toast.success('Static success')
+    expect(toastStore.toasts.value[0].type).toBe('success')
+    expect(toastStore.toasts.value[0].title).toBe('Static success')
+  })
+
+  it('toast.error() adds an error toast', () => {
+    toast.error('Static error')
+    expect(toastStore.toasts.value[0].type).toBe('error')
+  })
+
+  it('toast.warning() adds a warning toast', () => {
+    toast.warning('Careful')
+    expect(toastStore.toasts.value[0].type).toBe('warning')
+  })
+
+  it('toast.info() adds an info toast', () => {
+    toast.info('Just so you know')
+    expect(toastStore.toasts.value[0].type).toBe('info')
+  })
+
+  it('toast.default() adds a default toast', () => {
+    toast.default('Hello world')
+    expect(toastStore.toasts.value[0].type).toBe('default')
+  })
+
+  it('toast.custom() adds toast with arbitrary options', () => {
+    toast.custom({ title: 'Custom static', type: 'info', id: 'static-1' })
+    expect(toastStore.toasts.value[0].id).toBe('static-1')
+    expect(toastStore.toasts.value[0].title).toBe('Custom static')
+  })
+
+  it('toast.update() modifies a toast', () => {
+    const id = toast.default('Initial')
+    toast.update(id, { title: 'Updated' })
+    expect(toastStore.toasts.value.find(x => x.id === id)?.title).toBe('Updated')
+  })
+
+  it('toast.pause() and toast.resume() work', () => {
+    const id = toast.info('Pausable')
+    toast.pause(id)
+    expect(toastStore.toasts.value[0].isPaused).toBe(true)
+    toast.resume(id)
+    expect(toastStore.toasts.value[0].isPaused).toBe(false)
+  })
+
+  it('toast.dismiss() marks toast as leaving', () => {
+    const id = toast.success('Going away')
+    toast.dismiss(id)
+    expect(toastStore.toasts.value.find(x => x.id === id)?.isLeaving).toBe(true)
+  })
+
+  it('multiple toasts are ordered newest-first', () => {
+    toast.default('First')
+    toast.success('Second')
+    toast.error('Third')
+    const titles = toastStore.toasts.value.map(t => t.title)
+    expect(titles).toEqual(['Third', 'Second', 'First'])
+  })
+})
+
+// ─── toast.promise() ─────────────────────────────────────────────────────────
+
+describe('toast.promise()', () => {
+  it('resolves: updates toast to success', async () => {
+    const id = await toast.promise(
+      Promise.resolve('ok'),
+      { loading: 'Loading…', success: 'Done!', error: 'Failed' }
+    )
+    // After resolve the store should have a success toast
+    const t = toastStore.toasts.value.find(x => x.title === 'Done!')
+    expect(t?.type).toBe('success')
+    expect(id).toBe('ok')
+  })
+
+  it('rejects: updates toast to error and re-throws', async () => {
+    let caught: unknown
+    try {
+      await toast.promise(
+        Promise.reject(new Error('boom')),
+        { loading: 'Loading…', success: 'Done!', error: 'Something failed' }
+      )
+    } catch (e) {
+      caught = e
+    }
+    expect(caught).toBeInstanceOf(Error)
+    const t = toastStore.toasts.value.find(x => x.title === 'Something failed')
+    expect(t?.type).toBe('error')
+  })
+})
+
+// ─── Flash & sound API surface ────────────────────────────────────────────────
+
+describe('useToast() — flash API methods', () => {
+  it('returns flash, showFlashes, hasFlashes methods', () => {
+    const t = useToast()
+    expect(typeof t.flash).toBe('function')
+    expect(typeof t.showFlashes).toBe('function')
+    expect(typeof t.hasFlashes).toBe('function')
+  })
+})
+
+describe('toast (static) — flash API methods', () => {
+  it('toast.flash is a function', () => {
+    expect(typeof toast.flash).toBe('function')
+  })
+
+  it('toast.showFlashes is a function', () => {
+    expect(typeof toast.showFlashes).toBe('function')
+  })
+
+  it('toast.hasFlashes is a function', () => {
+    expect(typeof toast.hasFlashes).toBe('function')
+  })
+})

package/src/composables/useToast.ts

@@ -0,0 +1,95 @@
+import type { ToastOptions, ToastPromiseMessages } from '../types'
+import { toastStore } from '../stores/toastStore'
+import { queueFlash, consumeFlashes, hasPendingFlashes } from './useFlash'
+
+// ─── Composable API ───────────────────────────────────────────────────────────
+
+export const useToast = () => ({
+  default: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'default', title }),
+
+  success: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'success', title }),
+
+  error: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'error', title }),
+
+  warning: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'warning', title }),
+
+  info: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'info', title }),
+
+  loading: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.loading(title, options),
+
+  promise: <T>(
+    promiseFn: Promise<T>,
+    messages: ToastPromiseMessages,
+    options?: Omit<ToastOptions, 'type' | 'promise' | 'promiseMessages'>
+  ): Promise<T> => toastStore.promise(promiseFn, messages, options),
+
+  custom: (options: ToastOptions) => toastStore.add(options),
+
+  update: (id: string, options: Partial<ToastOptions>) => toastStore.update(id, options),
+
+  dismiss: (id?: string) => toastStore.dismiss(id),
+  dismissAll: () => toastStore.dismiss(),
+
+  pause: (id: string) => toastStore.pause(id),
+  resume: (id: string) => toastStore.resume(id),
+
+  /**
+   * Queue a toast that will be shown on the next page load / route navigation.
+   * Perfect for the "submit → redirect → show success" pattern.
+   *
+   * @example
+   * const { flash } = useToast()
+   * await api.save()
+   * flash('Saved!', { type: 'success' })
+   * router.push('/dashboard')
+   */
+  flash: (title: string, options: Partial<Omit<ToastOptions, 'id'>> = {}) =>
+    queueFlash(title, options),
+
+  /**
+   * Show any toasts that were queued with flash() before a page navigation.
+   * Call this in onMounted() of your root layout or App.vue.
+   */
+  showFlashes: () => consumeFlashes(),
+
+  /** Check if there are pending flash messages without consuming them. */
+  hasFlashes: () => hasPendingFlashes(),
+})
+
+// ─── Singleton API (usable outside components) ────────────────────────────────
+
+export const toast = {
+  default: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'default', title }),
+  success: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'success', title }),
+  error: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'error', title }),
+  warning: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'warning', title }),
+  info: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.add({ ...options, type: 'info', title }),
+  loading: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) =>
+    toastStore.loading(title, options),
+  promise: <T>(
+    promiseFn: Promise<T>,
+    messages: ToastPromiseMessages,
+    options?: Omit<ToastOptions, 'type' | 'promise' | 'promiseMessages'>
+  ): Promise<T> => toastStore.promise(promiseFn, messages, options),
+  custom: (options: ToastOptions) => toastStore.add(options),
+  update: (id: string, options: Partial<ToastOptions>) => toastStore.update(id, options),
+  dismiss: (id?: string) => toastStore.dismiss(id),
+  dismissAll: () => toastStore.dismiss(),
+  pause: (id: string) => toastStore.pause(id),
+  resume: (id: string) => toastStore.resume(id),
+  flash: (title: string, options: Partial<Omit<ToastOptions, 'id'>> = {}) =>
+    queueFlash(title, options),
+  showFlashes: () => consumeFlashes(),
+  hasFlashes: () => hasPendingFlashes(),
+}

package/src/exports.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'bun:test'
+
+// Test that all public exports exist and have the right shape
+// This acts as a "contract test" — if something is accidentally removed, CI will catch it.
+
+describe('Package exports', () => {
+  it('exports SoftToastPlugin with install()', async () => {
+    const { SoftToastPlugin } = await import('./index')
+    expect(SoftToastPlugin).toBeDefined()
+    expect(typeof SoftToastPlugin.install).toBe('function')
+  })
+
+  it('exports getToastOptions()', async () => {
+    const { getToastOptions } = await import('./index')
+    expect(typeof getToastOptions).toBe('function')
+    const opts = getToastOptions()
+    // Should return an object with default values
+    expect(opts).toHaveProperty('position')
+    expect(opts).toHaveProperty('duration')
+    expect(opts).toHaveProperty('theme')
+  })
+
+  it('exports useToast()', async () => {
+    const { useToast } = await import('./index')
+    expect(typeof useToast).toBe('function')
+    const api = useToast()
+    expect(typeof api.success).toBe('function')
+    expect(typeof api.error).toBe('function')
+  })
+
+  it('exports toast object', async () => {
+    const { toast } = await import('./index')
+    expect(toast).toBeDefined()
+    expect(typeof toast.success).toBe('function')
+    expect(typeof toast.error).toBe('function')
+    expect(typeof toast.warning).toBe('function')
+    expect(typeof toast.info).toBe('function')
+    expect(typeof toast.default).toBe('function')
+    expect(typeof toast.promise).toBe('function')
+    expect(typeof toast.custom).toBe('function')
+    expect(typeof toast.update).toBe('function')
+    expect(typeof toast.dismiss).toBe('function')
+    expect(typeof toast.dismissAll).toBe('function')
+    expect(typeof toast.pause).toBe('function')
+    expect(typeof toast.resume).toBe('function')
+    // Flash & sound API
+    expect(typeof toast.flash).toBe('function')
+    expect(typeof toast.showFlashes).toBe('function')
+    expect(typeof toast.hasFlashes).toBe('function')
+  })
+
+  it('exports toastStore with all methods', async () => {
+    const { toastStore } = await import('./index')
+    expect(toastStore).toBeDefined()
+    expect(typeof toastStore.add).toBe('function')
+    expect(typeof toastStore.remove).toBe('function')
+    expect(typeof toastStore.clearAll).toBe('function')
+    expect(typeof toastStore.dismiss).toBe('function')
+    expect(typeof toastStore.pause).toBe('function')
+    expect(typeof toastStore.resume).toBe('function')
+    expect(typeof toastStore.update).toBe('function')
+    expect(typeof toastStore.success).toBe('function')
+    expect(typeof toastStore.error).toBe('function')
+    expect(typeof toastStore.warning).toBe('function')
+    expect(typeof toastStore.info).toBe('function')
+    expect(typeof toastStore.promise).toBe('function')
+    expect(typeof toastStore.getToastsByPosition).toBe('function')
+    // toasts should be a computed ref
+    expect(toastStore.toasts).toBeDefined()
+    expect(typeof toastStore.toasts.value).toBe('object')
+  })
+})

package/src/icons.ts

@@ -0,0 +1,38 @@
+import { addIcon } from "@iconify/vue";
+
+let registered = false;
+
+const iconDefaults = {
+  width: 24,
+  height: 24,
+};
+
+export const registerToastIcons = () => {
+  if (registered) return;
+  registered = true;
+
+  addIcon("lucide:circle-check", {
+    ...iconDefaults,
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12l2 2l4-4"/></g>',
+  });
+  addIcon("lucide:circle-x", {
+    ...iconDefaults,
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9l-6 6m0-6l6 6"/></g>',
+  });
+  addIcon("lucide:triangle-alert", {
+    ...iconDefaults,
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/>',
+  });
+  addIcon("lucide:info", {
+    ...iconDefaults,
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g>',
+  });
+  addIcon("lucide:bell", {
+    ...iconDefaults,
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>',
+  });
+  addIcon("lucide:loader-circle", {
+    ...iconDefaults,
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/>',
+  });
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+// Main exports
+export { SoftToastPlugin, getToastOptions } from './plugin'
+export { useToast, toast } from './composables/useToast'
+export { useFlash, queueFlash, consumeFlashes, hasPendingFlashes } from './composables/useFlash'
+export { toastStore } from './stores/toastStore'
+
+// Components
+export { default as ToastContainer } from './components/ToastContainer.vue'
+export { default as ToastItem } from './components/ToastItem.vue'
+
+// Types
+export type {
+  Toast,
+  ToastType,
+  ToastPosition,
+  ToastOptions,
+  ToastAction,
+  ToastPromiseMessages,
+  ToastClassNames,
+  ToastContainerProps,
+  ToastPluginOptions,
+  AnimationPreset,
+  QueueOverflow
+} from './types'
+

package/src/plugin.ts

@@ -0,0 +1,85 @@
+import { createApp, h, type App } from 'vue'
+import type { ToastPluginOptions } from './types'
+import ToastContainer from './components/ToastContainer.vue'
+import './styles/toast.css'
+
+// Global state for plugin options
+let pluginOptions: ToastPluginOptions = {
+  position: 'top-right',
+  duration: 4000,
+  theme: 'light',
+  spring: true,
+  bounce: 0.4,
+  preset: 'smooth',
+  closeOnEscape: true,
+  closeButton: false,
+  showProgress: false,
+  showTimestamp: false,
+  maxQueue: 10,
+  queueOverflow: 'drop-oldest',
+  dir: 'ltr',
+  swipeToDismiss: true,
+  teleportTarget: 'body'
+}
+
+// Flag to check if container is mounted
+let isContainerMounted = false
+
+export const SoftToastPlugin = {
+  install(app: App, options: ToastPluginOptions = {}) {
+    // Merge options
+    pluginOptions = { ...pluginOptions, ...options }
+    
+    // Only mount container once
+    if (!isContainerMounted && typeof window !== 'undefined') {
+      // Create a container div
+      const containerId = 'soft-toast-global-container'
+      let container = document.getElementById(containerId)
+      
+      if (!container) {
+        container = document.createElement('div')
+        container.id = containerId
+        document.body.appendChild(container)
+      }
+      
+      // Mount ToastContainer
+      app.component('SoftToastContainer', ToastContainer)
+      
+      // Create a mini-app instance just for the toast container
+      const toastContainerApp = createApp({
+        render: () => h(ToastContainer, {
+          position: pluginOptions.position,
+          duration: pluginOptions.duration,
+          gap: pluginOptions.gap,
+          offset: pluginOptions.offset,
+          theme: pluginOptions.theme,
+          spring: pluginOptions.spring,
+          bounce: pluginOptions.bounce,
+          preset: pluginOptions.preset,
+          closeOnEscape: pluginOptions.closeOnEscape,
+          closeButton: pluginOptions.closeButton,
+          showProgress: pluginOptions.showProgress,
+          maxQueue: pluginOptions.maxQueue,
+          queueOverflow: pluginOptions.queueOverflow,
+          dir: pluginOptions.dir,
+          swipeToDismiss: pluginOptions.swipeToDismiss
+        })
+      })
+      
+      toastContainerApp.mount(container)
+      isContainerMounted = true
+    }
+    
+    // Provide options to all components
+    app.provide('softToastOptions', pluginOptions)
+    
+    // Set theme attribute on body
+    if (typeof document !== 'undefined') {
+      document.body.setAttribute('data-soft-toast-theme', pluginOptions.theme || 'light')
+      document.body.setAttribute('data-soft-toast-dir', pluginOptions.dir || 'ltr')
+    }
+  }
+}
+
+// Export options getter
+export const getToastOptions = () => pluginOptions

package/src/stores/toastStore.test.ts

@@ -0,0 +1,129 @@
+import { describe, it, expect, beforeEach } from "bun:test";
+import { toastStore } from "./toastStore";
+
+describe("toastStore", () => {
+  beforeEach(() => {
+    toastStore.clearAll();
+  });
+
+  it("should add a toast with default options", () => {
+    const id = toastStore.add({ title: "Test Toast" });
+    const toasts = toastStore.toasts.value;
+    expect(toasts.length).toBe(1);
+    expect(toasts[0].id).toBe(id);
+    expect(toasts[0].title).toBe("Test Toast");
+    expect(toasts[0].position).toBe("top-right"); // Default position
+    expect(toasts[0].type).toBe("default");
+  });
+
+  it("should remove a toast by id", () => {
+    const id = toastStore.add({ title: "Toast to remove" });
+    expect(toastStore.toasts.value.length).toBe(1);
+    
+    toastStore.remove(id);
+    expect(toastStore.toasts.value.length).toBe(0);
+  });
+
+  it("should clear all toasts", () => {
+    toastStore.add({ title: "1" });
+    toastStore.add({ title: "2" });
+    expect(toastStore.toasts.value.length).toBe(2);
+    
+    toastStore.clearAll();
+    expect(toastStore.toasts.value.length).toBe(0);
+  });
+
+  it("should filter toasts by position", () => {
+    toastStore.add({ title: "TR 1", position: "top-right" });
+    toastStore.add({ title: "TR 2", position: "top-right" });
+    toastStore.add({ title: "BL 1", position: "bottom-left" });
+    
+    const trToasts = toastStore.getToastsByPosition("top-right").value;
+    const blToasts = toastStore.getToastsByPosition("bottom-left").value;
+    
+    expect(trToasts.length).toBe(2);
+    expect(blToasts.length).toBe(1);
+  });
+
+  it("should set isLeaving to true when dismissing", () => {
+    const id = toastStore.add({ title: "Dismiss me" });
+    toastStore.dismiss(id);
+    
+    const toast = toastStore.toasts.value.find(t => t.id === id);
+    expect(toast).toBeDefined();
+    expect(toast?.isLeaving).toBe(true);
+  });
+
+  it("should pause and resume a toast", () => {
+    const id = toastStore.add({ title: "1" });
+    
+    toastStore.pause(id);
+    expect(toastStore.toasts.value[0].isPaused).toBe(true);
+    
+    toastStore.resume(id);
+    expect(toastStore.toasts.value[0].isPaused).toBe(false);
+  });
+
+  it("should generate a unique id if not provided", () => {
+    const id1 = toastStore.add({ title: "A" });
+    const id2 = toastStore.add({ title: "B" });
+    expect(id1).not.toBe(id2);
+  });
+
+  it("should use provided id", () => {
+    const id = toastStore.add({ id: "my-custom-id", title: "C" });
+    expect(id).toBe("my-custom-id");
+  });
+});
+
+// ─── Smart Deduplication ──────────────────────────────────────────────────────
+
+describe("toastStore — smart deduplication", () => {
+  beforeEach(() => {
+    toastStore.clearAll();
+  });
+
+  it("adding same id twice updates existing toast instead of creating a new one", () => {
+    toastStore.add({ id: "dup-id", title: "Original" });
+    toastStore.add({ id: "dup-id", title: "Updated" });
+
+    const toasts = toastStore.toasts.value;
+    expect(toasts.length).toBe(1);
+    expect(toasts[0].title).toBe("Updated");
+  });
+
+  it("dedup updates description and type of existing toast", () => {
+    toastStore.add({ id: "upd-id", title: "Error A", type: "error" });
+    toastStore.add({ id: "upd-id", title: "Error B", type: "warning", description: "Retry" });
+
+    const toasts = toastStore.toasts.value;
+    expect(toasts.length).toBe(1);
+    expect(toasts[0].type).toBe("warning");
+    expect(toasts[0].description).toBe("Retry");
+  });
+
+  it("dedup resets remainingTime to new duration", () => {
+    toastStore.add({ id: "timer-id", title: "First", duration: 2000 });
+    // Manually reduce remaining time to simulate partial expiry
+    toastStore.toasts.value[0].remainingTime = 500;
+
+    toastStore.add({ id: "timer-id", title: "Refreshed", duration: 4000 });
+    expect(toastStore.toasts.value[0].remainingTime).toBe(4000);
+  });
+
+  it("dedup skips a toast that is already leaving (creates new one)", () => {
+    toastStore.add({ id: "leaving-id", title: "Leaving" });
+    toastStore.toasts.value[0].isLeaving = true;
+
+    toastStore.add({ id: "leaving-id", title: "New one" });
+    // The original (leaving) toast stays + a new one is added
+    expect(toastStore.toasts.value.length).toBe(2);
+  });
+
+  it("returned id is the same when dedup update occurs", () => {
+    const id1 = toastStore.add({ id: "same-id", title: "A" });
+    const id2 = toastStore.add({ id: "same-id", title: "B" });
+    expect(id1).toBe("same-id");
+    expect(id2).toBe("same-id");
+  });
+});