@octane-xplat/ui 0.5.0 → 0.7.0

package/src/anim.tsrx

@@ -0,0 +1,65 @@
+import { useRef } from 'octane';
+import { requestAnimationFrame, cancelAnimationFrame } from '@nativescript/core/animation-frame';
+
+/**
+ * Imperative animation value (decision #10 — no worklets; JS runs on the UI
+ * thread on NS so a rAF tween writes the view directly). `bind` is a leaf
+ * `bind` prop target: the leaf forwards it to the intrinsic's `ref`, and the
+ * runtime hands us the NS view.
+ */
+export type { AnimatedValue } from './props';
+import type { AnimatedValue } from './props';
+
+function createAnimated(initial: number, prop: string): AnimatedValue {
+	let view: any = null;
+	let current = initial;
+	let raf = 0;
+	const apply = (v: number) => {
+		current = v;
+		if (view) view[prop] = v;
+	};
+
+	const run = (step: (t: number) => number | null) => {
+		cancelAnimationFrame(raf);
+		const start = Date.now();
+		const tick = () => {
+			const v = step(Date.now() - start);
+			if (v === null) return;
+			apply(v);
+			raf = requestAnimationFrame(tick);
+		};
+
+		raf = requestAnimationFrame(tick);
+	};
+
+	return {
+		get value() { return current; },
+		bind(v) { view = v; if (view) view[prop] = current; },
+		to(target, opts) {
+			const dur = opts?.duration ?? 300;
+			const from = current;
+			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
+		},
+		spring(target, opts) {
+			// JS integrator — native spring curves diverge iOS/Android; simulating
+			// keeps semantics identical on both targets (doc: animation-gestures).
+			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
+			let v = 0, x = current;
+			run(() => {
+				const dt = 1 / 60;
+				v += (-stiffness * (x - target) - damping * v) * dt;
+				x += v * dt;
+				return Math.abs(v) < 0.5 && Math.abs(x - target) < 0.5 ? (apply(target), null) : x;
+			});
+		},
+		stop() { cancelAnimationFrame(raf); },
+	};
+}
+
+/** useAnimation — a stable animated value across renders. `prop` is the NS
+ *  view property written per frame (translateX default). */
+export function useAnimation(initial = 0, prop = 'translateX'): AnimatedValue {
+	const c = useRef<AnimatedValue | null>(null);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
+}

package/src/anim.web.tsrx

@@ -0,0 +1,55 @@
+import { useRef } from 'octane';
+
+export type { AnimatedValue } from './props';
+import type { AnimatedValue } from './props';
+import { writeTransformProp } from './transform.web';
+
+function createAnimated(initial: number, prop: string): AnimatedValue {
+	let el: HTMLElement | null = null;
+	let current = initial;
+	let raf = 0;
+	const apply = (v: number) => {
+		current = v;
+		if (el) writeTransformProp(el, prop, v);
+	};
+
+	const run = (step: (t: number) => number | null) => {
+		cancelAnimationFrame(raf);
+		const start = Date.now();
+		const tick = () => {
+			const v = step(Date.now() - start);
+			if (v === null) return;
+			apply(v);
+			raf = requestAnimationFrame(tick);
+		};
+
+		raf = requestAnimationFrame(tick);
+	};
+
+	return {
+		get value() { return current; },
+		bind(e) { el = e as HTMLElement; if (el) writeTransformProp(el, prop, current); },
+		to(target, opts) {
+			const dur = opts?.duration ?? 300;
+			const from = current;
+			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
+		},
+		spring(target, opts) {
+			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
+			let v = 0, x = current;
+			run(() => {
+				const dt = 1 / 60;
+				v += (-stiffness * (x - target) - damping * v) * dt;
+				x += v * dt;
+				return Math.abs(v) < 0.5 && Math.abs(x - target) < 0.5 ? (apply(target), null) : x;
+			});
+		},
+		stop() { cancelAnimationFrame(raf); },
+	};
+}
+
+export function useAnimation(initial = 0, prop = 'translateX'): AnimatedValue {
+	const c = useRef<AnimatedValue | null>(null);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
+}

package/src/apply-native-modifiers.native.ts

@@ -0,0 +1,13 @@
+import type { NativeModifier } from './props'
+
+/** Apply serializable modifiers to a NativeScript host view in array order. */
+export function applyNativeModifiers(view: any, modifiers?: readonly NativeModifier[]): void {
+	if (!view || !modifiers?.length) return
+	for (const entry of modifiers) {
+		if (entry.type === 'style') {
+			Object.assign(view.style, entry.values)
+		} else {
+			view[entry.name] = entry.value
+		}
+	}
+}

package/src/camera-permission.web.ts

@@ -0,0 +1,11 @@
+// Web twin of camera-permission — the web leaf doesn't call these:
+// getUserMedia IS the permission prompt. Present so the import surface
+// stays twin-symmetric.
+
+export function cameraHardwarePresent(): boolean {
+	return typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia
+}
+
+export function ensureCameraPermission(): Promise<boolean> {
+	return Promise.resolve(false)
+}

package/src/child-array.ts

@@ -0,0 +1,16 @@
+/** Normalize a JSX children value to a flat array — children may be a
+ *  single node, an array, or nested arrays from `.map` calls. */
+export function toChildArray(children: any): any[] {
+	const out: any[] = [];
+	const walk = (node: any) => {
+		if (node == null || node === false) { return; }
+		if (Array.isArray(node)) {
+			for (const child of node) { walk(child); }
+		} else {
+			out.push(node);
+		}
+	};
+
+	walk(children);
+	return out;
+}

package/src/colorScheme.macos.ts

@@ -0,0 +1,27 @@
+import { useSyncExternalStore } from 'octane'
+import type { ColorScheme } from './props'
+
+let appearanceListener: (() => void) | undefined
+const listeners = new Set<() => void>()
+const host = () => (globalThis as any).__xplatAppKit
+
+function getSystemScheme(): ColorScheme {
+	return host()?.getColorScheme?.() === 'dark' ? 'dark' : 'light'
+}
+
+export function getColorScheme(): ColorScheme {
+	return getSystemScheme()
+}
+
+export function subscribeSystemScheme(callback: () => void): () => void {
+	listeners.add(callback)
+	if (!appearanceListener) {
+		appearanceListener = () => listeners.forEach((listener) => listener())
+		host()?.onAppearanceChange?.(appearanceListener)
+	}
+	return () => listeners.delete(callback)
+}
+
+export function useColorScheme(): ColorScheme {
+	return useSyncExternalStore(subscribeSystemScheme, getSystemScheme)
+}

package/src/controls.macos.tsrx

@@ -0,0 +1,171 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useRef, useState } from 'octane'
+import type { ActivityIndicatorProps, ButtonProps, CheckboxProps, PanEvent, 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 { nativeAccessibilityRole } from './escape-props'
+import { useThemeScheme } from './theme/theme-scheme.macos'
+
+function controlColors(dark: boolean) {
+	return dark
+		? { border: '#2e2e2e', onPrimary: '#171717', primary: '#ededed', surface: '#0a0a0a' }
+		: { border: '#eaeaea', onPrimary: '#fafafa', primary: '#171717', surface: '#ffffff' }
+}
+
+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>}
+	</Pressable>
+}
+
+export function Checkbox(props: CheckboxProps) @{
+	const checked = props.checked ?? false
+	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 }}
+		accessibilityRole="checkbox"
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityState={{ checked, disabled: props.disabled ?? false }}
+		onTap={props.disabled ? undefined : () => props.onCheckedChange?.(!checked)}
+	>
+		<flexboxlayout
+			className="vx-checkbox"
+			alignItems="center"
+			justifyContent="center"
+			style={{
+				width: 20,
+				height: 20,
+				borderWidth: 1,
+				borderColor: checked ? colors.primary : colors.border,
+				borderRadius: 6,
+				...(checked ? { backgroundColor: colors.primary } : {}),
+			}}
+		>
+			{checked ? <Text className="vx-checkbox-check" style={{ fontFamily: 'system-ui', fontSize: 14, lineHeight: 20, color: colors.onPrimary }}>✓</Text> : null}
+		</flexboxlayout>
+		{props.label != null ? <Text className="vx-checkbox-label">{props.label}</Text> : null}
+	</flexboxlayout>
+}
+
+export function Switch(props: SwitchProps) @{
+	const checked = props.checked ?? false
+	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)}
+		style={{
+			width: 48,
+			height: 28,
+			padding: 3,
+			borderRadius: 14,
+			backgroundColor: checked ? colors.primary : colors.border,
+			...props.style,
+		}}
+		accessibilityRole="switch"
+		accessibilityState={{ checked }}
+		onTap={() => props.onCheckedChange?.(!checked)}
+	>
+		<flexboxlayout
+			className="vx-switch-thumb"
+			style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: colors.surface }}
+		/>
+	</flexboxlayout>
+}
+
+export function Slider(props: SliderProps) @{
+	const min = props.minValue ?? 0
+	const max = props.maxValue ?? 100
+	const drag = useRef<{ value0: number } | null>(null)
+	const [dragValue, setDragValue] = useState<number | null>(null)
+	const value = dragValue ?? props.value ?? min
+	const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)))
+	const colors = controlColors(useThemeScheme() === 'dark')
+	const onPan = usePan(props.disabled ? undefined : (event: PanEvent) => {
+		if (event.state === 'began') {
+			drag.current = { value0: value }
+			return
+		}
+
+		const width = Number(event.target?.bounds?.size?.width ?? event.target?.frame?.size?.width ?? 0)
+		if (!drag.current || !width) {return}
+		if (event.state === 'moved') {
+			const next = Math.min(max, Math.max(min, drag.current.value0 + (event.dx / width) * (max - min)))
+			setDragValue(next)
+			props.onValueChange?.(next)
+		} else {
+			drag.current = null
+			setDragValue(null)
+		}
+	})
+	const adjustValue = (direction: number) => {
+		if (props.disabled) {return}
+		const next = Math.min(max, Math.max(min, value + direction * ((max - min) / 100)))
+		setDragValue(next)
+		props.onValueChange?.(next)
+	}
+
+	<gridlayout
+		id={props.id}
+		disabled={props.disabled}
+		className={cx('vx-slider', props.className)}
+		style={{ height: 28, ...props.style }}
+		accessibilityRole={nativeAccessibilityRole('adjustable') as any}
+		accessibilityValue={value}
+		accessibilityMinValue={min}
+		accessibilityMaxValue={max}
+		onAccessibilityIncrement={() => adjustValue(1)}
+		onAccessibilityDecrement={() => adjustValue(-1)}
+		onPan={onPan}
+	>
+		<flexboxlayout
+			className="vx-slider-track"
+			verticalAlignment="middle"
+			style={{ height: 4, borderRadius: 2, backgroundColor: colors.border }}
+		/>
+		<flexboxlayout
+			className="vx-slider-fill"
+			horizontalAlignment="left"
+			verticalAlignment="middle"
+			style={{ width: String(ratio * 100) + '%', height: 4, borderRadius: 2, backgroundColor: colors.primary }}
+		/>
+		<flexboxlayout
+			className="vx-slider-thumb"
+			horizontalAlignment="left"
+			verticalAlignment="middle"
+			style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: colors.primary, left: String(ratio * 100) + '%', marginLeft: -10 }}
+		/>
+	</gridlayout>
+}
+
+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 ActivityIndicator(props: ActivityIndicatorProps) @{
+	if (props.busy === false) return null;
+
+	// Self-drawn ring — the vx-spinner class is inert on AppKit (no CSS
+	// layer), so the ring chrome comes from explicit border styles. There
+	// is no layer animation yet; the ring renders statically.
+	<flexboxlayout
+		id={props.id}
+		className={cx('vx-spinner', props.className)}
+		style={{ borderWidth: 2, borderTopColor: '#666666', borderColor: '#666666', borderRadius: 12, width: 24, height: 24, ...props.style }}
+		accessibilityRole="progressbar"
+	/>
+}

package/src/cx.ts

@@ -0,0 +1,8 @@
+/** NS `className` splits on ' ' only, and the universal driver applies the
+ *  prop via `String(value)` — an array would arrive comma-joined and match
+ *  no class at all. Native leaves normalize through cx() before handing
+ *  className to an intrinsic. (The DOM renderer already flattens arrays,
+ *  so web leaves don't need this.) */
+export function cx(...parts: any[]): string {
+	return parts.flat(Infinity).filter(Boolean).join(' ')
+}

package/src/escape-props.macos.ts

@@ -0,0 +1,11 @@
+/** AppKit doesn't have NativeScript's attached-property bridge. Platform
+ * escape bags are therefore intentionally ignored by this experimental leaf. */
+export function applyEscapeProps(_view: unknown, _props: unknown): void {}
+
+export function nativeAccessibilityRole(role: unknown): unknown {
+	return role
+}
+
+export function nativeAccessibilityState(state: unknown): unknown {
+	return state
+}

package/src/escape-props.ts

@@ -0,0 +1,70 @@
+import { isAndroid, isIOS } from '@nativescript/core'
+import type { NativeModifier, Role } from './props'
+import { applyNativeModifiers } from './apply-native-modifiers.native'
+
+/** Apply only the active device's escape bag after the primitive's own props. */
+export function applyEscapeProps(
+	view: any,
+	props: { ios?: any; android?: any; modifiers?: readonly NativeModifier[] },
+): void {
+	if (!view) {
+		return
+	}
+
+	const bag = isIOS ? props.ios : isAndroid ? props.android : undefined
+	if (bag) {
+		Object.assign(view, bag)
+	}
+	applyNativeModifiers(view, props.modifiers)
+}
+
+const NATIVE_ACCESSIBILITY_ROLES: Record<Role, string> = {
+	button: 'button',
+	link: 'link',
+	search: 'search',
+	image: 'image',
+	heading: 'header',
+	adjustable: 'adjustable',
+	summary: 'summary',
+	text: 'text',
+	none: 'none',
+	progressbar: 'progressBar',
+	checkbox: 'checkbox',
+	switch: 'switch',
+	radio: 'radioButton',
+	spinbutton: 'spinButton',
+	// NativeScript has no tab role; a tab is still an actionable button and
+	// its selected state is carried separately by accessibilityState.
+	tab: 'button',
+}
+
+/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
+export function nativeAccessibilityRole(role?: Role): string | undefined {
+	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : undefined
+}
+
+/** NativeScript's AccessibilityState is a single enum value, unlike the
+ *  web's independent ARIA booleans. Priority follows the strongest state. */
+export function nativeAccessibilityState(state?: {
+	disabled?: boolean
+	selected?: boolean
+	checked?: boolean
+}): string | undefined {
+	if (state?.disabled) {
+		return 'disabled'
+	}
+
+	if (state?.selected) {
+		return 'selected'
+	}
+
+	if (state?.checked === true) {
+		return 'checked'
+	}
+
+	if (state?.checked === false) {
+		return 'unchecked'
+	}
+
+	return undefined
+}

package/src/escape-props.web.ts

@@ -0,0 +1,25 @@
+/** Apply DOM escape props after the primitive's own props. Dash-named keys
+ *  are attributes; other keys use the DOM property where available. */
+export function applyEscapeProps(element: any, props: { web?: any }): void {
+	if (!element || !props.web) {
+		return
+	}
+
+	for (const [key, value] of Object.entries(props.web)) {
+		if (key.includes('-')) {
+			if (value == null || value === false) {
+				element.removeAttribute(key)
+			} else {
+				element.setAttribute(key, value === true ? '' : String(value))
+			}
+		} else if (key in element) {
+			try {
+				element[key] = value
+			} catch {
+				element.setAttribute(key, String(value))
+			}
+		} else if (value != null) {
+			element.setAttribute(key, String(value))
+		}
+	}
+}

package/src/hosted-unsupported.macos.tsrx

@@ -0,0 +1,9 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { CameraViewProps, WebViewProps } from './props'
+
+export function WebView(_props: WebViewProps) @{
+	<label className="vx-unsupported">WebView is unsupported by the AppKit host</label>
+}
+export function CameraView(_props: CameraViewProps) @{
+	<label className="vx-unsupported">Camera capture is unsupported by the AppKit host</label>
+}

package/src/icons.ts

@@ -0,0 +1,60 @@
+import type { IconGlyph } from './props'
+export type { IconGlyph } from './props'
+
+/**
+ * App-owned icon registry. `svg` is SVG path `d` data (not a full SVG
+ * markup string). `src` can carry an image or an SVG source; the leaves only
+ * infer SVG from inline markup, SVG data URIs, and `.svg` paths/URLs. Native
+ * `font` glyphs render only when the app ships and registers that font.
+ */
+const icons = new Map<string, IconGlyph>()
+
+export function registerIcon(name: string, glyph: IconGlyph): void {
+	icons.set(name, glyph)
+}
+
+export function registerIcons(record: Record<string, IconGlyph>): void {
+	for (const [name, glyph] of Object.entries(record)) {
+		icons.set(name, glyph)
+	}
+}
+
+export function getIcon(name: string): IconGlyph | undefined {
+	return icons.get(name)
+}
+
+// Framework-provided glyphs for built-in affordances (SearchInput's leading
+// glyph and clear button). Registered only when the name is free — an app
+// registering the same name overrides the default.
+if (!icons.has('xplat-search')) {
+	icons.set('xplat-search', {
+		svg: 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z',
+	})
+}
+
+if (!icons.has('xplat-clear')) {
+	icons.set('xplat-clear', {
+		svg: 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+	})
+}
+
+// Video transport glyphs (self-drawn chrome) — same guarded registration.
+if (!icons.has('xplat-play')) {
+	icons.set('xplat-play', { svg: 'M8 5v14l11-7z' })
+}
+
+if (!icons.has('xplat-pause')) {
+	icons.set('xplat-pause', { svg: 'M6 19h4V5H6v14zm8-14v14h4V5h-4z' })
+}
+
+if (!icons.has('xplat-volume')) {
+	icons.set('xplat-volume', {
+		svg: 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
+	})
+}
+
+if (!icons.has('xplat-volume-off')) {
+	icons.set('xplat-volume-off', {
+		svg: 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.45-.54 2.78-1.32 3.97-2.27L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z',
+	})
+}

package/src/index.linux.ts

@@ -0,0 +1,10 @@
+// Linux index — the webview target shares the web surface except where a
+// host bridge changes the answer: openWindow becomes a real GTK window and
+// colorScheme follows the host's appearance push (WebKitGTK's own
+// prefers-color-scheme doesn't track GNOME). Explicit named exports here
+// shadow the same names in the star re-export.
+export * from './index.web'
+export { openWindow } from './windows.linux'
+export type { LinuxWindowHandle } from './windows.linux'
+export { useColorScheme, getColorScheme } from './theme/colorScheme.linux'
+export type { ColorScheme } from './theme/colorScheme.linux'

package/src/index.macos.ts

@@ -0,0 +1,106 @@
+// Experimental AppKit public surface. Components with a direct AppKit
+// equivalent use the host renderer; NativeScript-only features are exported
+// as visible unsupported leaves so the shared harness can still load them.
+export { View, Column } from './View.macos.tsrx'
+export { Row } from './Row.macos.tsrx'
+export { Grid, Stack, Absolute, Spacer } from './layout.macos.tsrx'
+export type { PanEvent, SwipeEvent, SetTranslate } from './props'
+export { setTranslate } from './translate.macos'
+export { Text, RichText, RichTextSpan } from './Text.macos.tsrx'
+export { Pressable } from './Pressable.macos.tsrx'
+export { Button, Checkbox, Switch, Slider, SegmentedControl, SearchInput, ActivityIndicator } from './controls.macos.tsrx'
+
+export { Collapsible } from './Collapsible.macos.tsrx'
+export { Accordion } from './Accordion.macos.tsrx'
+export { RadioGroup } from './RadioGroup.macos.tsrx'
+export { DropdownMenu } from './DropdownMenu.macos.tsrx'
+export { ContextMenu } from './ContextMenu.macos.tsrx'
+export { Badge } from './Badge.macos.tsrx'
+export { Separator } from './Separator.macos.tsrx'
+export { Skeleton } from './Skeleton.macos.tsrx'
+export { Avatar } from './Avatar.macos.tsrx'
+export { AvatarGroup } from './AvatarGroup.macos.tsrx'
+export { FormField } from './FormField.macos.tsrx'
+export { FieldGroup } from './FieldGroup.macos.tsrx'
+export { ListItem } from './ListItem.macos.tsrx'
+export { InputNumber } from './InputNumber.macos.tsrx'
+export { PinInput } from './PinInput.macos.tsrx'
+export { Select } from './Select.macos.tsrx'
+export { SelectMenu, Combobox, InputMenu } from './aliases.macos.tsrx'
+export { InputTags } from './InputTags.macos.tsrx'
+export { InputRating } from './InputRating.macos.tsrx'
+export { CheckboxGroup } from './CheckboxGroup.macos.tsrx'
+export { Breadcrumb } from './Breadcrumb.macos.tsrx'
+export { Pagination } from './Pagination.macos.tsrx'
+export { Stepper } from './Stepper.macos.tsrx'
+export { NavigationMenu } from './NavigationMenu.macos.tsrx'
+export { CommandPalette } from './CommandPalette.macos.tsrx'
+export { Table } from './Table.macos.tsrx'
+export { Timeline } from './Timeline.macos.tsrx'
+export { Tree } from './Tree.macos.tsrx'
+export { Alert } from './Alert.macos.tsrx'
+export { Card } from './Card.macos.tsrx'
+export { Chip } from './Chip.macos.tsrx'
+export { Kbd } from './Kbd.macos.tsrx'
+export { Empty } from './Empty.macos.tsrx'
+export { Banner } from './Banner.macos.tsrx'
+export { User } from './User.macos.tsrx'
+export { ProgressGroup } from './ProgressGroup.macos.tsrx'
+export { Drawer } from './Drawer.macos.tsrx'
+
+export { Hoverable } from './Hoverable.tsrx'
+export { Tooltip } from './Tooltip.tsrx'
+export { Link } from './Link.macos.tsrx'
+export { NavLink } from './NavLink.macos.tsrx'
+export { TextInput, TextArea } from './text-controls.macos.tsrx'
+export { ScrollView, ScrollBox } from './ScrollView.macos.tsrx'
+export { VirtualList } from './VirtualList.macos.tsrx'
+export { Image } from './Image.macos.tsrx'
+export { WebView, CameraView } from './hosted-unsupported.macos.tsrx'
+export { Overlay, Popover, Sheet } from './surfaces.macos.tsrx'
+export { showToast } from './toast-anchor.macos.tsrx'
+export { useAnimation } from './anim.macos.tsrx'
+export { useThemeScheme, getThemeScheme, setThemePreference, getThemePreference, themeSchemeClasses, onThemeSchemeChange, applyThemeClasses } from './theme/theme-scheme'
+export { useColorScheme, getColorScheme } from './colorScheme.macos'
+export { styled } from './styled.macos.tsrx'
+export { openWindow } from './windows.macos'
+export { Screen } from './Screen.macos.tsrx'
+export { Tabs } from './Tabs.macos.tsrx'
+export type { TabSpec } from './props'
+export { SafeArea, KeyboardAvoiding } from './layout-shells.macos.tsrx'
+export { useSafeAreaInsets } from './safeAreaInsets.macos.tsrx'
+export { useMeasure } from './useMeasure.macos.tsrx'
+export { Meter, Heading } from './macos-extras.macos.tsrx'
+export { Icon } from './Icon.macos.tsrx'
+export { registerIcon, registerIcons } from './icons'
+export type { IconGlyph } from './icons'
+export const isNative = true as const
+export { registerStack, getStack, stackEntries } from './stacks.macos'
+export {
+	pushRoute,
+	popRoute,
+	routeStacks,
+	pushDeepLink,
+	routeFor,
+	currentRoute,
+	currentModalRoute,
+	canGoBack,
+	useCanGoBack,
+	useRoute,
+	useModalRoute,
+	redirect,
+	addBackInterceptor,
+	registerScreens,
+	registerRoutes,
+	addRoutes,
+	screenFor,
+	hrefFor,
+	layoutsFor as layoutsForRoute,
+} from './route.macos'
+
+export { deriveRouteManifest, defineRoutes, mergeRouteManifests } from './route-table'
+export { createStore } from './store'
+export type { Store, ReadableStore } from './store'
+export { useStore } from './useStore.macos.tsrx'
+export { openSheet, closeSheet, sheetHost } from './sheet-service.macos'
+export type * from './props'