motion-v 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -1,27 +1,19 @@
-import "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { frame } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
 import { createBox } from "../../projection/geometry/models.mjs";
 import { DOMVisualElement } from "../dom/DOMVisualElement.mjs";
 import { camelToDash } from "../dom/utils/camel-to-dash.mjs";
-import { getDefaultValueType } from "../dom/value-types/defaults.mjs";
-import { transformProps } from "../html/utils/keys-transform.mjs";
 import { buildSVGAttrs } from "./utils/build-attrs.mjs";
 import { camelCaseAttributes } from "./utils/camel-case-attrs.mjs";
 import { isSVGTag } from "./utils/is-svg-tag.mjs";
-import { updateSVGDimensions } from "./utils/measure.mjs";
 import { renderSVG } from "./utils/render.mjs";
 import { scrapeMotionValuesFromProps } from "./utils/scrape-motion-values.mjs";
+import { transformProps } from "../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/render/utils/keys-transform.mjs";
+import { getDefaultValueType } from "../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/value/types/maps/defaults.mjs";
 class SVGVisualElement extends DOMVisualElement {
   constructor() {
     super(...arguments);
     this.type = "svg";
     this.isSVGTag = false;
     this.measureInstanceViewportBox = createBox;
-    this.updateDimensions = () => {
-      if (this.current && !this.renderState.dimensions) {
-        updateSVGDimensions(this.current, this.renderState);
-      }
-    };
   }
   getBaseTargetFromProps(props, key) {
     return props[key];
@@ -37,11 +29,6 @@ class SVGVisualElement extends DOMVisualElement {
   scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return scrapeMotionValuesFromProps(props, prevProps, visualElement);
   }
-  onBindTransform() {
-    if (this.current && !this.renderState.dimensions) {
-      frame.postRender(this.updateDimensions);
-    }
-  }
   build(renderState, latestValues, props) {
     buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
   }

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/svg/utils/build-attrs.mjs

@@ -1,12 +1,9 @@
 import { buildHTMLStyles } from "../../html/utils/build-styles.mjs";
 import { buildSVGPath } from "./path.mjs";
-import { calcSVGTransformOrigin } from "./transform-origin.mjs";
 function buildSVGAttrs(state, {
   attrX,
   attrY,
   attrScale,
-  originX,
-  originY,
   pathLength,
   pathSpacing = 1,
   pathOffset = 0,
@@ -22,14 +19,18 @@ function buildSVGAttrs(state, {
   }
   state.attrs = state.style;
   state.style = {};
-  const { attrs, style, dimensions } = state;
+  const { attrs, style } = state;
   if (attrs.transform) {
-    if (dimensions)
-      style.transform = attrs.transform;
+    style.transform = attrs.transform;
     delete attrs.transform;
   }
-  if (dimensions && (originX !== void 0 || originY !== void 0 || style.transform)) {
-    style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== void 0 ? originX : 0.5, originY !== void 0 ? originY : 0.5);
+  if (style.transform || attrs.transformOrigin) {
+    style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+    delete attrs.transformOrigin;
+  }
+  if (style.transform) {
+    style.transformBox = "fill-box";
+    delete attrs.transformBox;
   }
   if (attrX !== void 0)
     attrs.x = attrX;

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/svg/utils/path.mjs

@@ -1,4 +1,4 @@
-import { px } from "../../../value/types/numbers/units.mjs";
+import { px } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/value/types/numbers/units.mjs";
 const dashKeys = {
   offset: "stroke-dashoffset",
   array: "stroke-dasharray"

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs

@@ -1,6 +1,6 @@
 import { isMotionValue } from "../../../value/utils/is-motion-value.mjs";
-import { transformPropOrder } from "../../html/utils/keys-transform.mjs";
 import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from "../../html/utils/scrape-motion-values.mjs";
+import { transformPropOrder } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/render/utils/keys-transform.mjs";
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
   const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
   for (const key in props) {

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/utils/flat-tree.mjs

@@ -1,6 +1,5 @@
-import { addUniqueItem, removeItem } from "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/array.mjs";
-import "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 import { compareByDepth } from "./compare-by-depth.mjs";
+import { addUniqueItem, removeItem } from "../../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/array.mjs";
 class FlatTree {
   constructor() {
     this.children = [];

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -1,7 +1,6 @@
-import "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { warnOnce } from "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/warn-once.mjs";
-import { motionValue } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
 import { isMotionValue } from "../../value/utils/is-motion-value.mjs";
+import { warnOnce } from "../../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/warn-once.mjs";
+import { motionValue } from "../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/value/index.mjs";
 function updateMotionValuesFromProps(element, next, prev) {
   for (const key in next) {
     const nextValue = next[key];
@@ -9,7 +8,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "12.5.0", `Attempting to mix Motion versions ${nextValue.version} with 12.5.0 may not work as expected.`);
+        warnOnce(nextValue.version === "12.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/utils/resolve-variants.mjs

@@ -1,6 +1,6 @@
 function getValueState(visualElement) {
   const state = [{}, {}];
-  visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+  visualElement == null ? void 0 : visualElement.values.forEach((value, key) => {
     state[0][key] = value.get();
     state[1][key] = value.getVelocity();
   });

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/render/utils/setters.mjs

@@ -1,7 +1,6 @@
-import "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { motionValue } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
-import { resolveFinalValueInKeyframes } from "../../utils/resolve-value.mjs";
+import { isKeyframesTarget } from "../../animation/utils/is-keyframes-target.mjs";
 import { resolveVariant } from "./resolve-dynamic-variants.mjs";
+import { motionValue } from "../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/value/index.mjs";
 function setMotionValue(visualElement, key, value) {
   if (visualElement.hasValue(key)) {
     visualElement.getValue(key).set(value);
@@ -9,6 +8,9 @@ function setMotionValue(visualElement, key, value) {
     visualElement.addValue(key, motionValue(value));
   }
 }
+function resolveFinalValueInKeyframes(v) {
+  return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+}
 function setTarget(visualElement, definition) {
   const resolved = resolveVariant(visualElement, definition);
   let { transitionEnd = {}, transition = {}, ...target } = resolved || {};

package/dist/es/external/.pnpm/{framer-motion@12.5.0 → framer-motion@12.9.0}/external/framer-motion/dist/es/utils/delay.mjs

@@ -1,7 +1,6 @@
-import "../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { secondsToMilliseconds } from "../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/time-conversion.mjs";
-import { frame, cancelFrame } from "../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
-import { time } from "../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/sync-time.mjs";
+import { time } from "../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/frameloop/sync-time.mjs";
+import { frame, cancelFrame } from "../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { secondsToMilliseconds } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/time-conversion.mjs";
 function delay(callback, timeout) {
   const start = time.now();
   const checkElapsed = ({ timestamp }) => {
@@ -11,7 +10,7 @@ function delay(callback, timeout) {
       callback(elapsed - timeout);
     }
   };
-  frame.read(checkElapsed, true);
+  frame.setup(checkElapsed, true);
   return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/value/use-will-change/add-will-change.mjs

@@ -0,0 +1,15 @@
+import { isWillChangeMotionValue } from "./is.mjs";
+import { MotionGlobalConfig } from "../../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/global-config.mjs";
+function addValueToWillChange(visualElement, key) {
+  const willChange = visualElement.getValue("willChange");
+  if (isWillChangeMotionValue(willChange)) {
+    return willChange.add(key);
+  } else if (!willChange && MotionGlobalConfig.WillChange) {
+    const newWillChange = new MotionGlobalConfig.WillChange("auto");
+    visualElement.addValue("willChange", newWillChange);
+    newWillChange.add(key);
+  }
+}
+export {
+  addValueToWillChange
+};

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/value/utils/resolve-motion-value.mjs

@@ -0,0 +1,7 @@
+import { isMotionValue } from "./is-motion-value.mjs";
+function resolveMotionValue(value) {
+  return isMotionValue(value) ? value.get() : value;
+}
+export {
+  resolveMotionValue
+};

package/dist/es/external/.pnpm/motion-dom@12.9.0/external/motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs

@@ -0,0 +1,133 @@
+import { time } from "../frameloop/sync-time.mjs";
+import { JSAnimation } from "./JSAnimation.mjs";
+import { getFinalKeyframe } from "./keyframes/get-final.mjs";
+import { KeyframeResolver, flushKeyframeResolvers } from "./keyframes/KeyframesResolver.mjs";
+import { NativeAnimationExtended } from "./NativeAnimationExtended.mjs";
+import { canAnimate } from "./utils/can-animate.mjs";
+import { WithPromise } from "./utils/WithPromise.mjs";
+import { supportsBrowserAnimation } from "./waapi/supports/waapi.mjs";
+import { MotionGlobalConfig } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/global-config.mjs";
+import { noop } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/noop.mjs";
+const MAX_RESOLVE_DELAY = 40;
+class AsyncMotionValueAnimation extends WithPromise {
+  constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", keyframes, name, motionValue, element, ...options }) {
+    var _a;
+    super();
+    this.stop = () => {
+      var _a2, _b;
+      if (this._animation) {
+        this._animation.stop();
+        (_a2 = this.stopTimeline) == null ? void 0 : _a2.call(this);
+      } else {
+        (_b = this.keyframeResolver) == null ? void 0 : _b.cancel();
+      }
+    };
+    this.createdAt = time.now();
+    const optionsWithDefaults = {
+      autoplay,
+      delay,
+      type,
+      repeat,
+      repeatDelay,
+      repeatType,
+      name,
+      motionValue,
+      element,
+      ...options
+    };
+    const KeyframeResolver$1 = (element == null ? void 0 : element.KeyframeResolver) || KeyframeResolver;
+    this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element);
+    (_a = this.keyframeResolver) == null ? void 0 : _a.scheduleResolve();
+  }
+  onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
+    this.keyframeResolver = void 0;
+    const { name, type, velocity, delay, isHandoff, onUpdate } = options;
+    this.resolvedAt = time.now();
+    if (!canAnimate(keyframes, name, type, velocity)) {
+      if (MotionGlobalConfig.instantAnimations || !delay) {
+        onUpdate == null ? void 0 : onUpdate(getFinalKeyframe(keyframes, options, finalKeyframe));
+      }
+      keyframes[0] = keyframes[keyframes.length - 1];
+      options.duration = 0;
+      options.repeat = 0;
+    }
+    const startTime = sync ? !this.resolvedAt ? this.createdAt : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt : void 0;
+    const resolvedOptions = {
+      startTime,
+      finalKeyframe,
+      ...options,
+      keyframes
+    };
+    const animation = !isHandoff && supportsBrowserAnimation(resolvedOptions) ? new NativeAnimationExtended({
+      ...resolvedOptions,
+      element: resolvedOptions.motionValue.owner.current
+    }) : new JSAnimation(resolvedOptions);
+    animation.finished.then(() => this.notifyFinished()).catch(noop);
+    if (this.pendingTimeline) {
+      this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
+      this.pendingTimeline = void 0;
+    }
+    this._animation = animation;
+  }
+  get finished() {
+    if (!this._animation) {
+      return this._finished;
+    } else {
+      return this.animation.finished;
+    }
+  }
+  then(onResolve, _onReject) {
+    return this.finished.finally(onResolve).then(() => {
+    });
+  }
+  get animation() {
+    if (!this._animation) {
+      flushKeyframeResolvers();
+    }
+    return this._animation;
+  }
+  get duration() {
+    return this.animation.duration;
+  }
+  get time() {
+    return this.animation.time;
+  }
+  set time(newTime) {
+    this.animation.time = newTime;
+  }
+  get speed() {
+    return this.animation.speed;
+  }
+  get state() {
+    return this.animation.state;
+  }
+  set speed(newSpeed) {
+    this.animation.speed = newSpeed;
+  }
+  get startTime() {
+    return this.animation.startTime;
+  }
+  attachTimeline(timeline) {
+    if (this._animation) {
+      this.stopTimeline = this.animation.attachTimeline(timeline);
+    } else {
+      this.pendingTimeline = timeline;
+    }
+    return () => this.stop();
+  }
+  play() {
+    this.animation.play();
+  }
+  pause() {
+    this.animation.pause();
+  }
+  complete() {
+    this.animation.complete();
+  }
+  cancel() {
+    this.animation.cancel();
+  }
+}
+export {
+  AsyncMotionValueAnimation
+};

package/dist/es/external/.pnpm/{motion-dom@12.5.0/external/motion-dom/dist/es/animation/controls/BaseGroup.mjs → motion-dom@12.9.0/external/motion-dom/dist/es/animation/GroupAnimation.mjs}

@@ -1,11 +1,10 @@
-import { supportsScrollTimeline } from "../../utils/supports/scroll-timeline.mjs";
-class BaseGroupPlaybackControls {
+class GroupAnimation {
   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));
+    return Promise.all(this.animations.map((animation) => animation.finished));
   }
   /**
    * TODO: Filter out cancelled or stopped animations before returning
@@ -18,14 +17,8 @@ class BaseGroupPlaybackControls {
       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);
-      }
-    });
+  attachTimeline(timeline) {
+    const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
     return () => {
       subscriptions.forEach((cancel, i) => {
         cancel && cancel();
@@ -45,6 +38,9 @@ class BaseGroupPlaybackControls {
   set speed(speed) {
     this.setAll("speed", speed);
   }
+  get state() {
+    return this.getAll("state");
+  }
   get startTime() {
     return this.getAll("startTime");
   }
@@ -58,9 +54,6 @@ class BaseGroupPlaybackControls {
   runAll(methodName) {
     this.animations.forEach((controls) => controls[methodName]());
   }
-  flatten() {
-    this.runAll("flatten");
-  }
   play() {
     this.runAll("play");
   }
@@ -75,5 +68,5 @@ class BaseGroupPlaybackControls {
   }
 }
 export {
-  BaseGroupPlaybackControls
+  GroupAnimation
 };

package/dist/es/external/.pnpm/motion-dom@12.9.0/external/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs

@@ -0,0 +1,10 @@
+import { GroupAnimation } from "./GroupAnimation.mjs";
+class GroupAnimationWithThen extends GroupAnimation {
+  then(onResolve, _onReject) {
+    return this.finished.finally(onResolve).then(() => {
+    });
+  }
+}
+export {
+  GroupAnimationWithThen
+};

package/dist/es/external/.pnpm/motion-dom@12.9.0/external/motion-dom/dist/es/animation/JSAnimation.mjs

@@ -0,0 +1,261 @@
+import { time } from "../frameloop/sync-time.mjs";
+import { activeAnimations } from "../stats/animation-count.mjs";
+import { mix } from "../utils/mix/index.mjs";
+import { frameloopDriver } from "./drivers/driver-frameloop.mjs";
+import { inertia } from "./generators/inertia.mjs";
+import { keyframes } from "./generators/keyframes.mjs";
+import { calcGeneratorDuration } from "./generators/utils/calc-duration.mjs";
+import { getFinalKeyframe } from "./keyframes/get-final.mjs";
+import { replaceTransitionType } from "./utils/replace-transition-type.mjs";
+import { WithPromise } from "./utils/WithPromise.mjs";
+import { invariant } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/errors.mjs";
+import { pipe } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/pipe.mjs";
+import { millisecondsToSeconds, secondsToMilliseconds } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/time-conversion.mjs";
+import { clamp } from "../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/clamp.mjs";
+const percentToProgress = (percent) => percent / 100;
+class JSAnimation extends WithPromise {
+  constructor(options) {
+    super();
+    this.state = "idle";
+    this.startTime = null;
+    this.isStopped = false;
+    this.currentTime = 0;
+    this.holdTime = null;
+    this.playbackSpeed = 1;
+    this.stop = () => {
+      const { motionValue } = this.options;
+      if (motionValue && motionValue.updatedAt !== time.now()) {
+        this.tick(time.now());
+      }
+      this.isStopped = true;
+      if (this.state === "idle")
+        return;
+      this.teardown();
+      const { onStop } = this.options;
+      onStop && onStop();
+    };
+    activeAnimations.mainThread++;
+    this.options = options;
+    this.initAnimation();
+    this.play();
+    if (options.autoplay === false)
+      this.pause();
+  }
+  initAnimation() {
+    const { options } = this;
+    replaceTransitionType(options);
+    const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = options;
+    let { keyframes: keyframes$1 } = options;
+    const generatorFactory = type || keyframes;
+    if (process.env.NODE_ENV !== "production" && generatorFactory !== keyframes) {
+      invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+    }
+    if (generatorFactory !== keyframes && typeof keyframes$1[0] !== "number") {
+      this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
+      keyframes$1 = [0, 100];
+    }
+    const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
+    if (repeatType === "mirror") {
+      this.mirroredGenerator = generatorFactory({
+        ...options,
+        keyframes: [...keyframes$1].reverse(),
+        velocity: -velocity
+      });
+    }
+    if (generator.calculatedDuration === null) {
+      generator.calculatedDuration = calcGeneratorDuration(generator);
+    }
+    const { calculatedDuration } = generator;
+    this.calculatedDuration = calculatedDuration;
+    this.resolvedDuration = calculatedDuration + repeatDelay;
+    this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
+    this.generator = generator;
+  }
+  updateTime(timestamp) {
+    const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
+    if (this.holdTime !== null) {
+      this.currentTime = this.holdTime;
+    } else {
+      this.currentTime = animationTime;
+    }
+  }
+  tick(timestamp, sample = false) {
+    const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration } = this;
+    if (this.startTime === null)
+      return generator.next(0);
+    const { delay = 0, keyframes: keyframes2, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe } = this.options;
+    if (this.speed > 0) {
+      this.startTime = Math.min(this.startTime, timestamp);
+    } else if (this.speed < 0) {
+      this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
+    }
+    if (sample) {
+      this.currentTime = timestamp;
+    } else {
+      this.updateTime(timestamp);
+    }
+    const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);
+    const isInDelayPhase = this.playbackSpeed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;
+    this.currentTime = Math.max(timeWithoutDelay, 0);
+    if (this.state === "finished" && this.holdTime === null) {
+      this.currentTime = totalDuration;
+    }
+    let elapsed = this.currentTime;
+    let frameGenerator = generator;
+    if (repeat) {
+      const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;
+      let currentIteration = Math.floor(progress);
+      let iterationProgress = progress % 1;
+      if (!iterationProgress && progress >= 1) {
+        iterationProgress = 1;
+      }
+      iterationProgress === 1 && currentIteration--;
+      currentIteration = Math.min(currentIteration, repeat + 1);
+      const isOddIteration = Boolean(currentIteration % 2);
+      if (isOddIteration) {
+        if (repeatType === "reverse") {
+          iterationProgress = 1 - iterationProgress;
+          if (repeatDelay) {
+            iterationProgress -= repeatDelay / resolvedDuration;
+          }
+        } else if (repeatType === "mirror") {
+          frameGenerator = mirroredGenerator;
+        }
+      }
+      elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
+    }
+    const state = isInDelayPhase ? { done: false, value: keyframes2[0] } : frameGenerator.next(elapsed);
+    if (mixKeyframes) {
+      state.value = mixKeyframes(state.value);
+    }
+    let { done } = state;
+    if (!isInDelayPhase && calculatedDuration !== null) {
+      done = this.playbackSpeed >= 0 ? this.currentTime >= totalDuration : this.currentTime <= 0;
+    }
+    const isAnimationFinished = this.holdTime === null && (this.state === "finished" || this.state === "running" && done);
+    if (isAnimationFinished && type !== inertia) {
+      state.value = getFinalKeyframe(keyframes2, this.options, finalKeyframe, this.speed);
+    }
+    if (onUpdate) {
+      onUpdate(state.value);
+    }
+    if (isAnimationFinished) {
+      this.finish();
+    }
+    return state;
+  }
+  /**
+   * Allows the returned animation to be awaited or promise-chained. Currently
+   * resolves when the animation finishes at all but in a future update could/should
+   * reject if its cancels.
+   */
+  then(resolve, reject) {
+    return this.finished.then(resolve, reject);
+  }
+  get duration() {
+    return millisecondsToSeconds(this.calculatedDuration);
+  }
+  get time() {
+    return millisecondsToSeconds(this.currentTime);
+  }
+  set time(newTime) {
+    newTime = secondsToMilliseconds(newTime);
+    this.currentTime = newTime;
+    if (this.startTime === null || this.holdTime !== null || this.playbackSpeed === 0) {
+      this.holdTime = newTime;
+    } else if (this.driver) {
+      this.startTime = this.driver.now() - newTime / this.playbackSpeed;
+    }
+  }
+  get speed() {
+    return this.playbackSpeed;
+  }
+  set speed(newSpeed) {
+    this.updateTime(time.now());
+    const hasChanged = this.playbackSpeed !== newSpeed;
+    this.playbackSpeed = newSpeed;
+    if (hasChanged) {
+      this.time = millisecondsToSeconds(this.currentTime);
+    }
+  }
+  play() {
+    if (this.isStopped)
+      return;
+    const { driver = frameloopDriver, onPlay, startTime } = this.options;
+    if (!this.driver) {
+      this.driver = driver((timestamp) => this.tick(timestamp));
+    }
+    onPlay && onPlay();
+    const now = this.driver.now();
+    if (this.holdTime !== null) {
+      this.startTime = now - this.holdTime;
+    } else if (this.state === "finished") {
+      this.updateFinished();
+      this.startTime = now;
+    } else if (!this.startTime) {
+      this.startTime = startTime ?? now;
+    }
+    if (this.state === "finished" && this.speed < 0) {
+      this.startTime += this.calculatedDuration;
+    }
+    this.holdTime = null;
+    this.state = "running";
+    this.driver.start();
+  }
+  pause() {
+    this.state = "paused";
+    this.updateTime(time.now());
+    this.holdTime = this.currentTime;
+  }
+  complete() {
+    if (this.state !== "running") {
+      this.play();
+    }
+    this.state = "finished";
+    this.holdTime = null;
+  }
+  finish() {
+    this.teardown();
+    this.state = "finished";
+    const { onComplete } = this.options;
+    onComplete && onComplete();
+  }
+  cancel() {
+    this.holdTime = null;
+    this.startTime = 0;
+    this.tick(0);
+    this.teardown();
+  }
+  teardown() {
+    this.notifyFinished();
+    this.state = "idle";
+    this.stopDriver();
+    this.startTime = this.holdTime = null;
+    activeAnimations.mainThread--;
+  }
+  stopDriver() {
+    if (!this.driver)
+      return;
+    this.driver.stop();
+    this.driver = void 0;
+  }
+  sample(sampleTime) {
+    this.startTime = 0;
+    return this.tick(sampleTime, true);
+  }
+  attachTimeline(timeline) {
+    if (this.options.allowFlatten) {
+      this.options.type = "keyframes";
+      this.options.ease = "linear";
+      this.initAnimation();
+    }
+    return timeline.observe(this);
+  }
+}
+function animateValue(options) {
+  return new JSAnimation(options);
+}
+export {
+  JSAnimation,
+  animateValue
+};