@studiometa/js-toolkit 3.5.0 → 3.6.0-beta.1

package/utils/collide/boundingRectToCircle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/boundingRectToCircle.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Convert clientRect to a formatted circle object\n *\n * @param {Partial<DOMRect>} domRect DOMRect of a square DOMElement\n * @param {boolean} force Force usage of non-square DOMElements\n * @return {Circle} Circle object that can be used in collides functions\n * @link https://js-toolkit.studiometa.dev/utils/collision/boundingRectToCircle.html\n*/\nexport function boundingRectToCircle({ x, y, width, height }, force = false) {\n  if (width !== height && !force) {\n    throw new Error('Initial DOMElement is not a square. Please use the force mode.');\n  }\n  return {\n    x: x + width / 2,\n    y: y + height / 2,\n    radius: (width + height) / 4,\n  };\n}\n"],
+  "sourcesContent": ["/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Convert clientRect to a formatted circle object\n *\n * @param {Partial<DOMRect>} domRect DOMRect of a square DOMElement\n * @param {boolean} force Force usage of non-square DOMElements\n * @return {Circle} Circle object that can be used in collides functions\n * @link https://js-toolkit.studiometa.dev/utils/collision/boundingRectToCircle.html\n */\nexport function boundingRectToCircle({ x, y, width, height }, force = false) {\n  if (width !== height && !force) {\n    throw new Error('Initial DOMElement is not a square. Please use the force mode.');\n  }\n  return {\n    x: x + width / 2,\n    y: y + height / 2,\n    radius: (width + height) / 4,\n  };\n}\n"],
   "mappings": "AAeO,SAAS,qBAAqB,EAAE,GAAG,GAAG,OAAO,OAAO,GAAG,QAAQ,OAAO;AAC3E,MAAI,UAAU,UAAU,CAAC,OAAO;AAC9B,UAAM,IAAI,MAAM,gEAAgE;AAAA,EAClF;AACA,SAAO;AAAA,IACL,GAAG,IAAI,QAAQ;AAAA,IACf,GAAG,IAAI,SAAS;AAAA,IAChB,SAAS,QAAQ,UAAU;AAAA,EAC7B;AACF;",
   "names": []
 }

package/utils/collide/collideCircleCircle.d.ts

@@ -12,5 +12,5 @@
  * @param {Circle} circle2 Circle 2
  * @return {boolean} Are the sides of one circle touching the other ?
  * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleCircle.html
-*/
+ */
 export declare function collideCircleCircle(circle1: any, circle2: any): boolean;

package/utils/collide/collideCircleCircle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collideCircleCircle.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with another.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-circle.php\n *\n * @param {Circle} circle1 Circle 1\n * @param {Circle} circle2 Circle 2\n * @return {boolean} Are the sides of one circle touching the other ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleCircle.html\n*/\nexport function collideCircleCircle(circle1, circle2) {\n  // get distance between the circle's centers\n  // use the Pythagorean Theorem to compute the distance\n  const distX = circle1.x - circle2.x;\n  const distY = circle1.y - circle2.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the sum of the circle's\n  // radii, the circles are touching!\n  if (distance <= circle1.radius + circle2.radius) {\n    return true;\n  }\n  return false;\n}\n"],
+  "sourcesContent": ["/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with another.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-circle.php\n *\n * @param {Circle} circle1 Circle 1\n * @param {Circle} circle2 Circle 2\n * @return {boolean} Are the sides of one circle touching the other ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleCircle.html\n */\nexport function collideCircleCircle(circle1, circle2) {\n  // get distance between the circle's centers\n  // use the Pythagorean Theorem to compute the distance\n  const distX = circle1.x - circle2.x;\n  const distY = circle1.y - circle2.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the sum of the circle's\n  // radii, the circles are touching!\n  if (distance <= circle1.radius + circle2.radius) {\n    return true;\n  }\n  return false;\n}\n"],
   "mappings": "AAgBO,SAAS,oBAAoB,SAAS,SAAS;AAGpD,QAAM,QAAQ,QAAQ,IAAI,QAAQ;AAClC,QAAM,QAAQ,QAAQ,IAAI,QAAQ;AAClC,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAIxD,MAAI,YAAY,QAAQ,SAAS,QAAQ,QAAQ;AAC/C,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/utils/collide/collideCircleRect.d.ts

@@ -19,5 +19,5 @@
  * @param {Rect} rect Rectangle
  * @return {boolean} Are the sides of the circle touching the rectangle ?
  * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleRect.html
-*/
+ */
 export declare function collideCircleRect(circle: any, rect: any): boolean;

package/utils/collide/collideCircleRect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collideCircleRect.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-rect.php\n *\n * @param {Circle} circle Circle\n * @param {Rect} rect Rectangle\n * @return {boolean} Are the sides of the circle touching the rectangle ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleRect.html\n*/\nexport function collideCircleRect(circle, rect) {\n  // temporary variables to set edges for testing\n  let testX = circle.x;\n  let testY = circle.y;\n\n  // which edge is closest?\n  if (circle.x < rect.x) {\n    testX = rect.x; // test left edge\n  } else if (circle.x > rect.x + rect.width) {\n    testX = rect.x + rect.width; // right edge\n  }\n\n  if (circle.y < rect.y) {\n    testY = rect.y; // top edge\n  } else if (circle.y > rect.y + rect.height) {\n    testY = rect.y + rect.height; // bottom edge\n  }\n\n  // get distance from closest edges\n  const distX = circle.x - testX;\n  const distY = circle.y - testY;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the radius, collision!\n  if (distance <= circle.radius) {\n    return true;\n  }\n  return false;\n}\n"],
+  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a circle collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/circle-rect.php\n *\n * @param {Circle} circle Circle\n * @param {Rect} rect Rectangle\n * @return {boolean} Are the sides of the circle touching the rectangle ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideCircleRect.html\n */\nexport function collideCircleRect(circle, rect) {\n  // temporary variables to set edges for testing\n  let testX = circle.x;\n  let testY = circle.y;\n\n  // which edge is closest?\n  if (circle.x < rect.x) {\n    testX = rect.x; // test left edge\n  } else if (circle.x > rect.x + rect.width) {\n    testX = rect.x + rect.width; // right edge\n  }\n\n  if (circle.y < rect.y) {\n    testY = rect.y; // top edge\n  } else if (circle.y > rect.y + rect.height) {\n    testY = rect.y + rect.height; // bottom edge\n  }\n\n  // get distance from closest edges\n  const distX = circle.x - testX;\n  const distY = circle.y - testY;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the radius, collision!\n  if (distance <= circle.radius) {\n    return true;\n  }\n  return false;\n}\n"],
   "mappings": "AAwBO,SAAS,kBAAkB,QAAQ,MAAM;AAE9C,MAAI,QAAQ,OAAO;AACnB,MAAI,QAAQ,OAAO;AAGnB,MAAI,OAAO,IAAI,KAAK,GAAG;AACrB,YAAQ,KAAK;AAAA,EACf,WAAW,OAAO,IAAI,KAAK,IAAI,KAAK,OAAO;AACzC,YAAQ,KAAK,IAAI,KAAK;AAAA,EACxB;AAEA,MAAI,OAAO,IAAI,KAAK,GAAG;AACrB,YAAQ,KAAK;AAAA,EACf,WAAW,OAAO,IAAI,KAAK,IAAI,KAAK,QAAQ;AAC1C,YAAQ,KAAK,IAAI,KAAK;AAAA,EACxB;AAGA,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAGxD,MAAI,YAAY,OAAO,QAAQ;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/utils/collide/collidePointCircle.d.ts

@@ -17,5 +17,5 @@
  * @param {Circle} circle Circle
  * @return {boolean} Is the point inside the circle's bounds ?
  * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointCircle.html
-*/
+ */
 export declare function collidePointCircle(point: any, circle: any): boolean;

package/utils/collide/collidePointCircle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collidePointCircle.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a point is inside a circle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-circle.php\n *\n * @param {Point} point Point\n * @param {Circle} circle Circle\n * @return {boolean} Is the point inside the circle's bounds ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointCircle.html\n*/\nexport function collidePointCircle(point, circle) {\n  // get distance between the point and circle's center\n  // using the Pythagorean Theorem\n  const distX = point.x - circle.x;\n  const distY = point.y - circle.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the circle's\n  // radius the point is inside!\n  return distance <= circle.radius;\n}\n"],
+  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Circle\n * @property {number} x Circle's x position\n * @property {number} y Circle's y position\n * @property {number} radius Circle's radius\n */\n\n/**\n * Test if a point is inside a circle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-circle.php\n *\n * @param {Point} point Point\n * @param {Circle} circle Circle\n * @return {boolean} Is the point inside the circle's bounds ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointCircle.html\n */\nexport function collidePointCircle(point, circle) {\n  // get distance between the point and circle's center\n  // using the Pythagorean Theorem\n  const distX = point.x - circle.x;\n  const distY = point.y - circle.y;\n  const distance = Math.sqrt(distX * distX + distY * distY);\n\n  // if the distance is less than the circle's\n  // radius the point is inside!\n  return distance <= circle.radius;\n}\n"],
   "mappings": "AAsBO,SAAS,mBAAmB,OAAO,QAAQ;AAGhD,QAAM,QAAQ,MAAM,IAAI,OAAO;AAC/B,QAAM,QAAQ,MAAM,IAAI,OAAO;AAC/B,QAAM,WAAW,KAAK,KAAK,QAAQ,QAAQ,QAAQ,KAAK;AAIxD,SAAO,YAAY,OAAO;AAC5B;",
   "names": []
 }

package/utils/collide/collidePointRect.d.ts

@@ -18,5 +18,5 @@
  * @param {Rect} rect Rectangle
  * @return {boolean} Is the point inside the rectangle's bounds ?
  * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointRect.html
-*/
+ */
 export declare function collidePointRect(point: any, rect: any): boolean;

package/utils/collide/collidePointRect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collidePointRect.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a point collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-rect.php\n *\n * @param {Point} point Point\n * @param {Rect} rect Rectangle\n * @return {boolean} Is the point inside the rectangle's bounds ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointRect.html\n*/\nexport function collidePointRect(point, rect) {\n  return (\n    point.x >= rect.x && // right of the left edge AND\n    point.x <= rect.x + rect.width && // left of the right edge AND\n    point.y >= rect.y && // below the top AND\n    point.y <= rect.y + rect.height // above the bottom\n  );\n}\n"],
+  "sourcesContent": ["/**\n * @typedef {Object} Point\n * @property {number} x Point's x position\n * @property {number} y Point's y position\n */\n\n/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a point collides with a rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/point-rect.php\n *\n * @param {Point} point Point\n * @param {Rect} rect Rectangle\n * @return {boolean} Is the point inside the rectangle's bounds ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collidePointRect.html\n */\nexport function collidePointRect(point, rect) {\n  return (\n    point.x >= rect.x && // right of the left edge AND\n    point.x <= rect.x + rect.width && // left of the right edge AND\n    point.y >= rect.y && // below the top AND\n    point.y <= rect.y + rect.height // above the bottom\n  );\n}\n"],
   "mappings": "AAuBO,SAAS,iBAAiB,OAAO,MAAM;AAC5C,SACE,MAAM,KAAK,KAAK;AAAA,EAChB,MAAM,KAAK,KAAK,IAAI,KAAK;AAAA,EACzB,MAAM,KAAK,KAAK;AAAA,EAChB,MAAM,KAAK,KAAK,IAAI,KAAK;AAE7B;",
   "names": []
 }

package/utils/collide/collideRectRect.d.ts

@@ -13,5 +13,5 @@
  * @param {Rect} rect2 Rectangle 2
  * @return {boolean} Are the sides of one rectangle touching the other ?
  * @link https://js-toolkit.studiometa.dev/utils/collision/collideRectRect.html
-*/
+ */
 export declare function collideRectRect(rect1: any, rect2: any): boolean;

package/utils/collide/collideRectRect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/collide/collideRectRect.ts"],
-  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a rectangle collides with another rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/rect-rect.php\n *\n * @param {Rect} rect1 Rectangle 1\n * @param {Rect} rect2 Rectangle 2\n * @return {boolean} Are the sides of one rectangle touching the other ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideRectRect.html\n*/\nexport function collideRectRect(rect1, rect2) {\n  return (\n    rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND\n    rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND\n    rect1.y + rect1.height >= rect2.y && // rect1 top edge past rect2 bottom AND\n    rect1.y <= rect2.y + rect2.height // rect1 bottom edge past rect2 top\n  );\n}\n"],
+  "sourcesContent": ["/**\n * @typedef {Object} Rect\n * @property {number} x Rectangle's x position\n * @property {number} y Rectangle's y position\n * @property {number} width Rectangle's width\n * @property {number} height Rectangle's height\n */\n\n/**\n * Test if a rectangle collides with another rectangle.\n * Inspired by http://www.jeffreythompson.org/collision-detection/rect-rect.php\n *\n * @param {Rect} rect1 Rectangle 1\n * @param {Rect} rect2 Rectangle 2\n * @return {boolean} Are the sides of one rectangle touching the other ?\n * @link https://js-toolkit.studiometa.dev/utils/collision/collideRectRect.html\n */\nexport function collideRectRect(rect1, rect2) {\n  return (\n    rect1.x + rect1.width >= rect2.x && // rect1 right edge past rect2 left AND\n    rect1.x <= rect2.x + rect2.width && // rect1 left edge past rect2 right AND\n    rect1.y + rect1.height >= rect2.y && // rect1 top edge past rect2 bottom AND\n    rect1.y <= rect2.y + rect2.height // rect1 bottom edge past rect2 top\n  );\n}\n"],
   "mappings": "AAiBO,SAAS,gBAAgB,OAAO,OAAO;AAC5C,SACE,MAAM,IAAI,MAAM,SAAS,MAAM;AAAA,EAC/B,MAAM,KAAK,MAAM,IAAI,MAAM;AAAA,EAC3B,MAAM,IAAI,MAAM,UAAU,MAAM;AAAA,EAChC,MAAM,KAAK,MAAM,IAAI,MAAM;AAE/B;",
   "names": []
 }

package/utils/css/animate.d.ts

@@ -41,6 +41,6 @@ export type Animate = Tween;
 /**
  * Animate one or more elements.
  * @link https://js-toolkit.studiometa.dev/utils/css/animate.html
-*/
+ */
 export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: AnimateOptions): Animate;
 export {};

package/utils/css/animate.js

@@ -1,6 +1,5 @@
-import { clamp01, lerp, map, mean } from "../math/index.js";
-import { isDefined, isFunction, isNumber } from "../is.js";
-import { transform, TRANSFORM_PROPS } from "./transform.js";
+import { clamp01, lerp, map } from "../math/index.js";
+import { isFunction } from "../is.js";
 import { domScheduler as scheduler } from "../scheduler.js";
 import { tween, normalizeEase } from "../tween.js";
 import { eachElements } from "./utils.js";
@@ -8,82 +7,146 @@ import { startsWith } from "../string/index.js";
 let id = 0;
 const running = /* @__PURE__ */ new WeakMap();
 const CSSUnitConverter = {
-  "%": (value, getSizeRef) => value * getSizeRef() / 100,
+  "%": (value, size) => value * size / 100,
   vh: (value) => value * window.innerHeight / 100,
   vw: (value) => value * window.innerWidth / 100,
   vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
-function getAnimationStepValue(val, getSizeRef) {
-  if (isNumber(val)) {
+function resolveUnitValue(val, elementSize) {
+  if (typeof val === "number") {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
     return val[0];
   }
-  return CSSUnitConverter[val[1]](val[0], getSizeRef);
+  return CSSUnitConverter[val[1]](val[0], elementSize);
 }
-const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(
-  getAnimationStepValue(
-    fromValue ?? 0,
-    /* istanbul ignore next */
-    () => element[sizeRef]
-  ),
-  getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),
-  progress
-);
-const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
-const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
-const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);
-const scaleRenderStrategy = generateLerpRenderStrategy(1);
-const degreesRenderStrategy = generateLerpRenderStrategy(0);
-const transformRenderStrategies = {
-  x: widthBasedTranslateRenderStrategy,
-  y: heightBasedTranslateRenderStrategy,
-  z: widthBasedTranslateRenderStrategy,
-  scale: scaleRenderStrategy,
-  scaleX: scaleRenderStrategy,
-  scaleY: scaleRenderStrategy,
-  scaleZ: scaleRenderStrategy,
-  skew: degreesRenderStrategy,
-  skewX: degreesRenderStrategy,
-  skewY: degreesRenderStrategy,
-  rotate: degreesRenderStrategy,
-  rotateX: degreesRenderStrategy,
-  rotateY: degreesRenderStrategy,
-  rotateZ: degreesRenderStrategy
-};
-function render(element, from, to, progress) {
-  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
+const SIMPLE_TRANSFORM_DEFS = [
+  ["rotate", "rotate", "deg", 0],
+  ["rotateX", "rotateX", "deg", 0],
+  ["rotateY", "rotateY", "deg", 0],
+  ["rotateZ", "rotateZ", "deg", 0],
+  ["scale", "scale", "", 1],
+  ["scaleX", "scaleX", "", 1],
+  ["scaleY", "scaleY", "", 1],
+  ["scaleZ", "scaleZ", "", 1],
+  ["skew", "skew", "deg", 0],
+  ["skewX", "skewX", "deg", 0],
+  ["skewY", "skewY", "deg", 0]
+];
+const TRANSLATE_DEFS = [
+  ["x", 0, "offsetWidth"],
+  ["y", 0, "offsetHeight"],
+  ["z", 0, "offsetWidth"]
+];
+function compileSegment(from, to) {
+  const transformStarts = [];
+  const transformDeltas = [];
+  const transformCssFunctions = [];
+  const transformUnits = [];
+  const dynamicTranslates = [];
+  let hasTranslate = false;
+  const translateAxisIndices = [];
+  for (const [prop, defaultValue, sizeRef] of TRANSLATE_DEFS) {
+    const propertyExists = from[prop] !== void 0 || to[prop] !== void 0;
+    if (propertyExists) hasTranslate = true;
+    const fromValue = from[prop] ?? defaultValue;
+    const toValue = to[prop] ?? defaultValue;
+    const arrayIndex = transformStarts.length;
+    translateAxisIndices.push(arrayIndex);
+    transformCssFunctions.push("");
+    transformUnits.push("px");
+    if (typeof fromValue !== "number" || typeof toValue !== "number") {
+      transformStarts.push(0);
+      transformDeltas.push(0);
+      dynamicTranslates.push({ index: arrayIndex, from: fromValue, to: toValue, sizeRef });
+    } else {
+      transformStarts.push(fromValue);
+      transformDeltas.push(toValue - fromValue);
+    }
+  }
+  for (const [prop, cssFunction, unit, defaultValue] of SIMPLE_TRANSFORM_DEFS) {
+    if (from[prop] === void 0 && to[prop] === void 0) continue;
+    const startValue = from[prop] ?? defaultValue;
+    transformCssFunctions.push(cssFunction);
+    transformUnits.push(unit);
+    transformStarts.push(startValue);
+    transformDeltas.push((to[prop] ?? defaultValue) - startValue);
+  }
+  const hasOpacity = from.opacity !== void 0 || to.opacity !== void 0;
+  const opacityStart = hasOpacity ? from.opacity ?? 1 : 0;
+  const opacityDelta = hasOpacity ? (to.opacity ?? 1) - opacityStart : 0;
+  const customPropertyNames = [];
+  const customPropertyStarts = [];
+  const customPropertyDeltas = [];
+  if (from.vars && to.vars) {
+    for (const name of from.vars) {
+      const startValue = from[name];
+      const endValue = to[name] ?? startValue;
+      customPropertyNames.push(name);
+      customPropertyStarts.push(startValue);
+      customPropertyDeltas.push(endValue - startValue);
+    }
+  }
+  return {
+    fromOffset: from.offset,
+    toOffset: to.offset,
+    easing: to.easing,
+    transformStarts,
+    transformDeltas,
+    transformCssFunctions,
+    transformUnits,
+    hasTranslate,
+    translateAxisIndices,
+    simpleTransformStart: TRANSLATE_DEFS.length,
+    dynamicTranslates,
+    hasOpacity,
+    opacityStart,
+    opacityDelta,
+    customPropertyNames,
+    customPropertyStarts,
+    customPropertyDeltas,
+    transformOrigin: to.transformOrigin !== void 0 ? to.transformOrigin : false
+  };
+}
+function renderSegment(element, segment, progress) {
+  const easedProgress = segment.easing(map(progress, segment.fromOffset, segment.toOffset, 0, 1));
   scheduler.read(() => {
+    for (let i = 0; i < segment.dynamicTranslates.length; i++) {
+      const dynamic = segment.dynamicTranslates[i];
+      const elementSize = element[dynamic.sizeRef];
+      const startValue = resolveUnitValue(dynamic.from, elementSize);
+      segment.transformStarts[dynamic.index] = startValue;
+      segment.transformDeltas[dynamic.index] = resolveUnitValue(dynamic.to, elementSize) - startValue;
+    }
+    let transformValue = "";
+    if (segment.hasTranslate) {
+      const xIndex = segment.translateAxisIndices[0];
+      const yIndex = segment.translateAxisIndices[1];
+      const zIndex = segment.translateAxisIndices[2];
+      const x = segment.transformStarts[xIndex] + segment.transformDeltas[xIndex] * easedProgress;
+      const y = segment.transformStarts[yIndex] + segment.transformDeltas[yIndex] * easedProgress;
+      const z = segment.transformStarts[zIndex] + segment.transformDeltas[zIndex] * easedProgress;
+      transformValue += `translate3d(${x}px, ${y}px, ${z}px) `;
+    }
+    for (let i = segment.simpleTransformStart; i < segment.transformStarts.length; i++) {
+      const value = segment.transformStarts[i] + segment.transformDeltas[i] * easedProgress;
+      transformValue += `${segment.transformCssFunctions[i]}(${value}${segment.transformUnits[i]}) `;
+    }
     let opacity = false;
-    if (isDefined(from.opacity) || isDefined(to.opacity)) {
-      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);
+    if (segment.hasOpacity) {
+      opacity = segment.opacityStart + segment.opacityDelta * easedProgress;
     } else if (element.style.opacity) {
       opacity = "";
     }
     let transformOrigin = false;
-    if (isDefined(to.transformOrigin)) {
-      transformOrigin = to.transformOrigin;
+    if (segment.transformOrigin !== false) {
+      transformOrigin = segment.transformOrigin;
     } else if (element.style.transformOrigin) {
       transformOrigin = "";
     }
-    let customProperties = false;
-    if (isDefined(from.vars) && isDefined(to.vars)) {
-      customProperties = [];
-      for (const customPropertyName of from.vars) {
-        customProperties.push([
-          customPropertyName,
-          lerp(from[customPropertyName], to[customPropertyName], stepProgress)
-        ]);
-      }
-    }
-    const props = {};
-    for (const name of TRANSFORM_PROPS) {
-      if (isDefined(from[name]) || isDefined(to[name])) {
-        props[name] = transformRenderStrategies[name](element, from[name], to[name], stepProgress);
-      }
-    }
+    const hasCustomProperties = segment.customPropertyNames.length > 0;
     scheduler.write(() => {
       if (opacity !== false) {
         element.style.opacity = opacity;
@@ -91,12 +154,15 @@ function render(element, from, to, progress) {
       if (transformOrigin !== false) {
         element.style.transformOrigin = transformOrigin;
       }
-      if (customProperties !== false) {
-        for (const customProperty of customProperties) {
-          element.style.setProperty(customProperty[0], customProperty[1].toString());
+      if (hasCustomProperties) {
+        for (let i = 0; i < segment.customPropertyNames.length; i++) {
+          element.style.setProperty(
+            segment.customPropertyNames[i],
+            (segment.customPropertyStarts[i] + segment.customPropertyDeltas[i] * easedProgress).toString()
+          );
         }
       }
-      transform(element, props);
+      element.style.transform = transformValue;
     });
   });
 }
@@ -110,17 +176,21 @@ function singleAnimate(element, keyframes, options = {}) {
       vars: Object.keys(keyframe).filter((key2) => startsWith(key2, "--"))
     })
   );
+  const segments = [];
+  for (let i = 1; i < normalizedKeyframes.length; i++) {
+    segments.push(compileSegment(normalizedKeyframes[i - 1], normalizedKeyframes[i]));
+  }
   if (!running.has(element)) {
     running.set(element, /* @__PURE__ */ new Map());
   }
   const key = `animate-${id}`;
   id += 1;
   function callback(progress) {
-    let toIndex = 0;
-    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= progress && normalizedKeyframes[toIndex].offset !== 1) {
-      toIndex += 1;
+    let segmentIndex = 0;
+    while (segmentIndex < segments.length - 1 && segments[segmentIndex].toOffset <= progress && segments[segmentIndex].toOffset !== 1) {
+      segmentIndex += 1;
     }
-    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);
+    renderSegment(element, segments[segmentIndex], progress);
   }
   const controls = tween(callback, {
     ...options,
@@ -153,56 +223,52 @@ function animate(elementOrElements, keyframes, options = {}) {
   const progresses = [];
   const timings = [];
   let duration = 0;
-  let previousTimings = [0, 0, 0];
+  let progressSum = 0;
+  let elementCount = 0;
   const controls = eachElements(elementOrElements, (element, index) => {
     const delay = staggerIsFunction ? stagger(element, index) : stagger * index;
     const itemOptions = { ...options, delay };
     if (durationFn) {
       itemOptions.duration = durationFn(element, index);
-    } else if (!isDefined(itemOptions.duration)) {
+    } else if (itemOptions.duration === void 0) {
       itemOptions.duration = 1;
     }
     timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];
-    if (timings[index][2] > previousTimings[2]) {
+    if (timings[index][2] > duration) {
       duration = timings[index][2];
     }
-    previousTimings = timings[index];
     progresses[index] = 0;
+    elementCount = index + 1;
     itemOptions.onProgress = (itemProgress) => {
+      progressSum += itemProgress - progresses[index];
       progresses[index] = itemProgress;
       if (progressFn) {
-        progressFn(mean(progresses));
+        progressFn(progressSum / elementCount);
       }
     };
     return singleAnimate(element, keyframes, itemOptions);
   });
-  const delegate = (key) => (
-    // eslint-disable-next-line consistent-return
-    function delegated() {
-      if (key === "progress") {
-        if (arguments.length === 1) {
-          const newProgress = arguments[0];
-          const newTime = lerp(0, duration, newProgress);
-          for (const [index, control] of controls.entries()) {
-            const controlProgress = clamp01(
-              map(newTime, timings[index][1], timings[index][2], 0, 1)
-            );
-            control.progress(controlProgress);
-          }
-        }
-        return mean(progresses);
-      }
-      for (const control of controls) {
-        control[key].call(null, arguments);
+  function forAll(key) {
+    for (const control of controls) {
+      control[key]();
+    }
+  }
+  function progress(newProgress) {
+    if (newProgress !== void 0) {
+      const newTime = lerp(0, duration, newProgress);
+      for (let i = 0; i < controls.length; i++) {
+        const controlProgress = clamp01(map(newTime, timings[i][1], timings[i][2], 0, 1));
+        controls[i].progress(controlProgress);
       }
     }
-  );
+    return progressSum / elementCount;
+  }
   return {
-    start: delegate("start"),
-    pause: delegate("pause"),
-    finish: delegate("finish"),
-    play: delegate("play"),
-    progress: delegate("progress")
+    start: () => forAll("start"),
+    pause: () => forAll("pause"),
+    finish: () => forAll("finish"),
+    play: () => forAll("play"),
+    progress
   };
 }
 export {

package/utils/css/animate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
-  "sourcesContent": ["import { clamp01, lerp, map, mean } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport { transform, TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\nimport { eachElements } from './utils.js';\nimport { startsWith } from '../string/index.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, Tween, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\ntype KeyframeTransforms<Type> = {\n  [Property in keyof Type]: number | [number, string];\n};\n\nexport type Keyframe = Partial<\n  KeyframeTransforms<TransformProps> & {\n    opacity: number;\n    transformOrigin: string;\n    easing: EasingFunction | BezierCurve;\n    offset: number;\n    [key: CSSCustomPropertyName]: number;\n  }\n>;\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport interface AnimateOptions extends Omit<TweenOptions, 'duration'> {\n  /**\n   * The duration of the tween, in seconds.\n   * When using multiple targets, it can be a function which will be\n   * called with the current target and its index and should return\n   * the duration in seconds for this element.\n   *\n   * Defaults to `1`.\n   */\n  duration?: number | ((target: HTMLElement, index: number) => number);\n  /**\n   * Delay between the start of each target animation, in seconds.\n   * When using multiple targets, it can be a function which will be called\n   * with the current target and its index and should return the delay\n   * in seconds for this element's tween.\n   *\n   * Defaults to `0`.\n   */\n  stagger?: number | ((target: HTMLElement, index: number) => number);\n}\n\nexport type Animate = Tween;\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    let customProperties: false | [string, number][] = false;\n    if (isDefined(from.vars) && isDefined(to.vars)) {\n      customProperties = [];\n      for (const customPropertyName of from.vars) {\n        customProperties.push([\n          customPropertyName,\n          lerp(from[customPropertyName], to[customPropertyName], stepProgress),\n        ]);\n      }\n    }\n\n    const props = {};\n\n    for (const name of TRANSFORM_PROPS) {\n      if (isDefined(from[name]) || isDefined(to[name])) {\n        props[name] = transformRenderStrategies[name](element, from[name], to[name], stepProgress);\n      }\n    }\n\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (customProperties !== false) {\n        for (const customProperty of customProperties) {\n          element.style.setProperty(customProperty[0], customProperty[1].toString());\n        }\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => startsWith(key, '--')),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart(progress) {\n      if (isFunction(options.onStart)) {\n        options.onStart(progress);\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      for (const [runningKey, runningPause] of runningKeys.entries()) {\n        runningPause();\n        runningKeys.delete(runningKey);\n      }\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\ntype Duration = number;\ntype Delay = number;\ntype DurationWithDelay = number;\n\n/**\n * Animate one or more elements.\n * @link https://js-toolkit.studiometa.dev/utils/css/animate.html\n*/\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: AnimateOptions = {},\n): Animate {\n  if (elementOrElements instanceof HTMLElement) {\n    return singleAnimate(elementOrElements, keyframes, {\n      ...options,\n      duration: isFunction(options.duration)\n        ? options.duration(elementOrElements, 0)\n        : options.duration,\n    });\n  }\n\n  const stagger = options.stagger ?? 0;\n  const staggerIsFunction = isFunction(stagger);\n  const durationFn = isFunction(options.duration) ? options.duration : null;\n  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;\n  const progresses: number[] = [];\n  const timings: [Duration, Delay, DurationWithDelay][] = [];\n  let duration = 0;\n  let previousTimings = [0, 0, 0];\n\n  const controls = eachElements(elementOrElements, (element, index) => {\n    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;\n    const itemOptions = { ...options, delay } as TweenOptions;\n\n    if (durationFn) {\n      itemOptions.duration = durationFn(element, index);\n    } else if (!isDefined(itemOptions.duration)) {\n      itemOptions.duration = 1;\n    }\n\n    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];\n\n    if (timings[index][2] > previousTimings[2]) {\n      // eslint-disable-next-line prefer-destructuring\n      duration = timings[index][2];\n    }\n\n    previousTimings = timings[index];\n\n    progresses[index] = 0;\n    itemOptions.onProgress = (itemProgress) => {\n      progresses[index] = itemProgress;\n      if (progressFn) {\n        progressFn(mean(progresses));\n      }\n    };\n\n    return singleAnimate(element, keyframes, itemOptions);\n  });\n\n  const delegate = (key) =>\n    // eslint-disable-next-line consistent-return\n    function delegated() {\n      if (key === 'progress') {\n        if (arguments.length === 1) {\n          // eslint-disable-next-line prefer-rest-params\n          const newProgress = arguments[0];\n          const newTime = lerp(0, duration, newProgress);\n          for (const [index, control] of controls.entries()) {\n            const controlProgress = clamp01(\n              map(newTime, timings[index][1], timings[index][2], 0, 1),\n            );\n            control.progress(controlProgress);\n          }\n        }\n\n        return mean(progresses);\n      }\n\n      for (const control of controls) {\n        // eslint-disable-next-line prefer-rest-params\n        control[key].call(null, arguments);\n      }\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clamp01, lerp, map } from '../math/index.js';\nimport { isFunction } from '../is.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\nimport { eachElements } from './utils.js';\nimport { startsWith } from '../string/index.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, Tween, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\ntype KeyframeTransforms<Type> = {\n  [Property in keyof Type]: number | [number, string];\n};\n\nexport type Keyframe = Partial<\n  KeyframeTransforms<TransformProps> & {\n    opacity: number;\n    transformOrigin: string;\n    easing: EasingFunction | BezierCurve;\n    offset: number;\n    [key: CSSCustomPropertyName]: number;\n  }\n>;\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\n/**\n * A pre-compiled segment between two keyframes.\n * All constant parts (deltas, offsets, writers) are resolved once at creation.\n * The render loop only does multiply-add and string concatenation.\n */\ninterface CompiledSegment {\n  fromOffset: number;\n  toOffset: number;\n  easing: EasingFunction;\n  /** Parallel arrays for transform properties (structure-of-arrays layout) */\n  transformStarts: number[];\n  transformDeltas: number[];\n  transformCssFunctions: string[];\n  transformUnits: string[];\n  /** Whether translate3d is needed */\n  hasTranslate: boolean;\n  /** Indices into transformStarts/transformDeltas for x, y, z axes */\n  translateAxisIndices: number[];\n  /** The index where non-translate transforms start in the parallel arrays */\n  simpleTransformStart: number;\n  /** Translate properties that need element size for CSS unit conversion at render time */\n  dynamicTranslates: Array<{\n    index: number;\n    from: number | [number, string];\n    to: number | [number, string];\n    sizeRef: string;\n  }>;\n  /** Opacity: pre-computed start and delta, or null if not animated */\n  opacityStart: number;\n  opacityDelta: number;\n  hasOpacity: boolean;\n  /** CSS custom properties: parallel arrays */\n  customPropertyNames: string[];\n  customPropertyStarts: number[];\n  customPropertyDeltas: number[];\n  /** Transform origin for this segment, or false */\n  transformOrigin: string | false;\n}\n\nexport interface AnimateOptions extends Omit<TweenOptions, 'duration'> {\n  /**\n   * The duration of the tween, in seconds.\n   * When using multiple targets, it can be a function which will be\n   * called with the current target and its index and should return\n   * the duration in seconds for this element.\n   *\n   * Defaults to `1`.\n   */\n  duration?: number | ((target: HTMLElement, index: number) => number);\n  /**\n   * Delay between the start of each target animation, in seconds.\n   * When using multiple targets, it can be a function which will be called\n   * with the current target and its index and should return the delay\n   * in seconds for this element's tween.\n   *\n   * Defaults to `0`.\n   */\n  stagger?: number | ((target: HTMLElement, index: number) => number);\n}\n\nexport type Animate = Tween;\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value: number, size: number) => (value * size) / 100,\n  vh: (value: number) => (value * window.innerHeight) / 100,\n  vw: (value: number) => (value * window.innerWidth) / 100,\n  vmin: (value: number) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value: number) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Resolve a keyframe value that may have a CSS unit (e.g. [50, '%']).\n */\nfunction resolveUnitValue(val: number | [number, string], elementSize: number): number {\n  if (typeof val === 'number') {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], elementSize);\n}\n\n/**\n * Non-translate transform property definitions: [keyframeProp, cssFn, unit, defaultValue].\n */\nconst SIMPLE_TRANSFORM_DEFS: ReadonlyArray<readonly [string, string, string, number]> = [\n  ['rotate', 'rotate', 'deg', 0],\n  ['rotateX', 'rotateX', 'deg', 0],\n  ['rotateY', 'rotateY', 'deg', 0],\n  ['rotateZ', 'rotateZ', 'deg', 0],\n  ['scale', 'scale', '', 1],\n  ['scaleX', 'scaleX', '', 1],\n  ['scaleY', 'scaleY', '', 1],\n  ['scaleZ', 'scaleZ', '', 1],\n  ['skew', 'skew', 'deg', 0],\n  ['skewX', 'skewX', 'deg', 0],\n  ['skewY', 'skewY', 'deg', 0],\n];\n\n/**\n * Translate axis definitions: [keyframeProp, defaultValue, sizeRef].\n * These are grouped into a single translate3d() call during rendering.\n */\nconst TRANSLATE_DEFS: ReadonlyArray<readonly [string, number, string]> = [\n  ['x', 0, 'offsetWidth'],\n  ['y', 0, 'offsetHeight'],\n  ['z', 0, 'offsetWidth'],\n];\n\n/**\n * Compile a pair of keyframes into a pre-computed segment.\n * All constant work (deltas, property filtering) is done here once.\n */\nfunction compileSegment(from: NormalizedKeyframe, to: NormalizedKeyframe): CompiledSegment {\n  const transformStarts: number[] = [];\n  const transformDeltas: number[] = [];\n  const transformCssFunctions: string[] = [];\n  const transformUnits: string[] = [];\n  const dynamicTranslates: CompiledSegment['dynamicTranslates'] = [];\n\n  // Translate axes: grouped into translate3d(x, y, z) during rendering.\n  // We track indices into the parallel arrays for x, y, z.\n  let hasTranslate = false;\n  const translateAxisIndices: number[] = [];\n\n  for (const [prop, defaultValue, sizeRef] of TRANSLATE_DEFS) {\n    const propertyExists = from[prop] !== undefined || to[prop] !== undefined;\n    if (propertyExists) hasTranslate = true;\n\n    const fromValue = from[prop] ?? defaultValue;\n    const toValue = to[prop] ?? defaultValue;\n    const arrayIndex = transformStarts.length;\n    translateAxisIndices.push(arrayIndex);\n\n    // Placeholder CSS function/unit \u2014 not used for translate (special rendering)\n    transformCssFunctions.push('');\n    transformUnits.push('px');\n\n    if (typeof fromValue !== 'number' || typeof toValue !== 'number') {\n      transformStarts.push(0);\n      transformDeltas.push(0);\n      dynamicTranslates.push({ index: arrayIndex, from: fromValue, to: toValue, sizeRef });\n    } else {\n      transformStarts.push(fromValue);\n      transformDeltas.push(toValue - fromValue);\n    }\n  }\n\n  // Non-translate transforms: each gets its own CSS function\n  for (const [prop, cssFunction, unit, defaultValue] of SIMPLE_TRANSFORM_DEFS) {\n    if (from[prop] === undefined && to[prop] === undefined) continue;\n\n    const startValue = (from[prop] as number) ?? defaultValue;\n    transformCssFunctions.push(cssFunction);\n    transformUnits.push(unit);\n    transformStarts.push(startValue);\n    transformDeltas.push(((to[prop] as number) ?? defaultValue) - startValue);\n  }\n\n  // Opacity\n  const hasOpacity = from.opacity !== undefined || to.opacity !== undefined;\n  const opacityStart = hasOpacity ? (from.opacity ?? 1) : 0;\n  const opacityDelta = hasOpacity ? (to.opacity ?? 1) - opacityStart : 0;\n\n  // CSS custom properties\n  const customPropertyNames: string[] = [];\n  const customPropertyStarts: number[] = [];\n  const customPropertyDeltas: number[] = [];\n  if (from.vars && to.vars) {\n    for (const name of from.vars) {\n      const startValue = from[name] as number;\n      const endValue = (to[name] as number | undefined) ?? startValue;\n      customPropertyNames.push(name);\n      customPropertyStarts.push(startValue);\n      customPropertyDeltas.push(endValue - startValue);\n    }\n  }\n\n  return {\n    fromOffset: from.offset,\n    toOffset: to.offset,\n    easing: to.easing,\n    transformStarts,\n    transformDeltas,\n    transformCssFunctions,\n    transformUnits,\n    hasTranslate,\n    translateAxisIndices,\n    simpleTransformStart: TRANSLATE_DEFS.length,\n    dynamicTranslates,\n    hasOpacity,\n    opacityStart,\n    opacityDelta,\n    customPropertyNames,\n    customPropertyStarts,\n    customPropertyDeltas,\n    transformOrigin: to.transformOrigin !== undefined ? to.transformOrigin : false,\n  };\n}\n\n/**\n * Render an element using a pre-compiled segment and a progress value.\n * The hot path: only multiply-add, string concatenation, and DOM writes.\n */\nfunction renderSegment(element: HTMLElement, segment: CompiledSegment, progress: number) {\n  const easedProgress = segment.easing(map(progress, segment.fromOffset, segment.toOffset, 0, 1));\n\n  scheduler.read(() => {\n    // Resolve dynamic (CSS-unit) transforms that need element size\n    for (let i = 0; i < segment.dynamicTranslates.length; i++) {\n      const dynamic = segment.dynamicTranslates[i];\n      const elementSize = element[dynamic.sizeRef];\n      const startValue = resolveUnitValue(dynamic.from, elementSize);\n      segment.transformStarts[dynamic.index] = startValue;\n      segment.transformDeltas[dynamic.index] =\n        resolveUnitValue(dynamic.to, elementSize) - startValue;\n    }\n\n    // Build transform string: translate3d grouped, then individual transforms\n    let transformValue = '';\n\n    if (segment.hasTranslate) {\n      const xIndex = segment.translateAxisIndices[0];\n      const yIndex = segment.translateAxisIndices[1];\n      const zIndex = segment.translateAxisIndices[2];\n      const x = segment.transformStarts[xIndex] + segment.transformDeltas[xIndex] * easedProgress;\n      const y = segment.transformStarts[yIndex] + segment.transformDeltas[yIndex] * easedProgress;\n      const z = segment.transformStarts[zIndex] + segment.transformDeltas[zIndex] * easedProgress;\n      transformValue += `translate3d(${x}px, ${y}px, ${z}px) `;\n    }\n\n    for (let i = segment.simpleTransformStart; i < segment.transformStarts.length; i++) {\n      const value = segment.transformStarts[i] + segment.transformDeltas[i] * easedProgress;\n      transformValue += `${segment.transformCssFunctions[i]}(${value}${segment.transformUnits[i]}) `;\n    }\n\n    // Compute opacity\n    let opacity: false | number | string = false;\n    if (segment.hasOpacity) {\n      opacity = segment.opacityStart + segment.opacityDelta * easedProgress;\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    // Compute transform origin\n    let transformOrigin: false | string = false;\n    if (segment.transformOrigin !== false) {\n      transformOrigin = segment.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    // Compute CSS custom properties\n    const hasCustomProperties = segment.customPropertyNames.length > 0;\n\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (hasCustomProperties) {\n        for (let i = 0; i < segment.customPropertyNames.length; i++) {\n          element.style.setProperty(\n            segment.customPropertyNames[i],\n            (\n              segment.customPropertyStarts[i] +\n              segment.customPropertyDeltas[i] * easedProgress\n            ).toString(),\n          );\n        }\n      }\n      element.style.transform = transformValue;\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => startsWith(key, '--')),\n    }),\n  );\n\n  // Compile keyframe pairs into pre-computed segments (stage 1: partial evaluation)\n  const segments: CompiledSegment[] = [];\n  for (let i = 1; i < normalizedKeyframes.length; i++) {\n    segments.push(compileSegment(normalizedKeyframes[i - 1], normalizedKeyframes[i]));\n  }\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let segmentIndex = 0;\n    while (\n      segmentIndex < segments.length - 1 &&\n      segments[segmentIndex].toOffset <= progress &&\n      segments[segmentIndex].toOffset !== 1\n    ) {\n      segmentIndex += 1;\n    }\n\n    renderSegment(element, segments[segmentIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart(progress) {\n      if (isFunction(options.onStart)) {\n        options.onStart(progress);\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      for (const [runningKey, runningPause] of runningKeys.entries()) {\n        runningPause();\n        runningKeys.delete(runningKey);\n      }\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\ntype Duration = number;\ntype Delay = number;\ntype DurationWithDelay = number;\n\n/**\n * Animate one or more elements.\n * @link https://js-toolkit.studiometa.dev/utils/css/animate.html\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: AnimateOptions = {},\n): Animate {\n  if (elementOrElements instanceof HTMLElement) {\n    return singleAnimate(elementOrElements, keyframes, {\n      ...options,\n      duration: isFunction(options.duration)\n        ? options.duration(elementOrElements, 0)\n        : options.duration,\n    });\n  }\n\n  const stagger = options.stagger ?? 0;\n  const staggerIsFunction = isFunction(stagger);\n  const durationFn = isFunction(options.duration) ? options.duration : null;\n  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;\n  const progresses: number[] = [];\n  const timings: [Duration, Delay, DurationWithDelay][] = [];\n  let duration = 0;\n  let progressSum = 0;\n  let elementCount = 0;\n\n  const controls = eachElements(elementOrElements, (element, index) => {\n    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;\n    const itemOptions = { ...options, delay } as TweenOptions;\n\n    if (durationFn) {\n      itemOptions.duration = durationFn(element, index);\n    } else if (itemOptions.duration === undefined) {\n      itemOptions.duration = 1;\n    }\n\n    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];\n\n    if (timings[index][2] > duration) {\n      // eslint-disable-next-line prefer-destructuring\n      duration = timings[index][2];\n    }\n\n    progresses[index] = 0;\n    elementCount = index + 1;\n    itemOptions.onProgress = (itemProgress) => {\n      progressSum += itemProgress - progresses[index];\n      progresses[index] = itemProgress;\n      if (progressFn) {\n        progressFn(progressSum / elementCount);\n      }\n    };\n\n    return singleAnimate(element, keyframes, itemOptions);\n  });\n\n  function forAll(key: string) {\n    for (const control of controls) {\n      control[key]();\n    }\n  }\n\n  function progress(newProgress?: number) {\n    if (newProgress !== undefined) {\n      const newTime = lerp(0, duration, newProgress);\n      for (let i = 0; i < controls.length; i++) {\n        const controlProgress = clamp01(map(newTime, timings[i][1], timings[i][2], 0, 1));\n        controls[i].progress(controlProgress);\n      }\n    }\n\n    return progressSum / elementCount;\n  }\n\n  return {\n    start: () => forAll('start'),\n    pause: () => forAll('pause'),\n    finish: () => forAll('finish'),\n    play: () => forAll('play'),\n    progress,\n  };\n}\n"],
+  "mappings": "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",
   "names": ["key"]
 }

package/utils/css/classes.d.ts

@@ -1,15 +1,15 @@
 /**
  * Add class names to an element.
  * @link https://js-toolkit.studiometa.dev/utils/css/addClass.html
-*/
+ */
 export declare function add(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
  * @link https://js-toolkit.studiometa.dev/utils/css/removeClass.html
-*/
+ */
 export declare function remove(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
  * @link https://js-toolkit.studiometa.dev/utils/css/toggleClass.html
-*/
+ */
 export declare function toggle(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;