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

package/dist/es/value/use-transform.mjs

@@ -1,7 +1,7 @@
 import { useComputed } from "./use-computed.mjs";
 import { useCombineMotionValues } from "./use-combine-values.mjs";
 import { isRef, computed } from "vue";
-import { transform } from "../external/.pnpm/motion-dom@12.9.0/external/motion-dom/dist/es/utils/transform.mjs";
+import { transform } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/transform.mjs";
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);

package/dist/es/value/use-velocity.mjs

@@ -1,6 +1,7 @@
 import { useMotionValueEvent } from "./use-motion-value-event.mjs";
-import { motionValue } from "../external/.pnpm/motion-dom@12.9.0/external/motion-dom/dist/es/value/index.mjs";
-import { frame } from "../external/.pnpm/motion-dom@12.9.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
+import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
+import { frame } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
 function useVelocity(value) {
   const velocity = motionValue(value.getVelocity());
   const updateVelocity = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -67,8 +67,9 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.0.0",
-    "framer-motion": "12.9.0",
-    "hey-listen": "^1.0.8"
+    "framer-motion": "12.5.0",
+    "hey-listen": "^1.0.8",
+    "motion-dom": "^12.5.0"
   },
   "devDependencies": {
     "vue": "3.4.38"

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,73 +0,0 @@
-import { resolveElements } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/utils/resolve-elements.mjs";
-import { invariant } from "../../../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/errors.mjs";
-import { getValueTransition } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/animation/utils/get-value-transition.mjs";
-import { getAnimationMap, animationMapKey } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/animation/utils/active-animations.mjs";
-import { getComputedStyle } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/render/dom/style-computed.mjs";
-import { fillWildcards } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs";
-import { applyPxDefaults } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs";
-import { NativeAnimation } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/animation/NativeAnimation.mjs";
-import { secondsToMilliseconds } from "../../../../../../../../motion-utils@12.8.3/external/motion-utils/dist/es/time-conversion.mjs";
-function animateElements(elementOrSelector, keyframes, options, scope) {
-  const elements = resolveElements(elementOrSelector, scope);
-  const numElements = elements.length;
-  invariant(Boolean(numElements), "No valid element provided.");
-  const animationDefinitions = [];
-  for (let i = 0; i < numElements; i++) {
-    const element = elements[i];
-    const elementTransition = { ...options };
-    if (typeof elementTransition.delay === "function") {
-      elementTransition.delay = elementTransition.delay(i, numElements);
-    }
-    for (const valueName in keyframes) {
-      let valueKeyframes = keyframes[valueName];
-      if (!Array.isArray(valueKeyframes)) {
-        valueKeyframes = [valueKeyframes];
-      }
-      const valueOptions = {
-        ...getValueTransition(elementTransition, valueName)
-      };
-      valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
-      valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
-      const map = getAnimationMap(element);
-      const key = animationMapKey(valueName, valueOptions.pseudoElement || "");
-      const currentAnimation = map.get(key);
-      currentAnimation && currentAnimation.stop();
-      animationDefinitions.push({
-        map,
-        key,
-        unresolvedKeyframes: valueKeyframes,
-        options: {
-          ...valueOptions,
-          element,
-          name: valueName,
-          allowFlatten: !elementTransition.type && !elementTransition.ease
-        }
-      });
-    }
-  }
-  for (let i = 0; i < animationDefinitions.length; i++) {
-    const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
-    const { element, name, pseudoElement } = animationOptions;
-    if (!pseudoElement && unresolvedKeyframes[0] === null) {
-      unresolvedKeyframes[0] = getComputedStyle(element, name);
-    }
-    fillWildcards(unresolvedKeyframes);
-    applyPxDefaults(unresolvedKeyframes, name);
-    if (!pseudoElement && unresolvedKeyframes.length < 2) {
-      unresolvedKeyframes.unshift(getComputedStyle(element, name));
-    }
-    animationOptions.keyframes = unresolvedKeyframes;
-  }
-  const animations = [];
-  for (let i = 0; i < animationDefinitions.length; i++) {
-    const { map, key, options: animationOptions } = animationDefinitions[i];
-    const animation = new NativeAnimation(animationOptions);
-    map.set(key, animation);
-    animation.finished.finally(() => map.delete(key));
-    animations.push(animation);
-  }
-  return animations;
-}
-export {
-  animateElements
-};

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,13 +0,0 @@
-import { animateElements } from "./animate-elements.mjs";
-import { GroupAnimationWithThen } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs";
-const createScopedWaapiAnimate = (scope) => {
-  function scopedAnimate(elementOrSelector, keyframes, options) {
-    return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
-  }
-  return scopedAnimate;
-};
-const animateMini = /* @__PURE__ */ createScopedWaapiAnimate();
-export {
-  animateMini,
-  createScopedWaapiAnimate
-};

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/render/dom/scroll/attach-animation.mjs

@@ -1,17 +0,0 @@
-import { getTimeline } from "./utils/get-timeline.mjs";
-import { observeTimeline } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/scroll/observe.mjs";
-function attachToAnimation(animation, options) {
-  const timeline = getTimeline(options);
-  return animation.attachTimeline({
-    timeline: options.target ? void 0 : timeline,
-    observe: (valueAnimation) => {
-      valueAnimation.pause();
-      return observeTimeline((progress) => {
-        valueAnimation.time = valueAnimation.duration * progress;
-      }, timeline);
-    }
-  });
-}
-export {
-  attachToAnimation
-};

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/render/dom/scroll/attach-function.mjs

@@ -1,18 +0,0 @@
-import { scrollInfo } from "./track.mjs";
-import { getTimeline } from "./utils/get-timeline.mjs";
-import { observeTimeline } from "../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/scroll/observe.mjs";
-function isOnScrollWithInfo(onScroll) {
-  return onScroll.length === 2;
-}
-function attachToFunction(onScroll, options) {
-  if (isOnScrollWithInfo(onScroll)) {
-    return scrollInfo((info) => {
-      onScroll(info[options.axis].progress, info);
-    }, options);
-  } else {
-    return observeTimeline(onScroll, getTimeline(options));
-  }
-}
-export {
-  attachToFunction
-};

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs

@@ -1,9 +0,0 @@
-import { attachToAnimation } from "./attach-animation.mjs";
-import { attachToFunction } from "./attach-function.mjs";
-function scroll(onScroll, { axis = "y", container = document.documentElement, ...options } = {}) {
-  const optionsWithDefaults = { axis, container, ...options };
-  return typeof onScroll === "function" ? attachToFunction(onScroll, optionsWithDefaults) : attachToAnimation(onScroll, optionsWithDefaults);
-}
-export {
-  scroll
-};

package/dist/es/external/.pnpm/framer-motion@12.9.0/external/framer-motion/dist/es/render/dom/scroll/utils/get-timeline.mjs

@@ -1,27 +0,0 @@
-import { scrollInfo } from "../track.mjs";
-import { supportsScrollTimeline } from "../../../../../../../../../motion-dom@12.9.0/external/motion-dom/dist/es/utils/supports/scroll-timeline.mjs";
-const timelineCache = /* @__PURE__ */ new Map();
-function scrollTimelineFallback(options) {
-  const currentTime = { value: 0 };
-  const cancel = scrollInfo((info) => {
-    currentTime.value = info[options.axis].progress * 100;
-  }, options);
-  return { currentTime, cancel };
-}
-function getTimeline({ source, container, ...options }) {
-  const { axis } = options;
-  if (source)
-    container = source;
-  const containerCache = timelineCache.get(container) ?? /* @__PURE__ */ new Map();
-  timelineCache.set(container, containerCache);
-  const targetKey = options.target ?? "self";
-  const targetCache = containerCache.get(targetKey) ?? {};
-  const axisKey = axis + (options.offset ?? []).join(",");
-  if (!targetCache[axisKey]) {
-    targetCache[axisKey] = !options.target && supportsScrollTimeline() ? new ScrollTimeline({ source: container, axis }) : scrollTimelineFallback({ container, ...options });
-  }
-  return targetCache[axis];
-}
-export {
-  getTimeline
-};

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

@@ -1,15 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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.9.0/external/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs

@@ -1,10 +0,0 @@
-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

@@ -1,261 +0,0 @@
-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
-};