flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/node_modules/motion-dom/dist/es/animation/JSAnimation.js

@@ -1,341 +0,0 @@
-import { time } from '../frameloop/sync-time.js';
-import { mix } from '../utils/mix/index.js';
-import { frameloopDriver } from './drivers/frame.js';
-import { inertia } from './generators/inertia.js';
-import { keyframes } from './generators/keyframes.js';
-import { calcGeneratorDuration } from './generators/utils/calc-duration.js';
-import { getFinalKeyframe } from './keyframes/get-final.js';
-import { replaceTransitionType } from './utils/replace-transition-type.js';
-import { WithPromise } from './utils/WithPromise.js';
-import { invariant } from '../../../../motion-utils/dist/es/errors.js';
-import { pipe } from '../../../../motion-utils/dist/es/pipe.js';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.js';
-import { clamp } from '../../../../motion-utils/dist/es/clamp.js';
-
-const percentToProgress = (percent) => percent / 100;
-class JSAnimation extends WithPromise {
-    constructor(options) {
-        super();
-        this.state = "idle";
-        this.startTime = null;
-        this.isStopped = false;
-        /**
-         * The current time of the animation.
-         */
-        this.currentTime = 0;
-        /**
-         * The time at which the animation was paused.
-         */
-        this.holdTime = null;
-        /**
-         * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
-         */
-        this.playbackSpeed = 1;
-        /**
-         * This method is bound to the instance to fix a pattern where
-         * animation.stop is returned as a reference from a useEffect.
-         */
-        this.stop = () => {
-            const { motionValue } = this.options;
-            if (motionValue && motionValue.updatedAt !== time.now()) {
-                this.tick(time.now());
-            }
-            this.isStopped = true;
-            if (this.state === "idle")
-                return;
-            this.teardown();
-            this.options.onStop?.();
-        };
-        this.options = options;
-        this.initAnimation();
-        this.play();
-        if (options.autoplay === false)
-            this.pause();
-    }
-    initAnimation() {
-        const { options } = this;
-        replaceTransitionType(options);
-        const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options;
-        let { keyframes: keyframes$1 } = options;
-        const generatorFactory = type || keyframes;
-        if (process.env.NODE_ENV !== "production" &&
-            generatorFactory !== keyframes) {
-            invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, "spring-two-frames");
-        }
-        if (generatorFactory !== keyframes &&
-            typeof keyframes$1[0] !== "number") {
-            this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
-            keyframes$1 = [0, 100];
-        }
-        const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
-        /**
-         * If we have a mirror repeat type we need to create a second generator that outputs the
-         * mirrored (not reversed) animation and later ping pong between the two generators.
-         */
-        if (repeatType === "mirror") {
-            this.mirroredGenerator = generatorFactory({
-                ...options,
-                keyframes: [...keyframes$1].reverse(),
-                velocity: -velocity,
-            });
-        }
-        /**
-         * If duration is undefined and we have repeat options,
-         * we need to calculate a duration from the generator.
-         *
-         * We set it to the generator itself to cache the duration.
-         * Any timeline resolver will need to have already precalculated
-         * the duration by this step.
-         */
-        if (generator.calculatedDuration === null) {
-            generator.calculatedDuration = calcGeneratorDuration(generator);
-        }
-        const { calculatedDuration } = generator;
-        this.calculatedDuration = calculatedDuration;
-        this.resolvedDuration = calculatedDuration + repeatDelay;
-        this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
-        this.generator = generator;
-    }
-    updateTime(timestamp) {
-        const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
-        // Update currentTime
-        if (this.holdTime !== null) {
-            this.currentTime = this.holdTime;
-        }
-        else {
-            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
-            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
-            // example.
-            this.currentTime = animationTime;
-        }
-    }
-    tick(timestamp, sample = false) {
-        const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this;
-        if (this.startTime === null)
-            return generator.next(0);
-        const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = this.options;
-        /**
-         * requestAnimationFrame timestamps can come through as lower than
-         * the startTime as set by performance.now(). Here we prevent this,
-         * though in the future it could be possible to make setting startTime
-         * a pending operation that gets resolved here.
-         */
-        if (this.speed > 0) {
-            this.startTime = Math.min(this.startTime, timestamp);
-        }
-        else if (this.speed < 0) {
-            this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
-        }
-        if (sample) {
-            this.currentTime = timestamp;
-        }
-        else {
-            this.updateTime(timestamp);
-        }
-        // Rebase on delay
-        const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);
-        const isInDelayPhase = this.playbackSpeed >= 0
-            ? timeWithoutDelay < 0
-            : timeWithoutDelay > totalDuration;
-        this.currentTime = Math.max(timeWithoutDelay, 0);
-        // If this animation has finished, set the current time  to the total duration.
-        if (this.state === "finished" && this.holdTime === null) {
-            this.currentTime = totalDuration;
-        }
-        let elapsed = this.currentTime;
-        let frameGenerator = generator;
-        if (repeat) {
-            /**
-             * Get the current progress (0-1) of the animation. If t is >
-             * than duration we'll get values like 2.5 (midway through the
-             * third iteration)
-             */
-            const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;
-            /**
-             * Get the current iteration (0 indexed). For instance the floor of
-             * 2.5 is 2.
-             */
-            let currentIteration = Math.floor(progress);
-            /**
-             * Get the current progress of the iteration by taking the remainder
-             * so 2.5 is 0.5 through iteration 2
-             */
-            let iterationProgress = progress % 1.0;
-            /**
-             * If iteration progress is 1 we count that as the end
-             * of the previous iteration.
-             */
-            if (!iterationProgress && progress >= 1) {
-                iterationProgress = 1;
-            }
-            iterationProgress === 1 && currentIteration--;
-            currentIteration = Math.min(currentIteration, repeat + 1);
-            /**
-             * Reverse progress if we're not running in "normal" direction
-             */
-            const isOddIteration = Boolean(currentIteration % 2);
-            if (isOddIteration) {
-                if (repeatType === "reverse") {
-                    iterationProgress = 1 - iterationProgress;
-                    if (repeatDelay) {
-                        iterationProgress -= repeatDelay / resolvedDuration;
-                    }
-                }
-                else if (repeatType === "mirror") {
-                    frameGenerator = mirroredGenerator;
-                }
-            }
-            elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
-        }
-        /**
-         * If we're in negative time, set state as the initial keyframe.
-         * This prevents delay: x, duration: 0 animations from finishing
-         * instantly.
-         */
-        const state = isInDelayPhase
-            ? { done: false, value: keyframes[0] }
-            : frameGenerator.next(elapsed);
-        if (mixKeyframes) {
-            state.value = mixKeyframes(state.value);
-        }
-        let { done } = state;
-        if (!isInDelayPhase && calculatedDuration !== null) {
-            done =
-                this.playbackSpeed >= 0
-                    ? this.currentTime >= totalDuration
-                    : this.currentTime <= 0;
-        }
-        const isAnimationFinished = this.holdTime === null &&
-            (this.state === "finished" || (this.state === "running" && done));
-        // TODO: The exception for inertia could be cleaner here
-        if (isAnimationFinished && type !== inertia) {
-            state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
-        }
-        if (onUpdate) {
-            onUpdate(state.value);
-        }
-        if (isAnimationFinished) {
-            this.finish();
-        }
-        return state;
-    }
-    /**
-     * Allows the returned animation to be awaited or promise-chained. Currently
-     * resolves when the animation finishes at all but in a future update could/should
-     * reject if its cancels.
-     */
-    then(resolve, reject) {
-        return this.finished.then(resolve, reject);
-    }
-    get duration() {
-        return millisecondsToSeconds(this.calculatedDuration);
-    }
-    get time() {
-        return millisecondsToSeconds(this.currentTime);
-    }
-    set time(newTime) {
-        newTime = secondsToMilliseconds(newTime);
-        this.currentTime = newTime;
-        if (this.startTime === null ||
-            this.holdTime !== null ||
-            this.playbackSpeed === 0) {
-            this.holdTime = newTime;
-        }
-        else if (this.driver) {
-            this.startTime = this.driver.now() - newTime / this.playbackSpeed;
-        }
-        this.driver?.start(false);
-    }
-    get speed() {
-        return this.playbackSpeed;
-    }
-    set speed(newSpeed) {
-        this.updateTime(time.now());
-        const hasChanged = this.playbackSpeed !== newSpeed;
-        this.playbackSpeed = newSpeed;
-        if (hasChanged) {
-            this.time = millisecondsToSeconds(this.currentTime);
-        }
-    }
-    play() {
-        if (this.isStopped)
-            return;
-        const { driver = frameloopDriver, startTime } = this.options;
-        if (!this.driver) {
-            this.driver = driver((timestamp) => this.tick(timestamp));
-        }
-        this.options.onPlay?.();
-        const now = this.driver.now();
-        if (this.state === "finished") {
-            this.updateFinished();
-            this.startTime = now;
-        }
-        else if (this.holdTime !== null) {
-            this.startTime = now - this.holdTime;
-        }
-        else if (!this.startTime) {
-            this.startTime = startTime ?? now;
-        }
-        if (this.state === "finished" && this.speed < 0) {
-            this.startTime += this.calculatedDuration;
-        }
-        this.holdTime = null;
-        /**
-         * Set playState to running only after we've used it in
-         * the previous logic.
-         */
-        this.state = "running";
-        this.driver.start();
-    }
-    pause() {
-        this.state = "paused";
-        this.updateTime(time.now());
-        this.holdTime = this.currentTime;
-    }
-    complete() {
-        if (this.state !== "running") {
-            this.play();
-        }
-        this.state = "finished";
-        this.holdTime = null;
-    }
-    finish() {
-        this.notifyFinished();
-        this.teardown();
-        this.state = "finished";
-        this.options.onComplete?.();
-    }
-    cancel() {
-        this.holdTime = null;
-        this.startTime = 0;
-        this.tick(0);
-        this.teardown();
-        this.options.onCancel?.();
-    }
-    teardown() {
-        this.state = "idle";
-        this.stopDriver();
-        this.startTime = this.holdTime = null;
-    }
-    stopDriver() {
-        if (!this.driver)
-            return;
-        this.driver.stop();
-        this.driver = undefined;
-    }
-    sample(sampleTime) {
-        this.startTime = 0;
-        return this.tick(sampleTime, true);
-    }
-    attachTimeline(timeline) {
-        if (this.options.allowFlatten) {
-            this.options.type = "keyframes";
-            this.options.ease = "linear";
-            this.initAnimation();
-        }
-        this.driver?.stop();
-        return timeline.observe(this);
-    }
-}
-
-export { JSAnimation };

package/dist/node_modules/motion-dom/dist/es/animation/NativeAnimation.js

@@ -1,158 +0,0 @@
-import { setStyle } from '../render/dom/style-set.js';
-import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.js';
-import { getFinalKeyframe } from './keyframes/get-final.js';
-import { WithPromise } from './utils/WithPromise.js';
-import { startWaapiAnimation } from './waapi/start-waapi-animation.js';
-import { applyGeneratorOptions } from './waapi/utils/apply-generator.js';
-import { invariant } from '../../../../motion-utils/dist/es/errors.js';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.js';
-import { noop } from '../../../../motion-utils/dist/es/noop.js';
-
-/**
- * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
- */
-class NativeAnimation extends WithPromise {
-    constructor(options) {
-        super();
-        this.finishedTime = null;
-        this.isStopped = false;
-        if (!options)
-            return;
-        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
-        this.isPseudoElement = Boolean(pseudoElement);
-        this.allowFlatten = allowFlatten;
-        this.options = options;
-        invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
-        const transition = applyGeneratorOptions(options);
-        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
-        if (transition.autoplay === false) {
-            this.animation.pause();
-        }
-        this.animation.onfinish = () => {
-            this.finishedTime = this.time;
-            if (!pseudoElement) {
-                const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
-                if (this.updateMotionValue) {
-                    this.updateMotionValue(keyframe);
-                }
-                else {
-                    /**
-                     * If we can, we want to commit the final style as set by the user,
-                     * rather than the computed keyframe value supplied by the animation.
-                     */
-                    setStyle(element, name, keyframe);
-                }
-                this.animation.cancel();
-            }
-            onComplete?.();
-            this.notifyFinished();
-        };
-    }
-    play() {
-        if (this.isStopped)
-            return;
-        this.animation.play();
-        if (this.state === "finished") {
-            this.updateFinished();
-        }
-    }
-    pause() {
-        this.animation.pause();
-    }
-    complete() {
-        this.animation.finish?.();
-    }
-    cancel() {
-        try {
-            this.animation.cancel();
-        }
-        catch (e) { }
-    }
-    stop() {
-        if (this.isStopped)
-            return;
-        this.isStopped = true;
-        const { state } = this;
-        if (state === "idle" || state === "finished") {
-            return;
-        }
-        if (this.updateMotionValue) {
-            this.updateMotionValue();
-        }
-        else {
-            this.commitStyles();
-        }
-        if (!this.isPseudoElement)
-            this.cancel();
-    }
-    /**
-     * WAAPI doesn't natively have any interruption capabilities.
-     *
-     * In this method, we commit styles back to the DOM before cancelling
-     * the animation.
-     *
-     * This is designed to be overridden by NativeAnimationExtended, which
-     * will create a renderless JS animation and sample it twice to calculate
-     * its current value, "previous" value, and therefore allow
-     * Motion to also correctly calculate velocity for any subsequent animation
-     * while deferring the commit until the next animation frame.
-     */
-    commitStyles() {
-        if (!this.isPseudoElement) {
-            this.animation.commitStyles?.();
-        }
-    }
-    get duration() {
-        const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
-        return millisecondsToSeconds(Number(duration));
-    }
-    get time() {
-        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
-    }
-    set time(newTime) {
-        this.finishedTime = null;
-        this.animation.currentTime = secondsToMilliseconds(newTime);
-    }
-    /**
-     * The playback speed of the animation.
-     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
-     */
-    get speed() {
-        return this.animation.playbackRate;
-    }
-    set speed(newSpeed) {
-        // Allow backwards playback after finishing
-        if (newSpeed < 0)
-            this.finishedTime = null;
-        this.animation.playbackRate = newSpeed;
-    }
-    get state() {
-        return this.finishedTime !== null
-            ? "finished"
-            : this.animation.playState;
-    }
-    get startTime() {
-        return Number(this.animation.startTime);
-    }
-    set startTime(newStartTime) {
-        this.animation.startTime = newStartTime;
-    }
-    /**
-     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
-     */
-    attachTimeline({ timeline, observe }) {
-        if (this.allowFlatten) {
-            this.animation.effect?.updateTiming({ easing: "linear" });
-        }
-        this.animation.onfinish = null;
-        if (timeline && supportsScrollTimeline()) {
-            this.animation.timeline = timeline;
-            return noop;
-        }
-        else {
-            return observe(this);
-        }
-    }
-}
-
-export { NativeAnimation };

package/dist/node_modules/motion-dom/dist/es/animation/NativeAnimationExtended.js

@@ -1,65 +0,0 @@
-import { JSAnimation } from './JSAnimation.js';
-import { NativeAnimation } from './NativeAnimation.js';
-import { replaceTransitionType } from './utils/replace-transition-type.js';
-import { replaceStringEasing } from './waapi/utils/unsupported-easing.js';
-import { secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.js';
-
-/**
- * 10ms is chosen here as it strikes a balance between smooth
- * results (more than one keyframe per frame at 60fps) and
- * keyframe quantity.
- */
-const sampleDelta = 10; //ms
-class NativeAnimationExtended extends NativeAnimation {
-    constructor(options) {
-        /**
-         * The base NativeAnimation function only supports a subset
-         * of Motion easings, and WAAPI also only supports some
-         * easing functions via string/cubic-bezier definitions.
-         *
-         * This function replaces those unsupported easing functions
-         * with a JS easing function. This will later get compiled
-         * to a linear() easing function.
-         */
-        replaceStringEasing(options);
-        /**
-         * Ensure we replace the transition type with a generator function
-         * before passing to WAAPI.
-         *
-         * TODO: Does this have a better home? It could be shared with
-         * JSAnimation.
-         */
-        replaceTransitionType(options);
-        super(options);
-        if (options.startTime) {
-            this.startTime = options.startTime;
-        }
-        this.options = options;
-    }
-    /**
-     * WAAPI doesn't natively have any interruption capabilities.
-     *
-     * Rather than read commited styles back out of the DOM, we can
-     * create a renderless JS animation and sample it twice to calculate
-     * its current value, "previous" value, and therefore allow
-     * Motion to calculate velocity for any subsequent animation.
-     */
-    updateMotionValue(value) {
-        const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
-        if (!motionValue)
-            return;
-        if (value !== undefined) {
-            motionValue.set(value);
-            return;
-        }
-        const sampleAnimation = new JSAnimation({
-            ...options,
-            autoplay: false,
-        });
-        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
-        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
-        sampleAnimation.stop();
-    }
-}
-
-export { NativeAnimationExtended };

package/dist/node_modules/motion-dom/dist/es/animation/drivers/frame.js

@@ -1,17 +0,0 @@
-import { time } from '../../frameloop/sync-time.js';
-import { frameData, cancelFrame, frame } from '../../frameloop/frame.js';
-
-const frameloopDriver = (update) => {
-    const passTimestamp = ({ timestamp }) => update(timestamp);
-    return {
-        start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),
-        stop: () => cancelFrame(passTimestamp),
-        /**
-         * If we're processing this frame we can use the
-         * framelocked timestamp to keep things in sync.
-         */
-        now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
-    };
-};
-
-export { frameloopDriver };

package/dist/node_modules/motion-dom/dist/es/animation/generators/inertia.js

@@ -1,87 +0,0 @@
-import { spring } from './spring/index.js';
-import { calcGeneratorVelocity } from './utils/velocity.js';
-
-function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
-    const origin = keyframes[0];
-    const state = {
-        done: false,
-        value: origin,
-    };
-    const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
-    const nearestBoundary = (v) => {
-        if (min === undefined)
-            return max;
-        if (max === undefined)
-            return min;
-        return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-    };
-    let amplitude = power * velocity;
-    const ideal = origin + amplitude;
-    const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
-    /**
-     * If the target has changed we need to re-calculate the amplitude, otherwise
-     * the animation will start from the wrong position.
-     */
-    if (target !== ideal)
-        amplitude = target - origin;
-    const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
-    const calcLatest = (t) => target + calcDelta(t);
-    const applyFriction = (t) => {
-        const delta = calcDelta(t);
-        const latest = calcLatest(t);
-        state.done = Math.abs(delta) <= restDelta;
-        state.value = state.done ? target : latest;
-    };
-    /**
-     * Ideally this would resolve for t in a stateless way, we could
-     * do that by always precalculating the animation but as we know
-     * this will be done anyway we can assume that spring will
-     * be discovered during that.
-     */
-    let timeReachedBoundary;
-    let spring$1;
-    const checkCatchBoundary = (t) => {
-        if (!isOutOfBounds(state.value))
-            return;
-        timeReachedBoundary = t;
-        spring$1 = spring({
-            keyframes: [state.value, nearestBoundary(state.value)],
-            velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
-            damping: bounceDamping,
-            stiffness: bounceStiffness,
-            restDelta,
-            restSpeed,
-        });
-    };
-    checkCatchBoundary(0);
-    return {
-        calculatedDuration: null,
-        next: (t) => {
-            /**
-             * We need to resolve the friction to figure out if we need a
-             * spring but we don't want to do this twice per frame. So here
-             * we flag if we updated for this frame and later if we did
-             * we can skip doing it again.
-             */
-            let hasUpdatedFrame = false;
-            if (!spring$1 && timeReachedBoundary === undefined) {
-                hasUpdatedFrame = true;
-                applyFriction(t);
-                checkCatchBoundary(t);
-            }
-            /**
-             * If we have a spring and the provided t is beyond the moment the friction
-             * animation crossed the min/max boundary, use the spring.
-             */
-            if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {
-                return spring$1.next(t - timeReachedBoundary);
-            }
-            else {
-                !hasUpdatedFrame && applyFriction(t);
-                return state;
-            }
-        },
-    };
-}
-
-export { inertia };