@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/native/ios/UITableView.ios.tsrx.js

@@ -0,0 +1,282 @@
+import { cx } from "../cx.js";
+import { applyEscapeProps } from "../escape-props.js";
+import { ActivityIndicator } from "../ActivityIndicator.tsrx.js";
+import { createPullToRefresh } from "../refresh.js";
+import { defineUniversalComponent, hookSlots, memo, universalComponent, universalIf, universalPlan, universalProps, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { ScrollView } from "@nativescript/core";
+//#region src/ios/UITableView.ios.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(7);
+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 _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "listview",
+	"propsSlot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"bindings": [
+		["ref", 0],
+		["className", 1],
+		["style", 2]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 3
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-refresh",
+			"verticalAlignment": "top"
+		},
+		"bindings": [
+			["ref", 4],
+			["height", 5],
+			["translateY", 6]
+		],
+		"children": [{
+			"kind": "slot",
+			"slot": 7
+		}]
+	}]
+});
+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": "slot",
+	"slot": 0
+});
+function rejectNestedScrollView(event) {
+	let parent = event.object?.parent;
+	while (parent) {
+		if (parent instanceof ScrollView) throw new Error("[UITableView] cannot be nested inside native ScrollView. Use ScrollBox so the list owns scrolling.");
+		parent = parent.parent;
+	}
+}
+var UITableViewInner = defineUniversalComponent("nativescript", function UITableViewInner(props) {
+	const lv = useRef(null, _h$0);
+	useEffect(() => {
+		const bag = props.refresh;
+		if (!bag || !lv.current) return;
+		bag.ctl.current = createPullToRefresh({
+			scroller: lv.current,
+			indicator: bag.indicator.current,
+			isAtTop: () => true,
+			cfg: bag.cfg
+		});
+		return () => {
+			bag.ctl.current?.detach();
+			bag.ctl.current = null;
+		};
+	}, [], _h$1);
+	return universalValue(__octaneUniversalPlan1, [universalProps([
+		[
+			"set",
+			"ref",
+			(v) => {
+				lv.current = v;
+				applyEscapeProps(v, props);
+			}
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			cx(props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"items",
+			props.items
+		],
+		[
+			"set",
+			"iosEstimatedRowHeight",
+			props.estimatedItemHeight
+		],
+		[
+			"set",
+			"onLoadMoreItems",
+			props.onEndReached
+		],
+		[
+			"set",
+			"onLoaded",
+			rejectNestedScrollView
+		],
+		[
+			"set",
+			"renderItem",
+			(item, index) => universalValue(__octaneUniversalPlan0, [props.renderItem(item, index)])
+		],
+		["spread", props.ios]
+	])]);
+}, { "module": "@nativescript-community/octane" });
+var MemoListView = memo(UITableViewInner, (a, b) => a.items === b.items && a.className === b.className && a.style === b.style && a.id === b.id && a.estimatedItemHeight === b.estimatedItemHeight && a.onEndReached === b.onEndReached && a.ios === b.ios && a.modifiers === b.modifiers && a.refresh === b.refresh);
+var UITableView = defineUniversalComponent("nativescript", function UITableView(props) {
+	const refreshCapable = props.onRefresh != null || props.refreshing != null;
+	const cfg = useRef({}, _h$2);
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold
+	};
+	const indicator = useRef(null, _h$3);
+	const ctl = useRef(null, _h$4);
+	const refresh = useRef({
+		cfg,
+		indicator,
+		ctl
+	}, _h$5);
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing], _h$6);
+	return universalValue(__octaneUniversalPlan6, [universalIf(props.items.length > 0, () => {
+		return universalValue(__octaneUniversalPlan4, [universalIf(refreshCapable, () => {
+			return universalValue(__octaneUniversalPlan2, [
+				(v) => {
+					if (v?.ios) v.ios.clipsToBounds = true;
+				},
+				cx("vx-refresh-wrap", props.className),
+				props.style,
+				universalComponent("nativescript", MemoListView, universalProps([
+					[
+						"set",
+						"id",
+						props.id
+					],
+					[
+						"set",
+						"items",
+						props.items
+					],
+					[
+						"set",
+						"renderItem",
+						props.renderItem
+					],
+					[
+						"set",
+						"estimatedItemHeight",
+						props.estimatedItemHeight
+					],
+					[
+						"set",
+						"onEndReached",
+						props.onEndReached
+					],
+					[
+						"set",
+						"ios",
+						props.ios
+					],
+					[
+						"set",
+						"modifiers",
+						props.modifiers
+					],
+					[
+						"set",
+						"refresh",
+						refresh.current
+					]
+				])),
+				(v) => {
+					indicator.current = v;
+				},
+				64,
+				-64,
+				universalComponent("nativescript", ActivityIndicator, universalProps([]))
+			]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", MemoListView, universalProps([
+				[
+					"set",
+					"id",
+					props.id
+				],
+				[
+					"set",
+					"items",
+					props.items
+				],
+				[
+					"set",
+					"className",
+					props.className
+				],
+				[
+					"set",
+					"style",
+					props.style
+				],
+				[
+					"set",
+					"renderItem",
+					props.renderItem
+				],
+				[
+					"set",
+					"estimatedItemHeight",
+					props.estimatedItemHeight
+				],
+				[
+					"set",
+					"onEndReached",
+					props.onEndReached
+				],
+				[
+					"set",
+					"ios",
+					props.ios
+				],
+				[
+					"set",
+					"modifiers",
+					props.modifiers
+				]
+			]))]);
+		})]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan5, [props.renderEmpty?.()]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { UITableView };

package/dist/native/ios/icon.ios.js

@@ -0,0 +1,7 @@
+//#region src/ios/icon.ios.ts
+/** Selector for glyphs used by iOS-authentic widgets; the shared root Icon is unchanged. */
+var Icon = { select(choice) {
+	return choice.ios.startsWith("sys://") ? choice.ios : `sys://${choice.ios}`;
+} };
+//#endregion
+export { Icon };

package/dist/native/ios/index.js

@@ -0,0 +1,13 @@
+import { UISwitch } from "./UISwitch.ios.tsrx.js";
+import { UISlider } from "./UISlider.ios.tsrx.js";
+import { UIActivityIndicatorView } from "./UIActivityIndicatorView.ios.tsrx.js";
+import { UITableView } from "./UITableView.ios.tsrx.js";
+import { UITabBar } from "./UITabBar.ios.tsrx.js";
+import { UIModal } from "./UIModal.ios.tsrx.js";
+import { openModal } from "./openModal.ios.js";
+import { SideDrawer } from "./SideDrawer.ios.tsrx.js";
+import { LiquidGlass } from "./LiquidGlass.ios.tsrx.js";
+import { LiquidGlassContainer } from "./LiquidGlassContainer.ios.tsrx.js";
+import { Icon } from "./icon.ios.js";
+import { modifier } from "../modifier-factories.js";
+export { Icon, LiquidGlass, LiquidGlassContainer, SideDrawer, UIActivityIndicatorView, UIModal, UISlider, UISwitch, UITabBar, UITableView, modifier, openModal };

package/dist/native/{ui33.js → ios/openModal.ios.js}

@@ -1,12 +1,13 @@
-import { applyThemeClasses } from "./ui31.js";
+import { applyThemeClasses } from "../theme/theme-scheme.js";
+import { modalPresenter } from "../modal-presenter.mobile.js";
 import { createNativeScriptRoot } from "@nativescript-community/octane";
 import { Frame, GridLayout } from "@nativescript/core";
-//#region src/modal-service.native.ts
+//#region src/ios/openModal.ios.ts
 /** Open a component in its own NativeScript modal root and resolve on close. */
 var openModal = (Component, params, options = {}) => new Promise((resolve, reject) => {
-	const presenter = Frame.topmost()?.currentPage ?? Frame.topmost();
+	const presenter = modalPresenter(Frame.topmost());
 	if (!presenter) {
-		reject(/* @__PURE__ */ new Error("Cannot open modal before a NativeScript page is active"));
+		reject(/* @__PURE__ */ new Error("openModal dropped — no live presenter. The topmost frame has no loaded currentPage (a page mid-navigation), or no frame is active yet."));
 		return;
 	}
 	const host = new GridLayout();

package/dist/native/keyboard-inset.mobile.js

@@ -0,0 +1,66 @@
+import { Application } from "@nativescript/core";
+//#region src/keyboard-inset.mobile.ts
+var bound = /* @__PURE__ */ new Set();
+var inset = 0;
+var wired = false;
+var apply = () => {
+	bound.forEach((host) => {
+		host.translateY = -inset;
+	});
+};
+var wireIos = () => {
+	if (wired) return;
+	wired = true;
+	NSNotificationCenter.defaultCenter.addObserverForNameObjectQueueUsingBlock(UIKeyboardWillChangeFrameNotification, null, NSOperationQueue.mainQueue, (note) => {
+		const raw = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
+		const boxed = raw?.CGRectValue;
+		const frame = typeof boxed === "function" ? raw.CGRectValue() : boxed ?? raw;
+		inset = Math.max(0, UIScreen.mainScreen.bounds.size.height - (frame?.origin?.y ?? UIScreen.mainScreen.bounds.size.height));
+		apply();
+	});
+};
+/** Lift a bottom-anchored overlay host above the software keyboard.
+*  iOS: a shared UIKeyboardWillChangeFrame observer tracks the inset and
+*  translateY shifts the host — reliable on popup views regardless of how
+*  the RootLayout passes margins through. The current inset is applied at
+*  bind time so hosts opened over an already-visible keyboard still lift.
+*  Android: when the window runs `adjustResize` (KeyboardAvoiding sets it)
+*  the RootLayout resizes and the host follows on its own; otherwise the
+*  decor view's IME inset supplies the lift. Returns an unbind that
+*  restores the transform — call it when the host detaches. */
+function bindBottomInsetToKeyboard(host) {
+	if (Application.ios) {
+		wireIos();
+		bound.add(host);
+		host.translateY = -inset;
+		return () => {
+			bound.delete(host);
+			host.translateY = 0;
+		};
+	}
+	if (Application.android) {
+		const nativeWindow = Application.android.foregroundActivity?.window;
+		if (!nativeWindow) return () => {};
+		const params = globalThis.android?.view?.WindowManager?.LayoutParams;
+		if (!params) return () => {};
+		if ((nativeWindow.attributes.softInputMode & params.SOFT_INPUT_MASK_ADJUST) === params.SOFT_INPUT_ADJUST_RESIZE) return () => {};
+		const ViewCompat = globalThis.androidx?.core?.view?.ViewCompat;
+		const WindowInsetsCompat = globalThis.androidx?.core?.view?.WindowInsetsCompat;
+		if (!ViewCompat || !WindowInsetsCompat) return () => {};
+		const decorView = nativeWindow.decorView;
+		const listener = new ViewCompat.OnApplyWindowInsetsListener({ onApplyWindowInsets: (v, insets) => {
+			const ime = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom;
+			const nav = insets.getInsets(WindowInsetsCompat.Type.systemBars()).bottom;
+			host.translateY = -Math.max(0, ime - nav);
+			return insets;
+		} });
+		ViewCompat.setOnApplyWindowInsetsListener(decorView, listener);
+		return () => {
+			host.translateY = 0;
+			ViewCompat.setOnApplyWindowInsetsListener(decorView, null);
+		};
+	}
+	return () => {};
+}
+//#endregion
+export { bindBottomInsetToKeyboard };

package/dist/native/{ui5.js → layout-child.js}

@@ -1,4 +1,4 @@
-//#region src/layout-child.native.ts
+//#region src/layout-child.ts
 var FLEX_JUSTIFY = {
 	start: "flex-start",
 	end: "flex-end"

package/dist/native/modal-presenter.mobile.js

@@ -0,0 +1,19 @@
+//#region src/modal-presenter.mobile.ts
+/** Resolve the view `showModal` should present from: the frame's current
+*  page while it's live, else the frame itself. During push/pop churn
+*  `currentPage` can still point at a page that already left the window —
+*  presenting on a detached iOS VC silently drops the modal and its
+*  closeCallback never runs, hanging `openModal`/`Modal` forever. A page
+*  is a valid presenter only while it is loaded and still owned by the
+*  frame (`page.frame` is the page's parent link, cleared on detach).
+*  Returns null when nothing live can present — callers must surface that
+*  rather than presenting blind. `frame` is structural: `Frame.topmost()`
+*  types as FrameBase while stack registration hands over Frame. */
+function modalPresenter(frame) {
+	if (!frame) return null;
+	const page = frame.currentPage;
+	if (page && page.isLoaded && page.frame === frame) return page;
+	return frame.isLoaded ? frame : null;
+}
+//#endregion
+export { modalPresenter };

package/dist/native/modifier-factories.js

@@ -0,0 +1,24 @@
+//#region src/modifier-factories.ts
+var style = (values) => ({
+	type: "style",
+	values
+});
+/** Serializable modifier factories for the platform-authentic UI subpaths. */
+var modifier = {
+	background: (color) => style({ backgroundColor: color }),
+	cornerRadius: (radius) => style({ borderRadius: radius }),
+	opacity: (value) => style({ opacity: value }),
+	padding: (value) => style({ padding: value }),
+	frame: (width, height) => style({
+		width,
+		height
+	}),
+	style,
+	nativeProperty: (name, value) => ({
+		type: "property",
+		name,
+		value
+	})
+};
+//#endregion
+export { modifier };

package/dist/native/native/index.js

@@ -0,0 +1,4 @@
+import { findInRootLayouts, rootLayoutFor, topRootLayout } from "../root-layout.mobile.js";
+import { layoutsForRoute } from "../route.js";
+import { sheetHost } from "../sheet-service.js";
+export { findInRootLayouts, layoutsForRoute, rootLayoutFor, sheetHost, topRootLayout };

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "d5edf471-fc0d-486d-9d3d-c0ab3ededea6",
+  "buildId": "b28db075-a347-4f50-bc15-416a0351d4e3",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/{ui6.js → pan.tsrx.js}

@@ -1,22 +1,9 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { glassClassOf, glassConfigOf } from "./ui4.js";
-import { layoutChildProps } from "./ui5.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useRef } from "@nativescript-community/octane";
+import { hookSlots, useCallback, useRef } from "@nativescript-community/octane";
 import { Utils } from "@nativescript/core";
-//#region src/View.native.tsrx
+//#region src/pan.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": "flexboxlayout",
-	"propsSlot": 0,
-	"children": [{
-		"kind": "slot",
-		"slot": 1
-	}]
-});
 var PAN_STATE = [
 	"cancelled",
 	"began",
@@ -57,12 +44,12 @@ function panVelocity(e, state, trackerRef) {
 	}
 	return velocity;
 }
-var View = defineUniversalComponent("nativescript", function View(props) {
+function usePan(cb) {
 	const velocityTracker = useRef(null, _h$0);
-	const onPan = useCallback((e) => {
+	const handler = useCallback((e) => {
 		const state = PAN_STATE[e.state] ?? "moved";
 		const velocity = panVelocity(e, e.state, velocityTracker);
-		props.onPan?.({
+		cb?.({
 			x: e.deltaX,
 			y: e.deltaY,
 			dx: e.deltaX,
@@ -72,55 +59,8 @@ var View = defineUniversalComponent("nativescript", function View(props) {
 			state,
 			target: e.view ?? e.object
 		});
-	}, [props.onPan], _h$1);
-	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(glassClassOf(props.glass), props.className)
-		],
-		[
-			"set",
-			"style",
-			props.style
-		],
-		[
-			"set",
-			"iosGlassEffect",
-			glassConfigOf(props.glass)
-		],
-		[
-			"set",
-			"onPan",
-			props.onPan ? onPan : void 0
-		],
-		[
-			"set",
-			"onSwipe",
-			props.onSwipe
-		]
-	]), props.children]);
-}, { "module": "@nativescript-community/octane" });
+	}, [cb], _h$1);
+	return cb ? handler : void 0;
+}
 //#endregion
-export { View };
+export { usePan };

package/dist/native/platform.js

@@ -0,0 +1,10 @@
+//#region src/platform.ts
+/** Compile-time platform flag — `true` in every NativeScript build.
+*  Prefer `.web`/unsuffixed native defaults leaves for real divergence; `isNative` covers
+*  the render-time cases (conditional JSX, prop selection) where a whole
+*  leaf file is heavier than the difference. For OS-level splits use
+*  `.ios`/`.android` leaves or `isIOS`/`isAndroid` from @nativescript/core
+*  inside native-default code. */
+var isNative = true;
+//#endregion
+export { isNative };

package/dist/native/{ui36.js → platformProps.js}

@@ -1,10 +1,12 @@
+import { applyNativeModifiers } from "./apply-native-modifiers.native.js";
 import { isAndroid, isIOS } from "@nativescript/core";
-//#region src/platformProps.native.ts
+//#region src/platformProps.ts
 /** Apply the matching native escape-hatch bag after the primitive's props. */
 function applyNativeProps(el, props) {
 	if (!el) return;
 	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
 	if (bag) Object.assign(el, bag);
+	applyNativeModifiers(el, props.modifiers);
 }
 //#endregion
 export { applyNativeProps };

package/dist/native/refresh-metrics.js

@@ -0,0 +1,9 @@
+//#region src/refresh-metrics.ts
+/** Finger-travel → content displacement. iOS rubber-band applies ~0.5
+*  resistance at small pulls; web/Android drive the same ratio so the
+*  affordance reads identically across targets. */
+function dampenPull(dy) {
+	return dy * .5;
+}
+//#endregion
+export { dampenPull };