solid-drift 0.11.0 → 0.13.0

package/README.md

@@ -1094,13 +1094,64 @@ const connect = createConnectButton(() => btn, { strength: 0.35 });
 
 Returns `{ copyTick, chainPulse, status }`. `status()` is `"idle"`, `"ticking"` (check visible), or `"pulsing"` (ring expanding). Call `chainPulse()` after a successful connection or network switch. Under reduced motion there is no magnetic pull or scale; `copyTick()` and `chainPulse()` still show their overlays statically.
 
+### `createToast(options?)`
+
+A signal-native toast queue with choreographed lifecycle. The primitive owns timing and state; you own the rendering, so no component opinions leak into your design system. Each toast moves through `"entering"` to `"visible"` to `"leaving"` to removed on the shared animation clock: bind `state` to CSS classes or drift values for enter/exit motion without any timers of your own.
+
+```tsx
+import { createToast } from "solid-drift"
+
+const { toasts, success, dismiss } = createToast()
+success("Payment sent", { description: "0.5 SOL to alice.sol" })
+
+<For each={toasts()}>
+  {(t) => (
+    <div
+      class="toast"
+      classList={{
+        "toast-enter": t.state === "entering",
+        "toast-leave": t.state === "leaving",
+      }}
+    >
+      <strong>{t.title}</strong>
+      {t.description && <p>{t.description}</p>}
+      <button onClick={() => dismiss(t.id)}>Dismiss</button>
+    </div>
+  )}
+</For>
+```
+
+| Option     | Default | Description                                                      |
+| ---------- | ------- | ---------------------------------------------------------------- |
+| `max`      | `5`     | Max toasts in the queue; older ones are dismissed first          |
+| `enterMs`  | `250`   | Enter transition time in milliseconds                            |
+| `leaveMs`  | `200`   | Leave transition time in milliseconds                            |
+| `duration` | `4000`  | Default auto-dismiss time in milliseconds                        |
+
+Push helpers: `toast(title, options?)`, `info(...)`, `success(...)`, `warning(...)`, `error(...)`. Each returns the toast id. Per-toast options: `kind`, `description`, `duration` (ms; `0` means sticky). `dismiss(id)` starts the leave transition for one toast; `clear()` dismisses all. SSR-safe: toasts pushed on the server start `"visible"`. Under reduced motion the enter and leave transitions are instant, but auto-dismiss timing still applies.
+
+### `useLowPowerMode(options?)`
+
+One reactive signal for mobile-first degradation. It combines the OS `prefers-reduced-motion` and `prefers-reduced-data` media queries with low-end device signals (`navigator.deviceMemory`, `navigator.hardwareConcurrency`), so a single check covers user preference, network thrift, and weak hardware. The media queries update live; the device signals are sampled once. There is also a one-shot `isLowPowerMode(options?)` for non-reactive checks.
+
+```tsx
+import { useLowPowerMode } from "solid-drift"
+
+const lowPower = useLowPowerMode()
+// Degrade gracefully: shorter, cheaper motion on weak devices.
+const duration = () => (lowPower() ? 0 : 400)
+const confettiCount = () => (lowPower() ? 20 : 150)
+```
+
+Options: `maxDeviceMemory` (GB, default `4`), `maxHardwareConcurrency` (default `4`): a device at or below either threshold counts as low-end. Where the device signals are unsupported they degrade to "not low-end". SSR-safe: always `false` on the server.
+
 ### Easings
 
 Named easings: `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeOutExpo`, `easeOutBack`, plus the cartoon set: `easeInBack` (anticipation dip before movement), `easeInOutBack` (wind-up, overshoot, settle), `easeOutElastic` (decaying rubber-band oscillation), `easeOutBounce` (shrinking cartoon bounces). Also `cubicBezier(x1, y1, x2, y2)` for CSS-style curves. Pass a name or a custom `(t) => number` function anywhere an easing is accepted.
 
 ## How it works
 
-One shared `requestAnimationFrame` loop drives every animation in the app, so hundreds of springs cost a single rAF tick per frame. Springs integrate with semi-implicit Euler, tweens sample an easing curve. Everything is SSR-safe (animations simply don't run on the server).
+One shared `requestAnimationFrame` loop drives every animation in the app, so hundreds of springs cost a single rAF tick per frame. Springs integrate with semi-implicit Euler, tweens sample an easing curve. When the tab becomes hidden the engine pauses the loop and freezes its clock, so nothing burns battery in the background; on return the clock continues where it left off and in-flight animations resume seamlessly. Everything is SSR-safe (animations simply don't run on the server).
 
 ## License
 

package/dist/engine.d.ts

@@ -4,6 +4,11 @@
  * A single requestAnimationFrame loop drives every active animation in the
  * app, so hundreds of springs and tweens cost exactly one rAF tick per frame.
  * Tasks return `false` when finished and are removed automatically.
+ *
+ * Battery saving: when the tab becomes hidden the loop stops and the clock
+ * freezes, so no animation burns CPU in the background. When the tab is
+ * visible again the loop resumes and the clock continues where it left off,
+ * so in-flight animations continue seamlessly instead of jumping forward.
  */
 export type AnimationTask = (now: number) => boolean;
 /**
@@ -11,5 +16,8 @@ export type AnimationTask = (now: number) => boolean;
  * Safe to call during SSR (no-op without requestAnimationFrame).
  */
 export declare function schedule(task: AnimationTask): () => void;
-/** Monotonic clock in milliseconds. */
+/**
+ * Monotonic clock in milliseconds. Freezes while the tab is hidden and
+ * resumes where it left off, so animations never observe the hidden gap.
+ */
 export declare function now(): number;

package/dist/engine.js

@@ -4,14 +4,31 @@
  * A single requestAnimationFrame loop drives every active animation in the
  * app, so hundreds of springs and tweens cost exactly one rAF tick per frame.
  * Tasks return `false` when finished and are removed automatically.
+ *
+ * Battery saving: when the tab becomes hidden the loop stops and the clock
+ * freezes, so no animation burns CPU in the background. When the tab is
+ * visible again the loop resumes and the clock continues where it left off,
+ * so in-flight animations continue seamlessly instead of jumping forward.
  */
 const tasks = new Set();
 let rafId = 0;
-function tick(now) {
+// Milliseconds of hidden time subtracted from the raw clock, so now()
+// freezes while the tab is hidden and resumes seamlessly on return.
+let pausedMs = 0;
+// Raw timestamp of the moment the tab was hidden, or null while visible.
+let hiddenAt = null;
+let visibilityHooked = false;
+function rawNow() {
+    return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
+function tick() {
+    // Tasks always see the pause-adjusted clock, never the raw rAF stamp,
+    // so a hidden-then-visible gap never shows up as a time jump.
+    const t = now();
     for (const task of tasks) {
         let alive = false;
         try {
-            alive = task(now);
+            alive = task(t);
         }
         catch {
             alive = false;
@@ -21,6 +38,39 @@ function tick(now) {
     }
     rafId = tasks.size > 0 ? requestAnimationFrame(tick) : 0;
 }
+function onVisibilityChange() {
+    if (typeof document === "undefined")
+        return;
+    if (document.hidden) {
+        if (hiddenAt === null) {
+            hiddenAt = rawNow();
+            if (rafId) {
+                if (typeof cancelAnimationFrame !== "undefined") {
+                    cancelAnimationFrame(rafId);
+                }
+                rafId = 0;
+            }
+        }
+    }
+    else if (hiddenAt !== null) {
+        pausedMs += rawNow() - hiddenAt;
+        hiddenAt = null;
+        if (tasks.size > 0 &&
+            !rafId &&
+            typeof requestAnimationFrame !== "undefined") {
+            rafId = requestAnimationFrame(tick);
+        }
+    }
+}
+function hookVisibility() {
+    if (visibilityHooked)
+        return;
+    visibilityHooked = true;
+    if (typeof document !== "undefined" &&
+        typeof document.addEventListener === "function") {
+        document.addEventListener("visibilitychange", onVisibilityChange);
+    }
+}
 /**
  * Register a task on the shared clock. Returns a cancel function.
  * Safe to call during SSR (no-op without requestAnimationFrame).
@@ -28,14 +78,19 @@ function tick(now) {
 export function schedule(task) {
     if (typeof requestAnimationFrame === "undefined")
         return () => { };
+    hookVisibility();
     tasks.add(task);
-    if (!rafId)
+    const hidden = typeof document !== "undefined" && document.hidden === true;
+    if (!rafId && !hidden)
         rafId = requestAnimationFrame(tick);
     return () => {
         tasks.delete(task);
     };
 }
-/** Monotonic clock in milliseconds. */
+/**
+ * Monotonic clock in milliseconds. Freezes while the tab is hidden and
+ * resumes where it left off, so animations never observe the hidden gap.
+ */
 export function now() {
-    return typeof performance !== "undefined" ? performance.now() : Date.now();
+    return (hiddenAt ?? rawNow()) - pausedMs;
 }

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { drift, type DriftProps } from "./directive.js";
 export { createScrollProgress, type ScrollTarget } from "./scroll.js";
 export { createInView, type InViewOptions } from "./inview.js";
 export { usePrefersReducedMotion, prefersReducedMotion, } from "./reduced-motion.js";
+export { isLowPowerMode, useLowPowerMode, type LowPowerOptions, } from "./power.js";
 export { createStagger } from "./stagger.js";
 export { createHorizontalScroll, type HorizontalScrollOptions, type HorizontalScrollResult, } from "./horizontal.js";
 export { createScrub, type ScrubKeyframe, type ScrubOptions } from "./scrub.js";
@@ -20,6 +21,7 @@ export { createMagnetic, type MagneticOptions, type MagneticResult, createTilt,
 export { createTrail, type TrailOptions } from "./trail.js";
 export { createTimeline, type TimelineStep, type TimelineStatus, type TimelineControls, } from "./timeline.js";
 export { animateFlip, type FlipOptions, createSharedLayout, type SharedLayoutOptions, type SharedLayoutResult, } from "./flip.js";
+export { createToast, type Toast, type ToastControls, type ToastKind, type ToastOptions, type ToastQueueOptions, type ToastState, } from "./toast.js";
 export { createSquashStretch, type SquashStretchOptions, type SquashStretchResult, createFollowThrough, type FollowThroughOptions, createAnticipation, type AnticipationOptions, createWobble, type WobbleOptions, type WobbleResult, } from "./cartoon.js";
 export { createGravity, type GravityOptions, type GravityResult, createPendulum, type PendulumOptions, type PendulumResult, createFling, type FlingOptions, type FlingResult, } from "./physics.js";
 export { createFontSwap, type FontSwapOptions, type FontSwapResult, createTyping, type TypingOptions, type TypingResult, createTextPhysics, type TextPhysicsOptions, type TextPhysicsResult, createTextTunnel, type TextTunnelOptions, type TextTunnelResult, createTextCutout, type TextCutoutOptions, createTextGradient, type TextGradientOptions, createTextScramble, type TextScrambleOptions, type TextScrambleResult, createTextWave, type TextWaveOptions, createCountUp, type CountUpOptions, } from "./typography.js";

package/dist/index.js

@@ -11,6 +11,7 @@ export { drift } from "./directive.js";
 export { createScrollProgress } from "./scroll.js";
 export { createInView } from "./inview.js";
 export { usePrefersReducedMotion, prefersReducedMotion, } from "./reduced-motion.js";
+export { isLowPowerMode, useLowPowerMode, } from "./power.js";
 export { createStagger } from "./stagger.js";
 export { createHorizontalScroll, } from "./horizontal.js";
 export { createScrub } from "./scrub.js";
@@ -20,6 +21,7 @@ export { createMagnetic, createTilt, } from "./pointer.js";
 export { createTrail } from "./trail.js";
 export { createTimeline, } from "./timeline.js";
 export { animateFlip, createSharedLayout, } from "./flip.js";
+export { createToast, } from "./toast.js";
 export { createSquashStretch, createFollowThrough, createAnticipation, createWobble, } from "./cartoon.js";
 export { createGravity, createPendulum, createFling, } from "./physics.js";
 export { createFontSwap, createTyping, createTextPhysics, createTextTunnel, createTextCutout, createTextGradient, createTextScramble, createTextWave, createCountUp, } from "./typography.js";

package/dist/power.d.ts

@@ -0,0 +1,44 @@
+import { type Accessor } from "solid-js";
+export interface LowPowerOptions {
+    /** deviceMemory in GB at or below which the device counts as low-end. Default 4. */
+    maxDeviceMemory?: number;
+    /** hardwareConcurrency at or below which the device counts as low-end. Default 4. */
+    maxHardwareConcurrency?: number;
+}
+/**
+ * Non-reactive check: should the app conserve power and motion right now?
+ *
+ * True when any of these hold: the OS prefers reduced motion, the user
+ * asked to reduce data usage, or the device looks low-end (small
+ * deviceMemory or few CPU cores, both Chrome-only signals that degrade
+ * to "not low-end" where unsupported).
+ *
+ * SSR-safe: always `false` on the server. Pair with the reduced-motion
+ * behavior of the primitives: when this is true, prefer shorter or
+ * zero durations and skip decorative motion.
+ *
+ * ```ts
+ * if (isLowPowerMode()) {
+ *   // skip the ambient background animation
+ * }
+ * ```
+ */
+export declare function isLowPowerMode(options?: LowPowerOptions): boolean;
+/**
+ * Reactive low-power signal for mobile-first degradation.
+ *
+ * Combines `prefers-reduced-motion`, `prefers-reduced-data`, and low-end
+ * device signals into one accessor. The media queries update live if the
+ * OS preference changes while the app is running; the device signals are
+ * sampled once. SSR-safe: `false` on the server.
+ *
+ * ```tsx
+ * import { isLowPowerMode, useLowPowerMode } from "solid-drift"
+ *
+ * const lowPower = useLowPowerMode()
+ * // Degrade gracefully: shorter, cheaper motion on weak devices.
+ * const duration = () => (lowPower() ? 0 : 400)
+ * const confettiCount = () => (lowPower() ? 20 : 150)
+ * ```
+ */
+export declare function useLowPowerMode(options?: LowPowerOptions): Accessor<boolean>;

package/dist/power.js

@@ -0,0 +1,83 @@
+import { createSignal, onCleanup } from "solid-js";
+const MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const DATA_QUERY = "(prefers-reduced-data: reduce)";
+function mediaMatches(query) {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia(query).matches);
+}
+function isLowEndDevice(options) {
+    if (typeof navigator === "undefined")
+        return false;
+    const { maxDeviceMemory = 4, maxHardwareConcurrency = 4 } = options;
+    const memory = typeof navigator.deviceMemory ===
+        "number"
+        ? navigator.deviceMemory
+        : Infinity;
+    const cores = typeof navigator.hardwareConcurrency === "number"
+        ? navigator.hardwareConcurrency
+        : Infinity;
+    return memory <= maxDeviceMemory || cores <= maxHardwareConcurrency;
+}
+function checkLowPower(options) {
+    return (mediaMatches(MOTION_QUERY) ||
+        mediaMatches(DATA_QUERY) ||
+        isLowEndDevice(options));
+}
+/**
+ * Non-reactive check: should the app conserve power and motion right now?
+ *
+ * True when any of these hold: the OS prefers reduced motion, the user
+ * asked to reduce data usage, or the device looks low-end (small
+ * deviceMemory or few CPU cores, both Chrome-only signals that degrade
+ * to "not low-end" where unsupported).
+ *
+ * SSR-safe: always `false` on the server. Pair with the reduced-motion
+ * behavior of the primitives: when this is true, prefer shorter or
+ * zero durations and skip decorative motion.
+ *
+ * ```ts
+ * if (isLowPowerMode()) {
+ *   // skip the ambient background animation
+ * }
+ * ```
+ */
+export function isLowPowerMode(options = {}) {
+    return checkLowPower(options);
+}
+/**
+ * Reactive low-power signal for mobile-first degradation.
+ *
+ * Combines `prefers-reduced-motion`, `prefers-reduced-data`, and low-end
+ * device signals into one accessor. The media queries update live if the
+ * OS preference changes while the app is running; the device signals are
+ * sampled once. SSR-safe: `false` on the server.
+ *
+ * ```tsx
+ * import { isLowPowerMode, useLowPowerMode } from "solid-drift"
+ *
+ * const lowPower = useLowPowerMode()
+ * // Degrade gracefully: shorter, cheaper motion on weak devices.
+ * const duration = () => (lowPower() ? 0 : 400)
+ * const confettiCount = () => (lowPower() ? 20 : 150)
+ * ```
+ */
+export function useLowPowerMode(options = {}) {
+    const lowEnd = isLowEndDevice(options);
+    const [lowPower, setLowPower] = createSignal(checkLowPower(options));
+    if (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function") {
+        const motionMq = window.matchMedia(MOTION_QUERY);
+        const dataMq = window.matchMedia(DATA_QUERY);
+        const onChange = () => {
+            setLowPower(lowEnd || motionMq.matches || dataMq.matches);
+        };
+        motionMq.addEventListener("change", onChange);
+        dataMq.addEventListener("change", onChange);
+        onCleanup(() => {
+            motionMq.removeEventListener("change", onChange);
+            dataMq.removeEventListener("change", onChange);
+        });
+    }
+    return lowPower;
+}

package/dist/toast.d.ts

@@ -0,0 +1,81 @@
+import { type Accessor } from "solid-js";
+export type ToastKind = "info" | "success" | "warning" | "error";
+/** Lifecycle state of a toast. Bind it to your enter/exit animation. */
+export type ToastState = "entering" | "visible" | "leaving";
+export interface Toast {
+    /** Unique id, returned by the push helpers. */
+    id: number;
+    kind: ToastKind;
+    title: string;
+    description?: string;
+    state: ToastState;
+    /** Millisecond timestamp when the toast entered the queue. */
+    createdAt: number;
+}
+export interface ToastOptions {
+    /** Visual kind. Default "info" (or the shortcut you called). */
+    kind?: ToastKind;
+    description?: string;
+    /** Auto-dismiss after this many ms. Default 4000. 0 means sticky. */
+    duration?: number;
+}
+export interface ToastQueueOptions {
+    /** Max toasts in the queue; older ones are dismissed first. Default 5. */
+    max?: number;
+    /** Enter transition time in ms. Default 250. */
+    enterMs?: number;
+    /** Leave transition time in ms. Default 200. */
+    leaveMs?: number;
+    /** Default auto-dismiss time in ms. Default 4000. */
+    duration?: number;
+}
+export interface ToastControls {
+    /** Reactive list of toasts, oldest first. */
+    toasts: Accessor<Toast[]>;
+    /** Push a toast. Returns its id. */
+    toast: (title: string, options?: ToastOptions) => number;
+    info: (title: string, options?: ToastOptions) => number;
+    success: (title: string, options?: ToastOptions) => number;
+    warning: (title: string, options?: ToastOptions) => number;
+    error: (title: string, options?: ToastOptions) => number;
+    /** Start the leave transition for one toast. */
+    dismiss: (id: number) => void;
+    /** Dismiss every toast. */
+    clear: () => void;
+}
+/**
+ * A signal-native toast queue with choreographed lifecycle.
+ *
+ * The primitive owns timing and state; you own the rendering. Each toast
+ * moves through `entering` -> `visible` -> `leaving` -> removed on the
+ * shared animation clock, so you can bind `state` to CSS classes or drift
+ * values for enter/exit motion without any timers of your own.
+ *
+ * SSR-safe: toasts pushed on the server start `visible`. Under reduced
+ * motion the enter and leave transitions are instant, but auto-dismiss
+ * timing still applies.
+ *
+ * ```tsx
+ * import { createToast } from "solid-drift"
+ *
+ * const { toasts, success, dismiss } = createToast()
+ * success("Payment sent", { description: "0.5 SOL to alice.sol" })
+ *
+ * <For each={toasts()}>
+ *   {(t) => (
+ *     <div
+ *       class="toast"
+ *       classList={{
+ *         "toast-enter": t.state === "entering",
+ *         "toast-leave": t.state === "leaving",
+ *       }}
+ *     >
+ *       <strong>{t.title}</strong>
+ *       {t.description && <p>{t.description}</p>}
+ *       <button onClick={() => dismiss(t.id)}>Dismiss</button>
+ *     </div>
+ *   )}
+ * </For>
+ * ```
+ */
+export declare function createToast(options?: ToastQueueOptions): ToastControls;

package/dist/toast.js

@@ -0,0 +1,167 @@
+import { createSignal, onCleanup, untrack } from "solid-js";
+import { now, schedule } from "./engine.js";
+import { prefersReducedMotion } from "./reduced-motion.js";
+/**
+ * A signal-native toast queue with choreographed lifecycle.
+ *
+ * The primitive owns timing and state; you own the rendering. Each toast
+ * moves through `entering` -> `visible` -> `leaving` -> removed on the
+ * shared animation clock, so you can bind `state` to CSS classes or drift
+ * values for enter/exit motion without any timers of your own.
+ *
+ * SSR-safe: toasts pushed on the server start `visible`. Under reduced
+ * motion the enter and leave transitions are instant, but auto-dismiss
+ * timing still applies.
+ *
+ * ```tsx
+ * import { createToast } from "solid-drift"
+ *
+ * const { toasts, success, dismiss } = createToast()
+ * success("Payment sent", { description: "0.5 SOL to alice.sol" })
+ *
+ * <For each={toasts()}>
+ *   {(t) => (
+ *     <div
+ *       class="toast"
+ *       classList={{
+ *         "toast-enter": t.state === "entering",
+ *         "toast-leave": t.state === "leaving",
+ *       }}
+ *     >
+ *       <strong>{t.title}</strong>
+ *       {t.description && <p>{t.description}</p>}
+ *       <button onClick={() => dismiss(t.id)}>Dismiss</button>
+ *     </div>
+ *   )}
+ * </For>
+ * ```
+ */
+export function createToast(options = {}) {
+    const { max = 5, enterMs = 250, leaveMs = 200, duration: defaultDuration = 4000, } = options;
+    const [toasts, setToasts] = createSignal([]);
+    const timers = new Map();
+    let nextId = 1;
+    let cancelDriver = null;
+    const tick = (t) => {
+        const list = untrack(toasts);
+        if (list.length === 0) {
+            cancelDriver = null;
+            return false;
+        }
+        const em = prefersReducedMotion() ? 0 : enterMs;
+        const lm = prefersReducedMotion() ? 0 : leaveMs;
+        const out = [];
+        for (const toast of list) {
+            const meta = timers.get(toast.id);
+            if (!meta)
+                continue;
+            if (toast.state === "entering" && t - meta.enteredAt >= em) {
+                out.push({ ...toast, state: "visible" });
+            }
+            else if (toast.state === "visible" &&
+                meta.deadline > 0 &&
+                t >= meta.deadline) {
+                meta.leavingAt = t;
+                out.push({ ...toast, state: "leaving" });
+            }
+            else if (toast.state === "leaving" && t - meta.leavingAt >= lm) {
+                timers.delete(toast.id);
+            }
+            else {
+                out.push(toast);
+            }
+        }
+        const changed = out.length !== list.length ||
+            out.some((toast, i) => toast !== list[i]);
+        if (changed)
+            setToasts(out);
+        const busy = out.some((toast) => {
+            const meta = timers.get(toast.id);
+            return (toast.state === "entering" ||
+                toast.state === "leaving" ||
+                (toast.state === "visible" && !!meta && meta.deadline > 0));
+        });
+        if (!busy) {
+            cancelDriver = null;
+            return false;
+        }
+        return true;
+    };
+    const ensureDriver = () => {
+        if (!cancelDriver && typeof window !== "undefined") {
+            cancelDriver = schedule(tick);
+        }
+    };
+    const push = (kind, title, opts = {}) => {
+        const id = nextId++;
+        const t = now();
+        const duration = opts.duration ?? defaultDuration;
+        const toast = {
+            id,
+            kind: opts.kind ?? kind,
+            title,
+            description: opts.description,
+            state: typeof window === "undefined" ? "visible" : "entering",
+            createdAt: t,
+        };
+        timers.set(id, {
+            enteredAt: t,
+            deadline: duration > 0 ? t + duration : 0,
+            leavingAt: 0,
+        });
+        setToasts((prev) => {
+            const next = [...prev, toast];
+            if (next.length > max) {
+                const excess = next.length - max;
+                return next.map((item, i) => {
+                    if (i < excess && item.state !== "leaving") {
+                        const meta = timers.get(item.id);
+                        if (meta)
+                            meta.leavingAt = now();
+                        return { ...item, state: "leaving" };
+                    }
+                    return item;
+                });
+            }
+            return next;
+        });
+        ensureDriver();
+        return id;
+    };
+    const dismiss = (id) => {
+        const meta = timers.get(id);
+        if (!meta)
+            return;
+        meta.leavingAt = now();
+        setToasts((prev) => prev.map((toast) => toast.id === id && toast.state !== "leaving"
+            ? { ...toast, state: "leaving" }
+            : toast));
+        ensureDriver();
+    };
+    const clear = () => {
+        const t = now();
+        setToasts((prev) => prev.map((toast) => {
+            if (toast.state === "leaving")
+                return toast;
+            const meta = timers.get(toast.id);
+            if (meta)
+                meta.leavingAt = t;
+            return { ...toast, state: "leaving" };
+        }));
+        ensureDriver();
+    };
+    onCleanup(() => {
+        cancelDriver?.();
+        cancelDriver = null;
+    });
+    return {
+        toasts,
+        toast: (title, opts) => push("info", title, opts),
+        info: (title, opts) => push("info", title, opts),
+        success: (title, opts) => push("success", title, opts),
+        warning: (title, opts) => push("warning", title, opts),
+        error: (title, opts) => push("error", title, opts),
+        dismiss,
+        clear,
+    };
+}

package/package.json

@@ -43,5 +43,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.11.0"
+  "version": "0.13.0"
 }