solid-drift 0.29.0 → 0.30.0

package/README.md

@@ -1643,6 +1643,25 @@ const spy = createScrollSpy({ targets: ["intro", "api", "faq"], offset: 80 });
 - `createSkeleton(options?)` is a loading-placeholder controller with flicker protection: `{ loading, show, phase, setLoading }`. `show()` flips true only after `delay` ms (default 200), so fast loads never flash a skeleton, and stays true for at least `minVisible` ms once shown. `phase()` sweeps 0..1 on the shared clock while shown for a JS-driven shimmer (bind it to a gradient stop); it freezes under reduced motion. On the server `show()` never flips.
 - `createScrollSpy(options)` tracks the deepest section at or above the offset line: `{ active, scrollTo, refresh }`. `targets` is an id list or accessor; `container` defaults to the window (pass an element for a scrollable panel); scroll handling is rAF-throttled on the shared clock; `scrollTo(id)` smooth-scrolls (auto under reduced motion); `onChange` fires only when the active id changes. SSR-safe.
 
+### Copy and countdown
+
+```tsx
+import { createCopy, createCountdown } from "solid-drift";
+
+const clipboard = createCopy();
+const sale = createCountdown(new Date("2026-12-01T00:00:00"), {
+  onDone: () => toast("The sale has ended"),
+});
+
+<button onClick={() => clipboard.copy(link())}>
+  {clipboard.copied() ? "Copied!" : "Copy link"}
+</button>
+<p>{sale.days()}d {sale.hours()}h {sale.minutes()}m {sale.seconds()}s</p>
+```
+
+- `createCopy(options?)` copies text to the clipboard: `{ copied, error, copy, reset }`. Uses the async Clipboard API with an `execCommand` fallback (`noFallback: true` disables it). `copied()` flips true for `resetDelay` ms (default 2000) for transient "Copied!" feedback. SSR-safe.
+- `createCountdown(target, options?)` counts down to a date, timestamp, or accessor: `{ remaining, days, hours, minutes, seconds, done, running, start, stop, reset }`. Wall-clock based (the moment is fixed even if the tab hides); recomputes on the shared clock throttled to `interval` ms (default 1000); stops itself at zero and fires `onDone` once. SSR-safe.
+
 ### 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/copy.d.ts

@@ -0,0 +1,27 @@
+export interface CopyOptions {
+    /** Milliseconds before `copied` flips back to false. Default 2000. */
+    resetDelay?: number;
+    /** Skip the execCommand fallback and require the async Clipboard API. Default false. */
+    noFallback?: boolean;
+}
+export interface CopyControls {
+    /** True briefly after a successful copy (for "Copied!" feedback). */
+    copied: () => boolean;
+    error: () => Error | null;
+    copy: (text: string) => Promise<void>;
+    reset: () => void;
+}
+/**
+ * createCopy
+ *
+ * Copy-to-clipboard with a `copied` flag for transient feedback. Uses the
+ * async Clipboard API with an `execCommand` fallback for older browsers.
+ *
+ * ```tsx
+ * const clipboard = createCopy();
+ * <button onClick={() => clipboard.copy(link())}>
+ *   {clipboard.copied() ? "Copied!" : "Copy link"}
+ * </button>
+ * ```
+ */
+export declare function createCopy(options?: CopyOptions): CopyControls;

package/dist/copy.js

@@ -0,0 +1,80 @@
+import { createSignal, onCleanup } from "solid-js";
+function legacyCopy(text) {
+    const doc = globalThis.document;
+    if (!doc || typeof doc.execCommand !== "function") {
+        throw new Error("Clipboard API is not supported.");
+    }
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    const ok = doc.execCommand("copy");
+    doc.body.removeChild(area);
+    if (!ok)
+        throw new Error("Copy command failed.");
+}
+/**
+ * createCopy
+ *
+ * Copy-to-clipboard with a `copied` flag for transient feedback. Uses the
+ * async Clipboard API with an `execCommand` fallback for older browsers.
+ *
+ * ```tsx
+ * const clipboard = createCopy();
+ * <button onClick={() => clipboard.copy(link())}>
+ *   {clipboard.copied() ? "Copied!" : "Copy link"}
+ * </button>
+ * ```
+ */
+export function createCopy(options = {}) {
+    const { resetDelay = 2000, noFallback = false } = options;
+    const [copied, setCopied] = createSignal(false);
+    const [error, setError] = createSignal(null);
+    let timer = null;
+    const markCopied = () => {
+        setCopied(true);
+        if (timer !== null)
+            clearTimeout(timer);
+        timer = null;
+        if (resetDelay > 0) {
+            timer = setTimeout(() => {
+                timer = null;
+                setCopied(false);
+            }, resetDelay);
+        }
+    };
+    const copy = async (text) => {
+        setError(null);
+        const nav = globalThis.navigator;
+        try {
+            const writeText = nav?.clipboard?.writeText;
+            if (typeof writeText === "function") {
+                await writeText.call(nav?.clipboard, text);
+                markCopied();
+                return;
+            }
+            if (!noFallback) {
+                legacyCopy(text);
+                markCopied();
+                return;
+            }
+            throw new Error("Clipboard API is not supported.");
+        }
+        catch (e) {
+            const err = e instanceof Error ? e : new Error(String(e));
+            setError(err);
+            throw err;
+        }
+    };
+    const reset = () => {
+        if (timer !== null)
+            clearTimeout(timer);
+        timer = null;
+        setCopied(false);
+    };
+    onCleanup(reset);
+    return { copied, error, copy, reset };
+}

package/dist/countdown.d.ts

@@ -0,0 +1,38 @@
+export interface CountdownOptions {
+    /** Milliseconds between recomputes. Default 1000. */
+    interval?: number;
+    /** Start immediately on creation. Default true. */
+    autoStart?: boolean;
+    onDone?: () => void;
+}
+export interface CountdownControls {
+    /** Milliseconds remaining, clamped at 0. */
+    remaining: () => number;
+    days: () => number;
+    hours: () => number;
+    minutes: () => number;
+    seconds: () => number;
+    done: () => boolean;
+    running: () => boolean;
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+}
+/**
+ * createCountdown
+ *
+ * Countdown to a target date or timestamp. Uses wall-clock time (a sale
+ * ends at a real moment even if the tab was hidden) and recomputes on
+ * the shared clock, throttled to `interval`. The task stops itself at
+ * zero and `onDone` fires exactly once. `stop()` halts display updates;
+ * the target is a fixed wall-clock moment, so `start()` resumes against
+ * the same target.
+ *
+ * ```tsx
+ * const sale = createCountdown(new Date("2026-12-01T00:00:00"), {
+ *   onDone: () => toast("The sale has ended"),
+ * });
+ * <p>{sale.days()}d {sale.hours()}h {sale.minutes()}m {sale.seconds()}s</p>
+ * ```
+ */
+export declare function createCountdown(target: Date | number | (() => Date | number), options?: CountdownOptions): CountdownControls;

package/dist/countdown.js

@@ -0,0 +1,90 @@
+import { createSignal, onCleanup } from "solid-js";
+import { schedule } from "./engine.js";
+/**
+ * createCountdown
+ *
+ * Countdown to a target date or timestamp. Uses wall-clock time (a sale
+ * ends at a real moment even if the tab was hidden) and recomputes on
+ * the shared clock, throttled to `interval`. The task stops itself at
+ * zero and `onDone` fires exactly once. `stop()` halts display updates;
+ * the target is a fixed wall-clock moment, so `start()` resumes against
+ * the same target.
+ *
+ * ```tsx
+ * const sale = createCountdown(new Date("2026-12-01T00:00:00"), {
+ *   onDone: () => toast("The sale has ended"),
+ * });
+ * <p>{sale.days()}d {sale.hours()}h {sale.minutes()}m {sale.seconds()}s</p>
+ * ```
+ */
+export function createCountdown(target, options = {}) {
+    const { interval = 1000, autoStart = true, onDone } = options;
+    const [remaining, setRemaining] = createSignal(0);
+    const [done, setDone] = createSignal(false);
+    const [running, setRunning] = createSignal(false);
+    let stopClock = null;
+    let doneFired = false;
+    const targetMs = () => {
+        const t = typeof target === "function" ? target() : target;
+        return t instanceof Date ? t.getTime() : t;
+    };
+    const compute = (nowMs) => {
+        const left = Math.max(0, targetMs() - nowMs);
+        setRemaining(left);
+        if (left <= 0 && !doneFired) {
+            doneFired = true;
+            setDone(true);
+            stopClock?.();
+            stopClock = null;
+            setRunning(false);
+            onDone?.();
+        }
+    };
+    const start = () => {
+        if (running())
+            return;
+        doneFired = false;
+        setDone(false);
+        compute(Date.now());
+        if (done())
+            return;
+        if (typeof globalThis.requestAnimationFrame === "undefined")
+            return;
+        setRunning(true);
+        let last = Date.now();
+        stopClock = schedule(() => {
+            const nowMs = Date.now();
+            if (nowMs - last >= interval) {
+                last = nowMs;
+                compute(nowMs);
+            }
+            return !done();
+        });
+    };
+    const stop = () => {
+        stopClock?.();
+        stopClock = null;
+        setRunning(false);
+    };
+    const reset = () => {
+        stop();
+        doneFired = false;
+        setDone(false);
+        compute(Date.now());
+    };
+    onCleanup(stop);
+    if (autoStart)
+        start();
+    return {
+        remaining,
+        days: () => Math.floor(remaining() / 86400000),
+        hours: () => Math.floor(remaining() / 3600000) % 24,
+        minutes: () => Math.floor(remaining() / 60000) % 60,
+        seconds: () => Math.floor(remaining() / 1000) % 60,
+        done,
+        running,
+        start,
+        stop,
+        reset,
+    };
+}

package/dist/index.d.ts

@@ -52,3 +52,7 @@ export { createSkeleton } from "./skeleton.js";
 export type { SkeletonOptions, SkeletonControls } from "./skeleton.js";
 export { createScrollSpy } from "./scrollspy.js";
 export type { ScrollSpyOptions, ScrollSpyControls } from "./scrollspy.js";
+export { createCopy } from "./copy.js";
+export type { CopyOptions, CopyControls } from "./copy.js";
+export { createCountdown } from "./countdown.js";
+export type { CountdownOptions, CountdownControls } from "./countdown.js";

package/dist/index.js

@@ -42,3 +42,5 @@ export { createBattery, createNetwork, createWakeLock, createContactPick, create
 export { createOptimistic } from "./optimistic.js";
 export { createSkeleton } from "./skeleton.js";
 export { createScrollSpy } from "./scrollspy.js";
+export { createCopy } from "./copy.js";
+export { createCountdown } from "./countdown.js";

package/package.json

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