@octane-xplat/motion 0.9.0 → 0.10.0

package/src/delegation.ts

@@ -0,0 +1,29 @@
+import type { DelegatedRun } from './host-types'
+
+// Probe-visible counters so retained probes can distinguish a real delegated
+// run from a silent JS-engine fallback without widening the public API.
+export function delegationStats() {
+	const platform = globalThis as any
+	return (platform.__xplatMotionDelegations ??= {
+		started: 0,
+		finished: 0,
+		cancelled: 0,
+		fallback: 0,
+	})
+}
+
+/** Count a delegated run and fold its settled result into the counters. */
+export function trackDelegatedRun(run: DelegatedRun): DelegatedRun {
+	delegationStats().started++
+	const finished = run.finished.then((result) => {
+		if (result === 'finished') {
+			delegationStats().finished++
+		} else {
+			delegationStats().cancelled++
+		}
+
+		return result
+	})
+
+	return { ...run, finished }
+}

package/src/delegation.web.test.ts

@@ -0,0 +1,270 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Controller } from './controller'
+import { delegatedRun } from './driver.web'
+import { attachHost } from './host.web'
+import type { Clock } from './clock-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,
+	}
+}
+
+// Web delegated driver — jsdom ships no `element.animate`, so a fake
+// Animation models the browser: `presented` stands in for the animation
+// cascade over the element's base styles, and cancel() reveals the base
+// again like a real reverted WAAPI run.
+function styleToMatrix(style: string): string {
+	if (!style || style === 'none' || style.startsWith('matrix')) {
+		return style || 'none'
+	}
+
+	const channel = (name: string, dflt: number) => {
+		const match = new RegExp(`${name}\\((-?[\\d.eE+-]+)`).exec(style)
+		return match ? Number.parseFloat(match[1]) : dflt
+	}
+
+	const x = channel('translateX', 0)
+	const y = channel('translateY', 0)
+	const sx = channel('scale', 1) * channel('scaleX', 1)
+	const sy = channel('scale', 1) * channel('scaleY', 1)
+	const rad = (channel('rotate', 0) * Math.PI) / 180
+	return `matrix(${sx * Math.cos(rad)}, ${sy * Math.sin(rad)}, ${-sx * Math.sin(rad)}, ${sy * Math.cos(rad)}, ${x}, ${y})`
+}
+
+function fakeWebElement() {
+	const animations: any[] = []
+	let presented: { transform?: string; opacity?: string } | null = null
+	const el: any = {
+		style: { transform: '', opacity: '', transformOrigin: '' },
+	}
+
+	el.animate = (keyframes: any[], options: any) => {
+		let resolve!: (value: any) => void
+		let reject!: (reason: any) => void
+		const animation: any = {
+			keyframes,
+			options,
+			cancelled: false,
+			finished: new Promise((res, rej) => {
+				resolve = res
+				reject = rej
+			}),
+			present(transform: string, opacity?: string) {
+				presented = { transform, opacity }
+			},
+			finish() {
+				const last = keyframes[keyframes.length - 1] ?? {}
+				presented = {
+					transform: last.transform,
+					opacity: last.opacity === undefined ? undefined : String(last.opacity),
+				}
+
+				resolve(animation)
+			},
+			cancel() {
+				animation.cancelled = true
+				presented = null
+				reject(new Error('AbortError'))
+			},
+		}
+
+		animations.push(animation)
+		return animation
+	}
+
+	const computedFor = (node: any) => ({
+		transform: node === el ? (presented?.transform ?? styleToMatrix(el.style.transform)) : 'none',
+		opacity:
+			node === el
+				? (presented?.opacity ?? (el.style.opacity === '' ? '1' : el.style.opacity))
+				: '1',
+		transformOrigin: node === el ? el.style.transformOrigin || '0px 0px' : '0px 0px',
+	})
+
+	vi.stubGlobal('getComputedStyle', computedFor)
+	return { el, animations }
+}
+
+const delegationCounters = () =>
+	((globalThis as any).__xplatMotionDelegations ??= {
+		started: 0,
+		finished: 0,
+		cancelled: 0,
+		fallback: 0,
+	})
+
+describe('web WAAPI delegation', () => {
+	beforeEach(() => {
+		delete (globalThis as any).__xplatMotionDelegations
+	})
+
+	afterEach(() => {
+		vi.unstubAllGlobals()
+	})
+
+	const request = (target: Target, transition: any = { duration: 0.5, ease: 'easeOut' }) => ({
+		target,
+		dest: { opacity: 1, x: 0, y: 0, scale: 1, scaleX: 1, scaleY: 1, rotate: 0, ...target },
+		eff: { opacity: 1, x: 0, y: 0, scaleX: 1, scaleY: 1, rotate: 0, ...target },
+		transition,
+	})
+
+	it('hands a bezier tween to element.animate and commits the destination on finish', async () => {
+		const { el, animations } = fakeWebElement()
+		const written: Target[] = []
+		const run = delegatedRun(
+			el,
+			request({ x: 100, opacity: 0.5 }, { duration: 0.5, delay: 0.1, ease: 'easeOut' }),
+			(target) => written.push({ ...target }),
+		)
+
+		expect(run).not.toBeNull()
+		expect(animations).toHaveLength(1)
+		const animation = animations[0]
+		expect(animation.options).toMatchObject({
+			duration: 500,
+			delay: 100,
+			easing: 'cubic-bezier(0, 0, 0.58, 1)',
+			fill: 'forwards',
+		})
+
+		expect(animation.keyframes[0].transform).toBe(
+			'translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg)',
+		)
+
+		expect(animation.keyframes[1].transform).toBe(
+			'translateX(100px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg)',
+		)
+
+		expect(animation.keyframes[1].opacity).toBe(0.5)
+		expect(delegationCounters().started).toBe(1)
+
+		animation.present('matrix(1, 0, 0, 1, 40, 0)')
+		expect(run!.sample()).toMatchObject({ x: 40, scaleX: 1 })
+		animation.finish()
+		await expect(run!.finished).resolves.toBe('finished')
+		expect(written.at(-1)).toMatchObject({ x: 100, opacity: 0.5 })
+		expect(delegationCounters().finished).toBe(1)
+	})
+
+	it('samples the presentation before cancelling so the frozen values hold', async () => {
+		const { el, animations } = fakeWebElement()
+		const written: Target[] = []
+		const run = delegatedRun(el, request({ x: 100 }), (target) => written.push({ ...target }))
+
+		const animation = animations[0]
+		animation.present('matrix(0.5, 0, 0, 0.5, 42, 7)')
+		run!.cancel()
+		expect(animation.cancelled).toBe(true)
+		// cancel() reveals the base style — if the sample ran after it, the
+		// write would carry identity values instead of the mid-flight frame.
+		expect(written.at(-1)).toMatchObject({ x: 42, y: 7, scaleX: 0.5, scaleY: 0.5, rotate: 0 })
+		await expect(run!.finished).resolves.toBe('cancelled')
+		expect(delegationCounters().cancelled).toBe(1)
+	})
+
+	it('decomposes matrix3d and peels transform-origin out of x/y', () => {
+		const { el, animations } = fakeWebElement()
+		el.style.transformOrigin = '10px 20px'
+		const run = delegatedRun(el, request({ rotate: 90 }), () => {})
+
+		const animation = animations[0]
+		animation.present('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25, 5, 0, 1)')
+		expect(run!.sample()).toMatchObject({ x: 25, y: 5, scaleX: 1, scaleY: 1, rotate: 0 })
+		// rotate(90deg) about a (10, 20) origin resolves to this matrix.
+		animation.present('matrix(0, 1, -1, 0, 30, 10)')
+		const sampled = run!.sample()
+		expect(sampled.rotate).toBeCloseTo(90)
+		expect(sampled.x).toBeCloseTo(0)
+		expect(sampled.y).toBeCloseTo(0)
+	})
+
+	it('refuses non-bezier eases and elements without a WAAPI driver', () => {
+		const { el } = fakeWebElement()
+		const run = delegatedRun(el, request({ x: 100 }, { duration: 0.5, ease: 'backOut' }), () => {})
+
+		expect(run).toBeNull()
+		expect(delegatedRun({ style: {} }, request({ x: 50 }), () => {})).toBeNull()
+		expect(delegationCounters().fallback).toBe(2)
+		expect(delegationCounters().started).toBe(0)
+	})
+
+	it('delegates through the real web adapter and hands mid-flight state to the next run', async () => {
+		const { el, animations } = fakeWebElement()
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		controller.attach(attachHost(el))
+		controller.seed({ x: 0 })
+
+		const doneFirst = controller.animate({ x: 100 }, { duration: 0.5, ease: 'linear' }, false)
+		expect(animations).toHaveLength(1)
+		animations[0].present('matrix(1, 0, 0, 1, 30, 0)')
+		time.advance(16)
+
+		const doneSecond = controller.animate({ x: -50 }, { duration: 0.5 }, false)
+		expect(animations[0].cancelled).toBe(true)
+		// Interruption sampled into the channel value and velocity.
+		expect(controller.values.get('x')?.get()).toBe(30)
+		expect(controller.values.get('x')?.getVelocity()).toBeGreaterThan(0)
+		// The replacement run's "from" keyframe continues the frozen frame.
+		expect(animations[1].keyframes[0].transform).toBe(
+			'translateX(30px) translateY(0px) scaleX(1) scaleY(1) rotate(0deg)',
+		)
+
+		expect(await doneFirst).toBe('replaced')
+		animations[1].finish()
+		expect(await doneSecond).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(-50)
+		expect(el.style.transform).toBe(
+			'translateX(-50px) translateY(0px) scale(1) scaleX(1) scaleY(1) rotate(0deg)',
+		)
+	})
+
+	it.each([
+		['a spring', { type: 'spring', stiffness: 100, damping: 10 }, false],
+		['a non-bezier ease', { duration: 0.5, ease: 'backOut' as const }, false],
+		['a repeating run', { duration: 0.5, repeat: 2 }, false],
+		['per-key transitions', { default: { duration: 0.5 }, x: { duration: 1 } }, false],
+		['an instant run', { duration: 0 }, false],
+		['reduced motion', { duration: 0.5 }, true],
+	])('stays on the JS engine for %s', async (_label, transition, reduced) => {
+		const { el, animations } = fakeWebElement()
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		controller.attach(attachHost(el))
+		controller.seed({ x: 0 })
+
+		const done = controller.animate({ x: 100 }, transition as any, reduced)
+		expect(animations).toHaveLength(0)
+		for (let i = 0; i < 500; i++) {
+			time.advance(16)
+		}
+
+		expect(await done).toBe('finished')
+		expect(controller.values.get('x')?.get()).toBe(100)
+	})
+})

package/src/drag.mobile.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from 'vitest'
+import { attachPan } from './pan'
+import {
+	handlers,
+	GestureHandlerStateEvent,
+	GestureHandlerTouchEvent,
+	GestureState,
+} from '../test/gesturehandler'
+
+describe('native handler drag surface', () => {
+	it('configures arbitration, normalizes velocity, and detaches handlers', () => {
+		const start = vi.fn(),
+			move = vi.fn(),
+			end = vi.fn()
+
+		const node = {}
+		const off = attachPan(node, 'x', { start, move, end })
+		const h = handlers.at(-1)
+		expect(h.node).toBe(node)
+		expect(h.options).toMatchObject({
+			activeOffsetXStart: -8,
+			activeOffsetXEnd: 8,
+			failOffsetYStart: -8,
+			failOffsetYEnd: 8,
+		})
+
+		h.emit(GestureHandlerStateEvent, { state: GestureState.BEGAN })
+		expect(start).not.toHaveBeenCalled()
+		h.emit(GestureHandlerStateEvent, {
+			state: GestureState.ACTIVE,
+			extraData: { translationX: 10, velocityX: 300 },
+		})
+
+		h.emit(GestureHandlerTouchEvent, {
+			state: GestureState.ACTIVE,
+			extraData: { translationX: 25, velocityX: 400 },
+		})
+
+		expect(move.mock.calls.at(-1)?.[1]).toMatchObject({
+			offset: { x: 25, y: 0 },
+			delta: { x: 15, y: 0 },
+			velocity: { x: 400, y: 0 },
+		})
+
+		h.emit(GestureHandlerStateEvent, {
+			state: GestureState.CANCELLED,
+			extraData: { translationX: 25 },
+		})
+
+		h.emit(GestureHandlerStateEvent, { state: GestureState.END })
+		expect(end).toHaveBeenCalledTimes(1)
+		expect(end.mock.calls[0][1].cancelled).toBe(true)
+		off()
+		expect(h.node).toBeUndefined()
+		h.emit(GestureHandlerTouchEvent, { state: GestureState.ACTIVE })
+		expect(move).toHaveBeenCalledTimes(2)
+	})
+
+	it('uses minDist for both axes and fails perpendicular movement for vertical drag', () => {
+		const callbacks = { start() {}, move() {}, end() {} }
+		const both = attachPan({}, true, callbacks)
+		expect(handlers.at(-1).options.minDist).toBe(8)
+		both()
+		const vertical = attachPan({}, 'y', callbacks)
+		expect(handlers.at(-1).options).toMatchObject({ activeOffsetYEnd: 8, failOffsetXStart: -8 })
+		vertical()
+		vi.stubGlobal('android', {})
+		const density = attachPan({}, true, callbacks)
+		expect(handlers.at(-1).options.minDist).toBe(16)
+		density()
+		const directional = attachPan({}, 'x', callbacks)
+		expect(handlers.at(-1).options).toMatchObject({
+			minDist: 1e9,
+			activeOffsetXEnd: 16,
+			failOffsetYEnd: 16,
+		})
+
+		directional()
+		vi.unstubAllGlobals()
+	})
+})

package/src/drag.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it, vi } from 'vitest'
+import { attachDrag, validateDrag } from './drag'
+import { Controller } from './controller'
+import type { Clock } from './clock-types'
+import type { PanCallbacks, HostAdapter } from './host-types'
+import type { DragInfo, MotionProps } from './types'
+
+function fixture(props: MotionProps, reduced = false) {
+	let time = 0
+	let id = 0
+	const frames = new Map<number, () => void>()
+	const clock: Clock = {
+		now: () => time,
+		request: (fn) => {
+			frames.set(++id, fn)
+			return id
+		},
+		cancel: (key) => {
+			frames.delete(key)
+		},
+	}
+
+	const controller = new Controller(clock)
+	controller.seed({ x: 10, y: 20 })
+	let callbacks: PanCallbacks
+	const detach = vi.fn()
+	const delegate = vi.fn()
+	const writes: number[] = []
+	const adapter: HostAdapter = {
+		read: () => ({}),
+		write: (next) => {
+			writes.push(next.x ?? 0)
+		},
+		restore() {},
+		delegate,
+		pan(_axis, cb) {
+			callbacks = cb
+			return detach
+		},
+	}
+
+	controller.attach(adapter)
+	const off = attachDrag(
+		adapter,
+		controller,
+		props,
+		(axis) => controller.value(axis),
+		() => reduced,
+		() => props,
+	)
+
+	return {
+		controller,
+		off,
+		detach,
+		delegate,
+		writes,
+		emit(phase: keyof PanCallbacks, x: number, velocity = 0, cancelled = false) {
+			const info: DragInfo = {
+				point: { x, y: 0 },
+				offset: { x, y: x },
+				delta: { x, y: 0 },
+				velocity: { x: velocity, y: velocity },
+				cancelled,
+			}
+
+			callbacks[phase]({}, info)
+		},
+		advance(ms: number) {
+			time += ms
+			const pending = [...frames.values()]
+			frames.clear()
+			pending.forEach((fn) => fn())
+		},
+		count: () => frames.size,
+	}
+}
+
+describe('bounded drag', () => {
+	it('clamps live displacement, keeps the other axis, and emits callbacks once', () => {
+		const onDragStart = vi.fn(),
+			onDrag = vi.fn(),
+			onDragEnd = vi.fn()
+
+		const f = fixture({
+			drag: 'x',
+			dragConstraints: { left: -20, right: 30 },
+			dragElastic: 0,
+			dragMomentum: false,
+			onDragStart,
+			onDrag,
+			onDragEnd,
+		})
+
+		f.emit('start', 0)
+		f.emit('move', 100)
+		expect(f.controller.snapshot()).toEqual({ x: 30, y: 20 })
+		f.emit('end', 100, 500)
+		f.emit('end', 100)
+		expect(onDragStart).toHaveBeenCalledTimes(1)
+		expect(onDrag).toHaveBeenCalledTimes(1)
+		expect(onDragEnd).toHaveBeenCalledTimes(1)
+		expect(f.count()).toBe(0)
+		f.off()
+		expect(f.detach).toHaveBeenCalledOnce()
+	})
+
+	it('uses default elasticity and springs back inside constraints without momentum', () => {
+		const f = fixture({ drag: 'x', dragConstraints: { right: 30 }, dragMomentum: false })
+		f.emit('start', 0)
+		f.emit('move', 100)
+		expect(f.controller.value('x').get()).toBe(58)
+		f.emit('end', 100)
+		for (let i = 0; i < 200; i++) {
+			f.advance(16)
+		}
+
+		expect(f.controller.value('x').get()).toBe(30)
+		expect(f.delegate).not.toHaveBeenCalled()
+		f.off()
+	})
+
+	it('hands release velocity to a JS spring and bounds every hard-constraint sample', () => {
+		const f = fixture({ drag: 'x', dragConstraints: { left: -20, right: 50 }, dragElastic: false })
+		f.emit('start', 0)
+		f.emit('move', 10)
+		f.emit('end', 10, 500)
+		f.advance(16)
+		expect(f.controller.value('x').get()).toBeGreaterThan(20)
+		for (let i = 0; i < 200; i++) {
+			f.advance(16)
+		}
+
+		expect(f.controller.value('x').get()).toBe(50)
+		expect(Math.max(...f.writes)).toBeLessThanOrEqual(50)
+		expect(f.delegate).not.toHaveBeenCalled()
+		f.off()
+	})
+
+	it('cancellation drops momentum; reduced motion snaps; teardown cancels settlement', () => {
+		const cancel = fixture({ drag: true })
+		cancel.emit('start', 0)
+		cancel.emit('move', 20)
+		cancel.emit('end', 20, 500, true)
+		expect(cancel.count()).toBe(0)
+		cancel.off()
+		const reduced = fixture({ drag: 'x' }, true)
+		reduced.emit('start', 0)
+		reduced.emit('end', 10, 500)
+		expect(reduced.controller.value('x').get()).toBe(120)
+		expect(reduced.count()).toBe(0)
+		reduced.off()
+		const f = fixture({ drag: 'x' })
+		f.emit('start', 0)
+		f.emit('end', 10, 500)
+		expect(f.count()).toBe(1)
+		f.off()
+		expect(f.count()).toBe(0)
+	})
+
+	it('rejects refs, invalid bounds, elasticity and competing axis targets', () => {
+		expect(() => validateDrag({ dragConstraints: { current: null } } as any)).toThrow('refs')
+		expect(() => validateDrag({ dragConstraints: { left: 20, right: 10 } })).toThrow('reversed')
+		expect(() => validateDrag({ dragElastic: 2 })).toThrow('dragElastic')
+		expect(() => validateDrag({ drag: 'x', animate: { x: 20 } })).toThrow('both own x')
+	})
+})

package/src/drag.ts

@@ -0,0 +1,157 @@
+import type { Controller } from './controller'
+import type { HostAdapter } from './host-types'
+import type { DragInfo, MotionProps } from './types'
+import type { MotionValue } from './value'
+
+export function validateDrag(props: MotionProps) {
+	if (props.drag !== undefined && ![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 !== undefined &&
+		(!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'] as const) {
+			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] !== undefined
+				) {
+					throw new Error(`motion: drag and animation both own ${axis}`)
+				}
+			}
+		}
+	}
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+/** Gesture writes and release springs bypass host delegation. */
+export function attachDrag(
+	adapter: HostAdapter,
+	controller: Controller,
+	props: MotionProps,
+	valueFor: (axis: 'x' | 'y') => MotionValue,
+	reduced: () => boolean,
+	callbacks: () => MotionProps,
+) {
+	if (!props.drag) {
+		return () => {}
+	}
+
+	if (!adapter.pan) {
+		throw new Error('motion: this host does not support drag')
+	}
+
+	const axes = (['x', 'y'] as const).filter((axis) => props.drag === true || props.drag === axis)
+	const values = new Map(axes.map((axis) => [axis, valueFor(axis)]))
+	const value = (axis: 'x' | 'y') => values.get(axis)!
+	const bounds = props.dragConstraints ?? {}
+	const elastic =
+		typeof props.dragElastic === 'number'
+			? props.dragElastic
+			: props.dragElastic === false
+				? 0
+				: 0.35
+
+	const origin = { x: 0, y: 0 }
+	let active = false
+	const limits = (axis: 'x' | 'y') =>
+		axis === 'x'
+			? [bounds.left ?? -Infinity, bounds.right ?? Infinity]
+			: [bounds.top ?? -Infinity, bounds.bottom ?? Infinity]
+
+	const move = (info: DragInfo) => {
+		for (const axis of axes) {
+			const [min, max] = limits(axis)
+			const next = origin[axis] + info.offset[axis]
+			const bounded = clamp(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(channel.get() + velocity * 0.2, min, max)
+				if (elastic === 0) {
+					channel.jump(clamp(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(next, min, max) : undefined,
+					)
+				}
+			}
+
+			callbacks().onDragEnd?.(event, info)
+		},
+	})
+
+	return () => {
+		active = false
+		off()
+		for (const channel of values.values()) {
+			channel.stop()
+		}
+	}
+}