motion-dom - npm Package Compare versions

Comparing version 11.14.3 to 11.16.0

dist/cjs/index.js

@@ -5,2 +5,299 @@ 'use strict';
 
+var motionUtils = require('motion-utils');
+
+const supportsScrollTimeline = motionUtils.memo(() => window.ScrollTimeline !== undefined);
+
+class BaseGroupPlaybackControls {
+    constructor(animations) {
+        // Bound to accomodate common `return animation.stop` pattern
+        this.stop = () => this.runAll("stop");
+        this.animations = animations.filter(Boolean);
+    }
+    get finished() {
+        // Support for new finished Promise and legacy thennable API
+        return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+    }
+    /**
+     * TODO: Filter out cancelled or stopped animations before returning
+     */
+    getAll(propName) {
+        return this.animations[0][propName];
+    }
+    setAll(propName, newValue) {
+        for (let i = 0; i < this.animations.length; i++) {
+            this.animations[i][propName] = newValue;
+        }
+    }
+    attachTimeline(timeline, fallback) {
+        const subscriptions = this.animations.map((animation) => {
+            if (supportsScrollTimeline() && animation.attachTimeline) {
+                return animation.attachTimeline(timeline);
+            }
+            else {
+                return fallback(animation);
+            }
+        });
+        return () => {
+            subscriptions.forEach((cancel, i) => {
+                cancel && cancel();
+                this.animations[i].stop();
+            });
+        };
+    }
+    get time() {
+        return this.getAll("time");
+    }
+    set time(time) {
+        this.setAll("time", time);
+    }
+    get speed() {
+        return this.getAll("speed");
+    }
+    set speed(speed) {
+        this.setAll("speed", speed);
+    }
+    get startTime() {
+        return this.getAll("startTime");
+    }
+    get duration() {
+        let max = 0;
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration);
+        }
+        return max;
+    }
+    runAll(methodName) {
+        this.animations.forEach((controls) => controls[methodName]());
+    }
+    flatten() {
+        this.runAll("flatten");
+    }
+    play() {
+        this.runAll("play");
+    }
+    pause() {
+        this.runAll("pause");
+    }
+    cancel() {
+        this.runAll("cancel");
+    }
+    complete() {
+        this.runAll("complete");
+    }
+}
+
+/**
+ * TODO: This is a temporary class to support the legacy
+ * thennable API
+ */
+class GroupPlaybackControls extends BaseGroupPlaybackControls {
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
+    }
+}
+
+function getValueTransition(transition, key) {
+    return transition
+        ? transition[key] ||
+            transition["default"] ||
+            transition
+        : undefined;
+}
+
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxGeneratorDuration = 20000;
+function calcGeneratorDuration(generator) {
+    let duration = 0;
+    const timeStep = 50;
+    let state = generator.next(duration);
+    while (!state.done && duration < maxGeneratorDuration) {
+        duration += timeStep;
+        state = generator.next(duration);
+    }
+    return duration >= maxGeneratorDuration ? Infinity : duration;
+}
+
+/**
+ * Create a progress => progress easing function from a generator.
+ */
+function createGeneratorEasing(options, scale = 100, createGenerator) {
+    const generator = createGenerator({ ...options, keyframes: [0, scale] });
+    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+    return {
+        type: "keyframes",
+        ease: (progress) => {
+            return generator.next(duration * progress).value / scale;
+        },
+        duration: motionUtils.millisecondsToSeconds(duration),
+    };
+}
+
+function isGenerator(type) {
+    return typeof type === "function";
+}
+
+function attachTimeline(animation, timeline) {
+    animation.timeline = timeline;
+    animation.onfinish = null;
+}
+
+class NativeAnimationControls {
+    constructor(animation) {
+        this.animation = animation;
+    }
+    get duration() {
+        var _a, _b, _c;
+        const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) ||
+            ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) ||
+            300;
+        return motionUtils.millisecondsToSeconds(Number(durationInMs));
+    }
+    get time() {
+        var _a;
+        if (this.animation) {
+            return motionUtils.millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
+        }
+        return 0;
+    }
+    set time(newTime) {
+        if (this.animation) {
+            this.animation.currentTime = motionUtils.secondsToMilliseconds(newTime);
+        }
+    }
+    get speed() {
+        return this.animation ? this.animation.playbackRate : 1;
+    }
+    set speed(newSpeed) {
+        if (this.animation) {
+            this.animation.playbackRate = newSpeed;
+        }
+    }
+    get state() {
+        return this.animation ? this.animation.playState : "finished";
+    }
+    get startTime() {
+        return this.animation ? this.animation.startTime : null;
+    }
+    get finished() {
+        return this.animation ? this.animation.finished : Promise.resolve();
+    }
+    play() {
+        this.animation && this.animation.play();
+    }
+    pause() {
+        this.animation && this.animation.pause();
+    }
+    stop() {
+        if (!this.animation ||
+            this.state === "idle" ||
+            this.state === "finished") {
+            return;
+        }
+        if (this.animation.commitStyles) {
+            this.animation.commitStyles();
+        }
+        this.cancel();
+    }
+    flatten() {
+        var _a;
+        if (!this.animation)
+            return;
+        (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
+    }
+    attachTimeline(timeline) {
+        if (this.animation)
+            attachTimeline(this.animation, timeline);
+        return motionUtils.noop;
+    }
+    complete() {
+        this.animation && this.animation.finish();
+    }
+    cancel() {
+        try {
+            this.animation && this.animation.cancel();
+        }
+        catch (e) { }
+    }
+}
+
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
+/**
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
+ */
+const supportsFlags = {
+    linearEasing: undefined,
+};
+
+function memoSupports(callback, supportsFlag) {
+    const memoized = motionUtils.memo(callback);
+    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+}
+
+const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+    try {
+        document
+            .createElement("div")
+            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}, "linearEasing");
+
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(motionUtils.progress(0, numPoints - 1, i)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
+function isWaapiSupportedEasing(easing) {
+    return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+        !easing ||
+        (typeof easing === "string" &&
+            (easing in supportedWaapiEasing || supportsLinearEasing())) ||
+        isBezierDefinition(easing) ||
+        (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
+}
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const supportedWaapiEasing = {
+    linear: "linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),
+    circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),
+    backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+    backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+};
+function mapEasingToNativeEasing(easing, duration) {
+    if (!easing) {
+        return undefined;
+    }
+    else if (typeof easing === "function" && supportsLinearEasing()) {
+        return generateLinearEasing(easing, duration);
+    }
+    else if (isBezierDefinition(easing)) {
+        return cubicBezierAsString(easing);
+    }
+    else if (Array.isArray(easing)) {
+        return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
+            supportedWaapiEasing.easeOut);
+    }
+    else {
+        return supportedWaapiEasing[easing];
+    }
+}
+
 const isDragging = {
@@ -234,2 +531,319 @@ x: false,
 
+const defaultEasing = "easeOut";
+function applyGeneratorOptions(options) {
+    var _a;
+    if (isGenerator(options.type)) {
+        const generatorOptions = createGeneratorEasing(options, 100, options.type);
+        options.ease = supportsLinearEasing()
+            ? generatorOptions.ease
+            : defaultEasing;
+        options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
+        options.type = "keyframes";
+    }
+    else {
+        options.duration = motionUtils.secondsToMilliseconds((_a = options.duration) !== null && _a !== void 0 ? _a : 0.3);
+        options.ease = options.ease || defaultEasing;
+    }
+}
+// TODO: Reuse for NativeAnimation
+function convertMotionOptionsToNative(valueName, keyframes, options) {
+    var _a;
+    const nativeKeyframes = {};
+    const nativeOptions = {
+        fill: "both",
+        easing: "linear",
+        composite: "replace",
+    };
+    nativeOptions.delay = motionUtils.secondsToMilliseconds((_a = options.delay) !== null && _a !== void 0 ? _a : 0);
+    applyGeneratorOptions(options);
+    nativeOptions.duration = options.duration;
+    const { ease, times } = options;
+    if (times)
+        nativeKeyframes.offset = times;
+    nativeKeyframes[valueName] = keyframes;
+    const easing = mapEasingToNativeEasing(ease, options.duration);
+    /**
+     * If this is an easing array, apply to keyframes, not animation as a whole
+     */
+    if (Array.isArray(easing)) {
+        nativeKeyframes.easing = easing;
+    }
+    else {
+        nativeOptions.easing = easing;
+    }
+    return {
+        keyframes: nativeKeyframes,
+        options: nativeOptions,
+    };
+}
+
+class PseudoAnimation extends NativeAnimationControls {
+    constructor(target, pseudoElement, valueName, keyframes, options) {
+        const animationOptions = convertMotionOptionsToNative(valueName, keyframes, options);
+        const animation = target.animate(animationOptions.keyframes, {
+            pseudoElement,
+            ...animationOptions.options,
+        });
+        super(animation);
+    }
+}
+
+function chooseLayerType(valueName) {
+    if (valueName === "layout")
+        return "group";
+    if (valueName === "enter" || valueName === "new")
+        return "new";
+    if (valueName === "exit" || valueName === "old")
+        return "old";
+    return "group";
+}
+
+let pendingRules = {};
+let style = null;
+const css = {
+    set: (selector, values) => {
+        pendingRules[selector] = values;
+    },
+    commit: () => {
+        if (!style) {
+            style = document.createElement("style");
+            style.id = "motion-view";
+        }
+        let cssText = "";
+        for (const selector in pendingRules) {
+            const rule = pendingRules[selector];
+            cssText += `${selector} {\n`;
+            for (const [property, value] of Object.entries(rule)) {
+                cssText += `  ${property}: ${value};\n`;
+            }
+            cssText += "}\n";
+        }
+        style.textContent = cssText;
+        document.head.appendChild(style);
+        pendingRules = {};
+    },
+    remove: () => {
+        if (style && style.parentElement) {
+            style.parentElement.removeChild(style);
+        }
+    },
+};
+
+function getLayerName(pseudoElement) {
+    const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
+    if (!match)
+        return null;
+    return { layer: match[2], type: match[1] };
+}
+
+function filterViewAnimations(animation) {
+    var _a;
+    const { effect } = animation;
+    if (!effect)
+        return false;
+    return (effect.target === document.documentElement &&
+        ((_a = effect.pseudoElement) === null || _a === void 0 ? void 0 : _a.startsWith("::view-transition")));
+}
+function getViewAnimations() {
+    return document.getAnimations().filter(filterViewAnimations);
+}
+
+function hasTarget(target, targets) {
+    return targets.has(target) && Object.keys(targets.get(target)).length > 0;
+}
+
+const definitionNames = ["layout", "enter", "exit", "new", "old"];
+function startViewAnimation(update, defaultOptions, targets) {
+    if (!document.startViewTransition) {
+        return new Promise(async (resolve) => {
+            await update();
+            resolve(new BaseGroupPlaybackControls([]));
+        });
+    }
+    // TODO: Go over existing targets and ensure they all have ids
+    /**
+     * If we don't have any animations defined for the root target,
+     * remove it from being captured.
+     */
+    if (!hasTarget("root", targets)) {
+        css.set(":root", {
+            "view-transition-name": "none",
+        });
+    }
+    /**
+     * Set the timing curve to linear for all view transition layers.
+     * This gets baked into the keyframes, which can't be changed
+     * without breaking the generated animation.
+     *
+     * This allows us to set easing via updateTiming - which can be changed.
+     */
+    css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
+    css.commit(); // Write
+    const transition = document.startViewTransition(async () => {
+        await update();
+        // TODO: Go over new targets and ensure they all have ids
+    });
+    transition.finished.finally(() => {
+        css.remove(); // Write
+    });
+    return new Promise((resolve) => {
+        transition.ready.then(() => {
+            var _a;
+            const generatedViewAnimations = getViewAnimations();
+            const animations = [];
+            /**
+             * Create animations for our definitions
+             */
+            targets.forEach((definition, target) => {
+                // TODO: If target is not "root", resolve elements
+                // and iterate over each
+                for (const key of definitionNames) {
+                    if (!definition[key])
+                        continue;
+                    const { keyframes, options } = definition[key];
+                    for (let [valueName, valueKeyframes] of Object.entries(keyframes)) {
+                        if (!valueKeyframes)
+                            continue;
+                        const valueOptions = {
+                            ...getValueTransition(defaultOptions, valueName),
+                            ...getValueTransition(options, valueName),
+                        };
+                        const type = chooseLayerType(key);
+                        /**
+                         * If this is an opacity animation, and keyframes are not an array,
+                         * we need to convert them into an array and set an initial value.
+                         */
+                        if (valueName === "opacity" &&
+                            !Array.isArray(valueKeyframes)) {
+                            const initialValue = type === "new" ? 0 : 1;
+                            valueKeyframes = [initialValue, valueKeyframes];
+                        }
+                        /**
+                         * Resolve stagger function if provided.
+                         */
+                        if (typeof valueOptions.delay === "function") {
+                            valueOptions.delay = valueOptions.delay(0, 1);
+                        }
+                        const animation = new PseudoAnimation(document.documentElement, `::view-transition-${type}(${target})`, valueName, valueKeyframes, valueOptions);
+                        animations.push(animation);
+                    }
+                }
+            });
+            /**
+             * Handle browser generated animations
+             */
+            for (const animation of generatedViewAnimations) {
+                if (animation.playState === "finished")
+                    continue;
+                const { effect } = animation;
+                if (!effect || !(effect instanceof KeyframeEffect))
+                    continue;
+                const { pseudoElement } = effect;
+                if (!pseudoElement)
+                    continue;
+                const name = getLayerName(pseudoElement);
+                if (!name)
+                    continue;
+                const targetDefinition = targets.get(name.layer);
+                if (!targetDefinition) {
+                    /**
+                     * If transition name is group then update the timing of the animation
+                     * whereas if it's old or new then we could possibly replace it using
+                     * the above method.
+                     */
+                    const transitionName = name.type === "group" ? "layout" : "";
+                    const animationTransition = {
+                        ...getValueTransition(defaultOptions, transitionName),
+                    };
+                    applyGeneratorOptions(animationTransition);
+                    const easing = mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
+                    effect.updateTiming({
+                        delay: motionUtils.secondsToMilliseconds((_a = animationTransition.delay) !== null && _a !== void 0 ? _a : 0),
+                        duration: animationTransition.duration,
+                        easing,
+                    });
+                    animations.push(new NativeAnimationControls(animation));
+                }
+                else if (hasOpacity(targetDefinition, "enter") &&
+                    hasOpacity(targetDefinition, "exit") &&
+                    effect
+                        .getKeyframes()
+                        .some((keyframe) => keyframe.mixBlendMode)) {
+                    animations.push(new NativeAnimationControls(animation));
+                }
+                else {
+                    animation.cancel();
+                }
+            }
+            resolve(new BaseGroupPlaybackControls(animations));
+        });
+    });
+}
+function hasOpacity(target, key) {
+    var _a;
+    return (_a = target === null || target === void 0 ? void 0 : target[key]) === null || _a === void 0 ? void 0 : _a.keyframes.opacity;
+}
+
+/**
+ * TODO:
+ * - Create view transition on next tick
+ * - Replace animations with Motion animations
+ * - Return GroupAnimation on next tick
+ */
+class ViewTransitionBuilder {
+    constructor(update, options = {}) {
+        this.currentTarget = "root";
+        this.targets = new Map();
+        this.readyPromise = new Promise((resolve) => {
+            this.notifyReady = resolve;
+        });
+        queueMicrotask(() => {
+            startViewAnimation(update, options, this.targets).then((animation) => this.notifyReady(animation));
+        });
+    }
+    get(selector) {
+        this.currentTarget = selector;
+        return this;
+    }
+    layout(keyframes, options) {
+        this.updateTarget("layout", keyframes, options);
+        return this;
+    }
+    new(keyframes, options) {
+        this.updateTarget("new", keyframes, options);
+        return this;
+    }
+    old(keyframes, options) {
+        this.updateTarget("old", keyframes, options);
+        return this;
+    }
+    enter(keyframes, options) {
+        this.updateTarget("enter", keyframes, options);
+        return this;
+    }
+    exit(keyframes, options) {
+        this.updateTarget("exit", keyframes, options);
+        return this;
+    }
+    crossfade(options) {
+        this.updateTarget("enter", { opacity: 1 }, options);
+        this.updateTarget("exit", { opacity: 0 }, options);
+        return this;
+    }
+    updateTarget(target, keyframes, options = {}) {
+        const { currentTarget, targets } = this;
+        if (!targets.has(currentTarget)) {
+            targets.set(currentTarget, {});
+        }
+        const targetData = targets.get(currentTarget);
+        targetData[target] = { keyframes, options };
+    }
+    then(resolve, reject) {
+        return this.readyPromise.then(resolve, reject);
+    }
+}
+function view(update, defaultOptions = {}) {
+    return new ViewTransitionBuilder(update, defaultOptions);
+}
+
 function setDragLock(axis) {
@@ -260,9 +874,28 @@ if (axis === "x" || axis === "y") {
 
+exports.GroupPlaybackControls = GroupPlaybackControls;
+exports.NativeAnimationControls = NativeAnimationControls;
+exports.ViewTransitionBuilder = ViewTransitionBuilder;
+exports.attachTimeline = attachTimeline;
+exports.calcGeneratorDuration = calcGeneratorDuration;
+exports.createGeneratorEasing = createGeneratorEasing;
+exports.cubicBezierAsString = cubicBezierAsString;
+exports.generateLinearEasing = generateLinearEasing;
+exports.getValueTransition = getValueTransition;
 exports.hover = hover;
+exports.isBezierDefinition = isBezierDefinition;
 exports.isDragActive = isDragActive;
 exports.isDragging = isDragging;
+exports.isGenerator = isGenerator;
 exports.isNodeOrChild = isNodeOrChild;
 exports.isPrimaryPointer = isPrimaryPointer;
+exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
+exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
+exports.maxGeneratorDuration = maxGeneratorDuration;
 exports.press = press;
 exports.resolveElements = resolveElements;
 exports.setDragLock = setDragLock;
+exports.supportedWaapiEasing = supportedWaapiEasing;
+exports.supportsFlags = supportsFlags;
+exports.supportsLinearEasing = supportsLinearEasing;
+exports.supportsScrollTimeline = supportsScrollTimeline;
+exports.view = view;

dist/index.d.ts

@@ -0,1 +1,583 @@
+interface SVGAttributes {
+    accentHeight?: number | string | undefined;
+    accumulate?: "none" | "sum" | undefined;
+    additive?: "replace" | "sum" | undefined;
+    alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined;
+    allowReorder?: "no" | "yes" | undefined;
+    alphabetic?: number | string | undefined;
+    amplitude?: number | string | undefined;
+    arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
+    ascent?: number | string | undefined;
+    attributeName?: string | undefined;
+    attributeType?: string | undefined;
+    autoReverse?: boolean | undefined;
+    azimuth?: number | string | undefined;
+    baseFrequency?: number | string | undefined;
+    baselineShift?: number | string | undefined;
+    baseProfile?: number | string | undefined;
+    bbox?: number | string | undefined;
+    begin?: number | string | undefined;
+    bias?: number | string | undefined;
+    by?: number | string | undefined;
+    calcMode?: number | string | undefined;
+    capHeight?: number | string | undefined;
+    clip?: number | string | undefined;
+    clipPath?: string | undefined;
+    clipPathUnits?: number | string | undefined;
+    clipRule?: number | string | undefined;
+    colorInterpolation?: number | string | undefined;
+    colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
+    colorProfile?: number | string | undefined;
+    colorRendering?: number | string | undefined;
+    contentScriptType?: number | string | undefined;
+    contentStyleType?: number | string | undefined;
+    cursor?: number | string | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    d?: string | undefined;
+    decelerate?: number | string | undefined;
+    descent?: number | string | undefined;
+    diffuseConstant?: number | string | undefined;
+    direction?: number | string | undefined;
+    display?: number | string | undefined;
+    divisor?: number | string | undefined;
+    dominantBaseline?: number | string | undefined;
+    dur?: number | string | undefined;
+    dx?: number | string | undefined;
+    dy?: number | string | undefined;
+    edgeMode?: number | string | undefined;
+    elevation?: number | string | undefined;
+    enableBackground?: number | string | undefined;
+    end?: number | string | undefined;
+    exponent?: number | string | undefined;
+    externalResourcesRequired?: boolean | undefined;
+    fill?: string | undefined;
+    fillOpacity?: number | string | undefined;
+    fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
+    filter?: string | undefined;
+    filterRes?: number | string | undefined;
+    filterUnits?: number | string | undefined;
+    floodColor?: number | string | undefined;
+    floodOpacity?: number | string | undefined;
+    focusable?: boolean | "auto" | undefined;
+    fontFamily?: string | undefined;
+    fontSize?: number | string | undefined;
+    fontSizeAdjust?: number | string | undefined;
+    fontStretch?: number | string | undefined;
+    fontStyle?: number | string | undefined;
+    fontVariant?: number | string | undefined;
+    fontWeight?: number | string | undefined;
+    format?: number | string | undefined;
+    fr?: number | string | undefined;
+    from?: number | string | undefined;
+    fx?: number | string | undefined;
+    fy?: number | string | undefined;
+    g1?: number | string | undefined;
+    g2?: number | string | undefined;
+    glyphName?: number | string | undefined;
+    glyphOrientationHorizontal?: number | string | undefined;
+    glyphOrientationVertical?: number | string | undefined;
+    glyphRef?: number | string | undefined;
+    gradientTransform?: string | undefined;
+    gradientUnits?: string | undefined;
+    hanging?: number | string | undefined;
+    horizAdvX?: number | string | undefined;
+    horizOriginX?: number | string | undefined;
+    href?: string | undefined;
+    ideographic?: number | string | undefined;
+    imageRendering?: number | string | undefined;
+    in2?: number | string | undefined;
+    in?: string | undefined;
+    intercept?: number | string | undefined;
+    k1?: number | string | undefined;
+    k2?: number | string | undefined;
+    k3?: number | string | undefined;
+    k4?: number | string | undefined;
+    k?: number | string | undefined;
+    kernelMatrix?: number | string | undefined;
+    kernelUnitLength?: number | string | undefined;
+    kerning?: number | string | undefined;
+    keyPoints?: number | string | undefined;
+    keySplines?: number | string | undefined;
+    keyTimes?: number | string | undefined;
+    lengthAdjust?: number | string | undefined;
+    letterSpacing?: number | string | undefined;
+    lightingColor?: number | string | undefined;
+    limitingConeAngle?: number | string | undefined;
+    local?: number | string | undefined;
+    markerEnd?: string | undefined;
+    markerHeight?: number | string | undefined;
+    markerMid?: string | undefined;
+    markerStart?: string | undefined;
+    markerUnits?: number | string | undefined;
+    markerWidth?: number | string | undefined;
+    mask?: string | undefined;
+    maskContentUnits?: number | string | undefined;
+    maskUnits?: number | string | undefined;
+    mathematical?: number | string | undefined;
+    mode?: number | string | undefined;
+    numOctaves?: number | string | undefined;
+    offset?: number | string | undefined;
+    opacity?: number | string | undefined;
+    operator?: number | string | undefined;
+    order?: number | string | undefined;
+    orient?: number | string | undefined;
+    orientation?: number | string | undefined;
+    origin?: number | string | undefined;
+    overflow?: number | string | undefined;
+    overlinePosition?: number | string | undefined;
+    overlineThickness?: number | string | undefined;
+    paintOrder?: number | string | undefined;
+    panose1?: number | string | undefined;
+    path?: string | undefined;
+    pathLength?: number | string | undefined;
+    patternContentUnits?: string | undefined;
+    patternTransform?: number | string | undefined;
+    patternUnits?: string | undefined;
+    pointerEvents?: number | string | undefined;
+    points?: string | undefined;
+    pointsAtX?: number | string | undefined;
+    pointsAtY?: number | string | undefined;
+    pointsAtZ?: number | string | undefined;
+    preserveAlpha?: boolean | undefined;
+    preserveAspectRatio?: string | undefined;
+    primitiveUnits?: number | string | undefined;
+    r?: number | string | undefined;
+    radius?: number | string | undefined;
+    refX?: number | string | undefined;
+    refY?: number | string | undefined;
+    renderingIntent?: number | string | undefined;
+    repeatCount?: number | string | undefined;
+    repeatDur?: number | string | undefined;
+    requiredExtensions?: number | string | undefined;
+    requiredFeatures?: number | string | undefined;
+    restart?: number | string | undefined;
+    result?: string | undefined;
+    rotate?: number | string | undefined;
+    rx?: number | string | undefined;
+    ry?: number | string | undefined;
+    scale?: number | string | undefined;
+    seed?: number | string | undefined;
+    shapeRendering?: number | string | undefined;
+    slope?: number | string | undefined;
+    spacing?: number | string | undefined;
+    specularConstant?: number | string | undefined;
+    specularExponent?: number | string | undefined;
+    speed?: number | string | undefined;
+    spreadMethod?: string | undefined;
+    startOffset?: number | string | undefined;
+    stdDeviation?: number | string | undefined;
+    stemh?: number | string | undefined;
+    stemv?: number | string | undefined;
+    stitchTiles?: number | string | undefined;
+    stopColor?: string | undefined;
+    stopOpacity?: number | string | undefined;
+    strikethroughPosition?: number | string | undefined;
+    strikethroughThickness?: number | string | undefined;
+    string?: number | string | undefined;
+    stroke?: string | undefined;
+    strokeDasharray?: string | number | undefined;
+    strokeDashoffset?: string | number | undefined;
+    strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
+    strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
+    strokeMiterlimit?: number | string | undefined;
+    strokeOpacity?: number | string | undefined;
+    strokeWidth?: number | string | undefined;
+    surfaceScale?: number | string | undefined;
+    systemLanguage?: number | string | undefined;
+    tableValues?: number | string | undefined;
+    targetX?: number | string | undefined;
+    targetY?: number | string | undefined;
+    textAnchor?: string | undefined;
+    textDecoration?: number | string | undefined;
+    textLength?: number | string | undefined;
+    textRendering?: number | string | undefined;
+    to?: number | string | undefined;
+    transform?: string | undefined;
+    u1?: number | string | undefined;
+    u2?: number | string | undefined;
+    underlinePosition?: number | string | undefined;
+    underlineThickness?: number | string | undefined;
+    unicode?: number | string | undefined;
+    unicodeBidi?: number | string | undefined;
+    unicodeRange?: number | string | undefined;
+    unitsPerEm?: number | string | undefined;
+    vAlphabetic?: number | string | undefined;
+    values?: string | undefined;
+    vectorEffect?: number | string | undefined;
+    version?: string | undefined;
+    vertAdvY?: number | string | undefined;
+    vertOriginX?: number | string | undefined;
+    vertOriginY?: number | string | undefined;
+    vHanging?: number | string | undefined;
+    vIdeographic?: number | string | undefined;
+    viewBox?: string | undefined;
+    viewTarget?: number | string | undefined;
+    visibility?: number | string | undefined;
+    vMathematical?: number | string | undefined;
+    widths?: number | string | undefined;
+    wordSpacing?: number | string | undefined;
+    writingMode?: number | string | undefined;
+    x1?: number | string | undefined;
+    x2?: number | string | undefined;
+    x?: number | string | undefined;
+    xChannelSelector?: string | undefined;
+    xHeight?: number | string | undefined;
+    xlinkActuate?: string | undefined;
+    xlinkArcrole?: string | undefined;
+    xlinkHref?: string | undefined;
+    xlinkRole?: string | undefined;
+    xlinkShow?: string | undefined;
+    xlinkTitle?: string | undefined;
+    xlinkType?: string | undefined;
+    xmlBase?: string | undefined;
+    xmlLang?: string | undefined;
+    xmlns?: string | undefined;
+    xmlnsXlink?: string | undefined;
+    xmlSpace?: string | undefined;
+    y1?: number | string | undefined;
+    y2?: number | string | undefined;
+    y?: number | string | undefined;
+    yChannelSelector?: string | undefined;
+    z?: number | string | undefined;
+    zoomAndPan?: string | undefined;
+}
+
+interface ProgressTimeline {
+    currentTime: null | {
+        value: number;
+    };
+    cancel?: VoidFunction;
+}
+/**
+ * Methods to control an animation.
+ */
+interface AnimationPlaybackControls {
+    /**
+     * The current time of the animation, in seconds.
+     */
+    time: number;
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
+    speed: number;
+    /**
+     * The start time of the animation, in milliseconds.
+     */
+    startTime: number | null;
+    /**
+     * The state of the animation.
+     *
+     * This is currently for internal use only.
+     */
+    state?: AnimationPlayState;
+    duration: number;
+    /**
+     * Stops the animation at its current state, and prevents it from
+     * resuming when the animation is played again.
+     */
+    stop: () => void;
+    /**
+     * Plays the animation.
+     */
+    play: () => void;
+    /**
+     * Pauses the animation.
+     */
+    pause: () => void;
+    /**
+     * Completes the animation and applies the final state.
+     */
+    complete: () => void;
+    /**
+     * Cancels the animation and applies the initial state.
+     */
+    cancel: () => void;
+    /**
+     * Allows the animation to be awaited.
+     */
+    then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     *
+     * This is currently for internal use only.
+     */
+    attachTimeline?: (timeline: ProgressTimeline, fallback?: (animation: AnimationPlaybackControls) => VoidFunction) => VoidFunction;
+    /**
+     * Flattens the animation's easing curve to linear.
+     *
+     * This is currently for internal use only, and is used by scroll() to
+     * ensure an animation is being scrubbed by progress rather than eased time.
+     */
+    flatten: () => void;
+}
+type AnimationPlaybackControlsWithFinished = Omit<AnimationPlaybackControls, "then"> & {
+    finished: Promise<any>;
+};
+interface AnimationState<V> {
+    value: V;
+    done: boolean;
+}
+interface KeyframeGenerator<V> {
+    calculatedDuration: null | number;
+    next: (t: number) => AnimationState<V>;
+    toString: () => string;
+}
+interface ValueAnimationOptions<V extends string | number = number> extends ValueAnimationTransition {
+    keyframes: V[];
+    name?: string;
+    from?: V;
+    isGenerator?: boolean;
+}
+type GeneratorFactory = (options: ValueAnimationOptions<any>) => KeyframeGenerator<any>;
+type AnimationGeneratorType = GeneratorFactory | "decay" | "spring" | "keyframes" | "tween" | "inertia";
+interface AnimationPlaybackLifecycles<V> {
+    onUpdate?: (latest: V) => void;
+    onPlay?: () => void;
+    onComplete?: () => void;
+    onRepeat?: () => void;
+    onStop?: () => void;
+}
+interface ValueAnimationTransition<V = any> extends Transition, AnimationPlaybackLifecycles<V> {
+}
+type RepeatType = "loop" | "reverse" | "mirror";
+interface AnimationPlaybackOptions {
+    repeat?: number;
+    repeatType?: RepeatType;
+    repeatDelay?: number;
+}
+interface VelocityOptions {
+    velocity?: number;
+    restSpeed?: number;
+    restDelta?: number;
+}
+interface DurationSpringOptions {
+    duration?: number;
+    visualDuration?: number;
+    bounce?: number;
+}
+interface SpringOptions extends DurationSpringOptions, VelocityOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+interface DecayOptions extends VelocityOptions {
+    keyframes?: number[];
+    power?: number;
+    timeConstant?: number;
+    modifyTarget?: (v: number) => number;
+}
+type EasingFunction = (v: number) => number;
+type EasingModifier = (easing: EasingFunction) => EasingFunction;
+type BezierDefinition = readonly [number, number, number, number];
+type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+/**
+ * The easing function to use. Set as one of:
+ *
+ * - The name of an in-built easing function.
+ * - An array of four numbers to define a cubic bezier curve.
+ * - An easing function, that accepts and returns a progress value between `0` and `1`.
+ *
+ * @public
+ */
+type Easing = EasingDefinition | EasingFunction;
+interface DriverControls {
+    start: () => void;
+    stop: () => void;
+    now: () => number;
+}
+type Driver = (update: (timestamp: number) => void) => DriverControls;
+interface InertiaOptions extends DecayOptions {
+    bounceStiffness?: number;
+    bounceDamping?: number;
+    min?: number;
+    max?: number;
+}
+interface KeyframeOptions {
+    ease?: Easing | Easing[];
+    times?: number[];
+}
+interface Transition extends AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions, "keyframes">, KeyframeOptions {
+    delay?: number;
+    elapsed?: number;
+    driver?: Driver;
+    type?: AnimationGeneratorType;
+    duration?: number;
+    autoplay?: boolean;
+    startTime?: number;
+}
+type SVGPathTransitions = {
+    [K in keyof SVGPathProperties]: Transition;
+};
+type SVGTransitions = {
+    [K in keyof SVGAttributes]: Transition;
+};
+type VariableTransitions = {
+    [key: `--${string}`]: Transition;
+};
+type StyleTransitions = {
+    [K in keyof CSSStyleDeclarationWithTransform]?: Transition;
+};
+type ValueKeyframe = string | number;
+type UnresolvedValueKeyframe = ValueKeyframe | null;
+type ResolvedValueKeyframe = ValueKeyframe | ValueKeyframe[];
+type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
+type StyleKeyframesDefinition = {
+    [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
+};
+type SVGKeyframesDefinition = {
+    [K in keyof SVGAttributes]?: ValueKeyframesDefinition;
+};
+type VariableKeyframesDefinition = {
+    [key: `--${string}`]: ValueKeyframesDefinition;
+};
+type SVGPathKeyframesDefinition = {
+    [K in keyof SVGPathProperties]?: ValueKeyframesDefinition;
+};
+type DOMKeyframesDefinition = StyleKeyframesDefinition & SVGKeyframesDefinition & SVGPathKeyframesDefinition & VariableKeyframesDefinition;
+interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition" | "x" | "y" | "z"> {
+    x: number | string;
+    y: number | string;
+    z: number | string;
+    rotateX: number | string;
+    rotateY: number | string;
+    rotateZ: number | string;
+    scaleX: number;
+    scaleY: number;
+    scaleZ: number;
+    skewX: number | string;
+    skewY: number | string;
+}
+type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
+type DynamicOption<T> = (i: number, total: number) => T;
+interface AnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
+    delay?: number | DynamicOption<number>;
+}
+interface TransformProperties {
+    x?: string | number;
+    y?: string | number;
+    z?: string | number;
+    translateX?: string | number;
+    translateY?: string | number;
+    translateZ?: string | number;
+    rotate?: string | number;
+    rotateX?: string | number;
+    rotateY?: string | number;
+    rotateZ?: string | number;
+    scale?: string | number;
+    scaleX?: string | number;
+    scaleY?: string | number;
+    scaleZ?: string | number;
+    skew?: string | number;
+    skewX?: string | number;
+    skewY?: string | number;
+    originX?: string | number;
+    originY?: string | number;
+    originZ?: string | number;
+    perspective?: string | number;
+    transformPerspective?: string | number;
+}
+interface SVGPathProperties {
+    pathLength?: number;
+    pathOffset?: number;
+    pathSpacing?: number;
+}
+
+type AcceptedAnimations = AnimationPlaybackControls | AnimationPlaybackControlsWithFinished;
+type GroupedAnimations = AcceptedAnimations[];
+declare class BaseGroupPlaybackControls implements AnimationPlaybackControlsWithFinished {
+    animations: GroupedAnimations;
+    constructor(animations: Array<AcceptedAnimations | undefined>);
+    get finished(): Promise<any[]>;
+    /**
+     * TODO: Filter out cancelled or stopped animations before returning
+     */
+    private getAll;
+    private setAll;
+    attachTimeline(timeline: any, fallback: (animation: AnimationPlaybackControls | AnimationPlaybackControlsWithFinished) => VoidFunction): () => void;
+    get time(): number;
+    set time(time: number);
+    get speed(): number;
+    set speed(speed: number);
+    get startTime(): any;
+    get duration(): number;
+    private runAll;
+    flatten(): void;
+    play(): void;
+    pause(): void;
+    stop: () => void;
+    cancel(): void;
+    complete(): void;
+}
+
+/**
+ * TODO: This is a temporary class to support the legacy
+ * thennable API
+ */
+declare class GroupPlaybackControls extends BaseGroupPlaybackControls implements AnimationPlaybackControls {
+    animations: AnimationPlaybackControls[];
+    then(onResolve: VoidFunction, onReject?: VoidFunction): Promise<void>;
+}
+
+declare function getValueTransition(transition: any, key: string): any;
+
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+declare const maxGeneratorDuration = 20000;
+declare function calcGeneratorDuration(generator: KeyframeGenerator<unknown>): number;
+
+/**
+ * Create a progress => progress easing function from a generator.
+ */
+declare function createGeneratorEasing(options: Transition, scale: number | undefined, createGenerator: GeneratorFactory): {
+    type: string;
+    ease: (progress: number) => number;
+    duration: number;
+};
+
+declare function isGenerator(type?: AnimationGeneratorType): type is GeneratorFactory;
+
+declare class NativeAnimationControls implements Omit<AnimationPlaybackControlsWithFinished, "then"> {
+    animation?: Animation;
+    options?: ValueAnimationOptions;
+    constructor(animation?: Animation);
+    get duration(): number;
+    get time(): number;
+    set time(newTime: number);
+    get speed(): number;
+    set speed(newSpeed: number);
+    get state(): AnimationPlayState;
+    get startTime(): number | null;
+    get finished(): Promise<void> | Promise<Animation>;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    flatten(): void;
+    attachTimeline(timeline: any): (any: void) => void;
+    complete(): void;
+    cancel(): void;
+}
+
+declare function attachTimeline(animation: Animation, timeline: any): void;
+
+declare function isWaapiSupportedEasing(easing?: Easing | Easing[]): boolean;
+declare const cubicBezierAsString: ([a, b, c, d]: BezierDefinition) => string;
+declare const supportedWaapiEasing: {
+    linear: string;
+    ease: string;
+    easeIn: string;
+    easeOut: string;
+    easeInOut: string;
+    circIn: string;
+    circOut: string;
+    backIn: string;
+    backOut: string;
+};
+declare function mapEasingToNativeEasing(easing: Easing | Easing[] | undefined, duration: number): undefined | string | string[];
+
+declare const generateLinearEasing: (easing: EasingFunction, duration: number, resolution?: number) => string;
+
 type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
@@ -89,2 +671,65 @@ interface WithQuerySelectorAll {
 
+declare const isBezierDefinition: (easing: Easing | Easing[]) => easing is BezierDefinition;
+
+/**
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
+ */
+declare const supportsFlags: Record<string, boolean | undefined>;
+
+declare const supportsLinearEasing: () => boolean;
+
+declare global {
+    interface Window {
+        ScrollTimeline: ScrollTimeline;
+    }
+}
+declare class ScrollTimeline implements ProgressTimeline {
+    constructor(options: ScrollOptions);
+    currentTime: null | {
+        value: number;
+    };
+    cancel?: VoidFunction;
+}
+declare const supportsScrollTimeline: () => boolean;
+
+type ViewTransitionAnimationDefinition = {
+    keyframes: DOMKeyframesDefinition;
+    options: AnimationOptions;
+};
+type ViewTransitionTarget = {
+    layout?: ViewTransitionAnimationDefinition;
+    enter?: ViewTransitionAnimationDefinition;
+    exit?: ViewTransitionAnimationDefinition;
+    new?: ViewTransitionAnimationDefinition;
+    old?: ViewTransitionAnimationDefinition;
+};
+interface ViewTransitionOptions extends AnimationOptions {
+}
+type Target = string | Element;
+
+/**
+ * TODO:
+ * - Create view transition on next tick
+ * - Replace animations with Motion animations
+ * - Return GroupAnimation on next tick
+ */
+declare class ViewTransitionBuilder {
+    private currentTarget;
+    private targets;
+    private notifyReady;
+    private readyPromise;
+    constructor(update: () => void | Promise<void>, options?: ViewTransitionOptions);
+    get(selector: Target): this;
+    layout(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
+    new(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
+    old(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
+    enter(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
+    exit(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
+    crossfade(options?: AnimationOptions): this;
+    updateTarget(target: "enter" | "exit" | "layout" | "new" | "old", keyframes: DOMKeyframesDefinition, options?: AnimationOptions): void;
+    then(resolve: () => void, reject?: () => void): Promise<void>;
+}
+declare function view(update: () => void | Promise<void>, defaultOptions?: ViewTransitionOptions): ViewTransitionBuilder;
+
 declare const isDragging: {
@@ -98,4 +743,2 @@ x: boolean;
 
-declare const isPrimaryPointer: (event: PointerEvent) => boolean;
-
 /**
@@ -110,2 +753,4 @@ * Recursively traverse up the tree to check whether the provided child node
 
-export { type AnimationScope, type ElementOrSelector, type EventOptions, type OnHoverEndEvent, type OnHoverStartEvent, type OnPressEndEvent, type OnPressStartEvent, type PointerEventOptions, type PressGestureInfo, type SelectorCache, type WithQuerySelectorAll, hover, isDragActive, isDragging, isNodeOrChild, isPrimaryPointer, press, resolveElements, setDragLock };
+declare const isPrimaryPointer: (event: PointerEvent) => boolean;
+
+export { type AnimationGeneratorType, type AnimationOptions, type AnimationOptionsWithValueOverrides, type AnimationPlaybackControls, type AnimationPlaybackControlsWithFinished, type AnimationPlaybackLifecycles, type AnimationPlaybackOptions, type AnimationScope, type AnimationState, type BezierDefinition, type CSSStyleDeclarationWithTransform, type DOMKeyframesDefinition, type DecayOptions, type Driver, type DriverControls, type DurationSpringOptions, type DynamicOption, type Easing, type EasingDefinition, type EasingFunction, type EasingModifier, type ElementOrSelector, type EventOptions, type GeneratorFactory, GroupPlaybackControls, type InertiaOptions, type KeyframeGenerator, type KeyframeOptions, NativeAnimationControls, type OnHoverEndEvent, type OnHoverStartEvent, type OnPressEndEvent, type OnPressStartEvent, type PointerEventOptions, type PressGestureInfo, type ProgressTimeline, type RepeatType, type ResolvedValueKeyframe, type SVGAttributes, type SVGKeyframesDefinition, type SVGPathKeyframesDefinition, type SVGPathProperties, type SVGPathTransitions, type SVGTransitions, type SelectorCache, type SpringOptions, type StyleKeyframesDefinition, type StyleTransitions, type Target, type TransformProperties, type Transition, type UnresolvedValueKeyframe, type ValueAnimationOptions, type ValueAnimationTransition, type ValueKeyframe, type ValueKeyframesDefinition, type VariableKeyframesDefinition, type VariableTransitions, type VelocityOptions, type ViewTransitionAnimationDefinition, ViewTransitionBuilder, type ViewTransitionOptions, type ViewTransitionTarget, type WithQuerySelectorAll, attachTimeline, calcGeneratorDuration, createGeneratorEasing, cubicBezierAsString, generateLinearEasing, getValueTransition, hover, isBezierDefinition, isDragActive, isDragging, isGenerator, isNodeOrChild, isPrimaryPointer, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, press, resolveElements, setDragLock, supportedWaapiEasing, supportsFlags, supportsLinearEasing, supportsScrollTimeline, view };

package.json

 {
     "name": "motion-dom",
-    "version": "11.14.3",
+    "version": "11.16.0",
     "author": "Matt Perry",
@@ -18,2 +18,5 @@ "license": "MIT",
     },
+    "dependencies": {
+        "motion-utils": "^11.16.0"
+    },
     "scripts": {
@@ -24,3 +27,3 @@ "clean": "rm -rf types dist lib",
     },
-    "gitHead": "5f420ccca7d3159ec9bb362ff3c13153f38e90f2"
+    "gitHead": "0d6f15819d66d9e76f3b32bc79ceb001079da43e"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96890

increased by297.64%

Number of package files

40

increased by150%

Lines of code

2525

increased by304.65%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmotion-utils@^11.16.0

• + Addedmotion-utils@11.18.1(transitive)