@humanspeak/svelte-motion 0.4.9 → 0.5.1

package/dist/utils/spring.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type FollowValueOptions, type MotionValue, type SpringOptions } from 'motion-dom';
 import { type Readable } from 'svelte/store';
+import { type AugmentedMotionValue } from './augmentMotionValue.svelte.js';
 /**
  * Spring + follow options for {@link useSpring}.
  *
@@ -8,6 +9,10 @@ import { type Readable } from 'svelte/store';
  * `velocity`, `restDelta`, `restSpeed`) plus `skipInitialAnimation` for
  * scroll-restoration scenarios.
  *
+ * `useSpring` is a thin wrapper over {@link useFollowValue} that hard-codes
+ * `type: 'spring'`. For other transition types (tween, inertia, keyframes)
+ * use `useFollowValue` directly.
+ *
  * @see https://motion.dev/docs/react-use-spring
  */
 export type UseSpringOptions = SpringOptions & Pick<FollowValueOptions, 'skipInitialAnimation'>;
@@ -21,46 +26,36 @@ export type UseSpringOptions = SpringOptions & Pick<FollowValueOptions, 'skipIni
  * - `current` — a Svelte-5 reactive read backed by `$state`. Use in templates
  *   and `$derived` / `$effect` to track the spring value without subscribing.
  * - `subscribe` — Svelte readable store contract. Calls the run function once
- *   synchronously with the current value, then on every change. Lets the
- *   spring be used with `$spring` template syntax, `get(spring)`, and as a
- *   dependency in `useTransform`'s function form.
+ *   synchronously with the current value, then on every change.
  */
-export type SpringMotionValue<T extends number | string> = Omit<MotionValue<T>, 'current'> & {
-    /** Reactive read in Svelte 5 templates / `$derived` / `$effect`. */
-    readonly current: T;
-    /** Svelte readable store compatibility. */
-    subscribe: (run: (value: T) => void) => () => void;
-};
+export type SpringMotionValue<T extends number | string> = AugmentedMotionValue<T>;
 /**
  * Creates a spring-animated `MotionValue`.
  *
  * Set a target with `.set(v)` to animate to it using spring physics, or
- * `.jump(v)` to skip the animation. Pass another `MotionValue` (or, for
- * backwards compatibility, a Svelte readable store like the ones from
- * `useScroll` / `useTime`) as `source` and the spring will animate towards
- * whatever that source emits.
- *
- * Returned object is a real motion-dom `MotionValue` — composes with
- * `animate()`, `useTransform`, `useVelocity`, and motion-dom's animation
- * engine. On top, it exposes:
+ * `.jump(v)` to skip the animation. Pass another `MotionValue` (or a Svelte
+ * readable store from `useScroll` / `useTime`) as `source` and the spring
+ * will animate toward whatever that source emits.
  *
- * - `.current` — Svelte-5 reactive read for templates and `$derived` /
- *   `$effect`.
- * - `.subscribe(run)` — Svelte readable store contract so `$spring` template
- *   syntax and `useTransform(() => …, [spring])` keep working during the
- *   Tier 2 migration window.
+ * Returned object is a real motion-dom `MotionValue` augmented with a
+ * `$state`-backed `.current` getter and a Svelte readable `.subscribe` shim.
+ * Composes with `useTransform`, `useVelocity`, `animate()`, and the rest of
+ * the motion-value surface.
  *
- * Lifecycle: must be called during component initialization. Cleanup is
- * registered via `$effect`; the spring stops animating and unsubscribes from
- * its source when the surrounding component / effect tears down. Call
- * `.destroy()` to clean up early.
+ * Lifecycle: must be called during component initialization. The follow
+ * animation, source bridge (if any), and motion value teardown are bound to
+ * the surrounding `$effect` scope.
  *
  * SSR-safe: returns a static `MotionValue` with no animation on the server.
  *
- * @template T
- * @param {number|string|MotionValue<number>|MotionValue<string>|Readable<number|string>} source Initial value or a source to follow.
- * @param {UseSpringOptions} [options] Spring + follow configuration.
- * @returns {SpringMotionValue<T>} A `MotionValue` with `.current` and `.subscribe`.
+ * Implementation: thin wrapper over {@link useFollowValue} that hard-codes
+ * `type: 'spring'`. For tween / inertia / keyframes follows, call
+ * `useFollowValue` directly.
+ *
+ * @template T The value type — `number` or `string` (unit strings preserved).
+ * @param source Initial value, a `MotionValue` to follow, or a Svelte readable.
+ * @param options Spring + follow configuration.
+ * @returns A `MotionValue<T>` with `.current` and `.subscribe`.
  *
  * @example
  * ```svelte
@@ -71,7 +66,7 @@ export type SpringMotionValue<T extends number | string> = Omit<MotionValue<T>,
  * </script>
  *
  * <button onclick={() => x.set(100)}>Animate</button>
- * <div>{x.current}</div>
+ * <div style="transform: translateX({x.current}px)">{x.current}</div>
  * ```
  *
  * @see https://motion.dev/docs/react-use-spring

package/dist/utils/spring.svelte.js

@@ -1,118 +1,10 @@
-import { attachFollow, isMotionValue, motionValue } from 'motion-dom';
-import { get } from 'svelte/store';
-/**
- * Detects a Svelte readable store. Excludes motion-dom `MotionValue` instances
- * (which also expose `subscribe`-shaped APIs in some versions) so the
- * MotionValue path is preferred.
- */
-const isSvelteReadable = (value) => {
-    return (!!value &&
-        typeof value === 'object' &&
-        typeof value.subscribe === 'function' &&
-        !isMotionValue(value));
-};
+import {} from 'motion-dom';
+import {} from 'svelte/store';
+import {} from './augmentMotionValue.svelte.js';
+import { useFollowValue } from './followValue.svelte.js';
 export function useSpring(source, options = {}) {
-    // SSR: return a static MotionValue with no animation. Reads return the
-    // best-effort initial value; .set / .jump become no-ops to avoid drifting
-    // away from the server-rendered snapshot.
-    if (typeof window === 'undefined') {
-        const initial = readInitial(source);
-        const ssrValue = motionValue(initial);
-        ssrValue.set = () => undefined;
-        ssrValue.jump = () => undefined;
-        return augmentForSvelte(ssrValue, () => undefined);
-    }
-    // Resolve initial + follow source.
-    let followSource;
-    let cleanupReadableBridge;
-    let svelteBridge;
-    if (isMotionValue(source)) {
-        followSource = source;
-    }
-    else if (isSvelteReadable(source)) {
-        // Bridge a Svelte readable into a MotionValue so attachFollow can
-        // track it. Synchronous initial sample comes from svelte/store's get().
-        const initialFromReadable = get(source);
-        svelteBridge = motionValue(initialFromReadable);
-        cleanupReadableBridge = source.subscribe((v) => {
-            // The Svelte readable contract calls the subscriber synchronously
-            // with the current value on subscribe. Skip if it equals the
-            // already-seeded bridge value so attachFollow doesn't fire a
-            // spring on the initial emit. Subsequent emits go through set()
-            // and trigger animation.
-            if (svelteBridge.get() === v)
-                return;
-            svelteBridge.set(v);
-        });
-        followSource = svelteBridge;
-    }
-    else {
-        followSource = source;
-    }
-    const initial = isMotionValue(followSource) ? followSource.get() : followSource;
-    const value = motionValue(initial);
-    const stopFollow = attachFollow(value, followSource, { type: 'spring', ...options });
-    // Side-cleanup for our augmentations. Single-shot guard lives in the
-    // augmented `value.destroy` (the only caller), so no flag here.
-    const dispose = () => {
-        stopFollow?.();
-        cleanupReadableBridge?.();
-        svelteBridge?.destroy();
-    };
-    $effect(() => () => value.destroy());
-    return augmentForSvelte(value, dispose);
+    // Cast through `unknown` because TypeScript can't narrow the multi-form
+    // `source` against `useFollowValue`'s overload set; runtime behavior is
+    // identical — `useFollowValue` dispatches on the same shapes.
+    return useFollowValue(source, { type: 'spring', ...options });
 }
-/**
- * Pull the synchronous initial value out of any accepted source form.
- */
-const readInitial = (source) => {
-    if (typeof source === 'number' || typeof source === 'string')
-        return source;
-    if (isMotionValue(source))
-        return source.get();
-    if (isSvelteReadable(source))
-        return get(source);
-    return 0;
-};
-/**
- * Layer Svelte-friendly affordances onto a motion-dom MotionValue: a
- * `$state`-tracked `.current` accessor (routing motion-dom's internal
- * `this.current = v` writes through `$state` so templates and `$derived` /
- * `$effect` re-run) and a Svelte readable store `.subscribe(run)` shim.
- */
-const augmentForSvelte = (value, dispose) => {
-    let current = $state(value.get());
-    Object.defineProperty(value, 'current', {
-        get: () => current,
-        // Same-value writes are no-ops: motion-dom's `updateAndNotify` calls
-        // `setCurrent(v)` before its own change check, so spring frames at
-        // rest still hit this setter; skipping equal writes avoids gratuitous
-        // accessor work even though $state would itself dedupe.
-        set: (v) => {
-            if (v !== current)
-                current = v;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    const originalDestroy = value.destroy.bind(value);
-    let destroyed = false;
-    value.destroy = () => {
-        if (destroyed)
-            return;
-        destroyed = true;
-        dispose();
-        originalDestroy();
-    };
-    const subscribe = (run) => {
-        run(value.get());
-        return value.on('change', run);
-    };
-    Object.defineProperty(value, 'subscribe', {
-        value: subscribe,
-        writable: false,
-        enumerable: false,
-        configurable: true
-    });
-    return value;
-};

package/dist/utils/time.svelte.d.ts

@@ -0,0 +1,47 @@
+import { type AugmentedMotionValue } from './augmentMotionValue.svelte.js';
+/**
+ * Returns an augmented `MotionValue<number>` that ticks once per render
+ * frame with the milliseconds elapsed since the value was created.
+ *
+ * Mirrors React framer-motion's `useTime` 1:1: a `MotionValue<number>`
+ * driven by motion-dom's `frame.update(tick, true)` keep-alive callback.
+ * The frame loop dedupes per-frame work across all motion-dom consumers,
+ * so multiple `useTime()` calls share the same render schedule.
+ *
+ * Two modes:
+ *
+ * - **Unique timeline** — `useTime()` starts its own keep-alive callback.
+ *   The motion value and the callback are torn down when the surrounding
+ *   `$effect` scope unmounts.
+ * - **Shared timeline** — `useTime(id)` callers passing the same `id` all
+ *   observe a single shared frame-loop callback. Each call still returns
+ *   an independent motion value (so destroying one consumer's value
+ *   doesn't ripple to others) but the values stay in lockstep. The
+ *   shared callback cancels the moment the last consumer unmounts; the
+ *   next `useTime(id)` call restarts it.
+ *
+ * The result is augmented with a `$state`-backed `.current` getter and a
+ * `.subscribe` shim — it composes with `useTransform`, `useSpring`, and
+ * the rest of the Tier 2 surface.
+ *
+ * Lifecycle: must be called during component initialization. SSR-safe:
+ * returns a static `motionValue(0)` with no frame loop on the server.
+ *
+ * @param id Optional timeline identifier for sharing across components.
+ * @returns A `MotionValue<number>` with `.current` and `.subscribe`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useTime, useTransform } from '@humanspeak/svelte-motion'
+ *
+ *   const time = useTime()
+ *   const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
+ * </script>
+ *
+ * <div style="transform: rotate({rotate.current}deg)">↻</div>
+ * ```
+ *
+ * @see https://motion.dev/docs/react-use-time
+ */
+export declare const useTime: (id?: string) => AugmentedMotionValue<number>;

package/dist/utils/time.svelte.js

@@ -0,0 +1,128 @@
+import { cancelFrame, frame, motionValue } from 'motion-dom';
+import { SvelteMap } from 'svelte/reactivity';
+import { augmentMotionValue } from './augmentMotionValue.svelte.js';
+// `SvelteMap` (not plain Map) per `eslint/svelte/prefer-svelte-reactivity`
+// inside `.svelte.ts` files. The contents aren't read in reactive scopes —
+// this is a plain keyed cache — but the linter rule applies uniformly.
+const sharedTimelines = new SvelteMap();
+// Clear shared timelines on HMR dispose to avoid stale entries across hot
+// reloads.
+const hot = import.meta.hot;
+if (hot) {
+    hot.dispose(() => {
+        for (const t of sharedTimelines.values()) {
+            t.cancel();
+            t.base.destroy();
+        }
+        sharedTimelines.clear();
+    });
+}
+/**
+ * Starts a keep-alive frame-loop callback that writes elapsed-milliseconds
+ * into a fresh `MotionValue<number>`. Returns the value and a cancel
+ * function that stops the loop. Caller owns the value's destroy lifecycle.
+ *
+ * Uses motion-dom's `frame.update(cb, true)` — `true` is the `keepAlive`
+ * flag, telling the frame loop to re-schedule the callback every frame
+ * automatically. Matches React framer-motion's `useAnimationFrame`.
+ */
+const startTimeBase = () => {
+    const base = motionValue(0);
+    let start = 0;
+    const tick = ({ timestamp }) => {
+        if (!start)
+            start = timestamp;
+        base.set(timestamp - start);
+    };
+    frame.update(tick, true);
+    return {
+        base,
+        cancel: () => cancelFrame(tick)
+    };
+};
+/**
+ * Returns an augmented `MotionValue<number>` that ticks once per render
+ * frame with the milliseconds elapsed since the value was created.
+ *
+ * Mirrors React framer-motion's `useTime` 1:1: a `MotionValue<number>`
+ * driven by motion-dom's `frame.update(tick, true)` keep-alive callback.
+ * The frame loop dedupes per-frame work across all motion-dom consumers,
+ * so multiple `useTime()` calls share the same render schedule.
+ *
+ * Two modes:
+ *
+ * - **Unique timeline** — `useTime()` starts its own keep-alive callback.
+ *   The motion value and the callback are torn down when the surrounding
+ *   `$effect` scope unmounts.
+ * - **Shared timeline** — `useTime(id)` callers passing the same `id` all
+ *   observe a single shared frame-loop callback. Each call still returns
+ *   an independent motion value (so destroying one consumer's value
+ *   doesn't ripple to others) but the values stay in lockstep. The
+ *   shared callback cancels the moment the last consumer unmounts; the
+ *   next `useTime(id)` call restarts it.
+ *
+ * The result is augmented with a `$state`-backed `.current` getter and a
+ * `.subscribe` shim — it composes with `useTransform`, `useSpring`, and
+ * the rest of the Tier 2 surface.
+ *
+ * Lifecycle: must be called during component initialization. SSR-safe:
+ * returns a static `motionValue(0)` with no frame loop on the server.
+ *
+ * @param id Optional timeline identifier for sharing across components.
+ * @returns A `MotionValue<number>` with `.current` and `.subscribe`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useTime, useTransform } from '@humanspeak/svelte-motion'
+ *
+ *   const time = useTime()
+ *   const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
+ * </script>
+ *
+ * <div style="transform: rotate({rotate.current}deg)">↻</div>
+ * ```
+ *
+ * @see https://motion.dev/docs/react-use-time
+ */
+export const useTime = (id) => {
+    // SSR: return a static motion value with no frame loop. Matches
+    // useSpring / useScroll's SSR branch — no $effect is registered.
+    if (typeof window === 'undefined') {
+        return augmentMotionValue(motionValue(0));
+    }
+    // Unique timeline: own callback, own MV, own lifecycle.
+    if (!id) {
+        const { base, cancel } = startTimeBase();
+        $effect(() => () => {
+            cancel();
+            base.destroy();
+        });
+        return augmentMotionValue(base);
+    }
+    // Shared timeline: one frame callback per `id`, mirrored into per-
+    // consumer MVs.
+    let timeline = sharedTimelines.get(id);
+    if (!timeline) {
+        const { base, cancel } = startTimeBase();
+        timeline = { base, refcount: 0, cancel };
+        sharedTimelines.set(id, timeline);
+    }
+    timeline.refcount++;
+    const consumerMv = motionValue(timeline.base.get());
+    const unsubBase = timeline.base.on('change', (t) => consumerMv.set(t));
+    $effect(() => () => {
+        unsubBase();
+        consumerMv.destroy();
+        const t = sharedTimelines.get(id);
+        if (!t)
+            return;
+        t.refcount--;
+        if (t.refcount > 0)
+            return;
+        t.cancel();
+        t.base.destroy();
+        sharedTimelines.delete(id);
+    });
+    return augmentMotionValue(consumerMv);
+};

package/dist/utils/transform.svelte.d.ts

@@ -0,0 +1,170 @@
+import { type MotionValue, type TransformOptions } from 'motion-dom';
+import { type Readable } from 'svelte/store';
+import { type AugmentedMotionValue } from './augmentMotionValue.svelte.js';
+export type TransformValues = Partial<{
+    x: number;
+    y: number;
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    rotate: number;
+}>;
+/**
+ * Build a CSS transform string from numeric values (no matrices).
+ *
+ * @param values Partial map of translate/scale/rotate values.
+ * @returns A space-separated CSS `transform` string, or `""` when all values are defaults.
+ *
+ * @example
+ * ```ts
+ * buildTransform({ x: 10, y: 20, scale: 1.5 })
+ * // => "translate(10px, 20px) scale(1.5)"
+ *
+ * buildTransform({ x: 0, y: 0, rotate: 0 }) // all defaults
+ * // => ""
+ * ```
+ */
+export declare const buildTransform: (values: TransformValues) => string;
+/**
+ * Lightweight safety check for transform magnitudes and NaN values.
+ *
+ * @param values Transform values to validate.
+ * @param opts Optional configuration; `maxScale` caps allowable absolute scale (default 8).
+ * @returns `true` if all scale values are finite and within bounds.
+ *
+ * @example
+ * ```ts
+ * isSafeTransform({ scale: 2 })                  // true
+ * isSafeTransform({ scale: 100 })                // false (exceeds default maxScale=8)
+ * isSafeTransform({ scale: 100 }, { maxScale: 200 })  // true
+ * isSafeTransform({ scale: NaN })                // false
+ * ```
+ */
+export declare const isSafeTransform: (values: TransformValues, opts?: {
+    maxScale?: number;
+}) => boolean;
+/**
+ * Extract the uniform scale factor from a CSS `matrix()` string.
+ *
+ * @param matrix A CSS `matrix(...)` value, `"none"`, `null`, or `undefined`.
+ * @returns The `a` component of the matrix (uniform scale), or `null` if unparseable.
+ *
+ * @example
+ * ```ts
+ * parseMatrixScale('matrix(1.5, 0, 0, 1.5, 0, 0)')  // 1.5
+ * parseMatrixScale('none')                          // null
+ * parseMatrixScale(null)                            // null
+ * ```
+ */
+export declare const parseMatrixScale: (matrix: string | null | undefined) => number | null;
+export type { TransformOptions };
+/**
+ * Any motion-value shape this library accepts as a transform input: the raw
+ * motion-dom `MotionValue<T>` and our augmented `AugmentedMotionValue<T>` are
+ * both runtime-identical (the augmentation is a Svelte 5 retype, not a
+ * subclass), but TypeScript's private-field nominal typing means the two
+ * aren't structurally assignable in public signatures. This alias accepts
+ * both so call sites compile cleanly.
+ */
+export type AnyMotionValue<T> = MotionValue<T> | AugmentedMotionValue<T>;
+/**
+ * A source for {@link useTransform}'s mapping form: any motion value or a
+ * Svelte readable store. Svelte readables are bridged into a `MotionValue`
+ * internally so motion-dom's `mapValue` / `transformValue` can track them.
+ */
+export type TransformSource<T> = AnyMotionValue<T> | Readable<T>;
+/**
+ * Single-input transformer signature: `(latest) => output`.
+ */
+export type SingleTransformer<I, O> = (input: I) => O;
+/**
+ * Multi-input transformer signature: `([latestA, latestB, ...]) => output`.
+ */
+export type MultiTransformer<I, O> = (inputs: I[]) => O;
+/**
+ * Output map for the multi-output mapping form: `{ key: [stop, …] }`. The
+ * keys are stable per call and each entry produces its own `MotionValue`.
+ */
+export type TransformOutputMap<O> = {
+    [key: string]: O[];
+};
+/**
+ * Creates an augmented `MotionValue<O>` derived from one or more `MotionValue`s
+ * (or Svelte readables), composed via a range mapping or a compute function.
+ *
+ * Mirrors framer-motion's `useTransform` 1:1 with five forms:
+ *
+ * - **Mapping form** — `useTransform(source, input, output, options?)` maps a
+ *   numeric source's value across `input → output` stops with clamp, easing,
+ *   and a pluggable mixer for non-numeric outputs. Delegates to motion-dom's
+ *   `mapValue` (which is itself `transformValue` over the curried mapper).
+ * - **Multi-output mapping form** — `useTransform(source, input, outputMap, options?)`
+ *   produces an object of motion values, one per key in `outputMap`. Each
+ *   value is the same mapping form applied to that key's output stops.
+ * - **Single-transformer form** — `useTransform(mv, (latest) => O)` recomputes
+ *   on every change of `mv`. Auto-tracks via `transformValue`.
+ * - **Multi-transformer form** — `useTransform([mv1, mv2, …], ([latest, …]) => O)`
+ *   recomputes on every change of any input. Auto-tracks via `transformValue`.
+ * - **Compute form** — `useTransform(() => compute)` recomputes whenever any
+ *   `MotionValue` referenced inside `compute` (via `.get()` or `.current`)
+ *   changes. Auto-tracks via `transformValue` — no explicit deps array; the
+ *   `collectMotionValues` session inside `transformValue` discovers them.
+ *
+ * Returns an {@link AugmentedMotionValue<O>} — a real motion-dom `MotionValue`
+ * (composes with `useSpring`, `useVelocity`, `animate()`, etc.) plus a
+ * `$state`-backed `.current` getter and a Svelte readable `.subscribe` shim.
+ *
+ * Lifecycle: must be called during component initialization. Source
+ * subscriptions, the underlying motion value, and any Svelte-readable bridges
+ * are torn down when the surrounding `$effect` scope unmounts.
+ *
+ * @template O Output value type.
+ * @param sourceOrCompute A motion value / readable (mapping forms), a single
+ *   `MotionValue` (single-transformer form), an array of `MotionValue`s
+ *   (multi-transformer form), or a compute function (compute form).
+ * @param inputOrTransformer Input stops `number[]` (mapping forms) or a
+ *   transformer function (`(latest) => O` / `(latest[]) => O`).
+ * @param outputOrOutputMap Output stops `O[]` (single-output mapping) or an
+ *   output map `{ [key]: O[] }` (multi-output mapping).
+ * @param options Optional `TransformOptions` — `clamp`, `ease`, `mixer`.
+ * @returns An `AugmentedMotionValue<O>` for single-output forms, or an object
+ *   of motion values keyed by `outputMap` for the multi-output form.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMotionValue, useTransform } from '@humanspeak/svelte-motion'
+ *
+ *   const x = useMotionValue(0)
+ *
+ *   // Mapping form
+ *   const opacity = useTransform(x, [0, 100], [0, 1])
+ *
+ *   // Single-MV transformer
+ *   const doubled = useTransform(x, (latest) => latest * 2)
+ *
+ *   // Compute form — auto-tracks via collectMotionValues
+ *   const y = useMotionValue(0)
+ *   const sum = useTransform(() => x.get() + y.get())
+ *
+ *   // Multi-output mapping
+ *   const { rotate, scale } = useTransform(x, [0, 100], {
+ *     rotate: [0, 360],
+ *     scale: [1, 2]
+ *   })
+ * </script>
+ *
+ * <div style="opacity: {opacity.current}; transform: rotate({rotate.current}deg) scale({scale.current})">
+ *   {sum.current}
+ * </div>
+ * ```
+ *
+ * @see https://motion.dev/docs/react-use-transform
+ */
+export declare function useTransform<O>(source: TransformSource<number>, input: number[], output: O[], options?: TransformOptions<O>): AugmentedMotionValue<O>;
+export declare function useTransform<T extends TransformOutputMap<unknown>>(source: TransformSource<number>, input: number[], outputMap: T, options?: TransformOptions<T[keyof T][number]>): {
+    [K in keyof T]: AugmentedMotionValue<T[K][number]>;
+};
+export declare function useTransform<I, O>(source: AnyMotionValue<I>, transformer: SingleTransformer<I, O>): AugmentedMotionValue<O>;
+export declare function useTransform<I, O>(sources: ReadonlyArray<AnyMotionValue<I>>, transformer: MultiTransformer<I, O>): AugmentedMotionValue<O>;
+export declare function useTransform<O>(compute: () => O): AugmentedMotionValue<O>;