@octane-xplat/ui 0.7.3 → 0.9.0

package/README.md

@@ -7,10 +7,11 @@
 > the NativeScript toolchain (Xcode/JDK + `ns`).
 
 Start with the [app creator](../create/README.md) when building a new app with
-an agent. xplat's five-target direction covers web, iOS, Android, macOS, and
-Windows; this package's established implementations cover web and mobile,
+an agent. Xplat's target direction covers web, iOS, Android, macOS, Windows,
+and Linux; this package's established implementations cover web and mobile,
 with a bounded experimental macOS surface. The Windows scaffold has not yet
-been run on Windows, so UI support there remains unverified. See [target support](https://octane-xplat.goddardai.org/spec#choose-your-targets).
+been run on Windows, so UI support there remains unverified; Linux renders
+the DOM surface inside an experimental WebKitGTK host. See [target support](https://octane-xplat.goddardai.org/spec#choose-your-targets).
 
 To add the UI package to an existing configured app:
 

package/dist/native/Button.tsrx.js

@@ -1,6 +1,6 @@
 import { cx } from "./cx.js";
-import { Pressable } from "./Pressable.tsrx.js";
 import { ActivityIndicator } from "./ActivityIndicator.tsrx.js";
+import { Pressable } from "./Pressable.tsrx.js";
 import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
 //#region src/Button.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {

package/dist/native/KeyboardAvoiding.mobile.tsrx.js

@@ -46,10 +46,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/dist/native/Markdown.tsrx.js

@@ -0,0 +1,233 @@
+import { View } from "./View.tsrx.js";
+import { Text } from "./Text.tsrx.js";
+import { Screen } from "./Screen.tsrx.js";
+import { ScrollView } from "./ScrollView.tsrx.js";
+import { defineUniversalComponent, universalChildren, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Markdown.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan10 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan11 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan12 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan13 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan14 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan15 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan16 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan17 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan18 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan19 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var headingClass = [
+	"text-2xl font-bold",
+	"text-xl font-semibold",
+	"text-lg font-semibold"
+];
+var Inlines = defineUniversalComponent("nativescript", function Inlines(props) {
+	const out = [];
+	for (const n of props.nodes ?? []) switch (n.t) {
+		case "code":
+			out.push(universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"style",
+				{ fontFamily: "ui-monospace" }
+			]], n.text))]));
+			break;
+		case "bold":
+			out.push(universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"font-bold"
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					n.children
+				]]))]);
+			})))]));
+			break;
+		case "em":
+			out.push(universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"style",
+				{ fontStyle: "italic" }
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					n.children
+				]]))]);
+			})))]));
+			break;
+		case "link":
+			out.push(universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"style",
+				{ textDecorationLine: "underline" }
+			]], n.text))]));
+			break;
+		default: out.push(n.text);
+	}
+	return out;
+}, { "module": "@nativescript-community/octane" });
+var Markdown = defineUniversalComponent("nativescript", function Markdown(props) {
+	return universalValue(__octaneUniversalPlan16, [universalComponent("nativescript", View, universalProps([[
+		"set",
+		"className",
+		"gap-3"
+	]], (props.data?.children ?? []).map((node) => {
+		switch (node.t) {
+			case "h": return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				headingClass[node.depth - 1] ?? "font-semibold"
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan6, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					node.children
+				]]))]);
+			})))]);
+			case "p": return universalValue(__octaneUniversalPlan9, [universalComponent("nativescript", Text, universalProps([], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan8, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					node.children
+				]]))]);
+			})))]);
+			case "code": return universalValue(__octaneUniversalPlan10, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"text-sm"
+			], [
+				"set",
+				"style",
+				{ fontFamily: "ui-monospace" }
+			]], node.text))]);
+			case "list": return node.items.map((item, i) => universalValue(__octaneUniversalPlan12, [universalComponent("nativescript", Text, universalProps([], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan11, [node.ordered ? `${i + 1}. ` : "• ", universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					item
+				]]))]);
+			})))]));
+			case "quote": return universalValue(__octaneUniversalPlan14, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"text-muted"
+			], [
+				"set",
+				"style",
+				{ fontStyle: "italic" }
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan13, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					node.children
+				]]))]);
+			})))]);
+			case "hr": return universalValue(__octaneUniversalPlan15, [universalComponent("nativescript", View, universalProps([[
+				"set",
+				"style",
+				{
+					height: 1,
+					backgroundColor: "var(--color-border)"
+				}
+			]]))]);
+			default: return null;
+		}
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var MarkdownScreen = defineUniversalComponent("nativescript", function MarkdownScreen(props) {
+	return universalValue(__octaneUniversalPlan19, [universalComponent("nativescript", Screen, universalProps([[
+		"set",
+		"className",
+		"vx-app"
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan18, [universalComponent("nativescript", ScrollView, universalProps([[
+			"set",
+			"style",
+			{ padding: 16 }
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan17, [universalComponent("nativescript", Markdown, universalProps([[
+				"set",
+				"data",
+				props.data
+			]]))]);
+		})))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Markdown, MarkdownScreen };

package/dist/native/Overlay.tsrx.js

@@ -1,14 +1,16 @@
 import { cx } from "./cx.js";
-import { applyThemeClasses } from "./theme/theme-scheme.js";
 import { rootLayoutFor } from "./root-layout.mobile.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { createOverlayLifetime } from "./overlay-lifetime.mobile.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
 //#region src/Overlay.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "range",
 	"children": [{
@@ -33,19 +35,12 @@ var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
 	useEffect(() => {
 		const current = shown.current;
 		if (!props.open) {
-			if (!current) return;
-			current.dismissOnClose = false;
-			shown.current = null;
-			const rl = rootLayout();
-			if (rl && rl?.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, { 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 : void 0);
@@ -60,31 +55,24 @@ var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, "Overlay", (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
 		const opened = {
 			host,
 			root,
-			dismissOnClose: true,
+			lifetime,
 			unbindTheme
 		};
+		lifetime.own(() => opened.unbindTheme?.());
 		shown.current = opened;
 		root.render(OverlayBody, { children: props.children });
-		host.on("closed", () => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindTheme?.();
-			root.unmount?.();
-			if (opened.dismissOnClose) dismiss.current?.();
-		});
-		const open = () => rl.open(host, props.shadeCover ? { shadeCover: {
+		lifetime.open(props.shadeCover ? { shadeCover: {
 			opacity: .45,
 			color: "#000000",
 			tapToClose: true
-		} } : {}).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			console.error("[Overlay] open failed", error);
-			root.unmount?.();
-		});
-		if (rl.hasChild?.(host)) rl.close(host).then(open, (error) => console.error("[Overlay] stale host close failed", error));
-		else open();
+		} } : {});
 	}, [
 		props.open,
 		props.children,
@@ -94,6 +82,7 @@ var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
 		props.ios,
 		props.android
 	], _h$3);
+	useEffect(() => () => shown.current?.lifetime.close(), [], _h$4);
 	return universalValue(__octaneUniversalPlan1, [(v) => {
 		hostView.current = v;
 	}, {

package/dist/native/PinInput.tsrx.js

@@ -1,9 +1,13 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
 import { TextInput } from "./TextInput.tsrx.js";
-import { defineUniversalComponent, hookSlots, universalComponent, universalFor, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, universalComponent, universalFor, universalPlan, universalProps, universalValue, useEffect, useRef, useState } from "@nativescript-community/octane";
 //#region src/PinInput.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
@@ -28,7 +32,15 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 	const [internal, setInternal] = useState("", _h$0);
 	const controlled = props.value !== void 0;
 	const value = controlled ? props.value : internal;
-	const handles = [];
+	const handles = useRef([], _h$1);
+	const pendingFocus = useRef(null, _h$2);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value], _h$3);
 	const setValue = (next) => {
 		const clipped = next.slice(0, length);
 		if (!controlled) setInternal(clipped);
@@ -37,10 +49,16 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 	};
 	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();
+		}
 	};
 	return universalValue(__octaneUniversalPlan1, [
 		(v) => applyEscapeProps(v, props),
@@ -67,7 +85,7 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 				[
 					"set",
 					"editable",
-					!props.disabled
+					!props.disabled && i <= value.length
 				],
 				[
 					"set",
@@ -83,7 +101,7 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 					"set",
 					"bind",
 					(h) => {
-						handles[i] = h;
+						handles.current[i] = h;
 					}
 				]
 			]))]);

package/dist/native/Popover.tsrx.js

@@ -1,12 +1,13 @@
 import { cx } from "./cx.js";
+import { rootLayoutFor } from "./root-layout.mobile.js";
 import { applyNativeProps } from "./platformProps.js";
 import { positionPopover } from "./popover-position.js";
 import { applyThemeClasses, useThemeScheme } from "./theme/theme-scheme.js";
-import { rootLayoutFor } from "./root-layout.mobile.js";
+import { createOverlayLifetime } from "./overlay-lifetime.mobile.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef, useState, withSlot } from "@nativescript-community/octane";
 import { GridLayout, Screen, isIOS } from "@nativescript/core";
 //#region src/Popover.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(9);
+var _hs$ = /* @__PURE__ */ hookSlots(11);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -16,6 +17,8 @@ var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
 var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
 var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
 var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -151,18 +154,12 @@ var PopoverLayer = defineUniversalComponent("nativescript", function PopoverLaye
 }, { "module": "@nativescript-community/octane" });
 var Popover = defineUniversalComponent("nativescript", function Popover(props) {
 	const shown = useRef(null, _h$7);
+	const dismiss = useRef(props.onDismiss, _h$8);
+	dismiss.current = props.onDismiss;
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.unbindTheme?.();
-			const owner = cur.host.parent;
-			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).then(() => cur.root.unmount?.(), (error) => {
-				console.error("[Popover] close failed", error);
-				cur.root.unmount?.();
-			});
-			else cur.root.unmount?.();
+			cur?.lifetime.close();
 			return;
 		}
 		const anchor = props.anchor?.current;
@@ -180,20 +177,21 @@ var Popover = defineUniversalComponent("nativescript", function Popover(props) {
 		host.horizontalAlignment = "stretch";
 		host.verticalAlignment = "stretch";
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, "Popover", (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
+		lifetime.own(unbindTheme);
 		shown.current = {
 			host,
 			root,
-			unbindTheme
+			lifetime
 		};
 		root.render(PopoverLayer, {
 			...props,
 			anchorView: anchor
 		});
-		rl.open(host).catch((error) => {
-			if (shown.current?.host === host) shown.current = null;
-			console.error("[Popover] open failed", error);
-			root.unmount?.();
-		});
+		lifetime.open();
 	}, [
 		props.open,
 		props.children,
@@ -201,7 +199,8 @@ var Popover = defineUniversalComponent("nativescript", function Popover(props) {
 		props.className,
 		props.style,
 		props.dismissOnOutsideTap
-	], _h$8);
+	], _h$9);
+	useEffect(() => () => shown.current?.lifetime.close(), [], _h$10);
 	return universalValue(__octaneUniversalPlan2, []);
 }, { "module": "@nativescript-community/octane" });
 //#endregion

package/dist/native/Pressable.tsrx.js

@@ -76,7 +76,10 @@ var Pressable = defineUniversalComponent("nativescript", function Pressable(prop
 		[
 			"set",
 			"accessibilityState",
-			nativeAccessibilityState(props.accessibilityState)
+			nativeAccessibilityState({
+				...props.accessibilityState,
+				disabled: props.disabled || props.accessibilityState?.disabled
+			})
 		],
 		[
 			"set",

package/dist/native/SearchInput.tsrx.js

@@ -1,7 +1,8 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
 import { Icon } from "./Icon.tsrx.js";
-import { writeText } from "./text-write.js";
+import { isWritingText, writeText } from "./text-write.js";
+import { blurText } from "./text-focus.js";
 import { defineUniversalComponent, hookSlots, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, useEffect, useRef, useState, warmChild } from "@nativescript-community/octane";
 //#region src/SearchInput.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(3);
@@ -116,13 +117,15 @@ var SearchInput = defineUniversalComponent("nativescript", markWarm(function Sea
 			if (!v) return;
 			props.bind?.({
 				focus: () => v.focus(),
-				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				blur: () => blurText(v),
 				native: v
 			});
 		},
 		props.placeholder,
 		props.editable ?? true,
-		(e) => setValue(e.value),
+		(e) => {
+			if (!isWritingText(e.object)) setValue(e.value);
+		},
 		props.onSubmit,
 		props.onFocus,
 		props.onBlur,

package/dist/native/Sheet.tsrx.js

@@ -1,16 +1,19 @@
 import { cx } from "./cx.js";
-import { applyThemeClasses } from "./theme/theme-scheme.js";
 import { rootLayoutFor } from "./root-layout.mobile.js";
 import { attachTapToBlur } from "./tap-to-blur.ios.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { createOverlayLifetime } from "./overlay-lifetime.mobile.js";
 import { attachSheetDetents } from "./sheet-detents.js";
 import { bindBottomInsetToKeyboard } from "./keyboard-inset.mobile.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
 //#region src/Sheet.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "range",
 	"children": [{
@@ -29,19 +32,12 @@ var SheetBody = defineUniversalComponent("nativescript", function SheetBody(prop
 var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 	const sentinel = useRef(null, _h$0);
 	const shown = useRef(null, _h$1);
+	const dismiss = useRef(props.onDismiss, _h$2);
+	dismiss.current = props.onDismiss;
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.programmatic = true;
-			cur.unbindTheme?.();
-			cur.unbindKeyboard?.();
-			cur.root.unmount?.();
-			const owner = cur.host.parent;
-			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).catch((error) => {
-				console.error("[Sheet] close failed", error);
-			});
+			cur?.lifetime.close();
 			return;
 		}
 		const rl = rootLayoutFor(sentinel.current);
@@ -57,32 +53,26 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, "Sheet", (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
+		lifetime.own(unbindTheme);
 		const detents = props.detents?.length ? attachSheetDetents(host, props.detents, () => {
 			host.parent?.close?.(host)?.catch?.((error) => {
 				console.error("[Sheet] close failed", error);
 			});
 		}) : null;
-		const unbindKeyboard = bindBottomInsetToKeyboard(host);
-		attachTapToBlur(host);
-		const opened = {
+		lifetime.own(bindBottomInsetToKeyboard(host));
+		lifetime.own(attachTapToBlur(host));
+		if (detents) lifetime.own(detents.detach);
+		shown.current = {
 			host,
 			root,
-			unbindTheme,
-			unbindKeyboard,
-			programmatic: false,
-			detach: detents?.detach
+			lifetime
 		};
-		shown.current = opened;
 		root.render(SheetBody, { children: props.children });
-		host.on("closed", () => {
-			if (shown.current === opened) shown.current = null;
-			opened.detach?.();
-			opened.unbindKeyboard?.();
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			if (!opened.programmatic) props.onDismiss?.();
-		});
-		rl.open(host, {
+		lifetime.open({
 			...props.shadeCover ?? true ? { shadeCover: {
 				opacity: .4,
 				tapToClose: true
@@ -97,13 +87,7 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 					duration: 200
 				}
 			} }
-		}).then(() => detents?.enter()).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindKeyboard?.();
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			console.error("[Sheet] open failed", error);
-		});
+		}, () => detents?.enter());
 	}, [
 		props.open,
 		props.children,
@@ -112,7 +96,8 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 		props.shadeCover,
 		props.ios,
 		props.android
-	], _h$2);
+	], _h$3);
+	useEffect(() => () => shown.current?.lifetime.close(), [], _h$4);
 	return universalValue(__octaneUniversalPlan1, [(v) => {
 		sentinel.current = v;
 	}, {