@octane-xplat/ui 0.7.2 → 0.9.0

package/dist/web/theme/colorScheme.web.js

@@ -1,12 +1,39 @@
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/theme/colorScheme.web.ts
-function getColorScheme() {
+var hostTransport = () => typeof window === "undefined" ? null : window.__xplatHostTransport ?? null;
+var hostedScheme = typeof window === "undefined" ? "light" : window.__xplatHostSnapshot?.colorScheme ?? window.__xplatColorScheme ?? "light";
+function getSystemScheme() {
 	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
+function getColorScheme() {
+	return hostTransport() ? hostedScheme : getSystemScheme();
+}
 function subscribeSystemScheme(cb) {
-	const mq = matchMedia("(prefers-color-scheme: dark)");
-	mq.addEventListener("change", cb);
-	return () => mq.removeEventListener("change", cb);
+	const transport = hostTransport();
+	if (!transport) {
+		const mq = matchMedia("(prefers-color-scheme: dark)");
+		mq.addEventListener("change", cb);
+		return () => mq.removeEventListener("change", cb);
+	}
+	const onTransportMessage = (message) => {
+		try {
+			const packet = JSON.parse(message);
+			if (packet.type === "event" && packet.name === "appearance.change") {
+				hostedScheme = packet.payload === "dark" ? "dark" : "light";
+				cb();
+			}
+		} catch {}
+	};
+	const onCompatEvent = (event) => {
+		hostedScheme = event.detail === "dark" ? "dark" : "light";
+		cb();
+	};
+	const offTransport = transport.listen(onTransportMessage);
+	window.addEventListener("xplat:appearance.change", onCompatEvent);
+	return () => {
+		offTransport();
+		window.removeEventListener("xplat:appearance.change", onCompatEvent);
+	};
 }
 function useColorScheme() {
 	return useSyncExternalStore(subscribeSystemScheme, getColorScheme, _h$0);

package/dist/web/ui.js

@@ -6,9 +6,12 @@ import { Absolute } from "./Absolute.web.tsrx.js";
 import { setTranslate } from "./translate.web.js";
 import { Spacer } from "./Spacer.web.tsrx.js";
 import { Text } from "./Text.web.tsrx.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { Markdown, MarkdownScreen } from "./Markdown.tsrx.js";
 import { RichText, RichTextSpan } from "./RichText.web.tsrx.js";
 import { Pressable } from "./Pressable.web.tsrx.js";
-import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
 import { Button } from "./Button.web.tsrx.js";
 import { Collapsible } from "./Collapsible.web.tsrx.js";
 import { Accordion } from "./Accordion.web.tsrx.js";
@@ -56,13 +59,12 @@ import { User } from "./User.web.tsrx.js";
 import { Meter } from "./Meter.web.tsrx.js";
 import { ProgressGroup } from "./ProgressGroup.web.tsrx.js";
 import { Link } from "./Link.web.tsrx.js";
-import { defineRoutes, deriveRouteManifest, mergeRouteManifests } from "./route-table.js";
+import { defineRoutes, deriveRouteManifest, manifestToJson, mergeRouteManifests } from "./route-table.js";
 import { addBackInterceptor, addRoutes, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.js";
 import { NavLink } from "./NavLink.web.tsrx.js";
 import { TextArea } from "./TextArea.web.tsrx.js";
 import { SearchInput } from "./SearchInput.web.tsrx.js";
 import { SegmentedControl } from "./SegmentedControl.web.tsrx.js";
-import { ScrollView } from "./ScrollView.web.tsrx.js";
 import { ScrollBox } from "./ScrollBox.web.tsrx.js";
 import { VirtualList } from "./VirtualList.web.tsrx.js";
 import { Image } from "./Image.web.tsrx.js";
@@ -73,11 +75,11 @@ import { showToast } from "./toast-anchor.web.tsrx.js";
 import { useAnimation } from "./anim.web.tsrx.js";
 import { styled } from "./styled.web.tsrx.js";
 import { openWindow } from "./windows.web.js";
-import { Screen } from "./Screen.web.tsrx.js";
 import { Tabs } from "./Tabs.web.tsrx.js";
 import { Switch } from "./Switch.web.tsrx.js";
 import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
 import { SafeArea } from "./SafeArea.web.tsrx.js";
+import { KeyboardAvoiding } from "./KeyboardAvoiding.web.tsrx.js";
 import { Drawer } from "./Drawer.web.tsrx.js";
 import { useMeasure } from "./useMeasure.web.tsrx.js";
 import { Slider } from "./Slider.web.tsrx.js";
@@ -89,5 +91,5 @@ import { createStore } from "./store.js";
 import { useStore } from "./use-store.web.tsrx.js";
 import { Sheet } from "./Sheet.web.tsrx.js";
 import { closeSheet, openSheet } from "./sheet-service.web.js";
-import "./index.shared.js";
-export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, ListItem, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };
+import "./index.shared.web.js";
+export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, KeyboardAvoiding, Link, ListItem, Markdown, MarkdownScreen, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, manifestToJson, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/web/virtual-list-cell-pool.js

@@ -0,0 +1,63 @@
+//#region src/virtual-list-cell-pool.ts
+/** Reuse physical hosts without retaining an off-window logical row subtree. */
+var VirtualListCellPool = class {
+	constructor() {
+		this.cells = [];
+		this.byId = /* @__PURE__ */ new Map();
+		this.nextId = 0;
+	}
+	update(entries) {
+		if (entries.length === 0) {
+			this.clear();
+			return this.cells;
+		}
+		const wanted = new Set(entries.map((entry) => entry.rowKey));
+		let cells = this.cells.map((cell) => cell.entry && !wanted.has(cell.entry.rowKey) ? {
+			...cell,
+			entry: null,
+			rows: [],
+			generation: cell.generation + 1
+		} : cell);
+		const retained = new Map(cells.filter((cell) => cell.entry).map((cell) => [cell.entry.rowKey, cell.id]));
+		for (const entry of entries) {
+			const retainedId = retained.get(entry.rowKey);
+			let index = retainedId === void 0 ? cells.findIndex((cell) => !cell.entry && cell.typeKey === entry.typeKey) : cells.findIndex((cell) => cell.id === retainedId);
+			if (index === -1) {
+				index = cells.length;
+				cells.push({
+					id: this.nextId++,
+					typeKey: entry.typeKey,
+					generation: 0,
+					entry: null,
+					rows: []
+				});
+			}
+			const cell = cells[index];
+			if (cell.entry !== entry) cells[index] = {
+				...cell,
+				entry,
+				rows: [entry],
+				generation: cell.generation + 1
+			};
+		}
+		let spare = 0;
+		cells = cells.filter((cell) => cell.entry || spare++ < 8);
+		cells.sort((a, b) => (a.entry?.index ?? Infinity) - (b.entry?.index ?? Infinity) || a.id - b.id);
+		this.cells = cells;
+		this.byId = new Map(cells.map((cell) => [cell.id, cell]));
+		return cells;
+	}
+	get(id) {
+		return this.byId.get(id);
+	}
+	isCurrent(id, rowKey, generation) {
+		const cell = this.byId.get(id);
+		return cell?.entry?.rowKey === rowKey && cell.generation === generation;
+	}
+	clear() {
+		this.cells = [];
+		this.byId.clear();
+	}
+};
+//#endregion
+export { VirtualListCellPool };

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Cross-platform UI for Octane xplat — shared primitives, stacks, routes and theming across web (DOM), iOS and Android (NativeScript)",
   "keywords": [
-    "octane",
-    "xplat",
+    "android",
     "cross-platform",
-    "ui",
-    "ui-components",
-    "primitives",
     "design-system",
-    "nativescript",
     "ios",
-    "android",
-    "web"
+    "nativescript",
+    "octane",
+    "primitives",
+    "ui",
+    "ui-components",
+    "web",
+    "xplat"
   ],
-  "license": "MIT",
   "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/ui",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
+    "directory": "packages/ui"
+  },
   "files": [
     "dist",
     "types",
@@ -60,7 +65,7 @@
     "./theme/tokens.css": "./src/theme/tokens.css"
   },
   "devDependencies": {
-    "@nativescript-community/octane": "0.2.1",
+    "@nativescript-community/octane": "0.2.4",
     "@nativescript-community/ui-drawer": "0.1.32",
     "@nativescript/core": "9.1.2",
     "@nativescript/types": "9.0.0",
@@ -68,7 +73,7 @@
     "@tsrx/typescript-plugin": "0.4.11",
     "jsdom": "30.1.1",
     "octane": "0.6.3",
-    "tsrx-typegen": "0.1.0",
+    "tsrx-typegen": "0.2.1",
     "typescript": "5.9.3",
     "vite": "8.3.0",
     "vitest": "5.0.1"
@@ -100,14 +105,11 @@
       "android": "9.1.0"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
-    "directory": "packages/ui"
-  },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsrx-typegen --target ui && node ../../scripts/check-native-dist.mjs",
+    "build": "node ../../scripts/sync-ui-barrels.mjs --check && vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
     "test:packed": "node tests/packed-consumer.mjs",
-    "test:native": "vitest run --config vitest.native.config.mts"
+    "test:native": "vitest run --config vitest.native.config.mts",
+    "typegen": "tsrx-typegen --target ui",
+    "pack:check": "tsrx-typegen --pack-check"
   }
 }

package/platforms/android/native-api-usage.json

@@ -1,8 +1,8 @@
 {
-    "uses": [
-        "com.caverock.androidsvg:SVG",
-        "com.caverock.androidsvg:SVGExternalFileResolver",
-        "com.caverock.androidsvg:PreserveAspectRatio",
-        "com.caverock.androidsvg:RenderOptions"
-    ]
-}
+	"uses": [
+		"com.caverock.androidsvg:SVG",
+		"com.caverock.androidsvg:SVGExternalFileResolver",
+		"com.caverock.androidsvg:PreserveAspectRatio",
+		"com.caverock.androidsvg:RenderOptions"
+	]
+}

package/src/CommandPalette.tsrx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { useState } from 'octane';
+import { Screen } from '@nativescript/core';
 import type { CommandPaletteProps, MenuItem } from "./props";
 import { cx } from "./cx";
 import { Overlay } from './Overlay.tsrx';
@@ -20,6 +21,11 @@ export function CommandPalette(props: CommandPaletteProps) @{
 		? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase()))
 		: props.items;
 
+	const panelStyle = {
+		...props.style,
+		maxWidth: props.style?.maxWidth ?? Screen.mainScreen.widthDIPs * 0.9,
+	};
+
 	const select = (item: MenuItem) => {
 		if (item.disabled) return;
 		setOpen(false);
@@ -29,8 +35,9 @@ export function CommandPalette(props: CommandPaletteProps) @{
 	<Overlay open={props.open} shadeCover={true} onDismiss={() => setOpen(false)} className="vx-cmdk-layer">
 		<flexboxlayout
 			className={cx('vx-commandpalette', props.className)}
-			style={props.style}
+			style={panelStyle}
 			id={props.id}
+			flexDirection="column"
 			horizontalAlignment="center"
 			verticalAlignment="top"
 			marginTop={80}

package/src/Grid.tsrx

@@ -1,20 +1,51 @@
 /** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
 import type { GridProps } from './props';
 import { cx } from './cx';
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+import { autoPlaceGridChildren, ensureGridTracks } from './grid-auto-placement';
+import { gridChildPlacement } from './grid-placement';
 
 let warnedAboutGap = false;
 
 export function Grid(props: GridProps) @{
+	const grid = useRef<any>(null);
 	const deprecatedGap = (props as GridProps & { gap?: number | string }).gap;
 	if (deprecatedGap != null && !warnedAboutGap) {
 		warnedAboutGap = true;
 		console.warn('[Grid] gap was removed; use child margins');
 	}
 
+	useEffect(() => {
+		const host = grid.current;
+		if (!host) return;
+
+		const views: any[] = [];
+		host.eachChildView((child: any) => {
+			views.push(child);
+			return true;
+		});
+
+		const placement = autoPlaceGridChildren(
+			views.map(gridChildPlacement),
+			props.rows,
+			props.columns,
+		);
+
+		host.rows = ensureGridTracks(props.rows, placement.rowCount);
+		host.columns = ensureGridTracks(props.columns, placement.columnCount);
+		for (let index = 0; index < views.length; index++) {
+			views[index].row = placement.cells[index].row;
+			views[index].col = placement.cells[index].col;
+		}
+	}, [props.children, props.rows, props.columns]);
+
 	<gridlayout
 		id={props.id}
-		ref={(view: any) => applyEscapeProps(view, props)}
+		ref={(view: any) => {
+			grid.current = view;
+			applyEscapeProps(view, props);
+		}}
 		rows={props.rows}
 		columns={props.columns}
 		className={cx('vx-grid', props.className)}

package/src/Icon.macos.tsrx

@@ -8,6 +8,7 @@ import { getIcon } from './icons'
 export function Icon(props: IconProps) @{
 	const size = props.size ?? 24
 	const glyph = getIcon(props.name)
+
 	<label
 		className={props.className}
 		style={{ width: size, height: size, fontSize: size * 0.75, ...props.style }}

package/src/KeyboardAvoiding.macos.tsrx

@@ -1,8 +1,14 @@
 /** @jsxImportSource @xplat/macos/renderer */
 import type { KeyboardAvoidingProps } from './props'
+import { cx } from './cx'
 
 export function KeyboardAvoiding(props: KeyboardAvoidingProps) @{
-	<flexboxlayout flexDirection="column" className={props.className} style={props.style}>
+	<flexboxlayout
+		id={props.id}
+		flexDirection="column"
+		className={cx('vx-keyboard-avoiding', props.className)}
+		style={props.style}
+	>
 		{props.children}
 	</flexboxlayout>
 }

package/src/KeyboardAvoiding.mobile.tsrx

@@ -32,10 +32,10 @@ function useKeyboardInset() {
 
 function useAndroidResize() {
 	useEffect(() => {
-		const nativeWindow = Application.android?.foregroundActivity?.window;
+		const nativeWindow = Application.android?.foregroundActivity?.getWindow();
 		if (!nativeWindow) return;
 		const params = android.view.WindowManager.LayoutParams;
-		const previous = nativeWindow.attributes.softInputMode;
+		const previous = nativeWindow.getAttributes().softInputMode;
 		const adjusted = (previous & ~params.SOFT_INPUT_MASK_ADJUST) | params.SOFT_INPUT_ADJUST_RESIZE;
 		nativeWindow.setSoftInputMode(adjusted);
 		return () => nativeWindow.setSoftInputMode(previous);

package/src/KeyboardAvoiding.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { KeyboardAvoidingProps } from './props'
+import { cx } from './cx'
+
+// Targets without mobile keyboard insets retain the shared column layout.
+export function KeyboardAvoiding(props: KeyboardAvoidingProps) @{
+	<flexboxlayout
+		id={props.id}
+		flexDirection="column"
+		className={cx('vx-keyboard-avoiding', props.className)}
+		style={props.style}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/KeyboardAvoiding.web.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource octane */
+import type { KeyboardAvoidingProps } from './props'
+import { cx } from './cx'
+
+// Web keeps the wrapper's layout and styling, without claiming keyboard avoidance.
+export function KeyboardAvoiding(props: KeyboardAvoidingProps) @{
+	<div
+		id={props.id}
+		className={cx('vx-keyboard-avoiding', props.className)}
+		style={props.style}
+		{...props.web}
+	>
+		{props.children}
+	</div>
+}

package/src/Markdown.tsrx

@@ -0,0 +1,121 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { Screen } from './Screen';
+import { ScrollView } from './ScrollView';
+import { Text } from './Text';
+import { View } from './View';
+
+/** Markdown AST — the serialized shape `xplat routes` bakes for `.md`
+ *  routes (parse happens at codegen, not runtime). `MdNode` covers block
+ *  level; `MdInline` covers text runs inside paragraphs/lists/quotes. */
+export type MdInline =
+	| { t: 'text'; text: string }
+	| { t: 'code'; text: string }
+	| { t: 'bold'; children: MdInline[] }
+	| { t: 'em'; children: MdInline[] }
+	| { t: 'link'; text: string; href: string };
+
+export type MdNode =
+	| { t: 'h'; depth: 1 | 2 | 3 | 4 | 5 | 6; children: MdInline[] }
+	| { t: 'p'; children: MdInline[] }
+	| { t: 'code'; lang?: string; text: string }
+	| { t: 'list'; ordered: boolean; items: MdInline[][] }
+	| { t: 'quote'; children: MdInline[] }
+	| { t: 'hr' };
+
+export interface MdDoc {
+	kind: 'octane-xplat/md';
+	v: 1;
+	children: MdNode[];
+}
+
+const headingClass = ['text-2xl font-bold', 'text-xl font-semibold', 'text-lg font-semibold'];
+
+function Inlines(props: { nodes: MdInline[] }) {
+	const out = [];
+	for (const n of props.nodes ?? []) {
+		switch (n.t) {
+			case 'code':
+				out.push(
+					<Text style={{ fontFamily: 'ui-monospace' }}>{n.text}</Text>,
+				);
+
+				break;
+			case 'bold':
+				out.push(<Text className="font-bold"><Inlines nodes={n.children} /></Text>);
+
+				break;
+			case 'em':
+				out.push(<Text style={{ fontStyle: 'italic' }}><Inlines nodes={n.children} /></Text>);
+
+				break;
+			case 'link':
+				out.push(<Text style={{ textDecorationLine: 'underline' }}>{n.text}</Text>);
+
+				break;
+			default:
+				out.push(n.text);
+		}
+	}
+
+	return out;
+}
+
+/** Renders a baked markdown doc with the shared vocabulary — Text
+ *  blocks on every platform, no parser at runtime. `data` is the AST the
+ *  codegen baked into routes.gen.data (or a doc built programmatically). */
+export function Markdown(props: { data?: MdDoc }) @{
+	<View className="gap-3">
+		{(props.data?.children ?? []).map((node) => {
+			switch (node.t) {
+				case 'h':
+					return (
+						<Text className={headingClass[node.depth - 1] ?? 'font-semibold'}>
+							<Inlines nodes={node.children} />
+						</Text>
+					);
+				case 'p':
+					return (
+						<Text>
+							<Inlines nodes={node.children} />
+						</Text>
+					);
+				case 'code':
+					return (
+						<Text className="text-sm" style={{ fontFamily: 'ui-monospace' }}>
+							{node.text}
+						</Text>
+					);
+				case 'list':
+					return node.items.map((item, i) => (
+						<Text>
+							{(node.ordered ? `${i + 1}. ` : '• ') + ''}
+							<Inlines nodes={item} />
+						</Text>
+					));
+				case 'quote':
+					return (
+						<Text className="text-muted" style={{ fontStyle: 'italic' }}>
+							<Inlines nodes={node.children} />
+						</Text>
+					);
+				case 'hr':
+					return (
+						<View style={{ height: 1, backgroundColor: 'var(--color-border)' }} />
+					);
+				default:
+					return null;
+			}
+		})}
+	</View>
+}
+
+/** Route screen for `.md` files — the codegen emits specs with this as
+ *  `screen`, so a markdown file in the route dir is a route end-to-end.
+ *  Receives baked data like any route (`props.data`). */
+export function MarkdownScreen(props: { data?: MdDoc; error?: unknown }) @{
+	<Screen className="vx-app">
+		<ScrollView style={{ padding: 16 }}>
+			<Markdown data={props.data} />
+		</ScrollView>
+	</Screen>
+}

package/src/Meter.tsrx

@@ -17,6 +17,7 @@ function ringSvg(size: number, strokeWidth: number, ratio: number, color: string
 	const arc = ratio > 0 && r > 0
 		? `<circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-dasharray="${ratio * circumference} ${circumference}" transform="rotate(-90 ${c} ${c})"/>`
 		: '';
+
 	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">${track}${arc}</svg>`;
 }
 

package/src/Overlay.tsrx

@@ -7,12 +7,13 @@ import type { OverlayProps } from './props';
 import { cx } from './cx';
 import { applyThemeClasses } from './theme/theme-scheme';
 import { rootLayoutFor } from './root-layout.mobile';
+import { createOverlayLifetime } from './overlay-lifetime.mobile';
 
 function OverlayBody(props: { children?: any }) @{
 	<>{props.children}</>
 }
 
-type OpenOverlay = { host: GridLayout; root: any; dismissOnClose: boolean; unbindTheme?: () => void };
+type OpenOverlay = { host: GridLayout; root: any; lifetime: ReturnType<typeof createOverlayLifetime>; unbindTheme?: () => void };
 
 /** Renders children in a separate RootLayout root above the current screen. */
 export function Overlay(props: OverlayProps) @{
@@ -26,22 +27,13 @@ export function Overlay(props: OverlayProps) @{
 	useEffect(() => {
 		const current = shown.current;
 		if (!props.open) {
-			if (!current) return;
-			current.dismissOnClose = false;
-			shown.current = null;
-			const rl = rootLayout();
-			if (rl && (rl as any)?.hasChild?.(current.host)) {
-				rl.close(current.host).then(
-					() => current.root.unmount?.(),
-					(error) => { console.error('[Overlay] close failed', error); current.root.unmount?.(); },
-				);
-			} else current.root.unmount?.();
-
+			current?.lifetime.close();
 			return;
 		}
 
 		if (current) {
 			current.root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
+			current.unbindTheme?.();
 			current.unbindTheme = applyThemeClasses(current.host, cx('vx-overlay-host', props.className));
 			if (props.style) Object.assign(current.host.style, props.style);
 			Object.assign(current.host, isIOS ? props.ios : isAndroid ? props.android : undefined);
@@ -57,28 +49,21 @@ export function Overlay(props: OverlayProps) @{
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : undefined);
 		const root = createNativeScriptRoot(host);
-		const opened = { host, root, dismissOnClose: true, unbindTheme };
-		shown.current = opened;
-		root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
-		host.on('closed', () => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindTheme?.();
-			root.unmount?.();
-			if (opened.dismissOnClose) dismiss.current?.();
+		const lifetime = createOverlayLifetime(rl, host, root, 'Overlay', (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
 		});
 
-		const open = () => rl.open(host, props.shadeCover ? {
+		const opened = { host, root, lifetime, unbindTheme };
+		lifetime.own(() => opened.unbindTheme?.());
+		shown.current = opened;
+		root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
+		lifetime.open(props.shadeCover ? {
 			shadeCover: { opacity: 0.45, color: '#000000', tapToClose: true },
-		} : {}).catch((error: unknown) => {
-			if (shown.current === opened) shown.current = null;
-			console.error('[Overlay] open failed', error);
-			root.unmount?.();
-		});
-
-		if ((rl as any).hasChild?.(host)) {
-			rl.close(host).then(open, (error) => console.error('[Overlay] stale host close failed', error));
-		} else open();
+		} : {});
 	}, [props.open, props.children, props.shadeCover, props.className, props.style, props.ios, props.android]);
 
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
 	<stacklayout ref={(v: any) => { hostView.current = v; }} style={{ width: 0, height: 0 }} />
 }

package/src/Overlay.web.tsrx

@@ -1,19 +1,28 @@
-import { createPortal } from 'octane';
+import { createPortal, useEffect, useRef } from 'octane';
 import type { OverlayProps } from './props';
 import { useThemeScheme } from './theme/theme-scheme';
 import { cx } from './cx';
+import { isolateModalFocus } from './modal-focus.web';
 
 /** Renders an in-window overlay through the DOM renderer's body portal. */
 export function Overlay(props: OverlayProps) @{
 	const dark = useThemeScheme() === 'dark';
+	const layer = useRef<HTMLDivElement | null>(null);
+	const panel = useRef<HTMLDivElement | null>(null);
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+	useEffect(() => {
+		if (!props.open || !props.shadeCover || !layer.current || !panel.current) return;
+		return isolateModalFocus(layer.current, panel.current, () => dismiss.current?.());
+	}, [props.open, props.shadeCover]);
 
 	@if (props.open) {
 		<>{createPortal(
-			<div className={cx('vx-overlay', dark && 'dark', props.className)} style={{ ...props.style, position: 'fixed', inset: 0 }} {...props.web}>
+			<div ref={layer} className={cx('vx-overlay', dark && 'dark', props.className)} style={{ ...props.style, position: 'fixed', inset: 0 }} {...props.web}>
 				@if (props.shadeCover) {
 					<div className="vx-overlay-shade" onClick={props.onDismiss} />
 				}
-				<div className="vx-overlay-content" onClick={(event: any) => event.stopPropagation()}>
+				<div ref={panel} role={props.shadeCover ? 'dialog' : undefined} aria-modal={props.shadeCover ? true : undefined} className="vx-overlay-content" onClick={(event: any) => event.stopPropagation()}>
 					{props.children}
 				</div>
 			</div>,