@octane-xplat/ui 0.3.0 → 0.5.0

package/dist/native/ui42.js

@@ -1,148 +1,17 @@
-import { getStack, onStackRegistered, stackEntries } from "./ui27.js";
-import { buildRoutePath } from "./ui41.js";
-import { createNativeScriptRoot } from "@nativescript-community/octane";
-import { Application, GridLayout, Page } from "@nativescript/core";
-import { hookSlots as hookSlots$1, useSyncExternalStore as useSyncExternalStore$1 } from "octane";
-//#region src/route.native.ts
-/** Native twin of route.web — same Route contract over Frame/Page stacks.
-*  `pushRoute` resolves a stack ('root' = the app's root Frame — an
-*  explicit registerStack('root') or, by default, the Frame returned by
-*  Application.getRootView(); named stacks come from TabSpec.stack panes
-*  or registerStack) and pushes a Page hosting the registered screen —
-*  each pushed Page is its own Octane root (decision #9: pages never
-*  share context with their presenter). Params land as props; named-stack
-*  pushes get `_stack` injected so the screen can popRoute its own stack.
-*
-*  Registration contract (the footgun this module exists to defuse):
-*  - `registerScreens(table)` once — pushRoute resolves `name` through it.
-*  - 'root' needs nothing when the app boots a Frame as its root view
-*    (the standard shape); non-Frame roots can't host pushes at all.
-*  - named stacks register via `TabSpec.stack` or `registerStack`.
-*  Every drop path warns loudly — silent no-ops are how apps ship a
-*  default route on native while working fine on web. */
-var screens = {};
-var routes = [];
-/** Register the app's name → screen table (call once, from the shared
-*  routes module). Native `pushRoute` resolves `route.name` through it;
-*  on web the table feeds `screenFor` for outlets without a
-*  `resolveScreen` prop. `manifest` (from deriveRouteManifest) is stored
-*  for parity — the web leaf matches URLs through it; native navigation
-*  is name+params and only needs the table. */
-function registerScreens(table, manifest) {
-	screens = table;
-	routes = manifest ?? [];
-}
-/** One-call registration for route-dir apps — screens + URL patterns +
-*  layouts all come from deriveRouteManifest. */
-function registerRoutes(manifest) {
-	registerScreens(manifest.screens, manifest.routes);
-}
-function screenFor(name) {
-	return screens[name];
-}
-var tracked = /* @__PURE__ */ new WeakSet();
-var listeners = /* @__PURE__ */ new Set();
-var pageRoutes = /* @__PURE__ */ new WeakMap();
-var warned = /* @__PURE__ */ new Set();
-function emit() {
-	listeners.forEach((l) => l());
-}
-function warnOnce(key, msg) {
-	if (warned.has(key)) return;
-	warned.add(key);
-	console.warn("[octane-xplat] " + msg);
-}
-/** Attach the route-store emission hook once per frame. `navigatedTo`
-*  fires on push AND on pop (the revealed page re-fires it), so one
-*  listener keeps every useRoute snapshot honest. */
-function trackFrame(frame) {
-	if (tracked.has(frame)) return;
-	tracked.add(frame);
-	frame.on("navigatedTo", emit);
-}
-function resolveStack(stack) {
-	const frame = getStack(stack);
-	if (frame) trackFrame(frame);
-	return frame;
-}
-onStackRegistered((_name, frame) => {
-	trackFrame(frame);
-	emit();
-});
-function pushRoute(r) {
-	const frame = resolveStack(r.stack);
-	if (!frame) {
-		warnOnce("stack:" + r.stack, r.stack === "root" ? `pushRoute('${r.name}') dropped — no root Frame. Boot with a Frame as the app root (Application.run create() returning new Frame) or call registerStack('root', frame).` : `pushRoute('${r.name}') dropped — no stack '${r.stack}' is registered. Named stacks come from TabSpec.stack on <Tabs> or registerStack('${r.stack}', frame).`);
+import { getThemeScheme, onThemeSchemeChange } from "./ui31.js";
+import { Application, Utils } from "@nativescript/core";
+//#region src/theme/status-bar-scheme.native.ts
+function applyStatusBarScheme() {
+	if (Application.android) {
+		Utils.setDarkModeHandler?.({ handler: () => getThemeScheme() === "dark" });
 		return;
 	}
-	const C = screenFor(r.name);
-	if (!C) {
-		warnOnce("screen:" + r.name, `pushRoute('${r.name}') dropped — '${r.name}' isn't in the screen table. Call registerScreens({ ${r.name}: ... }) at boot.`);
-		return;
-	}
-	if (Application.android && r.stack !== "root") warnOnce("android:" + r.stack, `pushRoute into named stack '${r.stack}' on Android — upstream #11444: the page mounts but currentPage/backStack/goBack never land (pages accumulate). Named-stack pushes are iOS-only until fixed.`);
-	if (!frame.isLoaded) frame.callLoaded?.();
-	const props = r.stack === "root" ? r.params : {
-		...r.params,
-		_stack: r.stack
-	};
-	try {
-		frame.navigate({ create: () => {
-			const page = new Page();
-			page.id = r.name + "-page";
-			page.actionBarHidden = true;
-			pageRoutes.set(page, r);
-			const host = new GridLayout();
-			page.content = host;
-			createNativeScriptRoot(host).render(C, props);
-			return page;
-		} });
-	} catch (e) {
-		console.warn("[octane-xplat] pushRoute(" + r.name + ") threw: " + e?.message);
-	}
-}
-/** Pop the top page of a stack ('root' default). Quiet no-op at the base
-*  page — matching web, where back at the app root is a no-op; loud only
-*  when the stack itself doesn't exist. */
-function popRoute(stack = "root") {
-	const frame = resolveStack(stack);
-	if (!frame) {
-		warnOnce("pop:" + stack, `popRoute('${stack}') dropped — no such stack is registered.`);
-		return;
-	}
-	frame.goBack();
-}
-/** Route stamped on a stack's current page, or null at its base page. */
-function routeFor(stack) {
-	const page = resolveStack(stack)?.currentPage;
-	return (page && pageRoutes.get(page)) ?? null;
-}
-/** The top route across stacks — root's current route wins (a root push
-*  covers the shell); otherwise the most recently registered named stack
-*  showing a pushed page. Native has no boot URL, so this is an
-*  approximation of web's "current URL route", not a deep link. */
-function currentRoute() {
-	const root = routeFor("root");
-	if (root) return root;
-	const named = [...stackEntries()].reverse();
-	for (const [name] of named) {
-		const r = routeFor(name);
-		if (r) return r;
-	}
-	return null;
-}
-/** Path-string parity for the web leaf's hrefFor — a canonical
-*  /<stack>/<path> rendering of the route (deep-linking consumes it
-*  there). Native navigation itself is name+params, not URLs. */
-function hrefFor(r) {
-	return buildRoutePath(routes, r);
-}
-function useRoute(stack) {
-	return useSyncExternalStore$1((cb) => {
-		listeners.add(cb);
-		return () => listeners.delete(cb);
-	}, () => routeFor(stack), _h$0);
-}
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots$1(1));
+	const style = getThemeScheme() === "dark" ? "light" : "dark";
+	const root = Application.getRootView();
+	if (root) root.statusBarStyle = style;
+	if (Application.ios) Application.ios.nativeApp?.setStatusBarStyle?.(style === "light" ? 1 : 0);
+}
+onThemeSchemeChange(applyStatusBarScheme);
+Application.on("displayed", applyStatusBarScheme);
+applyStatusBarScheme();
 //#endregion
-export { currentRoute, hrefFor, popRoute, pushRoute, registerRoutes, registerScreens, routeFor, screenFor, useRoute };

package/dist/native/ui43.js

@@ -1,22 +1,19 @@
-//#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);
-			};
+import "@nativescript-community/octane";
+import { defineUniversalComponent as defineUniversalComponent$1, universalComponent as universalComponent$1 } from "octane/universal/native";
+//#region src/styled.native.tsrx
+function styled(Base, def) {
+	function Styled(props) {
+		const cls = [def.base];
+		const rest = { ...props };
+		for (const k of Object.keys(def.variants ?? {})) {
+			if (props[k]) cls.push(def.variants[k]);
+			delete rest[k];
 		}
-	};
+		if (props.className) cls.push(props.className);
+		rest.className = cls;
+		return universalComponent$1("nativescript", Base, rest);
+	}
+	return defineUniversalComponent$1("nativescript", Styled);
 }
 //#endregion
-export { createStore };
+export { styled };

package/dist/native/ui44.js

@@ -1,8 +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);
+import { Application } from "@nativescript/core";
+//#region src/windows.native.ts
+/** Open another NativeScript window and pass app-owned data to its resolver. */
+function openWindow(options = {}) {
+	Application.openWindow(options);
 }
 //#endregion
-export { useStore };
+export { openWindow };

package/dist/native/ui45.js

@@ -0,0 +1,38 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { registerRootLayout, unregisterRootLayout } from "./ui34.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Screen.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "rootlayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["onLoaded", 2],
+		["onUnloaded", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [["className", 4], ["style", 5]],
+		"children": [{
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+var Screen = defineUniversalComponent("nativescript", function Screen(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		(v) => applyEscapeProps(v, props),
+		(e) => registerRootLayout(e.object),
+		(e) => unregisterRootLayout(e.object),
+		cx(props.className),
+		props.style,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Screen };

package/dist/native/ui46.js

@@ -0,0 +1,267 @@
+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 { Tabs };

package/dist/native/ui47.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/ui48.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/ui49.js

@@ -0,0 +1,41 @@
+import { cx } from "./ui2.js";
+import { useSafeAreaInsets } from "./ui48.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 };