motion 14.2.0 → 14.3.1

package/dist/motion.dev.js

@@ -556,8 +556,9 @@
     const VAR_TOKEN = "var";
     const VAR_FUNCTION_TOKEN = "var(";
     const SPLIT_TOKEN = "${}";
-    // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
-    const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
+    // this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`.
+    // The lookahead skips digits in function names, like the 3 in matrix3d(.
+    const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)(?![a-z]*\()/giu;
     /**
      * Whether analyseComplexValue(value) would find any values, without
      * tokenising the string. CSS variables are resolved before this is
@@ -2499,6 +2500,7 @@
         translateY: 5,
         scaleX: 0,
         scaleY: 3,
+        scaleZ: () => 1,
         scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
         rotate,
         rotateZ: rotate,
@@ -2513,8 +2515,8 @@
         return angle;
     };
     const rotateZ = rotate;
-    const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
-    const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+    const scaleX = (v) => Math.hypot(v[0], v[1]);
+    const scaleY = (v) => Math.hypot(v[4], v[5]);
     const matrix3dParsers = {
         x: 12,
         y: 13,
@@ -2524,6 +2526,7 @@
         translateZ: 14,
         scaleX,
         scaleY,
+        scaleZ: (v) => Math.hypot(v[8], v[9], v[10]),
         scale: (v) => (scaleX(v) + scaleY(v)) / 2,
         rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
         rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
@@ -2583,6 +2586,7 @@
         "scale",
         "scaleX",
         "scaleY",
+        "scaleZ",
         "rotate",
         "rotateX",
         "rotateY",
@@ -3542,6 +3546,7 @@
         constructor(options) {
             const element = getOwner(options).current;
             const { driver = frameloopDriver } = options;
+            let animation;
             /**
              * Before JSAnimation replaces the type with its generator.
              */
@@ -3571,11 +3576,12 @@
                     stop: () => {
                         js.stop();
                         const group = getGroup(element);
-                        group?.schedule(!group.isFinishing);
+                        group && !group.isFinishing && group.release(animation);
                     },
                 };
             };
             super(options);
+            animation = this;
             this.canAccelerate = canAccelerate;
             /**
              * stop is bound in JSAnimation, so wrap it rather than override.
@@ -3731,8 +3737,14 @@
             }
             return super.time;
         }
+        /**
+         * A JS animation sets its motion value from a seek on its next tick.
+         * This doesn't tick, so set it now, rather than leave it to be set
+         * when this next stops.
+         */
         set time(newTime) {
             super.time = newTime;
+            this.isAccelerated() && this.sync();
         }
         /**
          * Scroll timelines set time every frame, so run these on the main
@@ -3760,6 +3772,7 @@
         let segments = [];
         let needsBuild = false;
         let isScheduled = false;
+        let isEnded = false;
         let hasChurned = false;
         let lastChurn = -Infinity;
         const has = (key) => {
@@ -3876,8 +3889,19 @@
             for (const track of moving) {
                 const values = at.map((t) => track.numberAt(t));
                 const [first] = values;
-                const range = values[values.length - 1] - first;
-                const progress = values.map((value) => range ? (value - first) / range : value - first);
+                const changes = values.map((value) => value - first);
+                const end = changes[changes.length - 1];
+                /**
+                 * A value that ends only a tiny way from where it started, as
+                 * a round trip does if it's built just after it starts, or
+                 * from a float residue, ends where it started. Dividing by
+                 * that tiny range would stretch the easing to values the
+                 * compositor can't render.
+                 */
+                const range = changes.some((change) => Math.abs(change) * easingTolerance > Math.abs(end))
+                    ? 0
+                    : end;
+                const progress = changes.map((change) => range ? change / range : change);
                 /**
                  * A value that doesn't change, like one still in its delay,
                  * fits any easing. One that changes but ends where it started
@@ -4179,6 +4203,18 @@
             }
             return true;
         };
+        /**
+         * If no animations are left, write where they got to and cancel the
+         * WAAPI animations. Returns whether the group ended.
+         */
+        const end = () => {
+            if (tracks.size)
+                return false;
+            isEnded = true;
+            transformGroups.delete(element);
+            group.isJS || stop();
+            return true;
+        };
         const build = () => {
             const now = time.now();
             /**
@@ -4206,15 +4242,14 @@
                 group.isFinishing = false;
             }
             isScheduled = false;
+            if (isEnded)
+                return;
             tracks.forEach(({ state }, track) => {
                 if (state === "idle" || state === "finished")
                     tracks.delete(track);
             });
-            if (!tracks.size) {
-                transformGroups.delete(element);
-                group.isJS || stop();
+            if (end())
                 return;
-            }
             for (const track of tracks) {
                 if (!track.canAccelerate)
                     return group.demote(true);
@@ -4246,6 +4281,8 @@
             isJS: false,
             isFinishing: false,
             schedule(build_, isChurn) {
+                if (isEnded)
+                    return;
                 needsBuild || (needsBuild = build_);
                 hasChurned || (hasChurned = !!isChurn);
                 /**
@@ -4260,6 +4297,21 @@
                         : queueMicrotask(build);
                 }
             },
+            /**
+             * End the group now, rather than when it next builds, so the
+             * element's transform is the caller's again as soon as its last
+             * animation is stopped.
+             */
+            release(track) {
+                /**
+                 * Only drop the stopped animation. Others can be idle because
+                 * they're part way through play(), and are about to run.
+                 */
+                const { state } = track;
+                if (state === "idle" || state === "finished")
+                    tracks.delete(track);
+                end() || group.schedule(true);
+            },
             /**
              * An outside write. Rebuild once, but if it keeps happening, move
              * to the main thread.
@@ -4274,7 +4326,7 @@
                 }
             },
             demote(canReturn) {
-                if (group.isJS)
+                if (group.isJS || isEnded)
                     return;
                 /**
                  * Unless only another animation is holding the group on the
@@ -5281,11 +5333,11 @@
                 }
                 return sample({ x: tx, y: ty }, { x: 0, y: 0 });
             },
-            animateVisualElement(visualElement, target, transition, delay, animations) {
+            animateValues(getValue, target, transition, delay, animations) {
                 if (!("x" in target || "y" in target))
                     return;
-                const xValue = visualElement.getValue("x", visualElement.latestValues["x"] ?? 0);
-                const yValue = visualElement.getValue("y", visualElement.latestValues["y"] ?? 0);
+                const xValue = getValue("x");
+                const yValue = getValue("y");
                 const xRaw = target.x;
                 const yRaw = target.y;
                 const xFrom = (Array.isArray(xRaw) && xRaw[0] != null
@@ -5308,7 +5360,7 @@
                 // concurrent rotate animation composes and nothing accumulates
                 // on interrupt.
                 const pathRotationValue = interpolate(0).rotate !== undefined
-                    ? visualElement.getValue("pathRotation", 0)
+                    ? getValue("pathRotation")
                     : undefined;
                 const pathTransition = {
                     delay,
@@ -5518,7 +5570,9 @@
         const path = transition?.path;
         if (path) {
             // path mutates `target` to claim x/y; loop below skips them.
-            path.animateVisualElement(visualElement, target, transition, delay, animations);
+            path.animateValues
+                ? path.animateValues((key) => visualElement.getValue(key, visualElement.latestValues[key] ?? 0), target, transition, delay, animations)
+                : path.animateVisualElement?.(visualElement, target, transition, delay, animations);
         }
         for (const key in target) {
             const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
@@ -5977,8 +6031,16 @@
      */
     function animateValues(getValue, keyframes, transition = {}, element) {
         const animations = [];
-        const { velocity } = transition;
+        const { velocity, path } = transition;
         const reduceMotion = transition.reduceMotion ?? element?.shouldReduceMotion;
+        /**
+         * Only elements have x/y to move along a path. path claims them by
+         * deleting them, so hand it a copy.
+         */
+        if (path?.animateValues && element) {
+            keyframes = { ...keyframes };
+            path.animateValues(getValue, keyframes, transition, 0, animations);
+        }
         for (const key in keyframes) {
             if (key === "transition" || key === "transitionEnd")
                 continue;
@@ -6583,7 +6645,7 @@
         }
     }
     const addSVGValue = (element, state, key, value) => {
-        if (key.startsWith("path")) {
+        if (key.startsWith("path") && !transformProps.has(key)) {
             return addSVGPathValue(element, state, key, value);
         }
         else if (key.startsWith("attr")) {
@@ -6684,6 +6746,7 @@
             values.rotate ||
             values.rotateX ||
             values.rotateY ||
+            values.rotateZ ||
             values.skewX ||
             values.skewY);
     }
@@ -7367,13 +7430,46 @@
             return from === "last" ? lastIndex : lastIndex / 2;
         }
     }
-    function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+    function stagger(duration = 0.1, { startDelay = 0, from = 0, ease, grid } = {}) {
+        /**
+         * Distances from the origin for each element count. The final entry
+         * holds the distance used to normalise easing.
+         */
+        const cache = {};
         return (i, total) => {
-            const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-            const distance = Math.abs(fromIndex - i);
-            let delay = duration * distance;
-            if (ease) {
-                const maxDelay = total * duration;
+            let distances = cache[total];
+            if (!distances) {
+                const [columns, rows] = grid || [Infinity, 1];
+                const lastX = Math.min(columns, total) - 1;
+                const lastY = Math.max(rows, Math.ceil(total / columns)) - 1;
+                const isIndex = typeof from === "number";
+                const scale = from === "first" ? 0 : from === "last" ? 1 : 0.5;
+                const originX = isIndex ? from % columns : lastX * scale;
+                const originY = isIndex ? Math.floor(from / columns) : lastY * scale;
+                distances = cache[total] = [];
+                for (let j = 0; j < total; j++) {
+                    const x = j % columns;
+                    const y = Math.floor(j / columns);
+                    const edgeX = Math.min(x, lastX - x);
+                    const edgeY = Math.min(y, lastY - y);
+                    if (from === "random") {
+                        // Inside-out shuffle, so each element gets a distinct step
+                        const k = (Math.random() * (j + 1)) | 0;
+                        distances[j] = distances[k];
+                        distances[k] = j;
+                    }
+                    else {
+                        distances[j] =
+                            from === "edges"
+                                ? Math.min(lastX ? edgeX : edgeY, lastY ? edgeY : edgeX)
+                                : Math.hypot(x - originX, y - originY);
+                    }
+                }
+                distances.push(grid ? Math.max(...distances) : total);
+            }
+            let delay = duration * distances[i];
+            const maxDelay = duration * distances[total];
+            if (ease && maxDelay) {
                 const easingFunction = easingDefinitionToFunction(ease);
                 delay = easingFunction(delay / maxDelay) * maxDelay;
             }
@@ -7607,7 +7703,7 @@
         }, stopAnimation);
         if (isMotionValue(source)) {
             let skipNextAnimation = options.skipInitialAnimation === true;
-            const removeSourceOnChange = source.on("change", (v) => {
+            const onSourceChange = (v) => {
                 if (skipNextAnimation) {
                     skipNextAnimation = false;
                     value.jump(parseValue(v, unit), false);
@@ -7615,11 +7711,28 @@
                 else {
                     value.set(parseValue(v, unit));
                 }
-            });
+            };
+            const removeSourceOnChange = source.on("change", onSourceChange);
+            /**
+             * Catch up on a change made before we subscribed, for instance
+             * between a React render reading the source and the effect
+             * attaching to it. Subtracting is falsy for equal or non-numeric
+             * (NaN) values.
+             */
+            const latest = source.get();
+            if (asNumber(latest) - asNumber(value.get()))
+                onSourceChange(latest);
             const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
+            /**
+             * Stop our animation on detach, otherwise a re-attach (new
+             * options, Strict Mode) starts a second animation that fights
+             * this orphaned one. The catch-up above resumes from the
+             * current value and velocity.
+             */
             return () => {
                 removeSourceOnChange();
                 removeValueOnDestroy();
+                stopAnimation();
             };
         }
         return stopAnimation;
@@ -9782,8 +9895,13 @@
     function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
         for (const key in props) {
-            if (isMotionValue(props[key]) ||
-                isMotionValue(prevProps[key])) {
+            /**
+             * A MotionValue child is rendered as text content by
+             * DOMVisualElement, so it mustn't also be written as an attribute.
+             */
+            if (key !== "children" &&
+                (isMotionValue(props[key]) ||
+                    isMotionValue(prevProps[key]))) {
                 const targetKey = transformPropOrder.indexOf(key) !== -1
                     ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
                     : key;
@@ -10414,7 +10532,7 @@
             transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
         }
         if (latestTransform) {
-            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, skewX, skewY, } = latestTransform;
+            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, rotateZ, skewX, skewY, } = latestTransform;
             if (transformPerspective)
                 transform = `perspective(${transformPerspective}px) ${transform}`;
             if (rotate)
@@ -10426,6 +10544,8 @@
                 transform += `rotateX(${rotateX}deg) `;
             if (rotateY)
                 transform += `rotateY(${rotateY}deg) `;
+            if (rotateZ)
+                transform += `rotateZ(${rotateZ}deg) `;
             if (skewX)
                 transform += `skewX(${skewX}deg) `;
             if (skewY)
@@ -10444,6 +10564,15 @@
     }
 
     const numBorders = cornerRadiusProps.length;
+    const mixedTransforms = [
+        "rotate",
+        "rotateX",
+        "rotateY",
+        "rotateZ",
+        "skewX",
+        "skewY",
+    ];
+    const numMixedTransforms = mixedTransforms.length;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         if (shouldCrossfadeOpacity) {
@@ -10478,10 +10607,14 @@
             }
         }
         /**
-         * Mix rotation
+         * Mix rotation and skew. These can't be projected, so mix them every
+         * frame rather than leaving them frozen at the animation-start snapshot.
          */
-        if (follow.rotate || lead.rotate) {
-            target.rotate = mixNumber$1(follow.rotate || 0, lead.rotate || 0, progress);
+        for (let i = 0; i < numMixedTransforms; i++) {
+            const key = mixedTransforms[i];
+            if (follow[key] || lead[key]) {
+                target[key] = mixNumber$1(follow[key] || 0, lead[key] || 0, progress);
+            }
         }
     }
     function getRadius(values, radiusName) {
@@ -10931,82 +11064,92 @@
                 if (layoutId) {
                     this.root.registerSharedNode(layoutId, this);
                 }
-                // Only register the handler if it requires layout animation
-                if (this.options.animate !== false &&
-                    visualElement &&
-                    (layoutId || layout)) {
-                    this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => {
-                        if (this.isAnimationBlocked) {
-                            this.target = undefined;
-                            this.relativeTarget = undefined;
-                            return;
+                this.addLayoutListener();
+            }
+            /**
+             * Only register the layout animation handler if this node requires
+             * layout animation. This is called on mount, and again whenever options
+             * change, as `layout` or `layoutId` may be enabled after mount.
+             */
+            addLayoutListener() {
+                const { layoutId, layout, visualElement, animate } = this.options;
+                if (!this.instance ||
+                    this.hasLayoutListener ||
+                    animate === false ||
+                    !visualElement ||
+                    !(layoutId || layout))
+                    return;
+                this.hasLayoutListener = true;
+                this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => {
+                    if (this.isAnimationBlocked) {
+                        this.target = undefined;
+                        this.relativeTarget = undefined;
+                        return;
+                    }
+                    // TODO: Check here if an animation exists
+                    const layoutTransition = this.options.transition ||
+                        visualElement.getDefaultTransition() ||
+                        defaultLayoutTransition;
+                    const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
+                    /**
+                     * The target layout of the element might stay the same,
+                     * but its position relative to its parent has changed.
+                     */
+                    const hasTargetChanged = !this.targetLayout ||
+                        !boxEqualsRounded(this.targetLayout, newLayout);
+                    /*
+                     * Note: Disabled to fix relative animations always triggering new
+                     * layout animations. If this causes further issues, we can try
+                     * a different approach to detecting relative target changes.
+                     */
+                    // || hasRelativeLayoutChanged
+                    /**
+                     * If the layout hasn't seemed to have changed, it might be that the
+                     * element is visually in the same place in the document but its position
+                     * relative to its parent has indeed changed. So here we check for that.
+                     */
+                    const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
+                    if (this.options.layoutRoot ||
+                        this.resumeFrom ||
+                        hasOnlyRelativeTargetChanged ||
+                        (hasLayoutChanged &&
+                            (hasTargetChanged || !this.currentAnimation))) {
+                        if (this.resumeFrom) {
+                            this.resumingFrom = this.resumeFrom;
+                            this.resumingFrom.resumingFrom = undefined;
+                        }
+                        const animationOptions = {
+                            ...getValueTransition$1(layoutTransition, "layout"),
+                            onPlay: onLayoutAnimationStart,
+                            onComplete: onLayoutAnimationComplete,
+                        };
+                        if (visualElement.shouldReduceMotion ||
+                            this.options.layoutRoot) {
+                            animationOptions.delay = 0;
+                            animationOptions.type = false;
                         }
-                        // TODO: Check here if an animation exists
-                        const layoutTransition = this.options.transition ||
-                            visualElement.getDefaultTransition() ||
-                            defaultLayoutTransition;
-                        const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
+                        this.startAnimation(animationOptions);
                         /**
-                         * The target layout of the element might stay the same,
-                         * but its position relative to its parent has changed.
-                         */
-                        const hasTargetChanged = !this.targetLayout ||
-                            !boxEqualsRounded(this.targetLayout, newLayout);
-                        /*
-                         * Note: Disabled to fix relative animations always triggering new
-                         * layout animations. If this causes further issues, we can try
-                         * a different approach to detecting relative target changes.
+                         * Set animation origin after starting animation to avoid layout jump
+                         * caused by stopping previous layout animation
                          */
-                        // || hasRelativeLayoutChanged
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged, animationOptions.path);
+                    }
+                    else {
                         /**
-                         * If the layout hasn't seemed to have changed, it might be that the
-                         * element is visually in the same place in the document but its position
-                         * relative to its parent has indeed changed. So here we check for that.
+                         * If the layout hasn't changed and we have an animation that hasn't started yet,
+                         * finish it immediately. Otherwise it will be animating from a location
+                         * that was probably never committed to screen and look like a jumpy box.
                          */
-                        const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
-                        if (this.options.layoutRoot ||
-                            this.resumeFrom ||
-                            hasOnlyRelativeTargetChanged ||
-                            (hasLayoutChanged &&
-                                (hasTargetChanged || !this.currentAnimation))) {
-                            if (this.resumeFrom) {
-                                this.resumingFrom = this.resumeFrom;
-                                this.resumingFrom.resumingFrom = undefined;
-                            }
-                            const animationOptions = {
-                                ...getValueTransition$1(layoutTransition, "layout"),
-                                onPlay: onLayoutAnimationStart,
-                                onComplete: onLayoutAnimationComplete,
-                            };
-                            if (visualElement.shouldReduceMotion ||
-                                this.options.layoutRoot) {
-                                animationOptions.delay = 0;
-                                animationOptions.type = false;
-                            }
-                            this.startAnimation(animationOptions);
-                            /**
-                             * Set animation origin after starting animation to avoid layout jump
-                             * caused by stopping previous layout animation
-                             */
-                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged, animationOptions
-                                .path);
+                        if (!hasLayoutChanged) {
+                            finishAnimation(this);
                         }
-                        else {
-                            /**
-                             * If the layout hasn't changed and we have an animation that hasn't started yet,
-                             * finish it immediately. Otherwise it will be animating from a location
-                             * that was probably never committed to screen and look like a jumpy box.
-                             */
-                            if (!hasLayoutChanged) {
-                                finishAnimation(this);
-                            }
-                            if (this.isLead() && this.options.onExitComplete) {
-                                this.options.onExitComplete();
-                            }
+                        if (this.isLead() && this.options.onExitComplete) {
+                            this.options.onExitComplete();
                         }
-                        this.targetLayout = newLayout;
-                    });
-                }
+                    }
+                    this.targetLayout = newLayout;
+                });
             }
             unmount() {
                 this.options.layoutId && this.willUpdate();
@@ -11016,6 +11159,7 @@
                 this.parent && this.parent.children.delete(this);
                 this.instance = undefined;
                 this.eventHandlers.clear();
+                this.hasLayoutListener = false;
                 cancelFrame(this.updateProjection);
             }
             // only on the root
@@ -11186,7 +11330,16 @@
             }
             clearAllSnapshots() {
                 this.nodes.forEach(clearSnapshot);
-                this.sharedNodes.forEach(removeLeadSnapshots);
+                /**
+                 * A stack's last member can unmount while a replacement with the
+                 * same layoutId mounts in the same commit, so the stack (and its
+                 * lead) must outlive the unmount for the replacement to resume
+                 * from it. By now that handoff has happened, so stacks that are
+                 * still empty only retain unmounted nodes and can be released.
+                 */
+                this.sharedNodes.forEach((stack, layoutId) => stack.members.length
+                    ? stack.removeLeadSnapshot()
+                    : this.sharedNodes.delete(layoutId));
             }
             scheduleUpdateProjection() {
                 if (!this.projectionUpdateScheduled) {
@@ -11410,6 +11563,7 @@
                     ...options,
                     crossfade: options.crossfade !== undefined ? options.crossfade : true,
                 };
+                this.addLayoutListener();
             }
             clearMeasurements() {
                 this.scroll = undefined;
@@ -12339,9 +12493,6 @@
     function resetSkewAndRotation(node) {
         node.resetSkewAndRotation();
     }
-    function removeLeadSnapshots(stack) {
-        stack.removeLeadSnapshot();
-    }
     function mixAxisDeltaLinear(output, delta, p) {
         output.translate = mixNumber$1(delta.translate, 0, p);
         output.scale = mixNumber$1(delta.scale, 1, p);