solid-drift 0.11.0 → 0.12.0

package/README.md

@@ -1094,6 +1094,42 @@ 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.
+
 ### 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.

package/dist/index.d.ts

@@ -20,6 +20,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

@@ -20,6 +20,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/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.12.0"
 }