@octane-xplat/motion 0.9.0 → 0.11.0

package/src/components.web.test.tsrx

@@ -1,6 +1,6 @@
 import { act, createRoot, useEffect } from 'octane'
 import { describe, expect, it, vi } from 'vitest'
-import { motion, MotionConfig, useMotionValue, useTransform, useSpring } from './index.web'
+import { motion, Presence, MotionConfig, useMotionValue, useTransform, useSpring } from './index.web'
 
 function Box(props: any) @{
 	<motion.View id="box" initial={{ x: 20 }} animate={props.target} transition={{ duration: 0 }} onAnimationComplete={props.done} />
@@ -133,3 +133,236 @@ it('observes live system reduced-motion changes', () => {
 	expect((mounted.container.querySelector('#user-reduced') as HTMLElement).style.transform).toContain('translateX(100px)')
 	mounted.close(); expect(callbacks.size).toBe(0); vi.unstubAllGlobals()
 })
+
+import { useAnimate } from './index.web'
+import { View } from '@octane-xplat/ui'
+
+function TapScale() @{
+	<motion.Pressable id="tap" animate={{ scale: 1 }} whileTap={{ scale: 1.5 }} whileTapTransition={{ duration: 0 }} transition={{ duration: 0.01 }} />
+}
+
+describe('upstream-shaped props', () => {
+	it('animates whileTap on pointerdown and returns on release', () => {
+		const mounted = mount(<TapScale />)
+		const node = mounted.container.querySelector('#tap') as HTMLElement
+		node.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+		expect(node.style.transform).toContain('scale(1.5)')
+		node.dispatchEvent(new Event('pointerup', { bubbles: true }))
+		expect(node.style.transform).toContain('scale(1)')
+		mounted.close()
+	})
+
+	it('animates whileFocus on focus and returns on blur', () => {
+		const mounted = mount(<TapFocusCase />)
+		const node = mounted.container.querySelector('#focusable') as HTMLElement
+		node.dispatchEvent(new Event('focus'))
+		expect(node.style.transform).toContain('translateX(20px)')
+		node.dispatchEvent(new Event('blur'))
+		expect(node.style.transform).toContain('translateX(0px)')
+		mounted.close()
+	})
+
+	it('fires onAnimationStart and onUpdate for declarative runs', () => {
+		const mounted = mount(<CallbackCase />)
+		expect(callbackState.started).toBe(1)
+		expect(callbackState.updated).toBeGreaterThan(0)
+		mounted.close()
+		callbackState.started = 0
+		callbackState.updated = 0
+	})
+
+	it('wraps an arbitrary leaf with motion.create', () => {
+		const mounted = mount(<CreatedCase />)
+		const node = mounted.container.querySelector('#created') as HTMLElement
+		expect(node.style.transform).toContain('translateX(30px)')
+		mounted.close()
+	})
+
+	it('animates through useAnimate scope and a MotionValue directly', async () => {
+		const mounted = mount(<ScopedCase />)
+		const node = mounted.container.querySelector('#scoped') as HTMLElement
+		await scopedApi.animate({ x: 40 }, { duration: 0 })
+		expect(node.style.transform).toContain('translateX(40px)')
+		const direct = scopedApi.animate(scopedApi.value, 77, { duration: 0 })
+		await direct.finished
+		expect(scopedApi.value.get()).toBe(77)
+		mounted.close()
+	})
+})
+
+const callbackState = { started: 0, updated: 0 }
+function CallbackCase() @{
+	<motion.View
+		id="callbacks"
+		animate={{ x: 5 }}
+		transition={{ duration: 0 }}
+		onAnimationStart={() => callbackState.started++}
+		onUpdate={() => callbackState.updated++}
+	/>
+}
+
+function TapFocusCase() @{
+	<motion.View id="focusable" animate={{ x: 0 }} whileFocus={{ x: 20 }} whileFocusTransition={{ duration: 0 }} transition={{ duration: 0.01 }} />
+}
+
+const MotionCard = motion.create(function Card(props: any) @{
+	<View {...props} />
+})
+
+function CreatedCase() @{
+	<MotionCard id="created" animate={{ x: 30 }} transition={{ duration: 0 }} />
+}
+
+const scopedApi: { animate: any; value: MotionValue } = { animate: undefined, value: undefined as any }
+function ScopedCase() @{
+	const [scope, animate] = useAnimate()
+	const value = useMotionValue(0)
+	useEffect(() => {
+		scopedApi.animate = animate
+		scopedApi.value = value
+	}, [])
+
+	<motion.View id="scoped" ref={scope} />
+}
+
+function DragBox(props: any) @{
+	<MotionConfig reducedMotion="never"><motion.View id="drag" {...props} /></MotionConfig>
+}
+
+function pointer(node: HTMLElement, type: string, x: number, y = 0, pointerId = 1) {
+	const event = new MouseEvent(type, { clientX: x, clientY: y, button: 0, bubbles: true })
+	Object.defineProperty(event, 'pointerId', { value: pointerId })
+	node.dispatchEvent(event)
+}
+
+describe('declarative pointer drag', () => {
+	it('writes a bound MotionValue live, captures one pointer, clamps, and cleans up', () => {
+		const x = new MotionValue(10, clock)
+		const started = vi.fn(), moved = vi.fn(), ended = vi.fn()
+		const mounted = mount(<DragBox drag="x" style={{ x }} dragConstraints={{ left: -30, right: 30 }} dragElastic={false} dragMomentum={false} onDragStart={started} onDrag={moved} onDragEnd={ended} />)
+		const node = mounted.container.querySelector('#drag') as HTMLElement
+		node.setPointerCapture = vi.fn()
+		expect(node.style.touchAction).toBe('pan-y')
+		pointer(node, 'pointerdown', 0)
+		pointer(node, 'pointermove', 4)
+		expect(started).not.toHaveBeenCalled()
+		pointer(node, 'pointermove', 100, 0, 2)
+		expect(x.get()).toBe(10)
+		pointer(node, 'pointermove', 100)
+		expect(x.get()).toBe(30)
+		expect(node.style.transform).toContain('translateX(30px)')
+		pointer(node, 'pointerup', 100)
+		expect(started).toHaveBeenCalledTimes(1)
+		expect(ended).toHaveBeenCalledTimes(1)
+		expect(node.setPointerCapture).toHaveBeenCalledWith(1)
+		mounted.close()
+		pointer(node, 'pointerdown', 0); pointer(node, 'pointermove', -100)
+		expect(x.get()).toBe(30)
+		expect(node.style.touchAction).toBe('')
+		x.destroy()
+	})
+
+	it('updates drag axis and disables listeners on prop changes', () => {
+		const mounted = mount(<DragBox drag="x" dragMomentum={false} />)
+		const node = mounted.container.querySelector('#drag') as HTMLElement
+		act(() => mounted.root.render(<DragBox drag="y" dragMomentum={false} />))
+		expect(node.style.touchAction).toBe('pan-x')
+		pointer(node, 'pointerdown', 0); pointer(node, 'pointermove', 0, 30); pointer(node, 'pointerup', 0, 30)
+		expect(node.style.transform).toContain('translateY(30px)')
+		act(() => mounted.root.render(<DragBox drag={false} />))
+		pointer(node, 'pointerdown', 0); pointer(node, 'pointermove', 0, 80)
+		expect(node.style.transform).toContain('translateY(30px)')
+		mounted.close()
+	})
+
+	it('yields perpendicular movement and reports active cancellation once', () => {
+		const end = vi.fn(), start = vi.fn()
+		const mounted = mount(<DragBox drag="x" dragMomentum={false} onDragStart={start} onDragEnd={end} />)
+		const node = mounted.container.querySelector('#drag') as HTMLElement
+		pointer(node, 'pointerdown', 0); pointer(node, 'pointermove', 0, 30)
+		expect(start).not.toHaveBeenCalled()
+		pointer(node, 'pointerdown', 0); pointer(node, 'pointermove', 30)
+		pointer(node, 'pointercancel', 30); pointer(node, 'lostpointercapture', 30)
+		expect(end).toHaveBeenCalledTimes(1)
+		expect(end.mock.calls[0][1].cancelled).toBe(true)
+		mounted.close()
+	})
+})
+
+function VariantTree(props: any) @{
+	<motion.View initial="hidden" animate={props.label} variants={{ hidden: { x: -10 }, show: { x: 10, transition: { duration: 0, when: 'beforeChildren' } }, hide: { x: 0, transition: { duration: 0 } } }}>
+		<motion.View id="variant-child" custom={props.custom} variants={{ hidden: { x: -20 }, show: (custom: number) => ({ x: custom, transition: { duration: 0 } }), hide: { x: 0, transition: { duration: 0 } } }} />
+		<motion.View id="variant-explicit" animate={{ x: 99 }} transition={{ duration: 0 }} />
+	</motion.View>
+}
+
+function VariantGesture() @{
+	<motion.View id="variant-gesture" animate={['base', 'position']} whileTap="tap" whileFocus="focus" variants={{ base: { scale: 1, transition: { duration: 0 } }, position: { x: 5 }, tap: { scale: 2, transition: { duration: 0 } }, focus: { x: 30, transition: { duration: 0 } } }} />
+}
+
+it('inherits labels and initial targets while explicit animate remains independent', async () => {
+	const mounted = mount(<VariantTree label="show" custom={40} />)
+	const child = mounted.container.querySelector('#variant-child') as HTMLElement
+	await act(async () => {})
+	expect(child.style.transform).toContain('translateX(40px)')
+	expect((mounted.container.querySelector('#variant-explicit') as HTMLElement).style.transform).toContain('translateX(99px)')
+	act(() => mounted.root.render(<VariantTree label="hide" custom={40} />))
+	await act(async () => {})
+	expect(mounted.container.querySelector('#variant-child')).toBe(child)
+	expect(child.style.transform).toContain('translateX(0px)')
+	mounted.close()
+})
+
+it('resolves gesture labels and restores the resolved animate target', () => {
+	const mounted = mount(<VariantGesture />)
+	const host = mounted.container.querySelector('#variant-gesture') as HTMLElement
+	host.dispatchEvent(new Event('pointerdown'))
+	expect(host.style.transform).toContain('scale(2)')
+	host.dispatchEvent(new Event('pointerup'))
+	expect(host.style.transform).toContain('scale(1)')
+	host.dispatchEvent(new Event('focus'))
+	expect(host.style.transform).toContain('translateX(30px)')
+	host.dispatchEvent(new Event('blur'))
+	expect(host.style.transform).toContain('translateX(5px)')
+	mounted.close()
+})
+
+it('retargets an inherited resolver when custom changes without a new parent label', async () => {
+	const mounted = mount(<VariantTree label="show" custom={40} />)
+	await act(async () => {})
+	act(() => mounted.root.render(<VariantTree label="show" custom={60} />))
+	await act(async () => {})
+	expect((mounted.container.querySelector('#variant-child') as HTMLElement).style.transform).toContain('translateX(60px)')
+	mounted.close()
+})
+
+function InitialVariantTree() @{
+	<motion.View initial={false} animate="show" variants={{ show: { x: 10 } }}>
+		<motion.View id="initial-variant" variants={{ show: { x: 90 } }} />
+	</motion.View>
+}
+
+it('inherits initial=false and seeds child destinations without playback', () => {
+	const mounted = mount(<InitialVariantTree />)
+	expect((mounted.container.querySelector('#initial-variant') as HTMLElement).style.transform).toContain('translateX(90px)')
+	mounted.close()
+})
+
+function VariantExit(props: any) @{
+	<Presence present={props.present} onExitComplete={props.done}>
+		<motion.View id="variant-exit" initial={false} animate="show" exit={['hide', 'offset']} variants={{ show: { x: 0 }, hide: { x: 70, transition: { duration: 0.1 } }, offset: { x: 100 } }} transition={{ duration: 20 }} />
+	</Presence>
+}
+
+it('uses exit label arrays and their transition overrides under Presence', async () => {
+	vi.useFakeTimers()
+	const done = vi.fn()
+	const mounted = mount(<VariantExit present={true} done={done} />)
+	act(() => mounted.root.render(<VariantExit present={false} done={done} />))
+	expect(mounted.container.querySelector('#variant-exit')).not.toBeNull()
+	await act(async () => { await vi.advanceTimersByTimeAsync(160) })
+	expect(mounted.container.querySelector('#variant-exit')).toBeNull()
+	expect(done).toHaveBeenCalledOnce()
+	mounted.close()
+	vi.useRealTimers()
+})

package/src/controller.ts

@@ -1,7 +1,8 @@
 import { MotionValue } from './value'
 import type { Clock } from './clock-types'
-import type { Target, MotionKey, Transition } from './types'
-import type { AnimationResult } from './engine'
+import type { HostAdapter, DelegatedRun } from './host-types'
+import type { Target, MotionKey, TransitionInput } from './types'
+import { isBezierEase, isOrchestrated, resolveTransition, type AnimationResult } from './engine'
 
 export const keys: MotionKey[] = ['opacity', 'x', 'y', 'scale', 'scaleX', 'scaleY', 'rotate']
 export const defaults: Required<Target> = {
@@ -24,10 +25,13 @@ export function validateTarget(target?: Target) {
 
 export class Controller {
 	readonly values = new Map<MotionKey, MotionValue>()
-	private write?: (target: Target) => void
+	/** Per-write snapshot callback (rAF-rate during delegated and JS runs). */
+	onUpdate?: (snapshot: Target) => void
+	private adapter?: HostAdapter
+	private delegated?: { run: DelegatedRun; frame: number; trackSample: () => void }
 	private generation = 0
 	constructor(private clock: Clock) {}
-	private value(key: MotionKey) {
+	value(key: MotionKey) {
 		let value = this.values.get(key)
 		if (!value) {
 			value = new MotionValue(defaults[key], this.clock)
@@ -37,15 +41,27 @@ export class Controller {
 
 		return value
 	}
-	attach(write: (target: Target) => void) {
-		this.write = write
+	attach(adapter: HostAdapter) {
+		this.adapter = adapter
 		this.flush()
 	}
+	private cancelDelegated() {
+		if (!this.delegated) {
+			return
+		}
+
+		this.clock.cancel(this.delegated.frame)
+		this.delegated.trackSample()
+		this.delegated.run.cancel()
+		this.delegated = undefined
+	}
 	snapshot(): Target {
 		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: MotionKey, next: number) {
 		this.value(key).jump(next)
@@ -58,19 +74,114 @@ export class Controller {
 	}
 	async animate(
 		target: Target,
-		transition: Transition,
+		transition: TransitionInput,
 		reduced: boolean,
 	): Promise<AnimationResult> {
 		validateTarget(target)
 		const generation = ++this.generation
+		this.cancelDelegated()
 		// A new destination owns the entire declarative animation, including removed keys.
 		for (const value of this.values.values()) {
 			value.stop('replaced')
 		}
 
+		if (
+			!reduced &&
+			!isOrchestrated(transition) &&
+			transition.type !== 'spring' &&
+			(transition.duration ?? 0.3) > 0 &&
+			(transition.repeat ?? 0) === 0 &&
+			isBezierEase(transition.ease) &&
+			this.adapter?.delegate
+		) {
+			const dest: Target = { ...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] === undefined) {
+							continue
+						}
+
+						let next: number | undefined
+						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 !== undefined && 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
+				// Only this run cleans up its own sampler — an interrupted run must
+				// not clobber the replacement's delegated state.
+				if (this.delegated === entry) {
+					this.clock.cancel(entry.frame)
+					this.delegated = undefined
+				}
+
+				if (generation !== this.generation) {
+					return 'replaced'
+				}
+
+				if (result !== 'finished') {
+					return 'cancelled'
+				}
+
+				for (const key of keys) {
+					if (dest[key] !== undefined) {
+						this.value(key).jump(dest[key]!)
+					}
+				}
+
+				return 'finished'
+			}
+		}
+
 		const jobs = Object.entries(target).map(([key, to]) => {
 			const value = this.value(key as MotionKey)
-			return value.animate(to, reduced && key !== 'opacity' ? { duration: 0 } : transition).finished
+			return value.animate(
+				to,
+				reduced && key !== 'opacity'
+					? { duration: 0 }
+					: resolveTransition(transition, key as MotionKey),
+			).finished
 		})
 
 		const results = await Promise.all(jobs)
@@ -82,6 +193,7 @@ export class Controller {
 	}
 	stop() {
 		++this.generation
+		this.cancelDelegated()
 		for (const value of this.values.values()) {
 			value.stop()
 		}
@@ -93,6 +205,6 @@ export class Controller {
 		}
 
 		this.values.clear()
-		this.write = undefined
+		this.adapter = undefined
 	}
 }

package/src/delegation.test.ts

@@ -0,0 +1,269 @@
+import { describe, expect, it } from 'vitest'
+import { Controller } from './controller'
+import type { Clock } from './clock-types'
+import type { DelegatedRequest, DelegatedRun, HostAdapter } from './host-types'
+import type { Target } from './types'
+
+function fakeClock() {
+	let time = 0,
+		id = 0
+
+	const callbacks = new Map<number, () => void>()
+	const clock: Clock = {
+		now: () => time,
+		request: (fn) => {
+			callbacks.set(++id, fn)
+			return id
+		},
+		cancel: (key) => {
+			callbacks.delete(key)
+		},
+	}
+
+	return {
+		clock,
+		advance(ms: number) {
+			time += ms
+			const pending = [...callbacks.values()]
+			callbacks.clear()
+			pending.forEach((fn) => fn())
+		},
+		count: () => callbacks.size,
+	}
+}
+
+interface FakeRun extends DelegatedRun {
+	resolve(result: 'finished' | 'cancelled'): void
+	setEff(next: Target): void
+	cancelCalls: number
+}
+
+function fakeRun(eff: Target): FakeRun {
+	let resolve!: (result: 'finished' | 'cancelled') => void
+	let current = { ...eff }
+	const run: FakeRun = {
+		finished: new Promise((done) => {
+			resolve = done
+		}),
+		sample: () => ({ ...current }),
+		cancelCalls: 0,
+		cancel() {
+			run.cancelCalls++
+			run.resolve('cancelled')
+		},
+		resolve,
+		setEff(next) {
+			current = { ...next }
+		},
+	}
+
+	return run
+}
+
+function stubHost(onDelegate?: (req: DelegatedRequest) => DelegatedRun | null) {
+	const written: Target[] = []
+	const adapter: HostAdapter = {
+		read: () => ({ opacity: 1, x: 0, y: 0, scale: 1, scaleX: 1, scaleY: 1, rotate: 0 }),
+		write: (target) => {
+			written.push({ ...target })
+		},
+		restore: () => {},
+		delegate: onDelegate,
+	}
+
+	return { adapter, written }
+}
+
+describe('delegated runs', () => {
+	it('hands a tween to the host driver and resolves finished at the destination', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		let request: DelegatedRequest | undefined
+		const run = fakeRun({ x: 0 })
+		const { adapter } = stubHost((req) => {
+			request = req
+			return run
+		})
+
+		controller.attach(adapter)
+		controller.seed({ x: 0 })
+
+		const done = controller.animate({ x: 100 }, { duration: 0.5 }, false)
+		expect(request?.eff.x).toBe(100)
+		expect(request?.target.x).toBe(100)
+
+		run.setEff({ x: 40 })
+		time.advance(16)
+		run.resolve('finished')
+		expect(await done).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(100)
+		expect(time.count()).toBe(0)
+	})
+
+	it('folds scale into the effective axis and tracks samples back', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		let request: DelegatedRequest | undefined
+		const run = fakeRun({ scaleX: 0.5, scaleY: 0.5 })
+		const { adapter } = stubHost((req) => {
+			request = req
+			return run
+		})
+
+		controller.attach(adapter)
+		controller.seed({ scaleX: 0.5 })
+
+		const done = controller.animate({ scale: 2 }, { duration: 0.4 }, false)
+		// Retained scaleX=0.5 folds into the effective destination.
+		expect(request?.eff.scaleX).toBe(1)
+		expect(request?.eff.scaleY).toBe(2)
+		run.setEff({ scaleX: 0.9, scaleY: 0.9 })
+		time.advance(16)
+		// scale channel tracks effective / retained scaleX.
+		expect(controller.values.get('scale')?.get()).toBeCloseTo(1.8)
+		run.resolve('finished')
+		expect(await done).toBe('finished')
+		expect(controller.values.get('scale')?.get()).toBe(2)
+	})
+
+	it('interrupts a delegated run with a tracked sample and resolves replaced', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		const first = fakeRun({ x: 0 })
+		const second = fakeRun({ x: 30 })
+		const runs = [first, second]
+		let calls = 0
+		const { adapter } = stubHost(() => runs[calls++ % runs.length])
+		controller.attach(adapter)
+		controller.seed({ x: 0 })
+
+		const doneFirst = controller.animate({ x: 100 }, { duration: 0.5 }, false)
+		first.setEff({ x: 30 })
+		time.advance(16)
+		const doneSecond = controller.animate({ x: -50 }, { duration: 0.5 }, false)
+		expect(first.cancelCalls).toBe(1)
+		// The interruption sample is written into the channel value.
+		expect(controller.values.get('x')?.get()).toBe(30)
+		expect(await doneFirst).toBe('replaced')
+		second.setEff({ x: -20 })
+		time.advance(16)
+		expect(controller.values.get('x')?.get()).toBe(-20)
+		second.resolve('finished')
+		expect(await doneSecond).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(-50)
+	})
+
+	it('keeps springs on the JS engine', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		let delegated = false
+		const { adapter } = stubHost(() => {
+			delegated = true
+			return null
+		})
+
+		controller.attach(adapter)
+		controller.seed({ x: 0 })
+
+		const done = controller.animate(
+			{ x: 100 },
+			{ type: 'spring', stiffness: 100, damping: 10 },
+			false,
+		)
+
+		expect(delegated).toBe(false)
+		for (let i = 0; i < 400; i++) {
+			time.advance(16)
+		}
+
+		expect(await done).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(100)
+	})
+
+	it('keeps reduced-motion runs on the JS engine for instant settle', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		let delegated = false
+		const { adapter, written } = stubHost(() => {
+			delegated = true
+			return null
+		})
+
+		controller.attach(adapter)
+		controller.seed({ x: 0 })
+
+		const done = controller.animate({ x: 50 }, { duration: 0.5 }, true)
+		expect(delegated).toBe(false)
+		expect(await done).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(50)
+		expect(written[written.length - 1]?.x).toBe(50)
+	})
+
+	it('resolves replaced when the delegated run is stopped', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		const run = fakeRun({ x: 0 })
+		const { adapter } = stubHost(() => run)
+		controller.attach(adapter)
+		controller.seed({ x: 0 })
+
+		const done = controller.animate({ x: 100 }, { duration: 0.5 }, false)
+		controller.stop()
+		expect(run.cancelCalls).toBe(1)
+		expect(await done).toBe('replaced')
+	})
+
+	it.each([
+		['per-key transitions', { default: { duration: 0.5 }, x: { duration: 1 } }],
+		['a non-bezier ease', { duration: 0.5, ease: 'backOut' as const }],
+		['a repeating run', { duration: 0.5, repeat: 2 }],
+	])('stays on the JS engine for %s', async (_label, transition) => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		let delegated = false
+		const { adapter } = stubHost(() => {
+			delegated = true
+			return null
+		})
+
+		controller.attach(adapter)
+		controller.seed({ x: 0 })
+
+		const done = controller.animate({ x: 100 }, transition as any, false)
+		expect(delegated).toBe(false)
+		for (let i = 0; i < 500; i++) {
+			time.advance(16)
+		}
+
+		expect(await done).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(100)
+	})
+
+	it('applies per-key overrides to each channel independently', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		const { adapter } = stubHost()
+		controller.attach(adapter)
+		controller.seed({ x: 0, y: 0 })
+
+		const done = controller.animate(
+			{ x: 100, y: 100 },
+			{ default: { duration: 0.1, ease: 'linear' }, x: { duration: 0.3 } },
+			false,
+		)
+
+		for (let i = 0; i < 8; i++) {
+			time.advance(16)
+		}
+
+		// y finished at 100ms; x still travelling on its 300ms override.
+		expect(controller.values.get('y')?.get()).toBe(100)
+		expect(controller.values.get('x')?.get()).toBeLessThan(100)
+		for (let i = 0; i < 30; i++) {
+			time.advance(16)
+		}
+
+		expect(await done).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(100)
+	})
+})