solid-drift 0.20.0 → 0.22.0

package/README.md

@@ -1338,6 +1338,113 @@ const packet = createRedPacket({ amount: 88, coins: 14 })
 
 Options: `coins` (default `12`), `amount` (total, default `88`), `spread` (burst size in px, default `160`), `gravity` (px/s^2, default `900`), `openDuration` (ms, default `500`), `burstDuration` (ms, default `1600`), `revealDuration` (ms, default `800`), `onOpen`, `onReveal(amount)`. Returns `{ status, coins, revealed, open, reset }`. SSR-safe and reduced-motion safe: `open()` jumps straight to revealed with no burst.
 
+### `createConfetti(canvas, options?)`
+
+Canvas confetti bursts: celebration physics with gravity, drag, sway, and tumbling paper flutter, rendered on the shared animation clock. Give it a canvas (a fullscreen fixed overlay with `pointer-events: none` is the classic setup) and call `burst()` from party moments: mints, wins, onboarding completions. Bursts accumulate, so rapid celebrations stack instead of replacing. The canvas is fitted to its CSS size times the device pixel ratio automatically.
+
+```tsx
+import { createConfetti } from "solid-drift"
+
+let cvs!: HTMLCanvasElement
+const confetti = createConfetti(() => cvs, {
+  onDone: () => console.log("party over"),
+})
+<canvas ref={cvs} style={{ position: "fixed", inset: "0", "pointer-events": "none" }} />
+<button onClick={() => confetti.burst()}>Celebrate</button>
+<button onClick={() => confetti.burst({ x: 0.2, y: 0.8 })}>Side popper</button>
+```
+
+Options: `count` (particles per burst, default `120`), `colors` (default a festive palette), `spread` (launch cone in degrees around straight up, default `70`), `power` (launch speed in px/s, default `900`), `gravity` (px/s^2, default `1100`), `drag` (default `1.2`), `size` ([min, max] px, default `[6, 12]`), `shapes` (default `["rect", "circle"]`), `lifetime` (ms, default `2600`), `onDone` (called when the last particle fades). Returns `{ active, burst, clear }`: `burst(origin?)` fires from a normalized origin (default `{ x: 0.5, y: 0.6 }`), `clear()` removes every particle immediately. SSR-safe: `burst()` is a no-op on the server. Under reduced motion `burst()` skips the particles but still calls `onDone`, so chained logic (show the prize after the celebration) keeps working. Tip: pair with `useLowPowerMode` to drop the count on weak devices.
+
+### `createEmojiBurst(canvas, options?)`
+
+Emoji celebration burst: the same particle physics as confetti, but the particles are emoji glyphs that rise, tumble gently, and fade. Reactions, likes, level-ups, chat celebrations. Same canvas setup, same safety rules.
+
+```tsx
+import { createEmojiBurst } from "solid-drift"
+
+let cvs!: HTMLCanvasElement
+const burst = createEmojiBurst(() => cvs, { emoji: ["❤️", "🔥"] })
+<canvas ref={cvs} style={{ position: "fixed", inset: "0", "pointer-events": "none" }} />
+<button onClick={() => burst.burst()}>Send love</button>
+```
+
+Options: `emoji` (default `["🎉", "✨", "💥", "⭐", "💖", "🥳"]`), `count` (default `24`), `power` (default `650`), `gravity` (default `700`: floatier than confetti), `drag` (default `1.6`), `size` ([min, max] px, default `[24, 48]`), `spread` (default `90`), `lifetime` (default `1800`), `onDone`. Returns `{ active, burst, clear }`.
+
+### `createScratch(canvas, options?)`
+
+Scratch-off cover: a lottery-ticket foil over hidden content. The canvas paints an opaque cover (silver holographic foil by default, or your own art via `paint`) and pointer drags erase through it with `destination-out`. The cleared fraction is sampled from the alpha channel on a throttled cadence, and `onComplete` fires once past `threshold`. Layer it over the prize with absolute positioning, and set `touch-action: none` on the canvas so touch scratches do not scroll the page.
+
+```tsx
+import { createScratch } from "solid-drift"
+
+let foil!: HTMLCanvasElement
+const scratch = createScratch(() => foil, {
+  onComplete: () => console.log("revealed!"),
+})
+<div style={{ position: "relative" }}>
+  <div>YOU WON 50 STARS</div>
+  <canvas ref={foil} style={{ position: "absolute", inset: "0", "touch-action": "none" }} />
+</div>
+```
+
+Options: `threshold` (fraction cleared to complete, default `0.45`), `brush` (eraser radius in px, default `26`), `paint(ctx, w, h)` (custom cover art), `onComplete`. Returns `{ cleared, done, reset }`: `cleared()` is the 0..1 fraction erased, `reset()` repaints the cover. Scratching is direct manipulation, so it works identically under reduced motion. SSR-safe: `cleared()` stays 0.
+
+### DOM utilities
+
+Everyday DOM glue, signal-native: debounced and throttled signal transforms, a persisted signal, a live media query, outside-press dismissal, body scroll locking, and infinite scroll. All SSR-safe.
+
+```tsx
+import {
+  createDebounced,
+  createThrottled,
+  createLocalStorage,
+  createMediaQuery,
+  createClickOutside,
+  createScrollLock,
+  createInfiniteScroll,
+} from "solid-drift"
+
+// Debounced search: the query waits for a 300ms pause before firing.
+const [query, setQuery] = createSignal("")
+const debounced = createDebounced(query, 300)
+createEffect(() => { if (debounced()) search(debounced()) })
+
+// Throttled scroll position: at most one update per 100ms.
+const throttledY = createThrottled(scrollY, 100)
+
+// Persisted theme, synced across tabs.
+const theme = createLocalStorage<"light" | "dark">("theme", "light")
+theme.set("dark")
+
+// Live media query.
+const wide = createMediaQuery("(min-width: 1024px)")
+
+// Dismiss a menu on outside press.
+let menu!: HTMLDivElement
+createClickOutside(() => menu, () => setOpen(false))
+
+// Lock body scroll while a modal is open (nested locks stack).
+const scroll = createScrollLock()
+createEffect(() => { modalOpen() ? scroll.lock() : scroll.unlock() })
+
+// Infinite scroll: prefetch as the sentinel approaches.
+let sentinel!: HTMLDivElement
+createInfiniteScroll(() => sentinel, {
+  onLoadMore: () => loadPage(),
+  disabled: () => !hasMore(),
+})
+<div ref={sentinel} />
+```
+
+- `createDebounced(source, delay)` returns an `Accessor<T>` that follows the source after it stops changing for `delay` ms (trailing edge).
+- `createThrottled(source, interval)` returns an `Accessor<T>` that updates at most once per `interval` ms: leading change applies immediately, the rest collapse into one trailing update.
+- `createLocalStorage<T>(key, initialValue, options?)` returns `{ value, set, remove }`: reads the stored value on creation (falling back on missing or corrupt JSON), writes through on every set, and stays in sync across tabs via the `storage` event (`sync: true` default). Custom `serialize`/`deserialize` supported. Behaves like a plain signal where storage is unavailable.
+- `createMediaQuery(query)` returns an `Accessor<boolean>` that tracks the query live (`false` on the server).
+- `createClickOutside(ref, handler, options?)` calls `handler` on `pointerdown` (default, configurable via `events`) outside the element. Shadow-DOM aware via `composedPath`. No-op on the server.
+- `createScrollLock()` returns `{ locked, lock, unlock }`: sets `document.body.style.overflow = "hidden"`, restores the previous value when the last lock releases, and reference-counts nested locks so stacked modals cannot unlock each other early. Unmounting releases the locks.
+- `createInfiniteScroll(ref, options)` observes a sentinel with IntersectionObserver and calls `onLoadMore` as it approaches the viewport (`threshold` px prefetch via `rootMargin`, default `200`). `disabled` is a reactive kill switch (e.g. `() => !hasMore()`).
+
 ### 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/dom.d.ts

@@ -0,0 +1,163 @@
+import { type Accessor, type Setter } from "solid-js";
+type MaybeElement = () => Element | null | undefined;
+/**
+ * A signal that follows the source after it stops changing for `delay`
+ * ms. The classic search-input pattern: the UI stays live while the
+ * query signal waits for a pause before firing network requests.
+ *
+ * Trailing edge only. The pending update is cancelled on cleanup.
+ * SSR-safe: holds the source's initial value on the server.
+ *
+ * ```tsx
+ * const [query, setQuery] = createSignal("")
+ * const debounced = createDebounced(query, 300)
+ * createEffect(() => {
+ *   const q = debounced()
+ *   if (q) search(q) // fires only after a 300ms pause
+ * })
+ * ```
+ */
+export declare function createDebounced<T>(source: Accessor<T>, delay: number): Accessor<T>;
+/**
+ * A signal that follows the source at most once per `interval` ms.
+ * The first change applies immediately (leading edge); changes inside
+ * the window collapse into one trailing update. For scroll or resize
+ * handlers that feed expensive work.
+ *
+ * SSR-safe: holds the source's initial value on the server.
+ *
+ * ```tsx
+ * const throttledY = createThrottled(scrollY, 100)
+ * ```
+ */
+export declare function createThrottled<T>(source: Accessor<T>, interval: number): Accessor<T>;
+export interface LocalStorageOptions<T> {
+    /** Serialize a value. Default JSON.stringify. */
+    serialize?: (value: T) => string;
+    /** Deserialize a stored string. Default JSON.parse. */
+    deserialize?: (raw: string) => T;
+    /**
+     * React to `storage` events from other tabs. Default true: the
+     * signal stays in sync across tabs.
+     */
+    sync?: boolean;
+}
+export interface LocalStorageControls<T> {
+    value: Accessor<T>;
+    set: Setter<T>;
+    /** Remove the key from storage and reset to the initial value. */
+    remove: () => void;
+}
+/**
+ * A signal persisted to `localStorage`. Reads the stored value on
+ * creation (falling back to `initialValue` when missing or corrupt),
+ * writes through on every set, and stays in sync across tabs via the
+ * `storage` event.
+ *
+ * SSR-safe and storage-less-safe: without `window.localStorage` it
+ * behaves like a plain signal.
+ *
+ * ```tsx
+ * const theme = createLocalStorage<"light" | "dark">("theme", "light")
+ * theme.set("dark") // localStorage.theme = '"dark"'
+ * ```
+ */
+export declare function createLocalStorage<T>(key: string, initialValue: T, options?: LocalStorageOptions<T>): LocalStorageControls<T>;
+/**
+ * A boolean signal tracking a CSS media query, updating live when the
+ * query starts or stops matching. The primitive behind
+ * `usePrefersReducedMotion`, generalized.
+ *
+ * SSR-safe (and safe where `matchMedia` is missing): constant `false`.
+ *
+ * ```tsx
+ * const wide = createMediaQuery("(min-width: 1024px)")
+ * const columns = () => (wide() ? 4 : 2)
+ * ```
+ */
+export declare function createMediaQuery(query: string): Accessor<boolean>;
+export interface ClickOutsideOptions {
+    /**
+     * Events that count as "outside". Default `["pointerdown"]`: fires
+     * before `click`, so menus dismiss without a visible flash, and
+     * covers touch via Pointer Events.
+     */
+    events?: string[];
+}
+/**
+ * Call `handler` when the user interacts outside the element:
+ * dropdowns, popovers, and menus that dismiss on outside press.
+ *
+ * Listens on `window` (so it works even when the press lands on an
+ * overlaying element), ignores presses inside the ref, and cleans up
+ * on unmount. SSR-safe: no-op on the server.
+ *
+ * ```tsx
+ * let menu!: HTMLDivElement
+ * const [open, setOpen] = createSignal(false)
+ * createClickOutside(() => menu, () => setOpen(false))
+ * ```
+ */
+export declare function createClickOutside(ref: MaybeElement, handler: (event: Event) => void, options?: ClickOutsideOptions): void;
+export interface ScrollLockControls {
+    /** Whether the body scroll is currently locked. */
+    locked: Accessor<boolean>;
+    /** Lock body scroll. Nested locks stack; all must unlock. */
+    lock: () => void;
+    /** Release one lock. Restores the original overflow when empty. */
+    unlock: () => void;
+}
+/**
+ * Lock body scroll while overlays are open: modals, drawers, the
+ * bottom sheet. `overflow: hidden` goes on `document.body`, the
+ * previous value is restored when the last lock releases, and nested
+ * locks are reference-counted so two stacked modals cannot unlock
+ * each other early. Unmounting while locked releases the lock.
+ *
+ * SSR-safe: no-op on the server.
+ *
+ * ```tsx
+ * const scroll = createScrollLock()
+ * createEffect(() => {
+ *   if (modalOpen()) scroll.lock()
+ *   else scroll.unlock()
+ * })
+ * ```
+ */
+export declare function createScrollLock(): ScrollLockControls;
+export interface InfiniteScrollOptions {
+    /** Called when the sentinel approaches the viewport. */
+    onLoadMore: () => void;
+    /**
+     * Trigger distance in px before the sentinel enters: the observer's
+     * rootMargin. Default 200.
+     */
+    threshold?: number;
+    /**
+     * Reactive kill switch, e.g. `() => !hasMore()`. While true the
+     * sentinel is unobserved.
+     */
+    disabled?: Accessor<boolean>;
+}
+/**
+ * Infinite scroll: observe a sentinel element at the end of a list
+ * and call `onLoadMore` as it approaches the viewport, prefetching
+ * before the user hits the bottom.
+ *
+ * Built on IntersectionObserver with a `rootMargin` prefetch zone.
+ * SSR-safe (and safe without IntersectionObserver): never fires.
+ *
+ * ```tsx
+ * let sentinel!: HTMLDivElement
+ * const [items, setItems] = createSignal<string[]>([])
+ * const [hasMore, setHasMore] = createSignal(true)
+ * createInfiniteScroll(() => sentinel, {
+ *   onLoadMore: () => loadPage(),
+ *   disabled: () => !hasMore(),
+ * })
+ * <For each={items()}>{(item) => <Row item={item} />}</For>
+ * <div ref={sentinel} />
+ * ```
+ */
+export declare function createInfiniteScroll(ref: MaybeElement, options: InfiniteScrollOptions): void;
+export {};

package/dist/dom.js

@@ -0,0 +1,316 @@
+import { createEffect, createSignal, onCleanup, untrack, } from "solid-js";
+/* ------------------------------------------------------------------ */
+/* createDebounced                                                     */
+/* ------------------------------------------------------------------ */
+/**
+ * A signal that follows the source after it stops changing for `delay`
+ * ms. The classic search-input pattern: the UI stays live while the
+ * query signal waits for a pause before firing network requests.
+ *
+ * Trailing edge only. The pending update is cancelled on cleanup.
+ * SSR-safe: holds the source's initial value on the server.
+ *
+ * ```tsx
+ * const [query, setQuery] = createSignal("")
+ * const debounced = createDebounced(query, 300)
+ * createEffect(() => {
+ *   const q = debounced()
+ *   if (q) search(q) // fires only after a 300ms pause
+ * })
+ * ```
+ */
+export function createDebounced(source, delay) {
+    const [value, setValue] = createSignal(untrack(source));
+    if (typeof window === "undefined")
+        return value;
+    let timer;
+    createEffect(() => {
+        const next = source();
+        clearTimeout(timer);
+        timer = setTimeout(() => setValue(() => next), Math.max(0, delay));
+    });
+    onCleanup(() => clearTimeout(timer));
+    return value;
+}
+/* ------------------------------------------------------------------ */
+/* createThrottled                                                     */
+/* ------------------------------------------------------------------ */
+/**
+ * A signal that follows the source at most once per `interval` ms.
+ * The first change applies immediately (leading edge); changes inside
+ * the window collapse into one trailing update. For scroll or resize
+ * handlers that feed expensive work.
+ *
+ * SSR-safe: holds the source's initial value on the server.
+ *
+ * ```tsx
+ * const throttledY = createThrottled(scrollY, 100)
+ * ```
+ */
+export function createThrottled(source, interval) {
+    const [value, setValue] = createSignal(untrack(source));
+    if (typeof window === "undefined")
+        return value;
+    const wait = Math.max(0, interval);
+    let last = 0;
+    let timer;
+    createEffect(() => {
+        const next = source();
+        const t = Date.now();
+        clearTimeout(timer);
+        timer = undefined;
+        if (t - last >= wait) {
+            last = t;
+            setValue(() => next);
+        }
+        else {
+            timer = setTimeout(() => {
+                last = Date.now();
+                timer = undefined;
+                setValue(() => next);
+            }, wait - (t - last));
+        }
+    });
+    onCleanup(() => clearTimeout(timer));
+    return value;
+}
+/**
+ * A signal persisted to `localStorage`. Reads the stored value on
+ * creation (falling back to `initialValue` when missing or corrupt),
+ * writes through on every set, and stays in sync across tabs via the
+ * `storage` event.
+ *
+ * SSR-safe and storage-less-safe: without `window.localStorage` it
+ * behaves like a plain signal.
+ *
+ * ```tsx
+ * const theme = createLocalStorage<"light" | "dark">("theme", "light")
+ * theme.set("dark") // localStorage.theme = '"dark"'
+ * ```
+ */
+export function createLocalStorage(key, initialValue, options = {}) {
+    const { serialize = JSON.stringify, deserialize = JSON.parse, sync = true, } = options;
+    const storage = () => {
+        if (typeof window === "undefined")
+            return null;
+        try {
+            return window.localStorage;
+        }
+        catch {
+            return null; // private mode / blocked storage
+        }
+    };
+    const read = () => {
+        const store = storage();
+        if (!store)
+            return initialValue;
+        try {
+            const raw = store.getItem(key);
+            return raw === null ? initialValue : deserialize(raw);
+        }
+        catch {
+            return initialValue; // corrupt JSON: fall back, don't crash
+        }
+    };
+    const [value, setValue] = createSignal(read());
+    const set = ((next) => {
+        const resolved = typeof next === "function"
+            ? next(untrack(value))
+            : next;
+        setValue(() => resolved);
+        try {
+            storage()?.setItem(key, serialize(resolved));
+        }
+        catch {
+            // Quota exceeded or blocked: the signal still updates.
+        }
+        return resolved;
+    });
+    const remove = () => {
+        try {
+            storage()?.removeItem(key);
+        }
+        catch {
+            // ignore
+        }
+        setValue(() => initialValue);
+    };
+    if (typeof window !== "undefined" && sync) {
+        const onStorage = (event) => {
+            if (event.key !== key)
+                return;
+            try {
+                setValue(() => event.newValue === null ? initialValue : deserialize(event.newValue));
+            }
+            catch {
+                // ignore corrupt cross-tab writes
+            }
+        };
+        window.addEventListener("storage", onStorage);
+        onCleanup(() => window.removeEventListener("storage", onStorage));
+    }
+    return { value, set, remove };
+}
+/* ------------------------------------------------------------------ */
+/* createMediaQuery                                                    */
+/* ------------------------------------------------------------------ */
+/**
+ * A boolean signal tracking a CSS media query, updating live when the
+ * query starts or stops matching. The primitive behind
+ * `usePrefersReducedMotion`, generalized.
+ *
+ * SSR-safe (and safe where `matchMedia` is missing): constant `false`.
+ *
+ * ```tsx
+ * const wide = createMediaQuery("(min-width: 1024px)")
+ * const columns = () => (wide() ? 4 : 2)
+ * ```
+ */
+export function createMediaQuery(query) {
+    const no = () => false;
+    if (typeof window === "undefined" ||
+        typeof window.matchMedia !== "function") {
+        return no;
+    }
+    const mql = window.matchMedia(query);
+    const [matches, setMatches] = createSignal(mql.matches);
+    const onChange = (event) => {
+        setMatches(event.matches);
+    };
+    mql.addEventListener("change", onChange);
+    onCleanup(() => mql.removeEventListener("change", onChange));
+    return matches;
+}
+/**
+ * Call `handler` when the user interacts outside the element:
+ * dropdowns, popovers, and menus that dismiss on outside press.
+ *
+ * Listens on `window` (so it works even when the press lands on an
+ * overlaying element), ignores presses inside the ref, and cleans up
+ * on unmount. SSR-safe: no-op on the server.
+ *
+ * ```tsx
+ * let menu!: HTMLDivElement
+ * const [open, setOpen] = createSignal(false)
+ * createClickOutside(() => menu, () => setOpen(false))
+ * ```
+ */
+export function createClickOutside(ref, handler, options = {}) {
+    if (typeof window === "undefined")
+        return;
+    const { events = ["pointerdown"] } = options;
+    const onEvent = (event) => {
+        const el = ref();
+        if (!el)
+            return;
+        const target = event.target;
+        // Shadow-DOM aware: composedPath pierces shadow roots.
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        const inside = (target !== null && el.contains(target)) || path.includes(el);
+        if (!inside)
+            handler(event);
+    };
+    for (const name of events) {
+        window.addEventListener(name, onEvent);
+    }
+    onCleanup(() => {
+        for (const name of events) {
+            window.removeEventListener(name, onEvent);
+        }
+    });
+}
+let lockCount = 0;
+let savedOverflow = "";
+/**
+ * Lock body scroll while overlays are open: modals, drawers, the
+ * bottom sheet. `overflow: hidden` goes on `document.body`, the
+ * previous value is restored when the last lock releases, and nested
+ * locks are reference-counted so two stacked modals cannot unlock
+ * each other early. Unmounting while locked releases the lock.
+ *
+ * SSR-safe: no-op on the server.
+ *
+ * ```tsx
+ * const scroll = createScrollLock()
+ * createEffect(() => {
+ *   if (modalOpen()) scroll.lock()
+ *   else scroll.unlock()
+ * })
+ * ```
+ */
+export function createScrollLock() {
+    const [locked, setLocked] = createSignal(false);
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return { locked, lock: () => { }, unlock: () => { } };
+    }
+    let held = 0;
+    const lock = () => {
+        if (lockCount === 0) {
+            savedOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        lockCount++;
+        held++;
+        setLocked(true);
+    };
+    const unlock = () => {
+        if (held === 0)
+            return;
+        held--;
+        lockCount--;
+        if (lockCount === 0) {
+            document.body.style.overflow = savedOverflow;
+            setLocked(false);
+        }
+        else if (held === 0) {
+            setLocked(false);
+        }
+    };
+    onCleanup(() => {
+        while (held > 0)
+            unlock();
+    });
+    return { locked, lock, unlock };
+}
+/**
+ * Infinite scroll: observe a sentinel element at the end of a list
+ * and call `onLoadMore` as it approaches the viewport, prefetching
+ * before the user hits the bottom.
+ *
+ * Built on IntersectionObserver with a `rootMargin` prefetch zone.
+ * SSR-safe (and safe without IntersectionObserver): never fires.
+ *
+ * ```tsx
+ * let sentinel!: HTMLDivElement
+ * const [items, setItems] = createSignal<string[]>([])
+ * const [hasMore, setHasMore] = createSignal(true)
+ * createInfiniteScroll(() => sentinel, {
+ *   onLoadMore: () => loadPage(),
+ *   disabled: () => !hasMore(),
+ * })
+ * <For each={items()}>{(item) => <Row item={item} />}</For>
+ * <div ref={sentinel} />
+ * ```
+ */
+export function createInfiniteScroll(ref, options) {
+    const { onLoadMore, threshold = 200, disabled } = options;
+    if (typeof window === "undefined" ||
+        typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    createEffect(() => {
+        const el = ref();
+        if (!el)
+            return;
+        if (disabled?.() === true)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    onLoadMore();
+            }
+        }, { rootMargin: `${threshold}px` });
+        observer.observe(el);
+        onCleanup(() => observer.disconnect());
+    });
+}

package/dist/fun.d.ts

@@ -149,3 +149,170 @@ export interface RedPacketControls {
  * ```
  */
 export declare function createRedPacket(options?: RedPacketOptions): RedPacketControls;
+export interface ConfettiOptions {
+    /** Particles per burst. Default 120. */
+    count?: number;
+    /** Confetti colors. Default a festive palette. */
+    colors?: string[];
+    /** Launch cone in degrees around straight up. Default 70. */
+    spread?: number;
+    /** Launch speed in px/s. Default 900. */
+    power?: number;
+    /** Gravity in px/s^2. Default 1100. */
+    gravity?: number;
+    /** Air drag. Default 1.2. */
+    drag?: number;
+    /** Particle size range in px. Default [6, 12]. */
+    size?: [min: number, max: number];
+    /** Particle shapes. Default ["rect", "circle"]. */
+    shapes?: Array<"rect" | "circle">;
+    /** Particle lifetime in ms. Default 2600. */
+    lifetime?: number;
+    /** Called when the last particle fades. */
+    onDone?: () => void;
+}
+export interface ConfettiControls {
+    /** True while any particles are alive. */
+    active: Accessor<boolean>;
+    /**
+     * Fire a burst from a normalized origin (0..1 across the canvas).
+     * Default `{ x: 0.5, y: 0.6 }`.
+     */
+    burst: (origin?: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Remove every particle immediately. */
+    clear: () => void;
+}
+/**
+ * Canvas confetti bursts: celebration physics with gravity, drag,
+ * sway, and tumbling paper flutter, rendered on the shared clock.
+ *
+ * Give it a canvas (a fullscreen fixed overlay with
+ * `pointer-events: none` is the classic setup) and call `burst()`
+ * from party moments: mints, wins, onboarding completions. Bursts
+ * accumulate, so rapid celebrations stack instead of replacing.
+ *
+ * SSR-safe: `burst()` is a no-op on the server. Under reduced motion
+ * `burst()` skips the particles but still calls `onDone`, so chained
+ * logic (show the prize after the celebration) keeps working.
+ *
+ * ```tsx
+ * import { createConfetti } from "solid-drift"
+ *
+ * let cvs!: HTMLCanvasElement
+ * const confetti = createConfetti(() => cvs, {
+ *   onDone: () => console.log("party over"),
+ * })
+ * <canvas ref={cvs} style={{ position: "fixed", inset: "0", "pointer-events": "none" }} />
+ * <button onClick={() => confetti.burst()}>Celebrate</button>
+ * <button onClick={() => confetti.burst({ x: 0.2, y: 0.8 })}>Side popper</button>
+ * ```
+ */
+export declare function createConfetti(canvas: () => HTMLCanvasElement | null | undefined, options?: ConfettiOptions): ConfettiControls;
+export interface EmojiBurstOptions {
+    /** Emoji pool. Default ["\u{1F389}", "\u2728", "\u{1F4A5}", "\u2B50", "\u{1F496}", "\u{1F973}"]. */
+    emoji?: string[];
+    /** Particles per burst. Default 24. */
+    count?: number;
+    /** Launch speed in px/s. Default 650. */
+    power?: number;
+    /** Gravity in px/s^2. Default 700: floatier than confetti. */
+    gravity?: number;
+    /** Air drag. Default 1.6. */
+    drag?: number;
+    /** Font size range in px. Default [24, 48]. */
+    size?: [min: number, max: number];
+    /** Launch cone in degrees around straight up. Default 90. */
+    spread?: number;
+    /** Particle lifetime in ms. Default 1800. */
+    lifetime?: number;
+    /** Called when the last particle fades. */
+    onDone?: () => void;
+}
+export interface EmojiBurstControls {
+    /** True while any particles are alive. */
+    active: Accessor<boolean>;
+    /**
+     * Fire a burst from a normalized origin (0..1 across the canvas).
+     * Default `{ x: 0.5, y: 0.6 }`.
+     */
+    burst: (origin?: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Remove every particle immediately. */
+    clear: () => void;
+}
+/**
+ * Emoji celebration burst: the same particle physics as confetti,
+ * but the particles are emoji glyphs that rise, tumble gently, and
+ * fade. Reactions, likes, level-ups, chat celebrations.
+ *
+ * Same canvas setup and safety rules as `createConfetti`: SSR-safe,
+ * and under reduced motion `burst()` skips the particles but still
+ * calls `onDone`.
+ *
+ * ```tsx
+ * import { createEmojiBurst } from "solid-drift"
+ *
+ * let cvs!: HTMLCanvasElement
+ * const burst = createEmojiBurst(() => cvs, { emoji: ["\u2764\uFE0F", "\u{1F525}"] })
+ * <canvas ref={cvs} style={{ position: "fixed", inset: "0", "pointer-events": "none" }} />
+ * <button onClick={() => burst.burst()}>Send love</button>
+ * ```
+ */
+export declare function createEmojiBurst(canvas: () => HTMLCanvasElement | null | undefined, options?: EmojiBurstOptions): EmojiBurstControls;
+export interface ScratchOptions {
+    /**
+     * Fraction of the cover that must be cleared to complete, 0 to 1.
+     * Default 0.45.
+     */
+    threshold?: number;
+    /** Eraser brush radius in px. Default 26. */
+    brush?: number;
+    /**
+     * Paint the cover yourself: foil art, branding, "scratch here" copy.
+     * Receives the 2D context and the canvas size in px. Default is a
+     * silver holographic foil.
+     */
+    paint?: (ctx: CanvasRenderingContext2D, w: number, h: number) => void;
+    /** Called once when clearing passes the threshold. */
+    onComplete?: () => void;
+}
+export interface ScratchControls {
+    /** 0..1 fraction of the cover cleared. */
+    cleared: Accessor<number>;
+    /** True after clearing passes the threshold. */
+    done: Accessor<boolean>;
+    /** Repaint the cover and reset progress. */
+    reset: () => void;
+}
+/**
+ * Scratch-off cover: a lottery-ticket foil over hidden content.
+ *
+ * The canvas paints an opaque cover (silver holographic foil by
+ * default, or your own art via `paint`). Pointer drags erase through
+ * it with `destination-out`; the cleared fraction is sampled from the
+ * alpha channel on a throttled cadence, and `onComplete` fires once
+ * past `threshold`. Layer it over the prize with absolute positioning.
+ *
+ * Set `touch-action: none` on the canvas so touch scratches do not
+ * scroll the page. Scratching is direct manipulation, so it works
+ * identically under reduced motion. SSR-safe: `cleared()` stays 0.
+ *
+ * ```tsx
+ * import { createScratch } from "solid-drift"
+ *
+ * let foil!: HTMLCanvasElement
+ * const scratch = createScratch(() => foil, {
+ *   onComplete: () => console.log("revealed!"),
+ * })
+ * <div style={{ position: "relative" }}>
+ *   <div>YOU WON 50 STARS</div>
+ *   <canvas ref={foil} style={{ position: "absolute", inset: "0", "touch-action": "none" }} />
+ * </div>
+ * ```
+ */
+export declare function createScratch(canvas: () => HTMLCanvasElement | null | undefined, options?: ScratchOptions): ScratchControls;

package/dist/fun.js

@@ -1,4 +1,4 @@
-import { createSignal, onCleanup, } from "solid-js";
+import { createEffect, createSignal, onCleanup, } from "solid-js";
 import { now, schedule } from "./engine.js";
 import { resolveEasing } from "./easing.js";
 import { createTween } from "./tween.js";
@@ -274,3 +274,450 @@ export function createRedPacket(options = {}) {
     onCleanup(() => cancel?.());
     return { status, coins: coinList, revealed, open, reset };
 }
+/**
+ * A canvas particle layer with gravity, drag, sway, and flutter, run
+ * on the shared animation clock. One rAF loop per layer, only while
+ * particles are alive. The canvas is fitted to its CSS size times the
+ * device pixel ratio on every frame, so a fullscreen fixed overlay
+ * canvas just works.
+ */
+function createParticleLayer(canvas, gravity, drag, onDone) {
+    const server = typeof window === "undefined";
+    const [active, setActive] = createSignal(false);
+    let particles = [];
+    let cancel = null;
+    let lastT = 0;
+    const MAX_PARTICLES = 1200;
+    const loop = (t) => {
+        const cvs = canvas();
+        if (!cvs) {
+            particles = [];
+            setActive(false);
+            cancel = null;
+            return false;
+        }
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        const w = cvs.clientWidth;
+        const h = cvs.clientHeight;
+        if (w === 0 || h === 0)
+            return true; // no layout yet; keep waiting
+        const pw = Math.round(w * dpr);
+        const ph = Math.round(h * dpr);
+        if (cvs.width !== pw || cvs.height !== ph) {
+            cvs.width = pw;
+            cvs.height = ph;
+        }
+        const ctx = cvs.getContext("2d");
+        if (!ctx) {
+            particles = [];
+            setActive(false);
+            cancel = null;
+            return false;
+        }
+        const dt = lastT === 0 ? 0.016 : Math.min(0.05, Math.max(0.001, (t - lastT) / 1000));
+        lastT = t;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, w, h);
+        const dk = Math.max(0, 1 - drag * dt);
+        particles = particles.filter((p) => {
+            const age = t - p.born;
+            if (age >= p.life)
+                return false;
+            p.vx *= dk;
+            p.vy = p.vy * dk + gravity * dt;
+            p.swayPhase += p.swaySpeed * dt;
+            p.x += (p.vx + Math.sin(p.swayPhase) * p.sway) * dt;
+            p.y += p.vy * dt;
+            p.rot += p.vr * dt;
+            // Fade over the last quarter of life.
+            ctx.globalAlpha = Math.min(1, (p.life - age) / (p.life * 0.25));
+            if (p.shape === "circle") {
+                ctx.fillStyle = p.color;
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.size / 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            else if (p.shape === "emoji") {
+                ctx.font = `${p.size}px serif`;
+                ctx.textAlign = "center";
+                ctx.textBaseline = "middle";
+                ctx.save();
+                ctx.translate(p.x, p.y);
+                ctx.rotate(p.rot * 0.3);
+                ctx.fillText(p.text, 0, 0);
+                ctx.restore();
+            }
+            else {
+                // Paper flutter: the rect tumbles and its width breathes.
+                const squash = 0.35 + 0.65 * Math.abs(Math.sin(p.swayPhase * 2));
+                ctx.fillStyle = p.color;
+                ctx.save();
+                ctx.translate(p.x, p.y);
+                ctx.rotate(p.rot);
+                ctx.scale(1, squash);
+                ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
+                ctx.restore();
+            }
+            return true;
+        });
+        ctx.globalAlpha = 1;
+        if (particles.length === 0) {
+            setActive(false);
+            cancel = null;
+            onDone?.();
+            return false;
+        }
+        return true;
+    };
+    const spawn = (make) => {
+        if (server)
+            return;
+        particles.push(make());
+        if (particles.length > MAX_PARTICLES) {
+            particles.splice(0, particles.length - MAX_PARTICLES);
+        }
+        if (!cancel) {
+            lastT = 0;
+            setActive(true);
+            cancel = schedule(loop);
+        }
+    };
+    const clear = () => {
+        cancel?.();
+        cancel = null;
+        particles = [];
+        setActive(false);
+    };
+    if (!server) {
+        onCleanup(() => {
+            cancel?.();
+            cancel = null;
+        });
+    }
+    return { active, spawn, clear };
+}
+const CONFETTI_COLORS = [
+    "#ff4757",
+    "#ffa502",
+    "#2ed573",
+    "#1e90ff",
+    "#eccc68",
+    "#ff6b81",
+    "#7bed9f",
+    "#70a1ff",
+    "#f368e0",
+    "#48dbfb",
+];
+/**
+ * Canvas confetti bursts: celebration physics with gravity, drag,
+ * sway, and tumbling paper flutter, rendered on the shared clock.
+ *
+ * Give it a canvas (a fullscreen fixed overlay with
+ * `pointer-events: none` is the classic setup) and call `burst()`
+ * from party moments: mints, wins, onboarding completions. Bursts
+ * accumulate, so rapid celebrations stack instead of replacing.
+ *
+ * SSR-safe: `burst()` is a no-op on the server. Under reduced motion
+ * `burst()` skips the particles but still calls `onDone`, so chained
+ * logic (show the prize after the celebration) keeps working.
+ *
+ * ```tsx
+ * import { createConfetti } from "solid-drift"
+ *
+ * let cvs!: HTMLCanvasElement
+ * const confetti = createConfetti(() => cvs, {
+ *   onDone: () => console.log("party over"),
+ * })
+ * <canvas ref={cvs} style={{ position: "fixed", inset: "0", "pointer-events": "none" }} />
+ * <button onClick={() => confetti.burst()}>Celebrate</button>
+ * <button onClick={() => confetti.burst({ x: 0.2, y: 0.8 })}>Side popper</button>
+ * ```
+ */
+export function createConfetti(canvas, options = {}) {
+    const { count = 120, colors = CONFETTI_COLORS, spread = 70, power = 900, gravity = 1100, drag = 1.2, size = [6, 12], shapes = ["rect", "circle"], lifetime = 2600, onDone, } = options;
+    const server = typeof window === "undefined";
+    const layer = createParticleLayer(canvas, gravity, drag, onDone);
+    const burst = (origin = { x: 0.5, y: 0.6 }) => {
+        if (server || prefersReducedMotion()) {
+            onDone?.();
+            return;
+        }
+        const cvs = canvas();
+        if (!cvs || cvs.clientWidth === 0)
+            return;
+        const ox = origin.x * cvs.clientWidth;
+        const oy = origin.y * cvs.clientHeight;
+        const [minSize, maxSize] = size;
+        for (let i = 0; i < count; i++) {
+            const angle = ((-90 + (Math.random() - 0.5) * spread) * Math.PI) / 180;
+            const speed = power * (0.4 + Math.random() * 0.8);
+            const shape = shapes[(Math.random() * shapes.length) | 0];
+            layer.spawn(() => ({
+                x: ox,
+                y: oy,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                rot: Math.random() * Math.PI * 2,
+                vr: (Math.random() - 0.5) * 20,
+                sway: 40 + Math.random() * 60,
+                swaySpeed: 4 + Math.random() * 6,
+                swayPhase: Math.random() * Math.PI * 2,
+                size: minSize + Math.random() * (maxSize - minSize),
+                color: colors[(Math.random() * colors.length) | 0],
+                shape,
+                text: "",
+                born: now(),
+                life: lifetime * (0.7 + Math.random() * 0.6),
+            }));
+        }
+    };
+    return { active: layer.active, burst, clear: layer.clear };
+}
+const BURST_EMOJI = ["\u{1F389}", "\u2728", "\u{1F4A5}", "\u2B50", "\u{1F496}", "\u{1F973}"];
+/**
+ * Emoji celebration burst: the same particle physics as confetti,
+ * but the particles are emoji glyphs that rise, tumble gently, and
+ * fade. Reactions, likes, level-ups, chat celebrations.
+ *
+ * Same canvas setup and safety rules as `createConfetti`: SSR-safe,
+ * and under reduced motion `burst()` skips the particles but still
+ * calls `onDone`.
+ *
+ * ```tsx
+ * import { createEmojiBurst } from "solid-drift"
+ *
+ * let cvs!: HTMLCanvasElement
+ * const burst = createEmojiBurst(() => cvs, { emoji: ["\u2764\uFE0F", "\u{1F525}"] })
+ * <canvas ref={cvs} style={{ position: "fixed", inset: "0", "pointer-events": "none" }} />
+ * <button onClick={() => burst.burst()}>Send love</button>
+ * ```
+ */
+export function createEmojiBurst(canvas, options = {}) {
+    const { emoji = BURST_EMOJI, count = 24, power = 650, gravity = 700, drag = 1.6, size = [24, 48], spread = 90, lifetime = 1800, onDone, } = options;
+    const server = typeof window === "undefined";
+    const layer = createParticleLayer(canvas, gravity, drag, onDone);
+    const burst = (origin = { x: 0.5, y: 0.6 }) => {
+        if (server || prefersReducedMotion()) {
+            onDone?.();
+            return;
+        }
+        const cvs = canvas();
+        if (!cvs || cvs.clientWidth === 0)
+            return;
+        const ox = origin.x * cvs.clientWidth;
+        const oy = origin.y * cvs.clientHeight;
+        const [minSize, maxSize] = size;
+        for (let i = 0; i < count; i++) {
+            const angle = ((-90 + (Math.random() - 0.5) * spread) * Math.PI) / 180;
+            const speed = power * (0.5 + Math.random() * 0.7);
+            layer.spawn(() => ({
+                x: ox,
+                y: oy,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                rot: (Math.random() - 0.5) * Math.PI,
+                vr: (Math.random() - 0.5) * 6,
+                sway: 30 + Math.random() * 40,
+                swaySpeed: 3 + Math.random() * 4,
+                swayPhase: Math.random() * Math.PI * 2,
+                size: minSize + Math.random() * (maxSize - minSize),
+                color: "#ffffff",
+                shape: "emoji",
+                text: emoji[(Math.random() * emoji.length) | 0],
+                born: now(),
+                life: lifetime * (0.7 + Math.random() * 0.6),
+            }));
+        }
+    };
+    return { active: layer.active, burst, clear: layer.clear };
+}
+/** Default cover: a silver holographic foil with sheen streaks. */
+function paintFoil(ctx, w, h) {
+    const g = ctx.createLinearGradient(0, 0, w, h);
+    g.addColorStop(0, "#dde2e9");
+    g.addColorStop(0.45, "#a9b2bf");
+    g.addColorStop(0.55, "#c3ccd7");
+    g.addColorStop(1, "#98a2b1");
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, w, h);
+    // Diagonal sheen streaks.
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
+    ctx.lineWidth = Math.max(2, w * 0.02);
+    for (let i = -2; i < 5; i++) {
+        ctx.beginPath();
+        ctx.moveTo((i * w) / 3, -10);
+        ctx.lineTo((i * w) / 3 + h * 0.6, h + 10);
+        ctx.stroke();
+    }
+    // Speckle.
+    ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
+    const n = Math.floor((w * h) / 900);
+    for (let i = 0; i < n; i++) {
+        const x = Math.random() * w;
+        const y = Math.random() * h;
+        ctx.fillRect(x, y, 1.5, 1.5);
+    }
+}
+/**
+ * Scratch-off cover: a lottery-ticket foil over hidden content.
+ *
+ * The canvas paints an opaque cover (silver holographic foil by
+ * default, or your own art via `paint`). Pointer drags erase through
+ * it with `destination-out`; the cleared fraction is sampled from the
+ * alpha channel on a throttled cadence, and `onComplete` fires once
+ * past `threshold`. Layer it over the prize with absolute positioning.
+ *
+ * Set `touch-action: none` on the canvas so touch scratches do not
+ * scroll the page. Scratching is direct manipulation, so it works
+ * identically under reduced motion. SSR-safe: `cleared()` stays 0.
+ *
+ * ```tsx
+ * import { createScratch } from "solid-drift"
+ *
+ * let foil!: HTMLCanvasElement
+ * const scratch = createScratch(() => foil, {
+ *   onComplete: () => console.log("revealed!"),
+ * })
+ * <div style={{ position: "relative" }}>
+ *   <div>YOU WON 50 STARS</div>
+ *   <canvas ref={foil} style={{ position: "absolute", inset: "0", "touch-action": "none" }} />
+ * </div>
+ * ```
+ */
+export function createScratch(canvas, options = {}) {
+    const { threshold = 0.45, brush = 26, paint, onComplete } = options;
+    const server = typeof window === "undefined";
+    const [cleared, setCleared] = createSignal(0);
+    const [done, setDone] = createSignal(false);
+    if (server) {
+        return { cleared, done, reset: () => { } };
+    }
+    const paintCover = () => {
+        const cvs = canvas();
+        if (!cvs)
+            return;
+        const rect = cvs.getBoundingClientRect();
+        const w = Math.max(1, Math.round(rect.width));
+        const h = Math.max(1, Math.round(rect.height));
+        if (cvs.width !== w || cvs.height !== h) {
+            cvs.width = w;
+            cvs.height = h;
+        }
+        const ctx = cvs.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.globalCompositeOperation = "source-over";
+        ctx.globalAlpha = 1;
+        if (paint)
+            paint(ctx, w, h);
+        else
+            paintFoil(ctx, w, h);
+    };
+    /** Fraction of sampled pixels erased, via the alpha channel. */
+    const sampleCleared = () => {
+        const cvs = canvas();
+        if (!cvs)
+            return;
+        const ctx = cvs.getContext("2d");
+        if (!ctx)
+            return;
+        const { width: w, height: h } = cvs;
+        if (w === 0 || h === 0)
+            return;
+        let data;
+        try {
+            data = ctx.getImageData(0, 0, w, h).data;
+        }
+        catch {
+            return; // tainted canvas: cannot read pixels
+        }
+        const step = 6;
+        let clear = 0;
+        let total = 0;
+        for (let y = 0; y < h; y += step) {
+            for (let x = 0; x < w; x += step) {
+                total++;
+                if (data[(y * w + x) * 4 + 3] < 128)
+                    clear++;
+            }
+        }
+        const frac = total === 0 ? 0 : clear / total;
+        setCleared(frac);
+        if (!done() && frac >= threshold) {
+            setDone(true);
+            onComplete?.();
+        }
+    };
+    const eraseAt = (clientX, clientY) => {
+        const cvs = canvas();
+        if (!cvs)
+            return;
+        const rect = cvs.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        const ctx = cvs.getContext("2d");
+        if (!ctx)
+            return;
+        const sx = cvs.width / rect.width;
+        const sy = cvs.height / rect.height;
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.beginPath();
+        ctx.arc((clientX - rect.left) * sx, (clientY - rect.top) * sy, brush * Math.max(sx, sy), 0, Math.PI * 2);
+        ctx.fill();
+        ctx.globalCompositeOperation = "source-over";
+    };
+    // Throttle the (relatively expensive) pixel sampling.
+    let lastSample = 0;
+    const maybeSample = () => {
+        const t = now();
+        if (t - lastSample < 120)
+            return;
+        lastSample = t;
+        sampleCleared();
+    };
+    const onDown = (event) => {
+        if (event.isPrimary === false)
+            return;
+        const cvs = canvas();
+        if (!cvs)
+            return;
+        eraseAt(event.clientX, event.clientY);
+        maybeSample();
+        try {
+            cvs.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // setPointerCapture may throw for synthetic events; the window
+            // fallback below is not needed since moves stay on the canvas.
+        }
+        const move = (ev) => {
+            eraseAt(ev.clientX, ev.clientY);
+            maybeSample();
+        };
+        const up = () => {
+            cvs.removeEventListener("pointermove", move);
+            cvs.removeEventListener("pointerup", up);
+            cvs.removeEventListener("pointercancel", up);
+            sampleCleared(); // final accurate read
+        };
+        cvs.addEventListener("pointermove", move);
+        cvs.addEventListener("pointerup", up);
+        cvs.addEventListener("pointercancel", up);
+    };
+    // Late-bound refs (Solid assigns `ref` after mount) get the cover
+    // painted and the gesture attached as soon as they exist.
+    createEffect(() => {
+        const cvs = canvas();
+        if (!cvs)
+            return;
+        paintCover();
+        cvs.addEventListener("pointerdown", onDown);
+        onCleanup(() => cvs.removeEventListener("pointerdown", onDown));
+    });
+    const reset = () => {
+        setCleared(0);
+        setDone(false);
+        paintCover();
+    };
+    return { cleared, done, reset };
+}

package/dist/index.d.ts

@@ -12,8 +12,9 @@ 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 { createSlotMachine, type SlotMachineControls, type SlotMachineOptions, type SlotMachineStatus, createRedPacket, type RedPacketCoin, type RedPacketControls, type RedPacketOptions, type RedPacketStatus, } from "./fun.js";
+export { createSlotMachine, type SlotMachineControls, type SlotMachineOptions, type SlotMachineStatus, createRedPacket, type RedPacketCoin, type RedPacketControls, type RedPacketOptions, type RedPacketStatus, createConfetti, type ConfettiControls, type ConfettiOptions, createEmojiBurst, type EmojiBurstControls, type EmojiBurstOptions, createScratch, type ScratchControls, type ScratchOptions, } from "./fun.js";
 export { createStagger } from "./stagger.js";
+export { createDebounced, createThrottled, createLocalStorage, type LocalStorageOptions, type LocalStorageControls, createMediaQuery, createClickOutside, type ClickOutsideOptions, createScrollLock, type ScrollLockControls, createInfiniteScroll, type InfiniteScrollOptions, } from "./dom.js";
 export { createHorizontalScroll, type HorizontalScrollOptions, type HorizontalScrollResult, } from "./horizontal.js";
 export { createScrub, type ScrubKeyframe, type ScrubOptions } from "./scrub.js";
 export { createScrollColor, type ScrollColorStop, type ScrollColorOptions, type ScrollColorFormat, createScrollTracking, type ScrollTrackingOptions, createScrollLine, type ScrollLineOptions, type ScrollLineStyle, type ScrollLineAxis, type ScrollLineOrigin, } from "./scrollfx.js";

package/dist/index.js

@@ -12,8 +12,9 @@ export { createScrollProgress } from "./scroll.js";
 export { createInView } from "./inview.js";
 export { usePrefersReducedMotion, prefersReducedMotion, } from "./reduced-motion.js";
 export { isLowPowerMode, useLowPowerMode, } from "./power.js";
-export { createSlotMachine, createRedPacket, } from "./fun.js";
+export { createSlotMachine, createRedPacket, createConfetti, createEmojiBurst, createScratch, } from "./fun.js";
 export { createStagger } from "./stagger.js";
+export { createDebounced, createThrottled, createLocalStorage, createMediaQuery, createClickOutside, createScrollLock, createInfiniteScroll, } from "./dom.js";
 export { createHorizontalScroll, } from "./horizontal.js";
 export { createScrub } from "./scrub.js";
 export { createScrollColor, createScrollTracking, createScrollLine, } from "./scrollfx.js";

package/package.json

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