@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/web/ui58.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/dist/web/ui6.js

@@ -1,31 +1,94 @@
-import { __s, bag5, clone, delegateEvents, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalValue, enableSignalBindings } from "octane/internal/client";
-//#region src/TextInput.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { layoutChildProps } from "./ui4.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Row.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["input"]);
-var _t$0 = /* @__PURE__ */ template("<input data-octane-input=\"i:ab65f8a8\"/>");
-var TextInput = /* @__PURE__ */ __s(function TextInput(props, __s, __extra) {
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"s",
+	"f",
+	"e"
+];
+var Row = /* @__PURE__ */ __s(function Row(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1, _m3;
+		let _m0, _m1, _m2, _m3, _m4, _m5;
 		const _root = clone(_t$0);
-		_m1 = _root;
-		_m3 = bindSignalValue(__s, void 0, _root, props.value, "i:ab65f8a8");
-		setEventHandler(_root, "$$input", (e) => props.onChange?.(e.target.value));
-		_b = bag5(__s, _root, void 0, _m1, void 0, _m3, void 0);
+		_m0 = props.id;
+		_m1 = (e) => applyEscapeProps(e, props);
+		_m2 = [
+			"vx-row",
+			glassClassOf(props.glass),
+			props.className
+		];
+		_m3 = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.style
+		}));
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"ref",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3]
+		], "b:3863ef97", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$1;
 	} else {
-		_b.d = bindSignalValue(__s, _b.d, _b.b, props.value, "i:ab65f8a8");
-		setEventHandler(_b.b, "$$input", (e) => props.onChange?.(e.target.value));
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f09620ef", "class");
-	{
-		const _v = props.style;
-		if (_b.c !== _v) {
-			setStyle(_b.b, _v, _b.c);
-			_b.c = _v;
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = [
+				"vx-row",
+				glassClassOf(props.glass),
+				props.className
+			];
+			if (_b.c !== _v) _b.c = _v;
 		}
+		_b.d = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.style
+		}));
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"ref",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:3863ef97", true);
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "placeholder", props.placeholder ?? props.hint, "b:f03e01a9", "attr");
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:24a4d1fc", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { TextInput };
+export { Row };

package/dist/web/ui7.js

@@ -1,57 +1,62 @@
-import { __s, bag4, bag5, child, clone, drainFrag, forBlock, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/List.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Grid.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _key$0 = (item) => item.id;
-function __empty$1(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	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);
-	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:dbd88467", _b.b, true, void 0, true, void 0);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"e",
+	"b"
+];
+function parseTracks(spec) {
+	return spec?.split(",").map((part) => {
+		const track = part.trim();
+		if (track === "auto") return "auto";
+		if (track.endsWith("*")) return `${track.slice(0, -1) || "1"}fr`;
+		return /^\d+(?:\.\d+)?$/.test(track) ? `${track}px` : track;
+	}).join(" ");
 }
-function __item$3(item, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	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);
+var warnedAboutGap = false;
+var Grid = /* @__PURE__ */ __s(function Grid(props, __s, __extra) {
+	if (props.gap != null && !warnedAboutGap) {
+		warnedAboutGap = true;
+		console.warn("[Grid] gap is not supported; use child margins instead.");
 	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderItem(item), "b:a4298d20", _b.b, true, void 0, true, void 0);
-}
-var List = /* @__PURE__ */ __s(function List(props, __s, __extra) {
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1, _m4;
-		const _root = clone(_t$1);
+		const _root = clone(_t$0);
 		_m1 = _root;
-		_m4 = child(_root);
-		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
+		queueRefAttach(__s, _m4 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:22ff36f2", "attr");
-	_b.c = updateFreshClassName(["vx-list", props.className], _b.c, _b.b);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:8088bcf9", setPlainAttribute);
+	_b.c = updateFreshClassName([
+		"vx-grid",
+		glassClassOf(props.glass),
+		props.className
+	], _b.c, _b.b);
 	{
-		const _v = props.style;
+		const _v = {
+			...glassStyleOf(props.glass),
+			...props.style,
+			...props.rows ? { gridTemplateRows: parseTracks(props.rows) } : {},
+			...props.columns ? { gridTemplateColumns: parseTracks(props.columns) } : {}
+		};
 		if (_b.d !== _v) {
 			setStyle(_b.b, _v, _b.d);
 			_b.d = _v;
 		}
 	}
-	forBlock(__s, 1, _b.b, props.items, _key$0, __item$3, 8, [props], __empty$1, _b.e, true);
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:2e517120", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { List };
+export { Grid };

package/dist/web/ui8.js

@@ -1,21 +1,38 @@
-import { __s, bag6, clone, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/ScrollView.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Stack.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div></div>");
-var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
+var _rm$1 = [
+	"r",
+	"e",
+	"b"
+];
+var Stack = /* @__PURE__ */ __s(function Stack(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1;
+		let _m1, _m4;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, null, void 0);
+		queueRefAttach(__s, _m4 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:79e2ec85", "attr");
-	_b.c = updateFreshClassName(["vx-scroll", props.className], _b.c, _b.b);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:c5a2da88", setPlainAttribute);
+	_b.c = updateFreshClassName([
+		"vx-stack",
+		glassClassOf(props.glass),
+		props.className
+	], _b.c, _b.b);
 	{
 		const _v = {
-			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...glassStyleOf(props.glass),
 			...props.style
 		};
 		if (_b.d !== _v) {
@@ -23,7 +40,7 @@ var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
 			_b.d = _v;
 		}
 	}
-	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.children, "b:142a2a1c", null, void 0, void 0, void 0, true);
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:3a94ba9c", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { ScrollView };
+export { Stack };

package/dist/web/ui9.js

@@ -1,27 +1,46 @@
-import { __s, bag6, clone, setStyle, template } from "octane";
-import { bindSignalAttribute, enableSignalBindings } from "octane/internal/client";
-//#region src/Image.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Absolute.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<img/>");
-var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"e",
+	"b"
+];
+var Absolute = /* @__PURE__ */ __s(function Absolute(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1;
+		let _m1, _m4;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0);
+		queueRefAttach(__s, _m4 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:dac1f500", "attr");
-	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:dee59c6d", "class");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:f8caef47", setPlainAttribute);
+	_b.c = updateFreshClassName([
+		"vx-absolute",
+		glassClassOf(props.glass),
+		props.className
+	], _b.c, _b.b);
 	{
-		const _v = props.style;
+		const _v = {
+			...glassStyleOf(props.glass),
+			...props.style
+		};
 		if (_b.d !== _v) {
 			setStyle(_b.b, _v, _b.d);
 			_b.d = _v;
 		}
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "src", props.src, "b:1951fade", "attr");
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "alt", props.alt, "b:0b6f5f10", "attr");
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:55e1bd7a", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Image };
+export { Absolute };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.2.1",
-  "type": "module",
+  "version": "0.4.0",
   "files": [
     "dist",
     "types",
     "src/theme/tokens.css"
   ],
+  "type": "module",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
@@ -18,13 +18,21 @@
   },
   "devDependencies": {
     "@nativescript-community/octane": "0.2.1",
+    "@nativescript-community/ui-canvas": "4.6.52",
+    "@nativescript-community/ui-drawer": "0.1.32",
+    "@nativescript-community/ui-svg": "0.2.24",
     "@nativescript/core": "9.1.2",
-    "@octanejs/vite-plugin": "0.1.58",
-    "octane": "0.4.0",
-    "vite": "8.3.0"
+    "@octanejs/vite-plugin": "0.1.60",
+    "jsdom": "30.1.1",
+    "octane": "0.5.0",
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
   },
   "peerDependencies": {
     "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript-community/ui-canvas": ">=4.6.52 <5",
+    "@nativescript-community/ui-drawer": ">=0.1.32 <1",
+    "@nativescript-community/ui-svg": ">=0.2.24 <1",
     "@nativescript/core": ">=9.1.0 <10",
     "octane": ">=0.1.51 <1"
   },
@@ -32,11 +40,15 @@
     "@nativescript-community/octane": {
       "optional": true
     },
+    "@nativescript-community/ui-drawer": {
+      "optional": true
+    },
     "@nativescript/core": {
       "optional": true
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json"
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
+    "test:native": "vitest run --config vitest.native.config.mts"
   }
 }