@octane-xplat/ui 0.3.0 → 0.4.0

package/dist/native/ui28.js

@@ -1,146 +1,40 @@
-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;
+import { registerElement } from "@nativescript-community/octane";
+import { SVGView } from "@nativescript-community/ui-svg";
+//#region src/svg.native.ts
+registerElement("svgview", SVGView);
+var SVG_DATA_URI = /^data:image\/svg\+xml[;,]/i;
+var SVG_PATH = /\.svg([?#].*)?$/i;
+var EMPTY_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\"/>";
+/** True when an `src` carries SVG: inline markup, an svg data URI, or an
+*  .svg path/URL. Anything else stays on the raster <image> path. */
+function isSvgSrc(src) {
+	return src.trimStart().startsWith("<svg") || SVG_DATA_URI.test(src) || SVG_PATH.test(src);
 }
-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 });
+/** Normalize an svg-shaped src into SVGView's grammar: file/resource paths and
+*  markup pass through, data URIs decode to markup, remote URLs fetch to
+*  markup (SVGView has no fetch of its own — it awaits promise srcs). */
+function svgSource(src) {
+	if (SVG_DATA_URI.test(src)) {
+		const comma = src.indexOf(",");
+		const body = src.slice(comma + 1);
+		if (src.slice(0, comma).endsWith(";base64")) {
+			const atob = globalThis.atob;
+			if (!atob) return EMPTY_SVG;
+			return atob(body);
+		}
+		return decodeURIComponent(body);
 	}
-	console.log("[probe] tabs mounted panes=" + tv.items.length);
+	if (/^https?:\/\//.test(src)) return fetch(src).then((r) => r.ok ? r.text() : EMPTY_SVG).catch(() => EMPTY_SVG);
+	return src;
+}
+/** IconGlyph → a full `<svg>` string for SVGView. `svg` path data gets a
+*  `<path>` with the requested fill; `markup` wraps inside a viewBox shell
+*  with `color`/`fill` set on the root so `currentColor` and default-fill
+*  children pick up the tint. */
+function glyphSvgMarkup(glyph, color) {
+	const viewBox = glyph.viewBox ?? "0 0 24 24";
+	if (glyph.markup) return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}"${color ? ` color="${color}" fill="${color}"` : ""}>${glyph.markup}</svg>`;
+	if (glyph.svg) return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}"><path d="${glyph.svg}" fill="${color ?? "currentColor"}"/></svg>`;
 }
-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 };
+export { glyphSvgMarkup, isSvgSrc, svgSource };

package/dist/native/ui29.js

@@ -1,28 +1,108 @@
 import { cx } from "./ui2.js";
 import { applyEscapeProps } from "./ui3.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Switch.native.tsrx
+import { layoutChildProps } from "./ui5.js";
+import { isSvgSrc, svgSource } from "./ui28.js";
+import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalProps, universalValue, useMemo } from "@nativescript-community/octane";
+import { ImageSource } from "@nativescript/core";
+//#region src/Image.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": "switch",
-	"bindings": [
-		["ref", 0],
-		["id", 1],
-		["className", 2],
-		["style", 3],
-		["checked", 4],
-		["onCheckedChange", 5]
-	]
+	"type": "svgview",
+	"propsSlot": 0
 });
-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)
-	]);
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "image",
+	"propsSlot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Image = defineUniversalComponent("nativescript", function Image(props) {
+	const svg = useMemo(() => isSvgSrc(props.src) ? svgSource(props.src) : null, [props.src], _h$0);
+	const source = useMemo(() => {
+		const comma = props.src.indexOf(",");
+		if (props.src.startsWith("data:") && comma > 0 && props.src.slice(0, comma).endsWith(";base64")) return ImageSource.fromBase64Sync(props.src.slice(comma + 1));
+		return props.src;
+	}, [props.src], _h$1);
+	return universalValue(__octaneUniversalPlan2, [universalIf(svg != null, () => {
+		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",
+				svg
+			],
+			[
+				"set",
+				"stretch",
+				"aspectFit"
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.alt
+			]
+		])]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan1, [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",
+				source
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.alt
+			]
+		])]);
+	})]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Switch };
+export { Image };

package/dist/native/ui30.js

@@ -1,35 +1,18 @@
-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
-	};
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/theme/colorScheme.native.ts
+function getColorScheme() {
+	return Application.primaryWindow?.systemAppearance?.() ?? Application.systemAppearance?.() ?? "light";
 }
-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;
+function subscribeSystemScheme(cb) {
+	const h = () => cb();
+	Application.on("systemAppearanceChanged", h);
+	return () => Application.off("systemAppearanceChanged", h);
 }
+/** Reactive system appearance — 'light' | 'dark', re-renders on OS change. */
+function useColorScheme() {
+	return useSyncExternalStore(subscribeSystemScheme, getColorScheme, _h$0);
+}
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 //#endregion
-export { useSafeAreaInsets };
+export { getColorScheme, subscribeSystemScheme, useColorScheme };

package/dist/native/ui31.js

@@ -1,39 +1,58 @@
 import { cx } from "./ui2.js";
-import { useSafeAreaInsets } from "./ui30.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalValue, withSlot } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/SafeArea.native.tsrx
+import { getColorScheme, subscribeSystemScheme } from "./ui30.js";
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/theme/theme-scheme.ts
+var preference = "system";
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((l) => l());
+/** App-level theme override. 'system' clears the override and follows the OS. */
+function setThemePreference(p) {
+	if (p !== preference) {
+		preference = p;
+		emit();
+	}
+}
+function getThemePreference() {
+	return preference;
+}
+/** The effective scheme: explicit override if set, else system appearance. */
+function getThemeScheme() {
+	return preference === "system" ? getColorScheme() : preference;
+}
+function subscribe(cb) {
+	listeners.add(cb);
+	const offSystem = subscribeSystemScheme(cb);
+	return () => {
+		listeners.delete(cb);
+		offSystem();
+	};
+}
+/** Reactive effective scheme — re-renders on override or OS change. */
+function useThemeScheme() {
+	return useSyncExternalStore(subscribe, getThemeScheme, _h$0);
+}
+/** Class string to stamp on independently-mounted roots (portal hosts,
+*  overlay/sheet/modal/toast containers): 'ns-dark dark' when effective
+*  dark, '' otherwise. Both names because tokens.css publishes both
+*  selectors and hosts may render either vocabulary. */
+function themeSchemeClasses() {
+	return getThemeScheme() === "dark" ? "ns-dark dark" : "";
+}
+/** Subscribe imperative hosts to effective-scheme changes; returns an
+*  unsubscribe. Use for hosts that live outside any render cycle. */
+function onThemeSchemeChange(cb) {
+	return subscribe(cb);
+}
+/** Stamp `base + themeSchemeClasses()` onto an imperative host (NS view or
+*  DOM element) and keep it live — returns an unsubscribe to call when the
+*  host closes. Works on both leaves since both honor `.className`. */
+function applyThemeClasses(view, base) {
+	const apply = () => {
+		view.className = cx(base, themeSchemeClasses());
+	};
+	apply();
+	return onThemeSchemeChange(apply);
+}
 var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "flexboxlayout",
-	"bindings": [
-		["ref", 0],
-		["className", 1],
-		["style", 2]
-	],
-	"children": [{
-		"kind": "slot",
-		"slot": 3
-	}]
-});
-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, [
-		(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 };
+export { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme };

package/dist/native/ui32.js

@@ -1,70 +1,58 @@
-import { cx } from "./ui2.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useState, withSlot } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/KeyboardAvoiding.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(5);
+import { applyThemeClasses } from "./ui31.js";
+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 _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
-var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
-var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "scrollview",
-	"bindings": [
-		["className", 0],
-		["style", 1],
-		["ref", 2]
-	],
+	"kind": "range",
 	"children": [{
-		"kind": "host",
-		"type": "flexboxlayout",
-		"props": { "flexDirection": "column" },
-		"bindings": [["style", 3]],
-		"children": [{
-			"kind": "slot",
-			"slot": 4
-		}]
+		"kind": "slot",
+		"slot": 0
 	}]
 });
-function useKeyboardInset() {
-	const [inset, setInset] = useState(0, _h$0);
-	useEffect(() => {
-		if (!Application.ios) return;
-		const center = NSNotificationCenter.defaultCenter;
-		const token = center.addObserverForNameObjectQueueUsingBlock(UIKeyboardWillChangeFrameNotification, null, NSOperationQueue.mainQueue, (note) => {
-			const frame = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
-			const screenHeight = UIScreen.mainScreen.bounds.size.height;
-			setInset(Math.max(0, screenHeight - frame.origin.y));
-		});
-		return () => center.removeObserver(token);
-	}, [], _h$1);
-	return inset;
-}
-function useAndroidResize() {
+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(() => {
-		const nativeWindow = Application.android?.foregroundActivity?.window;
-		if (!nativeWindow) return;
-		const params = android.view.WindowManager.LayoutParams;
-		const previous = nativeWindow.attributes.softInputMode;
-		const adjusted = previous & ~params.SOFT_INPUT_MASK_ADJUST | params.SOFT_INPUT_ADJUST_RESIZE;
-		nativeWindow.setSoftInputMode(adjusted);
-		return () => nativeWindow.setSoftInputMode(previous);
-	}, [], _h$2);
-}
-var KeyboardAvoiding = defineUniversalComponent("nativescript", function KeyboardAvoiding(props) {
-	const keyboardInset = withSlot(_h$3, useKeyboardInset);
-	withSlot(_h$4, useAndroidResize);
-	const platformProps = Application.ios != null ? props.ios : props.android;
-	return universalValue(__octaneUniversalPlan0, [
-		cx("vx-keyboard-avoiding", props.className),
-		props.style,
-		(host) => {
-			if (host && platformProps) Object.assign(host, platformProps);
-		},
-		keyboardInset ? { paddingBottom: keyboardInset } : void 0,
-		props.children
-	]);
+		if (props.open && !shown.current) {
+			const presenter = Frame.topmost()?.currentPage ?? Frame.topmost();
+			if (!presenter) return;
+			const host = new GridLayout();
+			const unbindTheme = applyThemeClasses(host, "vx-modal-host");
+			const root = createNativeScriptRoot(host);
+			shown.current = {
+				host,
+				root,
+				unbindTheme
+			};
+			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?.unbindTheme?.();
+					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 { KeyboardAvoiding };
+export { Modal };

package/dist/native/ui33.js

@@ -1,30 +1,38 @@
-import { cx } from "./ui2.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/Drawer.native.tsrx
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "flexboxlayout",
-	"bindings": [
-		["ref", 0],
-		["className", 1],
-		["style", 2]
-	],
-	"children": [{
-		"kind": "slot",
-		"slot": 3
-	}]
+import { applyThemeClasses } from "./ui31.js";
+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 unbindTheme = applyThemeClasses(host, "vx-modal-host");
+	const root = createNativeScriptRoot(host);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		unbindTheme();
+		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
+	});
 });
-var Drawer = defineUniversalComponent("nativescript", function Drawer(props) {
-	const platformProps = Application.ios != null ? props.ios : props.android;
-	return universalValue(__octaneUniversalPlan0, [
-		(host) => {
-			if (host && platformProps) Object.assign(host, platformProps);
-		},
-		cx("vx-drawer", props.className),
-		props.style,
-		props.main
-	]);
-}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Drawer };
+export { openModal };