Mission Control Dashboard - Initial implementation

node_modules/motion-dom/dist/es/animation/interfaces/motion-value.mjs

@@ -0,0 +1,104 @@
+import { secondsToMilliseconds, MotionGlobalConfig } from 'motion-utils';
+import { AsyncMotionValueAnimation } from '../AsyncMotionValueAnimation.mjs';
+import { JSAnimation } from '../JSAnimation.mjs';
+import { getValueTransition } from '../utils/get-value-transition.mjs';
+import { makeAnimationInstant } from '../utils/make-animation-instant.mjs';
+import { getDefaultTransition } from '../utils/default-transitions.mjs';
+import { getFinalKeyframe } from '../keyframes/get-final.mjs';
+import { isTransitionDefined } from '../utils/is-transition-defined.mjs';
+import { frame } from '../../frameloop/frame.mjs';
+
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
+    const valueTransition = getValueTransition(transition, name) || {};
+    /**
+     * Most transition values are currently completely overwritten by value-specific
+     * transitions. In the future it'd be nicer to blend these transitions. But for now
+     * delay actually does inherit from the root transition if not value-specific.
+     */
+    const delay = valueTransition.delay || transition.delay || 0;
+    /**
+     * Elapsed isn't a public transition option but can be passed through from
+     * optimized appear effects in milliseconds.
+     */
+    let { elapsed = 0 } = transition;
+    elapsed = elapsed - secondsToMilliseconds(delay);
+    const options = {
+        keyframes: Array.isArray(target) ? target : [null, target],
+        ease: "easeOut",
+        velocity: value.getVelocity(),
+        ...valueTransition,
+        delay: -elapsed,
+        onUpdate: (v) => {
+            value.set(v);
+            valueTransition.onUpdate && valueTransition.onUpdate(v);
+        },
+        onComplete: () => {
+            onComplete();
+            valueTransition.onComplete && valueTransition.onComplete();
+        },
+        name,
+        motionValue: value,
+        element: isHandoff ? undefined : element,
+    };
+    /**
+     * If there's no transition defined for this value, we can generate
+     * unique transition settings for this value.
+     */
+    if (!isTransitionDefined(valueTransition)) {
+        Object.assign(options, getDefaultTransition(name, options));
+    }
+    /**
+     * Both WAAPI and our internal animation functions use durations
+     * as defined by milliseconds, while our external API defines them
+     * as seconds.
+     */
+    options.duration && (options.duration = secondsToMilliseconds(options.duration));
+    options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+    /**
+     * Support deprecated way to set initial value. Prefer keyframe syntax.
+     */
+    if (options.from !== undefined) {
+        options.keyframes[0] = options.from;
+    }
+    let shouldSkip = false;
+    if (options.type === false ||
+        (options.duration === 0 && !options.repeatDelay)) {
+        makeAnimationInstant(options);
+        if (options.delay === 0) {
+            shouldSkip = true;
+        }
+    }
+    if (MotionGlobalConfig.instantAnimations ||
+        MotionGlobalConfig.skipAnimations ||
+        element?.shouldSkipAnimations) {
+        shouldSkip = true;
+        makeAnimationInstant(options);
+        options.delay = 0;
+    }
+    /**
+     * If the transition type or easing has been explicitly set by the user
+     * then we don't want to allow flattening the animation.
+     */
+    options.allowFlatten = !valueTransition.type && !valueTransition.ease;
+    /**
+     * If we can or must skip creating the animation, and apply only
+     * the final keyframe, do so. We also check once keyframes are resolved but
+     * this early check prevents the need to create an animation at all.
+     */
+    if (shouldSkip && !isHandoff && value.get() !== undefined) {
+        const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
+        if (finalKeyframe !== undefined) {
+            frame.update(() => {
+                options.onUpdate(finalKeyframe);
+                options.onComplete();
+            });
+            return;
+        }
+    }
+    return valueTransition.isSync
+        ? new JSAnimation(options)
+        : new AsyncMotionValueAnimation(options);
+};
+
+export { animateMotionValue };
+//# sourceMappingURL=motion-value.mjs.map

node_modules/motion-dom/dist/es/animation/interfaces/visual-element-target.mjs

@@ -0,0 +1,100 @@
+import { getValueTransition } from '../utils/get-value-transition.mjs';
+import { resolveTransition } from '../utils/resolve-transition.mjs';
+import { positionalKeys } from '../../render/utils/keys-position.mjs';
+import { setTarget } from '../../render/utils/setters.mjs';
+import { addValueToWillChange } from '../../value/will-change/add-will-change.mjs';
+import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
+import { animateMotionValue } from './motion-value.mjs';
+import { frame } from '../../frameloop/frame.mjs';
+
+/**
+ * Decide whether we should block this animation. Previously, we achieved this
+ * just by checking whether the key was listed in protectedKeys, but this
+ * posed problems if an animation was triggered by afterChildren and protectedKeys
+ * had been set to true in the meantime.
+ */
+function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
+    const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
+    needsAnimating[key] = false;
+    return shouldBlock;
+}
+function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
+    let { transition, transitionEnd, ...target } = targetAndTransition;
+    const defaultTransition = visualElement.getDefaultTransition();
+    transition = transition
+        ? resolveTransition(transition, defaultTransition)
+        : defaultTransition;
+    const reduceMotion = transition?.reduceMotion;
+    if (transitionOverride)
+        transition = transitionOverride;
+    const animations = [];
+    const animationTypeState = type &&
+        visualElement.animationState &&
+        visualElement.animationState.getState()[type];
+    for (const key in target) {
+        const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
+        const valueTarget = target[key];
+        if (valueTarget === undefined ||
+            (animationTypeState &&
+                shouldBlockAnimation(animationTypeState, key))) {
+            continue;
+        }
+        const valueTransition = {
+            delay,
+            ...getValueTransition(transition || {}, key),
+        };
+        /**
+         * If the value is already at the defined target, skip the animation.
+         * We still re-assert the value via frame.update to take precedence
+         * over any stale transitionEnd callbacks from previous animations.
+         */
+        const currentValue = value.get();
+        if (currentValue !== undefined &&
+            !value.isAnimating() &&
+            !Array.isArray(valueTarget) &&
+            valueTarget === currentValue &&
+            !valueTransition.velocity) {
+            frame.update(() => value.set(valueTarget));
+            continue;
+        }
+        /**
+         * If this is the first time a value is being animated, check
+         * to see if we're handling off from an existing animation.
+         */
+        let isHandoff = false;
+        if (window.MotionHandoffAnimation) {
+            const appearId = getOptimisedAppearId(visualElement);
+            if (appearId) {
+                const startTime = window.MotionHandoffAnimation(appearId, key, frame);
+                if (startTime !== null) {
+                    valueTransition.startTime = startTime;
+                    isHandoff = true;
+                }
+            }
+        }
+        addValueToWillChange(visualElement, key);
+        const shouldReduceMotion = reduceMotion ?? visualElement.shouldReduceMotion;
+        value.start(animateMotionValue(key, value, valueTarget, shouldReduceMotion && positionalKeys.has(key)
+            ? { type: false }
+            : valueTransition, visualElement, isHandoff));
+        const animation = value.animation;
+        if (animation) {
+            animations.push(animation);
+        }
+    }
+    if (transitionEnd) {
+        const applyTransitionEnd = () => frame.update(() => {
+            transitionEnd && setTarget(visualElement, transitionEnd);
+        });
+        if (animations.length) {
+            Promise.all(animations).then(applyTransitionEnd);
+        }
+        else {
+            applyTransitionEnd();
+        }
+    }
+    return animations;
+}
+
+export { animateTarget };
+//# sourceMappingURL=visual-element-target.mjs.map

node_modules/motion-dom/dist/es/animation/interfaces/visual-element-variant.mjs

@@ -0,0 +1,60 @@
+import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
+import { calcChildStagger } from '../utils/calc-child-stagger.mjs';
+import { animateTarget } from './visual-element-target.mjs';
+
+function animateVariant(visualElement, variant, options = {}) {
+    const resolved = resolveVariant(visualElement, variant, options.type === "exit"
+        ? visualElement.presenceContext?.custom
+        : undefined);
+    let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
+    if (options.transitionOverride) {
+        transition = options.transitionOverride;
+    }
+    /**
+     * If we have a variant, create a callback that runs it as an animation.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    const getAnimation = resolved
+        ? () => Promise.all(animateTarget(visualElement, resolved, options))
+        : () => Promise.resolve();
+    /**
+     * If we have children, create a callback that runs all their animations.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
+        ? (forwardDelay = 0) => {
+            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
+            return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
+        }
+        : () => Promise.resolve();
+    /**
+     * If the transition explicitly defines a "when" option, we need to resolve either
+     * this animation or all children animations before playing the other.
+     */
+    const { when } = transition;
+    if (when) {
+        const [first, last] = when === "beforeChildren"
+            ? [getAnimation, getChildAnimations]
+            : [getChildAnimations, getAnimation];
+        return first().then(() => last());
+    }
+    else {
+        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
+    }
+}
+function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
+    const animations = [];
+    for (const child of visualElement.variantChildren) {
+        child.notify("AnimationStart", variant);
+        animations.push(animateVariant(child, variant, {
+            ...options,
+            delay: delay +
+                (typeof delayChildren === "function" ? 0 : delayChildren) +
+                calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
+        }).then(() => child.notify("AnimationComplete", variant)));
+    }
+    return Promise.all(animations);
+}
+
+export { animateVariant };
+//# sourceMappingURL=visual-element-variant.mjs.map

node_modules/motion-dom/dist/es/animation/interfaces/visual-element.mjs

@@ -0,0 +1,27 @@
+import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
+import { animateTarget } from './visual-element-target.mjs';
+import { animateVariant } from './visual-element-variant.mjs';
+
+function animateVisualElement(visualElement, definition, options = {}) {
+    visualElement.notify("AnimationStart", definition);
+    let animation;
+    if (Array.isArray(definition)) {
+        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
+        animation = Promise.all(animations);
+    }
+    else if (typeof definition === "string") {
+        animation = animateVariant(visualElement, definition, options);
+    }
+    else {
+        const resolvedDefinition = typeof definition === "function"
+            ? resolveVariant(visualElement, definition, options.custom)
+            : definition;
+        animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
+    }
+    return animation.then(() => {
+        visualElement.notify("AnimationComplete", definition);
+    });
+}
+
+export { animateVisualElement };
+//# sourceMappingURL=visual-element.mjs.map

node_modules/motion-dom/dist/es/animation/interfaces/visual-element.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-element.mjs","sources":["../../../../src/animation/interfaces/visual-element.ts"],"sourcesContent":["import { resolveVariant } from \"../../render/utils/resolve-dynamic-variants\"\nimport type { AnimationDefinition } from \"../../node/types\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport type { VisualElementAnimationOptions } from \"./types\"\nimport { animateTarget } from \"./visual-element-target\"\nimport { animateVariant } from \"./visual-element-variant\"\n\nexport function animateVisualElement(\n    visualElement: VisualElement,\n    definition: AnimationDefinition,\n    options: VisualElementAnimationOptions = {}\n) {\n    visualElement.notify(\"AnimationStart\", definition)\n    let animation: Promise<any>\n\n    if (Array.isArray(definition)) {\n        const animations = definition.map((variant) =>\n            animateVariant(visualElement, variant, options)\n        )\n        animation = Promise.all(animations)\n    } else if (typeof definition === \"string\") {\n        animation = animateVariant(visualElement, definition, options)\n    } else {\n        const resolvedDefinition =\n            typeof definition === \"function\"\n                ? resolveVariant(visualElement, definition, options.custom)\n                : definition\n\n        animation = Promise.all(\n            animateTarget(visualElement, resolvedDefinition, options)\n        )\n    }\n\n    return animation.then(() => {\n        visualElement.notify(\"AnimationComplete\", definition)\n    })\n}\n"],"names":[],"mappings":";;;;AAOM,SAAU,oBAAoB,CAChC,aAA4B,EAC5B,UAA+B,EAC/B,UAAyC,EAAE,EAAA;AAE3C,IAAA,aAAa,CAAC,MAAM,CAAC,gBAAgB,EAAE,UAAU,CAAC;AAClD,IAAA,IAAI,SAAuB;AAE3B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,OAAO,KACtC,cAAc,CAAC,aAAa,EAAE,OAAO,EAAE,OAAO,CAAC,CAClD;AACD,QAAA,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;IACvC;AAAO,SAAA,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;QACvC,SAAS,GAAG,cAAc,CAAC,aAAa,EAAE,UAAU,EAAE,OAAO,CAAC;IAClE;SAAO;AACH,QAAA,MAAM,kBAAkB,GACpB,OAAO,UAAU,KAAK;cAChB,cAAc,CAAC,aAAa,EAAE,UAAU,EAAE,OAAO,CAAC,MAAM;cACxD,UAAU;AAEpB,QAAA,SAAS,GAAG,OAAO,CAAC,GAAG,CACnB,aAAa,CAAC,aAAa,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAC5D;IACL;AAEA,IAAA,OAAO,SAAS,CAAC,IAAI,CAAC,MAAK;AACvB,QAAA,aAAa,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC;AACzD,IAAA,CAAC,CAAC;AACN;;;;"}