@octane-xplat/motion 0.9.0 → 0.11.0

package/dist/web/index.js

@@ -1,6 +1,6 @@
-import { bag4, child, clone, componentSlot, createContext, drainFrag, hookSlots, ifBlock, markChildrenBlock, template, useContext, useEffect, useLayoutEffect, useRef, useState, withSlot } from "octane";
-import { textHoleUpdate } from "octane/internal/client";
-import { Pressable, Row, View } from "@octane-xplat/ui";
+import { __createCompiledContext, textHoleUpdate } from "octane/internal/client";
+import { bag4, child, clone, componentSlot, componentSlotVoid, createContext, drainFrag, hookSlots, ifBlock, markChildrenBlock, template, useContext, useEffect, useLayoutEffect, useRef, useState, withSlot } from "octane";
+import { HStack, Pressable, View } from "@octane-xplat/ui";
 //#region src/reduced-motion.web.ts
 function readReducedMotion() {
 	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -17,7 +17,7 @@ var _t$0$2 = /* @__PURE__ */ template("<!>", 0, 1);
 var _hs$$3 = /* @__PURE__ */ hookSlots(2);
 var _h$0$2 = /* @__PURE__ */ Symbol(_hs$$3);
 var _h$1$2 = /* @__PURE__ */ Symbol(_hs$$3 + 1);
-var __childrenBody$3 = {};
+var __childrenBody$8 = {};
 var ConfigContext = /* @__PURE__ */ createContext({ reducedMotion: "never" });
 function useReducedMotion() {
 	const [reduced, setReduced] = useState(readReducedMotion, _h$0$2);
@@ -55,7 +55,7 @@ var MotionConfig = function MotionConfig(props, __s, __extra) {
 	}
 	componentSlot(__s, 0, __block.parentNode, ConfigContext, {
 		"value": value,
-		"children": markChildrenBlock(__children$1, __childrenBody$3)
+		"children": markChildrenBlock(__children$1, __childrenBody$8)
 	}, __block.endMarker, void 0, void 0, true, void 0, "c:1bf28fec");
 };
 //#endregion
@@ -147,9 +147,9 @@ var __childrenBody$1 = {};
 var __childrenBody$$1 = {};
 function __then$0(__props, __s, __extra) {
 	const __block = __s.block;
-	const bind = __extra[0];
-	const children = __extra[1];
-	const host = __extra[2];
+	const children = __extra[0];
+	const host = __extra[1];
+	const ref = __extra[2];
 	const restoreInput = __extra[3];
 	const state = __extra[4];
 	const syncInput = __extra[5];
@@ -176,19 +176,18 @@ function __then$0(__props, __s, __extra) {
 		componentSlot(__s, 0, __block.parentNode, PresenceContext, {
 			"value": state,
 			"children": markChildrenBlock(__children$4, __childrenBody$1)
-		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:63be6025");
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:f1bd5f1c");
 	}
 	componentSlot(__s, 0, __block.parentNode, View, {
 		...viewProps,
-		"bind": (node) => {
+		"ref": [(node) => {
 			if (host.current !== node) {
 				restoreInput.current?.();
 				restoreInput.current = null;
 				host.current = node;
 			}
 			syncInput();
-			bind?.(node);
-		},
+		}, ref],
 		"children": markChildrenBlock(__children$2, __childrenBody$$1)
 	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:cf4c2460");
 }
@@ -198,12 +197,12 @@ var Presence = function Presence(props, __s, __extra) {
 	const [retained, setRetained] = useState(props.present, _hs$$2 + 0);
 	const latest = useRef(props, _hs$$2 + 1);
 	latest.current = props;
-	const ref = useRef(null, _hs$$2 + 2);
-	if (!ref.current) ref.current = new PresenceState(props.present, () => {
+	const stateRef = useRef(null, _hs$$2 + 2);
+	if (!stateRef.current) stateRef.current = new PresenceState(props.present, () => {
 		setRetained(false);
 		latest.current.onExitComplete?.();
 	});
-	const state = ref.current;
+	const state = stateRef.current;
 	const host = useRef(null, _hs$$2 + 3);
 	const restoreInput = useRef(null, _hs$$2 + 4);
 	const syncInput = () => {
@@ -224,14 +223,14 @@ var Presence = function Presence(props, __s, __extra) {
 		restoreInput.current = null;
 		host.current = null;
 	}, [], _hs$$2 + 6);
-	const { present, onExitComplete, children, bind, ...viewProps } = props;
+	const { present, onExitComplete, children, ref, ...viewProps } = props;
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	{
 		const __ifCondition = props.present || retained;
 		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [
-			bind,
 			children,
 			host,
+			ref,
 			restoreInput,
 			state,
 			syncInput,
@@ -240,6 +239,100 @@ var Presence = function Presence(props, __s, __extra) {
 	}
 };
 //#endregion
+//#region src/drag.ts
+function validateDrag(props) {
+	if (props.drag !== void 0 && ![
+		true,
+		false,
+		"x",
+		"y"
+	].includes(props.drag)) throw new Error("motion: drag must be boolean, x, or y");
+	const bounds = props.dragConstraints ?? {};
+	for (const [key, value] of Object.entries(bounds)) if (![
+		"left",
+		"right",
+		"top",
+		"bottom"
+	].includes(key) || !Number.isFinite(value)) throw new Error("motion: dragConstraints requires finite numeric edges; refs are deferred");
+	if ((bounds.left ?? -Infinity) > (bounds.right ?? Infinity) || (bounds.top ?? -Infinity) > (bounds.bottom ?? Infinity)) throw new Error("motion: dragConstraints edges are reversed");
+	if (typeof props.dragElastic !== "boolean" && props.dragElastic !== void 0 && (!Number.isFinite(props.dragElastic) || props.dragElastic < 0 || props.dragElastic > 1)) throw new Error("motion: dragElastic must be boolean or a number from 0 to 1");
+	if (props.drag) for (const axis of ["x", "y"]) {
+		if (props.drag !== true && props.drag !== axis) continue;
+		for (const target of [
+			props.animate,
+			props.whileTap,
+			props.whileFocus
+		]) if (target && typeof target === "object" && !Array.isArray(target) && target[axis] !== void 0) throw new Error(`motion: drag and animation both own ${axis}`);
+	}
+}
+var clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
+/** Gesture writes and release springs bypass host delegation. */
+function attachDrag(adapter, controller, props, valueFor, reduced, callbacks) {
+	if (!props.drag) return () => {};
+	if (!adapter.pan) throw new Error("motion: this host does not support drag");
+	const axes = ["x", "y"].filter((axis) => props.drag === true || props.drag === axis);
+	const values = new Map(axes.map((axis) => [axis, valueFor(axis)]));
+	const value = (axis) => values.get(axis);
+	const bounds = props.dragConstraints ?? {};
+	const elastic = typeof props.dragElastic === "number" ? props.dragElastic : props.dragElastic === false ? 0 : .35;
+	const origin = {
+		x: 0,
+		y: 0
+	};
+	let active = false;
+	const limits = (axis) => axis === "x" ? [bounds.left ?? -Infinity, bounds.right ?? Infinity] : [bounds.top ?? -Infinity, bounds.bottom ?? Infinity];
+	const move = (info) => {
+		for (const axis of axes) {
+			const [min, max] = limits(axis);
+			const next = origin[axis] + info.offset[axis];
+			const bounded = clamp$1(next, min, max);
+			value(axis).jump(bounded + (next - bounded) * elastic);
+		}
+	};
+	const off = adapter.pan(props.drag, {
+		start(event, info) {
+			controller.stop();
+			active = true;
+			for (const axis of axes) {
+				const channel = value(axis);
+				channel.stop();
+				origin[axis] = channel.get();
+			}
+			callbacks().onDragStart?.(event, info);
+		},
+		move(event, info) {
+			if (!active) return;
+			move(info);
+			callbacks().onDrag?.(event, info);
+		},
+		end(event, info) {
+			if (!active) return;
+			active = false;
+			move(info);
+			for (const axis of axes) {
+				const channel = value(axis);
+				const velocity = info.cancelled || props.dragMomentum === false ? 0 : info.velocity[axis];
+				const [min, max] = limits(axis);
+				const target = clamp$1(channel.get() + velocity * .2, min, max);
+				if (elastic === 0) channel.jump(clamp$1(channel.get(), min, max));
+				if (reduced()) channel.jump(target);
+				else if (target !== channel.get() || velocity !== 0) channel.animate(target, {
+					type: "spring",
+					stiffness: 200,
+					damping: 30,
+					velocity
+				}, elastic === 0 ? (next) => clamp$1(next, min, max) : void 0);
+			}
+			callbacks().onDragEnd?.(event, info);
+		}
+	});
+	return () => {
+		active = false;
+		off();
+		for (const channel of values.values()) channel.stop();
+	};
+}
+//#endregion
 //#region src/clock.web.ts
 var clock = {
 	now: () => performance.now(),
@@ -247,30 +340,115 @@ var clock = {
 	cancel: (id) => cancelAnimationFrame(id)
 };
 //#endregion
-//#region src/host.web.ts
-function attachHost(node) {
-	const transform = node.style.transform;
-	const opacity = node.style.opacity;
-	const computed = getComputedStyle(node);
-	if (computed.transform && computed.transform !== "none") throw new Error("motion: put existing CSS transforms on an outer container");
-	return {
-		read: () => ({
-			opacity: Number(computed.opacity || 1),
+//#region src/pan.web.ts
+function attachPan(node, axis, callbacks) {
+	const touchAction = node.style.touchAction;
+	node.style.touchAction = axis === "x" ? "pan-y" : axis === "y" ? "pan-x" : "none";
+	let pointer;
+	let active = false;
+	let start = {
+		x: 0,
+		y: 0
+	};
+	let last = start;
+	let time = 0;
+	let velocity = {
+		x: 0,
+		y: 0
+	};
+	let velocityTime = 0;
+	const sample = (event, cancelled = false) => {
+		const point = cancelled ? last : {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const delta = {
+			x: point.x - last.x,
+			y: point.y - last.y
+		};
+		const elapsed = event.timeStamp - time;
+		if (elapsed > 0 && (delta.x || delta.y)) {
+			velocity = {
+				x: delta.x * 1e3 / elapsed,
+				y: delta.y * 1e3 / elapsed
+			};
+			velocityTime = event.timeStamp;
+		} else if (event.timeStamp - velocityTime > 100) velocity = {
 			x: 0,
-			y: 0,
-			scale: 1,
-			scaleX: 1,
-			scaleY: 1,
-			rotate: 0
-		}),
-		write(values) {
-			if (values.opacity !== void 0) node.style.opacity = String(Math.min(1, Math.max(0, values.opacity)));
-			if (Object.keys(values).some((key) => key !== "opacity")) node.style.transform = `translateX(${values.x ?? 0}px) translateY(${values.y ?? 0}px) scale(${values.scale ?? 1}) scaleX(${values.scaleX ?? 1}) scaleY(${values.scaleY ?? 1}) rotate(${values.rotate ?? 0}deg)`;
-		},
-		restore() {
-			node.style.transform = transform;
-			node.style.opacity = opacity;
+			y: 0
+		};
+		last = point;
+		time = event.timeStamp;
+		return {
+			point,
+			delta,
+			offset: {
+				x: point.x - start.x,
+				y: point.y - start.y
+			},
+			velocity,
+			cancelled
+		};
+	};
+	const down = (event) => {
+		if (pointer !== void 0 || event.button !== 0 || event.isPrimary === false) return;
+		pointer = event.pointerId;
+		start = last = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		time = velocityTime = event.timeStamp;
+		velocity = {
+			x: 0,
+			y: 0
+		};
+		try {
+			node.setPointerCapture?.(event.pointerId);
+		} catch (error) {
+			if (event.isTrusted || error.name !== "NotFoundError") throw error;
+		}
+	};
+	const move = (event) => {
+		if (event.pointerId !== pointer) return;
+		const info = sample(event);
+		if (!active) {
+			const primary = axis === "y" ? info.offset.y : info.offset.x;
+			const other = axis === "y" ? info.offset.x : info.offset.y;
+			if (axis !== true && Math.abs(other) > 8 && Math.abs(primary) <= 8) {
+				finish(event, true);
+				return;
+			}
+			if ((axis === true ? Math.hypot(info.offset.x, info.offset.y) : Math.abs(primary)) <= 8) return;
+			active = true;
+			callbacks.start(event, info);
+		}
+		callbacks.move(event, info);
+	};
+	const finish = (event, cancelled) => {
+		if (pointer === void 0 || event.pointerId !== pointer) return;
+		const id = pointer;
+		pointer = void 0;
+		if (active) {
+			active = false;
+			callbacks.end(event, sample(event, cancelled));
 		}
+		if (node.hasPointerCapture?.(id)) node.releasePointerCapture(id);
+	};
+	const up = (event) => finish(event, false);
+	const cancel = (event) => finish(event, true);
+	node.addEventListener("pointerdown", down);
+	node.addEventListener("pointermove", move);
+	node.addEventListener("pointerup", up);
+	node.addEventListener("pointercancel", cancel);
+	node.addEventListener("lostpointercapture", cancel);
+	return () => {
+		node.removeEventListener("pointerdown", down);
+		node.removeEventListener("pointermove", move);
+		node.removeEventListener("pointerup", up);
+		node.removeEventListener("pointercancel", cancel);
+		node.removeEventListener("lostpointercapture", cancel);
+		if (pointer !== void 0 && node.hasPointerCapture?.(pointer)) node.releasePointerCapture(pointer);
+		node.style.touchAction = touchAction;
 	};
 }
 //#endregion
@@ -1212,13 +1390,79 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "e
 }
 //#endregion
 //#region src/engine.ts
+var MOTION_KEYS = [
+	"opacity",
+	"x",
+	"y",
+	"scale",
+	"scaleX",
+	"scaleY",
+	"rotate"
+];
+/** Platform animators take one timing curve per run — cubic-bezier only. */
+var BEZIER_EASES = /* @__PURE__ */ new Set([
+	"linear",
+	"easeIn",
+	"easeOut",
+	"easeInOut"
+]);
+function isBezierEase(ease) {
+	return ease === void 0 || Array.isArray(ease) || BEZIER_EASES.has(ease);
+}
+var BEZIER_POINTS = {
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	easeIn: [
+		.42,
+		0,
+		1,
+		1
+	],
+	easeOut: [
+		0,
+		0,
+		.58,
+		1
+	],
+	easeInOut: [
+		.42,
+		0,
+		.58,
+		1
+	]
+};
+/** CSS cubic-bezier control points for a delegatable ease; tuples pass through. */
+function bezierPoints(ease) {
+	return Array.isArray(ease) ? ease : BEZIER_POINTS[ease ?? "easeInOut"];
+}
+function isOrchestrated(t) {
+	if (!t || typeof t !== "object") return false;
+	return "default" in t || MOTION_KEYS.some((key) => key in t);
+}
+function resolveTransition(t, key) {
+	return isOrchestrated(t) ? {
+		...t.default,
+		...t[key]
+	} : t;
+}
 function validateTransition(t) {
-	if (t.type === "spring" && (t.duration !== void 0 || t.ease !== void 0)) throw new Error("motion: physical springs do not accept duration or ease");
+	if (t.type === "spring" && t.ease !== void 0) throw new Error("motion: physical springs do not accept ease");
 	const allowed = [
+		"staggerChildren",
+		"delayChildren",
+		"when",
 		"type",
 		"duration",
 		"delay",
 		"ease",
+		"repeat",
+		"repeatType",
+		"repeatDelay",
+		"bounce",
 		"stiffness",
 		"damping",
 		"mass",
@@ -1227,10 +1471,15 @@ function validateTransition(t) {
 		"restDelta"
 	];
 	for (const key of Object.keys(t)) if (!allowed.includes(key)) throw new Error(`motion: unsupported transition ${key}`);
+	if (t.when !== void 0 && !["beforeChildren", "afterChildren"].includes(t.when)) throw new Error("motion: unsupported when");
 	if (t.type !== void 0 && t.type !== "tween" && t.type !== "spring") throw new Error("motion: unsupported transition type");
 	for (const key of [
+		"staggerChildren",
+		"delayChildren",
 		"duration",
 		"delay",
+		"repeatDelay",
+		"bounce",
 		"stiffness",
 		"damping",
 		"mass",
@@ -1241,6 +1490,12 @@ function validateTransition(t) {
 		const value = t[key];
 		if (value !== void 0 && (!Number.isFinite(value) || key !== "velocity" && value < 0)) throw new Error(`motion: invalid ${key}`);
 	}
+	if (t.repeat !== void 0 && (t.repeat < 0 || !Number.isInteger(t.repeat) && t.repeat !== Infinity)) throw new Error("motion: repeat must be a non-negative integer or Infinity");
+	if (t.repeatType !== void 0 && ![
+		"loop",
+		"reverse",
+		"mirror"
+	].includes(t.repeatType)) throw new Error("motion: unsupported repeatType");
 	for (const key of [
 		"mass",
 		"stiffness",
@@ -1255,10 +1510,31 @@ function validateTransition(t) {
 			"linear",
 			"easeIn",
 			"easeOut",
-			"easeInOut"
+			"easeInOut",
+			"circIn",
+			"circOut",
+			"circInOut",
+			"backIn",
+			"backOut",
+			"backInOut",
+			"anticipate"
 		].includes(t.ease)) throw new Error("motion: unsupported easing");
 	}
 }
+function validateTransitionInput(t) {
+	if (isOrchestrated(t)) {
+		const { staggerChildren, delayChildren, when, ...channels } = t;
+		validateTransition({
+			staggerChildren,
+			delayChildren,
+			when
+		});
+		for (const [key, value] of Object.entries(channels)) {
+			if (key !== "default" && !MOTION_KEYS.includes(key)) throw new Error(`motion: unsupported transition ${key}`);
+			if (value) validateTransition(value);
+		}
+	} else validateTransition(t);
+}
 function runAnimation(clock, from, to, transition, update, complete) {
 	validateTransition(transition);
 	let frame = 0;
@@ -1275,34 +1551,53 @@ function runAnimation(clock, from, to, transition, update, complete) {
 		if (result === "finished") complete?.();
 	};
 	const duration = transition.duration ?? .3;
-	const generator = transition.type === "spring" ? spring({
-		keyframes: [from, to],
+	const repeat = transition.repeat ?? 0;
+	const repeatType = transition.repeatType ?? "loop";
+	const repeatDelay = (transition.repeatDelay ?? 0) * 1e3;
+	const makeGenerator = (legFrom, legTo) => transition.type === "spring" ? spring({
+		keyframes: [legFrom, legTo],
 		stiffness: transition.stiffness ?? 100,
 		damping: transition.damping ?? 10,
 		mass: transition.mass ?? 1,
 		velocity: transition.velocity ?? 0,
 		restSpeed: transition.restSpeed,
-		restDelta: transition.restDelta
+		restDelta: transition.restDelta,
+		duration: transition.duration !== void 0 ? duration * 1e3 : void 0,
+		bounce: transition.bounce
 	}) : keyframes({
-		keyframes: [from, to],
+		keyframes: [legFrom, legTo],
 		duration: duration * 1e3,
 		ease: transition.ease ?? "easeInOut"
 	});
-	const start = clock.now() + (transition.delay ?? 0) * 1e3;
+	let leg = 0;
+	let generator = makeGenerator(from, to);
+	let legStart = clock.now() + (transition.delay ?? 0) * 1e3;
 	const tick = () => {
 		if (settled) return;
-		const elapsed = Math.max(0, clock.now() - start);
-		if (clock.now() >= start) {
-			const state = generator.next(elapsed);
-			update(state.done ? to : state.value);
-			if (state.done) {
-				settle("finished");
+		const now = clock.now();
+		if (now < legStart) {
+			frame = clock.request(tick);
+			return;
+		}
+		const elapsed = Math.max(0, now - legStart);
+		const state = generator.next(elapsed);
+		const legEnd = repeatType === "loop" || leg % 2 === 0 ? to : from;
+		update(state.done ? legEnd : state.value);
+		if (state.done) {
+			if (leg < repeat) {
+				leg++;
+				const [legFrom, legTo] = repeatType === "loop" || leg % 2 === 0 ? [from, to] : [to, from];
+				generator = makeGenerator(legFrom, legTo);
+				legStart = now + repeatDelay;
+				frame = clock.request(tick);
 				return;
 			}
+			settle("finished");
+			return;
 		}
 		if (!settled) frame = clock.request(tick);
 	};
-	if (transition.type !== "spring" && duration === 0 && !transition.delay) {
+	if (transition.type !== "spring" && duration === 0 && !transition.delay && repeat === 0) {
 		update(to);
 		settle("finished");
 	} else frame = clock.request(tick);
@@ -1312,6 +1607,230 @@ function runAnimation(clock, from, to, transition, update, complete) {
 	};
 }
 //#endregion
+//#region src/delegation.ts
+function delegationStats() {
+	const platform = globalThis;
+	return platform.__xplatMotionDelegations ??= {
+		started: 0,
+		finished: 0,
+		cancelled: 0,
+		fallback: 0
+	};
+}
+/** Count a delegated run and fold its settled result into the counters. */
+function trackDelegatedRun(run) {
+	delegationStats().started++;
+	const finished = run.finished.then((result) => {
+		if (result === "finished") delegationStats().finished++;
+		else delegationStats().cancelled++;
+		return result;
+	});
+	return {
+		...run,
+		finished
+	};
+}
+//#endregion
+//#region src/driver.web.ts
+var TRANSFORM_KEYS = [
+	"x",
+	"y",
+	"scale",
+	"scaleX",
+	"scaleY",
+	"rotate"
+];
+var transform = (values) => `translateX(${values.x ?? 0}px) translateY(${values.y ?? 0}px) scaleX(${values.scaleX ?? 1}) scaleY(${values.scaleY ?? 1}) rotate(${values.rotate ?? 0}deg)`;
+function decompose(v, origin) {
+	const [ox, oy] = origin.split(" ").map((part) => Number.parseFloat(part) || 0);
+	const [a, b, c, d, e, f] = v.length === 16 ? [
+		v[0],
+		v[1],
+		v[4],
+		v[5],
+		v[12],
+		v[13]
+	] : v;
+	const scaleX = Math.hypot(a, c);
+	const scaleY = Math.hypot(b, d);
+	let rotate = scaleX && scaleY ? Math.atan2(b / scaleY, a / scaleX) * 180 / Math.PI : 0;
+	if (!Number.isFinite(rotate)) rotate = 0;
+	let flippedY = scaleY;
+	if (a * d - b * c < 0) {
+		flippedY = -scaleY;
+		rotate = -rotate;
+	}
+	return {
+		x: e + (a - 1) * ox + c * oy,
+		y: f + b * ox + (d - 1) * oy,
+		scaleX,
+		scaleY: flippedY,
+		rotate
+	};
+}
+function readChannels(node, fallback) {
+	const computed = getComputedStyle(node);
+	const opacity = Number(computed.opacity);
+	const base = {
+		...fallback,
+		opacity: Number.isFinite(opacity) ? opacity : fallback.opacity ?? 1
+	};
+	const match = /matrix(?:3d)?\(([^)]*)\)/.exec(computed.transform);
+	if (!match) return computed.transform === "none" ? {
+		...base,
+		x: 0,
+		y: 0,
+		scaleX: 1,
+		scaleY: 1,
+		rotate: 0
+	} : base;
+	const values = match[1].split(",").map(Number.parseFloat);
+	return values.every(Number.isFinite) ? {
+		...base,
+		...decompose(values, computed.transformOrigin)
+	} : base;
+}
+function waapiRun(node, req, write) {
+	if (typeof node.animate !== "function") return null;
+	const { target, eff, transition: t } = req;
+	const animatesTransform = TRANSFORM_KEYS.some((key) => target[key] !== void 0);
+	if (!animatesTransform && target.opacity === void 0) return null;
+	let last = readChannels(node, {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		scaleX: 1,
+		scaleY: 1,
+		rotate: 0
+	});
+	const frames = [{}, {}];
+	if (animatesTransform) {
+		frames[0].transform = transform(last);
+		frames[1].transform = transform(eff);
+	}
+	if (target.opacity !== void 0) {
+		frames[0].opacity = last.opacity ?? 1;
+		frames[1].opacity = Math.min(1, Math.max(0, eff.opacity ?? 1));
+	}
+	const [x1, y1, x2, y2] = bezierPoints(t.ease);
+	let animation;
+	try {
+		animation = node.animate(frames, {
+			duration: (t.duration ?? .3) * 1e3,
+			delay: (t.delay ?? 0) * 1e3,
+			easing: `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`,
+			fill: "forwards"
+		});
+	} catch {
+		return null;
+	}
+	const sample = () => {
+		last = readChannels(node, last);
+		return { ...last };
+	};
+	let resolve;
+	const finished = new Promise((done) => {
+		resolve = done;
+	});
+	let settled = false;
+	const settle = (result) => {
+		if (!settled) {
+			settled = true;
+			resolve(result);
+		}
+	};
+	const complete = () => {
+		write(req.dest);
+		settle("finished");
+		animation.cancel();
+	};
+	const cancelled = () => settle("cancelled");
+	if (typeof animation.finished?.then === "function") animation.finished.then(complete, cancelled);
+	else {
+		animation.onfinish = complete;
+		animation.oncancel = cancelled;
+	}
+	return {
+		finished,
+		sample,
+		cancel() {
+			const current = sample();
+			animation.cancel();
+			write(current);
+			settle("cancelled");
+		}
+	};
+}
+function delegatedRun(node, req, write) {
+	if (!isBezierEase(req.transition.ease)) {
+		delegationStats().fallback++;
+		return null;
+	}
+	const run = waapiRun(node, req, write);
+	if (!run) {
+		delegationStats().fallback++;
+		return null;
+	}
+	return trackDelegatedRun(run);
+}
+//#endregion
+//#region src/host.web.ts
+function attachHost(node) {
+	const transform = node.style.transform;
+	const opacity = node.style.opacity;
+	const computed = getComputedStyle(node);
+	if (computed.transform && computed.transform !== "none") throw new Error("motion: put existing CSS transforms on an outer container");
+	const write = (values) => {
+		if (values.opacity !== void 0) node.style.opacity = String(Math.min(1, Math.max(0, values.opacity)));
+		if (Object.keys(values).some((key) => key !== "opacity")) node.style.transform = `translateX(${values.x ?? 0}px) translateY(${values.y ?? 0}px) scale(${values.scale ?? 1}) scaleX(${values.scaleX ?? 1}) scaleY(${values.scaleY ?? 1}) rotate(${values.rotate ?? 0}deg)`;
+	};
+	return {
+		pan: (axis, callbacks) => attachPan(node, axis, callbacks),
+		read: () => ({
+			opacity: Number(computed.opacity || 1),
+			x: 0,
+			y: 0,
+			scale: 1,
+			scaleX: 1,
+			scaleY: 1,
+			rotate: 0
+		}),
+		write,
+		delegate: (req) => delegatedRun(node, req, write),
+		restore() {
+			node.style.transform = transform;
+			node.style.opacity = opacity;
+		},
+		gesture(kind, callbacks) {
+			if (kind === "press") {
+				const down = (event) => {
+					try {
+						event.target?.setPointerCapture?.(event.pointerId);
+					} catch (error) {
+						if (event.isTrusted || error.name !== "NotFoundError") throw error;
+					}
+					callbacks.start();
+				};
+				const end = () => callbacks.end();
+				node.addEventListener("pointerdown", down);
+				node.addEventListener("pointerup", end);
+				node.addEventListener("pointercancel", end);
+				return () => {
+					node.removeEventListener("pointerdown", down);
+					node.removeEventListener("pointerup", end);
+					node.removeEventListener("pointercancel", end);
+				};
+			}
+			node.addEventListener("focus", callbacks.start);
+			node.addEventListener("blur", callbacks.end);
+			return () => {
+				node.removeEventListener("focus", callbacks.start);
+				node.removeEventListener("blur", callbacks.end);
+			};
+		}
+	};
+}
+//#endregion
 //#region src/value.ts
 /** Numeric value with direct subscriptions; it does not subscribe Octane renders. */
 var MotionValue = class {
@@ -1376,6 +1895,13 @@ var MotionValue = class {
 		for (const callback of [...this.listeners.get(event) ?? []]) callback(value);
 	}
 	write(value) {
+		this.track(value);
+		if (!this.disposed && value !== this.previous) this.emit("change", value);
+	}
+	/** Update position bookkeeping without emitting — platform-delegated runs
+	*  track presentation state so interruption reads fresh value/velocity. */
+	track(value) {
+		this.assert(value);
 		if (this.disposed) return;
 		const now = this.clock.now();
 		const elapsed = now - this.updated;
@@ -1383,10 +1909,9 @@ var MotionValue = class {
 		this.previous = this.current;
 		this.current = value;
 		this.updated = now;
-		if (value !== this.previous) this.emit("change", value);
 	}
 	/** Animate to a destination. New playback replaces old playback. */
-	animate(target, transition = {}) {
+	animate(target, transition = {}, clampSample) {
 		this.assert(target);
 		validateTransition(transition);
 		if (this.disposed) return {
@@ -1400,7 +1925,7 @@ var MotionValue = class {
 		const controls = runAnimation(this.clock, this.current, target, {
 			...transition,
 			velocity
-		}, (value) => this.write(value));
+		}, (value) => this.write(clampSample ? clampSample(value) : value));
 		this.controls = controls;
 		controls.finished.then((result) => {
 			if (generation !== this.generation || this.disposed) return;
@@ -1461,7 +1986,10 @@ function validateTarget(target) {
 var Controller = class {
 	clock;
 	values = /* @__PURE__ */ new Map();
-	write;
+	/** Per-write snapshot callback (rAF-rate during delegated and JS runs). */
+	onUpdate;
+	adapter;
+	delegated;
 	generation = 0;
 	constructor(clock) {
 		this.clock = clock;
@@ -1475,15 +2003,24 @@ var Controller = class {
 		}
 		return value;
 	}
-	attach(write) {
-		this.write = write;
+	attach(adapter) {
+		this.adapter = adapter;
 		this.flush();
 	}
+	cancelDelegated() {
+		if (!this.delegated) return;
+		this.clock.cancel(this.delegated.frame);
+		this.delegated.trackSample();
+		this.delegated.run.cancel();
+		this.delegated = void 0;
+	}
 	snapshot() {
 		return Object.fromEntries([...this.values].map(([key, value]) => [key, value.get()]));
 	}
 	flush() {
-		this.write?.(Object.fromEntries([...this.values].map(([key, value]) => [key, value.get()])));
+		const snapshot = Object.fromEntries([...this.values].map(([key, value]) => [key, value.get()]));
+		this.adapter?.write(snapshot);
+		this.onUpdate?.(snapshot);
 	}
 	set(key, next) {
 		this.value(key).jump(next);
@@ -1495,9 +2032,65 @@ var Controller = class {
 	async animate(target, transition, reduced) {
 		validateTarget(target);
 		const generation = ++this.generation;
+		this.cancelDelegated();
 		for (const value of this.values.values()) value.stop("replaced");
+		if (!reduced && !isOrchestrated(transition) && transition.type !== "spring" && (transition.duration ?? .3) > 0 && (transition.repeat ?? 0) === 0 && isBezierEase(transition.ease) && this.adapter?.delegate) {
+			const dest = {
+				...this.snapshot(),
+				...target
+			};
+			const run = this.adapter.delegate({
+				target,
+				dest,
+				eff: {
+					opacity: dest.opacity,
+					x: dest.x,
+					y: dest.y,
+					scaleX: (dest.scale ?? 1) * (dest.scaleX ?? 1),
+					scaleY: (dest.scale ?? 1) * (dest.scaleY ?? 1),
+					rotate: dest.rotate
+				},
+				transition
+			});
+			if (run) {
+				const trackSample = () => {
+					const eff = run.sample();
+					for (const key of keys) {
+						if (target[key] === void 0) continue;
+						let next;
+						if (key === "scale") next = (eff.scaleX ?? 1) / (dest.scaleX || 1);
+						else if (key === "scaleX") next = (eff.scaleX ?? 1) / (dest.scale || 1);
+						else if (key === "scaleY") next = (eff.scaleY ?? 1) / (dest.scale || 1);
+						else next = eff[key];
+						if (next !== void 0 && Number.isFinite(next)) this.value(key).track(next);
+					}
+					this.onUpdate?.(this.snapshot());
+				};
+				const entry = {
+					run,
+					frame: 0,
+					trackSample
+				};
+				const tick = () => {
+					if (this.delegated !== entry) return;
+					trackSample();
+					entry.frame = this.clock.request(tick);
+				};
+				entry.frame = this.clock.request(tick);
+				this.delegated = entry;
+				const result = await run.finished;
+				if (this.delegated === entry) {
+					this.clock.cancel(entry.frame);
+					this.delegated = void 0;
+				}
+				if (generation !== this.generation) return "replaced";
+				if (result !== "finished") return "cancelled";
+				for (const key of keys) if (dest[key] !== void 0) this.value(key).jump(dest[key]);
+				return "finished";
+			}
+		}
 		const jobs = Object.entries(target).map(([key, to]) => {
-			return this.value(key).animate(to, reduced && key !== "opacity" ? { duration: 0 } : transition).finished;
+			return this.value(key).animate(to, reduced && key !== "opacity" ? { duration: 0 } : resolveTransition(transition, key)).finished;
 		});
 		const results = await Promise.all(jobs);
 		if (generation !== this.generation) return "replaced";
@@ -1505,19 +2098,136 @@ var Controller = class {
 	}
 	stop() {
 		++this.generation;
+		this.cancelDelegated();
 		for (const value of this.values.values()) value.stop();
 	}
 	destroy() {
 		this.stop();
 		for (const value of this.values.values()) value.destroy();
 		this.values.clear();
-		this.write = void 0;
+		this.adapter = void 0;
+	}
+};
+//#endregion
+//#region src/variants.ts
+function isLabels(value) {
+	return typeof value === "string" || Array.isArray(value) && value.every((label) => typeof label === "string");
+}
+function resolveVariant(definition, variants, custom) {
+	const target = {};
+	let transition;
+	if (definition === void 0 || definition === false) return {
+		target,
+		transition
+	};
+	const entries = isLabels(definition) ? (typeof definition === "string" ? [definition] : definition).map((label) => Object.hasOwn(variants ?? {}, label) ? variants[label] : void 0) : [definition];
+	for (const entry of entries) {
+		const resolved = typeof entry === "function" ? entry(custom) : entry;
+		if (!resolved) continue;
+		const { transition: override, ...values } = resolved;
+		validateTarget(values);
+		Object.assign(target, values);
+		if (override !== void 0) {
+			validateTransitionInput(override);
+			transition = override;
+		}
+	}
+	return {
+		target,
+		transition
+	};
+}
+/** Keep tree timing out of Controller and add inherited delay to every channel. */
+function playbackTransition(input, delay = 0) {
+	if (isOrchestrated(input)) {
+		const { staggerChildren: _staggerChildren, delayChildren: _delayChildren, when: _when, ...timing } = input;
+		const result = { default: {
+			...timing.default,
+			delay: (timing.default?.delay ?? 0) + delay
+		} };
+		for (const [key, value] of Object.entries(timing)) if (key !== "default" && value) result[key] = {
+			...value,
+			delay: (value.delay ?? timing.default?.delay ?? 0) + delay
+		};
+		return result;
+	}
+	const { staggerChildren: _staggerChildren, delayChildren: _delayChildren, when: _when, ...timing } = input;
+	return {
+		...timing,
+		delay: (timing.delay ?? 0) + delay
+	};
+}
+/** Root-local tree of inherited runs. Generations prevent queued work after replacement/disposal. */
+var VariantNode = class {
+	children = /* @__PURE__ */ new Set();
+	generation = 0;
+	active;
+	initial;
+	animate;
+	resolve;
+	play;
+	stopOwn;
+	register(child) {
+		this.children.add(child);
+		const active = this.active;
+		if (active && isLabels(active.definition)) active.finished.then((result) => {
+			if (result !== "finished" || active.generation !== this.generation || !this.children.has(child)) return;
+			const { transition } = this.resolve(active.definition);
+			child.run(active.definition, (transition.delayChildren ?? 0) + [...this.children].indexOf(child) * (transition.staggerChildren ?? 0));
+		});
+		return () => {
+			this.children.delete(child);
+			child.stop();
+		};
+	}
+	/** Invalidate queued phases without stopping independently registered Presence exits. */
+	cancelPending() {
+		this.generation++;
+		for (const child of this.children) child.cancelPending();
+	}
+	stop() {
+		this.generation++;
+		this.stopOwn?.();
+		for (const child of this.children) child.stop();
+	}
+	run(definition, delay = 0) {
+		this.animate = isLabels(definition) ? definition : void 0;
+		this.stop();
+		const generation = this.generation;
+		const finished = this.runTree(definition, delay, generation);
+		this.active = {
+			definition,
+			finished,
+			generation
+		};
+		return finished;
+	}
+	async runTree(definition, delay, generation) {
+		const { target, transition } = this.resolve(definition);
+		const participants = [...this.children];
+		const own = () => this.play(definition, target, playbackTransition(transition, transition.when === "afterChildren" && participants.length && isLabels(definition) ? 0 : delay));
+		const children = () => Promise.all(isLabels(definition) ? participants.filter((child) => this.children.has(child)).map((child, index) => child.run(definition, (transition.when === "beforeChildren" ? 0 : delay) + (transition.delayChildren ?? 0) + index * (transition.staggerChildren ?? 0))) : []);
+		let results;
+		if (transition.when === "beforeChildren") {
+			const result = await own();
+			if (generation !== this.generation || result !== "finished") return "cancelled";
+			results = [result, ...await children()];
+		} else if (transition.when === "afterChildren") {
+			results = await children();
+			if (generation !== this.generation || results.some((result) => result !== "finished")) return "cancelled";
+			results.push(await own());
+		} else {
+			const parent = own();
+			const descendants = children();
+			results = [await parent, ...await descendants];
+		}
+		return generation === this.generation && results.every((result) => result === "finished") ? "finished" : "cancelled";
 	}
 };
 //#endregion
 //#region src/components.tsrx
 var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _hs$$1 = /* @__PURE__ */ hookSlots(16);
+var _hs$$1 = /* @__PURE__ */ hookSlots(24);
 var _h$0$1 = /* @__PURE__ */ Symbol(_hs$$1);
 var _h$1$1 = /* @__PURE__ */ Symbol(_hs$$1 + 1);
 var _h$2$1 = /* @__PURE__ */ Symbol(_hs$$1 + 2);
@@ -1526,51 +2236,92 @@ var _h$4$1 = /* @__PURE__ */ Symbol(_hs$$1 + 4);
 var _h$5$1 = /* @__PURE__ */ Symbol(_hs$$1 + 5);
 var _h$6$1 = /* @__PURE__ */ Symbol(_hs$$1 + 6);
 var _h$7$1 = /* @__PURE__ */ Symbol(_hs$$1 + 7);
-var _h$8 = /* @__PURE__ */ Symbol(_hs$$1 + 8);
-var _h$9 = /* @__PURE__ */ Symbol(_hs$$1 + 9);
-var _h$10 = /* @__PURE__ */ Symbol(_hs$$1 + 10);
-var _h$11 = /* @__PURE__ */ Symbol(_hs$$1 + 11);
+var _h$8$1 = /* @__PURE__ */ Symbol(_hs$$1 + 8);
+var _h$9$1 = /* @__PURE__ */ Symbol(_hs$$1 + 9);
+var _h$10$1 = /* @__PURE__ */ Symbol(_hs$$1 + 10);
+var _h$11$1 = /* @__PURE__ */ Symbol(_hs$$1 + 11);
 var _h$12 = /* @__PURE__ */ Symbol(_hs$$1 + 12);
 var _h$13 = /* @__PURE__ */ Symbol(_hs$$1 + 13);
 var _h$14 = /* @__PURE__ */ Symbol(_hs$$1 + 14);
 var _h$15 = /* @__PURE__ */ Symbol(_hs$$1 + 15);
+var _h$16 = /* @__PURE__ */ Symbol(_hs$$1 + 16);
+var _h$17 = /* @__PURE__ */ Symbol(_hs$$1 + 17);
+var _h$18 = /* @__PURE__ */ Symbol(_hs$$1 + 18);
+var _h$19 = /* @__PURE__ */ Symbol(_hs$$1 + 19);
+var _h$20 = /* @__PURE__ */ Symbol(_hs$$1 + 20);
 var __childrenBody = {};
 var __childrenBody$ = {};
+var _h$21 = /* @__PURE__ */ Symbol(_hs$$1 + 21);
 var __childrenBody$2 = {};
+var __childrenBody$3 = {};
+var _h$22 = /* @__PURE__ */ Symbol(_hs$$1 + 22);
+var __childrenBody$4 = {};
+var __childrenBody$5 = {};
+var _h$23 = /* @__PURE__ */ Symbol(_hs$$1 + 23);
+var __childrenBody$6 = {};
+var __childrenBody$7 = {};
+var VariantContext = /* @__PURE__ */ __createCompiledContext(null);
+var controllers = /* @__PURE__ */ new WeakMap();
+var GESTURE_PROPS = {
+	press: {
+		target: "whileTap",
+		transition: "whileTapTransition"
+	},
+	focus: {
+		target: "whileFocus",
+		transition: "whileFocusTransition"
+	}
+};
 function useMotion(props) {
 	for (const name of [
-		"drag",
 		"layout",
 		"layoutId",
-		"variants",
-		"whileTap",
+		"inherit",
 		"whileHover",
-		"whileFocus",
-		"whileInView"
+		"whileInView",
+		"whileDrag"
 	]) if (name in props) throw new Error(`motion: ${name} is outside the supported subset`);
+	validateDrag(props);
+	const parentVariant = useContext(VariantContext);
+	const inherits = props.animate === void 0 && parentVariant !== null;
+	const initialDefinition = props.initial ?? parentVariant?.initial;
+	const animateDefinition = props.animate ?? parentVariant?.animate;
+	const resolve = (definition, source = props) => {
+		const resolved = resolveVariant(definition, source.variants, source.custom);
+		for (const key of keys) if (resolved.target[key] !== void 0 && source.style?.[key] instanceof MotionValue) throw new Error(`motion: ${key} has both an animate target and a MotionValue writer`);
+		return resolved;
+	};
+	const resolvedAnimate = resolve(animateDefinition);
+	const resolvedInitial = resolve(initialDefinition);
+	const resolvedExit = resolve(props.exit);
 	const presence = useContext(PresenceContext);
 	if (props.exit && !presence) throw new Error("motion: exit requires a mounted Presence boundary");
 	const config = useContext(ConfigContext);
 	const systemReduced = withSlot(_h$0$1, useReducedMotion);
 	const reduced = config.reducedMotion === "always" || config.reducedMotion === "user" && systemReduced;
 	const transition = props.transition ?? config.transition ?? {};
-	validateTransition(transition);
-	validateTarget(props.animate);
-	validateTarget(props.exit);
-	if (props.initial !== false) validateTarget(props.initial);
+	validateTransitionInput(transition);
+	resolve(props.whileTap);
+	resolve(props.whileFocus);
+	if (props.whileTapTransition) validateTransitionInput(props.whileTapTransition);
+	if (props.whileFocusTransition) validateTransitionInput(props.whileFocusTransition);
 	const latest = useRef(props, _h$1$1);
 	latest.current = props;
 	const state = useRef(null, _h$2$1);
 	if (!state.current) state.current = {
 		controller: new Controller(clock),
-		initialized: false
+		initialized: false,
+		preGesture: {
+			press: void 0,
+			focus: void 0
+		}
 	};
 	const current = state.current;
 	const style = {};
 	const bindings = [];
 	for (const [key, value] of Object.entries(props.style ?? {})) if (keys.includes(key)) {
 		if (!(value instanceof MotionValue) && (typeof value !== "number" || !Number.isFinite(value))) throw new Error(`motion: invalid style ${key}`);
-		if (value instanceof MotionValue && (props.animate?.[key] !== void 0 || props.exit?.[key] !== void 0 || props.initial && props.initial[key] !== void 0)) throw new Error(`motion: ${key} has both an animate target and a MotionValue writer`);
+		if (value instanceof MotionValue && (resolvedAnimate.target[key] !== void 0 || resolvedExit.target[key] !== void 0 || resolvedInitial.target[key] !== void 0)) throw new Error(`motion: ${key} has both an animate target and a MotionValue writer`);
 		bindings.push([key, value]);
 	} else {
 		if (value instanceof MotionValue || [
@@ -1586,11 +2337,36 @@ function useMotion(props) {
 	const boundKeys = useRef([], _h$4$1);
 	const firstBinding = useRef(true, _h$5$1);
 	const firstAnimation = useRef(true, _h$6$1);
+	const inheritedRun = useRef(null, _h$7$1);
 	if (previous.current.length !== bindings.length || previous.current.some(([key, value], i) => key !== bindings[i][0] || value !== bindings[i][1])) previous.current = bindings;
-	const bind = useRef(() => {}, _h$7$1);
-	bind.current = (host) => {
+	current.controller.onUpdate = (snapshot) => latest.current.onUpdate?.(snapshot);
+	const gesture = (kind, phase) => {
+		const shape = GESTURE_PROPS[kind];
+		const definition = latest.current[shape.target];
+		if (!definition) return;
+		const { target, transition: override } = resolve(definition, latest.current);
+		const gestureTransition = playbackTransition(override ?? latest.current[shape.transition] ?? playback.current.transition);
+		if (phase === "start") {
+			const snapshot = current.controller.snapshot();
+			const rest = {};
+			for (const key of Object.keys(target)) rest[key] = snapshot[key];
+			current.preGesture[kind] = rest;
+			current.controller.animate(target, gestureTransition, playback.current.reduced);
+		} else {
+			const snap = current.preGesture[kind] ?? {};
+			current.preGesture[kind] = void 0;
+			const rest = {};
+			for (const key of Object.keys(target)) rest[key] = resolve(latest.current.animate ?? parentVariant?.animate, latest.current).target[key] ?? snap[key] ?? defaults[key];
+			current.controller.animate(rest, gestureTransition, playback.current.reduced);
+		}
+	};
+	const ref = useRef(() => {}, _h$8$1);
+	ref.current = (host) => {
 		if (!host) return;
 		if (current.host !== host) {
+			current.gestureOff?.();
+			current.dragOff?.();
+			current.gestureOff = void 0;
 			current.adapter?.restore();
 			current.host = host;
 			current.adapter = attachHost(host);
@@ -1598,49 +2374,83 @@ function useMotion(props) {
 				const baseline = current.adapter.read();
 				for (const [key, value] of previous.current) baseline[key] = value instanceof MotionValue ? value.get() : value;
 				current.controller.seed(baseline);
-				current.controller.seed(props.initial === false ? props.animate ?? {} : props.initial ?? {});
+				current.controller.seed(initialDefinition === false ? resolvedAnimate.target : resolvedInitial.target);
 				current.initialized = true;
 			}
-			current.controller.attach(current.adapter.write);
+			current.controller.attach(current.adapter);
+			controllers.set(host, current.controller);
+			configureDrag();
+			if (current.adapter.gesture) {
+				const offs = ["press", "focus"].map((kind) => current.adapter.gesture(kind, {
+					start: () => gesture(kind, "start"),
+					end: () => gesture(kind, "end")
+				})).filter((off) => typeof off === "function");
+				current.gestureOff = () => offs.forEach((off) => off());
+			}
 		}
 		current.controller.flush();
-		latest.current.bind?.(host);
 	};
 	const playback = useRef({
 		transition,
 		reduced
-	}, _h$8);
+	}, _h$9$1);
 	playback.current = {
 		transition,
 		reduced
 	};
-	const returning = useRef(null, _h$9);
-	const member = useRef(null, _h$10);
+	const nodeRef = useRef(null, _h$10$1);
+	if (!nodeRef.current) nodeRef.current = new VariantNode();
+	const node = nodeRef.current;
+	node.initial = initialDefinition === false || isLabels(initialDefinition) ? initialDefinition : void 0;
+	node.animate = isLabels(animateDefinition) ? animateDefinition : void 0;
+	node.resolve = (definition) => {
+		const resolved = resolve(definition, latest.current);
+		return {
+			target: resolved.target,
+			transition: resolved.transition ?? playback.current.transition
+		};
+	};
+	node.stopOwn = () => current.controller.stop();
+	node.play = async (definition, target, timing) => {
+		latest.current.onAnimationStart?.(definition);
+		const result = await current.controller.animate(target, timing, playback.current.reduced);
+		if (result === "finished" && current.host) latest.current.onAnimationComplete?.();
+		return result;
+	};
+	useLayoutEffect(() => inherits ? parentVariant.register(node) : void 0, [inherits, parentVariant], _h$11$1);
+	const returning = useRef(null, _h$12);
+	const member = useRef(null, _h$13);
 	if (!member.current) member.current = {
 		exit() {
+			node.cancelPending();
 			const snapshot = current.controller.snapshot();
 			returning.current ??= {};
-			for (const key of Object.keys(latest.current.exit ?? {})) if (!(key in returning.current)) returning.current[key] = snapshot[key];
-			return current.controller.animate(latest.current.exit ?? {}, playback.current.transition, playback.current.reduced);
+			const resolved = resolve(latest.current.exit, latest.current);
+			for (const key of Object.keys(resolved.target)) if (!(key in returning.current)) returning.current[key] = snapshot[key];
+			return current.controller.animate(resolved.target, playbackTransition(resolved.transition ?? playback.current.transition), playback.current.reduced);
 		},
 		enter() {
+			const resolved = resolve(latest.current.animate ?? parentVariant?.animate, latest.current);
 			const target = {
 				...returning.current,
-				...latest.current.animate
+				...resolved.target
 			};
 			returning.current = null;
-			current.controller.animate(target, playback.current.transition, playback.current.reduced).then((result) => {
+			current.controller.animate(target, playbackTransition(resolved.transition ?? playback.current.transition), playback.current.reduced).then((result) => {
 				if (result === "finished" && current.host && presence?.present) latest.current.onAnimationComplete?.();
 			});
 		}
 	};
-	useLayoutEffect(() => presence?.register(member.current), [presence], _h$11);
-	const stableBind = useRef((host) => bind.current(host), _h$12).current;
+	useLayoutEffect(() => presence?.register(member.current), [presence], _h$14);
+	const hostRef = useRef((host) => ref.current(host), _h$15).current;
 	useLayoutEffect(() => () => {
+		node.stop();
+		current.dragOff?.();
+		current.gestureOff?.();
 		current.controller.destroy();
 		current.host = void 0;
 		current.adapter = void 0;
-	}, [], _h$13);
+	}, [], _h$16);
 	useLayoutEffect(() => {
 		const off = [];
 		for (const key of boundKeys.current) if (!previous.current.some(([next]) => key === next)) current.controller.set(key, defaults[key]);
@@ -1651,107 +2461,214 @@ function useMotion(props) {
 		}
 		firstBinding.current = false;
 		return () => off.forEach((unsubscribe) => unsubscribe());
-	}, [previous.current], _h$14);
+	}, [previous.current], _h$17);
+	const configureDrag = () => {
+		current.dragOff?.();
+		current.dragOff = void 0;
+		if (!current.adapter) return;
+		current.dragOff = attachDrag(current.adapter, current.controller, latest.current, (axis) => {
+			const binding = previous.current.find(([key]) => key === axis)?.[1];
+			return binding instanceof MotionValue ? binding : current.controller.value(axis);
+		}, () => playback.current.reduced, () => latest.current);
+	};
 	useLayoutEffect(() => {
-		let active = true;
-		const skip = firstAnimation.current && props.initial === false;
+		configureDrag();
+	}, [
+		props.drag,
+		JSON.stringify(props.dragConstraints),
+		props.dragElastic,
+		props.dragMomentum,
+		previous.current
+	], _h$18);
+	useLayoutEffect(() => {
+		const skip = firstAnimation.current && initialDefinition === false;
 		firstAnimation.current = false;
 		if (presence && !presence.present) presence.restart(member.current);
-		else if (props.animate && !skip) current.controller.animate(props.animate, transition, reduced).then((result) => {
-			if (active && result === "finished") latest.current.onAnimationComplete?.();
-		});
+		else if (animateDefinition !== void 0 && !skip) {
+			if (!inherits) node.run(animateDefinition);
+			else {
+				const label = JSON.stringify(animateDefinition);
+				const resolved = JSON.stringify({
+					resolvedAnimate,
+					transition,
+					reduced
+				});
+				const previousRun = inheritedRun.current;
+				if (previousRun?.label === label && previousRun.resolved !== resolved) {
+					const parentTiming = parentVariant.resolve(animateDefinition).transition;
+					node.run(animateDefinition, (parentTiming.delayChildren ?? 0) + [...parentVariant.children].indexOf(node) * (parentTiming.staggerChildren ?? 0));
+				}
+				inheritedRun.current = {
+					label,
+					resolved
+				};
+			}
+		}
 		return () => {
-			active = false;
-			current.controller.stop();
+			if (!inherits) node.stop();
 		};
 	}, [
-		JSON.stringify(props.animate),
-		JSON.stringify(props.exit),
+		JSON.stringify(resolvedAnimate),
+		JSON.stringify(resolvedExit),
+		JSON.stringify(animateDefinition),
 		JSON.stringify(transition),
-		reduced
-	], _h$15);
-	const { initial, exit, animate, transition: ignoredTransition, onAnimationComplete, style: ignoredStyle, bind: ignoredBind, ...rest } = props;
+		reduced,
+		inherits
+	], _h$19);
+	const { drag, dragConstraints, dragElastic, dragMomentum, onDragStart, onDrag, onDragEnd, variants, custom, initial, exit, animate, transition: ignoredTransition, whileTap, whileTapTransition, whileFocus, whileFocusTransition, onAnimationStart, onAnimationComplete, onUpdate, style: ignoredStyle, ref: ignoredRef, ...rest } = props;
 	return {
-		...rest,
-		style,
-		bind: stableBind
+		hostProps: {
+			...rest,
+			style,
+			ref: [hostRef, props.ref]
+		},
+		node
 	};
 }
-var MotionView = function MotionView(props, __s, __extra) {
+var MotionLeaf = function MotionLeaf(props, __s, __extra) {
 	const __block = __s.block;
+	const Component = props.component;
+	const { hostProps, node } = withSlot(_h$20, useMotion, props);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	function __children$1(__props, __s, __extra) {
 		const __block = __s.block;
-		let _b = __s.slots[0];
-		if (_b === void 0) {
-			let _m0, _m1;
-			const _root = clone(_t$0);
-			_m0 = __block.parentNode;
-			_m1 = child(_root);
-			drainFrag(_root, __block.parentNode, __block.endMarker);
-			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		function __children$3(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1;
+				const _root = clone(_t$0);
+				_m0 = __block.parentNode;
+				_m1 = child(_root);
+				drainFrag(_root, __block.parentNode, __block.endMarker);
+				_b = bag4(__s, null, _m0, _m1, null, void 0);
+			}
+			{
+				const _v = props.children;
+				_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+				_b.d = _v;
+			}
 		}
-		{
-			const _v = props.children;
-			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
-			_b.d = _v;
+		componentSlot(__s, 0, __block.parentNode, Component, {
+			...hostProps,
+			"children": markChildrenBlock(__children$3, __childrenBody)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:2b39630a");
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, VariantContext, {
+		"value": node,
+		"children": markChildrenBlock(__children$1, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:3e3b1f06");
+};
+function createMotion(Component) {
+	return function MotionCreated(props, __s, __extra) {
+		return MotionLeaf({
+			...props,
+			component: Component
+		}, __s, __extra);
+	};
+}
+var MotionView = function MotionView(props, __s, __extra) {
+	const __block = __s.block;
+	const { hostProps, node } = withSlot(_h$21, useMotion, props);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$6(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$8(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1;
+				const _root = clone(_t$0);
+				_m0 = __block.parentNode;
+				_m1 = child(_root);
+				drainFrag(_root, __block.parentNode, __block.endMarker);
+				_b = bag4(__s, null, _m0, _m1, null, void 0);
+			}
+			{
+				const _v = props.children;
+				_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+				_b.d = _v;
+			}
 		}
+		componentSlot(__s, 0, __block.parentNode, View, {
+			...hostProps,
+			"children": markChildrenBlock(__children$8, __childrenBody$2)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:47ef6ed2");
 	}
-	componentSlot(__s, 0, __block.parentNode, View, {
-		...useMotion(props),
-		"children": markChildrenBlock(__children$1, __childrenBody)
-	}, __block.endMarker, void 0, void 0, true, void 0, "c:074db42c");
+	componentSlotVoid(__s, 0, __block.parentNode, VariantContext, {
+		"value": node,
+		"children": markChildrenBlock(__children$6, __childrenBody$3)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:556f022a");
 };
 var MotionRow = function MotionRow(props, __s, __extra) {
 	const __block = __s.block;
-	function __children$4(__props, __s, __extra) {
+	const { hostProps, node } = withSlot(_h$22, useMotion, props);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$11(__props, __s, __extra) {
 		const __block = __s.block;
-		let _b = __s.slots[0];
-		if (_b === void 0) {
-			let _m0, _m1;
-			const _root = clone(_t$0);
-			_m0 = __block.parentNode;
-			_m1 = child(_root);
-			drainFrag(_root, __block.parentNode, __block.endMarker);
-			_b = bag4(__s, null, _m0, _m1, null, void 0);
-		}
-		{
-			const _v = props.children;
-			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
-			_b.d = _v;
+		function __children$13(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1;
+				const _root = clone(_t$0);
+				_m0 = __block.parentNode;
+				_m1 = child(_root);
+				drainFrag(_root, __block.parentNode, __block.endMarker);
+				_b = bag4(__s, null, _m0, _m1, null, void 0);
+			}
+			{
+				const _v = props.children;
+				_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+				_b.d = _v;
+			}
 		}
+		componentSlot(__s, 0, __block.parentNode, HStack, {
+			...hostProps,
+			"children": markChildrenBlock(__children$13, __childrenBody$4)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:4ef5f0ee");
 	}
-	componentSlot(__s, 0, __block.parentNode, Row, {
-		...useMotion(props),
-		"children": markChildrenBlock(__children$4, __childrenBody$)
-	}, __block.endMarker, void 0, void 0, true, void 0, "c:bfd4d1a7");
+	componentSlotVoid(__s, 0, __block.parentNode, VariantContext, {
+		"value": node,
+		"children": markChildrenBlock(__children$11, __childrenBody$5)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:098721c2");
 };
 var MotionPressable = function MotionPressable(props, __s, __extra) {
 	const __block = __s.block;
-	function __children$7(__props, __s, __extra) {
+	const { hostProps, node } = withSlot(_h$23, useMotion, props);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$16(__props, __s, __extra) {
 		const __block = __s.block;
-		let _b = __s.slots[0];
-		if (_b === void 0) {
-			let _m0, _m1;
-			const _root = clone(_t$0);
-			_m0 = __block.parentNode;
-			_m1 = child(_root);
-			drainFrag(_root, __block.parentNode, __block.endMarker);
-			_b = bag4(__s, null, _m0, _m1, null, void 0);
-		}
-		{
-			const _v = props.children;
-			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
-			_b.d = _v;
+		function __children$18(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1;
+				const _root = clone(_t$0);
+				_m0 = __block.parentNode;
+				_m1 = child(_root);
+				drainFrag(_root, __block.parentNode, __block.endMarker);
+				_b = bag4(__s, null, _m0, _m1, null, void 0);
+			}
+			{
+				const _v = props.children;
+				_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+				_b.d = _v;
+			}
 		}
+		componentSlot(__s, 0, __block.parentNode, Pressable, {
+			...hostProps,
+			"children": markChildrenBlock(__children$18, __childrenBody$6)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:de6a02de");
 	}
-	componentSlot(__s, 0, __block.parentNode, Pressable, {
-		...useMotion(props),
-		"children": markChildrenBlock(__children$7, __childrenBody$2)
-	}, __block.endMarker, void 0, void 0, true, void 0, "c:55d0b7c5");
+	componentSlotVoid(__s, 0, __block.parentNode, VariantContext, {
+		"value": node,
+		"children": markChildrenBlock(__children$16, __childrenBody$7)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:b94b76f9");
 };
 //#endregion
 //#region src/hooks.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _hs$ = /* @__PURE__ */ hookSlots(12);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -1760,6 +2677,10 @@ var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
 var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
 var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
 function useMotionValue(initial) {
 	const ref = useRef(null, _h$0);
 	if (!ref.current) ref.current = new MotionValue(initial, clock);
@@ -1814,13 +2735,30 @@ function useSpring(source, options = {}) {
 	}, [source instanceof MotionValue ? source : null, JSON.stringify(options)], _h$7);
 	return value;
 }
+function useAnimate() {
+	const scope = useRef(null, _h$8);
+	const config = useContext(ConfigContext);
+	const systemReduced = withSlot(_h$9, useReducedMotion);
+	const reducedRef = useRef(config.reducedMotion === "always" || config.reducedMotion === "user" && systemReduced, _h$10);
+	reducedRef.current = config.reducedMotion === "always" || config.reducedMotion === "user" && systemReduced;
+	return [scope, useRef((target, transitionOrTo, transition) => {
+		if (target instanceof MotionValue) return target.animate(transitionOrTo, transition);
+		const controller = target && typeof target === "object" && controllers.has(target) ? controllers.get(target) : scope.current ? controllers.get(scope.current) : void 0;
+		if (!controller) return Promise.resolve("cancelled");
+		const destination = controllers.has(target) ? transitionOrTo ?? {} : target;
+		const spec = controllers.has(target) ? transition ?? {} : transitionOrTo ?? {};
+		return controller.animate(destination, spec, reducedRef.current);
+	}, _h$11).current];
+}
 //#endregion
 //#region src/index.web.ts
-/** Bounded motion hosts for shared xplat UI primitives. */
+/** Bounded motion hosts for shared xplat UI primitives; `motion.create` wraps
+*  any component that accepts `ref`/`style`/`children`. */
 var motion = {
 	View: MotionView,
 	Row: MotionRow,
-	Pressable: MotionPressable
+	Pressable: MotionPressable,
+	create: createMotion
 };
 //#endregion
-export { MotionConfig, Presence, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform };
+export { MotionConfig, Presence, motion, useAnimate, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform };