@voila.dev/motion 0.0.0-stage → 5.0.113

package/dist/sequence/sequence.js

@@ -0,0 +1,68 @@
+import { groupControls, thenable } from "../animate/controls.js";
+import { now } from "../frame/frame.js";
+function startOf(at, cursor, previousStart, labels) {
+  if (at === void 0) return cursor;
+  if (typeof at === "number") return at;
+  if (at === "<") return previousStart;
+  if (/^[+-]/.test(at)) return Math.max(0, cursor + Number(at));
+  return labels.get(at) ?? cursor;
+}
+function animateSequence(segments, options, animateOne, resolveTargets) {
+  const begun = now();
+  const labels = /* @__PURE__ */ new Map();
+  const busy = /* @__PURE__ */ new Map();
+  const children = [];
+  const waits = [];
+  let cursor = 0;
+  let previousStart = 0;
+  for (const segment of segments) {
+    let optionsAt2 = function(elapsed) {
+      const offset = start - elapsed;
+      return {
+        ...options,
+        ...own,
+        delay: typeof delay === "function" ? (index, total) => Math.max(0, offset + delay(index, total)) : Math.max(0, offset + (delay ?? 0))
+      };
+    };
+    var optionsAt = optionsAt2;
+    if (typeof segment === "string" || "name" in segment) {
+      const label = typeof segment === "string" ? { name: segment } : segment;
+      labels.set(label.name, startOf(label.at, cursor, previousStart, labels));
+      continue;
+    }
+    const [target, keyframes, own = {}] = segment;
+    const start = startOf(own.at, cursor, previousStart, labels);
+    const { delay } = own;
+    const keys = typeof keyframes === "object" && keyframes !== null && !Array.isArray(keyframes) ? Object.keys(keyframes) : ["value"];
+    const targets = resolveTargets(target);
+    const before = targets.flatMap(
+      (one) => keys.flatMap((key) => busy.get(one)?.get(key) ?? [])
+    );
+    const launch = () => animateOne(target, keyframes, optionsAt2((now() - begun) / 1e3));
+    let finished2;
+    if (before.length === 0) {
+      const controls = launch();
+      children.push(controls);
+      finished2 = controls.finished;
+      cursor = Math.max(start, controls.duration);
+    } else {
+      finished2 = Promise.all(before).then(() => launch().finished);
+      waits.push(finished2);
+    }
+    for (const one of targets) {
+      const byKey = busy.get(one) ?? /* @__PURE__ */ new Map();
+      busy.set(one, byKey);
+      for (const key of keys) byKey.set(key, finished2);
+    }
+    previousStart = start;
+  }
+  const group = groupControls(children);
+  const finished = Promise.all([group.finished, ...waits]).then(
+    () => void 0
+  );
+  return Object.assign(group, thenable(finished));
+}
+export {
+  animateSequence
+};
+//# sourceMappingURL=sequence.js.map

package/dist/sequence/sequence.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/sequence/sequence.ts"],
+  "sourcesContent": ["import { groupControls, thenable } from \"#/animate/controls.ts\";\nimport type {\n\tAnimationControls,\n\tAnimationOptions,\n\tDOMKeyframes,\n\tElementTarget,\n\tKeyframes,\n} from \"#/animate/types.ts\";\nimport { now } from \"#/frame/frame.ts\";\nimport type { MotionValue } from \"#/value/motion-value.ts\";\n\n/**\n * When a segment starts: seconds from the start of the sequence, `\"+0.1\"` or\n * `\"-0.2\"` from the end of the segment before, `\"<\"` with the segment before,\n * or the name of a label.\n */\nexport type SequenceAt = number | `+${number}` | `-${number}` | \"<\" | string;\n\nexport interface SegmentOptions extends AnimationOptions {\n\treadonly at?: SequenceAt;\n}\n\nexport type Segment =\n\t| readonly [ElementTarget, DOMKeyframes, SegmentOptions?]\n\t// biome-ignore lint/suspicious/noExplicitAny: a sequence mixes values of any type.\n\t| readonly [MotionValue<any>, Keyframes<any>, SegmentOptions?]\n\t| string\n\t| { readonly name: string; readonly at?: SequenceAt };\n\nexport type AnimateOne = (\n\ttarget: unknown,\n\tkeyframes: unknown,\n\toptions: AnimationOptions,\n) => AnimationControls;\n\nexport type ResolveTargets = (target: unknown) => readonly object[];\n\nfunction startOf(\n\tat: SequenceAt | undefined,\n\tcursor: number,\n\tpreviousStart: number,\n\tlabels: ReadonlyMap<string, number>,\n): number {\n\tif (at === undefined) return cursor;\n\tif (typeof at === \"number\") return at;\n\tif (at === \"<\") return previousStart;\n\tif (/^[+-]/.test(at)) return Math.max(0, cursor + Number(at));\n\treturn labels.get(at) ?? cursor;\n}\n\n/**\n * Launches every segment at once, each delayed to its place on the\n * timeline, so the whole sequence shares one clock and can be scrubbed. A\n * segment that animates a property an earlier segment already animates\n * waits for that one to finish, then starts from where it left off.\n */\nexport function animateSequence(\n\tsegments: readonly Segment[],\n\toptions: AnimationOptions,\n\tanimateOne: AnimateOne,\n\tresolveTargets: ResolveTargets,\n): AnimationControls {\n\tconst begun = now();\n\tconst labels = new Map<string, number>();\n\tconst busy = new Map<object, Map<string, Promise<void>>>();\n\tconst children: AnimationControls[] = [];\n\tconst waits: Promise<void>[] = [];\n\tlet cursor = 0;\n\tlet previousStart = 0;\n\tfor (const segment of segments) {\n\t\tif (typeof segment === \"string\" || \"name\" in segment) {\n\t\t\tconst label = typeof segment === \"string\" ? { name: segment } : segment;\n\t\t\tlabels.set(label.name, startOf(label.at, cursor, previousStart, labels));\n\t\t\tcontinue;\n\t\t}\n\t\tconst [target, keyframes, own = {}] = segment as readonly [\n\t\t\tunknown,\n\t\t\tunknown,\n\t\t\tSegmentOptions?,\n\t\t];\n\t\tconst start = startOf(own.at, cursor, previousStart, labels);\n\t\tconst { delay } = own;\n\t\t/** Launched late, a segment only waits for what is left of its delay. */\n\t\tfunction optionsAt(elapsed: number): AnimationOptions {\n\t\t\tconst offset = start - elapsed;\n\t\t\treturn {\n\t\t\t\t...options,\n\t\t\t\t...own,\n\t\t\t\tdelay:\n\t\t\t\t\ttypeof delay === \"function\"\n\t\t\t\t\t\t? (index, total) => Math.max(0, offset + delay(index, total))\n\t\t\t\t\t\t: Math.max(0, offset + (delay ?? 0)),\n\t\t\t};\n\t\t}\n\t\tconst keys =\n\t\t\ttypeof keyframes === \"object\" &&\n\t\t\tkeyframes !== null &&\n\t\t\t!Array.isArray(keyframes)\n\t\t\t\t? Object.keys(keyframes)\n\t\t\t\t: [\"value\"];\n\t\tconst targets = resolveTargets(target);\n\t\tconst before = targets.flatMap((one) =>\n\t\t\tkeys.flatMap((key) => busy.get(one)?.get(key) ?? []),\n\t\t);\n\t\tconst launch = () =>\n\t\t\tanimateOne(target, keyframes, optionsAt((now() - begun) / 1000));\n\t\tlet finished: Promise<void>;\n\t\tif (before.length === 0) {\n\t\t\tconst controls = launch();\n\t\t\tchildren.push(controls);\n\t\t\tfinished = controls.finished;\n\t\t\tcursor = Math.max(start, controls.duration);\n\t\t} else {\n\t\t\tfinished = Promise.all(before).then(() => launch().finished);\n\t\t\twaits.push(finished);\n\t\t}\n\t\tfor (const one of targets) {\n\t\t\tconst byKey = busy.get(one) ?? new Map();\n\t\t\tbusy.set(one, byKey);\n\t\t\tfor (const key of keys) byKey.set(key, finished);\n\t\t}\n\t\tpreviousStart = start;\n\t}\n\tconst group = groupControls(children);\n\tconst finished = Promise.all([group.finished, ...waits]).then(\n\t\t() => undefined,\n\t);\n\treturn Object.assign(group, thenable(finished));\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,gBAAgB;AAQxC,SAAS,WAAW;AA6BpB,SAAS,QACR,IACA,QACA,eACA,QACS;AACT,MAAI,OAAO,OAAW,QAAO;AAC7B,MAAI,OAAO,OAAO,SAAU,QAAO;AACnC,MAAI,OAAO,IAAK,QAAO;AACvB,MAAI,QAAQ,KAAK,EAAE,EAAG,QAAO,KAAK,IAAI,GAAG,SAAS,OAAO,EAAE,CAAC;AAC5D,SAAO,OAAO,IAAI,EAAE,KAAK;AAC1B;AAQO,SAAS,gBACf,UACA,SACA,YACA,gBACoB;AACpB,QAAM,QAAQ,IAAI;AAClB,QAAM,SAAS,oBAAI,IAAoB;AACvC,QAAM,OAAO,oBAAI,IAAwC;AACzD,QAAM,WAAgC,CAAC;AACvC,QAAM,QAAyB,CAAC;AAChC,MAAI,SAAS;AACb,MAAI,gBAAgB;AACpB,aAAW,WAAW,UAAU;AAc/B,QAASA,aAAT,SAAmB,SAAmC;AACrD,YAAM,SAAS,QAAQ;AACvB,aAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OACC,OAAO,UAAU,aACd,CAAC,OAAO,UAAU,KAAK,IAAI,GAAG,SAAS,MAAM,OAAO,KAAK,CAAC,IAC1D,KAAK,IAAI,GAAG,UAAU,SAAS,EAAE;AAAA,MACtC;AAAA,IACD;AAVS,oBAAAA;AAbT,QAAI,OAAO,YAAY,YAAY,UAAU,SAAS;AACrD,YAAM,QAAQ,OAAO,YAAY,WAAW,EAAE,MAAM,QAAQ,IAAI;AAChE,aAAO,IAAI,MAAM,MAAM,QAAQ,MAAM,IAAI,QAAQ,eAAe,MAAM,CAAC;AACvE;AAAA,IACD;AACA,UAAM,CAAC,QAAQ,WAAW,MAAM,CAAC,CAAC,IAAI;AAKtC,UAAM,QAAQ,QAAQ,IAAI,IAAI,QAAQ,eAAe,MAAM;AAC3D,UAAM,EAAE,MAAM,IAAI;AAalB,UAAM,OACL,OAAO,cAAc,YACrB,cAAc,QACd,CAAC,MAAM,QAAQ,SAAS,IACrB,OAAO,KAAK,SAAS,IACrB,CAAC,OAAO;AACZ,UAAM,UAAU,eAAe,MAAM;AACrC,UAAM,SAAS,QAAQ;AAAA,MAAQ,CAAC,QAC/B,KAAK,QAAQ,CAAC,QAAQ,KAAK,IAAI,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC;AAAA,IACpD;AACA,UAAM,SAAS,MACd,WAAW,QAAQ,WAAWA,YAAW,IAAI,IAAI,SAAS,GAAI,CAAC;AAChE,QAAIC;AACJ,QAAI,OAAO,WAAW,GAAG;AACxB,YAAM,WAAW,OAAO;AACxB,eAAS,KAAK,QAAQ;AACtB,MAAAA,YAAW,SAAS;AACpB,eAAS,KAAK,IAAI,OAAO,SAAS,QAAQ;AAAA,IAC3C,OAAO;AACN,MAAAA,YAAW,QAAQ,IAAI,MAAM,EAAE,KAAK,MAAM,OAAO,EAAE,QAAQ;AAC3D,YAAM,KAAKA,SAAQ;AAAA,IACpB;AACA,eAAW,OAAO,SAAS;AAC1B,YAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,oBAAI,IAAI;AACvC,WAAK,IAAI,KAAK,KAAK;AACnB,iBAAW,OAAO,KAAM,OAAM,IAAI,KAAKA,SAAQ;AAAA,IAChD;AACA,oBAAgB;AAAA,EACjB;AACA,QAAM,QAAQ,cAAc,QAAQ;AACpC,QAAM,WAAW,QAAQ,IAAI,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;AAAA,IACxD,MAAM;AAAA,EACP;AACA,SAAO,OAAO,OAAO,OAAO,SAAS,QAAQ,CAAC;AAC/C;",
+  "names": ["optionsAt", "finished"]
+}

package/dist/stagger/stagger.d.ts

@@ -0,0 +1,12 @@
+import type { EasingDefinition } from "../easing/types.js";
+export interface StaggerOptions {
+    /** Seconds before the first one starts. */
+    readonly startDelay?: number;
+    /** Which one starts first; the others follow by their distance from it. */
+    readonly from?: "first" | "last" | "center" | number;
+    /** Spreads the delays along an easing instead of evenly. */
+    readonly ease?: EasingDefinition;
+}
+/** A `delay` for many targets: `gap` seconds between neighbours. */
+export declare function stagger(gap?: number, options?: StaggerOptions): (index: number, total: number) => number;
+//# sourceMappingURL=stagger.d.ts.map

package/dist/stagger/stagger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stagger.d.ts","sourceRoot":"","sources":["../../src/stagger/stagger.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC9B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,2EAA2E;IAC3E,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrD,4DAA4D;IAC5D,QAAQ,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACjC;AASD,oEAAoE;AACpE,wBAAgB,OAAO,CACtB,GAAG,SAAM,EACT,OAAO,GAAE,cAAmB,GAC1B,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAY1C"}

package/dist/stagger/stagger.js

@@ -0,0 +1,21 @@
+import { resolveEasing } from "../easing/named.js";
+const ORIGINS = {
+  first: () => 0,
+  last: (total) => total - 1,
+  center: (total) => (total - 1) / 2
+};
+function stagger(gap = 0.1, options = {}) {
+  const { startDelay = 0, from = "first", ease } = options;
+  return (index, total) => {
+    const origin = typeof from === "number" ? from : ORIGINS[from](total);
+    const distance = Math.abs(index - origin);
+    if (ease === void 0) return startDelay + distance * gap;
+    const furthest = Math.max(origin, total - 1 - origin);
+    const spread = furthest * gap;
+    return furthest === 0 ? startDelay : startDelay + resolveEasing(ease)(distance / furthest) * spread;
+  };
+}
+export {
+  stagger
+};
+//# sourceMappingURL=stagger.js.map

package/dist/stagger/stagger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stagger/stagger.ts"],
+  "sourcesContent": ["import { resolveEasing } from \"#/easing/named.ts\";\nimport type { EasingDefinition } from \"#/easing/types.ts\";\n\nexport interface StaggerOptions {\n\t/** Seconds before the first one starts. */\n\treadonly startDelay?: number;\n\t/** Which one starts first; the others follow by their distance from it. */\n\treadonly from?: \"first\" | \"last\" | \"center\" | number;\n\t/** Spreads the delays along an easing instead of evenly. */\n\treadonly ease?: EasingDefinition;\n}\n\nconst ORIGINS: Record<\"first\" | \"last\" | \"center\", (total: number) => number> =\n\t{\n\t\tfirst: () => 0,\n\t\tlast: (total) => total - 1,\n\t\tcenter: (total) => (total - 1) / 2,\n\t};\n\n/** A `delay` for many targets: `gap` seconds between neighbours. */\nexport function stagger(\n\tgap = 0.1,\n\toptions: StaggerOptions = {},\n): (index: number, total: number) => number {\n\tconst { startDelay = 0, from = \"first\", ease } = options;\n\treturn (index, total) => {\n\t\tconst origin = typeof from === \"number\" ? from : ORIGINS[from](total);\n\t\tconst distance = Math.abs(index - origin);\n\t\tif (ease === undefined) return startDelay + distance * gap;\n\t\tconst furthest = Math.max(origin, total - 1 - origin);\n\t\tconst spread = furthest * gap;\n\t\treturn furthest === 0\n\t\t\t? startDelay\n\t\t\t: startDelay + resolveEasing(ease)(distance / furthest) * spread;\n\t};\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAY9B,MAAM,UACL;AAAA,EACC,OAAO,MAAM;AAAA,EACb,MAAM,CAAC,UAAU,QAAQ;AAAA,EACzB,QAAQ,CAAC,WAAW,QAAQ,KAAK;AAClC;AAGM,SAAS,QACf,MAAM,KACN,UAA0B,CAAC,GACgB;AAC3C,QAAM,EAAE,aAAa,GAAG,OAAO,SAAS,KAAK,IAAI;AACjD,SAAO,CAAC,OAAO,UAAU;AACxB,UAAM,SAAS,OAAO,SAAS,WAAW,OAAO,QAAQ,IAAI,EAAE,KAAK;AACpE,UAAM,WAAW,KAAK,IAAI,QAAQ,MAAM;AACxC,QAAI,SAAS,OAAW,QAAO,aAAa,WAAW;AACvD,UAAM,WAAW,KAAK,IAAI,QAAQ,QAAQ,IAAI,MAAM;AACpD,UAAM,SAAS,WAAW;AAC1B,WAAO,aAAa,IACjB,aACA,aAAa,cAAc,IAAI,EAAE,WAAW,QAAQ,IAAI;AAAA,EAC5D;AACD;",
+  "names": []
+}

package/dist/testing/manual-frames.d.ts

@@ -0,0 +1,11 @@
+export interface ManualFrames {
+    /** Moves the clock by `ms`, running each 60 Hz frame it crosses while one is requested. */
+    advance(ms: number): void;
+    /** The clock, in milliseconds. */
+    time(): number;
+    /** Back to the browser's frames, with an empty loop. */
+    restore(): void;
+}
+/** Installs a clock the test steps by hand, starting at 0 with an empty loop. */
+export declare function manualFrames(): ManualFrames;
+//# sourceMappingURL=manual-frames.d.ts.map

package/dist/testing/manual-frames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manual-frames.d.ts","sourceRoot":"","sources":["../../src/testing/manual-frames.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC5B,2FAA2F;IAC3F,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kCAAkC;IAClC,IAAI,IAAI,MAAM,CAAC;IACf,wDAAwD;IACxD,OAAO,IAAI,IAAI,CAAC;CAChB;AAED,iFAAiF;AACjF,wBAAgB,YAAY,IAAI,YAAY,CAiC3C"}

package/dist/testing/manual-frames.js

@@ -0,0 +1,40 @@
+import { setFrameDriver } from "../frame/driver.js";
+import { resetFrameLoop } from "../frame/frame.js";
+const FRAME = 1e3 / 60;
+function manualFrames() {
+  let time = 0;
+  let tick;
+  resetFrameLoop();
+  setFrameDriver({
+    request(next) {
+      tick = next;
+    },
+    cancel() {
+      tick = void 0;
+    },
+    now: () => time
+  });
+  return {
+    advance(ms) {
+      const end = time + ms;
+      let frameAt = (Math.floor(time / FRAME + 1e-9) + 1) * FRAME;
+      while (frameAt <= end + 1e-9) {
+        time = frameAt;
+        const next = tick;
+        tick = void 0;
+        next?.(time);
+        frameAt += FRAME;
+      }
+      time = end;
+    },
+    time: () => time,
+    restore() {
+      resetFrameLoop();
+      setFrameDriver(void 0);
+    }
+  };
+}
+export {
+  manualFrames
+};
+//# sourceMappingURL=manual-frames.js.map

package/dist/testing/manual-frames.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/testing/manual-frames.ts"],
+  "sourcesContent": ["import { setFrameDriver } from \"#/frame/driver.ts\";\nimport { resetFrameLoop } from \"#/frame/frame.ts\";\n\nconst FRAME = 1000 / 60;\n\nexport interface ManualFrames {\n\t/** Moves the clock by `ms`, running each 60 Hz frame it crosses while one is requested. */\n\tadvance(ms: number): void;\n\t/** The clock, in milliseconds. */\n\ttime(): number;\n\t/** Back to the browser's frames, with an empty loop. */\n\trestore(): void;\n}\n\n/** Installs a clock the test steps by hand, starting at 0 with an empty loop. */\nexport function manualFrames(): ManualFrames {\n\tlet time = 0;\n\tlet tick: ((timestamp: number) => void) | undefined;\n\tresetFrameLoop();\n\tsetFrameDriver({\n\t\trequest(next) {\n\t\t\ttick = next;\n\t\t},\n\t\tcancel() {\n\t\t\ttick = undefined;\n\t\t},\n\t\tnow: () => time,\n\t});\n\treturn {\n\t\tadvance(ms) {\n\t\t\tconst end = time + ms;\n\t\t\t// Frames land on the 60 Hz grid however the test slices its steps.\n\t\t\tlet frameAt = (Math.floor(time / FRAME + 1e-9) + 1) * FRAME;\n\t\t\twhile (frameAt <= end + 1e-9) {\n\t\t\t\ttime = frameAt;\n\t\t\t\tconst next = tick;\n\t\t\t\ttick = undefined;\n\t\t\t\tnext?.(time);\n\t\t\t\tframeAt += FRAME;\n\t\t\t}\n\t\t\ttime = end;\n\t\t},\n\t\ttime: () => time,\n\t\trestore() {\n\t\t\tresetFrameLoop();\n\t\t\tsetFrameDriver(undefined);\n\t\t},\n\t};\n}\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,MAAM,QAAQ,MAAO;AAYd,SAAS,eAA6B;AAC5C,MAAI,OAAO;AACX,MAAI;AACJ,iBAAe;AACf,iBAAe;AAAA,IACd,QAAQ,MAAM;AACb,aAAO;AAAA,IACR;AAAA,IACA,SAAS;AACR,aAAO;AAAA,IACR;AAAA,IACA,KAAK,MAAM;AAAA,EACZ,CAAC;AACD,SAAO;AAAA,IACN,QAAQ,IAAI;AACX,YAAM,MAAM,OAAO;AAEnB,UAAI,WAAW,KAAK,MAAM,OAAO,QAAQ,IAAI,IAAI,KAAK;AACtD,aAAO,WAAW,MAAM,MAAM;AAC7B,eAAO;AACP,cAAM,OAAO;AACb,eAAO;AACP,eAAO,IAAI;AACX,mBAAW;AAAA,MACZ;AACA,aAAO;AAAA,IACR;AAAA,IACA,MAAM,MAAM;AAAA,IACZ,UAAU;AACT,qBAAe;AACf,qBAAe,MAAS;AAAA,IACzB;AAAA,EACD;AACD;",
+  "names": []
+}

package/dist/value/motion-value.d.ts

@@ -0,0 +1,27 @@
+export type MotionValueEvent = "change" | "animationStart" | "animationComplete" | "animationCancel";
+/** What `animate()` hands a value it drives; `finished` lets the value announce the end. */
+export interface MotionValueAnimation {
+    stop(): void;
+    readonly finished?: PromiseLike<unknown>;
+}
+export interface MotionValue<T = number> {
+    get(): T;
+    /** Sets the value and tracks its velocity. */
+    set(value: T): void;
+    /** Sets the value with no velocity and stops any animation. */
+    jump(value: T): void;
+    /** Units per second; 0 for a non-number or a value left alone for 30 ms. */
+    getVelocity(): number;
+    getPrevious(): T | undefined;
+    on(event: "change", listener: (value: T) => void): () => void;
+    on(event: Exclude<MotionValueEvent, "change">, listener: () => void): () => void;
+    /** Stops the running animation (`animationCancel`), then `animationStart`. */
+    start(animation: MotionValueAnimation): void;
+    /** Stops the running animation, if any, with `animationCancel`. */
+    stop(): void;
+    isAnimating(): boolean;
+    destroy(): void;
+}
+export declare function isMotionValue(value: unknown): value is MotionValue<unknown>;
+export declare function motionValue<T>(initial: T): MotionValue<T>;
+//# sourceMappingURL=motion-value.d.ts.map

package/dist/value/motion-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-value.d.ts","sourceRoot":"","sources":["../../src/value/motion-value.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GACzB,QAAQ,GACR,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,CAAC;AAErB,4FAA4F;AAC5F,MAAM,WAAW,oBAAoB;IACpC,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,MAAM;IACtC,GAAG,IAAI,CAAC,CAAC;IACT,8CAA8C;IAC9C,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACrB,4EAA4E;IAC5E,WAAW,IAAI,MAAM,CAAC;IACtB,WAAW,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7B,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAC9D,EAAE,CACD,KAAK,EAAE,OAAO,CAAC,gBAAgB,EAAE,QAAQ,CAAC,EAC1C,QAAQ,EAAE,MAAM,IAAI,GAClB,MAAM,IAAI,CAAC;IACd,8EAA8E;IAC9E,KAAK,CAAC,SAAS,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,mEAAmE;IACnE,IAAI,IAAI,IAAI,CAAC;IACb,WAAW,IAAI,OAAO,CAAC;IACvB,OAAO,IAAI,IAAI,CAAC;CAChB;AAKD,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,CAE3E;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAuFzD"}

package/dist/value/motion-value.js

@@ -0,0 +1,88 @@
+import { now } from "../frame/frame.js";
+const STALE_AFTER = 30;
+const values = /* @__PURE__ */ new WeakSet();
+function isMotionValue(value) {
+  return typeof value === "object" && value !== null && values.has(value);
+}
+function motionValue(initial) {
+  let current = initial;
+  let updatedAt = now();
+  let last;
+  let previous;
+  let previousAt = updatedAt;
+  let animation;
+  const listeners = /* @__PURE__ */ new Map();
+  function emit(event) {
+    for (const listener of listeners.get(event) ?? []) listener(current);
+  }
+  function stop() {
+    const running = animation;
+    if (!running) return;
+    animation = void 0;
+    running.stop();
+    emit("animationCancel");
+  }
+  const value = {
+    get: () => current,
+    set(next) {
+      const time = now();
+      if (time !== updatedAt) {
+        previous = current;
+        previousAt = updatedAt;
+      }
+      last = current;
+      current = next;
+      updatedAt = time;
+      emit("change");
+    },
+    jump(next) {
+      stop();
+      last = current;
+      current = next;
+      previous = void 0;
+      updatedAt = now();
+      previousAt = updatedAt;
+      emit("change");
+    },
+    getVelocity() {
+      const elapsed = updatedAt - previousAt;
+      if (typeof current !== "number" || typeof previous !== "number" || elapsed <= 0 || now() - updatedAt > STALE_AFTER) {
+        return 0;
+      }
+      return (current - previous) / elapsed * 1e3;
+    },
+    getPrevious: () => last,
+    // One implementation behind both overloads: a lifecycle listener ignores the argument.
+    on: ((event, listener) => {
+      const set = listeners.get(event) ?? /* @__PURE__ */ new Set();
+      listeners.set(event, set);
+      set.add(listener);
+      return () => {
+        set.delete(listener);
+      };
+    }),
+    start(next) {
+      stop();
+      animation = next;
+      emit("animationStart");
+      next.finished?.then(() => {
+        if (animation !== next) return;
+        animation = void 0;
+        emit("animationComplete");
+      });
+    },
+    stop,
+    isAnimating: () => animation !== void 0,
+    destroy() {
+      stop();
+      listeners.clear();
+    }
+  };
+  values.add(value);
+  return value;
+}
+export {
+  isMotionValue,
+  motionValue
+};
+//# sourceMappingURL=motion-value.js.map

package/dist/value/motion-value.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/value/motion-value.ts"],
+  "sourcesContent": ["import { now } from \"#/frame/frame.ts\";\n\nexport type MotionValueEvent =\n\t| \"change\"\n\t| \"animationStart\"\n\t| \"animationComplete\"\n\t| \"animationCancel\";\n\n/** What `animate()` hands a value it drives; `finished` lets the value announce the end. */\nexport interface MotionValueAnimation {\n\tstop(): void;\n\treadonly finished?: PromiseLike<unknown>;\n}\n\nexport interface MotionValue<T = number> {\n\tget(): T;\n\t/** Sets the value and tracks its velocity. */\n\tset(value: T): void;\n\t/** Sets the value with no velocity and stops any animation. */\n\tjump(value: T): void;\n\t/** Units per second; 0 for a non-number or a value left alone for 30 ms. */\n\tgetVelocity(): number;\n\tgetPrevious(): T | undefined;\n\ton(event: \"change\", listener: (value: T) => void): () => void;\n\ton(\n\t\tevent: Exclude<MotionValueEvent, \"change\">,\n\t\tlistener: () => void,\n\t): () => void;\n\t/** Stops the running animation (`animationCancel`), then `animationStart`. */\n\tstart(animation: MotionValueAnimation): void;\n\t/** Stops the running animation, if any, with `animationCancel`. */\n\tstop(): void;\n\tisAnimating(): boolean;\n\tdestroy(): void;\n}\n\nconst STALE_AFTER = 30;\nconst values = new WeakSet<object>();\n\nexport function isMotionValue(value: unknown): value is MotionValue<unknown> {\n\treturn typeof value === \"object\" && value !== null && values.has(value);\n}\n\nexport function motionValue<T>(initial: T): MotionValue<T> {\n\tlet current = initial;\n\tlet updatedAt = now();\n\tlet last: T | undefined;\n\tlet previous: T | undefined;\n\tlet previousAt = updatedAt;\n\tlet animation: MotionValueAnimation | undefined;\n\tconst listeners = new Map<MotionValueEvent, Set<(value?: T) => void>>();\n\n\tfunction emit(event: MotionValueEvent): void {\n\t\tfor (const listener of listeners.get(event) ?? []) listener(current);\n\t}\n\n\tfunction stop(): void {\n\t\tconst running = animation;\n\t\tif (!running) return;\n\t\t// Cleared first: the animation's own stop may call back into this value.\n\t\tanimation = undefined;\n\t\trunning.stop();\n\t\temit(\"animationCancel\");\n\t}\n\n\tconst value: MotionValue<T> = {\n\t\tget: () => current,\n\t\tset(next) {\n\t\t\tconst time = now();\n\t\t\t// Two sets in one frame keep the previous frame's sample, so velocity\n\t\t\t// spans real time instead of dividing by zero.\n\t\t\tif (time !== updatedAt) {\n\t\t\t\tprevious = current;\n\t\t\t\tpreviousAt = updatedAt;\n\t\t\t}\n\t\t\tlast = current;\n\t\t\tcurrent = next;\n\t\t\tupdatedAt = time;\n\t\t\temit(\"change\");\n\t\t},\n\t\tjump(next) {\n\t\t\tstop();\n\t\t\tlast = current;\n\t\t\tcurrent = next;\n\t\t\tprevious = undefined;\n\t\t\tupdatedAt = now();\n\t\t\tpreviousAt = updatedAt;\n\t\t\temit(\"change\");\n\t\t},\n\t\tgetVelocity() {\n\t\t\tconst elapsed = updatedAt - previousAt;\n\t\t\tif (\n\t\t\t\ttypeof current !== \"number\" ||\n\t\t\t\ttypeof previous !== \"number\" ||\n\t\t\t\telapsed <= 0 ||\n\t\t\t\tnow() - updatedAt > STALE_AFTER\n\t\t\t) {\n\t\t\t\treturn 0;\n\t\t\t}\n\t\t\treturn ((current - previous) / elapsed) * 1000;\n\t\t},\n\t\tgetPrevious: () => last,\n\t\t// One implementation behind both overloads: a lifecycle listener ignores the argument.\n\t\ton: ((event: MotionValueEvent, listener: (value?: T) => void) => {\n\t\t\tconst set = listeners.get(event) ?? new Set();\n\t\t\tlisteners.set(event, set);\n\t\t\tset.add(listener);\n\t\t\treturn () => {\n\t\t\t\tset.delete(listener);\n\t\t\t};\n\t\t}) as MotionValue<T>[\"on\"],\n\t\tstart(next) {\n\t\t\tstop();\n\t\t\tanimation = next;\n\t\t\temit(\"animationStart\");\n\t\t\tnext.finished?.then(() => {\n\t\t\t\tif (animation !== next) return;\n\t\t\t\tanimation = undefined;\n\t\t\t\temit(\"animationComplete\");\n\t\t\t});\n\t\t},\n\t\tstop,\n\t\tisAnimating: () => animation !== undefined,\n\t\tdestroy() {\n\t\t\tstop();\n\t\t\tlisteners.clear();\n\t\t},\n\t};\n\tvalues.add(value);\n\treturn value;\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAoCpB,MAAM,cAAc;AACpB,MAAM,SAAS,oBAAI,QAAgB;AAE5B,SAAS,cAAc,OAA+C;AAC5E,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAO,IAAI,KAAK;AACvE;AAEO,SAAS,YAAe,SAA4B;AAC1D,MAAI,UAAU;AACd,MAAI,YAAY,IAAI;AACpB,MAAI;AACJ,MAAI;AACJ,MAAI,aAAa;AACjB,MAAI;AACJ,QAAM,YAAY,oBAAI,IAAgD;AAEtE,WAAS,KAAK,OAA+B;AAC5C,eAAW,YAAY,UAAU,IAAI,KAAK,KAAK,CAAC,EAAG,UAAS,OAAO;AAAA,EACpE;AAEA,WAAS,OAAa;AACrB,UAAM,UAAU;AAChB,QAAI,CAAC,QAAS;AAEd,gBAAY;AACZ,YAAQ,KAAK;AACb,SAAK,iBAAiB;AAAA,EACvB;AAEA,QAAM,QAAwB;AAAA,IAC7B,KAAK,MAAM;AAAA,IACX,IAAI,MAAM;AACT,YAAM,OAAO,IAAI;AAGjB,UAAI,SAAS,WAAW;AACvB,mBAAW;AACX,qBAAa;AAAA,MACd;AACA,aAAO;AACP,gBAAU;AACV,kBAAY;AACZ,WAAK,QAAQ;AAAA,IACd;AAAA,IACA,KAAK,MAAM;AACV,WAAK;AACL,aAAO;AACP,gBAAU;AACV,iBAAW;AACX,kBAAY,IAAI;AAChB,mBAAa;AACb,WAAK,QAAQ;AAAA,IACd;AAAA,IACA,cAAc;AACb,YAAM,UAAU,YAAY;AAC5B,UACC,OAAO,YAAY,YACnB,OAAO,aAAa,YACpB,WAAW,KACX,IAAI,IAAI,YAAY,aACnB;AACD,eAAO;AAAA,MACR;AACA,cAAS,UAAU,YAAY,UAAW;AAAA,IAC3C;AAAA,IACA,aAAa,MAAM;AAAA;AAAA,IAEnB,KAAK,CAAC,OAAyB,aAAkC;AAChE,YAAM,MAAM,UAAU,IAAI,KAAK,KAAK,oBAAI,IAAI;AAC5C,gBAAU,IAAI,OAAO,GAAG;AACxB,UAAI,IAAI,QAAQ;AAChB,aAAO,MAAM;AACZ,YAAI,OAAO,QAAQ;AAAA,MACpB;AAAA,IACD;AAAA,IACA,MAAM,MAAM;AACX,WAAK;AACL,kBAAY;AACZ,WAAK,gBAAgB;AACrB,WAAK,UAAU,KAAK,MAAM;AACzB,YAAI,cAAc,KAAM;AACxB,oBAAY;AACZ,aAAK,mBAAmB;AAAA,MACzB,CAAC;AAAA,IACF;AAAA,IACA;AAAA,IACA,aAAa,MAAM,cAAc;AAAA,IACjC,UAAU;AACT,WAAK;AACL,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD;AACA,SAAO,IAAI,KAAK;AAChB,SAAO;AACR;",
+  "names": []
+}

package/dist/value/transform.d.ts

@@ -0,0 +1,16 @@
+import { type InterpolateOptions } from "../interpolate/interpolate.js";
+import { type MotionValue } from "./motion-value.js";
+type Values<V extends readonly unknown[]> = {
+    readonly [K in keyof V]: MotionValue<V[K]>;
+};
+/**
+ * A value derived from others, recomputed on each of their changes:
+ * `transformValue(x, [0, 100], [1, 0])` maps through a range,
+ * `transformValue([x, y], (x, y) => Math.hypot(x, y))` combines. Its
+ * `destroy()` lets go of the sources.
+ */
+export declare function transformValue<T>(source: MotionValue<number>, input: readonly number[], output: readonly T[], options?: InterpolateOptions<T>): MotionValue<T>;
+export declare function transformValue<S, T>(source: MotionValue<S>, compute: (value: S) => T): MotionValue<T>;
+export declare function transformValue<V extends readonly unknown[], T>(sources: Values<V>, compute: (...values: V) => T): MotionValue<T>;
+export {};
+//# sourceMappingURL=transform.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../src/value/transform.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,kBAAkB,EAEvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAExE,KAAK,MAAM,CAAC,CAAC,SAAS,SAAS,OAAO,EAAE,IAAI;IAC3C,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC/B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAC3B,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC7B,WAAW,CAAC,CAAC,CAAC,CAAC;AAClB,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,EAClC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GACtB,WAAW,CAAC,CAAC,CAAC,CAAC;AAClB,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,OAAO,EAAE,EAAE,CAAC,EAC7D,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAClB,OAAO,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,KAAK,CAAC,GAC1B,WAAW,CAAC,CAAC,CAAC,CAAC"}

package/dist/value/transform.js

@@ -0,0 +1,28 @@
+import {
+  interpolate
+} from "../interpolate/interpolate.js";
+import { motionValue } from "./motion-value.js";
+function transformValue(sources, inputOrCompute, output, options) {
+  const list = Array.isArray(sources) ? sources : [sources];
+  const compute = typeof inputOrCompute === "function" ? inputOrCompute : mapThrough(interpolate(inputOrCompute, output ?? [], options));
+  function read() {
+    return compute(...list.map((source) => source.get()));
+  }
+  const derived = motionValue(read());
+  const unsubscribes = list.map(
+    (source) => source.on("change", () => derived.set(read()))
+  );
+  const destroy = derived.destroy;
+  derived.destroy = () => {
+    for (const unsubscribe of unsubscribes) unsubscribe();
+    destroy();
+  };
+  return derived;
+}
+function mapThrough(map) {
+  return (value) => map(value);
+}
+export {
+  transformValue
+};
+//# sourceMappingURL=transform.js.map

package/dist/value/transform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/value/transform.ts"],
+  "sourcesContent": ["import {\n\ttype InterpolateOptions,\n\tinterpolate,\n} from \"#/interpolate/interpolate.ts\";\nimport { type MotionValue, motionValue } from \"#/value/motion-value.ts\";\n\ntype Values<V extends readonly unknown[]> = {\n\treadonly [K in keyof V]: MotionValue<V[K]>;\n};\n\n/**\n * A value derived from others, recomputed on each of their changes:\n * `transformValue(x, [0, 100], [1, 0])` maps through a range,\n * `transformValue([x, y], (x, y) => Math.hypot(x, y))` combines. Its\n * `destroy()` lets go of the sources.\n */\nexport function transformValue<T>(\n\tsource: MotionValue<number>,\n\tinput: readonly number[],\n\toutput: readonly T[],\n\toptions?: InterpolateOptions<T>,\n): MotionValue<T>;\nexport function transformValue<S, T>(\n\tsource: MotionValue<S>,\n\tcompute: (value: S) => T,\n): MotionValue<T>;\nexport function transformValue<V extends readonly unknown[], T>(\n\tsources: Values<V>,\n\tcompute: (...values: V) => T,\n): MotionValue<T>;\nexport function transformValue<T>(\n\tsources: MotionValue<unknown> | readonly MotionValue<unknown>[],\n\tinputOrCompute: readonly number[] | ((...values: never[]) => T),\n\toutput?: readonly T[],\n\toptions?: InterpolateOptions<T>,\n): MotionValue<T> {\n\tconst list: readonly MotionValue<unknown>[] = Array.isArray(sources)\n\t\t? sources\n\t\t: [sources as MotionValue<unknown>];\n\tconst compute =\n\t\ttypeof inputOrCompute === \"function\"\n\t\t\t? (inputOrCompute as (...values: unknown[]) => T)\n\t\t\t: mapThrough(interpolate(inputOrCompute, output ?? [], options));\n\tfunction read(): T {\n\t\treturn compute(...list.map((source) => source.get()));\n\t}\n\tconst derived = motionValue(read());\n\tconst unsubscribes = list.map((source) =>\n\t\tsource.on(\"change\", () => derived.set(read())),\n\t);\n\tconst destroy = derived.destroy;\n\tderived.destroy = () => {\n\t\tfor (const unsubscribe of unsubscribes) unsubscribe();\n\t\tdestroy();\n\t};\n\treturn derived;\n}\n\nfunction mapThrough<T>(map: (value: number) => T): (...values: unknown[]) => T {\n\treturn (value) => map(value as number);\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,OACM;AACP,SAA2B,mBAAmB;AA0BvC,SAAS,eACf,SACA,gBACA,QACA,SACiB;AACjB,QAAM,OAAwC,MAAM,QAAQ,OAAO,IAChE,UACA,CAAC,OAA+B;AACnC,QAAM,UACL,OAAO,mBAAmB,aACtB,iBACD,WAAW,YAAY,gBAAgB,UAAU,CAAC,GAAG,OAAO,CAAC;AACjE,WAAS,OAAU;AAClB,WAAO,QAAQ,GAAG,KAAK,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,CAAC;AAAA,EACrD;AACA,QAAM,UAAU,YAAY,KAAK,CAAC;AAClC,QAAM,eAAe,KAAK;AAAA,IAAI,CAAC,WAC9B,OAAO,GAAG,UAAU,MAAM,QAAQ,IAAI,KAAK,CAAC,CAAC;AAAA,EAC9C;AACA,QAAM,UAAU,QAAQ;AACxB,UAAQ,UAAU,MAAM;AACvB,eAAW,eAAe,aAAc,aAAY;AACpD,YAAQ;AAAA,EACT;AACA,SAAO;AACR;AAEA,SAAS,WAAc,KAAwD;AAC9E,SAAO,CAAC,UAAU,IAAI,KAAe;AACtC;",
+  "names": []
+}

package/dist/view/in-view.d.ts

@@ -0,0 +1,19 @@
+export type InViewAmount = "some" | "all" | number;
+export interface InViewOptions {
+    /** The scrolling ancestor to intersect with; the viewport by default. */
+    readonly root?: Element | Document;
+    /** Grows or shrinks the root's box, CSS margin syntax: "0px 0px -20% 0px". */
+    readonly margin?: string;
+    /** How much of the element must show: any pixel, all of it, or a fraction. */
+    readonly amount?: InViewAmount;
+}
+export type OnViewEnd = (entry: IntersectionObserverEntry) => void;
+export type OnViewStart = (element: Element, entry: IntersectionObserverEntry) => undefined | OnViewEnd;
+/**
+ * Calls `onStart` when an element comes into view. When it returns a
+ * function, that runs when the element leaves and `onStart` runs again on
+ * the next entry; otherwise the element fires once. Returns a function that
+ * stops observing.
+ */
+export declare function inView(target: Element | string | readonly Element[], onStart: OnViewStart, options?: InViewOptions): () => void;
+//# sourceMappingURL=in-view.d.ts.map

package/dist/view/in-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"in-view.d.ts","sourceRoot":"","sources":["../../src/view/in-view.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;AACnE,MAAM,MAAM,WAAW,GAAG,CACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,yBAAyB,KAC5B,SAAS,GAAG,SAAS,CAAC;AAO3B;;;;;GAKG;AACH,wBAAgB,MAAM,CACrB,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,OAAO,EAAE,EAC7C,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,aAAkB,GACzB,MAAM,IAAI,CAuCZ"}

package/dist/view/in-view.js

@@ -0,0 +1,46 @@
+import { resolveElements } from "./resolve-elements.js";
+const THRESHOLDS = {
+  some: 0,
+  all: 1
+};
+function inView(target, onStart, options = {}) {
+  const elements = resolveElements(target);
+  if (elements.length === 0 || typeof IntersectionObserver === "undefined") {
+    return () => {
+    };
+  }
+  const amount = options.amount ?? "some";
+  const threshold = typeof amount === "number" ? amount : THRESHOLDS[amount];
+  const active = /* @__PURE__ */ new Map();
+  function onIntersect(entries) {
+    for (const entry of entries) {
+      const visible = entry.isIntersecting && entry.intersectionRatio + 1e-3 >= threshold;
+      const onEnd = active.get(entry.target);
+      if (visible && onEnd === void 0) {
+        const next = onStart(entry.target, entry);
+        if (typeof next === "function") {
+          active.set(entry.target, next);
+        } else {
+          observer.unobserve(entry.target);
+        }
+      }
+      if (!visible && onEnd !== void 0) {
+        active.delete(entry.target);
+        onEnd(entry);
+      }
+    }
+  }
+  const observer = new IntersectionObserver(onIntersect, {
+    root: options.root,
+    rootMargin: options.margin,
+    threshold
+  });
+  for (const element of elements) {
+    observer.observe(element);
+  }
+  return () => observer.disconnect();
+}
+export {
+  inView
+};
+//# sourceMappingURL=in-view.js.map

package/dist/view/in-view.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/view/in-view.ts"],
+  "sourcesContent": ["import { resolveElements } from \"#/view/resolve-elements.ts\";\n\nexport type InViewAmount = \"some\" | \"all\" | number;\n\nexport interface InViewOptions {\n\t/** The scrolling ancestor to intersect with; the viewport by default. */\n\treadonly root?: Element | Document;\n\t/** Grows or shrinks the root's box, CSS margin syntax: \"0px 0px -20% 0px\". */\n\treadonly margin?: string;\n\t/** How much of the element must show: any pixel, all of it, or a fraction. */\n\treadonly amount?: InViewAmount;\n}\n\nexport type OnViewEnd = (entry: IntersectionObserverEntry) => void;\nexport type OnViewStart = (\n\telement: Element,\n\tentry: IntersectionObserverEntry,\n) => undefined | OnViewEnd;\n\nconst THRESHOLDS: Readonly<Record<\"some\" | \"all\", number>> = {\n\tsome: 0,\n\tall: 1,\n};\n\n/**\n * Calls `onStart` when an element comes into view. When it returns a\n * function, that runs when the element leaves and `onStart` runs again on\n * the next entry; otherwise the element fires once. Returns a function that\n * stops observing.\n */\nexport function inView(\n\ttarget: Element | string | readonly Element[],\n\tonStart: OnViewStart,\n\toptions: InViewOptions = {},\n): () => void {\n\tconst elements = resolveElements(target);\n\tif (elements.length === 0 || typeof IntersectionObserver === \"undefined\") {\n\t\treturn () => {};\n\t}\n\tconst amount = options.amount ?? \"some\";\n\tconst threshold = typeof amount === \"number\" ? amount : THRESHOLDS[amount];\n\tconst active = new Map<Element, OnViewEnd>();\n\n\tfunction onIntersect(entries: IntersectionObserverEntry[]) {\n\t\tfor (const entry of entries) {\n\t\t\t// Chromium reports a fully visible box as 0.99\u2026 on fractional layouts.\n\t\t\tconst visible =\n\t\t\t\tentry.isIntersecting && entry.intersectionRatio + 1e-3 >= threshold;\n\t\t\tconst onEnd = active.get(entry.target);\n\t\t\tif (visible && onEnd === undefined) {\n\t\t\t\tconst next = onStart(entry.target, entry);\n\t\t\t\tif (typeof next === \"function\") {\n\t\t\t\t\tactive.set(entry.target, next);\n\t\t\t\t} else {\n\t\t\t\t\tobserver.unobserve(entry.target);\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (!visible && onEnd !== undefined) {\n\t\t\t\tactive.delete(entry.target);\n\t\t\t\tonEnd(entry);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst observer = new IntersectionObserver(onIntersect, {\n\t\troot: options.root,\n\t\trootMargin: options.margin,\n\t\tthreshold,\n\t});\n\tfor (const element of elements) {\n\t\tobserver.observe(element);\n\t}\n\treturn () => observer.disconnect();\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAmBhC,MAAM,aAAuD;AAAA,EAC5D,MAAM;AAAA,EACN,KAAK;AACN;AAQO,SAAS,OACf,QACA,SACA,UAAyB,CAAC,GACb;AACb,QAAM,WAAW,gBAAgB,MAAM;AACvC,MAAI,SAAS,WAAW,KAAK,OAAO,yBAAyB,aAAa;AACzE,WAAO,MAAM;AAAA,IAAC;AAAA,EACf;AACA,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,YAAY,OAAO,WAAW,WAAW,SAAS,WAAW,MAAM;AACzE,QAAM,SAAS,oBAAI,IAAwB;AAE3C,WAAS,YAAY,SAAsC;AAC1D,eAAW,SAAS,SAAS;AAE5B,YAAM,UACL,MAAM,kBAAkB,MAAM,oBAAoB,QAAQ;AAC3D,YAAM,QAAQ,OAAO,IAAI,MAAM,MAAM;AACrC,UAAI,WAAW,UAAU,QAAW;AACnC,cAAM,OAAO,QAAQ,MAAM,QAAQ,KAAK;AACxC,YAAI,OAAO,SAAS,YAAY;AAC/B,iBAAO,IAAI,MAAM,QAAQ,IAAI;AAAA,QAC9B,OAAO;AACN,mBAAS,UAAU,MAAM,MAAM;AAAA,QAChC;AAAA,MACD;AACA,UAAI,CAAC,WAAW,UAAU,QAAW;AACpC,eAAO,OAAO,MAAM,MAAM;AAC1B,cAAM,KAAK;AAAA,MACZ;AAAA,IACD;AAAA,EACD;AAEA,QAAM,WAAW,IAAI,qBAAqB,aAAa;AAAA,IACtD,MAAM,QAAQ;AAAA,IACd,YAAY,QAAQ;AAAA,IACpB;AAAA,EACD,CAAC;AACD,aAAW,WAAW,UAAU;AAC/B,aAAS,QAAQ,OAAO;AAAA,EACzB;AACA,SAAO,MAAM,SAAS,WAAW;AAClC;",
+  "names": []
+}

package/dist/view/resize.d.ts

@@ -0,0 +1,13 @@
+export interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+export type OnElementResize = (element: Element, size: Size) => void;
+export type OnWindowResize = (size: Size) => void;
+/**
+ * Calls back when an element's border box changes size, or when the window
+ * does. Returns a function that stops listening.
+ */
+export declare function resize(onResize: OnWindowResize): () => void;
+export declare function resize(target: Element | string | readonly Element[], onResize: OnElementResize): () => void;
+//# sourceMappingURL=resize.d.ts.map

package/dist/view/resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/view/resize.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;AACrE,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;AAyElD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,IAAI,CAAC;AAC7D,wBAAgB,MAAM,CACrB,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,OAAO,EAAE,EAC7C,QAAQ,EAAE,eAAe,GACvB,MAAM,IAAI,CAAC"}

package/dist/view/resize.js

@@ -0,0 +1,72 @@
+import { resolveElements } from "./resolve-elements.js";
+let observer;
+const elementListeners = /* @__PURE__ */ new Map();
+const windowListeners = /* @__PURE__ */ new Set();
+function boxSize(entry) {
+  const box = entry.borderBoxSize?.[0];
+  return box ? { width: box.inlineSize, height: box.blockSize } : { width: entry.contentRect.width, height: entry.contentRect.height };
+}
+function notifyElements(entries) {
+  for (const entry of entries) {
+    const size = boxSize(entry);
+    for (const listener of elementListeners.get(entry.target) ?? []) {
+      listener(entry.target, size);
+    }
+  }
+}
+function notifyWindow() {
+  const size = { width: window.innerWidth, height: window.innerHeight };
+  for (const listener of windowListeners) {
+    listener(size);
+  }
+}
+function resizeWindow(onResize) {
+  if (windowListeners.size === 0) {
+    window.addEventListener("resize", notifyWindow);
+  }
+  windowListeners.add(onResize);
+  return () => {
+    windowListeners.delete(onResize);
+    if (windowListeners.size === 0) {
+      window.removeEventListener("resize", notifyWindow);
+    }
+  };
+}
+function resizeElements(target, onResize) {
+  if (typeof ResizeObserver === "undefined") {
+    return () => {
+    };
+  }
+  observer ??= new ResizeObserver(notifyElements);
+  const elements = resolveElements(target);
+  for (const element of elements) {
+    const listeners = elementListeners.get(element) ?? /* @__PURE__ */ new Set();
+    if (listeners.size === 0) {
+      elementListeners.set(element, listeners);
+      observer.observe(element);
+    }
+    listeners.add(onResize);
+  }
+  return () => {
+    for (const element of elements) {
+      const listeners = elementListeners.get(element);
+      listeners?.delete(onResize);
+      if (listeners?.size === 0) {
+        elementListeners.delete(element);
+        observer?.unobserve(element);
+      }
+    }
+  };
+}
+function resize(targetOrListener, onResize) {
+  if (typeof targetOrListener === "function") {
+    return typeof window === "undefined" ? () => {
+    } : resizeWindow(targetOrListener);
+  }
+  return onResize ? resizeElements(targetOrListener, onResize) : () => {
+  };
+}
+export {
+  resize
+};
+//# sourceMappingURL=resize.js.map

package/dist/view/resize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/view/resize.ts"],
+  "sourcesContent": ["import { resolveElements } from \"#/view/resolve-elements.ts\";\n\nexport interface Size {\n\treadonly width: number;\n\treadonly height: number;\n}\n\nexport type OnElementResize = (element: Element, size: Size) => void;\nexport type OnWindowResize = (size: Size) => void;\n\n// One observer for every element on the page: a ResizeObserver per call\n// would multiply the browser's work by the number of animated elements.\nlet observer: ResizeObserver | undefined;\nconst elementListeners = new Map<Element, Set<OnElementResize>>();\nconst windowListeners = new Set<OnWindowResize>();\n\nfunction boxSize(entry: ResizeObserverEntry): Size {\n\tconst box = entry.borderBoxSize?.[0];\n\treturn box\n\t\t? { width: box.inlineSize, height: box.blockSize }\n\t\t: { width: entry.contentRect.width, height: entry.contentRect.height };\n}\n\nfunction notifyElements(entries: ResizeObserverEntry[]) {\n\tfor (const entry of entries) {\n\t\tconst size = boxSize(entry);\n\t\tfor (const listener of elementListeners.get(entry.target) ?? []) {\n\t\t\tlistener(entry.target, size);\n\t\t}\n\t}\n}\n\nfunction notifyWindow() {\n\tconst size = { width: window.innerWidth, height: window.innerHeight };\n\tfor (const listener of windowListeners) {\n\t\tlistener(size);\n\t}\n}\n\nfunction resizeWindow(onResize: OnWindowResize): () => void {\n\tif (windowListeners.size === 0) {\n\t\twindow.addEventListener(\"resize\", notifyWindow);\n\t}\n\twindowListeners.add(onResize);\n\treturn () => {\n\t\twindowListeners.delete(onResize);\n\t\tif (windowListeners.size === 0) {\n\t\t\twindow.removeEventListener(\"resize\", notifyWindow);\n\t\t}\n\t};\n}\n\nfunction resizeElements(\n\ttarget: Element | string | readonly Element[],\n\tonResize: OnElementResize,\n): () => void {\n\tif (typeof ResizeObserver === \"undefined\") {\n\t\treturn () => {};\n\t}\n\tobserver ??= new ResizeObserver(notifyElements);\n\tconst elements = resolveElements(target);\n\tfor (const element of elements) {\n\t\tconst listeners = elementListeners.get(element) ?? new Set();\n\t\tif (listeners.size === 0) {\n\t\t\telementListeners.set(element, listeners);\n\t\t\tobserver.observe(element);\n\t\t}\n\t\tlisteners.add(onResize);\n\t}\n\treturn () => {\n\t\tfor (const element of elements) {\n\t\t\tconst listeners = elementListeners.get(element);\n\t\t\tlisteners?.delete(onResize);\n\t\t\tif (listeners?.size === 0) {\n\t\t\t\telementListeners.delete(element);\n\t\t\t\tobserver?.unobserve(element);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Calls back when an element's border box changes size, or when the window\n * does. Returns a function that stops listening.\n */\nexport function resize(onResize: OnWindowResize): () => void;\nexport function resize(\n\ttarget: Element | string | readonly Element[],\n\tonResize: OnElementResize,\n): () => void;\nexport function resize(\n\ttargetOrListener: Element | string | readonly Element[] | OnWindowResize,\n\tonResize?: OnElementResize,\n): () => void {\n\tif (typeof targetOrListener === \"function\") {\n\t\treturn typeof window === \"undefined\"\n\t\t\t? () => {}\n\t\t\t: resizeWindow(targetOrListener);\n\t}\n\treturn onResize ? resizeElements(targetOrListener, onResize) : () => {};\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAYhC,IAAI;AACJ,MAAM,mBAAmB,oBAAI,IAAmC;AAChE,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,SAAS,QAAQ,OAAkC;AAClD,QAAM,MAAM,MAAM,gBAAgB,CAAC;AACnC,SAAO,MACJ,EAAE,OAAO,IAAI,YAAY,QAAQ,IAAI,UAAU,IAC/C,EAAE,OAAO,MAAM,YAAY,OAAO,QAAQ,MAAM,YAAY,OAAO;AACvE;AAEA,SAAS,eAAe,SAAgC;AACvD,aAAW,SAAS,SAAS;AAC5B,UAAM,OAAO,QAAQ,KAAK;AAC1B,eAAW,YAAY,iBAAiB,IAAI,MAAM,MAAM,KAAK,CAAC,GAAG;AAChE,eAAS,MAAM,QAAQ,IAAI;AAAA,IAC5B;AAAA,EACD;AACD;AAEA,SAAS,eAAe;AACvB,QAAM,OAAO,EAAE,OAAO,OAAO,YAAY,QAAQ,OAAO,YAAY;AACpE,aAAW,YAAY,iBAAiB;AACvC,aAAS,IAAI;AAAA,EACd;AACD;AAEA,SAAS,aAAa,UAAsC;AAC3D,MAAI,gBAAgB,SAAS,GAAG;AAC/B,WAAO,iBAAiB,UAAU,YAAY;AAAA,EAC/C;AACA,kBAAgB,IAAI,QAAQ;AAC5B,SAAO,MAAM;AACZ,oBAAgB,OAAO,QAAQ;AAC/B,QAAI,gBAAgB,SAAS,GAAG;AAC/B,aAAO,oBAAoB,UAAU,YAAY;AAAA,IAClD;AAAA,EACD;AACD;AAEA,SAAS,eACR,QACA,UACa;AACb,MAAI,OAAO,mBAAmB,aAAa;AAC1C,WAAO,MAAM;AAAA,IAAC;AAAA,EACf;AACA,eAAa,IAAI,eAAe,cAAc;AAC9C,QAAM,WAAW,gBAAgB,MAAM;AACvC,aAAW,WAAW,UAAU;AAC/B,UAAM,YAAY,iBAAiB,IAAI,OAAO,KAAK,oBAAI,IAAI;AAC3D,QAAI,UAAU,SAAS,GAAG;AACzB,uBAAiB,IAAI,SAAS,SAAS;AACvC,eAAS,QAAQ,OAAO;AAAA,IACzB;AACA,cAAU,IAAI,QAAQ;AAAA,EACvB;AACA,SAAO,MAAM;AACZ,eAAW,WAAW,UAAU;AAC/B,YAAM,YAAY,iBAAiB,IAAI,OAAO;AAC9C,iBAAW,OAAO,QAAQ;AAC1B,UAAI,WAAW,SAAS,GAAG;AAC1B,yBAAiB,OAAO,OAAO;AAC/B,kBAAU,UAAU,OAAO;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAWO,SAAS,OACf,kBACA,UACa;AACb,MAAI,OAAO,qBAAqB,YAAY;AAC3C,WAAO,OAAO,WAAW,cACtB,MAAM;AAAA,IAAC,IACP,aAAa,gBAAgB;AAAA,EACjC;AACA,SAAO,WAAW,eAAe,kBAAkB,QAAQ,IAAI,MAAM;AAAA,EAAC;AACvE;",
+  "names": []
+}

package/dist/view/resolve-elements.d.ts

@@ -0,0 +1,3 @@
+/** Elements named by a selector, a list or a single element. */
+export declare function resolveElements(target: Element | string | readonly Element[]): readonly Element[];
+//# sourceMappingURL=resolve-elements.d.ts.map

package/dist/view/resolve-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-elements.d.ts","sourceRoot":"","sources":["../../src/view/resolve-elements.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,wBAAgB,eAAe,CAC9B,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,OAAO,EAAE,GAC3C,SAAS,OAAO,EAAE,CAOpB"}

package/dist/view/resolve-elements.js

@@ -0,0 +1,10 @@
+function resolveElements(target) {
+  if (typeof target === "string") {
+    return typeof document === "undefined" ? [] : Array.from(document.querySelectorAll(target));
+  }
+  return "length" in target ? target : [target];
+}
+export {
+  resolveElements
+};
+//# sourceMappingURL=resolve-elements.js.map