@octane-xplat/motion 0.9.0 → 0.10.0

package/dist/native/index.js

@@ -1,15 +1,23 @@
 import { createContext, defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalContext, universalIf, universalPlan, universalProps, universalValue, useContext, useEffect, useLayoutEffect, useRef, useState, withSlot } from "@nativescript-community/octane";
-import { Pressable, Row, View } from "@octane-xplat/ui";
-import { Application, Utils } from "@nativescript/core";
+import { HStack, Pressable, View } from "@octane-xplat/ui";
+import { Application, Device, Utils } from "@nativescript/core";
 import { cancelAnimationFrame, requestAnimationFrame } from "@nativescript/core/animation-frame";
+import { GestureHandlerStateEvent, GestureHandlerTouchEvent, GestureState, HandlerType, Manager } from "@nativescript-community/gesturehandler";
 //#region src/reduced-motion.ts
 function readReducedMotion() {
 	const platform = globalThis;
 	if (Application.ios) return Boolean(platform.UIAccessibilityIsReduceMotionEnabled?.());
+	if (!platform.android) return false;
+	if (Number(Device.sdkVersion) >= 26 && platform.android.animation?.ValueAnimator?.areAnimatorsEnabled?.() === false) return true;
 	const context = Utils.android.getApplicationContext();
 	return platform.android.provider.Settings.Global.getFloat(context.getContentResolver(), "animator_duration_scale", 1) === 0;
 }
 function observeReducedMotion(notify) {
+	if (Application.ios) {
+		const name = globalThis.UIAccessibilityReduceMotionStatusDidChangeNotification;
+		const observer = Application.ios.addNotificationObserver(name, notify);
+		return () => Application.ios.removeNotificationObserver(observer, name);
+	}
 	let previous = readReducedMotion();
 	const check = () => {
 		const next = readReducedMotion();
@@ -165,12 +173,12 @@ var Presence = defineUniversalComponent("nativescript", function Presence(props)
 	const [retained, setRetained] = useState(props.present, _h$0$2);
 	const latest = useRef(props, _h$1$2);
 	latest.current = props;
-	const ref = useRef(null, _h$2$2);
-	if (!ref.current) ref.current = new PresenceState(props.present, () => {
+	const stateRef = useRef(null, _h$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, _h$3$2);
 	const restoreInput = useRef(null, _h$4$2);
 	const syncInput = () => {
@@ -191,59 +199,208 @@ var Presence = defineUniversalComponent("nativescript", function Presence(props)
 		restoreInput.current = null;
 		host.current = null;
 	}, [], _h$6$2);
-	const { present, onExitComplete, children, bind, ...viewProps } = props;
+	const { present, onExitComplete, children, ref, ...viewProps } = props;
 	return universalValue(__octaneUniversalPlan2$1, [universalIf(props.present || retained, () => {
 		return universalValue(__octaneUniversalPlan1$1, [universalComponent("nativescript", View, universalProps([["spread", viewProps], [
 			"set",
-			"bind",
-			(node) => {
+			"ref",
+			[(node) => {
 				if (host.current !== node) {
 					restoreInput.current?.();
 					restoreInput.current = null;
 					host.current = node;
 				}
 				syncInput();
-				bind?.(node);
-			}
+			}, ref]
 		]], universalChildren("nativescript", () => {
 			return universalValue(__octaneUniversalPlan0$1, [((__octaneContextProps) => universalContext(PresenceContext, __octaneContextProps.value, children))({ "value": state })]);
 		})))]);
 	})]);
 }, { "module": "@nativescript-community/octane" });
 //#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.ts
+var platform$1 = globalThis;
 var clock = {
-	now: () => Date.now(),
+	now: Application.ios ? platform$1.CACurrentMediaTime ? () => platform$1.CACurrentMediaTime() * 1e3 : platform$1.__time ?? Date.now : platform$1.java?.lang?.System ? () => platform$1.java.lang.System.nanoTime() / 1e6 : Date.now,
 	request: requestAnimationFrame,
 	cancel: cancelAnimationFrame
 };
 //#endregion
-//#region src/host.ts
-function attachHost(node) {
-	const original = {
-		opacity: node.opacity ?? 1,
-		x: node.translateX ?? 0,
-		y: node.translateY ?? 0,
-		scaleX: node.scaleX ?? 1,
-		scaleY: node.scaleY ?? 1,
-		rotate: node.rotate ?? 0
+//#region src/pan.ts
+var tag = 7e8;
+function attachPan(node, axis, callbacks) {
+	const androidHost = Boolean(globalThis.android);
+	const slop = androidHost ? Utils.layout.toDevicePixels(8) : 8;
+	const handler = Manager.getInstance().createGestureHandler(HandlerType.PAN, tag++, {
+		shouldCancelWhenOutside: false,
+		...androidHost && axis !== true ? { minDist: 1e9 } : {},
+		...axis === true ? { minDist: slop } : axis === "x" ? {
+			activeOffsetXStart: -slop,
+			activeOffsetXEnd: slop,
+			failOffsetYStart: -slop,
+			failOffsetYEnd: slop
+		} : {
+			activeOffsetYStart: -slop,
+			activeOffsetYEnd: slop,
+			failOffsetXStart: -slop,
+			failOffsetXEnd: slop
+		}
+	});
+	let active = false;
+	let last = {
+		x: 0,
+		y: 0
 	};
-	if (original.x || original.y || original.rotate || original.scaleX !== 1 || original.scaleY !== 1) throw new Error("motion: put existing transforms on an outer container");
-	const write = (values) => {
-		if (values.opacity !== void 0) node.opacity = Math.min(1, Math.max(0, values.opacity));
-		if (values.x !== void 0) node.translateX = values.x;
-		if (values.y !== void 0) node.translateY = values.y;
-		if (values.rotate !== void 0) node.rotate = values.rotate;
-		if (values.scale !== void 0 || values.scaleX !== void 0) node.scaleX = (values.scale ?? 1) * (values.scaleX ?? 1);
-		if (values.scale !== void 0 || values.scaleY !== void 0) node.scaleY = (values.scale ?? 1) * (values.scaleY ?? 1);
+	const sample = (args, cancelled = false) => {
+		const extra = args.data.extraData ?? {};
+		const offset = {
+			x: extra.translationX ?? last.x,
+			y: extra.translationY ?? last.y
+		};
+		const delta = {
+			x: offset.x - last.x,
+			y: offset.y - last.y
+		};
+		last = offset;
+		return {
+			point: {
+				x: extra.absoluteX ?? extra.x ?? 0,
+				y: extra.absoluteY ?? extra.y ?? 0
+			},
+			delta,
+			offset,
+			velocity: {
+				x: extra.velocityX ?? 0,
+				y: extra.velocityY ?? 0
+			},
+			cancelled
+		};
 	};
-	return {
-		read: () => ({
-			...original,
-			scale: 1
-		}),
-		write,
-		restore: () => write(original)
+	const state = (args) => {
+		const next = args.data.state;
+		if (next === GestureState.ACTIVE && !active) {
+			last = {
+				x: 0,
+				y: 0
+			};
+			active = true;
+			const info = sample(args);
+			callbacks.start(args, info);
+			callbacks.move(args, info);
+		} else if (active && [
+			GestureState.END,
+			GestureState.CANCELLED,
+			GestureState.FAILED
+		].includes(next)) {
+			active = false;
+			callbacks.end(args, sample(args, next !== GestureState.END));
+		}
+	};
+	const touch = (args) => {
+		if (active && args.data.state === GestureState.ACTIVE) callbacks.move(args, sample(args));
+	};
+	handler.on(GestureHandlerStateEvent, state);
+	handler.on(GestureHandlerTouchEvent, touch);
+	handler.attachToView(node);
+	return () => {
+		active = false;
+		handler.off(GestureHandlerStateEvent, state);
+		handler.off(GestureHandlerTouchEvent, touch);
+		handler.detachFromView(node);
 	};
 }
 //#endregion
@@ -1185,13 +1342,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",
@@ -1200,10 +1423,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",
@@ -1214,6 +1442,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",
@@ -1228,10 +1462,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;
@@ -1248,34 +1503,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);
@@ -1285,6 +1559,214 @@ 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.ts
+var platform = globalThis;
+function iosRun(node, req, write) {
+	const view = node.ios ?? node.nativeViewProtected;
+	if (!view?.layer || !platform.UIViewPropertyAnimator) return null;
+	const { eff, target, transition: t } = req;
+	const [x1, y1, x2, y2] = bezierPoints(t.ease);
+	const params = platform.UICubicTimingParameters.alloc().initWithControlPoint1ControlPoint2(platform.CGPointMake(x1, y1), platform.CGPointMake(x2, y2));
+	const animator = platform.UIViewPropertyAnimator.alloc().initWithDurationTimingParameters(t.duration ?? .3, params);
+	const radians = (eff.rotate ?? 0) * Math.PI / 180;
+	const dest = platform.CGAffineTransformScale(platform.CGAffineTransformRotate(platform.CGAffineTransformMakeTranslation(eff.x ?? 0, eff.y ?? 0), radians), eff.scaleX ?? 1, eff.scaleY ?? 1);
+	const sample = () => {
+		const layer = view.layer.presentationLayer?.() ?? view.layer;
+		const tr = layer.transform;
+		return {
+			opacity: layer.opacity,
+			x: tr.m41,
+			y: tr.m42,
+			scaleX: Math.hypot(tr.m11, tr.m12),
+			scaleY: Math.hypot(tr.m21, tr.m22),
+			rotate: Math.atan2(tr.m12, tr.m11) * 180 / Math.PI
+		};
+	};
+	let resolve;
+	const finished = new Promise((done) => {
+		resolve = done;
+	});
+	let settled = false;
+	const settle = (result) => {
+		if (!settled) {
+			settled = true;
+			resolve(result);
+		}
+	};
+	animator.addAnimations(() => {
+		if (target.x !== void 0 || target.y !== void 0 || target.rotate !== void 0 || target.scale !== void 0 || target.scaleX !== void 0 || target.scaleY !== void 0) view.transform = dest;
+		if (target.opacity !== void 0) view.alpha = Math.min(1, Math.max(0, eff.opacity ?? target.opacity));
+	});
+	animator.addCompletion((position) => {
+		if (position === 0) {
+			write(req.dest);
+			settle("finished");
+		} else settle("cancelled");
+	});
+	if (t.delay) animator.startAnimationAfterDelay(t.delay);
+	else animator.startAnimation();
+	return {
+		finished,
+		sample,
+		cancel() {
+			const current = sample();
+			animator.stopAnimation(true);
+			write({
+				opacity: current.opacity,
+				x: current.x,
+				y: current.y,
+				scaleX: current.scaleX,
+				scaleY: current.scaleY,
+				rotate: current.rotate
+			});
+			settle("cancelled");
+		}
+	};
+}
+function androidRun(node, req, write) {
+	const view = node.nativeViewProtected ?? node.android;
+	const android = platform.android;
+	const androidx = platform.androidx;
+	if (!view?.animate || !android?.animation || !androidx?.core?.view?.animation?.PathInterpolatorCompat) return null;
+	const { eff, target, transition: t } = req;
+	const animator = view.animate();
+	const [x1, y1, x2, y2] = bezierPoints(t.ease);
+	animator.setInterpolator(androidx.core.view.animation.PathInterpolatorCompat.create(x1, y1, x2, y2));
+	animator.setDuration(Math.round((t.duration ?? .3) * 1e3));
+	animator.setStartDelay(Math.round((t.delay ?? 0) * 1e3));
+	if (target.x !== void 0) animator.translationX(eff.x);
+	if (target.y !== void 0) animator.translationY(eff.y);
+	if (target.scale !== void 0 || target.scaleX !== void 0) animator.scaleX(eff.scaleX);
+	if (target.scale !== void 0 || target.scaleY !== void 0) animator.scaleY(eff.scaleY);
+	if (target.rotate !== void 0) animator.rotation(eff.rotate);
+	if (target.opacity !== void 0) animator.alpha(Math.min(1, Math.max(0, eff.opacity ?? target.opacity)));
+	let resolve;
+	const finished = new Promise((done) => {
+		resolve = done;
+	});
+	let settled = false;
+	const settle = (result) => {
+		if (!settled) {
+			settled = true;
+			resolve(result);
+		}
+	};
+	let cancelled = false;
+	animator.setListener(new android.animation.Animator.AnimatorListener({
+		onAnimationCancel() {
+			cancelled = true;
+			settle("cancelled");
+		},
+		onAnimationEnd() {
+			if (!cancelled) write(req.dest);
+			settle(cancelled ? "cancelled" : "finished");
+		},
+		onAnimationStart() {},
+		onAnimationRepeat() {}
+	}));
+	animator.start();
+	return {
+		finished,
+		sample: () => ({
+			opacity: view.getAlpha(),
+			x: view.getTranslationX(),
+			y: view.getTranslationY(),
+			scaleX: view.getScaleX(),
+			scaleY: view.getScaleY(),
+			rotate: view.getRotation()
+		}),
+		cancel() {
+			animator.cancel();
+		}
+	};
+}
+function delegatedRun(node, req, write) {
+	if (!isBezierEase(req.transition.ease)) {
+		delegationStats().fallback++;
+		return null;
+	}
+	const run = node.ios && platform.UIViewPropertyAnimator ? iosRun(node, req, write) : platform.android?.animation && (node.nativeViewProtected ?? node.android) ? androidRun(node, req, write) : null;
+	if (!run) {
+		delegationStats().fallback++;
+		return null;
+	}
+	return trackDelegatedRun(run);
+}
+//#endregion
+//#region src/host.ts
+function attachHost(node) {
+	const original = {
+		opacity: node.opacity ?? 1,
+		x: node.translateX ?? 0,
+		y: node.translateY ?? 0,
+		scaleX: node.scaleX ?? 1,
+		scaleY: node.scaleY ?? 1,
+		rotate: node.rotate ?? 0
+	};
+	if (original.x || original.y || original.rotate || original.scaleX !== 1 || original.scaleY !== 1) throw new Error("motion: put existing transforms on an outer container");
+	const write = (values) => {
+		if (values.opacity !== void 0) node.opacity = Math.min(1, Math.max(0, values.opacity));
+		if (values.x !== void 0) node.translateX = values.x;
+		if (values.y !== void 0) node.translateY = values.y;
+		if (values.rotate !== void 0) node.rotate = values.rotate;
+		if (values.scale !== void 0 || values.scaleX !== void 0) node.scaleX = (values.scale ?? 1) * (values.scaleX ?? 1);
+		if (values.scale !== void 0 || values.scaleY !== void 0) node.scaleY = (values.scale ?? 1) * (values.scaleY ?? 1);
+	};
+	return {
+		pan: (axis, callbacks) => attachPan(node, axis, callbacks),
+		read: () => ({
+			...original,
+			scale: 1
+		}),
+		write,
+		restore: () => write(original),
+		delegate: (req) => delegatedRun(node, req, write),
+		gesture(kind, callbacks) {
+			if (typeof node.on !== "function" || typeof node.off !== "function") return null;
+			if (kind === "press") {
+				const onTouch = (event) => {
+					if (event.action === "down") callbacks.start();
+					else if (event.action === "up" || event.action === "cancel") callbacks.end();
+				};
+				node.on("touch", onTouch);
+				return () => node.off("touch", onTouch);
+			}
+			const onFocus = () => callbacks.start();
+			const onBlur = () => callbacks.end();
+			node.on("focus", onFocus);
+			node.on("blur", onBlur);
+			return () => {
+				node.off("focus", onFocus);
+				node.off("blur", onBlur);
+			};
+		}
+	};
+}
+//#endregion
 //#region src/value.ts
 /** Numeric value with direct subscriptions; it does not subscribe Octane renders. */
 var MotionValue = class {
@@ -1349,6 +1831,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;
@@ -1356,10 +1845,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 {
@@ -1373,7 +1861,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;
@@ -1434,7 +1922,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;
@@ -1448,15 +1939,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);
@@ -1468,9 +1968,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";
@@ -1478,18 +2034,135 @@ 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 _hs$$1 = /* @__PURE__ */ hookSlots(19);
+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);
@@ -1498,10 +2171,10 @@ 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);
@@ -1509,6 +2182,11 @@ 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 _h$21 = /* @__PURE__ */ Symbol(_hs$$1 + 21);
+var _h$22 = /* @__PURE__ */ Symbol(_hs$$1 + 22);
+var _h$23 = /* @__PURE__ */ Symbol(_hs$$1 + 23);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
@@ -1521,40 +2199,88 @@ var __octaneUniversalPlan2 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
 });
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var VariantContext = createContext(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 || [
@@ -1570,11 +2296,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);
@@ -1582,49 +2333,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]);
@@ -1635,44 +2420,106 @@ 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 MotionLeaf = defineUniversalComponent("nativescript", function MotionLeaf(props) {
+	const Component = props.component;
+	const { hostProps, node } = withSlot(_h$20, useMotion, props);
+	return universalValue(__octaneUniversalPlan1, [((__octaneContextProps) => universalContext(VariantContext, __octaneContextProps.value, universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Component, universalProps([["spread", hostProps]], props.children))]);
+	})))({ "value": node })]);
+}, { "module": "@nativescript-community/octane" });
+function createMotion(Component) {
+	return function MotionCreated(props, __s, __extra) {
+		return MotionLeaf({
+			...props,
+			component: Component
+		}, __s, __extra);
 	};
 }
 var MotionView = defineUniversalComponent("nativescript", function MotionView(props) {
-	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([["spread", withSlot(_h$16, useMotion, props)]], props.children))]);
+	const { hostProps, node } = withSlot(_h$21, useMotion, props);
+	return universalValue(__octaneUniversalPlan3, [((__octaneContextProps) => universalContext(VariantContext, __octaneContextProps.value, universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", View, universalProps([["spread", hostProps]], props.children))]);
+	})))({ "value": node })]);
 }, { "module": "@nativescript-community/octane" });
 var MotionRow = defineUniversalComponent("nativescript", function MotionRow(props) {
-	return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Row, universalProps([["spread", withSlot(_h$17, useMotion, props)]], props.children))]);
+	const { hostProps, node } = withSlot(_h$22, useMotion, props);
+	return universalValue(__octaneUniversalPlan5, [((__octaneContextProps) => universalContext(VariantContext, __octaneContextProps.value, universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", HStack, universalProps([["spread", hostProps]], props.children))]);
+	})))({ "value": node })]);
 }, { "module": "@nativescript-community/octane" });
 var MotionPressable = defineUniversalComponent("nativescript", function MotionPressable(props) {
-	return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Pressable, universalProps([["spread", withSlot(_h$18, useMotion, props)]], props.children))]);
+	const { hostProps, node } = withSlot(_h$23, useMotion, props);
+	return universalValue(__octaneUniversalPlan7, [((__octaneContextProps) => universalContext(VariantContext, __octaneContextProps.value, universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan6, [universalComponent("nativescript", Pressable, universalProps([["spread", hostProps]], props.children))]);
+	})))({ "value": node })]);
 }, { "module": "@nativescript-community/octane" });
 //#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);
@@ -1681,6 +2528,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);
@@ -1735,13 +2586,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.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 };