motion-v 0.12.0-beta.2 → 0.13.0-alpha.0

package/dist/cjs/index.js

@@ -3,6 +3,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const core = require("@vueuse/core");
 const heyListen = require("hey-listen");
+const motionDom = require("motion-dom");
+function addUniqueItem(arr, item) {
+  if (arr.indexOf(item) === -1)
+    arr.push(item);
+}
+function removeItem(arr, item) {
+  const index = arr.indexOf(item);
+  if (index > -1)
+    arr.splice(index, 1);
+}
 const noop = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
 let warning = noop;
 exports.invariant = noop;
@@ -31,433 +41,45 @@ const progress$1 = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
   const toFromDifference = to - from;
   return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 };
-const secondsToMilliseconds$1 = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3;
-const millisecondsToSeconds$1 = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
-const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
-class BaseGroupPlaybackControls {
-  constructor(animations) {
-    this.stop = () => this.runAll("stop");
-    this.animations = animations.filter(Boolean);
-  }
-  get finished() {
-    return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
-  }
-  /**
-   * TODO: Filter out cancelled or stopped animations before returning
-   */
-  getAll(propName) {
-    return this.animations[0][propName];
-  }
-  setAll(propName, newValue) {
-    for (let i = 0; i < this.animations.length; i++) {
-      this.animations[i][propName] = newValue;
-    }
-  }
-  attachTimeline(timeline, fallback) {
-    const subscriptions = this.animations.map((animation) => {
-      if (supportsScrollTimeline() && animation.attachTimeline) {
-        return animation.attachTimeline(timeline);
-      } else if (typeof fallback === "function") {
-        return fallback(animation);
-      }
-    });
-    return () => {
-      subscriptions.forEach((cancel, i) => {
-        cancel && cancel();
-        this.animations[i].stop();
-      });
-    };
-  }
-  get time() {
-    return this.getAll("time");
-  }
-  set time(time2) {
-    this.setAll("time", time2);
-  }
-  get speed() {
-    return this.getAll("speed");
-  }
-  set speed(speed) {
-    this.setAll("speed", speed);
-  }
-  get startTime() {
-    return this.getAll("startTime");
-  }
-  get duration() {
-    let max = 0;
-    for (let i = 0; i < this.animations.length; i++) {
-      max = Math.max(max, this.animations[i].duration);
-    }
-    return max;
-  }
-  runAll(methodName) {
-    this.animations.forEach((controls) => controls[methodName]());
-  }
-  flatten() {
-    this.runAll("flatten");
-  }
-  play() {
-    this.runAll("play");
-  }
-  pause() {
-    this.runAll("pause");
-  }
-  cancel() {
-    this.runAll("cancel");
-  }
-  complete() {
-    this.runAll("complete");
-  }
-}
-class GroupPlaybackControls extends BaseGroupPlaybackControls {
-  then(onResolve, onReject) {
-    return Promise.all(this.animations).then(onResolve).catch(onReject);
-  }
-}
-function getValueTransition$1(transition, key) {
-  return transition ? transition[key] || transition["default"] || transition : void 0;
-}
-const maxGeneratorDuration = 2e4;
-function calcGeneratorDuration(generator) {
-  let duration = 0;
-  const timeStep = 50;
-  let state2 = generator.next(duration);
-  while (!state2.done && duration < maxGeneratorDuration) {
-    duration += timeStep;
-    state2 = generator.next(duration);
-  }
-  return duration >= maxGeneratorDuration ? Infinity : duration;
-}
-function createGeneratorEasing(options, scale2 = 100, createGenerator) {
-  const generator = createGenerator({ ...options, keyframes: [0, scale2] });
-  const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-  return {
-    type: "keyframes",
-    ease: (progress2) => {
-      return generator.next(duration * progress2).value / scale2;
-    },
-    duration: /* @__PURE__ */ millisecondsToSeconds$1(duration)
-  };
-}
-function isGenerator(type) {
-  return typeof type === "function";
-}
-function attachTimeline(animation, timeline) {
-  animation.timeline = timeline;
-  animation.onfinish = null;
-}
-class NativeAnimationControls {
-  constructor(animation) {
-    this.animation = animation;
-  }
-  get duration() {
-    var _a, _b, _c;
-    const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) || ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) || 300;
-    return /* @__PURE__ */ millisecondsToSeconds$1(Number(durationInMs));
-  }
-  get time() {
-    var _a;
-    if (this.animation) {
-      return /* @__PURE__ */ millisecondsToSeconds$1(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-    }
-    return 0;
-  }
-  set time(newTime) {
-    if (this.animation) {
-      this.animation.currentTime = /* @__PURE__ */ secondsToMilliseconds$1(newTime);
-    }
-  }
-  get speed() {
-    return this.animation ? this.animation.playbackRate : 1;
-  }
-  set speed(newSpeed) {
-    if (this.animation) {
-      this.animation.playbackRate = newSpeed;
-    }
-  }
-  get state() {
-    return this.animation ? this.animation.playState : "finished";
-  }
-  get startTime() {
-    return this.animation ? this.animation.startTime : null;
-  }
-  get finished() {
-    return this.animation ? this.animation.finished : Promise.resolve();
-  }
-  play() {
-    this.animation && this.animation.play();
-  }
-  pause() {
-    this.animation && this.animation.pause();
-  }
-  stop() {
-    if (!this.animation || this.state === "idle" || this.state === "finished") {
-      return;
-    }
-    if (this.animation.commitStyles) {
-      this.animation.commitStyles();
-    }
-    this.cancel();
-  }
-  flatten() {
-    var _a;
-    if (!this.animation)
-      return;
-    (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
-  }
-  attachTimeline(timeline) {
-    if (this.animation)
-      attachTimeline(this.animation, timeline);
-    return noop;
-  }
-  complete() {
-    this.animation && this.animation.finish();
-  }
-  cancel() {
-    try {
-      this.animation && this.animation.cancel();
-    } catch (e) {
-    }
-  }
-}
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-const supportsFlags = {
-  linearEasing: void 0
-};
-function memoSupports(callback, supportsFlag) {
-  const memoized = /* @__PURE__ */ memo(callback);
-  return () => {
-    var _a;
-    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
-  };
-}
-const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
-  try {
-    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
-  } catch (e) {
-    return false;
-  }
-  return true;
-}, "linearEasing");
-const generateLinearEasing = (easing, duration, resolution = 10) => {
-  let points = "";
-  const numPoints = Math.max(Math.round(duration / resolution), 2);
-  for (let i = 0; i < numPoints; i++) {
-    points += easing(/* @__PURE__ */ progress$1(0, numPoints - 1, i)) + ", ";
-  }
-  return `linear(${points.substring(0, points.length - 2)})`;
-};
-function isWaapiSupportedEasing(easing) {
-  return Boolean(typeof easing === "function" && supportsLinearEasing() || !easing || typeof easing === "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
-}
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-const supportedWaapiEasing = {
-  linear: "linear",
-  ease: "ease",
-  easeIn: "ease-in",
-  easeOut: "ease-out",
-  easeInOut: "ease-in-out",
-  circIn: /* @__PURE__ */ cubicBezierAsString([0, 0.65, 0.55, 1]),
-  circOut: /* @__PURE__ */ cubicBezierAsString([0.55, 0, 1, 0.45]),
-  backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
-  backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
-};
-function mapEasingToNativeEasing(easing, duration) {
-  if (!easing) {
-    return void 0;
-  } else if (typeof easing === "function" && supportsLinearEasing()) {
-    return generateLinearEasing(easing, duration);
-  } else if (isBezierDefinition(easing)) {
-    return cubicBezierAsString(easing);
-  } else if (Array.isArray(easing)) {
-    return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut);
-  } else {
-    return supportedWaapiEasing[easing];
+class SubscriptionManager {
+  constructor() {
+    this.subscriptions = [];
   }
-}
-const isDragging = {
-  x: false,
-  y: false
-};
-function isDragActive() {
-  return isDragging.y;
-}
-function resolveElements(elementOrSelector, scope, selectorCache) {
-  var _a;
-  if (elementOrSelector instanceof EventTarget) {
-    return [elementOrSelector];
-  } else if (typeof elementOrSelector === "string") {
-    let root = document;
-    if (scope) {
-      root = scope.current;
-    }
-    const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
-    return elements ? Array.from(elements) : [];
+  add(handler) {
+    addUniqueItem(this.subscriptions, handler);
+    return () => removeItem(this.subscriptions, handler);
   }
-  return Array.from(elementOrSelector);
-}
-function setupGesture(elementOrSelector, options) {
-  const elements = resolveElements(elementOrSelector);
-  const gestureAbortController = new AbortController();
-  const eventOptions = {
-    passive: true,
-    ...options,
-    signal: gestureAbortController.signal
-  };
-  const cancel = () => gestureAbortController.abort();
-  return [elements, eventOptions, cancel];
-}
-function isValidHover(event) {
-  return !(event.pointerType === "touch" || isDragActive());
-}
-function hover(elementOrSelector, onHoverStart, options = {}) {
-  const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-  const onPointerEnter = (enterEvent) => {
-    if (!isValidHover(enterEvent))
-      return;
-    const { target } = enterEvent;
-    const onHoverEnd = onHoverStart(target, enterEvent);
-    if (typeof onHoverEnd !== "function" || !target)
+  notify(a, b, c) {
+    const numSubscriptions = this.subscriptions.length;
+    if (!numSubscriptions)
       return;
-    const onPointerLeave = (leaveEvent) => {
-      if (!isValidHover(leaveEvent))
-        return;
-      onHoverEnd(leaveEvent);
-      target.removeEventListener("pointerleave", onPointerLeave);
-    };
-    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-  };
-  elements.forEach((element) => {
-    element.addEventListener("pointerenter", onPointerEnter, eventOptions);
-  });
-  return cancel;
-}
-function capturePointer(event, action) {
-  const actionName = `${action}PointerCapture`;
-  if (event.target instanceof Element && actionName in event.target && event.pointerId !== void 0) {
-    try {
-      event.target[actionName](event.pointerId);
-    } catch (e) {
+    if (numSubscriptions === 1) {
+      this.subscriptions[0](a, b, c);
+    } else {
+      for (let i = 0; i < numSubscriptions; i++) {
+        const handler = this.subscriptions[i];
+        handler && handler(a, b, c);
+      }
     }
   }
-}
-const isNodeOrChild = (parent, child) => {
-  if (!child) {
-    return false;
-  } else if (parent === child) {
-    return true;
-  } else {
-    return isNodeOrChild(parent, child.parentElement);
+  getSize() {
+    return this.subscriptions.length;
   }
-};
-const isPrimaryPointer$1 = (event) => {
-  if (event.pointerType === "mouse") {
-    return typeof event.button !== "number" || event.button <= 0;
-  } else {
-    return event.isPrimary !== false;
+  clear() {
+    this.subscriptions.length = 0;
   }
-};
-const focusableElements = /* @__PURE__ */ new Set([
-  "BUTTON",
-  "INPUT",
-  "SELECT",
-  "TEXTAREA",
-  "A"
-]);
-function isElementKeyboardAccessible(element) {
-  return focusableElements.has(element.tagName) || element.tabIndex !== -1;
 }
-const isPressing = /* @__PURE__ */ new WeakSet();
-function filterEvents(callback) {
-  return (event) => {
-    if (event.key !== "Enter")
-      return;
-    callback(event);
-  };
-}
-function firePointerEvent(target, type) {
-  target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
+const secondsToMilliseconds$1 = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3;
+const millisecondsToSeconds$1 = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
+function velocityPerSecond(velocity, frameDuration) {
+  return frameDuration ? velocity * (1e3 / frameDuration) : 0;
 }
-const enableKeyboardPress = (focusEvent, eventOptions) => {
-  const element = focusEvent.currentTarget;
-  if (!element)
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(condition, message, element) {
+  if (condition || warned.has(message))
     return;
-  const handleKeydown = filterEvents(() => {
-    if (isPressing.has(element))
-      return;
-    firePointerEvent(element, "down");
-    const handleKeyup = filterEvents(() => {
-      firePointerEvent(element, "up");
-    });
-    const handleBlur = () => firePointerEvent(element, "cancel");
-    element.addEventListener("keyup", handleKeyup, eventOptions);
-    element.addEventListener("blur", handleBlur, eventOptions);
-  });
-  element.addEventListener("keydown", handleKeydown, eventOptions);
-  element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
-};
-function isValidPressEvent(event) {
-  return isPrimaryPointer$1(event) && !isDragActive();
-}
-function press(targetOrSelector, onPressStart, options = {}) {
-  const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
-  const startPress = (startEvent) => {
-    const target = startEvent.currentTarget;
-    if (!target || !isValidPressEvent(startEvent) || isPressing.has(target))
-      return;
-    isPressing.add(target);
-    capturePointer(startEvent, "set");
-    const onPressEnd = onPressStart(target, startEvent);
-    const onPointerEnd = (endEvent, success) => {
-      target.removeEventListener("pointerup", onPointerUp);
-      target.removeEventListener("pointercancel", onPointerCancel);
-      capturePointer(endEvent, "release");
-      if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
-        return;
-      }
-      isPressing.delete(target);
-      if (typeof onPressEnd === "function") {
-        onPressEnd(endEvent, { success });
-      }
-    };
-    const onPointerUp = (upEvent) => {
-      const isOutside = !upEvent.isTrusted ? false : checkOutside(upEvent, target instanceof Element ? target.getBoundingClientRect() : {
-        left: 0,
-        top: 0,
-        right: window.innerWidth,
-        bottom: window.innerHeight
-      });
-      if (isOutside) {
-        onPointerEnd(upEvent, false);
-      } else {
-        onPointerEnd(upEvent, !(target instanceof Element) || isNodeOrChild(target, upEvent.target));
-      }
-    };
-    const onPointerCancel = (cancelEvent) => {
-      onPointerEnd(cancelEvent, false);
-    };
-    target.addEventListener("pointerup", onPointerUp, eventOptions);
-    target.addEventListener("pointercancel", onPointerCancel, eventOptions);
-    target.addEventListener("lostpointercapture", onPointerCancel, eventOptions);
-  };
-  targets.forEach((target) => {
-    target = options.useGlobalTarget ? window : target;
-    let canAddKeyboardAccessibility = false;
-    if (target instanceof HTMLElement) {
-      canAddKeyboardAccessibility = true;
-      if (!isElementKeyboardAccessible(target) && target.getAttribute("tabindex") === null) {
-        target.tabIndex = 0;
-      }
-    }
-    target.addEventListener("pointerdown", startPress, eventOptions);
-    if (canAddKeyboardAccessibility) {
-      target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
-    }
-  });
-  return cancelEvents;
-}
-function checkOutside(event, rect) {
-  return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+  console.warn(message);
+  warned.add(message);
 }
 const clamp$1 = (min, max, v) => {
   if (v > max)
@@ -466,9 +88,6 @@ const clamp$1 = (min, max, v) => {
     return min;
   return v;
 };
-function velocityPerSecond(velocity, frameDuration) {
-  return frameDuration ? velocity * (1e3 / frameDuration) : 0;
-}
 const velocitySampleDuration = 5;
 function calcGeneratorVelocity(resolveValue, t, current) {
   const prevT = Math.max(t - velocitySampleDuration, 0);
@@ -666,8 +285,8 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
       return state2;
     },
     toString: () => {
-      const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-      const easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
+      const calculatedDuration = Math.min(motionDom.calcGeneratorDuration(generator), motionDom.maxGeneratorDuration);
+      const easing = motionDom.generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
       return calculatedDuration + "ms " + easing;
     }
   };
@@ -704,7 +323,7 @@ function isDOMKeyframes(keyframes2) {
 }
 function resolveSubjects(subject, keyframes2, scope, selectorCache) {
   if (typeof subject === "string" && isDOMKeyframes(keyframes2)) {
-    return resolveElements(subject, scope, selectorCache);
+    return motionDom.resolveElements(subject, scope, selectorCache);
   } else if (subject instanceof NodeList) {
     return Array.from(subject);
   } else if (Array.isArray(subject)) {
@@ -728,15 +347,6 @@ function calcNextTime(current, next, prev, labels) {
     return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
   }
 }
-function addUniqueItem(arr, item) {
-  if (arr.indexOf(item) === -1)
-    arr.push(item);
-}
-function removeItem(arr, item) {
-  const index = arr.indexOf(item);
-  if (index > -1)
-    arr.splice(index, 1);
-}
 function eraseKeyframes(sequence, startTime, endTime) {
   for (let i = 0; i < sequence.length; i++) {
     const keyframe = sequence[i];
@@ -803,7 +413,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       let { ease: ease2 = defaultTransition.ease || "easeOut", duration } = valueTransition;
       const calculatedDelay = typeof delay2 === "function" ? delay2(elementIndex, numSubjects) : delay2;
       const numKeyframes = valueKeyframesAsList.length;
-      const createGenerator = isGenerator(type) ? type : generators2 === null || generators2 === void 0 ? void 0 : generators2[type];
+      const createGenerator = motionDom.isGenerator(type) ? type : generators2 === null || generators2 === void 0 ? void 0 : generators2[type];
       if (numKeyframes <= 2 && createGenerator) {
         let absoluteDelta = 100;
         if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList)) {
@@ -814,7 +424,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         if (duration !== void 0) {
           springTransition.duration = /* @__PURE__ */ secondsToMilliseconds$1(duration);
         }
-        const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+        const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
         ease2 = springEasing.ease;
         duration = springEasing.duration;
       }
@@ -966,476 +576,6 @@ const isCustomValue = (v) => {
 const resolveFinalValueInKeyframes = (v) => {
   return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
 };
-const MotionGlobalConfig = {
-  skipAnimations: false,
-  useManualTiming: false
-};
-const stepsOrder = [
-  "read",
-  // Read
-  "resolveKeyframes",
-  // Write/Read/Write/Read
-  "update",
-  // Compute
-  "preRender",
-  // Compute
-  "render",
-  // Write
-  "postRender"
-  // Compute
-];
-const statsBuffer = {
-  value: null,
-  addProjectionMetrics: null
-};
-function createRenderStep(runNextFrame, stepName) {
-  let thisFrame = /* @__PURE__ */ new Set();
-  let nextFrame = /* @__PURE__ */ new Set();
-  let isProcessing = false;
-  let flushNextFrame = false;
-  const toKeepAlive = /* @__PURE__ */ new WeakSet();
-  let latestFrameData = {
-    delta: 0,
-    timestamp: 0,
-    isProcessing: false
-  };
-  let numCalls = 0;
-  function triggerCallback(callback) {
-    if (toKeepAlive.has(callback)) {
-      step.schedule(callback);
-      runNextFrame();
-    }
-    numCalls++;
-    callback(latestFrameData);
-  }
-  const step = {
-    /**
-     * Schedule a process to run on the next frame.
-     */
-    schedule: (callback, keepAlive = false, immediate = false) => {
-      const addToCurrentFrame = immediate && isProcessing;
-      const queue = addToCurrentFrame ? thisFrame : nextFrame;
-      if (keepAlive)
-        toKeepAlive.add(callback);
-      if (!queue.has(callback))
-        queue.add(callback);
-      return callback;
-    },
-    /**
-     * Cancel the provided callback from running on the next frame.
-     */
-    cancel: (callback) => {
-      nextFrame.delete(callback);
-      toKeepAlive.delete(callback);
-    },
-    /**
-     * Execute all schedule callbacks.
-     */
-    process: (frameData2) => {
-      latestFrameData = frameData2;
-      if (isProcessing) {
-        flushNextFrame = true;
-        return;
-      }
-      isProcessing = true;
-      [thisFrame, nextFrame] = [nextFrame, thisFrame];
-      thisFrame.forEach(triggerCallback);
-      if (stepName && statsBuffer.value) {
-        statsBuffer.value.frameloop[stepName].push(numCalls);
-      }
-      numCalls = 0;
-      thisFrame.clear();
-      isProcessing = false;
-      if (flushNextFrame) {
-        flushNextFrame = false;
-        step.process(frameData2);
-      }
-    }
-  };
-  return step;
-}
-const maxElapsed$1 = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-  let runNextFrame = false;
-  let useDefaultElapsed = true;
-  const state2 = {
-    delta: 0,
-    timestamp: 0,
-    isProcessing: false
-  };
-  const flagRunNextFrame = () => runNextFrame = true;
-  const steps2 = stepsOrder.reduce((acc, key) => {
-    acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : void 0);
-    return acc;
-  }, {});
-  const { read, resolveKeyframes, update, preRender, render, postRender } = steps2;
-  const processBatch = () => {
-    const timestamp = performance.now();
-    runNextFrame = false;
-    {
-      state2.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state2.timestamp, maxElapsed$1), 1);
-    }
-    state2.timestamp = timestamp;
-    state2.isProcessing = true;
-    read.process(state2);
-    resolveKeyframes.process(state2);
-    update.process(state2);
-    preRender.process(state2);
-    render.process(state2);
-    postRender.process(state2);
-    state2.isProcessing = false;
-    if (runNextFrame && allowKeepAlive) {
-      useDefaultElapsed = false;
-      scheduleNextBatch(processBatch);
-    }
-  };
-  const wake = () => {
-    runNextFrame = true;
-    useDefaultElapsed = true;
-    if (!state2.isProcessing) {
-      scheduleNextBatch(processBatch);
-    }
-  };
-  const schedule = stepsOrder.reduce((acc, key) => {
-    const step = steps2[key];
-    acc[key] = (process2, keepAlive = false, immediate = false) => {
-      if (!runNextFrame)
-        wake();
-      return step.schedule(process2, keepAlive, immediate);
-    };
-    return acc;
-  }, {});
-  const cancel = (process2) => {
-    for (let i = 0; i < stepsOrder.length; i++) {
-      steps2[stepsOrder[i]].cancel(process2);
-    }
-  };
-  return { schedule, cancel, state: state2, steps: steps2 };
-}
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-let now;
-function clearTime() {
-  now = void 0;
-}
-const time = {
-  now: () => {
-    if (now === void 0) {
-      time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now());
-    }
-    return now;
-  },
-  set: (newTime) => {
-    now = newTime;
-    queueMicrotask(clearTime);
-  }
-};
-class SubscriptionManager {
-  constructor() {
-    this.subscriptions = [];
-  }
-  add(handler) {
-    addUniqueItem(this.subscriptions, handler);
-    return () => removeItem(this.subscriptions, handler);
-  }
-  notify(a, b, c) {
-    const numSubscriptions = this.subscriptions.length;
-    if (!numSubscriptions)
-      return;
-    if (numSubscriptions === 1) {
-      this.subscriptions[0](a, b, c);
-    } else {
-      for (let i = 0; i < numSubscriptions; i++) {
-        const handler = this.subscriptions[i];
-        handler && handler(a, b, c);
-      }
-    }
-  }
-  getSize() {
-    return this.subscriptions.length;
-  }
-  clear() {
-    this.subscriptions.length = 0;
-  }
-}
-const warned = /* @__PURE__ */ new Set();
-function warnOnce(condition, message, element) {
-  if (condition || warned.has(message))
-    return;
-  console.warn(message);
-  warned.add(message);
-}
-const MAX_VELOCITY_DELTA = 30;
-const isFloat = (value) => {
-  return !isNaN(parseFloat(value));
-};
-const collectMotionValues = {
-  current: void 0
-};
-class MotionValue {
-  /**
-   * @param init - The initiating value
-   * @param config - Optional configuration options
-   *
-   * -  `transformer`: A function to transform incoming values with.
-   *
-   * @internal
-   */
-  constructor(init, options = {}) {
-    this.version = "12.4.10";
-    this.canTrackVelocity = null;
-    this.events = {};
-    this.updateAndNotify = (v, render = true) => {
-      const currentTime = time.now();
-      if (this.updatedAt !== currentTime) {
-        this.setPrevFrameValue();
-      }
-      this.prev = this.current;
-      this.setCurrent(v);
-      if (this.current !== this.prev && this.events.change) {
-        this.events.change.notify(this.current);
-      }
-      if (render && this.events.renderRequest) {
-        this.events.renderRequest.notify(this.current);
-      }
-    };
-    this.hasAnimated = false;
-    this.setCurrent(init);
-    this.owner = options.owner;
-  }
-  setCurrent(current) {
-    this.current = current;
-    this.updatedAt = time.now();
-    if (this.canTrackVelocity === null && current !== void 0) {
-      this.canTrackVelocity = isFloat(this.current);
-    }
-  }
-  setPrevFrameValue(prevFrameValue = this.current) {
-    this.prevFrameValue = prevFrameValue;
-    this.prevUpdatedAt = this.updatedAt;
-  }
-  /**
-   * Adds a function that will be notified when the `MotionValue` is updated.
-   *
-   * It returns a function that, when called, will cancel the subscription.
-   *
-   * When calling `onChange` inside a React component, it should be wrapped with the
-   * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-   * from the `useEffect` function to ensure you don't add duplicate subscribers..
-   *
-   * ```jsx
-   * export const MyComponent = () => {
-   *   const x = useMotionValue(0)
-   *   const y = useMotionValue(0)
-   *   const opacity = useMotionValue(1)
-   *
-   *   useEffect(() => {
-   *     function updateOpacity() {
-   *       const maxXY = Math.max(x.get(), y.get())
-   *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-   *       opacity.set(newOpacity)
-   *     }
-   *
-   *     const unsubscribeX = x.on("change", updateOpacity)
-   *     const unsubscribeY = y.on("change", updateOpacity)
-   *
-   *     return () => {
-   *       unsubscribeX()
-   *       unsubscribeY()
-   *     }
-   *   }, [])
-   *
-   *   return <motion.div style={{ x }} />
-   * }
-   * ```
-   *
-   * @param subscriber - A function that receives the latest value.
-   * @returns A function that, when called, will cancel this subscription.
-   *
-   * @deprecated
-   */
-  onChange(subscription) {
-    if (process.env.NODE_ENV !== "production") {
-      warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
-    }
-    return this.on("change", subscription);
-  }
-  on(eventName, callback) {
-    if (!this.events[eventName]) {
-      this.events[eventName] = new SubscriptionManager();
-    }
-    const unsubscribe = this.events[eventName].add(callback);
-    if (eventName === "change") {
-      return () => {
-        unsubscribe();
-        frame.read(() => {
-          if (!this.events.change.getSize()) {
-            this.stop();
-          }
-        });
-      };
-    }
-    return unsubscribe;
-  }
-  clearListeners() {
-    for (const eventManagers in this.events) {
-      this.events[eventManagers].clear();
-    }
-  }
-  /**
-   * Attaches a passive effect to the `MotionValue`.
-   *
-   * @internal
-   */
-  attach(passiveEffect, stopPassiveEffect) {
-    this.passiveEffect = passiveEffect;
-    this.stopPassiveEffect = stopPassiveEffect;
-  }
-  /**
-   * Sets the state of the `MotionValue`.
-   *
-   * @remarks
-   *
-   * ```jsx
-   * const x = useMotionValue(0)
-   * x.set(10)
-   * ```
-   *
-   * @param latest - Latest value to set.
-   * @param render - Whether to notify render subscribers. Defaults to `true`
-   *
-   * @public
-   */
-  set(v, render = true) {
-    if (!render || !this.passiveEffect) {
-      this.updateAndNotify(v, render);
-    } else {
-      this.passiveEffect(v, this.updateAndNotify);
-    }
-  }
-  setWithVelocity(prev, current, delta) {
-    this.set(current);
-    this.prev = void 0;
-    this.prevFrameValue = prev;
-    this.prevUpdatedAt = this.updatedAt - delta;
-  }
-  /**
-   * Set the state of the `MotionValue`, stopping any active animations,
-   * effects, and resets velocity to `0`.
-   */
-  jump(v, endAnimation = true) {
-    this.updateAndNotify(v);
-    this.prev = v;
-    this.prevUpdatedAt = this.prevFrameValue = void 0;
-    endAnimation && this.stop();
-    if (this.stopPassiveEffect)
-      this.stopPassiveEffect();
-  }
-  /**
-   * Returns the latest state of `MotionValue`
-   *
-   * @returns - The latest state of `MotionValue`
-   *
-   * @public
-   */
-  get() {
-    if (collectMotionValues.current) {
-      collectMotionValues.current.push(this);
-    }
-    return this.current;
-  }
-  /**
-   * @public
-   */
-  getPrevious() {
-    return this.prev;
-  }
-  /**
-   * Returns the latest velocity of `MotionValue`
-   *
-   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-   *
-   * @public
-   */
-  getVelocity() {
-    const currentTime = time.now();
-    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
-      return 0;
-    }
-    const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-    return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
-  }
-  /**
-   * Registers a new animation to control this `MotionValue`. Only one
-   * animation can drive a `MotionValue` at one time.
-   *
-   * ```jsx
-   * value.start()
-   * ```
-   *
-   * @param animation - A function that starts the provided animation
-   *
-   * @internal
-   */
-  start(startAnimation) {
-    this.stop();
-    return new Promise((resolve) => {
-      this.hasAnimated = true;
-      this.animation = startAnimation(resolve);
-      if (this.events.animationStart) {
-        this.events.animationStart.notify();
-      }
-    }).then(() => {
-      if (this.events.animationComplete) {
-        this.events.animationComplete.notify();
-      }
-      this.clearAnimation();
-    });
-  }
-  /**
-   * Stop the currently active animation.
-   *
-   * @public
-   */
-  stop() {
-    if (this.animation) {
-      this.animation.stop();
-      if (this.events.animationCancel) {
-        this.events.animationCancel.notify();
-      }
-    }
-    this.clearAnimation();
-  }
-  /**
-   * Returns `true` if this value is currently animating.
-   *
-   * @public
-   */
-  isAnimating() {
-    return !!this.animation;
-  }
-  clearAnimation() {
-    delete this.animation;
-  }
-  /**
-   * Destroy and clean up subscribers to this `MotionValue`.
-   *
-   * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-   * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-   * created a `MotionValue` via the `motionValue` function.
-   *
-   * @public
-   */
-  destroy() {
-    this.clearListeners();
-    this.stop();
-    if (this.stopPassiveEffect) {
-      this.stopPassiveEffect();
-    }
-  }
-}
-function motionValue(init, options) {
-  return new MotionValue(init, options);
-}
 function getValueState(visualElement) {
   const state2 = [{}, {}];
   visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
@@ -1466,7 +606,7 @@ function setMotionValue(visualElement, key, value) {
   if (visualElement.hasValue(key)) {
     visualElement.getValue(key).set(value);
   } else {
-    visualElement.addValue(key, motionValue(value));
+    visualElement.addValue(key, motionDom.motionValue(value));
   }
 }
 function setTarget(visualElement, definition) {
@@ -1865,23 +1005,85 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
     }
   }
 }
-const isNumOrPxType = (v) => v === number || v === px;
-const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform: transform2 }) => {
-  if (transform2 === "none" || !transform2)
-    return 0;
-  const matrix3d = transform2.match(/^matrix3d\((.+)\)$/u);
-  if (matrix3d) {
-    return getPosFromMatrix(matrix3d[1], pos3);
+const radToDeg = (rad) => rad * 180 / Math.PI;
+const rotate = (v) => {
+  const angle = radToDeg(Math.atan2(v[1], v[0]));
+  return rebaseAngle(angle);
+};
+const matrix2dParsers = {
+  x: 4,
+  y: 5,
+  translateX: 4,
+  translateY: 5,
+  scaleX: 0,
+  scaleY: 3,
+  scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+  rotate,
+  rotateZ: rotate,
+  skewX: (v) => radToDeg(Math.atan(v[1])),
+  skewY: (v) => radToDeg(Math.atan(v[2])),
+  skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2
+};
+const rebaseAngle = (angle) => {
+  angle = angle % 360;
+  if (angle < 0)
+    angle += 360;
+  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 matrix3dParsers = {
+  x: 12,
+  y: 13,
+  z: 14,
+  translateX: 12,
+  translateY: 13,
+  translateZ: 14,
+  scaleX,
+  scaleY,
+  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]))),
+  rotateZ,
+  rotate: rotateZ,
+  skewX: (v) => radToDeg(Math.atan(v[4])),
+  skewY: (v) => radToDeg(Math.atan(v[1])),
+  skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2
+};
+function defaultTransformValue(name) {
+  return name.includes("scale") ? 1 : 0;
+}
+function parseValueFromTransform(transform2, name) {
+  if (!transform2 || transform2 === "none") {
+    return defaultTransformValue(name);
+  }
+  const matrix3dMatch = transform2.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+  let parsers;
+  let match;
+  if (matrix3dMatch) {
+    parsers = matrix3dParsers;
+    match = matrix3dMatch;
   } else {
-    const matrix = transform2.match(/^matrix\((.+)\)$/u);
-    if (matrix) {
-      return getPosFromMatrix(matrix[1], pos2);
-    } else {
-      return 0;
-    }
+    const matrix2dMatch = transform2.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+    parsers = matrix2dParsers;
+    match = matrix2dMatch;
   }
+  if (!match) {
+    return defaultTransformValue(name);
+  }
+  const valueParser = parsers[name];
+  const values = match[1].split(",").map(convertTransformToNumber);
+  return typeof valueParser === "function" ? valueParser(values) : values[valueParser];
+}
+const readTransformValue = (instance, name) => {
+  const { transform: transform2 = "none" } = getComputedStyle(instance);
+  return parseValueFromTransform(transform2, name);
 };
+function convertTransformToNumber(value) {
+  return parseFloat(value.trim());
+}
+const isNumOrPxType = (v) => v === number || v === px;
 const transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
 const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
@@ -1904,8 +1106,8 @@ const positionalValues = {
   bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
   right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
   // Transform
-  x: getTranslateFromMatrix(4, 13),
-  y: getTranslateFromMatrix(5, 14)
+  x: (_bbox, { transform: transform2 }) => parseValueFromTransform(transform2, "x"),
+  y: (_bbox, { transform: transform2 }) => parseValueFromTransform(transform2, "y")
 };
 positionalValues.translateX = positionalValues.x;
 positionalValues.translateY = positionalValues.y;
@@ -1960,7 +1162,7 @@ function flushKeyframeResolvers() {
   measureAllKeyframes();
 }
 class KeyframeResolver {
-  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
+  constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
     this.isComplete = false;
     this.isAsync = false;
     this.needsMeasurement = false;
@@ -1968,7 +1170,7 @@ class KeyframeResolver {
     this.unresolvedKeyframes = [...unresolvedKeyframes];
     this.onComplete = onComplete;
     this.name = name;
-    this.motionValue = motionValue2;
+    this.motionValue = motionValue;
     this.element = element;
     this.isAsync = isAsync;
   }
@@ -1978,8 +1180,8 @@ class KeyframeResolver {
       toResolve.add(this);
       if (!isScheduled) {
         isScheduled = true;
-        frame.read(readAllKeyframes);
-        frame.resolveKeyframes(measureAllKeyframes);
+        motionDom.frame.read(readAllKeyframes);
+        motionDom.frame.resolveKeyframes(measureAllKeyframes);
       }
     } else {
       this.readKeyframes();
@@ -1987,11 +1189,11 @@ class KeyframeResolver {
     }
   }
   readKeyframes() {
-    const { unresolvedKeyframes, name, element, motionValue: motionValue2 } = this;
+    const { unresolvedKeyframes, name, element, motionValue } = this;
     for (let i = 0; i < unresolvedKeyframes.length; i++) {
       if (unresolvedKeyframes[i] === null) {
         if (i === 0) {
-          const currentValue = motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.get();
+          const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
           const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
           if (currentValue !== void 0) {
             unresolvedKeyframes[0] = currentValue;
@@ -2004,8 +1206,8 @@ class KeyframeResolver {
           if (unresolvedKeyframes[0] === void 0) {
             unresolvedKeyframes[0] = finalKeyframe;
           }
-          if (motionValue2 && currentValue === void 0) {
-            motionValue2.set(unresolvedKeyframes[0]);
+          if (motionValue && currentValue === void 0) {
+            motionValue.set(unresolvedKeyframes[0]);
           }
         } else {
           unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
@@ -2080,8 +1282,8 @@ const auto = {
 const dimensionValueTypes = [number, px, percent$1, degrees, vw, vh, auto];
 const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 class DOMKeyframesResolver extends KeyframeResolver {
-  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element) {
-    super(unresolvedKeyframes, onComplete, name, motionValue2, element, true);
+  constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
+    super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
   }
   readKeyframes() {
     const { unresolvedKeyframes, element, name } = this;
@@ -2204,7 +1406,7 @@ function canAnimate(keyframes2, name, type, velocity) {
   if (!isOriginAnimatable || !isTargetAnimatable) {
     return false;
   }
-  return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
+  return hasKeyframesChanged(keyframes2) || (type === "spring" || motionDom.isGenerator(type)) && velocity;
 }
 const isNotNull = (value) => value !== null;
 function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
@@ -2217,7 +1419,7 @@ class BaseAnimation {
   constructor({ autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
     this.isStopped = false;
     this.hasAttemptedResolve = false;
-    this.createdAt = time.now();
+    this.createdAt = motionDom.time.now();
     this.options = {
       autoplay,
       delay: delay2,
@@ -2261,10 +1463,10 @@ class BaseAnimation {
    * Otherwise, it will call initPlayback on the implementing class.
    */
   onKeyframesResolved(keyframes2, finalKeyframe) {
-    this.resolvedAt = time.now();
+    this.resolvedAt = motionDom.time.now();
     this.hasAttemptedResolve = true;
-    const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator: isGenerator2 } = this.options;
-    if (!isGenerator2 && !canAnimate(keyframes2, name, type, velocity)) {
+    const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator } = this.options;
+    if (!isGenerator && !canAnimate(keyframes2, name, type, velocity)) {
       if (!delay2) {
         onUpdate && onUpdate(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
         onComplete && onComplete();
@@ -2295,6 +1497,8 @@ class BaseAnimation {
     return this.currentFinishedPromise.then(resolve, reject);
   }
   flatten() {
+    if (!this.options.allowFlatten)
+      return;
     this.options.type = "keyframes";
     this.options.ease = "linear";
   }
@@ -2541,7 +1745,7 @@ const easingLookup = {
   anticipate
 };
 const easingDefinitionToFunction = (definition) => {
-  if (isBezierDefinition(definition)) {
+  if (motionDom.isBezierDefinition(definition)) {
     exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
     const [x1, y1, x2, y2] = definition;
     return cubicBezier(x1, y1, x2, y2);
@@ -2627,13 +1831,13 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease: eas
 const frameloopDriver = (update) => {
   const passTimestamp = ({ timestamp }) => update(timestamp);
   return {
-    start: () => frame.update(passTimestamp, true),
-    stop: () => cancelFrame(passTimestamp),
+    start: () => motionDom.frame.update(passTimestamp, true),
+    stop: () => motionDom.cancelFrame(passTimestamp),
     /**
      * If we're processing this frame we can use the
      * framelocked timestamp to keep things in sync.
      */
-    now: () => frameData.isProcessing ? frameData.timestamp : time.now()
+    now: () => motionDom.frameData.isProcessing ? motionDom.frameData.timestamp : motionDom.time.now()
   };
 };
 const generators = {
@@ -2663,10 +1867,10 @@ class MainThreadAnimation extends BaseAnimation {
       const { onStop } = this.options;
       onStop && onStop();
     };
-    const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
+    const { name, motionValue, element, keyframes: keyframes2 } = this.options;
     const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
     const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-    this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2, element);
+    this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue, element);
     this.resolver.scheduleResolve();
   }
   flatten() {
@@ -2677,7 +1881,7 @@ class MainThreadAnimation extends BaseAnimation {
   }
   initPlayback(keyframes$1) {
     const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options;
-    const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
+    const generatorFactory = motionDom.isGenerator(type) ? type : generators[type] || keyframes;
     let mapPercentToKeyframes;
     let mirroredGenerator;
     if (process.env.NODE_ENV !== "production" && generatorFactory !== keyframes) {
@@ -2696,7 +1900,7 @@ class MainThreadAnimation extends BaseAnimation {
       });
     }
     if (generator.calculatedDuration === null) {
-      generator.calculatedDuration = calcGeneratorDuration(generator);
+      generator.calculatedDuration = motionDom.calcGeneratorDuration(generator);
     }
     const { calculatedDuration } = generator;
     const resolvedDuration = calculatedDuration + repeatDelay;
@@ -2712,6 +1916,7 @@ class MainThreadAnimation extends BaseAnimation {
   }
   onPostResolved() {
     const { autoplay = true } = this.options;
+    motionDom.activeAnimations.mainThread++;
     this.play();
     if (this.pendingPlayState === "paused" || !autoplay) {
       this.pause();
@@ -2832,13 +2037,13 @@ class MainThreadAnimation extends BaseAnimation {
       this.driver = driver((timestamp) => this.tick(timestamp));
     }
     onPlay && onPlay();
-    const now2 = this.driver.now();
+    const now = this.driver.now();
     if (this.holdTime !== null) {
-      this.startTime = now2 - this.holdTime;
+      this.startTime = now - this.holdTime;
     } else if (!this.startTime) {
       this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
     } else if (this.state === "finished") {
-      this.startTime = now2;
+      this.startTime = now;
     }
     if (this.state === "finished") {
       this.updateFinishedPromise();
@@ -2884,6 +2089,7 @@ class MainThreadAnimation extends BaseAnimation {
     this.updateFinishedPromise();
     this.startTime = this.cancelTime = null;
     this.resolver.cancel();
+    motionDom.activeAnimations.mainThread--;
   }
   stopDriver() {
     if (!this.driver)
@@ -2891,9 +2097,9 @@ class MainThreadAnimation extends BaseAnimation {
     this.driver.stop();
     this.driver = void 0;
   }
-  sample(time2) {
+  sample(time) {
     this.startTime = 0;
-    return this.tick(time2, true);
+    return this.tick(time, true);
   }
 }
 function animateValue(options) {
@@ -2912,9 +2118,12 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
   const keyframeOptions = { [valueName]: keyframes2 };
   if (times)
     keyframeOptions.offset = times;
-  const easing = mapEasingToNativeEasing(ease2, duration);
+  const easing = motionDom.mapEasingToNativeEasing(ease2, duration);
   if (Array.isArray(easing))
     keyframeOptions.easing = easing;
+  if (motionDom.statsBuffer.value) {
+    motionDom.activeAnimations.waapi++;
+  }
   const animation = element.animate(keyframeOptions, {
     delay: delay2,
     duration,
@@ -2923,13 +2132,18 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
     iterations: repeat + 1,
     direction: repeatType === "reverse" ? "alternate" : "normal"
   });
+  if (motionDom.statsBuffer.value) {
+    animation.finished.finally(() => {
+      motionDom.activeAnimations.waapi--;
+    });
+  }
   return animation;
 }
 const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 const sampleDelta = 10;
 const maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
-  return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
+  return motionDom.isGenerator(options.type) || options.type === "spring" || !motionDom.isWaapiSupportedEasing(options.ease);
 }
 function pregenerateKeyframes(keyframes2, options) {
   const sampleAnimation = new MainThreadAnimation({
@@ -2965,20 +2179,20 @@ function isUnsupportedEase(key) {
 class AcceleratedAnimation extends BaseAnimation {
   constructor(options) {
     super(options);
-    const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
-    this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue2, element);
+    const { name, motionValue, element, keyframes: keyframes2 } = this.options;
+    this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);
     this.resolver.scheduleResolve();
   }
   initPlayback(keyframes2, finalKeyframe) {
-    let { duration = 300, times, ease: ease2, type, motionValue: motionValue2, name, startTime } = this.options;
-    if (!motionValue2.owner || !motionValue2.owner.current) {
+    let { duration = 300, times, ease: ease2, type, motionValue, name, startTime } = this.options;
+    if (!motionValue.owner || !motionValue.owner.current) {
       return false;
     }
-    if (typeof ease2 === "string" && supportsLinearEasing() && isUnsupportedEase(ease2)) {
+    if (typeof ease2 === "string" && motionDom.supportsLinearEasing() && isUnsupportedEase(ease2)) {
       ease2 = unsupportedEasingFunctions[ease2];
     }
     if (requiresPregeneratedKeyframes(this.options)) {
-      const { onComplete, onUpdate, motionValue: motionValue3, element, ...options } = this.options;
+      const { onComplete, onUpdate, motionValue: motionValue2, element, ...options } = this.options;
       const pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
       keyframes2 = pregeneratedAnimation.keyframes;
       if (keyframes2.length === 1) {
@@ -2989,15 +2203,15 @@ class AcceleratedAnimation extends BaseAnimation {
       ease2 = pregeneratedAnimation.ease;
       type = "keyframes";
     }
-    const animation = startWaapiAnimation(motionValue2.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
+    const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
     animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
     if (this.pendingTimeline) {
-      attachTimeline(animation, this.pendingTimeline);
+      motionDom.attachTimeline(animation, this.pendingTimeline);
       this.pendingTimeline = void 0;
     } else {
       animation.onfinish = () => {
         const { onComplete } = this.options;
-        motionValue2.set(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
+        motionValue.set(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
         onComplete && onComplete();
         this.cancel();
         this.resolveFinishedPromise();
@@ -3073,7 +2287,7 @@ class AcceleratedAnimation extends BaseAnimation {
       if (!resolved)
         return noop;
       const { animation } = resolved;
-      attachTimeline(animation, timeline);
+      motionDom.attachTimeline(animation, timeline);
     }
     return noop;
   }
@@ -3111,7 +2325,7 @@ class AcceleratedAnimation extends BaseAnimation {
       return;
     }
     if (this.time) {
-      const { motionValue: motionValue2, onUpdate, onComplete, element, ...options } = this.options;
+      const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
       const sampleAnimation = new MainThreadAnimation({
         ...options,
         keyframes: keyframes2,
@@ -3122,7 +2336,7 @@ class AcceleratedAnimation extends BaseAnimation {
         isGenerator: true
       });
       const sampleTime = /* @__PURE__ */ secondsToMilliseconds$1(this.time);
-      motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+      motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
     const { onStop } = this.options;
     onStop && onStop();
@@ -3141,11 +2355,11 @@ class AcceleratedAnimation extends BaseAnimation {
     resolved.animation.cancel();
   }
   static supports(options) {
-    const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
-    if (!motionValue2 || !motionValue2.owner || !(motionValue2.owner.current instanceof HTMLElement)) {
+    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+    if (!motionValue || !motionValue.owner || !(motionValue.owner.current instanceof HTMLElement)) {
       return false;
     }
-    const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
+    const { onUpdate, transformTemplate } = motionValue.owner.getProps();
     return supportsWaapi() && name && acceleratedValues.has(name) && /**
      * If we're outputting values to onUpdate then we can't use WAAPI as there's
      * no way to read the value from WAAPI every frame.
@@ -3186,7 +2400,7 @@ function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildr
   return !!Object.keys(transition).length;
 }
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-  const valueTransition = getValueTransition$1(transition, name) || {};
+  const valueTransition = motionDom.getValueTransition(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
   elapsed = elapsed - /* @__PURE__ */ secondsToMilliseconds$1(delay2);
@@ -3230,14 +2444,15 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
       shouldSkip = true;
     }
   }
+  options.allowFlatten = !valueTransition.type && !valueTransition.ease;
   if (shouldSkip && !isHandoff && value.get() !== void 0) {
     const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
     if (finalKeyframe !== void 0) {
-      frame.update(() => {
+      motionDom.frame.update(() => {
         options.onUpdate(finalKeyframe);
         options.onComplete();
       });
-      return new GroupPlaybackControls([]);
+      return new motionDom.GroupPlaybackControls([]);
     }
   }
   if (!isHandoff && AcceleratedAnimation.supports(options)) {
@@ -3266,13 +2481,13 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     }
     const valueTransition = {
       delay: delay2,
-      ...getValueTransition$1(transition || {}, key)
+      ...motionDom.getValueTransition(transition || {}, key)
     };
     let isHandoff = false;
     if (window.MotionHandoffAnimation) {
       const appearId = getOptimisedAppearId(visualElement);
       if (appearId) {
-        const startTime = window.MotionHandoffAnimation(appearId, key, frame);
+        const startTime = window.MotionHandoffAnimation(appearId, key, motionDom.frame);
         if (startTime !== null) {
           valueTransition.startTime = startTime;
           isHandoff = true;
@@ -3288,7 +2503,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
   }
   if (transitionEnd) {
     Promise.all(animations).then(() => {
-      frame.update(() => {
+      motionDom.frame.update(() => {
         transitionEnd && setTarget(visualElement, transitionEnd);
       });
     });
@@ -3386,10 +2601,10 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue$1(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "12.4.10", `Attempting to mix Motion versions ${nextValue.version} with 12.4.10 may not work as expected.`);
+        warnOnce(nextValue.version === "12.5.0", `Attempting to mix Motion versions ${nextValue.version} with 12.5.0 may not work as expected.`);
       }
     } else if (isMotionValue$1(prevValue)) {
-      element.addValue(key, motionValue(nextValue, { owner: element }));
+      element.addValue(key, motionDom.motionValue(nextValue, { owner: element }));
     } else if (prevValue !== nextValue) {
       if (element.hasValue(key)) {
         const existingValue = element.getValue(key);
@@ -3400,7 +2615,7 @@ function updateMotionValuesFromProps(element, next, prev) {
         }
       } else {
         const latestValue = element.getStaticValue(key);
-        element.addValue(key, motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element }));
+        element.addValue(key, motionDom.motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element }));
       }
     }
   }
@@ -3452,10 +2667,10 @@ class VisualElement {
     };
     this.renderScheduledAt = 0;
     this.scheduleRender = () => {
-      const now2 = time.now();
-      if (this.renderScheduledAt < now2) {
-        this.renderScheduledAt = now2;
-        frame.render(this.render, false, true);
+      const now = motionDom.time.now();
+      if (this.renderScheduledAt < now) {
+        this.renderScheduledAt = now;
+        motionDom.frame.render(this.render, false, true);
       }
     };
     const { latestValues, renderState, onUpdate } = visualState;
@@ -3508,8 +2723,8 @@ class VisualElement {
   }
   unmount() {
     this.projection && this.projection.unmount();
-    cancelFrame(this.notifyUpdate);
-    cancelFrame(this.render);
+    motionDom.cancelFrame(this.notifyUpdate);
+    motionDom.cancelFrame(this.render);
     this.valueSubscriptions.forEach((remove) => remove());
     this.valueSubscriptions.clear();
     this.removeFromVariantTree && this.removeFromVariantTree();
@@ -3536,7 +2751,7 @@ class VisualElement {
     }
     const removeOnChange = value.on("change", (latestValue) => {
       this.latestValues[key] = latestValue;
-      this.props.onUpdate && frame.preRender(this.notifyUpdate);
+      this.props.onUpdate && motionDom.frame.preRender(this.notifyUpdate);
       if (valueIsTransform && this.projection) {
         this.projection.isTransformDirty = true;
       }
@@ -3698,7 +2913,7 @@ class VisualElement {
     }
     let value = this.values.get(key);
     if (value === void 0 && defaultValue !== void 0) {
-      value = motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
+      value = motionDom.motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
       this.addValue(key, value);
     }
     return value;
@@ -4045,7 +3260,7 @@ class SVGVisualElement extends DOMVisualElement {
   }
   onBindTransform() {
     if (this.current && !this.renderState.dimensions) {
-      frame.postRender(this.updateDimensions);
+      motionDom.frame.postRender(this.updateDimensions);
     }
   }
   build(renderState, latestValues, props) {
@@ -4080,8 +3295,8 @@ function transformBoxPoints$1(point2, transformPoint2) {
 function isIdentityScale(scale2) {
   return scale2 === void 0 || scale2 === 1;
 }
-function hasScale({ scale: scale2, scaleX, scaleY }) {
-  return !isIdentityScale(scale2) || !isIdentityScale(scaleX) || !isIdentityScale(scaleY);
+function hasScale({ scale: scale2, scaleX: scaleX2, scaleY: scaleY2 }) {
+  return !isIdentityScale(scale2) || !isIdentityScale(scaleX2) || !isIdentityScale(scaleY2);
 }
 function hasTransform(values) {
   return hasScale(values) || has2DTranslate(values) || values.z || values.rotate || values.rotateX || values.rotateY || values.skewX || values.skewY;
@@ -4175,8 +3390,7 @@ class HTMLVisualElement extends DOMVisualElement {
   }
   readValueFromInstance(instance, key) {
     if (transformProps.has(key)) {
-      const defaultType = getDefaultValueType(key);
-      return defaultType ? defaultType.default || 0 : 0;
+      return readTransformValue(instance, key);
     } else {
       const computedStyle = getComputedStyle$1(instance);
       const value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
@@ -4264,7 +3478,7 @@ function createObjectVisualElement(subject) {
   visualElementStore.set(subject, node);
 }
 function animateSingleValue(value, keyframes2, options) {
-  const motionValue$1 = isMotionValue$1(value) ? value : motionValue(value);
+  const motionValue$1 = isMotionValue$1(value) ? value : motionDom.motionValue(value);
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
   return motionValue$1.animation;
 }
@@ -4314,7 +3528,7 @@ function createScopedAnimate(scope) {
     } else {
       animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
     }
-    const animation = new GroupPlaybackControls(animations);
+    const animation = new motionDom.GroupPlaybackControls(animations);
     if (scope) {
       scope.animations.push(animation);
     }
@@ -4357,7 +3571,7 @@ function getElementAnimationState(element) {
   state.set(element, animationState);
   return state.get(element);
 }
-class NativeAnimation extends NativeAnimationControls {
+class NativeAnimation extends motionDom.NativeAnimationControls {
   constructor(element, valueName, valueKeyframes, options) {
     const isCSSVar = valueName.startsWith("--");
     exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
@@ -4370,9 +3584,9 @@ class NativeAnimation extends NativeAnimationControls {
       valueKeyframes = [valueKeyframes];
     }
     hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-    if (isGenerator(options.type)) {
-      const generatorOptions = createGeneratorEasing(options, 100, options.type);
-      options.ease = supportsLinearEasing() ? generatorOptions.ease : defaultEasing;
+    if (motionDom.isGenerator(options.type)) {
+      const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
+      options.ease = motionDom.supportsLinearEasing() ? generatorOptions.ease : defaultEasing;
       options.duration = /* @__PURE__ */ secondsToMilliseconds$1(generatorOptions.duration);
       options.type = "keyframes";
     } else {
@@ -4431,7 +3645,7 @@ class NativeAnimation extends NativeAnimationControls {
   }
 }
 function animateElements(elementOrSelector, keyframes2, options, scope) {
-  const elements = resolveElements(elementOrSelector, scope);
+  const elements = motionDom.resolveElements(elementOrSelector, scope);
   const numElements = elements.length;
   exports.invariant(Boolean(numElements), "No valid element provided.");
   const animations = [];
@@ -4444,10 +3658,11 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
     for (const valueName in keyframes2) {
       const valueKeyframes = keyframes2[valueName];
       const valueOptions = {
-        ...getValueTransition$1(elementTransition, valueName)
+        ...motionDom.getValueTransition(elementTransition, valueName)
       };
       valueOptions.duration = valueOptions.duration ? /* @__PURE__ */ secondsToMilliseconds$1(valueOptions.duration) : valueOptions.duration;
       valueOptions.delay = /* @__PURE__ */ secondsToMilliseconds$1(valueOptions.delay || 0);
+      valueOptions.allowFlatten = !elementTransition.type && !elementTransition.ease;
       animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
     }
   }
@@ -4455,7 +3670,7 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
 }
 const createScopedWaapiAnimate = (scope) => {
   function scopedAnimate(elementOrSelector, keyframes2, options) {
-    return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes2, options, scope));
+    return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes2, options, scope));
   }
   return scopedAnimate;
 };
@@ -4471,8 +3686,8 @@ function observeTimeline(update, timeline) {
     }
     prevProgress = progress2;
   };
-  frame.update(onFrame, true);
-  return () => cancelFrame(onFrame);
+  motionDom.frame.update(onFrame, true);
+  return () => motionDom.cancelFrame(onFrame);
 }
 const resizeHandlers = /* @__PURE__ */ new WeakMap();
 let observer;
@@ -4512,7 +3727,7 @@ function createResizeObserver() {
 function resizeElement(target, handler) {
   if (!observer)
     createResizeObserver();
-  const elements = resolveElements(target);
+  const elements = motionDom.resolveElements(target);
   elements.forEach((element) => {
     let elementHandlers = resizeHandlers.get(element);
     if (!elementHandlers) {
@@ -4589,7 +3804,7 @@ const keys = {
     position: "Top"
   }
 };
-function updateAxisInfo(element, axisName, info, time2) {
+function updateAxisInfo(element, axisName, info, time) {
   const axis = info[axisName];
   const { length, position } = keys[axisName];
   const prev = axis.current;
@@ -4600,13 +3815,13 @@ function updateAxisInfo(element, axisName, info, time2) {
   axis.offset[0] = 0;
   axis.offset[1] = axis.scrollLength;
   axis.progress = /* @__PURE__ */ progress$1(0, axis.scrollLength, axis.current);
-  const elapsed = time2 - prevTime;
+  const elapsed = time - prevTime;
   axis.velocity = elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
 }
-function updateScrollInfo(element, info, time2) {
-  updateAxisInfo(element, "x", info, time2);
-  updateAxisInfo(element, "y", info, time2);
-  info.time = time2;
+function updateScrollInfo(element, info, time) {
+  updateAxisInfo(element, "x", info, time);
+  updateAxisInfo(element, "y", info, time);
+  info.time = time;
 }
 function calcInset(element, container) {
   const inset = { x: 0, y: 0 };
@@ -4761,8 +3976,8 @@ function measure(container, target = container, info) {
 function createOnScrollHandler(element, onScroll, info, options = {}) {
   return {
     measure: () => measure(element, options.target, info),
-    update: (time2) => {
-      updateScrollInfo(element, info, time2);
+    update: (time) => {
+      updateScrollInfo(element, info, time);
       if (options.offset || options.target) {
         resolveOffsets(element, info, options);
       }
@@ -4790,7 +4005,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     };
     const updateAll = () => {
       for (const handler of containerHandlers) {
-        handler.update(frameData.timestamp);
+        handler.update(motionDom.frameData.timestamp);
       }
     };
     const notifyAll2 = () => {
@@ -4798,9 +4013,9 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         handler.notify();
     };
     const listener2 = () => {
-      frame.read(measureAll, false, true);
-      frame.read(updateAll, false, true);
-      frame.update(notifyAll2, false, true);
+      motionDom.frame.read(measureAll, false, true);
+      motionDom.frame.read(updateAll, false, true);
+      motionDom.frame.update(notifyAll2, false, true);
     };
     scrollListeners.set(container, listener2);
     const target = getEventTarget(container);
@@ -4811,10 +4026,10 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     target.addEventListener("scroll", listener2, { passive: true });
   }
   const listener = scrollListeners.get(container);
-  frame.read(listener, false, true);
+  motionDom.frame.read(listener, false, true);
   return () => {
     var _a;
-    cancelFrame(listener);
+    motionDom.cancelFrame(listener);
     const currentHandlers = onScrollHandlers.get(container);
     if (!currentHandlers)
       return;
@@ -4848,7 +4063,7 @@ function getTimeline({ source, container = document.documentElement, axis = "y"
   }
   const elementCache = timelineCache.get(container);
   if (!elementCache[axis]) {
-    elementCache[axis] = supportsScrollTimeline() ? new ScrollTimeline({ source: container, axis }) : scrollTimelineFallback({ source: container, axis });
+    elementCache[axis] = motionDom.supportsScrollTimeline() ? new ScrollTimeline({ source: container, axis }) : scrollTimelineFallback({ source: container, axis });
   }
   return elementCache[axis];
 }
@@ -4897,7 +4112,7 @@ const thresholds = {
   all: 1
 };
 function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
-  const elements = resolveElements(elementOrSelector);
+  const elements = motionDom.resolveElements(elementOrSelector);
   const activeIntersections = /* @__PURE__ */ new WeakMap();
   const onIntersectionChange = (entries) => {
     entries.forEach((entry) => {
@@ -4955,16 +4170,16 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2 } = {})
   };
 }
 function delay$1(callback, timeout) {
-  const start = time.now();
+  const start = motionDom.time.now();
   const checkElapsed = ({ timestamp }) => {
     const elapsed = timestamp - start;
     if (elapsed >= timeout) {
-      cancelFrame(checkElapsed);
+      motionDom.cancelFrame(checkElapsed);
       callback(elapsed - timeout);
     }
   };
-  frame.read(checkElapsed, true);
-  return () => cancelFrame(checkElapsed);
+  motionDom.frame.read(checkElapsed, true);
+  return () => motionDom.cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
   return delay$1(callback, /* @__PURE__ */ secondsToMilliseconds$1(timeout));
@@ -4992,11 +4207,6 @@ function transform(...args) {
   });
   return useImmediate ? interpolator(inputValue) : interpolator;
 }
-const sync = frame;
-const cancelSync = stepsOrder.reduce((acc, key) => {
-  acc[key] = (process2) => cancelFrame(process2);
-  return acc;
-}, {});
 function createContext(providerComponentName, contextName) {
   const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
   const injectionKey = Symbol(symbolDescription);
@@ -5023,7 +4233,7 @@ function isMotionValue(value) {
 }
 function useInView(domRef, options) {
   const isInView = vue.ref(false);
-  vue.watch([domRef, () => vue.isRef(options) ? options.value : options], (_v1, _v2) => {
+  vue.watch([domRef, () => vue.isRef(options) ? options.value : options], (_v1, _v2, onCleanup) => {
     const realOptions = vue.unref(options) || {};
     const { once } = realOptions;
     if (!domRef.value || once && isInView.value) {
@@ -5035,7 +4245,10 @@ function useInView(domRef, options) {
         isInView.value = false;
       };
     };
-    return inView(domRef.value, onEnter, realOptions);
+    const cleanup = inView(domRef.value, onEnter, realOptions);
+    onCleanup(() => {
+      cleanup();
+    });
   }, {
     immediate: true
   });
@@ -5048,13 +4261,13 @@ function useAnimationFrame(callback) {
       initialTimestamp = timestamp;
     callback(timestamp - initialTimestamp, delta);
   };
-  const cancel = () => cancelFrame(provideTimeSinceStart);
+  const cancel = () => motionDom.cancelFrame(provideTimeSinceStart);
   vue.onBeforeUpdate(() => {
     cancel();
-    frame.update(provideTimeSinceStart, true);
+    motionDom.frame.update(provideTimeSinceStart, true);
   });
   vue.onUnmounted(() => cancel());
-  frame.update(provideTimeSinceStart, true);
+  motionDom.frame.update(provideTimeSinceStart, true);
 }
 const secondsToMilliseconds = (seconds) => seconds * 1e3;
 function millisecondsToSeconds(milliseconds) {
@@ -5206,7 +4419,6 @@ function isAnimateChanged(oldOptions, newOptions) {
       return oldVal !== newVal;
     });
   }
-  console.log(2344);
   return oldAnimate !== newAnimate;
 }
 const rotation = {
@@ -5472,7 +4684,7 @@ function handleHoverEvent$1(state2, event, lifecycle) {
   const eventName = `onHover${lifecycle}`;
   const callback = props[eventName];
   if (callback) {
-    frame.postRender(() => callback(event, extractEventInfo$1(event)));
+    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
   }
 }
 class HoverGesture extends Feature {
@@ -5486,7 +4698,7 @@ class HoverGesture extends Feature {
     const element = this.state.element;
     if (!element)
       return;
-    this.unmount = hover(
+    this.unmount = motionDom.hover(
       element,
       (el, startEvent) => {
         handleHoverEvent$1(this.state, startEvent, "Start");
@@ -5513,32 +4725,45 @@ function handlePressEvent(state2, event, lifecycle) {
   const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
   const callback = props[eventName];
   if (callback) {
-    frame.postRender(() => callback(event, extractEventInfo$1(event)));
+    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
   }
 }
 class PressGesture extends Feature {
   isActive() {
-    return Boolean(this.state.options.press);
+    const { whilePress, onPress, onPressCancel, onPressStart } = this.state.options;
+    return Boolean(whilePress || onPress || onPressCancel || onPressStart);
   }
   constructor(state2) {
     super(state2);
   }
   mount() {
-    const element = this.state.element;
-    if (!element)
-      return;
-    this.unmount = press(
-      element,
-      (el, startEvent) => {
-        handlePressEvent(this.state, startEvent, "Start");
-        return (endEvent, { success }) => handlePressEvent(
-          this.state,
-          endEvent,
-          success ? "End" : "Cancel"
-        );
-      },
-      { useGlobalTarget: this.state.options.globalPressTarget }
-    );
+    this.register();
+  }
+  update() {
+    const preProps = this.state.visualElement.prevProps;
+    if (preProps.whilePress !== this.state.options.whilePress) {
+      this.register();
+    }
+  }
+  register() {
+    this.unmount();
+    if (this.isActive()) {
+      const element = this.state.element;
+      if (!element)
+        return;
+      this.unmount = motionDom.press(
+        element,
+        (el, startEvent) => {
+          handlePressEvent(this.state, startEvent, "Start");
+          return (endEvent, { success }) => handlePressEvent(
+            this.state,
+            endEvent,
+            success ? "End" : "Cancel"
+          );
+        },
+        { useGlobalTarget: this.state.options.globalPressTarget }
+      );
+    }
   }
 }
 function handleHoverEvent(state2, entry, lifecycle) {
@@ -5549,7 +4774,7 @@ function handleHoverEvent(state2, entry, lifecycle) {
   const eventName = `onViewport${lifecycle}`;
   const callback = props[eventName];
   if (callback) {
-    frame.postRender(() => callback(entry));
+    motionDom.frame.postRender(() => callback(entry));
   }
 }
 class InViewGesture extends Feature {
@@ -5769,7 +4994,7 @@ class PanSession {
       if (!isPanStarted && !isDistancePastThreshold)
         return;
       const { point: point3 } = info2;
-      const { timestamp: timestamp2 } = frameData;
+      const { timestamp: timestamp2 } = motionDom.frameData;
       this.history.push({ ...point3, timestamp: timestamp2 });
       const { onStart, onMove } = this.handlers;
       if (!isPanStarted) {
@@ -5781,7 +5006,7 @@ class PanSession {
     this.handlePointerMove = (event2, info2) => {
       this.lastMoveEvent = event2;
       this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
-      frame.update(this.updatePoint, true);
+      motionDom.frame.update(this.updatePoint, true);
     };
     this.handlePointerUp = (event2, info2) => {
       this.end();
@@ -5808,7 +5033,7 @@ class PanSession {
     const info = extractEventInfo(event);
     const initialInfo = transformPoint(info, this.transformPagePoint);
     const { point: point2 } = initialInfo;
-    const { timestamp } = frameData;
+    const { timestamp } = motionDom.frameData;
     this.history = [{ ...point2, timestamp }];
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -5835,7 +5060,7 @@ class PanSession {
   }
   end() {
     this.removeListeners && this.removeListeners();
-    cancelFrame(this.updatePoint);
+    motionDom.cancelFrame(this.updatePoint);
   }
 }
 function transformPoint(info, transformPagePoint) {
@@ -5875,15 +5100,15 @@ function getVelocity(history, timeDelta) {
   if (!timestampedPoint) {
     return { x: 0, y: 0 };
   }
-  const time2 = millisecondsToSeconds(
+  const time = millisecondsToSeconds(
     lastPoint.timestamp - timestampedPoint.timestamp
   );
-  if (time2 === 0) {
+  if (time === 0) {
     return { x: 0, y: 0 };
   }
   const currentVelocity = {
-    x: (lastPoint.x - timestampedPoint.x) / time2,
-    y: (lastPoint.y - timestampedPoint.y) / time2
+    x: (lastPoint.x - timestampedPoint.x) / time,
+    y: (lastPoint.y - timestampedPoint.y) / time
   };
   if (currentVelocity.x === Infinity) {
     currentVelocity.x = 0;
@@ -6029,7 +5254,7 @@ class VisualElementDragControls {
         this.originPoint[axis] = current;
       });
       if (onDragStart) {
-        frame.postRender(() => onDragStart(event, info));
+        motionDom.frame.postRender(() => onDragStart(event, info));
       }
       addValueToWillChange(this.visualElement, "transform");
       const state2 = this.visualElement.state;
@@ -6082,15 +5307,15 @@ class VisualElementDragControls {
     );
   }
   stop(event, info) {
-    const isDragging2 = this.isDragging;
+    const isDragging = this.isDragging;
     this.cancel();
-    if (!isDragging2)
+    if (!isDragging)
       return;
     const { velocity } = info;
     this.startAnimation(velocity);
     const { onDragEnd } = this.getProps();
     if (onDragEnd) {
-      frame.postRender(() => onDragEnd(event, info));
+      motionDom.frame.postRender(() => onDragEnd(event, info));
     }
   }
   cancel() {
@@ -6343,19 +5568,19 @@ class VisualElementDragControls {
       projection.root && projection.root.updateScroll();
       projection.updateLayout();
     }
-    frame.read(measureDragConstraints);
+    motionDom.frame.read(measureDragConstraints);
     const stopResizeListener = addDomEvent$1(window, "resize", () => this.scalePositionWithinConstraints());
     const stopLayoutUpdateListener = projection.addEventListener(
       "didUpdate",
       ({ delta, hasLayoutChanged }) => {
         if (this.isDragging && hasLayoutChanged) {
           eachAxis$1((axis) => {
-            const motionValue2 = this.getAxisMotionValue(axis);
-            if (!motionValue2)
+            const motionValue = this.getAxisMotionValue(axis);
+            if (!motionValue)
               return;
             this.originPoint[axis] += delta[axis].translate;
-            motionValue2.set(
-              motionValue2.get() + delta[axis].translate
+            motionValue.set(
+              motionValue.get() + delta[axis].translate
             );
           });
           this.visualElement.render();
@@ -6546,7 +5771,7 @@ class LayoutFeature extends Feature {
 function asyncHandler(handler) {
   return (event, info) => {
     if (handler) {
-      frame.postRender(() => handler(event, info));
+      motionDom.frame.postRender(() => handler(event, info));
     }
   };
 }
@@ -6583,7 +5808,7 @@ class PanGesture extends Feature {
         const { onPanEnd } = this.state.options;
         delete this.session;
         if (onPanEnd) {
-          frame.postRender(() => onPanEnd(event, info));
+          motionDom.frame.postRender(() => onPanEnd(event, info));
         }
       }
     };
@@ -6602,7 +5827,6 @@ class PanGesture extends Feature {
     this.session && this.session.end();
   }
 }
-const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
 const compareByDepth = (a, b) => a.depth - b.depth;
 class FlatTree {
   constructor() {
@@ -6894,11 +6118,11 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
     transform2 += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
   }
   if (latestTransform) {
-    const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform;
+    const { transformPerspective, rotate: rotate2, rotateX, rotateY, skewX, skewY } = latestTransform;
     if (transformPerspective)
       transform2 = `perspective(${transformPerspective}px) ${transform2}`;
-    if (rotate)
-      transform2 += `rotate(${rotate}deg) `;
+    if (rotate2)
+      transform2 += `rotate(${rotate2}deg) `;
     if (rotateX)
       transform2 += `rotateX(${rotateX}deg) `;
     if (rotateY)
@@ -6918,6 +6142,11 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
 function eachAxis(callback) {
   return [callback("x"), callback("y")];
 }
+const metrics = {
+  nodes: 0,
+  calculatedTargetDeltas: 0,
+  calculatedProjections: 0
+};
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 const animationTarget = 1e3;
@@ -6942,7 +6171,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
   const appearId = getOptimisedAppearId(visualElement);
   if (window.MotionHasOptimisedAnimation(appearId, "transform")) {
     const { layout, layoutId } = projectionNode.options;
-    window.MotionCancelOptimisedAnimation(appearId, "transform", frame, !(layout || layoutId));
+    window.MotionCancelOptimisedAnimation(appearId, "transform", motionDom.frame, !(layout || layoutId));
   }
   const { parent } = projectionNode;
   if (parent && !parent.hasCheckedOptimisedAppear) {
@@ -6983,10 +6212,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
       this.updateProjection = () => {
         this.projectionUpdateScheduled = false;
+        if (motionDom.statsBuffer.value) {
+          metrics.nodes = metrics.calculatedTargetDeltas = metrics.calculatedProjections = 0;
+        }
         this.nodes.forEach(propagateDirtyNodes);
         this.nodes.forEach(resolveTargetDelta);
         this.nodes.forEach(calcProjection);
         this.nodes.forEach(cleanDirtyNodes);
+        if (motionDom.statsBuffer.addProjectionMetrics) {
+          motionDom.statsBuffer.addProjectionMetrics(metrics);
+        }
       };
       this.resolvedRelativeTargetAt = 0;
       this.hasProjected = false;
@@ -7068,7 +6303,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
             const animationOptions = {
-              ...getValueTransition$1(layoutTransition, "layout"),
+              ...motionDom.getValueTransition(layoutTransition, "layout"),
               onPlay: onLayoutAnimationStart,
               onComplete: onLayoutAnimationComplete
             };
@@ -7096,7 +6331,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       stack && stack.remove(this);
       this.parent && this.parent.children.delete(this);
       this.instance = void 0;
-      cancelFrame(this.updateProjection);
+      motionDom.cancelFrame(this.updateProjection);
     }
     // only on the root
     blockUpdate() {
@@ -7169,19 +6404,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.nodes.forEach(updateLayout);
       this.nodes.forEach(notifyLayoutUpdate);
       this.clearAllSnapshots();
-      const now2 = time.now();
-      frameData.delta = clamp$1(0, 1e3 / 60, now2 - frameData.timestamp);
-      frameData.timestamp = now2;
-      frameData.isProcessing = true;
-      frameSteps.update.process(frameData);
-      frameSteps.preRender.process(frameData);
-      frameSteps.render.process(frameData);
-      frameData.isProcessing = false;
+      const now = motionDom.time.now();
+      motionDom.frameData.delta = clamp$1(0, 1e3 / 60, now - motionDom.frameData.timestamp);
+      motionDom.frameData.timestamp = now;
+      motionDom.frameData.isProcessing = true;
+      motionDom.frameSteps.update.process(motionDom.frameData);
+      motionDom.frameSteps.preRender.process(motionDom.frameData);
+      motionDom.frameSteps.render.process(motionDom.frameData);
+      motionDom.frameData.isProcessing = false;
     }
     didUpdate() {
       if (!this.updateScheduled) {
         this.updateScheduled = true;
-        microtask.read(this.scheduleUpdate);
+        motionDom.microtask.read(this.scheduleUpdate);
       }
     }
     clearAllSnapshots() {
@@ -7191,11 +6426,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     scheduleUpdateProjection() {
       if (!this.projectionUpdateScheduled) {
         this.projectionUpdateScheduled = true;
-        frame.preRender(this.updateProjection, false, true);
+        motionDom.frame.preRender(this.updateProjection, false, true);
       }
     }
     scheduleCheckAfterUnmount() {
-      frame.postRender(() => {
+      motionDom.frame.postRender(() => {
         if (this.isLayoutDirty) {
           this.root.didUpdate();
         } else {
@@ -7381,7 +6616,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     forceRelativeParentToResolveTarget() {
       if (!this.relativeParent)
         return;
-      if (this.relativeParent.resolvedRelativeTargetAt !== frameData.timestamp) {
+      if (this.relativeParent.resolvedRelativeTargetAt !== motionDom.frameData.timestamp) {
         this.relativeParent.resolveTargetDelta(true);
       }
     }
@@ -7398,7 +6633,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       const { layout, layoutId } = this.options;
       if (!this.layout || !(layout || layoutId))
         return;
-      this.resolvedRelativeTargetAt = frameData.timestamp;
+      this.resolvedRelativeTargetAt = motionDom.frameData.timestamp;
       if (!this.targetDelta && !this.relativeTarget) {
         const relativeParent = this.getClosestProjectingParent();
         if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
@@ -7445,6 +6680,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
           this.relativeParent = this.relativeTarget = void 0;
         }
       }
+      if (motionDom.statsBuffer.value) {
+        metrics.calculatedTargetDeltas++;
+      }
     }
     getClosestProjectingParent() {
       if (!this.parent || hasScale(this.parent.latestValues) || has2DTranslate(this.parent.latestValues)) {
@@ -7470,7 +6708,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (isShared && (this.isSharedProjectionDirty || this.isTransformDirty)) {
         canSkip = false;
       }
-      if (this.resolvedRelativeTargetAt === frameData.timestamp) {
+      if (this.resolvedRelativeTargetAt === motionDom.frameData.timestamp) {
         canSkip = false;
       }
       if (canSkip)
@@ -7510,6 +6748,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.scheduleRender();
         this.notifyListeners("projectionUpdate", target);
       }
+      if (motionDom.statsBuffer.value) {
+        metrics.calculatedProjections++;
+      }
     }
     hide() {
       this.isVisible = false;
@@ -7583,11 +6824,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.resumingFrom.currentAnimation.stop();
       }
       if (this.pendingAnimation) {
-        cancelFrame(this.pendingAnimation);
+        motionDom.cancelFrame(this.pendingAnimation);
         this.pendingAnimation = void 0;
       }
-      this.pendingAnimation = frame.update(() => {
+      this.pendingAnimation = motionDom.frame.update(() => {
         globalProjectionState.hasAnimatedSinceResize = true;
+        motionDom.activeAnimations.layout++;
         this.currentAnimation = animateSingleValue(0, animationTarget, {
           ...options,
           onUpdate: (latest) => {
@@ -7595,8 +6837,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             options.onUpdate && options.onUpdate(latest);
           },
           onStop: () => {
+            motionDom.activeAnimations.layout--;
           },
           onComplete: () => {
+            motionDom.activeAnimations.layout--;
             options.onComplete && options.onComplete();
             this.completeAnimation();
           }
@@ -7874,6 +7118,9 @@ function notifyLayoutUpdate(node) {
   node.options.transition = void 0;
 }
 function propagateDirtyNodes(node) {
+  if (motionDom.statsBuffer.value) {
+    metrics.nodes++;
+  }
   if (!node.parent)
     return;
   if (!node.isProjecting()) {
@@ -8184,7 +7431,8 @@ function animateUpdates({
   });
 }
 function resolveDirectAnimation(directAnimate, directTransition) {
-  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
+  var _a;
+  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom || ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom));
   if (!variant)
     return {};
   const transition = variant.transition || directTransition || this.options.transition || {};
@@ -8236,7 +7484,7 @@ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
         this.element,
         { [key]: keyValue },
         {
-          ...animationOptions,
+          ...(animationOptions == null ? void 0 : animationOptions[key]) || animationOptions,
           delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
         }
       );
@@ -8404,14 +7652,14 @@ class MotionState {
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId);
-      frame.render(() => {
+      motionDom.frame.render(() => {
         mountedLayoutIds.clear();
       });
     }
   }
   clearAnimation() {
     var _a;
-    this.currentProcess && cancelFrame(this.currentProcess);
+    this.currentProcess && motionDom.cancelFrame(this.currentProcess);
     this.currentProcess = null;
     (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
       child.state.clearAnimation();
@@ -8420,7 +7668,7 @@ class MotionState {
   // update trigger animation
   startAnimation() {
     this.clearAnimation();
-    this.currentProcess = frame.render(() => {
+    this.currentProcess = motionDom.frame.render(() => {
       this.currentProcess = null;
       this.animateUpdates();
     });
@@ -8481,7 +7729,7 @@ class MotionState {
     if (isAnimate) {
       this.animateUpdates({
         isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants,
-        isExit: this.activeStates.exit
+        isExit: name === "exit" && this.activeStates.exit
       });
     }
   }
@@ -8601,17 +7849,17 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     dragMomentum: true,
     whileDrag: void 0,
     crossfade: true,
-    whileHover: ({ hover: hover2 }) => {
-      if (process.env.NODE_ENV === "development" && hover2) {
+    whileHover: ({ hover }) => {
+      if (process.env.NODE_ENV === "development" && hover) {
         vue.warn("hover is deprecated. Use whileHover instead.");
       }
-      return hover2;
+      return hover;
     },
-    whilePress: ({ press: press2 }) => {
-      if (process.env.NODE_ENV === "development" && press2) {
+    whilePress: ({ press }) => {
+      if (process.env.NODE_ENV === "development" && press) {
         vue.warn("press is deprecated. Use whilePress instead.");
       }
-      return press2;
+      return press;
     },
     whileInView: ({ inView: inView2 }) => {
       if (process.env.NODE_ENV === "development" && inView2) {
@@ -8647,6 +7895,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         layoutGroup,
         motionConfig: config.value,
         inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
+        animatePresenceContext,
         initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
       };
     }
@@ -8816,7 +8065,7 @@ function usePopLayout(props) {
     if (!style2)
       return;
     styles.delete(state2);
-    frame.render(() => {
+    motionDom.frame.render(() => {
       document.head.removeChild(style2);
     });
   }
@@ -8843,7 +8092,6 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: [Boolean, Function], default: false },
     anchorX: { default: "left" }
   },
   setup(__props) {
@@ -8857,6 +8105,16 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       presenceContext.initial = void 0;
     });
     const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
+    function findMotionElement(el) {
+      let current = el;
+      while (current) {
+        if (mountedStates.get(current)) {
+          return current;
+        }
+        current = current.firstElementChild;
+      }
+      return null;
+    }
     function enter(el) {
       const state2 = mountedStates.get(el);
       if (!state2) {
@@ -8874,29 +8132,28 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       exitDom.clear();
     });
     function exit(el, done) {
-      if (props.unwrapElement) {
-        if (typeof props.unwrapElement === "function") {
-          el = props.unwrapElement(el) || el;
-        } else {
-          el = el.firstElementChild || el;
+      var _a;
+      const motionEl = findMotionElement(el);
+      const state2 = mountedStates.get(motionEl);
+      if (!motionEl || !state2) {
+        done();
+        if (exitDom.size === 0) {
+          (_a = props.onExitComplete) == null ? void 0 : _a.call(props);
         }
+        return;
       }
-      const state2 = mountedStates.get(el);
-      if (!state2) {
-        return done();
-      }
-      exitDom.set(el, true);
-      removeDoneCallback(el);
+      exitDom.set(motionEl, true);
+      removeDoneCallback(motionEl);
       addPopStyle(state2);
       function doneCallback(e) {
-        var _a, _b;
-        if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+        var _a2, _b;
+        if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
           const projection = state2.visualElement.projection;
           if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state2.isSafeToRemove && !state2.isVShow) {
             return;
           }
-          removeDoneCallback(el);
-          exitDom.delete(el);
+          removeDoneCallback(motionEl);
+          exitDom.delete(motionEl);
           if (exitDom.size === 0) {
             (_b = props.onExitComplete) == null ? void 0 : _b.call(props);
           }
@@ -8906,15 +8163,15 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             removePopStyle(state2);
           }
           done();
-          if (!el.isConnected) {
+          if (!motionEl.isConnected) {
             state2.unmount(true);
           }
         }
       }
       delay(() => {
         state2.setActive("exit", true);
-        doneCallbacks.set(el, doneCallback);
-        el.addEventListener("motioncomplete", doneCallback);
+        doneCallbacks.set(motionEl, doneCallback);
+        motionEl.addEventListener("motioncomplete", doneCallback);
       });
     }
     const transitionProps = vue.computed(() => {
@@ -9003,7 +8260,7 @@ function moveItem([...arr], fromIndex, toIndex) {
   return arr;
 }
 function useDefaultMotionValue(value, defaultValue = 0) {
-  return isMotionValue(value) ? value : motionValue(defaultValue);
+  return isMotionValue(value) ? value : motionDom.motionValue(defaultValue);
 }
 const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -9135,16 +8392,16 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 function useCombineMotionValues(combineValues) {
-  const value = motionValue(combineValues());
+  const value = motionDom.motionValue(combineValues());
   const updateValue = () => value.set(combineValues());
-  const scheduleUpdate = () => frame.preRender(updateValue, false, true);
+  const scheduleUpdate = () => motionDom.frame.preRender(updateValue, false, true);
   let subscriptions;
   const subscribe = (values) => {
     subscriptions = values.map((v) => v.on("change", scheduleUpdate));
   };
   const unsubscribe = () => {
     subscriptions.forEach((unsubscribe2) => unsubscribe2());
-    cancelFrame(updateValue);
+    motionDom.cancelFrame(updateValue);
   };
   vue.onUnmounted(() => {
     unsubscribe();
@@ -9156,16 +8413,16 @@ function useCombineMotionValues(combineValues) {
   };
 }
 function useComputed(computed) {
-  collectMotionValues.current = [];
+  motionDom.collectMotionValues.current = [];
   const { value, subscribe, unsubscribe } = useCombineMotionValues(computed);
-  subscribe(collectMotionValues.current);
-  collectMotionValues.current = void 0;
+  subscribe(motionDom.collectMotionValues.current);
+  motionDom.collectMotionValues.current = void 0;
   vue.onBeforeUpdate(() => {
     unsubscribe();
-    collectMotionValues.current = [];
+    motionDom.collectMotionValues.current = [];
     computed();
-    subscribe(collectMotionValues.current);
-    collectMotionValues.current = void 0;
+    subscribe(motionDom.collectMotionValues.current);
+    motionDom.collectMotionValues.current = void 0;
   });
   return value;
 }
@@ -9173,9 +8430,7 @@ function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);
   }
-  const transformer = vue.computed(() => {
-    return typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(vue.isRef(inputRangeOrTransformer) ? inputRangeOrTransformer.value : inputRangeOrTransformer, outputRange, options);
-  });
+  const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : vue.isRef(inputRangeOrTransformer) ? vue.computed(() => transform(inputRangeOrTransformer.value, outputRange, options)) : transform(inputRangeOrTransformer, outputRange, options);
   return Array.isArray(input) ? useListTransform(
     input,
     transformer
@@ -9200,9 +8455,9 @@ function useListTransform(values, transformer) {
   return value;
 }
 function useTime() {
-  const time2 = motionValue(0);
-  useAnimationFrame((t) => time2.set(t));
-  return time2;
+  const time = motionDom.motionValue(0);
+  useAnimationFrame((t) => time.set(t));
+  return time;
 }
 function useMotionTemplate(fragments, ...values) {
   const numFragments = fragments.length;
@@ -9235,7 +8490,7 @@ function toNumber(v) {
 }
 function useSpring(source, config = {}) {
   let activeSpringAnimation = null;
-  const value = motionValue(
+  const value = motionDom.motionValue(
     isMotionValue(source) ? toNumber(source.get()) : source
   );
   let latestValue = value.get();
@@ -9250,7 +8505,7 @@ function useSpring(source, config = {}) {
   const startAnimation = () => {
     const animation = activeSpringAnimation;
     if ((animation == null ? void 0 : animation.time) === 0) {
-      animation.sample(frameData.delta);
+      animation.sample(motionDom.frameData.delta);
     }
     stopAnimation2();
     const springConfig = vue.isRef(config) ? config.value : config;
@@ -9273,7 +8528,7 @@ function useSpring(source, config = {}) {
     value.attach((v, set) => {
       latestValue = v;
       latestSetter = set;
-      frame.update(startAnimation);
+      motionDom.frame.update(startAnimation);
       return value.get();
     }, stopAnimation2);
   }, { immediate: true });
@@ -9292,10 +8547,10 @@ function refWarning(name, ref) {
 }
 function createScrollMotionValues() {
   return {
-    scrollX: motionValue(0),
-    scrollY: motionValue(0),
-    scrollXProgress: motionValue(0),
-    scrollYProgress: motionValue(0)
+    scrollX: motionDom.motionValue(0),
+    scrollY: motionDom.motionValue(0),
+    scrollXProgress: motionDom.motionValue(0),
+    scrollYProgress: motionDom.motionValue(0)
   };
 }
 function useScroll({
@@ -9304,46 +8559,48 @@ function useScroll({
   ...options
 } = {}) {
   const values = createScrollMotionValues();
-  let cleanup;
-  const setupScroll = () => {
-    cleanup == null ? void 0 : cleanup();
-    cleanup = scroll(
-      (_progress, { x, y }) => {
-        values.scrollX.set(x.current);
-        values.scrollXProgress.set(x.progress);
-        values.scrollY.set(y.current);
-        values.scrollYProgress.set(y.progress);
-      },
-      {
-        ...options,
-        container: (container == null ? void 0 : container.value) ?? void 0,
-        target: (target == null ? void 0 : target.value) ?? void 0
-      }
-    );
-  };
   vue.onMounted(() => {
     refWarning("target", target);
     refWarning("container", container);
-    setupScroll();
   });
-  vue.onUnmounted(() => cleanup == null ? void 0 : cleanup());
   vue.watch(
-    () => [container == null ? void 0 : container.value, target == null ? void 0 : target.value, options.offset],
-    setupScroll
+    [container, target, () => options.offset],
+    (n, o, onCleanup) => {
+      const cleanup = scroll(
+        (_progress, { x, y }) => {
+          values.scrollX.set(x.current);
+          values.scrollXProgress.set(x.progress);
+          values.scrollY.set(y.current);
+          values.scrollYProgress.set(y.progress);
+        },
+        {
+          ...options,
+          container: (container == null ? void 0 : container.value) ?? void 0,
+          target: (target == null ? void 0 : target.value) ?? void 0
+        }
+      );
+      onCleanup(() => {
+        cleanup();
+      });
+    },
+    {
+      immediate: true,
+      flush: "post"
+    }
   );
   return values;
 }
 function useVelocity(value) {
-  const velocity = motionValue(value.getVelocity());
+  const velocity = motionDom.motionValue(value.getVelocity());
   const updateVelocity = () => {
     const latest = value.getVelocity();
     velocity.set(latest);
     if (latest) {
-      frame.update(updateVelocity);
+      motionDom.frame.update(updateVelocity);
     }
   };
   useMotionValueEvent(value, "change", () => {
-    frame.update(updateVelocity, false, true);
+    motionDom.frame.update(updateVelocity, false, true);
   });
   return velocity;
 }
@@ -9453,7 +8710,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       }
       return axis.value;
     });
-    const isDragging2 = vue.ref(false);
+    const isDragging = vue.ref(false);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$6), vue.mergeProps(bindProps(), {
         drag: drag.value,
@@ -9461,17 +8718,17 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
           const { velocity } = gesturePoint;
           velocity[vue.unref(axis)] && vue.unref(updateOrder)(_ctx.value, point2[vue.unref(axis)].get(), velocity[vue.unref(axis)]);
-          !isDragging2.value && (isDragging2.value = true);
+          !isDragging.value && (isDragging.value = true);
           _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
         }),
         onDragEnd: _cache[1] || (_cache[1] = (event, gesturePoint) => {
-          isDragging2.value = false;
+          isDragging.value = false;
           _ctx.onDragEnd && _ctx.onDragEnd(event, gesturePoint);
         }),
         onLayoutMeasure: _cache[2] || (_cache[2] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
       }), {
         default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging2.value }),
+          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
           vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
         ]),
         _: 3
@@ -9586,33 +8843,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const components = {
-  motion: [
-    "Motion",
-    "AnimatePresence",
-    "LayoutGroup",
-    "MotionConfig",
-    "ReorderGroup",
-    "ReorderItem"
-  ]
-};
-const utilities = {
-  utilities: [
-    "useTransform",
-    "useTime",
-    "useMotionTemplate",
-    "useSpring",
-    "useScroll",
-    "useMotionValue",
-    "useVelocity",
-    "useAnimate",
-    "useInView",
-    "useAnimationFrame",
-    "useMotionValueEvent",
-    "useLayoutGroup",
-    "useDragControls"
-  ]
-};
 function useAnimate() {
   const dom = vue.ref(null);
   const domProxy = new Proxy(dom, {
@@ -9733,6 +8963,10 @@ function useAnimationControls() {
   });
   return controls;
 }
+function useReducedMotion(options = {}) {
+  const reducedMotion = core.useMediaQuery("(prefers-reduced-motion: reduce)", options);
+  return vue.computed(() => reducedMotion.value);
+}
 class DragControls {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
@@ -9772,11 +9006,50 @@ class DragControls {
 }
 const createDragControls = () => new DragControls();
 const useDragControls = createDragControls;
+Object.defineProperty(exports, "MotionValue", {
+  enumerable: true,
+  get: () => motionDom.MotionValue
+});
+Object.defineProperty(exports, "cancelFrame", {
+  enumerable: true,
+  get: () => motionDom.cancelFrame
+});
+Object.defineProperty(exports, "frame", {
+  enumerable: true,
+  get: () => motionDom.frame
+});
+Object.defineProperty(exports, "frameData", {
+  enumerable: true,
+  get: () => motionDom.frameData
+});
+Object.defineProperty(exports, "hover", {
+  enumerable: true,
+  get: () => motionDom.hover
+});
+Object.defineProperty(exports, "isDragActive", {
+  enumerable: true,
+  get: () => motionDom.isDragActive
+});
+Object.defineProperty(exports, "motionValue", {
+  enumerable: true,
+  get: () => motionDom.motionValue
+});
+Object.defineProperty(exports, "press", {
+  enumerable: true,
+  get: () => motionDom.press
+});
+Object.defineProperty(exports, "time", {
+  enumerable: true,
+  get: () => motionDom.time
+});
+Object.defineProperty(exports, "useMotionValue", {
+  enumerable: true,
+  get: () => motionDom.motionValue
+});
 exports.AnimatePresence = _sfc_main$5;
 exports.LayoutGroup = _sfc_main;
 exports.Motion = _sfc_main$6;
 exports.MotionConfig = _sfc_main$4;
-exports.MotionValue = MotionValue;
 exports.Reorder = Reorder;
 exports.ReorderGroup = ReorderGroup;
 exports.ReorderItem = ReorderItem;
@@ -9788,13 +9061,10 @@ exports.anticipate = anticipate;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
-exports.cancelFrame = cancelFrame;
-exports.cancelSync = cancelSync;
 exports.circIn = circIn;
 exports.circInOut = circInOut;
 exports.circOut = circOut;
 exports.clamp = clamp$1;
-exports.components = components;
 exports.createContext = createContext;
 exports.createScopedAnimate = createScopedAnimate;
 exports.cubicBezier = cubicBezier;
@@ -9804,28 +9074,21 @@ exports.distance2D = distance2D;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
-exports.frame = frame;
-exports.frameData = frameData;
-exports.frameSteps = frameSteps;
 exports.getContextWindow = getContextWindow;
-exports.hover = hover;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.injectLayoutGroup = injectLayoutGroup;
 exports.injectMotion = injectMotion;
 exports.interpolate = interpolate;
-exports.isDragActive = isDragActive;
 exports.isMotionValue = isMotionValue;
 exports.keyframes = keyframes;
 exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motion = motion;
-exports.motionValue = motionValue;
 exports.mountedStates = mountedStates;
 exports.noop = noop;
 exports.pipe = pipe;
-exports.press = press;
 exports.progress = progress$1;
 exports.provideLayoutGroup = provideLayoutGroup;
 exports.provideMotion = provideMotion;
@@ -9837,8 +9100,6 @@ exports.secondsToMilliseconds = secondsToMilliseconds;
 exports.spring = spring;
 exports.stagger = stagger;
 exports.steps = steps;
-exports.sync = sync;
-exports.time = time;
 exports.transform = transform;
 exports.useAnimate = useAnimate;
 exports.useAnimationControls = useAnimationControls;
@@ -9851,12 +9112,11 @@ exports.useInView = useInView;
 exports.useLayoutGroup = useLayoutGroup;
 exports.useMotionConfig = useMotionConfig;
 exports.useMotionTemplate = useMotionTemplate;
-exports.useMotionValue = motionValue;
 exports.useMotionValueEvent = useMotionValueEvent;
+exports.useReducedMotion = useReducedMotion;
 exports.useScroll = useScroll;
 exports.useSpring = useSpring;
 exports.useTime = useTime;
 exports.useTransform = useTransform;
 exports.useVelocity = useVelocity;
-exports.utilities = utilities;
 exports.wrap = wrap;