@slowclap/rezi-core 0.1.0-fork.1

package/dist/widgets/hooks/animation.js

@@ -0,0 +1,1108 @@
+import { resolveEasing } from "../../animation/easing.js";
+import { clamp01, interpolateNumber, normalizeDurationMs } from "../../animation/interpolate.js";
+import { isSpringAtRest, normalizeSpringConfig, stepSpring, } from "../../animation/spring.js";
+import { normalizeSequence, sampleSequence } from "../../animation/timeline.js";
+const ANIMATION_FRAME_MS = 16;
+const DEFAULT_TRANSITION_DURATION_MS = 160;
+const DEFAULT_PARALLEL_TARGET = 0;
+const activeAnimationFrameCallbacks = new Set();
+let animationFrameTimer = null;
+function nowMs() {
+    const perf = globalThis.performance;
+    const perfNow = perf?.now;
+    if (typeof perfNow === "function")
+        return perfNow.call(perf);
+    return Date.now();
+}
+function warnDev(message) {
+    const consoleRef = globalThis.console;
+    consoleRef?.warn?.(message);
+}
+function describeThrown(value) {
+    if (value instanceof Error) {
+        return `${value.name}: ${value.message}`;
+    }
+    try {
+        return String(value);
+    }
+    catch {
+        return "[unstringifiable thrown value]";
+    }
+}
+function safeInvokeAnimationCallback(callback) {
+    if (!callback)
+        return;
+    try {
+        callback();
+    }
+    catch (error) {
+        warnDev(`[rezi][animation] onComplete callback threw: ${describeThrown(error)}`);
+    }
+}
+function scheduleSharedAnimationFrame() {
+    if (animationFrameTimer !== null || activeAnimationFrameCallbacks.size === 0)
+        return;
+    animationFrameTimer = setTimeout(() => {
+        animationFrameTimer = null;
+        const callbacks = Array.from(activeAnimationFrameCallbacks);
+        for (const callback of callbacks) {
+            if (!activeAnimationFrameCallbacks.has(callback))
+                continue;
+            if (!callback()) {
+                activeAnimationFrameCallbacks.delete(callback);
+            }
+        }
+        if (activeAnimationFrameCallbacks.size > 0) {
+            scheduleSharedAnimationFrame();
+        }
+    }, ANIMATION_FRAME_MS);
+}
+function subscribeAnimationFrames(callback) {
+    activeAnimationFrameCallbacks.add(callback);
+    scheduleSharedAnimationFrame();
+    return () => {
+        activeAnimationFrameCallbacks.delete(callback);
+        if (activeAnimationFrameCallbacks.size === 0 && animationFrameTimer !== null) {
+            clearTimeout(animationFrameTimer);
+            animationFrameTimer = null;
+        }
+    };
+}
+function clearAnimationTimer(ref) {
+    const handle = ref.current;
+    if (handle === null)
+        return;
+    if (handle.kind === "timeout") {
+        clearTimeout(handle.timerId);
+    }
+    else {
+        handle.cancel();
+    }
+    ref.current = null;
+}
+function beginAnimationRun(ref) {
+    const nextRunId = ref.current.runId + 1;
+    ref.current.runId = nextRunId;
+    return nextRunId;
+}
+function invalidateAnimationRun(ref, runId) {
+    if (ref.current.runId === runId) {
+        ref.current.runId = runId + 1;
+    }
+}
+function scheduleAnimationCompletion(ref, runId, onCompleteRef) {
+    if (ref.current.completedRunId === runId)
+        return;
+    setTimeout(() => {
+        const state = ref.current;
+        if (state.runId !== runId || state.completedRunId === runId)
+            return;
+        state.completedRunId = runId;
+        safeInvokeAnimationCallback(onCompleteRef.current);
+    }, 0);
+}
+function runTimerLoop(options) {
+    const start = () => {
+        if (options.onStart && options.onStart() === false) {
+            options.timerRef.current = null;
+            return;
+        }
+        const tick = () => {
+            const keepRunning = options.onTick();
+            if (!keepRunning) {
+                options.timerRef.current = null;
+            }
+            return keepRunning;
+        };
+        if (options.sampleOnStart === true) {
+            if (!options.onTick()) {
+                options.timerRef.current = null;
+                return;
+            }
+        }
+        options.timerRef.current = Object.freeze({
+            kind: "frame",
+            cancel: subscribeAnimationFrames(tick),
+        });
+    };
+    if (options.delayMs > 0) {
+        options.timerRef.current = Object.freeze({
+            kind: "timeout",
+            timerId: setTimeout(() => {
+                options.timerRef.current = null;
+                start();
+            }, options.delayMs),
+        });
+        return;
+    }
+    start();
+}
+function normalizedDelayMs(value) {
+    return normalizeDurationMs(value, 0);
+}
+function normalizedTransitionDurationMs(value) {
+    return normalizeDurationMs(value, DEFAULT_TRANSITION_DURATION_MS);
+}
+function playbackControlEqual(a, b) {
+    const left = normalizePlayback(a);
+    const right = normalizePlayback(b);
+    return (left.paused === right.paused &&
+        left.reversed === right.reversed &&
+        Object.is(left.rate, right.rate));
+}
+function transitionMotionEqual(a, b) {
+    return (Object.is(a.target, b.target) &&
+        normalizedDelayMs(a.config?.delay) === normalizedDelayMs(b.config?.delay) &&
+        normalizedTransitionDurationMs(a.config?.duration) ===
+            normalizedTransitionDurationMs(b.config?.duration) &&
+        Object.is(a.config?.easing, b.config?.easing));
+}
+function sequenceKeyframeEqual(a, b) {
+    if (typeof a === "number" || typeof b === "number") {
+        return typeof a === "number" && typeof b === "number" && Object.is(a, b);
+    }
+    return (Object.is(a.value, b.value) &&
+        normalizedTransitionDurationMs(a.duration) === normalizedTransitionDurationMs(b.duration) &&
+        Object.is(a.easing, b.easing));
+}
+function sequenceInputsEqual(prevKeyframes, nextKeyframes, prevConfig, nextConfig) {
+    if (prevKeyframes.length !== nextKeyframes.length)
+        return false;
+    for (let i = 0; i < prevKeyframes.length; i++) {
+        const prevFrame = prevKeyframes[i];
+        const nextFrame = nextKeyframes[i];
+        if (prevFrame === undefined || nextFrame === undefined)
+            return false;
+        if (!sequenceKeyframeEqual(prevFrame, nextFrame))
+            return false;
+    }
+    return (normalizedTransitionDurationMs(prevConfig.duration) ===
+        normalizedTransitionDurationMs(nextConfig.duration) &&
+        Object.is(prevConfig.easing, nextConfig.easing) &&
+        (prevConfig.loop === true) === (nextConfig.loop === true));
+}
+function shallowItemsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (!Object.is(a[i], b[i]))
+            return false;
+    }
+    return true;
+}
+function transitionStepsEqual(prev, next) {
+    if (prev.length !== next.length)
+        return false;
+    for (let i = 0; i < prev.length; i++) {
+        const prevEntry = prev[i];
+        const nextEntry = next[i];
+        if (!prevEntry || !nextEntry)
+            return false;
+        if (!transitionMotionEqual(prevEntry, nextEntry))
+            return false;
+    }
+    return true;
+}
+function transitionPlaybackStepsEqual(prev, next) {
+    if (prev.length !== next.length)
+        return false;
+    for (let i = 0; i < prev.length; i++) {
+        const prevEntry = prev[i];
+        const nextEntry = next[i];
+        if (!prevEntry || !nextEntry)
+            return false;
+        if (!playbackControlEqual(prevEntry.config?.playback, nextEntry.config?.playback)) {
+            return false;
+        }
+    }
+    return true;
+}
+function zeroProgressEntries(count) {
+    return Object.freeze(new Array(count).fill(undefined).map(() => createParallelEntry(0, false)));
+}
+function zeroProgressVector(count) {
+    return Object.freeze(new Array(count).fill(0));
+}
+function normalizePlayback(playback) {
+    const rateRaw = playback?.rate;
+    const rate = typeof rateRaw === "number" && Number.isFinite(rateRaw) && rateRaw >= 0 ? rateRaw : 1;
+    return Object.freeze({
+        paused: playback?.paused === true || rate === 0,
+        reversed: playback?.reversed === true,
+        rate,
+    });
+}
+function createAnimatedValue(value, velocity, isAnimating) {
+    return Object.freeze({ value, velocity, isAnimating });
+}
+function createParallelEntry(value, isAnimating) {
+    return Object.freeze({ value, isAnimating });
+}
+function syncTransitionRunState(state, currentValue, target, durationMs, easing, delayMs, reversed) {
+    const shouldReset = !state.initialized ||
+        !Object.is(state.to, target) ||
+        state.durationMs !== durationMs ||
+        state.delayMs !== delayMs ||
+        state.easing !== easing;
+    if (shouldReset) {
+        state.initialized = true;
+        state.from = currentValue;
+        state.to = target;
+        state.durationMs = durationMs;
+        state.delayMs = delayMs;
+        state.easing = easing;
+        state.elapsedMs = reversed ? durationMs : 0;
+        state.pendingDelayMs = delayMs;
+        return;
+    }
+    state.durationMs = durationMs;
+    state.delayMs = delayMs;
+    state.easing = easing;
+    if (state.elapsedMs < 0)
+        state.elapsedMs = 0;
+    if (state.elapsedMs > state.durationMs)
+        state.elapsedMs = state.durationMs;
+    if (state.pendingDelayMs < 0)
+        state.pendingDelayMs = 0;
+}
+function currentTransitionValue(state) {
+    const progress = state.durationMs <= 0 ? 1 : clamp01(state.elapsedMs / state.durationMs);
+    return interpolateNumber(state.from, state.to, state.easing(progress));
+}
+function transitionFinalValue(state, reversed) {
+    return reversed ? state.from : state.to;
+}
+function stepTransitionRunState(state, deltaMs, reversed) {
+    let remainingDeltaMs = deltaMs;
+    if (state.pendingDelayMs > 0) {
+        if (remainingDeltaMs < state.pendingDelayMs) {
+            state.pendingDelayMs -= remainingDeltaMs;
+            return { done: false, value: state.from, waiting: true };
+        }
+        remainingDeltaMs -= state.pendingDelayMs;
+        state.pendingDelayMs = 0;
+    }
+    state.elapsedMs += remainingDeltaMs * (reversed ? -1 : 1);
+    if (state.elapsedMs < 0)
+        state.elapsedMs = 0;
+    if (state.elapsedMs > state.durationMs)
+        state.elapsedMs = state.durationMs;
+    return {
+        done: reversed ? state.elapsedMs <= 0 : state.elapsedMs >= state.durationMs,
+        value: currentTransitionValue(state),
+        waiting: false,
+    };
+}
+function parallelEntriesEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        const left = a[i];
+        const right = b[i];
+        if (!left || !right)
+            return false;
+        if (!Object.is(left.value, right.value) || left.isAnimating !== right.isAnimating) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Animate from the current numeric value to `value` over time.
+ *
+ * Returns the interpolated number for the current render.
+ */
+export function useTransition(ctx, value, config = {}) {
+    const [current, setCurrent] = ctx.useState(() => value);
+    const timerRef = ctx.useRef(null);
+    const currentRef = ctx.useRef(current);
+    const lastTickMsRef = ctx.useRef(null);
+    const completionRef = ctx.useRef({ runId: 0, completedRunId: 0 });
+    const onCompleteRef = ctx.useRef(config.onComplete);
+    onCompleteRef.current = config.onComplete;
+    currentRef.current = current;
+    const delayMs = normalizedDelayMs(config.delay);
+    const durationMs = normalizedTransitionDurationMs(config.duration);
+    const easing = ctx.useMemo(() => resolveEasing(config.easing), [config.easing]);
+    const playback = normalizePlayback(config.playback);
+    const transitionStateRef = ctx.useRef({
+        initialized: false,
+        from: value,
+        to: value,
+        elapsedMs: 0,
+        durationMs,
+        delayMs,
+        easing,
+        pendingDelayMs: 0,
+    });
+    ctx.useEffect(() => {
+        clearAnimationTimer(timerRef);
+        const runId = beginAnimationRun(completionRef);
+        const state = transitionStateRef.current;
+        const shouldReset = !state.initialized ||
+            !Object.is(state.to, value) ||
+            state.durationMs !== durationMs ||
+            state.delayMs !== delayMs ||
+            state.easing !== easing;
+        if (shouldReset) {
+            state.initialized = true;
+            state.from = currentRef.current;
+            state.to = value;
+            state.durationMs = durationMs;
+            state.delayMs = delayMs;
+            state.easing = easing;
+            state.elapsedMs = playback.reversed ? durationMs : 0;
+            state.pendingDelayMs = delayMs;
+        }
+        else {
+            state.durationMs = durationMs;
+            state.delayMs = delayMs;
+            state.easing = easing;
+            if (state.elapsedMs < 0)
+                state.elapsedMs = 0;
+            if (state.elapsedMs > state.durationMs)
+                state.elapsedMs = state.durationMs;
+        }
+        if (playback.paused) {
+            lastTickMsRef.current = null;
+            return () => {
+                invalidateAnimationRun(completionRef, runId);
+            };
+        }
+        if (!Number.isFinite(state.from) || !Number.isFinite(state.to)) {
+            const finalValue = playback.reversed ? state.from : state.to;
+            const changed = !Object.is(currentRef.current, finalValue);
+            setCurrent(finalValue);
+            state.elapsedMs = playback.reversed ? 0 : state.durationMs;
+            if (changed) {
+                scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+            }
+            return () => {
+                invalidateAnimationRun(completionRef, runId);
+            };
+        }
+        if (state.durationMs <= 0 || Object.is(state.from, state.to)) {
+            const finalValue = playback.reversed ? state.from : state.to;
+            const changed = !Object.is(currentRef.current, finalValue);
+            setCurrent(finalValue);
+            state.elapsedMs = playback.reversed ? 0 : state.durationMs;
+            if (changed) {
+                scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+            }
+            return () => {
+                invalidateAnimationRun(completionRef, runId);
+            };
+        }
+        const direction = playback.reversed ? -1 : 1;
+        const startDelayMs = state.pendingDelayMs;
+        state.pendingDelayMs = 0;
+        runTimerLoop({
+            timerRef,
+            delayMs: startDelayMs,
+            onStart: () => {
+                lastTickMsRef.current = nowMs() - ANIMATION_FRAME_MS;
+                return true;
+            },
+            sampleOnStart: true,
+            onTick: () => {
+                const stepNowMs = nowMs();
+                const prevMs = lastTickMsRef.current ?? stepNowMs;
+                lastTickMsRef.current = stepNowMs;
+                const deltaMs = Math.max(0, stepNowMs - prevMs) * playback.rate;
+                state.elapsedMs += deltaMs * direction;
+                if (state.elapsedMs < 0)
+                    state.elapsedMs = 0;
+                if (state.elapsedMs > state.durationMs)
+                    state.elapsedMs = state.durationMs;
+                const progress = state.durationMs <= 0 ? 1 : clamp01(state.elapsedMs / state.durationMs);
+                const next = interpolateNumber(state.from, state.to, state.easing(progress));
+                const done = playback.reversed ? state.elapsedMs <= 0 : state.elapsedMs >= state.durationMs;
+                if (done) {
+                    const finalValue = playback.reversed ? state.from : state.to;
+                    setCurrent(finalValue);
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    return false;
+                }
+                setCurrent(next);
+                return true;
+            },
+        });
+        return () => {
+            clearAnimationTimer(timerRef);
+            invalidateAnimationRun(completionRef, runId);
+        };
+    }, [delayMs, durationMs, easing, playback.paused, playback.rate, playback.reversed, value]);
+    return current;
+}
+/**
+ * Animate a numeric target with spring physics.
+ *
+ * Returns the spring-simulated value for the current render.
+ */
+export function useSpring(ctx, target, config = {}) {
+    const [current, setCurrent] = ctx.useState(() => target);
+    const timerRef = ctx.useRef(null);
+    const valueRef = ctx.useRef(current);
+    const velocityRef = ctx.useRef(0);
+    const targetRef = ctx.useRef(target);
+    const lastStepMsRef = ctx.useRef(null);
+    const completionRef = ctx.useRef({ runId: 0, completedRunId: 0 });
+    const onCompleteRef = ctx.useRef(config.onComplete);
+    onCompleteRef.current = config.onComplete;
+    valueRef.current = current;
+    targetRef.current = target;
+    const delayMs = normalizedDelayMs(config.delay);
+    const springConfig = ctx.useMemo(() => normalizeSpringConfig(config), [
+        config.stiffness,
+        config.damping,
+        config.mass,
+        config.restDelta,
+        config.restSpeed,
+        config.maxDeltaMs,
+    ]);
+    ctx.useEffect(() => {
+        clearAnimationTimer(timerRef);
+        const runId = beginAnimationRun(completionRef);
+        lastStepMsRef.current = null;
+        runTimerLoop({
+            timerRef,
+            delayMs,
+            onStart: () => {
+                lastStepMsRef.current = nowMs();
+                if (!Number.isFinite(targetRef.current) || !Number.isFinite(valueRef.current)) {
+                    velocityRef.current = 0;
+                    const changed = !Object.is(valueRef.current, targetRef.current);
+                    setCurrent(targetRef.current);
+                    if (changed) {
+                        scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    }
+                    return false;
+                }
+                if (isSpringAtRest(valueRef.current, targetRef.current, velocityRef.current, springConfig)) {
+                    velocityRef.current = 0;
+                    const changed = !Object.is(valueRef.current, targetRef.current);
+                    if (changed) {
+                        setCurrent(targetRef.current);
+                        scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    }
+                    return false;
+                }
+                return true;
+            },
+            onTick: () => {
+                const stepNowMs = nowMs();
+                const prevMs = lastStepMsRef.current ?? stepNowMs;
+                lastStepMsRef.current = stepNowMs;
+                const dtMs = Math.max(1, Math.min(springConfig.maxDeltaMs, stepNowMs - prevMs));
+                const step = stepSpring({ value: valueRef.current, velocity: velocityRef.current }, targetRef.current, dtMs / 1000, springConfig);
+                velocityRef.current = step.velocity;
+                if (step.done) {
+                    setCurrent(step.value);
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    return false;
+                }
+                setCurrent(step.value);
+                return true;
+            },
+        });
+        return () => {
+            clearAnimationTimer(timerRef);
+            invalidateAnimationRun(completionRef, runId);
+        };
+    }, [delayMs, springConfig, target]);
+    return current;
+}
+/**
+ * Run a keyframe sequence and return the current interpolated value.
+ */
+export function useSequence(ctx, keyframes, config = {}) {
+    const timerRef = ctx.useRef(null);
+    const lastStepMsRef = ctx.useRef(null);
+    const completionRef = ctx.useRef({ runId: 0, completedRunId: 0 });
+    const onCompleteRef = ctx.useRef(config.onComplete);
+    onCompleteRef.current = config.onComplete;
+    const playback = normalizePlayback(config.playback);
+    const sequenceInputRef = ctx.useRef(null);
+    const sequenceVersionRef = ctx.useRef(0);
+    const nextSequenceInput = Object.freeze({
+        keyframes,
+        duration: config.duration,
+        easing: config.easing,
+        loop: config.loop === true,
+    });
+    if (sequenceInputRef.current === null ||
+        !sequenceInputsEqual(sequenceInputRef.current.keyframes, nextSequenceInput.keyframes, sequenceInputRef.current, nextSequenceInput)) {
+        sequenceInputRef.current = nextSequenceInput;
+        sequenceVersionRef.current += 1;
+    }
+    const sequenceVersion = sequenceVersionRef.current;
+    const sequenceInput = sequenceInputRef.current ?? nextSequenceInput;
+    const sequence = ctx.useMemo(() => normalizeSequence(sequenceInput.keyframes, {
+        ...(sequenceInput.duration === undefined ? {} : { duration: sequenceInput.duration }),
+        ...(sequenceInput.easing === undefined ? {} : { easing: sequenceInput.easing }),
+    }), [sequenceVersion]);
+    const sequenceVersionAppliedRef = ctx.useRef(sequenceVersion);
+    const sequenceElapsedMsRef = ctx.useRef(playback.reversed && config.loop !== true ? sequence.totalDurationMs : 0);
+    if (sequenceVersionAppliedRef.current !== sequenceVersion) {
+        sequenceVersionAppliedRef.current = sequenceVersion;
+        sequenceElapsedMsRef.current =
+            playback.reversed && config.loop !== true ? sequence.totalDurationMs : 0;
+    }
+    const [current, setCurrent] = ctx.useState(() => sequence.initialValue);
+    ctx.useEffect(() => {
+        clearAnimationTimer(timerRef);
+        const runId = beginAnimationRun(completionRef);
+        if (sequence.segments.length === 0) {
+            setCurrent(sequence.initialValue);
+            if (config.loop !== true) {
+                scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+            }
+            return () => {
+                invalidateAnimationRun(completionRef, runId);
+            };
+        }
+        if (playback.paused) {
+            lastStepMsRef.current = null;
+            return () => {
+                invalidateAnimationRun(completionRef, runId);
+            };
+        }
+        const loop = config.loop === true;
+        const direction = playback.reversed ? -1 : 1;
+        runTimerLoop({
+            timerRef,
+            delayMs: 0,
+            onStart: () => {
+                lastStepMsRef.current = nowMs() - ANIMATION_FRAME_MS;
+                return true;
+            },
+            sampleOnStart: true,
+            onTick: () => {
+                const stepNowMs = nowMs();
+                const prevMs = lastStepMsRef.current ?? stepNowMs;
+                lastStepMsRef.current = stepNowMs;
+                const deltaMs = Math.max(0, stepNowMs - prevMs) * playback.rate;
+                sequenceElapsedMsRef.current += deltaMs * direction;
+                if (loop) {
+                    const sample = sampleSequence(sequence, sequenceElapsedMsRef.current, true);
+                    setCurrent(sample.value);
+                    return true;
+                }
+                if (playback.reversed && sequenceElapsedMsRef.current <= 0) {
+                    sequenceElapsedMsRef.current = 0;
+                    setCurrent(sequence.initialValue);
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    return false;
+                }
+                if (!playback.reversed && sequenceElapsedMsRef.current >= sequence.totalDurationMs) {
+                    sequenceElapsedMsRef.current = sequence.totalDurationMs;
+                    setCurrent(sequence.finalValue);
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    return false;
+                }
+                const sample = sampleSequence(sequence, sequenceElapsedMsRef.current, false);
+                setCurrent(sample.value);
+                return true;
+            },
+        });
+        return () => {
+            clearAnimationTimer(timerRef);
+            invalidateAnimationRun(completionRef, runId);
+        };
+    }, [config.loop, playback.paused, playback.rate, playback.reversed, sequence, sequenceVersion]);
+    return current;
+}
+function arraysShallowEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (!Object.is(a[i], b[i]))
+            return false;
+    }
+    return true;
+}
+/**
+ * Animate item entrances with staggered delays.
+ *
+ * Returns eased progress for each item in [0..1].
+ */
+export function useStagger(ctx, items, config = {}) {
+    const timerRef = ctx.useRef(null);
+    const completionRef = ctx.useRef({ runId: 0, completedRunId: 0 });
+    const onCompleteRef = ctx.useRef(config.onComplete);
+    onCompleteRef.current = config.onComplete;
+    const itemsRef = ctx.useRef(items);
+    const itemsVersionRef = ctx.useRef(0);
+    if (!shallowItemsEqual(itemsRef.current, items)) {
+        itemsRef.current = items;
+        itemsVersionRef.current += 1;
+    }
+    const count = items.length;
+    const itemsVersion = itemsVersionRef.current;
+    const delayMs = normalizeDurationMs(config.delay, 40);
+    const durationMs = normalizeDurationMs(config.duration, 180);
+    const easing = ctx.useMemo(() => resolveEasing(config.easing), [config.easing]);
+    const [progresses, setProgresses] = ctx.useState(() => zeroProgressVector(count));
+    ctx.useEffect(() => {
+        clearAnimationTimer(timerRef);
+        const runId = beginAnimationRun(completionRef);
+        if (count <= 0) {
+            setProgresses(Object.freeze([]));
+            return;
+        }
+        setProgresses(zeroProgressVector(count));
+        const startMs = nowMs();
+        const totalDurationMs = delayMs * Math.max(0, count - 1) + durationMs;
+        runTimerLoop({
+            timerRef,
+            delayMs: 0,
+            onTick: () => {
+                const elapsedMs = nowMs() - startMs;
+                const next = new Array(count);
+                for (let i = 0; i < count; i++) {
+                    const localElapsedMs = elapsedMs - delayMs * i;
+                    const localProgress = durationMs <= 0 ? 1 : clamp01(localElapsedMs / durationMs);
+                    next[i] = easing(localProgress);
+                }
+                const frozen = Object.freeze(next);
+                setProgresses((prev) => (arraysShallowEqual(prev, frozen) ? prev : frozen));
+                if (elapsedMs >= totalDurationMs) {
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    return false;
+                }
+                return true;
+            },
+        });
+        return () => {
+            clearAnimationTimer(timerRef);
+            invalidateAnimationRun(completionRef, runId);
+        };
+    }, [count, delayMs, durationMs, easing, itemsVersion]);
+    return progresses;
+}
+/**
+ * Compose transition or spring animation state for a numeric value.
+ */
+export function useAnimatedValue(ctx, target, config = { mode: "transition" }) {
+    const mode = config.mode;
+    const transitionConfig = config.transition ?? {};
+    const springConfigInput = config.spring ?? {};
+    const [animated, setAnimated] = ctx.useState(() => createAnimatedValue(target, 0, false));
+    const timerRef = ctx.useRef(null);
+    const valueRef = ctx.useRef(animated.value);
+    const velocityRef = ctx.useRef(animated.velocity);
+    const lastStepMsRef = ctx.useRef(null);
+    const completionRef = ctx.useRef({ runId: 0, completedRunId: 0 });
+    const transitionStateRef = ctx.useRef({
+        initialized: false,
+        from: target,
+        to: target,
+        elapsedMs: 0,
+        durationMs: normalizedTransitionDurationMs(transitionConfig.duration),
+        delayMs: normalizedDelayMs(transitionConfig.delay),
+        easing: resolveEasing(transitionConfig.easing),
+        pendingDelayMs: 0,
+    });
+    const previousModeRef = ctx.useRef(mode);
+    valueRef.current = animated.value;
+    velocityRef.current = animated.velocity;
+    if (previousModeRef.current !== mode) {
+        previousModeRef.current = mode;
+        transitionStateRef.current.initialized = false;
+        lastStepMsRef.current = null;
+    }
+    const onCompleteRef = ctx.useRef(mode === "spring" ? springConfigInput.onComplete : transitionConfig.onComplete);
+    onCompleteRef.current =
+        mode === "spring" ? springConfigInput.onComplete : transitionConfig.onComplete;
+    const delayMs = mode === "spring"
+        ? normalizedDelayMs(springConfigInput.delay)
+        : normalizedDelayMs(transitionConfig.delay);
+    const durationMs = normalizedTransitionDurationMs(transitionConfig.duration);
+    const easing = ctx.useMemo(() => resolveEasing(transitionConfig.easing), [transitionConfig.easing]);
+    const playback = normalizePlayback(transitionConfig.playback);
+    const springConfig = ctx.useMemo(() => normalizeSpringConfig(springConfigInput), [
+        springConfigInput.stiffness,
+        springConfigInput.damping,
+        springConfigInput.mass,
+        springConfigInput.restDelta,
+        springConfigInput.restSpeed,
+        springConfigInput.maxDeltaMs,
+    ]);
+    ctx.useEffect(() => {
+        clearAnimationTimer(timerRef);
+        const runId = beginAnimationRun(completionRef);
+        if (mode === "transition") {
+            const state = transitionStateRef.current;
+            const shouldReset = !state.initialized ||
+                !Object.is(state.to, target) ||
+                state.durationMs !== durationMs ||
+                state.delayMs !== delayMs ||
+                state.easing !== easing;
+            if (shouldReset) {
+                state.initialized = true;
+                state.from = valueRef.current;
+                state.to = target;
+                state.durationMs = durationMs;
+                state.delayMs = delayMs;
+                state.easing = easing;
+                state.elapsedMs = playback.reversed ? durationMs : 0;
+                state.pendingDelayMs = delayMs;
+            }
+            else {
+                state.durationMs = durationMs;
+                state.delayMs = delayMs;
+                state.easing = easing;
+                if (state.elapsedMs < 0)
+                    state.elapsedMs = 0;
+                if (state.elapsedMs > state.durationMs)
+                    state.elapsedMs = state.durationMs;
+            }
+            if (playback.paused) {
+                lastStepMsRef.current = null;
+                setAnimated(createAnimatedValue(valueRef.current, 0, false));
+                return () => {
+                    invalidateAnimationRun(completionRef, runId);
+                };
+            }
+            if (!Number.isFinite(state.from) || !Number.isFinite(state.to)) {
+                const finalValue = playback.reversed ? state.from : state.to;
+                setAnimated(createAnimatedValue(finalValue, 0, false));
+                state.elapsedMs = playback.reversed ? 0 : state.durationMs;
+                if (!Object.is(valueRef.current, finalValue)) {
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                }
+                return () => {
+                    invalidateAnimationRun(completionRef, runId);
+                };
+            }
+            if (state.durationMs <= 0 || Object.is(state.from, state.to)) {
+                const finalValue = playback.reversed ? state.from : state.to;
+                setAnimated(createAnimatedValue(finalValue, 0, false));
+                state.elapsedMs = playback.reversed ? 0 : state.durationMs;
+                if (!Object.is(valueRef.current, finalValue)) {
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                }
+                return () => {
+                    invalidateAnimationRun(completionRef, runId);
+                };
+            }
+            const direction = playback.reversed ? -1 : 1;
+            const startDelayMs = state.pendingDelayMs;
+            state.pendingDelayMs = 0;
+            runTimerLoop({
+                timerRef,
+                delayMs: startDelayMs,
+                onStart: () => {
+                    lastStepMsRef.current = nowMs() - ANIMATION_FRAME_MS;
+                    setAnimated(createAnimatedValue(valueRef.current, 0, true));
+                    return true;
+                },
+                sampleOnStart: true,
+                onTick: () => {
+                    const stepNowMs = nowMs();
+                    const prevMs = lastStepMsRef.current ?? stepNowMs;
+                    lastStepMsRef.current = stepNowMs;
+                    const deltaMs = Math.max(0, stepNowMs - prevMs) * playback.rate;
+                    state.elapsedMs += deltaMs * direction;
+                    if (state.elapsedMs < 0)
+                        state.elapsedMs = 0;
+                    if (state.elapsedMs > state.durationMs)
+                        state.elapsedMs = state.durationMs;
+                    const progress = clamp01(state.elapsedMs / state.durationMs);
+                    const nextValue = interpolateNumber(state.from, state.to, state.easing(progress));
+                    const done = playback.reversed
+                        ? state.elapsedMs <= 0
+                        : state.elapsedMs >= state.durationMs;
+                    if (done) {
+                        const finalValue = playback.reversed ? state.from : state.to;
+                        setAnimated(createAnimatedValue(finalValue, 0, false));
+                        scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                        return false;
+                    }
+                    setAnimated(createAnimatedValue(nextValue, 0, true));
+                    return true;
+                },
+            });
+            return () => {
+                clearAnimationTimer(timerRef);
+                invalidateAnimationRun(completionRef, runId);
+            };
+        }
+        transitionStateRef.current.initialized = false;
+        runTimerLoop({
+            timerRef,
+            delayMs,
+            onStart: () => {
+                lastStepMsRef.current = nowMs();
+                if (!Number.isFinite(target) || !Number.isFinite(valueRef.current)) {
+                    setAnimated(createAnimatedValue(target, 0, false));
+                    if (!Object.is(valueRef.current, target)) {
+                        scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    }
+                    return false;
+                }
+                if (isSpringAtRest(valueRef.current, target, velocityRef.current, springConfig)) {
+                    setAnimated(createAnimatedValue(target, 0, false));
+                    if (!Object.is(valueRef.current, target)) {
+                        scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    }
+                    return false;
+                }
+                setAnimated(createAnimatedValue(valueRef.current, velocityRef.current, true));
+                return true;
+            },
+            onTick: () => {
+                const stepNowMs = nowMs();
+                const prevMs = lastStepMsRef.current ?? stepNowMs;
+                lastStepMsRef.current = stepNowMs;
+                const dtMs = Math.max(1, Math.min(springConfig.maxDeltaMs, stepNowMs - prevMs));
+                const step = stepSpring({ value: valueRef.current, velocity: velocityRef.current }, target, dtMs / 1000, springConfig);
+                if (step.done) {
+                    setAnimated(createAnimatedValue(step.value, 0, false));
+                    scheduleAnimationCompletion(completionRef, runId, onCompleteRef);
+                    return false;
+                }
+                setAnimated(createAnimatedValue(step.value, step.velocity, true));
+                return true;
+            },
+        });
+        return () => {
+            clearAnimationTimer(timerRef);
+            invalidateAnimationRun(completionRef, runId);
+        };
+    }, [
+        delayMs,
+        durationMs,
+        easing,
+        mode,
+        playback.paused,
+        playback.rate,
+        playback.reversed,
+        springConfig,
+        target,
+    ]);
+    return animated;
+}
+/**
+ * Run multiple transitions in parallel.
+ */
+export function useParallel(ctx, animations) {
+    const animationsRef = ctx.useRef(animations);
+    const animationsVersionRef = ctx.useRef(0);
+    const playbackVersionRef = ctx.useRef(0);
+    if (!transitionStepsEqual(animationsRef.current, animations)) {
+        animationsRef.current = animations;
+        animationsVersionRef.current += 1;
+    }
+    else {
+        if (!transitionPlaybackStepsEqual(animationsRef.current, animations)) {
+            playbackVersionRef.current += 1;
+        }
+        animationsRef.current = animations;
+    }
+    const animationsVersion = animationsVersionRef.current;
+    const playbackVersion = playbackVersionRef.current;
+    const [entries, setEntries] = ctx.useState(() => zeroProgressEntries(animations.length));
+    const entriesRef = ctx.useRef(entries);
+    const timerRef = ctx.useRef(null);
+    const lastStepMsRef = ctx.useRef(null);
+    const trackStatesRef = ctx.useRef([]);
+    entriesRef.current = entries;
+    ctx.useEffect(() => {
+        clearAnimationTimer(timerRef);
+        lastStepMsRef.current = null;
+        if (animations.length === 0) {
+            trackStatesRef.current = [];
+            setEntries(Object.freeze([]));
+            return;
+        }
+        const nextShape = new Array(animations.length);
+        let shapeChanged = entriesRef.current.length !== animations.length;
+        const tracks = trackStatesRef.current;
+        tracks.length = animations.length;
+        for (let i = 0; i < animations.length; i++) {
+            const animation = animations[i];
+            if (!animation)
+                continue;
+            const currentEntry = entriesRef.current[i];
+            const currentValue = currentEntry?.value ?? DEFAULT_PARALLEL_TARGET;
+            const durationMs = normalizedTransitionDurationMs(animation.config?.duration);
+            const delayMs = normalizedDelayMs(animation.config?.delay);
+            const easingInput = animation.config?.easing;
+            const playback = normalizePlayback(animation.config?.playback);
+            const existing = tracks[i];
+            if (!existing) {
+                const easing = resolveEasing(easingInput);
+                tracks[i] = {
+                    initialized: false,
+                    from: currentValue,
+                    to: animation.target,
+                    elapsedMs: 0,
+                    durationMs,
+                    delayMs,
+                    easing,
+                    pendingDelayMs: 0,
+                    completed: false,
+                    easingInput,
+                };
+            }
+            const state = tracks[i];
+            if (!state)
+                continue;
+            const easing = Object.is(state.easingInput, easingInput)
+                ? state.easing
+                : resolveEasing(easingInput);
+            const before = {
+                initialized: state.initialized,
+                to: state.to,
+                durationMs: state.durationMs,
+                delayMs: state.delayMs,
+                easing: state.easing,
+            };
+            syncTransitionRunState(state, currentValue, animation.target, durationMs, easing, delayMs, playback.reversed);
+            const motionChanged = !before.initialized ||
+                !Object.is(before.to, state.to) ||
+                before.durationMs !== state.durationMs ||
+                before.delayMs !== state.delayMs ||
+                before.easing !== state.easing;
+            if (motionChanged) {
+                state.completed = false;
+            }
+            state.easingInput = easingInput;
+            const nextValue = motionChanged ? currentValue : (currentEntry?.value ?? currentValue);
+            nextShape[i] = createParallelEntry(nextValue, false);
+            if (!shapeChanged &&
+                (!currentEntry ||
+                    !Object.is(currentEntry.value, nextShape[i]?.value ?? DEFAULT_PARALLEL_TARGET) ||
+                    currentEntry.isAnimating !== false)) {
+                shapeChanged = true;
+            }
+        }
+        if (shapeChanged) {
+            const frozenShape = Object.freeze(nextShape);
+            setEntries((prev) => (parallelEntriesEqual(prev, frozenShape) ? prev : frozenShape));
+        }
+        runTimerLoop({
+            timerRef,
+            delayMs: 0,
+            onStart: () => {
+                lastStepMsRef.current = nowMs() - ANIMATION_FRAME_MS;
+                return true;
+            },
+            sampleOnStart: true,
+            onTick: () => {
+                const stepNowMs = nowMs();
+                const prevMs = lastStepMsRef.current ?? stepNowMs;
+                lastStepMsRef.current = stepNowMs;
+                let activeCount = 0;
+                const nextEntries = new Array(tracks.length);
+                for (let i = 0; i < tracks.length; i++) {
+                    const track = tracks[i];
+                    if (!track)
+                        continue;
+                    const animation = animationsRef.current[i];
+                    const playback = normalizePlayback(animation?.config?.playback);
+                    const currentValue = entriesRef.current[i]?.value ?? track.from;
+                    if (playback.paused) {
+                        nextEntries[i] = createParallelEntry(currentValue, false);
+                        continue;
+                    }
+                    if (!Number.isFinite(track.from) || !Number.isFinite(track.to)) {
+                        const finalValue = transitionFinalValue(track, playback.reversed);
+                        if (!track.completed && !Object.is(currentValue, finalValue)) {
+                            track.completed = true;
+                            safeInvokeAnimationCallback(animation?.config?.onComplete);
+                        }
+                        nextEntries[i] = createParallelEntry(finalValue, false);
+                        continue;
+                    }
+                    if (track.durationMs <= 0 || Object.is(track.from, track.to)) {
+                        const finalValue = transitionFinalValue(track, playback.reversed);
+                        if (!track.completed && !Object.is(currentValue, finalValue)) {
+                            track.completed = true;
+                            safeInvokeAnimationCallback(animation?.config?.onComplete);
+                        }
+                        nextEntries[i] = createParallelEntry(finalValue, false);
+                        continue;
+                    }
+                    const step = stepTransitionRunState(track, Math.max(0, stepNowMs - prevMs) * playback.rate, playback.reversed);
+                    if (step.waiting) {
+                        activeCount++;
+                        nextEntries[i] = createParallelEntry(currentValue, true);
+                        continue;
+                    }
+                    if (step.done) {
+                        const finalValue = transitionFinalValue(track, playback.reversed);
+                        if (!track.completed) {
+                            track.completed = true;
+                            safeInvokeAnimationCallback(animation?.config?.onComplete);
+                        }
+                        nextEntries[i] = createParallelEntry(finalValue, false);
+                        continue;
+                    }
+                    track.completed = false;
+                    activeCount++;
+                    nextEntries[i] = createParallelEntry(step.value, true);
+                }
+                const frozen = Object.freeze(nextEntries);
+                setEntries((prev) => (parallelEntriesEqual(prev, frozen) ? prev : frozen));
+                return activeCount > 0;
+            },
+        });
+        return () => {
+            clearAnimationTimer(timerRef);
+        };
+    }, [animationsVersion, playbackVersion, animations.length]);
+    return entries;
+}
+/**
+ * Run transition steps sequentially.
+ */
+export function useChain(ctx, steps) {
+    const stepsRef = ctx.useRef(steps);
+    const stepsVersionRef = ctx.useRef(0);
+    if (!transitionStepsEqual(stepsRef.current, steps)) {
+        stepsRef.current = steps;
+        stepsVersionRef.current += 1;
+    }
+    else {
+        stepsRef.current = steps;
+    }
+    const stepsVersion = stepsVersionRef.current;
+    const [currentStep, setCurrentStep] = ctx.useState(0);
+    const [currentTarget, setCurrentTarget] = ctx.useState(DEFAULT_PARALLEL_TARGET);
+    const currentStepRef = ctx.useRef(0);
+    currentStepRef.current = currentStep;
+    ctx.useEffect(() => {
+        currentStepRef.current = 0;
+        setCurrentStep(0);
+        if (stepsRef.current.length === 0) {
+            setCurrentTarget(DEFAULT_PARALLEL_TARGET);
+            return;
+        }
+        setCurrentTarget(stepsRef.current[0]?.target ?? DEFAULT_PARALLEL_TARGET);
+    }, [stepsVersion]);
+    const activeStepConfig = currentStep < steps.length ? steps[currentStep]?.config : undefined;
+    const value = useTransition(ctx, currentTarget, {
+        ...(activeStepConfig ?? {}),
+        onComplete: () => {
+            const completedStep = currentStepRef.current;
+            const completedConfig = stepsRef.current[completedStep]?.config;
+            if (!completedConfig && completedStep >= stepsRef.current.length)
+                return;
+            safeInvokeAnimationCallback(completedConfig?.onComplete);
+            const nextStep = completedStep + 1;
+            if (nextStep < stepsRef.current.length) {
+                currentStepRef.current = nextStep;
+                setCurrentStep(nextStep);
+                setCurrentTarget(stepsRef.current[nextStep]?.target ?? DEFAULT_PARALLEL_TARGET);
+                return;
+            }
+            currentStepRef.current = stepsRef.current.length;
+            setCurrentStep(stepsRef.current.length);
+        },
+    });
+    const isComplete = steps.length === 0 || currentStep >= steps.length;
+    return Object.freeze({ value, currentStep, isComplete });
+}
+//# sourceMappingURL=animation.js.map