@voila.dev/motion 0.0.0-stage → 5.0.113

package/dist/animate/js-animation.js

@@ -0,0 +1,117 @@
+import { thenable } from "./controls.js";
+import { iterationTime, planGenerator, totalDuration } from "./plan.js";
+import { cancelFrame, frame, now } from "../frame/frame.js";
+import { mix } from "../interpolate/mix.js";
+function jsAnimation(config) {
+  const { keyframes, options, delay, apply } = config;
+  const { generator, positional } = planGenerator(
+    keyframes,
+    options,
+    config.velocity
+  );
+  const segments = positional ? keyframes.slice(1).map((to, index) => mix(keyframes[index], to)) : [];
+  const active = totalDuration(generator.duration, options);
+  const duration = delay + active;
+  const endsReversed = options.repeatType === "reverse" && (options.repeat ?? 0) % 2 === 1;
+  const last = keyframes[endsReversed ? 0 : keyframes.length - 1];
+  let time = 0;
+  let speed = 1;
+  let state = "running";
+  let previous = now();
+  let resolve = () => {
+  };
+  const finished = new Promise((done) => {
+    resolve = done;
+  });
+  function valueAt(position) {
+    if (!positional) return position;
+    const index = Math.min(
+      Math.max(Math.floor(position), 0),
+      segments.length - 1
+    );
+    return segments[index](position - index);
+  }
+  function sample() {
+    const elapsed = Math.max(0, time - delay);
+    return generator.at(iterationTime(elapsed, generator.duration, options));
+  }
+  function render() {
+    if (time < delay) return;
+    apply(time >= duration ? last : valueAt(sample().value));
+  }
+  function settle(next) {
+    state = next;
+    cancelFrame(tick);
+    resolve();
+  }
+  function tick(data) {
+    time = Math.max(0, time + (data.timestamp - previous) / 1e3 * speed);
+    previous = data.timestamp;
+    if (time < duration) {
+      render();
+      return;
+    }
+    time = duration;
+    render();
+    settle("finished");
+    config.onComplete?.();
+  }
+  function play() {
+    if (state === "running") return;
+    previous = now();
+    state = "running";
+    frame.update(tick, true);
+  }
+  frame.update(tick, true);
+  render();
+  return {
+    ...thenable(finished),
+    get time() {
+      return time;
+    },
+    set time(seconds) {
+      time = Math.min(Math.max(seconds, 0), duration);
+      render();
+    },
+    get speed() {
+      return speed;
+    },
+    set speed(rate) {
+      speed = rate;
+    },
+    duration,
+    get state() {
+      return state;
+    },
+    play,
+    pause() {
+      if (state !== "running") return;
+      state = "paused";
+      cancelFrame(tick);
+    },
+    stop: () => settle("finished"),
+    cancel() {
+      apply(keyframes[0]);
+      settle("finished");
+    },
+    complete() {
+      if (state === "finished") return;
+      time = duration;
+      render();
+      settle("finished");
+      config.onComplete?.();
+    },
+    attachTimeline: () => false,
+    current() {
+      const { value, velocity } = sample();
+      return {
+        value: time < delay ? keyframes[0] : valueAt(value),
+        velocity: positional || time < delay ? 0 : velocity
+      };
+    }
+  };
+}
+export {
+  jsAnimation
+};
+//# sourceMappingURL=js-animation.js.map

package/dist/animate/js-animation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/js-animation.ts"],
+  "sourcesContent": ["import { thenable } from \"#/animate/controls.ts\";\nimport { iterationTime, planGenerator, totalDuration } from \"#/animate/plan.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tAnimationState,\n} from \"#/animate/types.ts\";\nimport { cancelFrame, type FrameData, frame, now } from \"#/frame/frame.ts\";\nimport { mix } from \"#/interpolate/mix.ts\";\n\nexport interface JsAnimationConfig<T> {\n\t/** At least two: the caller resolves a lone target against the current value. */\n\treadonly keyframes: readonly T[];\n\treadonly options: AnimationOptions;\n\t/** Seconds. */\n\treadonly delay: number;\n\t/** The velocity the value has now, carried into a spring. */\n\treadonly velocity: number;\n\tapply(value: T): void;\n\tonComplete?(): void;\n}\n\nexport interface JsAnimation<T> extends AnimationControls {\n\t/** The value and velocity at the current time: where an interruption starts from. */\n\tcurrent(): { readonly value: T; readonly velocity: number };\n}\n\n/**\n * An animation stepped by the frame loop: plain values, objects, SVG\n * attributes and CSS variables \u2014 whatever the Web Animations API can't play.\n */\nexport function jsAnimation<T>(config: JsAnimationConfig<T>): JsAnimation<T> {\n\tconst { keyframes, options, delay, apply } = config;\n\tconst { generator, positional } = planGenerator(\n\t\tkeyframes,\n\t\toptions,\n\t\tconfig.velocity,\n\t);\n\tconst segments = positional\n\t\t? keyframes.slice(1).map((to, index) => mix(keyframes[index] as T, to as T))\n\t\t: [];\n\tconst active = totalDuration(generator.duration, options);\n\tconst duration = delay + active;\n\tconst endsReversed =\n\t\toptions.repeatType === \"reverse\" && (options.repeat ?? 0) % 2 === 1;\n\tconst last = keyframes[endsReversed ? 0 : keyframes.length - 1] as T;\n\n\tlet time = 0;\n\tlet speed = 1;\n\tlet state: AnimationState = \"running\";\n\tlet previous = now();\n\tlet resolve: () => void = () => {};\n\tconst finished = new Promise<void>((done) => {\n\t\tresolve = done;\n\t});\n\n\tfunction valueAt(position: number): T {\n\t\tif (!positional) return position as T;\n\t\tconst index = Math.min(\n\t\t\tMath.max(Math.floor(position), 0),\n\t\t\tsegments.length - 1,\n\t\t);\n\t\treturn (segments[index] as (progress: number) => T)(position - index);\n\t}\n\n\tfunction sample() {\n\t\tconst elapsed = Math.max(0, time - delay);\n\t\treturn generator.at(iterationTime(elapsed, generator.duration, options));\n\t}\n\n\tfunction render() {\n\t\tif (time < delay) return;\n\t\tapply(time >= duration ? last : valueAt(sample().value));\n\t}\n\n\tfunction settle(next: AnimationState) {\n\t\tstate = next;\n\t\tcancelFrame(tick);\n\t\tresolve();\n\t}\n\n\tfunction tick(data: FrameData) {\n\t\ttime = Math.max(0, time + ((data.timestamp - previous) / 1000) * speed);\n\t\tprevious = data.timestamp;\n\t\tif (time < duration) {\n\t\t\trender();\n\t\t\treturn;\n\t\t}\n\t\ttime = duration;\n\t\trender();\n\t\tsettle(\"finished\");\n\t\tconfig.onComplete?.();\n\t}\n\n\tfunction play() {\n\t\tif (state === \"running\") return;\n\t\tprevious = now();\n\t\tstate = \"running\";\n\t\tframe.update(tick, true);\n\t}\n\n\tframe.update(tick, true);\n\trender();\n\n\treturn {\n\t\t...thenable(finished),\n\t\tget time() {\n\t\t\treturn time;\n\t\t},\n\t\tset time(seconds) {\n\t\t\ttime = Math.min(Math.max(seconds, 0), duration);\n\t\t\trender();\n\t\t},\n\t\tget speed() {\n\t\t\treturn speed;\n\t\t},\n\t\tset speed(rate) {\n\t\t\tspeed = rate;\n\t\t},\n\t\tduration,\n\t\tget state() {\n\t\t\treturn state;\n\t\t},\n\t\tplay,\n\t\tpause() {\n\t\t\tif (state !== \"running\") return;\n\t\t\tstate = \"paused\";\n\t\t\tcancelFrame(tick);\n\t\t},\n\t\tstop: () => settle(\"finished\"),\n\t\tcancel() {\n\t\t\tapply(keyframes[0] as T);\n\t\t\tsettle(\"finished\");\n\t\t},\n\t\tcomplete() {\n\t\t\tif (state === \"finished\") return;\n\t\t\ttime = duration;\n\t\t\trender();\n\t\t\tsettle(\"finished\");\n\t\t\tconfig.onComplete?.();\n\t\t},\n\t\tattachTimeline: () => false,\n\t\tcurrent() {\n\t\t\tconst { value, velocity } = sample();\n\t\t\treturn {\n\t\t\t\tvalue: time < delay ? (keyframes[0] as T) : valueAt(value),\n\t\t\t\tvelocity: positional || time < delay ? 0 : velocity,\n\t\t\t};\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/animate/plan.d.ts

@@ -0,0 +1,17 @@
+import type { AnimationOptions } from "./types.js";
+import type { Generator } from "../generators/types.js";
+/**
+ * The motion of one channel, as a generator. Two numbers spring in their own
+ * units, so the velocity a value already has carries into the new motion.
+ * Anything else (colours, paths, several keyframes) moves a position along
+ * the keyframe list — 0 at the first, 1 at the second… — and the caller mixes
+ * the keyframes at that position.
+ */
+export declare function planGenerator(keyframes: readonly unknown[], options: AnimationOptions, velocity?: number): {
+    readonly generator: Generator;
+    readonly positional: boolean;
+};
+/** The elapsed time within the current repetition, playing backwards on odd ones when they reverse. */
+export declare function iterationTime(elapsed: number, duration: number, options: AnimationOptions): number;
+export declare function totalDuration(duration: number, options: AnimationOptions): number;
+//# sourceMappingURL=plan.d.ts.map

package/dist/animate/plan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan.d.ts","sourceRoot":"","sources":["../../src/animate/plan.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC5B,SAAS,EAAE,SAAS,OAAO,EAAE,EAC7B,OAAO,EAAE,gBAAgB,EACzB,QAAQ,SAAI,GACV;IAAE,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CA+BjE;AAED,uGAAuG;AACvG,wBAAgB,aAAa,CAC5B,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,gBAAgB,GACvB,MAAM,CAUR;AAED,wBAAgB,aAAa,CAC5B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,gBAAgB,GACvB,MAAM,CAER"}

package/dist/animate/plan.js

@@ -0,0 +1,48 @@
+import { spring } from "../generators/spring.js";
+import { tween } from "../generators/tween.js";
+const DEFAULT_TWEEN_DURATION = 0.3;
+function planGenerator(keyframes, options, velocity = 0) {
+  const numeric = keyframes.every((frame) => typeof frame === "number");
+  const springs = options.type !== "tween" && keyframes.length === 2 && !options.ease;
+  if (numeric) {
+    const values = keyframes;
+    const generator2 = springs ? spring({
+      ...options,
+      from: values[0] ?? 0,
+      to: values[1] ?? 0,
+      velocity: options.velocity ?? velocity
+    }) : tween({
+      keyframes: values,
+      duration: options.duration ?? DEFAULT_TWEEN_DURATION,
+      ease: options.ease,
+      times: options.times
+    });
+    return { generator: generator2, positional: false };
+  }
+  const positions = keyframes.map((_frame, index) => index);
+  const generator = springs ? spring({ ...options, from: 0, to: 1 }) : tween({
+    keyframes: positions,
+    duration: options.duration ?? DEFAULT_TWEEN_DURATION,
+    ease: options.ease,
+    times: options.times
+  });
+  return { generator, positional: true };
+}
+function iterationTime(elapsed, duration, options) {
+  const repeat = options.repeat ?? 0;
+  if (repeat === 0 || duration === 0) return Math.min(elapsed, duration);
+  const total = duration * (repeat + 1);
+  const clamped = Math.min(elapsed, total);
+  const iteration = Math.min(Math.floor(clamped / duration), repeat);
+  const within = clamped - iteration * duration;
+  return options.repeatType === "reverse" && iteration % 2 === 1 ? duration - within : within;
+}
+function totalDuration(duration, options) {
+  return duration * ((options.repeat ?? 0) + 1);
+}
+export {
+  iterationTime,
+  planGenerator,
+  totalDuration
+};
+//# sourceMappingURL=plan.js.map

package/dist/animate/plan.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/plan.ts"],
+  "sourcesContent": ["import type { AnimationOptions } from \"#/animate/types.ts\";\nimport { spring } from \"#/generators/spring.ts\";\nimport { tween } from \"#/generators/tween.ts\";\nimport type { Generator } from \"#/generators/types.ts\";\n\nconst DEFAULT_TWEEN_DURATION = 0.3;\n\n/**\n * The motion of one channel, as a generator. Two numbers spring in their own\n * units, so the velocity a value already has carries into the new motion.\n * Anything else (colours, paths, several keyframes) moves a position along\n * the keyframe list \u2014 0 at the first, 1 at the second\u2026 \u2014 and the caller mixes\n * the keyframes at that position.\n */\nexport function planGenerator(\n\tkeyframes: readonly unknown[],\n\toptions: AnimationOptions,\n\tvelocity = 0,\n): { readonly generator: Generator; readonly positional: boolean } {\n\tconst numeric = keyframes.every((frame) => typeof frame === \"number\");\n\tconst springs =\n\t\toptions.type !== \"tween\" && keyframes.length === 2 && !options.ease;\n\tif (numeric) {\n\t\tconst values = keyframes as readonly number[];\n\t\tconst generator = springs\n\t\t\t? spring({\n\t\t\t\t\t...options,\n\t\t\t\t\tfrom: values[0] ?? 0,\n\t\t\t\t\tto: values[1] ?? 0,\n\t\t\t\t\tvelocity: options.velocity ?? velocity,\n\t\t\t\t})\n\t\t\t: tween({\n\t\t\t\t\tkeyframes: values,\n\t\t\t\t\tduration: options.duration ?? DEFAULT_TWEEN_DURATION,\n\t\t\t\t\tease: options.ease,\n\t\t\t\t\ttimes: options.times,\n\t\t\t\t});\n\t\treturn { generator, positional: false };\n\t}\n\tconst positions = keyframes.map((_frame, index) => index);\n\tconst generator = springs\n\t\t? spring({ ...options, from: 0, to: 1 })\n\t\t: tween({\n\t\t\t\tkeyframes: positions,\n\t\t\t\tduration: options.duration ?? DEFAULT_TWEEN_DURATION,\n\t\t\t\tease: options.ease,\n\t\t\t\ttimes: options.times,\n\t\t\t});\n\treturn { generator, positional: true };\n}\n\n/** The elapsed time within the current repetition, playing backwards on odd ones when they reverse. */\nexport function iterationTime(\n\telapsed: number,\n\tduration: number,\n\toptions: AnimationOptions,\n): number {\n\tconst repeat = options.repeat ?? 0;\n\tif (repeat === 0 || duration === 0) return Math.min(elapsed, duration);\n\tconst total = duration * (repeat + 1);\n\tconst clamped = Math.min(elapsed, total);\n\tconst iteration = Math.min(Math.floor(clamped / duration), repeat);\n\tconst within = clamped - iteration * duration;\n\treturn options.repeatType === \"reverse\" && iteration % 2 === 1\n\t\t? duration - within\n\t\t: within;\n}\n\nexport function totalDuration(\n\tduration: number,\n\toptions: AnimationOptions,\n): number {\n\treturn duration * ((options.repeat ?? 0) + 1);\n}\n"],
+  "mappings": "AACA,SAAS,cAAc;AACvB,SAAS,aAAa;AAGtB,MAAM,yBAAyB;AASxB,SAAS,cACf,WACA,SACA,WAAW,GACuD;AAClE,QAAM,UAAU,UAAU,MAAM,CAAC,UAAU,OAAO,UAAU,QAAQ;AACpE,QAAM,UACL,QAAQ,SAAS,WAAW,UAAU,WAAW,KAAK,CAAC,QAAQ;AAChE,MAAI,SAAS;AACZ,UAAM,SAAS;AACf,UAAMA,aAAY,UACf,OAAO;AAAA,MACP,GAAG;AAAA,MACH,MAAM,OAAO,CAAC,KAAK;AAAA,MACnB,IAAI,OAAO,CAAC,KAAK;AAAA,MACjB,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAC,IACA,MAAM;AAAA,MACN,WAAW;AAAA,MACX,UAAU,QAAQ,YAAY;AAAA,MAC9B,MAAM,QAAQ;AAAA,MACd,OAAO,QAAQ;AAAA,IAChB,CAAC;AACH,WAAO,EAAE,WAAAA,YAAW,YAAY,MAAM;AAAA,EACvC;AACA,QAAM,YAAY,UAAU,IAAI,CAAC,QAAQ,UAAU,KAAK;AACxD,QAAM,YAAY,UACf,OAAO,EAAE,GAAG,SAAS,MAAM,GAAG,IAAI,EAAE,CAAC,IACrC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU,QAAQ,YAAY;AAAA,IAC9B,MAAM,QAAQ;AAAA,IACd,OAAO,QAAQ;AAAA,EAChB,CAAC;AACH,SAAO,EAAE,WAAW,YAAY,KAAK;AACtC;AAGO,SAAS,cACf,SACA,UACA,SACS;AACT,QAAM,SAAS,QAAQ,UAAU;AACjC,MAAI,WAAW,KAAK,aAAa,EAAG,QAAO,KAAK,IAAI,SAAS,QAAQ;AACrE,QAAM,QAAQ,YAAY,SAAS;AACnC,QAAM,UAAU,KAAK,IAAI,SAAS,KAAK;AACvC,QAAM,YAAY,KAAK,IAAI,KAAK,MAAM,UAAU,QAAQ,GAAG,MAAM;AACjE,QAAM,SAAS,UAAU,YAAY;AACrC,SAAO,QAAQ,eAAe,aAAa,YAAY,MAAM,IAC1D,WAAW,SACX;AACJ;AAEO,SAAS,cACf,UACA,SACS;AACT,SAAO,aAAa,QAAQ,UAAU,KAAK;AAC5C;",
+  "names": ["generator"]
+}

package/dist/animate/style.d.ts

@@ -0,0 +1,27 @@
+import type { KeyframeValue } from "./types.js";
+type TransformProperty = "translate" | "scale" | "rotate";
+interface TransformChannel {
+    readonly property: TransformProperty;
+    readonly unit: string;
+    readonly identity: number;
+    /** The channel alone as a value of its property, the other axes at identity. */
+    readonly alone: (value: string) => string;
+}
+/**
+ * The independent transforms. Each animates its CSS property alone with
+ * `composite: "add"`, so `x` and `y` run as two compositor animations that
+ * sum, and one can be interrupted without touching the other.
+ */
+export declare const TRANSFORMS: Readonly<Record<string, TransformChannel>>;
+/** A keyframe as CSS: numbers take the property's unit. */
+export declare function withUnit(key: string, value: KeyframeValue): string;
+export declare function committedTransform(element: Element, key: string): number;
+/** Writes the committed transforms inline, with every animating channel at its identity. */
+export declare function writeTransforms(element: Element): void;
+export declare function beginTransform(element: Element, key: string): void;
+export declare function commitTransform(element: Element, key: string, value: KeyframeValue): void;
+export declare function cssName(key: string): string;
+/** Moves things on screen, as opposed to fading or tinting them: what reduced motion turns off. */
+export declare function isMovement(key: string): boolean;
+export {};
+//# sourceMappingURL=style.d.ts.map

package/dist/animate/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/animate/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,KAAK,iBAAiB,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,UAAU,gBAAgB;IACzB,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAuBjE,CAAC;AAiBF,2DAA2D;AAC3D,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,MAAM,CAMlE;AAkBD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAKxE;AASD,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,QAO/C;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,QAG3D;AAED,wBAAgB,eAAe,CAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,aAAa,QAKpB;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI3C;AAED,mGAAmG;AACnG,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAE/C"}

package/dist/animate/style.js

@@ -0,0 +1,96 @@
+const TRANSFORMS = {
+  x: { property: "translate", unit: "px", identity: 0, alone: (v) => `${v}` },
+  y: {
+    property: "translate",
+    unit: "px",
+    identity: 0,
+    alone: (v) => `0px ${v}`
+  },
+  z: {
+    property: "translate",
+    unit: "px",
+    identity: 0,
+    alone: (v) => `0px 0px ${v}`
+  },
+  scale: { property: "scale", unit: "", identity: 1, alone: (v) => `${v}` },
+  scaleX: { property: "scale", unit: "", identity: 1, alone: (v) => `${v} 1` },
+  scaleY: { property: "scale", unit: "", identity: 1, alone: (v) => `1 ${v}` },
+  rotate: {
+    property: "rotate",
+    unit: "deg",
+    identity: 0,
+    alone: (v) => `${v}`
+  }
+};
+const UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "zIndex",
+  "fontWeight",
+  "lineHeight",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "fillOpacity",
+  "strokeOpacity",
+  "strokeMiterlimit",
+  "aspectRatio",
+  "pathLength"
+]);
+function withUnit(key, value) {
+  if (typeof value === "string") return value;
+  const unit = TRANSFORMS[key]?.unit ?? (UNITLESS.has(key) || key.startsWith("--") ? "" : "px");
+  return `${value}${unit}`;
+}
+const committed = /* @__PURE__ */ new WeakMap();
+const animating = /* @__PURE__ */ new WeakMap();
+function entries(map, element, fresh) {
+  const existing = map.get(element);
+  if (existing) return existing;
+  const created = fresh();
+  map.set(element, created);
+  return created;
+}
+function committedTransform(element, key) {
+  const value = committed.get(element)?.get(key);
+  return typeof value === "number" ? value : Number.parseFloat(value ?? "") || (TRANSFORMS[key]?.identity ?? 0);
+}
+function channel(element, key) {
+  const channelDef = TRANSFORMS[key];
+  if (animating.get(element)?.has(key))
+    return `${channelDef.identity}${channelDef.unit}`;
+  return withUnit(key, committed.get(element)?.get(key) ?? channelDef.identity);
+}
+function writeTransforms(element) {
+  const style = element.style;
+  const at = (key) => channel(element, key);
+  style.translate = `${at("x")} ${at("y")} ${at("z")}`;
+  const uniform = Number.parseFloat(at("scale"));
+  style.scale = `${uniform * Number.parseFloat(at("scaleX"))} ${uniform * Number.parseFloat(at("scaleY"))}`;
+  style.rotate = at("rotate");
+}
+function beginTransform(element, key) {
+  entries(animating, element, () => /* @__PURE__ */ new Set()).add(key);
+  writeTransforms(element);
+}
+function commitTransform(element, key, value) {
+  entries(committed, element, () => /* @__PURE__ */ new Map()).set(key, value);
+  animating.get(element)?.delete(key);
+  writeTransforms(element);
+}
+function cssName(key) {
+  return key.startsWith("--") ? key : key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function isMovement(key) {
+  return !/opacity|color|fill|stroke$|filter/i.test(key);
+}
+export {
+  TRANSFORMS,
+  beginTransform,
+  commitTransform,
+  committedTransform,
+  cssName,
+  isMovement,
+  withUnit,
+  writeTransforms
+};
+//# sourceMappingURL=style.js.map

package/dist/animate/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/style.ts"],
+  "sourcesContent": ["import type { KeyframeValue } from \"#/animate/types.ts\";\n\ntype TransformProperty = \"translate\" | \"scale\" | \"rotate\";\n\ninterface TransformChannel {\n\treadonly property: TransformProperty;\n\treadonly unit: string;\n\treadonly identity: number;\n\t/** The channel alone as a value of its property, the other axes at identity. */\n\treadonly alone: (value: string) => string;\n}\n\n/**\n * The independent transforms. Each animates its CSS property alone with\n * `composite: \"add\"`, so `x` and `y` run as two compositor animations that\n * sum, and one can be interrupted without touching the other.\n */\nexport const TRANSFORMS: Readonly<Record<string, TransformChannel>> = {\n\tx: { property: \"translate\", unit: \"px\", identity: 0, alone: (v) => `${v}` },\n\ty: {\n\t\tproperty: \"translate\",\n\t\tunit: \"px\",\n\t\tidentity: 0,\n\t\talone: (v) => `0px ${v}`,\n\t},\n\tz: {\n\t\tproperty: \"translate\",\n\t\tunit: \"px\",\n\t\tidentity: 0,\n\t\talone: (v) => `0px 0px ${v}`,\n\t},\n\tscale: { property: \"scale\", unit: \"\", identity: 1, alone: (v) => `${v}` },\n\tscaleX: { property: \"scale\", unit: \"\", identity: 1, alone: (v) => `${v} 1` },\n\tscaleY: { property: \"scale\", unit: \"\", identity: 1, alone: (v) => `1 ${v}` },\n\trotate: {\n\t\tproperty: \"rotate\",\n\t\tunit: \"deg\",\n\t\tidentity: 0,\n\t\talone: (v) => `${v}`,\n\t},\n};\n\nconst UNITLESS = new Set([\n\t\"opacity\",\n\t\"zIndex\",\n\t\"fontWeight\",\n\t\"lineHeight\",\n\t\"flexGrow\",\n\t\"flexShrink\",\n\t\"order\",\n\t\"fillOpacity\",\n\t\"strokeOpacity\",\n\t\"strokeMiterlimit\",\n\t\"aspectRatio\",\n\t\"pathLength\",\n]);\n\n/** A keyframe as CSS: numbers take the property's unit. */\nexport function withUnit(key: string, value: KeyframeValue): string {\n\tif (typeof value === \"string\") return value;\n\tconst unit =\n\t\tTRANSFORMS[key]?.unit ??\n\t\t(UNITLESS.has(key) || key.startsWith(\"--\") ? \"\" : \"px\");\n\treturn `${value}${unit}`;\n}\n\n/** Committed transform values per element, the ones no animation is driving. */\nconst committed = new WeakMap<Element, Map<string, KeyframeValue>>();\nconst animating = new WeakMap<Element, Set<string>>();\n\nfunction entries<T>(\n\tmap: WeakMap<Element, T>,\n\telement: Element,\n\tfresh: () => T,\n) {\n\tconst existing = map.get(element);\n\tif (existing) return existing;\n\tconst created = fresh();\n\tmap.set(element, created);\n\treturn created;\n}\n\nexport function committedTransform(element: Element, key: string): number {\n\tconst value = committed.get(element)?.get(key);\n\treturn typeof value === \"number\"\n\t\t? value\n\t\t: Number.parseFloat(value ?? \"\") || (TRANSFORMS[key]?.identity ?? 0);\n}\n\nfunction channel(element: Element, key: string): string {\n\tconst channelDef = TRANSFORMS[key] as TransformChannel;\n\tif (animating.get(element)?.has(key))\n\t\treturn `${channelDef.identity}${channelDef.unit}`;\n\treturn withUnit(key, committed.get(element)?.get(key) ?? channelDef.identity);\n}\n\n/** Writes the committed transforms inline, with every animating channel at its identity. */\nexport function writeTransforms(element: Element) {\n\tconst style = (element as HTMLElement).style;\n\tconst at = (key: string) => channel(element, key);\n\tstyle.translate = `${at(\"x\")} ${at(\"y\")} ${at(\"z\")}`;\n\tconst uniform = Number.parseFloat(at(\"scale\"));\n\tstyle.scale = `${uniform * Number.parseFloat(at(\"scaleX\"))} ${uniform * Number.parseFloat(at(\"scaleY\"))}`;\n\tstyle.rotate = at(\"rotate\");\n}\n\nexport function beginTransform(element: Element, key: string) {\n\tentries(animating, element, () => new Set()).add(key);\n\twriteTransforms(element);\n}\n\nexport function commitTransform(\n\telement: Element,\n\tkey: string,\n\tvalue: KeyframeValue,\n) {\n\tentries(committed, element, () => new Map()).set(key, value);\n\tanimating.get(element)?.delete(key);\n\twriteTransforms(element);\n}\n\nexport function cssName(key: string): string {\n\treturn key.startsWith(\"--\")\n\t\t? key\n\t\t: key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\n/** Moves things on screen, as opposed to fading or tinting them: what reduced motion turns off. */\nexport function isMovement(key: string): boolean {\n\treturn !/opacity|color|fill|stroke$|filter/i.test(key);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/animate/types.d.ts

@@ -0,0 +1,62 @@
+import type { ReducedMotionPolicy } from "../accessibility/reduced-motion.js";
+import type { EasingDefinition } from "../easing/types.js";
+import type { SpringOptions } from "../generators/types.js";
+export type Delay = number | ((index: number, total: number) => number);
+export interface AnimationOptions extends SpringOptions {
+    /**
+     * "spring" by default for two numeric keyframes, "tween" otherwise. A tween
+     * lasts `duration` seconds (0.3 by default); a spring's `duration` is its
+     * perceived duration.
+     */
+    readonly type?: "spring" | "tween";
+    readonly delay?: Delay;
+    readonly ease?: EasingDefinition | readonly EasingDefinition[];
+    /** Where each keyframe sits, 0 to 1, for a tween over several keyframes. */
+    readonly times?: readonly number[];
+    readonly repeat?: number;
+    readonly repeatType?: "loop" | "reverse";
+    /** Units per second, for a spring. Defaults to the velocity the value already has. */
+    readonly velocity?: number;
+    /** Overrides the global policy for this animation. */
+    readonly reducedMotion?: ReducedMotionPolicy;
+}
+export interface ValueAnimationOptions<T> extends AnimationOptions {
+    readonly onUpdate?: (value: T) => void;
+    readonly onComplete?: () => void;
+}
+export type AnimationState = "running" | "paused" | "finished";
+/**
+ * What every `animate` call returns, whatever drives it. Awaitable: it
+ * resolves when the animation finishes, is stopped or is cancelled.
+ */
+export interface AnimationControls extends PromiseLike<void> {
+    readonly finished: Promise<void>;
+    /** Seconds since the start, delay included. Settable to scrub. */
+    time: number;
+    speed: number;
+    /** Seconds from the start to the end, delay included. */
+    readonly duration: number;
+    readonly state: AnimationState;
+    play(): void;
+    pause(): void;
+    /** Stops where it is: the value stays as painted. */
+    stop(): void;
+    /** Stops and goes back to where it started. */
+    cancel(): void;
+    /** Jumps to the end. */
+    complete(): void;
+    /** Lets a native scroll or view timeline drive it; false when part of it runs in JavaScript. */
+    attachTimeline(timeline: AnimationTimeline): boolean;
+}
+export type KeyframeValue = number | string;
+export type Keyframes<T = KeyframeValue> = T | readonly T[];
+/**
+ * DOM keyframes: any CSS property (camelCase), a CSS variable (`--name`),
+ * the independent transforms (`x`, `y`, `z`, `scale`, `scaleX`, `scaleY`,
+ * `rotate`), or an SVG attribute. A single value animates from the current
+ * one; an array lists every keyframe. Numbers take the property's unit (px,
+ * deg) when it has one.
+ */
+export type DOMKeyframes = Readonly<Record<string, Keyframes>>;
+export type ElementTarget = Element | string | ArrayLike<Element>;
+//# sourceMappingURL=types.d.ts.map

package/dist/animate/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/animate/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAExE,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACtD;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,gBAAgB,GAAG,SAAS,gBAAgB,EAAE,CAAC;IAC/D,4EAA4E;IAC5E,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,sFAAsF;IACtF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAC;CAC7C;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,CAAE,SAAQ,gBAAgB;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW,CAAC,IAAI,CAAC;IAC3D,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,qDAAqD;IACrD,IAAI,IAAI,IAAI,CAAC;IACb,+CAA+C;IAC/C,MAAM,IAAI,IAAI,CAAC;IACf,wBAAwB;IACxB,QAAQ,IAAI,IAAI,CAAC;IACjB,gGAAgG;IAChG,cAAc,CAAC,QAAQ,EAAE,iBAAiB,GAAG,OAAO,CAAC;CACrD;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAC5C,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,aAAa,IAAI,CAAC,GAAG,SAAS,CAAC,EAAE,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC"}

package/dist/animate/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/animate/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/animate/value.d.ts

@@ -0,0 +1,13 @@
+import type { AnimationControls, Keyframes, ValueAnimationOptions } from "./types.js";
+import type { MotionValue } from "../value/motion-value.js";
+/**
+ * A motion value towards a target on the frame loop. Whatever the value is
+ * doing now — mid-spring, dragged — is where the new animation starts, at
+ * the same speed.
+ */
+export declare function animateMotionValue<T>(value: MotionValue<T>, target: Keyframes<T>, options?: ValueAnimationOptions<T>): AnimationControls;
+/** Each numeric or mixable key of a plain object, written back into the object. */
+export declare function animateObject<T extends object>(object: T, keyframes: {
+    readonly [K in keyof T]?: Keyframes<T[K]>;
+}, options?: ValueAnimationOptions<T>): AnimationControls;
+//# sourceMappingURL=value.d.ts.map

package/dist/animate/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../src/animate/value.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACX,iBAAiB,EAEjB,SAAS,EACT,qBAAqB,EACrB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQ3D;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EACnC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EACpB,OAAO,GAAE,qBAAqB,CAAC,CAAC,CAAM,GACpC,iBAAiB,CAwBnB;AAED,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC7C,MAAM,EAAE,CAAC,EACT,SAAS,EAAE;IAAE,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,EACxD,OAAO,GAAE,qBAAqB,CAAC,CAAC,CAAM,GACpC,iBAAiB,CAkCnB"}

package/dist/animate/value.js

@@ -0,0 +1,71 @@
+import { shouldReduceMotion } from "../accessibility/reduced-motion.js";
+import { finishedControls, groupControls } from "./controls.js";
+import { jsAnimation } from "./js-animation.js";
+import { cancelFrame, frame } from "../frame/frame.js";
+function startDelay(options) {
+  return typeof options.delay === "function" ? options.delay(0, 1) : options.delay ?? 0;
+}
+function animateMotionValue(value, target, options = {}) {
+  const list = Array.isArray(target) ? target : [target];
+  const keyframes = list.length > 1 ? list : [value.get(), list[0]];
+  const velocity = value.getVelocity();
+  value.stop();
+  if (shouldReduceMotion(options.reducedMotion)) {
+    value.jump(keyframes.at(-1));
+    options.onUpdate?.(value.get());
+    options.onComplete?.();
+    return finishedControls();
+  }
+  const animation = jsAnimation({
+    keyframes,
+    options,
+    delay: startDelay(options),
+    velocity: list.length > 1 ? 0 : velocity,
+    apply(next) {
+      value.set(next);
+      options.onUpdate?.(next);
+    },
+    onComplete: options.onComplete
+  });
+  value.start(animation);
+  return animation;
+}
+function animateObject(object, keyframes, options = {}) {
+  const record = object;
+  const reduce = shouldReduceMotion(options.reducedMotion);
+  const controls = Object.entries(keyframes).map(([key, target]) => {
+    const list = Array.isArray(target) ? target : [target];
+    const frames = list.length > 1 ? list : [record[key], list[0]];
+    if (reduce) {
+      record[key] = frames.at(-1);
+      return finishedControls();
+    }
+    return jsAnimation({
+      keyframes: frames,
+      options,
+      delay: startDelay(options),
+      velocity: 0,
+      apply(next) {
+        record[key] = next;
+      }
+    });
+  });
+  if (reduce) options.onUpdate?.(object);
+  const group = groupControls(controls);
+  const notify = options.onUpdate;
+  if (notify && !reduce) {
+    const each = () => notify(object);
+    frame.render(each, true);
+    group.finished.then(() => {
+      cancelFrame(each);
+      notify(object);
+    });
+  }
+  group.finished.then(() => options.onComplete?.());
+  return group;
+}
+export {
+  animateMotionValue,
+  animateObject
+};
+//# sourceMappingURL=value.js.map

package/dist/animate/value.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/value.ts"],
+  "sourcesContent": ["import { shouldReduceMotion } from \"#/accessibility/reduced-motion.ts\";\nimport { finishedControls, groupControls } from \"#/animate/controls.ts\";\nimport { jsAnimation } from \"#/animate/js-animation.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tKeyframes,\n\tValueAnimationOptions,\n} from \"#/animate/types.ts\";\nimport { cancelFrame, frame } from \"#/frame/frame.ts\";\nimport type { MotionValue } from \"#/value/motion-value.ts\";\n\nfunction startDelay(options: AnimationOptions): number {\n\treturn typeof options.delay === \"function\"\n\t\t? options.delay(0, 1)\n\t\t: (options.delay ?? 0);\n}\n\n/**\n * A motion value towards a target on the frame loop. Whatever the value is\n * doing now \u2014 mid-spring, dragged \u2014 is where the new animation starts, at\n * the same speed.\n */\nexport function animateMotionValue<T>(\n\tvalue: MotionValue<T>,\n\ttarget: Keyframes<T>,\n\toptions: ValueAnimationOptions<T> = {},\n): AnimationControls {\n\tconst list: readonly T[] = Array.isArray(target) ? target : [target as T];\n\tconst keyframes = list.length > 1 ? list : [value.get(), list[0] as T];\n\tconst velocity = value.getVelocity();\n\tvalue.stop();\n\tif (shouldReduceMotion(options.reducedMotion)) {\n\t\tvalue.jump(keyframes.at(-1) as T);\n\t\toptions.onUpdate?.(value.get());\n\t\toptions.onComplete?.();\n\t\treturn finishedControls();\n\t}\n\tconst animation = jsAnimation({\n\t\tkeyframes,\n\t\toptions,\n\t\tdelay: startDelay(options),\n\t\tvelocity: list.length > 1 ? 0 : velocity,\n\t\tapply(next: T) {\n\t\t\tvalue.set(next);\n\t\t\toptions.onUpdate?.(next);\n\t\t},\n\t\tonComplete: options.onComplete,\n\t});\n\tvalue.start(animation);\n\treturn animation;\n}\n\n/** Each numeric or mixable key of a plain object, written back into the object. */\nexport function animateObject<T extends object>(\n\tobject: T,\n\tkeyframes: { readonly [K in keyof T]?: Keyframes<T[K]> },\n\toptions: ValueAnimationOptions<T> = {},\n): AnimationControls {\n\tconst record = object as Record<string, unknown>;\n\tconst reduce = shouldReduceMotion(options.reducedMotion);\n\tconst controls = Object.entries(keyframes).map(([key, target]) => {\n\t\tconst list: readonly unknown[] = Array.isArray(target) ? target : [target];\n\t\tconst frames = list.length > 1 ? list : [record[key], list[0]];\n\t\tif (reduce) {\n\t\t\trecord[key] = frames.at(-1);\n\t\t\treturn finishedControls();\n\t\t}\n\t\treturn jsAnimation({\n\t\t\tkeyframes: frames,\n\t\t\toptions,\n\t\t\tdelay: startDelay(options),\n\t\t\tvelocity: 0,\n\t\t\tapply(next) {\n\t\t\t\trecord[key] = next;\n\t\t\t},\n\t\t});\n\t});\n\tif (reduce) options.onUpdate?.(object);\n\t// One update per frame for the whole object, after every key has moved.\n\tconst group = groupControls(controls);\n\tconst notify = options.onUpdate;\n\tif (notify && !reduce) {\n\t\tconst each = () => notify(object);\n\t\tframe.render(each, true);\n\t\tgroup.finished.then(() => {\n\t\t\tcancelFrame(each);\n\t\t\tnotify(object);\n\t\t});\n\t}\n\tgroup.finished.then(() => options.onComplete?.());\n\treturn group;\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,mBAAmB;AAO5B,SAAS,aAAa,aAAa;AAGnC,SAAS,WAAW,SAAmC;AACtD,SAAO,OAAO,QAAQ,UAAU,aAC7B,QAAQ,MAAM,GAAG,CAAC,IACjB,QAAQ,SAAS;AACtB;AAOO,SAAS,mBACf,OACA,QACA,UAAoC,CAAC,GACjB;AACpB,QAAM,OAAqB,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAW;AACxE,QAAM,YAAY,KAAK,SAAS,IAAI,OAAO,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAM;AACrE,QAAM,WAAW,MAAM,YAAY;AACnC,QAAM,KAAK;AACX,MAAI,mBAAmB,QAAQ,aAAa,GAAG;AAC9C,UAAM,KAAK,UAAU,GAAG,EAAE,CAAM;AAChC,YAAQ,WAAW,MAAM,IAAI,CAAC;AAC9B,YAAQ,aAAa;AACrB,WAAO,iBAAiB;AAAA,EACzB;AACA,QAAM,YAAY,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,OAAO,WAAW,OAAO;AAAA,IACzB,UAAU,KAAK,SAAS,IAAI,IAAI;AAAA,IAChC,MAAM,MAAS;AACd,YAAM,IAAI,IAAI;AACd,cAAQ,WAAW,IAAI;AAAA,IACxB;AAAA,IACA,YAAY,QAAQ;AAAA,EACrB,CAAC;AACD,QAAM,MAAM,SAAS;AACrB,SAAO;AACR;AAGO,SAAS,cACf,QACA,WACA,UAAoC,CAAC,GACjB;AACpB,QAAM,SAAS;AACf,QAAM,SAAS,mBAAmB,QAAQ,aAAa;AACvD,QAAM,WAAW,OAAO,QAAQ,SAAS,EAAE,IAAI,CAAC,CAAC,KAAK,MAAM,MAAM;AACjE,UAAM,OAA2B,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACzE,UAAM,SAAS,KAAK,SAAS,IAAI,OAAO,CAAC,OAAO,GAAG,GAAG,KAAK,CAAC,CAAC;AAC7D,QAAI,QAAQ;AACX,aAAO,GAAG,IAAI,OAAO,GAAG,EAAE;AAC1B,aAAO,iBAAiB;AAAA,IACzB;AACA,WAAO,YAAY;AAAA,MAClB,WAAW;AAAA,MACX;AAAA,MACA,OAAO,WAAW,OAAO;AAAA,MACzB,UAAU;AAAA,MACV,MAAM,MAAM;AACX,eAAO,GAAG,IAAI;AAAA,MACf;AAAA,IACD,CAAC;AAAA,EACF,CAAC;AACD,MAAI,OAAQ,SAAQ,WAAW,MAAM;AAErC,QAAM,QAAQ,cAAc,QAAQ;AACpC,QAAM,SAAS,QAAQ;AACvB,MAAI,UAAU,CAAC,QAAQ;AACtB,UAAM,OAAO,MAAM,OAAO,MAAM;AAChC,UAAM,OAAO,MAAM,IAAI;AACvB,UAAM,SAAS,KAAK,MAAM;AACzB,kBAAY,IAAI;AAChB,aAAO,MAAM;AAAA,IACd,CAAC;AAAA,EACF;AACA,QAAM,SAAS,KAAK,MAAM,QAAQ,aAAa,CAAC;AAChD,SAAO;AACR;",
+  "names": []
+}

package/dist/animate/waapi.d.ts

@@ -0,0 +1,20 @@
+import type { JsAnimation } from "./js-animation.js";
+import type { AnimationOptions, KeyframeValue } from "./types.js";
+export interface WaapiConfig {
+    readonly element: Element;
+    /** The CSS property the browser animates. */
+    readonly property: string;
+    readonly keyframes: readonly KeyframeValue[];
+    /** A keyframe as the property's CSS value. */
+    format(value: KeyframeValue): string;
+    readonly options: AnimationOptions;
+    readonly delay: number;
+    readonly velocity: number;
+    readonly composite: CompositeOperation;
+    /** Writes the value that stays once the animation is gone. */
+    commit(value: KeyframeValue): void;
+    onComplete?(): void;
+}
+/** One CSS property of one element, played by the Web Animations API. */
+export declare function waapiAnimation(config: WaapiConfig): JsAnimation<KeyframeValue>;
+//# sourceMappingURL=waapi.d.ts.map

package/dist/animate/waapi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waapi.d.ts","sourceRoot":"","sources":["../../src/animate/waapi.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,OAAO,KAAK,EACX,gBAAgB,EAEhB,aAAa,EACb,MAAM,oBAAoB,CAAC;AAM5B,MAAM,WAAW,WAAW;IAC3B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,SAAS,aAAa,EAAE,CAAC;IAC7C,8CAA8C;IAC9C,MAAM,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,8DAA8D;IAC9D,MAAM,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,UAAU,CAAC,IAAI,IAAI,CAAC;CACpB;AA0ED,yEAAyE;AACzE,wBAAgB,cAAc,CAC7B,MAAM,EAAE,WAAW,GACjB,WAAW,CAAC,aAAa,CAAC,CA0G5B"}