@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/native/ui26.js

@@ -0,0 +1,12 @@
+import { View } from "./ui6.js";
+import { defineUniversalComponent, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/ScrollBox.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var ScrollBox = defineUniversalComponent("nativescript", function ScrollBox(props) {
+	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([["spread", props]], props.children))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ScrollBox };

package/dist/native/ui27.js

@@ -0,0 +1,61 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { glassClassOf, glassConfigOf } from "./ui4.js";
+import { layoutChildProps } from "./ui5.js";
+import { defineUniversalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/ScrollView.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "scrollview",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [["flexDirection", 1]],
+		"children": [{
+			"kind": "slot",
+			"slot": 2
+		}]
+	}]
+});
+var ScrollView = defineUniversalComponent("nativescript", function ScrollView(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		universalProps([
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			[
+				"set",
+				"id",
+				props.id
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"className",
+				cx(glassClassOf(props.glass), props.className)
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			[
+				"set",
+				"iosGlassEffect",
+				glassConfigOf(props.glass)
+			],
+			[
+				"set",
+				"orientation",
+				props.horizontal ? "horizontal" : "vertical"
+			]
+		]),
+		props.horizontal ? "row" : "column",
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ScrollView };

package/dist/native/ui28.js

@@ -0,0 +1,40 @@
+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);
+}
+/** 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);
+	}
+	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>`;
+}
+//#endregion
+export { glyphSvgMarkup, isSvgSrc, svgSource };

package/dist/native/ui29.js

@@ -0,0 +1,108 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+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": "svgview",
+	"propsSlot": 0
+});
+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 { Image };

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 };

package/dist/native/ui30.js

@@ -0,0 +1,18 @@
+import { Application } from "@nativescript/core";
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/theme/colorScheme.native.ts
+function getColorScheme() {
+	return Application.primaryWindow?.systemAppearance?.() ?? Application.systemAppearance?.() ?? "light";
+}
+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 { getColorScheme, subscribeSystemScheme, useColorScheme };

package/dist/native/ui31.js

@@ -0,0 +1,58 @@
+import { cx } from "./ui2.js";
+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));
+//#endregion
+export { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme };

package/dist/native/ui32.js

@@ -0,0 +1,58 @@
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+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(() => {
+		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 { Modal };

package/dist/native/ui33.js

@@ -0,0 +1,38 @@
+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
+	});
+});
+//#endregion
+export { openModal };

package/dist/native/ui34.js

@@ -0,0 +1,53 @@
+import { RootLayout, getRootLayout } from "@nativescript/core";
+//#region src/root-layout.native.ts
+var registry = [];
+/** Called by the Screen leaf's <rootlayout> onLoaded/onUnloaded. */
+function registerRootLayout(rl) {
+	if (rl && !registry.includes(rl)) registry.push(rl);
+}
+function unregisterRootLayout(rl) {
+	const i = rl ? registry.indexOf(rl) : -1;
+	if (i >= 0) registry.splice(i, 1);
+}
+/** The most recently mounted rootlayout — the top of the push stack. For
+*  imperative services (toast, sheet) there is no invoking component to
+*  walk from; last-mounted is the pushed page when one exists. Caveat: tabs
+*  keep visited panes mounted — last is the newest, not the visible tab. */
+function topRootLayout() {
+	return registry[registry.length - 1] ?? getRootLayout();
+}
+/** Resolve the RootLayout enclosing `view` by walking the native parent
+*  chain — the screen shell is a RootLayout (Screen.native), so the first
+*  RootLayout ancestor IS the current page's overlay host. Falls back to
+*  the top registry entry when the component renders outside any Screen. */
+function rootLayoutFor(view) {
+	for (let v = view?.parent; v; v = v.parent) if (v instanceof RootLayout) return v;
+	return topRootLayout();
+}
+/** Search every registered rootlayout for a view by id — overlays/sheets/
+*  toasts land on different rootlayouts depending on which screen's shell
+*  mounted last. */
+function findInRootLayouts(id) {
+	const walk = (view) => {
+		if (!view) return null;
+		if (view.id === id) return view;
+		let hit = null;
+		view.eachChildView?.((c) => {
+			const found = walk(c);
+			if (found) {
+				hit = found;
+				return false;
+			}
+			return true;
+		});
+		return hit;
+	};
+	for (let i = registry.length - 1; i >= 0; i--) {
+		const hit = walk(registry[i]);
+		if (hit) return hit;
+	}
+	const rl = getRootLayout();
+	return rl ? walk(rl) : null;
+}
+//#endregion
+export { findInRootLayouts, registerRootLayout, rootLayoutFor, topRootLayout, unregisterRootLayout };

package/dist/native/ui35.js

@@ -0,0 +1,105 @@
+import { cx } from "./ui2.js";
+import { applyThemeClasses } from "./ui31.js";
+import { rootLayoutFor } from "./ui34.js";
+import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/Overlay.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "stacklayout",
+	"bindings": [["ref", 0], ["style", 1]]
+});
+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 hostView = useRef(null, _h$1);
+	const dismiss = useRef(props.onDismiss, _h$2);
+	dismiss.current = props.onDismiss;
+	const rootLayout = () => rootLayoutFor(hostView.current);
+	useEffect(() => {
+		const current = shown.current;
+		if (!props.open) {
+			if (!current) return;
+			current.dismissOnClose = false;
+			shown.current = null;
+			const rl = rootLayout();
+			if (rl && rl?.hasChild?.(current.host)) rl.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.unbindTheme = applyThemeClasses(current.host, cx("vx-overlay-host", 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 rl = rootLayout();
+		if (!rl) return;
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx("vx-overlay-host", 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,
+			unbindTheme
+		};
+		shown.current = opened;
+		root.render(OverlayBody, { children: props.children });
+		host.on("closed", () => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			root.unmount?.();
+			if (opened.dismissOnClose) dismiss.current?.();
+		});
+		const open = () => rl.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 (rl.hasChild?.(host)) rl.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$3);
+	return universalValue(__octaneUniversalPlan1, [(v) => {
+		hostView.current = v;
+	}, {
+		width: 0,
+		height: 0
+	}]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Overlay };

package/dist/native/ui36.js

@@ -0,0 +1,10 @@
+import { isAndroid, isIOS } from "@nativescript/core";
+//#region src/platformProps.native.ts
+/** Apply the matching native escape-hatch bag after the primitive's props. */
+function applyNativeProps(el, props) {
+	if (!el) return;
+	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
+	if (bag) Object.assign(el, bag);
+}
+//#endregion
+export { applyNativeProps };

package/dist/native/ui37.js

@@ -0,0 +1,44 @@
+//#region src/popover-position.ts
+var opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/** Place beside the anchor, flip once when the requested side overflows, then clamp. */
+function positionPopover(anchor, panel, viewport, requested = "bottom", gap = 8) {
+	const at = (placement) => {
+		switch (placement) {
+			case "top": return {
+				left: anchor.left,
+				top: anchor.top - panel.height - gap
+			};
+			case "bottom": return {
+				left: anchor.left,
+				top: anchor.top + anchor.height + gap
+			};
+			case "left": return {
+				left: anchor.left - panel.width - gap,
+				top: anchor.top
+			};
+			case "right": return {
+				left: anchor.left + anchor.width + gap,
+				top: anchor.top
+			};
+		}
+		throw new Error(`Unknown popover placement: ${placement}`);
+	};
+	const fits = (position) => position.left >= viewport.left && position.top >= viewport.top && position.left + panel.width <= viewport.left + viewport.width && position.top + panel.height <= viewport.top + viewport.height;
+	const preferred = at(requested);
+	const placement = fits(preferred) ? requested : opposite[requested];
+	const raw = placement === requested ? preferred : at(placement);
+	const maxLeft = Math.max(viewport.left, viewport.left + viewport.width - panel.width);
+	const maxTop = Math.max(viewport.top, viewport.top + viewport.height - panel.height);
+	return {
+		left: Math.min(maxLeft, Math.max(viewport.left, raw.left)),
+		top: Math.min(maxTop, Math.max(viewport.top, raw.top)),
+		placement
+	};
+}
+//#endregion
+export { positionPopover };