@octane-xplat/motion 0.7.3 → 0.10.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} />
@@ -16,7 +16,7 @@ function Values(props: any) @{
 }
 
 function Reduced() @{
-	<MotionConfig reducedMotion="always"><motion.Pressable id="reduced" initial={{ x: 0 }} animate={{ x: 100 }} transition={{ duration: 10 }} /></MotionConfig>
+	<MotionConfig reducedMotion="always"><motion.Pressable id="reduced" initial={{ x: 0 }} animate={{ x: 100 }} transition={{ type: 'spring' }} /></MotionConfig>
 }
 
 function mount(component: any) {
@@ -121,7 +121,7 @@ it('retargets from a render-time signal read', () => {
 })
 
 function UserReduced() @{
-	<MotionConfig reducedMotion="user"><motion.View id="user-reduced" animate={{ x: 100 }} transition={{ duration: 10 }} /></MotionConfig>
+	<MotionConfig reducedMotion="user"><motion.View id="user-reduced" animate={{ x: 100 }} transition={{ type: 'spring' }} /></MotionConfig>
 }
 
 it('observes live system reduced-motion changes', () => {
@@ -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
 	}
 }