@octane-xplat/ui 0.3.0 → 0.4.0

package/dist/web/ui29.js

@@ -1,108 +1,58 @@
-import { screenFor, useRoute } from "./ui28.js";
-import { __s, bag3, bag4, bag9, child, clone, createScopedValue, delegateEvents, forBlock, hookSlots, ifBlock, setEventHandler, setStyle, sibling, template, useState, withSlot } from "octane";
-import { bindSignalAttribute, bindSignalChild, childTextHoleUpdate, createElementFromConfig, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/Tabs.web.tsrx
-enableSignalBindings(1, true);
-delegateEvents(["click"]);
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-route\"></div>");
-var _t$1 = /* @__PURE__ */ template("<button></button>");
-var _t$2 = /* @__PURE__ */ template("<div><div class=\"vx-tabbar\"><!></div><div class=\"vx-tabpane\"></div></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(4);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
-function __then$0(__props, __s, __extra) {
-	const routed = __extra[4];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	{
-		const _v = routed;
-		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
-		_b.c = _v;
+import { getColorScheme, subscribeSystemScheme } from "./ui27.js";
+import { cx } from "./ui28.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();
 	}
 }
-var _key$3 = (t) => t.title;
-function __item$4(t, __s, __extra) {
-	const active = __extra[0];
-	const props = __extra[1];
-	const setInternal = __extra[2];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1;
-		const _root = clone(_t$1);
-		_m1 = _root;
-		setEventHandler(_root, "$$click", () => {
-			const i = props.tabs.indexOf(t);
-			setInternal(i);
-			props.onSelectedIndexChanged?.(i);
-		});
-		_b = bag4(__s, _root, void 0, _m1, null, void 0);
-	} else setEventHandler(_b.b, "$$click", () => {
-		const i = props.tabs.indexOf(t);
-		setInternal(i);
-		props.onSelectedIndexChanged?.(i);
-	});
-	_b.a = updateFreshClassName(["vx-tab", active === props.tabs.indexOf(t) ? "active" : ""], _b.a, _b.b);
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, t.title, "b:7ce48fd2", null, void 0, void 0, void 0, true);
+function getThemePreference() {
+	return preference;
 }
-function __else$2(__props, __s, __extra) {
-	const active = __extra[0];
-	const paneRoute = __extra[1];
-	const props = __extra[2];
-	const resolve = __extra[3];
-	const setInternal = __extra[5];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4, _m5, _m6;
-		const _root = clone(_t$2);
-		_m1 = _root;
-		const _el0 = child(_root);
-		_m4 = _el0;
-		_m5 = child(_el0);
-		_m6 = sibling(_el0, 1);
-		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6, null, void 0);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:7404e316", "attr");
-	_b.c = updateFreshClassName(["vx-tabs", props.className], _b.c, _b.b);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
-		}
-	}
-	forBlock(__s, 1, _b.e, props.tabs, _key$3, __item$4, 26, [
-		active,
-		props,
-		setInternal
-	], null, _b.f, true);
-	_b.j = bindSignalChild(__s, _b.j, 2, _b.g, (paneRoute ? resolve(paneRoute.name, paneRoute.params) : null) ?? props.tabs[active]?.render(), "b:a696350b", null, void 0, void 0, void 0, true);
+/** The effective scheme: explicit override if set, else system appearance. */
+function getThemeScheme() {
+	return preference === "system" ? getColorScheme() : preference;
 }
-var Tabs = /* @__PURE__ */ __s(function Tabs(props, __s, __extra) {
-	const __block = __s.block;
-	const [internal, setInternal] = useState(0, _hs$ + 0);
-	const active = props.selectedIndex ?? internal;
-	const rootRoute = withSlot(_h$1, useRoute, "root");
-	const paneRoute = withSlot(_h$2, useRoute, props.tabs[active]?.stack ?? "");
-	const resolve = (name, params) => {
-		if (props.resolveScreen) return props.resolveScreen(name, params);
-		const C = screenFor(name);
-		return C ? createScopedValue(() => createElementFromConfig("c:beeccfd6", C, { ...params })) : null;
+function subscribe(cb) {
+	listeners.add(cb);
+	const offSystem = subscribeSystemScheme(cb);
+	return () => {
+		listeners.delete(cb);
+		offSystem();
 	};
-	const routed = rootRoute ? resolve(rootRoute.name, rootRoute.params) : null;
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	ifBlock(__s, 0, __block.parentNode, routed, __then$0, __else$2, __block.endMarker, [
-		active,
-		paneRoute,
-		props,
-		resolve,
-		routed,
-		setInternal
-	]);
-});
+}
+/** 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 { Tabs };
+export { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme };

package/dist/web/ui3.js

@@ -1,20 +1,31 @@
-//#region src/layout-child.web.ts
-/** Convert parent-layout metadata to CSS on the web leaf. Native's `dock`
-*  attribute has no CSS equivalent and is ignored on web. Grid indices are
-*  zero-based in the shared API, matching NativeScript. */
-function layoutChildProps(props, baseStyle = props.style) {
-	const style = { ...baseStyle ?? {} };
-	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
-	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
-	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
-	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
-	if (props.left !== void 0) style.left = props.left;
-	if (props.top !== void 0) style.top = props.top;
-	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
-	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
-	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
-	if (props.order !== void 0) style.order = props.order;
-	return { style };
+//#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";
+}
+/** Style merge for the web approximation — `tint` becomes the surface
+*  color (the class's translucent fallback is a weaker claim than an
+*  explicit inline value). Caller spreads result into its style object. */
+function glassStyleOf(glass) {
+	const c = glassConfigOf(glass);
+	return c?.tint ? { backgroundColor: c.tint } : {};
 }
 //#endregion
-export { layoutChildProps };
+export { glassClassOf, glassConfigOf, glassStyleOf };

package/dist/web/ui30.js

@@ -1,43 +1,34 @@
-import { applyEscapeProps } from "./ui2.js";
-import { __s, bag6, clone, delegateEvents, queueRefAttach, queueRefDetach, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChecked, enableSignalBindings, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/Switch.web.tsrx
-enableSignalBindings(1, true);
-delegateEvents(["change"]);
-var _t$0 = /* @__PURE__ */ template("<input type=\"checkbox\" data-octane-input=\"i:0400e5c1\"/>");
-var _rm$0 = [
-	"r",
-	"b",
-	"a"
-];
-var Switch = /* @__PURE__ */ __s(function Switch(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1, _m5;
-		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m5 = bindSignalChecked(__s, void 0, _root, props.checked, "i:0400e5c1");
-		setEventHandler(_root, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
-		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5);
-		__s.refFields = _rm$0;
-	} else {
-		{
-			const _r = (e) => applyEscapeProps(e, props);
-			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
-		}
-		_b.f = bindSignalChecked(__s, _b.f, _b.a, props.checked, "i:0400e5c1");
-		setEventHandler(_b.a, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
-	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:18b5d0ad", "attr");
-	_b.d = updateFreshClassName(["vx-switch", props.className], _b.d, _b.a);
-	{
-		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.a, _v, _b.e);
-			_b.e = _v;
-		}
-	}
+import { applyThemeClasses } from "./ui29.js";
+import { createRoot } from "octane";
+//#region src/modal-service.web.ts
+/** Open a component in a document-level dialog and resolve with close(value). */
+var openModal = (Component, params, options = {}) => new Promise((resolve) => {
+	const dialog = document.createElement("dialog");
+	dialog.className = options.presentation === "sheet" ? "vx-modal vx-modal--sheet" : options.presentation === "dialog" ? "vx-modal vx-modal--dialog" : options.presentation === "fullscreen" || !options.presentation && options.fullscreen ? "vx-modal vx-modal--fullscreen" : "vx-modal";
+	const unbindTheme = applyThemeClasses(dialog, dialog.className);
+	document.body.appendChild(dialog);
+	const root = createRoot(dialog);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		unbindTheme();
+		root.unmount();
+		dialog.remove();
+		resolve(result);
+	};
+	const close = (result) => {
+		if (finished) return;
+		if (dialog.open) dialog.close();
+		finish(result);
+	};
+	dialog.addEventListener("close", () => finish());
+	dialog.addEventListener("cancel", () => finish());
+	root.render(Component, {
+		params,
+		close
+	});
+	dialog.showModal();
 });
 //#endregion
-export { Switch };
+export { openModal };

package/dist/web/ui31.js

@@ -1,42 +1,123 @@
-import { hookSlots, useEffect, useState } from "octane";
-//#region src/safeAreaInsets.web.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-function measure() {
-	if (!document.body) return {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	};
-	const probe = document.createElement("div");
-	probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);";
-	document.body.appendChild(probe);
-	const style = getComputedStyle(probe);
-	const insets = {
-		top: parseFloat(style.paddingTop) || 0,
-		right: parseFloat(style.paddingRight) || 0,
-		bottom: parseFloat(style.paddingBottom) || 0,
-		left: parseFloat(style.paddingLeft) || 0
-	};
-	probe.remove();
-	return insets;
+import { cx } from "./ui28.js";
+import { useThemeScheme } from "./ui29.js";
+import { bag1, bag2, bag9, child, clone, delegateEvents, drainFrag, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, portal, setEventHandler, sibling, snapshotSpread, template, withSlot } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Overlay.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-overlay-shade\"></div>");
+var _t$1 = /* @__PURE__ */ template("<div><!><div class=\"vx-overlay-content\"></div></div>");
+var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(4));
+function __then$2(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		setEventHandler(_root, "$$click", props.onDismiss);
+		_b = bag1(__s, _root, _m0);
+	} else setEventHandler(_b.a, "$$click", props.onDismiss);
 }
-function useSafeAreaInsets() {
-	const [insets, setInsets] = useState({
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	}, _h$0);
-	useEffect(() => {
-		const update = () => setInsets(measure());
-		update();
-		window.addEventListener("resize", update);
-		return () => window.removeEventListener("resize", update);
-	}, [], _h$1);
-	return insets;
+var _rm$5 = [
+	"s",
+	"e",
+	"d"
+];
+function __portal$1(__props, __s, __extra) {
+	const dark = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6;
+		const _root = clone(_t$1);
+		_m0 = cx("vx-overlay", dark && "dark", props.className);
+		_m1 = {
+			...props.style,
+			position: "fixed",
+			inset: 0
+		};
+		_m2 = snapshotSpread(props.web);
+		_m3 = _root;
+		_m4 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"className",
+				_m0
+			],
+			[
+				false,
+				"style",
+				_m1
+			],
+			[true, _m2]
+		], "b:843a5624", true);
+		const _el0 = sibling(child(_root), 1);
+		_m5 = _el0;
+		setEventHandler(_el0, "$$click", (event) => event.stopPropagation());
+		markDangerouslySetInnerHTMLChildren(_root);
+		_m6 = child(_root);
+		_b = bag9(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, null, void 0);
+		__s.refFields = _rm$5;
+	} else {
+		{
+			const _v = cx("vx-overlay", dark && "dark", props.className);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = {
+				...props.style,
+				position: "fixed",
+				inset: 0
+			};
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.c = snapshotSpread(props.web);
+		_b.e = bindSignalHostPropSources(__s, _b.e, _b.d, [
+			[
+				false,
+				"className",
+				_b.a
+			],
+			[
+				false,
+				"style",
+				_b.b
+			],
+			[true, _b.c]
+		], "b:843a5624", true);
+		setEventHandler(_b.f, "$$click", (event) => event.stopPropagation());
+	}
+	{
+		const __ifCondition = props.shadeCover;
+		ifBlock(__s, 1, _b.d, __ifCondition, __then$2, null, _b.g, __ifCondition ? [props] : void 0);
+	}
+	_b.j = bindSignalChild(__s, _b.j, 2, _b.f, props.children, "b:f597242e", null, void 0, void 0, void 0, true);
 }
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const dark = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$2);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag2(__s, null, _m0, _m1);
+	}
+	portal(__s, 1, document.body, __portal$1, void 0, _b.a, [dark, props], void 0, _b.b);
+}
+var Overlay = function Overlay(props, __s, __extra) {
+	const __block = __s.block;
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition$ = props.open;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition$, __then$0, null, __block.endMarker, __ifCondition$ ? [dark, props] : void 0);
+	}
+};
 //#endregion
-export { useSafeAreaInsets };
+export { Overlay };

package/dist/web/ui32.js

@@ -1,77 +1,44 @@
-import { useSafeAreaInsets } from "./ui31.js";
-import { __s, bag11, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, template, withSlot } from "octane";
-import { canSplitStyleProperties, childTextHoleUpdate, replaceRef, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
-//#region src/SafeArea.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-var _rm$1 = [
-	"r",
-	"b",
-	"a"
-];
-function applyWebProps(node, bag) {
-	if (!node || !bag) return;
-	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
-	else node[key] = value;
-}
-var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
-	const insets = withSlot(_h$0, useSafeAreaInsets);
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1;
-		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = (node) => applyWebProps(node, props.web), _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_b = bag11(__s, _root, _m0, _m1, void 0, __s, void 0, void 0, void 0, void 0, void 0, null, void 0);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (node) => applyWebProps(node, props.web);
-		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
-	}
-	_b.c = updateFreshClassName(["vx-safe-area", props.className], _b.c, _b.a);
-	{
-		const __styleSpread = { ...props.style };
-		const __styleValue = insets.top;
-		const __styleValue$ = insets.right;
-		const __styleValue$2 = insets.bottom;
-		const __styleValue$3 = insets.left;
-		const __styleFull = "paddingTop" in __styleSpread || "paddingRight" in __styleSpread || "paddingBottom" in __styleSpread || "paddingLeft" in __styleSpread || !canSplitStyleProperties();
-		if (_b.d === __s || __styleFull || _b.e) {
-			const __styleObject = __styleFull && !("paddingTop" in styleObjectPrototype || "paddingRight" in styleObjectPrototype || "paddingBottom" in styleObjectPrototype || "paddingLeft" in styleObjectPrototype) ? (__styleSpread["paddingTop"] = __styleValue, __styleSpread["paddingRight"] = __styleValue$, __styleSpread["paddingBottom"] = __styleValue$2, __styleSpread["paddingLeft"] = __styleValue$3, __styleSpread) : {
-				...__styleSpread,
-				"paddingTop": __styleValue,
-				"paddingRight": __styleValue$,
-				"paddingBottom": __styleValue$2,
-				"paddingLeft": __styleValue$3
+//#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
 			};
-			setStyle(_b.a, __styleObject, _b.d === __s ? void 0 : _b.e ? _b.d : {
-				..._b.d,
-				"paddingTop": _b.f,
-				"paddingRight": _b.g,
-				"paddingBottom": _b.h,
-				"paddingLeft": _b.i
-			});
-			_b.d = __styleFull ? __styleObject : __styleSpread;
-		} else {
-			setStyle(_b.a, __styleSpread, _b.d);
-			if (_b.f !== __styleValue) setStyleProperty(_b.a, "paddingTop", __styleValue, "", _b.f);
-			if (_b.g !== __styleValue$) setStyleProperty(_b.a, "paddingRight", __styleValue$, "", _b.g);
-			if (_b.h !== __styleValue$2) setStyleProperty(_b.a, "paddingBottom", __styleValue$2, "", _b.h);
-			if (_b.i !== __styleValue$3) setStyleProperty(_b.a, "paddingLeft", __styleValue$3, "", _b.i);
-			_b.d = __styleSpread;
 		}
-		_b.e = __styleFull;
-		_b.f = __styleValue;
-		_b.g = __styleValue$;
-		_b.h = __styleValue$2;
-		_b.i = __styleValue$3;
-	}
-	{
-		const _v = props.children;
-		_b.j = childTextHoleUpdate(__s, 1, _b.a, _v, _b.j, _b.k);
-		_b.k = _v;
-	}
-});
+		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 { SafeArea };
+export { positionPopover };