@freestylejs/ani-core 1.0.0

package/dist/index.cjs

@@ -0,0 +1,988 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AnimationClock: () => AnimationClock,
+  AnimationNode: () => AnimationNode,
+  CompositionNode: () => CompositionNode,
+  EventManager: () => EventManager,
+  LinearTimingFunction: () => LinearTimingFunction,
+  ParallelNode: () => ParallelNode,
+  SegmentNode: () => SegmentNode,
+  SequenceNode: () => SequenceNode,
+  StaggerNode: () => StaggerNode,
+  T: () => T,
+  Timeline: () => Timeline,
+  TimingFunction: () => TimingFunction,
+  a: () => a,
+  ani: () => ani,
+  createStates: () => createStates,
+  createStyleSheet: () => createStyleSheet,
+  delay: () => delay,
+  loop: () => loop,
+  parallel: () => parallel,
+  sequence: () => sequence,
+  stagger: () => stagger,
+  timeline: () => timeline
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/ani/nodes/base.ts
+var AnimationNode = class {
+  constructor(id) {
+    if (id) {
+      this.id = id;
+    }
+  }
+};
+
+// src/timing/function.ts
+var TimingFunction = class _TimingFunction {
+  static {
+    this.DEFAULT_TOLERANCE = 0.01;
+  }
+  /**
+   * Checks whether the animation has ended.
+   *
+   * @param time - The current time.
+   * @param value - The computed value at the current time.
+   * @param context - The animation context.
+   * @returns {boolean} True if the animation is ended, false otherwise.
+   */
+  checkEnd(time, value, context, checkTimeOnly = true) {
+    const tol = context.tolerance !== void 0 ? context.tolerance : _TimingFunction.DEFAULT_TOLERANCE;
+    const timeCondition = time >= context.duration;
+    const end = checkTimeOnly ? timeCondition : timeCondition && Math.abs(context.to - value) <= tol;
+    return end;
+  }
+};
+
+// src/timing/linear.ts
+var LinearTimingFunction = class extends TimingFunction {
+  step(time, context) {
+    const progress = context.duration === 0 ? 1 : Math.max(0, Math.min(time / context.duration, 1));
+    const value = context.from + (context.to - context.from) * progress;
+    return { value, endOfAnimation: time >= context.duration };
+  }
+};
+
+// src/timing/bezier.ts
+var BezierTimingFunction = class extends TimingFunction {
+  constructor(opt) {
+    super();
+    this.opt = opt;
+    this.p1 = {
+      x: 0,
+      y: 0
+    };
+    this.p4 = {
+      x: 1,
+      y: 1
+    };
+  }
+  _bezierFunction(t, duration) {
+    const end = duration || this.p4.y;
+    return (1 - t) ** 3 * this.p1.y + 3 * (1 - t) ** 2 * t * this.opt.p2.y + 3 * (1 - t) * t ** 2 * this.opt.p3.y + t ** 3 * end;
+  }
+  step(time, context) {
+    const f = this._bezierFunction(time, context.duration);
+    return {
+      value: f,
+      endOfAnimation: (context.duration ? time >= context.duration : time >= this.p4.x) && f >= context.to
+    };
+  }
+};
+
+// src/timing/spring.ts
+var SpringTimingFunction = class extends TimingFunction {
+  constructor(opt) {
+    super();
+    this.opt = opt;
+    if (!this.opt.tolerance) {
+      const DEFAULT_TOLERANCE = 1e-3;
+      this.opt.tolerance = DEFAULT_TOLERANCE;
+    }
+  }
+  step(time, context) {
+    const m = this.opt.m;
+    const k = this.opt.k;
+    const c = this.opt.c;
+    const tolerance = this.opt.tolerance;
+    const d0 = context.from - context.to;
+    if (typeof d0 !== "number") {
+      throw new TypeError(
+        "Spring step function, needs initial displacement d(0) = context.start"
+      );
+    }
+    const wN = Math.sqrt(k / m);
+    const zetta = c / (2 * Math.sqrt(m * k));
+    const Ms = 1e3;
+    if (zetta < 1) {
+      const settlingTime = -1 / (zetta * wN) * Math.log(tolerance);
+      const t = context?.duration ? settlingTime / context.duration * time : time;
+      const C1 = d0;
+      const C2 = zetta / Math.sqrt(1 - zetta ** 2) * d0;
+      const ode = Math.exp(-zetta * wN * t) * (C1 * Math.cos(wN * Math.sqrt(1 - zetta ** 2) * t) + C2 * Math.sin(wN * Math.sqrt(1 - zetta ** 2) * t)) + context.to;
+      return {
+        value: ode,
+        endOfAnimation: t >= settlingTime && ode >= context.to
+      };
+    }
+    if (zetta === 1) {
+      const settlingTime = -1 / wN * Math.log(tolerance);
+      const t = context?.duration ? settlingTime / context.duration * time : time;
+      const C1 = d0;
+      const C2 = wN * d0;
+      const ode = (C1 + C2 * t) * Math.exp(-wN * t) + context.to;
+      return {
+        value: ode,
+        endOfAnimation: t >= settlingTime && Math.abs(ode - context.to) <= context.to / Ms
+      };
+    }
+    if (zetta > 1) {
+      const settlingTime = -1 / (zetta * wN) * Math.log(tolerance);
+      const t = context?.duration ? settlingTime / context.duration * time : time;
+      const delta = Math.sqrt(zetta ** 2 - 1);
+      const lambda1 = -zetta * wN + wN * delta;
+      const lambda2 = -zetta * wN - wN * delta;
+      const C2 = -lambda1 * d0 / (lambda2 - lambda1);
+      const C1 = d0 - C2;
+      const ode = C1 * Math.exp(lambda1 * t) + C2 * Math.exp(lambda2 * t) + context.to;
+      return {
+        value: ode,
+        endOfAnimation: t >= settlingTime && Math.abs(ode - context.to) <= context.to / Ms
+      };
+    }
+    throw new Error("invalid system");
+  }
+};
+
+// src/timing/index.ts
+var T = {
+  /**
+   * Creates a new Bezier timing function instance.
+   *
+   * @param {Bezier.BezierTimingFunctionOpt} opt - Options for configuring the Bezier curve.
+   * A new instance of BezierTimingFunction.
+   */
+  bezier: (opt) => new BezierTimingFunction(opt),
+  /**
+   * Creates a new Spring timing function instance.
+   *
+   * @param {Spring.SpringTimingFunctionOpt} opt - Options for configuring the Spring timing function.
+   * A new instance of SpringTimingFunction.
+   */
+  spring: (opt) => new SpringTimingFunction(opt),
+  /**
+   * Creates linear timing function instance.
+   */
+  linear: () => new LinearTimingFunction()
+};
+
+// src/ani/nodes/segment.ts
+var SegmentNode = class extends AnimationNode {
+  constructor(props, id) {
+    super(id);
+    this.type = "SEGMENT";
+    const nodeProps = {
+      to: props.to,
+      duration: props.duration ?? 0,
+      ...props.timing !== void 0 && { timing: props.timing }
+    };
+    this.props = nodeProps;
+  }
+  get duration() {
+    return this.props.duration;
+  }
+  construct(plan, startTime) {
+    plan.push({
+      node: this,
+      startTime,
+      endTime: startTime + this.duration
+    });
+  }
+};
+function ani(props, id) {
+  return new SegmentNode(props, id);
+}
+
+// src/ani/nodes/composition.ts
+var CompositionNode = class _CompositionNode extends AnimationNode {
+  constructor(children, timing, id) {
+    super(id);
+    const parentTiming = timing ?? new LinearTimingFunction();
+    const adjustTiming = (children2) => {
+      return children2.map((child) => {
+        if (child instanceof SegmentNode && // child timing none >> override to parent
+        child.props.timing === void 0 && timing) {
+          return new SegmentNode(
+            {
+              ...child.props,
+              timing: parentTiming
+            },
+            child.id
+          );
+        }
+        if (child instanceof _CompositionNode) {
+          child.children = adjustTiming(child.children);
+          return child;
+        }
+        return child;
+      });
+    };
+    const timingOverridingChildren = adjustTiming(children);
+    this.children = timingOverridingChildren;
+  }
+};
+
+// src/ani/nodes/delay.ts
+function delay(duration, id) {
+  return new SegmentNode({ to: {}, duration }, id);
+}
+
+// src/ani/nodes/loop.ts
+var LoopNode = class extends CompositionNode {
+  constructor(child, loopCount, timing, id) {
+    super([child], timing, id);
+    this.type = "LOOP";
+    this.child = child;
+    this.count = loopCount;
+    this.duration = child.duration * loopCount;
+  }
+  construct(plan, startTime) {
+    let currentTime = startTime;
+    for (let i = 0; i < this.count; i++) {
+      this.child.construct(plan, currentTime);
+      currentTime += this.child.duration;
+    }
+  }
+};
+function loop(child, loopCount, timing, id) {
+  return new LoopNode(child, loopCount, timing, id);
+}
+
+// src/ani/nodes/parallel.ts
+var ParallelNode = class extends CompositionNode {
+  constructor(children, timing, id) {
+    const seenProperty = /* @__PURE__ */ new Set();
+    const resolvedChildren = [];
+    for (const child of [...children].reverse()) {
+      if (child instanceof SegmentNode) {
+        const segment = child;
+        const propsTo = segment.props.to;
+        if (propsTo && !Array.isArray(propsTo)) {
+          const propsToAnimate = Object.keys(propsTo);
+          const finalConstructedTo = {};
+          let handledCount = 0;
+          for (const propKey of propsToAnimate) {
+            if (!seenProperty.has(propKey)) {
+              finalConstructedTo[propKey] = propsTo[propKey];
+              seenProperty.add(propKey);
+              handledCount++;
+            }
+          }
+          if (handledCount > 0) {
+            const newSegment = new SegmentNode(
+              {
+                ...segment.props,
+                to: finalConstructedTo
+              },
+              segment.id
+            );
+            resolvedChildren.push(newSegment);
+          }
+          continue;
+        }
+      }
+      resolvedChildren.push(child);
+    }
+    resolvedChildren.reverse();
+    super(resolvedChildren, timing, id);
+    this.type = "PARALLEL";
+    this.duration = Math.max(0, ...children.map((child) => child.duration));
+  }
+  construct(plan, startTime) {
+    for (const child of this.children) {
+      child.construct(plan, startTime);
+    }
+  }
+};
+function parallel(children, timing, id) {
+  return new ParallelNode(children, timing, id);
+}
+
+// src/ani/nodes/sequence.ts
+var SequenceNode = class extends CompositionNode {
+  constructor(children, timing, id) {
+    super(children, timing, id);
+    this.type = "SEQUENCE";
+    this.duration = children.reduce((sum, child) => sum + child.duration, 0);
+  }
+  construct(plan, startTime) {
+    let currentTime = startTime;
+    for (const child of this.children) {
+      child.construct(plan, currentTime);
+      currentTime += child.duration;
+    }
+  }
+};
+function sequence(children, timing, id) {
+  return new SequenceNode(children, timing, id);
+}
+
+// src/ani/nodes/stagger.ts
+var StaggerNode = class extends CompositionNode {
+  constructor(children, props, id) {
+    super(children, props?.timing, id);
+    this.type = "STAGGER";
+    this.offset = props.offset;
+    if (children.length === 0) {
+      this.duration = 0;
+    } else {
+      const lastChild = children[children.length - 1];
+      this.duration = (children.length - 1) * this.offset + lastChild.duration;
+    }
+  }
+  construct(plan, startTime) {
+    let currentTime = startTime;
+    for (const child of this.children) {
+      child.construct(plan, currentTime);
+      currentTime += this.offset;
+    }
+  }
+};
+function stagger(children, props, id) {
+  return new StaggerNode(children, props, id);
+}
+
+// src/loop/clock.ts
+var AnimationClock = class _AnimationClock {
+  constructor(maxDeltaTime) {
+    this.subscribers = /* @__PURE__ */ new Set();
+    this.animationFrameId = null;
+    this.lastTimestamp = 0;
+    this.tick = (timestamp) => {
+      if (!this.animationFrameId) return;
+      const MS = 1e3;
+      let dt = (timestamp - this.lastTimestamp) / MS;
+      this.lastTimestamp = timestamp;
+      if (dt < 0) dt = 0;
+      if (dt > this.maxDeltaTime) {
+        dt = this.maxDeltaTime;
+      }
+      for (const subscriber of this.subscribers) {
+        subscriber.update(dt);
+      }
+      this.animationFrameId = window.requestAnimationFrame(this.tick);
+    };
+    this.maxDeltaTime = maxDeltaTime;
+  }
+  /**
+   * Crete new clock(singleton)
+   * @param maxDeltaTime default maxDt = 100ms
+   * @returns clock
+   */
+  static create(maxDeltaTime = 1 / 10) {
+    _AnimationClock.clock = new _AnimationClock(maxDeltaTime);
+    return _AnimationClock.clock;
+  }
+  subscribe(animatable) {
+    this.subscribers.add(animatable);
+    if (!this.animationFrameId) {
+      this.start();
+    }
+  }
+  unsubscribe(animatable) {
+    this.subscribers.delete(animatable);
+    if (this.subscribers.size === 0) {
+      this.stop();
+    }
+  }
+  start() {
+    this.lastTimestamp = performance.now();
+    this.animationFrameId = window.requestAnimationFrame(this.tick);
+  }
+  stop() {
+    if (this.animationFrameId) {
+      window.cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+};
+
+// src/utils/time/is_end.ts
+function isEndOfAnimation(currentT, duration, tolerance = 1e-3) {
+  return currentT === duration || currentT - duration >= tolerance;
+}
+
+// src/ani/engine.ts
+function calculateSegmentState(localTime, segmentDef, dt = 0) {
+  const t = Math.max(0, Math.min(localTime, segmentDef.duration));
+  const animeValues = [];
+  let allComplete = true;
+  const isMultipleTiming = Array.isArray(segmentDef.timing);
+  if (isMultipleTiming && segmentDef.timing.length !== segmentDef.from.length) {
+    throw new TypeError(
+      `[calculateSegmentState] timing does not correctly set. It requires multiple timing for ${segmentDef.from}, but received ${segmentDef.timing}`
+    );
+  }
+  for (let i = 0; i < segmentDef.from.length; i++) {
+    const timingFunction = isMultipleTiming ? segmentDef.timing[i] : segmentDef.timing;
+    const animeResponse = timingFunction.step(t, {
+      dt,
+      from: segmentDef.from[i],
+      to: segmentDef.to[i],
+      duration: segmentDef.duration
+    });
+    animeValues.push(animeResponse.value);
+    if (!animeResponse.endOfAnimation) {
+      allComplete = false;
+    }
+  }
+  return {
+    values: animeValues,
+    isComplete: allComplete || isEndOfAnimation(t, segmentDef.duration)
+  };
+}
+
+// src/ani/timeline.ts
+var Timeline = class {
+  constructor(rootNode, clock) {
+    this.rootNode = rootNode;
+    this._currentExecutionPlan = null;
+    this._masterTime = 0;
+    this._status = "IDLE";
+    this._currentConfig = null;
+    this._state = [];
+    this._initialState = [];
+    this._repeatCount = 0;
+    this._propertyKeyMap = null;
+    this._segmentStartStates = /* @__PURE__ */ new Map();
+    this._onUpdateCallbacks = /* @__PURE__ */ new Set();
+    this.duration = rootNode.duration;
+    this._baseExecutionPlan = this._constructExecutionPlan(rootNode);
+    this._clock = clock ?? AnimationClock.create();
+    this.play.bind(this);
+    this.pause.bind(this);
+    this.seek.bind(this);
+    this.resume.bind(this);
+    this.reset.bind(this);
+  }
+  /**
+   * Current animation running config.
+   */
+  get currentConfig() {
+    return this._currentConfig;
+  }
+  /**
+   * Resolves a Group (like {x, y}) into keys and values.
+   */
+  _resolveGroup(group) {
+    if (Array.isArray(group)) {
+      return { keyMap: null, values: group };
+    }
+    const keyMap = new Map(Object.keys(group).map((key, i) => [key, i]));
+    const values = Object.values(group);
+    return { keyMap, values };
+  }
+  /**
+   * Resolves the internal state (a number array) back into Group.
+   */
+  _resolveStateToGroup(state) {
+    if (!this._propertyKeyMap) {
+      return state;
+    }
+    const group = {};
+    let i = 0;
+    for (const key of this._propertyKeyMap.keys()) {
+      group[key] = state[i];
+      i++;
+    }
+    return group;
+  }
+  /**
+   * Compile animation execution plan
+   */
+  _constructExecutionPlan(rootNode) {
+    const plan = [];
+    rootNode.construct(plan, 0);
+    return plan;
+  }
+  /**
+   * Calculates the exact state of the animation at point.
+   */
+  _calculateStateAtTime(targetTime, dt = 0) {
+    if (this._initialState.length === 0 || !this._currentExecutionPlan) {
+      return [];
+    }
+    const nextState = [...this._initialState];
+    let stateAtLastStartTime = [...this._initialState];
+    for (const segment of this._currentExecutionPlan) {
+      if (targetTime < segment.startTime) {
+        continue;
+      }
+      if (!segment.node.props.timing) {
+        throw new Error(
+          `[Timeline] timing should be provided. Please specify timing using a.timing.(...). Check target segment: ${JSON.stringify(segment, null, 2)}.`,
+          { cause: segment }
+        );
+      }
+      stateAtLastStartTime = [...nextState];
+      const { keyMap, values: toValues } = this._resolveGroup(
+        segment.node.props.to
+      );
+      const isRecordAni = this._propertyKeyMap !== null && keyMap !== null;
+      let fromValues = [];
+      if (isRecordAni) {
+        for (const key of keyMap.keys()) {
+          fromValues.push(
+            stateAtLastStartTime[this._propertyKeyMap.get(key)]
+          );
+        }
+      } else {
+        fromValues = stateAtLastStartTime;
+      }
+      let finalAnimeValues = [];
+      const localTime = targetTime - segment.startTime;
+      const segmentDef = {
+        from: fromValues,
+        to: toValues,
+        duration: segment.node.duration,
+        timing: segment.node.props.timing
+      };
+      const segmentState = calculateSegmentState(
+        localTime,
+        segmentDef,
+        dt
+      );
+      if (segmentState.isComplete) {
+        finalAnimeValues = toValues;
+      } else {
+        finalAnimeValues = segmentState.values;
+      }
+      if (isRecordAni) {
+        let i = 0;
+        for (const key of keyMap.keys()) {
+          const stateIndex = this._propertyKeyMap.get(key);
+          if (stateIndex === -1) {
+            continue;
+          }
+          nextState[stateIndex] = finalAnimeValues[i];
+          i++;
+        }
+      } else {
+        for (let i = 0; i < finalAnimeValues.length; i++) {
+          nextState[i] = finalAnimeValues[i];
+        }
+      }
+    }
+    return nextState;
+  }
+  _resolveExecutionPlan(keyframes, durations) {
+    if (!keyframes && !durations) {
+      return [...this._baseExecutionPlan];
+    }
+    const segmentNodes = this._baseExecutionPlan.filter(
+      (segment) => segment.node.type === "SEGMENT"
+    );
+    const segLength = segmentNodes.length;
+    if (keyframes && keyframes.length !== segLength) {
+      throw new Error(
+        `Timeline keyframe mismatch: Expected ${segLength} keyframes, but received ${keyframes.length}.`
+      );
+    }
+    if (durations && durations.length !== segLength) {
+      throw new Error(
+        `Timeline keyframe mismatch: Expected ${segLength} durations, but received ${durations.length}.`
+      );
+    }
+    const newPlan = [];
+    let keyframeIndex = 0;
+    for (const segment of this._baseExecutionPlan) {
+      if (segment.node.type === "SEGMENT") {
+        const dynamicTo = keyframes?.[keyframeIndex];
+        const dynamicDuration = durations?.[keyframeIndex];
+        const newSegmentProps = {
+          ...segment.node.props,
+          // >> dynamic to
+          ...dynamicTo && {
+            to: dynamicTo === "keep" ? segment.node.props.to : dynamicTo
+          },
+          // >> dynamic duration
+          ...dynamicDuration && {
+            duration: dynamicDuration === "keep" ? segment.node.props.duration : dynamicDuration
+          }
+        };
+        const newSegment = new SegmentNode(
+          newSegmentProps,
+          segment.node.id
+        );
+        newPlan.push({ ...segment, node: newSegment });
+        keyframeIndex++;
+      } else {
+        newPlan.push({ ...segment });
+      }
+    }
+    return newPlan;
+  }
+  notify() {
+    for (const subscriber of this._onUpdateCallbacks) {
+      subscriber({
+        state: this._resolveStateToGroup(this._state),
+        status: this._status
+      });
+    }
+  }
+  play(config, canBeIntercepted = true) {
+    if (this._status === "PLAYING" && !canBeIntercepted) {
+      return;
+    }
+    const isRepeating = this._currentConfig?.repeat && this._currentConfig?.repeat >= 1;
+    const savedRepeatCount = isRepeating ? this._repeatCount : 0;
+    this.reset(false);
+    this._repeatCount = savedRepeatCount;
+    if (isRepeating && this._repeatCount >= config.repeat) {
+      this._repeatCount = 0;
+      return;
+    }
+    this._currentConfig = config;
+    this._currentExecutionPlan = this._resolveExecutionPlan(
+      config.keyframes,
+      config.durations
+    );
+    const { keyMap: keys, values } = this._resolveGroup(config.from);
+    this._propertyKeyMap = keys;
+    this._state = values;
+    this._initialState = values;
+    this._status = "PLAYING";
+    this._clock.subscribe(this);
+    this.update(0);
+  }
+  pause() {
+    this._status = "PAUSED";
+    this._clock.unsubscribe(this);
+  }
+  resume() {
+    if (this._status !== "PAUSED") return;
+    this._status = "PLAYING";
+    this._clock.subscribe(this);
+  }
+  reset(notify = true) {
+    this._status = "IDLE";
+    this._currentConfig = null;
+    this._masterTime = 0;
+    this._state = [];
+    this._initialState = [];
+    this._propertyKeyMap = null;
+    this._segmentStartStates.clear();
+    this._currentExecutionPlan = null;
+    this._clock.unsubscribe(this);
+    this._repeatCount = 0;
+    if (notify) {
+      this.notify();
+    }
+  }
+  seek(targetTime) {
+    if (this._status === "PLAYING" || this._status === "ENDED") {
+      this.pause();
+    }
+    const seekTime = Math.max(0, Math.min(targetTime, this.duration));
+    this._masterTime = seekTime;
+    this._state = this._calculateStateAtTime(seekTime, 0);
+    this.notify();
+  }
+  getCurrentValue() {
+    if (this._state.length === 0) return null;
+    return this._resolveStateToGroup(this._state);
+  }
+  onUpdate(callback) {
+    this._onUpdateCallbacks.add(callback);
+    return () => {
+      this._onUpdateCallbacks.delete(callback);
+    };
+  }
+  update(dt) {
+    if (this._status !== "PLAYING") {
+      return;
+    }
+    this._masterTime += dt;
+    if (this._masterTime >= this.duration) {
+      this._masterTime = this.duration;
+    }
+    this._state = this._calculateStateAtTime(this._masterTime, dt);
+    this.notify();
+    if (isEndOfAnimation(this._masterTime, this.duration)) {
+      this._repeatCount += 1;
+      if (!this._currentConfig) {
+        throw new Error(
+          `[Timeline] currentConfig can not be null when update(dt)`
+        );
+      }
+      const noRepeat = (this._currentConfig.repeat ?? 0) === 0;
+      if (noRepeat) {
+        this._status = "ENDED";
+        this._clock.unsubscribe(this);
+        this.notify();
+      } else {
+        this.play(this._currentConfig);
+      }
+    }
+  }
+};
+function timeline(rootNode, clock) {
+  return new Timeline(rootNode, clock);
+}
+
+// src/ani/states.ts
+function createStates(config) {
+  let State = config.initial;
+  let Timeline2 = timeline(
+    config.states[State],
+    config.clock
+  );
+  const subs = /* @__PURE__ */ new Set();
+  const notify = (timeline2) => {
+    for (const Sub of subs) {
+      Sub(timeline2);
+    }
+  };
+  return {
+    timeline: () => Timeline2,
+    onTimelineChange(callback) {
+      subs.add(callback);
+      return () => subs.delete(callback);
+    },
+    transitionTo(newState, timelineConfig, canBeIntercepted) {
+      if (!config.states[newState] || State === newState) {
+        return;
+      }
+      const from = timelineConfig?.from ?? // 1. config
+      Timeline2.getCurrentValue() ?? // 2. last value
+      config.initialFrom;
+      State = newState;
+      Timeline2 = timeline(config.states[State], config.clock);
+      notify(Timeline2);
+      Timeline2.play(
+        {
+          ...timelineConfig,
+          from
+        },
+        canBeIntercepted
+      );
+    }
+  };
+}
+
+// src/event/manager.ts
+var EventManager = class _EventManager {
+  constructor(supportedEvents) {
+    this.supportedEvents = supportedEvents;
+    this._element = null;
+    this._animeGetter = null;
+    this.setAnimeGetter = (animeGetter) => {
+      this._animeGetter = animeGetter;
+    };
+    this.eventMap = /* @__PURE__ */ new Map();
+    this.withAnimeValue = (listener) => {
+      const withAnime = (e) => {
+        listener(this.animeGetter(), e);
+      };
+      return withAnime;
+    };
+    this.add = (eventName, listener, options) => {
+      const withAnime = this.withAnimeValue(listener);
+      this.eventMap.set(eventName, withAnime);
+      this.targetElement.addEventListener(
+        eventName,
+        this.eventMap.get(eventName),
+        options
+      );
+    };
+    this.cleanupOne = (eventName) => {
+      const removeListener = this.eventMap.get(eventName);
+      if (!removeListener) return false;
+      this.targetElement.removeEventListener(eventName, removeListener);
+      return true;
+    };
+    this.cleanupAll = () => {
+      const clearResponse = [];
+      for (const evtName of this.eventMap.keys()) {
+        const res = this.cleanupOne(evtName);
+        clearResponse.push(res);
+      }
+      return clearResponse.some((t) => t === false) === false;
+    };
+    this.attach = (handlers) => {
+      Object.entries(handlers).forEach(([eventKey, handler]) => {
+        this.add(
+          _EventManager.getEvtKey(eventKey),
+          handler
+        );
+      });
+    };
+  }
+  get targetElement() {
+    if (!this._element) throw new Error("EventManger, bind element first");
+    return this._element;
+  }
+  get animeGetter() {
+    if (!this._animeGetter)
+      throw new Error("EventManager, animeGetter should be provided");
+    return this._animeGetter;
+  }
+  /**
+   * get pure `{event_name}`
+   * @param key onX`{event_name}`
+   */
+  static getEvtKey(key) {
+    const removed = key.substring(2, key.length);
+    const Capitalized = `${removed[0].toLowerCase()}${removed.substring(1, key.length)}`;
+    return Capitalized;
+  }
+  bind(element) {
+    this._element = element;
+  }
+};
+
+// src/style/create_sheet.ts
+var TransformFunctionMap = {
+  // deg
+  rotate: { fn: "rotate", unit: "deg" },
+  rotateX: { fn: "rotateX", unit: "deg" },
+  rotateY: { fn: "rotateY", unit: "deg" },
+  rotateZ: { fn: "rotateZ", unit: "deg" },
+  skew: { fn: "skew", unit: "deg" },
+  skewX: { fn: "skewX", unit: "deg" },
+  skewY: { fn: "skewY", unit: "deg" },
+  // px
+  translate: { fn: "translate", unit: "px" },
+  translateX: { fn: "translateX", unit: "px" },
+  translateY: { fn: "translateY", unit: "px" },
+  translateZ: { fn: "translateZ", unit: "px" },
+  // unitless
+  scale: { fn: "scale" },
+  scaleX: { fn: "scaleX" },
+  scaleY: { fn: "scaleY" },
+  scaleZ: { fn: "scaleZ" }
+};
+var TransformProperties = new Set(Object.keys(TransformFunctionMap));
+var PxProperties = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "padding",
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "borderWidth",
+  "borderRadius"
+]);
+var UnitlessProperties = /* @__PURE__ */ new Set([
+  "opacity",
+  "zIndex",
+  "lineHeight",
+  "fontWeight"
+]);
+function createStyleSheet(animeStyleValue, resolver) {
+  const styleAccumulator = {};
+  const CssTransformParts = [];
+  for (const key in animeStyleValue) {
+    if (!Object.hasOwn(animeStyleValue, key)) {
+      continue;
+    }
+    const value = animeStyleValue[key];
+    if (typeof value !== "number") {
+      continue;
+    }
+    const styleResolver = resolver?.[key];
+    if (styleResolver) {
+      const { key: resolvedKey, value: resolvedValue } = styleResolver(value);
+      styleAccumulator[resolvedKey] = resolvedValue;
+      continue;
+    }
+    if (TransformProperties.has(key)) {
+      const res = TransformFunctionMap[key];
+      const transformPart = "unit" in res ? `${res.fn}(${value}${res.unit})` : `${res.fn}(${value})`;
+      CssTransformParts.push(transformPart);
+      continue;
+    }
+    if (PxProperties.has(key)) {
+      styleAccumulator[key] = `${value}px`;
+      continue;
+    }
+    if (UnitlessProperties.has(key)) {
+      styleAccumulator[key] = value;
+      continue;
+    }
+    styleAccumulator[key] = value;
+  }
+  if (CssTransformParts.length > 0) {
+    styleAccumulator["transform"] = CssTransformParts.join(" ");
+  }
+  return styleAccumulator;
+}
+
+// src/index.ts
+var a = {
+  timing: T,
+  ani,
+  createStates,
+  delay,
+  loop,
+  parallel,
+  sequence,
+  stagger,
+  timeline
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimationClock,
+  AnimationNode,
+  CompositionNode,
+  EventManager,
+  LinearTimingFunction,
+  ParallelNode,
+  SegmentNode,
+  SequenceNode,
+  StaggerNode,
+  T,
+  Timeline,
+  TimingFunction,
+  a,
+  ani,
+  createStates,
+  createStyleSheet,
+  delay,
+  loop,
+  parallel,
+  sequence,
+  stagger,
+  timeline
+});