@octane-xplat/ui 0.5.0 → 0.6.0

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

@@ -0,0 +1,270 @@
+import { cx } from "../cx.js";
+import { ActivityIndicator } from "../ActivityIndicator.native.tsrx.js";
+import { createPullToRefresh } from "../refresh.native.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;
+			}
+		],
+		[
+			"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.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",
+						"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
+				]
+			]))]);
+		})]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan5, [props.renderEmpty?.()]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { UITableView };

package/dist/native/ios/index.js

@@ -0,0 +1,11 @@
+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";
+export { LiquidGlass, LiquidGlassContainer, SideDrawer, UIActivityIndicatorView, UIModal, UISlider, UISwitch, UITabBar, UITableView, 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.native.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/modal-presenter.native.js

@@ -0,0 +1,19 @@
+//#region src/modal-presenter.native.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/native/index.js

@@ -0,0 +1,4 @@
+import { findInRootLayouts, rootLayoutFor, topRootLayout } from "../root-layout.native.js";
+import { layoutsForRoute } from "../route.native.js";
+import { sheetHost } from "../sheet-service.native.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": "29582229-3893-4486-bd72-49102bb0634c",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/{ui6.js → pan.native.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.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": "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.native.js

@@ -0,0 +1,10 @@
+//#region src/platform.native.ts
+/** Compile-time platform flag — `true` in every NativeScript build.
+*  Prefer `.web`/`.native` 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` code. */
+var isNative = true;
+//#endregion
+export { isNative };

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 };

package/dist/native/refresh.native.js

@@ -0,0 +1,177 @@
+import { dampenPull } from "./refresh-metrics.js";
+import { isIOS } from "@nativescript/core";
+//#region src/refresh.native.ts
+var PAN_ENDED = /* @__PURE__ */ new Set([0, 3]);
+var DOCK_ANIM_MS = 180;
+function makeInsets(top, left, bottom, right) {
+	const make = globalThis.UIEdgeInsetsMake;
+	if (make) return make(top, left, bottom, right);
+	return {
+		top,
+		left,
+		bottom,
+		right
+	};
+}
+/** Pan-driven pull-to-refresh over any NS scrollable (scrollview or
+*  listview). Two mechanics, one visual:
+*
+*  iOS — UIScrollView's own bounce supplies the content displacement
+*  (NS gesture delegates allow simultaneous recognition, so our pan on
+*  the scroller observes alongside the scroll pan). The handler reads
+*  `contentOffset` for the live gap and docks with
+*  `contentInset.top += H` — the exact mechanics UIRefreshControl uses.
+*
+*  Android — there is no overscroll; the scroller box itself is
+*  translated inside the clipping wrapper while the damped drag
+*  accumulates. Docking holds the translate at H. Edge glow is disabled
+*  (OVER_SCROLL_NEVER) so no OS chrome leaks into the pixels.
+*
+*  Releasing past `threshold` fires `onRefresh` once per pull and holds
+*  the docked gap; the controlled `refreshing` prop keeps it docked.
+*  A short grace window collapses the dock if `refreshing` never comes —
+*  props land a render after `onRefresh` fires. */
+function createPullToRefresh(host) {
+	const { scroller, indicator, isAtTop, cfg } = host;
+	if (!scroller || !indicator) return {
+		sync: () => {},
+		detach: () => {}
+	};
+	let docked = false;
+	let pullAcc = 0;
+	let prevDy = 0;
+	let touching = false;
+	let grace = null;
+	let baseInsetTop = null;
+	let lastTy = NaN;
+	const threshold = () => cfg.current.threshold ?? 64;
+	/** Resting gap: the strip stays docked while the gesture docked it OR
+	*  the controlled `refreshing` prop holds it open. */
+	const held = () => docked || !!cfg.current.refreshing;
+	const iosOverscroll = () => {
+		const sv = scroller.ios;
+		if (!sv?.contentOffset) return 0;
+		return Math.max(0, -(sv.contentOffset.y + sv.contentInset.top));
+	};
+	const applyReveal = (reveal) => {
+		const ty = reveal - 64;
+		if (ty !== lastTy) {
+			lastTy = ty;
+			indicator.translateY = ty;
+			if (!isIOS) scroller.translateY = reveal;
+		}
+	};
+	const settle = (reveal) => {
+		lastTy = NaN;
+		if (isIOS) animateTo(indicator, reveal - 64);
+		else {
+			animateTo(scroller, reveal);
+			animateTo(indicator, reveal - 64);
+		}
+	};
+	const setInset = (on) => {
+		const sv = scroller.ios;
+		if (!sv?.contentInset) return;
+		if (on && baseInsetTop == null) baseInsetTop = sv.contentInset.top;
+		const next = (baseInsetTop ?? 0) + (on ? 64 : 0);
+		if (Math.abs(sv.contentInset.top - next) < .5) return;
+		const apply = () => {
+			sv.contentInset = makeInsets(next, sv.contentInset.left, sv.contentInset.bottom, sv.contentInset.right);
+		};
+		const UIView = globalThis.UIView;
+		if (UIView?.animateWithDurationAnimations) UIView.animateWithDurationAnimations(DOCK_ANIM_MS / 1e3, apply);
+		else apply();
+	};
+	function animateTo(view, y) {
+		view?.animate?.({
+			translate: {
+				x: 0,
+				y
+			},
+			duration: DOCK_ANIM_MS
+		});
+	}
+	const dock = () => {
+		docked = true;
+		pullAcc = 0;
+		if (isIOS) setInset(true);
+		settle(64);
+	};
+	const collapse = () => {
+		docked = false;
+		pullAcc = 0;
+		if (isIOS) setInset(false);
+		settle(0);
+	};
+	/** `extra` is pull beyond the held baseline — a release only fires
+	*  `onRefresh` when the user actually pulled (a resting release inside
+	*  the dock re-fires nothing). */
+	const release = (extra) => {
+		const reveal = extra + (held() ? 64 : 0);
+		if (extra > 0 && reveal >= threshold()) {
+			cfg.current.onRefresh?.();
+			dock();
+			clearTimeout(grace);
+			grace = setTimeout(() => {
+				if (!cfg.current.refreshing) collapse();
+			}, 350);
+		} else if (held()) {
+			docked = true;
+			pullAcc = 0;
+			if (isIOS) setInset(true);
+			settle(64);
+		} else collapse();
+	};
+	const onPan = (e) => {
+		if (isIOS) {
+			const extra = iosOverscroll();
+			if (PAN_ENDED.has(e.state)) {
+				touching = false;
+				release(extra);
+			} else {
+				touching = true;
+				applyReveal(extra + (held() ? 64 : 0));
+			}
+			return;
+		}
+		if (e.state === 1) {
+			touching = true;
+			prevDy = e.deltaY;
+			pullAcc = 0;
+			return;
+		}
+		if (PAN_ENDED.has(e.state)) {
+			touching = false;
+			release(pullAcc);
+			pullAcc = 0;
+			return;
+		}
+		const inc = e.deltaY - prevDy;
+		prevDy = e.deltaY;
+		if (!isAtTop()) return;
+		pullAcc = Math.max(0, pullAcc + dampenPull(inc));
+		applyReveal(pullAcc + (held() ? 64 : 0));
+	};
+	scroller.on("pan", onPan);
+	if (!isIOS) scroller.android?.setOverScrollMode?.(2);
+	return {
+		sync: () => {
+			if (cfg.current.refreshing) {
+				clearTimeout(grace);
+				if (!docked && !touching) dock();
+			} else if (docked && !touching) collapse();
+		},
+		detach: () => {
+			clearTimeout(grace);
+			scroller.off("pan", onPan);
+			if (docked) {
+				docked = false;
+				if (isIOS) setInset(false);
+				else scroller.translateY = 0;
+				indicator.translateY = -64;
+			}
+		}
+	};
+}
+//#endregion
+export { createPullToRefresh };

package/dist/native/{ui34.js → root-layout.native.js}

@@ -26,13 +26,18 @@ function rootLayoutFor(view) {
 }
 /** Search every registered rootlayout for a view by id — overlays/sheets/
 *  toasts land on different rootlayouts depending on which screen's shell
-*  mounted last. */
+*  mounted last. Unloaded subtrees are skipped: a covered page unloads its
+*  views (NativeScript detaches their native recognizers while the JS views
+*  stay parented), so an unloaded match is a dead twin that can swallow
+*  interaction probes — the live view either doesn't exist here yet or sits
+*  under a loaded branch. */
 function findInRootLayouts(id) {
 	const walk = (view) => {
 		if (!view) return null;
 		if (view.id === id) return view;
 		let hit = null;
 		view.eachChildView?.((c) => {
+			if (c?.isLoaded === false) return true;
 			const found = walk(c);
 			if (found) {
 				hit = found;