@octane-xplat/ui 0.4.0 → 0.5.0

package/dist/web/ui40.js

@@ -1,43 +1,154 @@
-import { applyEscapeProps } from "./ui2.js";
-import { __s, bag6, clone, delegateEvents, queueRefAttach, queueRefDetach, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChecked, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
-//#region src/Switch.web.tsrx
+import { canGoBack, layoutsFor, popRoute, screenFor, useModalRoute, useRoute } from "./ui18.js";
+import { __s, bag3, bag4, bag9, child, clone, createScopedElement, createScopedValue, delegateEvents, evt0, evt0u, forBlock, hookSlots, ifBlock, setEventHandler, setStyle, sibling, template, useState, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, childTextHoleUpdate, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Tabs.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["change"]);
-var _t$0 = /* @__PURE__ */ template("<input type=\"checkbox\" data-octane-input=\"i:0400e5c1\"/>");
-var _rm$0 = [
-	"r",
-	"b",
-	"a"
-];
-var Switch = /* @__PURE__ */ __s(function Switch(props, __s, __extra) {
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-route\"></div>");
+var _t$1 = /* @__PURE__ */ template("<button></button>");
+var _t$2 = /* @__PURE__ */ template("<div><div class=\"vx-tabbar\"><!></div><div class=\"vx-tabpane\"></div></div>");
+var _t$3 = /* @__PURE__ */ template("<div class=\"vx-modalroute\"><button class=\"vx-modalroute-shade\" aria-label=\"Dismiss\"></button><div class=\"vx-modalroute-body\"></div></div>");
+var _t$4 = /* @__PURE__ */ template("<div class=\"vx-tabsroot\" style=\"display: contents;\"><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+function __then$0(__props, __s, __extra) {
+	const routed = __extra[5];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m5;
+		let _m0;
 		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m5 = bindSignalChecked(__s, void 0, _root, props.checked, "i:0400e5c1");
-		setEventHandler(_root, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
-		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5);
-		__s.refFields = _rm$0;
-	} else {
-		{
-			const _r = (e) => applyEscapeProps(e, props);
-			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
-		}
-		_b.f = bindSignalChecked(__s, _b.f, _b.a, props.checked, "i:0400e5c1");
-		setEventHandler(_b.a, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	{
+		const _v = routed;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+var _key$3 = (t) => t.title;
+function __item$4(t, __s, __extra) {
+	const active = __extra[0];
+	const props = __extra[1];
+	const setInternal = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", () => {
+			const i = props.tabs.indexOf(t);
+			setInternal(i);
+			props.onSelectedIndexChanged?.(i);
+		});
+		_b = bag4(__s, _root, void 0, _m1, null, void 0);
+	} else setEventHandler(_b.b, "$$click", () => {
+		const i = props.tabs.indexOf(t);
+		setInternal(i);
+		props.onSelectedIndexChanged?.(i);
+	});
+	_b.a = updateFreshClassName(["vx-tab", active === props.tabs.indexOf(t) ? "active" : ""], _b.a, _b.b);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, t.title, "b:c6e07647", null, void 0, void 0, void 0, true);
+}
+function __else$2(__props, __s, __extra) {
+	const active = __extra[0];
+	const paneRoute = __extra[1];
+	const props = __extra[2];
+	const resolve = __extra[3];
+	const routeProps = __extra[4];
+	const setInternal = __extra[6];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m5, _m6;
+		const _root = clone(_t$2);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m4 = _el0;
+		_m5 = child(_el0);
+		_m6 = sibling(_el0, 1);
+		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6, null, void 0);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:18b5d0ad", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-switch", props.className], _b.d, _b.a);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:feaba283", setPlainAttribute);
+	_b.c = updateFreshClassName(["vx-tabs", props.className], _b.c, _b.b);
 	{
 		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.a, _v, _b.e);
-			_b.e = _v;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
 		}
 	}
+	forBlock(__s, 1, _b.e, props.tabs, _key$3, __item$4, 58, [
+		active,
+		props,
+		setInternal
+	], null, _b.f, true, "f3hhxv5");
+	_b.j = bindSignalChild(__s, _b.j, 2, _b.g, (paneRoute ? resolve(paneRoute.name, routeProps(paneRoute)) : null) ?? props.tabs[active]?.render(), "b:c35ce047", null, void 0, void 0, void 0, true);
+}
+function __then$9(__props, __s, __extra) {
+	const modalContent = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$3);
+		const _el0 = child(_root);
+		_m0 = evt0(_el0, "$$click", popRoute);
+		_m1 = sibling(_el0, 1);
+		_b = bag4(__s, _root, _m0, _m1, null, void 0);
+	} else evt0u(_b.a, popRoute);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, modalContent, "b:38e2e707", null, void 0, void 0, void 0, true);
+}
+var Tabs = /* @__PURE__ */ __s(function Tabs(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
+	const [internal, setInternal] = useState(0, _hs$ + 0);
+	const active = props.selectedIndex ?? internal;
+	const rootRoute = withSlot(_h$1, useRoute, "root");
+	const paneRoute = withSlot(_h$2, useRoute, props.tabs[active]?.stack ?? "");
+	const modal = withSlot(_h$3, useModalRoute);
+	const resolve = (name, params) => {
+		const C = screenFor(name);
+		const el = props.resolveScreen ? props.resolveScreen(name, params) : C ? createScopedValue(() => createElementFromConfig("c:3fc4e2ff", C, { ...params })) : null;
+		return layoutsFor(name).reduceRight((child, L) => createScopedElement(L, {}, () => child, "c:65a1fb32"), el);
+	};
+	const routeProps = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (route) => ({
+		...route.params,
+		...route.context ?? {},
+		_pushed: canGoBack(route.stack),
+		...Object.prototype.hasOwnProperty.call(route, "loaderData") ? { data: route.loaderData } : {},
+		...Object.prototype.hasOwnProperty.call(route, "loaderError") ? { error: route.loaderError } : {}
+	}));
+	const routed = rootRoute ? resolve(rootRoute.name, routeProps(rootRoute)) : null;
+	const modalContent = modal ? resolve(modal.name, {
+		...routeProps(modal),
+		close: () => popRoute()
+	}) : null;
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2;
+		const _root = clone(_t$4);
+		_m0 = _root;
+		const _el0 = child(_root);
+		_m1 = _el0;
+		_m2 = sibling(_el0, 1);
+		_b = bag3(__s, _root, _m0, _m1, _m2);
+	}
+	ifBlock(__s, 1, _b.a, routed, __then$0, __else$2, _b.b, [
+		active,
+		paneRoute,
+		props,
+		resolve,
+		routeProps,
+		routed,
+		setInternal
+	]);
+	{
+		const __ifCondition = modalContent;
+		ifBlock(__s, 2, _b.a, __ifCondition, __then$9, null, _b.c, __ifCondition ? [modalContent] : void 0);
+	}
 });
 //#endregion
-export { Switch };
+export { Tabs };

package/dist/web/ui41.js

@@ -1,42 +1,43 @@
-import { hookSlots, useEffect, useState } from "octane";
-//#region src/safeAreaInsets.web.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-function measure() {
-	if (!document.body) return {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	};
-	const probe = document.createElement("div");
-	probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);";
-	document.body.appendChild(probe);
-	const style = getComputedStyle(probe);
-	const insets = {
-		top: parseFloat(style.paddingTop) || 0,
-		right: parseFloat(style.paddingRight) || 0,
-		bottom: parseFloat(style.paddingBottom) || 0,
-		left: parseFloat(style.paddingLeft) || 0
-	};
-	probe.remove();
-	return insets;
-}
-function useSafeAreaInsets() {
-	const [insets, setInsets] = useState({
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	}, _h$0);
-	useEffect(() => {
-		const update = () => setInsets(measure());
-		update();
-		window.addEventListener("resize", update);
-		return () => window.removeEventListener("resize", update);
-	}, [], _h$1);
-	return insets;
-}
+import { applyEscapeProps } from "./ui2.js";
+import { __s, bag6, clone, delegateEvents, queueRefAttach, queueRefDetach, setEventHandler, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChecked, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Switch.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["change"]);
+var _t$0 = /* @__PURE__ */ template("<input type=\"checkbox\" data-octane-input=\"i:0400e5c1\"/>");
+var _rm$0 = [
+	"r",
+	"b",
+	"a"
+];
+var Switch = /* @__PURE__ */ __s(function Switch(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m5 = bindSignalChecked(__s, void 0, _root, props.checked, "i:0400e5c1");
+		setEventHandler(_root, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
+		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5);
+		__s.refFields = _rm$0;
+	} else {
+		{
+			const _r = (e) => applyEscapeProps(e, props);
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		_b.f = bindSignalChecked(__s, _b.f, _b.a, props.checked, "i:0400e5c1");
+		setEventHandler(_b.a, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:18b5d0ad", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-switch", props.className], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+});
 //#endregion
-export { useSafeAreaInsets };
+export { Switch };

package/dist/web/ui42.js

@@ -1,76 +1,42 @@
-import { useSafeAreaInsets } from "./ui41.js";
-import { __s, bag12, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, template, withSlot } from "octane";
-import { bindSignalAttribute, bindSignalChild, canSplitStyleProperties, enableSignalBindings, replaceRef, setPlainAttribute, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
-//#region src/SafeArea.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-var _rm$1 = [
-	"r",
-	"c",
-	"b"
-];
-function applyWebProps(node, bag) {
-	if (!node || !bag) return;
-	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
-	else node[key] = value;
+import { hookSlots, useEffect, useState } from "octane";
+//#region src/safeAreaInsets.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+function measure() {
+	if (!document.body) return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	const probe = document.createElement("div");
+	probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);";
+	document.body.appendChild(probe);
+	const style = getComputedStyle(probe);
+	const insets = {
+		top: parseFloat(style.paddingTop) || 0,
+		right: parseFloat(style.paddingRight) || 0,
+		bottom: parseFloat(style.paddingBottom) || 0,
+		left: parseFloat(style.paddingLeft) || 0
+	};
+	probe.remove();
+	return insets;
+}
+function useSafeAreaInsets() {
+	const [insets, setInsets] = useState({
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	}, _h$0);
+	useEffect(() => {
+		const update = () => setInsets(measure());
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
+	}, [], _h$1);
+	return insets;
 }
-var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
-	const insets = withSlot(_h$0, useSafeAreaInsets);
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m2;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		queueRefAttach(__s, _m2 = (node) => applyWebProps(node, props.web), _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_b = bag12(__s, _root, void 0, _m1, _m2, void 0, __s, void 0, void 0, void 0, void 0, void 0, null, void 0);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (node) => applyWebProps(node, props.web);
-		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:65ed48f3", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-safe-area", props.className], _b.d, _b.b);
-	{
-		const __styleSpread = { ...props.style };
-		const __styleValue = insets.top;
-		const __styleValue$ = insets.right;
-		const __styleValue$2 = insets.bottom;
-		const __styleValue$3 = insets.left;
-		const __styleFull = "paddingTop" in __styleSpread || "paddingRight" in __styleSpread || "paddingBottom" in __styleSpread || "paddingLeft" in __styleSpread || !canSplitStyleProperties();
-		if (_b.e === __s || __styleFull || _b.f) {
-			const __styleObject = __styleFull && !("paddingTop" in styleObjectPrototype || "paddingRight" in styleObjectPrototype || "paddingBottom" in styleObjectPrototype || "paddingLeft" in styleObjectPrototype) ? (__styleSpread["paddingTop"] = __styleValue, __styleSpread["paddingRight"] = __styleValue$, __styleSpread["paddingBottom"] = __styleValue$2, __styleSpread["paddingLeft"] = __styleValue$3, __styleSpread) : {
-				...__styleSpread,
-				"paddingTop": __styleValue,
-				"paddingRight": __styleValue$,
-				"paddingBottom": __styleValue$2,
-				"paddingLeft": __styleValue$3
-			};
-			setStyle(_b.b, __styleObject, _b.e === __s ? void 0 : _b.f ? _b.e : {
-				..._b.e,
-				"paddingTop": _b.g,
-				"paddingRight": _b.h,
-				"paddingBottom": _b.i,
-				"paddingLeft": _b.j
-			});
-			_b.e = __styleFull ? __styleObject : __styleSpread;
-		} else {
-			setStyle(_b.b, __styleSpread, _b.e);
-			if (_b.g !== __styleValue) setStyleProperty(_b.b, "paddingTop", __styleValue, "", _b.g);
-			if (_b.h !== __styleValue$) setStyleProperty(_b.b, "paddingRight", __styleValue$, "", _b.h);
-			if (_b.i !== __styleValue$2) setStyleProperty(_b.b, "paddingBottom", __styleValue$2, "", _b.i);
-			if (_b.j !== __styleValue$3) setStyleProperty(_b.b, "paddingLeft", __styleValue$3, "", _b.j);
-			_b.e = __styleSpread;
-		}
-		_b.f = __styleFull;
-		_b.g = __styleValue;
-		_b.h = __styleValue$;
-		_b.i = __styleValue$2;
-		_b.j = __styleValue$3;
-	}
-	_b.m = bindSignalChild(__s, _b.m, 1, _b.b, props.children, "b:30587aa9", null, void 0, void 0, void 0, true);
-});
 //#endregion
-export { SafeArea };
+export { useSafeAreaInsets };

package/dist/web/ui43.js

@@ -1,8 +1,10 @@
-import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
-//#region src/KeyboardAvoiding.web.tsrx
+import { useSafeAreaInsets } from "./ui42.js";
+import { __s, bag12, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, template, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, canSplitStyleProperties, enableSignalBindings, replaceRef, setPlainAttribute, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
+//#region src/SafeArea.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var _rm$1 = [
 	"r",
 	"c",
@@ -13,7 +15,9 @@ function applyWebProps(node, bag) {
 	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
 	else node[key] = value;
 }
-var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s, __extra) {
+var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
+	const insets = withSlot(_h$0, useSafeAreaInsets);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1, _m2;
@@ -21,22 +25,52 @@ var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s,
 		_m1 = _root;
 		queueRefAttach(__s, _m2 = (node) => applyWebProps(node, props.web), _m1);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
+		_b = bag12(__s, _root, void 0, _m1, _m2, void 0, __s, void 0, void 0, void 0, void 0, void 0, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
 		const _r = (node) => applyWebProps(node, props.web);
 		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:a2dd5fb0", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-keyboard-avoiding", props.className], _b.d, _b.b);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:65ed48f3", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-safe-area", props.className], _b.d, _b.b);
 	{
-		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.b, _v, _b.e);
-			_b.e = _v;
+		const __styleSpread = { ...props.style };
+		const __styleValue = insets.top;
+		const __styleValue$ = insets.right;
+		const __styleValue$2 = insets.bottom;
+		const __styleValue$3 = insets.left;
+		const __styleFull = "paddingTop" in __styleSpread || "paddingRight" in __styleSpread || "paddingBottom" in __styleSpread || "paddingLeft" in __styleSpread || !canSplitStyleProperties();
+		if (_b.e === __s || __styleFull || _b.f) {
+			const __styleObject = __styleFull && !("paddingTop" in styleObjectPrototype || "paddingRight" in styleObjectPrototype || "paddingBottom" in styleObjectPrototype || "paddingLeft" in styleObjectPrototype) ? (__styleSpread["paddingTop"] = __styleValue, __styleSpread["paddingRight"] = __styleValue$, __styleSpread["paddingBottom"] = __styleValue$2, __styleSpread["paddingLeft"] = __styleValue$3, __styleSpread) : {
+				...__styleSpread,
+				"paddingTop": __styleValue,
+				"paddingRight": __styleValue$,
+				"paddingBottom": __styleValue$2,
+				"paddingLeft": __styleValue$3
+			};
+			setStyle(_b.b, __styleObject, _b.e === __s ? void 0 : _b.f ? _b.e : {
+				..._b.e,
+				"paddingTop": _b.g,
+				"paddingRight": _b.h,
+				"paddingBottom": _b.i,
+				"paddingLeft": _b.j
+			});
+			_b.e = __styleFull ? __styleObject : __styleSpread;
+		} else {
+			setStyle(_b.b, __styleSpread, _b.e);
+			if (_b.g !== __styleValue) setStyleProperty(_b.b, "paddingTop", __styleValue, "", _b.g);
+			if (_b.h !== __styleValue$) setStyleProperty(_b.b, "paddingRight", __styleValue$, "", _b.h);
+			if (_b.i !== __styleValue$2) setStyleProperty(_b.b, "paddingBottom", __styleValue$2, "", _b.i);
+			if (_b.j !== __styleValue$3) setStyleProperty(_b.b, "paddingLeft", __styleValue$3, "", _b.j);
+			_b.e = __styleSpread;
 		}
+		_b.f = __styleFull;
+		_b.g = __styleValue;
+		_b.h = __styleValue$;
+		_b.i = __styleValue$2;
+		_b.j = __styleValue$3;
 	}
-	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:327d2ddc", null, void 0, void 0, void 0, true);
+	_b.m = bindSignalChild(__s, _b.m, 1, _b.b, props.children, "b:30587aa9", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { KeyboardAvoiding };
+export { SafeArea };

package/dist/web/ui44.js

@@ -1,23 +1,9 @@
-import { __s, bag3, bag9, child, clone, drainFrag, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
 import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
-//#region src/Drawer.web.tsrx
+//#region src/KeyboardAvoiding.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-drawer-backdrop\" aria-hidden=\"true\"></div><div class=\"vx-drawer-panel\"></div>", 0, 1);
-var _t$1 = /* @__PURE__ */ template("<div><div class=\"vx-drawer-main\"></div><!></div>");
-function __then$1(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = sibling(child(_root), 1);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag3(__s, null, _m0, null, void 0);
-	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.drawer, "b:7c4fb4de", null, void 0, void 0, void 0, true);
-}
-var _rm$4 = [
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
 	"r",
 	"c",
 	"b"
@@ -27,24 +13,22 @@ function applyWebProps(node, bag) {
 	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
 	else node[key] = value;
 }
-var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
+var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1, _m2, _m5, _m6;
-		const _root = clone(_t$1);
+		let _m1, _m2;
+		const _root = clone(_t$0);
 		_m1 = _root;
 		queueRefAttach(__s, _m2 = (node) => applyWebProps(node, props.web), _m1);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_m5 = sibling(child(_root), 1);
-		_m6 = child(_root);
-		_b = bag9(__s, _root, void 0, _m1, _m2, void 0, void 0, _m5, _m6, null, void 0);
-		__s.refFields = _rm$4;
+		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
+		__s.refFields = _rm$1;
 	} else {
 		const _r = (node) => applyWebProps(node, props.web);
 		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:8ba6f567", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-drawer", props.className], _b.d, _b.b);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:a2dd5fb0", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-keyboard-avoiding", props.className], _b.d, _b.b);
 	{
 		const _v = props.style;
 		if (_b.e !== _v) {
@@ -52,11 +36,7 @@ var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
 			_b.e = _v;
 		}
 	}
-	_b.j = bindSignalChild(__s, _b.j, 1, _b.g, props.main, "b:8d49146e", null, void 0, void 0, void 0, true);
-	{
-		const __ifCondition = props.open;
-		ifBlock(__s, 2, _b.b, __ifCondition, __then$1, null, _b.f, __ifCondition ? [props] : void 0);
-	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:327d2ddc", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Drawer };
+export { KeyboardAvoiding };

package/dist/web/ui45.js

@@ -1,9 +1,62 @@
-//#region src/platformProps.web.ts
-/** Apply a web escape-hatch bag after the primitive's standard props. */
-function applyWebProps(el, props) {
-	if (!el || !props) return;
-	for (const [name, value] of Object.entries(props)) if (name.includes("-")) el.setAttribute(name, String(value));
-	else el[name] = value;
+import { __s, bag3, bag9, child, clone, drainFrag, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Drawer.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-drawer-backdrop\" aria-hidden=\"true\"></div><div class=\"vx-drawer-panel\"></div>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<div><div class=\"vx-drawer-main\"></div><!></div>");
+function __then$1(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = sibling(child(_root), 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag3(__s, null, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.drawer, "b:7c4fb4de", null, void 0, void 0, void 0, true);
 }
+var _rm$4 = [
+	"r",
+	"c",
+	"b"
+];
+function applyWebProps(node, bag) {
+	if (!node || !bag) return;
+	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
+	else node[key] = value;
+}
+var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m2, _m5, _m6;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		queueRefAttach(__s, _m2 = (node) => applyWebProps(node, props.web), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
+		_m5 = sibling(child(_root), 1);
+		_m6 = child(_root);
+		_b = bag9(__s, _root, void 0, _m1, _m2, void 0, void 0, _m5, _m6, null, void 0);
+		__s.refFields = _rm$4;
+	} else {
+		const _r = (node) => applyWebProps(node, props.web);
+		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:8ba6f567", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-drawer", props.className], _b.d, _b.b);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.b, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.j = bindSignalChild(__s, _b.j, 1, _b.g, props.main, "b:8d49146e", null, void 0, void 0, void 0, true);
+	{
+		const __ifCondition = props.open;
+		ifBlock(__s, 2, _b.b, __ifCondition, __then$1, null, _b.f, __ifCondition ? [props] : void 0);
+	}
+});
 //#endregion
-export { applyWebProps };
+export { Drawer };