@octane-xplat/ui 0.5.0 → 0.7.0

package/src/Popover.tsrx

@@ -0,0 +1,157 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef, useState } from 'octane';
+import { GridLayout } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { PopoverProps } from './props';
+import { applyNativeProps } from './platformProps';
+import { cx } from './cx';
+import { positionPopover, type PopoverPosition } from './popover-position';
+import { applyThemeClasses, useThemeScheme } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout.mobile';
+
+function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
+	const panelRef = useRef<any>(null);
+	const [position, setPosition] = useState<PopoverPosition | null>(null);
+	const [settled, setSettled] = useState(false);
+	const update = () => {
+		const anchor = props.anchorView;
+		const coordinateRoot = anchor?.page?.content;
+		if (!anchor?.getLocationRelativeTo || !coordinateRoot?.getActualSize) return;
+		const point = anchor.getLocationRelativeTo(coordinateRoot);
+		const anchorSize = anchor.getActualSize();
+		const panelSize = panelRef.current?.getActualSize?.();
+		if (!point || !anchorSize) return;
+		const next = positionPopover(
+			{
+				left: point.x,
+				top: point.y,
+				width: anchorSize.width,
+				height: anchorSize.height,
+			},
+			{ width: panelSize?.width ?? 0, height: panelSize?.height ?? 0 },
+			{
+				left: 0,
+				top: 0,
+				width: coordinateRoot.getActualSize().width,
+				height: coordinateRoot.getActualSize().height,
+			},
+			props.placement ?? 'bottom',
+		);
+
+		setPosition((current) =>
+			current?.left === next.left &&
+			current?.top === next.top &&
+			current?.placement === next.placement
+				? current
+				: next,
+		);
+
+		if (panelSize?.width > 0 && panelSize?.height > 0) setSettled(true);
+	};
+
+	useEffect(() => {
+		const anchor = props.anchorView;
+		if (!props.open || !anchor) return;
+		const listeners: { view: any; event: string; handler: () => void }[] = [];
+		let view = anchor;
+		while (view) {
+			for (const event of ['layoutChanged', 'scroll']) {
+				const handler = () => update();
+				view.on?.(event, handler);
+				listeners.push({ view, event, handler });
+			}
+
+			view = view.parent;
+		}
+
+		update();
+		return () => {
+			for (const listener of listeners) {
+				listener.view.off?.(listener.event, listener.handler);
+			}
+		};
+	}, [props.open, props.anchorView, props.placement, props.children, props.style]);
+
+	useEffect(() => {
+		applyNativeProps(panelRef.current, props);
+	}, [props.ios, props.android, settled]);
+
+	const dismiss = () => props.onDismiss?.();
+
+	<absolutelayout
+		width="100%"
+		height="100%"
+		className={cx('vx-popover-layer', useThemeScheme() === 'dark' && 'ns-dark')}
+	>
+		{(props.dismissOnOutsideTap ?? true) && <gridlayout
+			width="100%"
+			height="100%"
+			backgroundColor={"transparent" as any}
+			className="vx-popover-backdrop"
+			onTap={dismiss}
+		/>}
+		<gridlayout
+			ref={panelRef}
+			left={position?.left ?? 0}
+			top={position?.top ?? 0}
+			opacity={settled ? 1 : 0}
+			className={cx('vx-popover', props.className)}
+			style={props.style}
+			onLoaded={update}
+			onLayoutChanged={update}
+		>
+			{props.children}
+		</gridlayout>
+	</absolutelayout>
+}
+
+/** Positions popover content in a layer on the current page's RootLayout —
+ *  the universal driver has no createPortal, so this is imperative like
+ *  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);
+
+	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?.();
+
+			return;
+		}
+
+		const anchor = props.anchor?.current;
+		const rl = rootLayoutFor(anchor);
+		if (!anchor || !rl) return;
+
+		if (cur) {
+			cur.root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
+			return;
+		}
+
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, 'vx-popover-host');
+		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) => {
+			if (shown.current?.host === host) shown.current = null;
+			console.error('[Popover] open failed', error);
+			root.unmount?.();
+		});
+	}, [props.open, props.children, props.placement, props.className, props.style, props.dismissOnOutsideTap]);
+
+	<></>
+}

package/src/Popover.web.tsrx

@@ -0,0 +1,109 @@
+import { createPortal, useEffect, useRef, useState } from 'octane';
+import { useThemeScheme } from './theme/theme-scheme';
+import type { PopoverProps } from './props';
+import { cx } from './cx';
+import { positionPopover } from './popover-position';
+
+type Position = { left: number; top: number };
+
+function PopoverLayer(props: PopoverProps & { anchorElement: any }) @{
+	const dark = useThemeScheme() === 'dark';
+	const panelRef = useRef<any>(null);
+	const [position, setPosition] = useState<Position | null>(null);
+	const update = () => {
+		const anchor = props.anchorElement;
+		if (!anchor?.getBoundingClientRect) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const panelRect = panelRef.current?.getBoundingClientRect?.();
+		const placed = positionPopover(
+			{
+				left: anchorRect.left,
+				top: anchorRect.top,
+				width: anchorRect.width,
+				height: anchorRect.height,
+			},
+			{ width: panelRect?.width ?? 0, height: panelRect?.height ?? 0 },
+			{ left: 0, top: 0, width: window.innerWidth, height: window.innerHeight },
+			props.placement ?? 'bottom',
+		);
+
+		setPosition((current) =>
+			current?.left === placed.left && current?.top === placed.top
+				? current
+				: placed,
+		);
+	};
+
+	useEffect(() => {
+		if (!props.open || !props.anchorElement?.getBoundingClientRect) {
+			setPosition(null);
+			return;
+		}
+
+		update();
+		window.addEventListener('resize', update);
+		window.addEventListener('scroll', update, true);
+		const observer = typeof ResizeObserver === 'undefined' || !panelRef.current
+			? null
+			: new ResizeObserver(update);
+
+		if (observer && panelRef.current) observer.observe(panelRef.current);
+		return () => {
+			window.removeEventListener('resize', update);
+			window.removeEventListener('scroll', update, true);
+			observer?.disconnect();
+		};
+	}, [props.open, props.anchorElement, props.placement, props.children, position === null]);
+
+	const stopPointer = (event: PointerEvent) => event.stopPropagation();
+	const dismiss = (event: MouseEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+		props.onDismiss?.();
+	};
+
+	@if (props.open && position) {
+		<>{createPortal(
+		<div
+			className={cx('vx-popover-layer', dark && 'dark')}
+			style={{ position: 'fixed', inset: 0, zIndex: 1000, pointerEvents: 'none' }}
+		>
+			{(props.dismissOnOutsideTap ?? true) && <div
+				className="vx-popover-backdrop"
+				style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'auto' }}
+				onPointerDown={stopPointer}
+				onClick={dismiss}
+			/>}
+			<div
+				ref={panelRef}
+				className={cx('vx-popover', props.className)}
+				style={{
+					...props.style,
+					position: 'fixed',
+					top: position.top,
+					left: position.left,
+					zIndex: 1,
+					pointerEvents: 'auto',
+				}}
+				{...props.web}
+			>
+				{props.children}
+			</div>
+			</div>,
+			document.body,
+		)}</>
+	}
+}
+
+/** Positions a body portal from its anchor and dismisses on outside taps. */
+export function Popover(props: PopoverProps) @{
+	const [anchorElement, setAnchorElement] = useState<any>(null);
+	useEffect(() => {
+		const next = props.anchor?.current ?? null;
+		if (next !== anchorElement) setAnchorElement(next);
+	}, [props.anchor, props.open, anchorElement]);
+
+	@if (props.open && anchorElement) {
+		<PopoverLayer {...props} anchorElement={anchorElement} />
+	}
+}

package/src/Pressable.macos.tsrx

@@ -0,0 +1,19 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PressableProps } from './props'
+import { cx } from './cx'
+import { layoutChildProps } from './layout-child'
+
+export function Pressable(props: PressableProps) @{
+	<flexboxlayout
+		{...layoutChildProps(props)}
+		id={props.id}
+		flexDirection="column"
+		className={cx('vx-pressable', props.className)}
+		style={props.style}
+		onTap={props.disabled ? undefined : props.onPress}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : undefined)}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Pressable.tsrx

@@ -0,0 +1,37 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PressableProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
+import { layoutChildProps } from './layout-child';
+import { usePan } from './pan.tsrx';
+/** flexboxlayout, not contentview — ContentView is single-child: the driver
+ *  assigns each child to `.content`, so every sibling but the last was
+ *  silently dropped. Column flex matches View's shape (and the web div);
+ *  tap/longPress are gesture events, they attach to any view. */
+export function Pressable(props: PressableProps) @{
+	<flexboxlayout
+		ref={(v: any) => { if (v) { applyEscapeProps(v, props); props.bind?.(v); } }}
+		id={props.id}
+		{...layoutChildProps(props)}
+		className={cx('vx-pressable', props.className)}
+		style={{ ...props.style, ...(props.hitSlop ? { margin: -props.hitSlop, padding: props.hitSlop } : {}) }}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+		onPan={usePan(props.disabled ? undefined : props.onPan)}
+		onSwipe={props.disabled ? undefined : props.onSwipe}
+		onTap={props.disabled ? undefined : props.onPress}
+		onLongPress={props.disabled ? undefined : props.onLongPress}
+		onDoubleTap={props.disabled ? undefined : props.onDoublePress}
+		onTouch={props.disabled ? undefined : (e: any) => {
+			if (e.action === 'down') props.onPressIn?.();
+			else if (e.action === 'up' || e.action === 'cancel') props.onPressOut?.();
+		}}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Pressable.web.tsrx

@@ -0,0 +1,45 @@
+import { useRef } from 'octane';
+import type { PressableProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { layoutChildProps } from './layout-child.web';
+import { usePan } from './pan.web.tsrx';
+
+export function Pressable(props: PressableProps) @{
+	const el = useRef<HTMLElement | null>(null);
+	let timer: ReturnType<typeof setTimeout> | null = null;
+
+	usePan(el, props.disabled ? undefined : props.onPan);
+
+	const cancel = () => { if (timer !== null) { clearTimeout(timer); timer = null; } };
+
+	// Long-press parity with native: ~500ms hold over pointerdown/up.
+	const down = () => {
+		if (props.disabled || !props.onLongPress) return;
+		cancel();
+		timer = setTimeout(() => { timer = null; props.onLongPress?.(); }, 500);
+	};
+
+	<div
+		ref={(e: any) => { el.current = e; if (e) { applyEscapeProps(e, props); props.bind?.(e); } }}
+		id={props.id}
+		className={['vx-pressable', props.className]}
+		{...layoutChildProps(props, { ...props.style, ...(props.hitSlop ? { margin: -props.hitSlop, padding: props.hitSlop } : {}) })}
+		role={props.accessibilityRole ?? 'button'}
+		aria-label={props.accessibilityLabel}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled ?? props.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}
+		onClick={props.disabled ? undefined : props.onPress}
+		onDoubleClick={props.disabled ? undefined : props.onDoublePress}
+		onPointerDown={(e: any) => { if (!props.disabled) { props.onPressIn?.(); down(); } }}
+		onPointerUp={() => { if (!props.disabled) props.onPressOut?.(); cancel(); }}
+		onPointerLeave={() => { if (!props.disabled) props.onPressOut?.(); cancel(); }}
+		onPointerCancel={() => { if (!props.disabled) props.onPressOut?.(); cancel(); }}
+	>
+		{props.children}
+	</div>
+}

package/src/ProgressGroup.macos.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ProgressGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Meter } from './macos-extras.macos.tsrx';
+
+/** ProgressGroup — stacked labeled Meter rows. */
+export function ProgressGroup(props: ProgressGroupProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-progressgroup', props.className)} style={props.style}>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout className="vx-progressgroup-row">
+				<Meter value={item.value} max={item.max} accessibilityLabel={item.label} />
+				{item.label != null ? <label className="vx-progressgroup-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/ProgressGroup.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ProgressGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Meter } from './Meter.tsrx';
+
+/** ProgressGroup — stacked labeled Meter rows. */
+export function ProgressGroup(props: ProgressGroupProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-progressgroup', props.className)} style={props.style}>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout className="vx-progressgroup-row">
+				<Meter value={item.value} max={item.max} accessibilityLabel={item.label} />
+				{item.label != null ? <label className="vx-progressgroup-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/ProgressGroup.web.tsrx

@@ -0,0 +1,15 @@
+import type { ProgressGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Meter } from './Meter.web.tsrx';
+
+/** ProgressGroup — stacked labeled Meter rows. */
+export function ProgressGroup(props: ProgressGroupProps) @{
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-progressgroup', props.className]} style={props.style} role="group">
+		{props.items.map((item: any) => (
+			<div key={item.key} className="vx-progressgroup-row">
+				<Meter value={item.value} max={item.max} accessibilityLabel={item.label} />
+				{item.label != null ? <span className="vx-progressgroup-label">{item.label}</span> : null}
+			</div>
+		))}
+	</div>
+}

package/src/RadioGroup.macos.tsrx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { RadioGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn radio group — dot options in a column (or row with
+ *  `horizontal`). Selecting an option calls `onValueChange`. */
+export function RadioGroup(props: RadioGroupProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal ? 'row' : 'column'}
+		className={cx('vx-radio-group', props.horizontal && 'vx-radio-group--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		{props.options.map((opt: any) => {
+			const selected = props.value === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<flexboxlayout
+					key={opt.value}
+					flexDirection="row"
+					alignItems="center"
+					gap={8}
+					className={cx('vx-radio-row', selected && 'vx-radio--on', disabled && 'vx-radio--disabled')}
+					onTap={disabled ? undefined : () => props.onValueChange?.(opt.value)}
+				>
+					{/* circle/dot metrics are CSS on web — inline them here
+					   (AppKit has no style layer); keep in step with .vx-radio */}
+					<flexboxlayout
+						className="vx-radio"
+						alignItems="center"
+						justifyContent="center"
+						style={{
+							width: 18,
+							height: 18,
+							borderWidth: 1,
+							borderColor: selected ? '#171717' : '#d4d4d4',
+							borderRadius: 9,
+						}}
+					>
+						{selected ? <flexboxlayout className="vx-radio-dot" style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: '#171717' }} /> : null}
+					</flexboxlayout>
+					{opt.label != null ? <label className="vx-radio-label" text={opt.label} /> : null}
+				</flexboxlayout>
+			);
+		})}
+	</flexboxlayout>
+}

package/src/RadioGroup.tsrx

@@ -0,0 +1,34 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RadioGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn radio group — dot options in a column (or row with
+ *  `horizontal`). Selecting an option calls `onValueChange`. */
+export function RadioGroup(props: RadioGroupProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal ? 'row' : 'column'}
+		className={cx('vx-radio-group', props.horizontal && 'vx-radio-group--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		{props.options.map((opt: any) => {
+			const selected = props.value === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<flexboxlayout
+					key={opt.value}
+					className={cx('vx-radio-row', selected && 'vx-radio--on', disabled && 'vx-radio--disabled')}
+					onTap={disabled ? undefined : () => props.onValueChange?.(opt.value)}
+				>
+					<flexboxlayout className="vx-radio">
+						{selected ? <flexboxlayout className="vx-radio-dot" /> : null}
+					</flexboxlayout>
+					{opt.label != null ? <label className="vx-radio-label" text={opt.label} /> : null}
+				</flexboxlayout>
+			);
+		})}
+	</flexboxlayout>
+}

package/src/RadioGroup.web.tsrx

@@ -0,0 +1,43 @@
+import type { RadioGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn radio group — dot options in a column (or row with
+ *  `horizontal`). Selecting an option calls `onValueChange`. */
+export function RadioGroup(props: RadioGroupProps) @{
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		role="radiogroup"
+		aria-label={props.accessibilityLabel}
+		className={['vx-radio-group', props.horizontal ? 'vx-radio-group--row' : undefined, props.className]}
+		style={props.style}
+	>
+		{props.options.map((opt: any) => {
+			const selected = props.value === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<div
+					key={opt.value}
+					role="radio"
+					aria-checked={selected}
+					aria-disabled={disabled || undefined}
+					tabIndex={disabled ? undefined : 0}
+					className={['vx-radio-row', selected ? 'vx-radio--on' : undefined, disabled ? 'vx-radio--disabled' : undefined]}
+					onClick={disabled ? undefined : () => props.onValueChange?.(opt.value)}
+					onKeyDown={(e: any) => {
+						if (disabled) return;
+						if (e.key === ' ' || e.key === 'Enter') {
+							e.preventDefault();
+							props.onValueChange?.(opt.value);
+						}
+					}}
+				>
+					<div className="vx-radio" aria-hidden="true">
+						{selected ? <div className="vx-radio-dot" /> : null}
+					</div>
+					{opt.label != null ? <span className="vx-radio-label">{opt.label}</span> : null}
+				</div>
+			);
+		})}
+	</div>
+}

package/src/RichText.tsrx

@@ -0,0 +1,40 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RichTextProps, RichTextSpanProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+import { layoutChildProps } from './layout-child';
+
+/** Native rich text is a Label hosting one FormattedString. The driver knows
+ * how to parent FormattedString → Span, while each run writes its text
+ * directly because Span is not a TextBase host for #text children. */
+export function RichText(props: RichTextProps) @{
+	<label
+		id={props.id}
+		ref={(el: any) => applyEscapeProps(el, props)}
+		{...layoutChildProps(props)}
+		className={cx('vx-rich-text', props.className)}
+		style={props.style}
+		whiteSpace="normal"
+	>
+		<formattedstring>{props.children}</formattedstring>
+	</label>
+}
+
+function runText(props: RichTextSpanProps): string {
+	if (props.text !== undefined) return props.text;
+	if (typeof props.children === 'string' || typeof props.children === 'number') {
+		return String(props.children);
+	}
+
+	return '';
+}
+
+/** A FormattedString run. `onLinkTap` is NativeScript's per-span tap event. */
+export function RichTextSpan(props: RichTextSpanProps) @{
+	<span
+		text={runText(props)}
+		className={cx(props.className)}
+		style={props.style}
+		onLinkTap={props.onPress}
+	/>
+}

package/src/RichText.web.tsrx

@@ -0,0 +1,24 @@
+import type { RichTextProps, RichTextSpanProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { layoutChildProps } from './layout-child.web';
+
+export function RichText(props: RichTextProps) @{
+	<span
+		id={props.id}
+		ref={(el: any) => applyEscapeProps(el, props)}
+		className={['vx-rich-text', props.className]}
+		{...layoutChildProps(props, props.style)}
+	>
+		{props.children}
+	</span>
+}
+
+export function RichTextSpan(props: RichTextSpanProps) @{
+	<span
+		className={props.className}
+		style={props.style}
+		onClick={() => props.onPress?.()}
+	>
+		{props.text ?? props.children}
+	</span>
+}

package/src/RouteHost.macos.tsrx

@@ -0,0 +1,18 @@
+/** @jsxImportSource @xplat/macos/renderer */
+
+type RouteHostProps = {
+	screen: any
+	layouts: any[]
+	params: Record<string, unknown>
+}
+
+export function RouteHost(props: RouteHostProps) @{
+	const Screen = props.screen
+	let child = <Screen {...props.params} />
+	for (let i = props.layouts.length - 1; i >= 0; i--) {
+		const Layout = props.layouts[i]
+		const nested = child
+		child = <Layout>{nested}</Layout>
+	}
+	<>{child}</>
+}