motion 12.36.0 → 12.38.0

package/README.md

@@ -39,8 +39,7 @@ npm install motion-v
 
 Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
 
-<details>
-<summary>React ⬇</summary>
+### React
 
 ```jsx
 import { motion } from "motion/react"
@@ -52,10 +51,9 @@ function Component() {
 
 Get started with [Motion for React](https://motion.dev/docs/react).
 
-</details>
+**Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
 
-<details>
-<summary>JavaScript ⬇</summary>
+### JS
 
 ```javascript
 import { animate } from "motion"
@@ -65,10 +63,7 @@ animate("#box", { x: 100 })
 
 Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
-</details>
-
-<details>
-<summary>Vue ⬇</summary>
+### Vue
 
 ```html
 <script>
@@ -80,19 +75,21 @@ Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
 Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
-</details>
+## 🎓 Examples & tutorials
 
-## 🎓 Examples
+Browse 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
 
-Browse 100+ free and 180+ premium [Motion Examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
+Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
 
 ## ⚡️ Motion+
 
 A one-time payment, lifetime-updates membership:
 
--   **180+ premium examples**
+-   **330+ examples**
+-   **100+ tutorials**
 -   **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
--   **Visual editing** for VS Code (alpha)
+-   **Transition editor** for Cursor and VS Code
+-   **AI skills**
 -   **Private Discord**
 -   **Early access content**
 
@@ -132,7 +129,7 @@ Motion drives the animations on the Cursor homepage, and is working with Cursor
 
 ### Gold
 
-<a href="https://lottiefiles.com"><img alt="LottieFiles" src="https://github.com/user-attachments/assets/4e99d8c7-4cba-43ee-93c5-93861ae708ec" width="200px" height="120px"></a> <a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
+<a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
 
 ### Silver
 

package/dist/motion.dev.js

@@ -1632,9 +1632,9 @@
         };
     }
 
-    const isNotNull$1 = (value) => value !== null;
-    function getFinalKeyframe$1(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
-        const resolvedKeyframes = keyframes.filter(isNotNull$1);
+    const isNotNull = (value) => value !== null;
+    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
+        const resolvedKeyframes = keyframes.filter(isNotNull);
         const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
         const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
         return !index || finalKeyframe === undefined
@@ -1699,6 +1699,14 @@
              * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
              */
             this.playbackSpeed = 1;
+            /**
+             * Reusable state object for the delay phase to avoid
+             * allocating a new object every frame.
+             */
+            this.delayState = {
+                done: false,
+                value: undefined,
+            };
             /**
              * This method is bound to the instance to fix a pattern where
              * animation.stop is returned as a reference from a useEffect.
@@ -1860,9 +1868,14 @@
              * This prevents delay: x, duration: 0 animations from finishing
              * instantly.
              */
-            const state = isInDelayPhase
-                ? { done: false, value: keyframes[0] }
-                : frameGenerator.next(elapsed);
+            let state;
+            if (isInDelayPhase) {
+                this.delayState.value = keyframes[0];
+                state = this.delayState;
+            }
+            else {
+                state = frameGenerator.next(elapsed);
+            }
             if (mixKeyframes && !isInDelayPhase) {
                 state.value = mixKeyframes(state.value);
             }
@@ -1877,7 +1890,7 @@
                 (this.state === "finished" || (this.state === "running" && done));
             // TODO: The exception for inertia could be cleaner here
             if (isAnimationFinished && type !== inertia) {
-                state.value = getFinalKeyframe$1(keyframes, this.options, finalKeyframe, this.speed);
+                state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
             }
             if (onUpdate) {
                 onUpdate(state.value);
@@ -2485,7 +2498,7 @@
             this.animation.onfinish = () => {
                 this.finishedTime = this.time;
                 if (!pseudoElement) {
-                    const keyframe = getFinalKeyframe$1(keyframes, this.options, finalKeyframe, this.speed);
+                    const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
                     if (this.updateMotionValue) {
                         this.updateMotionValue(keyframe);
                     }
@@ -2791,17 +2804,42 @@
     /**
      * A list of values that can be hardware-accelerated.
      */
-    const acceleratedValues$1 = new Set([
+    const acceleratedValues = new Set([
         "opacity",
         "clipPath",
         "filter",
         "transform",
-        // TODO: Could be re-enabled now we have support for linear() easing
+        // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
+        // or until we implement support for linear() easing.
         // "background-color"
     ]);
+
+    const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
+    function hasBrowserOnlyColors(keyframes) {
+        for (let i = 0; i < keyframes.length; i++) {
+            if (typeof keyframes[i] === "string" &&
+                browserColorFunctions.test(keyframes[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const colorProperties = new Set([
+        "color",
+        "backgroundColor",
+        "outlineColor",
+        "fill",
+        "stroke",
+        "borderColor",
+        "borderTopColor",
+        "borderRightColor",
+        "borderBottomColor",
+        "borderLeftColor",
+    ]);
     const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
     function supportsBrowserAnimation(options) {
-        const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+        const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
         const subject = motionValue?.owner?.current;
         /**
          * We use this check instead of isHTMLElement() because we explicitly
@@ -2815,7 +2853,13 @@
         const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
-            acceleratedValues$1.has(name) &&
+            /**
+             * Force WAAPI for color properties with browser-only color formats
+             * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
+             */
+            (acceleratedValues.has(name) ||
+                (colorProperties.has(name) &&
+                    hasBrowserOnlyColors(keyframes))) &&
             (name !== "transform" || !transformTemplate) &&
             /**
              * If we're outputting values to onUpdate then we can't use WAAPI as there's
@@ -2879,7 +2923,7 @@
             if (!canAnimate(keyframes, name, type, velocity)) {
                 canAnimateValue = false;
                 if (MotionGlobalConfig.instantAnimations || !delay) {
-                    onUpdate?.(getFinalKeyframe$1(keyframes, options, finalKeyframe));
+                    onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
                 }
                 keyframes[0] = keyframes[keyframes.length - 1];
                 makeAnimationInstant(options);
@@ -2922,12 +2966,21 @@
                 !isHandoff &&
                 supportsBrowserAnimation(resolvedOptions);
             const element = resolvedOptions.motionValue?.owner?.current;
-            const animation = useWaapi
-                ? new NativeAnimationExtended({
-                    ...resolvedOptions,
-                    element,
-                })
-                : new JSAnimation(resolvedOptions);
+            let animation;
+            if (useWaapi) {
+                try {
+                    animation = new NativeAnimationExtended({
+                        ...resolvedOptions,
+                        element,
+                    });
+                }
+                catch {
+                    animation = new JSAnimation(resolvedOptions);
+                }
+            }
+            else {
+                animation = new JSAnimation(resolvedOptions);
+            }
             animation.finished.then(() => {
                 this.notifyFinished();
             }).catch(noop$1);
@@ -3105,8 +3158,11 @@
     const animationMaps = new WeakMap();
     const animationMapKey = (name, pseudoElement = "") => `${name}:${pseudoElement}`;
     function getAnimationMap(element) {
-        const map = animationMaps.get(element) || new Map();
-        animationMaps.set(element, map);
+        let map = animationMaps.get(element);
+        if (!map) {
+            map = new Map();
+            animationMaps.set(element, map);
+        }
         return map;
     }
 
@@ -3198,17 +3254,6 @@
         return ease;
     };
 
-    const isNotNull = (value) => value !== null;
-    function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-        const resolvedKeyframes = keyframes.filter(isNotNull);
-        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-            ? 0
-            : resolvedKeyframes.length - 1;
-        return !index || finalKeyframe === undefined
-            ? resolvedKeyframes[index]
-            : finalKeyframe;
-    }
-
     /**
      * If `transition` has `inherit: true`, shallow-merge it with
      * `parentTransition` (child keys win) and strip the `inherit` key.
@@ -3232,13 +3277,29 @@
         return valueTransition;
     }
 
+    const orchestrationKeys = new Set([
+        "when",
+        "delay",
+        "delayChildren",
+        "staggerChildren",
+        "staggerDirection",
+        "repeat",
+        "repeatType",
+        "repeatDelay",
+        "from",
+        "elapsed",
+    ]);
     /**
      * Decide whether a transition is defined on a given Transition.
      * This filters out orchestration options and returns true
      * if any options are left.
      */
-    function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-        return !!Object.keys(transition).length;
+    function isTransitionDefined(transition) {
+        for (const key in transition) {
+            if (!orchestrationKeys.has(key))
+                return true;
+        }
+        return false;
     }
 
     const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
@@ -3802,13 +3863,16 @@
             };
             /**
              * 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 &&
+                !value.isAnimating() &&
                 !Array.isArray(valueTarget) &&
                 valueTarget === currentValue &&
                 !valueTransition.velocity) {
+                frame.update(() => value.set(valueTarget));
                 continue;
             }
             /**
@@ -4370,19 +4434,6 @@
         return true;
     });
 
-    /**
-     * A list of values that can be hardware-accelerated.
-     */
-    const acceleratedValues = new Set([
-        "opacity",
-        "clipPath",
-        "filter",
-        "transform",
-        // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-        // or until we implement support for linear() easing.
-        // "background-color"
-    ]);
-
     function resolveElements(elementOrSelector, scope, selectorCache) {
         if (elementOrSelector == null) {
             return [];
@@ -5268,6 +5319,7 @@
                 activeAnimation.stop();
                 activeAnimation = null;
             }
+            value.animation = undefined;
         };
         const startAnimation = () => {
             const currentValue = asNumber$1(value.get());
@@ -5299,8 +5351,10 @@
         // multiple calls within the same frame (e.g. rapid mouse events)
         const scheduleAnimation = () => {
             startAnimation();
+            value.animation = activeAnimation ?? undefined;
             value["events"].animationStart?.notify();
             activeAnimation?.then(() => {
+                value.animation = undefined;
                 value["events"].animationComplete?.notify();
             });
         };
@@ -6599,10 +6653,8 @@
                 node.options.layoutScroll &&
                 node.scroll &&
                 node !== node.root) {
-                transformBox(box, {
-                    x: -node.scroll.offset.x,
-                    y: -node.scroll.offset.y,
-                });
+                translateAxis(box.x, -node.scroll.offset.x);
+                translateAxis(box.y, -node.scroll.offset.y);
             }
             if (delta) {
                 // Incoporate each ancestor's scale into a cumulative treeScale for this component
@@ -6629,8 +6681,8 @@
         }
     }
     function translateAxis(axis, distance) {
-        axis.min = axis.min + distance;
-        axis.max = axis.max + distance;
+        axis.min += distance;
+        axis.max += distance;
     }
     /**
      * Apply a transform to an axis from the latest resolved motion values.
@@ -7651,21 +7703,27 @@
         calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
         calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
     }
-    function calcRelativeAxis(target, relative, parent) {
-        target.min = parent.min + relative.min;
+    function calcRelativeAxis(target, relative, parent, anchor = 0) {
+        const anchorPoint = anchor
+            ? mixNumber$1(parent.min, parent.max, anchor)
+            : parent.min;
+        target.min = anchorPoint + relative.min;
         target.max = target.min + calcLength(relative);
     }
-    function calcRelativeBox(target, relative, parent) {
-        calcRelativeAxis(target.x, relative.x, parent.x);
-        calcRelativeAxis(target.y, relative.y, parent.y);
+    function calcRelativeBox(target, relative, parent, anchor) {
+        calcRelativeAxis(target.x, relative.x, parent.x, anchor?.x);
+        calcRelativeAxis(target.y, relative.y, parent.y, anchor?.y);
     }
-    function calcRelativeAxisPosition(target, layout, parent) {
-        target.min = layout.min - parent.min;
+    function calcRelativeAxisPosition(target, layout, parent, anchor = 0) {
+        const anchorPoint = anchor
+            ? mixNumber$1(parent.min, parent.max, anchor)
+            : parent.min;
+        target.min = layout.min - anchorPoint;
         target.max = target.min + calcLength(layout);
     }
-    function calcRelativePosition(target, layout, parent) {
-        calcRelativeAxisPosition(target.x, layout.x, parent.x);
-        calcRelativeAxisPosition(target.y, layout.y, parent.y);
+    function calcRelativePosition(target, layout, parent, anchor) {
+        calcRelativeAxisPosition(target.x, layout.x, parent.x, anchor?.x);
+        calcRelativeAxisPosition(target.y, layout.y, parent.y, anchor?.y);
     }
 
     /**
@@ -7797,8 +7855,13 @@
         return transform || "none";
     }
 
-    const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
-    const numBorders = borders.length;
+    const borderLabels = [
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomLeftRadius",
+        "borderBottomRightRadius",
+    ];
+    const numBorders = borderLabels.length;
     const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
@@ -7813,7 +7876,7 @@
          * Mix border radius
          */
         for (let i = 0; i < numBorders; i++) {
-            const borderLabel = `border${borders[i]}Radius`;
+            const borderLabel = borderLabels[i];
             let followRadius = getRadius(follow, borderLabel);
             let leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)
@@ -8440,8 +8503,18 @@
                 // but should still clean up the measurements so that the next
                 // snapshot could be taken correctly.
                 if (updateWasBlocked) {
+                    const wasBlockedByResize = this.updateBlockedByResize;
                     this.unblockUpdate();
+                    this.updateBlockedByResize = false;
                     this.clearAllSnapshots();
+                    /**
+                     * When blocked by resize, still measure layouts so
+                     * callbacks like onLayoutMeasure fire (e.g. Reorder).
+                     * Skip notifyLayoutUpdate to prevent animations.
+                     */
+                    if (wasBlockedByResize) {
+                        this.nodes.forEach(forceLayoutMeasure);
+                    }
                     this.nodes.forEach(clearMeasurements);
                     return;
                 }
@@ -8458,6 +8531,11 @@
                 }
                 else {
                     this.isUpdating = false;
+                    /**
+                     * Ensure animation-blocked nodes (e.g. during drag)
+                     * get measured even when memoized (willUpdate skipped).
+                     */
+                    this.nodes.forEach(ensureDraggedNodesSnapshotted);
                     /**
                      * Write
                      */
@@ -8556,7 +8634,8 @@
                 const prevLayout = this.layout;
                 this.layout = this.measure(false);
                 this.layoutVersion++;
-                this.layoutCorrected = createBox();
+                if (!this.layoutCorrected)
+                    this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
                 this.notifyListeners("measure", this.layout.layoutBox);
@@ -8667,8 +8746,8 @@
                 }
                 return boxWithoutScroll;
             }
-            applyTransform(box, transformOnly = false) {
-                const withTransforms = createBox();
+            applyTransform(box, transformOnly = false, output) {
+                const withTransforms = output || createBox();
                 copyBoxInto(withTransforms, box);
                 for (let i = 0; i < this.path.length; i++) {
                     const node = this.path[i];
@@ -8676,10 +8755,8 @@
                         node.options.layoutScroll &&
                         node.scroll &&
                         node !== node.root) {
-                        transformBox(withTransforms, {
-                            x: -node.scroll.offset.x,
-                            y: -node.scroll.offset.y,
-                        });
+                        translateAxis(withTransforms.x, -node.scroll.offset.x);
+                        translateAxis(withTransforms.y, -node.scroll.offset.y);
                     }
                     if (!hasTransform(node.latestValues))
                         continue;
@@ -8787,7 +8864,9 @@
                  * even if no animation has started.
                  */
                 if (!this.targetDelta && !this.relativeTarget) {
-                    if (relativeParent && relativeParent.layout) {
+                    if (this.options.layoutAnchor !== false &&
+                        relativeParent &&
+                        relativeParent.layout) {
                         this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     }
                     else {
@@ -8815,15 +8894,14 @@
                     this.relativeParent &&
                     this.relativeParent.target) {
                     this.forceRelativeParentToResolveTarget();
-                    calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
+                    calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target, this.options.layoutAnchor || undefined);
                     /**
                      * If we've only got a targetDelta, resolve it into a target
                      */
                 }
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
-                        // TODO: This is creating a new object every frame
-                        this.target = this.applyTransform(this.layout.layoutBox);
+                        this.applyTransform(this.layout.layoutBox, false, this.target);
                     }
                     else {
                         copyBoxInto(this.target, this.layout.layoutBox);
@@ -8841,7 +8919,8 @@
                  */
                 if (this.attemptToResolveRelativeTarget) {
                     this.attemptToResolveRelativeTarget = false;
-                    if (relativeParent &&
+                    if (this.options.layoutAnchor !== false &&
+                        relativeParent &&
                         Boolean(relativeParent.resumingFrom) ===
                             Boolean(this.resumingFrom) &&
                         !relativeParent.options.layoutScroll &&
@@ -8885,7 +8964,7 @@
                 this.forceRelativeParentToResolveTarget();
                 this.relativeTarget = createBox();
                 this.relativeTargetOrigin = createBox();
-                calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
+                calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout, this.options.layoutAnchor || undefined);
                 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
             }
             removeRelativeTarget() {
@@ -9057,7 +9136,7 @@
                         this.layout &&
                         this.relativeParent &&
                         this.relativeParent.layout) {
-                        calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
+                        calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox, this.options.layoutAnchor || undefined);
                         mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                         /**
                          * If this is an unchanged relative target we can consider the
@@ -9476,10 +9555,11 @@
                 if (relativeParent && !relativeParent.resumeFrom) {
                     const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                     if (parentSnapshot && parentLayout) {
+                        const anchor = node.options.layoutAnchor || undefined;
                         const relativeSnapshot = createBox();
-                        calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
+                        calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox, anchor);
                         const relativeLayout = createBox();
-                        calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
+                        calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox, anchor);
                         if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
                             hasRelativeLayoutChanged = true;
                         }
@@ -9551,9 +9631,25 @@
     function clearMeasurements(node) {
         node.clearMeasurements();
     }
+    function forceLayoutMeasure(node) {
+        node.isLayoutDirty = true;
+        node.updateLayout();
+    }
     function clearIsLayoutDirty(node) {
         node.isLayoutDirty = false;
     }
+    /**
+     * When a node is animation-blocked (e.g. during drag) and its component
+     * didn't re-render (memoized), willUpdate() is never called so there's
+     * no snapshot. Use the previous layout as a snapshot and mark dirty so
+     * resetTransform/updateLayout/notifyLayoutUpdate process it normally.
+     */
+    function ensureDraggedNodesSnapshotted(node) {
+        if (node.isAnimationBlocked && node.layout && !node.isLayoutDirty) {
+            node.snapshot = node.layout;
+            node.isLayoutDirty = true;
+        }
+    }
     function resetTransformStyle(node) {
         const { visualElement } = node.options;
         if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
@@ -10992,16 +11088,48 @@
         [ScrollOffset.Any, "cover"],
         [ScrollOffset.All, "contain"],
     ];
-    function matchesPreset(offset, preset) {
+    const stringToProgress = {
+        start: 0,
+        end: 1,
+    };
+    function parseStringOffset(s) {
+        const parts = s.trim().split(/\s+/);
+        if (parts.length !== 2)
+            return undefined;
+        const a = stringToProgress[parts[0]];
+        const b = stringToProgress[parts[1]];
+        if (a === undefined || b === undefined)
+            return undefined;
+        return [a, b];
+    }
+    function normaliseOffset(offset) {
         if (offset.length !== 2)
+            return undefined;
+        const result = [];
+        for (const item of offset) {
+            if (Array.isArray(item)) {
+                result.push(item);
+            }
+            else if (typeof item === "string") {
+                const parsed = parseStringOffset(item);
+                if (!parsed)
+                    return undefined;
+                result.push(parsed);
+            }
+            else {
+                return undefined;
+            }
+        }
+        return result;
+    }
+    function matchesPreset(offset, preset) {
+        const normalised = normaliseOffset(offset);
+        if (!normalised)
             return false;
         for (let i = 0; i < 2; i++) {
-            const o = offset[i];
+            const o = normalised[i];
             const p = preset[i];
-            if (!Array.isArray(o) ||
-                o.length !== 2 ||
-                o[0] !== p[0] ||
-                o[1] !== p[1])
+            if (o[0] !== p[0] || o[1] !== p[1])
                 return false;
         }
         return true;