motion-v 0.3.0 → 0.4.0

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,148 +1,275 @@
-import { KeyframeResolver as x } from "../../render/utils/KeyframesResolver.mjs";
-import { spring as G } from "../generators/spring/index.mjs";
-import { inertia as b } from "../generators/inertia.mjs";
-import { keyframes as y } from "../generators/keyframes.mjs";
-import { BaseAnimation as I } from "./BaseAnimation.mjs";
-import { pipe as O } from "../../utils/pipe.mjs";
-import { mix as _ } from "../../utils/mix/index.mjs";
-import { calcGeneratorDuration as A } from "../generators/utils/calc-duration.mjs";
-import { millisecondsToSeconds as D, secondsToMilliseconds as V } from "../../utils/time-conversion.mjs";
-import { clamp as B } from "../../utils/clamp.mjs";
-import { invariant as C } from "../../utils/errors.mjs";
-import { frameloopDriver as E } from "./drivers/driver-frameloop.mjs";
-import { getFinalKeyframe as N } from "./waapi/utils/get-final-keyframe.mjs";
-import { isGenerator as U } from "../generators/utils/is-generator.mjs";
-const W = {
-  decay: b,
-  inertia: b,
-  tween: y,
-  keyframes: y,
-  spring: G
-}, j = (p) => p / 100;
-class q extends I {
-  constructor(t) {
-    super(t), this.holdTime = null, this.cancelTime = null, this.currentTime = 0, this.playbackSpeed = 1, this.pendingPlayState = "running", this.startTime = null, this.state = "idle", this.stop = () => {
-      if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle")
+import { KeyframeResolver } from "../../render/utils/KeyframesResolver.mjs";
+import { spring } from "../generators/spring/index.mjs";
+import { inertia } from "../generators/inertia.mjs";
+import { keyframes } from "../generators/keyframes.mjs";
+import { BaseAnimation } from "./BaseAnimation.mjs";
+import { pipe } from "../../utils/pipe.mjs";
+import { mix } from "../../utils/mix/index.mjs";
+import { calcGeneratorDuration } from "../generators/utils/calc-duration.mjs";
+import { millisecondsToSeconds, secondsToMilliseconds } from "../../utils/time-conversion.mjs";
+import { clamp } from "../../utils/clamp.mjs";
+import { invariant } from "../../utils/errors.mjs";
+import { frameloopDriver } from "./drivers/driver-frameloop.mjs";
+import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
+import { isGenerator } from "../generators/utils/is-generator.mjs";
+const generators = {
+  decay: inertia,
+  inertia,
+  tween: keyframes,
+  keyframes,
+  spring
+};
+const percentToProgress = (percent) => percent / 100;
+class MainThreadAnimation extends BaseAnimation {
+  constructor(options) {
+    super(options);
+    this.holdTime = null;
+    this.cancelTime = null;
+    this.currentTime = 0;
+    this.playbackSpeed = 1;
+    this.pendingPlayState = "running";
+    this.startTime = null;
+    this.state = "idle";
+    this.stop = () => {
+      this.resolver.cancel();
+      this.isStopped = true;
+      if (this.state === "idle")
         return;
       this.teardown();
-      const { onStop: n } = this.options;
-      n && n();
+      const { onStop } = this.options;
+      onStop && onStop();
     };
-    const { name: i, motionValue: r, element: e, keyframes: o } = this.options, u = (e == null ? void 0 : e.KeyframeResolver) || x, a = (n, l) => this.onKeyframesResolved(n, l);
-    this.resolver = new u(o, a, i, r, e), this.resolver.scheduleResolve();
-  }
-  initPlayback(t) {
-    const { type: i = "keyframes", repeat: r = 0, repeatDelay: e = 0, repeatType: o, velocity: u = 0 } = this.options, a = U(i) ? i : W[i] || y;
-    let n, l;
-    a !== y && typeof t[0] != "number" && (process.env.NODE_ENV !== "production" && C(t.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${t}`), n = O(j, _(t[0], t[1])), t = [0, 100]);
-    const s = a({ ...this.options, keyframes: t });
-    o === "mirror" && (l = a({
-      ...this.options,
-      keyframes: [...t].reverse(),
-      velocity: -u
-    })), s.calculatedDuration === null && (s.calculatedDuration = A(s));
-    const { calculatedDuration: d } = s, f = d + e, T = f * (r + 1) - e;
+    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, motionValue, element);
+    this.resolver.scheduleResolve();
+  }
+  initPlayback(keyframes$1) {
+    const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options;
+    const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
+    let mapPercentToKeyframes;
+    let mirroredGenerator;
+    if (generatorFactory !== keyframes && typeof keyframes$1[0] !== "number") {
+      if (process.env.NODE_ENV !== "production") {
+        invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+      }
+      mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
+      keyframes$1 = [0, 100];
+    }
+    const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });
+    if (repeatType === "mirror") {
+      mirroredGenerator = generatorFactory({
+        ...this.options,
+        keyframes: [...keyframes$1].reverse(),
+        velocity: -velocity
+      });
+    }
+    if (generator.calculatedDuration === null) {
+      generator.calculatedDuration = calcGeneratorDuration(generator);
+    }
+    const { calculatedDuration } = generator;
+    const resolvedDuration = calculatedDuration + repeatDelay;
+    const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
     return {
-      generator: s,
-      mirroredGenerator: l,
-      mapPercentToKeyframes: n,
-      calculatedDuration: d,
-      resolvedDuration: f,
-      totalDuration: T
+      generator,
+      mirroredGenerator,
+      mapPercentToKeyframes,
+      calculatedDuration,
+      resolvedDuration,
+      totalDuration
     };
   }
   onPostResolved() {
-    const { autoplay: t = !0 } = this.options;
-    this.play(), this.pendingPlayState === "paused" || !t ? this.pause() : this.state = this.pendingPlayState;
+    const { autoplay = true } = this.options;
+    this.play();
+    if (this.pendingPlayState === "paused" || !autoplay) {
+      this.pause();
+    } else {
+      this.state = this.pendingPlayState;
+    }
   }
-  tick(t, i = !1) {
-    const { resolved: r } = this;
-    if (!r) {
-      const { keyframes: c } = this.options;
-      return { done: !0, value: c[c.length - 1] };
+  tick(timestamp, sample = false) {
+    const { resolved } = this;
+    if (!resolved) {
+      const { keyframes: keyframes3 } = this.options;
+      return { done: true, value: keyframes3[keyframes3.length - 1] };
     }
-    const { finalKeyframe: e, generator: o, mirroredGenerator: u, mapPercentToKeyframes: a, keyframes: n, calculatedDuration: l, totalDuration: s, resolvedDuration: d } = r;
+    const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes: keyframes2, calculatedDuration, totalDuration, resolvedDuration } = resolved;
     if (this.startTime === null)
-      return o.next(0);
-    const { delay: f, repeat: T, repeatType: P, repeatDelay: S, onUpdate: k } = this.options;
-    this.speed > 0 ? this.startTime = Math.min(this.startTime, t) : this.speed < 0 && (this.startTime = Math.min(t - s / this.speed, this.startTime)), i ? this.currentTime = t : this.holdTime !== null ? this.currentTime = this.holdTime : this.currentTime = Math.round(t - this.startTime) * this.speed;
-    const g = this.currentTime - f * (this.speed >= 0 ? 1 : -1), M = this.speed >= 0 ? g < 0 : g > s;
-    this.currentTime = Math.max(g, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = s);
-    let K = this.currentTime, w = o;
-    if (T) {
-      const c = Math.min(this.currentTime, s) / d;
-      let v = Math.floor(c), h = c % 1;
-      !h && c >= 1 && (h = 1), h === 1 && v--, v = Math.min(v, T + 1), !!(v % 2) && (P === "reverse" ? (h = 1 - h, S && (h -= S / d)) : P === "mirror" && (w = u)), K = B(0, 1, h) * d;
-    }
-    const m = M ? { done: !1, value: n[0] } : w.next(K);
-    a && (m.value = a(m.value));
-    let { done: F } = m;
-    !M && l !== null && (F = this.speed >= 0 ? this.currentTime >= s : this.currentTime <= 0);
-    const R = this.holdTime === null && (this.state === "finished" || this.state === "running" && F);
-    return R && e !== void 0 && (m.value = N(n, this.options, e)), k && k(m.value), R && this.finish(), m;
+      return generator.next(0);
+    const { delay, repeat, repeatType, repeatDelay, onUpdate } = 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 if (this.holdTime !== null) {
+      this.currentTime = this.holdTime;
+    } else {
+      this.currentTime = Math.round(timestamp - this.startTime) * this.speed;
+    }
+    const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1);
+    const isInDelayPhase = this.speed >= 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 (mapPercentToKeyframes) {
+      state.value = mapPercentToKeyframes(state.value);
+    }
+    let { done } = state;
+    if (!isInDelayPhase && calculatedDuration !== null) {
+      done = this.speed >= 0 ? this.currentTime >= totalDuration : this.currentTime <= 0;
+    }
+    const isAnimationFinished = this.holdTime === null && (this.state === "finished" || this.state === "running" && done);
+    if (isAnimationFinished && finalKeyframe !== void 0) {
+      state.value = getFinalKeyframe(keyframes2, this.options, finalKeyframe);
+    }
+    if (onUpdate) {
+      onUpdate(state.value);
+    }
+    if (isAnimationFinished) {
+      this.finish();
+    }
+    return state;
   }
   get duration() {
-    const { resolved: t } = this;
-    return t ? D(t.calculatedDuration) : 0;
+    const { resolved } = this;
+    return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
   }
   get time() {
-    return D(this.currentTime);
+    return millisecondsToSeconds(this.currentTime);
   }
-  set time(t) {
-    t = V(t), this.currentTime = t, this.holdTime !== null || this.speed === 0 ? this.holdTime = t : this.driver && (this.startTime = this.driver.now() - t / this.speed);
+  set time(newTime) {
+    newTime = secondsToMilliseconds(newTime);
+    this.currentTime = newTime;
+    if (this.holdTime !== null || this.speed === 0) {
+      this.holdTime = newTime;
+    } else if (this.driver) {
+      this.startTime = this.driver.now() - newTime / this.speed;
+    }
   }
   get speed() {
     return this.playbackSpeed;
   }
-  set speed(t) {
-    const i = this.playbackSpeed !== t;
-    this.playbackSpeed = t, i && (this.time = D(this.currentTime));
+  set speed(newSpeed) {
+    const hasChanged = this.playbackSpeed !== newSpeed;
+    this.playbackSpeed = newSpeed;
+    if (hasChanged) {
+      this.time = millisecondsToSeconds(this.currentTime);
+    }
   }
   play() {
-    if (this.resolver.isScheduled || this.resolver.resume(), !this._resolved) {
+    if (!this.resolver.isScheduled) {
+      this.resolver.resume();
+    }
+    if (!this._resolved) {
       this.pendingPlayState = "running";
       return;
     }
     if (this.isStopped)
       return;
-    const { driver: t = E, onPlay: i, startTime: r } = this.options;
-    this.driver || (this.driver = t((o) => this.tick(o))), i && i();
-    const e = this.driver.now();
-    this.holdTime !== null ? this.startTime = e - this.holdTime : this.startTime ? this.state === "finished" && (this.startTime = e) : this.startTime = r ?? this.calcStartTime(), this.state === "finished" && this.updateFinishedPromise(), this.cancelTime = this.startTime, this.holdTime = null, this.state = "running", this.driver.start();
+    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.startTime) {
+      this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+    } else if (this.state === "finished") {
+      this.startTime = now;
+    }
+    if (this.state === "finished") {
+      this.updateFinishedPromise();
+    }
+    this.cancelTime = this.startTime;
+    this.holdTime = null;
+    this.state = "running";
+    this.driver.start();
   }
   pause() {
-    var t;
+    var _a;
     if (!this._resolved) {
       this.pendingPlayState = "paused";
       return;
     }
-    this.state = "paused", this.holdTime = (t = this.currentTime) !== null && t !== void 0 ? t : 0;
+    this.state = "paused";
+    this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
   }
   complete() {
-    this.state !== "running" && this.play(), this.pendingPlayState = this.state = "finished", this.holdTime = null;
+    if (this.state !== "running") {
+      this.play();
+    }
+    this.pendingPlayState = this.state = "finished";
+    this.holdTime = null;
   }
   finish() {
-    this.teardown(), this.state = "finished";
-    const { onComplete: t } = this.options;
-    t && t();
+    this.teardown();
+    this.state = "finished";
+    const { onComplete } = this.options;
+    onComplete && onComplete();
   }
   cancel() {
-    this.cancelTime !== null && this.tick(this.cancelTime), this.teardown(), this.updateFinishedPromise();
+    if (this.cancelTime !== null) {
+      this.tick(this.cancelTime);
+    }
+    this.teardown();
+    this.updateFinishedPromise();
   }
   teardown() {
-    this.state = "idle", this.stopDriver(), this.resolveFinishedPromise(), this.updateFinishedPromise(), this.startTime = this.cancelTime = null, this.resolver.cancel();
+    this.state = "idle";
+    this.stopDriver();
+    this.resolveFinishedPromise();
+    this.updateFinishedPromise();
+    this.startTime = this.cancelTime = null;
+    this.resolver.cancel();
   }
   stopDriver() {
-    this.driver && (this.driver.stop(), this.driver = void 0);
+    if (!this.driver)
+      return;
+    this.driver.stop();
+    this.driver = void 0;
   }
-  sample(t) {
-    return this.startTime = 0, this.tick(t, !0);
+  sample(time) {
+    this.startTime = 0;
+    return this.tick(time, true);
   }
 }
-function ot(p) {
-  return new q(p);
+function animateValue(options) {
+  return new MainThreadAnimation(options);
 }
 export {
-  q as MainThreadAnimation,
-  ot as animateValue
+  MainThreadAnimation,
+  animateValue
 };

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs

@@ -1,17 +1,17 @@
-import { time as o } from "../../../frameloop/sync-time.mjs";
-import { frame as a, cancelFrame as s, frameData as t } from "../../../frameloop/frame.mjs";
-const n = (e) => {
-  const r = ({ timestamp: m }) => e(m);
+import { time } from "../../../frameloop/sync-time.mjs";
+import { frame, cancelFrame, frameData } from "../../../frameloop/frame.mjs";
+const frameloopDriver = (update) => {
+  const passTimestamp = ({ timestamp }) => update(timestamp);
   return {
-    start: () => a.update(r, !0),
-    stop: () => s(r),
+    start: () => frame.update(passTimestamp, true),
+    stop: () => cancelFrame(passTimestamp),
     /**
      * If we're processing this frame we can use the
      * framelocked timestamp to keep things in sync.
      */
-    now: () => t.isProcessing ? t.timestamp : o.now()
+    now: () => frameData.isProcessing ? frameData.timestamp : time.now()
   };
 };
 export {
-  n as frameloopDriver
+  frameloopDriver
 };

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs

@@ -1,4 +1,4 @@
-const e = /* @__PURE__ */ new Set([
+const acceleratedValues = /* @__PURE__ */ new Set([
   "opacity",
   "clipPath",
   "filter",
@@ -8,5 +8,5 @@ const e = /* @__PURE__ */ new Set([
   // "background-color"
 ]);
 export {
-  e as acceleratedValues
+  acceleratedValues
 };

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs

@@ -1,23 +1,30 @@
-import { warning as s } from "../../../utils/errors.mjs";
-import { isGenerator as f } from "../../generators/utils/is-generator.mjs";
-import { isAnimatable as l } from "../../utils/is-animatable.mjs";
-function g(t) {
-  const i = t[0];
-  if (t.length === 1)
-    return !0;
-  for (let n = 0; n < t.length; n++)
-    if (t[n] !== i)
-      return !0;
+import { warning } from "../../../utils/errors.mjs";
+import { isGenerator } from "../../generators/utils/is-generator.mjs";
+import { isAnimatable } from "../../utils/is-animatable.mjs";
+function hasKeyframesChanged(keyframes) {
+  const current = keyframes[0];
+  if (keyframes.length === 1)
+    return true;
+  for (let i = 0; i < keyframes.length; i++) {
+    if (keyframes[i] !== current)
+      return true;
+  }
 }
-function h(t, i, n, u) {
-  const r = t[0];
-  if (r === null)
-    return !1;
-  if (i === "display" || i === "visibility")
-    return !0;
-  const a = t[t.length - 1], e = l(r, i), o = l(a, i);
-  return s(e === o, `You are trying to animate ${i} from "${r}" to "${a}". ${r} is not an animatable value - to enable this animation set ${r} to a value animatable to ${a} via the \`style\` property.`), !e || !o ? !1 : g(t) || (n === "spring" || f(n)) && u;
+function canAnimate(keyframes, name, type, velocity) {
+  const originKeyframe = keyframes[0];
+  if (originKeyframe === null)
+    return false;
+  if (name === "display" || name === "visibility")
+    return true;
+  const targetKeyframe = keyframes[keyframes.length - 1];
+  const isOriginAnimatable = isAnimatable(originKeyframe, name);
+  const isTargetAnimatable = isAnimatable(targetKeyframe, name);
+  warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+  if (!isOriginAnimatable || !isTargetAnimatable) {
+    return false;
+  }
+  return hasKeyframesChanged(keyframes) || (type === "spring" || isGenerator(type)) && velocity;
 }
 export {
-  h as canAnimate
+  canAnimate
 };