@octane-xplat/ui 0.3.0 → 0.5.0

package/dist/native/ui39.js

@@ -1,33 +1,103 @@
-import { cx } from "./ui2.js";
-import { applyNativeProps } from "./ui34.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-import { AccessibilityRole } from "@nativescript/core";
-//#region src/Heading.native.tsrx
+import { View } from "./ui6.js";
+import { Pressable } from "./ui16.js";
+import { Popover } from "./ui38.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, useRef, useState } from "@nativescript-community/octane";
+//#region src/Hoverable.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",
-	"bindings": [
-		["id", 0],
-		["className", 1],
-		["style", 2],
-		["accessibilityRole", 3],
-		["ref", 4]
-	],
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "range",
 	"children": [{
 		"kind": "slot",
-		"slot": 5
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
 	}]
 });
-var Heading = defineUniversalComponent("nativescript", function Heading(props) {
-	const level = props.level ?? 2;
-	return universalValue(__octaneUniversalPlan0, [
-		props.id,
-		cx(`vx-h${level}`, props.className),
-		props.style,
-		AccessibilityRole.Header,
-		(el) => applyNativeProps(el, props),
-		props.children
-	]);
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Hoverable = defineUniversalComponent("nativescript", function Hoverable(props) {
+	const [open, setOpen] = useState(false, _h$0);
+	const anchor = useRef(null, _h$1);
+	return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", View, universalProps([
+		[
+			"set",
+			"className",
+			props.className
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"bind",
+			(view) => {
+				anchor.current = view;
+			}
+		],
+		[
+			"set",
+			"ios",
+			props.ios
+		],
+		[
+			"set",
+			"android",
+			props.android
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Pressable, universalProps([[
+			"set",
+			"onLongPress",
+			() => setOpen(true)
+		]], props.children)), universalComponent("nativescript", Popover, universalProps([
+			[
+				"set",
+				"open",
+				open
+			],
+			[
+				"set",
+				"anchor",
+				anchor
+			],
+			[
+				"set",
+				"placement",
+				props.placement ?? "bottom"
+			],
+			[
+				"set",
+				"dismissOnOutsideTap",
+				true
+			],
+			[
+				"set",
+				"onDismiss",
+				() => setOpen(false)
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([[
+				"set",
+				"className",
+				props.cardClassName
+			], [
+				"set",
+				"style",
+				props.cardStyle
+			]], props.card))]);
+		})))]);
+	})))]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Heading };
+export { Hoverable };

package/dist/native/ui4.js

@@ -1,22 +1,24 @@
-//#region src/layout-child.native.ts
-/** NativeScript reads these attributes from each child view during parent
-*  layout. Values are forwarded with NativeScript's own property names. */
-function layoutChildProps(props) {
-	const result = {};
-	for (const key of [
-		"row",
-		"col",
-		"rowSpan",
-		"colSpan",
-		"dock",
-		"left",
-		"top",
-		"flexGrow",
-		"flexShrink",
-		"alignSelf",
-		"order"
-	]) if (props[key] !== void 0) result[key] = props[key];
-	return result;
+//#region src/glass.ts
+/** Normalize the `glass` surface prop into the config object handed to
+*  `iosGlassEffect` on native. Always returns an object — the upstream
+*  string shorthand silently drops `interactive` on the layout's update
+*  path, and an empty config defaults the variant to 'regular' here rather
+*  than upstream's own fallback. `false`/'none'/'identity' → no glass. */
+function glassConfigOf(glass) {
+	if (!glass || glass === "none" || glass === "identity") return;
+	const c = typeof glass === "string" ? { variant: glass } : glass === true ? {} : glass;
+	if (c.variant === "none" || c.variant === "identity") return;
+	return {
+		variant: "regular",
+		...c
+	};
+}
+/** `vx-glass` classes shared by web (real styling) and native (hook for
+*  app-supplied fallback CSS on non-glass OSes). */
+function glassClassOf(glass) {
+	const c = glassConfigOf(glass);
+	if (!c) return;
+	return c.variant === "clear" ? "vx-glass vx-glass--clear" : "vx-glass";
 }
 //#endregion
-export { layoutChildProps };
+export { glassClassOf, glassConfigOf };

package/dist/native/ui40.js

@@ -1,14 +1,185 @@
-import { cx } from "./ui2.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/PlatformBadge.native.tsrx
+import { applyThemeClasses } from "./ui31.js";
+import { topRootLayout } from "./ui34.js";
+import { Popover } from "./ui38.js";
+import { createNativeScriptRoot, defineUniversalComponent, universalChildren, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/toast-anchor.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "label",
-	"props": { "text": "ios|android" },
-	"bindings": [["className", 0]]
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
 });
-var PlatformBadge = defineUniversalComponent("nativescript", function PlatformBadge(props) {
-	return universalValue(__octaneUniversalPlan0, [cx(props.className)]);
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var queue = [];
+var active = null;
+function placementFor(position = "bottom") {
+	return position.startsWith("top") ? "top" : "bottom";
+}
+function horizontalFor(position = "bottom") {
+	if (position.endsWith("-start")) return "left";
+	if (position.endsWith("-end")) return "right";
+	return "center";
+}
+var ToastBody = defineUniversalComponent("nativescript", function ToastBody(props) {
+	return universalValue(__octaneUniversalPlan7, [universalIf(props.options.anchor, () => {
+		return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Popover, universalProps([
+			[
+				"set",
+				"open",
+				props.open
+			],
+			[
+				"set",
+				"anchor",
+				props.options.anchor
+			],
+			[
+				"set",
+				"placement",
+				props.options.placement ?? placementFor(props.options.position)
+			],
+			[
+				"set",
+				"dismissOnOutsideTap",
+				false
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan2, [universalIf(typeof props.content === "string", () => {
+				return universalValue(__octaneUniversalPlan0, [props.content]);
+			}, () => {
+				const Component = props.content;
+				return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Component, universalProps([]))]);
+			})]);
+		})))]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan6, [universalIf(typeof props.content === "string", () => {
+			return universalValue(__octaneUniversalPlan4, [props.content]);
+		}, () => {
+			const Component = props.content;
+			return universalValue(__octaneUniversalPlan5, [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 cleanup = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+	if (entry.options.anchor) {
+		entry.root.render(ToastBody, {
+			...entry,
+			open: false
+		});
+		setTimeout(cleanup, 0);
+		return;
+	}
+	const rootLayout = topRootLayout();
+	if (rootLayout && rootLayout.hasChild?.(entry.host)) rootLayout.close(entry.host).then(cleanup, (error) => {
+		console.error("[Toast] close failed", error);
+		cleanup();
+	});
+	else cleanup();
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift();
+	const anchored = Boolean(entry.options.anchor);
+	const rootLayout = topRootLayout();
+	if (!anchored && !rootLayout) {
+		console.warn("[Toast] RootLayout is not mounted; toast was skipped");
+		showNext();
+		return;
+	}
+	const host = new GridLayout();
+	const position = entry.options.position ?? "bottom";
+	const unbindTheme = applyThemeClasses(host, "vx-toast-host");
+	const root = createNativeScriptRoot(host);
+	const current = {
+		...entry,
+		host,
+		root,
+		timer: null,
+		unbindTheme
+	};
+	active = current;
+	root.render(ToastBody, {
+		...entry,
+		open: true
+	});
+	if (anchored) {
+		current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3e3));
+		return;
+	}
+	host.horizontalAlignment = horizontalFor(position);
+	host.verticalAlignment = placementFor(position) === "top" ? "top" : "bottom";
+	host.marginTop = placementFor(position) === "top" ? 24 : 0;
+	host.marginBottom = placementFor(position) === "top" ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : void 0);
+	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();
+	});
+}
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
+}
 //#endregion
-export { PlatformBadge };
+export { showToast };

package/dist/native/ui41.js

@@ -1,104 +1,58 @@
-//#region src/route-table.ts
-var EXT = /\.(tsrx|tsx|ts|mts|cts|js|mjs|cjs|jsx)$/;
-var SUFFIX = /\.(web|native|ios|android)$/;
-var PARAM = /^\[(.+)\]$/;
-/** Component pick rule for route/layout modules: default export, then a
-*  `screen` named export, then a single function export. Route files use
-*  named exports (decision #13) — a lone component is unambiguous. */
-function pick(mod, file) {
-	if (typeof mod?.default === "function") return mod.default;
-	if (typeof mod?.screen === "function") return mod.screen;
-	const fns = Object.keys(mod ?? {}).filter((k) => typeof mod[k] === "function");
-	if (fns.length === 1) return mod[fns[0]];
-	console.warn("[octane-xplat] route file " + file + (fns.length ? ` has ${fns.length} component-shaped exports (${fns.join(", ")}) — add a default or 'screen' export` : " has no component export") + " — skipped");
-}
-function deriveRouteManifest(files, prefer, dir = "app") {
-	const prefix = dir.replace(/^\.?\/?/, "").replace(/\/+$/, "") + "/";
-	const seen = /* @__PURE__ */ new Map();
-	const layoutRank = /* @__PURE__ */ new Map();
-	const layouts = {};
-	const warned = /* @__PURE__ */ new Set();
-	for (const key of Object.keys(files).sort()) {
-		let rel = key.replace(/^\.?\//, "");
-		if (rel.startsWith(prefix)) rel = rel.slice(prefix.length);
-		rel = rel.replace(EXT, "");
-		const parts = rel.split("/");
-		let base = parts[parts.length - 1];
-		const sm = SUFFIX.exec(base);
-		const suffix = sm?.[1];
-		if (sm) base = base.slice(0, base.length - sm[0].length);
-		if (suffix && !prefer.includes(suffix)) continue;
-		const rank = suffix ? prefer.indexOf(suffix) : prefer.length;
-		if (base === "_layout") {
-			const d = parts.slice(0, -1).join("/");
-			const prev = layoutRank.get(d);
-			if (prev !== void 0 && prev <= rank) continue;
-			const component = pick(files[key], key);
-			if (component) {
-				layouts[d] = component;
-				layoutRank.set(d, rank);
-			}
-			continue;
-		}
-		const segs = parts.slice(0, -1).concat(base);
-		if (segs[segs.length - 1] === "index") segs.pop();
-		const segments = segs.map((s) => {
-			const p = PARAM.exec(s);
-			return p ? ":" + p[1] : s;
-		});
-		const name = segments.join("/") || "index";
-		const meta = {
-			name,
-			segments,
-			params: segments.filter((s) => s.startsWith(":")).map((s) => s.slice(1)),
-			file: key
+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);
 		};
-		const prev = seen.get(name);
-		if (prev && prev.rank <= rank) {
-			if (prev.rank === rank && !warned.has(name)) {
-				warned.add(name);
-				console.warn(`[octane-xplat] route '${name}' is defined by both ${prev.meta.file} and ${key} — keeping ${prev.meta.file}`);
-			}
-			continue;
-		}
-		const component = pick(files[key], key);
-		if (component) seen.set(name, {
-			rank,
-			meta,
-			component
-		});
-	}
-	const screens = {};
-	const routes = [];
-	for (const { meta, component } of seen.values()) {
-		screens[meta.name] = component;
-		routes.push(meta);
-	}
-	routes.sort((a, b) => b.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) - a.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) || a.name.localeCompare(b.name));
+		raf = requestAnimationFrame(tick);
+	};
 	return {
-		screens,
-		routes,
-		layouts
+		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);
+		}
 	};
 }
-/** Serialize a Route to a URL path (no origin): manifest routes substitute
-*  `:param` segments from params (leftover params → query string);
-*  non-manifest names keep the legacy `/<stack>/<name>?params` shape. */
-function buildRoutePath(routes, r) {
-	const meta = routes.find((m) => m.name === r.name);
-	let segs;
-	let rest = r.params;
-	if (meta) {
-		segs = meta.segments.map((s) => {
-			if (!s.startsWith(":")) return s;
-			const v = r.params[s.slice(1)];
-			if (v === void 0) console.warn(`[octane-xplat] route '${r.name}' pushed without path param ${s}`);
-			return encodeURIComponent(String(v ?? ""));
-		});
-		rest = Object.fromEntries(Object.entries(r.params).filter(([k]) => !meta.params.includes(k)));
-	} else segs = [r.name];
-	const q = Object.entries(rest).map(([k, v]) => encodeURIComponent(k) + "=" + encodeURIComponent(String(v))).join("&");
-	return (((r.stack === "root" ? "" : "/" + r.stack) + "/" + segs.join("/")).replace(/\/+$/, "") || "/") + (q ? "?" + q : "");
+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 { buildRoutePath, deriveRouteManifest };
+export { useAnimation };