@dorsk/tsumikit 0.74.0 → 0.75.0

package/dist/stores/toast.svelte.js

@@ -5,22 +5,54 @@
 export const TOAST_MS = 4000;
 /** Toasts with an action linger longer: the action is only reachable while visible. */
 export const ACTION_TOAST_MS = 7000;
+/** Matches `--dur-exit-slow`; the removal never waits on `transitionend` alone. */
+export const TOAST_EXIT_MS = 200;
 let seq = 0;
 class Toasts {
     items = $state([]);
     #timers = new Map();
+    #due = new Map();
+    #paused = new Map();
+    #arm(id, ms) {
+        this.#due.set(id, Date.now() + ms);
+        this.#timers.set(id, setTimeout(() => this.dismiss(id), ms));
+    }
+    #disarm(id) {
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.#timers.delete(id);
+        this.#due.delete(id);
+        this.#paused.delete(id);
+    }
     show(message, opts = {}) {
         const id = ++seq;
         const duration = opts.duration ?? (opts.action ? ACTION_TOAST_MS : TOAST_MS);
         const tone = opts.tone === 'danger' ? 'error' : (opts.tone ?? 'neutral');
         this.items = [
             ...this.items,
-            { id, message, tone, duration, action: opts.action, pending: false },
+            { id, message, tone, duration, action: opts.action, pending: false, leaving: false },
         ];
         if (duration > 0)
-            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
+            this.#arm(id, duration);
         return id;
     }
+    /** Hold the auto-dismiss (pointer over the toast); `resume` restarts the remaining time. */
+    pause(id) {
+        const due = this.#due.get(id);
+        if (due === undefined)
+            return;
+        const left = Math.max(0, due - Date.now());
+        this.#disarm(id);
+        this.#paused.set(id, left);
+    }
+    resume(id) {
+        const left = this.#paused.get(id);
+        this.#paused.delete(id);
+        if (left === undefined || !this.items.some((t) => t.id === id && !t.leaving))
+            return;
+        this.#arm(id, left);
+    }
     ok(message, duration, action) {
         return this.show(message, { tone: 'ok', duration, action });
     }
@@ -31,10 +63,16 @@ class Toasts {
         return this.show(message, { tone: 'info', duration, action });
     }
     dismiss(id) {
-        const timer = this.#timers.get(id);
-        if (timer)
-            clearTimeout(timer);
-        this.#timers.delete(id);
+        this.#disarm(id);
+        const t = this.items.find((x) => x.id === id);
+        if (!t || t.leaving)
+            return;
+        this.items = this.items.map((x) => (x.id === id ? { ...x, leaving: true } : x));
+        setTimeout(() => this.remove(id), TOAST_EXIT_MS);
+    }
+    /** Drop a toast at once, skipping the exit. */
+    remove(id) {
+        this.#disarm(id);
         this.items = this.items.filter((t) => t.id !== id);
     }
     /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
@@ -42,9 +80,7 @@ class Toasts {
         const t = this.items.find((x) => x.id === id);
         if (!t?.action || t.pending)
             return;
-        const timer = this.#timers.get(id);
-        if (timer)
-            clearTimeout(timer);
+        this.#disarm(id);
         this.items = this.items.map((x) => (x.id === id ? { ...x, pending: true } : x));
         try {
             await t.action.run();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",