solidjs-motion 0.1.0

package/dist/index.js

@@ -0,0 +1,2627 @@
+import { animate, animate as animate$1, cancelFrame, frame, inView, isMotionValue, isMotionValue as isMotionValue$1, motionValue, motionValue as motionValue$1, scroll, scroll as scroll$1, spring, springValue, transform } from "motion";
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { Match, Switch, createComputed, createContext, createEffect, createMemo, createSignal, from, mergeProps as mergeProps$1, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
+import { mergeRefs, resolveElements } from "@solid-primitives/refs";
+import { createStore } from "solid-js/store";
+import { HTMLVisualElement, addDomEvent, hover, isPrimaryPointer, press, time, visualElementStore } from "motion-dom";
+import { createListTransition, createSwitchTransition } from "@solid-primitives/transition-group";
+var MotionConfigContext = createContext({
+	reducedMotion: () => "never",
+	transition: () => void 0,
+	nonce: () => void 0
+});
+function useMotionConfig() {
+	return useContext(MotionConfigContext);
+}
+/**
+* Provider that flows reduced-motion mode, default transition, and CSP nonce
+* to every descendant motion element.
+*
+* @example
+* <MotionConfig reducedMotion="user" transition={{ duration: 0.4 }}>
+*   <App />
+* </MotionConfig>
+*/
+function MotionConfig(props) {
+	const value = {
+		reducedMotion: createMemo(() => props.reducedMotion ?? "never"),
+		transition: createMemo(() => props.transition),
+		nonce: createMemo(() => props.nonce)
+	};
+	return createComponent(MotionConfigContext.Provider, {
+		value,
+		get children() {
+			return props.children;
+		}
+	});
+}
+var PresenceContext = createContext({
+	register: () => {},
+	unregister: () => {},
+	beforeUnmount: () => Promise.resolve()
+});
+function usePresenceContext() {
+	return useContext(PresenceContext);
+}
+//#endregion
+//#region src/reduced-motion.ts
+/**
+* A reactive `Accessor<boolean>` tracking the user's
+* `prefers-reduced-motion: reduce` media query.
+*
+* Returns `false` server-side (no `window.matchMedia`). On the client, it seeds
+* with the current match state and updates as the system preference toggles.
+* The matchMedia listener is removed automatically on owner disposal via
+* `from`'s teardown callback.
+*
+* @example
+* const reduced = createReducedMotion()
+* createEffect(() => {
+*   if (reduced()) console.log("user prefers reduced motion")
+* })
+*/
+function createReducedMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => false;
+	const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+	return from((set) => {
+		set(mql.matches);
+		const handler = (e) => set(e.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	});
+}
+/**
+* Compute the effective reduced-motion state by combining a {@link MotionConfig}
+* `reducedMotion` setting with the system preference.
+*
+* - `"always"` — forced reduced, regardless of system pref
+* - `"never"` — never reduced, regardless of system pref
+* - `"user"` — respect system pref
+*
+* @example
+* const reduced = shouldReduceMotion("user", createReducedMotion()())
+*/
+function shouldReduceMotion(configValue, systemReduced) {
+	if (configValue === "always") return true;
+	if (configValue === "never") return false;
+	return systemReduced;
+}
+//#endregion
+//#region src/style.ts
+/**
+* Set of CSS shortcut keys motion treats as transform components. Re-used by
+* `createMotion`'s Stage 3 animate bridge to decide whether an animate-target
+* key should be routed through the value registry (composed via the writer's
+* `el.style.transform =`) or sent down the existing WAA path.
+*/
+var TRANSFORM_KEYS = /* @__PURE__ */ new Set([
+	"x",
+	"y",
+	"z",
+	"scale",
+	"scaleX",
+	"scaleY",
+	"scaleZ",
+	"rotate",
+	"rotateX",
+	"rotateY",
+	"rotateZ",
+	"skew",
+	"skewX",
+	"skewY",
+	"transformPerspective"
+]);
+/** Order matters — motion composes transforms in this sequence (Q5 sub-1). */
+var TRANSFORM_ORDER = [
+	"x",
+	"y",
+	"z",
+	"scale",
+	"scaleX",
+	"scaleY",
+	"scaleZ",
+	"rotate",
+	"rotateX",
+	"rotateY",
+	"rotateZ",
+	"skew",
+	"skewX",
+	"skewY",
+	"transformPerspective"
+];
+var PX_PROPERTIES = /* @__PURE__ */ new Set([
+	"width",
+	"minWidth",
+	"maxWidth",
+	"height",
+	"minHeight",
+	"maxHeight",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"padding",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"paddingInline",
+	"paddingBlock",
+	"paddingInlineStart",
+	"paddingInlineEnd",
+	"paddingBlockStart",
+	"paddingBlockEnd",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"marginInline",
+	"marginBlock",
+	"marginInlineStart",
+	"marginInlineEnd",
+	"marginBlockStart",
+	"marginBlockEnd",
+	"borderWidth",
+	"borderTopWidth",
+	"borderRightWidth",
+	"borderBottomWidth",
+	"borderLeftWidth",
+	"borderRadius",
+	"borderTopLeftRadius",
+	"borderTopRightRadius",
+	"borderBottomLeftRadius",
+	"borderBottomRightRadius",
+	"gap",
+	"rowGap",
+	"columnGap",
+	"fontSize",
+	"outlineWidth",
+	"outlineOffset"
+]);
+/**
+* Reduce a target-value (which may be raw, a MotionValue, an Accessor, or a
+* keyframe array) to a concrete leaf value the writer can apply to the DOM
+* or use to initialize a transient MotionValue. The cascade follows motion's
+* own semantics:
+*
+* - `null` / `undefined` → `undefined` (caller drops the key)
+* - keyframe array → first frame (consistent with motion-vanilla's
+*   initial-style snapshot)
+* - `MotionValue` → its current `.get()`
+* - `Accessor` (a bare zero-arg function) → its invocation result
+* - primitive (string / number) → returned as-is
+*
+* Exported for the MV-in-style Stage 4 work: createMotion uses it to
+* snapshot initial-target entries when registering them into the value
+* registry as transient MVs.
+*/
+function snapshotValue(value) {
+	if (value === null || value === void 0) return void 0;
+	if (Array.isArray(value)) return snapshotValue(value[0]);
+	if (isMotionValue$1(value)) return snapshotValue(value.get());
+	if (typeof value === "function") return snapshotValue(value());
+	if (typeof value === "string" || typeof value === "number") return value;
+}
+var TRANSFORM_FORMATTERS = {
+	x: (v) => `translateX(${typeof v === "string" ? v : `${v}px`})`,
+	y: (v) => `translateY(${typeof v === "string" ? v : `${v}px`})`,
+	z: (v) => `translateZ(${typeof v === "string" ? v : `${v}px`})`,
+	scale: (v) => `scale(${v})`,
+	scaleX: (v) => `scaleX(${v})`,
+	scaleY: (v) => `scaleY(${v})`,
+	scaleZ: (v) => `scaleZ(${v})`,
+	rotate: (v) => `rotate(${typeof v === "string" ? v : `${v}deg`})`,
+	rotateX: (v) => `rotateX(${typeof v === "string" ? v : `${v}deg`})`,
+	rotateY: (v) => `rotateY(${typeof v === "string" ? v : `${v}deg`})`,
+	rotateZ: (v) => `rotateZ(${typeof v === "string" ? v : `${v}deg`})`,
+	skew: (v) => `skew(${typeof v === "string" ? v : `${v}deg`})`,
+	skewX: (v) => `skewX(${typeof v === "string" ? v : `${v}deg`})`,
+	skewY: (v) => `skewY(${typeof v === "string" ? v : `${v}deg`})`,
+	transformPerspective: (v) => `perspective(${typeof v === "string" ? v : `${v}px`})`
+};
+/**
+* Look up the formatter for a transform-shortcut key. Returns `undefined`
+* for non-transform keys; callers should check `TRANSFORM_KEYS.has(key)`
+* before assuming a formatter exists.
+*/
+function pickTransformFormatter(key) {
+	return TRANSFORM_FORMATTERS[key];
+}
+/**
+* Format a motion transform-shortcut key + value as the corresponding CSS
+* transform function string (e.g. `transformFunctionFor("scale", 1.05)`
+* → `"scale(1.05)"`). One-shot variant — for hot paths, use
+* `pickTransformFormatter(key)` once at compile time and reuse.
+*/
+function transformFunctionFor(key, value) {
+	return TRANSFORM_FORMATTERS[key]?.(value) ?? "";
+}
+/**
+* Format a non-transform CSS property's value (e.g. `formatProperty("width", 100)`
+* → `"100px"`, `formatProperty("opacity", 0.5)` → `0.5`). Applies motion's
+* default-unit table (PX for dimensional CSS, dimensionless otherwise);
+* leaves CSS variables alone. Exported for `createMotion`'s writer fast path.
+*/
+function formatProperty(key, value) {
+	if (typeof value === "string") return value;
+	if (key.startsWith("--")) return String(value);
+	if (PX_PROPERTIES.has(key)) return `${value}px`;
+	return value;
+}
+/**
+* Convert a {@link Target} to a Solid {@link JSX.CSSProperties} object.
+*
+* - Composes transform shorthand (`x`, `y`, `scale`, `rotate`, etc.) into a
+*   single `transform: "..."` string in motion's canonical order.
+* - Applies the default-unit table (px for dimensional CSS, deg for rotate/
+*   skew, dimensionless for scale/opacity/etc.).
+* - For keyframe arrays, uses the first frame; a leading `null`/`undefined`
+*   keyframe omits the property entirely.
+* - MotionValues and Solid Accessors are snapshotted at call time. Callers
+*   wrap in `untrack` if they don't want the read to subscribe.
+* - Skips the `transition` key (animation config, not style).
+* - CSS variables (`--foo`) emit raw values, no unit guess.
+*
+* @example
+* targetToStyle({ x: 100, scale: 0.9, opacity: 0.5 })
+* // { transform: "translateX(100px) scale(0.9)", opacity: 0.5 }
+*/
+function targetToStyle(target) {
+	const out = {};
+	const transforms = {};
+	for (const key in target) {
+		if (key === "transition") continue;
+		const raw = target[key];
+		const snapshot = snapshotValue(raw);
+		if (snapshot === void 0) continue;
+		if (TRANSFORM_KEYS.has(key)) transforms[key] = snapshot;
+		else out[key] = formatProperty(key, snapshot);
+	}
+	const parts = [];
+	for (const key of TRANSFORM_ORDER) if (key in transforms) parts.push(transformFunctionFor(key, transforms[key]));
+	if (parts.length > 0) out.transform = parts.join(" ");
+	return out;
+}
+/**
+* Solid context propagating variant state from a motion ancestor to its
+* descendants. Only the wrapper components (`<motion.div>`, `motion(...)`)
+* provide a value. Bare `useMotion` consumers can opt in via the `Provider`
+* returned alongside the getter.
+*/
+var VariantContext = createContext({});
+function useVariantContext() {
+	return useContext(VariantContext);
+}
+/**
+* Resolve a variant label (or array of labels) against a variants map and the
+* current `custom` value. Returns a {@link Target} object, or `null` if nothing
+* resolves.
+*
+* Resolution rules locked in Phase 1 Q4:
+*
+* - Child's own `variants` always wins for a given name (sub-1A).
+* - No cascade: if a child has no `variants` of its own, parent's are NOT
+*   consulted (sub-1B / Pattern X). Callers pass `variants = undefined` in
+*   that case and this returns `null`.
+* - String + array forms both supported; array variants merge in order
+*   (later wins on conflicting keys).
+* - Function variants are invoked with `custom`; the value can be any type.
+*
+* @example
+* const variants = { visible: { opacity: 1 }, hidden: { opacity: 0 } }
+* resolveVariant("visible", variants, undefined)
+* // { opacity: 1 }
+*
+* resolveVariant(["visible", "highlighted"], variants, undefined)
+* // merged in order, last variant's keys override
+*
+* resolveVariant("visible", { visible: (i: number) => ({ x: i * 10 }) }, 3)
+* // { x: 30 }
+*/
+function resolveVariant(names, variants, custom) {
+	if (!names || !variants) return null;
+	const list = Array.isArray(names) ? names : [names];
+	let merged = null;
+	for (const name of list) {
+		const variant = variants[name];
+		if (!variant) continue;
+		const resolved = typeof variant === "function" ? variant(custom) : variant;
+		merged = merged ? Object.assign({}, merged, resolved) : Object.assign({}, resolved);
+	}
+	return merged;
+}
+/**
+* Determine the effective variant name for a given motion state. If the caller
+* provided an explicit value (string, array, or Target object), that wins.
+* Otherwise the parent context's value (per gesture/state) is used as a fall-
+* back.
+*
+* Returns the explicit value as-is when it's a Target object (used by callers
+* to detect "explicit target — skip variant lookup entirely").
+*/
+function effectiveLabels(own, parent) {
+	if (own !== void 0) return own;
+	return parent;
+}
+/**
+* Determine whether an `AnimateValue` is a variant *label* (string or array
+* of strings) — as opposed to a `Target` object or `false` / `undefined`.
+*
+* Mirrors motion-dom's `isVariantLabel`. Used by `isControllingVariants`
+* to decide whether a prop opts the node into the "controlling" role.
+*/
+function isVariantLabelValue(v) {
+	if (typeof v === "string") return true;
+	if (Array.isArray(v)) return true;
+	return false;
+}
+/**
+* A motion node is "controlling variants" when any of its variant slots
+* (`initial`, `animate`, `hover`, `press`, `focus`, `inView`, `exit`) carries
+* a variant *label* (string or array of strings).
+*
+* Mirrors motion-dom's same-named check. A controlling node opts OUT of
+* inheriting its parent's variant cascade — it provides its own. Descendants
+* with no controlling props of their own DO inherit from the nearest
+* controlling ancestor.
+*
+* Behavior is binary (any single controlling-slot label flips the node into
+* controlling mode); not per-slot.
+*
+* Object-shaped values (`animate: \{ x: 100 \}`) do NOT make a node
+* controlling — they're treated as targets, not as variant references.
+*/
+function isControllingVariants(opts) {
+	return isVariantLabelValue(opts.initial) || isVariantLabelValue(opts.animate) || isVariantLabelValue(opts.hover) || isVariantLabelValue(opts.press) || isVariantLabelValue(opts.focus) || isVariantLabelValue(opts.inView) || isVariantLabelValue(opts.exit);
+}
+//#endregion
+//#region src/primitives/createDragControls.ts
+/**
+* Symbol used to attach the registration method on the controls object.
+* `createDrag` imports this symbol to find/register its handler. Userland
+* code never touches it — exported only for library-internal use.
+*/
+var DRAG_CONTROLS_REGISTER = Symbol("solidjs-motion.dragControls.register");
+/**
+* Create a controls instance for imperatively starting a drag on a motion
+* element from a different element (e.g., a drag-handle button).
+*
+* Pattern (Q9):
+*
+* @example
+* function Card() {
+*   const controls = createDragControls()
+*   const m = useMotion({ drag: "y", dragControls: controls })
+*   return (
+*     <div {...m()}>
+*       <button onPointerDown={(e) => controls.start(e)}>handle</button>
+*       Card body
+*     </div>
+*   )
+* }
+*
+* The handle's pointerdown fires `controls.start(event)`. createDrag is
+* registered with the controls and translates the call into a pan-session
+* synthesized from the handle's event, bypassing the threshold gate.
+*/
+function createDragControls() {
+	let handler = null;
+	const controls = {
+		start(event, options = {}) {
+			handler?.(event, options);
+		},
+		[DRAG_CONTROLS_REGISTER]: void 0
+	};
+	Object.defineProperty(controls, DRAG_CONTROLS_REGISTER, {
+		value: ((newHandler) => {
+			handler = newHandler;
+			return () => {
+				if (handler === newHandler) handler = null;
+			};
+		}),
+		enumerable: false,
+		writable: false,
+		configurable: false
+	});
+	return controls;
+}
+//#endregion
+//#region src/primitives/motion-value.ts
+function makeAccessor(mv) {
+	const [signal, setSignal] = createSignal(mv.get());
+	onCleanup(mv.on("change", (v) => setSignal(() => v)));
+	const fn = (() => signal());
+	return new Proxy(fn, {
+		get(target, prop, receiver) {
+			if (prop === "call" || prop === "apply" || prop === "bind") return Reflect.get(target, prop, receiver);
+			if (Reflect.has(target, prop)) return Reflect.get(target, prop, receiver);
+			const value = Reflect.get(mv, prop, mv);
+			return typeof value === "function" ? value.bind(mv) : value;
+		},
+		has(target, prop) {
+			return Reflect.has(target, prop) || prop in mv;
+		}
+	});
+}
+/**
+* Create a {@link MotionValueAccessor} bound to the current reactive scope.
+*
+* The returned value has two access patterns:
+*
+* - `mv()` — invoke as a Solid Accessor. Tracks in JSX, `createEffect`,
+*   `createMemo`, etc.
+* - `mv.get()` / `mv.set(v)` / `mv.jump(v)` / `mv.on(...)` — the full upstream
+*   {@link MotionValue} surface. Matches motion/react idioms.
+*
+* The same value can be passed as a target in
+* `useMotion({ animate: { x: mv } })` (motion engine sees `.getVelocity` via
+* the Proxy and treats it as a motion value) or directly as the target of
+* `animate(mv, 100)`.
+*
+* Auto-destroyed via `onCleanup` when the owner is disposed.
+*
+* @example
+* const x = createMotionValue(0)
+* x.set(100)
+* animate(x, 200, { duration: 0.5 })
+* <p>{x()}</p>           // reactive read in JSX
+*/
+function createMotionValue(initial) {
+	const accessor = makeAccessor(motionValue$1(initial));
+	onCleanup(() => accessor.destroy());
+	return accessor;
+}
+/**
+* Bridge a raw {@link MotionValue} (from motion's `motionValue()` factory or
+* any other motion API that doesn't return our hybrid) to a Solid
+* {@link Accessor}. Seeds with the current value and updates on every
+* `change` event.
+*
+* **You usually don't need this.** Values returned by `createMotionValue`,
+* `createTransform`, `createSpring`, `createTime`, `createVelocity`, and
+* `createTemplate` are already callable — you can do `mv()` directly. Reach
+* for `toSignal` only when you receive a raw MotionValue from an external API.
+*
+* @example
+* import { motionValue } from "motion"
+* const rawMv = motionValue(0)
+* const xSignal = toSignal(rawMv)
+*/
+function toSignal(mv) {
+	const [value, setValue] = createSignal(mv.get());
+	onCleanup(mv.on("change", (v) => setValue(() => v)));
+	return value;
+}
+/**
+* Subscribe to a {@link MotionValue} event with automatic cleanup. Convenience
+* wrapper around `mv.on(event, cb)` for parity with motion/react's
+* `useMotionValueEvent`. For per-change reactivity, prefer
+* `createComputed(() => fn(mv()))` since hybrids are directly callable.
+*
+* @example
+* const x = createMotionValue(0)
+* createMotionValueEvent(x, "animationComplete", () => console.log("done"))
+*/
+function createMotionValueEvent(mv, event, callback) {
+	onCleanup(mv.on(event, callback));
+}
+function readInputValue(input) {
+	if (isMotionValue$1(input)) return input.get();
+	return input();
+}
+function subscribeInput(input, onChange) {
+	if (isMotionValue$1(input)) onCleanup(input.on("change", onChange));
+	else createComputed(() => onChange(input()));
+}
+/**
+* Create a {@link MotionValueAccessor} that maps an input through a range/
+* output pair. Mirrors motion/react's `useTransform`. The input can be a
+* MotionValue, our hybrid, or any Solid Accessor; the output composes with
+* `animate()`, `useMotion`'s targets, and JSX reactivity.
+*
+* @example
+* const { scrollY } = createScroll()
+* const opacity = createTransform(scrollY, [0, 200], [1, 0])
+* <div style={{ opacity: opacity() }}>...</div>
+*/
+function createTransform(input, inputRange, outputRange, options) {
+	const mapper = transform(inputRange, outputRange, options);
+	const mv = motionValue$1(mapper(readInputValue(input)));
+	onCleanup(() => mv.destroy());
+	subscribeInput(input, (v) => mv.set(mapper(v)));
+	return makeAccessor(mv);
+}
+/**
+* Spring-smoothed mirror of a numeric input. Returns a
+* {@link MotionValueAccessor} that tracks the source with physics-based easing.
+*
+* @example
+* const x = createMotionValue(0)
+* const smoothX = createSpring(x, { stiffness: 100, damping: 20 })
+*/
+function createSpring(source, options) {
+	if (isMotionValue$1(source)) {
+		const mv = springValue(source, options);
+		onCleanup(() => mv.destroy());
+		return makeAccessor(mv);
+	}
+	const bridge = motionValue$1(source());
+	onCleanup(() => bridge.destroy());
+	createComputed(() => bridge.set(source()));
+	const mv = springValue(bridge, options);
+	onCleanup(() => mv.destroy());
+	return makeAccessor(mv);
+}
+/**
+* {@link MotionValueAccessor} that advances every animation frame, holding
+* the milliseconds elapsed since this primitive was called. Driver for
+* time-based animations and {@link createTransform}-derived values.
+*
+* @example
+* const t = createTime()
+* const wobble = createTransform(t, [0, 1000, 2000], [0, 10, 0])
+*/
+function createTime() {
+	const mv = motionValue$1(0);
+	onCleanup(() => mv.destroy());
+	const startedAt = performance.now();
+	const tick = () => mv.set(performance.now() - startedAt);
+	frame.update(tick, true);
+	onCleanup(() => cancelFrame(tick));
+	return makeAccessor(mv);
+}
+/**
+* {@link MotionValueAccessor} reporting the velocity of a source motion value.
+* Updated whenever the source changes.
+*
+* @example
+* const x = createMotionValue(0)
+* const xVelocity = createVelocity(x)
+*/
+function createVelocity(source) {
+	const mv = motionValue$1(source.getVelocity());
+	onCleanup(() => mv.destroy());
+	onCleanup(source.on("change", () => mv.set(source.getVelocity())));
+	return makeAccessor(mv);
+}
+/**
+* Tagged template producing a {@link MotionValueAccessor}\<string\>.
+* Interpolated {@link MotionValue}s, hybrids, and Solid Accessors recompute
+* the output string on change; primitives and static strings are baked in.
+*
+* @example
+* const x = createMotionValue(0)
+* const y = createMotionValue(0)
+* const transform = createTemplate`translate(${x}px, ${y}px) scale(1.1)`
+* <div style={{ transform: transform() }} />
+*/
+function createTemplate(strings, ...values) {
+	const compute = () => {
+		let out = "";
+		for (let i = 0; i < strings.length; i++) {
+			out += strings[i];
+			if (i < values.length) {
+				const v = values[i];
+				if (isMotionValue$1(v)) out += String(v.get());
+				else if (typeof v === "function") out += String(v());
+				else out += String(v);
+			}
+		}
+		return out;
+	};
+	const mv = motionValue$1(compute());
+	onCleanup(() => mv.destroy());
+	for (const v of values) if (isMotionValue$1(v)) onCleanup(v.on("change", () => mv.set(compute())));
+	if (values.some((v) => typeof v === "function" && !isMotionValue$1(v))) createComputed(() => {
+		for (const v of values) if (typeof v === "function" && !isMotionValue$1(v)) v();
+		mv.set(compute());
+	});
+	return makeAccessor(mv);
+}
+//#endregion
+//#region src/primitives/createPan.ts
+/** Sliding-window width for velocity computation (Q15a). */
+var VELOCITY_WINDOW_MS = 200;
+/** Default movement threshold before onPanStart fires (Q11a, matches motion). */
+var DEFAULT_THRESHOLD = 3;
+/**
+* Observe pointer-driven pan gestures on an element.
+*
+* Returns `{ isPanning, point, delta, offset, velocity }`:
+*
+* - `pan.isPanning()` — Solid Accessor; `true` between onPanStart and onPanEnd.
+* - `pan.point.x`, `pan.point.y` — current pointer position in client coords.
+*   Each is a {@link MotionValueAccessor}: call `pan.point.x()` for a tracked
+*   read, `pan.point.x.get()` for an untracked snapshot, and pass it directly
+*   to `animate()`, `createTransform`, or `useMotion` targets.
+* - `pan.delta.x/y` — delta since last pointermove.
+* - `pan.offset.x/y` — cumulative offset since the current pointerdown.
+* - `pan.velocity.x/y` — sliding-window velocity in px/sec.
+*
+* Fields update from `pointerdown` forward (including pre-threshold moves)
+* — gate reads on `pan.isPanning()` if you only care about real pans.
+*
+* The `options` argument accepts either a static object or a function form
+* (matching `useMotion`'s convention). The function form is read INSIDE
+* each pointer-event handler, so reactive option changes apply on the next
+* relevant event without re-attaching listeners.
+*
+* @example Static options
+* const pan = createPan(el, {
+*   onPanStart: (e, info) => console.log("start", info.point),
+*   threshold: 3,
+* })
+*
+* @example Reactive options (function form — signals tracked)
+* const [threshold, setThreshold] = createSignal(3)
+* const pan = createPan(el, () => ({
+*   threshold: threshold(),
+*   onPanStart: (e, info) => console.log(info),
+* }))
+*
+* @example Composing pan.point.x with createTransform
+* const pan = createPan(el)
+* const rotation = createTransform(pan.point.x, [0, 300], [0, 90])
+* <div ref={setEl} style={{ transform: `rotate(${rotation()}deg)` }} />
+*
+* @example Reading reactively in JSX
+* const pan = createPan(el)
+* <Show when={pan.isPanning()}>
+*   Position: {pan.point.x()}, {pan.point.y()}
+* </Show>
+*/
+function createPan(ref, options = {}) {
+	const getOpts = typeof options === "function" ? options : () => options;
+	const [isPanning, setIsPanning] = createSignal(false);
+	const pointX = createMotionValue(0);
+	const pointY = createMotionValue(0);
+	const deltaX = createMotionValue(0);
+	const deltaY = createMotionValue(0);
+	const offsetX = createMotionValue(0);
+	const offsetY = createMotionValue(0);
+	const velocityX = createMotionValue(0);
+	const velocityY = createMotionValue(0);
+	createEffect(() => {
+		const el = ref();
+		if (!el) return;
+		let startPoint = null;
+		let lastPoint = null;
+		let pointerId = null;
+		let panning = false;
+		let samples = [];
+		function pointOf(event) {
+			return {
+				x: event.clientX,
+				y: event.clientY
+			};
+		}
+		function computeVelocity() {
+			if (samples.length < 2) return {
+				x: 0,
+				y: 0
+			};
+			const first = samples[0];
+			const last = samples[samples.length - 1];
+			const dt = last.t - first.t;
+			if (dt <= 0) return {
+				x: 0,
+				y: 0
+			};
+			return {
+				x: (last.point.x - first.point.x) / dt * 1e3,
+				y: (last.point.y - first.point.y) / dt * 1e3
+			};
+		}
+		function buildInfo(event) {
+			const point = pointOf(event);
+			return {
+				point,
+				delta: lastPoint ? {
+					x: point.x - lastPoint.x,
+					y: point.y - lastPoint.y
+				} : {
+					x: 0,
+					y: 0
+				},
+				offset: startPoint ? {
+					x: point.x - startPoint.x,
+					y: point.y - startPoint.y
+				} : {
+					x: 0,
+					y: 0
+				},
+				velocity: computeVelocity()
+			};
+		}
+		/** Push a freshly-computed info snapshot into the MVs. Each `.set` fires
+		* the MV's change subscription, which the callable-hybrid bridge
+		* forwards to Solid; consumers reading e.g. only `pan.velocity.x()` only
+		* re-run when velocity.x actually changes — pre-existing MotionValue
+		* granularity, not Store path-tracking. */
+		function writeInfo(info) {
+			pointX.set(info.point.x);
+			pointY.set(info.point.y);
+			deltaX.set(info.delta.x);
+			deltaY.set(info.delta.y);
+			offsetX.set(info.offset.x);
+			offsetY.set(info.offset.y);
+			velocityX.set(info.velocity.x);
+			velocityY.set(info.velocity.y);
+		}
+		function onPointerDown(event) {
+			if (!isPrimaryPointer(event)) return;
+			startPoint = pointOf(event);
+			lastPoint = startPoint;
+			pointerId = event.pointerId;
+			panning = false;
+			samples = [{
+				t: time.now(),
+				point: startPoint
+			}];
+			setIsPanning(false);
+			pointX.set(startPoint.x);
+			pointY.set(startPoint.y);
+			deltaX.set(0);
+			deltaY.set(0);
+			offsetX.set(0);
+			offsetY.set(0);
+			velocityX.set(0);
+			velocityY.set(0);
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerEnd);
+			window.addEventListener("pointercancel", onPointerEnd);
+		}
+		function onPointerMove(event) {
+			if (event.pointerId !== pointerId) return;
+			const point = pointOf(event);
+			const now = time.now();
+			samples.push({
+				t: now,
+				point
+			});
+			const cutoff = now - VELOCITY_WINDOW_MS;
+			while (samples.length > 1 && (samples[0]?.t ?? 0) < cutoff) samples.shift();
+			const info = buildInfo(event);
+			writeInfo(info);
+			if (!panning) {
+				const threshold = getOpts().threshold ?? DEFAULT_THRESHOLD;
+				if (Math.hypot(info.offset.x, info.offset.y) >= threshold) {
+					panning = true;
+					setIsPanning(true);
+					getOpts().onPanStart?.(event, info);
+				}
+			} else getOpts().onPan?.(event, info);
+			lastPoint = point;
+		}
+		function onPointerEnd(event) {
+			if (event.pointerId !== pointerId) return;
+			if (panning) getOpts().onPanEnd?.(event, buildInfo(event));
+			panning = false;
+			setIsPanning(false);
+			startPoint = null;
+			lastPoint = null;
+			pointerId = null;
+			samples = [];
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerEnd);
+			window.removeEventListener("pointercancel", onPointerEnd);
+		}
+		el.addEventListener("pointerdown", onPointerDown);
+		onCleanup(() => {
+			el.removeEventListener("pointerdown", onPointerDown);
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerEnd);
+			window.removeEventListener("pointercancel", onPointerEnd);
+		});
+	});
+	return {
+		isPanning,
+		point: {
+			x: pointX,
+			y: pointY
+		},
+		delta: {
+			x: deltaX,
+			y: deltaY
+		},
+		offset: {
+			x: offsetX,
+			y: offsetY
+		},
+		velocity: {
+			x: velocityX,
+			y: velocityY
+		}
+	};
+}
+//#endregion
+//#region src/primitives/createDrag.ts
+/**
+* Get or create a motion-dom VisualElement for an HTMLElement. Required
+* because we write to the VE's `x`/`y` MotionValues during drag, and motion
+* only auto-creates the VE inside `animate(el, target)` calls — if a user
+* configures drag without any animate target, no VE would exist.
+*
+* Mirrors framer-motion's `createDOMVisualElement` (which isn't reachable
+* from a non-React context — framer-motion's main entry requires React).
+* The options shape and `mount` + `visualElementStore.set` calls match the
+* upstream implementation. SVG support is omitted for v0.1 — drag on SVG
+* is an unusual case.
+*/
+function ensureVisualElement(el) {
+	const existing = visualElementStore.get(el);
+	if (existing) return existing;
+	const ve = new HTMLVisualElement({
+		presenceContext: null,
+		props: {},
+		visualState: {
+			renderState: {
+				transform: {},
+				transformOrigin: {},
+				style: {},
+				vars: {},
+				attrs: {}
+			},
+			latestValues: {}
+		}
+	});
+	ve.mount(el);
+	visualElementStore.set(el, ve);
+	return ve;
+}
+/**
+* Compute the `touch-action` CSS value for an element being dragged.
+* Disabling touch-action prevents the browser from interpreting the gesture
+* as a scroll. Axis-locked drags leave the unused axis available for scroll
+* (so a horizontally-draggable card can still be scrolled vertically by the
+* surrounding page).
+*/
+function touchActionFor(drag) {
+	if (drag === "x") return "pan-y";
+	if (drag === "y") return "pan-x";
+	return "none";
+}
+/**
+* Resolve a {@link DragConstraints} value into absolute MotionValue bounds at
+* drag-start. Two input shapes (Q8):
+*
+* - **Numeric** (`{ top, left, right, bottom }`): bounds are absolute MV
+*   values. `left: -100` means x cannot go below -100.
+* - **HTMLElement or `() => HTMLElement | null`**: container that the
+*   dragged element must stay inside. Bounds are computed from the
+*   container's bounding rect vs the dragged element's current rect, then
+*   re-centered around the current MV values.
+*
+* The element form is resolved ONCE at drag-start (current viewport rects).
+* Reactive constraint changes mid-drag aren't honored in v0.1 — they'd
+* require re-measuring on each pointermove. Acceptable corner case.
+*
+* Returns `null` when constraints are unset or the accessor returns null —
+* caller treats as "no clamping, no elastic resistance."
+*/
+function resolveConstraints(constraints, el, dragStartX, dragStartY) {
+	if (!constraints) return null;
+	let container = null;
+	if (constraints instanceof HTMLElement) container = constraints;
+	else if (typeof constraints === "function") container = constraints();
+	if (container) {
+		const containerRect = container.getBoundingClientRect();
+		const elementRect = el.getBoundingClientRect();
+		return {
+			minX: dragStartX + (containerRect.left - elementRect.left),
+			maxX: dragStartX + (containerRect.right - elementRect.right),
+			minY: dragStartY + (containerRect.top - elementRect.top),
+			maxY: dragStartY + (containerRect.bottom - elementRect.bottom)
+		};
+	}
+	const numeric = constraints;
+	return {
+		minX: numeric.left ?? -Infinity,
+		maxX: numeric.right ?? Infinity,
+		minY: numeric.top ?? -Infinity,
+		maxY: numeric.bottom ?? Infinity
+	};
+}
+/**
+* Apply elastic resistance past a boundary (Q15c — linear).
+*
+* Within bounds: `value` passes through unchanged. Past a bound by `Δ`: the
+* displayed value is `boundary + elastic × Δ`. With `elastic: 0` the value
+* clamps hard at the boundary; with `elastic: 1` resistance vanishes
+* (motion's default is `0.5`, halving the overflow).
+*
+* The function is symmetric — overflow on either side resists with the
+* same coefficient.
+*/
+function applyElastic(value, min, max, elastic) {
+	if (value < min) return min + (value - min) * elastic;
+	if (value > max) return max + (value - max) * elastic;
+	return value;
+}
+var DEFAULT_ELASTIC = .5;
+/**
+* Default `dragTransition` (Q15d — matches motion's inertia preset).
+*
+* `type: "inertia"` decays from the release point using `velocity`, with
+* spring physics at `min`/`max` boundaries. The defaults are the values
+* the user signed off on during Phase 2 grilling; passing a custom
+* `dragTransition` shallow-merges over these.
+*/
+var DEFAULT_DRAG_TRANSITION = {
+	type: "inertia",
+	power: .8,
+	timeConstant: 750,
+	bounceStiffness: 500,
+	bounceDamping: 10,
+	restDelta: 1,
+	restSpeed: 10
+};
+/**
+* Bind pointer-driven drag to an element. Layers on top of createPan for the
+* pointer session; adds transform writes, body styles, pointer capture, and
+* state-machine activation.
+*
+* Drag is enabled when `opts.drag` is truthy (`true`, `"x"`, or `"y"`).
+* createDrag always wires the pointer session — the enable check is per-
+* gesture-start, so toggling `opts.drag` on/off doesn't churn listeners.
+*
+* Phase 2 Commit 6 — Stage 2 scope: VE bootstrap, translation, axis lock,
+* body/pointer styles, callbacks, cleanup. Constraints + elastic resistance
+* land in Stage 3; momentum + dragSnapToOrigin in Stage 4.
+*/
+function createDrag(el, getOpts, setActive) {
+	let xMV = null;
+	let yMV = null;
+	/** Drag-start position of the x/y MotionValues (the values that existed
+	* before the user grabbed). offsets from PanInfo accumulate from this. */
+	let dragStartX = 0;
+	let dragStartY = 0;
+	/** Resolved bounds for this session — computed once at drag-start and
+	* reused across all pointermoves to avoid repeat layout reads. `null`
+	* means no constraints. */
+	let sessionBounds = null;
+	/** Saved before applying drag's `user-select` / `touch-action` overrides
+	* so we can restore them exactly on session end. */
+	let savedUserSelect = "";
+	let savedTouchAction = "";
+	let capturedPointerId = null;
+	/** In-flight momentum animations (one per axis when active). Stopped on
+	* owner disposal AND on a fresh pointerdown (to interrupt a settling
+	* momentum if the user grabs again mid-decay). */
+	let momentumControls = [];
+	function isDragEnabled() {
+		return Boolean(getOpts().drag);
+	}
+	function restoreBodyAndElementStyles() {
+		document.body.style.userSelect = savedUserSelect;
+		el.style.touchAction = savedTouchAction;
+	}
+	function releasePointerCaptureSafely() {
+		if (capturedPointerId === null) return;
+		try {
+			el.releasePointerCapture(capturedPointerId);
+		} catch {}
+		capturedPointerId = null;
+	}
+	function stopMomentum() {
+		for (const ctrl of momentumControls) ctrl.stop();
+		momentumControls = [];
+	}
+	const handlePanStart = (event, info) => {
+		if (!isDragEnabled()) return;
+		stopMomentum();
+		const ve = ensureVisualElement(el);
+		xMV = ve.getValue("x", 0);
+		yMV = ve.getValue("y", 0);
+		dragStartX = xMV.get();
+		dragStartY = yMV.get();
+		sessionBounds = resolveConstraints(getOpts().dragConstraints, el, dragStartX, dragStartY);
+		savedUserSelect = document.body.style.userSelect;
+		savedTouchAction = el.style.touchAction;
+		document.body.style.userSelect = "none";
+		el.style.touchAction = touchActionFor(getOpts().drag);
+		try {
+			el.setPointerCapture(event.pointerId);
+			capturedPointerId = event.pointerId;
+		} catch {}
+		setActive("whileDrag", true);
+		getOpts().onDragStart?.(event, info);
+	};
+	const handlePan = (event, info) => {
+		if (!isDragEnabled() || !xMV || !yMV) return;
+		const axis = getOpts().drag;
+		const writeX = axis !== "y";
+		const writeY = axis !== "x";
+		const elastic = getOpts().dragElastic ?? DEFAULT_ELASTIC;
+		if (writeX) {
+			const candidateX = dragStartX + info.offset.x;
+			const finalX = sessionBounds ? applyElastic(candidateX, sessionBounds.minX, sessionBounds.maxX, elastic) : candidateX;
+			xMV.set(finalX);
+		}
+		if (writeY) {
+			const candidateY = dragStartY + info.offset.y;
+			const finalY = sessionBounds ? applyElastic(candidateY, sessionBounds.minY, sessionBounds.maxY, elastic) : candidateY;
+			yMV.set(finalY);
+		}
+		getOpts().onDrag?.(event, info);
+	};
+	const handlePanEnd = (event, info) => {
+		if (!isDragEnabled() || !xMV || !yMV) return;
+		setActive("whileDrag", false);
+		restoreBodyAndElementStyles();
+		releasePointerCaptureSafely();
+		getOpts().onDragEnd?.(event, info);
+		const xRef = xMV;
+		const yRef = yMV;
+		const boundsRef = sessionBounds;
+		const opts = getOpts();
+		const snapToOrigin = opts.dragSnapToOrigin ?? false;
+		const momentum = opts.dragMomentum ?? true;
+		const userTransition = opts.dragTransition ?? {};
+		const dragAxis = opts.drag;
+		const releaseX = dragAxis !== "y";
+		const releaseY = dragAxis !== "x";
+		momentumControls = [];
+		const elastic = opts.dragElastic ?? DEFAULT_ELASTIC;
+		const bounceParams = elastic ? {
+			bounceStiffness: 200,
+			bounceDamping: 40
+		} : {
+			bounceStiffness: 1e6,
+			bounceDamping: 1e7
+		};
+		const xAtMax = boundsRef !== null && boundsRef.maxX !== Infinity && xRef.get() >= boundsRef.maxX;
+		const xAtMin = boundsRef !== null && boundsRef.minX !== -Infinity && xRef.get() <= boundsRef.minX;
+		const yAtMax = boundsRef !== null && boundsRef.maxY !== Infinity && yRef.get() >= boundsRef.maxY;
+		const yAtMin = boundsRef !== null && boundsRef.minY !== -Infinity && yRef.get() <= boundsRef.minY;
+		const xVelocity = !elastic && (xAtMax && info.velocity.x > 0 || xAtMin && info.velocity.x < 0) ? 0 : info.velocity.x;
+		const yVelocity = !elastic && (yAtMax && info.velocity.y > 0 || yAtMin && info.velocity.y < 0) ? 0 : info.velocity.y;
+		/** Fire onDragTransitionEnd via getOpts so reactive callback swaps see
+		* the latest value (the user may have swapped handlers between pan-end
+		* and momentum-settle). */
+		const fireTransitionEnd = () => getOpts().onDragTransitionEnd?.();
+		if (snapToOrigin) {
+			const transitionX = {
+				...DEFAULT_DRAG_TRANSITION,
+				...bounceParams,
+				...userTransition,
+				velocity: xVelocity,
+				min: 0,
+				max: 0
+			};
+			const transitionY = {
+				...DEFAULT_DRAG_TRANSITION,
+				...bounceParams,
+				...userTransition,
+				velocity: yVelocity,
+				min: 0,
+				max: 0
+			};
+			const settles = [];
+			if (releaseX) {
+				const ctrlX = animate$1(xRef, 0, transitionX);
+				momentumControls.push(ctrlX);
+				settles.push(ctrlX);
+			}
+			if (releaseY) {
+				const ctrlY = animate$1(yRef, 0, transitionY);
+				momentumControls.push(ctrlY);
+				settles.push(ctrlY);
+			}
+			if (settles.length > 0) Promise.all(settles).then(fireTransitionEnd);
+			else fireTransitionEnd();
+		} else {
+			const releaseVelocityX = momentum ? xVelocity : 0;
+			const releaseVelocityY = momentum ? yVelocity : 0;
+			const transitionX = {
+				...DEFAULT_DRAG_TRANSITION,
+				...bounceParams,
+				...userTransition,
+				velocity: releaseVelocityX,
+				min: boundsRef?.minX,
+				max: boundsRef?.maxX
+			};
+			const transitionY = {
+				...DEFAULT_DRAG_TRANSITION,
+				...bounceParams,
+				...userTransition,
+				velocity: releaseVelocityY,
+				min: boundsRef?.minY,
+				max: boundsRef?.maxY
+			};
+			const settles = [];
+			if (releaseX) {
+				const ctrlX = animate$1(xRef, 0, transitionX);
+				momentumControls.push(ctrlX);
+				settles.push(ctrlX);
+			}
+			if (releaseY) {
+				const ctrlY = animate$1(yRef, 0, transitionY);
+				momentumControls.push(ctrlY);
+				settles.push(ctrlY);
+			}
+			if (settles.length > 0) Promise.all(settles).then(fireTransitionEnd);
+			else fireTransitionEnd();
+		}
+		xMV = null;
+		yMV = null;
+		sessionBounds = null;
+	};
+	createPan(() => el, () => ({
+		threshold: getOpts().panThreshold,
+		onPanStart: handlePanStart,
+		onPan: handlePan,
+		onPanEnd: handlePanEnd
+	}));
+	function startExternalDrag(event, options) {
+		if (!isDragEnabled()) return;
+		if (options.snapToCursor) {
+			const ve = ensureVisualElement(el);
+			const snapXMV = ve.getValue("x", 0);
+			const snapYMV = ve.getValue("y", 0);
+			const elRect = el.getBoundingClientRect();
+			const centerX = elRect.left + elRect.width / 2;
+			const centerY = elRect.top + elRect.height / 2;
+			const axis = getOpts().drag;
+			if (axis !== "y") snapXMV.set(snapXMV.get() + (event.clientX - centerX));
+			if (axis !== "x") snapYMV.set(snapYMV.get() + (event.clientY - centerY));
+		}
+		handlePanStart(event, {
+			point: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			delta: {
+				x: 0,
+				y: 0
+			},
+			offset: {
+				x: 0,
+				y: 0
+			},
+			velocity: {
+				x: 0,
+				y: 0
+			}
+		});
+		const sessionStartPoint = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		let sessionLastPoint = { ...sessionStartPoint };
+		const sessionPointerId = event.pointerId;
+		const sessionSamples = [{
+			t: time.now(),
+			point: { ...sessionStartPoint }
+		}];
+		function computeSessionVelocity() {
+			if (sessionSamples.length < 2) return {
+				x: 0,
+				y: 0
+			};
+			const first = sessionSamples[0];
+			const last = sessionSamples[sessionSamples.length - 1];
+			if (!first || !last) return {
+				x: 0,
+				y: 0
+			};
+			const dt = last.t - first.t;
+			if (dt <= 0) return {
+				x: 0,
+				y: 0
+			};
+			return {
+				x: (last.point.x - first.point.x) / dt * 1e3,
+				y: (last.point.y - first.point.y) / dt * 1e3
+			};
+		}
+		function buildSessionInfo(e) {
+			const point = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			return {
+				point,
+				delta: {
+					x: point.x - sessionLastPoint.x,
+					y: point.y - sessionLastPoint.y
+				},
+				offset: {
+					x: point.x - sessionStartPoint.x,
+					y: point.y - sessionStartPoint.y
+				},
+				velocity: computeSessionVelocity()
+			};
+		}
+		function onSessionMove(e) {
+			if (e.pointerId !== sessionPointerId) return;
+			const point = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			const now = time.now();
+			sessionSamples.push({
+				t: now,
+				point
+			});
+			const cutoff = now - 200;
+			while (sessionSamples.length > 1 && (sessionSamples[0]?.t ?? 0) < cutoff) sessionSamples.shift();
+			const info = buildSessionInfo(e);
+			sessionLastPoint = point;
+			handlePan(e, info);
+		}
+		function onSessionEnd(e) {
+			if (e.pointerId !== sessionPointerId) return;
+			handlePanEnd(e, buildSessionInfo(e));
+			window.removeEventListener("pointermove", onSessionMove);
+			window.removeEventListener("pointerup", onSessionEnd);
+			window.removeEventListener("pointercancel", onSessionEnd);
+		}
+		window.addEventListener("pointermove", onSessionMove);
+		window.addEventListener("pointerup", onSessionEnd);
+		window.addEventListener("pointercancel", onSessionEnd);
+	}
+	createEffect(() => {
+		const controls = getOpts().dragControls;
+		if (!controls) return;
+		const register = controls[DRAG_CONTROLS_REGISTER];
+		if (!register) return;
+		onCleanup(register(startExternalDrag));
+	});
+	onCleanup(() => {
+		stopMomentum();
+		if (xMV || yMV) {
+			restoreBodyAndElementStyles();
+			releasePointerCaptureSafely();
+		}
+	});
+}
+//#endregion
+//#region src/primitives/createInView.ts
+/**
+* Observe an element via {@link IntersectionObserver} and expose its
+* in-view state as a pair of Solid Accessors.
+*
+* Pass a ref-style accessor that returns the element. The observer
+* attaches once the accessor returns a non-null element and re-attaches
+* if it changes. The observer is disconnected on owner disposal.
+*
+* Options can be a static object or a function form (matching `useMotion`
+* and `createPan`'s convention). The function form is tracked inside the
+* effect — option changes (e.g., switching `root`) re-attach the observer.
+*
+* @example Static options
+* const [el, setEl] = createSignal<HTMLElement>()
+* const view = createInView(el, { once: true })
+* createEffect(() => {
+*   if (view.isInView()) console.log("now in view")
+* })
+*
+* @example Function-form options (reactive)
+* const [root, setRoot] = createSignal<HTMLElement>()
+* const view = createInView(el, () => ({ root, margin: "100px" }))
+*
+* @example Reading the raw entry reactively
+* const view = createInView(el)
+* createEffect(() => {
+*   const e = view.entry()
+*   if (e) console.log("ratio:", e.intersectionRatio)
+* })
+*
+* <div ref={setEl}>watch me</div>
+*/
+function createInView(ref, options = {}) {
+	const [isInView, setIsInView] = createSignal(false);
+	const [entry, setEntry] = createSignal(null);
+	createEffect(() => {
+		const el = ref();
+		if (!el) return;
+		const opts = typeof options === "function" ? options() : options;
+		const threshold = resolveThreshold(opts.amount);
+		const observer = new IntersectionObserver((entries) => {
+			for (const e of entries) {
+				opts.onChange?.(e);
+				setEntry(e);
+				if (e.isIntersecting) {
+					setIsInView(true);
+					if (opts.once) observer.disconnect();
+				} else if (!opts.once) setIsInView(false);
+			}
+		}, {
+			root: opts.root?.() ?? null,
+			rootMargin: opts.margin ?? "0px",
+			threshold
+		});
+		observer.observe(el);
+		onCleanup(() => observer.disconnect());
+	});
+	return {
+		isInView,
+		entry
+	};
+}
+function resolveThreshold(amount) {
+	if (Array.isArray(amount)) return amount;
+	if (typeof amount === "number") return amount;
+	if (amount === "all") return 1;
+	return 0;
+}
+//#endregion
+//#region src/primitives/createGestures.ts
+/**
+* Bind pointer-event-driven gestures (hover, press) to the motion element.
+* Toggles the state machine's `whileHover` / `whilePress` flags and forwards
+* events to the user's `MotionCallbacks`.
+*/
+function createGestures(el, getOpts, setActive) {
+	onCleanup(hover(el, (_element, event) => {
+		setActive("whileHover", true);
+		getOpts().onHoverStart?.(event);
+		return (event) => {
+			setActive("whileHover", false);
+			getOpts().onHoverEnd?.(event);
+		};
+	}));
+	onCleanup(press(el, (_element, event) => {
+		setActive("whilePress", true);
+		getOpts().onPressStart?.(event);
+		return (event, info) => {
+			setActive("whilePress", false);
+			if (info.success) getOpts().onPress?.(event, info);
+			else getOpts().onPressCancel?.(event, info);
+		};
+	}));
+	let focusActiveByVisible = false;
+	const stopFocus = addDomEvent(el, "focus", (event) => {
+		let isFocusVisible = false;
+		try {
+			isFocusVisible = el.matches(":focus-visible");
+		} catch {
+			isFocusVisible = true;
+		}
+		if (isFocusVisible) {
+			setActive("whileFocus", true);
+			focusActiveByVisible = true;
+		}
+		getOpts().onFocus?.(event);
+	});
+	const stopBlur = addDomEvent(el, "blur", (event) => {
+		if (focusActiveByVisible) {
+			setActive("whileFocus", false);
+			focusActiveByVisible = false;
+		}
+		getOpts().onBlur?.(event);
+	});
+	onCleanup(stopFocus);
+	onCleanup(stopBlur);
+	const view = createInView(() => el, () => ({
+		...getOpts().inViewOptions,
+		onChange: (entry) => {
+			if (entry.isIntersecting) getOpts().onViewportEnter?.(entry);
+			else getOpts().onViewportLeave?.(entry);
+		}
+	}));
+	createEffect(() => {
+		setActive("whileInView", view.isInView());
+	});
+}
+//#endregion
+//#region src/default-values.ts
+var TRANSFORM_DEFAULTS = {
+	x: 0,
+	y: 0,
+	z: 0,
+	translateX: 0,
+	translateY: 0,
+	translateZ: 0,
+	scale: 1,
+	scaleX: 1,
+	scaleY: 1,
+	scaleZ: 1,
+	rotate: 0,
+	rotateX: 0,
+	rotateY: 0,
+	rotateZ: 0,
+	skew: 0,
+	skewX: 0,
+	skewY: 0,
+	perspective: 0,
+	transformPerspective: 0,
+	opacity: 1
+};
+/**
+* Look up the canonical fallback value for a property key. Returns the table
+* value if known, else `null` — which motion's `animate()` interprets as
+* "read from computed style at animation start."
+*/
+function getMotionDefault(key) {
+	return TRANSFORM_DEFAULTS[key] ?? null;
+}
+//#endregion
+//#region src/primitives/gesture-state.ts
+/** High → low priority for the winners walk. Materialized once. */
+var PRIORITY_HIGH_TO_LOW = [...[
+	"animate",
+	"whileInView",
+	"whileHover",
+	"whilePress",
+	"whileFocus",
+	"whileDrag",
+	"exit"
+]].reverse();
+/**
+* Construct the per-element gesture state machine.
+*
+* Wired primitives:
+* - `createStore` for the seven active flags — Solid tracks per-path, so
+*   toggling `whileHover` doesn't dirty memos reading `whilePress`.
+* - `createMemo` for `stateTargets` — cached, re-runs only when opts/parent
+*   context change.
+* - `createMemo` for `winners` — same caching, re-runs when `active` flags or
+*   `stateTargets` change.
+* - `createEffect` for the diff-and-animate loop — fires on `winners` change;
+*   compares against `lastApplied` to compute changed/removed keys.
+* - `onCleanup` inside the effect for per-iteration MV subscriptions — scoped
+*   to each effect run (fires on re-run AND owner disposal). Same iteration-
+*   scoped cleanup pattern Phase 1 established.
+*/
+function createGestureStateMachine(deps) {
+	const { el, getOpts, parentVariantCtx, motionConfig, systemReducedMotion, initialTarget, externalActiveStore, suppressFirstMount, enterReady, getValueForAnimate } = deps;
+	const [active, setActiveStore] = externalActiveStore ?? createStore({
+		animate: true,
+		whileInView: false,
+		whileHover: false,
+		whilePress: false,
+		whileFocus: false,
+		whileDrag: false,
+		exit: false
+	});
+	const stateTargets = createMemo(() => {
+		const opts = getOpts();
+		const variants = opts.variants;
+		const custom = opts.custom ?? parentVariantCtx.custom?.();
+		return {
+			animate: resolveTarget(opts.animate, variants, asVariantLabels(parentVariantCtx.animate?.()), custom),
+			whileInView: resolveTarget(opts.inView, variants, asVariantLabels(parentVariantCtx.inView?.()), custom),
+			whileHover: resolveTarget(opts.hover, variants, asVariantLabels(parentVariantCtx.hover?.()), custom),
+			whilePress: resolveTarget(opts.press, variants, asVariantLabels(parentVariantCtx.press?.()), custom),
+			whileFocus: resolveTarget(opts.focus, variants, asVariantLabels(parentVariantCtx.focus?.()), custom),
+			whileDrag: resolveTarget(opts.whileDrag, variants, void 0, custom),
+			exit: resolveTarget(opts.exit, variants, asVariantLabels(parentVariantCtx.exit?.()), custom)
+		};
+	});
+	const winners = createMemo(() => {
+		const targets = stateTargets();
+		const dragEnabled = Boolean(getOpts().drag);
+		const out = {};
+		for (const stateName of PRIORITY_HIGH_TO_LOW) {
+			if (!isStateActive(stateName, active, parentVariantCtx)) continue;
+			const target = targets[stateName];
+			if (!target) continue;
+			for (const key in target) {
+				if (key === "transition") continue;
+				if (key in out) continue;
+				if (!active.exit && dragEnabled && (key === "x" || key === "y")) continue;
+				out[key] = {
+					value: target[key],
+					transition: target.transition,
+					stateName
+				};
+			}
+		}
+		return out;
+	});
+	let prevControls = null;
+	let lastApplied = {};
+	let isFirstRun = true;
+	let pendingExitResolvers = [];
+	function drainPendingExitResolvers() {
+		const resolvers = pendingExitResolvers;
+		pendingExitResolvers = [];
+		for (const r of resolvers) r();
+	}
+	createEffect(() => {
+		const next = winners();
+		const opts = getOpts();
+		if (isFirstRun && enterReady && !enterReady()) return;
+		let skipAnimate = false;
+		if (isFirstRun && (untrack(() => opts.initial) === false || suppressFirstMount)) {
+			lastApplied = snapshotValues(next);
+			skipAnimate = true;
+		}
+		isFirstRun = false;
+		if (!skipAnimate && Object.keys(next).length === 0 && Object.keys(lastApplied).length === 0 && opts.animate === void 0 && parentVariantCtx.animate?.() === void 0) return;
+		const changes = {};
+		let mergedPerTargetTransition;
+		if (!skipAnimate) {
+			for (const key in next) {
+				const entry = next[key];
+				if (!entry) continue;
+				if (lastApplied[key] !== entry.value) {
+					changes[key] = entry.value;
+					mergedPerTargetTransition ??= entry.transition;
+				}
+			}
+			for (const key in lastApplied) {
+				if (key in next) continue;
+				const initialValue = initialTarget && key in initialTarget ? initialTarget[key] : void 0;
+				changes[key] = initialValue !== void 0 ? initialValue : getMotionDefault(key);
+			}
+		}
+		const reduced = shouldReduceMotion(motionConfig.reducedMotion(), systemReducedMotion());
+		const transition = mergeTransition(motionConfig.transition(), opts.transition, mergedPerTargetTransition, reduced);
+		const driverState = highestActiveDriverState(next);
+		const effectiveAnimateValue = animateValueForState(driverState, opts, parentVariantCtx);
+		const buildAnimateOptions = () => ({
+			...transition,
+			onPlay: opts.onAnimationStart ? () => untrack(() => opts.onAnimationStart?.()) : void 0,
+			onComplete: opts.onAnimationComplete ? () => untrack(() => {
+				if (effectiveAnimateValue != null) opts.onAnimationComplete?.(effectiveAnimateValue);
+			}) : void 0,
+			onStop: opts.onAnimationCancel ? () => untrack(() => opts.onAnimationCancel?.()) : void 0,
+			onUpdate: opts.onUpdate ? (latest) => untrack(() => opts.onUpdate?.(latest)) : void 0
+		});
+		if (!skipAnimate && Object.keys(changes).length > 0) {
+			lastApplied = {
+				...lastApplied,
+				...changes
+			};
+			for (const key in lastApplied) if (!(key in next) && !(key in changes)) delete lastApplied[key];
+			const { plain } = splitTarget(changes);
+			const routed = [];
+			const waaPlain = {};
+			for (const key in plain) {
+				const value = plain[key];
+				const fallback = initialTarget && key in initialTarget ? initialTarget[key] : getMotionDefault(key);
+				const routedMV = getValueForAnimate?.(key, fallback);
+				if (routedMV) routed.push({
+					mv: routedMV,
+					value
+				});
+				else waaPlain[key] = value;
+			}
+			prevControls?.stop();
+			const animOpts = buildAnimateOptions();
+			if (routed.length === 0) prevControls = animate$1(el, waaPlain, animOpts);
+			else {
+				const controls = [];
+				for (const { mv, value } of routed) controls.push(animate$1(mv, value, animOpts));
+				if (Object.keys(waaPlain).length > 0) controls.push(animate$1(el, waaPlain, animOpts));
+				prevControls = aggregateControls(controls);
+			}
+			if (driverState === "exit") {
+				const dispatched = prevControls;
+				dispatched.then(() => {
+					if (prevControls === dispatched) drainPendingExitResolvers();
+				});
+			}
+		} else if (driverState === "exit") drainPendingExitResolvers();
+		for (const key in next) {
+			const entry = next[key];
+			if (!entry) continue;
+			if (isMotionValue$1(entry.value)) {
+				const targetMV = entry.value;
+				onCleanup(targetMV.on("change", (v) => {
+					const fallback = initialTarget && key in initialTarget ? initialTarget[key] : getMotionDefault(key);
+					const routedMV = getValueForAnimate?.(key, fallback);
+					if (routedMV && routedMV !== targetMV) animate$1(routedMV, v, buildAnimateOptions());
+					else animate$1(el, { [key]: v }, buildAnimateOptions());
+				}));
+			}
+		}
+	});
+	onCleanup(() => prevControls?.stop());
+	function setActive(state, isActive) {
+		setActiveStore(state, isActive);
+	}
+	/**
+	* Phase 3 — Presence integration. Returns a Promise that resolves when the
+	* NEXT exit-driven animate dispatched by the diff effect completes, OR
+	* immediately if no exit target is configured (nothing to wait for).
+	*
+	* The typical caller is `createMotion`'s presence-registered `runExit`:
+	* it flips `setActive("exit", true)` then awaits this. The diff effect
+	* runs in the next microtask, dispatches the exit animation, and on its
+	* completion drains the pending resolvers.
+	*
+	* Multiple concurrent waiters are supported — they all resolve from the
+	* same animation's completion.
+	*
+	* Edge case: if the user reactively removes `opts.exit` AFTER this call
+	* but before the effect runs, the resolver will still be drained the
+	* next time exit drives a dispatch (or by the "no-animate but exit-
+	* driven" branch in the effect).
+	*/
+	function onceExitComplete() {
+		if (untrack(() => stateTargets().exit) === null) return Promise.resolve();
+		return new Promise((resolve) => {
+			pendingExitResolvers.push(resolve);
+		});
+	}
+	return {
+		setActive,
+		onceExitComplete
+	};
+}
+/**
+* Q4 — a state is considered active if EITHER its own flag is set OR the
+* parent's VariantContext carries a label for it (the parent's gesture is
+* active and propagating). The parent slots are themselves active-gated in
+* `useMotion`'s `myVariantCtx`, so a defined return value here means the
+* parent's gesture really is firing right now.
+*
+* `animate` and `exit` are special — their inheritance happens through the
+* normal label-resolution path in `resolveTarget`, not through the active
+* flag. We treat `animate` as always-active (matches motion's
+* createTypeState(true)). `exit` is driven by the Presence context; the
+* flag-based check is fine.
+*/
+function isStateActive(state, active, parent) {
+	if (active[state]) return true;
+	switch (state) {
+		case "whileHover": return parent.hover?.() !== void 0;
+		case "whilePress": return parent.press?.() !== void 0;
+		case "whileFocus": return parent.focus?.() !== void 0;
+		case "whileInView": return parent.inView?.() !== void 0;
+		case "whileDrag": return false;
+		case "animate":
+		case "exit": return false;
+	}
+}
+/** Convert a winners map into the flat value snapshot used by `lastApplied`. */
+function snapshotValues(winners) {
+	const out = {};
+	for (const key in winners) {
+		const entry = winners[key];
+		if (entry) out[key] = entry.value;
+	}
+	return out;
+}
+/**
+* Phase 1's splitTarget: separate MotionValue refs in a target from plain
+* values. Motion-vanilla `animate(el, target)` doesn't subscribe to MV refs
+* passed in target — we handle that bridge ourselves.
+*/
+function splitTarget(target) {
+	const plain = {};
+	const motionValues = [];
+	for (const key in target) {
+		const value = target[key];
+		if (value === void 0 || value === null) {
+			plain[key] = value;
+			continue;
+		}
+		if (isMotionValue$1(value)) {
+			motionValues.push({
+				key,
+				mv: value
+			});
+			plain[key] = value.get();
+		} else if (typeof value === "function") plain[key] = value();
+		else if (Array.isArray(value)) plain[key] = value.map((v) => {
+			if (isMotionValue$1(v)) return v.get();
+			if (typeof v === "function") return v();
+			return v;
+		});
+		else plain[key] = value;
+	}
+	return {
+		plain,
+		motionValues
+	};
+}
+/**
+* Return the highest-priority active state that contributed any key in the
+* current winners map. Used to identify the "driver" for onAnimationComplete
+* (which receives the AnimateValue that drove the animation).
+*
+* `animate` is the fallback when no gesture is contributing — matches Phase 1's
+* effectiveAnimateValue semantic.
+*/
+function highestActiveDriverState(winners) {
+	for (const stateName of PRIORITY_HIGH_TO_LOW) for (const key in winners) {
+		const entry = winners[key];
+		if (entry && entry.stateName === stateName) return stateName;
+	}
+	return "animate";
+}
+/**
+* Look up the AnimateValue (Target | string | string[]) that corresponds to a
+* given state — for onAnimationComplete's argument.
+*/
+function animateValueForState(state, opts, parentVariantCtx) {
+	switch (state) {
+		case "animate": return opts.animate ?? parentVariantCtx.animate?.();
+		case "whileHover": return opts.hover ?? parentVariantCtx.hover?.();
+		case "whilePress": return opts.press ?? parentVariantCtx.press?.();
+		case "whileFocus": return opts.focus ?? parentVariantCtx.focus?.();
+		case "whileInView": return opts.inView ?? parentVariantCtx.inView?.();
+		case "exit": return opts.exit ?? parentVariantCtx.exit?.();
+		case "whileDrag": return opts.whileDrag;
+	}
+}
+/**
+* Combine N AnimationPlaybackControls into a single Thenable+stoppable handle.
+*
+* Used by the Stage 3 bridge when an animate dispatch fans out across per-MV
+* `animate(mv, value, opts)` calls (one per routed key) plus an optional
+* single `animate(el, target, opts)` for keys still on the WAA path. The
+* gesture state machine treats `prevControls` as one handle: subsequent diff
+* runs call `.stop()` on it to cancel the in-flight animation, and the exit
+* drain awaits `.then(...)` to settle Presence's `onceExitComplete()` waiters.
+* Aggregating lets both code paths stay uniform whether bridging fired one
+* underlying motion call or six.
+*
+* The other AnimationPlaybackControls methods (pause/play/cancel/complete)
+* fan out unchanged. `time`/`speed`/`duration` aren't aggregated — they're
+* read-rare in our codebase and a meaningful aggregate isn't well-defined
+* across heterogeneous animations.
+*/
+function aggregateControls(controls) {
+	let settled = null;
+	const settle = () => {
+		if (!settled) settled = Promise.all(controls.map((c) => c));
+		return settled;
+	};
+	const forAll = (fn) => {
+		for (const c of controls) fn(c);
+	};
+	return {
+		stop: () => {
+			forAll((c) => c.stop());
+		},
+		pause: () => {
+			forAll((c) => c.pause());
+		},
+		play: () => {
+			forAll((c) => c.play());
+		},
+		cancel: () => {
+			forAll((c) => c.cancel());
+		},
+		complete: () => {
+			forAll((c) => c.complete());
+		},
+		speed: 1,
+		time: 0,
+		duration: controls.reduce((acc, c) => Math.max(acc, c.duration ?? 0), 0),
+		then: (onFulfilled, onRejected) => settle().then(onFulfilled, onRejected)
+	};
+}
+//#endregion
+//#region src/primitives/value-registry.ts
+function createValueRegistry() {
+	const values = /* @__PURE__ */ new Map();
+	const transient = /* @__PURE__ */ new Set();
+	return {
+		get(key) {
+			return values.get(key);
+		},
+		has(key) {
+			return values.has(key);
+		},
+		setExternal(key, mv) {
+			const existing = values.get(key);
+			if (existing && transient.has(existing)) transient.delete(existing);
+			values.set(key, mv);
+		},
+		getOrCreateTransient(key, fallback) {
+			const existing = values.get(key);
+			if (existing) return existing;
+			const mv = motionValue$1(fallback);
+			values.set(key, mv);
+			transient.add(mv);
+			return mv;
+		},
+		entries() {
+			return values.entries();
+		},
+		get size() {
+			return values.size;
+		},
+		dispose() {
+			transient.clear();
+			values.clear();
+		}
+	};
+}
+//#endregion
+//#region src/primitives/createMotion.ts
+/**
+* Detect whether an animate-value is a variant name (string or string[]) vs.
+* an explicit target object. Returns the labels or undefined.
+*/
+function asVariantLabels(value) {
+	if (value === void 0) return void 0;
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) return value;
+}
+/**
+* Resolve a per-state animate value into a {@link Target}. Implements the
+* Q4 sub-2 priority table:
+*
+* - explicit Target object → use as-is (parent context ignored)
+* - variant name → look up in own variants only (no cascade)
+* - undefined → fall back to parent context's variant name, then look up in
+*   own variants
+*/
+function resolveTarget(ownValue, ownVariants, parentLabel, custom) {
+	if (ownValue !== void 0 && typeof ownValue !== "string" && !Array.isArray(ownValue)) return ownValue;
+	const labels = effectiveLabels(ownValue, parentLabel);
+	if (labels === void 0) return null;
+	return resolveVariant(labels, ownVariants, custom);
+}
+/**
+* Merge transition specs in priority order: MotionConfig default <
+* user's `transition` < per-target `transition`. When reduced motion is
+* active, returns `{ duration: 0 }` and drops everything else (Q11 sub-4).
+*/
+function mergeTransition(configDefault, ownTransition, perTargetTransition, reduced) {
+	if (reduced) return { duration: 0 };
+	return {
+		...configDefault ?? {},
+		...ownTransition ?? {},
+		...perTargetTransition ?? {}
+	};
+}
+/**
+* Apply a static target to an element's inline style before paint. Used on
+* mount when no SSR style was emitted. The ref callback fires before the
+* browser yields, so this avoids a frame of flicker.
+*/
+function applyStaticStyle(el, target) {
+	const style = targetToStyle(target);
+	for (const key in style) {
+		const value = style[key];
+		if (value === void 0) continue;
+		if (key.startsWith("--")) el.style.setProperty(key, String(value));
+		else el.style[key] = value;
+	}
+}
+/**
+* The imperative primitive: bind an element to a reactive motion-options
+* source. Caller is responsible for keeping the element alive (refs in a
+* component, drag controls, etc.).
+*
+* Phase 1 scope: animate + initial + transition + lifecycle hooks +
+* reduced-motion override + presence registration. Phase 2 layers gesture
+* states (hover/press/focus/inView) and drag on top.
+*/
+function createMotion(el, getOpts, config) {
+	const parentVariantCtx = config?.parentContext ?? useVariantContext();
+	const presence = usePresenceContext();
+	const motionConfig = useMotionConfig();
+	const systemReducedMotion = createReducedMotion();
+	let valueRegistry;
+	const ensureRegistry = () => {
+		if (!valueRegistry) valueRegistry = createValueRegistry();
+		return valueRegistry;
+	};
+	const initialOpts = untrack(getOpts);
+	let capturedInitialTarget = null;
+	if (initialOpts.initial !== false) {
+		const inheritedInitial = parentVariantCtx.initial?.();
+		const inheritedAnimate = parentVariantCtx.animate?.();
+		const effective = initialOpts.initial !== void 0 ? initialOpts.initial : inheritedInitial !== void 0 ? inheritedInitial : initialOpts.animate !== void 0 ? initialOpts.animate : inheritedAnimate;
+		if (effective !== void 0) capturedInitialTarget = resolveTarget(effective, initialOpts.variants, void 0, initialOpts.custom ?? parentVariantCtx.custom?.());
+	}
+	const suppressFirstMount = untrack(() => presence.initial?.()) === false;
+	if (!config?.initialAppliedBySSR && !suppressFirstMount && capturedInitialTarget) applyStaticStyle(el, capturedInitialTarget);
+	const noop = () => {};
+	let writer = noop;
+	const writeFromRegistry = () => writer();
+	const multiKeyWriter = () => {
+		if (!valueRegistry) return;
+		const target = {};
+		for (const [k, mv] of valueRegistry.entries()) target[k] = mv.get();
+		if (Object.keys(target).length === 0) return;
+		applyStaticStyle(el, target);
+	};
+	const compileSingleKeyWriter = () => {
+		const [key, mv] = valueRegistry.entries().next().value;
+		if (TRANSFORM_KEYS.has(key)) {
+			const formatter = pickTransformFormatter(key);
+			if (formatter !== void 0) return () => {
+				const v = snapshotValue(mv.get());
+				if (v !== void 0) el.style.transform = formatter(v);
+			};
+		}
+		if (key.startsWith("--")) return () => {
+			const v = snapshotValue(mv.get());
+			if (v !== void 0) el.style.setProperty(key, String(v));
+		};
+		return () => {
+			const v = snapshotValue(mv.get());
+			if (v === void 0) return;
+			const formatted = formatProperty(key, v);
+			el.style[key] = formatted;
+		};
+	};
+	const refreshWriter = () => {
+		const size = valueRegistry?.size ?? 0;
+		if (size === 0) {
+			writer = noop;
+			return;
+		}
+		if (size === 1) {
+			writer = compileSingleKeyWriter();
+			return;
+		}
+		writer = multiKeyWriter;
+	};
+	let bridgeActive = false;
+	if (config?.styleMotionValues && config.styleMotionValues.size > 0) {
+		const registry = ensureRegistry();
+		for (const [key, mv] of config.styleMotionValues) {
+			registry.setExternal(key, mv);
+			onCleanup(mv.on("change", writeFromRegistry));
+		}
+		bridgeActive = true;
+	}
+	if (config?.styleStaticTransforms && config.styleStaticTransforms.size > 0) bridgeActive = true;
+	if (bridgeActive && capturedInitialTarget) {
+		const registry = ensureRegistry();
+		for (const key in capturedInitialTarget) {
+			if (key === "transition") continue;
+			if (!TRANSFORM_KEYS.has(key)) continue;
+			if (registry.has(key)) continue;
+			const raw = capturedInitialTarget[key];
+			const snapshot = snapshotValue(raw);
+			if (snapshot === void 0) continue;
+			onCleanup(registry.getOrCreateTransient(key, snapshot).on("change", writeFromRegistry));
+		}
+	}
+	if (bridgeActive && config?.styleStaticTransforms) {
+		const registry = ensureRegistry();
+		for (const [key, value] of config.styleStaticTransforms) {
+			const existing = registry.get(key);
+			if (existing) existing.set(value);
+			else onCleanup(registry.getOrCreateTransient(key, value).on("change", writeFromRegistry));
+		}
+	}
+	if (bridgeActive) {
+		refreshWriter();
+		writeFromRegistry();
+	}
+	const getValueForAnimate = (key, fallback) => {
+		if (!bridgeActive) return void 0;
+		const registry = ensureRegistry();
+		const existing = registry.get(key);
+		if (existing) return existing;
+		if (!TRANSFORM_KEYS.has(key)) return void 0;
+		const mv = registry.getOrCreateTransient(key, fallback);
+		onCleanup(mv.on("change", writeFromRegistry));
+		refreshWriter();
+		return mv;
+	};
+	const inPresence = presence.registerEnter !== void 0;
+	const [enterReady, setEnterReady] = createSignal(!inPresence);
+	if (inPresence && presence.registerEnter) {
+		presence.registerEnter(el, () => setEnterReady(true));
+		queueMicrotask(() => {
+			if (el.isConnected) setEnterReady(true);
+		});
+	}
+	const { setActive, onceExitComplete } = createGestureStateMachine({
+		el,
+		getOpts,
+		parentVariantCtx,
+		motionConfig,
+		systemReducedMotion,
+		initialTarget: capturedInitialTarget,
+		externalActiveStore: config?.activeStore,
+		suppressFirstMount,
+		enterReady,
+		getValueForAnimate
+	});
+	const inheritedExitLabel = untrack(() => parentVariantCtx.exit?.());
+	const hasOwnExit = initialOpts.exit !== void 0;
+	const hasCascadedExit = inheritedExitLabel !== void 0 && initialOpts.variants !== void 0;
+	if (hasOwnExit || hasCascadedExit) {
+		const runExit = async () => {
+			const opts = untrack(getOpts);
+			const exitTarget = resolveTarget(opts.exit, opts.variants, asVariantLabels(untrack(() => parentVariantCtx.exit?.())), opts.custom ?? parentVariantCtx.custom?.());
+			if (!exitTarget) {
+				setActive("exit", true);
+				await onceExitComplete();
+				return;
+			}
+			const reduced = shouldReduceMotion(motionConfig.reducedMotion(), systemReducedMotion());
+			const transition = mergeTransition(motionConfig.transition(), opts.transition, exitTarget.transition, reduced);
+			const animTarget = {};
+			for (const k in exitTarget) if (k !== "transition") animTarget[k] = exitTarget[k];
+			await animate$1(el, animTarget, transition);
+		};
+		presence.register(el, runExit);
+	}
+	createGestures(el, getOpts, setActive);
+	if (el instanceof HTMLElement) createDrag(el, getOpts, setActive);
+}
+//#endregion
+//#region src/use-motion.tsx
+/**
+* Wire motion to an element via a getter function.
+*
+* ```tsx
+* const motion = useMotion({
+*   initial: { opacity: 0, y: 20 },
+*   animate: { opacity: 1, y: 0 },
+*   transition: { duration: 0.6 },
+* })
+*
+* <div {...motion({ class: "card" })}>Hello</div>
+* ```
+*
+* **Reactive form**: pass a function to track signals.
+* ```tsx
+* useMotion(() => ({ animate: { x: x() } }))
+* ```
+*
+* **Variant context propagation**: `useMotion` only *consumes* the parent
+* variant context. To propagate to descendants, wrap them in `motion.Provider`:
+* ```tsx
+* const m = useMotion({ animate: "visible", variants })
+* <div {...m()}>
+*   <m.Provider>
+*     <ChildMotion />
+*   </m.Provider>
+* </div>
+* ```
+*
+* For the common "JSX wrapper does propagation automatically" pattern, use
+* `<motion.div>` (Phase 4).
+*/
+function useMotion(opts) {
+	const getOpts = typeof opts === "function" ? opts : () => opts;
+	const actualParentCtx = useVariantContext();
+	const isControlling = () => isControllingVariants(getOpts());
+	const parentVariantCtx = {
+		variants: () => isControlling() ? void 0 : actualParentCtx.variants?.(),
+		initial: () => isControlling() ? void 0 : actualParentCtx.initial?.(),
+		animate: () => isControlling() ? void 0 : actualParentCtx.animate?.(),
+		hover: () => isControlling() ? void 0 : actualParentCtx.hover?.(),
+		press: () => isControlling() ? void 0 : actualParentCtx.press?.(),
+		focus: () => isControlling() ? void 0 : actualParentCtx.focus?.(),
+		inView: () => isControlling() ? void 0 : actualParentCtx.inView?.(),
+		exit: () => isControlling() ? void 0 : actualParentCtx.exit?.(),
+		custom: () => isControlling() ? void 0 : actualParentCtx.custom?.(),
+		transition: () => isControlling() ? void 0 : actualParentCtx.transition?.()
+	};
+	const presenceCtx = usePresenceContext();
+	const initialTarget = computeInitialTarget(untrack(getOpts), parentVariantCtx, presenceCtx.initial);
+	const activeStore = createStore({
+		animate: true,
+		whileInView: false,
+		whileHover: false,
+		whilePress: false,
+		whileFocus: false,
+		whileDrag: false,
+		exit: false
+	});
+	const [active] = activeStore;
+	let styleMotionValues;
+	let styleStaticTransforms;
+	let styleCaptured = false;
+	const motionRef = (el) => {
+		createMotion(el, getOpts, {
+			initialAppliedBySSR: initialTarget !== null || styleMotionValues !== void 0 || styleStaticTransforms !== void 0,
+			activeStore,
+			parentContext: parentVariantCtx,
+			styleMotionValues,
+			styleStaticTransforms
+		});
+	};
+	let renderedOnce = false;
+	onMount(() => {
+		renderedOnce = true;
+	});
+	/**
+	* Walk `style` once and pull `MotionValue` refs into `styleMotionValues`.
+	* Idempotent across re-renders — Stage 2's contract is "MV refs in style
+	* are captured on first call and never re-scraped." Subsequent m()
+	* invocations that pass a different style with new MVs won't pick them
+	* up; that pattern wasn't in scope for v0.1.
+	*
+	* The read is `untrack`ed because m() is typically called from inside a
+	* JSX spread, which Solid evaluates within a tracked owner. Without
+	* untrack we'd subscribe to whatever signals the user's `style` object
+	* references and re-fire this useMotion's owner-level effects on every
+	* change.
+	*/
+	const captureStyleEntries = (style) => {
+		if (styleCaptured) return;
+		styleCaptured = true;
+		if (!style || typeof style !== "object") return;
+		for (const key in style) {
+			const value = style[key];
+			if (isMotionValue$1(value)) {
+				if (!styleMotionValues) styleMotionValues = /* @__PURE__ */ new Map();
+				styleMotionValues.set(key, value);
+			} else if (TRANSFORM_KEYS.has(key)) {
+				const snap = snapshotValue(value);
+				if (snap !== void 0) {
+					if (!styleStaticTransforms) styleStaticTransforms = /* @__PURE__ */ new Map();
+					styleStaticTransforms.set(key, snap);
+				}
+			}
+		}
+	};
+	/**
+	* Produce a style object with MV-valued keys (and transform-shortcut keys —
+	* see below) removed. Solid's style binding would otherwise either write the
+	* MotionValue instance as a literal (coercing it via String() to
+	* "[object Object]") for MV-valued entries, or apply transform shortcuts
+	* directly as bogus CSS properties for static-shortcut entries. createMotion
+	* handles both via the registry-write path; we strip them here so the
+	* Solid-bound `cleaned` style only contains regular CSS keys.
+	*/
+	const stripStyleEntriesOwnedByRegistry = (style) => {
+		if (!style) return {};
+		const out = {};
+		for (const key in style) {
+			if (styleMotionValues?.has(key)) continue;
+			if (TRANSFORM_KEYS.has(key)) continue;
+			out[key] = style[key];
+		}
+		return out;
+	};
+	/**
+	* Stage 4 — compose the first-paint inline style from:
+	*   1. `initialTarget` (resolved via the priority chain at construction)
+	*   2. MotionValue snapshots from `style: { key: mv }`
+	*   3. Static transform shortcuts in `style: { x: 10, scale: 0.5 }`
+	*
+	* Style entries (2, 3) override `initialTarget` (1) on the same key because
+	* `style` is the runtime source-of-truth for those keys. Returns the composed
+	* `JSX.CSSProperties` or null when nothing applies (no initial + no style
+	* registry contributions).
+	*
+	* Called only before `onMount` flips `renderedOnce`. After mount, the
+	* registry's writer (in createMotion) owns el.style directly and this
+	* function isn't consulted.
+	*/
+	const composeFirstPaintStyle = (userStyle) => {
+		const merged = {};
+		let hasAny = false;
+		if (initialTarget) {
+			Object.assign(merged, initialTarget);
+			hasAny = true;
+		}
+		if (styleMotionValues) for (const [key, mv] of styleMotionValues) {
+			merged[key] = mv.get();
+			hasAny = true;
+		}
+		if (userStyle) for (const key in userStyle) {
+			if (styleMotionValues?.has(key)) continue;
+			if (!TRANSFORM_KEYS.has(key)) continue;
+			const v = userStyle[key];
+			if (typeof v === "number" || typeof v === "string") {
+				merged[key] = v;
+				hasAny = true;
+			}
+		}
+		return hasAny ? targetToStyle(merged) : null;
+	};
+	function getProps(userProps) {
+		untrack(() => captureStyleEntries(userProps?.style));
+		const wroteFirstPaintStyle = initialTarget !== null || styleMotionValues !== void 0 || styleStaticTransforms !== void 0;
+		return mergeProps$1(userProps ?? {}, {
+			get style() {
+				const cleaned = stripStyleEntriesOwnedByRegistry(userProps?.style);
+				if (renderedOnce) return cleaned;
+				const composed = composeFirstPaintStyle(userProps?.style);
+				return composed ? {
+					...cleaned,
+					...composed
+				} : cleaned;
+			},
+			ref: mergeRefs(userProps?.ref, motionRef),
+			...wroteFirstPaintStyle ? { "data-motion-hydrated": "" } : {}
+		});
+	}
+	const myVariantCtx = {
+		variants: () => getOpts().variants,
+		initial: () => {
+			const v = getOpts().initial;
+			return v === false ? void 0 : asVariantLabels(v);
+		},
+		animate: () => asVariantLabels(getOpts().animate),
+		hover: () => active.whileHover ? asVariantLabels(getOpts().hover) : void 0,
+		press: () => active.whilePress ? asVariantLabels(getOpts().press) : void 0,
+		focus: () => active.whileFocus ? asVariantLabels(getOpts().focus) : void 0,
+		inView: () => active.whileInView ? asVariantLabels(getOpts().inView) : void 0,
+		exit: () => asVariantLabels(getOpts().exit),
+		custom: () => getOpts().custom,
+		transition: () => getOpts().transition
+	};
+	const Provider = (props) => createComponent(VariantContext.Provider, {
+		value: myVariantCtx,
+		get children() {
+			return props.children;
+		}
+	});
+	return Object.assign(getProps, { Provider });
+}
+function computeInitialTarget(opts, parentVariantCtx, presenceInitial) {
+	if (presenceInitial?.() === false) {
+		const animateValue = opts.animate !== void 0 ? opts.animate : parentVariantCtx.animate?.();
+		if (animateValue === void 0) return null;
+		return resolveTarget(animateValue, opts.variants, void 0, opts.custom ?? parentVariantCtx.custom?.());
+	}
+	if (opts.initial === false) return null;
+	const inheritedInitial = parentVariantCtx.initial?.();
+	const inheritedAnimate = parentVariantCtx.animate?.();
+	const effective = opts.initial !== void 0 ? opts.initial : inheritedInitial !== void 0 ? inheritedInitial : opts.animate !== void 0 ? opts.animate : inheritedAnimate;
+	if (effective === void 0) return null;
+	return resolveTarget(effective, opts.variants, void 0, opts.custom ?? parentVariantCtx.custom?.());
+}
+//#endregion
+//#region src/motion-proxy.tsx
+/**
+* Frozen list of `MotionOptKey`s — fed to `splitProps` at every
+* tag-component render to separate motion options from element
+* attributes. The `satisfies` clause checks every entry against
+* `MotionOptKey` at compile time so typos / drift between the union
+* and the array surface as errors.
+*/
+var MOTION_OPT_KEYS = [
+	"initial",
+	"animate",
+	"exit",
+	"hover",
+	"press",
+	"focus",
+	"inView",
+	"inViewOptions",
+	"drag",
+	"dragConstraints",
+	"dragElastic",
+	"dragMomentum",
+	"dragTransition",
+	"dragSnapToOrigin",
+	"dragControls",
+	"whileDrag",
+	"panThreshold",
+	"variants",
+	"custom",
+	"transition",
+	"onAnimationStart",
+	"onAnimationComplete",
+	"onAnimationCancel",
+	"onUpdate",
+	"onHoverStart",
+	"onHoverEnd",
+	"onPressStart",
+	"onPress",
+	"onPressCancel",
+	"onFocus",
+	"onBlur",
+	"onPanStart",
+	"onPan",
+	"onPanEnd",
+	"onViewportEnter",
+	"onViewportLeave",
+	"onDragStart",
+	"onDrag",
+	"onDragEnd",
+	"onDragTransitionEnd"
+];
+var tagComponentCache = /* @__PURE__ */ new Map();
+var motionComponents = /* @__PURE__ */ new WeakSet();
+function makeMotionTag(tag) {
+	const cached = tagComponentCache.get(tag);
+	if (cached) return cached;
+	const Tag = (props) => {
+		const [motionOpts, rest] = splitProps(props, MOTION_OPT_KEYS);
+		const m = useMotion(() => motionOpts);
+		return createComponent(m.Provider, { get children() {
+			return createComponent(Dynamic, mergeProps({ component: tag }, () => m(rest)));
+		} });
+	};
+	const stored = Tag;
+	tagComponentCache.set(tag, stored);
+	motionComponents.add(stored);
+	return stored;
+}
+/**
+* `motion.create(Component)` — wraps a custom Component with motion's
+* behavior. The wrapped Component must forward props to a single DOM
+* element root; the contract is documented in the {@link Motion.create}
+* JSDoc above and enforced at runtime (in dev mode) by detecting whether
+* motion's ref ever reaches the DOM after mount.
+*/
+function motionCreate(Component) {
+	if (process.env.NODE_ENV !== "production" && motionComponents.has(Component)) console.warn("[solidjs-motion] motion.create(motion.X) double-wraps the same element with two motion state machines. Compose options on a single layer instead.");
+	const Wrapped = (props) => {
+		const [motionOpts, rest] = splitProps(props, MOTION_OPT_KEYS);
+		const m = useMotion(() => motionOpts);
+		let refFired = false;
+		const detector = (_el) => {
+			refFired = true;
+		};
+		const userRef = rest.ref;
+		const mergedUserRef = process.env.NODE_ENV !== "production" ? mergeRefs(userRef, detector) : userRef;
+		const restWithDetector = process.env.NODE_ENV !== "production" ? mergeProps$1(rest, { ref: mergedUserRef }) : rest;
+		if (process.env.NODE_ENV !== "production") onMount(() => {
+			queueMicrotask(() => {
+				if (!refFired) console.warn("[solidjs-motion] motion.create wrapped a Component whose root didn't receive motion's ref. The wrapped Component must either spread {...props} on a single DOM element OR explicitly forward `props.ref` to its root. Motion's animations and exit registration won't run until this is fixed.");
+			});
+		});
+		return createComponent(m.Provider, { get children() {
+			return createComponent(Component, mergeProps(() => m(restWithDetector)));
+		} });
+	};
+	motionComponents.add(Wrapped);
+	return Wrapped;
+}
+/**
+* `motion` — the indexable proxy. Every property access returns a cached
+* motion-aware component for the given HTML/SVG tag. The reserved
+* `motion.create` key returns the HOC entry point.
+*
+* @example HTML element
+* ```tsx
+* <motion.div animate={{ x: 100 }} hover={{ scale: 1.05 }}>
+*   draggable card
+* </motion.div>
+* ```
+*
+* @example SVG element (handled transparently via <Dynamic>)
+* ```tsx
+* <motion.path d="M0 0 L100 100" animate={{ pathLength: 1 }} />
+* ```
+*
+* @example Wrapping a custom Component via the HOC
+* ```tsx
+* const Animated = motion.create(MyCard)
+* <Animated animate={{ scale: 1.05 }} class="my-card" />
+* ```
+*
+* Non-string keys (Symbols, well-known properties) return `undefined` so
+* debugging tools and `typeof` checks see a sane shape.
+*/
+var motion = new Proxy({}, { get(_target, key) {
+	if (typeof key !== "string") return void 0;
+	if (key === "create") return motionCreate;
+	return makeMotionTag(key);
+} });
+//#endregion
+//#region src/presence.tsx
+/**
+* Internal helper: maps the public `mode` prop to the value
+* `createSwitchTransition` expects. `popLayout` is intentionally deferred
+* (layout animations are v0.2+); `wait` maps to `out-in`; `sync` is the
+* default and corresponds to transition-group's `parallel`.
+*/
+function switchMode(mode) {
+	return mode === "wait" ? "out-in" : "parallel";
+}
+/**
+* Find every motion child registered under `root` (or root itself) and
+* return their [element, runExit] pairs. Walks the `runExits` map and
+* tests containment via `Node.contains`, which is O(depth) per check —
+* cheap because n is bounded by the number of motion children Presence
+* is tracking. Order isn't load-bearing; callers Promise.all the runExits.
+*/
+function collectSubtreeExits(root, runExits) {
+	const out = [];
+	for (const [el, fn] of runExits) if (el === root || root.contains(el)) out.push([el, fn]);
+	return out;
+}
+/**
+* Wraps a conditional or iterated JSX subtree and runs the descendants'
+* `exit` targets before they unmount. Matches motion-react's
+* `<AnimatePresence>` shape but with Solid's `<Show>` / `<For>` /
+* `<Index>` patterns instead of conditional children.
+*
+* Nested motion children are first-class: when an ancestor unmounts,
+* Presence walks the subtree from each resolved child and fires every
+* registered `runExit` it finds in parallel — including motion children
+* nested inside plain wrappers, or descendants whose `exit` label was
+* cascaded down via `m.Provider`. Each motion descendant animates with
+* its own variant/target; transition-group only releases the DOM once
+* the combined `Promise.all` settles. Mirrors motion-react's behavior
+* where a `<motion.div exit={...}>` inside an `<AnimatePresence>` boundary
+* animates correctly regardless of depth.
+*
+* @example Single (conditional unmount)
+* <Presence>
+*   <Show when={open()}>
+*     <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+*       saved
+*     </motion.div>
+*   </Show>
+* </Presence>
+*
+* @example List (items entering and exiting independently)
+* <Presence>
+*   <For each={items()}>
+*     {(item) => (
+*       <motion.li exit={{ opacity: 0, x: 20 }}>{item.text}</motion.li>
+*     )}
+*   </For>
+* </Presence>
+*/
+var Presence = (props) => {
+	const runExits = /* @__PURE__ */ new Map();
+	const runEnters = /* @__PURE__ */ new Map();
+	const [presenceInitial, setPresenceInitial] = createSignal(props.initial ?? true);
+	queueMicrotask(() => setPresenceInitial(true));
+	const ctx = {
+		register: (el, runExit) => {
+			runExits.set(el, runExit);
+		},
+		unregister: (el) => {
+			runExits.delete(el);
+		},
+		beforeUnmount: (el) => {
+			const exiting = collectSubtreeExits(el, runExits);
+			if (exiting.length === 0) return Promise.resolve();
+			return Promise.all(exiting.map((pair) => pair[1]())).then(() => {
+				for (const [exitedEl] of exiting) runExits.delete(exitedEl);
+			});
+		},
+		registerEnter: (el, runEnter) => {
+			runEnters.set(el, runEnter);
+		},
+		beforeMount: (el) => {
+			const fn = runEnters.get(el);
+			runEnters.delete(el);
+			fn?.();
+		},
+		initial: presenceInitial
+	};
+	return createComponent(PresenceContext.Provider, {
+		value: ctx,
+		get children() {
+			return createComponent(PresenceCore, {
+				source: () => props.children,
+				get mode() {
+					return props.mode;
+				},
+				get exitMethod() {
+					return props.exitMethod;
+				},
+				appear: presenceInitial,
+				ctx
+			});
+		}
+	});
+};
+var PresenceCore = (p) => {
+	const resolved = resolveElements(p.source);
+	const path = createMemo((prev) => {
+		if (prev) return prev;
+		const v = resolved();
+		if (v == null) return null;
+		return Array.isArray(v) ? "list" : "switch";
+	});
+	if (process.env.NODE_ENV !== "production") createEffect(() => {
+		if (path() === "list" && p.mode === "wait") console.warn("[solidjs-motion] <Presence mode=\"wait\"> has no meaningful effect with a list of children — \"wait\" sequences a single exiting element before a single entering one. Use it with `<Show>`-style conditional rendering.");
+	});
+	return createComponent(Switch, { get children() {
+		return [createComponent(Match, {
+			get when() {
+				return path() === "switch";
+			},
+			keyed: true,
+			children: (_v) => createSwitchTransition(() => {
+				const v = resolved();
+				return Array.isArray(v) ? v[0] ?? null : v;
+			}, {
+				appear: p.appear(),
+				mode: switchMode(p.mode),
+				onExit(el, done) {
+					const motionEl = el;
+					if (motionEl instanceof HTMLElement || motionEl instanceof SVGElement) motionEl.style.pointerEvents = "none";
+					p.ctx.beforeUnmount(motionEl).then(done);
+				},
+				onEnter(el, done) {
+					p.ctx.beforeMount?.(el);
+					done();
+				}
+			})
+		}), createComponent(Match, {
+			get when() {
+				return path() === "list";
+			},
+			keyed: true,
+			children: (_v) => createListTransition(() => resolved.toArray(), {
+				appear: p.appear(),
+				exitMethod: p.exitMethod,
+				onChange({ added, removed, finishRemoved }) {
+					for (const el of added) p.ctx.beforeMount?.(el);
+					if (removed.length === 0) return;
+					for (const el of removed) if (el instanceof HTMLElement || el instanceof SVGElement) el.style.pointerEvents = "none";
+					Promise.all(removed.map((el) => p.ctx.beforeUnmount(el))).then(() => finishRemoved(removed));
+				}
+			})
+		})];
+	} });
+};
+function useAnimatePresence(options) {
+	const runExits = /* @__PURE__ */ new Map();
+	const [presenceInitial, setPresenceInitial] = createSignal(options?.initial ?? true);
+	queueMicrotask(() => setPresenceInitial(true));
+	const ctx = {
+		register: (el, runExit) => {
+			runExits.set(el, runExit);
+		},
+		unregister: (el) => {
+			runExits.delete(el);
+		},
+		beforeUnmount: (el) => {
+			const exiting = collectSubtreeExits(el, runExits);
+			if (exiting.length === 0) return Promise.resolve();
+			return Promise.all(exiting.map((pair) => pair[1]())).then(() => {
+				for (const [exitedEl] of exiting) runExits.delete(exitedEl);
+			});
+		},
+		initial: presenceInitial
+	};
+	onCleanup(() => runExits.clear());
+	const Provider = (p) => createComponent(PresenceContext.Provider, {
+		value: ctx,
+		get children() {
+			return p.children;
+		}
+	});
+	const exit = async () => {
+		const snapshot = [...runExits.values()];
+		await Promise.all(snapshot.map((fn) => fn()));
+	};
+	return {
+		Provider,
+		exit
+	};
+}
+//#endregion
+//#region src/primitives/createScroll.ts
+/**
+* Bind four {@link MotionValueAccessor}s to a scroll source. Mirrors
+* motion/react's `useScroll`; defaults to the window when no container is
+* supplied. Each returned value is callable as a Solid Accessor AND has the
+* full MotionValue surface, so it composes with `useMotion`'s target,
+* `animate()`, `createTransform`, and direct JSX reactivity.
+*
+* @example
+* const { scrollY, scrollYProgress } = createScroll()
+* const opacity = createTransform(scrollYProgress, [0, 1], [1, 0])
+*
+* @example
+* const [el, setEl] = createSignal<HTMLElement>()
+* const { scrollY } = createScroll({ container: el })
+* <div ref={setEl} style={{ overflow: "auto" }}>...</div>
+*/
+function createScroll(options) {
+	const scrollX = createMotionValue(0);
+	const scrollY = createMotionValue(0);
+	const scrollXProgress = createMotionValue(0);
+	const scrollYProgress = createMotionValue(0);
+	const handler = (_progress, info) => {
+		if (!info) return;
+		scrollX.set(info.x.current);
+		scrollY.set(info.y.current);
+		scrollXProgress.set(info.x.progress);
+		scrollYProgress.set(info.y.progress);
+	};
+	createEffect(() => {
+		onCleanup(scroll$1(handler, {
+			container: options?.container?.() ?? void 0,
+			target: options?.target?.() ?? void 0,
+			axis: options?.axis,
+			offset: options?.offset
+		}));
+	});
+	return {
+		scrollX,
+		scrollY,
+		scrollXProgress,
+		scrollYProgress
+	};
+}
+//#endregion
+export { MOTION_OPT_KEYS, MotionConfig, MotionConfigContext, Presence, PresenceContext, VariantContext, animate, createDragControls, createInView, createMotion, createMotionValue, createMotionValueEvent, createPan, createReducedMotion, createScroll, createSpring, createTemplate, createTime, createTransform, createVelocity, effectiveLabels, inView, isMotionValue, motion, motionValue, resolveVariant, scroll, shouldReduceMotion, spring, targetToStyle, toSignal, useAnimatePresence, useMotion, useMotionConfig, usePresenceContext, useVariantContext };
+
+//# sourceMappingURL=index.js.map