@octane-xplat/ui 0.3.0 → 0.4.0

package/dist/native/ui44.js

@@ -1,8 +1,267 @@
-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);
+import { cx } from "./ui2.js";
+import { Text } from "./ui14.js";
+import { Pressable } from "./ui16.js";
+import { registerStack } from "./ui18.js";
+import { RouteHost } from "./ui20.js";
+import { layoutsForRoute, screenFor, useRoute } from "./ui21.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, memo, universalChildren, universalComponent, universalFor, universalIf, universalPlan, universalProps, universalValue, useState, withSlot } from "@nativescript-community/octane";
+import { Application, Frame, GridLayout, Page, TabViewItem } from "@nativescript/core";
+//#region src/Tabs.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": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "tabview",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["items", 3],
+		["selectedIndex", 4],
+		["onSelectedIndexChanged", 5],
+		["onLoaded", 6]
+	]
+});
+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": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "rows": "auto,*" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": {
+			"row": 0,
+			"className": "vx-tabbar"
+		},
+		"bindings": [["columns", 3]],
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}, {
+		"kind": "host",
+		"type": "gridlayout",
+		"props": { "row": 1 },
+		"bindings": [["className", 5]],
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+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 TabPane = defineUniversalComponent("nativescript", function TabPane(props) {
+	return universalValue(__octaneUniversalPlan0, [props.render()]);
+}, { "module": "@nativescript-community/octane" });
+var paneRoots = /* @__PURE__ */ new WeakMap();
+var tabsByView = /* @__PURE__ */ new WeakMap();
+var itemsCache = /* @__PURE__ */ new WeakMap();
+function itemsFor(tabs) {
+	let items = itemsCache.get(tabs);
+	if (items !== void 0) return items;
+	items = tabs.map((t) => {
+		const item = new TabViewItem();
+		item.title = t.title;
+		if (t.stack) {
+			const frame = new Frame();
+			frame.once("loaded", () => {
+				frame.navigate({ create: () => {
+					const page = new Page();
+					page.actionBarHidden = true;
+					const pane = new GridLayout();
+					page.content = pane;
+					createNativeScriptRoot(pane).render(TabPane, { render: t.render });
+					return page;
+				} });
+			});
+			registerStack(t.stack, frame);
+			item.view = frame;
+			return item;
+		}
+		const cv = new GridLayout();
+		tabsByView.set(cv, t.render);
+		item.view = cv;
+		return item;
+	});
+	itemsCache.set(tabs, items);
+	return items;
 }
+function mountPanes(e) {
+	const tv = e.object;
+	for (const item of tv.items) {
+		const cv = item.view;
+		if (!(cv instanceof GridLayout) || paneRoots.has(cv)) continue;
+		const render = tabsByView.get(cv);
+		if (!render) continue;
+		const root = createNativeScriptRoot(cv);
+		paneRoots.set(cv, root);
+		root.render(TabPane, { render });
+	}
+	console.log("[probe] tabs mounted panes=" + tv.items.length);
+}
+var TabsInner = defineUniversalComponent("nativescript", function TabsInner(props) {
+	return universalValue(__octaneUniversalPlan1, [
+		props.id,
+		cx(props.className),
+		props.style,
+		itemsFor(props.tabs),
+		props.selectedIndex,
+		(e) => props.onSelectedIndexChanged?.(e.value),
+		mountPanes
+	]);
+}, { "module": "@nativescript-community/octane" });
+var MemoTabs = memo(TabsInner, (a, b) => a.tabs === b.tabs && a.selectedIndex === b.selectedIndex);
+function screenParams(route) {
+	const params = {
+		...route.params,
+		...route.context ?? {},
+		_stack: route.stack,
+		_pushed: true
+	};
+	if (Object.prototype.hasOwnProperty.call(route, "loaderData")) params.data = route.loaderData;
+	if (Object.prototype.hasOwnProperty.call(route, "loaderError")) params.error = route.loaderError;
+	return params;
+}
+var SwapTabs = defineUniversalComponent("nativescript", function SwapTabs(props) {
+	const [internal, setInternal] = useState(0, _h$0);
+	const active = props.selectedIndex ?? internal;
+	const tab = props.tabs[active];
+	const route = withSlot(_h$1, useRoute, tab?.stack ?? "");
+	const Screen = route ? screenFor(route.name) : void 0;
+	const columns = props.tabs.map(() => "*").join(",");
+	return universalValue(__octaneUniversalPlan6, [
+		props.id,
+		cx(props.className),
+		props.style,
+		columns,
+		universalFor(props.tabs, (t, i) => t.title, (t, i) => {
+			return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Pressable, universalProps([
+				[
+					"set",
+					"col",
+					i
+				],
+				[
+					"set",
+					"className",
+					cx("vx-tab", active === i ? "active" : "")
+				],
+				[
+					"set",
+					"onPress",
+					() => {
+						setInternal(i);
+						props.onSelectedIndexChanged?.(i);
+					}
+				]
+			], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Text, universalProps([], t.title))]);
+			})))]);
+		}),
+		cx("vx-tabpane", route?.presentation === "fade" ? "vx-route--fade" : ""),
+		universalIf(route && Screen, () => {
+			return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", RouteHost, universalProps([
+				[
+					"set",
+					"screen",
+					Screen
+				],
+				[
+					"set",
+					"layouts",
+					layoutsForRoute(route.name)
+				],
+				[
+					"set",
+					"params",
+					screenParams(route)
+				]
+			]))]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan5, [tab?.render()]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+var Tabs = defineUniversalComponent("nativescript", function Tabs(props) {
+	return universalValue(__octaneUniversalPlan9, [universalIf(Application.android, () => {
+		return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", SwapTabs, universalProps([["spread", props]]))]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan8, [universalComponent("nativescript", MemoTabs, universalProps([
+			[
+				"set",
+				"id",
+				props.id
+			],
+			[
+				"set",
+				"className",
+				props.className
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			[
+				"set",
+				"tabs",
+				props.tabs
+			],
+			[
+				"set",
+				"selectedIndex",
+				props.selectedIndex
+			],
+			[
+				"set",
+				"onSelectedIndexChanged",
+				props.onSelectedIndexChanged
+			]
+		]))]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { useStore };
+export { Tabs };

package/dist/native/ui45.js

@@ -0,0 +1,28 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Switch.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "switch",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["checked", 4],
+		["onCheckedChange", 5]
+	]
+});
+var Switch = defineUniversalComponent("nativescript", function Switch(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx(props.className),
+		props.style,
+		props.checked,
+		(e) => props.onCheckedChange?.(e.value)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Switch };

package/dist/native/ui46.js

@@ -0,0 +1,35 @@
+import { hookSlots, useEffect, useState } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+//#region src/safeAreaInsets.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+function measure() {
+	const insets = (Application.ios?.rootController?.view)?.safeAreaInsets;
+	if (insets) return {
+		top: insets.top,
+		right: insets.right,
+		bottom: insets.bottom,
+		left: insets.left
+	};
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+}
+function useSafeAreaInsets() {
+	const [insets, setInsets] = useState(measure, _h$0);
+	useEffect(() => {
+		const update = () => setInsets(measure());
+		Application.on(Application.orientationChangedEvent, update);
+		update();
+		return () => {
+			Application.off(Application.orientationChangedEvent, update);
+		};
+	}, [], _h$1);
+	return insets;
+}
+//#endregion
+export { useSafeAreaInsets };

package/dist/native/ui47.js

@@ -0,0 +1,41 @@
+import { cx } from "./ui2.js";
+import { useSafeAreaInsets } from "./ui46.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, withSlot } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+//#region src/SafeArea.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var SafeArea = defineUniversalComponent("nativescript", function SafeArea(props) {
+	const insets = withSlot(_h$0, useSafeAreaInsets);
+	const platformProps = Application.ios != null ? props.ios : props.android;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		(host) => {
+			if (host && platformProps) Object.assign(host, platformProps);
+		},
+		cx("vx-safe-area", props.className),
+		{
+			...props.style,
+			paddingTop: insets.top,
+			paddingRight: insets.right,
+			paddingBottom: insets.bottom,
+			paddingLeft: insets.left
+		},
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SafeArea };

package/dist/native/ui48.js

@@ -0,0 +1,72 @@
+import { cx } from "./ui2.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useState, withSlot } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+//#region src/KeyboardAvoiding.native.tsrx
+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": "host",
+	"type": "scrollview",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["ref", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [["style", 4]],
+		"children": [{
+			"kind": "slot",
+			"slot": 5
+		}]
+	}]
+});
+function useKeyboardInset() {
+	const [inset, setInset] = useState(0, _h$0);
+	useEffect(() => {
+		if (!Application.ios) return;
+		const center = NSNotificationCenter.defaultCenter;
+		const token = center.addObserverForNameObjectQueueUsingBlock(UIKeyboardWillChangeFrameNotification, null, NSOperationQueue.mainQueue, (note) => {
+			const frame = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
+			const screenHeight = UIScreen.mainScreen.bounds.size.height;
+			setInset(Math.max(0, screenHeight - frame.origin.y));
+		});
+		return () => center.removeObserver(token);
+	}, [], _h$1);
+	return inset;
+}
+function useAndroidResize() {
+	useEffect(() => {
+		const nativeWindow = Application.android?.foregroundActivity?.window;
+		if (!nativeWindow) return;
+		const params = android.view.WindowManager.LayoutParams;
+		const previous = nativeWindow.attributes.softInputMode;
+		const adjusted = previous & ~params.SOFT_INPUT_MASK_ADJUST | params.SOFT_INPUT_ADJUST_RESIZE;
+		nativeWindow.setSoftInputMode(adjusted);
+		return () => nativeWindow.setSoftInputMode(previous);
+	}, [], _h$2);
+}
+var KeyboardAvoiding = defineUniversalComponent("nativescript", function KeyboardAvoiding(props) {
+	const keyboardInset = withSlot(_h$3, useKeyboardInset);
+	withSlot(_h$4, useAndroidResize);
+	const platformProps = Application.ios != null ? props.ios : props.android;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx("vx-keyboard-avoiding", props.className),
+		props.style,
+		(host) => {
+			if (host && platformProps) Object.assign(host, platformProps);
+		},
+		keyboardInset ? { paddingBottom: keyboardInset } : void 0,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { KeyboardAvoiding };

package/dist/native/ui49.js

@@ -0,0 +1,66 @@
+import { cx } from "./ui2.js";
+import { defineUniversalComponent, hookSlots, registerElement, universalIf, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+import { Drawer, install } from "@nativescript-community/ui-drawer";
+//#region src/Drawer.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": "gridlayout",
+	"props": { "hostSlot": "leftDrawer" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "drawer",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"props": { "hostSlot": "mainContent" },
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}, {
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+install();
+registerElement("drawer", Drawer);
+var Drawer$1 = defineUniversalComponent("nativescript", function Drawer(props) {
+	const host = useRef(null, _h$0);
+	const platformProps = Application.ios != null ? props.ios : props.android;
+	useEffect(() => {
+		const d = host.current;
+		if (!d) return;
+		if (props.open && !d.isOpened("left")) d.open("left").catch(() => {});
+		else if (!props.open && d.isOpened("left")) d.close("left").catch(() => {});
+	}, [props.open], _h$1);
+	return universalValue(__octaneUniversalPlan1, [
+		props.id,
+		(d) => {
+			host.current = d;
+			if (d && platformProps) Object.assign(d, platformProps);
+		},
+		cx("vx-drawer", props.className),
+		props.style,
+		props.main,
+		universalIf(props.drawer != null, () => {
+			return universalValue(__octaneUniversalPlan0, [props.drawer]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/native/ui5.js

@@ -1,78 +1,38 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { layoutChildProps } from "./ui4.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",
-	"propsSlot": 0,
-	"children": [{
-		"kind": "slot",
-		"slot": 1
-	}]
-});
-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) => {
-				if (v) {
-					applyEscapeProps(v, props);
-					props.bind?.(v);
-				}
-			}
-		],
-		[
-			"set",
-			"flexDirection",
-			"column"
-		],
-		[
-			"set",
-			"className",
-			cx(props.className)
-		],
-		[
-			"set",
-			"style",
-			props.style
-		],
-		[
-			"set",
-			"onPan",
-			props.onPan ? onPan : void 0
-		],
-		[
-			"set",
-			"onSwipe",
-			props.onSwipe
-		]
-	]), props.children]);
-}, { "module": "@nativescript-community/octane" });
+//#region src/layout-child.native.ts
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** NativeScript reads these attributes from each child view during parent
+*  layout. Values are forwarded with NativeScript's own property names.
+*  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
+*  the host flexboxlayout itself — its own attributes, not child metadata. */
+function layoutChildProps(props) {
+	const result = {};
+	for (const key of [
+		"row",
+		"col",
+		"rowSpan",
+		"colSpan",
+		"dock",
+		"left",
+		"top",
+		"flexGrow",
+		"flexShrink",
+		"alignSelf",
+		"order"
+	]) if (props[key] !== void 0) result[key] = props[key];
+	if (props.justifyContent !== void 0) result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) result.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) result.gap = props.gap;
+	if (props.rowGap !== void 0) result.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) result.columnGap = props.columnGap;
+	return result;
+}
 //#endregion
-export { View };
+export { layoutChildProps };

package/dist/native/ui50.js

@@ -0,0 +1,27 @@
+import { cx } from "./ui2.js";
+import { applyNativeProps } from "./ui36.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/ActivityIndicator.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "activityindicator",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["busy", 3],
+		["ref", 4]
+	]
+});
+var ActivityIndicator = defineUniversalComponent("nativescript", function ActivityIndicator(props) {
+	if (props.busy === false) return null;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx(props.className),
+		props.style,
+		props.busy ?? true,
+		(el) => applyNativeProps(el, props)
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ActivityIndicator };

package/dist/native/ui51.js

@@ -0,0 +1,13 @@
+//#region src/meter-math.ts
+/** Clamp a progress value to its declared range for drawing and accessibility. */
+function meterRange(value, max) {
+	const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+	const safeValue = Number.isFinite(value) ? Math.min(safeMax, Math.max(0, value)) : 0;
+	return {
+		max: safeMax,
+		value: safeValue,
+		ratio: safeValue / safeMax
+	};
+}
+//#endregion
+export { meterRange };