@studiometa/js-toolkit 2.7.0 → 2.9.0

package/services/index.d.ts

@@ -23,13 +23,13 @@ export interface ServiceInterface<T> {
      */
     props(): T;
 }
-export declare type DragServiceInterface = ServiceInterface<DragServiceProps>;
-export declare type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
-export declare type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
-export declare type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
-export declare type RafServiceInterface = ServiceInterface<RafServiceProps>;
-export declare type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;
-export declare type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
+export type DragServiceInterface = ServiceInterface<DragServiceProps>;
+export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
+export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
+export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
+export type RafServiceInterface = ServiceInterface<RafServiceProps>;
+export type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;
+export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
 export type { DragServiceProps, KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps, };
 export { default as useDrag } from './drag.js';
 export { default as useKey } from './key.js';

package/services/key.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type KeyService = ServiceInterface<KeyServiceProps>;
+export type KeyService = ServiceInterface<KeyServiceProps>;
 export interface KeyServiceProps {
     event: KeyboardEvent;
     triggered: number;

package/services/load.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type LoadService = ServiceInterface<LoadServiceProps>;
+export type LoadService = ServiceInterface<LoadServiceProps>;
 export interface LoadServiceProps {
     time: DOMHighResTimeStamp;
 }

package/services/pointer.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type PointerService = ServiceInterface<PointerServiceProps>;
+export type PointerService = ServiceInterface<PointerServiceProps>;
 export interface PointerServiceProps {
     event: MouseEvent | TouchEvent;
     isDown: boolean;

package/services/raf.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type RafService = ServiceInterface<RafServiceProps>;
+export type RafService = ServiceInterface<RafServiceProps>;
 export interface RafServiceProps {
     time: DOMHighResTimeStamp;
 }

package/services/resize.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type ResizeService = ServiceInterface<ResizeServiceProps>;
+export type ResizeService = ServiceInterface<ResizeServiceProps>;
 export interface ResizeServiceProps {
     width: number;
     height: number;

package/services/scroll.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type ScrollService = ServiceInterface<ScrollServiceProps>;
+export type ScrollService = ServiceInterface<ScrollServiceProps>;
 export interface ScrollServiceProps {
     x: number;
     y: number;

package/utils/Queue.cjs

@@ -32,8 +32,11 @@ var Queue = class {
     this.waiter = waiter;
   }
   add(task) {
-    this.tasks.push(task);
+    const p = new Promise((resolve) => {
+      this.tasks.push(() => resolve(task()));
+    });
     this.scheduleFlush();
+    return p;
   }
   scheduleFlush() {
     if (this.isScheduled) {

package/utils/Queue.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/Queue.ts"],
-  "sourcesContent": ["/**\n * Manage tasks in a queue.\n */\nexport class Queue {\n  /**\n   * List of tasks.\n   */\n  tasks: Array<(...args: unknown[]) => unknown> = [];\n\n  /**\n   * Number of tasks running in a single batch.\n   */\n  concurrency = 10;\n\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter: (cb: (...args: unknown[]) => unknown) => unknown;\n\n  /**\n   * Is schedule running?\n   */\n  isScheduled = false;\n\n  /**\n   * Constructor.\n   *\n   * @param {number} concurrency Number of tasks running in a single batch.\n   * @param {(cb: (...args:unknown[]) => unknown) => unknown} waiter Scheduler for the next batch execution.\n   */\n  constructor(\n    concurrency: number,\n    waiter: (cb: (...args: unknown[]) => unknown) => unknown = (cb) => cb(),\n  ) {\n    this.concurrency = concurrency;\n    this.waiter = waiter;\n  }\n\n  /**\n   * Add a task to the queue.\n   */\n  add(task: (...args: unknown[]) => unknown) {\n    this.tasks.push(task);\n    this.scheduleFlush();\n  }\n\n  /**\n   * Schedule next flush.\n   */\n  scheduleFlush() {\n    if (this.isScheduled) {\n      return;\n    }\n\n    this.isScheduled = true;\n    this.waiter(() => this.flush());\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks.splice(0, this.concurrency));\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    // eslint-disable-next-line no-cond-assign\n    while ((task = tasks.shift())) {\n      task();\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,IAAM,QAAN,MAAY;AAAA,EAIjB,QAAgD,CAAC;AAAA,EAKjD,cAAc;AAAA,EAKd;AAAA,EAKA,cAAc;AAAA,EAQd,YACE,aACA,SAA2D,CAAC,OAAO,GAAG,GACtE;AACA,SAAK,cAAc;AACnB,SAAK,SAAS;AAAA,EAChB;AAAA,EAKA,IAAI,MAAuC;AACzC,SAAK,MAAM,KAAK,IAAI;AACpB,SAAK,cAAc;AAAA,EACrB;AAAA,EAKA,gBAAgB;AACd,QAAI,KAAK,aAAa;AACpB;AAAA,IACF;AAEA,SAAK,cAAc;AACnB,SAAK,OAAO,MAAM,KAAK,MAAM,CAAC;AAAA,EAChC;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,MAAM,OAAO,GAAG,KAAK,WAAW,CAAC;AAC/C,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AAEJ,WAAQ,OAAO,MAAM,MAAM,GAAI;AAC7B,WAAK;AAAA,IACP;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * Manage tasks in a queue.\n */\nexport class Queue {\n  /**\n   * List of tasks.\n   */\n  tasks: Array<(...args: unknown[]) => unknown> = [];\n\n  /**\n   * Number of tasks running in a single batch.\n   */\n  concurrency = 10;\n\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter: (cb: (...args: unknown[]) => unknown) => unknown;\n\n  /**\n   * Is schedule running?\n   */\n  isScheduled = false;\n\n  /**\n   * Constructor.\n   *\n   * @param {number} concurrency Number of tasks running in a single batch.\n   * @param {(cb: (...args:unknown[]) => unknown) => unknown} waiter Scheduler for the next batch execution.\n   */\n  constructor(\n    concurrency: number,\n    waiter: (cb: (...args: unknown[]) => unknown) => unknown = (cb) => cb(),\n  ) {\n    this.concurrency = concurrency;\n    this.waiter = waiter;\n  }\n\n  /**\n   * Add a task to the queue.\n   */\n  add(task: () => unknown) {\n    const p = new Promise((resolve) => {\n      this.tasks.push(() => resolve(task()));\n    });\n    this.scheduleFlush();\n    return p;\n  }\n\n  /**\n   * Schedule next flush.\n   */\n  scheduleFlush() {\n    if (this.isScheduled) {\n      return;\n    }\n\n    this.isScheduled = true;\n    this.waiter(() => this.flush());\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks.splice(0, this.concurrency));\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    // eslint-disable-next-line no-cond-assign\n    while ((task = tasks.shift())) {\n      task();\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,IAAM,QAAN,MAAY;AAAA,EAIjB,QAAgD,CAAC;AAAA,EAKjD,cAAc;AAAA,EAKd;AAAA,EAKA,cAAc;AAAA,EAQd,YACE,aACA,SAA2D,CAAC,OAAO,GAAG,GACtE;AACA,SAAK,cAAc;AACnB,SAAK,SAAS;AAAA,EAChB;AAAA,EAKA,IAAI,MAAqB;AACvB,UAAM,IAAI,IAAI,QAAQ,CAAC,YAAY;AACjC,WAAK,MAAM,KAAK,MAAM,QAAQ,KAAK,CAAC,CAAC;AAAA,IACvC,CAAC;AACD,SAAK,cAAc;AACnB,WAAO;AAAA,EACT;AAAA,EAKA,gBAAgB;AACd,QAAI,KAAK,aAAa;AACpB;AAAA,IACF;AAEA,SAAK,cAAc;AACnB,SAAK,OAAO,MAAM,KAAK,MAAM,CAAC;AAAA,EAChC;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,MAAM,OAAO,GAAG,KAAK,WAAW,CAAC;AAC/C,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AAEJ,WAAQ,OAAO,MAAM,MAAM,GAAI;AAC7B,WAAK;AAAA,IACP;AAAA,EACF;AACF;",
   "names": []
 }

package/utils/Queue.d.ts

@@ -28,7 +28,7 @@ export declare class Queue {
     /**
      * Add a task to the queue.
      */
-    add(task: (...args: unknown[]) => unknown): void;
+    add(task: () => unknown): Promise<unknown>;
     /**
      * Schedule next flush.
      */

package/utils/Queue.js

@@ -8,8 +8,11 @@ class Queue {
     this.waiter = waiter;
   }
   add(task) {
-    this.tasks.push(task);
+    const p = new Promise((resolve) => {
+      this.tasks.push(() => resolve(task()));
+    });
     this.scheduleFlush();
+    return p;
   }
   scheduleFlush() {
     if (this.isScheduled) {

package/utils/Queue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/Queue.ts"],
-  "sourcesContent": ["/**\n * Manage tasks in a queue.\n */\nexport class Queue {\n  /**\n   * List of tasks.\n   */\n  tasks: Array<(...args: unknown[]) => unknown> = [];\n\n  /**\n   * Number of tasks running in a single batch.\n   */\n  concurrency = 10;\n\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter: (cb: (...args: unknown[]) => unknown) => unknown;\n\n  /**\n   * Is schedule running?\n   */\n  isScheduled = false;\n\n  /**\n   * Constructor.\n   *\n   * @param {number} concurrency Number of tasks running in a single batch.\n   * @param {(cb: (...args:unknown[]) => unknown) => unknown} waiter Scheduler for the next batch execution.\n   */\n  constructor(\n    concurrency: number,\n    waiter: (cb: (...args: unknown[]) => unknown) => unknown = (cb) => cb(),\n  ) {\n    this.concurrency = concurrency;\n    this.waiter = waiter;\n  }\n\n  /**\n   * Add a task to the queue.\n   */\n  add(task: (...args: unknown[]) => unknown) {\n    this.tasks.push(task);\n    this.scheduleFlush();\n  }\n\n  /**\n   * Schedule next flush.\n   */\n  scheduleFlush() {\n    if (this.isScheduled) {\n      return;\n    }\n\n    this.isScheduled = true;\n    this.waiter(() => this.flush());\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks.splice(0, this.concurrency));\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    // eslint-disable-next-line no-cond-assign\n    while ((task = tasks.shift())) {\n      task();\n    }\n  }\n}\n"],
-  "mappings": "AAGO,MAAM,MAAM;AAAA,EAIjB,QAAgD,CAAC;AAAA,EAKjD,cAAc;AAAA,EAKd;AAAA,EAKA,cAAc;AAAA,EAQd,YACE,aACA,SAA2D,CAAC,OAAO,GAAG,GACtE;AACA,SAAK,cAAc;AACnB,SAAK,SAAS;AAAA,EAChB;AAAA,EAKA,IAAI,MAAuC;AACzC,SAAK,MAAM,KAAK,IAAI;AACpB,SAAK,cAAc;AAAA,EACrB;AAAA,EAKA,gBAAgB;AACd,QAAI,KAAK,aAAa;AACpB;AAAA,IACF;AAEA,SAAK,cAAc;AACnB,SAAK,OAAO,MAAM,KAAK,MAAM,CAAC;AAAA,EAChC;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,MAAM,OAAO,GAAG,KAAK,WAAW,CAAC;AAC/C,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AAEJ,WAAQ,OAAO,MAAM,MAAM,GAAI;AAC7B,WAAK;AAAA,IACP;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * Manage tasks in a queue.\n */\nexport class Queue {\n  /**\n   * List of tasks.\n   */\n  tasks: Array<(...args: unknown[]) => unknown> = [];\n\n  /**\n   * Number of tasks running in a single batch.\n   */\n  concurrency = 10;\n\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter: (cb: (...args: unknown[]) => unknown) => unknown;\n\n  /**\n   * Is schedule running?\n   */\n  isScheduled = false;\n\n  /**\n   * Constructor.\n   *\n   * @param {number} concurrency Number of tasks running in a single batch.\n   * @param {(cb: (...args:unknown[]) => unknown) => unknown} waiter Scheduler for the next batch execution.\n   */\n  constructor(\n    concurrency: number,\n    waiter: (cb: (...args: unknown[]) => unknown) => unknown = (cb) => cb(),\n  ) {\n    this.concurrency = concurrency;\n    this.waiter = waiter;\n  }\n\n  /**\n   * Add a task to the queue.\n   */\n  add(task: () => unknown) {\n    const p = new Promise((resolve) => {\n      this.tasks.push(() => resolve(task()));\n    });\n    this.scheduleFlush();\n    return p;\n  }\n\n  /**\n   * Schedule next flush.\n   */\n  scheduleFlush() {\n    if (this.isScheduled) {\n      return;\n    }\n\n    this.isScheduled = true;\n    this.waiter(() => this.flush());\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks.splice(0, this.concurrency));\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    // eslint-disable-next-line no-cond-assign\n    while ((task = tasks.shift())) {\n      task();\n    }\n  }\n}\n"],
+  "mappings": "AAGO,MAAM,MAAM;AAAA,EAIjB,QAAgD,CAAC;AAAA,EAKjD,cAAc;AAAA,EAKd;AAAA,EAKA,cAAc;AAAA,EAQd,YACE,aACA,SAA2D,CAAC,OAAO,GAAG,GACtE;AACA,SAAK,cAAc;AACnB,SAAK,SAAS;AAAA,EAChB;AAAA,EAKA,IAAI,MAAqB;AACvB,UAAM,IAAI,IAAI,QAAQ,CAAC,YAAY;AACjC,WAAK,MAAM,KAAK,MAAM,QAAQ,KAAK,CAAC,CAAC;AAAA,IACvC,CAAC;AACD,SAAK,cAAc;AACnB,WAAO;AAAA,EACT;AAAA,EAKA,gBAAgB;AACd,QAAI,KAAK,aAAa;AACpB;AAAA,IACF;AAEA,SAAK,cAAc;AACnB,SAAK,OAAO,MAAM,KAAK,MAAM,CAAC;AAAA,EAChC;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,MAAM,OAAO,GAAG,KAAK,WAAW,CAAC;AAC/C,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AAEJ,WAAQ,OAAO,MAAM,MAAM,GAAI;AAC7B,WAAK;AAAA,IACP;AAAA,EACF;AACF;",
   "names": []
 }

package/utils/SmartQueue.cjs

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/SmartQueue.ts
+var SmartQueue_exports = {};
+__export(SmartQueue_exports, {
+  SmartQueue: () => SmartQueue
+});
+module.exports = __toCommonJS(SmartQueue_exports);
+var import_Queue = require("./Queue.cjs");
+var import_nextTick = __toESM(require("./nextTick.cjs"), 1);
+var LONG_TASK_DURATION = 40;
+var SmartQueue = class extends import_Queue.Queue {
+  waiter = import_nextTick.default;
+  constructor() {
+    super(Number.POSITIVE_INFINITY, import_nextTick.default);
+  }
+  flush() {
+    this.run(this.tasks);
+    this.isScheduled = false;
+    if (this.tasks.length > 0) {
+      this.scheduleFlush();
+    }
+  }
+  run(tasks) {
+    let task;
+    const start = performance.now();
+    let now = start;
+    while (now - start < LONG_TASK_DURATION && (task = tasks.shift())) {
+      task();
+      now = performance.now();
+    }
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=SmartQueue.cjs.map

package/utils/SmartQueue.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/utils/SmartQueue.ts"],
+  "sourcesContent": ["import { Queue } from './Queue.js';\nimport nextTick from './nextTick.js';\n\n/**\n * A task is considered long if it blocks the main thread for more thant 50ms.\n * By using 40ms as a limit, we make the bet that we can avoid long running\n * tasks by dispatching small tasks smartly.\n * @see https://developer.mozilla.org/en-US/docs/Glossary/Long_task\n */\nconst LONG_TASK_DURATION = 40;\n\n/**\n * Manage tasks in a smart queue.\n * Tasks will be automatically batch-called inside a single event loop\n * lasting no more than 50ms, which is considered a long task.\n */\nexport class SmartQueue extends Queue {\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter = nextTick;\n\n  /**\n   * Class constructor.\n   */\n  constructor() {\n    super(Number.POSITIVE_INFINITY, nextTick);\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks);\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    const start = performance.now();\n    let now = start;\n    // eslint-disable-next-line no-cond-assign\n    while (now - start < LONG_TASK_DURATION && (task = tasks.shift())) {\n      task();\n      now = performance.now();\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,sBAAqB;AAQrB,IAAM,qBAAqB;AAOpB,IAAM,aAAN,cAAyB,mBAAM;AAAA,EAIpC,SAAS,gBAAAA;AAAA,EAKT,cAAc;AACZ,UAAM,OAAO,mBAAmB,gBAAAA,OAAQ;AAAA,EAC1C;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,KAAK;AACnB,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AACJ,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,MAAM;AAEV,WAAO,MAAM,QAAQ,uBAAuB,OAAO,MAAM,MAAM,IAAI;AACjE,WAAK;AACL,YAAM,YAAY,IAAI;AAAA,IACxB;AAAA,EACF;AACF;",
+  "names": ["nextTick"]
+}

package/utils/SmartQueue.d.ts

@@ -0,0 +1,25 @@
+import { Queue } from './Queue.js';
+import nextTick from './nextTick.js';
+/**
+ * Manage tasks in a smart queue.
+ * Tasks will be automatically batch-called inside a single event loop
+ * lasting no more than 50ms, which is considered a long task.
+ */
+export declare class SmartQueue extends Queue {
+    /**
+     * A function to schedule the next batch.
+     */
+    waiter: typeof nextTick;
+    /**
+     * Class constructor.
+     */
+    constructor();
+    /**
+     * Flush current batch.
+     */
+    flush(): void;
+    /**
+     * Run the queue.
+     */
+    run(tasks: Array<(...args: unknown[]) => unknown>): void;
+}

package/utils/SmartQueue.js

@@ -0,0 +1,29 @@
+import { Queue } from "./Queue.js";
+import nextTick from "./nextTick.js";
+const LONG_TASK_DURATION = 40;
+class SmartQueue extends Queue {
+  waiter = nextTick;
+  constructor() {
+    super(Number.POSITIVE_INFINITY, nextTick);
+  }
+  flush() {
+    this.run(this.tasks);
+    this.isScheduled = false;
+    if (this.tasks.length > 0) {
+      this.scheduleFlush();
+    }
+  }
+  run(tasks) {
+    let task;
+    const start = performance.now();
+    let now = start;
+    while (now - start < LONG_TASK_DURATION && (task = tasks.shift())) {
+      task();
+      now = performance.now();
+    }
+  }
+}
+export {
+  SmartQueue
+};
+//# sourceMappingURL=SmartQueue.js.map

package/utils/SmartQueue.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/utils/SmartQueue.ts"],
+  "sourcesContent": ["import { Queue } from './Queue.js';\nimport nextTick from './nextTick.js';\n\n/**\n * A task is considered long if it blocks the main thread for more thant 50ms.\n * By using 40ms as a limit, we make the bet that we can avoid long running\n * tasks by dispatching small tasks smartly.\n * @see https://developer.mozilla.org/en-US/docs/Glossary/Long_task\n */\nconst LONG_TASK_DURATION = 40;\n\n/**\n * Manage tasks in a smart queue.\n * Tasks will be automatically batch-called inside a single event loop\n * lasting no more than 50ms, which is considered a long task.\n */\nexport class SmartQueue extends Queue {\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter = nextTick;\n\n  /**\n   * Class constructor.\n   */\n  constructor() {\n    super(Number.POSITIVE_INFINITY, nextTick);\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks);\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    const start = performance.now();\n    let now = start;\n    // eslint-disable-next-line no-cond-assign\n    while (now - start < LONG_TASK_DURATION && (task = tasks.shift())) {\n      task();\n      now = performance.now();\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,cAAc;AAQrB,MAAM,qBAAqB;AAOpB,MAAM,mBAAmB,MAAM;AAAA,EAIpC,SAAS;AAAA,EAKT,cAAc;AACZ,UAAM,OAAO,mBAAmB,QAAQ;AAAA,EAC1C;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,KAAK;AACnB,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AACJ,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,MAAM;AAEV,WAAO,MAAM,QAAQ,uBAAuB,OAAO,MAAM,MAAM,IAAI;AACjE,WAAK;AACL,YAAM,YAAY,IAAI;AAAA,IACxB;AAAA,EACF;AACF;",
+  "names": []
+}

package/utils/css/animate.cjs

@@ -96,6 +96,17 @@ function render(element, from, to, progress) {
     } else if (element.style.transformOrigin) {
       transformOrigin = "";
     }
+    let customProperties = false;
+    if ((0, import_is.isDefined)(from.vars) && (0, import_is.isDefined)(to.vars)) {
+      customProperties = from.vars.map((customPropertyName) => {
+        const customPropertyValue = (0, import_math.lerp)(
+          from[customPropertyName],
+          to[customPropertyName],
+          stepProgress
+        );
+        return [customPropertyName, customPropertyValue];
+      });
+    }
     const props = Object.fromEntries(
       import_transform.TRANSFORM_PROPS.filter((name) => (0, import_is.isDefined)(from[name]) || (0, import_is.isDefined)(to[name])).map((name) => [
         name,
@@ -109,6 +120,11 @@ function render(element, from, to, progress) {
       if (transformOrigin !== false) {
         element.style.transformOrigin = transformOrigin;
       }
+      if (customProperties !== false) {
+        customProperties.forEach((customProperty) => {
+          element.style.setProperty(customProperty[0], customProperty[1].toString());
+        });
+      }
       (0, import_transform.default)(element, props);
     });
   });
@@ -119,7 +135,8 @@ function singleAnimate(element, keyframes, options = {}) {
     (keyframe, index) => ({
       ...keyframe,
       offset: keyframe.offset ?? index / keyframesCount,
-      easing: (0, import_tween.normalizeEase)(keyframe.easing)
+      easing: (0, import_tween.normalizeEase)(keyframe.easing),
+      vars: Object.keys(keyframe).filter((key2) => key2.startsWith("--"))
     })
   );
   if (!running.has(element)) {

package/utils/css/animate.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
-  "sourcesContent": ["import { lerp, map } 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';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\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    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\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      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) => /** @type {NormalizedKeyframe} */ ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\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() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\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\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\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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",
-  "names": ["scheduler", "transform"]
+  "sourcesContent": ["import { lerp, map } 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';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n  [key: CSSCustomPropertyName]: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\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 = from.vars.map((customPropertyName) => {\n        const customPropertyValue = lerp(\n          from[customPropertyName],\n          to[customPropertyName],\n          stepProgress,\n        );\n        return [customPropertyName, customPropertyValue];\n      });\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\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        customProperties.forEach((customProperty) => {\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) => key.startsWith('--')),\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() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\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\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\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": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAC1B,gBAAgD;AAChD,uBAA2C;AAC3C,uBAA0C;AAC1C,mBAAqC;AAErC,mBAA6B;AA6B7B,IAAI,KAAK;AACT,IAAM,UAAU,oBAAI,QAAQ;AAE5B,IAAM,mBAAmB;AAAA,EACvB,KAAK,CAAC,OAAO,eAAgB,QAAQ,WAAW,IAAK;AAAA,EACrD,IAAI,CAAC,UAAW,QAAQ,OAAO,cAAe;AAAA,EAC9C,IAAI,CAAC,UAAW,QAAQ,OAAO,aAAc;AAAA,EAC7C,MAAM,CAAC,UAAW,QAAQ,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,EAC7E,MAAM,CAAC,UAAW,QAAQ,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAC/E;AAKA,SAAS,sBAAsB,KAAgC,YAAkC;AAC/F,UAAI,oBAAS,GAAG,GAAG;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,IAAI,MAAM,CAAC,iBAAiB,IAAI,KAAK;AACxC,WAAO,IAAI;AAAA,EACb;AAEA,SAAO,iBAAiB,IAAI,IAAI,IAAI,IAAI,UAAU;AACpD;AAEA,IAAM,kCAAkC,CAAC,YAAY,CAAC,SAAS,WAAW,SAAS,iBACjF;AAAA,EACE;AAAA,IACE,aAAa;AAAA,IAEb,MAAM,QAAQ;AAAA,EAChB;AAAA,EACA,sBAAsB,WAAW,GAAG,MAAM,QAAQ,QAAQ;AAAA,EAC1D;AACF;AACF,IAAM,oCAAoC,gCAAgC,aAAa;AACvF,IAAM,qCAAqC,gCAAgC,cAAc;AAEzF,IAAM,6BAA6B,CAAC,iBAAiB,CAAC,SAAS,WAAW,SAAS,iBACjF,kBAAK,aAAa,cAAc,WAAW,cAAc,QAAQ;AACnE,IAAM,sBAAsB,2BAA2B,CAAC;AACxD,IAAM,wBAAwB,2BAA2B,CAAC;AAE1D,IAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAKA,SAAS,OACP,SACA,MACA,IACA,UACA;AACA,QAAM,eAAe,GAAG,WAAO,iBAAI,UAAU,KAAK,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC;AAE1E,mBAAAA,aAAU,KAAK,MAAM;AACnB,QAAI,UAAmC;AACvC,YAAI,qBAAU,KAAK,OAAO,SAAK,qBAAU,GAAG,OAAO,GAAG;AACpD,oBAAU,iBAAI,cAAc,GAAG,GAAG,KAAK,WAAW,GAAG,GAAG,WAAW,CAAC;AAAA,IACtE,WAAW,QAAQ,MAAM,SAAS;AAChC,gBAAU;AAAA,IACZ;AAEA,QAAI,kBAAkC;AACtC,YAAI,qBAAU,GAAG,eAAe,GAAG;AACjC,wBAAkB,GAAG;AAAA,IACvB,WAAW,QAAQ,MAAM,iBAAiB;AACxC,wBAAkB;AAAA,IACpB;AAEA,QAAI,mBAA+C;AACnD,YAAI,qBAAU,KAAK,IAAI,SAAK,qBAAU,GAAG,IAAI,GAAG;AAC9C,yBAAmB,KAAK,KAAK,IAAI,CAAC,uBAAuB;AACvD,cAAM,0BAAsB;AAAA,UAC1B,KAAK;AAAA,UACL,GAAG;AAAA,UACH;AAAA,QACF;AACA,eAAO,CAAC,oBAAoB,mBAAmB;AAAA,MACjD,CAAC;AAAA,IACH;AAEA,UAAM,QAAQ,OAAO;AAAA,MACnB,iCAAgB,OAAO,CAAC,aAAS,qBAAU,KAAK,KAAK,SAAK,qBAAU,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,SAAS;AAAA,QAC3F;AAAA,QACA,0BAA0B,MAAM,SAAS,KAAK,OAAO,GAAG,OAAO,YAAY;AAAA,MAC7E,CAAC;AAAA,IACH;AACA,qBAAAA,aAAU,MAAM,MAAM;AACpB,UAAI,YAAY,OAAO;AAErB,gBAAQ,MAAM,UAAU;AAAA,MAC1B;AACA,UAAI,oBAAoB,OAAO;AAC7B,gBAAQ,MAAM,kBAAkB;AAAA,MAClC;AACA,UAAI,qBAAqB,OAAO;AAC9B,yBAAiB,QAAQ,CAAC,mBAAmB;AAC3C,kBAAQ,MAAM,YAAY,eAAe,IAAI,eAAe,GAAG,SAAS,CAAC;AAAA,QAC3E,CAAC;AAAA,MACH;AACA,2BAAAC,SAAU,SAAS,KAAK;AAAA,IAC1B,CAAC;AAAA,EACH,CAAC;AACH;AAKA,SAAS,cACP,SACA,WACA,UAAwB,CAAC,GAChB;AACT,QAAM,iBAAiB,UAAU,SAAS;AAC1C,QAAM,sBAAsB,UAAU;AAAA,IACpC,CAAC,UAAU,WAA+B;AAAA,MACxC,GAAG;AAAA,MACH,QAAQ,SAAS,UAAU,QAAQ;AAAA,MACnC,YAAQ,4BAAc,SAAS,MAAM;AAAA,MACrC,MAAM,OAAO,KAAK,QAAQ,EAAE,OAAO,CAACC,SAAQA,KAAI,WAAW,IAAI,CAAC;AAAA,IAClE;AAAA,EACF;AAEA,MAAI,CAAC,QAAQ,IAAI,OAAO,GAAG;AACzB,YAAQ,IAAI,SAAS,oBAAI,IAAI,CAAC;AAAA,EAChC;AAEA,QAAM,MAAM,WAAW;AACvB,QAAM;AAKN,WAAS,SAAS,UAAkB;AAClC,QAAI,UAAU;AACd,WACE,oBAAoB,YACpB,oBAAoB,SAAS,UAAU,YACvC,oBAAoB,SAAS,WAAW,GACxC;AACA,iBAAW;AAAA,IACb;AAEA,WAAO,SAAS,oBAAoB,UAAU,IAAI,oBAAoB,UAAU,QAAQ;AAAA,EAC1F;AAEA,QAAM,eAAW,oBAAM,UAAU;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU;AACR,cAAI,sBAAW,QAAQ,OAAO,GAAG;AAC/B,gBAAQ,QAAQ;AAAA,MAClB;AAEA,YAAM,cAAc,QAAQ,IAAI,OAAO;AACvC,kBAAY,QAAQ,CAAC,cAAc,eAAe;AAChD,qBAAa;AACb,oBAAY,OAAO,UAAU;AAAA,MAC/B,CAAC;AACD,kBAAY,IAAI,KAAK,SAAS,KAAK;AACnC,cAAQ,IAAI,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,SAAS,QACd,mBACA,WACA,UAAwB,CAAC,GAChB;AACT,QAAM,eAAW;AAAA,IAAa;AAAA,IAAmB,CAAC,YAChD,cAAc,SAAS,WAAW,OAAO;AAAA,EAC3C;AAEA,QAAM,WACJ,CAAC,QAED,IAAI,SAAS;AACX,QAAI,QAAQ,cAAc,KAAK,WAAW,GAAG;AAC3C,aAAO,SAAS,GAAG,KAAK;AAAA,IAC1B;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,cAAQ,KAAK,GAAG,IAAI;AAAA,IACtB,CAAC;AAAA,EACH;AAEF,SAAO;AAAA,IACL,OAAO,SAAS,OAAO;AAAA,IACvB,OAAO,SAAS,OAAO;AAAA,IACvB,QAAQ,SAAS,QAAQ;AAAA,IACzB,MAAM,SAAS,MAAM;AAAA,IACrB,UAAU,SAAS,UAAU;AAAA,EAC/B;AACF;",
+  "names": ["scheduler", "transform", "key"]
 }

package/utils/css/animate.d.ts

@@ -1,17 +1,20 @@
 import type { TransformProps } from './transform.js';
 import type { EasingFunction } from '../math/index.js';
 import type { BezierCurve, TweenOptions } from '../tween.js';
-export declare type Keyframe = TransformProps & {
+export type CSSCustomPropertyName = `--${string}`;
+export type Keyframe = TransformProps & {
     opacity?: number;
     transformOrigin?: string;
     easing?: EasingFunction | BezierCurve;
     offset?: number;
+    [key: CSSCustomPropertyName]: number;
 };
-export declare type NormalizedKeyframe = Keyframe & {
+export type NormalizedKeyframe = Keyframe & {
     easing: EasingFunction;
     offset: number;
+    vars: string[];
 };
-export declare type Animate = {
+export type Animate = {
     start: () => void;
     pause: () => void;
     play: () => void;

package/utils/css/animate.js

@@ -66,6 +66,17 @@ function render(element, from, to, progress) {
     } else if (element.style.transformOrigin) {
       transformOrigin = "";
     }
+    let customProperties = false;
+    if (isDefined(from.vars) && isDefined(to.vars)) {
+      customProperties = from.vars.map((customPropertyName) => {
+        const customPropertyValue = lerp(
+          from[customPropertyName],
+          to[customPropertyName],
+          stepProgress
+        );
+        return [customPropertyName, customPropertyValue];
+      });
+    }
     const props = Object.fromEntries(
       TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [
         name,
@@ -79,6 +90,11 @@ function render(element, from, to, progress) {
       if (transformOrigin !== false) {
         element.style.transformOrigin = transformOrigin;
       }
+      if (customProperties !== false) {
+        customProperties.forEach((customProperty) => {
+          element.style.setProperty(customProperty[0], customProperty[1].toString());
+        });
+      }
       transform(element, props);
     });
   });
@@ -89,7 +105,8 @@ function singleAnimate(element, keyframes, options = {}) {
     (keyframe, index) => ({
       ...keyframe,
       offset: keyframe.offset ?? index / keyframesCount,
-      easing: normalizeEase(keyframe.easing)
+      easing: normalizeEase(keyframe.easing),
+      vars: Object.keys(keyframe).filter((key2) => key2.startsWith("--"))
     })
   );
   if (!running.has(element)) {

package/utils/css/animate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
-  "sourcesContent": ["import { lerp, map } 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';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\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    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\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      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) => /** @type {NormalizedKeyframe} */ ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\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() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\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\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\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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",
-  "names": []
+  "sourcesContent": ["import { lerp, map } 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';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n  [key: CSSCustomPropertyName]: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\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 = from.vars.map((customPropertyName) => {\n        const customPropertyValue = lerp(\n          from[customPropertyName],\n          to[customPropertyName],\n          stepProgress,\n        );\n        return [customPropertyName, customPropertyValue];\n      });\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\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        customProperties.forEach((customProperty) => {\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) => key.startsWith('--')),\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() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\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\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\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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",
+  "names": ["key"]
 }

package/utils/css/getOffsetSizes.cjs

@@ -32,7 +32,7 @@ function getOffsetSizes(element) {
     parent = parent.offsetParent;
   }
   const width = element.offsetWidth;
-  const height = element.offsetWidth;
+  const height = element.offsetHeight;
   return {
     x,
     y,

package/utils/css/getOffsetSizes.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGe,SAAR,eAAgC,SAAsB;AAC3D,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/utils/css/getOffsetSizes.js

@@ -8,7 +8,7 @@ function getOffsetSizes(element) {
     parent = parent.offsetParent;
   }
   const width = element.offsetWidth;
-  const height = element.offsetWidth;
+  const height = element.offsetHeight;
   return {
     x,
     y,

package/utils/css/getOffsetSizes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
   "mappings": "AAGe,SAAR,eAAgC,SAAsB;AAC3D,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/utils/css/matrix.d.ts

@@ -1,4 +1,4 @@
-declare type MatrixTransform = {
+type MatrixTransform = {
     scaleX?: number;
     scaleY?: number;
     skewX?: number;

package/utils/css/transform.d.ts

@@ -1,4 +1,4 @@
-export declare type TransformProps = Partial<{
+export type TransformProps = Partial<{
     x: number;
     y: number;
     z: number;

package/utils/css/transition.d.ts

@@ -1,5 +1,5 @@
-export declare type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
-export declare type TransitionStyles = {
+export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
+export type TransitionStyles = {
     from?: ClassesOrStyles;
     active?: ClassesOrStyles;
     to?: ClassesOrStyles;

package/utils/dom/ancestors.cjs

@@ -0,0 +1,37 @@
+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);
+
+// packages/js-toolkit/utils/dom/ancestors.ts
+var ancestors_exports = {};
+__export(ancestors_exports, {
+  getAncestorWhere: () => getAncestorWhere,
+  getAncestorWhereUntil: () => getAncestorWhereUntil
+});
+module.exports = __toCommonJS(ancestors_exports);
+function getAncestorWhere(element, condition) {
+  if (!element) {
+    return null;
+  }
+  const ancestor = element.parentElement;
+  return condition(ancestor) ? ancestor : getAncestorWhere(ancestor, condition);
+}
+function getAncestorWhereUntil(element, condition, until) {
+  return getAncestorWhere(element, (el) => condition(el) || until(el));
+}
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=ancestors.cjs.map