@octane-xplat/ui 0.7.3 → 0.9.0

package/dist/native/text-write.js

@@ -1,5 +1,10 @@
 //#region src/text-write.ts
-/** Controlled `text` write for TextInput/TextArea leaves. The driver's
+var writing = /* @__PURE__ */ new WeakSet();
+/** Whether a textChange is the synchronous echo of our controlled write. */
+function isWritingText(view) {
+	return writing.has(view);
+}
+/** Controlled `text` write for TextInput/TextArea/SearchInput leaves. The driver's
 *  generic prop path writes view.text verbatim; on Android the EditText
 *  setText resets the cursor to 0 on every controlled write. Park and
 *  restore the selection around the write (clamped to the new length so an
@@ -11,17 +16,19 @@ function writeText(view, value) {
 	const next = value ?? "";
 	if (!view || view.text === next) return;
 	const et = view.android;
-	if (!et) {
+	const start = et?.getSelectionStart?.() ?? -1;
+	const end = et?.getSelectionEnd?.() ?? -1;
+	const nested = writing.has(view);
+	writing.add(view);
+	try {
 		view.text = next;
-		return;
-	}
-	const start = et.getSelectionStart?.() ?? -1;
-	const end = et.getSelectionEnd?.() ?? -1;
-	view.text = next;
-	if (start >= 0) {
-		const len = next.length;
-		et.setSelection(Math.min(start, len), Math.min(end >= 0 ? end : start, len));
+		if (start >= 0) {
+			const len = next.length;
+			et.setSelection(Math.min(start, len), Math.min(end >= 0 ? end : start, len));
+		}
+	} finally {
+		if (!nested) writing.delete(view);
 	}
 }
 //#endregion
-export { writeText };
+export { isWritingText, writeText };

package/dist/native/toast-anchor.tsrx.js

@@ -1,5 +1,5 @@
-import { applyThemeClasses } from "./theme/theme-scheme.js";
 import { topRootLayout } from "./root-layout.mobile.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
 import { Popover } from "./Popover.tsrx.js";
 import { createNativeScriptRoot, defineUniversalComponent, universalChildren, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
 import { GridLayout, isAndroid, isIOS } from "@nativescript/core";

package/dist/native/ui.js

@@ -6,9 +6,12 @@ import { Absolute } from "./Absolute.tsrx.js";
 import { setTranslate } from "./translate.js";
 import { Spacer } from "./Spacer.tsrx.js";
 import { Text } from "./Text.tsrx.js";
+import { Screen } from "./Screen.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.tsrx.js";
+import { ScrollView } from "./ScrollView.tsrx.js";
+import { Markdown, MarkdownScreen } from "./Markdown.tsrx.js";
 import { RichText, RichTextSpan } from "./RichText.tsrx.js";
 import { Pressable } from "./Pressable.tsrx.js";
-import { ActivityIndicator } from "./ActivityIndicator.tsrx.js";
 import { Button } from "./Button.tsrx.js";
 import { Collapsible } from "./Collapsible.tsrx.js";
 import { Accordion } from "./Accordion.tsrx.js";
@@ -58,14 +61,13 @@ import { Meter } from "./Meter.tsrx.js";
 import { ProgressGroup } from "./ProgressGroup.tsrx.js";
 import { Link } from "./Link.tsrx.js";
 import { getStack, registerStack, stackEntries } from "./stacks.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, layoutsForRoute, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.js";
 import { NavLink } from "./NavLink.tsrx.js";
 import { TextArea } from "./TextArea.tsrx.js";
 import { SearchInput } from "./SearchInput.tsrx.js";
 import { SegmentedControl } from "./SegmentedControl.tsrx.js";
 import { ScrollBox } from "./ScrollBox.tsrx.js";
-import { ScrollView } from "./ScrollView.tsrx.js";
 import { VirtualList } from "./VirtualList.tsrx.js";
 import { WebView } from "./WebView.tsrx.js";
 import { Hoverable } from "./Hoverable.mobile.tsrx.js";
@@ -74,11 +76,11 @@ import { showToast } from "./toast-anchor.tsrx.js";
 import { useAnimation } from "./anim.tsrx.js";
 import { styled } from "./styled.tsrx.js";
 import { openWindow } from "./windows.js";
-import { Screen } from "./Screen.tsrx.js";
 import { Tabs } from "./Tabs.tsrx.js";
 import { Switch } from "./Switch.tsrx.js";
 import { useSafeAreaInsets } from "./safeAreaInsets.tsrx.js";
 import { SafeArea } from "./SafeArea.tsrx.js";
+import { KeyboardAvoiding } from "./KeyboardAvoiding.mobile.tsrx.js";
 import { Drawer } from "./Drawer.tsrx.js";
 import { useMeasure } from "./useMeasure.tsrx.js";
 import { Slider } from "./Slider.tsrx.js";
@@ -90,6 +92,5 @@ import { useStore } from "./use-store.tsrx.js";
 import { Sheet } from "./Sheet.tsrx.js";
 import { closeSheet, openSheet } from "./sheet-service.js";
 import "./index.shared.js";
-import { KeyboardAvoiding } from "./KeyboardAvoiding.mobile.tsrx.js";
 import "./theme/status-bar-scheme.mobile.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, 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, 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 };
+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, 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/native/vendor/ui-svg/index.android.js

@@ -1,6 +1,6 @@
-import { SVGView as SVGView$1, srcProperty } from "./index.common.js";
+import { SVGView as SVGView$1, srcProperty } from "./src/index.common.js";
 import { File, Font, ImageAsset, ImageSource, Utils, knownFolders, path } from "@nativescript/core";
-//#region src/vendor/ui-svg/index.android.ts
+//#region src/vendor/ui-svg/src/index.android.ts
 function getSVG(src) {
 	if (!src) return null;
 	let imagePath;

package/dist/native/vendor/ui-svg/index.ios.js

@@ -1,6 +1,6 @@
-import { SVGView as SVGView$1, srcProperty, stretchProperty } from "./index.common.js";
+import { SVGView as SVGView$1, srcProperty, stretchProperty } from "./src/index.common.js";
 import { File, ImageAsset, Utils, knownFolders, path } from "@nativescript/core";
-//#region src/vendor/ui-svg/index.ios.ts
+//#region src/vendor/ui-svg/src/index.ios.ts
 function getUIImageScaleType(scaleType) {
 	switch (scaleType) {
 		case "aspectFill": return 2;

package/dist/native/vendor/ui-svg/{index.common.js → src/index.common.js}

@@ -1,5 +1,5 @@
 import { CSSType, Property, View } from "@nativescript/core";
-//#region src/vendor/ui-svg/index.common.ts
+//#region src/vendor/ui-svg/src/index.common.ts
 var srcProperty = new Property({ name: "src" });
 var stretchProperty = new Property({ name: "stretch" });
 var SVGView = class extends View {};

package/dist/native/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/dist/web/Button.web.tsrx.js

@@ -1,5 +1,5 @@
-import { Pressable } from "./Pressable.web.tsrx.js";
 import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
 import { Fragment, bag4, child, clone, componentSlotVoid, createScopedElement, drainFrag, markChildrenBlock, positionalChildren, template } from "octane";
 import { createElementFromConfig, textHoleUpdate } from "octane/internal/client";
 //#region src/Button.web.tsrx

package/dist/web/KeyboardAvoiding.web.tsrx.js

@@ -0,0 +1,78 @@
+import { cx } from "./cx.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/KeyboardAvoiding.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"s",
+	"f",
+	"e"
+];
+var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5;
+		const _root = clone(_t$0);
+		_m0 = props.id;
+		_m1 = cx("vx-keyboard-avoiding", props.className);
+		_m2 = props.style;
+		_m3 = snapshotSpread(props.web);
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"className",
+				_m1
+			],
+			[
+				false,
+				"style",
+				_m2
+			],
+			[true, _m3]
+		], "b:1d590fbc", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = cx("vx-keyboard-avoiding", props.className);
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.style;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(props.web);
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"className",
+				_b.b
+			],
+			[
+				false,
+				"style",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:1d590fbc", true);
+	}
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:da0dd4e6", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { KeyboardAvoiding };

package/dist/web/Markdown.tsrx.js

@@ -0,0 +1,98 @@
+import { View } from "./View.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { bag4, child, clone, componentSlotVoid, createScopedElement, createScopedValue, drainFrag, markChildrenBlock, positionalChildren, template } from "octane";
+import { createElementFromConfig, textHoleUpdate } from "octane/internal/client";
+//#region src/Markdown.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var __childrenBody = {};
+var __childrenBody$ = {};
+var __childrenBody$2 = {};
+var headingClass = [
+	"text-2xl font-bold",
+	"text-xl font-semibold",
+	"text-lg font-semibold"
+];
+function Inlines(props) {
+	const out = [];
+	for (const n of props.nodes ?? []) switch (n.t) {
+		case "code":
+			out.push(createScopedValue(() => createScopedElement(Text, { style: { fontFamily: "ui-monospace" } }, () => n.text, "c:36e0510a")));
+			break;
+		case "bold":
+			out.push(createScopedElement(Text, { className: "font-bold" }, () => createScopedValue(() => createElementFromConfig("c:a63de03b", Inlines, { nodes: n.children })), "c:a21df08c"));
+			break;
+		case "em":
+			out.push(createScopedValue(() => createScopedElement(Text, { style: { fontStyle: "italic" } }, () => createScopedValue(() => createElementFromConfig("c:85bfa585", Inlines, { nodes: n.children })), "c:8c2aeee1")));
+			break;
+		case "link":
+			out.push(createScopedValue(() => createScopedElement(Text, { style: { textDecorationLine: "underline" } }, () => n.text, "c:68791c66")));
+			break;
+		default: out.push(n.text);
+	}
+	return out;
+}
+var Markdown = function Markdown(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$0);
+			_m0 = __block.parentNode;
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		}
+		{
+			const _v = (props.data?.children ?? []).map((node) => {
+				switch (node.t) {
+					case "h": return createScopedElement(Text, { className: headingClass[node.depth - 1] ?? "font-semibold" }, () => createScopedValue(() => createElementFromConfig("c:848cdc8b", Inlines, { nodes: node.children })), "c:c64bb68d");
+					case "p": return createScopedElement(Text, {}, () => createScopedValue(() => createElementFromConfig("c:ee68c6f0", Inlines, { nodes: node.children })), "c:79fb1caa");
+					case "code": return createScopedElement(Text, {
+						className: "text-sm",
+						style: { fontFamily: "ui-monospace" }
+					}, () => node.text, "c:4a6d02c9");
+					case "list": return node.items.map((item, i) => createScopedElement(Text, {}, () => positionalChildren([node.ordered ? `${i + 1}. ` : "• ", createScopedValue(() => createElementFromConfig("c:fda35112", Inlines, { nodes: item }))]), "c:6892e48e"));
+					case "quote": return createScopedElement(Text, {
+						className: "text-muted",
+						style: { fontStyle: "italic" }
+					}, () => createScopedValue(() => createElementFromConfig("c:d67a588c", Inlines, { nodes: node.children })), "c:2da3002c");
+					case "hr": return createElementFromConfig("c:a5e792d6", View, { style: {
+						height: 1,
+						backgroundColor: "var(--color-border)"
+					} });
+					default: return null;
+				}
+			});
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, View, {
+		"className": "gap-3",
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:866fe269");
+};
+var MarkdownScreen = function MarkdownScreen(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$4(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$6(__props, __s, __extra) {
+			const __block = __s.block;
+			componentSlotVoid(__s, 0, __block.parentNode, Markdown, { "data": props.data }, __block.endMarker, void 0, void 0, void 0, void 0, "c:35a6792a");
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, ScrollView, {
+			"style": { padding: 16 },
+			"children": markChildrenBlock(__children$6, __childrenBody$)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:12e138f2");
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Screen, {
+		"className": "vx-app",
+		"children": markChildrenBlock(__children$4, __childrenBody$2)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:d76e208c");
+};
+//#endregion
+export { Markdown, MarkdownScreen };

package/dist/web/Overlay.web.tsrx.js

@@ -1,14 +1,16 @@
 import { cx } from "./cx.js";
 import { useThemeScheme } from "./theme/theme-scheme.js";
-import { bag1, bag2, bag9, child, clone, delegateEvents, drainFrag, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, portal, setEventHandler, sibling, snapshotSpread, template, withSlot } from "octane";
-import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+import { isolateModalFocus } from "./modal-focus.web.js";
+import { bag1, bag13, bag2, child, clone, delegateEvents, drainFrag, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, portal, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, sibling, snapshotSpread, template, useEffect, useRef, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, enableSignalBindings, replaceRef, setPlainAttribute } from "octane/internal/client";
 //#region src/Overlay.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents(["click"]);
 var _t$0 = /* @__PURE__ */ template("<div class=\"vx-overlay-shade\"></div>");
 var _t$1 = /* @__PURE__ */ template("<div><!><div class=\"vx-overlay-content\"></div></div>");
 var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(4));
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 function __then$2(__props, __s, __extra) {
 	const props = __extra[0];
 	let _b = __s.slots[0];
@@ -22,83 +24,112 @@ function __then$2(__props, __s, __extra) {
 }
 var _rm$5 = [
 	"s",
+	"f",
 	"e",
-	"d"
+	"r",
+	"h",
+	"g"
 ];
 function __portal$1(__props, __s, __extra) {
 	const dark = __extra[0];
-	const props = __extra[1];
+	const layer = __extra[1];
+	const panel = __extra[2];
+	const props = __extra[3];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m2, _m3, _m4, _m5, _m6;
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m10;
 		const _root = clone(_t$1);
-		_m0 = cx("vx-overlay", dark && "dark", props.className);
-		_m1 = {
+		_m0 = layer;
+		_m1 = cx("vx-overlay", dark && "dark", props.className);
+		_m2 = {
 			...props.style,
 			position: "fixed",
 			inset: 0
 		};
-		_m2 = snapshotSpread(props.web);
-		_m3 = _root;
-		_m4 = bindSignalHostPropSources(__s, void 0, _root, [
+		_m3 = snapshotSpread(props.web);
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
 			[
 				false,
-				"className",
+				"ref",
 				_m0
 			],
 			[
 				false,
-				"style",
+				"className",
 				_m1
 			],
-			[true, _m2]
-		], "b:843a5624", true);
+			[
+				false,
+				"style",
+				_m2
+			],
+			[true, _m3]
+		], "b:7f6ad544", true);
 		const _el0 = sibling(child(_root), 1);
-		_m5 = _el0;
+		queueRefAttach(__s, _m7 = panel, _m6 = _el0);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.h, _b.g));
 		setEventHandler(_el0, "$$click", (event) => event.stopPropagation());
 		markDangerouslySetInnerHTMLChildren(_root);
-		_m6 = child(_root);
-		_b = bag9(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, null, void 0);
+		_m10 = child(_root);
+		_b = bag13(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, void 0, void 0, _m10, null, void 0);
 		__s.refFields = _rm$5;
 	} else {
 		{
-			const _v = cx("vx-overlay", dark && "dark", props.className);
+			const _v = layer;
 			if (_b.a !== _v) _b.a = _v;
 		}
+		{
+			const _v = cx("vx-overlay", dark && "dark", props.className);
+			if (_b.b !== _v) _b.b = _v;
+		}
 		{
 			const _v = {
 				...props.style,
 				position: "fixed",
 				inset: 0
 			};
-			if (_b.b !== _v) _b.b = _v;
+			if (_b.c !== _v) _b.c = _v;
 		}
-		_b.c = snapshotSpread(props.web);
-		_b.e = bindSignalHostPropSources(__s, _b.e, _b.d, [
+		_b.d = snapshotSpread(props.web);
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
 			[
 				false,
-				"className",
+				"ref",
 				_b.a
 			],
 			[
 				false,
-				"style",
+				"className",
 				_b.b
 			],
-			[true, _b.c]
-		], "b:843a5624", true);
-		setEventHandler(_b.f, "$$click", (event) => event.stopPropagation());
+			[
+				false,
+				"style",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:7f6ad544", true);
+		{
+			const _r = panel;
+			if (_r !== _b.h) _b.h = replaceRef(__s, _b.h, _r, _b.g);
+		}
+		setEventHandler(_b.g, "$$click", (event) => event.stopPropagation());
 	}
+	_b.i = bindSignalAttribute(__s, _b.i, _b.g, "role", props.shadeCover ? "dialog" : void 0, "b:298552a8", setPlainAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.g, "aria-modal", props.shadeCover ? true : void 0, "b:c758a3c3", setAriaAttribute);
 	{
 		const __ifCondition = props.shadeCover;
-		ifBlock(__s, 1, _b.d, __ifCondition, __then$2, null, _b.g, __ifCondition ? [props] : void 0);
+		ifBlock(__s, 1, _b.e, __ifCondition, __then$2, null, _b.k, __ifCondition ? [props] : void 0);
 	}
-	_b.j = bindSignalChild(__s, _b.j, 2, _b.f, props.children, "b:f597242e", null, void 0, void 0, void 0, true);
+	_b.n = bindSignalChild(__s, _b.n, 2, _b.g, props.children, "b:2c10ad65", null, void 0, void 0, void 0, true);
 }
 function __then$0(__props, __s, __extra) {
 	const __block = __s.block;
 	const dark = __extra[0];
-	const props = __extra[1];
+	const layer = __extra[1];
+	const panel = __extra[2];
+	const props = __extra[3];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1;
@@ -108,15 +139,33 @@ function __then$0(__props, __s, __extra) {
 		drainFrag(_root, __block.parentNode, __block.endMarker);
 		_b = bag2(__s, null, _m0, _m1);
 	}
-	portal(__s, 1, document.body, __portal$1, void 0, _b.a, [dark, props], void 0, _b.b);
+	portal(__s, 1, document.body, __portal$1, void 0, _b.a, [
+		dark,
+		layer,
+		panel,
+		props
+	], void 0, _b.b);
 }
 var Overlay = function Overlay(props, __s, __extra) {
 	const __block = __s.block;
 	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	const layer = useRef(null, _hs$ + 1);
+	const panel = useRef(null, _hs$ + 2);
+	const dismiss = useRef(props.onDismiss, _hs$ + 3);
+	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], _hs$ + 4);
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	{
 		const __ifCondition$ = props.open;
-		ifBlock(__s, 0, __block.parentNode, __ifCondition$, __then$0, null, __block.endMarker, __ifCondition$ ? [dark, props] : void 0);
+		ifBlock(__s, 0, __block.parentNode, __ifCondition$, __then$0, null, __block.endMarker, __ifCondition$ ? [
+			dark,
+			layer,
+			panel,
+			props
+		] : void 0);
 	}
 };
 //#endregion

package/dist/web/PinInput.web.tsrx.js

@@ -1,11 +1,11 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { TextInput } from "./TextInput.web.tsrx.js";
-import { __s, bag7, clone, createScopedValue, hookSlots, queueRefAttach, queueRefDetach, setStyle, template, useState } from "octane";
+import { __s, bag7, clone, createScopedValue, hookSlots, queueRefAttach, queueRefDetach, setStyle, template, useEffect, useRef, useState } from "octane";
 import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/PinInput.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div role=\"group\"></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(1);
+var _hs$ = /* @__PURE__ */ hookSlots(4);
 var _rm$1 = [
 	"r",
 	"b",
@@ -16,7 +16,15 @@ var PinInput = /* @__PURE__ */ __s(function PinInput(props, __s, __extra) {
 	const [internal, setInternal] = useState("", _hs$ + 0);
 	const controlled = props.value !== void 0;
 	const value = controlled ? props.value : internal;
-	const handles = [];
+	const handles = useRef([], _hs$ + 1);
+	const pendingFocus = useRef(null, _hs$ + 2);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value], _hs$ + 3);
 	const setValue = (next) => {
 		const clipped = next.slice(0, length);
 		if (!controlled) setInternal(clipped);
@@ -25,10 +33,16 @@ var PinInput = /* @__PURE__ */ __s(function PinInput(props, __s, __extra) {
 	};
 	const cellValue = (i) => value[i] ?? "";
 	const enter = (i, text) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 	let _b = __s.slots[0];
 	if (_b === void 0) {
@@ -42,7 +56,7 @@ var PinInput = /* @__PURE__ */ __s(function PinInput(props, __s, __extra) {
 		const _r = (e) => applyEscapeProps(e, props);
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:0821d08b", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:1e485ce0", setPlainAttribute);
 	_b.d = updateFreshClassName([
 		"vx-pininput",
 		props.disabled ? "vx-pininput--disabled" : void 0,
@@ -55,18 +69,18 @@ var PinInput = /* @__PURE__ */ __s(function PinInput(props, __s, __extra) {
 			_b.e = _v;
 		}
 	}
-	_b.h = bindSignalChild(__s, _b.h, 1, _b.a, Array.from({ length }, (_, i) => createScopedValue(() => createElementFromConfig("c:5e39db67", TextInput, {
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.a, Array.from({ length }, (_, i) => createScopedValue(() => createElementFromConfig("c:7e2411cc", TextInput, {
 		key: i,
 		className: "vx-pininput-cell",
 		keyboardType: "number",
 		secure: props.secure,
-		editable: !props.disabled,
+		editable: !props.disabled && i <= value.length,
 		value: cellValue(i),
 		onChange: (text) => enter(i, text),
 		bind: (h) => {
-			handles[i] = h;
+			handles.current[i] = h;
 		}
-	}))), "b:308dacfa", null, void 0, void 0, void 0, true);
+	}))), "b:d669efd3", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { PinInput };