@studiometa/js-toolkit 3.9.0 → 4.0.0-alpha.1

package/dist/test/index.js

@@ -0,0 +1,249 @@
+import { defaultScheduler, nextFrame } from "../scheduler.js";
+import { EVENTS } from "../events.js";
+import { resetRegistry } from "../registry.js";
+//#region src/test/index.ts
+/**
+* Wait until every pending mount and every scheduled write has landed.
+*
+* The numbers are not arbitrary and are not guessable from the outside. A
+* component mounts from a `MutationObserver` callback, which the browser
+* delivers on its own schedule rather than on the microtask that appended the
+* element; the work the component then queues is drained by the scheduler in
+* lane order, and a lane may queue into the next one. So neither half is
+* enough alone: a bare `whenIdle()` can resolve before the observer has even
+* reported the element, and a bare timer can return between two lanes. Five
+* rounds of "let the event loop turn, then drain the scheduler" cover a mount
+* that cascades into children, injections and DOM writes.
+*
+* This is the right tool for "the component is up and its writes are done". It
+* is the wrong tool for a transition's end state — see {@link waitFor}.
+*/
+async function settle() {
+	for (let i = 0; i < 5; i += 1) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+		await defaultScheduler.whenIdle();
+	}
+}
+/**
+* Await a number of animation frames.
+*
+* Use it when the assertion is about frame-driven work — a `useRaf` service, a
+* `scheduler.tick()` subscriber, a transition staged one frame at a time — and
+* the number of frames is part of what is being asserted. When the number is
+* merely a guess, poll with {@link waitFor} instead.
+*/
+async function frames(count = 3) {
+	for (let i = 0; i < count; i += 1) await nextFrame();
+}
+/**
+* Count the animation frames requested while `during` runs.
+*
+* **This patches a global.** For the duration of the callback,
+* `globalThis.requestAnimationFrame` is replaced by a wrapper that increments
+* a counter and forwards to the original, and the original is put back in a
+* `finally` — so it is restored whether `during` returns or throws. Nothing
+* else observes the swap, because the wrapper calls through and returns the
+* real handle, but two overlapping calls would nest their wrappers, so do not
+* run them concurrently.
+*
+* The assertion it serves is "this did not schedule a frame per event", which
+* a spy cannot answer: the framework's own scheduler owns the calls, so there
+* is no seam of the component's to spy on. Assert the count, not the timing —
+* {@link frames} is for the timing.
+*/
+async function countRequestedFrames(during) {
+	const original = globalThis.requestAnimationFrame;
+	let requested = 0;
+	globalThis.requestAnimationFrame = (callback) => {
+		requested += 1;
+		return original.call(globalThis, callback);
+	};
+	try {
+		await during();
+	} finally {
+		globalThis.requestAnimationFrame = original;
+	}
+	return requested;
+}
+/**
+* Render markup into a wrapper `div`, append it to the document and wait for
+* the components inside it to be mounted and settled.
+*
+* The returned element is the wrapper, never the markup's own root: it is a
+* stable handle for `querySelector()` calls and it keeps a fragment of several
+* siblings working. Reach for `.firstElementChild` when the component's own
+* element is what the test needs.
+*
+* ```ts
+* const root = await mount('<div data-component="Counter"></div>');
+* const [counter] = getInstances<Counter>('Counter', root);
+* ```
+*/
+async function mount(html) {
+	const root = document.createElement("div");
+	root.innerHTML = html;
+	document.body.append(root);
+	await settle();
+	return root;
+}
+/**
+* Poll a predicate until it returns something truthy, and return that value.
+*
+* It composes as both a guard and a query, because the value comes back:
+*
+* ```ts
+* await waitFor(() => button.classList.contains('is-open'));
+* const panel = await waitFor(() => root.querySelector('.panel'));
+* ```
+*
+* Any falsy result — `false`, `null`, `undefined`, and also `0` or `''` —
+* counts as "not yet". Between two attempts the helper both lets a 10ms timer
+* elapse and drains the scheduler, so it advances the framework's own work
+* instead of spinning on timers alone. On timeout it throws, with `message` if
+* one was given.
+*
+* **This is how a transition's end state is asserted.** `open()`, `close()`
+* and the `$watchChildren` callbacks *start* a transition and do not hand it
+* back, and a kept end state only lands after `nextFrame()`, the `from` and
+* `active` states, and either a `transitionend` or one more frame. A single
+* {@link settle} is generous, not deterministic: it passes on a spec run
+* alone and fails under full-suite load. So assert such a state by polling for
+* it here, or by awaiting `enter()`/`leave()` where the component returns the
+* promise.
+*
+* **The rule is asymmetric, and the asymmetry is the point.** Never poll for
+* an *absence*: `leaveTransition()` clears the other direction's `to` class
+* synchronously, before its first await, so "the class is gone" is already
+* true when nothing has happened yet and the poll passes for the wrong
+* reason. Assert a removal directly, after the awaited call that causes it.
+*/
+async function waitFor(predicate, { timeout = 1e3, message } = {}) {
+	const deadline = Date.now() + timeout;
+	for (;;) {
+		const value = predicate();
+		if (value) return value;
+		if (Date.now() > deadline) throw new Error(message ?? `waitFor: the predicate never returned a truthy value within ${timeout}ms.`);
+		await new Promise((resolve) => setTimeout(resolve, 10));
+		await defaultScheduler.whenIdle();
+	}
+}
+/**
+* Collect the diagnostics reported while a test runs, and keep them off the
+* console.
+*
+* **Assert on this, not on the console.** A recovered failure is reported on a
+* cancelable event, and writing to the console is only that event's default
+* behaviour — one sink among the several a consumer may install. A test that
+* spies on `console.warn` asserts on the sink: it passes for a diagnostic
+* carrying the wrong code, it cannot see the component or the severity, and it
+* breaks when the sink's wording changes. This helper reads the channel
+* instead, so `codes` is what the framework actually reported.
+*
+* Silencing is not a separate step. Each event is cancelled as it arrives,
+* which is exactly what suppresses the default sink, so the console stays
+* clean for as long as the capture is open and no spy is needed:
+*
+* ```ts
+* const log = captureDiagnostics();
+* registerComponent(Duplicate);
+* expect(log.codes).toContain('registry.conflict');
+* log.stop();
+* ```
+*
+* `target` defaults to `document`, which sees everything: a diagnostic is
+* dispatched on the element it concerns when there is one, and it bubbles.
+* Pass an element to scope the capture to one subtree — but a diagnostic
+* reported about a detached element is dispatched on `document` instead, so a
+* scoped capture will not see it.
+*
+* `entries` carries the whole detail — `severity`, `code`, `message`, the
+* `component` name when one reported it, and `error` on an error-severity
+* entry — for the cases where the code alone is not the assertion.
+*/
+function captureDiagnostics(target = document) {
+	const codes = [];
+	const entries = [];
+	const listener = (event) => {
+		const { detail } = event;
+		codes.push(detail.code);
+		entries.push(detail);
+		event.preventDefault();
+	};
+	target.addEventListener(EVENTS.diagnostic, listener);
+	return {
+		codes,
+		entries,
+		stop() {
+			target.removeEventListener(EVENTS.diagnostic, listener);
+		}
+	};
+}
+/**
+* Record the named events reaching a target, with the payload each carried.
+*
+* The order and the payloads are the assertion a component's contract is made
+* of — that `open` came before `opened`, and that the second one carried the
+* height it measured — and neither survives a spy that only counts calls:
+*
+* ```ts
+* const log = recordEvents(root, 'open', 'opened');
+* await instance.open();
+* expect(log.events).toEqual([
+*   { type: 'open', detail: null },
+*   { type: 'opened', detail: { height: 120 } },
+* ]);
+* log.stop();
+* ```
+*
+* Recording types rather than one type keeps a sequence spanning several names
+* in one array, which is the only place their relative order is visible. A
+* caller that wants the names alone maps over the result; the reverse is not
+* possible, so the richer shape is the one that ships.
+*
+* `$emit` itself dispatches synchronously, but almost nothing calls it
+* synchronously: the emit follows a mount, a scheduled write or a transition,
+* and the call that started that chain has already returned. So **wait for the
+* count rather than reading it**, with {@link waitFor}:
+*
+* ```ts
+* const log = recordEvents(root, 'ping');
+* instance.start();
+* await waitFor(() => log.events.length === 2);
+* ```
+*
+* Because component events bubble, the target is usually the wrapper
+* {@link mount} returned rather than the component's own element — which is
+* also how a test sees the events of a child it never looked up.
+*/
+function recordEvents(target, ...types) {
+	const events = [];
+	const listener = (event) => {
+		events.push({
+			type: event.type,
+			detail: event.detail
+		});
+	};
+	for (const type of types) target.addEventListener(type, listener);
+	return {
+		events,
+		stop() {
+			for (const type of types) target.removeEventListener(type, listener);
+		}
+	};
+}
+/**
+* Empty the document body and wait for the unmounts to land.
+*
+* Removing an element is observed like adding one, so the teardown a component
+* registered runs after the same delivery latency. Call it from an `afterEach`
+* hook: a component left mounted keeps its service subscriptions and leaks
+* into the next test.
+*/
+async function resetDom() {
+	document.body.innerHTML = "";
+	await settle();
+}
+//#endregion
+export { captureDiagnostics, countRequestedFrames, frames, mount, recordEvents, resetDom, resetRegistry, settle, waitFor };
+
+//# sourceMappingURL=index.js.map

package/dist/test/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/test/index.ts"],"sourcesContent":["/**\n * Test helpers for components built on `@studiometa/js-toolkit`.\n *\n * Published as `@studiometa/js-toolkit/test`, and deliberately free of any\n * test framework: nothing here imports a runner, an assertion library or a\n * spy. The module reads the DOM, the framework's own scheduler and the\n * framework's own channels, so the same helpers work under Vitest, under\n * Playwright and on a plain browser page.\n *\n * The first question every test of a component asks is one no consumer can\n * derive: *has this component mounted, and has it finished its writes?*\n * Mounting is observer-driven and writes are scheduled in lanes, so the answer\n * is a specific interleaving of timers and scheduler idles rather than a single\n * `await`. {@link settle} is that interleaving, and {@link mount},\n * {@link waitFor} and {@link resetDom} are built on it.\n *\n * The rest answer the questions whose right answer is not the obvious one.\n * {@link captureDiagnostics} reads the diagnostic channel instead of the\n * console sink it happens to write to; {@link recordEvents} keeps the order and\n * the payloads a call-counting spy throws away;\n * {@link countRequestedFrames} counts the frames the framework's own scheduler\n * requested, which no seam of the component's exposes; and `resetRegistry()`\n * undoes a registration the framework has no other way to undo.\n */\n\nimport { type ToolkitDiagnosticDetail } from '../diagnostic-contract.js';\nimport { EVENTS } from '../events.js';\nimport { defaultScheduler, nextFrame } from '../scheduler.js';\n\n// `resetRegistry()` lives next to the state it clears, which is module-private\n// to the registry. It is re-exported here because a test suite is its only\n// caller — see the doc comment there for where the call belongs.\nexport { resetRegistry } from '../registry.js';\n\n/** Options for {@link waitFor}. */\nexport interface WaitForOptions {\n  /** How long to poll before throwing, in milliseconds. Defaults to `1000`. */\n  timeout?: number;\n  /** The error message thrown on timeout. Replaces the default entirely. */\n  message?: string;\n}\n\n/**\n * Wait until every pending mount and every scheduled write has landed.\n *\n * The numbers are not arbitrary and are not guessable from the outside. A\n * component mounts from a `MutationObserver` callback, which the browser\n * delivers on its own schedule rather than on the microtask that appended the\n * element; the work the component then queues is drained by the scheduler in\n * lane order, and a lane may queue into the next one. So neither half is\n * enough alone: a bare `whenIdle()` can resolve before the observer has even\n * reported the element, and a bare timer can return between two lanes. Five\n * rounds of \"let the event loop turn, then drain the scheduler\" cover a mount\n * that cascades into children, injections and DOM writes.\n *\n * This is the right tool for \"the component is up and its writes are done\". It\n * is the wrong tool for a transition's end state — see {@link waitFor}.\n */\nexport async function settle(): Promise<void> {\n  for (let i = 0; i < 5; i += 1) {\n    await new Promise((resolve) => setTimeout(resolve, 10));\n    await defaultScheduler.whenIdle();\n  }\n}\n\n/**\n * Await a number of animation frames.\n *\n * Use it when the assertion is about frame-driven work — a `useRaf` service, a\n * `scheduler.tick()` subscriber, a transition staged one frame at a time — and\n * the number of frames is part of what is being asserted. When the number is\n * merely a guess, poll with {@link waitFor} instead.\n */\nexport async function frames(count = 3): Promise<void> {\n  for (let i = 0; i < count; i += 1) {\n    await nextFrame();\n  }\n}\n\n/**\n * Count the animation frames requested while `during` runs.\n *\n * **This patches a global.** For the duration of the callback,\n * `globalThis.requestAnimationFrame` is replaced by a wrapper that increments\n * a counter and forwards to the original, and the original is put back in a\n * `finally` — so it is restored whether `during` returns or throws. Nothing\n * else observes the swap, because the wrapper calls through and returns the\n * real handle, but two overlapping calls would nest their wrappers, so do not\n * run them concurrently.\n *\n * The assertion it serves is \"this did not schedule a frame per event\", which\n * a spy cannot answer: the framework's own scheduler owns the calls, so there\n * is no seam of the component's to spy on. Assert the count, not the timing —\n * {@link frames} is for the timing.\n */\nexport async function countRequestedFrames(during: () => Promise<void> | void): Promise<number> {\n  const original = globalThis.requestAnimationFrame;\n  let requested = 0;\n  globalThis.requestAnimationFrame = (callback: FrameRequestCallback) => {\n    requested += 1;\n    return original.call(globalThis, callback);\n  };\n  try {\n    await during();\n  } finally {\n    globalThis.requestAnimationFrame = original;\n  }\n  return requested;\n}\n\n/**\n * Render markup into a wrapper `div`, append it to the document and wait for\n * the components inside it to be mounted and settled.\n *\n * The returned element is the wrapper, never the markup's own root: it is a\n * stable handle for `querySelector()` calls and it keeps a fragment of several\n * siblings working. Reach for `.firstElementChild` when the component's own\n * element is what the test needs.\n *\n * ```ts\n * const root = await mount('<div data-component=\"Counter\"></div>');\n * const [counter] = getInstances<Counter>('Counter', root);\n * ```\n */\nexport async function mount(html: string): Promise<HTMLElement> {\n  const root = document.createElement('div');\n  root.innerHTML = html;\n  document.body.append(root);\n  await settle();\n  return root;\n}\n\n/**\n * Poll a predicate until it returns something truthy, and return that value.\n *\n * It composes as both a guard and a query, because the value comes back:\n *\n * ```ts\n * await waitFor(() => button.classList.contains('is-open'));\n * const panel = await waitFor(() => root.querySelector('.panel'));\n * ```\n *\n * Any falsy result — `false`, `null`, `undefined`, and also `0` or `''` —\n * counts as \"not yet\". Between two attempts the helper both lets a 10ms timer\n * elapse and drains the scheduler, so it advances the framework's own work\n * instead of spinning on timers alone. On timeout it throws, with `message` if\n * one was given.\n *\n * **This is how a transition's end state is asserted.** `open()`, `close()`\n * and the `$watchChildren` callbacks *start* a transition and do not hand it\n * back, and a kept end state only lands after `nextFrame()`, the `from` and\n * `active` states, and either a `transitionend` or one more frame. A single\n * {@link settle} is generous, not deterministic: it passes on a spec run\n * alone and fails under full-suite load. So assert such a state by polling for\n * it here, or by awaiting `enter()`/`leave()` where the component returns the\n * promise.\n *\n * **The rule is asymmetric, and the asymmetry is the point.** Never poll for\n * an *absence*: `leaveTransition()` clears the other direction's `to` class\n * synchronously, before its first await, so \"the class is gone\" is already\n * true when nothing has happened yet and the poll passes for the wrong\n * reason. Assert a removal directly, after the awaited call that causes it.\n */\nexport async function waitFor<T>(\n  predicate: () => T | false | null | undefined,\n  { timeout = 1000, message }: WaitForOptions = {},\n): Promise<T> {\n  const deadline = Date.now() + timeout;\n\n  for (;;) {\n    const value = predicate();\n    if (value) {\n      return value;\n    }\n    if (Date.now() > deadline) {\n      throw new Error(\n        message ?? `waitFor: the predicate never returned a truthy value within ${timeout}ms.`,\n      );\n    }\n    await new Promise((resolve) => setTimeout(resolve, 10));\n    await defaultScheduler.whenIdle();\n  }\n}\n\n/** What {@link captureDiagnostics} hands back. */\nexport interface DiagnosticCapture {\n  /** The `code` of every diagnostic seen, in order. */\n  codes: string[];\n  /** The full detail of every diagnostic seen, in the same order. */\n  entries: ToolkitDiagnosticDetail[];\n  /** Detach the listener and let the default sink run again. */\n  stop(): void;\n}\n\n/**\n * Collect the diagnostics reported while a test runs, and keep them off the\n * console.\n *\n * **Assert on this, not on the console.** A recovered failure is reported on a\n * cancelable event, and writing to the console is only that event's default\n * behaviour — one sink among the several a consumer may install. A test that\n * spies on `console.warn` asserts on the sink: it passes for a diagnostic\n * carrying the wrong code, it cannot see the component or the severity, and it\n * breaks when the sink's wording changes. This helper reads the channel\n * instead, so `codes` is what the framework actually reported.\n *\n * Silencing is not a separate step. Each event is cancelled as it arrives,\n * which is exactly what suppresses the default sink, so the console stays\n * clean for as long as the capture is open and no spy is needed:\n *\n * ```ts\n * const log = captureDiagnostics();\n * registerComponent(Duplicate);\n * expect(log.codes).toContain('registry.conflict');\n * log.stop();\n * ```\n *\n * `target` defaults to `document`, which sees everything: a diagnostic is\n * dispatched on the element it concerns when there is one, and it bubbles.\n * Pass an element to scope the capture to one subtree — but a diagnostic\n * reported about a detached element is dispatched on `document` instead, so a\n * scoped capture will not see it.\n *\n * `entries` carries the whole detail — `severity`, `code`, `message`, the\n * `component` name when one reported it, and `error` on an error-severity\n * entry — for the cases where the code alone is not the assertion.\n */\nexport function captureDiagnostics(target: EventTarget = document): DiagnosticCapture {\n  const codes: string[] = [];\n  const entries: ToolkitDiagnosticDetail[] = [];\n  const listener = (event: Event) => {\n    const { detail } = event as CustomEvent<ToolkitDiagnosticDetail>;\n    codes.push(detail.code);\n    entries.push(detail);\n    // Cancelling is what suppresses the default console sink.\n    event.preventDefault();\n  };\n\n  target.addEventListener(EVENTS.diagnostic, listener);\n\n  return {\n    codes,\n    entries,\n    stop() {\n      target.removeEventListener(EVENTS.diagnostic, listener);\n    },\n  };\n}\n\n/** One event {@link recordEvents} saw. */\nexport interface RecordedEvent {\n  type: string;\n  /** The `detail` of a `CustomEvent`; `undefined` for a platform event. */\n  detail: unknown;\n}\n\n/** What {@link recordEvents} hands back. */\nexport interface EventRecording {\n  /** Every matching event seen, in delivery order. */\n  events: RecordedEvent[];\n  /** Detach every listener. */\n  stop(): void;\n}\n\n/**\n * Record the named events reaching a target, with the payload each carried.\n *\n * The order and the payloads are the assertion a component's contract is made\n * of — that `open` came before `opened`, and that the second one carried the\n * height it measured — and neither survives a spy that only counts calls:\n *\n * ```ts\n * const log = recordEvents(root, 'open', 'opened');\n * await instance.open();\n * expect(log.events).toEqual([\n *   { type: 'open', detail: null },\n *   { type: 'opened', detail: { height: 120 } },\n * ]);\n * log.stop();\n * ```\n *\n * Recording types rather than one type keeps a sequence spanning several names\n * in one array, which is the only place their relative order is visible. A\n * caller that wants the names alone maps over the result; the reverse is not\n * possible, so the richer shape is the one that ships.\n *\n * `$emit` itself dispatches synchronously, but almost nothing calls it\n * synchronously: the emit follows a mount, a scheduled write or a transition,\n * and the call that started that chain has already returned. So **wait for the\n * count rather than reading it**, with {@link waitFor}:\n *\n * ```ts\n * const log = recordEvents(root, 'ping');\n * instance.start();\n * await waitFor(() => log.events.length === 2);\n * ```\n *\n * Because component events bubble, the target is usually the wrapper\n * {@link mount} returned rather than the component's own element — which is\n * also how a test sees the events of a child it never looked up.\n */\nexport function recordEvents(target: EventTarget, ...types: string[]): EventRecording {\n  const events: RecordedEvent[] = [];\n  const listener = (event: Event) => {\n    events.push({ type: event.type, detail: (event as CustomEvent<unknown>).detail });\n  };\n\n  for (const type of types) {\n    target.addEventListener(type, listener);\n  }\n\n  return {\n    events,\n    stop() {\n      for (const type of types) {\n        target.removeEventListener(type, listener);\n      }\n    },\n  };\n}\n\n/**\n * Empty the document body and wait for the unmounts to land.\n *\n * Removing an element is observed like adding one, so the teardown a component\n * registered runs after the same delivery latency. Call it from an `afterEach`\n * hook: a component left mounted keeps its service subscriptions and leaks\n * into the next test.\n */\nexport async function resetDom(): Promise<void> {\n  document.body.innerHTML = '';\n  await settle();\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,eAAsB,SAAwB;CAC5C,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG;EAC7B,MAAM,IAAI,SAAS,YAAY,WAAW,SAAS,EAAE,CAAC;EACtD,MAAM,iBAAiB,SAAS;CAClC;AACF;;;;;;;;;AAUA,eAAsB,OAAO,QAAQ,GAAkB;CACrD,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK,GAC9B,MAAM,UAAU;AAEpB;;;;;;;;;;;;;;;;;AAkBA,eAAsB,qBAAqB,QAAqD;CAC9F,MAAM,WAAW,WAAW;CAC5B,IAAI,YAAY;CAChB,WAAW,yBAAyB,aAAmC;EACrE,aAAa;EACb,OAAO,SAAS,KAAK,YAAY,QAAQ;CAC3C;CACA,IAAI;EACF,MAAM,OAAO;CACf,UAAU;EACR,WAAW,wBAAwB;CACrC;CACA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,eAAsB,MAAM,MAAoC;CAC9D,MAAM,OAAO,SAAS,cAAc,KAAK;CACzC,KAAK,YAAY;CACjB,SAAS,KAAK,OAAO,IAAI;CACzB,MAAM,OAAO;CACb,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,eAAsB,QACpB,WACA,EAAE,UAAU,KAAM,YAA4B,CAAC,GACnC;CACZ,MAAM,WAAW,KAAK,IAAI,IAAI;CAE9B,SAAS;EACP,MAAM,QAAQ,UAAU;EACxB,IAAI,OACF,OAAO;EAET,IAAI,KAAK,IAAI,IAAI,UACf,MAAM,IAAI,MACR,WAAW,+DAA+D,QAAQ,IACpF;EAEF,MAAM,IAAI,SAAS,YAAY,WAAW,SAAS,EAAE,CAAC;EACtD,MAAM,iBAAiB,SAAS;CAClC;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,mBAAmB,SAAsB,UAA6B;CACpF,MAAM,QAAkB,CAAC;CACzB,MAAM,UAAqC,CAAC;CAC5C,MAAM,YAAY,UAAiB;EACjC,MAAM,EAAE,WAAW;EACnB,MAAM,KAAK,OAAO,IAAI;EACtB,QAAQ,KAAK,MAAM;EAEnB,MAAM,eAAe;CACvB;CAEA,OAAO,iBAAiB,OAAO,YAAY,QAAQ;CAEnD,OAAO;EACL;EACA;EACA,OAAO;GACL,OAAO,oBAAoB,OAAO,YAAY,QAAQ;EACxD;CACF;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,aAAa,QAAqB,GAAG,OAAiC;CACpF,MAAM,SAA0B,CAAC;CACjC,MAAM,YAAY,UAAiB;EACjC,OAAO,KAAK;GAAE,MAAM,MAAM;GAAM,QAAS,MAA+B;EAAO,CAAC;CAClF;CAEA,KAAK,MAAM,QAAQ,OACjB,OAAO,iBAAiB,MAAM,QAAQ;CAGxC,OAAO;EACL;EACA,OAAO;GACL,KAAK,MAAM,QAAQ,OACjB,OAAO,oBAAoB,MAAM,QAAQ;EAE7C;CACF;AACF;;;;;;;;;AAUA,eAAsB,WAA0B;CAC9C,SAAS,KAAK,YAAY;CAC1B,MAAM,OAAO;AACf"}

package/dist/utils/deepmerge.d.ts

@@ -0,0 +1,31 @@
+//#region src/utils/deepmerge.d.ts
+/**
+ * Merge plain objects, source over target.
+ *
+ * **Arrays replace, they do not concatenate** — npm's `deepmerge` concatenates
+ * and `lodash.merge` merges by index, so the behaviour is stated here rather
+ * than left to a shared name. Replacing is what a layered payload wants: a
+ * child declaring `items` means those items, not the ancestor's plus its own.
+ *
+ * Anything which is not a plain object or an array — a `Date`, a `Map`, a
+ * class instance, a scalar — is a value, so it passes through whole and is
+ * shared rather than copied. Symbol keys are dropped, and a cyclic input
+ * throws: this merges data, and data comes from JSON.
+ */
+/**
+ * Merge every layer left to right, the rightmost winning.
+ *
+ * No input is mutated, and the result shares no plain object or array with any
+ * of them. One layer is therefore a deep copy of it, and no layer is `{}`.
+ * Spread a list built at runtime: `deepmerge(...layers)`.
+ *
+ * @example
+ * ```js
+ * deepmerge({ ecommerce: { currency: 'EUR' } }, { ecommerce: { items: [1] } });
+ * // { ecommerce: { currency: 'EUR', items: [1] } }
+ * ```
+ * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#deepmerge
+ */
+declare function deepmerge(...layers: Record<string, unknown>[]): Record<string, unknown>;
+//#endregion
+export { deepmerge };

package/dist/utils/deepmerge.js

@@ -0,0 +1,76 @@
+//#region src/utils/deepmerge.ts
+/**
+* Merge plain objects, source over target.
+*
+* **Arrays replace, they do not concatenate** — npm's `deepmerge` concatenates
+* and `lodash.merge` merges by index, so the behaviour is stated here rather
+* than left to a shared name. Replacing is what a layered payload wants: a
+* child declaring `items` means those items, not the ancestor's plus its own.
+*
+* Anything which is not a plain object or an array — a `Date`, a `Map`, a
+* class instance, a scalar — is a value, so it passes through whole and is
+* shared rather than copied. Symbol keys are dropped, and a cyclic input
+* throws: this merges data, and data comes from JSON.
+*/
+/** Keys which write the prototype chain instead of the object. */
+const UNSAFE = /* @__PURE__ */ new Set([
+	"__proto__",
+	"constructor",
+	"prototype"
+]);
+/**
+* Whether enumerable keys can safely rebuild the value.
+*
+* Read through the prototype, not `value.constructor`: an object parsed from
+* page JSON can carry its own `constructor` key, and `Object.create(null)` has
+* none at all.
+*/
+function isPlain(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+/** Copy arrays and plain objects; return everything else unchanged. */
+function clone(value) {
+	if (Array.isArray(value)) return value.map((item) => clone(item));
+	if (!isPlain(value)) return value;
+	const out = {};
+	for (const [key, item] of Object.entries(value)) if (!UNSAFE.has(key)) out[key] = clone(item);
+	return out;
+}
+/**
+* Merge one source over one target.
+*
+* The recursion stays on this binary function: routing it back through the
+* variadic entry point would allocate an arguments array and run a `reduce`
+* for every nested key, which measured 37 % slower on a three-layer payload.
+*/
+function merge(target, source) {
+	const out = clone(target);
+	for (const [key, value] of Object.entries(source)) {
+		if (UNSAFE.has(key)) continue;
+		out[key] = isPlain(out[key]) && isPlain(value) ? merge(out[key], value) : clone(value);
+	}
+	return out;
+}
+/**
+* Merge every layer left to right, the rightmost winning.
+*
+* No input is mutated, and the result shares no plain object or array with any
+* of them. One layer is therefore a deep copy of it, and no layer is `{}`.
+* Spread a list built at runtime: `deepmerge(...layers)`.
+*
+* @example
+* ```js
+* deepmerge({ ecommerce: { currency: 'EUR' } }, { ecommerce: { items: [1] } });
+* // { ecommerce: { currency: 'EUR', items: [1] } }
+* ```
+* @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#deepmerge
+*/
+function deepmerge(...layers) {
+	return layers.reduce(merge, {});
+}
+//#endregion
+export { deepmerge };
+
+//# sourceMappingURL=deepmerge.js.map

package/dist/utils/deepmerge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deepmerge.js","names":[],"sources":["../../src/utils/deepmerge.ts"],"sourcesContent":["/**\n * Merge plain objects, source over target.\n *\n * **Arrays replace, they do not concatenate** — npm's `deepmerge` concatenates\n * and `lodash.merge` merges by index, so the behaviour is stated here rather\n * than left to a shared name. Replacing is what a layered payload wants: a\n * child declaring `items` means those items, not the ancestor's plus its own.\n *\n * Anything which is not a plain object or an array — a `Date`, a `Map`, a\n * class instance, a scalar — is a value, so it passes through whole and is\n * shared rather than copied. Symbol keys are dropped, and a cyclic input\n * throws: this merges data, and data comes from JSON.\n */\n\n/** Keys which write the prototype chain instead of the object. */\nconst UNSAFE = new Set(['__proto__', 'constructor', 'prototype']);\n\n/**\n * Whether enumerable keys can safely rebuild the value.\n *\n * Read through the prototype, not `value.constructor`: an object parsed from\n * page JSON can carry its own `constructor` key, and `Object.create(null)` has\n * none at all.\n */\nfunction isPlain(value: unknown): value is Record<string, unknown> {\n  if (typeof value !== 'object' || value === null || Array.isArray(value)) {\n    return false;\n  }\n  const prototype = Object.getPrototypeOf(value) as object | null;\n  return prototype === Object.prototype || prototype === null;\n}\n\n/** Copy arrays and plain objects; return everything else unchanged. */\nfunction clone<T>(value: T): T {\n  if (Array.isArray(value)) {\n    return value.map((item: unknown) => clone(item)) as T;\n  }\n  if (!isPlain(value)) {\n    return value;\n  }\n  const out: Record<string, unknown> = {};\n  for (const [key, item] of Object.entries(value)) {\n    if (!UNSAFE.has(key)) {\n      out[key] = clone(item);\n    }\n  }\n  return out as T;\n}\n\n/**\n * Merge one source over one target.\n *\n * The recursion stays on this binary function: routing it back through the\n * variadic entry point would allocate an arguments array and run a `reduce`\n * for every nested key, which measured 37 % slower on a three-layer payload.\n */\nfunction merge(\n  target: Record<string, unknown>,\n  source: Record<string, unknown>,\n): Record<string, unknown> {\n  const out = clone(target);\n\n  for (const [key, value] of Object.entries(source)) {\n    // Checked here and in `clone()`: a payload reaches these keys either way.\n    if (UNSAFE.has(key)) {\n      continue;\n    }\n    out[key] = isPlain(out[key]) && isPlain(value) ? merge(out[key], value) : clone(value);\n  }\n\n  return out;\n}\n\n/**\n * Merge every layer left to right, the rightmost winning.\n *\n * No input is mutated, and the result shares no plain object or array with any\n * of them. One layer is therefore a deep copy of it, and no layer is `{}`.\n * Spread a list built at runtime: `deepmerge(...layers)`.\n *\n * @example\n * ```js\n * deepmerge({ ecommerce: { currency: 'EUR' } }, { ecommerce: { items: [1] } });\n * // { ecommerce: { currency: 'EUR', items: [1] } }\n * ```\n * @link https://js-toolkit-v4.studiometa.dev/utils/objects.html#deepmerge\n */\nexport function deepmerge(...layers: Record<string, unknown>[]): Record<string, unknown> {\n  return layers.reduce<Record<string, unknown>>(merge, {});\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,yBAAS,IAAI,IAAI;CAAC;CAAa;CAAe;AAAW,CAAC;;;;;;;;AAShE,SAAS,QAAQ,OAAkD;CACjE,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;CAET,MAAM,YAAY,OAAO,eAAe,KAAK;CAC7C,OAAO,cAAc,OAAO,aAAa,cAAc;AACzD;;AAGA,SAAS,MAAS,OAAa;CAC7B,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,MAAM,KAAK,SAAkB,MAAM,IAAI,CAAC;CAEjD,IAAI,CAAC,QAAQ,KAAK,GAChB,OAAO;CAET,MAAM,MAA+B,CAAC;CACtC,KAAK,MAAM,CAAC,KAAK,SAAS,OAAO,QAAQ,KAAK,GAC5C,IAAI,CAAC,OAAO,IAAI,GAAG,GACjB,IAAI,OAAO,MAAM,IAAI;CAGzB,OAAO;AACT;;;;;;;;AASA,SAAS,MACP,QACA,QACyB;CACzB,MAAM,MAAM,MAAM,MAAM;CAExB,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,GAAG;EAEjD,IAAI,OAAO,IAAI,GAAG,GAChB;EAEF,IAAI,OAAO,QAAQ,IAAI,IAAI,KAAK,QAAQ,KAAK,IAAI,MAAM,IAAI,MAAM,KAAK,IAAI,MAAM,KAAK;CACvF;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,UAAU,GAAG,QAA4D;CACvF,OAAO,OAAO,OAAgC,OAAO,CAAC,CAAC;AACzD"}

package/dist/utils/dom.d.ts

@@ -0,0 +1,51 @@
+//#region src/utils/dom.d.ts
+interface AnyHTMLElementTagNameMap extends HTMLElementTagNameMap {
+  [key: string]: HTMLElement;
+}
+/** Element creation and element measurement, both element-level DOM helpers. */
+/** What an element can be given as content: markup-free text, nodes, or both. */
+type CreateElementChildren = string | Node | Array<string | Node>;
+interface CreateElementAttributes {
+  /** Set as `data-` attributes, each name in `kebab-case`. */
+  data?: Record<string, string>;
+  [key: string]: string | Record<string, string> | undefined;
+}
+/**
+ * Create an element, with its attributes and its content.
+ *
+ * The second argument is read as content when it is a string, a node or an
+ * array — an element with content and no attribute needs no empty object.
+ *
+ * @example
+ * ```js
+ * createElement(); // <div></div>
+ * createElement('a', { href: '#' }); // <a href="#"></a>
+ * createElement('a', 'link'); // <a>link</a>
+ * createElement('a', { href: '#' }, [createElement('span')]); // <a href="#"><span></span></a>
+ * ```
+ * @link https://js-toolkit-v4.studiometa.dev/utils/dom.html#createelement
+ */
+declare function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(tag?: T, children?: CreateElementChildren): AnyHTMLElementTagNameMap[T];
+declare function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(tag?: T, attributes?: CreateElementAttributes, children?: CreateElementChildren): AnyHTMLElementTagNameMap[T];
+/** A `DOMRect`-shaped box, in the same viewport coordinates. */
+interface OffsetSizes {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+/**
+ * Measure an element's box as layout placed it, with every transform on it and
+ * on its ancestors ignored — what `getBoundingClientRect()` would answer if
+ * nothing were transformed. Coordinates are the viewport's, as that method's.
+ *
+ * A pure read: the caller owns the phase it happens in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/css.html#getoffsetsizes
+ */
+declare function getOffsetSizes(element: HTMLElement): OffsetSizes;
+//#endregion
+export { CreateElementAttributes, CreateElementChildren, OffsetSizes, createElement, getOffsetSizes };

package/dist/utils/dom.js

@@ -0,0 +1,55 @@
+import { kebabCase } from "./strings.js";
+import { isObject, isString } from "./is.js";
+//#region src/utils/dom.ts
+function createElement(tag, attributes = {}, children = null) {
+	const element = document.createElement(tag ?? "div");
+	let content = children;
+	let attrs = attributes;
+	if (content === null && (Array.isArray(attrs) || isString(attrs) || attrs instanceof Node)) {
+		content = attrs;
+		attrs = {};
+	}
+	for (const [name, value] of Object.entries(attrs)) if (isString(value)) element.setAttribute(kebabCase(name), value);
+	else if (name === "data" && isObject(value)) for (const [dataName, dataValue] of Object.entries(value)) element.setAttribute(`data-${kebabCase(dataName)}`, dataValue);
+	if (content) element.append(...Array.isArray(content) ? content : [content]);
+	return element;
+}
+/**
+* Measure an element's box as layout placed it, with every transform on it and
+* on its ancestors ignored — what `getBoundingClientRect()` would answer if
+* nothing were transformed. Coordinates are the viewport's, as that method's.
+*
+* A pure read: the caller owns the phase it happens in.
+* @link https://js-toolkit-v4.studiometa.dev/utils/css.html#getoffsetsizes
+*/
+function getOffsetSizes(element) {
+	let x = element.offsetLeft;
+	let y = element.offsetTop;
+	let offsetParent = element.offsetParent;
+	for (let node = element.parentElement; node; node = node.parentElement) {
+		x -= node.scrollLeft;
+		y -= node.scrollTop;
+		if (node === offsetParent) {
+			const styles = getComputedStyle(node);
+			x += node.offsetLeft + Number.parseFloat(styles.borderLeftWidth);
+			y += node.offsetTop + Number.parseFloat(styles.borderTopWidth);
+			offsetParent = node.offsetParent;
+		}
+	}
+	const width = element.offsetWidth;
+	const height = element.offsetHeight;
+	return {
+		x,
+		y,
+		width,
+		height,
+		top: y,
+		right: x + width,
+		bottom: y + height,
+		left: x
+	};
+}
+//#endregion
+export { createElement, getOffsetSizes };
+
+//# sourceMappingURL=dom.js.map

package/dist/utils/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","names":[],"sources":["../../src/utils/dom.ts"],"sourcesContent":["import { isObject, isString } from './is.js';\nimport { kebabCase } from './strings.js';\n\ninterface AnyHTMLElementTagNameMap extends HTMLElementTagNameMap {\n  [key: string]: HTMLElement;\n}\n\n/** Element creation and element measurement, both element-level DOM helpers. */\n\n/** What an element can be given as content: markup-free text, nodes, or both. */\nexport type CreateElementChildren = string | Node | Array<string | Node>;\n\nexport interface CreateElementAttributes {\n  /** Set as `data-` attributes, each name in `kebab-case`. */\n  data?: Record<string, string>;\n  [key: string]: string | Record<string, string> | undefined;\n}\n\n/**\n * Create an element, with its attributes and its content.\n *\n * The second argument is read as content when it is a string, a node or an\n * array — an element with content and no attribute needs no empty object.\n *\n * @example\n * ```js\n * createElement(); // <div></div>\n * createElement('a', { href: '#' }); // <a href=\"#\"></a>\n * createElement('a', 'link'); // <a>link</a>\n * createElement('a', { href: '#' }, [createElement('span')]); // <a href=\"#\"><span></span></a>\n * ```\n * @link https://js-toolkit-v4.studiometa.dev/utils/dom.html#createelement\n */\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  children?: CreateElementChildren,\n): AnyHTMLElementTagNameMap[T];\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  attributes?: CreateElementAttributes,\n  children?: CreateElementChildren,\n): AnyHTMLElementTagNameMap[T];\nexport function createElement<T extends keyof AnyHTMLElementTagNameMap = 'div'>(\n  tag?: T,\n  attributes: CreateElementChildren | CreateElementAttributes = {},\n  children: CreateElementChildren | null = null,\n): AnyHTMLElementTagNameMap[T] {\n  const element = document.createElement((tag as string) ?? 'div');\n\n  let content = children;\n  let attrs = attributes;\n  if (content === null && (Array.isArray(attrs) || isString(attrs) || attrs instanceof Node)) {\n    content = attrs;\n    attrs = {};\n  }\n\n  for (const [name, value] of Object.entries(attrs as CreateElementAttributes)) {\n    if (isString(value)) {\n      element.setAttribute(kebabCase(name), value);\n    } else if (name === 'data' && isObject(value)) {\n      for (const [dataName, dataValue] of Object.entries(value)) {\n        element.setAttribute(`data-${kebabCase(dataName)}`, dataValue);\n      }\n    }\n  }\n\n  if (content) {\n    element.append(...(Array.isArray(content) ? content : [content]));\n  }\n\n  return element;\n}\n\n/** A `DOMRect`-shaped box, in the same viewport coordinates. */\nexport interface OffsetSizes {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\n/**\n * Measure an element's box as layout placed it, with every transform on it and\n * on its ancestors ignored — what `getBoundingClientRect()` would answer if\n * nothing were transformed. Coordinates are the viewport's, as that method's.\n *\n * A pure read: the caller owns the phase it happens in.\n * @link https://js-toolkit-v4.studiometa.dev/utils/css.html#getoffsetsizes\n */\nexport function getOffsetSizes(element: HTMLElement): OffsetSizes {\n  let x = element.offsetLeft;\n  let y = element.offsetTop;\n  let offsetParent = element.offsetParent;\n\n  for (let node = element.parentElement; node; node = node.parentElement) {\n    // Every scrolling ancestor shifts the box, the document included: reading\n    // the chain covers the page scroll in standards and in quirks mode alike.\n    x -= node.scrollLeft;\n    y -= node.scrollTop;\n\n    if (node === offsetParent) {\n      // The offsets are relative to the offset parent's padding edge, and its\n      // own offsets place its border edge, so its border sits between the two.\n      const styles = getComputedStyle(node);\n      x += node.offsetLeft + Number.parseFloat(styles.borderLeftWidth);\n      y += node.offsetTop + Number.parseFloat(styles.borderTopWidth);\n      offsetParent = node.offsetParent;\n    }\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return { x, y, width, height, top: y, right: x + width, bottom: y + height, left: x };\n}\n"],"mappings":";;;AA0CA,SAAgB,cACd,KACA,aAA8D,CAAC,GAC/D,WAAyC,MACZ;CAC7B,MAAM,UAAU,SAAS,cAAe,OAAkB,KAAK;CAE/D,IAAI,UAAU;CACd,IAAI,QAAQ;CACZ,IAAI,YAAY,SAAS,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK,KAAK,iBAAiB,OAAO;EAC1F,UAAU;EACV,QAAQ,CAAC;CACX;CAEA,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,KAAgC,GACzE,IAAI,SAAS,KAAK,GAChB,QAAQ,aAAa,UAAU,IAAI,GAAG,KAAK;MACtC,IAAI,SAAS,UAAU,SAAS,KAAK,GAC1C,KAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,KAAK,GACtD,QAAQ,aAAa,QAAQ,UAAU,QAAQ,KAAK,SAAS;CAKnE,IAAI,SACF,QAAQ,OAAO,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAE;CAGlE,OAAO;AACT;;;;;;;;;AAsBA,SAAgB,eAAe,SAAmC;CAChE,IAAI,IAAI,QAAQ;CAChB,IAAI,IAAI,QAAQ;CAChB,IAAI,eAAe,QAAQ;CAE3B,KAAK,IAAI,OAAO,QAAQ,eAAe,MAAM,OAAO,KAAK,eAAe;EAGtE,KAAK,KAAK;EACV,KAAK,KAAK;EAEV,IAAI,SAAS,cAAc;GAGzB,MAAM,SAAS,iBAAiB,IAAI;GACpC,KAAK,KAAK,aAAa,OAAO,WAAW,OAAO,eAAe;GAC/D,KAAK,KAAK,YAAY,OAAO,WAAW,OAAO,cAAc;GAC7D,eAAe,KAAK;EACtB;CACF;CAEA,MAAM,QAAQ,QAAQ;CACtB,MAAM,SAAS,QAAQ;CAEvB,OAAO;EAAE;EAAG;EAAG;EAAO;EAAQ,KAAK;EAAG,OAAO,IAAI;EAAO,QAAQ,IAAI;EAAQ,MAAM;CAAE;AACtF"}

package/dist/utils/easings.d.ts

@@ -0,0 +1,130 @@
+//#region src/utils/easings.d.ts
+/**
+ * Easing functions: they shape a `0 → 1` progress and answer in the same
+ * range. The `in` form is the source, and the `out` and `in-out` forms are
+ * derived from it.
+ */
+/** Takes a progress between `0` and `1`, answers an eased value in that range. */
+type EasingFunction = (progress: number) => number;
+/**
+ * Mirror an ease-in function into its ease-out counterpart.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#createeaseout
+ */
+declare function createEaseOut(easeIn: EasingFunction): EasingFunction;
+/**
+ * Join an ease-in function with its mirror, each over half the progress.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#createeaseinout
+ */
+declare function createEaseInOut(easeIn: EasingFunction): EasingFunction;
+/**
+ * No easing: the progress is the value.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easelinear
+ */
+declare function easeLinear(progress: number): number;
+/**
+ * Quadratic ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinquad
+ */
+declare function easeInQuad(progress: number): number;
+/**
+ * Quadratic ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutquad
+ */
+declare const easeOutQuad: EasingFunction;
+/**
+ * Quadratic ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutquad
+ */
+declare const easeInOutQuad: EasingFunction;
+/**
+ * Cubic ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeincubic
+ */
+declare function easeInCubic(progress: number): number;
+/**
+ * Cubic ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutcubic
+ */
+declare const easeOutCubic: EasingFunction;
+/**
+ * Cubic ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutcubic
+ */
+declare const easeInOutCubic: EasingFunction;
+/**
+ * Quartic ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinquart
+ */
+declare function easeInQuart(progress: number): number;
+/**
+ * Quartic ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutquart
+ */
+declare const easeOutQuart: EasingFunction;
+/**
+ * Quartic ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutquart
+ */
+declare const easeInOutQuart: EasingFunction;
+/**
+ * Quintic ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinquint
+ */
+declare function easeInQuint(progress: number): number;
+/**
+ * Quintic ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutquint
+ */
+declare const easeOutQuint: EasingFunction;
+/**
+ * Quintic ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutquint
+ */
+declare const easeInOutQuint: EasingFunction;
+/**
+ * Sinusoidal ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinsine
+ */
+declare function easeInSine(progress: number): number;
+/**
+ * Sinusoidal ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutsine
+ */
+declare const easeOutSine: EasingFunction;
+/**
+ * Sinusoidal ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutsine
+ */
+declare const easeInOutSine: EasingFunction;
+/**
+ * Circular ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeincirc
+ */
+declare function easeInCirc(progress: number): number;
+/**
+ * Circular ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutcirc
+ */
+declare const easeOutCirc: EasingFunction;
+/**
+ * Circular ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutcirc
+ */
+declare const easeInOutCirc: EasingFunction;
+/**
+ * Exponential ease-in.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinexpo
+ */
+declare function easeInExpo(progress: number): number;
+/**
+ * Exponential ease-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeoutexpo
+ */
+declare const easeOutExpo: EasingFunction;
+/**
+ * Exponential ease-in-out.
+ * @link https://js-toolkit-v4.studiometa.dev/utils/easings.html#easeinoutexpo
+ */
+declare const easeInOutExpo: EasingFunction;
+//#endregion
+export { EasingFunction, createEaseInOut, createEaseOut, easeInCirc, easeInCubic, easeInExpo, easeInOutCirc, easeInOutCubic, easeInOutExpo, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInQuad, easeInQuart, easeInQuint, easeInSine, easeLinear, easeOutCirc, easeOutCubic, easeOutExpo, easeOutQuad, easeOutQuart, easeOutQuint, easeOutSine };