@octane-xplat/ui 0.3.0 → 0.4.0

package/dist/native/ui21.js

@@ -1,93 +1,383 @@
-import { cx } from "./ui2.js";
-import { getColorScheme } from "./ui20.js";
-import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
-import { GridLayout, getRootLayout, isAndroid, isIOS } from "@nativescript/core";
-//#region src/Overlay.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(3);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": []
+import { getStack, onStackRegistered, stackEntries } from "./ui18.js";
+import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./ui19.js";
+import { RouteHost } from "./ui20.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 = [];
+var routeLayouts = {};
+var routeLoaders = {};
+/** 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);
+	routeLayouts = manifest.layouts ?? {};
+	routeLoaders = manifest.loaders ?? {};
+}
+function layoutsForRoute(name) {
+	return layoutChain(routeLayouts, name);
+}
+function screenFor(name) {
+	return screens[name];
+}
+/** Wrap a screen in its directory `_layout` chain (outermost →
+*  innermost) as a single root component — pushed Pages and modal roots
+*  render this, matching web's outlet wrapping. */
+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();
 });
-var OverlayBody = defineUniversalComponent("nativescript", function OverlayBody(props) {
-	return universalValue(__octaneUniversalPlan0, [props.children]);
-}, { "module": "@nativescript-community/octane" });
-var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
-	const shown = useRef(null, _h$0);
-	const dismiss = useRef(props.onDismiss, _h$1);
-	dismiss.current = props.onDismiss;
-	useEffect(() => {
-		const current = shown.current;
-		if (!props.open) {
-			if (!current) return;
-			current.dismissOnClose = false;
-			shown.current = null;
-			const rootLayout = getRootLayout();
-			if (rootLayout?.hasChild?.(current.host)) rootLayout.close(current.host).then(() => current.root.unmount?.(), (error) => {
-				console.error("[Overlay] close failed", error);
-				current.root.unmount?.();
-			});
-			else current.root.unmount?.();
-			return;
-		}
-		if (current) {
-			current.root.render(OverlayBody, { children: props.children });
-			current.host.className = cx("vx-overlay-host", getColorScheme() === "dark" && "ns-dark", props.className);
-			if (props.style) Object.assign(current.host.style, props.style);
-			Object.assign(current.host, isIOS ? props.ios : isAndroid ? props.android : void 0);
+var modalHosts = [];
+var swapTabRoutes = /* @__PURE__ */ new Map();
+var swapTabOrder = [];
+function presentationFor(name) {
+	return routes.find((m) => m.name === name)?.presentation;
+}
+function metaFor(name) {
+	return routes.find((meta) => meta.name === name);
+}
+function headFor(r) {
+	const head = metaFor(r.name)?.head;
+	return typeof head === "function" ? head(r.params) : head;
+}
+function contextFor(r) {
+	return r.context ?? {};
+}
+async function prepareRoute(r, redirects = 0) {
+	const beforeLoad = metaFor(r.name)?.beforeLoad;
+	if (!beforeLoad) {
+		commitRoute(r);
+		return;
+	}
+	if (redirects > 16) {
+		console.warn(`[octane-xplat] beforeLoad redirect loop for '${r.name}'`);
+		return;
+	}
+	try {
+		const returned = await beforeLoad({
+			params: r.params,
+			context: contextFor(r)
+		});
+		const context = returned ? {
+			...contextFor(r),
+			...returned
+		} : contextFor(r);
+		commitRoute({
+			...r,
+			context
+		});
+	} catch (e) {
+		if (e instanceof RouteRedirect) {
+			await prepareRoute(e.route, redirects + 1);
 			return;
 		}
-		const rootLayout = getRootLayout();
-		if (!rootLayout) return;
-		const host = new GridLayout();
-		host.className = cx("vx-overlay-host", getColorScheme() === "dark" && "ns-dark", props.className);
-		host.horizontalAlignment = "stretch";
-		host.verticalAlignment = "stretch";
-		if (props.style) Object.assign(host.style, props.style);
-		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
-		const root = createNativeScriptRoot(host);
-		const opened = {
-			host,
-			root,
-			dismissOnClose: true
+		console.warn(`[octane-xplat] beforeLoad('${r.name}') rejected: ${e?.message ?? e}`);
+	}
+}
+function redirect(r) {
+	throw new RouteRedirect(r);
+}
+function pushRoute(r) {
+	if (metaFor(r.name)?.beforeLoad) {
+		prepareRoute(r);
+		return;
+	}
+	commitRoute(r);
+}
+function commitRoute(r) {
+	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;
+	}
+	const presentation = r.presentation ?? presentationFor(r.name);
+	const loader = routeLoaders[r.name];
+	if (loader && !Object.prototype.hasOwnProperty.call(r, "loaderData") && !Object.prototype.hasOwnProperty.call(r, "loaderError")) {
+		Promise.resolve().then(() => loader(r.params)).then((loaderData) => commitRoute({
+			...r,
+			loaderData
+		}), (loaderError) => commitRoute({
+			...r,
+			loaderError
+		}));
+		return;
+	}
+	if (presentation === "modal") {
+		const presenter = resolveStack(r.stack) ?? resolveStack("root");
+		if (presenter) pushModal(presenter, {
+			...r,
+			presentation
+		}, C);
+		else warnOnce("modal:" + r.name, `modal route '${r.name}' dropped — no loaded presenter Frame.`);
+		return;
+	}
+	if (Application.android && r.stack !== "root") {
+		const entries = swapTabRoutes.get(r.stack) ?? [];
+		entries.push({
+			...r,
+			presentation
+		});
+		swapTabRoutes.set(r.stack, entries);
+		const at = swapTabOrder.indexOf(r.stack);
+		if (at !== -1) swapTabOrder.splice(at, 1);
+		swapTabOrder.push(r.stack);
+		const title = headFor(r)?.title;
+		const page = resolveStack(r.stack)?.currentPage;
+		if (title !== void 0 && page) page.actionBar.title = title;
+		emit();
+		return;
+	}
+	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).`);
+		return;
+	}
+	if (!frame.isLoaded) frame.callLoaded?.();
+	const props = {
+		...r.params,
+		...contextFor(r),
+		...r.stack === "root" ? {} : { _stack: r.stack },
+		_pushed: true
+	};
+	if (Object.prototype.hasOwnProperty.call(r, "loaderData")) props.data = r.loaderData;
+	if (Object.prototype.hasOwnProperty.call(r, "loaderError")) props.error = r.loaderError;
+	try {
+		frame.navigate({
+			create: () => {
+				const page = new Page();
+				page.id = r.name + "-page";
+				page.actionBarHidden = true;
+				const head = headFor(r);
+				if (head?.title !== void 0) page.actionBar.title = head.title;
+				pageRoutes.set(page, r);
+				const host = new GridLayout();
+				page.content = host;
+				createNativeScriptRoot(host).render(RouteHost, {
+					screen: C,
+					layouts: layoutsForRoute(r.name),
+					params: props
+				});
+				return page;
+			},
+			transition: presentation === "fade" ? { name: "fade" } : void 0
+		});
+	} catch (e) {
+		console.warn("[octane-xplat] pushRoute(" + r.name + ") threw: " + e?.message);
+	}
+}
+/** A modal route is its own Octane root on a `showModal` host — the same
+*  shape as openModal in modal-service, but tracked as a Route so
+*  popRoute/currentModalRoute stay honest. The screen receives `close`
+*  alongside its params and calls it (or popRoute) to dismiss. */
+function pushModal(frame, r, C) {
+	const host = new GridLayout();
+	const root = createNativeScriptRoot(host);
+	const entry = {
+		host,
+		route: r,
+		dismiss: () => {}
+	};
+	entry.dismiss = () => {
+		const i = modalHosts.indexOf(entry);
+		if (i === -1) return;
+		modalHosts.splice(i, 1);
+		emit();
+	};
+	const presenter = frame.currentPage ?? frame;
+	try {
+		modalHosts.push(entry);
+		const params = {
+			...r.params,
+			...contextFor(r),
+			_pushed: true,
+			close: () => host.closeModal?.()
 		};
-		shown.current = opened;
-		root.render(OverlayBody, { children: props.children });
-		host.on("closed", () => {
-			if (shown.current === opened) shown.current = null;
-			root.unmount?.();
-			if (opened.dismissOnClose) dismiss.current?.();
+		if (Object.prototype.hasOwnProperty.call(r, "loaderData")) params.data = r.loaderData;
+		if (Object.prototype.hasOwnProperty.call(r, "loaderError")) params.error = r.loaderError;
+		root.render(RouteHost, {
+			screen: C,
+			layouts: layoutsForRoute(r.name),
+			params
 		});
-		const open = () => rootLayout.open(host, props.shadeCover ? { shadeCover: {
-			opacity: .45,
-			color: "#000000",
-			tapToClose: true
-		} } : {}).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			console.error("[Overlay] open failed", error);
-			root.unmount?.();
+		presenter.showModal(host, {
+			context: {},
+			closeCallback: entry.dismiss,
+			fullscreen: true,
+			animated: true
 		});
-		if (rootLayout.hasChild?.(host)) rootLayout.close(host).then(open, (error) => console.error("[Overlay] stale host close failed", error));
-		else open();
-	}, [
-		props.open,
-		props.children,
-		props.shadeCover,
-		props.className,
-		props.style,
-		props.ios,
-		props.android
-	], _h$2);
-	return universalValue(__octaneUniversalPlan1, []);
-}, { "module": "@nativescript-community/octane" });
+		emit();
+	} catch (e) {
+		entry.dismiss();
+		root.unmount?.();
+		console.warn("[octane-xplat] modal pushRoute(" + r.name + ") threw: " + e?.message);
+	}
+}
+/** Pop the top page of a stack ('root' default) — or dismiss the top
+*  modal if one is open. 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 modal = modalHosts[modalHosts.length - 1];
+	if (modal) {
+		modal.dismiss();
+		modal.host.closeModal?.();
+		return;
+	}
+	if (Application.android && stack !== "root") {
+		const entries = swapTabRoutes.get(stack);
+		if (entries?.length) {
+			entries.pop();
+			if (!entries.length) {
+				swapTabRoutes.delete(stack);
+				const at = swapTabOrder.indexOf(stack);
+				if (at !== -1) swapTabOrder.splice(at, 1);
+			}
+			emit();
+		}
+		return;
+	}
+	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) {
+	if (Application.android && stack !== "root") {
+		const entries = swapTabRoutes.get(stack);
+		if (entries?.length) return entries[entries.length - 1];
+	}
+	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;
+	for (const name of [...swapTabOrder].reverse()) {
+		const route = routeFor(name);
+		if (route) return route;
+	}
+	const named = [...stackEntries()].reverse();
+	for (const [name] of named) {
+		const r = routeFor(name);
+		if (r) return r;
+	}
+	return null;
+}
+/** Named stacks containing routes, including Android's swap-pane stacks. */
+function routeStacks() {
+	return Application.android ? [.../* @__PURE__ */ new Set([...swapTabOrder, ...[...stackEntries()].map(([name]) => name)])] : [...stackEntries()].map(([name]) => name);
+}
+/** The modal route currently open, if any — parity with the web leaf. */
+function currentModalRoute() {
+	return modalHosts[modalHosts.length - 1]?.route ?? null;
+}
+/** Deep-link entry: normalize a URL (http(s) or app-scheme) to a path,
+*  match it against the manifest, push the route. Wire it at boot:
+*  `onDeepLink(pushDeepLink)` plus one `consumeInitialUrl()` call. */
+function pushDeepLink(url) {
+	const r = matchUrl(routes, linkPath(url));
+	if (!r) {
+		warnOnce("link:" + url, `pushDeepLink('${url}') dropped — no route matches.`);
+		return false;
+	}
+	pushRoute(r);
+	return true;
+}
+/** 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);
+}
+/** Whether the selected native stack has a page (or route-owned Android swap
+* entry) that can be popped. The modal root is also a back affordance. */
+function canGoBack(stack = "root") {
+	if (modalHosts[modalHosts.length - 1]?.route.stack === stack) return true;
+	if (Application.android && stack !== "root") return !!swapTabRoutes.get(stack)?.length;
+	return !!resolveStack(stack)?.canGoBack?.();
+}
+function useCanGoBack(stack = "root") {
+	return useSyncExternalStore$1((cb) => {
+		listeners.add(cb);
+		return () => listeners.delete(cb);
+	}, () => canGoBack(stack), _h$1);
+}
+/** The modal route overlaying the shell — parity with the web leaf. */
+function useModalRoute() {
+	return useSyncExternalStore$1((cb) => {
+		listeners.add(cb);
+		return () => listeners.delete(cb);
+	}, () => currentModalRoute(), _h$2);
+}
+var _hs$ = /* @__PURE__ */ hookSlots$1(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 //#endregion
-export { Overlay };
+export { canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsForRoute, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };

package/dist/native/ui22.js

@@ -1,124 +1,36 @@
 import { cx } from "./ui2.js";
-import { getColorScheme } from "./ui20.js";
-import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
-import { GridLayout, getRootLayout, isAndroid, isIOS } from "@nativescript/core";
-//#region src/Popover.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+import { Pressable } from "./ui16.js";
+import { pushRoute, useRoute } from "./ui21.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, withSlot } from "@nativescript-community/octane";
+//#region src/NavLink.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "absolutelayout",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
 	"children": [{
-		"kind": "host",
-		"type": "gridlayout",
-		"bindings": [
-			["left", 0],
-			["top", 1],
-			["className", 2],
-			["style", 3]
-		],
-		"children": [{
-			"kind": "slot",
-			"slot": 4
-		}]
+		"kind": "slot",
+		"slot": 0
 	}]
 });
 var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": []
+	"kind": "slot",
+	"slot": 0
 });
-var PopoverBody = defineUniversalComponent("nativescript", function PopoverBody(props) {
-	return universalValue(__octaneUniversalPlan0, [
-		props.left,
-		props.top,
-		cx("vx-popover", props.className),
-		props.style,
-		props.children
-	]);
-}, { "module": "@nativescript-community/octane" });
-var Popover = defineUniversalComponent("nativescript", function Popover(props) {
-	const shown = useRef(null, _h$0);
-	const anchorRef = props.anchor?.current ?? props.anchor;
-	useEffect(() => {
-		const current = shown.current;
-		if (!props.open) {
-			if (!current) return;
-			shown.current = null;
-			const rootLayout = getRootLayout();
-			if (rootLayout?.hasChild?.(current.host)) rootLayout.close(current.host).then(() => current.root.unmount?.(), (error) => {
-				console.error("[Popover] close failed", error);
-				current.root.unmount?.();
-			});
-			else current.root.unmount?.();
-			return;
-		}
-		const rootLayout = getRootLayout();
-		if (!rootLayout || !anchorRef?.getLocationRelativeTo || !anchorRef?.getActualSize) return;
-		const anchorPoint = anchorRef.getLocationRelativeTo(rootLayout);
-		const size = anchorRef.getActualSize();
-		const gap = 8;
-		let left = anchorPoint.x;
-		let top = anchorPoint.y + size.height + gap;
-		if (props.placement === "top") top = anchorPoint.y - 56;
-		if (props.placement === "left") {
-			left = anchorPoint.x - 168;
-			top = anchorPoint.y;
-		}
-		if (props.placement === "right") {
-			left = anchorPoint.x + size.width + gap;
-			top = anchorPoint.y;
-		}
-		if (current) {
-			current.left = left;
-			current.top = top;
-			current.root.render(PopoverBody, {
-				children: props.children,
-				left,
-				top,
-				className: props.className,
-				style: props.style
-			});
-			return;
-		}
-		const host = new GridLayout();
-		host.className = cx("vx-popover-host", getColorScheme() === "dark" && "ns-dark");
-		host.horizontalAlignment = "stretch";
-		host.verticalAlignment = "stretch";
-		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
-		const root = createNativeScriptRoot(host);
-		const opened = {
-			host,
-			root,
-			left,
-			top
-		};
-		shown.current = opened;
-		root.render(PopoverBody, {
-			children: props.children,
-			left,
-			top,
-			className: props.className,
-			style: props.style
-		});
-		const open = () => rootLayout.open(host).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			console.error("[Popover] open failed", error);
-			root.unmount?.();
-		});
-		if (rootLayout.hasChild?.(host)) rootLayout.close(host).then(open, (error) => console.error("[Popover] stale host close failed", error));
-		else open();
-	}, [
-		props.open,
-		props.anchor,
-		props.placement,
-		props.children,
-		props.className,
-		props.style,
-		props.ios,
-		props.android
-	], _h$1);
-	return universalValue(__octaneUniversalPlan1, []);
+var NavLink = defineUniversalComponent("nativescript", function NavLink(props) {
+	const current = withSlot(_h$0, useRoute, props.route.stack);
+	const active = !!current && current.name === props.route.name && Object.keys(current.params).length === Object.keys(props.route.params).length && Object.entries(props.route.params).every(([key, value]) => String(current.params[key]) === String(value));
+	return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Pressable, universalProps([[
+		"set",
+		"className",
+		cx(props.className, active ? props.activeClassName : void 0)
+	], [
+		"set",
+		"onPress",
+		() => pushRoute(props.route)
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan0, [props.children]);
+	})))]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Popover };
+export { NavLink };