@voila.dev/motion 0.0.0-stage → 5.0.113

package/README.md

@@ -1,3 +1,106 @@
-# Temporary Holding Version
+# @voila.dev/motion
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Animation with no dependency. Springs on elements become a CSS `linear()`
+easing that the browser plays through the Web Animations API, off the main
+thread. Everything the browser can't animate runs on one shared frame loop.
+The API follows [Motion](https://motion.dev), and each module is short enough
+to read in one sitting.
+
+```ts
+import { animate, stagger } from "@voila.dev/motion";
+
+animate(element, { x: 120, opacity: 1 }, { duration: 0.4, bounce: 0.2 });
+animate("li", { y: [20, 0], opacity: [0, 1] }, { delay: stagger(0.04) });
+await animate(card, { scale: 1.05 });
+```
+
+```tsx
+import { Presence, useAnimate, useSpring, useTransform } from "@voila.dev/motion/react";
+
+const [scope, animate] = useAnimate();
+const x = useSpring(target, { duration: 0.3 });
+const opacity = useTransform(x, [0, 100], [1, 0]);
+
+<Presence>{open && <Dialog key="d" exit={(element) => animate(element, { opacity: 0 })} />}</Presence>;
+```
+
+## Entries
+
+| Import | What it brings | Gzip |
+| --- | --- | --- |
+| `@voila.dev/motion/dom` | `animate` for elements only, every property played by the browser, plus `spring` and `stagger` | ≤ 5 KB |
+| `@voila.dev/motion` | The full `animate` (elements, motion values, plain values, objects, SVG morphing, sequences), interpolation, motion values, the frame loop, `inView`, `scroll`, `resize`, reduced motion | about 11 KB |
+| `@voila.dev/motion/react` | `useAnimate`, `useMotionValue`, `useSpring`, `useTransform`, `useReducedMotion`, `Presence`, `usePresence` | about 12.5 KB with the core |
+
+React 19 is an optional peer, used only by `/react`. The core never imports it.
+
+## The engine
+
+- **Elements.** Each property is one browser animation. Two numeric keyframes
+  spring by default: the spring is sampled into a `linear()` easing, so the
+  compositor plays the exact curve. Without `linear()` support, a numeric
+  spring is sampled into keyframes instead. A tween uses its easing, written as CSS
+  when CSS has it.
+- **Independent transforms.** `x`, `y`, `z`, `scale`, `scaleX`, `scaleY` and
+  `rotate` each animate the `translate`, `scale` or `rotate` property alone,
+  with `composite: "add"`. They run on the compositor, add up, and stop
+  independently. When they finish, their values are written into the
+  element's inline `translate`, `scale` and `rotate`: those three styles
+  belong to motion on an element it animates.
+- **Interruption.** A new animation on a property starts from what is
+  painted, at the speed the last one had. For numbers, motion keeps the
+  generator behind each browser animation and reads both from it; for
+  colours and other strings, it asks the browser what it painted.
+- **The frame loop.** Motion values, plain values, objects, SVG attributes
+  (`d` morphs between any two shapes) and CSS variables run on one
+  `requestAnimationFrame` loop, in `read → update → render` phases.
+- **Controls.** Every `animate` returns the same awaitable controls: `time`,
+  `speed`, `duration`, `play`, `pause`, `stop`, `cancel`, `complete`,
+  `finished`.
+
+## Modules
+
+```
+src/
+  easing/        cubicBezier, steps, the named easings, a spring as linear()
+  generators/    spring (closed form), tween, inertia: (t) => { value, velocity, done }
+  frame/         the shared loop and its injectable clock
+  value/         motionValue, transformValue
+  interpolate/   numbers, colours (oklab, or color-mix for var()), strings, arrays,
+                 objects, path morphing, mix, interpolate
+  animate/       routing, the WAAPI driver, the JS driver, controls
+  sequence/      timelines with `at`
+  stagger/       stagger(gap, { from, ease })
+  view/          inView, scroll (ScrollTimeline when it can), resize
+  accessibility/ the reduced-motion policy
+  react/         the hooks and Presence
+```
+
+## Reduced motion
+
+Under `prefers-reduced-motion: reduce`, movement jumps to its end. Opacity
+and colours still animate as a short tween with no bounce. Values and objects
+jump. `setReducedMotion("user" | "always" | "never")` sets the policy for the
+whole page (`"user"` by default), and `{ reducedMotion }` overrides it for
+one animation. `useReducedMotion()` follows both.
+
+## Server rendering
+
+Nothing touches `window` or `document` when a module loads, and the hooks
+render on the server. Animations start in effects.
+
+## Not in 1.0
+
+- **Layout animations (FLIP, shared layout).** They are a module the size of
+  this one. Worth adding once a kit component needs them, like an accordion
+  or a tabs indicator.
+- **Gestures (drag, hover, press).** They belong to the components that use
+  them.
+- **A `<motion.div>` component.** It is Motion's most popular API, but it
+  doubles the surface. `useAnimate` and `Presence` cover the same needs with
+  fewer concepts.
+
+## Size budget
+
+`bun run check-bundle` builds each entry in `scripts/bundle-entries` and fails
+past its gzip budget, or when an entry outside the React layer imports React.

package/dist/accessibility/reduced-motion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * "user" follows `prefers-reduced-motion`; "always" and "never" override it
+ * for the whole page, for an app with its own setting.
+ */
+export type ReducedMotionPolicy = "user" | "always" | "never";
+export declare function prefersReducedMotion(): boolean;
+export declare function reducedMotionPolicy(): ReducedMotionPolicy;
+/** `true`/`false` force it for one animation; a policy overrides the global one. */
+export declare function shouldReduceMotion(override?: ReducedMotionPolicy | boolean): boolean;
+export declare function setReducedMotion(next: ReducedMotionPolicy): void;
+/** Fires with the effective answer when the user's setting or the policy changes it. */
+export declare function onReducedMotionChange(listener: (reduced: boolean) => void): () => void;
+//# sourceMappingURL=reduced-motion.d.ts.map

package/dist/accessibility/reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduced-motion.d.ts","sourceRoot":"","sources":["../../src/accessibility/reduced-motion.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAgB9D,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAED,wBAAgB,mBAAmB,IAAI,mBAAmB,CAEzD;AAQD,oFAAoF;AACpF,wBAAgB,kBAAkB,CACjC,QAAQ,CAAC,EAAE,mBAAmB,GAAG,OAAO,GACtC,OAAO,CAGT;AAYD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAIhE;AAED,wFAAwF;AACxF,wBAAgB,qBAAqB,CACpC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GAClC,MAAM,IAAI,CAaZ"}

package/dist/accessibility/reduced-motion.js

@@ -0,0 +1,56 @@
+const QUERY = "(prefers-reduced-motion: reduce)";
+let policy = "user";
+const listeners = /* @__PURE__ */ new Set();
+let unwatch;
+function mediaQuery() {
+  return typeof window === "undefined" || typeof window.matchMedia !== "function" ? void 0 : window.matchMedia(QUERY);
+}
+function prefersReducedMotion() {
+  return mediaQuery()?.matches ?? false;
+}
+function reducedMotionPolicy() {
+  return policy;
+}
+const DECIDE = {
+  user: prefersReducedMotion,
+  always: () => true,
+  never: () => false
+};
+function shouldReduceMotion(override) {
+  if (typeof override === "boolean") return override;
+  return DECIDE[override ?? policy]();
+}
+function notify() {
+  const reduced = shouldReduceMotion();
+  for (const listener of listeners) listener(reduced);
+}
+function onMediaChange() {
+  if (policy === "user") notify();
+}
+function setReducedMotion(next) {
+  const before = shouldReduceMotion();
+  policy = next;
+  if (shouldReduceMotion() !== before) notify();
+}
+function onReducedMotionChange(listener) {
+  listeners.add(listener);
+  if (!unwatch) {
+    const query = mediaQuery();
+    query?.addEventListener("change", onMediaChange);
+    unwatch = () => query?.removeEventListener("change", onMediaChange);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size > 0) return;
+    unwatch?.();
+    unwatch = void 0;
+  };
+}
+export {
+  onReducedMotionChange,
+  prefersReducedMotion,
+  reducedMotionPolicy,
+  setReducedMotion,
+  shouldReduceMotion
+};
+//# sourceMappingURL=reduced-motion.js.map

package/dist/accessibility/reduced-motion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/accessibility/reduced-motion.ts"],
+  "sourcesContent": ["/**\n * \"user\" follows `prefers-reduced-motion`; \"always\" and \"never\" override it\n * for the whole page, for an app with its own setting.\n */\nexport type ReducedMotionPolicy = \"user\" | \"always\" | \"never\";\n\nconst QUERY = \"(prefers-reduced-motion: reduce)\";\n\nlet policy: ReducedMotionPolicy = \"user\";\nconst listeners = new Set<(reduced: boolean) => void>();\nlet unwatch: (() => void) | undefined;\n\n/** Read on every call, never at import: the server has no `matchMedia`. */\nfunction mediaQuery(): MediaQueryList | undefined {\n\treturn typeof window === \"undefined\" ||\n\t\ttypeof window.matchMedia !== \"function\"\n\t\t? undefined\n\t\t: window.matchMedia(QUERY);\n}\n\nexport function prefersReducedMotion(): boolean {\n\treturn mediaQuery()?.matches ?? false;\n}\n\nexport function reducedMotionPolicy(): ReducedMotionPolicy {\n\treturn policy;\n}\n\nconst DECIDE: Record<ReducedMotionPolicy, () => boolean> = {\n\tuser: prefersReducedMotion,\n\talways: () => true,\n\tnever: () => false,\n};\n\n/** `true`/`false` force it for one animation; a policy overrides the global one. */\nexport function shouldReduceMotion(\n\toverride?: ReducedMotionPolicy | boolean,\n): boolean {\n\tif (typeof override === \"boolean\") return override;\n\treturn DECIDE[override ?? policy]();\n}\n\nfunction notify(): void {\n\tconst reduced = shouldReduceMotion();\n\tfor (const listener of listeners) listener(reduced);\n}\n\n/** Under \"always\" or \"never\" the user's setting changes nothing. */\nfunction onMediaChange(): void {\n\tif (policy === \"user\") notify();\n}\n\nexport function setReducedMotion(next: ReducedMotionPolicy): void {\n\tconst before = shouldReduceMotion();\n\tpolicy = next;\n\tif (shouldReduceMotion() !== before) notify();\n}\n\n/** Fires with the effective answer when the user's setting or the policy changes it. */\nexport function onReducedMotionChange(\n\tlistener: (reduced: boolean) => void,\n): () => void {\n\tlisteners.add(listener);\n\tif (!unwatch) {\n\t\tconst query = mediaQuery();\n\t\tquery?.addEventListener(\"change\", onMediaChange);\n\t\tunwatch = () => query?.removeEventListener(\"change\", onMediaChange);\n\t}\n\treturn () => {\n\t\tlisteners.delete(listener);\n\t\tif (listeners.size > 0) return;\n\t\tunwatch?.();\n\t\tunwatch = undefined;\n\t};\n}\n"],
+  "mappings": "AAMA,MAAM,QAAQ;AAEd,IAAI,SAA8B;AAClC,MAAM,YAAY,oBAAI,IAAgC;AACtD,IAAI;AAGJ,SAAS,aAAyC;AACjD,SAAO,OAAO,WAAW,eACxB,OAAO,OAAO,eAAe,aAC3B,SACA,OAAO,WAAW,KAAK;AAC3B;AAEO,SAAS,uBAAgC;AAC/C,SAAO,WAAW,GAAG,WAAW;AACjC;AAEO,SAAS,sBAA2C;AAC1D,SAAO;AACR;AAEA,MAAM,SAAqD;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ,MAAM;AAAA,EACd,OAAO,MAAM;AACd;AAGO,SAAS,mBACf,UACU;AACV,MAAI,OAAO,aAAa,UAAW,QAAO;AAC1C,SAAO,OAAO,YAAY,MAAM,EAAE;AACnC;AAEA,SAAS,SAAe;AACvB,QAAM,UAAU,mBAAmB;AACnC,aAAW,YAAY,UAAW,UAAS,OAAO;AACnD;AAGA,SAAS,gBAAsB;AAC9B,MAAI,WAAW,OAAQ,QAAO;AAC/B;AAEO,SAAS,iBAAiB,MAAiC;AACjE,QAAM,SAAS,mBAAmB;AAClC,WAAS;AACT,MAAI,mBAAmB,MAAM,OAAQ,QAAO;AAC7C;AAGO,SAAS,sBACf,UACa;AACb,YAAU,IAAI,QAAQ;AACtB,MAAI,CAAC,SAAS;AACb,UAAM,QAAQ,WAAW;AACzB,WAAO,iBAAiB,UAAU,aAAa;AAC/C,cAAU,MAAM,OAAO,oBAAoB,UAAU,aAAa;AAAA,EACnE;AACA,SAAO,MAAM;AACZ,cAAU,OAAO,QAAQ;AACzB,QAAI,UAAU,OAAO,EAAG;AACxB,cAAU;AACV,cAAU;AAAA,EACX;AACD;",
+  "names": []
+}

package/dist/animate/animate.d.ts

@@ -0,0 +1,21 @@
+import type { AnimationControls, AnimationOptions, DOMKeyframes, ElementTarget, Keyframes, ValueAnimationOptions } from "./types.js";
+import { type Segment } from "../sequence/sequence.js";
+import { type MotionValue } from "../value/motion-value.js";
+export interface Animate {
+    /** Elements: a selector, an element or a list. Played by the browser where it can. */
+    (target: ElementTarget, keyframes: DOMKeyframes, options?: AnimationOptions): AnimationControls;
+    /** A motion value, from wherever it is now. */
+    <T>(value: MotionValue<T>, target: Keyframes<T>, options?: ValueAnimationOptions<T>): AnimationControls;
+    /** A number, a colour, a path… from one value to another, read in `onUpdate`. */
+    <T extends number | string>(from: T, to: Keyframes<T>, options: ValueAnimationOptions<T>): AnimationControls;
+    /** The keys of a plain object, written back into it. */
+    <T extends object>(object: T, keyframes: {
+        readonly [K in keyof T]?: Keyframes<T[K]>;
+    }, options?: ValueAnimationOptions<T>): AnimationControls;
+    /** A timeline of segments. */
+    (sequence: readonly Segment[], options?: AnimationOptions): AnimationControls;
+}
+/** `animate`, with selectors looked up inside `scope` (the whole document by default). */
+export declare function createAnimate(scope?: () => ParentNode | null): Animate;
+export declare const animate: Animate;
+//# sourceMappingURL=animate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../src/animate/animate.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAmB,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAEN,KAAK,WAAW,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,OAAO;IACvB,sFAAsF;IACtF,CACC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,YAAY,EACvB,OAAO,CAAC,EAAE,gBAAgB,GACxB,iBAAiB,CAAC;IACrB,+CAA+C;IAC/C,CAAC,CAAC,EACD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAChC,iBAAiB,CAAC;IACrB,iFAAiF;IACjF,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,IAAI,EAAE,CAAC,EACP,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,EAChB,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC/B,iBAAiB,CAAC;IACrB,wDAAwD;IACxD,CAAC,CAAC,SAAS,MAAM,EAChB,MAAM,EAAE,CAAC,EACT,SAAS,EAAE;QAAE,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAAE,EACxD,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAChC,iBAAiB,CAAC;IACrB,8BAA8B;IAC9B,CAAC,QAAQ,EAAE,SAAS,OAAO,EAAE,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC9E;AAkCD,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,CAwEtE;AAED,eAAO,MAAM,OAAO,EAAE,OAAyB,CAAC"}

package/dist/animate/animate.js

@@ -0,0 +1,76 @@
+import { animateElements } from "./dom.js";
+import { jsAnimation } from "./js-animation.js";
+import { animateMotionValue, animateObject } from "./value.js";
+import { animateSequence } from "../sequence/sequence.js";
+import {
+  isMotionValue,
+  motionValue
+} from "../value/motion-value.js";
+function isElementList(target) {
+  return typeof target === "object" && target !== null && "length" in target && Array.from(target).every(
+    (item) => typeof Element !== "undefined" && item instanceof Element
+  );
+}
+function isSegment(item) {
+  return typeof item === "string" || Array.isArray(item) || typeof item === "object" && item !== null && Object.getPrototypeOf(item) === Object.prototype && "name" in item;
+}
+function isSequence(target, second) {
+  return Array.isArray(target) && (second === void 0 || !Array.isArray(second)) && target.length > 0 && target.every(isSegment);
+}
+function createAnimate(scope) {
+  function elementsOf(target) {
+    if (typeof target === "string") {
+      const root = scope?.() ?? (typeof document === "undefined" ? null : document);
+      return root ? Array.from(root.querySelectorAll(target)) : [];
+    }
+    if (typeof Element !== "undefined" && target instanceof Element)
+      return [target];
+    return Array.from(target);
+  }
+  function animateOne(target, keyframes, options = {}) {
+    if (isMotionValue(target)) {
+      return animateMotionValue(
+        target,
+        keyframes,
+        options
+      );
+    }
+    const domKeyframes = typeof keyframes === "object" && keyframes !== null && !Array.isArray(keyframes);
+    if (domKeyframes && (typeof target === "string" || typeof Element !== "undefined" && target instanceof Element || isElementList(target))) {
+      return animateElements(
+        elementsOf(target),
+        keyframes,
+        options,
+        jsAnimation
+      );
+    }
+    if (typeof target === "number" || typeof target === "string") {
+      return animateMotionValue(
+        motionValue(target),
+        keyframes,
+        options
+      );
+    }
+    return animateObject(
+      target,
+      keyframes,
+      options
+    );
+  }
+  function targetsOf(target) {
+    const isDom = typeof target === "string" || typeof Element !== "undefined" && target instanceof Element || isElementList(target);
+    return isDom ? elementsOf(target) : [target];
+  }
+  return ((target, second, options) => isSequence(target, second) ? animateSequence(
+    target,
+    second ?? {},
+    animateOne,
+    targetsOf
+  ) : animateOne(target, second, options));
+}
+const animate = createAnimate();
+export {
+  animate,
+  createAnimate
+};
+//# sourceMappingURL=animate.js.map

package/dist/animate/animate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/animate.ts"],
+  "sourcesContent": ["import { animateElements } from \"#/animate/dom.ts\";\nimport { jsAnimation } from \"#/animate/js-animation.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tDOMKeyframes,\n\tElementTarget,\n\tKeyframes,\n\tValueAnimationOptions,\n} from \"#/animate/types.ts\";\nimport { animateMotionValue, animateObject } from \"#/animate/value.ts\";\nimport { animateSequence, type Segment } from \"#/sequence/sequence.ts\";\nimport {\n\tisMotionValue,\n\ttype MotionValue,\n\tmotionValue,\n} from \"#/value/motion-value.ts\";\n\nexport interface Animate {\n\t/** Elements: a selector, an element or a list. Played by the browser where it can. */\n\t(\n\t\ttarget: ElementTarget,\n\t\tkeyframes: DOMKeyframes,\n\t\toptions?: AnimationOptions,\n\t): AnimationControls;\n\t/** A motion value, from wherever it is now. */\n\t<T>(\n\t\tvalue: MotionValue<T>,\n\t\ttarget: Keyframes<T>,\n\t\toptions?: ValueAnimationOptions<T>,\n\t): AnimationControls;\n\t/** A number, a colour, a path\u2026 from one value to another, read in `onUpdate`. */\n\t<T extends number | string>(\n\t\tfrom: T,\n\t\tto: Keyframes<T>,\n\t\toptions: ValueAnimationOptions<T>,\n\t): AnimationControls;\n\t/** The keys of a plain object, written back into it. */\n\t<T extends object>(\n\t\tobject: T,\n\t\tkeyframes: { readonly [K in keyof T]?: Keyframes<T[K]> },\n\t\toptions?: ValueAnimationOptions<T>,\n\t): AnimationControls;\n\t/** A timeline of segments. */\n\t(sequence: readonly Segment[], options?: AnimationOptions): AnimationControls;\n}\n\nfunction isElementList(target: unknown): target is ArrayLike<Element> {\n\treturn (\n\t\ttypeof target === \"object\" &&\n\t\ttarget !== null &&\n\t\t\"length\" in target &&\n\t\t(Array.from(target as ArrayLike<unknown>).every(\n\t\t\t(item) => typeof Element !== \"undefined\" && item instanceof Element,\n\t\t) as boolean)\n\t);\n}\n\n/** A label object is a plain `{ name }`: a form element also has a `name`. */\nfunction isSegment(item: unknown): boolean {\n\treturn (\n\t\ttypeof item === \"string\" ||\n\t\tArray.isArray(item) ||\n\t\t(typeof item === \"object\" &&\n\t\t\titem !== null &&\n\t\t\tObject.getPrototypeOf(item) === Object.prototype &&\n\t\t\t\"name\" in item)\n\t);\n}\n\nfunction isSequence(target: unknown, second: unknown): target is Segment[] {\n\treturn (\n\t\tArray.isArray(target) &&\n\t\t(second === undefined || !Array.isArray(second)) &&\n\t\ttarget.length > 0 &&\n\t\ttarget.every(isSegment)\n\t);\n}\n\n/** `animate`, with selectors looked up inside `scope` (the whole document by default). */\nexport function createAnimate(scope?: () => ParentNode | null): Animate {\n\tfunction elementsOf(target: unknown): readonly Element[] {\n\t\tif (typeof target === \"string\") {\n\t\t\tconst root =\n\t\t\t\tscope?.() ?? (typeof document === \"undefined\" ? null : document);\n\t\t\treturn root ? Array.from(root.querySelectorAll(target)) : [];\n\t\t}\n\t\tif (typeof Element !== \"undefined\" && target instanceof Element)\n\t\t\treturn [target];\n\t\treturn Array.from(target as ArrayLike<Element>);\n\t}\n\n\tfunction animateOne(\n\t\ttarget: unknown,\n\t\tkeyframes: unknown,\n\t\toptions: AnimationOptions = {},\n\t): AnimationControls {\n\t\tif (isMotionValue(target)) {\n\t\t\treturn animateMotionValue(\n\t\t\t\ttarget,\n\t\t\t\tkeyframes as Keyframes<unknown>,\n\t\t\t\toptions,\n\t\t\t);\n\t\t}\n\t\tconst domKeyframes =\n\t\t\ttypeof keyframes === \"object\" &&\n\t\t\tkeyframes !== null &&\n\t\t\t!Array.isArray(keyframes);\n\t\tif (\n\t\t\tdomKeyframes &&\n\t\t\t(typeof target === \"string\" ||\n\t\t\t\t(typeof Element !== \"undefined\" && target instanceof Element) ||\n\t\t\t\tisElementList(target))\n\t\t) {\n\t\t\treturn animateElements(\n\t\t\t\telementsOf(target),\n\t\t\t\tkeyframes as DOMKeyframes,\n\t\t\t\toptions,\n\t\t\t\tjsAnimation,\n\t\t\t);\n\t\t}\n\t\tif (typeof target === \"number\" || typeof target === \"string\") {\n\t\t\treturn animateMotionValue(\n\t\t\t\tmotionValue(target),\n\t\t\t\tkeyframes as Keyframes<unknown>,\n\t\t\t\toptions,\n\t\t\t);\n\t\t}\n\t\treturn animateObject(\n\t\t\ttarget as object,\n\t\t\tkeyframes as Record<string, Keyframes<unknown>>,\n\t\t\toptions,\n\t\t);\n\t}\n\n\tfunction targetsOf(target: unknown): readonly object[] {\n\t\tconst isDom =\n\t\t\ttypeof target === \"string\" ||\n\t\t\t(typeof Element !== \"undefined\" && target instanceof Element) ||\n\t\t\tisElementList(target);\n\t\treturn isDom ? elementsOf(target) : [target as object];\n\t}\n\n\treturn ((target: unknown, second?: unknown, options?: AnimationOptions) =>\n\t\tisSequence(target, second)\n\t\t\t? animateSequence(\n\t\t\t\t\ttarget,\n\t\t\t\t\t(second as AnimationOptions) ?? {},\n\t\t\t\t\tanimateOne,\n\t\t\t\t\ttargetsOf,\n\t\t\t\t)\n\t\t\t: animateOne(target, second, options)) as Animate;\n}\n\nexport const animate: Animate = createAnimate();\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAS5B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,uBAAqC;AAC9C;AAAA,EACC;AAAA,EAEA;AAAA,OACM;AA+BP,SAAS,cAAc,QAA+C;AACrE,SACC,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACX,MAAM,KAAK,MAA4B,EAAE;AAAA,IACzC,CAAC,SAAS,OAAO,YAAY,eAAe,gBAAgB;AAAA,EAC7D;AAEF;AAGA,SAAS,UAAU,MAAwB;AAC1C,SACC,OAAO,SAAS,YAChB,MAAM,QAAQ,IAAI,KACjB,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,eAAe,IAAI,MAAM,OAAO,aACvC,UAAU;AAEb;AAEA,SAAS,WAAW,QAAiB,QAAsC;AAC1E,SACC,MAAM,QAAQ,MAAM,MACnB,WAAW,UAAa,CAAC,MAAM,QAAQ,MAAM,MAC9C,OAAO,SAAS,KAChB,OAAO,MAAM,SAAS;AAExB;AAGO,SAAS,cAAc,OAA0C;AACvE,WAAS,WAAW,QAAqC;AACxD,QAAI,OAAO,WAAW,UAAU;AAC/B,YAAM,OACL,QAAQ,MAAM,OAAO,aAAa,cAAc,OAAO;AACxD,aAAO,OAAO,MAAM,KAAK,KAAK,iBAAiB,MAAM,CAAC,IAAI,CAAC;AAAA,IAC5D;AACA,QAAI,OAAO,YAAY,eAAe,kBAAkB;AACvD,aAAO,CAAC,MAAM;AACf,WAAO,MAAM,KAAK,MAA4B;AAAA,EAC/C;AAEA,WAAS,WACR,QACA,WACA,UAA4B,CAAC,GACT;AACpB,QAAI,cAAc,MAAM,GAAG;AAC1B,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AACA,UAAM,eACL,OAAO,cAAc,YACrB,cAAc,QACd,CAAC,MAAM,QAAQ,SAAS;AACzB,QACC,iBACC,OAAO,WAAW,YACjB,OAAO,YAAY,eAAe,kBAAkB,WACrD,cAAc,MAAM,IACpB;AACD,aAAO;AAAA,QACN,WAAW,MAAM;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AACA,QAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAAU;AAC7D,aAAO;AAAA,QACN,YAAY,MAAM;AAAA,QAClB;AAAA,QACA;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,WAAS,UAAU,QAAoC;AACtD,UAAM,QACL,OAAO,WAAW,YACjB,OAAO,YAAY,eAAe,kBAAkB,WACrD,cAAc,MAAM;AACrB,WAAO,QAAQ,WAAW,MAAM,IAAI,CAAC,MAAgB;AAAA,EACtD;AAEA,UAAQ,CAAC,QAAiB,QAAkB,YAC3C,WAAW,QAAQ,MAAM,IACtB;AAAA,IACA;AAAA,IACC,UAA+B,CAAC;AAAA,IACjC;AAAA,IACA;AAAA,EACD,IACC,WAAW,QAAQ,QAAQ,OAAO;AACvC;AAEO,MAAM,UAAmB,cAAc;",
+  "names": []
+}

package/dist/animate/controls.d.ts

@@ -0,0 +1,16 @@
+import type { AnimationControls } from "./types.js";
+/**
+ * `finished` and the `then` that makes controls awaitable:
+ * `await animate(…)` waits for the end, the way Motion's controls do.
+ */
+export declare function thenable(finished: Promise<void>): Pick<AnimationControls, "finished" | "then">;
+/**
+ * One set of controls over many animations: the properties of one element,
+ * the elements of a selector, the segments of a sequence. They share a clock
+ * (every child's `time` counts from the same start), so scrubbing the group
+ * scrubs each child at the same moment.
+ */
+export declare function groupControls(children: readonly AnimationControls[]): AnimationControls;
+/** The controls of an animation that had nothing to animate, or jumped: already finished. */
+export declare function finishedControls(): AnimationControls;
+//# sourceMappingURL=controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/animate/controls.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,oBAAoB,CAAC;AAE5E;;;GAGG;AACH,wBAAgB,QAAQ,CACvB,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,GACrB,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,MAAM,CAAC,CAM9C;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC5B,QAAQ,EAAE,SAAS,iBAAiB,EAAE,GACpC,iBAAiB,CA8CnB;AAED,6FAA6F;AAC7F,wBAAgB,gBAAgB,IAAI,iBAAiB,CAEpD"}

package/dist/animate/controls.js

@@ -0,0 +1,62 @@
+function thenable(finished) {
+  return {
+    finished,
+    // biome-ignore lint/suspicious/noThenProperty: controls are awaitable on purpose.
+    then: (onFulfilled, onRejected) => finished.then(onFulfilled, onRejected)
+  };
+}
+function groupControls(children) {
+  const finished = Promise.all(children.map((child) => child.finished)).then(
+    () => void 0
+  );
+  function each(action) {
+    return () => {
+      for (const child of children) action(child);
+    };
+  }
+  return {
+    ...thenable(finished),
+    get time() {
+      return Math.max(0, ...children.map((child) => child.time));
+    },
+    set time(seconds) {
+      for (const child of children) child.time = seconds;
+    },
+    get speed() {
+      return children[0]?.speed ?? 1;
+    },
+    set speed(rate) {
+      for (const child of children) child.speed = rate;
+    },
+    get duration() {
+      return Math.max(0, ...children.map((child) => child.duration));
+    },
+    get state() {
+      const states = new Set(children.map((child) => child.state));
+      if (states.has("running")) return "running";
+      return states.has("paused") ? "paused" : "finished";
+    },
+    play: each((child) => child.play()),
+    pause: each((child) => child.pause()),
+    stop: each((child) => child.stop()),
+    cancel: each((child) => child.cancel()),
+    complete: each((child) => child.complete()),
+    attachTimeline(timeline) {
+      const attached = children.filter(
+        (child) => child.attachTimeline(timeline)
+      );
+      if (attached.length === children.length) return true;
+      for (const child of attached) child.attachTimeline(document.timeline);
+      return false;
+    }
+  };
+}
+function finishedControls() {
+  return groupControls([]);
+}
+export {
+  finishedControls,
+  groupControls,
+  thenable
+};
+//# sourceMappingURL=controls.js.map

package/dist/animate/controls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/controls.ts"],
+  "sourcesContent": ["import type { AnimationControls, AnimationState } from \"#/animate/types.ts\";\n\n/**\n * `finished` and the `then` that makes controls awaitable:\n * `await animate(\u2026)` waits for the end, the way Motion's controls do.\n */\nexport function thenable(\n\tfinished: Promise<void>,\n): Pick<AnimationControls, \"finished\" | \"then\"> {\n\treturn {\n\t\tfinished,\n\t\t// biome-ignore lint/suspicious/noThenProperty: controls are awaitable on purpose.\n\t\tthen: (onFulfilled, onRejected) => finished.then(onFulfilled, onRejected),\n\t};\n}\n\n/**\n * One set of controls over many animations: the properties of one element,\n * the elements of a selector, the segments of a sequence. They share a clock\n * (every child's `time` counts from the same start), so scrubbing the group\n * scrubs each child at the same moment.\n */\nexport function groupControls(\n\tchildren: readonly AnimationControls[],\n): AnimationControls {\n\tconst finished = Promise.all(children.map((child) => child.finished)).then(\n\t\t() => undefined,\n\t);\n\tfunction each(action: (child: AnimationControls) => void) {\n\t\treturn () => {\n\t\t\tfor (const child of children) action(child);\n\t\t};\n\t}\n\treturn {\n\t\t...thenable(finished),\n\t\tget time() {\n\t\t\treturn Math.max(0, ...children.map((child) => child.time));\n\t\t},\n\t\tset time(seconds) {\n\t\t\tfor (const child of children) child.time = seconds;\n\t\t},\n\t\tget speed() {\n\t\t\treturn children[0]?.speed ?? 1;\n\t\t},\n\t\tset speed(rate) {\n\t\t\tfor (const child of children) child.speed = rate;\n\t\t},\n\t\tget duration() {\n\t\t\treturn Math.max(0, ...children.map((child) => child.duration));\n\t\t},\n\t\tget state(): AnimationState {\n\t\t\tconst states = new Set(children.map((child) => child.state));\n\t\t\tif (states.has(\"running\")) return \"running\";\n\t\t\treturn states.has(\"paused\") ? \"paused\" : \"finished\";\n\t\t},\n\t\tplay: each((child) => child.play()),\n\t\tpause: each((child) => child.pause()),\n\t\tstop: each((child) => child.stop()),\n\t\tcancel: each((child) => child.cancel()),\n\t\tcomplete: each((child) => child.complete()),\n\t\tattachTimeline(timeline) {\n\t\t\tconst attached = children.filter((child) =>\n\t\t\t\tchild.attachTimeline(timeline),\n\t\t\t);\n\t\t\tif (attached.length === children.length) return true;\n\t\t\t// All or nothing: a half-native group would drift from its JS half.\n\t\t\tfor (const child of attached) child.attachTimeline(document.timeline);\n\t\t\treturn false;\n\t\t},\n\t};\n}\n\n/** The controls of an animation that had nothing to animate, or jumped: already finished. */\nexport function finishedControls(): AnimationControls {\n\treturn groupControls([]);\n}\n"],
+  "mappings": "AAMO,SAAS,SACf,UAC+C;AAC/C,SAAO;AAAA,IACN;AAAA;AAAA,IAEA,MAAM,CAAC,aAAa,eAAe,SAAS,KAAK,aAAa,UAAU;AAAA,EACzE;AACD;AAQO,SAAS,cACf,UACoB;AACpB,QAAM,WAAW,QAAQ,IAAI,SAAS,IAAI,CAAC,UAAU,MAAM,QAAQ,CAAC,EAAE;AAAA,IACrE,MAAM;AAAA,EACP;AACA,WAAS,KAAK,QAA4C;AACzD,WAAO,MAAM;AACZ,iBAAW,SAAS,SAAU,QAAO,KAAK;AAAA,IAC3C;AAAA,EACD;AACA,SAAO;AAAA,IACN,GAAG,SAAS,QAAQ;AAAA,IACpB,IAAI,OAAO;AACV,aAAO,KAAK,IAAI,GAAG,GAAG,SAAS,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC;AAAA,IAC1D;AAAA,IACA,IAAI,KAAK,SAAS;AACjB,iBAAW,SAAS,SAAU,OAAM,OAAO;AAAA,IAC5C;AAAA,IACA,IAAI,QAAQ;AACX,aAAO,SAAS,CAAC,GAAG,SAAS;AAAA,IAC9B;AAAA,IACA,IAAI,MAAM,MAAM;AACf,iBAAW,SAAS,SAAU,OAAM,QAAQ;AAAA,IAC7C;AAAA,IACA,IAAI,WAAW;AACd,aAAO,KAAK,IAAI,GAAG,GAAG,SAAS,IAAI,CAAC,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC9D;AAAA,IACA,IAAI,QAAwB;AAC3B,YAAM,SAAS,IAAI,IAAI,SAAS,IAAI,CAAC,UAAU,MAAM,KAAK,CAAC;AAC3D,UAAI,OAAO,IAAI,SAAS,EAAG,QAAO;AAClC,aAAO,OAAO,IAAI,QAAQ,IAAI,WAAW;AAAA,IAC1C;AAAA,IACA,MAAM,KAAK,CAAC,UAAU,MAAM,KAAK,CAAC;AAAA,IAClC,OAAO,KAAK,CAAC,UAAU,MAAM,MAAM,CAAC;AAAA,IACpC,MAAM,KAAK,CAAC,UAAU,MAAM,KAAK,CAAC;AAAA,IAClC,QAAQ,KAAK,CAAC,UAAU,MAAM,OAAO,CAAC;AAAA,IACtC,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,CAAC;AAAA,IAC1C,eAAe,UAAU;AACxB,YAAM,WAAW,SAAS;AAAA,QAAO,CAAC,UACjC,MAAM,eAAe,QAAQ;AAAA,MAC9B;AACA,UAAI,SAAS,WAAW,SAAS,OAAQ,QAAO;AAEhD,iBAAW,SAAS,SAAU,OAAM,eAAe,SAAS,QAAQ;AACpE,aAAO;AAAA,IACR;AAAA,EACD;AACD;AAGO,SAAS,mBAAsC;AACrD,SAAO,cAAc,CAAC,CAAC;AACxB;",
+  "names": []
+}

package/dist/animate/dom.d.ts

@@ -0,0 +1,11 @@
+import type { JsAnimation, JsAnimationConfig } from "./js-animation.js";
+import type { AnimationControls, AnimationOptions, DOMKeyframes, KeyframeValue } from "./types.js";
+/**
+ * Plays what the browser can't (SVG attributes, CSS variables) on the frame
+ * loop. Injected, so an entry that only needs the browser's half never loads
+ * the interpolators.
+ */
+export type ScriptedChannel = (config: JsAnimationConfig<KeyframeValue>) => JsAnimation<KeyframeValue>;
+/** Every key of every element, each its own animation, under one set of controls. */
+export declare function animateElements(elements: readonly Element[], keyframes: DOMKeyframes, options: AnimationOptions, scripted?: ScriptedChannel): AnimationControls;
+//# sourceMappingURL=dom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/animate/dom.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAUhF,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,MAAM,oBAAoB,CAAC;AAuB5B;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,CAC7B,MAAM,EAAE,iBAAiB,CAAC,aAAa,CAAC,KACpC,WAAW,CAAC,aAAa,CAAC,CAAC;AAmGhC,qFAAqF;AACrF,wBAAgB,eAAe,CAC9B,QAAQ,EAAE,SAAS,OAAO,EAAE,EAC5B,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,CAAC,EAAE,eAAe,GACxB,iBAAiB,CAanB"}

package/dist/animate/dom.js

@@ -0,0 +1,112 @@
+import { shouldReduceMotion } from "../accessibility/reduced-motion.js";
+import { finishedControls, groupControls } from "./controls.js";
+import {
+  beginTransform,
+  commitTransform,
+  committedTransform,
+  cssName,
+  isMovement,
+  TRANSFORMS,
+  withUnit
+} from "./style.js";
+import { waapiAnimation } from "./waapi.js";
+const SVG_ATTRIBUTES = {
+  d: "d",
+  points: "points",
+  viewBox: "viewBox",
+  cx: "cx",
+  cy: "cy",
+  r: "r",
+  rx: "rx",
+  ry: "ry",
+  x1: "x1",
+  y1: "y1",
+  x2: "x2",
+  y2: "y2",
+  attrX: "x",
+  attrY: "y",
+  attrWidth: "width",
+  attrHeight: "height"
+};
+const running = /* @__PURE__ */ new WeakMap();
+function channelOf(element, key) {
+  const style = element.style;
+  const attribute = element instanceof SVGElement ? SVG_ATTRIBUTES[key] : void 0;
+  if (TRANSFORMS[key]) {
+    return {
+      read: () => committedTransform(element, key),
+      write: (value) => commitTransform(element, key, value),
+      native: true
+    };
+  }
+  if (attribute) {
+    return {
+      read: () => element.getAttribute(attribute) ?? "",
+      write: (value) => element.setAttribute(attribute, String(value)),
+      native: false
+    };
+  }
+  const name = cssName(key);
+  return {
+    read: () => getComputedStyle(element).getPropertyValue(name).trim(),
+    write: (value) => style.setProperty(name, withUnit(key, value)),
+    // An unregistered custom property only animates discretely in the browser.
+    native: !key.startsWith("--")
+  };
+}
+function asTarget(read, target) {
+  return typeof target === "number" && typeof read === "string" ? Number.parseFloat(read) || 0 : read;
+}
+function animateChannel(element, key, value, options, delay, scripted) {
+  const channel = channelOf(element, key);
+  const list = Array.isArray(value) ? value : [value];
+  const target = list.at(-1);
+  const animations = running.get(element) ?? /* @__PURE__ */ new Map();
+  running.set(element, animations);
+  const previous = animations.get(key);
+  const now = previous?.current();
+  previous?.stop();
+  const from = now?.value ?? asTarget(channel.read(), target);
+  const keyframes = list.length > 1 ? list : [from, target];
+  if (shouldReduceMotion(options.reducedMotion) && isMovement(key) || !channel.native && !scripted) {
+    channel.write(target);
+    return finishedControls();
+  }
+  const reduced = shouldReduceMotion(options.reducedMotion) ? { ...options, type: "tween", bounce: 0 } : options;
+  const config = {
+    keyframes,
+    options: reduced,
+    delay,
+    velocity: list.length > 1 ? 0 : now?.velocity ?? 0
+  };
+  const transform = TRANSFORMS[key];
+  if (transform) beginTransform(element, key);
+  const animation = channel.native ? waapiAnimation({
+    ...config,
+    element,
+    property: transform?.property ?? key,
+    format: (frame) => transform ? transform.alone(withUnit(key, frame)) : withUnit(key, frame),
+    composite: transform ? "add" : "replace",
+    commit: channel.write
+  }) : scripted({ ...config, apply: channel.write });
+  animations.set(key, animation);
+  animation.finished.then(() => {
+    if (animations.get(key) === animation) animations.delete(key);
+  });
+  return animation;
+}
+function animateElements(elements, keyframes, options, scripted) {
+  const { delay } = options;
+  return groupControls(
+    elements.flatMap((element, index) => {
+      const start = typeof delay === "function" ? delay(index, elements.length) : delay ?? 0;
+      return Object.entries(keyframes).map(
+        ([key, value]) => animateChannel(element, key, value, options, start, scripted)
+      );
+    })
+  );
+}
+export {
+  animateElements
+};
+//# sourceMappingURL=dom.js.map

package/dist/animate/dom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animate/dom.ts"],
+  "sourcesContent": ["import { shouldReduceMotion } from \"#/accessibility/reduced-motion.ts\";\nimport { finishedControls, groupControls } from \"#/animate/controls.ts\";\nimport type { JsAnimation, JsAnimationConfig } from \"#/animate/js-animation.ts\";\nimport {\n\tbeginTransform,\n\tcommitTransform,\n\tcommittedTransform,\n\tcssName,\n\tisMovement,\n\tTRANSFORMS,\n\twithUnit,\n} from \"#/animate/style.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tDOMKeyframes,\n\tKeyframeValue,\n} from \"#/animate/types.ts\";\nimport { waapiAnimation } from \"#/animate/waapi.ts\";\n\n/** Attributes an SVG element animates in JavaScript: `d` morphs, the rest are geometry. */\nconst SVG_ATTRIBUTES: Readonly<Record<string, string>> = {\n\td: \"d\",\n\tpoints: \"points\",\n\tviewBox: \"viewBox\",\n\tcx: \"cx\",\n\tcy: \"cy\",\n\tr: \"r\",\n\trx: \"rx\",\n\try: \"ry\",\n\tx1: \"x1\",\n\ty1: \"y1\",\n\tx2: \"x2\",\n\ty2: \"y2\",\n\tattrX: \"x\",\n\tattrY: \"y\",\n\tattrWidth: \"width\",\n\tattrHeight: \"height\",\n};\n\n/**\n * Plays what the browser can't (SVG attributes, CSS variables) on the frame\n * loop. Injected, so an entry that only needs the browser's half never loads\n * the interpolators.\n */\nexport type ScriptedChannel = (\n\tconfig: JsAnimationConfig<KeyframeValue>,\n) => JsAnimation<KeyframeValue>;\n\nconst running = new WeakMap<Element, Map<string, JsAnimation<KeyframeValue>>>();\n\ninterface Channel {\n\tread(): KeyframeValue;\n\twrite(value: KeyframeValue): void;\n\treadonly native: boolean;\n}\n\nfunction channelOf(element: Element, key: string): Channel {\n\tconst style = (element as HTMLElement).style;\n\tconst attribute =\n\t\telement instanceof SVGElement ? SVG_ATTRIBUTES[key] : undefined;\n\tif (TRANSFORMS[key]) {\n\t\treturn {\n\t\t\tread: () => committedTransform(element, key),\n\t\t\twrite: (value) => commitTransform(element, key, value),\n\t\t\tnative: true,\n\t\t};\n\t}\n\tif (attribute) {\n\t\treturn {\n\t\t\tread: () => element.getAttribute(attribute) ?? \"\",\n\t\t\twrite: (value) => element.setAttribute(attribute, String(value)),\n\t\t\tnative: false,\n\t\t};\n\t}\n\tconst name = cssName(key);\n\treturn {\n\t\tread: () => getComputedStyle(element).getPropertyValue(name).trim(),\n\t\twrite: (value) => style.setProperty(name, withUnit(key, value)),\n\t\t// An unregistered custom property only animates discretely in the browser.\n\t\tnative: !key.startsWith(\"--\"),\n\t};\n}\n\nfunction asTarget(read: KeyframeValue, target: KeyframeValue): KeyframeValue {\n\treturn typeof target === \"number\" && typeof read === \"string\"\n\t\t? Number.parseFloat(read) || 0\n\t\t: read;\n}\n\nfunction animateChannel(\n\telement: Element,\n\tkey: string,\n\tvalue: KeyframeValue | readonly KeyframeValue[],\n\toptions: AnimationOptions,\n\tdelay: number,\n\tscripted: ScriptedChannel | undefined,\n): AnimationControls {\n\tconst channel = channelOf(element, key);\n\tconst list: readonly KeyframeValue[] = Array.isArray(value) ? value : [value];\n\tconst target = list.at(-1) as KeyframeValue;\n\tconst animations = running.get(element) ?? new Map();\n\trunning.set(element, animations);\n\tconst previous = animations.get(key);\n\tconst now = previous?.current();\n\tprevious?.stop();\n\tconst from = now?.value ?? asTarget(channel.read(), target);\n\tconst keyframes = list.length > 1 ? list : [from, target];\n\tif (\n\t\t(shouldReduceMotion(options.reducedMotion) && isMovement(key)) ||\n\t\t(!channel.native && !scripted)\n\t) {\n\t\tchannel.write(target);\n\t\treturn finishedControls();\n\t}\n\tconst reduced = shouldReduceMotion(options.reducedMotion)\n\t\t? { ...options, type: \"tween\" as const, bounce: 0 }\n\t\t: options;\n\tconst config = {\n\t\tkeyframes,\n\t\toptions: reduced,\n\t\tdelay,\n\t\tvelocity: list.length > 1 ? 0 : (now?.velocity ?? 0),\n\t};\n\tconst transform = TRANSFORMS[key];\n\tif (transform) beginTransform(element, key);\n\tconst animation = channel.native\n\t\t? waapiAnimation({\n\t\t\t\t...config,\n\t\t\t\telement,\n\t\t\t\tproperty: transform?.property ?? key,\n\t\t\t\tformat: (frame) =>\n\t\t\t\t\ttransform\n\t\t\t\t\t\t? transform.alone(withUnit(key, frame))\n\t\t\t\t\t\t: withUnit(key, frame),\n\t\t\t\tcomposite: transform ? \"add\" : \"replace\",\n\t\t\t\tcommit: channel.write,\n\t\t\t})\n\t\t: (scripted as ScriptedChannel)({ ...config, apply: channel.write });\n\tanimations.set(key, animation);\n\tanimation.finished.then(() => {\n\t\tif (animations.get(key) === animation) animations.delete(key);\n\t});\n\treturn animation;\n}\n\n/** Every key of every element, each its own animation, under one set of controls. */\nexport function animateElements(\n\telements: readonly Element[],\n\tkeyframes: DOMKeyframes,\n\toptions: AnimationOptions,\n\tscripted?: ScriptedChannel,\n): AnimationControls {\n\tconst { delay } = options;\n\treturn groupControls(\n\t\telements.flatMap((element, index) => {\n\t\t\tconst start =\n\t\t\t\ttypeof delay === \"function\"\n\t\t\t\t\t? delay(index, elements.length)\n\t\t\t\t\t: (delay ?? 0);\n\t\t\treturn Object.entries(keyframes).map(([key, value]) =>\n\t\t\t\tanimateChannel(element, key, value, options, start, scripted),\n\t\t\t);\n\t\t}),\n\t);\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,kBAAkB,qBAAqB;AAEhD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAOP,SAAS,sBAAsB;AAG/B,MAAM,iBAAmD;AAAA,EACxD,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AACb;AAWA,MAAM,UAAU,oBAAI,QAA0D;AAQ9E,SAAS,UAAU,SAAkB,KAAsB;AAC1D,QAAM,QAAS,QAAwB;AACvC,QAAM,YACL,mBAAmB,aAAa,eAAe,GAAG,IAAI;AACvD,MAAI,WAAW,GAAG,GAAG;AACpB,WAAO;AAAA,MACN,MAAM,MAAM,mBAAmB,SAAS,GAAG;AAAA,MAC3C,OAAO,CAAC,UAAU,gBAAgB,SAAS,KAAK,KAAK;AAAA,MACrD,QAAQ;AAAA,IACT;AAAA,EACD;AACA,MAAI,WAAW;AACd,WAAO;AAAA,MACN,MAAM,MAAM,QAAQ,aAAa,SAAS,KAAK;AAAA,MAC/C,OAAO,CAAC,UAAU,QAAQ,aAAa,WAAW,OAAO,KAAK,CAAC;AAAA,MAC/D,QAAQ;AAAA,IACT;AAAA,EACD;AACA,QAAM,OAAO,QAAQ,GAAG;AACxB,SAAO;AAAA,IACN,MAAM,MAAM,iBAAiB,OAAO,EAAE,iBAAiB,IAAI,EAAE,KAAK;AAAA,IAClE,OAAO,CAAC,UAAU,MAAM,YAAY,MAAM,SAAS,KAAK,KAAK,CAAC;AAAA;AAAA,IAE9D,QAAQ,CAAC,IAAI,WAAW,IAAI;AAAA,EAC7B;AACD;AAEA,SAAS,SAAS,MAAqB,QAAsC;AAC5E,SAAO,OAAO,WAAW,YAAY,OAAO,SAAS,WAClD,OAAO,WAAW,IAAI,KAAK,IAC3B;AACJ;AAEA,SAAS,eACR,SACA,KACA,OACA,SACA,OACA,UACoB;AACpB,QAAM,UAAU,UAAU,SAAS,GAAG;AACtC,QAAM,OAAiC,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAC5E,QAAM,SAAS,KAAK,GAAG,EAAE;AACzB,QAAM,aAAa,QAAQ,IAAI,OAAO,KAAK,oBAAI,IAAI;AACnD,UAAQ,IAAI,SAAS,UAAU;AAC/B,QAAM,WAAW,WAAW,IAAI,GAAG;AACnC,QAAM,MAAM,UAAU,QAAQ;AAC9B,YAAU,KAAK;AACf,QAAM,OAAO,KAAK,SAAS,SAAS,QAAQ,KAAK,GAAG,MAAM;AAC1D,QAAM,YAAY,KAAK,SAAS,IAAI,OAAO,CAAC,MAAM,MAAM;AACxD,MACE,mBAAmB,QAAQ,aAAa,KAAK,WAAW,GAAG,KAC3D,CAAC,QAAQ,UAAU,CAAC,UACpB;AACD,YAAQ,MAAM,MAAM;AACpB,WAAO,iBAAiB;AAAA,EACzB;AACA,QAAM,UAAU,mBAAmB,QAAQ,aAAa,IACrD,EAAE,GAAG,SAAS,MAAM,SAAkB,QAAQ,EAAE,IAChD;AACH,QAAM,SAAS;AAAA,IACd;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU,KAAK,SAAS,IAAI,IAAK,KAAK,YAAY;AAAA,EACnD;AACA,QAAM,YAAY,WAAW,GAAG;AAChC,MAAI,UAAW,gBAAe,SAAS,GAAG;AAC1C,QAAM,YAAY,QAAQ,SACvB,eAAe;AAAA,IACf,GAAG;AAAA,IACH;AAAA,IACA,UAAU,WAAW,YAAY;AAAA,IACjC,QAAQ,CAAC,UACR,YACG,UAAU,MAAM,SAAS,KAAK,KAAK,CAAC,IACpC,SAAS,KAAK,KAAK;AAAA,IACvB,WAAW,YAAY,QAAQ;AAAA,IAC/B,QAAQ,QAAQ;AAAA,EACjB,CAAC,IACC,SAA6B,EAAE,GAAG,QAAQ,OAAO,QAAQ,MAAM,CAAC;AACpE,aAAW,IAAI,KAAK,SAAS;AAC7B,YAAU,SAAS,KAAK,MAAM;AAC7B,QAAI,WAAW,IAAI,GAAG,MAAM,UAAW,YAAW,OAAO,GAAG;AAAA,EAC7D,CAAC;AACD,SAAO;AACR;AAGO,SAAS,gBACf,UACA,WACA,SACA,UACoB;AACpB,QAAM,EAAE,MAAM,IAAI;AAClB,SAAO;AAAA,IACN,SAAS,QAAQ,CAAC,SAAS,UAAU;AACpC,YAAM,QACL,OAAO,UAAU,aACd,MAAM,OAAO,SAAS,MAAM,IAC3B,SAAS;AACd,aAAO,OAAO,QAAQ,SAAS,EAAE;AAAA,QAAI,CAAC,CAAC,KAAK,KAAK,MAChD,eAAe,SAAS,KAAK,OAAO,SAAS,OAAO,QAAQ;AAAA,MAC7D;AAAA,IACD,CAAC;AAAA,EACF;AACD;",
+  "names": []
+}

package/dist/animate/js-animation.d.ts

@@ -0,0 +1,25 @@
+import type { AnimationControls, AnimationOptions } from "./types.js";
+export interface JsAnimationConfig<T> {
+    /** At least two: the caller resolves a lone target against the current value. */
+    readonly keyframes: readonly T[];
+    readonly options: AnimationOptions;
+    /** Seconds. */
+    readonly delay: number;
+    /** The velocity the value has now, carried into a spring. */
+    readonly velocity: number;
+    apply(value: T): void;
+    onComplete?(): void;
+}
+export interface JsAnimation<T> extends AnimationControls {
+    /** The value and velocity at the current time: where an interruption starts from. */
+    current(): {
+        readonly value: T;
+        readonly velocity: number;
+    };
+}
+/**
+ * An animation stepped by the frame loop: plain values, objects, SVG
+ * attributes and CSS variables — whatever the Web Animations API can't play.
+ */
+export declare function jsAnimation<T>(config: JsAnimationConfig<T>): JsAnimation<T>;
+//# sourceMappingURL=js-animation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"js-animation.d.ts","sourceRoot":"","sources":["../../src/animate/js-animation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAEhB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,iBAAiB,CAAC,CAAC;IACnC,iFAAiF;IACjF,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;IACjC,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACnC,eAAe;IACf,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,IAAI,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,CAAE,SAAQ,iBAAiB;IACxD,qFAAqF;IACrF,OAAO,IAAI;QAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5D;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAuH3E"}