@octane-xplat/ui 0.2.0 → 0.3.0

package/dist/native/ui21.js

@@ -0,0 +1,93 @@
+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": []
+});
+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);
+			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
+		};
+		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?.();
+		});
+		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?.();
+		});
+		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" });
+//#endregion
+export { Overlay };

package/dist/native/ui22.js

@@ -0,0 +1,124 @@
+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);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "absolutelayout",
+	"children": [{
+		"kind": "host",
+		"type": "gridlayout",
+		"bindings": [
+			["left", 0],
+			["top", 1],
+			["className", 2],
+			["style", 3]
+		],
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": []
+});
+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, []);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Popover };

package/dist/native/ui23.js

@@ -0,0 +1,103 @@
+import { cx } from "./ui2.js";
+import { getColorScheme } from "./ui20.js";
+import { createNativeScriptRoot, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { GridLayout, getRootLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/toast.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var queue = [];
+var active = null;
+var ToastBody = defineUniversalComponent("nativescript", function ToastBody(props) {
+	return universalValue(__octaneUniversalPlan2, [universalIf(typeof props.content === "string", () => {
+		return universalValue(__octaneUniversalPlan0, [props.content]);
+	}, () => {
+		const Component = props.content;
+		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Component, universalProps([]))]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+function finishToast(entry) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const rootLayout = getRootLayout();
+	const finish = () => {
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+	if (rootLayout?.hasChild?.(entry.host)) rootLayout.close(entry.host).then(finish, (error) => {
+		console.error("[Toast] close failed", error);
+		finish();
+	});
+	else finish();
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift();
+	const rootLayout = getRootLayout();
+	if (!rootLayout) {
+		console.warn("[Toast] RootLayout is not mounted; toast was skipped");
+		return;
+	}
+	const host = new GridLayout();
+	host.className = cx("vx-toast-host", getColorScheme() === "dark" && "ns-dark");
+	host.horizontalAlignment = "stretch";
+	host.verticalAlignment = entry.options.position === "top" ? "top" : "bottom";
+	host.marginTop = entry.options.position === "top" ? 24 : 0;
+	host.marginBottom = entry.options.position === "top" ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : void 0);
+	const root = createNativeScriptRoot(host);
+	const current = {
+		...entry,
+		host,
+		root,
+		timer: null
+	};
+	active = current;
+	root.render(ToastBody, { content: entry.content });
+	const open = () => {
+		rootLayout.open(host).then(() => {
+			if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3e3));
+		}, (error) => {
+			console.error("[Toast] open failed", error);
+			root.unmount?.();
+			if (active === current) active = null;
+			showNext();
+		});
+	};
+	if (rootLayout.hasChild?.(host)) rootLayout.close(host).then(open, (error) => {
+		console.error("[Toast] stale host close failed", error);
+		if (active === current) active = null;
+		showNext();
+	});
+	else open();
+}
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
+}
+//#endregion
+export { showToast };

package/dist/native/ui24.js

@@ -0,0 +1,58 @@
+import { hookSlots, useRef } from "@nativescript-community/octane";
+import { cancelAnimationFrame, requestAnimationFrame } from "@nativescript/core/animation-frame";
+//#region src/anim.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function createAnimated(initial, prop) {
+	let view = null;
+	let current = initial;
+	let raf = 0;
+	const apply = (v) => {
+		current = v;
+		if (view) view[prop] = v;
+	};
+	const run = (step) => {
+		cancelAnimationFrame(raf);
+		const start = Date.now();
+		const tick = () => {
+			const v = step(Date.now() - start);
+			if (v === null) return;
+			apply(v);
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+	};
+	return {
+		get value() {
+			return current;
+		},
+		bind(v) {
+			view = v;
+			if (view) view[prop] = current;
+		},
+		to(target, opts) {
+			const dur = opts?.duration ?? 300;
+			const from = current;
+			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
+		},
+		spring(target, opts) {
+			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
+			let v = 0, x = current;
+			run(() => {
+				const dt = 1 / 60;
+				v += (-stiffness * (x - target) - damping * v) * dt;
+				x += v * dt;
+				return Math.abs(v) < .5 && Math.abs(x - target) < .5 ? (apply(target), null) : x;
+			});
+		},
+		stop() {
+			cancelAnimationFrame(raf);
+		}
+	};
+}
+function useAnimation(initial = 0, prop = "translateX") {
+	const c = useRef(null, _h$0);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
+}
+//#endregion
+export { useAnimation };

package/dist/native/ui25.js

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

package/dist/native/ui26.js

@@ -0,0 +1,27 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Screen.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "rootlayout",
+	"bindings": [
+		["ref", 0],
+		["className", 1],
+		["style", 2]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 3
+	}]
+});
+var Screen = defineUniversalComponent("nativescript", function Screen(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		cx(props.className),
+		props.style,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Screen };

package/dist/native/ui27.js

@@ -0,0 +1,35 @@
+import { Application, Frame } from "@nativescript/core";
+//#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; `pushRoute` resolves the
+*  target by name. Native-only concept — on web, parallel stacks map to
+*  nested routes (one linear URL stack). 'root' needs no registration:
+*  unregistered, it resolves to the app's root view when that's a
+*  Frame — the standard `Application.run({ create: () => frame })` boot
+*  shape. An explicit registerStack('root', frame) overrides it. */
+var stacks = /* @__PURE__ */ new Map();
+var regListeners = /* @__PURE__ */ new Set();
+function registerStack(name, frame) {
+	stacks.set(name, frame);
+	regListeners.forEach((l) => l(name, frame));
+}
+function getStack(name) {
+	const registered = stacks.get(name);
+	if (registered) return registered;
+	if (name === "root") {
+		const rv = Application.getRootView?.();
+		if (rv instanceof Frame) return rv;
+	}
+}
+/** All registered stacks in registration order — for hardware-back
+*  resolution (pop whichever stack is visibly on top). */
+function stackEntries() {
+	return stacks.entries();
+}
+/** Internal: route.native attaches frame listeners as stacks appear —
+*  named frames can register after a useRoute subscription ran. */
+function onStackRegistered(cb) {
+	regListeners.add(cb);
+}
+//#endregion
+export { getStack, onStackRegistered, registerStack, stackEntries };

package/dist/native/ui28.js

@@ -0,0 +1,146 @@
+import { cx } from "./ui2.js";
+import { registerStack } from "./ui27.js";
+import { createNativeScriptRoot, defineUniversalComponent, markWarm, memo, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+import { Frame, GridLayout, Page, TabViewItem } from "@nativescript/core";
+//#region src/Tabs.native.tsrx
+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 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);
+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 };

package/dist/native/ui29.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/ui3.js

@@ -1,21 +1,18 @@
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Row.native.tsrx
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "flexboxlayout",
-	"props": { "flexDirection": "row" },
-	"bindings": [["className", 0], ["style", 1]],
-	"children": [{
-		"kind": "slot",
-		"slot": 2
-	}]
-});
-var Row = defineUniversalComponent("nativescript", function Row(props) {
-	return universalValue(__octaneUniversalPlan0, [
-		props.className,
-		props.style,
-		props.children
-	]);
-}, { "module": "@nativescript-community/octane" });
+import { isAndroid, isIOS } from "@nativescript/core";
+//#region src/escape-props.native.ts
+/** Apply only the active device's escape bag after the primitive's own props. */
+function applyEscapeProps(view, props) {
+	if (!view) return;
+	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
+	if (bag) Object.assign(view, bag);
+}
+/** NativeScript's AccessibilityState is a single enum value, unlike the
+*  web's independent ARIA booleans. Priority follows the strongest state. */
+function nativeAccessibilityState(state) {
+	if (state?.disabled) return "disabled";
+	if (state?.selected) return "selected";
+	if (state?.checked === true) return "checked";
+	if (state?.checked === false) return "unchecked";
+}
 //#endregion
-export { Row };
+export { applyEscapeProps, nativeAccessibilityState };