coily 0.14.0 → 0.16.0

package/dist/css.js

@@ -0,0 +1,318 @@
+import { i as State, n as OverdampedSolver, o as invariant, r as UnderdampedSolver, t as CriticallyDampedSolver } from "./solver-CAXuxdKj.js";
+//#region src/css.ts
+function pickSolver(config, state) {
+	const solver = config.dampingRatio < 1 ? new UnderdampedSolver(state) : config.dampingRatio === 1 ? new CriticallyDampedSolver(state) : new OverdampedSolver(state);
+	solver.configure(config);
+	return solver;
+}
+function walk(config, displacement, spanSec, scale, stopAtRest, velocity = 0) {
+	const state = new State(config, displacement, velocity);
+	const solver = pickSolver(config, state);
+	const period = 2 * Math.PI / config.naturalFrequency;
+	const dt = Math.max(1e-4, Math.min(period / 48, spanSec / 160));
+	const points = [{
+		x: 0,
+		y: 0
+	}];
+	let t = 0;
+	while (spanSec - t > 1e-9) {
+		const step = Math.min(dt, spanSec - t);
+		solver.tick(step);
+		t += step;
+		points.push({
+			x: t / spanSec,
+			y: (1 - state.position / displacement) * scale
+		});
+		if (stopAtRest && state.isResting) break;
+	}
+	return points;
+}
+function buildEasing(points, maxError) {
+	const simplified = simplify(points, maxError);
+	return {
+		easing: format(simplified),
+		stops: simplified.length,
+		maxError: reconstructionError(points, simplified)
+	};
+}
+function buildSettle(config, displacement, durationMs, maxError, velocity = 0) {
+	const points = walk(config, displacement, durationMs / 1e3, 1, true, velocity);
+	const last = points[points.length - 1];
+	if (1 - last.x > 1e-6) points.push({
+		x: 1,
+		y: 1
+	});
+	else {
+		last.x = 1;
+		last.y = 1;
+	}
+	return {
+		mode: "settle",
+		duration: durationMs,
+		...buildEasing(points, maxError)
+	};
+}
+function buildLoop(config, displacement, maxError) {
+	const halfSec = Math.PI / config.naturalFrequency;
+	const points = walk(config, displacement, halfSec, .5, false);
+	const last = points[points.length - 1];
+	last.x = 1;
+	last.y = 1;
+	return {
+		mode: "loop",
+		duration: halfSec * 1e3,
+		direction: "alternate",
+		iterations: "infinite",
+		...buildEasing(points, maxError)
+	};
+}
+function simplify(points, epsilon) {
+	const keep = Array.from({ length: points.length }, () => false);
+	keep[0] = true;
+	keep[points.length - 1] = true;
+	const stack = [[0, points.length - 1]];
+	while (stack.length > 0) {
+		const [lo, hi] = stack.pop();
+		const a = points[lo];
+		const b = points[hi];
+		const dx = b.x - a.x;
+		let worst = -1;
+		let worstIndex = -1;
+		for (let i = lo + 1; i < hi; i += 1) {
+			const p = points[i];
+			const f = dx === 0 ? 0 : (p.x - a.x) / dx;
+			const interpolated = a.y + f * (b.y - a.y);
+			const distance = Math.abs(p.y - interpolated);
+			if (distance > worst) {
+				worst = distance;
+				worstIndex = i;
+			}
+		}
+		if (worst > epsilon && worstIndex !== -1) {
+			keep[worstIndex] = true;
+			stack.push([lo, worstIndex], [worstIndex, hi]);
+		}
+	}
+	return points.filter((_, i) => keep[i]);
+}
+function trim(value, places) {
+	return Number(value.toFixed(places)).toString();
+}
+function format(points) {
+	return `linear(${points.map((point, i) => {
+		const output = trim(point.y, 5);
+		if (i === 0 || i === points.length - 1) return output;
+		return `${output} ${trim(point.x * 100, 2)}%`;
+	}).join(", ")})`;
+}
+function reconstructionError(dense, simplified) {
+	let worst = 0;
+	let j = 0;
+	for (const point of dense) {
+		while (j < simplified.length - 2 && simplified[j + 1].x < point.x) j += 1;
+		const a = simplified[j];
+		const b = simplified[j + 1];
+		const dx = b.x - a.x;
+		const f = dx === 0 ? 0 : (point.x - a.x) / dx;
+		worst = Math.max(worst, Math.abs(point.y - (a.y + f * (b.y - a.y))));
+	}
+	return worst;
+}
+/**
+* Turns a spring config into a CSS `linear()` easing and the duration in
+* ms to pair it with. A settling config returns a `'settle'` easing. A
+* pure undamped config (`dampingRatio: 0` with passthrough `arrival`)
+* never settles and returns a `'loop'` easing for an infinite alternating
+* animation. Any other config that never settles, such as
+* `dampingRatio: 0` with `arrival: -1`, returns a `'settle'` easing cut
+* off at `maxDuration`.
+*/
+function springToLinear(config, options = {}) {
+	const displacement = options.displacement ?? 1;
+	const maxError = options.maxError ?? .0025;
+	const maxDuration = options.maxDuration ?? 1e4;
+	if (config.dampingRatio === 0 && config.arrival === 1) return buildLoop(config, displacement, maxError);
+	const settleTime = config.computeTimeRemaining({
+		position: displacement,
+		velocity: 0
+	});
+	return buildSettle(config, displacement, Math.min(settleTime, maxDuration), maxError);
+}
+/**
+* Like `springToLinear`, but for a spring caught mid-flight. `state`
+* carries the displacement from the target (`position`) and the current
+* `velocity`, so the easing continues the motion instead of restarting it.
+* Use it to regenerate an animation when its target changes. The curve
+* depends on the velocity, so compute it per interruption instead of
+* caching it per config.
+*
+* The result is always a `'settle'` easing, timed from `position`, so
+* `options.displacement` is ignored. A config that never settles is cut
+* off at `maxDuration`. Throws when `position` is 0 (within 1e-9), even if
+* `velocity` is not.
+*/
+function springFromState(config, state, options = {}) {
+	const maxError = options.maxError ?? .0025;
+	const maxDuration = options.maxDuration ?? 1e4;
+	invariant(Math.abs(state.position) > 1e-9, "springFromState needs a nonzero position (the value and target must differ)");
+	const settleTime = config.computeTimeRemaining(state);
+	return buildSettle(config, state.position, Math.min(settleTime, maxDuration), maxError, state.velocity);
+}
+/**
+* Advances a spring `state` by `elapsedMs` ms and returns the new
+* displacement and velocity. `elapsedMs <= 0` returns a copy of `state`.
+*
+* The Web Animations API doesn't expose velocity, so to interrupt a running
+* `element.animate`, advance the state it started from by its `currentTime`
+* and hand the result to `springFromState`.
+*/
+function springStateAt(config, state, elapsedMs) {
+	if (elapsedMs <= 0) return {
+		position: state.position,
+		velocity: state.velocity
+	};
+	const live = new State(config, state.position, state.velocity);
+	pickSolver(config, live).tick(elapsedMs / 1e3);
+	return {
+		position: live.position,
+		velocity: live.velocity
+	};
+}
+function resolveSpecs(config, specs, options) {
+	const withVelocity = specs.some((spec) => (spec.velocity ?? 0) !== 0);
+	invariant(!withVelocity || specs.length === 1, "velocity handoff is single-property: a from-state easing depends on that property, so run one animation per property");
+	const first = specs[0];
+	const easing = withVelocity ? springFromState(config, {
+		position: first.from - first.to,
+		velocity: first.velocity
+	}, options) : springToLinear(config, {
+		...options,
+		displacement: options.displacement ?? (Math.max(...specs.map((s) => Math.abs(s.to - s.from))) || 1)
+	});
+	const from = {};
+	const to = {};
+	for (const spec of specs) {
+		const format = spec.format ?? ((value) => `${Number(value.toFixed(3))}${spec.unit ?? ""}`);
+		const far = easing.mode === "loop" ? 2 * spec.to - spec.from : spec.to;
+		const start = format(spec.from);
+		const end = format(far);
+		from[spec.property] = from[spec.property] ? `${from[spec.property]} ${start}` : start;
+		to[spec.property] = to[spec.property] ? `${to[spec.property]} ${end}` : end;
+	}
+	return {
+		easing,
+		from,
+		to
+	};
+}
+function asArray(spec) {
+	return Array.isArray(spec) ? spec : [spec];
+}
+/**
+* Builds arguments for `element.animate(keyframes, options)`: two keyframes
+* carrying the endpoint values, and options carrying the spring's `linear()`
+* easing and duration. Pass an array of specs to drive several properties
+* from one spring. A settling spring fills forwards. An undamped one repeats
+* infinitely in alternating directions.
+*
+* @example
+* ```ts
+* const { keyframes, options } = springToWaapi(config, {
+*   property: 'translate',
+*   from: 0,
+*   to: 300,
+*   unit: 'px',
+* })
+* element.animate(keyframes, options)
+* ```
+*/
+function springToWaapi(config, spec, options = {}) {
+	const { easing, from, to } = resolveSpecs(config, asArray(spec), options);
+	const keyframes = [from, to];
+	const shared = {
+		duration: easing.duration,
+		easing: easing.easing
+	};
+	return {
+		keyframes,
+		options: easing.mode === "loop" ? {
+			...shared,
+			iterations: Number.POSITIVE_INFINITY,
+			direction: "alternate"
+		} : {
+			...shared,
+			fill: "forwards"
+		}
+	};
+}
+/**
+* Builds CSS text for the animation: a `@keyframes` rule named by `name`
+* (default `'coily'`) and an `animation` shorthand value that references
+* it, driving one property or several from one spring. A settling spring
+* fills forwards. An undamped one repeats infinitely in alternating
+* directions.
+*
+* @example
+* ```ts
+* const { keyframes, animation } = springToCss(config, {
+*   property: 'translate',
+*   from: 0,
+*   to: 300,
+*   unit: 'px',
+* })
+* const style = document.createElement('style')
+* style.textContent = keyframes
+* document.head.append(style)
+* element.style.animation = animation
+* ```
+*/
+function springToCss(config, spec, options = {}) {
+	const { easing, from, to } = resolveSpecs(config, asArray(spec), options);
+	const name = options.name ?? "coily";
+	const ms = `${Number(easing.duration.toFixed(1))}ms`;
+	const declare = (values) => Object.entries(values).map(([property, value]) => `${property}: ${value};`).join(" ");
+	return {
+		keyframes: `@keyframes ${name} {\n  from { ${declare(from)} }\n  to { ${declare(to)} }\n}`,
+		animation: easing.mode === "loop" ? `${ms} ${easing.easing} infinite alternate ${name}` : `${ms} ${easing.easing} forwards ${name}`
+	};
+}
+/**
+* Builds a CSS `transition` value that animates a property change with the
+* spring. Set it on the element, then change the property, for example on
+* `:hover`, with a toggled class, or with a state attribute. Pass several
+* specs to build one `transition` for several properties.
+*
+* The values come from your CSS rules. Each spec's `from` and `to` only
+* size the move, which tunes the duration. An undamped (looping) config
+* throws, because a transition cannot loop.
+*
+* A transition starts from rest unless its spec carries a `velocity`, in
+* the property's units per second, such as a drag's speed at release. The
+* velocity reshapes the curve and the duration, so build the transition at
+* the handoff. A spec with a velocity must be the only spec in the call.
+*
+* ```ts
+* // Release a dragged card back to 0 at the drag's speed.
+* card.style.transition = springToTransition(config, {
+*   property: 'translate',
+*   from: dragX,
+*   to: 0,
+*   velocity: releaseVelocity,
+* })
+* card.style.translate = '0px'
+* ```
+*
+* The browser carries no momentum between transitions, so a change that
+* interrupts one mid-flight stalls at the turn. To keep the momentum, read
+* the velocity with `springStateAt` and rebuild the transition with it.
+* For motion that reverses often, drive a live `Spring` instead.
+*/
+function springToTransition(config, spec, options = {}) {
+	const specs = asArray(spec);
+	const { easing } = resolveSpecs(config, specs, options);
+	invariant(easing.mode === "settle", "springToTransition requires a settling spring; an undamped (looping) config has no single end state to transition to");
+	const ms = `${Number(easing.duration.toFixed(1))}ms`;
+	return specs.map((s) => `${s.property} ${ms} ${easing.easing}`).join(", ");
+}
+//#endregion
+export { springFromState, springStateAt, springToCss, springToLinear, springToTransition, springToWaapi };

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-import { C as SpringDefinitionOptions, S as SpringDefinition, T as defineSpring, _ as accelerationOf, a as createSpringSystem, b as SpringSourceSymbol, c as ConfigShape, g as KinematicSource, h as SpringTarget, i as SpringSystemOptions, m as Spring, n as SpringOptions, o as CompositeSpring, p as Purpose, r as SpringSystem, s as CompositeSpringTarget, t as CompositeSpringOptions, u as PurposeShape, v as velocityOf, w as SpringState, x as mapSpring, y as SpringSource } from "./system-Ci-R4RaI.js";
-export { type CompositeSpring, type CompositeSpringOptions, type CompositeSpringTarget, type ConfigShape, type KinematicSource, type Purpose, type PurposeShape, type Spring, type SpringDefinition, type SpringDefinitionOptions, type SpringOptions, type SpringSource, SpringSourceSymbol, type SpringState, type SpringSystem, type SpringSystemOptions, type SpringTarget, accelerationOf, createSpringSystem, defineSpring, mapSpring, velocityOf };
+import { i as defineSpring, n as SpringDefinitionOptions, r as SpringState, t as SpringDefinition } from "./config-B8M2xp26.js";
+import { A as SpringSourceSymbol, C as accelerationOf, D as SourceValues, E as SourceShape, O as SpringSource, S as TargetedSourceApi, T as velocityOf, _ as Spring, a as createSpringSystem, b as KinematicSourceApi, c as CompositeSpring, d as PartialShape, f as PurposeShape, g as Purpose, h as TargetShape, i as SpringSystemOptions, j as mapSpring, k as SpringSourceApi, l as CompositeSpringTarget, m as Shape, n as SpringOptions, o as Ramp, p as ReadonlyShape, r as SpringSystem, s as RampOptions, t as CompositeSpringOptions, u as ConfigShape, v as SpringTarget, w as targetOf, x as TargetedSource, y as KinematicSource } from "./system-C7PbI4L0.js";
+export { type CompositeSpring, type CompositeSpringOptions, type CompositeSpringTarget, type ConfigShape, type KinematicSource, type KinematicSourceApi, type PartialShape, type Purpose, type PurposeShape, type Ramp, type RampOptions, type ReadonlyShape, type Shape, type SourceShape, type SourceValues, type Spring, SpringDefinition, type SpringDefinitionOptions, type SpringOptions, type SpringSource, type SpringSourceApi, SpringSourceSymbol, type SpringState, type SpringSystem, type SpringSystemOptions, type SpringTarget, type TargetShape, type TargetedSource, type TargetedSourceApi, accelerationOf, createSpringSystem, defineSpring, mapSpring, targetOf, velocityOf };

package/dist/index.js

@@ -1,78 +1,124 @@
-import { i as mapSpring, n as SpringSourceSymbol, o as defineSpring, r as isSpringSource, s as invariant, t as createSpringSystem } from "./system-BXxAHM2a.js";
+import { a as SpringSourceSymbol, c as registerRecipe, i as defineSpring, o as isSpringSource, r as SpringDefinition, s as mapSpring, t as createSpringSystem } from "./system-WejqGkfv.js";
+import { o as invariant } from "./solver-CAXuxdKj.js";
 //#region src/kinematic-source.ts
 function isKinematicSource(value) {
 	if (!isSpringSource(value)) return false;
 	const api = value[SpringSourceSymbol];
 	return "velocity" in api && "acceleration" in api;
 }
-const NOT_KINEMATIC = "expected a source in motion (a Spring or CompositeSpring); a value derived with mapSpring has neither velocity nor acceleration";
+function deriveView(source, read) {
+	const api = source[SpringSourceSymbol];
+	const view = Object.freeze({ [SpringSourceSymbol]: Object.freeze({
+		get value() {
+			return read();
+		},
+		onUpdate: (callback) => api.onUpdate(callback),
+		onDispose: (callback) => api.onDispose(callback)
+	}) });
+	registerRecipe(view, {
+		sources: [source],
+		read,
+		fns: []
+	});
+	return view;
+}
+const NOT_KINEMATIC = "expected a source in motion (a Spring, CompositeSpring, or Ramp); a derived source, such as a mapSpring result, has neither velocity nor acceleration";
 /**
-* Derives a source from another's velocity — the rate its value changes,
-* in value units per second. `velocityOf(motion)` is a source that reads
-* `motion`'s current velocity, so speed-driven effects fall out of the
-* same follow and `mapSpring` machinery as everything else: a spring can
-* follow it (`blur.target = velocityOf(motion)`) and a map can shape it
+* Derives a source that reads another source's velocity: the rate its
+* value changes, in value units per second. Speed-driven effects then
+* use the same tools as everything else. A spring can follow it
+* (`blur.target = velocityOf(motion)`), and a map can shape it
 * (`mapSpring(velocityOf(motion), (v) => 1 + Math.abs(v) * 0.001)` for
-* squash and stretch). A scalar source yields a scalar velocity a spring
-* can follow; a `CompositeSpring` or shape yields a velocity of the same
-* shape, mapped to a scalar the way the composite itself is.
+* squash and stretch). A scalar source yields a scalar velocity. A
+* `CompositeSpring` yields a velocity of its own shape, which you map to
+* a scalar as you would its value.
 *
-* The result is a stateless view, not a spring: it holds no
-* subscriptions and needs no disposal, and reads report the source's
-* current velocity on the fly. It updates when the source does and is
-* released with it — followers detach then, keeping their current
-* target, as they would from a disposed spring.
+* The result is a stateless view that holds no subscriptions and needs
+* no disposal. Each read reports the source's current velocity. It
+* updates when the source does and is released with it, and followers
+* then detach and keep their current target.
 *
-* Only a source in motion qualifies — a `Spring` or a `CompositeSpring`.
-* A value derived with `mapSpring` has no velocity (its rate of change
-* would need the derivative of the map), so it is rejected at the type
-* level and at runtime; take `velocityOf` of the spring the map reads
-* instead.
+* Only a `Spring`, a `CompositeSpring`, a `Ramp`, or a Vue ref that wraps
+* one qualifies. A `mapSpring` result has no velocity, and `velocityOf`
+* rejects it at the type level and at runtime. Take `velocityOf` of the
+* spring the map reads instead.
 */
 function velocityOf(source) {
 	invariant(isKinematicSource(source), NOT_KINEMATIC);
 	const api = source[SpringSourceSymbol];
-	return Object.freeze({ [SpringSourceSymbol]: Object.freeze({
-		get value() {
-			return api.velocity;
-		},
-		onUpdate: (callback) => api.onUpdate(callback),
-		onDispose: (callback) => api.onDispose(callback)
-	}) });
+	return deriveView(source, () => api.velocity);
 }
 /**
-* Derives a source from another's acceleration — the rate its velocity
-* changes, in value units per second squared. `accelerationOf(motion)`
-* spikes when `motion` is pushed hardest and passes through zero at the
-* peak of a swing, so force-driven effects fall out of the same follow
-* and `mapSpring` machinery: a spring can follow it, and a map can turn
-* it into an impact flash or a jelly wobble
+* Derives a source that reads another source's acceleration: the rate
+* its velocity changes, in value units per second squared. On a spring it
+* is largest just after a retarget and near the far end of each swing,
+* and passes through zero where a swing moves fastest. A spring can
+* follow it, and a map can turn it into an impact flash or a jelly wobble
 * (`mapSpring(accelerationOf(motion), (a) => Math.min(1, Math.abs(a) * 1e-4))`).
-* A scalar source yields a scalar acceleration; a `CompositeSpring` or
-* shape yields an acceleration of the same shape, mapped to a scalar the
-* way the composite itself is.
+* A scalar source yields a scalar acceleration. A `CompositeSpring`
+* yields an acceleration of its own shape, which you map to a scalar as
+* you would its value. A `Ramp`'s acceleration is always 0.
 *
-* The result is a stateless view, not a spring: it holds no
-* subscriptions and needs no disposal, and reads report the source's
-* current acceleration on the fly. It updates when the source does and
-* is released with it, followers detaching then as from a disposed
-* spring.
+* The result is a stateless view that holds no subscriptions and needs
+* no disposal. Each read reports the source's current acceleration. It
+* updates when the source does and is released with it, and followers
+* then detach and keep their current target.
 *
-* Only a source in motion qualifies — a `Spring` or a `CompositeSpring`.
-* A value derived with `mapSpring` has no acceleration, so it is rejected
-* at the type level and at runtime; take `accelerationOf` of the spring
-* the map reads instead.
+* Only a `Spring`, a `CompositeSpring`, a `Ramp`, or a Vue ref that wraps
+* one qualifies. A `mapSpring` result has no acceleration, and
+* `accelerationOf` rejects it at the type level and at runtime. Take
+* `accelerationOf` of the spring the map reads instead.
 */
 function accelerationOf(source) {
 	invariant(isKinematicSource(source), NOT_KINEMATIC);
 	const api = source[SpringSourceSymbol];
-	return Object.freeze({ [SpringSourceSymbol]: Object.freeze({
-		get value() {
-			return api.acceleration;
-		},
-		onUpdate: (callback) => api.onUpdate(callback),
-		onDispose: (callback) => api.onDispose(callback)
-	}) });
+	return deriveView(source, () => api.acceleration);
+}
+function isTargetedSource(value) {
+	return isKinematicSource(value) && "target" in value[SpringSourceSymbol];
+}
+const NO_TARGET = "expected a source with a target (a Spring, CompositeSpring, or Ramp); a derived source, such as a mapSpring result, has no target";
+/**
+* Derives a source that reads a spring's or ramp's target: where it is
+* heading, not where it is. Pair it with the source in a `mapSpring`
+* shape to measure against the destination, such as remaining travel,
+* progress, or a lead that anticipates the move. A `Spring` or a bounded
+* `Ramp` yields a scalar target that a spring can follow. An endless
+* `Ramp` yields `Infinity` or `-Infinity`, and a spring that follows it
+* throws. A `CompositeSpring` yields a target of its own shape, which you
+* map to a scalar as you would its value.
+*
+* ```ts
+* const system = createSpringSystem()
+* const body = system.createSpring(0)
+* // The eyes look ahead by the body's remaining travel, capped at 20.
+* const lead = mapSpring({ value: body, target: targetOf(body) }, ({ value, target }) =>
+*   Math.max(-20, Math.min(20, target - value)),
+* )
+* const eyes = system.createSpring(lead)
+*
+* body.target = 100
+* system.advance(100)
+* eyes.target // 20: the body still has more than 20 to go
+* ```
+*
+* The result is a stateless view that holds no subscriptions and needs
+* no disposal. Each read reports the spring's current target. It updates
+* when the spring does, but assigning `target` emits nothing by itself,
+* so followers pick up a new target on the next frame, when the spring
+* starts toward it. Under reduced motion, a `'motion'` spring jumps to
+* its new target and notifies followers at once. The view is released
+* with the spring, and followers then detach and keep their current
+* target.
+*
+* Only a `Spring`, a `CompositeSpring`, a `Ramp`, or a Vue ref that wraps
+* one has a target. `targetOf` rejects a `mapSpring` result at the type
+* level and at runtime.
+*/
+function targetOf(spring) {
+	invariant(isTargetedSource(spring), NO_TARGET);
+	const api = spring[SpringSourceSymbol];
+	return deriveView(spring, () => api.target);
 }
 //#endregion
-export { SpringSourceSymbol, accelerationOf, createSpringSystem, defineSpring, mapSpring, velocityOf };
+export { SpringDefinition, SpringSourceSymbol, accelerationOf, createSpringSystem, defineSpring, mapSpring, targetOf, velocityOf };

package/dist/nuxt.d.ts

@@ -11,39 +11,48 @@ interface CoilyModuleOptions {
    */
   debug?: boolean;
   /**
-   * Frame-rate cap. 0 means uncapped: one tick per displayed frame.
-   * Capped ticks land on whole display frames and receive the true
-   * elapsed time.
+   * Frame-rate cap. 0 means uncapped: one tick per displayed frame. A
+   * capped tick lands on a whole display frame and receives the true
+   * elapsed time in ms.
    * @default 0
    */
   fps?: number;
   /**
-   * Frame gap in milliseconds above which the gap is treated as lag and
-   * replaced with `adjustedLag`, so springs don't teleport when frames
-   * resume. 0 disables lag clamping.
+   * The frame gap in ms above which the system treats the gap as lag and
+   * replaces it with `adjustedLag`, so springs do not jump when frames
+   * resume. 0 turns off lag clamping.
    * @default 500
    */
   lagThreshold?: number;
   /**
-   * The elapsed milliseconds a lagging frame is replaced with. Clamped
-   * to at most `lagThreshold`.
+   * The elapsed time in ms that replaces a lagging frame. A frame uses
+   * at most `lagThreshold` ms of it.
    * @default 33
    */
   adjustedLag?: number;
   /**
-   * When springs snap to their targets instead of animating: `'user'`
+   * How far a spring can trail a source it follows within one frame, in
+   * the value's own units. Frames whose motion would exceed it run as
+   * sub-steps, so a smaller value follows more closely at more cost.
+   * @default 0.1
+   */
+  couplingTolerance?: number;
+  /**
+   * When springs snap to their targets instead of animating. `'user'`
    * follows the OS prefers-reduced-motion setting, including live
-   * changes; `'always'` and `'never'` force one behavior.
+   * changes. `'always'` and `'never'` force one behavior.
    * @default 'user'
    */
   reducedMotion?: 'user' | 'always' | 'never';
 }
 /**
- * The Nuxt module: creates an app-wide spring system (started on the
- * client), auto-imports the composables and helpers `useSpring`,
- * `useSpringSystem`, `useSpringPool`, `defineSpring`, `mapSpring`,
- * `velocityOf`, and `accelerationOf`, and registers the `SpringValue`
- * component. Types are left out — they would be noise in most apps.
+ * The Nuxt module. It creates one spring system for the app and starts
+ * it on the client only, so server rendering shows springs at their
+ * initial values. The module auto-imports
+ * `useSpring`, `useRamp`, `useSpringSystem`, `useSpringPool`,
+ * `defineSpring`, `mapSpring`, `velocityOf`, `accelerationOf`, and
+ * `targetOf`, and registers the `SpringValue` component. It does not
+ * auto-import types.
  */
 declare const coilyModule: NuxtModule;
 //#endregion

package/dist/nuxt.js

@@ -6,6 +6,7 @@ function getPluginTemplate(options) {
 	if (options.fps !== void 0) systemOptions.fps = options.fps;
 	if (options.lagThreshold !== void 0) systemOptions.lagThreshold = options.lagThreshold;
 	if (options.adjustedLag !== void 0) systemOptions.adjustedLag = options.adjustedLag;
+	if (options.couplingTolerance !== void 0) systemOptions.couplingTolerance = options.couplingTolerance;
 	if (options.reducedMotion) systemOptions.reducedMotion = options.reducedMotion;
 	return `import { createSpringSystem } from 'coily'
 import { provideSpringSystem } from 'coily/vue'
@@ -22,11 +23,13 @@ export default defineNuxtPlugin((nuxtApp) => {
 })`;
 }
 /**
-* The Nuxt module: creates an app-wide spring system (started on the
-* client), auto-imports the composables and helpers `useSpring`,
-* `useSpringSystem`, `useSpringPool`, `defineSpring`, `mapSpring`,
-* `velocityOf`, and `accelerationOf`, and registers the `SpringValue`
-* component. Types are left out — they would be noise in most apps.
+* The Nuxt module. It creates one spring system for the app and starts
+* it on the client only, so server rendering shows springs at their
+* initial values. The module auto-imports
+* `useSpring`, `useRamp`, `useSpringSystem`, `useSpringPool`,
+* `defineSpring`, `mapSpring`, `velocityOf`, `accelerationOf`, and
+* `targetOf`, and registers the `SpringValue` component. It does not
+* auto-import types.
 */
 const coilyModule = defineNuxtModule({
 	meta: {
@@ -46,6 +49,10 @@ const coilyModule = defineNuxtModule({
 				from: "coily/vue",
 				name: "useSpring"
 			},
+			{
+				from: "coily/vue",
+				name: "useRamp"
+			},
 			{
 				from: "coily/vue",
 				name: "useSpringSystem"
@@ -69,6 +76,10 @@ const coilyModule = defineNuxtModule({
 			{
 				from: "coily",
 				name: "accelerationOf"
+			},
+			{
+				from: "coily",
+				name: "targetOf"
 			}
 		]);
 		addComponent({