@octane-xplat/ui 0.3.0 → 0.4.0

package/dist/native/ui52.js

@@ -0,0 +1,92 @@
+import { cx } from "./ui2.js";
+import { meterRange } from "./ui51.js";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { AccessibilityRole } from "@nativescript/core";
+import { CanvasView, Cap, Paint, Style } from "@nativescript-community/ui-canvas";
+//#region src/Meter.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "canvasview",
+	"props": { "accessible": true },
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3],
+		["onDraw", 4],
+		["accessibilityRole", 5],
+		["accessibilityLabel", 6],
+		["accessibilityValue", 7]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": {
+			"horizontalAlignment": "center",
+			"verticalAlignment": "middle"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 8
+		}]
+	}]
+});
+registerElement("canvasview", CanvasView);
+var Meter = defineUniversalComponent("nativescript", function Meter(props) {
+	const max = props.max ?? 100;
+	const { max: rangeMax, value, ratio } = meterRange(props.value, max);
+	const size = props.size ?? 24;
+	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size));
+	const color = props.color ?? "#3376cc";
+	const trackColor = props.trackColor ?? "#e1ecf7";
+	const canvasRef = useRef(null, _h$0);
+	useEffect(() => {
+		canvasRef.current?.invalidate();
+	}, [
+		value,
+		rangeMax,
+		strokeWidth,
+		color,
+		trackColor
+	], _h$1);
+	const draw = (event) => {
+		const canvas = event.canvas;
+		const width = canvas.getWidth();
+		const height = canvas.getHeight();
+		const diameter = Math.max(0, Math.min(width, height) - strokeWidth);
+		const left = (width - diameter) / 2;
+		const top = (height - diameter) / 2;
+		const right = left + diameter;
+		const bottom = top + diameter;
+		const paint = new Paint();
+		paint.style = Style.STROKE;
+		paint.strokeCap = Cap.ROUND;
+		paint.strokeWidth = strokeWidth;
+		paint.setColor(trackColor);
+		canvas.drawArc(left, top, right, bottom, -90, 360, false, paint);
+		if (ratio > 0) {
+			paint.setColor(color);
+			canvas.drawArc(left, top, right, bottom, -90, ratio * 360, false, paint);
+		}
+	};
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		canvasRef,
+		cx("vx-meter", props.className),
+		{
+			width: size,
+			height: size,
+			...props.style
+		},
+		draw,
+		AccessibilityRole.ProgressBar,
+		props.accessibilityLabel,
+		`${value} of ${rangeMax}`,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Meter };

package/dist/native/ui53.js

@@ -0,0 +1,34 @@
+import { cx } from "./ui2.js";
+import { applyNativeProps } from "./ui36.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Slider.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "slider",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["value", 3],
+		["minValue", 4],
+		["maxValue", 5],
+		["isEnabled", 6],
+		["onValueChange", 7],
+		["ref", 8]
+	]
+});
+var Slider = defineUniversalComponent("nativescript", function Slider(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(props.className),
+		props.style,
+		props.value,
+		props.minValue ?? 0,
+		props.maxValue ?? 100,
+		props.disabled ? false : true,
+		(e) => props.onValueChange?.(e.value),
+		(el) => applyNativeProps(el, props)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Slider };

package/dist/native/ui54.js

@@ -0,0 +1,17 @@
+//#region src/icons.ts
+/**
+* App-owned icon registry. `svg` is SVG path `d` data (not a full SVG
+* markup string). Native `font` glyphs render only when the app ships that font.
+*/
+var icons = /* @__PURE__ */ new Map();
+function registerIcon(name, glyph) {
+	icons.set(name, glyph);
+}
+function registerIcons(record) {
+	for (const [name, glyph] of Object.entries(record)) icons.set(name, glyph);
+}
+function getIcon(name) {
+	return icons.get(name);
+}
+//#endregion
+export { getIcon, registerIcon, registerIcons };

package/dist/native/ui55.js

@@ -0,0 +1,156 @@
+import { cx } from "./ui2.js";
+import { glyphSvgMarkup, isSvgSrc, svgSource } from "./ui28.js";
+import { applyNativeProps } from "./ui36.js";
+import { getIcon } from "./ui54.js";
+import { defineUniversalComponent, universalIf, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Icon.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "svgview",
+	"props": { "stretch": "aspectFit" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["src", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["text", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "svgview",
+	"props": { "stretch": "aspectFit" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["src", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "image",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["src", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["text", 2],
+		["style", 3],
+		["ref", 4]
+	]
+});
+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 Icon = defineUniversalComponent("nativescript", function Icon(props) {
+	const glyph = getIcon(props.name);
+	if (!glyph) return null;
+	const size = props.size ?? 24;
+	const markup = glyphSvgMarkup(glyph, props.color);
+	return universalValue(__octaneUniversalPlan9, [universalIf(markup, () => {
+		return universalValue(__octaneUniversalPlan0, [
+			props.id,
+			cx(props.className),
+			markup,
+			{
+				width: size,
+				height: size
+			},
+			(el) => applyNativeProps(el, props)
+		]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan8, [universalIf(glyph.font, () => {
+			return universalValue(__octaneUniversalPlan1, [
+				props.id,
+				cx(props.className),
+				glyph.font.glyph,
+				{
+					fontFamily: glyph.font.family,
+					fontSize: size,
+					color: props.color
+				},
+				(el) => applyNativeProps(el, props)
+			]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan7, [universalIf(glyph.src, () => {
+				return universalValue(__octaneUniversalPlan4, [universalIf(isSvgSrc(glyph.src), () => {
+					return universalValue(__octaneUniversalPlan2, [
+						props.id,
+						cx(props.className),
+						svgSource(glyph.src),
+						{
+							width: size,
+							height: size
+						},
+						(el) => applyNativeProps(el, props)
+					]);
+				}, () => {
+					return universalValue(__octaneUniversalPlan3, [
+						props.id,
+						cx(props.className),
+						glyph.src,
+						{
+							width: size,
+							height: size
+						},
+						(el) => applyNativeProps(el, props)
+					]);
+				})]);
+			}, () => {
+				return universalValue(__octaneUniversalPlan6, [universalIf(glyph.text, () => {
+					return universalValue(__octaneUniversalPlan5, [
+						props.id,
+						cx(props.className),
+						glyph.text,
+						{
+							fontSize: size,
+							color: props.color
+						},
+						(el) => applyNativeProps(el, props)
+					]);
+				})]);
+			})]);
+		})]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Icon };

package/dist/native/ui56.js

@@ -0,0 +1,33 @@
+import { cx } from "./ui2.js";
+import { applyNativeProps } from "./ui36.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { AccessibilityRole } from "@nativescript/core";
+//#region src/Heading.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["accessibilityRole", 3],
+		["ref", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var Heading = defineUniversalComponent("nativescript", function Heading(props) {
+	const level = props.level ?? 2;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(`vx-h${level}`, props.className),
+		props.style,
+		AccessibilityRole.Header,
+		(el) => applyNativeProps(el, props),
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Heading };

package/dist/native/ui57.js

@@ -0,0 +1,14 @@
+import { cx } from "./ui2.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/PlatformBadge.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "text": "ios|android" },
+	"bindings": [["className", 0]]
+});
+var PlatformBadge = defineUniversalComponent("nativescript", function PlatformBadge(props) {
+	return universalValue(__octaneUniversalPlan0, [cx(props.className)]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { PlatformBadge };

package/dist/native/ui58.js

@@ -0,0 +1,22 @@
+//#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);
+			};
+		}
+	};
+}
+//#endregion
+export { createStore };

package/dist/native/ui59.js

@@ -0,0 +1,8 @@
+import { hookSlots, useSyncExternalStore } from "@nativescript-community/octane";
+//#region src/use-store.native.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);
+}
+//#endregion
+export { useStore };

package/dist/native/ui6.js

@@ -1,8 +1,10 @@
 import { cx } from "./ui2.js";
 import { applyEscapeProps } from "./ui3.js";
-import { layoutChildProps } from "./ui4.js";
-import { defineUniversalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
-//#region src/Row.native.tsrx
+import { glassClassOf, glassConfigOf } from "./ui4.js";
+import { layoutChildProps } from "./ui5.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback } from "@nativescript-community/octane";
+//#region src/View.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
@@ -12,30 +14,71 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		"slot": 1
 	}]
 });
-var Row = defineUniversalComponent("nativescript", function Row(props) {
+var PAN_STATE = [
+	"cancelled",
+	"began",
+	"moved",
+	"ended"
+];
+var View = defineUniversalComponent("nativescript", function View(props) {
+	const onPan = useCallback((e) => props.onPan?.({
+		x: e.deltaX,
+		y: e.deltaY,
+		dx: e.deltaX,
+		dy: e.deltaY,
+		vx: 0,
+		vy: 0,
+		state: PAN_STATE[e.state] ?? "moved",
+		target: e.view ?? e.object
+	}), [props.onPan], _h$0);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		["spread", layoutChildProps(props)],
 		[
 			"set",
 			"ref",
-			(v) => applyEscapeProps(v, props)
+			(v) => {
+				if (v) {
+					applyEscapeProps(v, props);
+					props.bind?.(v);
+				}
+			}
 		],
 		[
 			"set",
 			"flexDirection",
-			"row"
+			"column"
 		],
 		[
 			"set",
 			"className",
-			cx(props.className)
+			cx(glassClassOf(props.glass), props.className)
 		],
 		[
 			"set",
 			"style",
 			props.style
 		],
-		["spread", layoutChildProps(props)]
+		[
+			"set",
+			"iosGlassEffect",
+			glassConfigOf(props.glass)
+		],
+		[
+			"set",
+			"onPan",
+			props.onPan ? onPan : void 0
+		],
+		[
+			"set",
+			"onSwipe",
+			props.onSwipe
+		]
 	]), props.children]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Row };
+export { View };

package/dist/native/ui60.js

@@ -0,0 +1,108 @@
+import { cx } from "./ui2.js";
+import { applyThemeClasses } from "./ui31.js";
+import { rootLayoutFor } from "./ui34.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/Sheet.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "stacklayout",
+	"bindings": [["ref", 0], ["style", 1]]
+});
+var SheetBody = defineUniversalComponent("nativescript", function SheetBody(props) {
+	return universalValue(__octaneUniversalPlan0, [props.children]);
+}, { "module": "@nativescript-community/octane" });
+var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
+	const sentinel = useRef(null, _h$0);
+	const shown = useRef(null, _h$1);
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.open) {
+			if (!cur) return;
+			shown.current = null;
+			cur.programmatic = true;
+			cur.unbindTheme?.();
+			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);
+			});
+			return;
+		}
+		const rl = rootLayoutFor(sentinel.current);
+		if (!rl) return;
+		if (cur) {
+			cur.root.render(SheetBody, { children: props.children });
+			return;
+		}
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx("vx-sheet-host", props.className));
+		host.horizontalAlignment = "stretch";
+		host.verticalAlignment = "bottom";
+		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 opened = {
+			host,
+			root,
+			unbindTheme,
+			programmatic: false
+		};
+		shown.current = opened;
+		root.render(SheetBody, { children: props.children });
+		host.on("closed", () => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			opened.root.unmount?.();
+			if (!opened.programmatic) props.onDismiss?.();
+		});
+		rl.open(host, {
+			...props.shadeCover ?? true ? { shadeCover: {
+				opacity: .4,
+				tapToClose: true
+			} } : {},
+			animation: {
+				enterFrom: {
+					translateY: 400,
+					duration: 250
+				},
+				exitTo: {
+					translateY: 400,
+					duration: 200
+				}
+			}
+		}).catch((error) => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			opened.root.unmount?.();
+			console.error("[Sheet] open failed", error);
+		});
+	}, [
+		props.open,
+		props.children,
+		props.className,
+		props.style,
+		props.shadeCover,
+		props.ios,
+		props.android
+	], _h$2);
+	return universalValue(__octaneUniversalPlan1, [(v) => {
+		sentinel.current = v;
+	}, {
+		width: 0,
+		height: 0
+	}]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Sheet };

package/dist/native/ui61.js

@@ -0,0 +1,76 @@
+import { applyThemeClasses } from "./ui31.js";
+import { topRootLayout } from "./ui34.js";
+import { createNativeScriptRoot } from "@nativescript-community/octane";
+import { GridLayout } from "@nativescript/core";
+//#region src/sheet-service.native.ts
+var active = /* @__PURE__ */ new Set();
+/** The most recently opened sheet's host view — for harness asserts (view
+*  identity beats tree search; the owning rootlayout may unload/reload). */
+function sheetHost() {
+	return [...active].pop()?.host ?? null;
+}
+/** Close the most recently opened sheet (resolve with `result`). */
+function closeSheet(result) {
+	[...active].pop()?.finish(result);
+}
+/** Imperative in-window sheet: a dedicated Octane root on a bottom-docked
+*  GridLayout host opened on the CURRENT rootlayout (topRootLayout — the
+*  service has no declaring view). Resolves when the sheet closes. */
+var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
+	const rl = topRootLayout();
+	if (!rl) {
+		console.warn("[openSheet] no RootLayout mounted — sheet skipped");
+		resolve(void 0);
+		return;
+	}
+	const host = new GridLayout();
+	const unbindTheme = applyThemeClasses(host, "vx-sheet-host");
+	host.horizontalAlignment = "stretch";
+	host.verticalAlignment = "bottom";
+	const root = createNativeScriptRoot(host);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		active.delete(entry);
+		unbindTheme();
+		root.unmount?.();
+		const owner = host.parent;
+		if (owner?.hasChild?.(host)) owner.close(host).catch((error) => {
+			console.error("[openSheet] close failed", error);
+		});
+		resolve(result);
+	};
+	const entry = {
+		host,
+		root,
+		finish
+	};
+	host.on("closed", () => finish());
+	root.render(Component, {
+		params,
+		close: finish
+	});
+	active.add(entry);
+	rl.open(host, {
+		...options.shadeCover ?? true ? { shadeCover: {
+			opacity: .4,
+			tapToClose: true
+		} } : {},
+		animation: {
+			enterFrom: {
+				translateY: 400,
+				duration: 250
+			},
+			exitTo: {
+				translateY: 400,
+				duration: 200
+			}
+		}
+	}).catch((error) => {
+		console.error("[openSheet] open failed", error);
+		finish();
+	});
+});
+//#endregion
+export { closeSheet, openSheet, sheetHost };