@octane-xplat/motion 0.7.2 → 0.9.0

package/UPSTREAM.md

@@ -6,16 +6,16 @@ inspected from Octane main on 2026-09-29. Its UPSTREAM.md pins Motion 12.42.2
 `motion-dom@12.42.2` and bundles its pure numeric generators and interpolation.
 The adapter is original code; it does not copy upstream's DOM host factory.
 
-| Contract                                         | Upstream reference under packages/motion                          | Xplat implementation / evidence                                                                   |
-| ------------------------------------------------ | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| Initial and changing targets, equal destinations | src/index.ts; tests/conformance/rerender.test.ts, effects.test.ts | Compiled wrappers over UI; components.web.test.tsrx                                               |
-| Numeric spring/tween samples                     | Motion's motion-dom animation/generators                          | Reused generators; engine.test.ts compares irregular-time samples                                 |
-| Stable value, subscriptions, style replacement   | src/useMotionValue.ts; tests/conformance/motionValue.test.ts      | Numeric adapter with native clock; components.web.test.tsrx                                       |
-| Spring set versus jump; follow source            | src/useSpring.ts; tests/conformance/useSpring.test.ts             | Owned spring interception and cleanup; hook tests                                                 |
-| Derived numeric values                           | src/useTransform.ts; tests/conformance/useTransform.test.ts       | Upstream interpolation, direct subscriptions; hook tests                                          |
-| Config and reduced motion                        | src/context.ts; tests/conformance/reducedMotionConfig.test.ts     | Context inheritance; transforms settle immediately, opacity may animate                           |
-| Exit lifecycle                                   | src/index.ts; tests/conformance/exit.test.ts                      | Deliberate live-subtree retention on both leaves; presence.web.test.tsrx and native presence test |
-| Retained hosts on native                         | Not a DOM binding concern                                         | components.mobile.test.tsrx uses the universal object driver                                      |
+| Contract                                         | Upstream reference under packages/motion                          | Xplat implementation / evidence                                                                                                                                      |
+| ------------------------------------------------ | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Initial and changing targets, equal destinations | src/index.ts; tests/conformance/rerender.test.ts, effects.test.ts | Compiled wrappers over UI; components.web.test.tsrx                                                                                                                  |
+| Numeric spring/tween samples                     | Motion's motion-dom animation/generators                          | Reused generators; engine.test.ts compares irregular-time samples                                                                                                    |
+| Stable value, subscriptions, style replacement   | src/useMotionValue.ts; tests/conformance/motionValue.test.ts      | Numeric adapter with native clock; components.web.test.tsrx                                                                                                          |
+| Spring set versus jump; follow source            | src/useSpring.ts; tests/conformance/useSpring.test.ts             | Owned spring interception and cleanup; hook tests                                                                                                                    |
+| Derived numeric values                           | src/useTransform.ts; tests/conformance/useTransform.test.ts       | Upstream interpolation, direct subscriptions; hook tests                                                                                                             |
+| Config and reduced motion                        | src/context.ts; tests/conformance/reducedMotionConfig.test.ts     | Context inheritance; spring transforms settle immediately on live preference changes while opacity can keep animating (`components.web.test.tsrx`, `engine.test.ts`) |
+| Exit lifecycle                                   | src/index.ts; tests/conformance/exit.test.ts                      | Deliberate live-subtree retention on both leaves; presence.web.test.tsrx and native presence test                                                                    |
+| Retained hosts on native                         | Not a DOM binding concern                                         | components.mobile.test.tsrx uses the universal object driver                                                                                                         |
 
 Source links: [Octane motion](https://github.com/octanejs/octane/tree/main/packages/motion),
 [upstream ledger](https://github.com/octanejs/octane/blob/main/packages/motion/UPSTREAM.md),
@@ -55,7 +55,40 @@ An ancestor unmount always disposes immediately. Nested boundaries are independe
 
 Unit and DOM tests establish bounded behavior, not full Framer Motion parity.
 Universal object-driver tests establish retention and lifecycle without an OS.
-Physical iOS/Android interruption, cancellation, gesture velocity/arbitration,
-background/resume, and frame pacing are pending. Native system preference
-observation polls at 500 ms while subscribed and refreshes on resume; Android
-uses animator_duration_scale. Real-device accessibility behavior remains pending.
+Partial device observations are recorded in the
+[motion v1 validation matrix](../../docs/animation-notes.md). An isolated iOS
+26.5 MotionProbe run verified pan completion/cancellation, Presence
+focus/reversal/removal, and live Reduce Motion, including immediate transform
+settlement. The API 35 Android emulator verified tween/spring completion,
+cancellation, disposal, pan phase delivery, focus release on Presence exit, and
+live reduced-motion observation. Changing `animator_duration_scale` to `0`
+while mounted changed the probe state to reduced, and a subsequent idle snapshot
+showed the `-100` tween destination; deleting the setting restored the default
+and the state returned to normal. The idle snapshot does not establish
+frame-accurate settlement time. Its injected pan release reported zero velocity,
+and the accessibility runner did not reach idle during reversal, so those
+checks remain open.
+
+A physical iPhone 13 Pro Max running iOS 27.0.1 launched the temporary direct
+MotionProbe under an Xcode UI-test host. The test verified tween-to-spring
+retargeting, explicit `MotionValue.stop()` cancellation, native pan begin/move/end
+with nonzero release velocity and settling, and Presence child retention through
+a focus-triggered exit/reversal. Presence dismissed the keyboard; after
+re-entry the retained field accepted focus and typed input, and a later exit
+dismissed the keyboard and reported one removal. The failed check expected the
+keyboard to remain open immediately after the focus-triggered reversal; that
+expectation conflicts with Presence releasing focus on exit. The physical
+Reduce Motion change remains inconclusive: the test did not record the system
+switch value before and after its Settings tap. A corrected rerun was blocked
+when the phone re-locked.
+
+Physical Android CPH2551 evidence covers app launch and target retarget only;
+ADB sees the handset, but its keyguard is currently locked. The regular mobile app now builds and
+mounts on the iOS 26.5 simulator using NativeScript's `NSObject.extend()` API
+for the auth-session presentation delegate. The Android build also passes with
+the iOS delegate behind the `NSObject` runtime guard. Motion-specific simulator,
+emulator, and iPhone checks still use a temporary direct MotionProbe entry to
+isolate the driver. Physical input suppression during exit, Android gesture
+cancellation/natural velocity, background/resume, and frame pacing remain
+uncharacterized. Native preference observation polls at 500 ms while subscribed
+and refreshes on resume; Android reads `animator_duration_scale`.

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "94107006-b597-4968-a144-f6d341177465",
+  "buildId": "f3ab3f25-9a1e-4436-9723-a402e32f5c04",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "e19c4c64-edd7-4cd8-a1e3-a06e64a02fec",
+  "buildId": "fcb6bc74-25e4-4f8e-af58-42140062b9cd",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@octane-xplat/motion",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Declarative motion and retained presence for Octane on web, iOS and Android",
   "keywords": [
-    "octane",
-    "xplat",
-    "cross-platform",
+    "android",
     "animation",
+    "cross-platform",
+    "ios",
     "motion",
-    "transitions",
-    "spring",
-    "presence",
     "nativescript",
-    "ios",
-    "android",
-    "web"
+    "octane",
+    "presence",
+    "spring",
+    "transitions",
+    "web",
+    "xplat"
   ],
-  "license": "MIT",
   "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/motion",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/motion"
   },
   "files": [
@@ -43,15 +43,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@octane-xplat/ui": "0.7.2",
+    "@octane-xplat/ui": "0.9.0",
     "motion-dom": "12.42.2"
   },
   "devDependencies": {
-    "@nativescript-community/octane": "0.2.1",
+    "@nativescript-community/octane": "0.2.4",
     "@nativescript/core": "9.1.2",
     "@octanejs/vite-plugin": "0.1.61",
     "jsdom": "30.1.1",
     "octane": "0.6.3",
+    "tsrx-typegen": "0.2.1",
     "typescript": "5.9.3",
     "vite": "8.3.0",
     "vitest": "5.0.1"
@@ -70,7 +71,10 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
-    "test": "vitest run"
+    "build": "vite build && vite build --mode native && pnpm typegen",
+    "test": "vitest run",
+    "typegen": "tsc -p tsconfig.types.json",
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check"
   }
 }

package/src/components.mobile.test.tsrx

@@ -1,30 +1,43 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createObjectContainer, createObjectDriver, createUniversalRoot, flushUniversalSync } from 'octane/universal/native'
 import { motion, MotionConfig } from './index'
 
 function NativeBox(props: any) @{
 	<MotionConfig reducedMotion="always">
-		<motion.View id="native" initial={{ x: 10 }} animate={{ x: props.x }} transition={{ duration: 20 }} />
+		<motion.View
+			id="native"
+			initial={{ x: 10 }}
+			animate={{ x: props.x }}
+			transition={{ duration: 20 }}
+			onAnimationComplete={props.done}
+		/>
 	</MotionConfig>
 }
 
 describe('native compiled hosts', () => {
-	it('updates retained hosts through universal context and props', () => {
+	it('updates retained hosts and reports one completion for each changed destination', async () => {
 		const container = createObjectContainer('nativescript')
 		const root = createUniversalRoot(container, createObjectDriver('nativescript'))
-		root.render(NativeBox, { x: 50 })
+		const done = vi.fn()
+		root.render(NativeBox, { x: 50, done })
 		const node: any = container.children[0]
 		expect(node.translateX).toBe(50)
-		flushUniversalSync(() => root.render(NativeBox, { x: 80 }))
+		await new Promise((resolve) => setTimeout(resolve, 0))
+		expect(done).toHaveBeenCalledTimes(1)
+		flushUniversalSync(() => root.render(NativeBox, { x: 50, done }))
+		await new Promise((resolve) => setTimeout(resolve, 0))
+		expect(done).toHaveBeenCalledTimes(1)
+		flushUniversalSync(() => root.render(NativeBox, { x: 80, done }))
+		await new Promise((resolve) => setTimeout(resolve, 0))
 		expect(container.children[0]).toBe(node)
 		expect(node.translateX).toBe(80)
+		expect(done).toHaveBeenCalledTimes(2)
 		root.unmount()
 		expect(container.children.length).toBe(0)
 	})
 })
 
-import { vi } from 'vitest'
 import { useEffect } from 'octane'
 import { Presence } from './index'
 let nativeCleanups = 0

package/src/components.web.test.tsrx

@@ -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) {
@@ -40,6 +40,7 @@ describe('motion hosts', () => {
 		await act(async () => {})
 		expect(mounted.container.querySelector('#box')).toBe(node)
 		expect(node.style.transform).toContain('translateX(80px)')
+		expect(done).toHaveBeenCalledTimes(2)
 		mounted.close()
 	})
 
@@ -120,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', () => {

package/src/engine.test.ts

@@ -123,4 +123,17 @@ describe('portable playback', () => {
 		expect(await result).toBe('replaced')
 		expect(time.count()).toBe(0)
 	})
+
+	it('reduces positional springs immediately while preserving opacity motion', async () => {
+		const time = fakeClock()
+		const controller = new Controller(time.clock)
+		const result = controller.animate({ x: 100, opacity: 0 }, { type: 'spring' }, true)
+
+		expect(controller.snapshot()).toMatchObject({ x: 100, opacity: 1 })
+		expect(time.count()).toBe(1)
+		time.advance(10000)
+		expect(await result).toBe('finished')
+		expect(controller.snapshot()).toEqual({ x: 100, opacity: 0 })
+		controller.destroy()
+	})
 })

package/src/engine.ts

@@ -1,6 +1,6 @@
 import { keyframes, spring } from 'motion-dom'
-import type { Clock } from './clock-types'
-import type { Transition } from './types'
+import type { Clock } from './clock-types.js'
+import type { Transition } from './types.js'
 
 /** Terminal status; cancellation never masquerades as completion. */
 export type AnimationResult = 'finished' | 'cancelled' | 'replaced'
@@ -12,10 +12,10 @@ export interface AnimationControls {
 
 export function validateTransition(t: Transition): void {
 	if (t.type === 'spring' && (t.duration !== undefined || t.ease !== undefined)) {
-        throw new Error('motion: physical springs do not accept duration or ease')
-    }
+		throw new Error('motion: physical springs do not accept duration or ease')
+	}
 
-    const allowed = [
+	const allowed = [
 		'type',
 		'duration',
 		'delay',

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/types.ts

@@ -1,5 +1,9 @@
-import type { ViewProps, RowProps, PressableProps } from '@octane-xplat/ui'
-import type { MotionValue } from './value'
+import type { View, Row, Pressable } from '@octane-xplat/ui'
+import type { MotionValue } from './value.js'
+
+type ViewProps = Parameters<typeof View>[0]
+type RowProps = Parameters<typeof Row>[0]
+type PressableProps = Parameters<typeof Pressable>[0]
 
 /** Supported channels. Translation is CSS pixels/DIP; rotation is degrees. */
 export type MotionKey = 'opacity' | 'x' | 'y' | 'scale' | 'scaleX' | 'scaleY' | 'rotate'

package/src/value.ts

@@ -1,6 +1,6 @@
-import type { Clock } from './clock-types'
-import type { Transition } from './types'
-import { runAnimation, validateTransition, type AnimationControls } from './engine'
+import type { Clock } from './clock-types.js'
+import type { Transition } from './types.js'
+import { runAnimation, validateTransition, type AnimationControls } from './engine.js'
 
 /** Events supported by numeric motion values. */
 export interface MotionValueEvents {

package/types/engine.d.ts

@@ -1,5 +1,5 @@
-import type { Clock } from './clock-types';
-import type { Transition } from './types';
+import type { Clock } from './clock-types.js';
+import type { Transition } from './types.js';
 /** Terminal status; cancellation never masquerades as completion. */
 export type AnimationResult = 'finished' | 'cancelled' | 'replaced';
 /** A cancellable animation whose finished promise always settles. */

package/types/index.d.ts

@@ -5,14 +5,16 @@ import type {
 	MotionPressableProps,
 	MotionConfigProps,
 	Transition,
-} from './types'
-import type { MotionValue, MotionValueEvents } from './value'
+} from './types.js'
+
+import type { MotionValue, MotionValueEvents } from './value.js'
 /** Bounded motion hosts for shared xplat UI primitives. */
 export declare const motion: {
 	View: UniversalComponent<MotionViewProps>
 	Row: UniversalComponent<MotionRowProps>
 	Pressable: UniversalComponent<MotionPressableProps>
 }
+
 /** Inherit transition and reduced-motion defaults within this root. */
 export declare const MotionConfig: UniversalComponent<MotionConfigProps>
 /** Observe the live system reduced-motion preference. */
@@ -25,6 +27,7 @@ export declare function useMotionValueEvent<K extends keyof MotionValueEvents>(
 	event: K,
 	callback: MotionValueEvents[K],
 ): void
+
 /** Derive a numeric value by mapping ranges or transforming source samples. */
 export declare function useTransform(
 	source: MotionValue,
@@ -32,22 +35,26 @@ export declare function useTransform(
 	output: number[],
 	options?: { clamp?: boolean },
 ): MotionValue
+
 export declare function useTransform(
 	source: MotionValue,
 	transform: (value: number) => number,
 ): MotionValue
+
 export declare function useTransform(
 	source: MotionValue[],
 	transform: (values: number[]) => number,
 ): MotionValue
+
 /** Spring toward set targets or a source MotionValue; jump snaps. */
 export declare function useSpring(
 	source: number | MotionValue,
 	options?: Omit<Transition, 'type' | 'duration' | 'ease' | 'delay'>,
 ): MotionValue
+
 export type { MotionValue, MotionValueEvents }
-export type { AnimationControls, AnimationResult } from './engine'
-export type * from './types'
+export type { AnimationControls, AnimationResult } from './engine.js'
+export type * from './types.js'
 
 /** Retain live children through exit; removing the boundary disposes immediately. */
-export declare const Presence: UniversalComponent<import('./types').PresenceProps>
+export declare const Presence: UniversalComponent<import('./types.js').PresenceProps>

package/types/types.d.ts

@@ -1,5 +1,8 @@
-import type { ViewProps, RowProps, PressableProps } from '@octane-xplat/ui';
-import type { MotionValue } from './value';
+import type { View, Row, Pressable } from '@octane-xplat/ui';
+import type { MotionValue } from './value.js';
+type ViewProps = Parameters<typeof View>[0];
+type RowProps = Parameters<typeof Row>[0];
+type PressableProps = Parameters<typeof Pressable>[0];
 /** Supported channels. Translation is CSS pixels/DIP; rotation is degrees. */
 export type MotionKey = 'opacity' | 'x' | 'y' | 'scale' | 'scaleX' | 'scaleY' | 'rotate';
 /** Absolute numeric destinations; omitted channels retain their current values. */
@@ -49,3 +52,4 @@ export interface PresenceProps extends ViewProps {
     /** Called once after all registered exits finish, never after reversal/disposal. */
     onExitComplete?: () => void;
 }
+export {};

package/types/value.d.ts

@@ -1,6 +1,6 @@
-import type { Clock } from './clock-types';
-import type { Transition } from './types';
-import { type AnimationControls } from './engine';
+import type { Clock } from './clock-types.js';
+import type { Transition } from './types.js';
+import { type AnimationControls } from './engine.js';
 /** Events supported by numeric motion values. */
 export interface MotionValueEvents {
     change: (value: number) => void;