@octane-xplat/motion 0.7.3 → 0.10.0

package/src/host.web.ts

@@ -1,4 +1,7 @@
-import type { HostAdapter } from './host-types'
+import { attachPan } from './pan.web'
+import { delegatedRun } from './driver.web'
+import type { DelegatedRequest, DelegatedRun, HostAdapter } from './host-types'
+import type { Target } from './types'
 export function attachHost(node: HTMLElement): HostAdapter {
 	const transform = node.style.transform
 	const opacity = node.style.opacity
@@ -7,7 +10,18 @@ export function attachHost(node: HTMLElement): HostAdapter {
 		throw new Error('motion: put existing CSS transforms on an outer container')
 	}
 
+	const write = (values: Target) => {
+		if (values.opacity !== undefined) {
+			node.style.opacity = String(Math.min(1, Math.max(0, values.opacity)))
+		}
+
+		if (Object.keys(values).some((key) => key !== 'opacity')) {
+			node.style.transform = `translateX(${values.x ?? 0}px) translateY(${values.y ?? 0}px) scale(${values.scale ?? 1}) scaleX(${values.scaleX ?? 1}) scaleY(${values.scaleY ?? 1}) rotate(${values.rotate ?? 0}deg)`
+		}
+	}
+
 	return {
+		pan: (axis, callbacks) => attachPan(node, axis, callbacks),
 		read: () => ({
 			opacity: Number(computed.opacity || 1),
 			x: 0,
@@ -17,18 +31,45 @@ export function attachHost(node: HTMLElement): HostAdapter {
 			scaleY: 1,
 			rotate: 0,
 		}),
-		write(values) {
-			if (values.opacity !== undefined) {
-				node.style.opacity = String(Math.min(1, Math.max(0, values.opacity)))
-			}
-
-			if (Object.keys(values).some((key) => key !== 'opacity')) {
-				node.style.transform = `translateX(${values.x ?? 0}px) translateY(${values.y ?? 0}px) scale(${values.scale ?? 1}) scaleX(${values.scaleX ?? 1}) scaleY(${values.scaleY ?? 1}) rotate(${values.rotate ?? 0}deg)`
-			}
-		},
+		write,
+		delegate: (req: DelegatedRequest): DelegatedRun | null => delegatedRun(node, req, write),
 		restore() {
 			node.style.transform = transform
 			node.style.opacity = opacity
 		},
+		gesture(kind, callbacks) {
+			if (kind === 'press') {
+				const down = (event: PointerEvent) => {
+					try {
+						// Preserve descendant click targets when this host wraps controls.
+						;(event.target as Element | null)?.setPointerCapture?.(event.pointerId)
+					} catch (error) {
+						// Synthetic pointer dispatch has no active browser pointer.
+						if (event.isTrusted || (error as Error).name !== 'NotFoundError') {
+							throw error
+						}
+					}
+
+					callbacks.start()
+				}
+
+				const end = () => callbacks.end()
+				node.addEventListener('pointerdown', down)
+				node.addEventListener('pointerup', end)
+				node.addEventListener('pointercancel', end)
+				return () => {
+					node.removeEventListener('pointerdown', down)
+					node.removeEventListener('pointerup', end)
+					node.removeEventListener('pointercancel', end)
+				}
+			}
+
+			node.addEventListener('focus', callbacks.start)
+			node.addEventListener('blur', callbacks.end)
+			return () => {
+				node.removeEventListener('focus', callbacks.start)
+				node.removeEventListener('blur', callbacks.end)
+			}
+		},
 	}
 }

package/src/index.ts

@@ -1,8 +1,22 @@
-import { MotionView, MotionRow, MotionPressable } from './components.tsrx'
-/** Bounded motion hosts for shared xplat UI primitives. */
-export const motion = { View: MotionView, Row: MotionRow, Pressable: MotionPressable }
+import { MotionView, MotionRow, MotionPressable, createMotion } from './components.tsrx'
+/** Bounded motion hosts for shared xplat UI primitives; `motion.create` wraps
+ *  any component that accepts `ref`/`style`/`children`. */
+export const motion = {
+	View: MotionView,
+	Row: MotionRow,
+	Pressable: MotionPressable,
+	create: createMotion,
+}
+
 export { MotionConfig, useReducedMotion } from './config.tsrx'
-export { useMotionValue, useTransform, useSpring, useMotionValueEvent } from './hooks.tsrx'
+export {
+	useMotionValue,
+	useTransform,
+	useSpring,
+	useMotionValueEvent,
+	useAnimate,
+} from './hooks.tsrx'
+
 export type { MotionValue, MotionValueEvents } from './value'
 export type { AnimationControls, AnimationResult } from './engine'
 export type * from './types'

package/src/index.web.ts

@@ -1,8 +1,22 @@
-import { MotionView, MotionRow, MotionPressable } from './components.tsrx'
-/** Bounded motion hosts for shared xplat UI primitives. */
-export const motion = { View: MotionView, Row: MotionRow, Pressable: MotionPressable }
+import { MotionView, MotionRow, MotionPressable, createMotion } from './components.tsrx'
+/** Bounded motion hosts for shared xplat UI primitives; `motion.create` wraps
+ *  any component that accepts `ref`/`style`/`children`. */
+export const motion = {
+	View: MotionView,
+	Row: MotionRow,
+	Pressable: MotionPressable,
+	create: createMotion,
+}
+
 export { MotionConfig, useReducedMotion } from './config.tsrx'
-export { useMotionValue, useTransform, useSpring, useMotionValueEvent } from './hooks.tsrx'
+export {
+	useMotionValue,
+	useTransform,
+	useSpring,
+	useMotionValueEvent,
+	useAnimate,
+} from './hooks.tsrx'
+
 export type { MotionValue, MotionValueEvents } from './value'
 export type { AnimationControls, AnimationResult } from './engine'
 export type * from './types'

package/src/pan.ts

@@ -0,0 +1,92 @@
+import {
+	Manager,
+	HandlerType,
+	GestureState,
+	GestureHandlerStateEvent,
+	GestureHandlerTouchEvent,
+} from '@nativescript-community/gesturehandler'
+
+import { Utils } from '@nativescript/core'
+import type { PanCallbacks } from './host-types'
+import type { DragInfo } from './types'
+
+// Separate tag range from the plugin's built-in gesture observers. Manager
+// shares the registry; applications should reserve this range for motion.
+let tag = 700000000
+
+export function attachPan(node: any, axis: true | 'x' | 'y', callbacks: PanCallbacks) {
+	// 2.0.45 config setters take raw Android pixels (their converter is
+	// getter-only); payloads already convert back to DIP.
+	const androidHost = Boolean((globalThis as any).android)
+	const slop = androidHost ? Utils.layout.toDevicePixels(8) : 8
+	const handler = Manager.getInstance().createGestureHandler(HandlerType.PAN, tag++, {
+		shouldCancelWhenOutside: false,
+		// Android retains its radial touch-slop default alongside activeOffset.
+		// Disable that alternative trigger for single-axis arbitration.
+		...(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 }
+	const sample = (args: any, cancelled = false): DragInfo => {
+		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,
+		}
+	}
+
+	const state = (args: any) => {
+		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: any) => {
+		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)
+	}
+}

package/src/pan.web.ts

@@ -0,0 +1,116 @@
+import type { PanCallbacks } from './host-types'
+import type { DragInfo } from './types'
+
+export function attachPan(node: HTMLElement, axis: true | 'x' | 'y', callbacks: PanCallbacks) {
+	const touchAction = node.style.touchAction
+	node.style.touchAction = axis === 'x' ? 'pan-y' : axis === 'y' ? 'pan-x' : 'none'
+	let pointer: number | undefined
+	let active = false
+	let start = { x: 0, y: 0 }
+	let last = start
+	let time = 0
+	let velocity = { x: 0, y: 0 }
+	let velocityTime = 0
+	const sample = (event: PointerEvent, cancelled = false): DragInfo => {
+		const point = cancelled ? last : { x: event.clientX, y: event.clientY }
+		const delta = { x: point.x - last.x, y: point.y - last.y }
+		const elapsed = event.timeStamp - time
+		if (elapsed > 0 && (delta.x || delta.y)) {
+			velocity = { x: (delta.x * 1000) / elapsed, y: (delta.y * 1000) / elapsed }
+			velocityTime = event.timeStamp
+		} else if (event.timeStamp - velocityTime > 100) {
+			velocity = { x: 0, y: 0 }
+		}
+
+		last = point
+		time = event.timeStamp
+		return {
+			point,
+			delta,
+			offset: { x: point.x - start.x, y: point.y - start.y },
+			velocity,
+			cancelled,
+		}
+	}
+
+	const down = (event: PointerEvent) => {
+		if (pointer !== undefined || event.button !== 0 || event.isPrimary === false) {
+			return
+		}
+
+		pointer = event.pointerId
+		start = last = { x: event.clientX, y: event.clientY }
+		time = velocityTime = event.timeStamp
+		velocity = { x: 0, y: 0 }
+		try {
+			node.setPointerCapture?.(event.pointerId)
+		} catch (error) {
+			// Synthetic pointer dispatch has no active browser pointer.
+			if (event.isTrusted || (error as Error).name !== 'NotFoundError') {
+				throw error
+			}
+		}
+	}
+
+	const move = (event: PointerEvent) => {
+		if (event.pointerId !== pointer) {
+			return
+		}
+
+		const info = sample(event)
+		if (!active) {
+			const primary = axis === 'y' ? info.offset.y : info.offset.x
+			const other = axis === 'y' ? info.offset.x : info.offset.y
+			if (axis !== true && Math.abs(other) > 8 && Math.abs(primary) <= 8) {
+				finish(event, true)
+				return
+			}
+
+			if ((axis === true ? Math.hypot(info.offset.x, info.offset.y) : Math.abs(primary)) <= 8) {
+				return
+			}
+
+			active = true
+			callbacks.start(event, info)
+		}
+
+		callbacks.move(event, info)
+	}
+
+	const finish = (event: PointerEvent, cancelled: boolean) => {
+		if (pointer === undefined || event.pointerId !== pointer) {
+			return
+		}
+
+		const id = pointer
+		pointer = undefined
+		if (active) {
+			active = false
+			callbacks.end(event, sample(event, cancelled))
+		}
+
+		if (node.hasPointerCapture?.(id)) {
+			node.releasePointerCapture(id)
+		}
+	}
+
+	const up = (event: PointerEvent) => finish(event, false)
+	const cancel = (event: PointerEvent) => finish(event, true)
+	node.addEventListener('pointerdown', down)
+	node.addEventListener('pointermove', move)
+	node.addEventListener('pointerup', up)
+	node.addEventListener('pointercancel', cancel)
+	node.addEventListener('lostpointercapture', cancel)
+	return () => {
+		node.removeEventListener('pointerdown', down)
+		node.removeEventListener('pointermove', move)
+		node.removeEventListener('pointerup', up)
+		node.removeEventListener('pointercancel', cancel)
+		node.removeEventListener('lostpointercapture', cancel)
+		if (pointer !== undefined && node.hasPointerCapture?.(pointer)) {
+			node.releasePointerCapture(pointer)
+		}
+
+		node.style.touchAction = touchAction
+	}
+}

package/src/presence-input.ts

@@ -15,12 +15,19 @@ export function blockInput(node: any): () => void {
 	}
 
 	node.isUserInteractionEnabled = false
-	if (node.ios) {node.ios.accessibilityElementsHidden = true}
+	if (node.ios) {
+		node.ios.accessibilityElementsHidden = true
+	}
+
 	node.android?.setImportantForAccessibility?.(4) // IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
 	return () => {
 		node.isUserInteractionEnabled = enabled
-		if (node.ios) {node.ios.accessibilityElementsHidden = iosHidden}
-		if (androidImportance !== undefined)
-			{node.android?.setImportantForAccessibility?.(androidImportance)}
+		if (node.ios) {
+			node.ios.accessibilityElementsHidden = iosHidden
+		}
+
+		if (androidImportance !== undefined) {
+			node.android?.setImportantForAccessibility?.(androidImportance)
+		}
 	}
 }

package/src/presence-input.web.ts

@@ -3,14 +3,23 @@ export function blockInput(node: HTMLElement): () => void {
 	const hidden = node.getAttribute('aria-hidden')
 	const pointerEvents = node.style.pointerEvents
 	const focused = node.ownerDocument.activeElement as HTMLElement | null
-	if (focused && node.contains(focused)) {focused.blur()}
+	if (focused && node.contains(focused)) {
+		focused.blur()
+	}
+
 	node.setAttribute('inert', '')
 	node.setAttribute('aria-hidden', 'true')
 	node.style.pointerEvents = 'none'
 	return () => {
-		if (!inert) {node.removeAttribute('inert')}
-		if (hidden === null) {node.removeAttribute('aria-hidden')}
-		else {node.setAttribute('aria-hidden', hidden)}
+		if (!inert) {
+			node.removeAttribute('inert')
+		}
+
+		if (hidden === null) {
+			node.removeAttribute('aria-hidden')
+		} else {
+			node.setAttribute('aria-hidden', hidden)
+		}
 
 		node.style.pointerEvents = pointerEvents
 	}

package/src/presence-state.ts

@@ -20,7 +20,10 @@ export class PresenceState {
 	) {}
 	register(member: PresenceMember): () => void {
 		this.members.add(member)
-		if (!this.present) {this.restart(member)}
+		if (!this.present) {
+			this.restart(member)
+		}
+
 		return () => {
 			this.members.delete(member)
 			this.pending.delete(member)
@@ -28,26 +31,43 @@ export class PresenceState {
 		}
 	}
 	setPresent(present: boolean) {
-		if (this.disposed || present === this.present) {return}
+		if (this.disposed || present === this.present) {
+			return
+		}
+
 		this.present = present
 		++this.generation
 		this.removed = false
 		this.pending.clear()
 		if (present) {
-			for (const member of this.members) {member.enter()}
+			for (const member of this.members) {
+				member.enter()
+			}
 		} else {
-			for (const member of this.members) {this.restart(member)}
+			for (const member of this.members) {
+				this.restart(member)
+			}
+
 			this.check()
 		}
 	}
 	restart(member: PresenceMember) {
-		if (this.disposed || this.present || !this.members.has(member)) {return}
+		if (this.disposed || this.present || !this.members.has(member)) {
+			return
+		}
+
 		const token = ++this.sequence
 		this.pending.set(member, token)
 		void member.exit().then((result) => {
-			if (this.disposed || this.present || this.pending.get(member) !== token) {return}
+			if (this.disposed || this.present || this.pending.get(member) !== token) {
+				return
+			}
+
 			// Replacement is owned by the next restart. Cancellation cannot remove a live subtree.
-			if (result !== 'finished') {return}
+			if (result !== 'finished') {
+				return
+			}
+
 			this.pending.delete(member)
 			this.check()
 		})

package/src/presence.tsrx

@@ -11,13 +11,13 @@ export function Presence(props: PresenceProps) @{
 	const [retained, setRetained] = useState(props.present)
 	const latest = useRef(props)
 	latest.current = props
-	const ref = useRef<PresenceState | null>(null)
-	if (!ref.current) ref.current = new PresenceState(props.present, () => {
+	const stateRef = useRef<PresenceState | null>(null)
+	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<any>(null)
 	const restoreInput = useRef<(() => void) | null>(null)
 	const syncInput = () => {
@@ -38,14 +38,13 @@ export function Presence(props: PresenceProps) @{
 		host.current = null
 	}, [])
 
-	const { present, onExitComplete, children, bind, ...viewProps } = props
+	const { present, onExitComplete, children, ref, ...viewProps } = props
 
 	@if (props.present || retained) {
-		<View {...viewProps} bind={(node: any) => {
+		<View {...viewProps} ref={[(node: any) => {
 			if (host.current !== node) { restoreInput.current?.(); restoreInput.current = null; host.current = node }
 			syncInput()
-			bind?.(node)
-		}}>
+		}, ref]}>
 			<PresenceContext value={state}>{children}</PresenceContext>
 		</View>
 	}

package/src/reduced-motion.ts

@@ -1,4 +1,4 @@
-import { Application, Utils } from '@nativescript/core'
+import { Application, Device, Utils } from '@nativescript/core'
 
 export function readReducedMotion(): boolean {
 	const platform = globalThis as any
@@ -6,7 +6,19 @@ export function readReducedMotion(): boolean {
 		return Boolean(platform.UIAccessibilityIsReduceMotionEnabled?.())
 	}
 
-	const context = Utils.android.getApplicationContext()
+	if (!platform.android) {
+		return false
+	}
+
+	if (
+		Number(Device.sdkVersion) >= 26 &&
+		platform.android.animation?.ValueAnimator?.areAnimatorsEnabled?.() === false
+	) {
+		return true
+	}
+
+	// `Utils.android` is a {} stub in the pinned Windows core build.
+	const context = (Utils.android as any).getApplicationContext()
 	return (
 		platform.android.provider.Settings.Global.getFloat(
 			context.getContentResolver(),
@@ -16,9 +28,16 @@ export function readReducedMotion(): boolean {
 	)
 }
 
-// Poll only while subscribed; this also detects Android developer-setting changes
-// without owning a Java ContentObserver class. Resume refreshes immediately.
+// iOS posts a notification on preference change; Android has no event, so it
+// polls only while subscribed (also catches developer-setting changes) and
+// refreshes on resume.
 export function observeReducedMotion(notify: () => void): () => void {
+	if (Application.ios) {
+		const name = (globalThis as any).UIAccessibilityReduceMotionStatusDidChangeNotification
+		const observer = Application.ios.addNotificationObserver(name, notify)
+		return () => Application.ios.removeNotificationObserver(observer, name)
+	}
+
 	let previous = readReducedMotion()
 	const check = () => {
 		const next = readReducedMotion()