Mission Control Dashboard - Initial implementation

node_modules/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -0,0 +1,110 @@
+import { resolveElements, getValueTransition, getAnimationMap, animationMapKey, getComputedStyle, fillWildcards, applyPxDefaults, NativeAnimation } from 'motion-dom';
+import { invariant, secondsToMilliseconds } from 'motion-utils';
+
+function animateElements(elementOrSelector, keyframes, options, scope) {
+    // Gracefully handle null/undefined elements (e.g., from querySelector returning null)
+    if (elementOrSelector == null) {
+        return [];
+    }
+    const elements = resolveElements(elementOrSelector, scope);
+    const numElements = elements.length;
+    invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
+    /**
+     * WAAPI doesn't support interrupting animations.
+     *
+     * Therefore, starting animations requires a three-step process:
+     * 1. Stop existing animations (write styles to DOM)
+     * 2. Resolve keyframes (read styles from DOM)
+     * 3. Create new animations (write styles to DOM)
+     *
+     * The hybrid `animate()` function uses AsyncAnimation to resolve
+     * keyframes before creating new animations, which removes style
+     * thrashing. Here, we have much stricter filesize constraints.
+     * Therefore we do this in a synchronous way that ensures that
+     * at least within `animate()` calls there is no style thrashing.
+     *
+     * In the motion-native-animate-mini-interrupt benchmark this
+     * was 80% faster than a single loop.
+     */
+    const animationDefinitions = [];
+    /**
+     * Step 1: Build options and stop existing animations (write)
+     */
+    for (let i = 0; i < numElements; i++) {
+        const element = elements[i];
+        const elementTransition = { ...options };
+        /**
+         * Resolve stagger function if provided.
+         */
+        if (typeof elementTransition.delay === "function") {
+            elementTransition.delay = elementTransition.delay(i, numElements);
+        }
+        for (const valueName in keyframes) {
+            let valueKeyframes = keyframes[valueName];
+            if (!Array.isArray(valueKeyframes)) {
+                valueKeyframes = [valueKeyframes];
+            }
+            const valueOptions = {
+                ...getValueTransition(elementTransition, valueName),
+            };
+            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+            /**
+             * If there's an existing animation playing on this element then stop it
+             * before creating a new one.
+             */
+            const map = getAnimationMap(element);
+            const key = animationMapKey(valueName, valueOptions.pseudoElement || "");
+            const currentAnimation = map.get(key);
+            currentAnimation && currentAnimation.stop();
+            animationDefinitions.push({
+                map,
+                key,
+                unresolvedKeyframes: valueKeyframes,
+                options: {
+                    ...valueOptions,
+                    element,
+                    name: valueName,
+                    allowFlatten: !elementTransition.type && !elementTransition.ease,
+                },
+            });
+        }
+    }
+    /**
+     * Step 2: Resolve keyframes (read)
+     */
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
+        const { element, name, pseudoElement } = animationOptions;
+        if (!pseudoElement && unresolvedKeyframes[0] === null) {
+            unresolvedKeyframes[0] = getComputedStyle(element, name);
+        }
+        fillWildcards(unresolvedKeyframes);
+        applyPxDefaults(unresolvedKeyframes, name);
+        /**
+         * If we only have one keyframe, explicitly read the initial keyframe
+         * from the computed style. This is to ensure consistency with WAAPI behaviour
+         * for restarting animations, for instance .play() after finish, when it
+         * has one vs two keyframes.
+         */
+        if (!pseudoElement && unresolvedKeyframes.length < 2) {
+            unresolvedKeyframes.unshift(getComputedStyle(element, name));
+        }
+        animationOptions.keyframes = unresolvedKeyframes;
+    }
+    /**
+     * Step 3: Create new animations (write)
+     */
+    const animations = [];
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { map, key, options: animationOptions } = animationDefinitions[i];
+        const animation = new NativeAnimation(animationOptions);
+        map.set(key, animation);
+        animation.finished.finally(() => map.delete(key));
+        animations.push(animation);
+    }
+    return animations;
+}
+
+export { animateElements };
+//# sourceMappingURL=animate-elements.mjs.map

node_modules/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs

@@ -0,0 +1,14 @@
+import { GroupAnimationWithThen } from 'motion-dom';
+import { createAnimationsFromSequence } from '../../sequence/create.mjs';
+import { animateElements } from './animate-elements.mjs';
+
+function animateSequence(definition, options) {
+    const animations = [];
+    createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
+        animations.push(...animateElements(element, keyframes, transition));
+    });
+    return new GroupAnimationWithThen(animations);
+}
+
+export { animateSequence };
+//# sourceMappingURL=animate-sequence.mjs.map

node_modules/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-sequence.mjs","sources":["../../../../../src/animation/animators/waapi/animate-sequence.ts"],"sourcesContent":["import { AnimationPlaybackControls, GroupAnimationWithThen } from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../../sequence/types\"\nimport { animateElements } from \"./animate-elements\"\n\nexport function animateSequence(\n    definition: AnimationSequence,\n    options?: SequenceOptions\n) {\n    const animations: AnimationPlaybackControls[] = []\n\n    createAnimationsFromSequence(definition, options).forEach(\n        ({ keyframes, transition }, element: Element) => {\n            animations.push(...animateElements(element, keyframes, transition))\n        }\n    )\n\n    return new GroupAnimationWithThen(animations)\n}\n"],"names":[],"mappings":";;;;AAKM,SAAU,eAAe,CAC3B,UAA6B,EAC7B,OAAyB,EAAA;IAEzB,MAAM,UAAU,GAAgC,EAAE;AAElD,IAAA,4BAA4B,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,OAAO,CACrD,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,OAAgB,KAAI;AAC5C,QAAA,UAAU,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AACvE,IAAA,CAAC,CACJ;AAED,IAAA,OAAO,IAAI,sBAAsB,CAAC,UAAU,CAAC;AACjD;;;;"}

node_modules/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -0,0 +1,13 @@
+import { GroupAnimationWithThen } from 'motion-dom';
+import { animateElements } from './animate-elements.mjs';
+
+const createScopedWaapiAnimate = (scope) => {
+    function scopedAnimate(elementOrSelector, keyframes, options) {
+        return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
+    }
+    return scopedAnimate;
+};
+const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
+
+export { animateMini, createScopedWaapiAnimate };
+//# sourceMappingURL=animate-style.mjs.map

node_modules/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-style.mjs","sources":["../../../../../src/animation/animators/waapi/animate-style.ts"],"sourcesContent":["import {\n    AnimationPlaybackControlsWithThen,\n    AnimationScope,\n    DOMKeyframesDefinition,\n    AnimationOptions as DynamicAnimationOptions,\n    ElementOrSelector,\n    GroupAnimationWithThen,\n} from \"motion-dom\"\nimport { animateElements } from \"./animate-elements\"\n\nexport const createScopedWaapiAnimate = (scope?: AnimationScope) => {\n    function scopedAnimate(\n        elementOrSelector: ElementOrSelector,\n        keyframes: DOMKeyframesDefinition,\n        options?: DynamicAnimationOptions\n    ): AnimationPlaybackControlsWithThen {\n        return new GroupAnimationWithThen(\n            animateElements(\n                elementOrSelector,\n                keyframes as DOMKeyframesDefinition,\n                options,\n                scope\n            )\n        )\n    }\n\n    return scopedAnimate\n}\n\nexport const animateMini = /*@__PURE__*/ createScopedWaapiAnimate()\n"],"names":[],"mappings":";;;AAUO,MAAM,wBAAwB,GAAG,CAAC,KAAsB,KAAI;AAC/D,IAAA,SAAS,aAAa,CAClB,iBAAoC,EACpC,SAAiC,EACjC,OAAiC,EAAA;AAEjC,QAAA,OAAO,IAAI,sBAAsB,CAC7B,eAAe,CACX,iBAAiB,EACjB,SAAmC,EACnC,OAAO,EACP,KAAK,CACR,CACJ;IACL;AAEA,IAAA,OAAO,aAAa;AACxB;MAEa,WAAW,iBAAiB,wBAAwB;;;;"}