framer-motion 12.35.2 → 12.37.0

package/dist/framer-motion.dev.js

@@ -324,7 +324,11 @@
     const backIn = /*@__PURE__*/ reverseEasing(backOut);
     const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
 
-    const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+    const anticipate = (p) => p >= 1
+        ? 1
+        : (p *= 2) < 1
+            ? 0.5 * backIn(p)
+            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const circIn = (p) => 1 - Math.sin(Math.acos(p));
     const circOut = reverseEasing(circIn);
@@ -443,8 +447,7 @@
                 const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
-                if (!queue.has(callback))
-                    queue.add(callback);
+                queue.add(callback);
                 return callback;
             },
             /**
@@ -469,7 +472,10 @@
                     return;
                 }
                 isProcessing = true;
-                [thisFrame, nextFrame] = [nextFrame, thisFrame];
+                // Swap this frame and the next to avoid GC
+                const prevFrame = thisFrame;
+                thisFrame = nextFrame;
+                nextFrame = prevFrame;
                 // Execute this frame
                 thisFrame.forEach(triggerCallback);
                 /**
@@ -508,11 +514,12 @@
         }, {});
         const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
         const processBatch = () => {
-            const timestamp = MotionGlobalConfig.useManualTiming
+            const useManualTiming = MotionGlobalConfig.useManualTiming;
+            const timestamp = useManualTiming
                 ? state.timestamp
                 : performance.now();
             runNextFrame = false;
-            if (!MotionGlobalConfig.useManualTiming) {
+            if (!useManualTiming) {
                 state.delta = useDefaultElapsed
                     ? 1000 / 60
                     : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
@@ -1704,9 +1711,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
@@ -1771,6 +1778,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.
@@ -1932,9 +1947,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);
             }
@@ -1949,7 +1969,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);
@@ -2244,8 +2264,18 @@
     }
     const positionalValues = {
         // Dimensions
-        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+        width: ({ x }, { paddingLeft = "0", paddingRight = "0", boxSizing }) => {
+            const width = x.max - x.min;
+            return boxSizing === "border-box"
+                ? width
+                : width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        },
+        height: ({ y }, { paddingTop = "0", paddingBottom = "0", boxSizing }) => {
+            const height = y.max - y.min;
+            return boxSizing === "border-box"
+                ? height
+                : height - parseFloat(paddingTop) - parseFloat(paddingBottom);
+        },
         top: (_bbox, { top }) => parseFloat(top),
         left: (_bbox, { left }) => parseFloat(left),
         bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
@@ -2547,7 +2577,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);
                     }
@@ -2853,17 +2883,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
@@ -2877,7 +2932,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
@@ -2937,9 +2998,11 @@
              * If we can't animate this value with the resolved keyframes
              * then we should complete it immediately.
              */
+            let canAnimateValue = true;
             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);
@@ -2974,15 +3037,29 @@
              * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
              * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
              * optimised animation.
+             *
+             * Also skip WAAPI when keyframes aren't animatable, as the resolved
+             * values may not be valid CSS and would trigger browser warnings.
              */
-            const useWaapi = !isHandoff && supportsBrowserAnimation(resolvedOptions);
+            const useWaapi = canAnimateValue &&
+                !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);
@@ -3160,8 +3237,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;
     }
 
@@ -3253,17 +3333,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.
@@ -3287,13 +3356,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) => {
@@ -4425,19 +4510,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 [];
@@ -4583,7 +4655,9 @@
      * that works across iframes
      */
     function isHTMLElement(element) {
-        return isObject(element) && "offsetHeight" in element;
+        return (isObject(element) &&
+            "offsetHeight" in element &&
+            !("ownerSVGElement" in element));
     }
 
     const translateAlias$1 = {
@@ -5321,6 +5395,7 @@
                 activeAnimation.stop();
                 activeAnimation = null;
             }
+            value.animation = undefined;
         };
         const startAnimation = () => {
             const currentValue = asNumber$1(value.get());
@@ -5352,8 +5427,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();
             });
         };
@@ -5363,7 +5440,16 @@
             frame.postRender(scheduleAnimation);
         }, stopAnimation);
         if (isMotionValue(source)) {
-            const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
+            let skipNextAnimation = options.skipInitialAnimation === true;
+            const removeSourceOnChange = source.on("change", (v) => {
+                if (skipNextAnimation) {
+                    skipNextAnimation = false;
+                    value.jump(parseValue(v, unit), false);
+                }
+                else {
+                    value.set(parseValue(v, unit));
+                }
+            });
             const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
             return () => {
                 removeSourceOnChange();
@@ -6643,10 +6729,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
@@ -6673,8 +6757,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.
@@ -7841,8 +7925,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) {
@@ -7857,7 +7946,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)
@@ -8502,6 +8591,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
                      */
@@ -8600,7 +8694,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);
@@ -8711,8 +8806,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];
@@ -8720,10 +8815,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;
@@ -8866,8 +8959,7 @@
                 }
                 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);
@@ -9477,6 +9569,12 @@
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
+            else if (animationType === "x" || animationType === "y") {
+                const snapAxis = animationType === "x" ? "y" : "x";
+                copyAxisInto(isShared
+                    ? snapshot.measuredBox[snapAxis]
+                    : snapshot.layoutBox[snapAxis], layout[snapAxis]);
+            }
             else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = isShared
@@ -9592,6 +9690,18 @@
     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) {
@@ -10147,6 +10257,7 @@
         `);
             }
             return () => {
+                ref.current?.removeAttribute("data-motion-pop-id");
                 if (parent.contains(style)) {
                     parent.removeChild(style);
                 }
@@ -10425,8 +10536,8 @@
                     if (exitingComponents.current.has(key)) {
                         return;
                     }
-                    exitingComponents.current.add(key);
                     if (exitComplete.has(key)) {
+                        exitingComponents.current.add(key);
                         exitComplete.set(key, true);
                     }
                     else {
@@ -10706,8 +10817,12 @@
          * We attempt to import this package but require won't be defined in esm environments, in that case
          * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
          * in favour of explicit injection.
+         *
+         * String concatenation prevents bundlers like webpack (e.g. Storybook)
+         * from statically resolving this optional dependency at build time.
          */
-        loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
+        const emotionPkg = "@emotion/is-prop-" + "valid";
+        loadExternalIsValidProp(require(emotionPkg).default);
     }
     catch {
         // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
@@ -10724,6 +10839,8 @@
              */
             if (key === "values" && typeof props.values === "object")
                 continue;
+            if (isMotionValue(props[key]))
+                continue;
             if (shouldForward(key) ||
                 (forwardMotionProps === true && isValidMotionProp(key)) ||
                 (!isDom && !isValidMotionProp(key)) ||
@@ -11436,6 +11553,7 @@
         constructor() {
             super(...arguments);
             this.id = id$1++;
+            this.isExitComplete = false;
         }
         update() {
             if (!this.node.presenceContext)
@@ -11445,9 +11563,38 @@
             if (!this.node.animationState || isPresent === prevIsPresent) {
                 return;
             }
+            if (isPresent && prevIsPresent === false) {
+                /**
+                 * When re-entering, if the exit animation already completed
+                 * (element is at rest), reset to initial values so the enter
+                 * animation replays from the correct position.
+                 */
+                if (this.isExitComplete) {
+                    const { initial, custom } = this.node.getProps();
+                    if (typeof initial === "string") {
+                        const resolved = resolveVariant(this.node, initial, custom);
+                        if (resolved) {
+                            const { transition, transitionEnd, ...target } = resolved;
+                            for (const key in target) {
+                                this.node
+                                    .getValue(key)
+                                    ?.jump(target[key]);
+                            }
+                        }
+                    }
+                    this.node.animationState.reset();
+                    this.node.animationState.animateChanges();
+                }
+                else {
+                    this.node.animationState.setActive("exit", false);
+                }
+                this.isExitComplete = false;
+                return;
+            }
             const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
             if (onExitComplete && !isPresent) {
                 exitAnimation.then(() => {
+                    this.isExitComplete = true;
                     onExitComplete(this.id);
                 });
             }
@@ -12174,7 +12321,8 @@
                     return;
                 }
                 let transition = (constraints && constraints[axis]) || {};
-                if (dragSnapToOrigin)
+                if (dragSnapToOrigin === true ||
+                    dragSnapToOrigin === axis)
                     transition = { min: 0, max: 0 };
                 /**
                  * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
@@ -12815,7 +12963,7 @@
             this.isInView = false;
         }
         startObserver() {
-            this.unmount();
+            this.stopObserver?.();
             const { viewport = {} } = this.node.getProps();
             const { root, margin: rootMargin, amount = "some", once } = viewport;
             const options = {
@@ -12852,7 +13000,7 @@
                 const callback = isIntersecting ? onViewportEnter : onViewportLeave;
                 callback && callback(entry);
             };
-            return observeIntersection(this.node.current, options, onIntersectionUpdate);
+            this.stopObserver = observeIntersection(this.node.current, options, onIntersectionUpdate);
         }
         mount() {
             this.startObserver();
@@ -12866,7 +13014,11 @@
                 this.startObserver();
             }
         }
-        unmount() { }
+        unmount() {
+            this.stopObserver?.();
+            this.hasEnteredView = false;
+            this.isInView = false;
+        }
     }
     function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
         return (name) => viewport[name] !== prevViewport[name];
@@ -14320,16 +14472,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;