@freestylejs/ani-core 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -34,7 +34,9 @@ __export(src_exports, {
   compileToKeyframes: () => compileToKeyframes,
   createStates: () => createStates,
   createStyleSheet: () => createStyleSheet,
+  normalizeRepeatCount: () => normalizeRepeatCount,
   rafTimeline: () => rafTimeline,
+  toIterationCount: () => toIterationCount,
   webTimeline: () => webTimeline
 });
 module.exports = __toCommonJS(src_exports);
@@ -436,6 +438,14 @@ function ani(props, id) {
 }
 
 // src/nodes/composition.ts
+function cloneCompositionNodeWithChildren(source, children) {
+  const clone = Object.create(
+    Object.getPrototypeOf(source)
+  );
+  Object.assign(clone, source);
+  clone.children = children;
+  return clone;
+}
 var CompositionNode = class _CompositionNode extends AnimationNode {
   constructor(children, timing, id) {
     super(id);
@@ -453,8 +463,11 @@ var CompositionNode = class _CompositionNode extends AnimationNode {
           );
         }
         if (child instanceof _CompositionNode) {
-          child.children = adjustTiming(child.children);
-          return child;
+          const adjustedChildren = adjustTiming(child.children);
+          return cloneCompositionNodeWithChildren(
+            child,
+            adjustedChildren
+          );
         }
         return child;
       });
@@ -585,6 +598,17 @@ function stagger(children, offset, timing, id) {
 }
 
 // src/ani/core/interface/timeline_interface.ts
+function normalizeRepeatCount(repeat) {
+  if (repeat === Infinity) return Infinity;
+  if (!Number.isFinite(repeat) || repeat === void 0 || repeat <= 0) {
+    return 0;
+  }
+  return Math.floor(repeat);
+}
+function toIterationCount(repeat) {
+  const normalized = normalizeRepeatCount(repeat);
+  return normalized === Infinity ? Infinity : normalized + 1;
+}
 var TimelineBase = class {
   constructor(rootNode) {
     this.rootNode = rootNode;
@@ -634,10 +658,10 @@ var TimelineBase = class {
         const dynamicDuration = durations?.[keyframeIndex];
         const newSegmentProps = {
           ...segment.node.props,
-          ...dynamicTo && dynamicTo !== "keep" && {
+          ...dynamicTo !== void 0 && dynamicTo !== "keep" && {
             to: dynamicTo
           },
-          ...dynamicDuration && dynamicDuration !== "keep" && {
+          ...dynamicDuration !== void 0 && dynamicDuration !== "keep" && {
             duration: dynamicDuration
           }
         };
@@ -683,9 +707,20 @@ var AnimationClock = class _AnimationClock {
    * @returns clock
    */
   static create(maxDeltaTime = 1 / 10) {
-    _AnimationClock.clock = new _AnimationClock(maxDeltaTime);
+    if (!_AnimationClock.clock) {
+      _AnimationClock.clock = new _AnimationClock(maxDeltaTime);
+    }
     return _AnimationClock.clock;
   }
+  /**
+   * Reconfigure singleton clock.
+   * If not created yet, creates one with provided maxDeltaTime.
+   */
+  static configure(maxDeltaTime) {
+    const clock = _AnimationClock.create(maxDeltaTime);
+    clock.maxDeltaTime = maxDeltaTime;
+    return clock;
+  }
   subscribe(animatable) {
     this.subscribers.add(animatable);
     if (!this.animationFrameId) {
@@ -796,7 +831,7 @@ var RafAniTimeline = class extends TimelineBase {
     this._currentConfig = null;
     this._state = [];
     this._initialState = [];
-    this._repeatCount = 0;
+    this._remainingRepeats = 0;
     this._propertyKeyMap = null;
     this._onUpdateCallbacks = /* @__PURE__ */ new Set();
     this._clock = clock ?? AnimationClock.create();
@@ -829,6 +864,26 @@ var RafAniTimeline = class extends TimelineBase {
       dt
     );
   }
+  _resolveRuntimeState(config) {
+    this._currentExecutionPlan = this._resolveExecutionPlan(
+      config.keyframes,
+      config.durations
+    );
+    const { keyMap, values } = resolveGroup(config.from);
+    this._propertyKeyMap = keyMap;
+    this._state = values;
+    this._initialState = values;
+    this._masterTime = 0;
+  }
+  _restartForRepeat() {
+    if (!this._currentConfig) {
+      return;
+    }
+    this._delay = 0;
+    this._resolveRuntimeState(this._currentConfig);
+    this._status = "PLAYING";
+    this.notify();
+  }
   notify() {
     for (const subscriber of this._onUpdateCallbacks) {
       subscriber({
@@ -859,14 +914,15 @@ var RafAniTimeline = class extends TimelineBase {
     this._state = this._calculateStateAtTime(this._masterTime, dt);
     this.notify();
     if (isEndOfAnimation(this._masterTime, this.duration)) {
-      this._repeatCount += 1;
-      const noRepeat = (this._currentConfig.repeat ?? 0) === 0;
-      if (noRepeat) {
+      if (this._remainingRepeats === Infinity || this._remainingRepeats > 0) {
+        if (this._remainingRepeats !== Infinity) {
+          this._remainingRepeats -= 1;
+        }
+        this._restartForRepeat();
+      } else {
         this._status = "ENDED";
         this._clock.unsubscribe(this);
         this.notify();
-      } else {
-        this.play(this._currentConfig);
       }
     }
   }
@@ -877,26 +933,11 @@ var RafAniTimeline = class extends TimelineBase {
    */
   play(config, canBeIntercepted = true) {
     if (this._status === "PLAYING" && !canBeIntercepted) return;
-    const isRepeating = (this._currentConfig?.repeat ?? 0) >= 1;
-    const savedRepeatCount = isRepeating ? this._repeatCount : 0;
-    this.reset(false);
-    this._repeatCount = savedRepeatCount;
-    if (isRepeating && this._repeatCount >= config.repeat) {
-      this._repeatCount = 0;
-      return;
-    }
+    this.reset(false, true);
     this._currentConfig = config;
-    if (this._repeatCount === 0) {
-      this._delay = (this._currentConfig.delay ?? 0) * 1e-3;
-    }
-    this._currentExecutionPlan = this._resolveExecutionPlan(
-      config.keyframes,
-      config.durations
-    );
-    const { keyMap, values } = resolveGroup(config.from);
-    this._propertyKeyMap = keyMap;
-    this._state = values;
-    this._initialState = values;
+    this._remainingRepeats = normalizeRepeatCount(config.repeat);
+    this._delay = (this._currentConfig.delay ?? 0) * 1e-3;
+    this._resolveRuntimeState(config);
     this._status = "PLAYING";
     this._clock.subscribe(this);
     this.notify();
@@ -910,7 +951,7 @@ var RafAniTimeline = class extends TimelineBase {
     this._status = "PLAYING";
     this._clock.subscribe(this);
   }
-  reset(notify = true) {
+  reset(notify = true, unsubscribeClock = true) {
     this._status = "IDLE";
     this._currentConfig = null;
     this._masterTime = 0;
@@ -919,8 +960,10 @@ var RafAniTimeline = class extends TimelineBase {
     this._initialState = [];
     this._propertyKeyMap = null;
     this._currentExecutionPlan = null;
-    this._clock.unsubscribe(this);
-    this._repeatCount = 0;
+    if (unsubscribeClock) {
+      this._clock.unsubscribe(this);
+    }
+    this._remainingRepeats = 0;
     if (notify) this.notify();
   }
   seek(targetTime) {
@@ -969,9 +1012,11 @@ function createStates(config) {
       return () => subs.delete(callback);
     },
     transitionTo(newState, timelineConfig, canBeIntercepted) {
+      const previousTimeline = Timeline;
       const from = timelineConfig?.from ?? // 1. config
       Timeline.getCurrentValue() ?? // 2. last value
       config.initialFrom;
+      previousTimeline.reset(false);
       State = newState;
       Timeline = rafTimeline(config.states[State], config.clock);
       notify(Timeline);
@@ -1102,7 +1147,7 @@ function compileTiming(timing) {
 }
 
 // src/ani/waapi/compiler/keyframe_compiler.ts
-function compileToKeyframes(plan, initialFrom) {
+function compileToKeyframes(plan, initialFrom, resolver) {
   if (plan.length === 0) {
     return [];
   }
@@ -1111,7 +1156,10 @@ function compileToKeyframes(plan, initialFrom) {
   const duration = Math.max(...plan.map((s) => s.endTime));
   if (duration === 0) {
     const state = resolveStateAt(plan, initialFrom, 0, SAMPLE_RATE);
-    const style = createStyleSheet(state);
+    const style = createStyleSheet(
+      state,
+      resolver
+    );
     return [
       { offset: 0, ...style },
       { offset: 1, ...style }
@@ -1141,7 +1189,10 @@ function compileToKeyframes(plan, initialFrom) {
   for (let i = 0; i < sortedTimes.length; i++) {
     const currT = sortedTimes[i];
     const state = resolveStateAt(plan, initialFrom, currT, SAMPLE_RATE);
-    const style = createStyleSheet(state);
+    const style = createStyleSheet(
+      state,
+      resolver
+    );
     const keyframe = {
       offset: currT / duration,
       ...style
@@ -1160,7 +1211,8 @@ function compileToKeyframes(plan, initialFrom) {
             SAMPLE_RATE
           );
           const sampleStyle = createStyleSheet(
-            sampleState
+            sampleState,
+            resolver
           );
           keyframes.push({
             offset: sampleT / duration,
@@ -1200,7 +1252,8 @@ var WebAniTimeline = class extends TimelineBase {
     );
     this._keyframes = compileToKeyframes(
       this._currentExecutionPlan,
-      config.from
+      config.from,
+      config.propertyResolver
     );
     if (this._keyframes.length === 0) {
       return null;
@@ -1211,9 +1264,10 @@ var WebAniTimeline = class extends TimelineBase {
     ) * 1e3;
     const effect = new KeyframeEffect(target, this._keyframes, {
       duration: totalDurationMs,
-      iterations: config.repeat ?? 1,
+      iterations: toIterationCount(config.repeat),
       delay: config.delay ?? 0,
-      fill: "forwards"
+      fill: "forwards",
+      ...config.keyframeEffect
     });
     this._animation = new Animation(effect, document.timeline);
     this._animation.play();
@@ -1229,6 +1283,12 @@ var WebAniTimeline = class extends TimelineBase {
     this._animation?.cancel();
     this._animation = null;
   }
+  /**
+   * Alias of reset() for WAAPI naming parity.
+   */
+  cancel() {
+    this.reset();
+  }
   seek(targetTime) {
     if (this._animation) {
       this._animation.currentTime = targetTime * 1e3;
@@ -1276,6 +1336,7 @@ var EventManager = class _EventManager {
       const removeListener = this.eventMap.get(eventName);
       if (!removeListener) return false;
       this.targetElement.removeEventListener(eventName, removeListener);
+      this.eventMap.delete(eventName);
       return true;
     };
     this.cleanupAll = () => {
@@ -1321,8 +1382,17 @@ var EventManager = class _EventManager {
 // src/index.ts
 var a = {
   timing: T,
+  /**
+   * @deprecated Use `rafTimeline` alias for explicit engine naming.
+   */
   dynamicTimeline: rafTimeline,
+  /**
+   * @deprecated Use `waapiTimeline` alias for explicit engine naming.
+   */
   timeline: webTimeline,
+  webTimeline,
+  rafTimeline,
+  waapiTimeline: webTimeline,
   /**
    * Create animation segment.
    */
@@ -1353,6 +1423,8 @@ var a = {
   compileToKeyframes,
   createStates,
   createStyleSheet,
+  normalizeRepeatCount,
   rafTimeline,
+  toIterationCount,
   webTimeline
 });

package/dist/index.d.cts

@@ -467,6 +467,15 @@ interface TimelineCommonConfig<G extends Groupable> {
      */
     propertyResolver?: G extends AnimePrimitive ? never : Resolver<G>;
 }
+/**
+ * Normalize repeat count as "additional iterations after first play".
+ */
+declare function normalizeRepeatCount(repeat?: number): number;
+/**
+ * Converts repeat count to WAAPI iteration count.
+ * repeat=0 -> iterations=1, repeat=1 -> iterations=2
+ */
+declare function toIterationCount(repeat?: number): number;
 declare abstract class TimelineBase<G extends Groupable> {
     protected readonly rootNode: AnimationNode<G>;
     readonly duration: number;
@@ -527,6 +536,11 @@ declare class AnimationClock implements AnimationClockInterface {
      * @returns clock
      */
     static create(maxDeltaTime?: number): AnimationClock;
+    /**
+     * Reconfigure singleton clock.
+     * If not created yet, creates one with provided maxDeltaTime.
+     */
+    static configure(maxDeltaTime: number): AnimationClock;
     private constructor();
     subscribe(animatable: Animatable): void;
     unsubscribe(animatable: Animatable): void;
@@ -561,12 +575,14 @@ declare class RafAniTimeline<G extends Groupable, Ctx = any> extends TimelineBas
     get currentConfig(): RafTimelineConfig<G, Ctx> | null;
     private _state;
     private _initialState;
-    private _repeatCount;
+    private _remainingRepeats;
     private _propertyKeyMap;
     private _onUpdateCallbacks;
     constructor(rootNode: AnimationNode<G>, clock?: AnimationClockInterface);
     getCurrentValue(): AniGroup<G> | null;
     private _calculateStateAtTime;
+    private _resolveRuntimeState;
+    private _restartForRepeat;
     private notify;
     /**
      * @private Internal clock subscription callback.
@@ -580,7 +596,7 @@ declare class RafAniTimeline<G extends Groupable, Ctx = any> extends TimelineBas
     play(config: RafTimelineConfig<G, Ctx>, canBeIntercepted?: boolean): void;
     pause(): void;
     resume(): void;
-    reset(notify?: boolean): void;
+    reset(notify?: boolean, unsubscribeClock?: boolean): void;
     seek(targetTime: number): void;
     /**
      * When timeline updates, subscribes on update callback.
@@ -659,7 +675,7 @@ interface WebAniKeyframe extends Record<string, string | number | null> {
  * @param plan The resolved execution plan (from TimelineBase).
  * @param initialFrom The initial state (values).
  */
-declare function compileToKeyframes<G extends Groupable>(plan: ExecutionPlan<G>, initialFrom: G): WebAniKeyframe[];
+declare function compileToKeyframes<G extends Groupable>(plan: ExecutionPlan<G>, initialFrom: G, resolver?: Resolver<Record<string, number>>): WebAniKeyframe[];
 
 interface WebAniTimelineConfig<G extends Groupable> extends TimelineCommonConfig<G> {
     /**
@@ -682,6 +698,10 @@ declare class WebAniTimeline<G extends Groupable> extends TimelineBase<G> {
     pause(): void;
     resume(): void;
     reset(): void;
+    /**
+     * Alias of reset() for WAAPI naming parity.
+     */
+    cancel(): void;
     seek(targetTime: number): void;
     /**
      * Native animation object.
@@ -759,8 +779,17 @@ declare const a: {
         readonly easeOut: () => BezierTimingFunction;
         readonly easeInOut: () => BezierTimingFunction;
     };
+    /**
+     * @deprecated Use `rafTimeline` alias for explicit engine naming.
+     */
     readonly dynamicTimeline: typeof rafTimeline;
+    /**
+     * @deprecated Use `waapiTimeline` alias for explicit engine naming.
+     */
     readonly timeline: typeof webTimeline;
+    readonly webTimeline: typeof webTimeline;
+    readonly rafTimeline: typeof rafTimeline;
+    readonly waapiTimeline: typeof webTimeline;
     /**
      * Create animation segment.
      */
@@ -776,4 +805,4 @@ declare const a: {
     readonly createStates: typeof createStates;
 };
 
-export { type AniGroup, type AniRefContext, type AniRefProps, type Animatable, AnimationClock, type AnimationClockInterface, type AnimationStateShape, type AnimePrimitive, BezierTimingFunction, type BezierTimingFunctionOpt, type Coord, type EventHandler, type EventHandlerRegistration, type EventKey, EventManager, type ExecutionPlan, type ExecutionSegment, type GetTimeline, type Groupable, type GroupableRecord, type GroupableRecordKey, LinearTimingFunction, type OnUpdateCallback, RafAniTimeline, type RafTimelineConfig, type Resolver, type SegmentDefinition, type SegmentState, type SegmentTiming, type StateController, type StateProps, type StylesheetSupportedLiteral, T, TimelineBase, type TimelineCommonConfig, TimingFunction, type TimingFunctionContext, type WebAniKeyframe, WebAniTimeline, type WebAniTimelineConfig, a, calculateSegmentState, compileToKeyframes, createStates, createStyleSheet, rafTimeline, webTimeline };
+export { type AniGroup, type AniRefContext, type AniRefProps, type Animatable, AnimationClock, type AnimationClockInterface, type AnimationStateShape, type AnimePrimitive, BezierTimingFunction, type BezierTimingFunctionOpt, type Coord, type EventHandler, type EventHandlerRegistration, type EventKey, EventManager, type ExecutionPlan, type ExecutionSegment, type GetTimeline, type Groupable, type GroupableRecord, type GroupableRecordKey, LinearTimingFunction, type OnUpdateCallback, RafAniTimeline, type RafTimelineConfig, type Resolver, type SegmentDefinition, type SegmentState, type SegmentTiming, type StateController, type StateProps, type StylesheetSupportedLiteral, T, TimelineBase, type TimelineCommonConfig, TimingFunction, type TimingFunctionContext, type WebAniKeyframe, WebAniTimeline, type WebAniTimelineConfig, a, calculateSegmentState, compileToKeyframes, createStates, createStyleSheet, normalizeRepeatCount, rafTimeline, toIterationCount, webTimeline };

package/dist/index.d.ts

@@ -467,6 +467,15 @@ interface TimelineCommonConfig<G extends Groupable> {
      */
     propertyResolver?: G extends AnimePrimitive ? never : Resolver<G>;
 }
+/**
+ * Normalize repeat count as "additional iterations after first play".
+ */
+declare function normalizeRepeatCount(repeat?: number): number;
+/**
+ * Converts repeat count to WAAPI iteration count.
+ * repeat=0 -> iterations=1, repeat=1 -> iterations=2
+ */
+declare function toIterationCount(repeat?: number): number;
 declare abstract class TimelineBase<G extends Groupable> {
     protected readonly rootNode: AnimationNode<G>;
     readonly duration: number;
@@ -527,6 +536,11 @@ declare class AnimationClock implements AnimationClockInterface {
      * @returns clock
      */
     static create(maxDeltaTime?: number): AnimationClock;
+    /**
+     * Reconfigure singleton clock.
+     * If not created yet, creates one with provided maxDeltaTime.
+     */
+    static configure(maxDeltaTime: number): AnimationClock;
     private constructor();
     subscribe(animatable: Animatable): void;
     unsubscribe(animatable: Animatable): void;
@@ -561,12 +575,14 @@ declare class RafAniTimeline<G extends Groupable, Ctx = any> extends TimelineBas
     get currentConfig(): RafTimelineConfig<G, Ctx> | null;
     private _state;
     private _initialState;
-    private _repeatCount;
+    private _remainingRepeats;
     private _propertyKeyMap;
     private _onUpdateCallbacks;
     constructor(rootNode: AnimationNode<G>, clock?: AnimationClockInterface);
     getCurrentValue(): AniGroup<G> | null;
     private _calculateStateAtTime;
+    private _resolveRuntimeState;
+    private _restartForRepeat;
     private notify;
     /**
      * @private Internal clock subscription callback.
@@ -580,7 +596,7 @@ declare class RafAniTimeline<G extends Groupable, Ctx = any> extends TimelineBas
     play(config: RafTimelineConfig<G, Ctx>, canBeIntercepted?: boolean): void;
     pause(): void;
     resume(): void;
-    reset(notify?: boolean): void;
+    reset(notify?: boolean, unsubscribeClock?: boolean): void;
     seek(targetTime: number): void;
     /**
      * When timeline updates, subscribes on update callback.
@@ -659,7 +675,7 @@ interface WebAniKeyframe extends Record<string, string | number | null> {
  * @param plan The resolved execution plan (from TimelineBase).
  * @param initialFrom The initial state (values).
  */
-declare function compileToKeyframes<G extends Groupable>(plan: ExecutionPlan<G>, initialFrom: G): WebAniKeyframe[];
+declare function compileToKeyframes<G extends Groupable>(plan: ExecutionPlan<G>, initialFrom: G, resolver?: Resolver<Record<string, number>>): WebAniKeyframe[];
 
 interface WebAniTimelineConfig<G extends Groupable> extends TimelineCommonConfig<G> {
     /**
@@ -682,6 +698,10 @@ declare class WebAniTimeline<G extends Groupable> extends TimelineBase<G> {
     pause(): void;
     resume(): void;
     reset(): void;
+    /**
+     * Alias of reset() for WAAPI naming parity.
+     */
+    cancel(): void;
     seek(targetTime: number): void;
     /**
      * Native animation object.
@@ -759,8 +779,17 @@ declare const a: {
         readonly easeOut: () => BezierTimingFunction;
         readonly easeInOut: () => BezierTimingFunction;
     };
+    /**
+     * @deprecated Use `rafTimeline` alias for explicit engine naming.
+     */
     readonly dynamicTimeline: typeof rafTimeline;
+    /**
+     * @deprecated Use `waapiTimeline` alias for explicit engine naming.
+     */
     readonly timeline: typeof webTimeline;
+    readonly webTimeline: typeof webTimeline;
+    readonly rafTimeline: typeof rafTimeline;
+    readonly waapiTimeline: typeof webTimeline;
     /**
      * Create animation segment.
      */
@@ -776,4 +805,4 @@ declare const a: {
     readonly createStates: typeof createStates;
 };
 
-export { type AniGroup, type AniRefContext, type AniRefProps, type Animatable, AnimationClock, type AnimationClockInterface, type AnimationStateShape, type AnimePrimitive, BezierTimingFunction, type BezierTimingFunctionOpt, type Coord, type EventHandler, type EventHandlerRegistration, type EventKey, EventManager, type ExecutionPlan, type ExecutionSegment, type GetTimeline, type Groupable, type GroupableRecord, type GroupableRecordKey, LinearTimingFunction, type OnUpdateCallback, RafAniTimeline, type RafTimelineConfig, type Resolver, type SegmentDefinition, type SegmentState, type SegmentTiming, type StateController, type StateProps, type StylesheetSupportedLiteral, T, TimelineBase, type TimelineCommonConfig, TimingFunction, type TimingFunctionContext, type WebAniKeyframe, WebAniTimeline, type WebAniTimelineConfig, a, calculateSegmentState, compileToKeyframes, createStates, createStyleSheet, rafTimeline, webTimeline };
+export { type AniGroup, type AniRefContext, type AniRefProps, type Animatable, AnimationClock, type AnimationClockInterface, type AnimationStateShape, type AnimePrimitive, BezierTimingFunction, type BezierTimingFunctionOpt, type Coord, type EventHandler, type EventHandlerRegistration, type EventKey, EventManager, type ExecutionPlan, type ExecutionSegment, type GetTimeline, type Groupable, type GroupableRecord, type GroupableRecordKey, LinearTimingFunction, type OnUpdateCallback, RafAniTimeline, type RafTimelineConfig, type Resolver, type SegmentDefinition, type SegmentState, type SegmentTiming, type StateController, type StateProps, type StylesheetSupportedLiteral, T, TimelineBase, type TimelineCommonConfig, TimingFunction, type TimingFunctionContext, type WebAniKeyframe, WebAniTimeline, type WebAniTimelineConfig, a, calculateSegmentState, compileToKeyframes, createStates, createStyleSheet, normalizeRepeatCount, rafTimeline, toIterationCount, webTimeline };

package/dist/index.js

@@ -395,6 +395,14 @@ function ani(props, id) {
 }
 
 // src/nodes/composition.ts
+function cloneCompositionNodeWithChildren(source, children) {
+  const clone = Object.create(
+    Object.getPrototypeOf(source)
+  );
+  Object.assign(clone, source);
+  clone.children = children;
+  return clone;
+}
 var CompositionNode = class _CompositionNode extends AnimationNode {
   constructor(children, timing, id) {
     super(id);
@@ -412,8 +420,11 @@ var CompositionNode = class _CompositionNode extends AnimationNode {
           );
         }
         if (child instanceof _CompositionNode) {
-          child.children = adjustTiming(child.children);
-          return child;
+          const adjustedChildren = adjustTiming(child.children);
+          return cloneCompositionNodeWithChildren(
+            child,
+            adjustedChildren
+          );
         }
         return child;
       });
@@ -544,6 +555,17 @@ function stagger(children, offset, timing, id) {
 }
 
 // src/ani/core/interface/timeline_interface.ts
+function normalizeRepeatCount(repeat) {
+  if (repeat === Infinity) return Infinity;
+  if (!Number.isFinite(repeat) || repeat === void 0 || repeat <= 0) {
+    return 0;
+  }
+  return Math.floor(repeat);
+}
+function toIterationCount(repeat) {
+  const normalized = normalizeRepeatCount(repeat);
+  return normalized === Infinity ? Infinity : normalized + 1;
+}
 var TimelineBase = class {
   constructor(rootNode) {
     this.rootNode = rootNode;
@@ -593,10 +615,10 @@ var TimelineBase = class {
         const dynamicDuration = durations?.[keyframeIndex];
         const newSegmentProps = {
           ...segment.node.props,
-          ...dynamicTo && dynamicTo !== "keep" && {
+          ...dynamicTo !== void 0 && dynamicTo !== "keep" && {
             to: dynamicTo
           },
-          ...dynamicDuration && dynamicDuration !== "keep" && {
+          ...dynamicDuration !== void 0 && dynamicDuration !== "keep" && {
             duration: dynamicDuration
           }
         };
@@ -642,9 +664,20 @@ var AnimationClock = class _AnimationClock {
    * @returns clock
    */
   static create(maxDeltaTime = 1 / 10) {
-    _AnimationClock.clock = new _AnimationClock(maxDeltaTime);
+    if (!_AnimationClock.clock) {
+      _AnimationClock.clock = new _AnimationClock(maxDeltaTime);
+    }
     return _AnimationClock.clock;
   }
+  /**
+   * Reconfigure singleton clock.
+   * If not created yet, creates one with provided maxDeltaTime.
+   */
+  static configure(maxDeltaTime) {
+    const clock = _AnimationClock.create(maxDeltaTime);
+    clock.maxDeltaTime = maxDeltaTime;
+    return clock;
+  }
   subscribe(animatable) {
     this.subscribers.add(animatable);
     if (!this.animationFrameId) {
@@ -755,7 +788,7 @@ var RafAniTimeline = class extends TimelineBase {
     this._currentConfig = null;
     this._state = [];
     this._initialState = [];
-    this._repeatCount = 0;
+    this._remainingRepeats = 0;
     this._propertyKeyMap = null;
     this._onUpdateCallbacks = /* @__PURE__ */ new Set();
     this._clock = clock ?? AnimationClock.create();
@@ -788,6 +821,26 @@ var RafAniTimeline = class extends TimelineBase {
       dt
     );
   }
+  _resolveRuntimeState(config) {
+    this._currentExecutionPlan = this._resolveExecutionPlan(
+      config.keyframes,
+      config.durations
+    );
+    const { keyMap, values } = resolveGroup(config.from);
+    this._propertyKeyMap = keyMap;
+    this._state = values;
+    this._initialState = values;
+    this._masterTime = 0;
+  }
+  _restartForRepeat() {
+    if (!this._currentConfig) {
+      return;
+    }
+    this._delay = 0;
+    this._resolveRuntimeState(this._currentConfig);
+    this._status = "PLAYING";
+    this.notify();
+  }
   notify() {
     for (const subscriber of this._onUpdateCallbacks) {
       subscriber({
@@ -818,14 +871,15 @@ var RafAniTimeline = class extends TimelineBase {
     this._state = this._calculateStateAtTime(this._masterTime, dt);
     this.notify();
     if (isEndOfAnimation(this._masterTime, this.duration)) {
-      this._repeatCount += 1;
-      const noRepeat = (this._currentConfig.repeat ?? 0) === 0;
-      if (noRepeat) {
+      if (this._remainingRepeats === Infinity || this._remainingRepeats > 0) {
+        if (this._remainingRepeats !== Infinity) {
+          this._remainingRepeats -= 1;
+        }
+        this._restartForRepeat();
+      } else {
         this._status = "ENDED";
         this._clock.unsubscribe(this);
         this.notify();
-      } else {
-        this.play(this._currentConfig);
       }
     }
   }
@@ -836,26 +890,11 @@ var RafAniTimeline = class extends TimelineBase {
    */
   play(config, canBeIntercepted = true) {
     if (this._status === "PLAYING" && !canBeIntercepted) return;
-    const isRepeating = (this._currentConfig?.repeat ?? 0) >= 1;
-    const savedRepeatCount = isRepeating ? this._repeatCount : 0;
-    this.reset(false);
-    this._repeatCount = savedRepeatCount;
-    if (isRepeating && this._repeatCount >= config.repeat) {
-      this._repeatCount = 0;
-      return;
-    }
+    this.reset(false, true);
     this._currentConfig = config;
-    if (this._repeatCount === 0) {
-      this._delay = (this._currentConfig.delay ?? 0) * 1e-3;
-    }
-    this._currentExecutionPlan = this._resolveExecutionPlan(
-      config.keyframes,
-      config.durations
-    );
-    const { keyMap, values } = resolveGroup(config.from);
-    this._propertyKeyMap = keyMap;
-    this._state = values;
-    this._initialState = values;
+    this._remainingRepeats = normalizeRepeatCount(config.repeat);
+    this._delay = (this._currentConfig.delay ?? 0) * 1e-3;
+    this._resolveRuntimeState(config);
     this._status = "PLAYING";
     this._clock.subscribe(this);
     this.notify();
@@ -869,7 +908,7 @@ var RafAniTimeline = class extends TimelineBase {
     this._status = "PLAYING";
     this._clock.subscribe(this);
   }
-  reset(notify = true) {
+  reset(notify = true, unsubscribeClock = true) {
     this._status = "IDLE";
     this._currentConfig = null;
     this._masterTime = 0;
@@ -878,8 +917,10 @@ var RafAniTimeline = class extends TimelineBase {
     this._initialState = [];
     this._propertyKeyMap = null;
     this._currentExecutionPlan = null;
-    this._clock.unsubscribe(this);
-    this._repeatCount = 0;
+    if (unsubscribeClock) {
+      this._clock.unsubscribe(this);
+    }
+    this._remainingRepeats = 0;
     if (notify) this.notify();
   }
   seek(targetTime) {
@@ -928,9 +969,11 @@ function createStates(config) {
       return () => subs.delete(callback);
     },
     transitionTo(newState, timelineConfig, canBeIntercepted) {
+      const previousTimeline = Timeline;
       const from = timelineConfig?.from ?? // 1. config
       Timeline.getCurrentValue() ?? // 2. last value
       config.initialFrom;
+      previousTimeline.reset(false);
       State = newState;
       Timeline = rafTimeline(config.states[State], config.clock);
       notify(Timeline);
@@ -1061,7 +1104,7 @@ function compileTiming(timing) {
 }
 
 // src/ani/waapi/compiler/keyframe_compiler.ts
-function compileToKeyframes(plan, initialFrom) {
+function compileToKeyframes(plan, initialFrom, resolver) {
   if (plan.length === 0) {
     return [];
   }
@@ -1070,7 +1113,10 @@ function compileToKeyframes(plan, initialFrom) {
   const duration = Math.max(...plan.map((s) => s.endTime));
   if (duration === 0) {
     const state = resolveStateAt(plan, initialFrom, 0, SAMPLE_RATE);
-    const style = createStyleSheet(state);
+    const style = createStyleSheet(
+      state,
+      resolver
+    );
     return [
       { offset: 0, ...style },
       { offset: 1, ...style }
@@ -1100,7 +1146,10 @@ function compileToKeyframes(plan, initialFrom) {
   for (let i = 0; i < sortedTimes.length; i++) {
     const currT = sortedTimes[i];
     const state = resolveStateAt(plan, initialFrom, currT, SAMPLE_RATE);
-    const style = createStyleSheet(state);
+    const style = createStyleSheet(
+      state,
+      resolver
+    );
     const keyframe = {
       offset: currT / duration,
       ...style
@@ -1119,7 +1168,8 @@ function compileToKeyframes(plan, initialFrom) {
             SAMPLE_RATE
           );
           const sampleStyle = createStyleSheet(
-            sampleState
+            sampleState,
+            resolver
           );
           keyframes.push({
             offset: sampleT / duration,
@@ -1159,7 +1209,8 @@ var WebAniTimeline = class extends TimelineBase {
     );
     this._keyframes = compileToKeyframes(
       this._currentExecutionPlan,
-      config.from
+      config.from,
+      config.propertyResolver
     );
     if (this._keyframes.length === 0) {
       return null;
@@ -1170,9 +1221,10 @@ var WebAniTimeline = class extends TimelineBase {
     ) * 1e3;
     const effect = new KeyframeEffect(target, this._keyframes, {
       duration: totalDurationMs,
-      iterations: config.repeat ?? 1,
+      iterations: toIterationCount(config.repeat),
       delay: config.delay ?? 0,
-      fill: "forwards"
+      fill: "forwards",
+      ...config.keyframeEffect
     });
     this._animation = new Animation(effect, document.timeline);
     this._animation.play();
@@ -1188,6 +1240,12 @@ var WebAniTimeline = class extends TimelineBase {
     this._animation?.cancel();
     this._animation = null;
   }
+  /**
+   * Alias of reset() for WAAPI naming parity.
+   */
+  cancel() {
+    this.reset();
+  }
   seek(targetTime) {
     if (this._animation) {
       this._animation.currentTime = targetTime * 1e3;
@@ -1235,6 +1293,7 @@ var EventManager = class _EventManager {
       const removeListener = this.eventMap.get(eventName);
       if (!removeListener) return false;
       this.targetElement.removeEventListener(eventName, removeListener);
+      this.eventMap.delete(eventName);
       return true;
     };
     this.cleanupAll = () => {
@@ -1280,8 +1339,17 @@ var EventManager = class _EventManager {
 // src/index.ts
 var a = {
   timing: T,
+  /**
+   * @deprecated Use `rafTimeline` alias for explicit engine naming.
+   */
   dynamicTimeline: rafTimeline,
+  /**
+   * @deprecated Use `waapiTimeline` alias for explicit engine naming.
+   */
   timeline: webTimeline,
+  webTimeline,
+  rafTimeline,
+  waapiTimeline: webTimeline,
   /**
    * Create animation segment.
    */
@@ -1311,6 +1379,8 @@ export {
   compileToKeyframes,
   createStates,
   createStyleSheet,
+  normalizeRepeatCount,
   rafTimeline,
+  toIterationCount,
   webTimeline
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@freestylejs/ani-core",
   "author": "freestyle",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Core functionality for the Ani animation library.",
   "license": "MIT",
   "type": "module",