@octane-xplat/ui 0.7.2 → 0.9.0

package/src/Pagination.tsrx

@@ -36,11 +36,13 @@ export function Pagination(props: PaginationProps) @{
 	>
 		<flexboxlayout className="vx-page-btn" onTap={() => go(current - 1)}><label text="‹" /></flexboxlayout>
 		@for (const e of pages; key e.key) {
-			{e.page == null
-				? <label className="vx-page-ellipsis" text="…" />
-				: <flexboxlayout className={cx('vx-page-btn', e.page === current && 'vx-page-btn--on')} onTap={() => go(e.page!)}>
+			@if (e.page == null) {
+				<label className="vx-page-ellipsis" text="…" />
+			} @else {
+				<flexboxlayout className={cx('vx-page-btn', e.page === current && 'vx-page-btn--on')} onTap={() => go(e.page!)}>
 					<label text={String(e.page)} />
-				</flexboxlayout>}
+				</flexboxlayout>
+			}
 		}
 		<flexboxlayout className="vx-page-btn" onTap={() => go(current + 1)}><label text="›" /></flexboxlayout>
 	</flexboxlayout>

package/src/PinInput.macos.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @xplat/macos/renderer */
-import { useState } from 'octane';
+import { useEffect, useRef, useState } from 'octane';
 import type { PinInputProps, TextInputHandle } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
@@ -12,7 +12,15 @@ export function PinInput(props: PinInputProps) @{
 	const [internal, setInternal] = useState('');
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value! : internal;
-	const handles: (TextInputHandle | null)[] = [];
+	const handles = useRef<(TextInputHandle | null)[]>([]);
+	const pendingFocus = useRef<number | null>(null);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value]);
 
 	const setValue = (next: string) => {
 		const clipped = next.slice(0, length);
@@ -24,10 +32,16 @@ export function PinInput(props: PinInputProps) @{
 	const cellValue = (i: number) => value[i] ?? '';
 
 	const enter = (i: number, text: string) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 
 	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
@@ -36,10 +50,10 @@ export function PinInput(props: PinInputProps) @{
 				className="vx-pininput-cell"
 				keyboardType="number"
 				secure={props.secure}
-				editable={!props.disabled}
+				editable={!props.disabled && i <= value.length}
 				value={cellValue(i)}
 				onChange={(text: string) => enter(i, text)}
-				bind={(h: TextInputHandle) => { handles[i] = h; }}
+				bind={(h: TextInputHandle) => { handles.current[i] = h; }}
 			/>
 		}
 	</flexboxlayout>

package/src/PinInput.mobile.test.ts

@@ -0,0 +1,107 @@
+import { afterEach, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+vi.mock('./escape-props', () => ({ applyEscapeProps() {} }))
+vi.mock('./TextInput.tsrx', async () => {
+	const { defineUniversalComponent, universalPlan, universalValue, useRef } =
+		await import('octane/universal/native')
+
+	const plan = universalPlan('nativescript', {
+		kind: 'host',
+		type: 'test-input',
+		bindings: [
+			['value', 0],
+			['editable', 1],
+			['cell', 2],
+		],
+	})
+
+	return {
+		TextInput: defineUniversalComponent('nativescript', (props: any) => {
+			const handle = useRef({ focus: vi.fn(), blur: vi.fn(), native: {} })
+			props.bind?.(handle.current)
+			return universalValue(plan, [
+				props.value,
+				props.editable,
+				{ onChange: props.onChange, focus: handle.current.focus },
+			])
+		}),
+	}
+})
+
+import { PinInput } from './PinInput.tsrx'
+const roots: any[] = []
+function mount(props: any = {}) {
+	const container = createObjectContainer('nativescript')
+	const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+	roots.push(root)
+	root.render(PinInput as any, props)
+	flushUniversalSync(() => {})
+	const fields = (): any[] => {
+		const found: any[] = []
+		const walk = (node: any) => {
+			if (node.type === 'test-input') {
+				found.push(node)
+			}
+
+			for (const child of node.children ?? []) {
+				walk(child)
+			}
+		}
+
+		walk(container)
+		return found
+	}
+
+	const enter = (i: number, value: string) =>
+		flushUniversalSync(() => {
+			fields()[i].props.cell.onChange(value)
+		})
+
+	return { fields, enter }
+}
+
+afterEach(() => {
+	for (const root of roots.splice(0)) {
+		root.unmount()
+	}
+})
+
+it('clears a native controlled cell and its suffix', () => {
+	const change = vi.fn()
+	const { enter } = mount({ value: '1234', onValueChange: change })
+	enter(1, '')
+	expect(change).toHaveBeenCalledWith('1')
+})
+
+it('advances native focus after enabling the next cell and preserves handles across edits', async () => {
+	const complete = vi.fn()
+	const { fields, enter } = mount({ onComplete: complete })
+	expect(fields().map((field) => field.props.editable)).toEqual([true, false, false, false])
+	for (let i = 0; i < 4; i++) {
+		enter(i, String(i + 1))
+		await vi.waitFor(() => expect(fields()[i].props.value).toBe(String(i + 1)))
+		if (i < 3) {
+			await vi.waitFor(() => expect(fields()[i + 1].props.cell.focus).toHaveBeenCalled())
+		}
+	}
+
+	expect(complete).toHaveBeenCalledWith('1234')
+	enter(1, '')
+	await vi.waitFor(() => expect(fields().map((f) => f.props.value)).toEqual(['1', '', '', '']))
+})
+
+it('ignores disabled edits and edits beyond the next empty cell', () => {
+	const change = vi.fn()
+	const { enter } = mount({ onValueChange: change })
+	enter(3, '9')
+	expect(change).not.toHaveBeenCalled()
+	const disabled = mount({ disabled: true, value: '1234', onValueChange: change })
+	disabled.enter(1, '9')
+	expect(change).not.toHaveBeenCalled()
+})

package/src/PinInput.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useState } from 'octane';
+import { useEffect, useRef, useState } from 'octane';
 import type { PinInputProps, TextInputHandle } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
@@ -12,7 +12,15 @@ export function PinInput(props: PinInputProps) @{
 	const [internal, setInternal] = useState('');
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value! : internal;
-	const handles: (TextInputHandle | null)[] = [];
+	const handles = useRef<(TextInputHandle | null)[]>([]);
+	const pendingFocus = useRef<number | null>(null);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value]);
 
 	const setValue = (next: string) => {
 		const clipped = next.slice(0, length);
@@ -24,10 +32,16 @@ export function PinInput(props: PinInputProps) @{
 	const cellValue = (i: number) => value[i] ?? '';
 
 	const enter = (i: number, text: string) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 
 	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
@@ -36,10 +50,10 @@ export function PinInput(props: PinInputProps) @{
 				className="vx-pininput-cell"
 				keyboardType="number"
 				secure={props.secure}
-				editable={!props.disabled}
+				editable={!props.disabled && i <= value.length}
 				value={cellValue(i)}
 				onChange={(text: string) => enter(i, text)}
-				bind={(h: TextInputHandle) => { handles[i] = h; }}
+				bind={(h: TextInputHandle) => { handles.current[i] = h; }}
 			/>
 		}
 	</flexboxlayout>

package/src/PinInput.web.test.tsrx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from 'vitest'
+import { act, createRoot } from 'octane'
+import { PinInput } from './PinInput.web.tsrx'
+const roots:any[]=[]
+function mount(props:any={}) {
+ const el=document.createElement('div');document.body.append(el);const root=createRoot(el);roots.push(root)
+ const render=(next:any={}) => act(() => root.render(<PinInput {...props} {...next} />));render()
+ const inputs=() => Array.from(el.querySelectorAll('input'))
+ const enter=(i:number,value:string) => {const field=inputs()[i];field.value=value;act(() => field.dispatchEvent(new Event('input',{bubbles:true})))}
+ return {render,inputs,enter}
+}
+
+afterEach(() => {for (const root of roots.splice(0)) act(() => root.unmount());document.body.innerHTML=''})
+it('clears the edited cell and suffix of a controlled PIN', () => {
+ const change=vi.fn(),complete=vi.fn();const {enter}=mount({value:'1234',onValueChange:change,onComplete:complete});enter(1,'')
+ expect(change).toHaveBeenCalledWith('1');expect(complete).not.toHaveBeenCalled()
+})
+
+it('keeps editing contiguous and advances focus through an uncontrolled PIN', () => {
+ const change=vi.fn(),complete=vi.fn();const {inputs,enter}=mount({onValueChange:change,onComplete:complete})
+ expect(inputs().map(i => i.readOnly)).toEqual([false,true,true,true])
+ for (let i=0;i<4;i++) {enter(i,String(i+1));if (i<3) expect(document.activeElement).toBe(inputs()[i+1])}
+ expect(inputs().map(i=>i.value)).toEqual(['1','2','3','4']);expect(complete).toHaveBeenCalledTimes(1);expect(complete).toHaveBeenCalledWith('1234')
+ enter(1,'');expect(inputs().map(i=>i.value)).toEqual(['1','','','']);expect(change).toHaveBeenLastCalledWith('1')
+ enter(1,'5');expect(document.activeElement).toBe(inputs()[2]);expect(inputs().map(i=>i.value)).toEqual(['1','5','',''])
+ expect(complete).toHaveBeenCalledTimes(1)
+})
+
+it('replaces a filled cell without shifting later cells', () => {
+ const change=vi.fn(),complete=vi.fn();const {enter}=mount({value:'1234',onValueChange:change,onComplete:complete});enter(1,'29')
+ expect(change).toHaveBeenCalledWith('1934');expect(complete).toHaveBeenCalledWith('1934')
+})
+
+it('does not relocate input from a later empty cell to the beginning', () => {
+ const change=vi.fn();const {enter}=mount({onValueChange:change});enter(3,'9');expect(change).not.toHaveBeenCalled()
+})
+
+it('respects disabled cells and controlled updates', () => {
+ const {render,inputs}=mount({value:'1234',disabled:true});expect(inputs().every(i=>i.readOnly)).toBe(true)
+ render({value:'12',disabled:false});expect(inputs().map(i=>i.value)).toEqual(['1','2','','']);expect(inputs().map(i=>i.readOnly)).toEqual([false,false,false,true])
+})

package/src/PinInput.web.tsrx

@@ -1,4 +1,4 @@
-import { useState } from 'octane';
+import { useEffect, useRef, useState } from 'octane';
 import type { PinInputProps, TextInputHandle } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { TextInput } from './TextInput.web.tsrx';
@@ -10,7 +10,15 @@ export function PinInput(props: PinInputProps) @{
 	const [internal, setInternal] = useState('');
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value! : internal;
-	const handles: (TextInputHandle | null)[] = [];
+	const handles = useRef<(TextInputHandle | null)[]>([]);
+	const pendingFocus = useRef<number | null>(null);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value]);
 
 	const setValue = (next: string) => {
 		const clipped = next.slice(0, length);
@@ -22,10 +30,16 @@ export function PinInput(props: PinInputProps) @{
 	const cellValue = (i: number) => value[i] ?? '';
 
 	const enter = (i: number, text: string) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 
 	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-pininput', props.disabled ? 'vx-pininput--disabled' : undefined, props.className]} style={props.style} role="group">
@@ -35,10 +49,10 @@ export function PinInput(props: PinInputProps) @{
 				className="vx-pininput-cell"
 				keyboardType="number"
 				secure={props.secure}
-				editable={!props.disabled}
+				editable={!props.disabled && i <= value.length}
 				value={cellValue(i)}
 				onChange={(text: string) => enter(i, text)}
-				bind={(h: TextInputHandle) => { handles[i] = h; }}
+				bind={(h: TextInputHandle) => { handles.current[i] = h; }}
 			/>
 		))}
 	</div>

package/src/Popover.tsrx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { useEffect, useRef, useState } from 'octane';
-import { GridLayout } from '@nativescript/core';
+import { GridLayout, isIOS, Screen } from '@nativescript/core';
 import { createNativeScriptRoot } from '@nativescript-community/octane';
 import type { UniversalComponent } from 'octane/universal';
 import type { PopoverProps } from './props';
@@ -9,6 +9,7 @@ import { cx } from './cx';
 import { positionPopover, type PopoverPosition } from './popover-position';
 import { applyThemeClasses, useThemeScheme } from './theme/theme-scheme';
 import { rootLayoutFor } from './root-layout.mobile';
+import { createOverlayLifetime } from './overlay-lifetime.mobile';
 
 function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 	const panelRef = useRef<any>(null);
@@ -39,12 +40,20 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 			props.placement ?? 'bottom',
 		);
 
+		const insets = isIOS ? panelRef.current?.parent?.getSafeAreaInsets?.() : undefined;
+		const scale = isIOS ? Number(Screen.mainScreen.scale) || 1 : 1;
+		const panelPosition = {
+			...next,
+			left: next.left - Number(insets?.left ?? 0) / scale,
+			top: next.top - Number(insets?.top ?? 0) / scale,
+		};
+
 		setPosition((current) =>
-			current?.left === next.left &&
-			current?.top === next.top &&
-			current?.placement === next.placement
+			current?.left === panelPosition.left &&
+			current?.top === panelPosition.top &&
+			current?.placement === panelPosition.placement
 				? current
-				: next,
+				: panelPosition,
 		);
 
 		if (panelSize?.width > 0 && panelSize?.height > 0) setSettled(true);
@@ -73,6 +82,14 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 		};
 	}, [props.open, props.anchorView, props.placement, props.children, props.style]);
 
+	useEffect(() => {
+		if (position) {
+			const panel = panelRef.current;
+			const parent = panel?.parent;
+			parent?.requestLayout?.();
+		}
+	}, [position]);
+
 	useEffect(() => {
 		applyNativeProps(panelRef.current, props);
 	}, [props.ios, props.android, settled]);
@@ -111,22 +128,15 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
  *  Overlay: a transparent host opened on the RootLayout enclosing the
  *  anchor, with PopoverLayer positioning itself over the anchor's rect. */
 export function Popover(props: PopoverProps) @{
-	const shown = useRef<{ host: any; root: any; unbindTheme?: () => void } | null>(null);
+	const shown = useRef<{ host: any; root: any; lifetime: ReturnType<typeof createOverlayLifetime> } | null>(null);
+
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
 
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.unbindTheme?.();
-			const owner = cur.host.parent as any;
-			if (owner?.hasChild?.(cur.host)) {
-				owner.close(cur.host).then(
-					() => cur.root.unmount?.(),
-					(error: any) => { console.error('[Popover] close failed', error); cur.root.unmount?.(); },
-				);
-			} else cur.root.unmount?.();
-
+			cur?.lifetime.close();
 			return;
 		}
 
@@ -144,14 +154,18 @@ export function Popover(props: PopoverProps) @{
 		host.horizontalAlignment = 'stretch';
 		host.verticalAlignment = 'stretch';
 		const root = createNativeScriptRoot(host);
-		shown.current = { host, root, unbindTheme };
-		root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
-		rl.open(host).catch((error: unknown) => {
+		const lifetime = createOverlayLifetime(rl, host, root, 'Popover', (dismissed) => {
 			if (shown.current?.host === host) shown.current = null;
-			console.error('[Popover] open failed', error);
-			root.unmount?.();
+			if (dismissed) dismiss.current?.();
 		});
+
+		lifetime.own(unbindTheme);
+		shown.current = { host, root, lifetime };
+		root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
+		lifetime.open();
 	}, [props.open, props.children, props.placement, props.className, props.style, props.dismissOnOutsideTap]);
 
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
 	<></>
 }

package/src/Pressable.tsrx

@@ -20,7 +20,7 @@ export function Pressable(props: PressableProps) @{
 		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
 		accessibilityHint={props.accessibilityHint}
 		accessibilityValue={props.accessibilityValue}
-		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityState={nativeAccessibilityState({ ...props.accessibilityState, disabled: props.disabled || props.accessibilityState?.disabled }) as any}
 		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
 		onPan={usePan(props.disabled ? undefined : props.onPan)}
 		onSwipe={props.disabled ? undefined : props.onSwipe}

package/src/Pressable.web.test.tsrx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from 'vitest'
+import { act, createRoot } from 'octane'
+import { Pressable } from './Pressable.web.tsrx'
+const roots: any[] = []
+function mount(props: any = {}) {
+ vi.useFakeTimers()
+ const el = document.createElement('div');document.body.append(el);const root=createRoot(el);roots.push(root)
+ const render = (next:any={}) => act(() => root.render(<Pressable {...props} {...next} />))
+ render();const pointer=(type:string) => act(() => el.firstElementChild!.dispatchEvent(new Event(type,{bubbles:true})))
+ const advance=() => act(() => vi.advanceTimersByTime(500))
+ return {root,render,pointer,advance}
+}
+
+afterEach(() => {for (const root of roots.splice(0)) act(() => root.unmount());document.body.innerHTML='';vi.useRealTimers()})
+it.each(['pointerup','pointerleave','pointercancel'])('cancels on %s after a rerender', (event) => {
+ const callback=vi.fn();const {render,pointer,advance}=mount({onLongPress:callback})
+ pointer('pointerdown');render({className:'updated'});pointer(event);advance();expect(callback).not.toHaveBeenCalled()
+})
+
+it('cancels on unmount', () => {
+ const callback=vi.fn();const {root,pointer,advance}=mount({onLongPress:callback});pointer('pointerdown');act(() => root.unmount());advance();expect(callback).not.toHaveBeenCalled()
+})
+
+it.each([{disabled:true},{onLongPress:undefined}])('cancels when long press becomes unavailable (%j)', (next) => {
+ const callback=vi.fn();const {render,pointer,advance}=mount({onLongPress:callback});pointer('pointerdown');render(next);advance();expect(callback).not.toHaveBeenCalled()
+})
+
+it('reports one long press through the latest callback', () => {
+ const old=vi.fn(),current=vi.fn();const {render,pointer,advance}=mount({onLongPress:old});pointer('pointerdown');render({onLongPress:current});advance();advance()
+ expect(old).not.toHaveBeenCalled();expect(current).toHaveBeenCalledTimes(1)
+})
+
+it('does not start a disabled long press', () => {
+ const callback=vi.fn();const {pointer,advance}=mount({onLongPress:callback,disabled:true});pointer('pointerdown');advance();expect(callback).not.toHaveBeenCalled()
+})

package/src/Pressable.web.tsrx

@@ -1,4 +1,4 @@
-import { useRef } from 'octane';
+import { useEffect, useRef } from 'octane';
 import type { PressableProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { layoutChildProps } from './layout-child.web';
@@ -6,17 +6,27 @@ import { usePan } from './pan.web.tsrx';
 
 export function Pressable(props: PressableProps) @{
 	const el = useRef<HTMLElement | null>(null);
-	let timer: ReturnType<typeof setTimeout> | null = null;
+	const spacePressed = useRef(false);
+	const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const latest = useRef(props);
+	latest.current = props;
 
 	usePan(el, props.disabled ? undefined : props.onPan);
 
-	const cancel = () => { if (timer !== null) { clearTimeout(timer); timer = null; } };
+	const cancel = () => { if (timer.current !== null) { clearTimeout(timer.current); timer.current = null; } };
+	useEffect(() => { if (props.disabled) spacePressed.current = false; }, [props.disabled]);
+	const enabled = !props.disabled && Boolean(props.onLongPress);
+	useEffect(() => { if (!enabled) cancel(); }, [enabled]);
+	useEffect(() => () => cancel(), []);
 
 	// Long-press parity with native: ~500ms hold over pointerdown/up.
 	const down = () => {
-		if (props.disabled || !props.onLongPress) return;
+		if (latest.current.disabled || !latest.current.onLongPress) return;
 		cancel();
-		timer = setTimeout(() => { timer = null; props.onLongPress?.(); }, 500);
+		timer.current = setTimeout(() => {
+			timer.current = null;
+			if (!latest.current.disabled) latest.current.onLongPress?.();
+		}, 500);
 	};
 
 	<div
@@ -28,11 +38,32 @@ export function Pressable(props: PressableProps) @{
 		aria-label={props.accessibilityLabel}
 		aria-description={props.accessibilityHint}
 		aria-valuetext={props.accessibilityValue}
-		aria-disabled={props.accessibilityState?.disabled ?? props.disabled ?? undefined}
+		aria-disabled={props.disabled || props.accessibilityState?.disabled || undefined}
 		aria-selected={props.accessibilityState?.selected}
 		aria-checked={props.accessibilityState?.checked}
 		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
 		aria-hidden={props.accessible === false ? true : undefined}
+		tabIndex={props.onPress && !props.disabled && props.accessible !== false ? 0 : -1}
+		onKeyDown={(e: KeyboardEvent) => {
+			if (e.target !== e.currentTarget || props.disabled || e.isComposing || !props.onPress) return;
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				if (!e.repeat) props.onPress();
+			} else if (e.key === ' ') {
+				e.preventDefault();
+				spacePressed.current = true;
+			}
+		}}
+		onKeyUp={(e: KeyboardEvent) => {
+			if (e.target !== e.currentTarget || e.key !== ' ') return;
+			const activate = spacePressed.current;
+			spacePressed.current = false;
+			if (activate && !props.disabled && props.onPress) {
+				e.preventDefault();
+				props.onPress();
+			}
+		}}
+		onBlur={() => { spacePressed.current = false; }}
 		onClick={props.disabled ? undefined : props.onPress}
 		onDoubleClick={props.disabled ? undefined : props.onDoublePress}
 		onPointerDown={(e: any) => { if (!props.disabled) { props.onPressIn?.(); down(); } }}

package/src/RouteHost.macos.tsrx

@@ -14,5 +14,6 @@ export function RouteHost(props: RouteHostProps) @{
 		const nested = child
 		child = <Layout>{nested}</Layout>
 	}
+
 	<>{child}</>
 }

package/src/Screen.tsrx

@@ -3,7 +3,7 @@ import type { ScreenProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
 import { registerRootLayout, unregisterRootLayout } from "./root-layout.mobile";
-import { attachTapToBlur } from "./tap-to-blur.mobile";
+import { attachTapToBlur } from "./tap-to-blur";
 // The screen shell is a RootLayout so RootLayout.open() can layer overlays
 // over it (decision #22). Self-registers on loaded/unloaded — overlay and
 // sheet services mount on the most recently mounted shell (topRootLayout).

package/src/SearchInput.tsrx

@@ -4,7 +4,8 @@ import type { SearchInputProps } from './props';
 import { Icon } from './Icon.tsrx';
 import { cx } from './cx';
 import { applyEscapeProps } from './escape-props';
-import { writeText } from './text-write';
+import { isWritingText, writeText } from './text-write';
+import { blurText } from './text-focus';
 
 /** Chrome-reset search field — a styled TextField (not UISearchBar) with a
  *  leading glyph and a self-drawn clear button, matching the web leaf.
@@ -40,13 +41,13 @@ export function SearchInput(props: SearchInputProps) @{
 			ref={(v: any) => {
 				el.current = v;
 				if (!v) return;
-				props.bind?.({ focus: () => v.focus(), blur: () => v.dismissSoftInput?.() ?? v.blur(), native: v });
+				props.bind?.({ focus: () => v.focus(), blur: () => blurText(v), native: v });
 			}}
 			className="vx-search-field"
 			hint={props.placeholder}
 			returnKeyType="search"
 			editable={props.editable ?? true}
-			onTextChange={(e: any) => setValue(e.value)}
+			onTextChange={(e: any) => { if (!isWritingText(e.object)) setValue(e.value); }}
 			onReturnPress={props.onSubmit}
 			onFocus={props.onFocus}
 			onBlur={props.onBlur}

package/src/SearchInput.web.tsrx

@@ -41,7 +41,7 @@ export function SearchInput(props: SearchInputProps) @{
 			enterKeyHint="search"
 			onInput={(e: any) => setValue(e.target.value)}
 			onKeyDown={(e: any) => {
-				if (e.key === 'Enter' && !e.shiftKey) props.onSubmit?.();
+				if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229) props.onSubmit?.();
 			}}
 			onFocus={props.onFocus}
 			onBlur={props.onBlur}