@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/signature-pad/signature-pad.js

@@ -0,0 +1,450 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useReducedMotion } from "motion/react";
+import { Check, Download, Eraser, Play, Redo2, Square, Undo2, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./signature-pad.module.css";
+/** Pad coordinates. Strokes are stored in this space and scale with the pad. */
+export const PAD_WIDTH = 600, PAD_HEIGHT = 260;
+const INK = {
+    black: { label: "Black ink", export: "#17171a" },
+    blue: { label: "Blue ink", export: "#1d3fae" },
+    violet: { label: "Violet ink", export: "#5b35c8" },
+};
+const WIDTHS = {
+    fine: { label: "Fine", size: 3.4 },
+    medium: { label: "Medium", size: 5.6 },
+    bold: { label: "Bold", size: 8.4 },
+};
+const COLORS = Object.keys(INK);
+const SIZES = Object.keys(WIDTHS);
+const add = (a, b) => [a[0] + b[0], a[1] + b[1]];
+const sub = (a, b) => [a[0] - b[0], a[1] - b[1]];
+const mul = (a, n) => [a[0] * n, a[1] * n];
+const lerp = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+const dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
+const norm = (a) => { const l = Math.hypot(a[0], a[1]); return l ? [a[0] / l, a[1] / l] : [0, 0]; };
+const perp = (a) => [a[1], -a[0]];
+const dot = (a, b) => a[0] * b[0] + a[1] * b[1];
+const rotAround = (p, c, r) => {
+    const s = Math.sin(r), co = Math.cos(r), px = p[0] - c[0], py = p[1] - c[1];
+    return [px * co - py * s + c[0], px * s + py * co + c[1]];
+};
+const easeOut = (t) => t * (2 - t);
+/**
+ * Turns sampled points into the outline of a variable width stroke, in the spirit of perfect-freehand. Points are streamlined
+ * toward the pointer, width follows pen pressure or, for a mouse or finger, speed, the ends taper, sharp turns get round joins,
+ * and both ends get round caps. Returns the outline polygon; pass it to `outlineToPath` for SVG.
+ */
+export function getStrokeOutline(input, options) {
+    const { size, thinning = .62, streamline = .42, simulatePressure = true, taperStart = 0, taperEnd = 0, last = true } = options;
+    const [head] = input;
+    if (!head)
+        return [];
+    const usePen = !simulatePressure && input.some(point => point.p > 0);
+    // Streamline: each point eases toward the raw input, which removes jitter without a smoothing pass.
+    const pts = [];
+    let prev = [head.x, head.y], length = 0;
+    const start = { at: prev, pressure: usePen ? head.p : .5, length: 0, vector: [1, 0] };
+    pts.push(start);
+    for (let i = 1; i < input.length; i++) {
+        const sample = input[i];
+        const raw = [sample.x, sample.y];
+        const at = i === input.length - 1 && last ? raw : lerp(prev, raw, 1 - streamline);
+        const d = dist(at, prev);
+        if (d < .4)
+            continue;
+        length += d;
+        pts.push({ at, pressure: usePen ? sample.p : .5, length, vector: norm(sub(prev, at)) });
+        prev = at;
+    }
+    const second = pts[1];
+    if (second)
+        start.vector = second.vector;
+    const total = length;
+    // A dot: a round mark sized by the first pressure.
+    if (pts.length === 1) {
+        const r = Math.max(.6, size * (.5 - thinning * (.5 - start.pressure)) * .9);
+        return Array.from({ length: 18 }, (_, i) => add(start.at, mul([Math.cos(i / 18 * Math.PI * 2), Math.sin(i / 18 * Math.PI * 2)], r)));
+    }
+    const left = [], right = [];
+    let pressure = start.pressure, prevVector = start.vector;
+    const radii = [];
+    for (let i = 0; i < pts.length; i++) {
+        const point = pts[i];
+        if (!usePen) {
+            // Speed thins the line: a long step between samples reads as a fast stroke.
+            const step = i === 0 ? 0 : dist(point.at, pts[i - 1].at);
+            const speed = Math.min(1, step / size);
+            const target = Math.min(1, 1 - speed);
+            pressure = Math.min(1, pressure + (target - pressure) * speed * .3);
+        }
+        else {
+            pressure = point.pressure;
+        }
+        let radius = Math.max(.25, size * (.5 - thinning * (.5 - pressure)));
+        const ts = taperStart ? easeOut(Math.min(1, point.length / taperStart)) : 1;
+        const te = taperEnd && last ? easeOut(Math.min(1, (total - point.length) / taperEnd)) : 1;
+        radius = Math.max(.12 * size, radius * Math.min(ts, te));
+        radii.push(radius);
+        const next = pts[i + 1]?.vector ?? point.vector;
+        const offset = mul(perp(lerp(next, point.vector, .5)), radius);
+        // A sharp turn: sweep round the corner so the outline does not pinch.
+        if (i > 0 && i < pts.length - 1 && dot(point.vector, next) < -.2) {
+            const corner = mul(perp(prevVector), radius);
+            for (let t = 0; t <= 1; t += 1 / 12) {
+                left.push(rotAround(sub(point.at, corner), point.at, Math.PI * t));
+                right.push(rotAround(add(point.at, corner), point.at, -Math.PI * t));
+            }
+        }
+        else {
+            left.push(sub(point.at, offset));
+            right.push(add(point.at, offset));
+        }
+        prevVector = point.vector;
+    }
+    // Round caps: half circles swept around the first and last points, on the side facing away from the stroke.
+    const cap = (center, from, to, away) => {
+        const out = [];
+        const r = dist(center, from), start = Math.atan2(from[1] - center[1], from[0] - center[0]);
+        const mid = start + Math.PI / 2;
+        const sign = dot([Math.cos(mid), Math.sin(mid)], away) >= 0 ? 1 : -1;
+        for (let k = 1; k < 12; k++) {
+            const a = start + sign * Math.PI * k / 12;
+            out.push([center[0] + Math.cos(a) * r, center[1] + Math.sin(a) * r]);
+        }
+        out.push(to);
+        return out;
+    };
+    const end = pts[pts.length - 1];
+    const endCap = cap(end.at, left[left.length - 1], right[right.length - 1], mul(end.vector, -1));
+    const startCap = cap(start.at, right[0], left[0], start.vector);
+    return [...left, ...endCap, ...right.reverse(), ...startCap];
+}
+const round = (value) => Math.round(value * 100) / 100;
+/** Draws an outline as one smooth closed path, with quadratic curves through the midpoints of its edges. */
+export function outlineToPath(points) {
+    if (points.length < 3)
+        return "";
+    let d = `M${round(points[0][0])} ${round(points[0][1])} Q`;
+    for (let i = 0; i < points.length; i++) {
+        const [x0, y0] = points[i], [x1, y1] = points[(i + 1) % points.length];
+        d += `${round(x0)} ${round(y0)} ${round((x0 + x1) / 2)} ${round((y0 + y1) / 2)} `;
+    }
+    return `${d}Z`;
+}
+function strokeOptions(stroke, last) {
+    const size = WIDTHS[stroke.width].size;
+    const pen = stroke.points.some(point => point.p > 0);
+    return { size, simulatePressure: !pen, taperStart: size * 1.5, taperEnd: pen ? 0 : size * 5, last };
+}
+/** The SVG path of a stroke, or of its first `upTo` ms while it is replayed. */
+export function strokePath(stroke, upTo = Infinity) {
+    const all = stroke.points;
+    const done = upTo >= all[all.length - 1].t;
+    const points = done ? all : all.filter(point => point.t <= upTo);
+    return outlineToPath(getStrokeOutline(points, strokeOptions(stroke, done)));
+}
+/** Tight bounds of the ink, padded, for export. */
+function inkBounds(strokes) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const stroke of strokes)
+        for (const point of stroke.points) {
+            minX = Math.min(minX, point.x);
+            minY = Math.min(minY, point.y);
+            maxX = Math.max(maxX, point.x);
+            maxY = Math.max(maxY, point.y);
+        }
+    const pad = 16;
+    return { x: Math.floor(minX - pad), y: Math.floor(minY - pad), width: Math.ceil(maxX - minX + pad * 2), height: Math.ceil(maxY - minY + pad * 2) };
+}
+/** A standalone SVG of the signature, cropped to the ink, with print ink colors. */
+export function signatureToSvg(strokes) {
+    if (!strokes.length)
+        return "";
+    const box = inkBounds(strokes);
+    const paths = strokes.map(stroke => `<path d="${strokePath(stroke)}" fill="${INK[stroke.color].export}"/>`).join("");
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${box.x} ${box.y} ${box.width} ${box.height}" width="${box.width}" height="${box.height}">${paths}</svg>`;
+}
+/** A transparent PNG of the signature, cropped to the ink, at `scale` times pad resolution. */
+export function signatureToPng(strokes, scale = 3) {
+    return new Promise((resolve, reject) => {
+        if (!strokes.length)
+            return reject(new Error("Nothing to export"));
+        const box = inkBounds(strokes);
+        const canvas = document.createElement("canvas");
+        canvas.width = box.width * scale;
+        canvas.height = box.height * scale;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return reject(new Error("Canvas is unavailable"));
+        ctx.scale(scale, scale);
+        ctx.translate(-box.x, -box.y);
+        for (const stroke of strokes) {
+            ctx.fillStyle = INK[stroke.color].export;
+            ctx.fill(new Path2D(strokePath(stroke)));
+        }
+        canvas.toBlob(blob => blob ? resolve(blob) : reject(new Error("Export failed")), "image/png");
+    });
+}
+function download(blob, name) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = name;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+const { spring, duration, ease, blur } = motionTokens;
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+export function SignaturePad({ signer, hint = "Sign here", defaultColor = "black", defaultWidth = "medium", onChange, fileName = "signature", label = "Signature pad", className }) {
+    const uid = useId().replace(/[^a-zA-Z0-9-]/g, "");
+    const reduced = useReducedFlag();
+    const [history, setHistory] = useState({ past: [], present: [], future: [], fresh: null });
+    const [color, setColor] = useState(defaultColor);
+    const [width, setWidth] = useState(defaultWidth);
+    const [drawing, setDrawing] = useState(false);
+    const [wiping, setWiping] = useState(false);
+    const [replay, setReplay] = useState(null);
+    const [saved, setSaved] = useState(null);
+    const [status, setStatus] = useState("");
+    const padRef = useRef(null);
+    const inkRef = useRef(null);
+    const liveRef = useRef(null);
+    const live = useRef(null);
+    const replayFrame = useRef(0);
+    const savedTimer = useRef(0);
+    const wipeAnimation = useRef(null);
+    const counter = useRef(0);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => { onChangeRef.current = onChange; });
+    const strokes = history.present;
+    const empty = strokes.length === 0;
+    const replaying = replay !== null;
+    useEffect(() => { onChangeRef.current?.(strokes); }, [strokes]);
+    useEffect(() => () => { cancelAnimationFrame(replayFrame.current); window.clearTimeout(savedTimer.current); }, []);
+    const commit = useCallback((next, fresh = null) => {
+        setHistory(current => ({ past: [...current.past, current.present].slice(-60), present: next, future: [], fresh }));
+    }, []);
+    const stopReplay = useCallback(() => { cancelAnimationFrame(replayFrame.current); setReplay(null); }, []);
+    /** A wipe in flight completes at once, so whatever comes next starts from a clear pad. */
+    const settleWipe = useCallback(() => { wipeAnimation.current?.complete(); }, []);
+    function toPad(event) {
+        const box = padRef.current.getBoundingClientRect();
+        return { x: (event.clientX - box.left) / box.width * PAD_WIDTH, y: (event.clientY - box.top) / box.height * PAD_HEIGHT };
+    }
+    function onPointerDown(event) {
+        if (live.current || (event.pointerType === "mouse" && event.button !== 0))
+            return;
+        event.preventDefault();
+        settleWipe();
+        if (replaying)
+            stopReplay();
+        padRef.current?.focus({ preventScroll: true });
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const { x, y } = toPad(event);
+        const now = event.nativeEvent.timeStamp;
+        counter.current += 1;
+        const pen = event.pointerType === "pen" && event.pressure > 0;
+        live.current = { id: event.pointerId, stamp: event.nativeEvent.timeStamp, stroke: { id: `${uid}-${counter.current}`, color, width, at: now, points: [{ x, y, p: pen ? event.pressure : -1, t: 0 }] } };
+        setDrawing(true);
+        paintLive();
+    }
+    function onPointerMove(event) {
+        const current = live.current;
+        if (!current || current.id !== event.pointerId)
+            return;
+        const samples = typeof event.nativeEvent.getCoalescedEvents === "function" ? event.nativeEvent.getCoalescedEvents() : [];
+        const list = samples.length ? samples : [event.nativeEvent];
+        for (const sample of list) {
+            const { x, y } = toPad(sample);
+            const pen = sample.pointerType === "pen" && sample.pressure > 0;
+            current.stroke.points.push({ x, y, p: pen ? sample.pressure : -1, t: Math.max(current.stroke.points[current.stroke.points.length - 1].t, sample.timeStamp - current.stamp) });
+        }
+        paintLive();
+    }
+    function onPointerUp(event) {
+        const current = live.current;
+        if (!current || current.id !== event.pointerId)
+            return;
+        live.current = null;
+        commit([...strokes, current.stroke], current.stroke.id);
+        liveRef.current?.setAttribute("d", "");
+        setDrawing(false);
+        setStatus(`Stroke added. ${strokes.length + 1} in the signature.`);
+    }
+    function paintLive() {
+        const current = live.current;
+        if (!current || !liveRef.current)
+            return;
+        liveRef.current.setAttribute("d", outlineToPath(getStrokeOutline(current.stroke.points, strokeOptions(current.stroke, false))));
+    }
+    function undo() {
+        if (!history.past.length || live.current)
+            return;
+        settleWipe();
+        stopReplay();
+        setHistory(current => current.past.length ? { past: current.past.slice(0, -1), present: current.past[current.past.length - 1], future: [current.present, ...current.future], fresh: null } : current);
+        setStatus("Undone");
+    }
+    function redo() {
+        if (!history.future.length || live.current)
+            return;
+        settleWipe();
+        stopReplay();
+        setHistory(current => current.future.length ? { past: [...current.past, current.present], present: current.future[0], future: current.future.slice(1), fresh: null } : current);
+        setStatus("Redone");
+    }
+    function clear() {
+        if (empty || wiping || live.current)
+            return;
+        stopReplay();
+        const node = inkRef.current;
+        const finish = () => {
+            wipeAnimation.current = null;
+            commit([]);
+            setWiping(false);
+            setStatus("Signature cleared. Undo brings it back.");
+            // Lift the clip only once the wiped strokes have left, so they never flash back for a frame.
+            if (node)
+                requestAnimationFrame(() => requestAnimationFrame(() => { node.style.clipPath = ""; }));
+        };
+        if (!node || reduced) {
+            finish();
+            return;
+        }
+        setWiping(true);
+        // The ink is cut away behind a squeegee edge that sweeps across the pad; the edge itself is drawn by the sweep element.
+        const controls = animate(node, { clipPath: ["inset(0% 0% 0% 0%)", "inset(0% 0% 0% 100%)"] }, { duration: .56, ease: [...ease.inOut] });
+        wipeAnimation.current = { stop: () => controls.stop(), complete: () => { controls.complete(); } };
+        controls.then(finish);
+    }
+    function toggleReplay() {
+        if (replaying) {
+            stopReplay();
+            setStatus("Replay stopped");
+            return;
+        }
+        if (empty || live.current)
+            return;
+        settleWipe();
+        // Build a timeline: each stroke keeps its own rhythm, and pauses between strokes are capped so the replay never stalls.
+        const offsets = [];
+        let cursor = 0;
+        strokes.forEach((stroke, index) => {
+            if (index > 0) {
+                const previous = strokes[index - 1];
+                const gap = stroke.at - (previous.at + previous.points[previous.points.length - 1].t);
+                cursor += Math.min(260, Math.max(90, gap));
+            }
+            offsets.push(cursor);
+            cursor += stroke.points[stroke.points.length - 1].t;
+        });
+        const speed = Math.max(1, cursor / 3200);
+        const total = cursor + 120;
+        const begin = performance.now();
+        const tick = (now) => {
+            const at = (now - begin) * speed;
+            if (at >= total) {
+                setReplay(null);
+                setStatus("Replay finished");
+                return;
+            }
+            setReplay({ at, offsets });
+            replayFrame.current = requestAnimationFrame(tick);
+        };
+        setReplay({ at: 0, offsets });
+        setStatus("Replaying signature");
+        replayFrame.current = requestAnimationFrame(tick);
+    }
+    async function save(kind) {
+        if (empty)
+            return;
+        window.clearTimeout(savedTimer.current);
+        try {
+            const blob = kind === "svg" ? new Blob([signatureToSvg(strokes)], { type: "image/svg+xml" }) : await signatureToPng(strokes);
+            download(blob, `${fileName}.${kind}`);
+            setSaved(kind);
+            setStatus(`Saved ${fileName}.${kind}`);
+        }
+        catch {
+            setSaved("failed");
+            setStatus("Export failed. Try again.");
+        }
+        savedTimer.current = window.setTimeout(() => setSaved(null), 1800);
+    }
+    function onKeyDown(event) {
+        const mod = event.metaKey || event.ctrlKey;
+        const key = event.key.toLowerCase();
+        if (mod && key === "z") {
+            event.preventDefault();
+            if (event.shiftKey)
+                redo();
+            else
+                undo();
+        }
+        else if (mod && key === "y") {
+            event.preventDefault();
+            redo();
+        }
+        else if (!mod && (event.key === "Delete" || event.key === "Backspace") && event.currentTarget === event.target) {
+            event.preventDefault();
+            clear();
+        }
+        else if (event.key === "Escape" && replaying) {
+            stopReplay();
+        }
+    }
+    // During replay each stroke shows only the part drawn so far, and the nib rides its newest point.
+    let nib = null, nibColor = color;
+    const visible = [];
+    for (let index = 0; index < strokes.length; index++) {
+        const stroke = strokes[index];
+        if (replay === null) {
+            visible.push({ stroke, d: null });
+            continue;
+        }
+        const local = replay.at - (replay.offsets[index] ?? 0);
+        const lastT = stroke.points[stroke.points.length - 1].t;
+        if (local < 0) {
+            visible.push({ stroke, d: "" });
+            continue;
+        }
+        if (local >= lastT) {
+            visible.push({ stroke, d: null });
+            continue;
+        }
+        nib = stroke.points.findLast(point => point.t <= local) ?? stroke.points[0];
+        nibColor = stroke.color;
+        visible.push({ stroke, d: strokePath(stroke, local) });
+    }
+    const showHint = empty && !drawing && !wiping;
+    const hintHidden = reduced ? { opacity: 0 } : { opacity: 0, y: 6, scale: .97, filter: `blur(${blur.soft}px)` };
+    const t = reduced ? { duration: duration.instant } : spring.snappy;
+    return _jsxs("div", { className: [styles.root, className].filter(Boolean).join(" "), "data-ink": color, children: [_jsxs("div", { ref: padRef, className: styles.pad, tabIndex: 0, role: "img", "aria-roledescription": "signature pad", "aria-label": `${label}. ${empty ? "Empty." : `${strokes.length} ${strokes.length === 1 ? "stroke" : "strokes"}.`} Draw with a pointer, pen, or finger.`, "aria-describedby": `${uid}-keys`, "data-drawing": drawing ? "" : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, children: [_jsxs("div", { className: styles.guide, "aria-hidden": "true", children: [_jsx(X, { className: styles.mark, size: 14, strokeWidth: 1.75 }), _jsx("span", { className: styles.baseline }), signer && _jsx("span", { className: styles.signer, children: signer }), _jsx(AnimatePresence, { initial: false, children: showHint && _jsx(motion.span, { className: styles.hint, initial: hintHidden, animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }, exit: { ...hintHidden, transition: { duration: duration.fast, ease: [...ease.standard] } }, transition: reduced ? { duration: duration.instant } : { duration: duration.standard, ease: [...ease.enter] }, children: hint }, "hint") })] }), _jsx("div", { ref: inkRef, className: styles.ink, children: _jsxs("svg", { viewBox: `0 0 ${PAD_WIDTH} ${PAD_HEIGHT}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx(AnimatePresence, { initial: false, children: visible.map(({ stroke, d }) => _jsx(motion.path, { className: styles.stroke, "data-color": stroke.color, d: d ?? strokePath(stroke), initial: history.fresh === stroke.id ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: wiping ? 0 : duration.standard, ease: [...ease.standard] } }, transition: { duration: duration.standard, ease: [...ease.standard] } }, stroke.id)) }), _jsx("path", { ref: liveRef, className: styles.stroke, "data-color": color }), nib && _jsx("circle", { className: styles.nib, "data-color": nibColor, cx: nib.x, cy: nib.y, r: WIDTHS[width].size * .9 })] }) }), wiping && _jsx(motion.span, { className: styles.sweep, "aria-hidden": "true", initial: { x: "0%", opacity: 0 }, animate: { x: "100%", opacity: [0, 1, 1, 0] }, transition: { duration: .56, ease: [...ease.inOut], opacity: { duration: .56, times: [0, .12, .85, 1] } } })] }), _jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.group, children: [_jsx(Choice, { label: "Ink color", options: COLORS, value: color, onChange: next => { setColor(next); setStatus(`${INK[next].label} selected`); }, layoutId: `${uid}-color`, reduced: reduced, render: option => _jsx("span", { className: styles.swatch, "data-color": option }), name: option => INK[option].label }), _jsx("span", { className: styles.divider, "aria-hidden": "true" }), _jsx(Choice, { label: "Stroke width", options: SIZES, value: width, onChange: next => { setWidth(next); setStatus(`${WIDTHS[next].label} nib selected`); }, layoutId: `${uid}-width`, reduced: reduced, render: option => _jsx("span", { className: styles.weight, style: { width: WIDTHS[option].size + 2, height: WIDTHS[option].size + 2 } }), name: option => WIDTHS[option].label })] }), _jsxs("div", { className: styles.group, children: [_jsx(IconButton, { label: "Undo", onClick: undo, disabled: !history.past.length || wiping, children: _jsx(Undo2, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Redo", onClick: redo, disabled: !history.future.length || wiping, children: _jsx(Redo2, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx(IconButton, { label: replaying ? "Stop replay" : "Replay signature", onClick: toggleReplay, disabled: empty || wiping, pressed: replaying, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.swap, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6 }, transition: t, children: replaying ? _jsx(Square, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }) : _jsx(Play, { size: 17, strokeWidth: 1.75, "aria-hidden": "true" }) }, replaying ? "stop" : "play") }) }), _jsx(IconButton, { label: "Clear signature", onClick: clear, disabled: empty || wiping, children: _jsx(Eraser, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }) })] })] }), _jsxs("div", { className: styles.exports, children: [_jsx("span", { className: styles.exportLabel, children: "Save as" }), ["png", "svg"].map(kind => _jsx("button", { type: "button", className: styles.export, onClick: () => save(kind), disabled: empty, "aria-label": `Download ${kind.toUpperCase()}`, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.exportContent, initial: { opacity: 0, y: reduced ? 0 : 4, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, y: reduced ? 0 : -4, transition: { duration: duration.instant } }, transition: reduced ? { duration: duration.instant } : { duration: duration.fast, ease: [...ease.enter] }, children: saved === kind ? _jsxs(_Fragment, { children: [_jsx(Check, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), "Saved"] }) : _jsxs(_Fragment, { children: [_jsx(Download, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), kind.toUpperCase()] }) }, saved === kind ? "done" : saved === "failed" ? "failed" : "idle") }) }, kind))] }), _jsx("p", { id: `${uid}-keys`, className: styles.srOnly, children: "Press Control or Command Z to undo, add Shift to redo, and Delete to clear." }), _jsx("p", { className: styles.srOnly, role: "status", "aria-live": "polite", children: status })] });
+}
+function IconButton({ label, onClick, disabled, pressed, children }) {
+    return _jsx("button", { type: "button", className: styles.iconButton, "aria-label": label, title: label, onClick: onClick, disabled: disabled, "aria-pressed": pressed, children: children });
+}
+/** A compact radio group with a highlight that glides to the chosen option. Arrow keys move the choice. */
+function Choice({ label, options, value, onChange, render, name, layoutId, reduced }) {
+    const refs = useRef([]);
+    function onKeyDown(event) {
+        const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+        if (!step)
+            return;
+        event.preventDefault();
+        const index = (options.indexOf(value) + step + options.length) % options.length;
+        onChange(options[index]);
+        refs.current[index]?.focus();
+    }
+    return _jsx("div", { className: styles.choice, role: "radiogroup", "aria-label": label, onKeyDown: onKeyDown, children: options.map((option, index) => _jsxs("button", { ref: node => { refs.current[index] = node; }, type: "button", role: "radio", "aria-checked": option === value, "aria-label": name(option), title: name(option), tabIndex: option === value ? 0 : -1, className: styles.option, onClick: () => onChange(option), children: [option === value && _jsx(motion.span, { layoutId: layoutId, className: styles.selected, transition: reduced ? { duration: 0 } : spring.morph }), render(option)] }, option)) });
+}
+export default SignaturePad;

package/components/signature-pad/signature-pad.module.css

@@ -0,0 +1,84 @@
+.root {
+  --ink-black: var(--foreground);
+  --ink-blue: oklch(46% .17 262);
+  --ink-violet: oklch(49% .2 292);
+  display: grid; gap: 10px; width: 100%; min-width: 0; font-family: var(--font-body); letter-spacing: var(--tracking-body);
+}
+:global(:root[data-theme="dark"]) .root { --ink-blue: oklch(76% .12 258); --ink-violet: oklch(77% .13 295); }
+
+/* The pad keeps the 600 by 260 ratio of its coordinate space, so strokes scale with it at every width. */
+.pad {
+  position: relative; aspect-ratio: 600 / 260; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape);
+  background: var(--surface); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; isolation: isolate;
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.pad[data-drawing] { border-color: var(--border-strong); }
+
+.guide { position: absolute; inset: 0; pointer-events: none; }
+.baseline { position: absolute; left: 7%; right: 7%; top: 72%; border-top: 1.5px dashed var(--border-strong); }
+.mark { position: absolute; left: 7%; top: 72%; color: var(--text-muted); translate: 0 calc(-100% - 6px); }
+.signer { position: absolute; left: 7%; top: calc(72% + 8px); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint {
+  position: absolute; left: 50%; top: 72%; translate: -50% calc(-100% - 8px); color: var(--text-muted);
+  font-size: var(--text-lg); line-height: var(--leading-body); white-space: nowrap;
+}
+
+.ink { position: absolute; inset: 0; pointer-events: none; }
+.ink svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.stroke { fill: var(--ink-black); }
+.stroke[data-color="blue"], .nib[data-color="blue"] { fill: var(--ink-blue); }
+.stroke[data-color="violet"], .nib[data-color="violet"] { fill: var(--ink-violet); }
+.nib { fill: var(--ink-black); opacity: .35; }
+
+/* The squeegee edge that clears the ink as it crosses the pad. */
+.sweep { position: absolute; inset: 0; pointer-events: none; }
+.sweep::before {
+  content: ""; position: absolute; top: 8%; bottom: 8%; left: -1px; width: 2px; border-radius: var(--radius-full); corner-shape: round;
+  background: var(--foreground); opacity: .5;
+}
+.sweep::after {
+  content: ""; position: absolute; top: 0; bottom: 0; left: -28px; width: 28px;
+  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--foreground) 5%, transparent));
+}
+
+.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.group { display: flex; align-items: center; gap: 2px; }
+.divider { width: 1px; height: 20px; margin: 0 6px; background: var(--border); }
+
+.choice { display: flex; align-items: center; gap: 2px; }
+.option {
+  position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round;
+  background: transparent; color: var(--foreground); cursor: pointer; -webkit-tap-highlight-color: transparent;
+}
+.selected { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
+.swatch { position: relative; width: 16px; height: 16px; border-radius: 50%; corner-shape: round; background: var(--ink-black); }
+.swatch[data-color="blue"] { background: var(--ink-blue); }
+.swatch[data-color="violet"] { background: var(--ink-violet); }
+.weight { position: relative; border-radius: 50%; corner-shape: round; background: var(--foreground); }
+
+.iconButton {
+  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round;
+  background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.iconButton:active:not(:disabled) { transform: scale(.94); }
+.iconButton:disabled { color: var(--text-muted); opacity: .45; cursor: default; }
+.iconButton[aria-pressed="true"] { background: var(--surface-muted); color: var(--foreground); }
+.swap { display: grid; place-items: center; }
+
+.exports { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
+.exportLabel { margin-right: 4px; color: var(--text-muted); font-size: var(--text-xs); }
+.export {
+  display: grid; min-width: 76px; height: var(--control-height-sm); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.export:active:not(:disabled) { transform: scale(.97); }
+.export:disabled { color: var(--text-muted); cursor: default; }
+.exportContent { display: inline-flex; grid-area: 1 / 1; align-items: center; justify-content: center; gap: 6px; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (hover: hover) and (pointer: fine) {
+  .option:hover, .iconButton:hover:not(:disabled), .export:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }
+}

package/components/skeleton/skeleton.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface SkeletonProps {
+    label?: string;
+    lines?: number;
+    avatar?: boolean;
+    className?: string;
+    /** Content to reveal once loading finishes. With children, the placeholder crossfades into them. */
+    children?: ReactNode;
+    /** Keeps the placeholder visible while true. Only used together with children. */
+    loading?: boolean;
+}
+export declare function Skeleton({ label, lines, avatar, className, children, loading }: SkeletonProps): import("react").JSX.Element;
+export default Skeleton;

package/components/skeleton/skeleton.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./skeleton.module.css";
+/** Follows its content height. After `morphKey` changes, the height springs from the old size to the new one and then returns to auto, so passive reflows (a resize, a font swap) follow instantly. It clips only while moving, so focus rings stay visible at rest. */
+function HeightFrame({ className, busy, reduce, children }) {
+    const frame = useRef(null);
+    const content = useRef(null);
+    const height = useMotionValue("auto");
+    const changedAt = useRef(0);
+    useLayoutEffect(() => { changedAt.current = performance.now(); }, [busy]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last;
+        let controls;
+        const settle = () => { height.jump("auto"); if (frame.current)
+            Object.assign(frame.current.style, { overflow: "", height: "auto" }); };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            const current = height.get();
+            const from = typeof current === "number" ? current : last;
+            last = next;
+            controls?.stop();
+            if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120)
+                return settle();
+            // Pin the old height before this frame paints, then spring to the new one.
+            if (frame.current)
+                Object.assign(frame.current.style, { overflow: "hidden", height: `${from}px` });
+            controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [height, reduce]);
+    return _jsx(motion.div, { ref: frame, className: className, "aria-busy": busy, style: { height }, children: _jsx("div", { ref: content, className: styles.frame, children: children }) });
+}
+export function Skeleton({ label = "Loading content", lines = 3, avatar = false, className, children, loading = true }) {
+    const reduce = useReducedMotion();
+    const count = Math.min(Math.max(Math.floor(lines), 1), 6);
+    // Each block pulses a beat after the one above it, so the wait reads as one calm wave.
+    const placeholder = (extra) => _jsxs("div", { className: [styles.root, extra].filter(Boolean).join(" "), role: "status", "aria-label": label, "aria-busy": "true", children: [avatar && _jsx("span", { className: styles.avatar, "aria-hidden": "true" }), _jsx("span", { className: styles.lines, "aria-hidden": "true", children: Array.from({ length: count }, (_, index) => _jsx("span", { className: styles.line, style: { "--index": index + (avatar ? 1 : 0) } }, index)) })] });
+    if (children === undefined)
+        return placeholder(className);
+    return _jsx(HeightFrame, { className: className, busy: loading, reduce: reduce, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: loading
+                ? _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: reduce ? motionTokens.duration.instant : motionTokens.duration.fast, ease: [...motionTokens.ease.standard] }, exit: { opacity: 0, transition: { duration: reduce ? motionTokens.duration.instant : motionTokens.duration.fast } }, children: placeholder() }, "placeholder")
+                : _jsx(motion.div, { initial: reduce ? { opacity: 0 } : { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, transition: { duration: reduce ? motionTokens.duration.instant : motionTokens.duration.fast } }, transition: { duration: reduce ? motionTokens.duration.instant : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: children }, "content") }) });
+}
+export default Skeleton;

package/components/skeleton/skeleton.module.css

@@ -0,0 +1,11 @@
+.root { display: flex; width: 100%; min-width: 0; align-items: flex-start; gap: var(--space-inset); }
+/* A calm, finite pulse: each block dims a beat after the one above it, then rests after about 20 seconds. */
+.avatar, .line { display: block; flex: 0 0 auto; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--border-strong) 38%, var(--surface)); animation: skeleton-pulse 1.8s var(--ease-in-out) calc(var(--index, 0) * 90ms) 11 both; }
+.avatar { width: var(--control-height-md); height: var(--control-height-md); border-radius: var(--radius-full); corner-shape: round; }
+.lines { display: grid; flex: 1; gap: var(--space-group); padding-top: var(--space-tight); }
+.line { width: 100%; height: var(--space-group); border-radius: var(--radius-full); corner-shape: round; }
+.line:first-child { width: 48%; height: var(--space-inset); }
+.line:last-child { width: 72%; }
+.frame { position: relative; display: flow-root; }
+@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .52; } }
+@media (prefers-reduced-motion: reduce) { .avatar, .line { animation: none; } }