@octane-xplat/ui 0.7.2 → 0.9.0

package/src/pan.mobile.test.tsrx

@@ -0,0 +1,116 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@nativescript/core', () => ({
+	Utils: { layout: { getDisplayDensity: () => 2 } },
+}))
+
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+} from 'octane/universal/native'
+
+import { usePan } from './pan.tsrx'
+import type { PanEvent } from './props'
+
+const events: PanEvent[] = []
+
+function PanHost() @{
+	const onPan = usePan((event) => events.push(event))
+
+	<flexboxlayout id="pan-host" onPan={onPan} />
+}
+
+function mountPanHost() {
+	const container = createObjectContainer('nativescript')
+	const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+	root.render(PanHost as any, {})
+	return { container, root, host: container.children[0] }
+}
+
+function nativeEvent(action: number) {
+	return { getActionMasked: () => action }
+}
+
+function tracker() {
+	return {
+		addMovement: vi.fn(),
+		computeCurrentVelocity: vi.fn(),
+		getXVelocity: () => 800,
+		getYVelocity: () => -240,
+		recycle: vi.fn(),
+	}
+}
+
+function installAndroid(trackerInstance: ReturnType<typeof tracker>) {
+	vi.stubGlobal('android', {
+		view: {
+			MotionEvent: { ACTION_CANCEL: 3 },
+			VelocityTracker: { obtain: () => trackerInstance },
+		},
+	})
+}
+
+afterEach(() => {
+	events.length = 0
+	vi.unstubAllGlobals()
+})
+
+describe('native pan normalization', () => {
+	it('preserves Android ACTION_CANCEL as cancelled and clears release velocity', () => {
+		const velocityTracker = tracker()
+		installAndroid(velocityTracker)
+		const { container, root, host } = mountPanHost()
+		const target = { id: 'native-pan-target' }
+
+		container.dispatchEvent(host, 'pan', {
+			state: 1,
+			deltaX: 0,
+			deltaY: 0,
+			android: { current: nativeEvent(2) },
+			view: target,
+		})
+
+		container.dispatchEvent(host, 'pan', {
+			// NativeScript's Android pan recognizer reports ended for both
+			// ACTION_UP and ACTION_CANCEL; the MotionEvent disambiguates them.
+			state: 3,
+			deltaX: 40,
+			deltaY: 0,
+			android: { current: nativeEvent(3) },
+			view: target,
+		})
+
+		expect(events.map((event) => event.state)).toEqual(['began', 'cancelled'])
+		expect(events[1]).toMatchObject({ state: 'cancelled', vx: 0, vy: 0, target })
+		expect(velocityTracker.recycle).toHaveBeenCalledOnce()
+		expect(velocityTracker.addMovement).toHaveBeenCalledOnce()
+		root.unmount()
+	})
+
+	it('keeps ACTION_UP ended and converts Android velocity from px/s to dip/s', () => {
+		const velocityTracker = tracker()
+		installAndroid(velocityTracker)
+		const { container, root, host } = mountPanHost()
+
+		container.dispatchEvent(host, 'pan', {
+			state: 1,
+			deltaX: 0,
+			deltaY: 0,
+			android: { current: nativeEvent(0) },
+		})
+
+		container.dispatchEvent(host, 'pan', {
+			state: 3,
+			deltaX: 40,
+			deltaY: 0,
+			android: { current: nativeEvent(1) },
+		})
+
+		expect(events.map((event) => event.state)).toEqual(['began', 'ended'])
+		expect(events[1]).toMatchObject({ state: 'ended', vx: 400, vy: -120 })
+		expect(velocityTracker.recycle).toHaveBeenCalledOnce()
+		root.unmount()
+	})
+})

package/src/pan.tsrx

@@ -11,6 +11,12 @@ import type { PanEvent } from './props';
 const PAN_STATE = ['cancelled', 'began', 'moved', 'ended'] as const;
 
 function panVelocity(e: any, state: number, trackerRef: { current: any }): { vx: number; vy: number } {
+	if (state === 0) {
+		trackerRef.current?.recycle?.()
+		trackerRef.current = null
+		return { vx: 0, vy: 0 }
+	}
+
 	const recognizer = e.ios;
 	const nativeView = e.view?.nativeViewProtected;
 	if (recognizer?.velocityInView && nativeView) {
@@ -45,13 +51,25 @@ function panVelocity(e: any, state: number, trackerRef: { current: any }): { vx:
 	return velocity;
 }
 
+function nativePanState(e: any): number {
+	const motionEvent = e.android?.current;
+	if (!motionEvent) return e.state;
+
+	const action = motionEvent.getActionMasked?.();
+	const actionCancel = (globalThis as any).android?.view?.MotionEvent?.ACTION_CANCEL ?? 3;
+	// NativeScript Android reports ACTION_CANCEL as `ended`; the MotionEvent
+	// preserves the distinction needed by the shared pan contract.
+	return action === actionCancel ? 0 : e.state;
+}
+
 export function usePan(cb?: (e: PanEvent) => void): ((e: any) => void) | undefined {
 	const velocityTracker = useRef<any>(null);
 	// Memoized so the driver's observer doesn't churn per render — each
 	// re-subscribe would re-attach a UIPanGestureRecognizer.
 	const handler = useCallback((e: any) => {
-		const state = PAN_STATE[e.state] ?? 'moved';
-		const velocity = panVelocity(e, e.state, velocityTracker);
+		const nativeState = nativePanState(e);
+		const state = PAN_STATE[nativeState] ?? 'moved';
+		const velocity = panVelocity(e, nativeState, velocityTracker);
 		cb?.({
 			x: e.deltaX, y: e.deltaY, dx: e.deltaX, dy: e.deltaY,
 			vx: velocity.vx, vy: velocity.vy,

package/src/pan.web.tsrx

@@ -1,23 +1,51 @@
-import { useEffect } from 'octane';
+import { useEffect, useRef } from 'octane';
 import type { PanEvent } from './props';
 
+const VELOCITY_MAX_AGE_MS = 100;
+
 /** Shared pan plumbing for web leaves — pointerdown/move/up/cancel with
  *  pointer capture, normalized to the shared gesture shape
  *  {x,y,dx,dy,vx,vy,state,target}. `pointermove` isn't in octane's
  *  delegated-event set, so listeners attach to the element directly —
  *  that's why callers pass the bound-element ref. */
 export function usePan(el: { current: HTMLElement | null }, cb?: (e: PanEvent) => void): void {
+	const callback = useRef(cb);
+	callback.current = cb;
+	const enabled = Boolean(cb);
 	useEffect(() => {
 		const node = el.current;
-		if (!node || !cb) return;
-		let sx = 0, sy = 0, active = false, last = 0, lx = 0, t0 = 0;
+		if (!node || !enabled) return;
+		let sx = 0, sy = 0, active = false;
+		let last = 0, lx = 0, t0 = 0;
+		let vx = 0, vy = 0, velocityAt = 0;
 		const emit = (e: PointerEvent, state: string) => {
 			const now = performance.now();
 			const dt = Math.max(now - t0, 1) / 1000;
-			const vx = (e.clientX - lx) / dt;
-			const vy = (e.clientY - last) / dt;
+			const dx = e.clientX - lx;
+			const dy = e.clientY - last;
+			if (state === 'began') {
+				vx = vy = 0;
+				velocityAt = now;
+			} else if (dx !== 0 || dy !== 0) {
+				// Preserve this sample for pointer-up when it repeats the final coordinates.
+				vx = dx / dt;
+				vy = dy / dt;
+				velocityAt = now;
+			}
+
 			lx = e.clientX; last = e.clientY; t0 = now;
-			cb({ x: e.clientX - sx, y: e.clientY - sy, dx: e.clientX - sx, dy: e.clientY - sy, vx, vy, state, target: node });
+			const fresh = now - velocityAt <= VELOCITY_MAX_AGE_MS;
+			callback.current?.({
+				x: e.clientX - sx,
+				y: e.clientY - sy,
+				dx: e.clientX - sx,
+				dy: e.clientY - sy,
+				vx: fresh ? vx : 0,
+				vy: fresh ? vy : 0,
+				state,
+				target: node,
+			});
+
 		};
 
 		const down = (e: PointerEvent) => { active = true; sx = e.clientX; sy = e.clientY; t0 = performance.now(); lx = sx; last = sy; node.setPointerCapture?.(e.pointerId); emit(e, 'began'); };
@@ -34,5 +62,5 @@ export function usePan(el: { current: HTMLElement | null }, cb?: (e: PanEvent) =
 			node.removeEventListener('pointerup', up);
 			node.removeEventListener('pointercancel', cancel);
 		};
-	}, [el, cb]);
+	}, [el, enabled]);
 }

package/src/platformProps.ts

@@ -19,5 +19,6 @@ export function applyNativeProps(
 	if (bag) {
 		Object.assign(el, bag)
 	}
+
 	applyNativeModifiers(el, props.modifiers)
 }

package/src/popover.mobile.test.ts

@@ -13,6 +13,8 @@ vi.mock('@nativescript/core', () => ({
 		horizontalAlignment = ''
 		verticalAlignment = ''
 		style: Record<string, unknown> = {}
+		on() {}
+		off() {}
 		constructor() {
 			hosts.push(this)
 		}
@@ -32,7 +34,13 @@ vi.mock('./root-layout.mobile', () => ({
 	}),
 }))
 
-import { createObjectContainer, createObjectDriver, createUniversalRoot, flushUniversalSync } from 'octane/universal/native'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
 import { Popover } from './Popover.tsrx'
 
 // The full-screen host must not wear the caller's className — a backgrounded

package/src/pressable-accessibility.mobile.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+} from 'octane/universal/native'
+
+vi.mock('@nativescript/core', () => ({ isIOS: false, isAndroid: true }))
+vi.mock('./pan.tsrx', () => ({ usePan: () => undefined }))
+import { Pressable } from './Pressable.tsrx'
+
+describe('native disabled Pressable accessibility state', () => {
+	it('reports disabled ahead of selected/checked and restores state when enabled', () => {
+		const container = createObjectContainer('nativescript')
+		const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+		root.render(Pressable as any, {
+			disabled: true,
+			accessibilityState: { selected: true, checked: true },
+		})
+
+		expect(container.children[0].props.accessibilityState).toBe('disabled')
+		root.render(Pressable as any, {
+			disabled: false,
+			accessibilityState: { selected: true, checked: true },
+		})
+
+		expect(container.children[0].props.accessibilityState).toBe('selected')
+		root.unmount()
+	})
+})

package/src/props.ts

@@ -364,7 +364,8 @@ export interface TextAreaProps extends TextInputProps {
 	 *  minHeight at the widget's measured line height. With `autoGrow` it
 	 *  becomes the starting height instead of a fixed one. */
 	rows?: number
-	/** Grow to fit content, capped by `maxRows`. Native TextView grows by
+	/** Grow on input and value updates, capped by `maxRows`, including when
+	 *  `value` is omitted. Native TextView grows by
 	 *  default — this prop exists so web (<textarea> is fixed-rows) matches;
 	 *  without it, native gets a fixed `rows`-high box like web. */
 	autoGrow?: boolean
@@ -1041,8 +1042,14 @@ export interface RouteMeta {
 	/** Optional `loader` named export — a prefetch hook, not a data layer.
 	 *  pushRoute fires it (fire-and-forget) before navigating so the
 	 *  screen's `query$` reads hit a warm cache; boot/deep-link routes
-	 *  skip it (the screen mounts in the same tick anyway). */
+	 *  skip it (the screen mounts in the same tick anyway). Ignored when
+	 *  `dataMode: 'baked'` — baked routes resolve from `manifest.baked`. */
 	loader?: (params: Record<string, unknown>) => unknown
+	/** Data provenance: 'live' (default) runs `loader` at navigation;
+	 *  'baked' reads build-time output from the manifest's `baked` map —
+	 *  for file routes the loader lives in a `<route>.loader.ts` sibling
+	 *  that `xplat routes`/`xplat build` executes and never bundles. */
+	dataMode?: RouteDataMode
 	/** Optional guard awaited before a push commits. A thrown `redirect(...)`
 	 * short-circuits the attempted route. */
 	beforeLoad?: BeforeLoad
@@ -1050,6 +1057,10 @@ export interface RouteMeta {
 	head?: RouteHeadExport
 }
 
+/** How a route's data is produced — `'live'` runs the loader at navigation,
+ *  `'baked'` freezes loader output into the bundle at build time. */
+export type RouteDataMode = 'live' | 'baked'
+
 /** Output of `deriveRouteManifest` — `screens` feeds `registerScreens`
  *  (native pushRoute + web outlet fallback), `routes` feeds web URL
  *  matching, `layouts` catalogs `_layout` files by directory ('' = root). */
@@ -1058,6 +1069,10 @@ export interface RouteManifest {
 	routes: RouteMeta[]
 	layouts: Record<string, any>
 	loaders?: Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>>
+	/** Build-time loader output for `dataMode: 'baked'` routes — the
+	 *  generated `routes.gen.*` glue assigns it from `routes.gen.data`;
+	 *  programmatic hosts pass it on `RouteSpecSet`/`addRoutes` directly. */
+	baked?: Record<string, unknown>
 }
 
 /** One programmatic route entry for `defineRoutes` — the manifest fields a
@@ -1070,6 +1085,7 @@ export interface RouteSpec {
 	/** Default presentation, like a `+modal`/`+fade` filename suffix. */
 	presentation?: 'push' | 'modal' | 'fade'
 	loader?: RouteMeta['loader']
+	dataMode?: RouteDataMode
 	beforeLoad?: BeforeLoad
 	head?: RouteHeadExport
 	/** Diagnostics label recorded on `RouteMeta.file` (warn strings). */
@@ -1078,11 +1094,155 @@ export interface RouteSpec {
 
 /** Input to `defineRoutes`: the route list plus optional path-keyed layouts
  *  — `layouts: { docs: Shell }` plays the `_layout.tsrx` role for every
- *  route under `docs/*`. */
+ *  route under `docs/*`. `baked` carries build-time data for
+ *  `dataMode: 'baked'` specs — the host computes it (a content dir read, a
+ *  build step) and ships it in the manifest. */
 export interface RouteSpecSet {
 	routes: readonly RouteSpec[]
 	layouts?: Record<string, any>
+	baked?: Record<string, unknown>
+}
+
+/** The host-consumable route schema — what `xplat routes` writes to
+ *  `routes.gen.manifest.json` and `manifestToJson` produces from any
+ *  RouteManifest. Same shape whether the routes came from the file dir
+ *  or `defineRoutes`, so an external host (e.g. a web SSR tier) consumes
+ *  one normalized list. `loader`/`guard`/`head` are presence flags — the
+ *  functions don't cross the JSON boundary. */
+export interface RouteManifestJson {
+	version: 1
+	/** Layout dirs present, '' = the root `_layout` — sorted. */
+	layouts: string[]
+	/** Registered screen names, including any without a URL pattern. */
+	screens: string[]
+	routes: RouteJson[]
+}
+
+export interface RouteJson {
+	name: string
+	/** Colon-syntax path — 'docs/:slug', '' for the root index. */
+	path: string
+	params: string[]
+	presentation?: 'push' | 'modal' | 'fade'
+	dataMode?: RouteDataMode
+	/** Layout dirs applying to this route, root '' first, innermost last. */
+	layouts: string[]
+	/** Source label — file path or `programmatic:<path>`. */
+	source: string
+	loader: boolean
+	guard: boolean
+	head: boolean
+}
+
+// ---------- programmatic route typing ----------
+
+/** Phantom key carrying a `defineRoutes` manifest's spec-derived route
+ *  types — type-level only, never present at runtime. Module-private so the
+ *  published declarations carry no value binding for it. */
+declare const specRouteTypes: unique symbol
+
+/** ':id' or '[id]' segment → 'id'; a static segment contributes nothing. */
+type RouteParamOf<S extends string> = S extends `:${infer P}`
+	? P
+	: S extends `[${infer P}]`
+		? P
+		: never
+
+type TrimSlashes<P extends string> = P extends `/${infer R}`
+	? TrimSlashes<R>
+	: P extends `${infer R}/`
+		? TrimSlashes<R>
+		: P
+
+/** Route-dir vocabulary at the type level: '[id]' normalizes to ':id'. */
+type NormSegment<S extends string> = S extends `[${infer P}]` ? `:${P}` : S
+
+type NormPath<P extends string> = P extends `${infer Head}/${infer Tail}`
+	? `${NormSegment<Head>}/${NormPath<Tail>}`
+	: NormSegment<P>
+
+/** The route name a spec `path` produces — `''`/`'index'` and a trailing
+ *  'index' segment normalize like `specSegments` does at runtime. */
+export type RouteNameOfPath<P extends string> =
+	NormPath<TrimSlashes<P>> extends infer N extends string
+		? N extends '' | 'index'
+			? 'index'
+			: N extends `${infer R}/index`
+				? R
+				: N
+		: never
+
+/** Param names in a spec path — `'docs/[slug]'` and `'docs/:slug'` both
+ *  give `'slug'`; static-only paths give `never`. */
+export type RoutePathParams<Path extends string> =
+	TrimSlashes<Path> extends infer P extends string
+		? P extends `${infer Head}/${infer Tail}`
+			? RouteParamOf<Head> | RoutePathParams<Tail>
+			: RouteParamOf<P>
+		: never
+
+type RouteParamRecord<Path extends string> = { [K in RoutePathParams<Path>]: string }
+
+type SpecPaths<Specs extends readonly RouteSpec[]> = Specs[number] extends infer S
+	? S extends { path: infer P extends string }
+		? P
+		: never
+	: never
+
+type SpecsToParamMap<P extends string> = P extends string
+	? { [N in RouteNameOfPath<P>]: RouteParamRecord<P> }
+	: never
+
+type UnionToIntersection<U> = (U extends unknown ? (value: U) => void : never) extends (
+	value: infer I,
+) => void
+	? I
+	: never
+
+/** name → params map for a spec list — same shape `routes.gen.types.ts`
+ *  emits for file routes, so the two merge with `&`/`|`. */
+export type RouteParamsFromSpecs<Specs extends readonly RouteSpec[]> = UnionToIntersection<
+	SpecsToParamMap<SpecPaths<Specs>>
+>
+
+type SpecPresentations<S> = S extends {
+	path: infer P extends string
+	presentation: infer Pr
+}
+	? { [N in RouteNameOfPath<P>]: Pr }
+	: {}
+
+export type RoutePresentationsFromSpecs<Specs extends readonly RouteSpec[]> = UnionToIntersection<
+	SpecPresentations<Specs[number]>
+>
+
+/** The spec-derived typing record `defineRoutes` brands onto its manifest
+ *  return — read it with the `ManifestRoute*` helpers, never directly. */
+export interface SpecRouteInfo<Specs extends readonly RouteSpec[]> {
+	readonly [specRouteTypes]: {
+		params: RouteParamsFromSpecs<Specs>
+		presentations: RoutePresentationsFromSpecs<Specs>
+	}
+}
+
+/** Pull the `{name: params}` map out of a `defineRoutes` manifest's type —
+ *  `RouteParams & ManifestRouteParams<typeof manifest>` merges file and
+ *  programmatic routes into one typed navigation surface. A plain
+ *  `RouteManifest` (untagged) extracts to `{}`, so `ManifestRouteNames`
+ *  is `never` and unions degrade to the file-derived names. */
+export type ManifestRouteParams<M> = M extends {
+	readonly [specRouteTypes]: { params: infer P }
+}
+	? P
+	: {}
+
+export type ManifestRouteNames<M> = keyof ManifestRouteParams<M> & string
+
+export type ManifestRoutePresentations<M> = M extends {
+	readonly [specRouteTypes]: { presentations: infer P }
 }
+	? P
+	: {}
 
 export interface OpenWindowOptions {
 	/** Data made available to the native window content resolver. */

package/src/refresh.ts

@@ -125,7 +125,12 @@ export function createPullToRefresh(host: RefreshHost): RefreshController {
 		}
 
 		const apply = () => {
-			sv.contentInset = makeInsets(next, sv.contentInset.left, sv.contentInset.bottom, sv.contentInset.right)
+			sv.contentInset = makeInsets(
+				next,
+				sv.contentInset.left,
+				sv.contentInset.bottom,
+				sv.contentInset.right,
+			)
 		}
 
 		const UIView = (globalThis as any).UIView