@octane-xplat/ui 0.2.0 → 0.3.0

package/dist/web/ui16.js

@@ -1,101 +1,108 @@
-import { useRoute } from "./ui15.js";
-import { __s, bag3, bag4, bag9, child, clone, delegateEvents, forBlock, hookSlots, ifBlock, setEventHandler, setStyle, sibling, template, useState, withSlot } from "octane";
-import { bindSignalAttribute, bindSignalChild, childTextHoleUpdate, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/Tabs.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui3.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Image.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 props = __extra[2];
-	const rootRoute = __extra[3];
+var _t$0 = /* @__PURE__ */ template("<img/>");
+var _rm$0 = [
+	"s",
+	"h",
+	"g"
+];
+var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0;
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7;
 		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	{
-		const _v = props.resolveScreen(rootRoute.name, rootRoute.params);
-		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
-		_b.c = _v;
-	}
-}
-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:6a83ceed", null, void 0, void 0, void 0, true);
-}
-function __else$2(__props, __s, __extra) {
-	const active = __extra[0];
-	const paneRoute = __extra[1];
-	const props = __extra[2];
-	const setInternal = __extra[4];
-	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:dd012c22", "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;
+		_m0 = (e) => applyEscapeProps(e, props);
+		_m1 = props.id;
+		_m2 = props.className;
+		_m3 = snapshotSpread(layoutChildProps(props));
+		_m4 = props.src;
+		_m5 = props.alt;
+		_m6 = _root;
+		_m7 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"src",
+				_m4
+			],
+			[
+				false,
+				"alt",
+				_m5
+			]
+		], "b:ed5f7791", false);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7);
+		__s.refFields = _rm$0;
+	} else {
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.className;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props));
+		{
+			const _v = props.src;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.alt;
+			if (_b.f !== _v) _b.f = _v;
 		}
+		_b.h = bindSignalHostPropSources(__s, _b.h, _b.g, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"src",
+				_b.e
+			],
+			[
+				false,
+				"alt",
+				_b.f
+			]
+		], "b:ed5f7791", false);
 	}
-	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 && props.resolveScreen ? props.resolveScreen(paneRoute.name, paneRoute.params) : props.tabs[active]?.render(), "b:945751f6", null, void 0, void 0, void 0, true);
-}
-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 ?? "");
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-	ifBlock(__s, 0, __block.parentNode, rootRoute && props.resolveScreen, __then$0, __else$2, __block.endMarker, [
-		active,
-		paneRoute,
-		props,
-		rootRoute,
-		setInternal
-	]);
 });
 //#endregion
-export { Tabs };
+export { Image };

package/dist/web/ui17.js

@@ -1,31 +1,45 @@
-import { __s, bag5, clone, delegateEvents, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChecked, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/Switch.web.tsrx
+import { __s, bag5, clone, createElement, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setEventHandler, template, useEffect, useMemo, useRef } from "octane";
+import { bindSignalChild, enableSignalBindings, replaceRef, setClassNameIfChanged } from "octane/internal/client";
+//#region src/Modal.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["change"]);
-var _t$0 = /* @__PURE__ */ template("<input type=\"checkbox\" data-octane-input=\"i:86e2d28a\"/>");
-var Switch = /* @__PURE__ */ __s(function Switch(props, __s, __extra) {
+delegateEvents(["close"]);
+var _t$0 = /* @__PURE__ */ template("<dialog></dialog>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+var Modal = /* @__PURE__ */ __s(function Modal(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	const content = useMemo(() => props.component ? createElement(props.component, props.params ?? {}) : props.children, [props], _hs$ + 1);
+	const presentation = props.presentation;
+	const className = presentation === "sheet" ? "vx-modal vx-modal--sheet" : presentation === "dialog" ? "vx-modal vx-modal--dialog" : presentation === "fullscreen" || !presentation && props.fullscreen ? "vx-modal vx-modal--fullscreen" : "vx-modal";
+	useEffect(() => {
+		const d = el.current;
+		if (!d) return;
+		if (props.open && !d.open) d.showModal();
+		else if (!props.open && d.open) d.close();
+	}, [props.open], _hs$ + 2);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1, _m4;
+		let _m0, _m1;
 		const _root = clone(_t$0);
-		_m1 = _root;
-		_m4 = bindSignalChecked(__s, void 0, _root, props.checked, "i:86e2d28a");
-		setEventHandler(_root, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
-		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
+		queueRefAttach(__s, _m1 = el, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$close", () => props.onClose?.());
+		_b = bag5(__s, _root, _m0, _m1, void 0, null, void 0);
+		__s.refFields = _rm$1;
 	} else {
-		_b.e = bindSignalChecked(__s, _b.e, _b.b, props.checked, "i:86e2d28a");
-		setEventHandler(_b.b, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:c6de5afb", "attr");
-	_b.c = updateFreshClassName(["vx-switch", props.className], _b.c, _b.b);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+		{
+			const _r = el;
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 		}
+		setEventHandler(_b.a, "$$close", () => props.onClose?.());
 	}
+	_b.c = setClassNameIfChanged(className, _b.c, _b.a);
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.a, content, "b:386c9c7e", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Switch };
+export { Modal };

package/dist/web/ui18.js

@@ -1,17 +1,31 @@
-import { __s, bag2, clone, template } from "octane";
-import { bindSignalAttribute, enableSignalBindings } from "octane/internal/client";
-//#region src/PlatformBadge.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<span>web</span>");
-var PlatformBadge = /* @__PURE__ */ __s(function PlatformBadge(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		_b = bag2(__s, _root, void 0, _m1);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f3cb9a4b", "class");
+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";
+	document.body.appendChild(dialog);
+	const root = createRoot(dialog);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		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 { PlatformBadge };
+export { openModal };

package/dist/web/ui19.js

@@ -1,9 +1,11 @@
-//#region src/stacks.web.ts
-/** Web twin — one linear URL stack; named stacks don't apply. */
-function registerStack(_name, _frame) {}
-function getStack(_name) {}
-function stackEntries() {
-	return [].values();
+//#region src/cx.ts
+/** NS `className` splits on ' ' only, and the universal driver applies the
+*  prop via `String(value)` — an array would arrive comma-joined and match
+*  no class at all. Native leaves normalize through cx() before handing
+*  className to an intrinsic. (The DOM renderer already flattens arrays,
+*  so web leaves don't need this.) */
+function cx(...parts) {
+	return parts.flat(Infinity).filter(Boolean).join(" ");
 }
 //#endregion
-export { getStack, registerStack, stackEntries };
+export { cx };

package/dist/web/ui2.js

@@ -1,105 +1,17 @@
-import { __s, bag7, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, template, useEffect, useRef } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/View.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _rm$1 = [
-	"r",
-	"c",
-	"b"
-];
-var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	useEffect(() => {
-		const node = el.current;
-		const cb = props.onPan;
-		if (!node || !cb) return;
-		let sx = 0, sy = 0, active = false, last = 0, lx = 0, t0 = 0;
-		const emit = (e, state) => {
-			const now = performance.now();
-			const dt = Math.max(now - t0, 1) / 1e3;
-			const vx = (e.clientX - lx) / dt;
-			const vy = (e.clientY - last) / dt;
-			lx = e.clientX;
-			last = e.clientY;
-			t0 = now;
-			cb({
-				x: e.clientX - sx,
-				y: e.clientY - sy,
-				dx: e.clientX - sx,
-				dy: e.clientY - sy,
-				vx,
-				vy,
-				state,
-				target: node
-			});
-		};
-		const down = (e) => {
-			active = true;
-			sx = e.clientX;
-			sy = e.clientY;
-			t0 = performance.now();
-			lx = sx;
-			last = sy;
-			node.setPointerCapture?.(e.pointerId);
-			emit(e, "began");
-		};
-		const move = (e) => {
-			if (active) emit(e, "moved");
-		};
-		const up = (e) => {
-			if (active) {
-				active = false;
-				emit(e, "ended");
-			}
-		};
-		const cancel = (e) => {
-			if (active) {
-				active = false;
-				emit(e, "cancelled");
-			}
-		};
-		node.addEventListener("pointerdown", down);
-		node.addEventListener("pointermove", move);
-		node.addEventListener("pointerup", up);
-		node.addEventListener("pointercancel", cancel);
-		return () => {
-			node.removeEventListener("pointerdown", down);
-			node.removeEventListener("pointermove", move);
-			node.removeEventListener("pointerup", up);
-			node.removeEventListener("pointercancel", cancel);
-		};
-	}, [props.onPan], _hs$ + 1);
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m2;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		queueRefAttach(__s, _m2 = (e) => {
-			el.current = e;
-			props.bind?.(e);
-		}, _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (e) => {
-			el.current = e;
-			props.bind?.(e);
-		};
-		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
+//#region src/escape-props.web.ts
+/** Apply DOM escape props after the primitive's own props. Dash-named keys
+*  are attributes; other keys use the DOM property where available. */
+function applyEscapeProps(element, props) {
+	if (!element || !props.web) return;
+	for (const [key, value] of Object.entries(props.web)) if (key.includes("-")) {
+		if (value == null || value === false) element.removeAttribute(key);
+		else element.setAttribute(key, value === true ? "" : String(value));
+	} else if (key in element) try {
+		element[key] = value;
+	} catch {
+		element.setAttribute(key, String(value));
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:82d7ce4a", "attr");
-	_b.d = updateFreshClassName(["vx-view", props.className], _b.d, _b.b);
-	{
-		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.b, _v, _b.e);
-			_b.e = _v;
-		}
-	}
-	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:f8e3deeb", null, void 0, void 0, void 0, true);
-});
+	else if (value != null) element.setAttribute(key, String(value));
+}
 //#endregion
-export { View };
+export { applyEscapeProps };

package/dist/web/ui20.js

@@ -0,0 +1,114 @@
+import { cx } from "./ui19.js";
+import { bag1, bag2, bag9, child, clone, delegateEvents, drainFrag, ifBlock, markDangerouslySetInnerHTMLChildren, portal, setEventHandler, sibling, snapshotSpread, template } 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);
+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);
+}
+var _rm$5 = [
+	"s",
+	"e",
+	"d"
+];
+function __portal$1(__props, __s, __extra) {
+	const props = __extra[0];
+	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", 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:4cb93a35", 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", 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:4cb93a35", true);
+		setEventHandler(_b.f, "$$click", (event) => event.stopPropagation());
+	}
+	ifBlock(__s, 1, _b.d, props.shadeCover, __then$2, null, _b.g, __extra);
+	_b.j = bindSignalChild(__s, _b.j, 2, _b.f, props.children, "b:69179142", null, void 0, void 0, void 0, true);
+}
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	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, [props], void 0, _b.b);
+}
+var Overlay = function Overlay(props, __s, __extra) {
+	const __block = __s.block;
+	{
+		const __ifCondition = props.open;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props] : void 0);
+	}
+};
+//#endregion
+export { Overlay };

package/dist/web/ui21.js

@@ -0,0 +1,82 @@
+import { cx } from "./ui19.js";
+import { bag4, child, clone, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, template, useEffect, useState } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/Popover.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const position = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	{
+		const _v = createPortal(createScopedValue(() => createScopedElement("div", {
+			className: cx("vx-popover", props.className),
+			style: {
+				...props.style,
+				position: "fixed",
+				top: position.top,
+				left: position.left,
+				transform: props.placement === "top" ? "translateY(-100%)" : props.placement === "left" ? "translateX(-100%)" : void 0
+			},
+			...props.web
+		}, () => props.children)), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+var Popover = function Popover(props, __s, __extra) {
+	const __block = __s.block;
+	const [position, setPosition] = useState(null, _hs$ + 0);
+	const anchor = props.anchor?.current ?? props.anchor;
+	useEffect(() => {
+		if (!props.open || !anchor?.getBoundingClientRect) {
+			setPosition(null);
+			return;
+		}
+		const update = () => {
+			const rect = anchor.getBoundingClientRect();
+			const gap = 8;
+			let top = rect.bottom + gap;
+			let left = rect.left;
+			if (props.placement === "top") top = rect.top - gap;
+			if (props.placement === "left") {
+				top = rect.top;
+				left = rect.left - gap;
+			}
+			if (props.placement === "right") {
+				top = rect.top;
+				left = rect.right + gap;
+			}
+			setPosition({
+				top,
+				left
+			});
+		};
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [
+		props.open,
+		anchor,
+		props.placement
+	], _hs$ + 1);
+	{
+		const __ifCondition = props.open && position;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [position, props] : void 0);
+	}
+};
+//#endregion
+export { Popover };