@voila.dev/motion 0.0.0-stage → 5.0.0

package/dist/index.js

@@ -0,0 +1,97 @@
+import {
+  onReducedMotionChange,
+  prefersReducedMotion,
+  reducedMotionPolicy,
+  setReducedMotion,
+  shouldReduceMotion
+} from "./accessibility/reduced-motion.js";
+import { animate, createAnimate } from "./animate/animate.js";
+import { cubicBezier } from "./easing/cubic-bezier.js";
+import { linearEasing } from "./easing/linear-css.js";
+import {
+  anticipate,
+  backIn,
+  backInOut,
+  backOut,
+  circIn,
+  circInOut,
+  circOut,
+  easeIn,
+  easeInOut,
+  easeOut,
+  linear,
+  resolveEasing
+} from "./easing/named.js";
+import { springEasing } from "./easing/spring.js";
+import { steps } from "./easing/steps.js";
+import {
+  cancelFrame,
+  frame,
+  frameData
+} from "./frame/frame.js";
+import { inertia } from "./generators/inertia.js";
+import { spring, springPhysics } from "./generators/spring.js";
+import { tween } from "./generators/tween.js";
+import { mixColor } from "./interpolate/color.js";
+import {
+  interpolate
+} from "./interpolate/interpolate.js";
+import { mix } from "./interpolate/mix.js";
+import { mixPath } from "./interpolate/path/morph.js";
+import { stagger } from "./stagger/stagger.js";
+import {
+  isMotionValue,
+  motionValue
+} from "./value/motion-value.js";
+import { transformValue } from "./value/transform.js";
+import {
+  inView
+} from "./view/in-view.js";
+import { resize } from "./view/resize.js";
+import {
+  scroll
+} from "./view/scroll.js";
+export {
+  animate,
+  anticipate,
+  backIn,
+  backInOut,
+  backOut,
+  cancelFrame,
+  circIn,
+  circInOut,
+  circOut,
+  createAnimate,
+  cubicBezier,
+  easeIn,
+  easeInOut,
+  easeOut,
+  frame,
+  frameData,
+  inView,
+  inertia,
+  interpolate,
+  isMotionValue,
+  linear,
+  linearEasing,
+  mix,
+  mixColor,
+  mixPath,
+  motionValue,
+  onReducedMotionChange,
+  prefersReducedMotion,
+  reducedMotionPolicy,
+  resize,
+  resolveEasing,
+  scroll,
+  setReducedMotion,
+  shouldReduceMotion,
+  spring,
+  springEasing,
+  springPhysics,
+  stagger,
+  steps,
+  transformValue,
+  tween
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export {\n\tonReducedMotionChange,\n\tprefersReducedMotion,\n\ttype ReducedMotionPolicy,\n\treducedMotionPolicy,\n\tsetReducedMotion,\n\tshouldReduceMotion,\n} from \"#/accessibility/reduced-motion.ts\";\nexport { type Animate, animate, createAnimate } from \"#/animate/animate.ts\";\nexport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tAnimationState,\n\tDOMKeyframes,\n\tElementTarget,\n\tKeyframes,\n\tValueAnimationOptions,\n} from \"#/animate/types.ts\";\nexport { cubicBezier } from \"#/easing/cubic-bezier.ts\";\nexport { linearEasing } from \"#/easing/linear-css.ts\";\nexport {\n\tanticipate,\n\tbackIn,\n\tbackInOut,\n\tbackOut,\n\tcircIn,\n\tcircInOut,\n\tcircOut,\n\teaseIn,\n\teaseInOut,\n\teaseOut,\n\tlinear,\n\tresolveEasing,\n} from \"#/easing/named.ts\";\nexport { type SpringEasing, springEasing } from \"#/easing/spring.ts\";\nexport { steps } from \"#/easing/steps.ts\";\nexport type {\n\tCubicBezier,\n\tEasing,\n\tEasingDefinition,\n\tEasingName,\n} from \"#/easing/types.ts\";\nexport {\n\tcancelFrame,\n\ttype FrameCallback,\n\ttype FrameData,\n\tframe,\n\tframeData,\n} from \"#/frame/frame.ts\";\nexport { type InertiaOptions, inertia } from \"#/generators/inertia.ts\";\nexport { spring, springPhysics } from \"#/generators/spring.ts\";\nexport { type TweenOptions, tween } from \"#/generators/tween.ts\";\nexport type {\n\tGenerator,\n\tGeneratorState,\n\tSpringOptions,\n} from \"#/generators/types.ts\";\nexport { mixColor } from \"#/interpolate/color.ts\";\nexport {\n\ttype InterpolateOptions,\n\tinterpolate,\n} from \"#/interpolate/interpolate.ts\";\nexport { type Mixer, mix } from \"#/interpolate/mix.ts\";\nexport { mixPath } from \"#/interpolate/path/morph.ts\";\nexport type {\n\tSegment,\n\tSegmentOptions,\n\tSequenceAt,\n} from \"#/sequence/sequence.ts\";\nexport { type StaggerOptions, stagger } from \"#/stagger/stagger.ts\";\nexport {\n\tisMotionValue,\n\ttype MotionValue,\n\ttype MotionValueEvent,\n\tmotionValue,\n} from \"#/value/motion-value.ts\";\nexport { transformValue } from \"#/value/transform.ts\";\nexport {\n\ttype InViewOptions,\n\tinView,\n\ttype OnViewEnd,\n\ttype OnViewStart,\n} from \"#/view/in-view.ts\";\nexport { resize, type Size } from \"#/view/resize.ts\";\nexport {\n\ttype OnScroll,\n\ttype ScrollDrivable,\n\ttype ScrollInfo,\n\ttype ScrollOptions,\n\tscroll,\n} from \"#/view/scroll.ts\";\n"],
+  "mappings": "AAAA;AAAA,EACC;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAuB,SAAS,qBAAqB;AAUrD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAA4B,oBAAoB;AAChD,SAAS,aAAa;AAOtB;AAAA,EACC;AAAA,EAGA;AAAA,EACA;AAAA,OACM;AACP,SAA8B,eAAe;AAC7C,SAAS,QAAQ,qBAAqB;AACtC,SAA4B,aAAa;AAMzC,SAAS,gBAAgB;AACzB;AAAA,EAEC;AAAA,OACM;AACP,SAAqB,WAAW;AAChC,SAAS,eAAe;AAMxB,SAA8B,eAAe;AAC7C;AAAA,EACC;AAAA,EAGA;AAAA,OACM;AACP,SAAS,sBAAsB;AAC/B;AAAA,EAEC;AAAA,OAGM;AACP,SAAS,cAAyB;AAClC;AAAA,EAKC;AAAA,OACM;",
+  "names": []
+}

package/dist/interpolate/array.d.ts

@@ -0,0 +1,3 @@
+/** Element by element; arrays of different lengths have no midpoint, so they step. */
+export declare function mixArray<T>(from: readonly T[], to: readonly T[]): ((progress: number) => T[]) | undefined;
+//# sourceMappingURL=array.d.ts.map

package/dist/interpolate/array.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"array.d.ts","sourceRoot":"","sources":["../../src/interpolate/array.ts"],"names":[],"mappings":"AAEA,sFAAsF;AACtF,wBAAgB,QAAQ,CAAC,CAAC,EACzB,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,EAAE,EAAE,SAAS,CAAC,EAAE,GACd,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAMzC"}

package/dist/interpolate/array.js

@@ -0,0 +1,12 @@
+import { mix } from "./mix.js";
+function mixArray(from, to) {
+  if (from.length !== to.length) {
+    return void 0;
+  }
+  const mixers = from.map((value, index) => mix(value, to[index]));
+  return (progress) => mixers.map((mixer) => mixer(progress));
+}
+export {
+  mixArray
+};
+//# sourceMappingURL=array.js.map

package/dist/interpolate/array.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interpolate/array.ts"],
+  "sourcesContent": ["import { mix } from \"#/interpolate/mix.ts\";\n\n/** Element by element; arrays of different lengths have no midpoint, so they step. */\nexport function mixArray<T>(\n\tfrom: readonly T[],\n\tto: readonly T[],\n): ((progress: number) => T[]) | undefined {\n\tif (from.length !== to.length) {\n\t\treturn undefined;\n\t}\n\tconst mixers = from.map((value, index) => mix(value, to[index] as T));\n\treturn (progress) => mixers.map((mixer) => mixer(progress));\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAGb,SAAS,SACf,MACA,IAC0C;AAC1C,MAAI,KAAK,WAAW,GAAG,QAAQ;AAC9B,WAAO;AAAA,EACR;AACA,QAAM,SAAS,KAAK,IAAI,CAAC,OAAO,UAAU,IAAI,OAAO,GAAG,KAAK,CAAM,CAAC;AACpE,SAAO,CAAC,aAAa,OAAO,IAAI,CAAC,UAAU,MAAM,QAAQ,CAAC;AAC3D;",
+  "names": []
+}

package/dist/interpolate/color-parse.d.ts

@@ -0,0 +1,14 @@
+/** A colour in sRGB, every channel 0–1. */
+export interface Rgba {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    readonly alpha: number;
+}
+type Channels = readonly [number, number, number, number];
+/** Oklab is mixed in, and also a syntax a page can write colours in. */
+export declare function oklabToRgba([l, a, b, alpha]: Channels): Rgba;
+/** A colour written out in full; `undefined` for what only the page can resolve (`var()`, names). */
+export declare function parseColor(text: string): Rgba | undefined;
+export {};
+//# sourceMappingURL=color-parse.d.ts.map

package/dist/interpolate/color-parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-parse.d.ts","sourceRoot":"","sources":["../../src/interpolate/color-parse.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,MAAM,WAAW,IAAI;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACvB;AAED,KAAK,QAAQ,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAoC1D,wEAAwE;AACxE,wBAAgB,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAa5D;AA6DD,qGAAqG;AACrG,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAezD"}

package/dist/interpolate/color-parse.js

@@ -0,0 +1,111 @@
+const FUNCTION = /^(rgba?|hsla?|oklch|oklab)\(\s*([^()]*)\)$/i;
+const HUE_UNITS = {
+  deg: 1,
+  grad: 0.9,
+  rad: 180 / Math.PI,
+  turn: 360
+};
+function channel(text, percentScale) {
+  if (text === void 0 || text === "none") {
+    return 0;
+  }
+  return text.endsWith("%") ? Number.parseFloat(text) / 100 * percentScale : Number.parseFloat(text);
+}
+function hue(text) {
+  const unit = text?.match(/[a-z]+$/i)?.[0].toLowerCase() ?? "deg";
+  return channel(text, 1) * (HUE_UNITS[unit] ?? 1);
+}
+function alphaOf(args) {
+  return args[3] === void 0 ? 1 : channel(args[3], 1);
+}
+function linearToSrgb(value) {
+  return value <= 31308e-7 ? 12.92 * value : 1.055 * value ** (1 / 2.4) - 0.055;
+}
+function oklabToRgba([l, a, b, alpha]) {
+  const lms = [
+    (l + 0.3963377774 * a + 0.2158037573 * b) ** 3,
+    (l - 0.1055613458 * a - 0.0638541728 * b) ** 3,
+    (l - 0.0894841775 * a - 1.291485548 * b) ** 3
+  ];
+  const [x, y, z] = lms;
+  return {
+    r: linearToSrgb(4.0767416621 * x - 3.3077115913 * y + 0.2309699292 * z),
+    g: linearToSrgb(-1.2684380046 * x + 2.6097574011 * y - 0.3413193965 * z),
+    b: linearToSrgb(-0.0041960863 * x - 0.7034186147 * y + 1.707614701 * z),
+    alpha
+  };
+}
+function hslToRgba(h, s, l, alpha) {
+  const amount = s * Math.min(l, 1 - l);
+  function f(n) {
+    const k = (n + h / 30) % 12;
+    return l - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  }
+  return { r: f(0), g: f(8), b: f(4), alpha };
+}
+const PARSERS = {
+  rgb: (args) => ({
+    r: channel(args[0], 255) / 255,
+    g: channel(args[1], 255) / 255,
+    b: channel(args[2], 255) / 255,
+    alpha: alphaOf(args)
+  }),
+  hsl: (args) => hslToRgba(
+    (hue(args[0]) % 360 + 360) % 360,
+    channel(args[1], 100) / 100,
+    channel(args[2], 100) / 100,
+    alphaOf(args)
+  ),
+  oklab: (args) => oklabToRgba([
+    channel(args[0], 1),
+    channel(args[1], 0.4),
+    channel(args[2], 0.4),
+    alphaOf(args)
+  ]),
+  oklch: (args) => {
+    const chroma = channel(args[1], 0.4);
+    const angle = hue(args[2]) * Math.PI / 180;
+    return oklabToRgba([
+      channel(args[0], 1),
+      chroma * Math.cos(angle),
+      chroma * Math.sin(angle),
+      alphaOf(args)
+    ]);
+  }
+};
+function parseHex(hex) {
+  const digits = hex.length <= 4 ? [...hex].map((digit) => digit + digit).join("") : hex;
+  if (!/^[0-9a-f]{6}(?:[0-9a-f]{2})?$/i.test(digits)) {
+    return void 0;
+  }
+  function byte(index) {
+    return Number.parseInt(digits.slice(index, index + 2), 16) / 255;
+  }
+  return {
+    r: byte(0),
+    g: byte(2),
+    b: byte(4),
+    alpha: digits.length === 8 ? byte(6) : 1
+  };
+}
+function parseColor(text) {
+  const trimmed = text.trim();
+  if (trimmed.toLowerCase() === "transparent") {
+    return { r: 0, g: 0, b: 0, alpha: 0 };
+  }
+  if (trimmed.startsWith("#")) {
+    return parseHex(trimmed.slice(1));
+  }
+  const match = FUNCTION.exec(trimmed);
+  if (match === null) {
+    return void 0;
+  }
+  const name = match[1].toLowerCase().replace(/a$/, "");
+  const args = match[2].split(/[\s,/]+/).filter(Boolean);
+  return PARSERS[name]?.(args);
+}
+export {
+  oklabToRgba,
+  parseColor
+};
+//# sourceMappingURL=color-parse.js.map

package/dist/interpolate/color-parse.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interpolate/color-parse.ts"],
+  "sourcesContent": ["/** A colour in sRGB, every channel 0\u20131. */\nexport interface Rgba {\n\treadonly r: number;\n\treadonly g: number;\n\treadonly b: number;\n\treadonly alpha: number;\n}\n\ntype Channels = readonly [number, number, number, number];\ntype Parser = (args: readonly string[]) => Rgba | undefined;\n\nconst FUNCTION = /^(rgba?|hsla?|oklch|oklab)\\(\\s*([^()]*)\\)$/i;\nconst HUE_UNITS: Readonly<Record<string, number>> = {\n\tdeg: 1,\n\tgrad: 0.9,\n\trad: 180 / Math.PI,\n\tturn: 360,\n};\n\n/** A number, a percentage of `percentScale`, or `none`. */\nfunction channel(text: string | undefined, percentScale: number): number {\n\tif (text === undefined || text === \"none\") {\n\t\treturn 0;\n\t}\n\treturn text.endsWith(\"%\")\n\t\t? (Number.parseFloat(text) / 100) * percentScale\n\t\t: Number.parseFloat(text);\n}\n\nfunction hue(text: string | undefined): number {\n\tconst unit = text?.match(/[a-z]+$/i)?.[0].toLowerCase() ?? \"deg\";\n\treturn channel(text, 1) * (HUE_UNITS[unit] ?? 1);\n}\n\nfunction alphaOf(args: readonly string[]): number {\n\treturn args[3] === undefined ? 1 : channel(args[3], 1);\n}\n\nfunction linearToSrgb(value: number): number {\n\treturn value <= 0.0031308\n\t\t? 12.92 * value\n\t\t: 1.055 * value ** (1 / 2.4) - 0.055;\n}\n\n/** Oklab is mixed in, and also a syntax a page can write colours in. */\nexport function oklabToRgba([l, a, b, alpha]: Channels): Rgba {\n\tconst lms = [\n\t\t(l + 0.3963377774 * a + 0.2158037573 * b) ** 3,\n\t\t(l - 0.1055613458 * a - 0.0638541728 * b) ** 3,\n\t\t(l - 0.0894841775 * a - 1.291485548 * b) ** 3,\n\t] as const;\n\tconst [x, y, z] = lms;\n\treturn {\n\t\tr: linearToSrgb(4.0767416621 * x - 3.3077115913 * y + 0.2309699292 * z),\n\t\tg: linearToSrgb(-1.2684380046 * x + 2.6097574011 * y - 0.3413193965 * z),\n\t\tb: linearToSrgb(-0.0041960863 * x - 0.7034186147 * y + 1.707614701 * z),\n\t\talpha,\n\t};\n}\n\nfunction hslToRgba(h: number, s: number, l: number, alpha: number): Rgba {\n\tconst amount = s * Math.min(l, 1 - l);\n\tfunction f(n: number) {\n\t\tconst k = (n + h / 30) % 12;\n\t\treturn l - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n\t}\n\treturn { r: f(0), g: f(8), b: f(4), alpha };\n}\n\nconst PARSERS: Readonly<Record<string, Parser>> = {\n\trgb: (args) => ({\n\t\tr: channel(args[0], 255) / 255,\n\t\tg: channel(args[1], 255) / 255,\n\t\tb: channel(args[2], 255) / 255,\n\t\talpha: alphaOf(args),\n\t}),\n\thsl: (args) =>\n\t\thslToRgba(\n\t\t\t((hue(args[0]) % 360) + 360) % 360,\n\t\t\tchannel(args[1], 100) / 100,\n\t\t\tchannel(args[2], 100) / 100,\n\t\t\talphaOf(args),\n\t\t),\n\toklab: (args) =>\n\t\toklabToRgba([\n\t\t\tchannel(args[0], 1),\n\t\t\tchannel(args[1], 0.4),\n\t\t\tchannel(args[2], 0.4),\n\t\t\talphaOf(args),\n\t\t]),\n\toklch: (args) => {\n\t\tconst chroma = channel(args[1], 0.4);\n\t\tconst angle = (hue(args[2]) * Math.PI) / 180;\n\t\treturn oklabToRgba([\n\t\t\tchannel(args[0], 1),\n\t\t\tchroma * Math.cos(angle),\n\t\t\tchroma * Math.sin(angle),\n\t\t\talphaOf(args),\n\t\t]);\n\t},\n};\n\nfunction parseHex(hex: string): Rgba | undefined {\n\tconst digits =\n\t\thex.length <= 4 ? [...hex].map((digit) => digit + digit).join(\"\") : hex;\n\tif (!/^[0-9a-f]{6}(?:[0-9a-f]{2})?$/i.test(digits)) {\n\t\treturn undefined;\n\t}\n\tfunction byte(index: number) {\n\t\treturn Number.parseInt(digits.slice(index, index + 2), 16) / 255;\n\t}\n\treturn {\n\t\tr: byte(0),\n\t\tg: byte(2),\n\t\tb: byte(4),\n\t\talpha: digits.length === 8 ? byte(6) : 1,\n\t};\n}\n\n/** A colour written out in full; `undefined` for what only the page can resolve (`var()`, names). */\nexport function parseColor(text: string): Rgba | undefined {\n\tconst trimmed = text.trim();\n\tif (trimmed.toLowerCase() === \"transparent\") {\n\t\treturn { r: 0, g: 0, b: 0, alpha: 0 };\n\t}\n\tif (trimmed.startsWith(\"#\")) {\n\t\treturn parseHex(trimmed.slice(1));\n\t}\n\tconst match = FUNCTION.exec(trimmed);\n\tif (match === null) {\n\t\treturn undefined;\n\t}\n\tconst name = (match[1] as string).toLowerCase().replace(/a$/, \"\");\n\tconst args = (match[2] as string).split(/[\\s,/]+/).filter(Boolean);\n\treturn PARSERS[name]?.(args);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/interpolate/color.d.ts

@@ -0,0 +1,11 @@
+export { parseColor, type Rgba } from "./color-parse.js";
+/** A string the page resolves to a colour: written out, a `var()`, a name, `currentColor`. */
+export declare function isColorLike(text: string): boolean;
+/**
+ * Two written-out colours mix in oklab here, premultiplied so a fade from
+ * `transparent` does not pass through grey. A `var()` or a name is only known
+ * to the page, so it mixes there: `color-mix()` with the share quantised to
+ * 2 %, which caps the strings a long animation mints at 51.
+ */
+export declare function mixColor(from: string, to: string): (progress: number) => string;
+//# sourceMappingURL=color.d.ts.map

package/dist/interpolate/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/interpolate/color.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAuCrE,8FAA8F;AAC9F,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAOjD;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACvB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACR,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CA+B9B"}

package/dist/interpolate/color.js

@@ -0,0 +1,74 @@
+import {
+  oklabToRgba,
+  parseColor
+} from "./color-parse.js";
+import { mixNumber } from "./number.js";
+import { parseColor as parseColor2 } from "./color-parse.js";
+const VARIABLE = /^var\(/i;
+const IDENTIFIER = /^[a-z]+$/i;
+function srgbToLinear(value) {
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+function toOklab({ r, g, b, alpha }) {
+  const [lr, lg, lb] = [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
+  const l = Math.cbrt(
+    0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb
+  );
+  const m = Math.cbrt(
+    0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb
+  );
+  const s = Math.cbrt(
+    0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb
+  );
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+    alpha
+  ];
+}
+function byte(value) {
+  return Math.round(Math.min(1, Math.max(0, value)) * 255);
+}
+function format({ r, g, b, alpha }) {
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 1e3) / 1e3;
+  return `rgba(${byte(r)}, ${byte(g)}, ${byte(b)}, ${a})`;
+}
+function isColorLike(text) {
+  const trimmed = text.trim();
+  return parseColor(trimmed) !== void 0 || VARIABLE.test(trimmed) || IDENTIFIER.test(trimmed);
+}
+function mixColor(from, to) {
+  const start = parseColor(from);
+  const end = parseColor(to);
+  if (start === void 0 || end === void 0) {
+    return (progress) => {
+      const share = Math.round(progress * 50) * 2;
+      if (share <= 0) {
+        return from;
+      }
+      return share >= 100 ? to : `color-mix(in oklab, ${to} ${share}%, ${from})`;
+    };
+  }
+  const a = toOklab(start);
+  const b = toOklab(end);
+  return (progress) => {
+    if (progress === 0) {
+      return from;
+    }
+    if (progress === 1) {
+      return to;
+    }
+    const alpha = mixNumber(a[3], b[3], progress);
+    function channel(index) {
+      return alpha === 0 ? 0 : mixNumber(a[index] * a[3], b[index] * b[3], progress) / alpha;
+    }
+    return format(oklabToRgba([channel(0), channel(1), channel(2), alpha]));
+  };
+}
+export {
+  isColorLike,
+  mixColor,
+  parseColor2 as parseColor
+};
+//# sourceMappingURL=color.js.map

package/dist/interpolate/color.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interpolate/color.ts"],
+  "sourcesContent": ["import {\n\toklabToRgba,\n\tparseColor,\n\ttype Rgba,\n} from \"#/interpolate/color-parse.ts\";\nimport { mixNumber } from \"#/interpolate/number.ts\";\n\nexport { parseColor, type Rgba } from \"#/interpolate/color-parse.ts\";\n\ntype Oklab = readonly [number, number, number, number];\n\nconst VARIABLE = /^var\\(/i;\nconst IDENTIFIER = /^[a-z]+$/i;\n\nfunction srgbToLinear(value: number): number {\n\treturn value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;\n}\n\nfunction toOklab({ r, g, b, alpha }: Rgba): Oklab {\n\tconst [lr, lg, lb] = [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];\n\tconst l = Math.cbrt(\n\t\t0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb,\n\t);\n\tconst m = Math.cbrt(\n\t\t0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb,\n\t);\n\tconst s = Math.cbrt(\n\t\t0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb,\n\t);\n\treturn [\n\t\t0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n\t\t1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n\t\t0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n\t\talpha,\n\t];\n}\n\nfunction byte(value: number): number {\n\treturn Math.round(Math.min(1, Math.max(0, value)) * 255);\n}\n\nfunction format({ r, g, b, alpha }: Rgba): string {\n\tconst a = Math.round(Math.min(1, Math.max(0, alpha)) * 1000) / 1000;\n\treturn `rgba(${byte(r)}, ${byte(g)}, ${byte(b)}, ${a})`;\n}\n\n/** A string the page resolves to a colour: written out, a `var()`, a name, `currentColor`. */\nexport function isColorLike(text: string): boolean {\n\tconst trimmed = text.trim();\n\treturn (\n\t\tparseColor(trimmed) !== undefined ||\n\t\tVARIABLE.test(trimmed) ||\n\t\tIDENTIFIER.test(trimmed)\n\t);\n}\n\n/**\n * Two written-out colours mix in oklab here, premultiplied so a fade from\n * `transparent` does not pass through grey. A `var()` or a name is only known\n * to the page, so it mixes there: `color-mix()` with the share quantised to\n * 2 %, which caps the strings a long animation mints at 51.\n */\nexport function mixColor(\n\tfrom: string,\n\tto: string,\n): (progress: number) => string {\n\tconst start = parseColor(from);\n\tconst end = parseColor(to);\n\tif (start === undefined || end === undefined) {\n\t\treturn (progress) => {\n\t\t\tconst share = Math.round(progress * 50) * 2;\n\t\t\tif (share <= 0) {\n\t\t\t\treturn from;\n\t\t\t}\n\t\t\treturn share >= 100\n\t\t\t\t? to\n\t\t\t\t: `color-mix(in oklab, ${to} ${share}%, ${from})`;\n\t\t};\n\t}\n\tconst a = toOklab(start);\n\tconst b = toOklab(end);\n\treturn (progress) => {\n\t\tif (progress === 0) {\n\t\t\treturn from;\n\t\t}\n\t\tif (progress === 1) {\n\t\t\treturn to;\n\t\t}\n\t\tconst alpha = mixNumber(a[3], b[3], progress);\n\t\tfunction channel(index: 0 | 1 | 2) {\n\t\t\treturn alpha === 0\n\t\t\t\t? 0\n\t\t\t\t: mixNumber(a[index] * a[3], b[index] * b[3], progress) / alpha;\n\t\t}\n\t\treturn format(oklabToRgba([channel(0), channel(1), channel(2), alpha]));\n\t};\n}\n"],
+  "mappings": "AAAA;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP,SAAS,iBAAiB;AAE1B,SAAS,cAAAA,mBAA6B;AAItC,MAAM,WAAW;AACjB,MAAM,aAAa;AAEnB,SAAS,aAAa,OAAuB;AAC5C,SAAO,SAAS,UAAU,QAAQ,UAAU,QAAQ,SAAS,UAAU;AACxE;AAEA,SAAS,QAAQ,EAAE,GAAG,GAAG,GAAG,MAAM,GAAgB;AACjD,QAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,aAAa,CAAC,GAAG,aAAa,CAAC,CAAC;AACvE,QAAM,IAAI,KAAK;AAAA,IACd,eAAe,KAAK,eAAe,KAAK,eAAe;AAAA,EACxD;AACA,QAAM,IAAI,KAAK;AAAA,IACd,eAAe,KAAK,eAAe,KAAK,eAAe;AAAA,EACxD;AACA,QAAM,IAAI,KAAK;AAAA,IACd,eAAe,KAAK,eAAe,KAAK,eAAe;AAAA,EACxD;AACA,SAAO;AAAA,IACN,eAAe,IAAI,cAAc,IAAI,eAAe;AAAA,IACpD,eAAe,IAAI,cAAc,IAAI,eAAe;AAAA,IACpD,eAAe,IAAI,eAAe,IAAI,cAAc;AAAA,IACpD;AAAA,EACD;AACD;AAEA,SAAS,KAAK,OAAuB;AACpC,SAAO,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG;AACxD;AAEA,SAAS,OAAO,EAAE,GAAG,GAAG,GAAG,MAAM,GAAiB;AACjD,QAAM,IAAI,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI,GAAI,IAAI;AAC/D,SAAO,QAAQ,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD;AAGO,SAAS,YAAY,MAAuB;AAClD,QAAM,UAAU,KAAK,KAAK;AAC1B,SACC,WAAW,OAAO,MAAM,UACxB,SAAS,KAAK,OAAO,KACrB,WAAW,KAAK,OAAO;AAEzB;AAQO,SAAS,SACf,MACA,IAC+B;AAC/B,QAAM,QAAQ,WAAW,IAAI;AAC7B,QAAM,MAAM,WAAW,EAAE;AACzB,MAAI,UAAU,UAAa,QAAQ,QAAW;AAC7C,WAAO,CAAC,aAAa;AACpB,YAAM,QAAQ,KAAK,MAAM,WAAW,EAAE,IAAI;AAC1C,UAAI,SAAS,GAAG;AACf,eAAO;AAAA,MACR;AACA,aAAO,SAAS,MACb,KACA,uBAAuB,EAAE,IAAI,KAAK,MAAM,IAAI;AAAA,IAChD;AAAA,EACD;AACA,QAAM,IAAI,QAAQ,KAAK;AACvB,QAAM,IAAI,QAAQ,GAAG;AACrB,SAAO,CAAC,aAAa;AACpB,QAAI,aAAa,GAAG;AACnB,aAAO;AAAA,IACR;AACA,QAAI,aAAa,GAAG;AACnB,aAAO;AAAA,IACR;AACA,UAAM,QAAQ,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,QAAQ;AAC5C,aAAS,QAAQ,OAAkB;AAClC,aAAO,UAAU,IACd,IACA,UAAU,EAAE,KAAK,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,GAAG,QAAQ,IAAI;AAAA,IAC5D;AACA,WAAO,OAAO,YAAY,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC;AAAA,EACvE;AACD;",
+  "names": ["parseColor"]
+}

package/dist/interpolate/complex.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Strings that differ only in their numbers and colours: `10px 20px`, a
+ * transform list, two paths with the same commands. Anything else has no
+ * midpoint here, and `undefined` says so.
+ */
+export declare function mixComplex(from: string, to: string): ((progress: number) => string) | undefined;
+//# sourceMappingURL=complex.d.ts.map

package/dist/interpolate/complex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"complex.d.ts","sourceRoot":"","sources":["../../src/interpolate/complex.ts"],"names":[],"mappings":"AAqCA;;;;GAIG;AACH,wBAAgB,UAAU,CACzB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACR,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAkC5C"}

package/dist/interpolate/complex.js

@@ -0,0 +1,56 @@
+import { mixColor } from "./color.js";
+import { mixNumber } from "./number.js";
+const TOKEN = /(#[0-9a-f]{3,8}\b|(?:rgba?|hsla?|oklch|oklab)\([^()]*\))|(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)/gi;
+function parse(text) {
+  const skeleton = [];
+  const tokens = [];
+  let last = 0;
+  for (const match of text.matchAll(TOKEN)) {
+    skeleton.push(text.slice(last, match.index));
+    tokens.push(
+      match[1] === void 0 ? { kind: "number", value: Number(match[2]) } : { kind: "color", value: match[1] }
+    );
+    last = match.index + match[0].length;
+  }
+  skeleton.push(text.slice(last));
+  return { skeleton, tokens };
+}
+function round(value) {
+  return Math.round(value * 1e3) / 1e3;
+}
+function mixComplex(from, to) {
+  const start = parse(from);
+  const end = parse(to);
+  const sameShape = start.tokens.length === end.tokens.length && start.skeleton.every((part, index) => part === end.skeleton[index]) && start.tokens.every(
+    (token, index) => token.kind === end.tokens[index]?.kind
+  );
+  if (!sameShape || start.tokens.length === 0 && from !== to) {
+    return void 0;
+  }
+  const mixers = start.tokens.map((token, index) => {
+    const target = end.tokens[index];
+    if (token.kind === "color") {
+      return mixColor(token.value, target.value);
+    }
+    const a = token.value;
+    const b = target.value;
+    return (progress) => String(round(mixNumber(a, b, progress)));
+  });
+  return (progress) => {
+    if (progress === 0) {
+      return from;
+    }
+    if (progress === 1) {
+      return to;
+    }
+    let text = start.skeleton[0];
+    mixers.forEach((mixer, index) => {
+      text += mixer(progress) + start.skeleton[index + 1];
+    });
+    return text;
+  };
+}
+export {
+  mixComplex
+};
+//# sourceMappingURL=complex.js.map

package/dist/interpolate/complex.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interpolate/complex.ts"],
+  "sourcesContent": ["import { mixColor } from \"#/interpolate/color.ts\";\nimport { mixNumber } from \"#/interpolate/number.ts\";\n\ntype Token =\n\t| { readonly kind: \"number\"; readonly value: number }\n\t| { readonly kind: \"color\"; readonly value: string };\n\ninterface Parsed {\n\treadonly skeleton: readonly string[];\n\treadonly tokens: readonly Token[];\n}\n\n/** Colours first, so a hex or an `rgb()` is one token rather than its digits. */\nconst TOKEN =\n\t/(#[0-9a-f]{3,8}\\b|(?:rgba?|hsla?|oklch|oklab)\\([^()]*\\))|(-?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[-+]?\\d+)?)/gi;\n\nfunction parse(text: string): Parsed {\n\tconst skeleton: string[] = [];\n\tconst tokens: Token[] = [];\n\tlet last = 0;\n\tfor (const match of text.matchAll(TOKEN)) {\n\t\tskeleton.push(text.slice(last, match.index));\n\t\ttokens.push(\n\t\t\tmatch[1] === undefined\n\t\t\t\t? { kind: \"number\", value: Number(match[2]) }\n\t\t\t\t: { kind: \"color\", value: match[1] },\n\t\t);\n\t\tlast = match.index + match[0].length;\n\t}\n\tskeleton.push(text.slice(last));\n\treturn { skeleton, tokens };\n}\n\nfunction round(value: number): number {\n\treturn Math.round(value * 1000) / 1000;\n}\n\n/**\n * Strings that differ only in their numbers and colours: `10px 20px`, a\n * transform list, two paths with the same commands. Anything else has no\n * midpoint here, and `undefined` says so.\n */\nexport function mixComplex(\n\tfrom: string,\n\tto: string,\n): ((progress: number) => string) | undefined {\n\tconst start = parse(from);\n\tconst end = parse(to);\n\tconst sameShape =\n\t\tstart.tokens.length === end.tokens.length &&\n\t\tstart.skeleton.every((part, index) => part === end.skeleton[index]) &&\n\t\tstart.tokens.every(\n\t\t\t(token, index) => token.kind === end.tokens[index]?.kind,\n\t\t);\n\tif (!sameShape || (start.tokens.length === 0 && from !== to)) {\n\t\treturn undefined;\n\t}\n\tconst mixers = start.tokens.map((token, index) => {\n\t\tconst target = end.tokens[index] as Token;\n\t\tif (token.kind === \"color\") {\n\t\t\treturn mixColor(token.value, target.value as string);\n\t\t}\n\t\tconst a = token.value;\n\t\tconst b = target.value as number;\n\t\treturn (progress: number) => String(round(mixNumber(a, b, progress)));\n\t});\n\treturn (progress) => {\n\t\tif (progress === 0) {\n\t\t\treturn from;\n\t\t}\n\t\tif (progress === 1) {\n\t\t\treturn to;\n\t\t}\n\t\tlet text = start.skeleton[0] as string;\n\t\tmixers.forEach((mixer, index) => {\n\t\t\ttext += mixer(progress) + (start.skeleton[index + 1] as string);\n\t\t});\n\t\treturn text;\n\t};\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAY1B,MAAM,QACL;AAED,SAAS,MAAM,MAAsB;AACpC,QAAM,WAAqB,CAAC;AAC5B,QAAM,SAAkB,CAAC;AACzB,MAAI,OAAO;AACX,aAAW,SAAS,KAAK,SAAS,KAAK,GAAG;AACzC,aAAS,KAAK,KAAK,MAAM,MAAM,MAAM,KAAK,CAAC;AAC3C,WAAO;AAAA,MACN,MAAM,CAAC,MAAM,SACV,EAAE,MAAM,UAAU,OAAO,OAAO,MAAM,CAAC,CAAC,EAAE,IAC1C,EAAE,MAAM,SAAS,OAAO,MAAM,CAAC,EAAE;AAAA,IACrC;AACA,WAAO,MAAM,QAAQ,MAAM,CAAC,EAAE;AAAA,EAC/B;AACA,WAAS,KAAK,KAAK,MAAM,IAAI,CAAC;AAC9B,SAAO,EAAE,UAAU,OAAO;AAC3B;AAEA,SAAS,MAAM,OAAuB;AACrC,SAAO,KAAK,MAAM,QAAQ,GAAI,IAAI;AACnC;AAOO,SAAS,WACf,MACA,IAC6C;AAC7C,QAAM,QAAQ,MAAM,IAAI;AACxB,QAAM,MAAM,MAAM,EAAE;AACpB,QAAM,YACL,MAAM,OAAO,WAAW,IAAI,OAAO,UACnC,MAAM,SAAS,MAAM,CAAC,MAAM,UAAU,SAAS,IAAI,SAAS,KAAK,CAAC,KAClE,MAAM,OAAO;AAAA,IACZ,CAAC,OAAO,UAAU,MAAM,SAAS,IAAI,OAAO,KAAK,GAAG;AAAA,EACrD;AACD,MAAI,CAAC,aAAc,MAAM,OAAO,WAAW,KAAK,SAAS,IAAK;AAC7D,WAAO;AAAA,EACR;AACA,QAAM,SAAS,MAAM,OAAO,IAAI,CAAC,OAAO,UAAU;AACjD,UAAM,SAAS,IAAI,OAAO,KAAK;AAC/B,QAAI,MAAM,SAAS,SAAS;AAC3B,aAAO,SAAS,MAAM,OAAO,OAAO,KAAe;AAAA,IACpD;AACA,UAAM,IAAI,MAAM;AAChB,UAAM,IAAI,OAAO;AACjB,WAAO,CAAC,aAAqB,OAAO,MAAM,UAAU,GAAG,GAAG,QAAQ,CAAC,CAAC;AAAA,EACrE,CAAC;AACD,SAAO,CAAC,aAAa;AACpB,QAAI,aAAa,GAAG;AACnB,aAAO;AAAA,IACR;AACA,QAAI,aAAa,GAAG;AACnB,aAAO;AAAA,IACR;AACA,QAAI,OAAO,MAAM,SAAS,CAAC;AAC3B,WAAO,QAAQ,CAAC,OAAO,UAAU;AAChC,cAAQ,MAAM,QAAQ,IAAK,MAAM,SAAS,QAAQ,CAAC;AAAA,IACpD,CAAC;AACD,WAAO;AAAA,EACR;AACD;",
+  "names": []
+}

package/dist/interpolate/interpolate.d.ts

@@ -0,0 +1,16 @@
+import type { EasingDefinition } from "../easing/types.js";
+import { type Mixer } from "./mix.js";
+export interface InterpolateOptions<T> {
+    /** Hold the output at its ends outside the input range. Default true. */
+    readonly clamp?: boolean;
+    /** One easing for every segment, or one per segment. */
+    readonly ease?: EasingDefinition | readonly EasingDefinition[];
+    readonly mixer?: (from: T, to: T) => Mixer<T>;
+}
+/**
+ * Maps a number through a piecewise range: `interpolate([0, 100], [1, 0])`
+ * turns a scroll offset into an opacity, `[0, 50, 100]` with three colours a
+ * progress into a gradient. The input may run either way.
+ */
+export declare function interpolate<T>(input: readonly number[], output: readonly T[], options?: InterpolateOptions<T>): (value: number) => T;
+//# sourceMappingURL=interpolate.d.ts.map

package/dist/interpolate/interpolate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interpolate.d.ts","sourceRoot":"","sources":["../../src/interpolate/interpolate.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,KAAK,KAAK,EAAO,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACpC,yEAAyE;IACzE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,IAAI,CAAC,EAAE,gBAAgB,GAAG,SAAS,gBAAgB,EAAE,CAAC;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC5B,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,OAAO,GAAE,kBAAkB,CAAC,CAAC,CAAM,GACjC,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAsCtB"}

package/dist/interpolate/interpolate.js

@@ -0,0 +1,39 @@
+import { resolveEasing } from "../easing/named.js";
+import { mix } from "./mix.js";
+function interpolate(input, output, options = {}) {
+  if (input.length !== output.length || input.length === 0) {
+    throw new RangeError(
+      "interpolate: input and output need the same, non-zero length"
+    );
+  }
+  if (input.length === 1) {
+    return () => output[0];
+  }
+  const direction = input[0] > input[input.length - 1] ? -1 : 1;
+  const makeMixer = options.mixer ?? mix;
+  const mixers = output.slice(1).map((value, index) => makeMixer(output[index], value));
+  const eases = mixers.map((_mixer, index) => {
+    const ease = options.ease;
+    const definition = Array.isArray(ease) ? ease[index] : ease;
+    return resolveEasing(definition ?? "linear");
+  });
+  const clamp = options.clamp ?? true;
+  const low = Math.min(input[0], input[input.length - 1]);
+  const high = Math.max(input[0], input[input.length - 1]);
+  return (value) => {
+    const at = clamp ? Math.min(high, Math.max(low, value)) : value;
+    let segment = 0;
+    while (segment < mixers.length - 1 && (at - input[segment + 1]) * direction > 0) {
+      segment += 1;
+    }
+    const start = input[segment];
+    const span = input[segment + 1] - start;
+    const progress = span === 0 ? 1 : (at - start) / span;
+    const eased = eases[segment](progress);
+    return mixers[segment](eased);
+  };
+}
+export {
+  interpolate
+};
+//# sourceMappingURL=interpolate.js.map

package/dist/interpolate/interpolate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interpolate/interpolate.ts"],
+  "sourcesContent": ["import { resolveEasing } from \"#/easing/named.ts\";\nimport type { EasingDefinition } from \"#/easing/types.ts\";\nimport { type Mixer, mix } from \"#/interpolate/mix.ts\";\n\nexport interface InterpolateOptions<T> {\n\t/** Hold the output at its ends outside the input range. Default true. */\n\treadonly clamp?: boolean;\n\t/** One easing for every segment, or one per segment. */\n\treadonly ease?: EasingDefinition | readonly EasingDefinition[];\n\treadonly mixer?: (from: T, to: T) => Mixer<T>;\n}\n\n/**\n * Maps a number through a piecewise range: `interpolate([0, 100], [1, 0])`\n * turns a scroll offset into an opacity, `[0, 50, 100]` with three colours a\n * progress into a gradient. The input may run either way.\n */\nexport function interpolate<T>(\n\tinput: readonly number[],\n\toutput: readonly T[],\n\toptions: InterpolateOptions<T> = {},\n): (value: number) => T {\n\tif (input.length !== output.length || input.length === 0) {\n\t\tthrow new RangeError(\n\t\t\t\"interpolate: input and output need the same, non-zero length\",\n\t\t);\n\t}\n\tif (input.length === 1) {\n\t\treturn () => output[0] as T;\n\t}\n\tconst direction =\n\t\t(input[0] as number) > (input[input.length - 1] as number) ? -1 : 1;\n\tconst makeMixer = options.mixer ?? mix;\n\tconst mixers = output\n\t\t.slice(1)\n\t\t.map((value, index) => makeMixer(output[index] as T, value));\n\tconst eases = mixers.map((_mixer, index) => {\n\t\tconst ease = options.ease;\n\t\tconst definition = Array.isArray(ease) ? ease[index] : ease;\n\t\treturn resolveEasing((definition ?? \"linear\") as EasingDefinition);\n\t});\n\tconst clamp = options.clamp ?? true;\n\tconst low = Math.min(input[0] as number, input[input.length - 1] as number);\n\tconst high = Math.max(input[0] as number, input[input.length - 1] as number);\n\treturn (value) => {\n\t\tconst at = clamp ? Math.min(high, Math.max(low, value)) : value;\n\t\tlet segment = 0;\n\t\twhile (\n\t\t\tsegment < mixers.length - 1 &&\n\t\t\t(at - (input[segment + 1] as number)) * direction > 0\n\t\t) {\n\t\t\tsegment += 1;\n\t\t}\n\t\tconst start = input[segment] as number;\n\t\tconst span = (input[segment + 1] as number) - start;\n\t\tconst progress = span === 0 ? 1 : (at - start) / span;\n\t\tconst eased = (eases[segment] as (progress: number) => number)(progress);\n\t\treturn (mixers[segment] as Mixer<T>)(eased);\n\t};\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAqB,WAAW;AAezB,SAAS,YACf,OACA,QACA,UAAiC,CAAC,GACX;AACvB,MAAI,MAAM,WAAW,OAAO,UAAU,MAAM,WAAW,GAAG;AACzD,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,MAAI,MAAM,WAAW,GAAG;AACvB,WAAO,MAAM,OAAO,CAAC;AAAA,EACtB;AACA,QAAM,YACJ,MAAM,CAAC,IAAgB,MAAM,MAAM,SAAS,CAAC,IAAe,KAAK;AACnE,QAAM,YAAY,QAAQ,SAAS;AACnC,QAAM,SAAS,OACb,MAAM,CAAC,EACP,IAAI,CAAC,OAAO,UAAU,UAAU,OAAO,KAAK,GAAQ,KAAK,CAAC;AAC5D,QAAM,QAAQ,OAAO,IAAI,CAAC,QAAQ,UAAU;AAC3C,UAAM,OAAO,QAAQ;AACrB,UAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK,IAAI;AACvD,WAAO,cAAe,cAAc,QAA6B;AAAA,EAClE,CAAC;AACD,QAAM,QAAQ,QAAQ,SAAS;AAC/B,QAAM,MAAM,KAAK,IAAI,MAAM,CAAC,GAAa,MAAM,MAAM,SAAS,CAAC,CAAW;AAC1E,QAAM,OAAO,KAAK,IAAI,MAAM,CAAC,GAAa,MAAM,MAAM,SAAS,CAAC,CAAW;AAC3E,SAAO,CAAC,UAAU;AACjB,UAAM,KAAK,QAAQ,KAAK,IAAI,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC,IAAI;AAC1D,QAAI,UAAU;AACd,WACC,UAAU,OAAO,SAAS,MACzB,KAAM,MAAM,UAAU,CAAC,KAAgB,YAAY,GACnD;AACD,iBAAW;AAAA,IACZ;AACA,UAAM,QAAQ,MAAM,OAAO;AAC3B,UAAM,OAAQ,MAAM,UAAU,CAAC,IAAe;AAC9C,UAAM,WAAW,SAAS,IAAI,KAAK,KAAK,SAAS;AACjD,UAAM,QAAS,MAAM,OAAO,EAAmC,QAAQ;AACvE,WAAQ,OAAO,OAAO,EAAe,KAAK;AAAA,EAC3C;AACD;",
+  "names": []
+}

package/dist/interpolate/mix.d.ts

@@ -0,0 +1,8 @@
+export type Mixer<T> = (progress: number) => T;
+/**
+ * The value `progress` of the way from `from` to `to`, whatever they are:
+ * numbers, colours (in oklab), paths (morphed), strings of numbers, arrays,
+ * objects. What has no midpoint switches halfway.
+ */
+export declare function mix<T>(from: T, to: T): Mixer<T>;
+//# sourceMappingURL=mix.d.ts.map

package/dist/interpolate/mix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mix.d.ts","sourceRoot":"","sources":["../../src/interpolate/mix.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC;AAqD/C;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAQ/C"}

package/dist/interpolate/mix.js

@@ -0,0 +1,48 @@
+import { mixArray } from "./array.js";
+import { isColorLike, mixColor, parseColor } from "./color.js";
+import { mixComplex } from "./complex.js";
+import { mixNumber } from "./number.js";
+import { mixObject } from "./object.js";
+import { mixPath } from "./path/morph.js";
+const PATH = /^\s*[Mm]/;
+function bothStrings(from, to) {
+  return typeof from === "string" && typeof to === "string" ? [from, to] : void 0;
+}
+function colors(from, to) {
+  const resolved = parseColor(from) !== void 0 || parseColor(to) !== void 0;
+  const variables = /^\s*var\(/i.test(from) && /^\s*var\(/i.test(to);
+  return isColorLike(from) && isColorLike(to) && (resolved || variables);
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+const STRATEGIES = [
+  (from, to) => typeof from === "number" && typeof to === "number" ? (progress) => mixNumber(from, to, progress) : void 0,
+  (from, to) => {
+    const pair = bothStrings(from, to);
+    return pair && PATH.test(pair[0]) && PATH.test(pair[1]) ? mixPath(...pair) : void 0;
+  },
+  (from, to) => {
+    const pair = bothStrings(from, to);
+    return pair && colors(...pair) ? mixColor(...pair) : void 0;
+  },
+  (from, to) => {
+    const pair = bothStrings(from, to);
+    return pair && mixComplex(...pair);
+  },
+  (from, to) => Array.isArray(from) && Array.isArray(to) ? mixArray(from, to) : void 0,
+  (from, to) => isRecord(from) && isRecord(to) ? mixObject(from, to) : void 0
+];
+function mix(from, to) {
+  for (const strategy of STRATEGIES) {
+    const mixer = strategy(from, to);
+    if (mixer !== void 0) {
+      return mixer;
+    }
+  }
+  return (progress) => progress < 0.5 ? from : to;
+}
+export {
+  mix
+};
+//# sourceMappingURL=mix.js.map

package/dist/interpolate/mix.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interpolate/mix.ts"],
+  "sourcesContent": ["import { mixArray } from \"#/interpolate/array.ts\";\nimport { isColorLike, mixColor, parseColor } from \"#/interpolate/color.ts\";\nimport { mixComplex } from \"#/interpolate/complex.ts\";\nimport { mixNumber } from \"#/interpolate/number.ts\";\nimport { mixObject } from \"#/interpolate/object.ts\";\nimport { mixPath } from \"#/interpolate/path/morph.ts\";\n\nexport type Mixer<T> = (progress: number) => T;\n\ntype Strategy = (from: unknown, to: unknown) => Mixer<unknown> | undefined;\n\nconst PATH = /^\\s*[Mm]/;\n\nfunction bothStrings(from: unknown, to: unknown): [string, string] | undefined {\n\treturn typeof from === \"string\" && typeof to === \"string\"\n\t\t? [from, to]\n\t\t: undefined;\n}\n\n/**\n * A colour pair needs one side written out, or both to be variables: two bare\n * words are as likely `auto` and `none` as `red` and `blue`.\n */\nfunction colors(from: string, to: string): boolean {\n\tconst resolved =\n\t\tparseColor(from) !== undefined || parseColor(to) !== undefined;\n\tconst variables = /^\\s*var\\(/i.test(from) && /^\\s*var\\(/i.test(to);\n\treturn isColorLike(from) && isColorLike(to) && (resolved || variables);\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n\treturn typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\n/** Tried in order; the first that knows the pair mixes it. */\nconst STRATEGIES: readonly Strategy[] = [\n\t(from, to) =>\n\t\ttypeof from === \"number\" && typeof to === \"number\"\n\t\t\t? (progress) => mixNumber(from, to, progress)\n\t\t\t: undefined,\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && PATH.test(pair[0]) && PATH.test(pair[1])\n\t\t\t? mixPath(...pair)\n\t\t\t: undefined;\n\t},\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && colors(...pair) ? mixColor(...pair) : undefined;\n\t},\n\t(from, to) => {\n\t\tconst pair = bothStrings(from, to);\n\t\treturn pair && mixComplex(...pair);\n\t},\n\t(from, to) =>\n\t\tArray.isArray(from) && Array.isArray(to) ? mixArray(from, to) : undefined,\n\t(from, to) =>\n\t\tisRecord(from) && isRecord(to) ? mixObject(from, to) : undefined,\n];\n\n/**\n * The value `progress` of the way from `from` to `to`, whatever they are:\n * numbers, colours (in oklab), paths (morphed), strings of numbers, arrays,\n * objects. What has no midpoint switches halfway.\n */\nexport function mix<T>(from: T, to: T): Mixer<T> {\n\tfor (const strategy of STRATEGIES) {\n\t\tconst mixer = strategy(from, to);\n\t\tif (mixer !== undefined) {\n\t\t\treturn mixer as Mixer<T>;\n\t\t}\n\t}\n\treturn (progress) => (progress < 0.5 ? from : to);\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,aAAa,UAAU,kBAAkB;AAClD,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAMxB,MAAM,OAAO;AAEb,SAAS,YAAY,MAAe,IAA2C;AAC9E,SAAO,OAAO,SAAS,YAAY,OAAO,OAAO,WAC9C,CAAC,MAAM,EAAE,IACT;AACJ;AAMA,SAAS,OAAO,MAAc,IAAqB;AAClD,QAAM,WACL,WAAW,IAAI,MAAM,UAAa,WAAW,EAAE,MAAM;AACtD,QAAM,YAAY,aAAa,KAAK,IAAI,KAAK,aAAa,KAAK,EAAE;AACjE,SAAO,YAAY,IAAI,KAAK,YAAY,EAAE,MAAM,YAAY;AAC7D;AAEA,SAAS,SAAS,OAAkD;AACnE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC3E;AAGA,MAAM,aAAkC;AAAA,EACvC,CAAC,MAAM,OACN,OAAO,SAAS,YAAY,OAAO,OAAO,WACvC,CAAC,aAAa,UAAU,MAAM,IAAI,QAAQ,IAC1C;AAAA,EACJ,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,KAAK,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC,IACnD,QAAQ,GAAG,IAAI,IACf;AAAA,EACJ;AAAA,EACA,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,OAAO,GAAG,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI;AAAA,EACtD;AAAA,EACA,CAAC,MAAM,OAAO;AACb,UAAM,OAAO,YAAY,MAAM,EAAE;AACjC,WAAO,QAAQ,WAAW,GAAG,IAAI;AAAA,EAClC;AAAA,EACA,CAAC,MAAM,OACN,MAAM,QAAQ,IAAI,KAAK,MAAM,QAAQ,EAAE,IAAI,SAAS,MAAM,EAAE,IAAI;AAAA,EACjE,CAAC,MAAM,OACN,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI,UAAU,MAAM,EAAE,IAAI;AACzD;AAOO,SAAS,IAAO,MAAS,IAAiB;AAChD,aAAW,YAAY,YAAY;AAClC,UAAM,QAAQ,SAAS,MAAM,EAAE;AAC/B,QAAI,UAAU,QAAW;AACxB,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO,CAAC,aAAc,WAAW,MAAM,OAAO;AAC/C;",
+  "names": []
+}

package/dist/interpolate/number.d.ts

@@ -0,0 +1,2 @@
+export declare function mixNumber(from: number, to: number, progress: number): number;
+//# sourceMappingURL=number.d.ts.map