@octane-xplat/ui 0.9.0 → 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,13 +19,30 @@ 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
@@ -30,12 +50,14 @@ export function Checkbox(props: CheckboxProps) @{
 		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"
@@ -45,19 +67,21 @@ 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: '20px', 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
@@ -65,7 +89,7 @@ export function Switch(props: SwitchProps) @{
 		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,
@@ -75,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"
@@ -155,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

@@ -9,6 +9,7 @@ vi.mock('@nativescript/core', () => {
 		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)) {
@@ -62,10 +63,15 @@ vi.mock('@nativescript/core', () => {
 
 	return {
 		...named,
+		Application: {},
+		isIOS: false,
+		isAndroid: false,
 		View,
 		LayoutBase,
 		ContentView,
 		TextBase,
+		StackLayout: LayoutBase,
+		FlexboxLayout: LayoutBase,
 		Button: TextBase,
 		Label: TextBase,
 		unsetValue: Symbol('unset'),
@@ -118,3 +124,31 @@ it('NativeScript driver permits retained suspense and delivers native taps and u
 		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/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
+}