@octane-xplat/ui 0.7.3 → 0.10.0

package/src/content-display.mobile.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { parseOutlineFromMarkdown } from './outline-utils'
+import { tokenize } from './code-tokenizer'
+import { formatInstant } from './time-format'
+import { timerPresentation } from './timer-format'
+import { sanitizeUrl } from './safe-url'
+
+describe('portable content display helpers', () => {
+	it('builds stable, deduplicated outline items and ignores fenced code', () => {
+		expect(
+			parseOutlineFromMarkdown(
+				['# Setup', '## Install', '## Setup', '```md', '# Not a heading', '```'].join('\n'),
+			),
+		).toEqual([
+			{ id: 'setup', label: 'Setup', level: 1 },
+			{ id: 'install', label: 'Install', level: 2 },
+			{ id: 'setup-1', label: 'Setup', level: 2 },
+		])
+	})
+
+	it('returns per-line syntax tokens with source offsets', () => {
+		const lines = tokenize('const answer = 42', 'typescript')
+		expect(lines).toHaveLength(1)
+		expect(lines[0]).toContainEqual({ type: 'keyword', start: 0, end: 5 })
+		expect(lines[0]).toContainEqual({ type: 'number', start: 15, end: 17 })
+	})
+
+	it('uses one duration for the visible timer and machine-readable value', () => {
+		expect(timerPresentation(65_000, 'clock')).toEqual({ dateTime: 'PT65S', text: '1:05' })
+		expect(timerPresentation(65_000, 'elapsed')).toEqual({ dateTime: 'PT65S', text: '1m 05s' })
+	})
+
+	it('formats explicit timestamp zones without depending on the host zone', () => {
+		expect(
+			formatInstant(new Date('2025-03-21T14:51:53Z'), 'system_date_time', 'en-US', {
+				timeZone: 'UTC',
+			}),
+		).toBe('2025-03-21 14:51:53')
+	})
+
+	it('normalizes safe citation URLs and rejects executable schemes', () => {
+		expect(sanitizeUrl(' https://example.com/guide\n')).toBe('https://example.com/guide')
+		expect(sanitizeUrl('javascript:alert(1)')).toBeNull()
+	})
+})

package/src/controls.macos.tsrx

@@ -1,13 +1,16 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import { useRef, useState } from 'octane'
-import type { ActivityIndicatorProps, ButtonProps, CheckboxProps, PanEvent, SegmentedControlProps, SliderProps, SwitchProps } from './props'
+import type { ActivityIndicatorProps, ButtonProps, CheckboxProps, PanEvent, SearchInputProps, SegmentedControlProps, SliderProps, SwitchProps } from './props'
 import { Pressable } from './Pressable.macos.tsrx'
 import { Text } from './Text.macos.tsrx'
 import { TextInput } from './text-controls.macos.tsrx'
 import { cx } from './cx'
-import { usePan } from './pan.tsrx'
+import { usePan } from './pan'
 import { nativeAccessibilityRole } from './escape-props'
 import { useThemeScheme } from './theme/theme-scheme.macos'
+import { useFieldControlProps } from './field-context'
+import { useButtonGroup } from './button-group-context'
+import { Icon } from './Icon.macos.tsrx'
 
 function controlColors(dark: boolean) {
 	return dark
@@ -16,25 +19,45 @@ function controlColors(dark: boolean) {
 }
 
 export function Button(props: ButtonProps) @{
-	<Pressable id={props.id} className={cx('vx-button', props.className)} style={props.style} disabled={props.disabled} onPress={props.onPress}>
-		{props.children ?? <Text>{props.title}</Text>}
+	const group = useButtonGroup()
+	const [pending, setPending] = useState(false)
+	const loading = !!(props.loading || props.isLoading || pending)
+	const disabled = !!(props.disabled || props.isDisabled || props.isLoading || props.loading || group?.isDisabled)
+	const press = () => {
+		if (disabled || (pending && !props.isInterruptible)) return
+		props.onPress?.()
+		const action = props.clickAction?.()
+		if (action && typeof (action as any).then === 'function') {
+			setPending(true)
+			Promise.resolve(action).then(() => setPending(false), () => setPending(false))
+		}
+	}
+
+	<Pressable id={props.id} className={cx('vx-button', `vx-button--${props.variant ?? 'secondary'}`, `vx-button--size-${props.size ?? group?.size ?? 'md'}`, group && `vx-button--group-${group.position}`, props.isIconOnly && 'vx-button--icon', disabled && 'vx-button--disabled', props.className)} style={props.style} disabled={disabled} onPress={press} accessibilityLabel={props.accessibilityLabel ?? (props.isIconOnly ? props.label : undefined)} accessibilityRole="button">
+		{loading ? <ActivityIndicator /> : <>{typeof props.icon === 'string' ? <Icon name={props.icon} /> : props.icon ?? props.leading}{props.children ?? (props.isIconOnly ? null : <Text>{props.label}</Text>)}{props.endContent ?? props.trailing}</>}
 	</Pressable>
 }
 
-export function Checkbox(props: CheckboxProps) @{
+export function Checkbox(inputProps: CheckboxProps) @{
+	const props = useFieldControlProps(inputProps)
 	const checked = props.checked ?? false
+	const marked = checked || props.indeterminate
+	const isBlocked = props.isDisabled || props.isReadOnly
 	const colors = controlColors(useThemeScheme() === 'dark')
+
 	<flexboxlayout
 		id={props.id}
 		flexDirection="row"
 		alignItems="center"
 		gap={props.label == null ? 0 : 8}
-		className={cx('vx-checkbox-row', checked && 'vx-checkbox--on', props.disabled && 'vx-checkbox--disabled', props.className)}
-		style={{ opacity: props.disabled ? 0.5 : 1, ...props.style }}
+		className={cx('vx-checkbox-row', checked && 'vx-checkbox--on', props.isDisabled && 'vx-checkbox--disabled', props.isReadOnly && 'vx-checkbox--readonly', props.isLoading && 'vx-checkbox--loading', props.status && `vx-checkbox--status-${props.status.type}`, props.size && `vx-checkbox--size-${props.size}`, props.className)}
+		style={{ opacity: props.isDisabled ? 0.5 : 1, ...props.style }}
 		accessibilityRole="checkbox"
-		accessibilityLabel={props.accessibilityLabel}
-		accessibilityState={{ checked, disabled: props.disabled ?? false }}
-		onTap={props.disabled ? undefined : () => props.onCheckedChange?.(!checked)}
+		accessibilityLabel={props.accessibilityLabel ?? props.ariaLabel ?? props.fieldLabel ?? props.label}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.indeterminate ? 'Partially selected' : undefined}
+		accessibilityState={{ checked: props.indeterminate ? 'mixed' : checked, disabled: props.isDisabled, readonly: props.isReadOnly, busy: props.isLoading, required: props.isRequired && !props.isOptional, invalid: props.status?.type === 'error' }}
+		onTap={isBlocked ? undefined : () => props.onCheckedChange?.(props.indeterminate ? true : !checked)}
 	>
 		<flexboxlayout
 			className="vx-checkbox"
@@ -44,26 +67,29 @@ export function Checkbox(props: CheckboxProps) @{
 				width: 20,
 				height: 20,
 				borderWidth: 1,
-				borderColor: checked ? colors.primary : colors.border,
+				borderColor: marked ? colors.primary : colors.border,
 				borderRadius: 6,
-				...(checked ? { backgroundColor: colors.primary } : {}),
+				...(marked ? { backgroundColor: colors.primary } : {}),
 			}}
 		>
-			{checked ? <Text className="vx-checkbox-check" style={{ fontFamily: 'system-ui', fontSize: 14, lineHeight: 20, color: colors.onPrimary }}>✓</Text> : null}
+			{marked ? <Text className="vx-checkbox-check" style={{ fontFamily: 'system-ui', fontSize: 14, lineHeight: '20px', color: colors.onPrimary }}>{props.indeterminate ? '−' : '✓'}</Text> : null}
 		</flexboxlayout>
 		{props.label != null ? <Text className="vx-checkbox-label">{props.label}</Text> : null}
 	</flexboxlayout>
 }
 
-export function Switch(props: SwitchProps) @{
+export function Switch(inputProps: SwitchProps) @{
+	const props = useFieldControlProps(inputProps)
 	const checked = props.checked ?? false
+	const isBlocked = props.isDisabled || props.isReadOnly
 	const colors = controlColors(useThemeScheme() === 'dark')
+
 	<flexboxlayout
 		id={props.id}
 		flexDirection="row"
 		justifyContent={checked ? 'end' : 'start'}
 		alignItems="center"
-		className={cx('vx-switch', checked && 'vx-switch--on', props.className)}
+		className={cx('vx-switch', checked && 'vx-switch--on', props.isDisabled && 'vx-switch--disabled', props.isReadOnly && 'vx-switch--readonly', props.isLoading && 'vx-switch--loading', props.status && `vx-switch--status-${props.status.type}`, props.size && `vx-switch--size-${props.size}`, props.className)}
 		style={{
 			width: 48,
 			height: 28,
@@ -73,8 +99,10 @@ export function Switch(props: SwitchProps) @{
 			...props.style,
 		}}
 		accessibilityRole="switch"
-		accessibilityState={{ checked }}
-		onTap={() => props.onCheckedChange?.(!checked)}
+		accessibilityLabel={props.accessibilityLabel ?? props.ariaLabel ?? props.fieldLabel ?? props.label}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={{ checked, disabled: props.isDisabled, readonly: props.isReadOnly, busy: props.isLoading, required: props.isRequired && !props.isOptional, invalid: props.status?.type === 'error' }}
+		onTap={isBlocked ? undefined : () => props.onCheckedChange?.(!checked)}
 	>
 		<flexboxlayout
 			className="vx-switch-thumb"
@@ -108,6 +136,7 @@ export function Slider(props: SliderProps) @{
 			setDragValue(null)
 		}
 	})
+
 	const adjustValue = (direction: number) => {
 		if (props.disabled) {return}
 		const next = Math.min(max, Math.max(min, value + direction * ((max - min) / 100)))
@@ -152,8 +181,16 @@ export function SegmentedControl(_props: SegmentedControlProps) @{
 	<label className="vx-unsupported">Segmented control is unsupported by the AppKit host</label>
 }
 
-export function SearchInput(props: any) @{
-	<TextInput {...props} placeholder={props.placeholder ?? 'Search'} />
+export function SearchInput(props: SearchInputProps) @{
+	const [internal, setInternal] = useState(props.defaultValue ?? '')
+	const value = props.value ?? internal
+	const setValue = (next: string) => {
+		if (props.isDisabled || props.isReadOnly) return
+		if (props.value === undefined) setInternal(next)
+		props.onChange?.(next)
+	}
+
+	<TextInput {...props} value={value} onChange={setValue} hasClear={props.hasClear !== false} placeholder={props.placeholder ?? 'Search'} />
 }
 
 export function ActivityIndicator(props: ActivityIndicatorProps) @{

package/src/data-driver.mobile.test.ts

@@ -0,0 +1,154 @@
+import { expect, it, vi } from 'vitest'
+import { createUniversalRoot, flushUniversalSync } from 'octane/universal/native'
+import { Retained } from '../tests/data-lifecycle.fixture.mobile.tsrx'
+
+// Only the NativeScript host objects are substituted. The installed driver,
+// compiler output, scheduler, events, and visibility commands are real.
+vi.mock('@nativescript/core', () => {
+	class View {
+		visibility = 'visible'
+		parent: View | null = null
+		text = ''
+		style = {}
+		listeners = new Map<string, Set<(data: unknown) => void>>()
+		on(type: string, fn: (data: unknown) => void) {
+			if (!this.listeners.has(type)) {
+				this.listeners.set(type, new Set())
+			}
+
+			this.listeners.get(type)!.add(fn)
+		}
+		off(type: string, fn: (data: unknown) => void) {
+			this.listeners.get(type)?.delete(fn)
+		}
+		notify(data: { eventName: string }) {
+			for (const fn of this.listeners.get(data.eventName) ?? []) {
+				fn(data)
+			}
+		}
+	}
+
+	class LayoutBase extends View {
+		children: View[] = []
+		addChild(view: View) {
+			this.children.push(view)
+			view.parent = this
+		}
+		insertChild(view: View, index: number) {
+			this.children.splice(index, 0, view)
+			view.parent = this
+		}
+		removeChild(view: View) {
+			this.children.splice(this.children.indexOf(view), 1)
+			view.parent = null
+		}
+		getChildrenCount() {
+			return this.children.length
+		}
+		getChildIndex(view: View) {
+			return this.children.indexOf(view)
+		}
+	}
+
+	class ContentView extends View {
+		content: View | null = null
+	}
+
+	class TextBase extends View {}
+	const named = Object.fromEntries(
+		'AbsoluteLayout ActionBar ActionItem ActivityIndicator Button LiquidGlass DatePicker DockLayout FlexboxLayout FormattedString Frame GridLayout HtmlView Image Label ListPicker ListView NavigationButton Page Placeholder Progress ProxyViewContainer RootLayout ScrollView SearchBar SegmentedBar SegmentedBarItem Slider Span StackLayout Switch TabView TabViewItem TextField TextView TimePicker ViewBase WebView WrapLayout'
+			.split(' ')
+			.map((name) => [name, class extends View {}]),
+	)
+
+	return {
+		...named,
+		Application: {},
+		isIOS: false,
+		isAndroid: false,
+		View,
+		LayoutBase,
+		ContentView,
+		TextBase,
+		StackLayout: LayoutBase,
+		FlexboxLayout: LayoutBase,
+		Button: TextBase,
+		Label: TextBase,
+		unsetValue: Symbol('unset'),
+	}
+})
+
+it('NativeScript driver permits retained suspense and delivers native taps and uncaught errors', async () => {
+	// A direct driver import bypasses the object-driver alias for the renderer
+	// entry. This is the installed package that the mobile app actually uses.
+	const { nativeScriptDriver, createNativeScriptContainer, releaseNativeScriptContainer } =
+		await import('../node_modules/@nativescript-community/octane/dist/driver.js')
+
+	const { LayoutBase } = await import('@nativescript/core')
+	expect(nativeScriptDriver.capabilities.visibility).toBe(true)
+	const host = new LayoutBase()
+	const container = createNativeScriptContainer(host)
+	const uncaught = vi.fn()
+	const warning = vi.spyOn(console, 'warn').mockImplementation(() => {})
+	const root = createUniversalRoot(container, nativeScriptDriver, { onUncaughtError: uncaught })
+	container.root = root
+	let resolve!: (value: string) => void
+	const pending = new Promise<string>((done) => {
+		resolve = done
+	})
+
+	const error = new Error('native handler failure')
+	const fail = vi.fn(() => {
+		throw error
+	})
+
+	try {
+		root.render(Retained, { pending, fail })
+		const body = (host as any).children[0]
+		body.notify({ eventName: 'tap' })
+		flushUniversalSync(() => {})
+		expect((host as any).children[0]).toBe(body)
+		expect(body.visibility).toBe('collapse')
+		expect((host as any).children[1].text).toBe('pending')
+		resolve('resolved')
+		await vi.waitFor(() => expect(body.text).toBe('resolved'))
+		expect(body.visibility).toBe('visible')
+
+		;(host as any).children[1].notify({ eventName: 'tap' })
+		expect(fail).toHaveBeenCalledOnce()
+		expect(uncaught).toHaveBeenCalledWith(error)
+		expect(warning).not.toHaveBeenCalled()
+	} finally {
+		root.unmount()
+		releaseNativeScriptContainer(container)
+		warning.mockRestore()
+	}
+})
+
+it('native leaf text slots create Label views, update text and release their hosts', async () => {
+	const { NativeTextSlots } = await import('../tests/text-slot.fixture.mobile.tsrx')
+	const { nativeScriptDriver, createNativeScriptContainer, releaseNativeScriptContainer } =
+		await import('../node_modules/@nativescript-community/octane/dist/driver.js')
+
+	const { LayoutBase, TextBase } = await import('@nativescript/core')
+	const host: any = new LayoutBase()
+	const container = createNativeScriptContainer(host)
+	const root = createUniversalRoot(container, nativeScriptDriver)
+	container.root = root
+	root.render(NativeTextSlots, { text: 'A' })
+	const [bare, updating, wrapped, quote] = host.children[0].children
+	expect(bare.children[0]).toBeInstanceOf(TextBase)
+	expect(bare.children[0].text).toBe('Ctrl')
+	expect(updating.children).toHaveLength(1)
+	expect(updating.children[0].text).toBe('Ctrl A')
+	expect(wrapped.children[0].text).toBe('wrapped')
+	expect(quote.children[0].text).toBe('Quote')
+	const label = updating.children[0]
+	root.render(NativeTextSlots, { text: 'B' })
+	expect(updating.children[0]).toBe(label)
+	expect(label.text).toBe('Ctrl B')
+	root.unmount()
+	expect(host.children).toEqual([])
+	expect(container.nodes.size).toBe(0)
+	releaseNativeScriptContainer(container)
+})

package/src/data-lifecycle.mobile.test.ts

@@ -0,0 +1,251 @@
+import {
+	Profile,
+	SuspenseProfile,
+	NestedProfile,
+	Retained,
+	Reader,
+	sharedSelection$,
+	sharedCalls,
+} from '../tests/data-lifecycle.fixture.mobile.tsrx'
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+import { type QueryContext } from 'octane/signals'
+
+type Request = {
+	id: string
+	signal: AbortSignal
+	resolve: (value: string) => void
+	reject: (error: Error) => void
+}
+
+function requests() {
+	const calls: Request[] = []
+	const load = (id: string, { signal }: QueryContext<string>) =>
+		new Promise<string>((resolve, reject) => {
+			calls.push({ id, signal, resolve, reject })
+		})
+
+	return { calls, load }
+}
+
+const roots: ReturnType<typeof createUniversalRoot>[] = []
+function mount(Component: any, props: any) {
+	const container = createObjectContainer('nativescript')
+	const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+	roots.push(root)
+	root.render(Component, props)
+	return {
+		root,
+		container,
+		text: () =>
+			container.children
+				.filter((node: any) => node.type === 'label')
+				.map((node: any) => node.props.text),
+	}
+}
+
+async function settle() {
+	for (let i = 0; i < 12; i++) {
+		await Promise.resolve()
+	}
+
+	flushUniversalSync(() => {})
+}
+
+afterEach(() => {
+	for (const root of roots.splice(0)) {
+		root.unmount()
+	}
+})
+
+describe('compiler-owned query lifecycle on universal roots', () => {
+	it('suspends on first data, catches a query error, and retries the boundary', async () => {
+		const { calls, load } = requests()
+		const view = mount(SuspenseProfile, { load })
+		expect(view.text()).toEqual(['pending'])
+		calls[0].reject(new Error('offline'))
+		await settle()
+		expect(view.container.children[0].props.text).toBe('offline')
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[0], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['pending'])
+		expect(calls).toHaveLength(2)
+		calls[1].resolve('recovered')
+		await settle()
+		expect(view.text()).toEqual(['recovered'])
+	})
+
+	it('shares the declaring component query with a child reader', async () => {
+		const { calls, load } = requests()
+		const view = mount(NestedProfile, { load })
+		expect(calls).toHaveLength(1)
+		calls[0].resolve('nested result')
+		await settle()
+		expect(view.text()).toEqual(['ready', 'nested result'])
+		view.root.unmount()
+		expect(view.container.children).toEqual([])
+		const pendingView = mount(NestedProfile, { load })
+		expect(calls).toHaveLength(2)
+		pendingView.root.unmount()
+		expect(calls[1].signal.aborted).toBe(true)
+		calls[1].resolve('after child reader unmounted')
+		await settle()
+		expect(pendingView.container.children).toEqual([])
+	})
+
+	it('isolates stacked instances, retires requests, and ignores late responses', async () => {
+		const { calls, load } = requests()
+		const first = mount(Profile, { id: 'first', load })
+		const second = mount(Profile, { id: 'second', load })
+		expect(calls.map((call) => call.id)).toEqual(['first', 'second'])
+		calls[0].resolve('one')
+		calls[1].resolve('two')
+		await settle()
+		expect(first.text()).toEqual(['first:ready:one:false'])
+		expect(second.text()).toEqual(['second:ready:two:false'])
+		second.root.render(Profile, { id: 'second', nextId: 'third', load })
+		flushUniversalSync(() =>
+			second.container.dispatchEvent(second.container.children[4], 'tap', {}),
+		)
+
+		await settle()
+		expect(calls.map((call) => call.id)).toEqual(['first', 'second', 'third'])
+		second.root.render(Profile, { id: 'second', nextId: 'fourth', load })
+		flushUniversalSync(() =>
+			second.container.dispatchEvent(second.container.children[4], 'tap', {}),
+		)
+
+		await settle()
+		expect(calls[2].signal.aborted).toBe(true)
+		calls[3].resolve('four')
+		await settle()
+		calls[2].resolve('late third')
+		await settle()
+		expect(second.text()).toEqual(['fourth:ready:four:false'])
+		expect(first.text()).toEqual(['first:ready:one:false'])
+		second.root.render(Profile, { id: 'second', nextId: 'fifth', load })
+		flushUniversalSync(() =>
+			second.container.dispatchEvent(second.container.children[4], 'tap', {}),
+		)
+
+		await settle()
+		second.root.unmount()
+		expect(calls[4].signal.aborted).toBe(true)
+		calls[4].resolve('after unmount')
+		await settle()
+		expect(second.container.children).toEqual([])
+	})
+
+	it('reports pending, error, retry, refetch, and reset separately', async () => {
+		const { calls, load } = requests()
+		const view = mount(Profile, { id: 'a', load })
+		expect(view.text()).toEqual(['a:pending:none:false'])
+		calls[0].reject(new Error('offline'))
+		await settle()
+		expect(view.text()).toEqual(['a:error:none:false'])
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[1], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['a:pending:none:false'])
+		calls[1].resolve('one')
+		await settle()
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[2], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['a:ready:one:true'])
+		calls[2].resolve('two')
+		await settle()
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[3], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['a:pending:two:false'])
+		calls[3].resolve('three')
+		await settle()
+		expect(view.text()).toEqual(['a:ready:three:false'])
+	})
+
+	it('updates a module signal across roots and disconnects unmounted readers', async () => {
+		const selection$ = sharedSelection$
+		const calls = sharedCalls
+		selection$.set('a')
+		let renders = 0
+		const props = {
+			onRender: () => {
+				renders++
+			},
+		}
+
+		const page = mount(Reader, props)
+		const sheet = mount(Reader, props)
+		const modal = mount(Reader, props)
+		expect(calls).toHaveLength(1)
+		calls[0].resolve('one')
+		await settle()
+		for (const view of [page, sheet, modal]) {
+			expect(view.text()).toEqual(['a:ready:one'])
+		}
+
+		flushUniversalSync(() => selection$.set('b'))
+		await settle()
+		expect(calls).toHaveLength(2)
+		calls[1].resolve('two')
+		await settle()
+		for (const view of [page, sheet, modal]) {
+			expect(view.text()).toEqual(['b:ready:two'])
+		}
+
+		for (const view of [page, sheet, modal]) {
+			view.root.unmount()
+		}
+
+		const before = renders
+		flushUniversalSync(() => selection$.set(''))
+		await settle()
+		expect(renders).toBe(before)
+	})
+
+	it('delivers a tap that re-suspends, hides retained hosts, and reports handler errors', async () => {
+		let resolve!: (value: string) => void
+		const pending = new Promise<string>((done) => {
+			resolve = done
+		})
+
+		const error = new Error('handler failure')
+		const fail = vi.fn(() => {
+			throw error
+		})
+
+		const uncaught = vi.fn()
+		const container = createObjectContainer('nativescript')
+		const root = createUniversalRoot(container, createObjectDriver('nativescript'), {
+			onUncaughtError: uncaught,
+		})
+
+		roots.push(root)
+		root.render(Retained, { pending, fail })
+		const body = container.children[0]
+		expect(body.props.text).toBe('ready')
+		flushUniversalSync(() => container.dispatchEvent(body, 'tap', {}))
+		await settle()
+		expect(container.children[0]).toBe(body)
+		expect(body.visible).toBe(false)
+		expect(container.children[1]).toMatchObject({ props: { text: 'pending' }, visible: true })
+		expect(container.commits.flatMap((batch: any) => batch.commands ?? batch)).toEqual(
+			expect.arrayContaining([expect.objectContaining({ op: 'visibility', state: 'hidden' })]),
+		)
+
+		resolve('resolved')
+		await settle()
+		expect(container.children[0]).toBe(body)
+		expect(body.visible).toBe(true)
+		expect(body.props.text).toBe('resolved')
+		container.dispatchEvent(container.children[1], 'tap', {})
+		await settle()
+		expect(fail).toHaveBeenCalledOnce()
+		expect(uncaught).toHaveBeenCalledWith(error)
+	})
+})

package/src/date-composition.macos.ts

@@ -0,0 +1,16 @@
+/** AppKit field editor owns marked text; action callbacks are committed text. */
+export function hasDateComposition(
+	view: any,
+	event?: { isComposing?: boolean; keyCode?: number },
+): boolean {
+	if (event?.isComposing || event?.keyCode === 229) {
+		return true
+	}
+
+	const editor =
+		typeof view?.currentEditor === 'function' ? view.currentEditor() : view?.currentEditor
+
+	return typeof editor?.hasMarkedText === 'function'
+		? !!editor.hasMarkedText()
+		: !!editor?.hasMarkedText
+}

package/src/date-composition.mobile.test.ts

@@ -0,0 +1,26 @@
+import { afterEach, expect, it, vi } from 'vitest'
+import { hasDateComposition } from './date-composition'
+import { hasDateComposition as appKitComposition } from './date-composition.macos'
+
+afterEach(() => vi.unstubAllGlobals())
+
+it('defers iOS marked text and AppKit field-editor composition', () => {
+	expect(hasDateComposition({ ios: { markedTextRange: {} } })).toBe(true)
+	expect(hasDateComposition({ ios: { markedTextRange: null } })).toBe(false)
+	expect(appKitComposition({ currentEditor: () => ({ hasMarkedText: true }) })).toBe(true)
+	expect(appKitComposition({ currentEditor: { hasMarkedText: () => false } })).toBe(false)
+	expect(hasDateComposition(undefined, { keyCode: 229 })).toBe(true)
+})
+
+it('defers Android composing spans and accepts completed editing', () => {
+	vi.stubGlobal('android', {
+		view: {
+			inputmethod: {
+				BaseInputConnection: { getComposingSpanStart: (editable: any) => editable.start },
+			},
+		},
+	})
+
+	expect(hasDateComposition({ android: { getText: () => ({ start: 0 }) } })).toBe(true)
+	expect(hasDateComposition({ android: { getText: () => ({ start: -1 }) } })).toBe(false)
+})

package/src/date-composition.ts

@@ -0,0 +1,17 @@
+/** Read native marked/composing text without replacing the OS input delegate. */
+export function hasDateComposition(
+	view: any,
+	event?: { isComposing?: boolean; keyCode?: number },
+): boolean {
+	if (event?.isComposing || event?.keyCode === 229) {
+		return true
+	}
+
+	if (view?.ios?.markedTextRange) {
+		return true
+	}
+
+	const editable = view?.android?.getText?.()
+	const composing = (globalThis as any).android?.view?.inputmethod?.BaseInputConnection
+	return !!editable && !!composing && composing.getComposingSpanStart(editable) >= 0
+}

package/src/date-composition.web.ts

@@ -0,0 +1,6 @@
+export function hasDateComposition(
+	_view: unknown,
+	event?: { isComposing?: boolean; keyCode?: number },
+): boolean {
+	return !!event?.isComposing || event?.keyCode === 229
+}