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

package/dist/utils/collide/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/js-toolkit/utils/collide/index.ts"],
-  "sourcesContent": ["/**\n * Inspired by http://www.jeffreythompson.org/collision-detection/\n */\nexport { boundingRectToCircle } from './boundingRectToCircle.js';\nexport { collideCircleCircle } from './collideCircleCircle.js';\nexport { collideCircleRect } from './collideCircleRect.js';\nexport { collidePointCircle } from './collidePointCircle.js';\nexport { collidePointRect } from './collidePointRect.js';\nexport { collideRectRect } from './collideRectRect.js';\n"],
-  "mappings": "AAGA,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;",
-  "names": []
-}

package/dist/utils/css/animate.d.ts

@@ -1,46 +0,0 @@
-import type { EasingFunction } from '../math/createEases.js';
-import { type BezierCurve, type Tween, type TweenOptions } from '../tween.js';
-import type { TransformProps } from './transform.js';
-export type CSSCustomPropertyName = `--${string}`;
-type KeyframeTransforms<Type> = {
-    [Property in keyof Type]: number | [number, string];
-};
-export type Keyframe = Partial<KeyframeTransforms<TransformProps> & {
-    opacity: number;
-    transformOrigin: string;
-    easing: EasingFunction | BezierCurve;
-    offset: number;
-    [key: CSSCustomPropertyName]: number;
-}>;
-export type NormalizedKeyframe = Keyframe & {
-    easing: EasingFunction;
-    offset: number;
-    vars: string[];
-};
-export interface AnimateOptions extends Omit<TweenOptions, 'duration'> {
-    /**
-     * The duration of the tween, in seconds.
-     * When using multiple targets, it can be a function which will be
-     * called with the current target and its index and should return
-     * the duration in seconds for this element.
-     *
-     * Defaults to `1`.
-     */
-    duration?: number | ((target: HTMLElement, index: number) => number);
-    /**
-     * Delay between the start of each target animation, in seconds.
-     * When using multiple targets, it can be a function which will be called
-     * with the current target and its index and should return the delay
-     * in seconds for this element's tween.
-     *
-     * Defaults to `0`.
-     */
-    stagger?: number | ((target: HTMLElement, index: number) => number);
-}
-export type Animate = Tween;
-/**
- * Animate one or more elements.
- * @link https://js-toolkit.studiometa.dev/utils/css/animate.html
- */
-export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: AnimateOptions): Animate;
-export {};

package/dist/utils/css/animate.js

@@ -1,279 +0,0 @@
-import { clamp01 } from "../math/clamp01.js";
-import { lerp } from "../math/lerp.js";
-import { map } from "../math/map.js";
-import { startsWith } from "../string/startsWith.js";
-import { normalizeEase, tween } from "../tween.js";
-import { isFunction } from "../is.js";
-import { domScheduler as scheduler } from "../scheduler.js";
-import { eachElements } from "./utils.js";
-let id = 0;
-const running = /* @__PURE__ */ new WeakMap();
-const CSSUnitConverter = {
-  "%": (value, size) => value * size / 100,
-  vh: (value) => value * window.innerHeight / 100,
-  vw: (value) => value * window.innerWidth / 100,
-  vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
-  vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
-};
-function resolveUnitValue(val, elementSize) {
-  if (typeof val === "number") {
-    return val;
-  }
-  if (!val[1] || !CSSUnitConverter[val[1]]) {
-    return val[0];
-  }
-  return CSSUnitConverter[val[1]](val[0], elementSize);
-}
-const SIMPLE_TRANSFORM_DEFS = [
-  ["rotate", "rotate", "deg", 0],
-  ["rotateX", "rotateX", "deg", 0],
-  ["rotateY", "rotateY", "deg", 0],
-  ["rotateZ", "rotateZ", "deg", 0],
-  ["scale", "scale", "", 1],
-  ["scaleX", "scaleX", "", 1],
-  ["scaleY", "scaleY", "", 1],
-  ["scaleZ", "scaleZ", "", 1],
-  ["skew", "skew", "deg", 0],
-  ["skewX", "skewX", "deg", 0],
-  ["skewY", "skewY", "deg", 0]
-];
-const TRANSLATE_DEFS = [
-  ["x", 0, "offsetWidth"],
-  ["y", 0, "offsetHeight"],
-  ["z", 0, "offsetWidth"]
-];
-function compileSegment(from, to) {
-  const transformStarts = [];
-  const transformDeltas = [];
-  const transformCssFunctions = [];
-  const transformUnits = [];
-  const dynamicTranslates = [];
-  let hasTranslate = false;
-  const translateAxisIndices = [];
-  for (const [prop, defaultValue, sizeRef] of TRANSLATE_DEFS) {
-    const propertyExists = from[prop] !== void 0 || to[prop] !== void 0;
-    if (propertyExists) hasTranslate = true;
-    const fromValue = from[prop] ?? defaultValue;
-    const toValue = to[prop] ?? defaultValue;
-    const arrayIndex = transformStarts.length;
-    translateAxisIndices.push(arrayIndex);
-    transformCssFunctions.push("");
-    transformUnits.push("px");
-    if (typeof fromValue !== "number" || typeof toValue !== "number") {
-      transformStarts.push(0);
-      transformDeltas.push(0);
-      dynamicTranslates.push({ index: arrayIndex, from: fromValue, to: toValue, sizeRef });
-    } else {
-      transformStarts.push(fromValue);
-      transformDeltas.push(toValue - fromValue);
-    }
-  }
-  for (const [prop, cssFunction, unit, defaultValue] of SIMPLE_TRANSFORM_DEFS) {
-    if (from[prop] === void 0 && to[prop] === void 0) continue;
-    const startValue = from[prop] ?? defaultValue;
-    transformCssFunctions.push(cssFunction);
-    transformUnits.push(unit);
-    transformStarts.push(startValue);
-    transformDeltas.push((to[prop] ?? defaultValue) - startValue);
-  }
-  const hasOpacity = from.opacity !== void 0 || to.opacity !== void 0;
-  const opacityStart = hasOpacity ? from.opacity ?? 1 : 0;
-  const opacityDelta = hasOpacity ? (to.opacity ?? 1) - opacityStart : 0;
-  const customPropertyNames = [];
-  const customPropertyStarts = [];
-  const customPropertyDeltas = [];
-  if (from.vars && to.vars) {
-    for (const name of from.vars) {
-      const startValue = from[name];
-      const endValue = to[name] ?? startValue;
-      customPropertyNames.push(name);
-      customPropertyStarts.push(startValue);
-      customPropertyDeltas.push(endValue - startValue);
-    }
-  }
-  return {
-    fromOffset: from.offset,
-    toOffset: to.offset,
-    easing: to.easing,
-    transformStarts,
-    transformDeltas,
-    transformCssFunctions,
-    transformUnits,
-    hasTranslate,
-    translateAxisIndices,
-    simpleTransformStart: TRANSLATE_DEFS.length,
-    dynamicTranslates,
-    hasOpacity,
-    opacityStart,
-    opacityDelta,
-    customPropertyNames,
-    customPropertyStarts,
-    customPropertyDeltas,
-    transformOrigin: to.transformOrigin !== void 0 ? to.transformOrigin : false
-  };
-}
-function renderSegment(element, segment, progress) {
-  const easedProgress = segment.easing(map(progress, segment.fromOffset, segment.toOffset, 0, 1));
-  scheduler.read(() => {
-    for (let i = 0; i < segment.dynamicTranslates.length; i++) {
-      const dynamic = segment.dynamicTranslates[i];
-      const elementSize = element[dynamic.sizeRef];
-      const startValue = resolveUnitValue(dynamic.from, elementSize);
-      segment.transformStarts[dynamic.index] = startValue;
-      segment.transformDeltas[dynamic.index] = resolveUnitValue(dynamic.to, elementSize) - startValue;
-    }
-    let transformValue = "";
-    if (segment.hasTranslate) {
-      const xIndex = segment.translateAxisIndices[0];
-      const yIndex = segment.translateAxisIndices[1];
-      const zIndex = segment.translateAxisIndices[2];
-      const x = segment.transformStarts[xIndex] + segment.transformDeltas[xIndex] * easedProgress;
-      const y = segment.transformStarts[yIndex] + segment.transformDeltas[yIndex] * easedProgress;
-      const z = segment.transformStarts[zIndex] + segment.transformDeltas[zIndex] * easedProgress;
-      transformValue += `translate3d(${x}px, ${y}px, ${z}px) `;
-    }
-    for (let i = segment.simpleTransformStart; i < segment.transformStarts.length; i++) {
-      const value = segment.transformStarts[i] + segment.transformDeltas[i] * easedProgress;
-      transformValue += `${segment.transformCssFunctions[i]}(${value}${segment.transformUnits[i]}) `;
-    }
-    let opacity = false;
-    if (segment.hasOpacity) {
-      opacity = segment.opacityStart + segment.opacityDelta * easedProgress;
-    } else if (element.style.opacity) {
-      opacity = "";
-    }
-    let transformOrigin = false;
-    if (segment.transformOrigin !== false) {
-      transformOrigin = segment.transformOrigin;
-    } else if (element.style.transformOrigin) {
-      transformOrigin = "";
-    }
-    const hasCustomProperties = segment.customPropertyNames.length > 0;
-    scheduler.write(() => {
-      if (opacity !== false) {
-        element.style.opacity = opacity;
-      }
-      if (transformOrigin !== false) {
-        element.style.transformOrigin = transformOrigin;
-      }
-      if (hasCustomProperties) {
-        for (let i = 0; i < segment.customPropertyNames.length; i++) {
-          element.style.setProperty(
-            segment.customPropertyNames[i],
-            (segment.customPropertyStarts[i] + segment.customPropertyDeltas[i] * easedProgress).toString()
-          );
-        }
-      }
-      element.style.transform = transformValue;
-    });
-  });
-}
-function singleAnimate(element, keyframes, options = {}) {
-  const keyframesCount = keyframes.length - 1;
-  const normalizedKeyframes = keyframes.map(
-    (keyframe, index) => ({
-      ...keyframe,
-      offset: keyframe.offset ?? index / keyframesCount,
-      easing: normalizeEase(keyframe.easing),
-      vars: Object.keys(keyframe).filter((key2) => startsWith(key2, "--"))
-    })
-  );
-  const segments = [];
-  for (let i = 1; i < normalizedKeyframes.length; i++) {
-    segments.push(compileSegment(normalizedKeyframes[i - 1], normalizedKeyframes[i]));
-  }
-  if (!running.has(element)) {
-    running.set(element, /* @__PURE__ */ new Map());
-  }
-  const key = `animate-${id}`;
-  id += 1;
-  function callback(progress) {
-    let segmentIndex = 0;
-    while (segmentIndex < segments.length - 1 && segments[segmentIndex].toOffset <= progress && segments[segmentIndex].toOffset !== 1) {
-      segmentIndex += 1;
-    }
-    renderSegment(element, segments[segmentIndex], progress);
-  }
-  const controls = tween(callback, {
-    ...options,
-    onStart(progress) {
-      if (isFunction(options.onStart)) {
-        options.onStart(progress);
-      }
-      const runningKeys = running.get(element);
-      for (const [runningKey, runningPause] of runningKeys.entries()) {
-        runningPause();
-        runningKeys.delete(runningKey);
-      }
-      runningKeys.set(key, controls.pause);
-      running.set(element, runningKeys);
-    }
-  });
-  return controls;
-}
-function animate(elementOrElements, keyframes, options = {}) {
-  if (elementOrElements instanceof HTMLElement) {
-    return singleAnimate(elementOrElements, keyframes, {
-      ...options,
-      duration: isFunction(options.duration) ? options.duration(elementOrElements, 0) : options.duration
-    });
-  }
-  const stagger = options.stagger ?? 0;
-  const staggerIsFunction = isFunction(stagger);
-  const durationFn = isFunction(options.duration) ? options.duration : null;
-  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;
-  const progresses = [];
-  const timings = [];
-  let duration = 0;
-  let progressSum = 0;
-  let elementCount = 0;
-  const controls = eachElements(elementOrElements, (element, index) => {
-    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;
-    const itemOptions = { ...options, delay };
-    if (durationFn) {
-      itemOptions.duration = durationFn(element, index);
-    } else if (itemOptions.duration === void 0) {
-      itemOptions.duration = 1;
-    }
-    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];
-    if (timings[index][2] > duration) {
-      duration = timings[index][2];
-    }
-    progresses[index] = 0;
-    elementCount = index + 1;
-    itemOptions.onProgress = (itemProgress) => {
-      progressSum += itemProgress - progresses[index];
-      progresses[index] = itemProgress;
-      if (progressFn) {
-        progressFn(progressSum / elementCount);
-      }
-    };
-    return singleAnimate(element, keyframes, itemOptions);
-  });
-  function forAll(key) {
-    for (const control of controls) {
-      control[key]();
-    }
-  }
-  function progress(newProgress) {
-    if (newProgress !== void 0) {
-      const newTime = lerp(0, duration, newProgress);
-      for (let i = 0; i < controls.length; i++) {
-        const controlProgress = clamp01(map(newTime, timings[i][1], timings[i][2], 0, 1));
-        controls[i].progress(controlProgress);
-      }
-    }
-    return progressSum / elementCount;
-  }
-  return {
-    start: () => forAll("start"),
-    pause: () => forAll("pause"),
-    finish: () => forAll("finish"),
-    play: () => forAll("play"),
-    progress
-  };
-}
-export {
-  animate
-};
-//# sourceMappingURL=animate.js.map

package/dist/utils/css/animate.js.map

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

package/dist/utils/css/classes.d.ts

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

package/dist/utils/css/classes.js

@@ -1,29 +0,0 @@
-import { isArray } from "../is.js";
-import { eachElements } from "./utils.js";
-function setClasses(element, classNames, method, forceToggle) {
-  if (!element || !classNames) {
-    return;
-  }
-  const normalizedClassNames = isArray(classNames) ? classNames : classNames.split(" ").filter((className) => className);
-  if (method !== "toggle") {
-    eachElements(element, (el) => el.classList[method](...normalizedClassNames));
-  } else {
-    for (const className of normalizedClassNames)
-      eachElements(element, (el) => el.classList[method](className, forceToggle));
-  }
-}
-function add(element, classNames) {
-  setClasses(element, classNames, "add");
-}
-function remove(element, classNames) {
-  setClasses(element, classNames, "remove");
-}
-function toggle(element, classNames, force) {
-  setClasses(element, classNames, "toggle", force);
-}
-export {
-  add,
-  remove,
-  toggle
-};
-//# sourceMappingURL=classes.js.map

package/dist/utils/css/classes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/js-toolkit/utils/css/classes.ts"],
-  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    for (const className of normalizedClassNames)\n      eachElements(element, (el) => el.classList[method](className, forceToggle));\n  }\n}\n\n/**\n * Add class names to an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/addClass.html\n */\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/removeClass.html\n */\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/toggleClass.html\n */\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,uBAAuB,QAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,iBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,MAAM,EAAE,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,eAAW,aAAa;AACtB,mBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,MAAM,EAAE,WAAW,WAAW,CAAC;AAAA,EAC9E;AACF;AAMO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAMO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAMO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
-  "names": []
-}

package/dist/utils/css/getOffsetSizes.d.ts

@@ -1,14 +0,0 @@
-/**
- * Get a `DOMRect` like `Object` for an element, without its transforms.
- * @link https://js-toolkit.studiometa.dev/utils/css/getOffsetSizes.html
- */
-export declare function getOffsetSizes(element: HTMLElement): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};

package/dist/utils/css/getOffsetSizes.js

@@ -1,26 +0,0 @@
-function getOffsetSizes(element) {
-  let parent = element;
-  let x = -window.scrollX;
-  let y = -window.scrollY;
-  while (parent) {
-    x += parent.offsetLeft;
-    y += parent.offsetTop;
-    parent = parent.offsetParent;
-  }
-  const width = element.offsetWidth;
-  const height = element.offsetHeight;
-  return {
-    x,
-    y,
-    width,
-    height,
-    top: y,
-    right: width + x,
-    bottom: height + y,
-    left: x
-  };
-}
-export {
-  getOffsetSizes
-};
-//# sourceMappingURL=getOffsetSizes.js.map

package/dist/utils/css/getOffsetSizes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n * @link https://js-toolkit.studiometa.dev/utils/css/getOffsetSizes.html\n */\nexport function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.scrollX;\n  let y = -window.scrollY;\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": "AAIO,SAAS,eAAe,SAAsB;AACnD,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/dist/utils/css/index.d.ts

@@ -1,8 +0,0 @@
-export { animate, type Animate, type AnimateOptions, type CSSCustomPropertyName, type Keyframe, type NormalizedKeyframe, } from './animate.js';
-export { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';
-export { add as addStyle, remove as removeStyle } from './styles.js';
-export { getOffsetSizes } from './getOffsetSizes.js';
-export { matrix } from './matrix.js';
-export { transform } from './transform.js';
-export { transition } from './transition.js';
-export type { TransformProps } from './transform.js';

package/dist/utils/css/index.js

@@ -1,22 +0,0 @@
-import {
-  animate
-} from "./animate.js";
-import { add, remove, toggle } from "./classes.js";
-import { add as add2, remove as remove2 } from "./styles.js";
-import { getOffsetSizes } from "./getOffsetSizes.js";
-import { matrix } from "./matrix.js";
-import { transform } from "./transform.js";
-import { transition } from "./transition.js";
-export {
-  add as addClass,
-  add2 as addStyle,
-  animate,
-  getOffsetSizes,
-  matrix,
-  remove as removeClass,
-  remove2 as removeStyle,
-  toggle as toggleClass,
-  transform,
-  transition
-};
-//# sourceMappingURL=index.js.map

package/dist/utils/css/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/js-toolkit/utils/css/index.ts"],
-  "sourcesContent": ["export {\n  animate,\n  type Animate,\n  type AnimateOptions,\n  type CSSCustomPropertyName,\n  type Keyframe,\n  type NormalizedKeyframe,\n} from './animate.js';\nexport { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';\nexport { add as addStyle, remove as removeStyle } from './styles.js';\nexport { getOffsetSizes } from './getOffsetSizes.js';\nexport { matrix } from './matrix.js';\nexport { transform } from './transform.js';\nexport { transition } from './transition.js';\nexport type { TransformProps } from './transform.js';\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,OAMK;AACP,SAAgB,KAAoB,QAAuB,cAAmB;AAC9E,SAAgB,OAAPA,MAA2B,UAAVC,eAA6B;AACvD,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;",
-  "names": ["add", "remove"]
-}

package/dist/utils/css/matrix.d.ts

@@ -1,28 +0,0 @@
-type MatrixTransform = {
-    scaleX?: number;
-    scaleY?: number;
-    skewX?: number;
-    skewY?: number;
-    translateX?: number;
-    translateY?: number;
-};
-/**
- * Format a CSS transform matrix with the given values.
- *
- * @param  {Object} transform
- * @param  {number} [transform.scaleX=1]     The scale on the x axis.
- * @param  {number} [transform.scaleY=1]     The scale on the y axis.
- * @param  {number} [transform.skewX=0]      The skew on the x axis.
- * @param  {number} [transform.skewY=0]      The skew on the y axis.
- * @param  {number} [transform.translateX=0] The translate on the x axis.
- * @param  {number} [transform.translateY=0] The translate on the y axis.
- * @return {string}                           A formatted CSS matrix transform.
- * @example
- * ```js
- * matrix({ scaleX: 0.5, scaleY: 0.5 });
- * // matrix(0.5, 0, 0, 0.5, 0, 0)
- * ```
- * @link https://js-toolkit.studiometa.dev/utils/css/matrix.html
- */
-export declare function matrix(transform?: MatrixTransform): string;
-export {};

package/dist/utils/css/matrix.js

@@ -1,8 +0,0 @@
-function matrix(transform) {
-  transform = transform || {};
-  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${transform.scaleY ?? 1}, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;
-}
-export {
-  matrix
-};
-//# sourceMappingURL=matrix.js.map

package/dist/utils/css/matrix.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/js-toolkit/utils/css/matrix.ts"],
-  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param  {Object} transform\n * @param  {number} [transform.scaleX=1]     The scale on the x axis.\n * @param  {number} [transform.scaleY=1]     The scale on the y axis.\n * @param  {number} [transform.skewX=0]      The skew on the x axis.\n * @param  {number} [transform.skewY=0]      The skew on the y axis.\n * @param  {number} [transform.translateX=0] The translate on the x axis.\n * @param  {number} [transform.translateY=0] The translate on the y axis.\n * @return {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n * @link https://js-toolkit.studiometa.dev/utils/css/matrix.html\n */\nexport function matrix(transform?: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
-  "mappings": "AA2BO,SAAS,OAAO,WAAqC;AAE1D,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,CAAC,KAAK,UAAU,SAAS,CAAC,KAAK,UAAU,SAAS,CAAC,KACtF,UAAU,UAAU,CACtB,KAAK,UAAU,cAAc,CAAC,KAAK,UAAU,cAAc,CAAC;AAC9D;",
-  "names": []
-}

package/dist/utils/css/styles.d.ts

@@ -1,10 +0,0 @@
-/**
- * Add styles to an element.
- * @link https://js-toolkit.studiometa.dev/utils/css/addStyle.html
- */
-export declare function add(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
-/**
- * Remove class names from an element.
- * @link https://js-toolkit.studiometa.dev/utils/css/removeStyle.html
- */
-export declare function remove(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;

package/dist/utils/css/styles.js

@@ -1,23 +0,0 @@
-import { isObject } from "../is.js";
-import { eachElements } from "./utils.js";
-function setStyles(elementOrElements, styles, method = "add") {
-  if (!elementOrElements || !styles || !isObject(styles)) {
-    return;
-  }
-  eachElements(elementOrElements, (el) => {
-    for (const [prop, value] of Object.entries(styles)) {
-      el.style[prop] = method === "add" ? value : "";
-    }
-  });
-}
-function add(elementOrElements, styles) {
-  setStyles(elementOrElements, styles);
-}
-function remove(elementOrElements, styles) {
-  setStyles(elementOrElements, styles, "remove");
-}
-export {
-  add,
-  remove
-};
-//# sourceMappingURL=styles.js.map

package/dist/utils/css/styles.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/js-toolkit/utils/css/styles.ts"],
-  "sourcesContent": ["import { isObject } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of style properties on an element.\n */\nfunction setStyles(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n  method: 'add' | 'remove' = 'add',\n) {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    for (const [prop, value] of Object.entries(styles)) {\n      el.style[prop] = method === 'add' ? value : '';\n    }\n  });\n}\n\n/**\n * Add styles to an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/addStyle.html\n */\nexport function add(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n * @link https://js-toolkit.studiometa.dev/utils/css/removeStyle.html\n */\nexport function remove(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAK7B,SAAS,UACP,mBACA,QACA,SAA2B,OAC3B;AACA,MAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,SAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,OAAO;AACtC,eAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AAClD,SAAG,MAAM,IAAI,IAAI,WAAW,QAAQ,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AACH;AAMO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAMO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
-  "names": []
-}