@octane-xplat/ui 0.4.0 → 0.5.0

package/dist/web/ui53.js

@@ -1,17 +1,273 @@
-import { __s, bag2, clone, template } from "octane";
-import { bindSignalAttribute, enableSignalBindings } from "octane/internal/client";
-//#region src/PlatformBadge.web.tsrx
+import { applyWebProps } from "./ui47.js";
+import { getIcon } from "./ui52.js";
+import { bag10, bag8, bag9, clone, hookSlots, ifBlock, isHydratingStyle, queueRefAttach, queueRefDetach, setStyle, setStyleProperties, setStyleProperty, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish1, replaceRef, setPlainAttribute, setURLAttribute, updateFreshClassAttr, updateFreshClassName } from "octane/internal/client";
+//#region src/Icon.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<span>web</span>");
-var PlatformBadge = /* @__PURE__ */ __s(function PlatformBadge(props, __s, __extra) {
+var _t$0 = /* @__PURE__ */ template("<svg aria-hidden=\"true\"></svg>", 1);
+var _t$1 = /* @__PURE__ */ template("<svg aria-hidden=\"true\"><path></path></svg>", 1);
+var _t$2 = /* @__PURE__ */ template("<span aria-hidden=\"true\"></span>");
+var _t$3 = /* @__PURE__ */ template("<img/>");
+var _rm$1 = [
+	"r",
+	"h",
+	"b"
+];
+function __then$0(__props, __s, __extra) {
+	const glyph = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1;
+		let _m1, _m7;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_b = bag2(__s, _root, void 0, _m1);
+		queueRefAttach(__s, _m7 = (el) => {
+			if (el) el.innerHTML = glyph.markup;
+			applyWebProps(el, props.web);
+		}, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.h, _b.b));
+		_b = bag8(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, _m7);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => {
+			if (el) el.innerHTML = glyph.markup;
+			applyWebProps(el, props.web);
+		};
+		if (_r !== _b.h) _b.h = replaceRef(__s, _b.h, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f3cb9a4b", "class");
-});
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:3add0cdf", setPlainAttribute);
+	_b.c = updateFreshClassAttr(["vx-icon", props.className], _b.c, _b.b);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "viewBox", glyph.viewBox ?? "0 0 24 24", "b:c67a6a16", setPlainAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "width", size, "b:fb23295c", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "height", size, "b:8d1adcef", setPlainAttribute);
+	{
+		const _v = props.color ? { color: props.color } : void 0;
+		if (_b.g !== _v) {
+			setStyle(_b.b, _v, _b.g);
+			_b.g = _v;
+		}
+	}
+}
+var _rm$4 = [
+	"r",
+	"g",
+	"b"
+];
+function __then$3(__props, __s, __extra) {
+	const glyph = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m6, _m8;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		queueRefAttach(__s, _m6 = (el) => applyWebProps(el, props.web), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.g, _b.b));
+		_m8 = _root.firstChild;
+		_b = bag10(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, _m6, void 0, _m8, void 0);
+		__s.refFields = _rm$4;
+	} else {
+		const _r = (el) => applyWebProps(el, props.web);
+		if (_r !== _b.g) _b.g = replaceRef(__s, _b.g, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:9e8c5282", setPlainAttribute);
+	_b.c = updateFreshClassAttr(["vx-icon", props.className], _b.c, _b.b);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "viewBox", glyph.viewBox ?? "0 0 24 24", "b:43ee4906", setPlainAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "width", size, "b:e7492ac8", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "height", size, "b:543c1405", setPlainAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.i, "d", glyph.svg, "b:cdc56533", setPlainAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.i, "fill", props.color ?? "currentColor", "b:fc05dd07", setPlainAttribute);
+}
+var _rm$8 = [
+	"r",
+	"h",
+	"b"
+];
+function __then$6(__props, __s, __extra) {
+	const glyph = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m7;
+		const _root = clone(_t$2);
+		_m1 = _root;
+		queueRefAttach(__s, _m7 = (el) => applyWebProps(el, props.web), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.h, _b.b));
+		_b = bag10(__s, _root, void 0, _m1, void 0, __s, void 0, void 0, void 0, _m7, null, void 0);
+		__s.refFields = _rm$8;
+	} else {
+		const _r = (el) => applyWebProps(el, props.web);
+		if (_r !== _b.h) _b.h = replaceRef(__s, _b.h, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:b2d8391e", setPlainAttribute);
+	_b.c = updateFreshClassName(["vx-icon", props.className], _b.c, _b.b);
+	{
+		const _v0 = glyph.font.family;
+		const _v1 = size;
+		const _v2 = props.color;
+		if (_b.d === __s || isHydratingStyle()) {
+			setStyleProperties(_b.b, [
+				"fontFamily",
+				_v0,
+				"fontSize",
+				_v1,
+				"color",
+				_v2
+			], "");
+			_b.d = null;
+			_b.e = _v0;
+			_b.f = _v1;
+			_b.g = _v2;
+		} else {
+			if (_b.e !== _v0) {
+				setStyleProperty(_b.b, "fontFamily", _v0, "", _b.e);
+				_b.e = _v0;
+			}
+			if (_b.f !== _v1) {
+				setStyleProperty(_b.b, "fontSize", _v1, "", _b.f);
+				_b.f = _v1;
+			}
+			if (_b.g !== _v2) {
+				setStyleProperty(_b.b, "color", _v2, "", _b.g);
+				_b.g = _v2;
+			}
+		}
+	}
+	_b.k = bindSignalChild(__s, _b.k, 1, _b.b, glyph.font.glyph, "b:9acbe14d", null, void 0, void 0, void 0, true);
+}
+var _rm$11 = [
+	"r",
+	"h",
+	"b"
+];
+function __then$10(__props, __s, __extra) {
+	const glyph = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m7;
+		const _root = clone(_t$3);
+		_m1 = _root;
+		queueRefAttach(__s, _m7 = (el) => applyWebProps(el, props.web), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.h, _b.b));
+		_b = bag8(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, _m7);
+		__s.refFields = _rm$11;
+	} else {
+		const _r = (el) => applyWebProps(el, props.web);
+		if (_r !== _b.h) _b.h = replaceRef(__s, _b.h, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:64d5b225", setPlainAttribute);
+	_b.c = updateFreshClassName(["vx-icon", props.className], _b.c, _b.b);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "src", glyph.src, "b:b1335ffd", setURLAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "width", size, "b:4c3cfd41", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "height", size, "b:3c1a4d8b", setPlainAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "alt", props.name, "b:49c63153", setPlainAttribute);
+}
+var _rm$15 = [
+	"r",
+	"g",
+	"b"
+];
+function __then$13(__props, __s, __extra) {
+	const glyph = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m6;
+		const _root = clone(_t$2);
+		_m1 = _root;
+		queueRefAttach(__s, _m6 = (el) => applyWebProps(el, props.web), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.g, _b.b));
+		_b = bag9(__s, _root, void 0, _m1, void 0, __s, void 0, void 0, _m6, null, void 0);
+		__s.refFields = _rm$15;
+	} else {
+		const _r = (el) => applyWebProps(el, props.web);
+		if (_r !== _b.g) _b.g = replaceRef(__s, _b.g, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:69ead7e8", setPlainAttribute);
+	_b.c = updateFreshClassName(["vx-icon", props.className], _b.c, _b.b);
+	{
+		const _v0 = size;
+		const _v1 = props.color;
+		if (_b.d === __s || isHydratingStyle()) {
+			setStyleProperties(_b.b, [
+				"fontSize",
+				_v0,
+				"color",
+				_v1
+			], "");
+			_b.d = null;
+			_b.e = _v0;
+			_b.f = _v1;
+		} else {
+			if (_b.e !== _v0) {
+				setStyleProperty(_b.b, "fontSize", _v0, "", _b.e);
+				_b.e = _v0;
+			}
+			if (_b.f !== _v1) {
+				setStyleProperty(_b.b, "color", _v1, "", _b.f);
+				_b.f = _v1;
+			}
+		}
+	}
+	_b.j = bindSignalChild(__s, _b.j, 1, _b.b, glyph.text, "b:d3430f0c", null, void 0, void 0, void 0, true);
+}
+function __else$12(__props, __s, __extra) {
+	const __block = __s.block;
+	const glyph = __extra[0];
+	__extra[1];
+	__extra[2];
+	ifBlock(__s, 0, __block.parentNode, glyph.text, __then$13, null, __block.endMarker, __extra);
+}
+function __else$9(__props, __s, __extra) {
+	const __block = __s.block;
+	const glyph = __extra[0];
+	__extra[1];
+	__extra[2];
+	ifBlock(__s, 0, __block.parentNode, glyph.src, __then$10, __else$12, __block.endMarker, __extra);
+}
+function __else$5(__props, __s, __extra) {
+	const __block = __s.block;
+	const glyph = __extra[0];
+	__extra[1];
+	__extra[2];
+	ifBlock(__s, 0, __block.parentNode, glyph.font, __then$6, __else$9, __block.endMarker, __extra);
+}
+function __else$2(__props, __s, __extra) {
+	const __block = __s.block;
+	const glyph = __extra[0];
+	__extra[1];
+	__extra[2];
+	ifBlock(__s, 0, __block.parentNode, glyph.svg, __then$3, __else$5, __block.endMarker, __extra);
+}
+function _frag$0(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, props.h0, props.h1, props.h2, __block.endMarker, props.h3);
+}
+var _hs$ = /* @__PURE__ */ hookSlots(11);
+var Icon = function Icon(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	let __hkd0;
+	const glyph = (__hkd0 = props, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) ? hookMemoPublish1(__hk, 0, getIcon(props.name), __hkd0) : __hk[2]);
+	if (!glyph) return null;
+	const size = props.size ?? 24;
+	return createElementFromConfig("c:3275b5a7", _frag$0, {
+		h0: glyph.markup,
+		h1: __then$0,
+		h2: __else$2,
+		h3: [
+			glyph,
+			props,
+			size
+		]
+	});
+};
 //#endregion
-export { PlatformBadge };
+export { Icon };

package/dist/web/ui54.js

@@ -1,9 +1,42 @@
-//#region src/stacks.web.ts
-/** Web twin — one linear URL stack; named stacks don't apply. */
-function registerStack(_name, _frame) {}
-function getStack(_name) {}
-function stackEntries() {
-	return [].values();
-}
+import { normStyle } from "./ui4.js";
+import { applyWebProps } from "./ui47.js";
+import { bag4, child, clone, componentSlot, drainFrag, markChildrenBlock, template } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/Heading.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var __childrenBody = {};
+var Heading = function Heading(props, __s, __extra) {
+	const __block = __s.block;
+	const level = props.level ?? 2;
+	const tag = `h${level}`;
+	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.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	componentSlot(__s, 0, __block.parentNode, tag, {
+		"id": props.id,
+		"className": [
+			"vx-heading",
+			`vx-h${level}`,
+			props.className
+		],
+		"style": normStyle(props.style),
+		"ref": (el) => applyWebProps(el, props.web),
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:4056bf45");
+};
 //#endregion
-export { getStack, registerStack, stackEntries };
+export { Heading };

package/dist/web/ui55.js

@@ -1,22 +1,17 @@
-//#region src/store.ts
-function createStore(initial) {
-	let value = initial;
-	const listeners = /* @__PURE__ */ new Set();
-	return {
-		get: () => value,
-		set(next) {
-			const v = typeof next === "function" ? next(value) : next;
-			if (Object.is(v, value)) return;
-			value = v;
-			for (const l of [...listeners]) l();
-		},
-		subscribe(notify) {
-			listeners.add(notify);
-			return () => {
-				listeners.delete(notify);
-			};
-		}
-	};
-}
+import { __s, bag2, clone, template } from "octane";
+import { bindSignalAttribute, enableSignalBindings } from "octane/internal/client";
+//#region src/PlatformBadge.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<span>web</span>");
+var PlatformBadge = /* @__PURE__ */ __s(function PlatformBadge(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag2(__s, _root, void 0, _m1);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f3cb9a4b", "class");
+});
 //#endregion
-export { createStore };
+export { PlatformBadge };

package/dist/web/ui56.js

@@ -1,8 +1,9 @@
-import { hookSlots, useSyncExternalStore } from "octane";
-//#region src/use-store.web.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function useStore(store, select) {
-	return useSyncExternalStore(store.subscribe, select === void 0 ? store.get : () => select(store.get()), _h$0);
+//#region src/stacks.web.ts
+/** Web twin — one linear URL stack; named stacks don't apply. */
+function registerStack(_name, _frame) {}
+function getStack(_name) {}
+function stackEntries() {
+	return [].values();
 }
 //#endregion
-export { useStore };
+export { getStack, registerStack, stackEntries };

package/dist/web/ui57.js

@@ -1,44 +1,22 @@
-import { cx } from "./ui28.js";
-import { useThemeScheme } from "./ui29.js";
-import { bag4, child, clone, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, withSlot } from "octane";
-import { textHoleUpdate } from "octane/internal/client";
-//#region src/Sheet.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(2));
-function __then$0(__props, __s, __extra) {
-	const __block = __s.block;
-	const dark = __extra[0];
-	const props = __extra[1];
-	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 = /* @__PURE__ */ createPortal(createScopedValue(() => createScopedElement("div", { className: cx("vx-sheet-layer", dark && "dark") }, () => positionalChildren([(props.shadeCover ?? true) && createScopedValue(() => createElement("div", {
-			className: "vx-sheet-backdrop",
-			onClick: props.onDismiss
-		})), createScopedValue(() => createScopedElement("div", {
-			className: cx("vx-sheet", props.className),
-			style: { ...props.style },
-			...props.web
-		}, () => props.children))]))), document.body);
-		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
-		_b.d = _v;
-	}
+//#region src/store.ts
+function createStore(initial) {
+	let value = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => value,
+		set(next) {
+			const v = typeof next === "function" ? next(value) : next;
+			if (Object.is(v, value)) return;
+			value = v;
+			for (const l of [...listeners]) l();
+		},
+		subscribe(notify) {
+			listeners.add(notify);
+			return () => {
+				listeners.delete(notify);
+			};
+		}
+	};
 }
-var Sheet = function Sheet(props, __s, __extra) {
-	const __block = __s.block;
-	const dark = withSlot(_h$0, useThemeScheme) === "dark";
-	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);
-	}
-};
 //#endregion
-export { Sheet };
+export { createStore };

package/dist/web/ui58.js

@@ -1,46 +1,8 @@
-import { applyThemeClasses } from "./ui29.js";
-import { createRoot } from "octane";
-//#region src/sheet-service.web.ts
-var active = /* @__PURE__ */ new Set();
-/** Close the most recently opened sheet (resolve with `result`). */
-function closeSheet(result) {
-	[...active].pop()?.finish(result);
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/use-store.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function useStore(store, select) {
+	return useSyncExternalStore(store.subscribe, select === void 0 ? store.get : () => select(store.get()), _h$0);
 }
-/** Imperative in-window sheet: portal layer at document root, bottom-
-*  anchored panel, dedicated Octane root. Resolves when the sheet closes. */
-var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
-	const layer = document.createElement("div");
-	const unbindTheme = applyThemeClasses(layer, "vx-sheet-layer");
-	const panel = document.createElement("div");
-	panel.className = "vx-sheet";
-	let finished = false;
-	const finish = (result) => {
-		if (finished) return;
-		finished = true;
-		active.delete(entry);
-		unbindTheme();
-		root.unmount();
-		layer.remove();
-		resolve(result);
-	};
-	const entry = {
-		layer,
-		finish
-	};
-	if (options.shadeCover ?? true) {
-		const backdrop = document.createElement("div");
-		backdrop.className = "vx-sheet-backdrop";
-		backdrop.addEventListener("click", () => finish());
-		layer.appendChild(backdrop);
-	}
-	layer.appendChild(panel);
-	document.body.appendChild(layer);
-	const root = createRoot(panel);
-	root.render(Component, {
-		params,
-		close: finish
-	});
-	active.add(entry);
-});
 //#endregion
-export { closeSheet, openSheet };
+export { useStore };

package/dist/web/ui59.js

@@ -0,0 +1,44 @@
+import { cx } from "./ui28.js";
+import { useThemeScheme } from "./ui29.js";
+import { bag4, child, clone, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, withSlot } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/Sheet.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(2));
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const dark = __extra[0];
+	const props = __extra[1];
+	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 = /* @__PURE__ */ createPortal(createScopedValue(() => createScopedElement("div", { className: cx("vx-sheet-layer", dark && "dark") }, () => positionalChildren([(props.shadeCover ?? true) && createScopedValue(() => createElement("div", {
+			className: "vx-sheet-backdrop",
+			onClick: props.onDismiss
+		})), createScopedValue(() => createScopedElement("div", {
+			className: cx("vx-sheet", props.className),
+			style: { ...props.style },
+			...props.web
+		}, () => props.children))]))), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+var Sheet = function Sheet(props, __s, __extra) {
+	const __block = __s.block;
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	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);
+	}
+};
+//#endregion
+export { Sheet };

package/dist/web/ui60.js

@@ -0,0 +1,46 @@
+import { applyThemeClasses } from "./ui29.js";
+import { createRoot } from "octane";
+//#region src/sheet-service.web.ts
+var active = /* @__PURE__ */ new Set();
+/** Close the most recently opened sheet (resolve with `result`). */
+function closeSheet(result) {
+	[...active].pop()?.finish(result);
+}
+/** Imperative in-window sheet: portal layer at document root, bottom-
+*  anchored panel, dedicated Octane root. Resolves when the sheet closes. */
+var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
+	const layer = document.createElement("div");
+	const unbindTheme = applyThemeClasses(layer, "vx-sheet-layer");
+	const panel = document.createElement("div");
+	panel.className = "vx-sheet";
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		active.delete(entry);
+		unbindTheme();
+		root.unmount();
+		layer.remove();
+		resolve(result);
+	};
+	const entry = {
+		layer,
+		finish
+	};
+	if (options.shadeCover ?? true) {
+		const backdrop = document.createElement("div");
+		backdrop.className = "vx-sheet-backdrop";
+		backdrop.addEventListener("click", () => finish());
+		layer.appendChild(backdrop);
+	}
+	layer.appendChild(panel);
+	document.body.appendChild(layer);
+	const root = createRoot(panel);
+	root.render(Component, {
+		params,
+		close: finish
+	});
+	active.add(entry);
+});
+//#endregion
+export { closeSheet, openSheet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "files": [
     "dist",
     "types",
@@ -29,6 +29,7 @@
     "vitest": "5.0.1"
   },
   "peerDependencies": {
+    "@nativescript-community/gesturehandler": ">=2.0.8 <3",
     "@nativescript-community/octane": ">=0.2.1 <1",
     "@nativescript-community/ui-canvas": ">=4.6.52 <5",
     "@nativescript-community/ui-drawer": ">=0.1.32 <1",
@@ -37,6 +38,9 @@
     "octane": ">=0.1.51 <1"
   },
   "peerDependenciesMeta": {
+    "@nativescript-community/gesturehandler": {
+      "optional": true
+    },
     "@nativescript-community/octane": {
       "optional": true
     },