@octane-xplat/ui 0.2.1 → 0.3.0

package/dist/native/ui15.js

@@ -1,19 +1,129 @@
-//#region src/stacks.native.ts
-/** Named parallel stacks. A shell (Tabs with `stack` on a spec, the app
-*  entry's root frame) registers its Frame here; `navigate(name, params,
-*  {into})` resolves the target by name. Native-only concept — on web,
-*  parallel stacks map to nested routes (one linear URL stack). */
-var stacks = /* @__PURE__ */ new Map();
-function registerStack(name, frame) {
-	stacks.set(name, frame);
-}
-function getStack(name) {
-	return stacks.get(name);
-}
-/** All registered stacks in registration order — for hardware-back
-*  resolution (pop whichever stack is visibly on top). */
-function stackEntries() {
-	return stacks.entries();
-}
+import { cx } from "./ui2.js";
+import { defineUniversalComponent, memo, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { isAndroid, isIOS } from "@nativescript/core";
+//#region src/List.native.tsrx
+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": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var ListInner = defineUniversalComponent("nativescript", function ListInner(props) {
+	const platformProps = Object.assign({}, isIOS ? props.ios : {}, isAndroid ? props.android : {});
+	return universalValue(__octaneUniversalPlan1, [universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			cx(props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"items",
+			props.items
+		],
+		[
+			"set",
+			"iosEstimatedRowHeight",
+			isIOS ? props.estimatedItemHeight : void 0
+		],
+		[
+			"set",
+			"onLoadMoreItems",
+			props.onEndReached
+		],
+		[
+			"set",
+			"renderItem",
+			(item, index) => universalValue(__octaneUniversalPlan0, [props.renderItem(item, index)])
+		],
+		["spread", platformProps]
+	])]);
+}, { "module": "@nativescript-community/octane" });
+var MemoListView = memo(ListInner, (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.android === b.android);
+var List = defineUniversalComponent("nativescript", function List(props) {
+	return universalValue(__octaneUniversalPlan4, [universalIf(props.items.length > 0, () => {
+		return universalValue(__octaneUniversalPlan2, [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",
+				"android",
+				props.android
+			]
+		]))]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan3, [props.renderEmpty?.()]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { getStack, registerStack, stackEntries };
+export { List };

package/dist/native/ui16.js

@@ -1,143 +1,55 @@
-import { registerStack } from "./ui15.js";
-import { createNativeScriptRoot, defineUniversalComponent, markWarm, memo, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
-import { ContentView, Frame, Page, TabViewItem } from "@nativescript/core";
-//#region src/Tabs.native.tsrx
+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/ScrollView.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "range",
+	"kind": "host",
+	"type": "scrollview",
+	"propsSlot": 0,
 	"children": [{
-		"kind": "slot",
-		"slot": 0
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [["flexDirection", 1]],
+		"children": [{
+			"kind": "slot",
+			"slot": 2
+		}]
 	}]
 });
-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 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;
-					createNativeScriptRoot(page).render(TabPane, { render: t.render });
-					return page;
-				} });
-			});
-			registerStack(t.stack, frame);
-			item.view = frame;
-			return item;
-		}
-		const cv = new ContentView();
-		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 ContentView) || 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,
-		props.className,
-		props.style,
-		itemsFor(props.tabs),
-		props.selectedIndex,
-		(e) => props.onSelectedIndexChanged?.(e.value),
-		mountPanes
+var ScrollView = defineUniversalComponent("nativescript", function ScrollView(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		universalProps([
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			[
+				"set",
+				"id",
+				props.id
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"className",
+				cx(props.className)
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			[
+				"set",
+				"orientation",
+				props.horizontal ? "horizontal" : "vertical"
+			]
+		]),
+		props.horizontal ? "row" : "column",
+		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });
-var MemoTabs = memo(TabsInner, (a, b) => a.tabs === b.tabs && a.selectedIndex === b.selectedIndex);
-var Tabs = defineUniversalComponent("nativescript", markWarm(function Tabs(props) {
-	useBatch([], () => {
-		warmChild(MemoTabs, {
-			id: props.id,
-			className: props.className,
-			style: props.style,
-			tabs: props.tabs,
-			selectedIndex: props.selectedIndex,
-			onSelectedIndexChanged: props.onSelectedIndexChanged
-		});
-	});
-	return universalValue(__octaneUniversalPlan2, [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
-		]
-	]))]);
-}, (__wp) => {
-	const props = __wp;
-	warmChild(MemoTabs, {
-		id: props.id,
-		className: props.className,
-		style: props.style,
-		tabs: props.tabs,
-		selectedIndex: props.selectedIndex,
-		onSelectedIndexChanged: props.onSelectedIndexChanged
-	});
-}), { "module": "@nativescript-community/octane" });
 //#endregion
-export { Tabs };
+export { ScrollView };

package/dist/native/ui17.js

@@ -1,24 +1,47 @@
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Switch.native.tsrx
+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/Image.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "switch",
-	"bindings": [
-		["id", 0],
-		["className", 1],
-		["style", 2],
-		["checked", 3],
-		["onCheckedChange", 4]
-	]
+	"type": "image",
+	"propsSlot": 0
 });
-var Switch = defineUniversalComponent("nativescript", function Switch(props) {
-	return universalValue(__octaneUniversalPlan0, [
-		props.id,
-		props.className,
-		props.style,
-		props.checked,
-		(e) => props.onCheckedChange?.(e.value)
-	]);
+var Image = defineUniversalComponent("nativescript", function Image(props) {
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"ref",
+			(v) => applyEscapeProps(v, props)
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		["spread", layoutChildProps(props)],
+		[
+			"set",
+			"className",
+			cx(props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"src",
+			props.src
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			props.alt
+		]
+	])]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Switch };
+export { Image };

package/dist/native/ui18.js

@@ -1,13 +1,54 @@
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/PlatformBadge.native.tsrx
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { Frame, GridLayout } from "@nativescript/core";
+//#region src/Modal.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": "label",
-	"props": { "text": "ios|android" },
-	"bindings": [["className", 0]]
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
 });
-var PlatformBadge = defineUniversalComponent("nativescript", function PlatformBadge(props) {
-	return universalValue(__octaneUniversalPlan0, [props.className]);
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": []
+});
+var Panel = defineUniversalComponent("nativescript", function Panel(props) {
+	return universalValue(__octaneUniversalPlan0, [props.children]);
+}, { "module": "@nativescript-community/octane" });
+var Modal = defineUniversalComponent("nativescript", function Modal(props) {
+	const shown = useRef(null, _h$0);
+	useEffect(() => {
+		if (props.open && !shown.current) {
+			const presenter = Frame.topmost()?.currentPage ?? Frame.topmost();
+			if (!presenter) return;
+			const host = new GridLayout();
+			const root = createNativeScriptRoot(host);
+			shown.current = {
+				host,
+				root
+			};
+			if (props.component) root.render(props.component, props.params ?? {});
+			else root.render(Panel, { children: props.children });
+			const fullscreen = props.presentation ? props.presentation === "fullscreen" : props.fullscreen ?? true;
+			presenter.showModal(host, {
+				context: {},
+				closeCallback: (result) => {
+					shown.current = null;
+					props.onClose?.(result);
+				},
+				fullscreen,
+				animated: true
+			});
+		} else if (!props.open && shown.current) {
+			const { host } = shown.current;
+			shown.current = null;
+			host.closeModal();
+		}
+	}, [props.open], _h$1);
+	return universalValue(__octaneUniversalPlan1, []);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { PlatformBadge };
+export { Modal };

package/dist/native/ui19.js

@@ -1,13 +1,35 @@
-//#region src/route.native.ts
-function routeFor(_stack) {
-	return null;
-}
-function currentRoute() {
-	return null;
-}
-function useRoute(_stack) {
-	return null;
-}
-function pushRoute(_r) {}
+import { createNativeScriptRoot } from "@nativescript-community/octane";
+import { Frame, GridLayout } from "@nativescript/core";
+//#region src/modal-service.native.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();
+	if (!presenter) {
+		reject(/* @__PURE__ */ new Error("Cannot open modal before a NativeScript page is active"));
+		return;
+	}
+	const host = new GridLayout();
+	const root = createNativeScriptRoot(host);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		root.unmount?.();
+		host.removeChildren?.();
+		resolve(result);
+	};
+	const close = (result) => host.closeModal(result);
+	root.render(Component, {
+		params,
+		close
+	});
+	const fullscreen = options.presentation ? options.presentation === "fullscreen" : options.fullscreen ?? true;
+	presenter.showModal(host, {
+		context: {},
+		closeCallback: finish,
+		fullscreen,
+		animated: options.animated ?? true
+	});
+});
 //#endregion
-export { currentRoute, pushRoute, routeFor, useRoute };
+export { openModal };

package/dist/native/ui2.js

@@ -1,49 +1,11 @@
-import { defineUniversalComponent, hookSlots, universalPlan, 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",
-	"props": { "flexDirection": "column" },
-	"bindings": [
-		["id", 0],
-		["ref", 1],
-		["className", 2],
-		["style", 3],
-		["onPan", 4],
-		["onSwipe", 5]
-	],
-	"children": [{
-		"kind": "slot",
-		"slot": 6
-	}]
-});
-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, [
-		props.id,
-		props.bind,
-		props.className,
-		props.style,
-		props.onPan ? onPan : void 0,
-		props.onSwipe,
-		props.children
-	]);
-}, { "module": "@nativescript-community/octane" });
+//#region src/cx.ts
+/** NS `className` splits on ' ' only, and the universal driver applies the
+*  prop via `String(value)` — an array would arrive comma-joined and match
+*  no class at all. Native leaves normalize through cx() before handing
+*  className to an intrinsic. (The DOM renderer already flattens arrays,
+*  so web leaves don't need this.) */
+function cx(...parts) {
+	return parts.flat(Infinity).filter(Boolean).join(" ");
+}
 //#endregion
-export { View };
+export { cx };

package/dist/native/ui20.js

@@ -0,0 +1,17 @@
+import { hookSlots, useSyncExternalStore } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
+//#region src/theme/colorScheme.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function getColorScheme() {
+	return Application.primaryWindow?.systemAppearance?.() ?? Application.systemAppearance?.() ?? "light";
+}
+function subscribe(cb) {
+	const h = () => cb();
+	Application.on("systemAppearanceChanged", h);
+	return () => Application.off("systemAppearanceChanged", h);
+}
+function useColorScheme() {
+	return useSyncExternalStore(subscribe, getColorScheme, _h$0);
+}
+//#endregion
+export { getColorScheme, useColorScheme };