@popgrids/embed 0.0.1 → 0.0.3

package/dist/embed.js

@@ -0,0 +1,2240 @@
+//#region node_modules/.pnpm/@preact+signals-core@1.14.3/node_modules/@preact/signals-core/dist/signals-core.module.js
+var e = Symbol.for("preact-signals");
+function t() {
+	if (o > 1) o--;
+	else {
+		var e, t = !1;
+		for ((function() {
+			var e = l;
+			for (l = void 0; e !== void 0;) e.S.v === e.v && (e.S.i = e.i), e = e.o;
+		})(); a !== void 0;) {
+			var n = a;
+			for (a = void 0, s++; n !== void 0;) {
+				var r = n.u;
+				if (n.u = void 0, n.f &= -3, !(8 & n.f) && m(n)) try {
+					n.c();
+				} catch (n) {
+					t ||= (e = n, !0);
+				}
+				n = r;
+			}
+		}
+		if (s = 0, o--, t) throw e;
+	}
+}
+var n = void 0;
+function r(e) {
+	var t = n;
+	n = void 0;
+	try {
+		return e();
+	} finally {
+		n = t;
+	}
+}
+var i, a = void 0, o = 0, s = 0, c = 0, l = void 0, u = 0;
+function d(e) {
+	if (n !== void 0) {
+		var t = e.n;
+		if (t === void 0 || t.t !== n) return t = {
+			i: 0,
+			S: e,
+			p: n.s,
+			n: void 0,
+			t: n,
+			e: void 0,
+			x: void 0,
+			r: t
+		}, n.s !== void 0 && (n.s.n = t), n.s = t, e.n = t, 32 & n.f && e.S(t), t;
+		if (t.i === -1) return t.i = 0, t.n !== void 0 && (t.n.p = t.p, t.p !== void 0 && (t.p.n = t.n), t.p = n.s, t.n = void 0, n.s.n = t, n.s = t), t;
+	}
+}
+function f(e, t) {
+	this.v = e, this.i = 0, this.n = void 0, this.t = void 0, this.l = 0, this.W = t?.watched, this.Z = t?.unwatched, this.name = t?.name;
+}
+f.prototype.brand = e, f.prototype.h = function() {
+	return !0;
+}, f.prototype.S = function(e) {
+	var t = this, n = this.t;
+	n !== e && e.e === void 0 && (e.x = n, this.t = e, n === void 0 ? r(function() {
+		var e;
+		(e = t.W) == null || e.call(t);
+	}) : n.e = e);
+}, f.prototype.U = function(e) {
+	var t = this;
+	if (this.t !== void 0) {
+		var n = e.e, i = e.x;
+		n !== void 0 && (n.x = i, e.e = void 0), i !== void 0 && (i.e = n, e.x = void 0), e === this.t && (this.t = i, i === void 0 && r(function() {
+			var e;
+			(e = t.Z) == null || e.call(t);
+		}));
+	}
+}, f.prototype.subscribe = function(e) {
+	var t = this;
+	return ee(function() {
+		var n = t.value;
+		r(function() {
+			return e(n);
+		});
+	}, { name: "sub" });
+}, f.prototype.valueOf = function() {
+	return this.value;
+}, f.prototype.toString = function() {
+	return this.value + "";
+}, f.prototype.toJSON = function() {
+	return this.value;
+}, f.prototype.peek = function() {
+	var e = this;
+	return r(function() {
+		return e.value;
+	});
+}, Object.defineProperty(f.prototype, "value", {
+	get: function() {
+		var e = d(this);
+		return e !== void 0 && (e.i = this.i), this.v;
+	},
+	set: function(e) {
+		if (e !== this.v) {
+			if (s > 100) throw Error("Cycle detected");
+			(function(e) {
+				o !== 0 && s === 0 && e.l !== c && (e.l = c, l = {
+					S: e,
+					v: e.v,
+					i: e.i,
+					o: l
+				});
+			})(this), this.v = e, this.i++, u++, o++;
+			try {
+				for (var n = this.t; n !== void 0; n = n.x) n.t.N();
+			} finally {
+				t();
+			}
+		}
+	}
+});
+function p(e, t) {
+	return new f(e, t);
+}
+function m(e) {
+	for (var t = e.s; t !== void 0; t = t.n) if (t.S.i !== t.i || !t.S.h() || t.S.i !== t.i) return !0;
+	return !1;
+}
+function h(e) {
+	for (var t = e.s; t !== void 0; t = t.n) {
+		var n = t.S.n;
+		if (n !== void 0 && (t.r = n), t.S.n = t, t.i = -1, t.n === void 0) {
+			e.s = t;
+			break;
+		}
+	}
+}
+function g(e) {
+	for (var t = e.s, n = void 0; t !== void 0;) {
+		var r = t.p;
+		t.i === -1 ? (t.S.U(t), r !== void 0 && (r.n = t.n), t.n !== void 0 && (t.n.p = r)) : n = t, t.S.n = t.r, t.r !== void 0 && (t.r = void 0), t = r;
+	}
+	e.s = n;
+}
+function _(e, t) {
+	f.call(this, void 0, t), this.x = e, this.s = void 0, this.g = u - 1, this.f = 4;
+}
+_.prototype = new f(), _.prototype.h = function() {
+	if (this.f &= -3, 1 & this.f) return !1;
+	if ((36 & this.f) == 32 || (this.f &= -5, this.g === u)) return !0;
+	if (this.g = u, this.f |= 1, this.i > 0 && !m(this)) return this.f &= -2, !0;
+	var e = n;
+	try {
+		h(this), n = this;
+		var t = this.x();
+		(16 & this.f || this.v !== t || this.i === 0) && (this.v = t, this.f &= -17, this.i++);
+	} catch (e) {
+		this.v = e, this.f |= 16, this.i++;
+	}
+	return n = e, g(this), this.f &= -2, !0;
+}, _.prototype.S = function(e) {
+	if (this.t === void 0) {
+		this.f |= 36;
+		for (var t = this.s; t !== void 0; t = t.n) t.S.S(t);
+	}
+	f.prototype.S.call(this, e);
+}, _.prototype.U = function(e) {
+	if (this.t !== void 0 && (f.prototype.U.call(this, e), this.t === void 0)) {
+		this.f &= -33;
+		for (var t = this.s; t !== void 0; t = t.n) t.S.U(t);
+	}
+}, _.prototype.N = function() {
+	if (!(2 & this.f)) {
+		this.f |= 6;
+		for (var e = this.t; e !== void 0; e = e.x) e.t.N();
+	}
+}, Object.defineProperty(_.prototype, "value", { get: function() {
+	if (1 & this.f) throw Error("Cycle detected");
+	var e = d(this);
+	if (this.h(), e !== void 0 && (e.i = this.i), 16 & this.f) throw this.v;
+	return this.v;
+} });
+function v(e, t) {
+	return new _(e, t);
+}
+function y(e) {
+	var r = e.m;
+	if (e.m = void 0, typeof r == "function") {
+		o++;
+		var i = n;
+		n = void 0;
+		try {
+			r();
+		} catch (t) {
+			throw e.f &= -2, e.f |= 8, b(e), t;
+		} finally {
+			n = i, t();
+		}
+	}
+}
+function b(e) {
+	for (var t = e.s; t !== void 0; t = t.n) t.S.U(t);
+	e.x = void 0, e.s = void 0, y(e);
+}
+function x(e) {
+	if (n !== this) throw Error("Out-of-order effect");
+	g(this), n = e, this.f &= -2, 8 & this.f && b(this), t();
+}
+function S(e, t) {
+	this.x = e, this.m = void 0, this.s = void 0, this.u = void 0, this.f = 32, this.name = t?.name, i && i.push(this);
+}
+S.prototype.c = function() {
+	var e = this.S();
+	try {
+		if (8 & this.f || this.x === void 0) return;
+		var t = this.x();
+		typeof t == "function" && (this.m = t);
+	} finally {
+		e();
+	}
+}, S.prototype.S = function() {
+	if (1 & this.f) throw Error("Cycle detected");
+	this.f |= 1, this.f &= -9, y(this), h(this), o++;
+	var e = n;
+	return n = this, x.bind(this, e);
+}, S.prototype.N = function() {
+	2 & this.f || (this.f |= 2, this.u = a, a = this);
+}, S.prototype.d = function() {
+	this.f |= 8, 1 & this.f || b(this);
+}, S.prototype.dispose = function() {
+	this.d();
+};
+function ee(e, t) {
+	var n = new S(e, t);
+	try {
+		n.c();
+	} catch (e) {
+		throw n.d(), e;
+	}
+	var r = n.d.bind(n);
+	return r[Symbol.dispose] = r, r;
+}
+var C = "/embed/auth/login", w = "popgrids-auth", te = "popup,width=480,height=640", ne = 300 * 1e3, re = 250, T = class extends Error {
+	constructor(e) {
+		super(e), this.name = "PopupAuthError";
+	}
+}, ie = (e, t, n) => {
+	let r = new URL(C, e);
+	return r.searchParams.set("publicKey", t), r.searchParams.set("returnOrigin", n), r.toString();
+}, ae = (e, t) => {
+	let n = window.open(ie(e, t, window.location.origin), w, te);
+	if (!n) throw new T("Popup blocked. Allow popups for this site and try again.");
+	return n;
+}, oe = (e, t) => typeof e == "object" && !!e && "type" in e && "source" in e && e.type === t && e.source === "popgrids-embed", se = (e) => {
+	if (typeof e != "object" || !e || !("user" in e)) return null;
+	let t = e.user;
+	if (typeof t != "object" || !t || !("id" in t)) return null;
+	let n = t;
+	return typeof n.id == "string" ? {
+		id: n.id,
+		name: typeof n.name == "string" ? n.name : "",
+		email: typeof n.email == "string" ? n.email : "",
+		image: typeof n.image == "string" ? n.image : null
+	} : null;
+}, ce = (e, t, n) => new Promise((r, i) => {
+	let a = new URL(e).origin, o = !1, s = !1, c = !1, l = (e, t) => {
+		if (!o) {
+			if (o = !0, p(), e === "resolve") {
+				r();
+				return;
+			}
+			i(t ?? new T("Sign-in failed"));
+		}
+	}, u = (e) => {
+		if (e.origin === a) {
+			if (oe(e.data, "popgrids:auth:success")) {
+				s = !0;
+				let t = se(e.data);
+				t && n?.onAuthUser?.(t), l("resolve");
+				return;
+			}
+			oe(e.data, "popgrids:auth:error") && (s = !0, l("reject", new T(typeof e.data == "object" && e.data !== null && "error" in e.data && typeof e.data.error == "string" ? e.data.error : "Sign-in failed")));
+		}
+	}, d = window.setInterval(() => {
+		t.closed && (c || (c = !0, (async () => {
+			if (await new Promise((e) => window.setTimeout(e, re)), !(s || o)) {
+				if (n?.verifySignedIn && await n.verifySignedIn()) {
+					l("resolve");
+					return;
+				}
+				l("reject", new T("Sign-in was cancelled"));
+			}
+		})()));
+	}, 300), f = window.setTimeout(() => {
+		try {
+			t.close();
+		} catch {}
+		l("reject", new T("Sign-in timed out"));
+	}, ne), p = () => {
+		window.removeEventListener("message", u), clearInterval(d), clearTimeout(f);
+	};
+	window.addEventListener("message", u);
+}), le = async (e, t, n) => {
+	await ce(e, ae(e, t), n);
+}, E = p(null), ue = p(null), de = p(!1), fe = [
+	0,
+	150,
+	400
+], pe = [
+	0,
+	100,
+	200,
+	400,
+	800,
+	1500,
+	2500,
+	4e3
+];
+async function me(e, t, n = fe) {
+	if (!e || !t) return E.value = null, !1;
+	let r = new URL(`/api/v1/embed/grids/${t}/session`, e);
+	r.searchParams.set("pageUrl", window.location.href);
+	for (let e = 0; e < n.length; e++) {
+		let t = n[e] ?? 0;
+		t > 0 && await new Promise((e) => window.setTimeout(e, t));
+		try {
+			let e = await fetch(r, { credentials: "include" });
+			if (!e.ok) continue;
+			if (E.value = (await e.json()).user ?? null, E.value !== null) return !0;
+		} catch {}
+	}
+	return E.value = null, !1;
+}
+async function D(e, t) {
+	ue.value = null, de.value = !0;
+	try {
+		return await le(e, t, {
+			onAuthUser: (e) => {
+				E.value = e;
+			},
+			verifySignedIn: () => me(e, t, pe)
+		}), E.value ? !0 : await me(e, t, pe);
+	} catch (e) {
+		return ue.value = e instanceof Error ? e.message : "Sign-in failed", !1;
+	} finally {
+		de.value = !1;
+	}
+}
+function he() {
+	ue.value = null;
+}
+//#endregion
+//#region src/store/registry.ts
+var ge = /* @__PURE__ */ new WeakMap(), _e = (e, t, n = t.constructor) => {
+	let r = ge.get(e);
+	r || (r = /* @__PURE__ */ new Map(), ge.set(e, r)), r.set(n, t);
+}, ve = (e) => {
+	ge.delete(e);
+}, ye = (e, t) => {
+	let n = e;
+	for (; n;) {
+		let e = ge.get(n)?.get(t);
+		if (e) return e;
+		let r = n.getRootNode();
+		if (!(r instanceof ShadowRoot)) break;
+		n = r.host;
+	}
+	return null;
+};
+function O(e) {
+	return function(t, n) {
+		let r = Symbol("context_" + (e.name || "store"));
+		Object.defineProperty(t, n, {
+			get() {
+				if (this[r]) return this[r];
+				let t = ye(this, e);
+				if (!t) throw console.error(`[Context] resolveStore failed! isConnected: ${this.isConnected}`, this), Error(`[Context] Store for key "${e.name || e}" not resolved on <${this.localName}>.`);
+				return this[r] = t, t;
+			},
+			enumerable: !0,
+			configurable: !0
+		});
+	};
+}
+//#endregion
+//#region src/store/grid-store.ts
+var be = 3e4, xe = 3, Se = (e) => {
+	let t = typeof e.createdAt == "number" ? e.createdAt : Date.parse(String(e.createdAt));
+	return Number.isFinite(t) ? t : 0;
+}, Ce = (e, t) => {
+	let n = e?.previewCount ?? t;
+	return n > 0 ? n : xe;
+}, k = class {
+	constructor(e) {
+		this.previewCount = xe, this.grid = p(null), this.comments = p([]), this.loading = p(!0), this.error = p(null), this.open = p(!1), this.replyingTo = p(null), this.editingCommentId = p(null), this.scrollingCommentId = p(null), this.socket = null, this.reconnectAttempt = 0, this.reconnectTimer = null, this.disposed = !1, this.topLevelComments = v(() => this.comments.value.filter((e) => e.parentCommentId === null).sort((e, t) => String(e.sortKey).localeCompare(String(t.sortKey)))), this.replyingToComment = v(() => {
+			let e = this.replyingTo.value;
+			return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
+		}), this.editingComment = v(() => {
+			let e = this.editingCommentId.value;
+			return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
+		}), this.previewComments = v(() => this.topLevelComments.value.slice(0, Ce(this.grid.value, this.previewCount))), this.previewAvatars = v(() => {
+			let e = Ce(this.grid.value, this.previewCount), t = /* @__PURE__ */ new Set(), n = [], r = [...this.comments.value].sort((e, t) => Se(t) - Se(e));
+			for (let i of r) {
+				let r = i.author;
+				if (!(!r?.id || t.has(r.id)) && (t.add(r.id), n.push(r), n.length >= e)) break;
+			}
+			return n.reverse();
+		}), this.apiUrl = e.apiUrl, this.publicKey = e.publicKey, this.pageUrl = e.pageUrl, this.externalId = e.externalId?.trim() || null;
+	}
+	identityParams() {
+		let e = new URLSearchParams({ pageUrl: this.pageUrl });
+		return this.externalId && e.set("externalId", this.externalId), e.toString();
+	}
+	repliesFor(e) {
+		let t = this.comments.value.find((t) => t.id === e);
+		return t ? this.comments.value.filter((n) => n.id !== e && (n.sortKey === t.sortKey || n.sortKey.startsWith(t.sortKey + "/"))).sort((e, t) => String(e.sortKey).localeCompare(String(t.sortKey))) : [];
+	}
+	async load() {
+		this.loading.value = !0, this.error.value = null;
+		try {
+			let e = await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}`, { credentials: "include" });
+			if (!e.ok) return this.error.value = "There was a problem loading the PopGrid", !1;
+			let t = await e.json();
+			this.grid.value = t.grid, this.connectRealtime();
+			let n = await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments?${this.identityParams()}`, { credentials: "include" });
+			if (n.ok) {
+				let e = await n.json();
+				this.comments.value = e.comments;
+			}
+			return !0;
+		} catch {
+			return console.error("Failed to load PopGrid"), this.error.value = "There was a problem loading the PopGrid", !1;
+		} finally {
+			this.loading.value = !1;
+		}
+	}
+	async postComment(e, t) {
+		let n = async () => fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments`, {
+			method: "POST",
+			credentials: "include",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				body: e,
+				pageUrl: this.pageUrl,
+				externalId: this.externalId ?? void 0,
+				parentCommentId: t
+			})
+		}), r = await n();
+		if (r.status === 401) {
+			if (!await D(this.apiUrl, this.publicKey)) return null;
+			r = await n();
+		}
+		if (!r.ok) return null;
+		let i = await r.json();
+		return this.upsertComment(i.comment), i.comment.author && !E.value && (E.value = {
+			id: i.comment.author.id,
+			name: i.comment.author.name ?? "",
+			email: "",
+			image: i.comment.author.image
+		}), i.comment;
+	}
+	destroy() {
+		this.disposed = !0, this.reconnectTimer &&= (clearTimeout(this.reconnectTimer), null), this.socket &&= (this.socket.onopen = null, this.socket.onmessage = null, this.socket.onclose = null, this.socket.onerror = null, this.socket.close(), null);
+	}
+	connectRealtime() {
+		let e = this.grid.value?.connectUrl;
+		if (!e || this.disposed) return;
+		this.socket &&= (this.socket.onopen = null, this.socket.onmessage = null, this.socket.onclose = null, this.socket.onerror = null, this.socket.close(), null);
+		let t = new URL(e, this.apiUrl);
+		t.protocol = t.protocol === "https:" ? "wss:" : "ws:", t.searchParams.set("pageUrl", this.pageUrl), this.externalId && t.searchParams.set("externalId", this.externalId);
+		let n = new WebSocket(t.toString());
+		this.socket = n, n.onopen = () => {
+			this.reconnectAttempt = 0;
+		}, n.onmessage = (e) => {
+			try {
+				let t = JSON.parse(String(e.data));
+				t.type === "comment.created" && t.comment ? this.upsertComment(t.comment) : t.type === "comment.updated" && t.comment && this.updateCommentInList(t.comment);
+			} catch {}
+		}, n.onclose = () => {
+			this.disposed || this.scheduleReconnect();
+		}, n.onerror = () => {
+			n.close();
+		};
+	}
+	scheduleReconnect() {
+		if (this.disposed || this.reconnectTimer) return;
+		let e = Math.min(1e3 * 2 ** this.reconnectAttempt, be);
+		this.reconnectAttempt += 1, this.reconnectTimer = setTimeout(() => {
+			this.reconnectTimer = null, this.connectRealtime();
+		}, e);
+	}
+	upsertComment(e) {
+		this.comments.value.some((t) => t.id === e.id) || (this.comments.value = [...this.comments.value, e]);
+	}
+	async editComment(e, t) {
+		let n = async () => fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments/${e}`, {
+			method: "PATCH",
+			credentials: "include",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				body: t,
+				pageUrl: this.pageUrl,
+				externalId: this.externalId ?? void 0
+			})
+		}), r = await n();
+		if (r.status === 401) {
+			if (!await D(this.apiUrl, this.publicKey)) return null;
+			r = await n();
+		}
+		if (!r.ok) return null;
+		let i = await r.json();
+		return this.updateCommentInList(i.comment), i.comment;
+	}
+	async deleteComment(e) {
+		let t = async () => fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments/${e}?${this.identityParams()}`, {
+			method: "DELETE",
+			credentials: "include"
+		}), n = await t();
+		if (n.status === 401) {
+			if (!await D(this.apiUrl, this.publicKey)) return null;
+			n = await t();
+		}
+		if (!n.ok) return null;
+		let r = await n.json();
+		return this.updateCommentInList(r.comment), r.comment;
+	}
+	async flagComment(e) {
+		let t = async () => fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments/${e}/flag?${this.identityParams()}`, {
+			method: "POST",
+			credentials: "include"
+		}), n = await t();
+		if (n.status === 401) {
+			if (!await D(this.apiUrl, this.publicKey)) return !1;
+			n = await t();
+		}
+		return n.ok;
+	}
+	updateCommentInList(e) {
+		this.comments.value = this.comments.value.map((t) => t.id === e.id ? e : t);
+	}
+}, we = "@layer base{:host{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--pop-color-brand-midnight-100:oklch(96.58% .0161 262.75);--pop-color-brand-midnight-900:oklch(15% .03 255.43);--pop-color-brand-midnight-800:oklch(19% .05 255.43);--pop-color-brand-ocean-400:oklch(63% .19 255.43);--pop-color-brand-ocean-100:oklch(91% .05 255.43);--pop-color-brand-forest-900:oklch(38.66% .0698 180.75);--pop-color-brand-forest-700:oklch(45% .15 165.43);--pop-color-brand-forest-100:oklch(97% .04 165.43);--pop-color-brand-highlight-400:oklch(88% .25 105.43);--pop-color-brand-pumpkin-500:oklch(62% .18 45.43);--pop-color-brand-pumpkin-200:oklch(89% .08 45.43);--pop-color-brand-lemon-300:oklch(91% .12 85.43);--pop-color-brand-lemon-100:oklch(97% .04 85.43);--pop-duration-bouncy:1s;--pop-duration-card-highlight:.6s;--pop-duration-gentle:.833s;--pop-duration-menu:.4s;--pop-duration-pop-hover:.6s;--pop-duration-pop-text:.3s;--pop-duration-quick:.833s;--pop-duration-slow:1.167s;--pop-ease-bouncy:linear(0, .011, .045 1.3%, .184 2.7%, .911 7.4%, 1.153 9.4%, 1.301 11.2%, 1.342, 1.362 13%, 1.363, 1.355 14.4%, 1.306 16%, 1.028 21%, .939 23%, .89 24.7%, .876, .868 26.4%, .869, .882 29%, .907 30.5%, 1.014 35.9%, 1.038, 1.048 39.8% 41.1%, 1.043 42.5%, .995 49.3%, .987, .983 53.2%, .984 55.9%, 1.002 62.7%, 1.006 66.4%, .998 79.7%, 1);--pop-ease-card-highlight:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-gentle:linear(0, .007, .026, .059 4.5%, .106 6.3%, .209 9.5%, .558 19.3%, .658, .742, .812, .87, .918, .957, .986 41.6%, 1.007 45.3%, 1.021 49.4%, 1.027 54% 60.9%, 1.007 83.2%, 1);--pop-ease-menu:linear(0, .0034 0.81%, .0278 2.42%, .097 4.84%, .5361 15.32%, .655 18.55%, .7314, .7964 23.39%, .8662, .9185, .9561, .9818, .9984, 1.0083 42.74%, 1.014 46.77%, 1.0145 53.22%, 1.0053 68.55%, 1.0019 77.42%, .9998 100%);--pop-ease-pop-hover:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-pop-text:linear(0, .0051 0.99%, .0261, .0607 3.61%, .1192 5.26%, .2531 8.21%, .6509 16.1%, .7652 18.73%, .8512, .9232 23.33%, .9881 25.96%, 1.0305 28.26%, 1.0642 30.88%, 1.0782 32.53%, 1.089, 1.094 36.47%, 1.0942, 1.0896 41.07%, 1.0804 43.7%, 1.0354 53.23%, 1.0181 57.5%, 1.0061 61.44%, .9974 65.71%, .9925 70.31%, .991 75.9%, .9996 99.88%);--pop-ease-quick:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-slow:linear(0, .005, .02 2%, .081 4.5%, .469 15.2%, .567, .65, .722 24.4%, .784, .835 31.1%, .878 34.9%, .914 39.1%, .942 43.8%, .964 49.1%, .979 55.4%, .989 62.4%, .995 71.1%, 1);--pop-shadow-xs:0px 1px 2px 0px #1018280d;--pop-shadow-sm:0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;--pop-shadow-md:0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;--pop-shadow-lg:0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;--pop-shadow-xl:0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;--pop-shadow-2xl:0px 24px 48px -12px #1018282e;--pop-shadow-3xl:0px 32px 48px -12px #10182852;--pop-shadow-4xl:0px 24px 32px -12px #10182847;--pop-radius-none:0;--pop-radius-xxs:.125rem;--pop-radius-xs:.25rem;--pop-radius-sm:.375rem;--pop-radius-md:.5rem;--pop-radius-lg:.625rem;--pop-radius-xl:.75rem;--pop-radius-2xl:1rem;--pop-radius-3xl:1.25rem;--pop-radius-4xl:1.5rem;--pop-radius-full:9999px;--pop-radius:.625rem;--pop-background:oklch(100% 0 0);--pop-foreground:oklch(0% 0 0);--pop-card:oklch(100% 0 0);--pop-card-foreground:oklch(14.5% 0 0);--pop-popover:oklch(100% 0 0);--pop-popover-foreground:oklch(0% 0 0);--pop-primary:oklch(20.5% 0 0);--pop-primary-foreground:oklch(98.5% 0 0);--pop-secondary:oklch(97% 0 0);--pop-secondary-foreground:oklch(20.5% 0 0);--pop-muted:oklch(97% 0 0);--pop-muted-foreground:oklch(71.52% .0233 256.76);--pop-accent:oklch(97% 0 0);--pop-accent-foreground:oklch(20.5% 0 0);--pop-destructive:var(--color-error-600);--pop-border:oklch(11.01% .0763 264.05/.102);--pop-input:oklch(92.2% 0 0);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(64.6% .222 41.116);--pop-chart-2:oklch(60% .118 184.704);--pop-chart-3:oklch(39.8% .07 227.392);--pop-chart-4:oklch(82.8% .189 84.429);--pop-chart-5:oklch(76.9% .188 70.08);--pop-sidebar:oklch(98.5% 0 0);--pop-sidebar-foreground:oklch(14.5% 0 0);--pop-sidebar-primary:oklch(20.5% 0 0);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(97% 0 0);--pop-sidebar-accent-foreground:oklch(20.5% 0 0);--pop-sidebar-border:oklch(92.2% 0 0);--pop-sidebar-ring:oklch(70.8% 0 0);font-family:Inter,sans-serif;font-size:16px}@media (prefers-color-scheme:dark){:host{--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}}:host(.dark){--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}*,:before,:after{box-sizing:inherit}html,body{margin:0;padding:0}svg{display:block}p{margin:0;padding:0}button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}}", Te = "@layer components{.btn{text-align:center;cursor:pointer;border:0;border-radius:4px;justify-content:center;align-items:center;gap:.625rem;height:auto;padding:.625rem 1.25rem;transition:background-color .2s,color .2s;display:flex}.btn-link{border-radius:var(--pop-radius-xs,4px);cursor:pointer;background-color:#0000;border-style:solid;border-color:#0000;justify-content:center;align-items:center;gap:2px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.btn-link--size-sm{letter-spacing:-.08px;border-width:1px 2px;font-size:13px;line-height:18px}.btn-link--size-md{letter-spacing:0;border-width:1px 3px;font-size:14px;line-height:20px}.btn-link--size-lg{letter-spacing:0;border-width:1px 4px;font-size:16px;line-height:24px}.btn-link--theme-default{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link--theme-default.btn-link--primary{color:var(--pop-foreground)}.btn-link--theme-white{color:#fff}.btn-link--theme-black{color:#000}.btn-link--theme-default:hover,.btn-link--theme-black:hover{background-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent);border-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent)}.btn-link--theme-default:not(.btn-link--primary):hover{color:var(--pop-foreground)}.btn-link--theme-white:hover{background-color:#ffffff29;border-color:#ffffff29}.btn-link:active{background-color:#0000;border-color:#0000}.btn-link--theme-default:not(.btn-link--primary):active{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link:focus-visible{background-color:var(--pop-ring,#155eef);border-color:var(--pop-ring,#155eef);outline:none;color:#fff!important}.btn-link:disabled,.btn-link.is-disabled{cursor:not-allowed;pointer-events:none;color:color-mix(in srgb, var(--pop-foreground) 35%, transparent)!important;background-color:#0000!important;border-color:#0000!important}.btn:focus-visible{outline-offset:2px;outline:2px solid}}", Ee = "@layer components{.mask{-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mask-squircle{-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e\")}}", De = !1, A = /* @__PURE__ */ new Set(), j = null, M = null;
+function Oe() {
+	if (typeof window > "u" || typeof document > "u") return !1;
+	let e = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"), t = document.documentElement.classList.contains("light") || document.body.classList.contains("light");
+	return e ? !0 : t ? !1 : (M ||= window.matchMedia("(prefers-color-scheme: dark)"), M.matches);
+}
+function ke() {
+	let e = Oe();
+	e !== De && (De = e, A.forEach((e) => {
+		let t = De || !!e.closest(".dark");
+		e.classList.toggle("dark", t);
+	}));
+}
+var Ae = () => {
+	ke();
+};
+function je(e) {
+	if (typeof window > "u" || typeof document > "u") return;
+	A.size === 0 && (De = Oe(), j = new MutationObserver(() => {
+		ke();
+	}), j.observe(document.documentElement, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), j.observe(document.body, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), M = window.matchMedia("(prefers-color-scheme: dark)"), M.addEventListener("change", Ae)), A.add(e);
+	let t = De || !!e.closest(".dark");
+	e.classList.toggle("dark", t);
+}
+function Me(e) {
+	A.delete(e), A.size === 0 && (j &&= (j.disconnect(), null), M &&= (M.removeEventListener("change", Ae), null));
+}
+//#endregion
+//#region src/components/base-element.ts
+function N(e) {
+	let t = new CSSStyleSheet();
+	return t.replaceSync(e), t;
+}
+var Ne = N(we), Pe = N(Te), Fe = N(Ee), P = class extends HTMLElement {
+	get styleSheets() {
+		return [];
+	}
+	constructor() {
+		super(), this.baseStyleSheets = [
+			Ne,
+			Pe,
+			Fe
+		], this._hasRendered = !1, this._disposables = [], this.events = {}, this.attachShadow({ mode: "open" }), this.shadowRoot && (this.shadowRoot.adoptedStyleSheets = this.styles);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t === n) return;
+		let r = `on${e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")}Changed`;
+		typeof this[r] == "function" && this[r](n, t);
+	}
+	addEffect(e) {
+		this._disposables.push(ee(e));
+	}
+	connectedCallback() {
+		je(this), r(() => {
+			this.render(), this._bindEvents(), this.setupEffects();
+		});
+	}
+	disconnectedCallback() {
+		Me(this), this._disposables.forEach((e) => e()), this._disposables = [];
+	}
+	_bindEvents() {
+		let e = this.shadowRoot;
+		e && Object.keys(this.events).forEach((t) => {
+			e.addEventListener(t, this);
+		});
+	}
+	handleEvent(e) {
+		let t = this.events[e.type];
+		t && typeof this[t] == "function" && this[t](e);
+	}
+	emit(e, t = {}) {
+		this.dispatchEvent(new CustomEvent(e, {
+			bubbles: !0,
+			composed: !0,
+			...t
+		}));
+	}
+	get styles() {
+		return [...this.baseStyleSheets, ...this.styleSheets];
+	}
+	setupEffects() {}
+	render() {
+		this.shadowRoot && (this.shadowRoot.innerHTML = this.getTemplate(), this._hasRendered = !0);
+	}
+	hideElement(e, t, n = !0) {
+		if (!this.shadowRoot || !this._hasRendered) return;
+		let r = this.shadowRoot.querySelector(e);
+		if (!r) {
+			console.warn(`Element not found for selector: ${e}`);
+			return;
+		}
+		n ? r.classList.toggle("hidden", t) : r.classList.toggle("invisible", t);
+	}
+	setText(e, t) {
+		let n = this.shadowRoot?.querySelector(e);
+		n && n.textContent !== String(t) && (n.textContent = String(t));
+	}
+	setAttr(e, t, n) {
+		let r = this.shadowRoot?.querySelector(e);
+		r && (n === null ? r.removeAttribute(t) : r.getAttribute(t) !== n && r.setAttribute(t, n));
+	}
+	toggleClass(e, t, n) {
+		let r = this.shadowRoot?.querySelector(e);
+		r && r.classList.toggle(t, n);
+	}
+	getElement(e) {
+		return this.shadowRoot?.querySelector(e) ?? null;
+	}
+};
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+function F(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+//#region src/components/pop-auth-panel.ts
+var Ie = N("\n  :host {\n    display: block;\n    position: relative;\n\n    --pop-auth-border: var(--pop-border, rgba(0, 0, 32, 0.04));\n    --pop-auth-watermark: rgba(0, 0, 32, 0.4);\n    --pop-auth-btn: #000000;\n    --pop-auth-logo: rgba(0, 0, 32, 0.35);\n    --pop-auth-error: #dc2626;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --pop-auth-border: var(--pop-border, rgba(255, 255, 255, 0.1));\n      --pop-auth-watermark: rgba(255, 255, 255, 0.4);\n      --pop-auth-btn: #ffffff;\n      --pop-auth-logo: rgba(255, 255, 255, 0.35);\n      --pop-auth-error: var(--pop-destructive, #f87171);\n    }\n  }\n\n  :host(.dark) {\n    --pop-auth-border: var(--pop-border, rgba(255, 255, 255, 0.1));\n    --pop-auth-watermark: rgba(255, 255, 255, 0.4);\n    --pop-auth-btn: #ffffff;\n    --pop-auth-logo: rgba(255, 255, 255, 0.35);\n    --pop-auth-error: var(--pop-destructive, #f87171);\n  }\n\n  .panel {\n    position: relative;\n    border-top: 1px solid var(--pop-auth-border);\n  }\n\n  .watermark {\n    position: absolute;\n    top: -16px;\n    left: 8px;\n    font-family: Inter, sans-serif;\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    color: var(--pop-auth-watermark);\n    text-transform: uppercase;\n    backdrop-filter: blur(4px);\n    border-radius: 9999px;\n    padding: 2px 6px;\n    pointer-events: none;\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px;\n  }\n\n  .join-btn {\n    font-family: Inter, sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--pop-auth-btn);\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    letter-spacing: -0.08px;\n    line-height: 18px;\n  }\n\n  .join-btn:disabled {\n    opacity: 0.6;\n    cursor: default;\n  }\n\n  .logo {\n    font-family: Inter, sans-serif;\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 1.5px;\n    color: var(--pop-auth-logo);\n    text-transform: uppercase;\n  }\n\n  .error {\n    padding: 0 16px 12px;\n    font-family: Inter, sans-serif;\n    font-size: 12px;\n    line-height: 16px;\n    color: var(--pop-auth-error);\n    text-align: center;\n  }\n"), Le = class extends P {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [Ie];
+	}
+	onClick(e) {
+		e.target.closest(".join-btn") && this.handleJoin();
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = de.value, t = ue.value, n = this.getElement(".join-btn");
+			n && (n.disabled = e, n.textContent = e ? "Signing in…" : "Join the Conversation");
+			let r = this.getElement(".error");
+			r && (t ? (r.hidden = !1, r.textContent = t) : (r.hidden = !0, r.textContent = ""));
+		});
+	}
+	async handleJoin() {
+		he(), await D(this.gridStore.apiUrl, this.gridStore.publicKey);
+	}
+	getTemplate() {
+		return "\n      <div class=\"panel\">\n        <div class=\"watermark\">Popgrids</div>\n        <div class=\"actions\">\n          <button class=\"join-btn\" type=\"button\">Join the Conversation</button>\n          <span class=\"logo\">POPGRIDS</span>\n        </div>\n        <div class=\"error\" hidden></div>\n      </div>\n    ";
+	}
+};
+F([O(k)], Le.prototype, "gridStore", void 0), customElements.get("pop-auth-panel") || customElements.define("pop-auth-panel", Le);
+//#endregion
+//#region src/assets/popgrids-letter-p.png?inline
+var Re = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAABMCAYAAADa6W+wAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUuSURBVHgB5ZyBceIwEEX3bq4AOsAdQAdxKggl+Co4rgKcCkgqgFRAUgGkAqACOxVAKvDpg+VRHEmWQSubuTezg8Ega7UrebWS+UG8jIXEQoZCovI9lcd1ciHHUnZCPsrXXflZ7xkISYSshByEFJ5kLWRO54bsHRGdK+dTYZNkQhbUg4aI6FyRoiNBQyQUGLj3jMJYuleNMC4v1gel67Ig/WCq5Qe144+QlM6Wb2QwGNB4PD7JaDQ6veIzKZLj8XiSPM9Pr/v9nna73UnwWUtyIb+FbMgjM3K0QBzHxXq9Lg6HQ3Et2+22WCwWpzJdr1/KjDzRqLiwZDGbzbwobCLLslNDRFEUrAEmTReBVVCxkLRohIsbICLLiA5roxJdAm9zaIAJXUBmKhCtHtraJjAuNHjBgVrcBcDsFhSXoD4NDbB2VTyyFNI7xSUODTB1UX5hKmA+nxd9Bl0AYxGZ3X9wkdWTJCluARjIYv2ULrG6T3eHhabT6SkY4sASFB1aWx23FJ+IULcqm6MBUKbF+rFO+ZQCje6qa6J8jsjQYv2FTvmMAvb1yWRSXePp6anwzWq1cnb9MQXo6yqwthyZ0Q04y9e5/k9F+VjnCpiGCrckDjCtFV51OpZTWN/lo/4Gxqryd7pvCNckTkS/rI7f39/JN5b6j1TltU10d3dHnKjl+7Y8sHhtpS+iHm3f4JyfS2RIytHvMV4ZdMt+1lvhS9OUaSdu5DUuSFk5l60hksoPWv7QK9I1kb/zjU2HRsuHIFQj17FanusWV4fD4i5I5Ye6k8PhkELAqbxlHDn2os9L5Tm6mUX5vBfKy/s7x/U+Pz9Np7q3/GazqY7VaI+j/Br7zpV/e3urjjmiSUvUWJ3QRkHcqAlHzL58g+iUzAmNLxOboGAgur+/rwYkjgnU6+ur6VROXVpezbLA6hw5A9dMTnDlZRoLinPk8CwTmm85vE76PCdIvRn0ympdQL8YGWI6y0GD1atVGzngaePLrmLua8FAaqEaBTsb7bl4fHy0hbTPdB7pv7AmjYtwraZw0eDu6OuRqrTV7T8+PuhWkHGDhUeqWV0qr43+b6XPI4RVAyYNGyHL+odS+Vz3i1tQ/vn5uUlxnPitO/FL+cL3XzEkFAFmWsjRY28eZnKXTKBQBgY3y6xN8pcM+km0O66wlhZiUMJ1lstlY1yB8y335KU2peUOTKRQtvWTyOGJypJv4FGwmlD42zl4Aq6rZnQhFyxnYYBLXb4YEemXpjlx2ENziSBaTaglncT3nhtgTS23nEkyXYEhdl417KJwtfaUrkCrPPbOhEDdqNBS6ZQcd4HbWOkugN0NIWhhfRhpQR4eM/mlHGujPEvq1ysNOXu4tHzaKidPqLO6XPcFrkCnDgIdy/IYUryYiubkEVV5bSwbSnlgW04mBhqVDxnfh16tVZXXhk8hLW9bVCQGemV5y7VyCkAnUR5APEHmezkL9RxeZ4Oey5qab5yUVxcTuXh5eTGd2lMgnkjjepg/c9JmdYWT2FQJjo3BEsusLqPAbHUV4VpMTNPUZvUFBSYxVMT7vvsGxWH1iDpgTYbbDjzg2i6AXBweMSH77C2hjsAUy/psPLwASce2OD4GuqIA2B4hxzRyrrzHbfBb8I2ZGJKODw8PVeJRxujysXDcw/FYOBKWDhFjLuSeAkV1NlJqn125RjLqqJ+bSOk/VVwSEe9fRSzJQx6Om4T8NgLKiunGSMh8O3QR/Damjmn7hyF14KpxKSM6d49IOa/7u6dX6snfPf0DiVL6IWhCmZ4AAAAASUVORK5CYII=", I = /* @__PURE__ */ "#DDD0BE.#E9DCBB.#E9DCBB.#C7D1B0.#C6D0CB.#E9DCBB.#C7D1B0.#E9DCBB.#DFC2C0.#CFD4C6.#D7E3E8.#CFD4C6.#D6B3B3.#E9DCBB.#CFCBDC.#BFD6D7.#E3D2C6.#D1E2E7.#D6B3B3.#BFD6D7.#E9DCBB.#C7D1B0.#DFC2C0.#D1E2E7.#CFD4C6.#E9DCBB.#D7E3E8.#CFD4C6.#C6D0CB.#E9DCBB.#C7D1B0.#E9DCBB.#CFCBDC.#E3D2C6.#E9DCBB".split("."), ze = (e) => typeof e == "number" ? I[e % I.length] ?? "#e5e7eb" : I[Math.floor(Math.random() * I.length)];
+function Be(e) {
+	let t = new TextEncoder().encode(e), n = 2166136261;
+	for (let e = 0; e < t.length; e++) {
+		let r = t[e] ?? 0;
+		n ^= r, n = Math.imul(n, 16777619);
+	}
+	return n >>> 0;
+}
+function Ve(e) {
+	return I[Be(e) % I.length] ?? "#e5e7eb";
+}
+//#endregion
+//#region src/components/pop-comment-avatar.ts
+var He = N("\n  :host {\n    display: block;\n\n    --comment-avatar-border-size: 1px;\n    --comment-avatar-border-color: var(--color-background, #fff);\n    --comment-avatar-size: 32px;\n  }\n\n  .comment-avatar {\n    align-items: center;\n    display: flex;\n    flex-shrink: 0;\n    isolation: isolate;\n    justify-content: center;\n    position: relative;\n    width: calc(var(--comment-avatar-size) + calc(var(--comment-avatar-border-size) * 2));\n    height: calc(var(--comment-avatar-size) + calc(var(--comment-avatar-border-size) * 2));\n  }\n\n  .comment-avatar--size-xs {\n    --comment-avatar-size: 32px;\n  }\n\n  .comment-avatar--size-sm {\n    --comment-avatar-size: 56px;\n  }\n\n  .comment-avatar--size-md {\n    --comment-avatar-size: 80px;\n  }\n\n  .comment-avatar--size-lg {\n    --comment-avatar-size: 120px;\n  }\n\n  .comment-avatar--size-xl {\n    --comment-avatar-size: 140px;\n  }\n\n  .comment-avatar__background {\n    background-color: var(--comment-avatar-border-color);\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n\n  /**\n   * Content\n   */\n\n  .comment-avatar__content {\n    align-items: center;\n    background-color: var(--color-surface-bg-default);\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    height: var(--comment-avatar-size);\n    width: var(--comment-avatar-size);\n    z-index: 20;\n\n    /* Initials styling */\n    font-family: Inter, sans-serif;\n    font-weight: 600;\n    color: #374151;\n    font-size: calc(var(--comment-avatar-size) * 0.35);\n    line-height: 1;\n  }\n\n  .comment-avatar__content::slotted(img) {\n    -webkit-user-drag: none;\n    align-self: stretch;\n    flex: 1 0 0;\n    height: var(--comment-avatar-size);\n    object-fit: cover;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    width: var(--comment-avatar-size);\n  }\n\n  .comment-avatar__deleted-mark {\n    -webkit-user-drag: none;\n    bottom: -3px;\n    height: auto;\n    left: 0;\n    object-fit: cover;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    width: 100%;\n    transform: scale(0.57);\n  }\n"), Ue = class extends P {
+	constructor() {
+		super(), this._backgroundColor = ze() ?? "#e5e7eb";
+	}
+	static get observedAttributes() {
+		return [
+			"size",
+			"data-color-key",
+			"deleted"
+		];
+	}
+	onSizeChanged() {
+		this.render();
+	}
+	onDataColorKeyChanged() {
+		this.render();
+	}
+	onDeletedChanged() {
+		this.render();
+	}
+	get styleSheets() {
+		return [He];
+	}
+	get size() {
+		return this.getAttribute("size") || "md";
+	}
+	set size(e) {
+		this.setAttribute("size", e);
+	}
+	get deleted() {
+		return this.hasAttribute("deleted");
+	}
+	set deleted(e) {
+		e ? this.setAttribute("deleted", "") : this.removeAttribute("deleted");
+	}
+	getTemplate() {
+		let e = this.size, t = this.deleted, n = this.getAttribute("data-color-key"), r = t ? "var(--pop-muted-foreground, #e5e7eb)" : n ? Ve(n) : this._backgroundColor;
+		return `
+      <div class="comment-avatar comment-avatar--size-${e}" part="base">
+        <div class="comment-avatar__background mask mask-squircle" part="background"></div>
+        ${t ? `<div
+          class="comment-avatar__content mask mask-squircle"
+          part="content"
+          style="background-color: ${r}; opacity: 0.15"
+        ><img class="comment-avatar__deleted-mark" src="${Re}" alt="Deleted user" /></div>` : `<slot
+          class="comment-avatar__content mask mask-squircle"
+          part="content"
+          style="background-color: ${r};"
+        ></slot>`}
+      </div>
+    `;
+	}
+};
+customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar", Ue);
+//#endregion
+//#region src/helpers/author.ts
+function L(e) {
+	return e ? e.split(" ").map((e) => e[0] ?? "").join("").toUpperCase().slice(0, 2) : "?";
+}
+//#endregion
+//#region src/components/pop-comment-bar.ts
+var We = N("\n  :host {\n    background: var(--pop-background);\n    border-top: 1px solid var(--pop-bar-input-bg);\n    display: block;\n    padding: 6px;\n    position: relative;\n\n    --pop-bar-avatar-bg: #e5e7eb;\n    --pop-bar-avatar-color: #374151;\n    --pop-bar-avatar-border: #ffffff;\n    --pop-bar-input-bg: rgba(0, 0, 32, 0.04);\n    --pop-bar-send-hover: rgba(0, 0, 32, 0.06);\n    --pop-bar-send-color: #000000;\n    --pop-bar-watermark: rgba(0, 0, 32, 0.1);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --pop-bar-avatar-bg: #1f2937;\n      --pop-bar-avatar-color: #d1d5db;\n      --pop-bar-avatar-border: var(--pop-popover, #151d2a);\n      --pop-bar-input-bg: rgba(255, 255, 255, 0.05);\n      --pop-bar-send-hover: rgba(255, 255, 255, 0.08);\n      --pop-bar-send-color: #ffffff;\n      --pop-bar-watermark: rgba(255, 255, 255, 0.1);\n    }\n  }\n\n  :host(.dark) {\n    --pop-bar-avatar-bg: #1f2937;\n    --pop-bar-avatar-color: #d1d5db;\n    --pop-bar-avatar-border: var(--pop-popover, #151d2a);\n    --pop-bar-input-bg: rgba(255, 255, 255, 0.05);\n    --pop-bar-send-hover: rgba(255, 255, 255, 0.08);\n    --pop-bar-send-color: #ffffff;\n    --pop-bar-watermark: rgba(255, 255, 255, 0.1);\n  }\n\n  .bar {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .bar__user {\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n    flex-shrink: 0;\n    padding-top: 2px;\n  }\n\n  .bar__avatar {\n    flex-shrink: 0;\n    --comment-avatar-border-size: 0px;\n  }\n\n  .bar__avatar--reply {\n    margin-right: -4px;\n    z-index: 1;\n  }\n\n  .bar__avatar--user {\n    z-index: 2;\n  }\n\n  .bar__user.has-reply .bar__avatar--user {\n    --comment-avatar-border-size: 2px;\n    --comment-avatar-border-color: var(--pop-bar-avatar-border);\n  }\n\n  .bar__input-wrap {\n    flex: 1;\n    min-width: 0;\n    background: var(--pop-bar-input-bg);\n    border-radius: 18px;\n    overflow: hidden;\n    display: flex;\n    align-items: flex-end;\n    padding: 4px 8px 4px 12px;\n    max-height: 280px;\n  }\n\n  .bar__send {\n    align-items: center;\n    align-self: flex-end;\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    padding-bottom: 2px;\n  }\n\n  .logo-watermark {\n    position: absolute;\n    top: -16px;\n    left: 8px;\n    font-family: Inter, sans-serif;\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    color: var(--pop-bar-watermark);\n    text-transform: uppercase;\n    border-radius: 9999px;\n    padding: 2px 6px;\n    pointer-events: none;\n    user-select: none;\n  }\n"), Ge = "<svg width=\"64\" height=\"11\" viewBox=\"0 0 64 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.91111 0C0.892839 0 0 2.11357 0 4.77714C0 5.76321 0.0987654 6.73357 0.213333 7.70786C0.25679 8.08893 0.240988 8.50929 0.312099 8.89036C0.497778 9.89214 1.44593 10.3557 2.36642 10.3557C3.62667 10.3557 4.4642 9.56607 4.4642 8.30107C4.4642 7.57036 4.22321 7.09107 3.5279 6.80821C3.48444 6.7925 3.44099 6.78071 3.44099 6.72179C3.44099 6.62357 3.59901 6.55286 3.69778 6.55286C4.03753 6.55286 4.57481 6.89071 5.04494 6.89071C6.88593 6.89071 7.90519 5.13071 7.90519 3.48071C7.90519 1.08429 6.13136 0 3.91111 0ZM3.89531 5.18179C3.78074 5.18179 3.68198 5.08357 3.68198 4.96964C3.68198 4.81643 3.89531 4.7025 3.96642 4.57679C4.12049 4.29393 4.16395 3.81464 4.16395 3.4925C4.16395 3.11143 4.06519 2.40821 3.8242 2.12536C3.75309 2.04286 3.65432 1.99964 3.65432 1.88571C3.65432 1.77179 3.76889 1.67357 3.87951 1.67357C4.36148 1.67357 4.60247 3.08393 4.60247 3.44929C4.60247 3.84214 4.47605 5.18179 3.89531 5.18179Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M12.7368 0.239637C9.73433 0.239637 7.93285 2.35321 7.93285 5.25249C7.93285 8.15178 9.73038 10.2654 12.7368 10.2654C15.7432 10.2654 17.5249 8.12428 17.5249 5.25249C17.5249 2.38071 15.7116 0.239637 12.7368 0.239637ZM12.8672 8.83142C12.8198 8.89035 12.7249 9.00035 12.6104 9.00035C12.4958 9.00035 12.3852 8.90214 12.3852 8.78821C12.3852 8.74499 12.7526 8.19499 12.8119 8.02607C13.037 7.36214 13.0805 6.64321 13.0805 5.93999C13.0805 4.99714 12.9106 3.78321 12.3299 3.00928C12.2153 2.86785 11.8637 2.60071 11.8637 2.44749C11.8637 2.33357 11.9625 2.23535 12.077 2.23535C12.1758 2.23535 12.2746 2.32178 12.3457 2.37678C13.2504 3.12321 13.523 4.82821 13.523 5.93999C13.523 6.81214 13.4874 8.08499 12.8711 8.82749L12.8672 8.83142Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M21.6533 0C18.6351 0 17.7422 2.11357 17.7422 4.77714C17.7422 5.76321 17.841 6.73357 17.9555 7.70786C17.999 8.08893 17.9832 8.50929 18.0543 8.89036C18.24 9.89214 19.1881 10.3557 20.1086 10.3557C21.3689 10.3557 22.2064 9.56607 22.2064 8.30107C22.2064 7.57036 21.9654 7.09107 21.2701 6.80821C21.2267 6.7925 21.1832 6.78071 21.1832 6.72179C21.1832 6.62357 21.3412 6.55286 21.44 6.55286C21.7797 6.55286 22.317 6.89071 22.7871 6.89071C24.6281 6.89071 25.6474 5.13071 25.6474 3.48071C25.6474 1.08429 23.8775 0 21.6533 0ZM21.6415 5.18179C21.5269 5.18179 21.4281 5.08357 21.4281 4.96964C21.4281 4.81643 21.6415 4.7025 21.7126 4.57679C21.8667 4.29393 21.9101 3.81464 21.9101 3.4925C21.9101 3.11143 21.8113 2.40821 21.5704 2.12536C21.4992 2.04286 21.4005 1.99964 21.4005 1.88571C21.4005 1.77179 21.5151 1.67357 21.6257 1.67357C22.1076 1.67357 22.3486 3.08393 22.3486 3.44929C22.3486 3.84214 22.2222 5.18179 21.6415 5.18179Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M31.9012 4.16822C30.882 4.16822 29.4637 4.6318 29.4637 5.84572C29.4637 6.53715 29.9733 7.56251 30.7832 7.56251C31.2929 7.56251 31.6208 7.16965 31.7906 7.16965C31.8341 7.16965 31.8736 7.19715 31.8736 7.24037C31.8736 7.64894 31.0795 7.83358 30.7674 7.83358C29.677 7.83358 29.0963 6.90251 29.0963 5.91644C29.0963 4.70644 30.242 3.77537 31.4035 3.77537C31.7432 3.77537 32.0988 3.87358 32.4385 3.87358C33.4459 3.87358 34.165 2.97394 34.165 2.01537C34.165 0.424295 32.2687 0.0589382 31.0045 0.0589382C27.6464 0.0589382 25.6909 2.22751 25.6909 5.52358C25.6909 8.56822 27.279 10.5089 30.4237 10.5089C32.4622 10.5089 34.6864 9.6368 34.6864 7.26787C34.6864 5.6493 33.6237 4.16822 31.8973 4.16822H31.9012Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M41.2681 6.56464C41.0113 6.56464 40.802 6.66286 40.5886 6.66286C40.5452 6.66286 40.5333 6.61964 40.5333 6.59214C40.5333 6.49393 40.5768 6.45071 40.6479 6.42321C40.8889 6.34071 41.1457 6.28179 41.3827 6.16786C42.4612 5.66107 43.0973 4.7575 43.0973 3.56321C43.0973 1.40643 41.2405 0.0982143 39.202 0.0982143C38.4632 0.0982143 37.7442 0.310357 37.12 0.648214C35.4212 1.56357 35.0933 2.87571 34.9946 4.66321C34.9511 5.36643 34.9511 6.07357 34.9511 6.77679V8.48179C34.9511 9.55036 35.6583 10.4107 36.7763 10.4107C37.5822 10.4107 38.3052 9.83321 38.4909 9.07107C38.5896 8.61929 38.5343 8.085 38.5343 7.64893C38.5343 7.60571 38.5501 7.59393 38.5896 7.59393C38.6291 7.59393 38.6765 7.62143 38.7042 7.63714C39.202 8.83536 39.8815 10.3557 41.4222 10.3557C42.4849 10.3557 43.362 9.60929 43.362 8.525C43.362 7.44071 42.3427 6.56857 41.2642 6.56857L41.2681 6.56464ZM38.961 5.18179C38.8464 5.18179 38.7476 5.08357 38.7476 4.96964C38.7476 4.81643 38.961 4.7025 39.0321 4.57679C39.1862 4.29393 39.2296 3.81464 39.2296 3.4925C39.2296 3.11143 39.1309 2.40821 38.8899 2.12536C38.8188 2.04286 38.7358 1.99964 38.7358 1.88571C38.7358 1.77179 38.8346 1.67357 38.9491 1.67357C39.4311 1.67357 39.6721 3.08393 39.6721 3.44929C39.6721 3.84214 39.5575 5.18179 38.9649 5.18179H38.961Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M46.7674 0.549991C46.4277 0.326063 45.9457 0.212134 45.5348 0.212134C44.642 0.212134 43.8756 0.915349 43.7768 1.79142C43.7491 2.04678 43.761 2.28642 43.761 2.55356V4.94606L43.7175 7.46821V8.72142C43.7175 9.70749 44.5669 10.4814 45.5467 10.4814C46.2696 10.4814 47.0637 10.0296 47.3324 9.35392C47.4864 8.97285 47.5022 8.43856 47.5022 8.02999V6.92999L47.518 4.73392V2.53785C47.518 1.72071 47.5022 1.07249 46.7674 0.549991Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M50.2993 0.125713C48.8533 0.125713 48.1304 0.801428 48.1304 2.25107V2.82857L48.1462 3.96786V4.54536C48.1462 4.98143 48.1462 5.39 48.1304 5.82607C48.1027 6.34857 48.0316 6.86714 48.0316 7.40536C48.0316 9.3775 49.0509 10.3361 51.0222 10.3361C54.0523 10.3361 56.1067 9.03964 56.1067 5.81429C56.1067 1.925 54.2222 0.121785 50.2993 0.121785V0.125713ZM51.6583 7.91607C51.5437 7.91607 51.4449 7.81786 51.4449 7.70393C51.4449 7.66071 51.4608 7.83352 51.4884 7.59C51.8558 6.985 51.9546 6.14036 51.9546 5.44893C51.9546 4.80071 51.8835 3.84214 51.4726 3.33536C51.4015 3.22143 51.2593 3.13893 51.2593 2.9975C51.2593 2.88357 51.358 2.78536 51.4726 2.78536C51.6859 2.78536 51.9822 3.31964 52.0691 3.50428C52.3378 4.125 52.3812 4.80071 52.3812 5.46071C52.3812 5.86928 52.1679 7.91214 51.6583 7.91214V7.91607Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M62.7239 5.1268C61.9022 5.05608 60.7249 4.77322 60.0889 4.23894C60.0059 4.16822 59.8637 4.07001 59.8637 3.9443C59.8637 3.90108 59.8795 3.83037 59.9348 3.83037C60.0889 3.83037 61.0805 4.62001 61.9338 4.62001C63.0123 4.62001 64 3.78715 64 2.69108C64 0.887867 61.5941 0.157152 60.1324 0.157152C57.9635 0.157152 56.3516 1.5518 56.3516 3.76358C56.3516 4.24287 56.4227 4.90287 56.7783 5.27215C56.9482 5.4568 57.2326 5.4568 57.4578 5.4568C58.3072 5.4568 59.3857 5.72394 59.836 6.49787C59.8795 6.56858 59.919 6.68251 59.919 6.76501C59.919 6.79251 59.919 6.83572 59.8914 6.82001C59.8084 6.79251 59.7373 6.7218 59.678 6.6668C59.1802 6.18751 58.5007 5.70822 57.7817 5.70822C56.7032 5.70822 56.324 6.73751 56.324 7.63715C56.324 9.45215 57.9674 10.4539 59.6385 10.4539C61.6217 10.4539 64 9.15751 64 6.94572C64 6.12858 63.6444 5.21322 62.7239 5.13072V5.1268Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n</svg>", Ke = class extends P {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [We];
+	}
+	onClick(e) {
+		e.target.closest(".bar__send") && this.handleSend();
+	}
+	setupEffects() {
+		let e = null, t = null;
+		this.addEffect(() => {
+			let t = this.gridStore.replyingTo.value;
+			if (t && t !== e) {
+				let e = this.getElement("pop-comment-input");
+				e && setTimeout(() => e.focus(), 0);
+			}
+			e = t;
+		}), this.addEffect(() => {
+			let e = this.gridStore.editingComment.value;
+			if (e && e.id !== t) {
+				let t = this.getElement("pop-comment-input");
+				t && (t.setValue(e.body), setTimeout(() => t.focus(), 0));
+			} else if (!e && t) {
+				let e = this.getElement("pop-comment-input");
+				e && e.clear();
+			}
+			t = e?.id ?? null;
+		}), this.addEffect(() => {
+			let e = E.value, t = this.getElement(".bar__user");
+			if (!t) return;
+			let n = this.gridStore.replyingToComment.value?.author;
+			if (this.gridStore.editingComment.value) {
+				t.classList.remove("has-reply");
+				let n = e?.id ?? e?.name ?? "";
+				t.innerHTML = e?.image ? `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}"><img src="${e.image}" alt="${e.name ?? "User"}'s avatar"></pop-comment-avatar>` : `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}">${L(e?.name)}</pop-comment-avatar>`;
+			} else if (n) {
+				t.classList.add("has-reply");
+				let r = n.id ?? n.name ?? "", i = e?.id ?? e?.name ?? "";
+				t.innerHTML = (n.image ? `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--reply" data-color-key="${r}"><img src="${n.image}" alt="${n.name ?? "User"}'s avatar"></pop-comment-avatar>` : `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--reply" data-color-key="${r}">${L(n.name)}</pop-comment-avatar>`) + (e?.image ? `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${i}"><img src="${e.image}" alt="${e.name ?? "User"}'s avatar"></pop-comment-avatar>` : `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${i}">${L(e?.name)}</pop-comment-avatar>`);
+			} else {
+				t.classList.remove("has-reply");
+				let n = e?.id ?? e?.name ?? "";
+				t.innerHTML = e?.image ? `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}"><img src="${e.image}" alt="${e.name ?? "User"}'s avatar"></pop-comment-avatar>` : `<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}">${L(e?.name)}</pop-comment-avatar>`;
+			}
+		});
+	}
+	async handleSend() {
+		let e = this.getElement("pop-comment-input");
+		if (!e) return;
+		let t = e.getValue().trim();
+		if (!t) return;
+		let n = this.gridStore.editingCommentId.value;
+		if (n) e.clear(), this.gridStore.editingCommentId.value = null, await this.gridStore.editComment(n, t);
+		else {
+			e.clear();
+			let n = await this.gridStore.postComment(t, this.gridStore.replyingTo.value ?? void 0);
+			this.gridStore.replyingTo.value = null, n && (this.gridStore.scrollingCommentId.value = n.id);
+		}
+	}
+	getTemplate() {
+		return `
+      <div class="logo-watermark">${Ge}</div>
+      <div class="bar">
+        <div class="bar__user">
+          <pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user">?</pop-comment-avatar>
+        </div>
+        <div class="bar__input-wrap">
+          <pop-comment-input></pop-comment-input>
+        </div>
+        <button class="bar__send" type="button" aria-label="Send comment">
+          <pop-comment-icon theme="neutral" variant="send"></pop-comment-icon>
+        </button>
+      </div>
+    `;
+	}
+};
+F([O(k)], Ke.prototype, "gridStore", void 0), customElements.get("pop-comment-bar") || customElements.define("pop-comment-bar", Ke);
+//#endregion
+//#region src/components/pop-comment-icon.ts
+var qe = N("\n  :host {\n    /* Mode-level theme colors (defaults for light mode) */\n    --pop-comment-color-black: #000000;\n    --pop-comment-color-white: #ffffff;\n    --pop-comment-color-default: #000000;\n    --pop-comment-color-reversed: #ffffff;\n    --pop-comment-bg-singular-resting: #121926;\n    --pop-comment-bg-singular-hover: rgba(0, 0, 32, 0.08);\n    --pop-comment-bg-reversed: #121926;\n    --pop-comment-bg-blank-resting: #ffffff;\n\n    display: flex;\n\n    --pop-comment-icon-scale: 1;\n    --pop-comment-icon-scale-hover: 1.1875;\n    --pop-comment-icon-scale-active: 0.9375;\n    --pop-comment-icon-size: 32px;\n    --pop-comment-icon-color: var(--pop-foreground, #000000);\n    --pop-comment-icon-color-hover: var(--pop-foreground, #000000);\n    --pop-comment-icon-color-active: var(--pop-foreground, #000000);\n    --pop-comment-icon-color-focused: var(--pop-foreground, #000000);\n    --pop-comment-icon-background: var(\n      --color-surface-buttons-singular-bg-launch-icon-hover,\n      rgba(0, 0, 32, 0.08)\n    );\n    --pop-comment-icon-background-hover: var(\n      --color-surface-buttons-singular-bg-launch-icon-hover,\n      rgba(0, 0, 32, 0.08)\n    );\n    --pop-comment-icon-background-active: var(\n      --color-surface-buttons-singular-bg-launch-icon-hover,\n      rgba(0, 0, 32, 0.08)\n    );\n    --pop-comment-icon-background-focused: var(\n      --color-surface-buttons-singular-bg-launch-icon-hover,\n      rgba(0, 0, 32, 0.08)\n    );\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      /* Overrides for dark mode */\n      --pop-comment-color-black: #ffffff;\n      --pop-comment-color-white: #000000;\n      --pop-comment-color-default: #ffffff;\n      --pop-comment-color-reversed: #000000;\n      --pop-comment-bg-singular-resting: #ffffff;\n      --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);\n      --pop-comment-bg-reversed: #ffffff;\n      --pop-comment-bg-blank-resting: #121926;\n    }\n  }\n\n  :host(.dark) {\n    /* Overrides for dark mode (.dark class on host) */\n    --pop-comment-color-black: #ffffff;\n    --pop-comment-color-white: #000000;\n    --pop-comment-color-default: #ffffff;\n    --pop-comment-color-reversed: #000000;\n    --pop-comment-bg-singular-resting: #ffffff;\n    --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);\n    --pop-comment-bg-reversed: #ffffff;\n    --pop-comment-bg-blank-resting: #121926;\n  }\n\n  .comment-icon {\n    align-items: center;\n    background: transparent;\n    border: none;\n    display: inline-flex;\n    height: var(--pop-comment-icon-size);\n    justify-content: center;\n    padding: 0;\n    position: relative;\n    transform-origin: center;\n    width: var(--pop-comment-icon-size);\n  }\n\n  .comment-icon--size-sm {\n    --pop-comment-icon-size: 24px;\n  }\n\n  .comment-icon:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .comment-icon__focus-indicator {\n    display: none;\n    height: calc(100% + 3px);\n    inset: -1.5px;\n    transform-origin: center;\n    transform: scale(var(--pop-comment-icon-scale));\n    transition: all 200ms ease-out;\n    width: calc(100% + 3px);\n  }\n\n  .comment-icon:focus-visible .comment-icon__focus-indicator {\n    display: flex;\n  }\n\n  .comment-icon:focus-visible {\n    outline: none;\n  }\n\n  .comment-icon__inner {\n    align-items: center;\n    background: var(--pop-comment-icon-background);\n    color: var(--pop-comment-icon-color);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    height: var(--pop-comment-icon-size);\n    justify-content: center;\n    position: absolute;\n    transform-origin: center;\n    transition: all 200ms ease-out;\n    transform: scale(var(--pop-comment-icon-scale));\n    width: var(--pop-comment-icon-size);\n  }\n\n  .comment-icon__icon-container {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    transition: transform ease-out 150ms;\n    width: 100%;\n  }\n\n  .comment-icon__icon-container svg {\n    width: calc(var(--pop-comment-icon-size) * 0.6875);\n    height: calc(var(--pop-comment-icon-size) * 0.6875);\n  }\n\n  .comment-icon--variant-close.comment-icon--theme-neutral .comment-icon__icon-container svg {\n    width: var(--pop-comment-icon-size);\n    height: var(--pop-comment-icon-size);\n  }\n\n  .comment-icon__icon-image {\n    display: flex;\n    width: var(--pop-comment-icon-size);\n    height: var(--pop-comment-icon-size);\n  }\n\n  .comment-icon__icon {\n    display: flex;\n  }\n\n  .comment-icon__icon-image + .comment-icon__icon {\n    display: none;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .comment-icon:hover .comment-icon__inner {\n      background: var(--pop-comment-icon-background-hover);\n      color: var(--pop-comment-icon-color-hover);\n      transition: transform var(--pop-ease-pop-hover) var(--pop-duration-pop-hover);\n      transform: scale(var(--pop-comment-icon-scale-hover));\n    }\n\n    .comment-icon:hover .comment-icon__icon-image {\n      display: none;\n    }\n\n    .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon {\n      display: flex;\n    }\n  }\n\n  .comment-icon:active .comment-icon__inner {\n    background: var(--pop-comment-icon-background-active);\n    color: var(--pop-comment-icon-color-active);\n    transform: scale(var(--pop-comment-icon-scale-active));\n    transition-duration: 100ms;\n  }\n\n  .comment-icon:is(:focus-visible) .comment-icon__inner {\n    background: var(--pop-comment-icon-background-focused);\n    color: var(--pop-comment-icon-color-focused);\n  }\n\n  /* Brand / Add */\n  .comment-icon--theme-brand.comment-icon--variant-add {\n    --pop-comment-icon-color: var(--pop-comment-color-black);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-black);\n    --pop-comment-icon-color-active: var(--pop-comment-color-black);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-black);\n    --pop-comment-icon-background: transparent;\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-hover);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);\n    --pop-comment-icon-background-focused: transparent;\n  }\n\n  /* Brand / Close */\n  .comment-icon--theme-brand.comment-icon--variant-close {\n    --pop-comment-icon-color: var(--pop-comment-color-white);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n    --pop-comment-icon-color-active: var(--pop-comment-color-white);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n    --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n  }\n\n  /* Neutral / Add */\n  .comment-icon--theme-neutral.comment-icon--variant-add {\n    --pop-comment-icon-color: var(--pop-comment-color-white);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-black);\n    --pop-comment-icon-color-active: var(--pop-comment-color-black);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n    --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-hover);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);\n    --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n  }\n\n  /* Neutral / Close */\n  .comment-icon--theme-neutral.comment-icon--variant-close {\n    --pop-comment-icon-color: var(--pop-comment-color-white);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n    --pop-comment-icon-color-active: var(--pop-comment-color-white);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n    --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n    --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n  }\n\n  /* Neutral / Send */\n  .comment-icon--theme-neutral.comment-icon--variant-send {\n    --pop-comment-icon-color: var(--pop-comment-color-reversed);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);\n    --pop-comment-icon-color-active: var(--pop-comment-color-reversed);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-reversed);\n    --pop-comment-icon-background: var(--pop-comment-bg-reversed);\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);\n    --pop-comment-icon-background-focused: var(--pop-comment-bg-reversed);\n  }\n\n  /* Neutral / More */\n  .comment-icon--theme-neutral.comment-icon--variant-more {\n    --pop-comment-icon-color: var(--pop-comment-color-default);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);\n    --pop-comment-icon-color-active: var(--pop-comment-color-default);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-default);\n    --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-blank-resting);\n    --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);\n  }\n\n  /* Neutral / Cancel */\n  .comment-icon--theme-neutral.comment-icon--variant-cancel {\n    --pop-comment-icon-color: var(--pop-comment-color-default);\n    --pop-comment-icon-color-hover: var(--pop-comment-color-default);\n    --pop-comment-icon-color-active: var(--pop-comment-color-reversed);\n    --pop-comment-icon-color-focused: var(--pop-comment-color-default);\n    --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);\n    --pop-comment-icon-background-hover: var(--pop-comment-bg-blank-resting);\n    --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);\n    --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);\n  }\n"), Je = class extends P {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [qe];
+	}
+	static get observedAttributes() {
+		return [
+			"counter",
+			"icon-url",
+			"size",
+			"theme",
+			"variant",
+			"type",
+			"disabled"
+		];
+	}
+	onCounterChanged() {
+		this.render();
+	}
+	onIconUrlChanged() {
+		this.render();
+	}
+	onSizeChanged() {
+		this.render();
+	}
+	onThemeChanged() {
+		this.render();
+	}
+	onVariantChanged() {
+		this.render();
+	}
+	onTypeChanged() {
+		this.render();
+	}
+	onDisabledChanged() {
+		this.render();
+	}
+	get counter() {
+		return Number(this.getAttribute("counter") || "0");
+	}
+	set counter(e) {
+		this.setAttribute("counter", String(e));
+	}
+	get iconUrl() {
+		return this.getAttribute("icon-url") || void 0;
+	}
+	set iconUrl(e) {
+		e === void 0 ? this.removeAttribute("icon-url") : this.setAttribute("icon-url", e);
+	}
+	get size() {
+		return this.getAttribute("size") || "md";
+	}
+	set size(e) {
+		this.setAttribute("size", e);
+	}
+	get theme() {
+		return this.getAttribute("theme") || "brand";
+	}
+	set theme(e) {
+		this.setAttribute("theme", e);
+	}
+	get variant() {
+		return this.getAttribute("variant") || "add";
+	}
+	set variant(e) {
+		this.setAttribute("variant", e);
+	}
+	get type() {
+		return this.getAttribute("type") || "button";
+	}
+	set type(e) {
+		this.setAttribute("type", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+	}
+	onClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopImmediatePropagation();
+			return;
+		}
+		this.emit("pop-click");
+	}
+	get icon() {
+		let e = "";
+		return this.theme === "brand" ? this.variant === "add" ? e = "\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11 4.58331V17.4166M4.58333 11H17.4167\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        " : this.variant === "close" && (e = "\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        ") : this.theme === "neutral" && (this.variant === "add" ? e = "\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.0002 4.58301V17.4163M4.5835 10.9997H17.4168\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        " : this.variant === "close" ? e = "\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.4628 11.4627L20.5373 20.5373M11.4628 20.5373L20.5373 11.4627\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        " : this.variant === "more" ? e = "\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.8335 16.5L7.3335 11L12.8335 5.5\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        " : this.variant === "send" ? e = "\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M18.0394 3.68048C18.2139 3.61601 18.3837 3.78583 18.3193 3.96036L12.3858 20.0241C12.314 20.2185 12.0369 20.2123 11.9739 20.0149L9.89172 13.4908C9.86908 13.4199 9.88424 13.3423 9.93191 13.2851L14.4838 7.82287C14.6536 7.61906 14.3807 7.34616 14.1769 7.516L8.71467 12.0678C8.65746 12.1155 8.57987 12.1307 8.50893 12.108L1.98489 10.0259C1.78743 9.96287 1.78121 9.68575 1.97565 9.61393L18.0394 3.68048Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        " : this.variant === "cancel" && (e = "\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        ")), e;
+	}
+	getTemplate() {
+		let e = this.disabled ? "disabled" : "", t = [
+			"comment-icon",
+			this.size ? `comment-icon--size-${this.size}` : "",
+			this.theme ? `comment-icon--theme-${this.theme}` : "",
+			this.variant ? `comment-icon--variant-${this.variant}` : ""
+		].filter(Boolean).join(" "), n = this.iconUrl ? `<img src="${this.iconUrl}" alt="" class="comment-icon__icon-image" />
+         <slot class="comment-icon__icon" name="icon">${this.icon}</slot>` : `<slot class="comment-icon__icon" name="icon">${this.icon}</slot>`;
+		return `
+      <button
+        class="${t}"
+        part="base"
+        type="${this.type}"
+        ${e}
+      >
+        <pop-focus-indicator class="comment-icon__focus-indicator"></pop-focus-indicator>
+        <div class="comment-icon__inner mask mask-squircle">
+          <div class="comment-icon__icon-container" part="icon">${n}</div>
+        </div>
+      </button>
+    `;
+	}
+};
+customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon", Je);
+//#endregion
+//#region src/components/pop-comment-input.ts
+var Ye = N("\n  :host {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    align-items: flex-end;\n  }\n\n  textarea {\n    flex: 1;\n    min-width: 0;\n    background: none;\n    border: none;\n    outline: none;\n    resize: none;\n    font-family: Inter, sans-serif;\n    font-size: 13px;\n    color: black;\n    line-height: 18px;\n    padding: 5px 0;\n    max-height: 200px;\n    overflow-y: auto;\n    width: 100%;\n    letter-spacing: -0.08px;\n  }\n\n  textarea::placeholder {\n    color: #697586;\n  }\n"), Xe = class extends P {
+	constructor(...e) {
+		super(...e), this.events = {
+			input: "onInput",
+			keydown: "onKeyDown"
+		};
+	}
+	get styleSheets() {
+		return [Ye];
+	}
+	onInput(e) {
+		let t = e.target;
+		t.style.height = "auto", t.style.height = `${t.scrollHeight}px`;
+	}
+	onKeyDown(e) {
+		e.key === "Escape" && (this.gridStore.editingCommentId.value || this.gridStore.replyingTo.value) && (e.stopPropagation(), this.gridStore.editingCommentId.value = null, this.gridStore.replyingTo.value = null);
+	}
+	getValue() {
+		return this.getElement("textarea")?.value ?? "";
+	}
+	setValue(e) {
+		let t = this.getElement("textarea");
+		t && (t.value = e, t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
+	}
+	clear() {
+		let e = this.getElement("textarea");
+		e && (e.value = "", e.style.height = "auto");
+	}
+	focus() {
+		this.getElement("textarea")?.focus();
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = this.gridStore.replyingToComment.value, t = this.gridStore.editingComment.value, n = "Comment";
+			t ? n = "Edit comment..." : e?.author?.name && (n = `Reply to ${e.author.name}`), this.setAttr("textarea", "placeholder", n);
+		});
+	}
+	getTemplate() {
+		return "\n      <textarea rows=\"1\" placeholder=\"Comment\"></textarea>\n    ";
+	}
+};
+F([O(k)], Xe.prototype, "gridStore", void 0), customElements.get("pop-comment-input") || customElements.define("pop-comment-input", Xe);
+//#endregion
+//#region src/components/pop-comment-thread.ts
+var Ze = N("\n  :host {\n    display: block;\n\n    --pop-thread-link: rgba(0, 0, 32, 0.5);\n    --pop-thread-link-hover: rgba(0, 0, 32, 0.8);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --pop-thread-link: rgba(255, 255, 255, 0.5);\n      --pop-thread-link-hover: rgba(255, 255, 255, 0.8);\n    }\n  }\n\n  :host(.dark) {\n    --pop-thread-link: rgba(255, 255, 255, 0.5);\n    --pop-thread-link-hover: rgba(255, 255, 255, 0.8);\n  }\n\n  .thread {\n    align-items: stretch;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .thread__replies {\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding-left: 24px;\n  }\n\n  .thread__more {\n    display: flex;\n    align-items: center;\n    font-size: 13px;\n    gap: 6px;\n    padding-left: 30px;\n    transition: opacity 0.15s ease;\n    width: 100%;\n  }\n\n  .thread__more:hover {\n    opacity: 1;\n  }\n\n  .thread__more-dot {\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: var(--pop-muted-foreground);\n    flex-shrink: 0;\n    opacity: 0.1;\n  }\n"), Qe = 2, $e = class extends P {
+	constructor(...e) {
+		super(...e), this._showAll = !1, this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [Ze];
+	}
+	onClick(e) {
+		e.target.closest(".thread__more-btn") && (this._showAll = !0, this.render());
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = this.getAttribute("comment-id"), t = this.gridStore.scrollingCommentId.value;
+			e && t && this.gridStore.repliesFor(e).some((e) => e.id === t) && (this._showAll = !0), this.gridStore.comments.value, this.render();
+		});
+	}
+	getTemplate() {
+		let e = this.getAttribute("comment-id");
+		if (!e) return "";
+		let t = this.gridStore.repliesFor(e), n = this._showAll || t.length <= Qe ? t : t.slice(0, Qe), r = t.length - n.length, i = r > 0 ? `<div class="thread__more">
+            <div class="thread__more-dot"></div>
+            <button class="thread__more-btn btn-link btn-link--size-sm btn-link--theme-default" type="button">
+              Show ${r} more ${r === 1 ? "reply" : "replies"}
+            </button>
+          </div>` : "";
+		return `
+      <div class="thread">
+        <pop-comment comment-id="${e}"></pop-comment>
+        ${t.length > 0 ? `<div class="thread__replies">
+            ${n.map((e) => `<pop-comment comment-id="${e.id}"></pop-comment>`).join("")}
+            ${i}
+          </div>` : ""}
+      </div>
+    `;
+	}
+};
+F([O(k)], $e.prototype, "gridStore", void 0), customElements.get("pop-comment-thread") || customElements.define("pop-comment-thread", $e);
+//#endregion
+//#region src/helpers/time.ts
+function et(e) {
+	let t = e instanceof Date ? e : new Date(e), n = (Date.now() - t.getTime()) / 1e3;
+	return n < 1 ? "now" : n < 60 ? `${Math.floor(n)}s` : n < 3600 ? `${Math.floor(n / 60)}m` : n < 86400 ? `${Math.floor(n / 3600)}h` : n < 604800 ? `${Math.floor(n / 86400)}d` : `${Math.floor(n / 604800)}w`;
+}
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+var tt = Math.min, R = Math.max, nt = Math.round, rt = Math.floor, z = (e) => ({
+	x: e,
+	y: e
+}), it = {
+	left: "right",
+	right: "left",
+	bottom: "top",
+	top: "bottom"
+};
+function at(e, t, n) {
+	return R(e, tt(t, n));
+}
+function ot(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function B(e) {
+	return e.split("-")[0];
+}
+function st(e) {
+	return e.split("-")[1];
+}
+function ct(e) {
+	return e === "x" ? "y" : "x";
+}
+function lt(e) {
+	return e === "y" ? "height" : "width";
+}
+function V(e) {
+	let t = e[0];
+	return t === "t" || t === "b" ? "y" : "x";
+}
+function ut(e) {
+	return ct(V(e));
+}
+function dt(e, t, n) {
+	n === void 0 && (n = !1);
+	let r = st(e), i = ut(e), a = lt(i), o = i === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
+	return t.reference[a] > t.floating[a] && (o = bt(o)), [o, bt(o)];
+}
+function ft(e) {
+	let t = bt(e);
+	return [
+		pt(e),
+		t,
+		pt(t)
+	];
+}
+function pt(e) {
+	return e.includes("start") ? e.replace("start", "end") : e.replace("end", "start");
+}
+var mt = ["left", "right"], ht = ["right", "left"], gt = ["top", "bottom"], _t = ["bottom", "top"];
+function vt(e, t, n) {
+	switch (e) {
+		case "top":
+		case "bottom": return n ? t ? ht : mt : t ? mt : ht;
+		case "left":
+		case "right": return t ? gt : _t;
+		default: return [];
+	}
+}
+function yt(e, t, n, r) {
+	let i = st(e), a = vt(B(e), n === "start", r);
+	return i && (a = a.map((e) => e + "-" + i), t && (a = a.concat(a.map(pt)))), a;
+}
+function bt(e) {
+	let t = B(e);
+	return it[t] + e.slice(t.length);
+}
+function xt(e) {
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		...e
+	};
+}
+function St(e) {
+	return typeof e == "number" ? {
+		top: e,
+		right: e,
+		bottom: e,
+		left: e
+	} : xt(e);
+}
+function Ct(e) {
+	let { x: t, y: n, width: r, height: i } = e;
+	return {
+		width: r,
+		height: i,
+		top: n,
+		left: t,
+		right: t + r,
+		bottom: n + i,
+		x: t,
+		y: n
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+core@1.7.5/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+function wt(e, t, n) {
+	let { reference: r, floating: i } = e, a = V(t), o = ut(t), s = lt(o), c = B(t), l = a === "y", u = r.x + r.width / 2 - i.width / 2, d = r.y + r.height / 2 - i.height / 2, f = r[s] / 2 - i[s] / 2, p;
+	switch (c) {
+		case "top":
+			p = {
+				x: u,
+				y: r.y - i.height
+			};
+			break;
+		case "bottom":
+			p = {
+				x: u,
+				y: r.y + r.height
+			};
+			break;
+		case "right":
+			p = {
+				x: r.x + r.width,
+				y: d
+			};
+			break;
+		case "left":
+			p = {
+				x: r.x - i.width,
+				y: d
+			};
+			break;
+		default: p = {
+			x: r.x,
+			y: r.y
+		};
+	}
+	switch (st(t)) {
+		case "start":
+			p[o] -= f * (n && l ? -1 : 1);
+			break;
+		case "end":
+			p[o] += f * (n && l ? -1 : 1);
+			break;
+	}
+	return p;
+}
+async function Tt(e, t) {
+	t === void 0 && (t = {});
+	let { x: n, y: r, platform: i, rects: a, elements: o, strategy: s } = e, { boundary: c = "clippingAncestors", rootBoundary: l = "viewport", elementContext: u = "floating", altBoundary: d = !1, padding: f = 0 } = ot(t, e), p = St(f), m = o[d ? u === "floating" ? "reference" : "floating" : u], h = Ct(await i.getClippingRect({
+		element: await (i.isElement == null ? void 0 : i.isElement(m)) ?? !0 ? m : m.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(o.floating)),
+		boundary: c,
+		rootBoundary: l,
+		strategy: s
+	})), g = u === "floating" ? {
+		x: n,
+		y: r,
+		width: a.floating.width,
+		height: a.floating.height
+	} : a.reference, _ = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(o.floating)), v = await (i.isElement == null ? void 0 : i.isElement(_)) && await (i.getScale == null ? void 0 : i.getScale(_)) || {
+		x: 1,
+		y: 1
+	}, y = Ct(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
+		elements: o,
+		rect: g,
+		offsetParent: _,
+		strategy: s
+	}) : g);
+	return {
+		top: (h.top - y.top + p.top) / v.y,
+		bottom: (y.bottom - h.bottom + p.bottom) / v.y,
+		left: (h.left - y.left + p.left) / v.x,
+		right: (y.right - h.right + p.right) / v.x
+	};
+}
+var Et = 50, Dt = async (e, t, n) => {
+	let { placement: r = "bottom", strategy: i = "absolute", middleware: a = [], platform: o } = n, s = o.detectOverflow ? o : {
+		...o,
+		detectOverflow: Tt
+	}, c = await (o.isRTL == null ? void 0 : o.isRTL(t)), l = await o.getElementRects({
+		reference: e,
+		floating: t,
+		strategy: i
+	}), { x: u, y: d } = wt(l, r, c), f = r, p = 0, m = {};
+	for (let n = 0; n < a.length; n++) {
+		let h = a[n];
+		if (!h) continue;
+		let { name: g, fn: _ } = h, { x: v, y, data: b, reset: x } = await _({
+			x: u,
+			y: d,
+			initialPlacement: r,
+			placement: f,
+			strategy: i,
+			middlewareData: m,
+			rects: l,
+			platform: s,
+			elements: {
+				reference: e,
+				floating: t
+			}
+		});
+		u = v ?? u, d = y ?? d, m[g] = {
+			...m[g],
+			...b
+		}, x && p < Et && (p++, typeof x == "object" && (x.placement && (f = x.placement), x.rects && (l = x.rects === !0 ? await o.getElementRects({
+			reference: e,
+			floating: t,
+			strategy: i
+		}) : x.rects), {x: u, y: d} = wt(l, f, c)), n = -1);
+	}
+	return {
+		x: u,
+		y: d,
+		placement: f,
+		strategy: i,
+		middlewareData: m
+	};
+}, Ot = function(e) {
+	return e === void 0 && (e = {}), {
+		name: "flip",
+		options: e,
+		async fn(t) {
+			var n;
+			let { placement: r, middlewareData: i, rects: a, initialPlacement: o, platform: s, elements: c } = t, { mainAxis: l = !0, crossAxis: u = !0, fallbackPlacements: d, fallbackStrategy: f = "bestFit", fallbackAxisSideDirection: p = "none", flipAlignment: m = !0, ...h } = ot(e, t);
+			if ((n = i.arrow) != null && n.alignmentOffset) return {};
+			let g = B(r), _ = V(o), v = B(o) === o, y = await (s.isRTL == null ? void 0 : s.isRTL(c.floating)), b = d || (v || !m ? [bt(o)] : ft(o)), x = p !== "none";
+			!d && x && b.push(...yt(o, m, p, y));
+			let S = [o, ...b], ee = await s.detectOverflow(t, h), C = [], w = i.flip?.overflows || [];
+			if (l && C.push(ee[g]), u) {
+				let e = dt(r, a, y);
+				C.push(ee[e[0]], ee[e[1]]);
+			}
+			if (w = [...w, {
+				placement: r,
+				overflows: C
+			}], !C.every((e) => e <= 0)) {
+				let e = (i.flip?.index || 0) + 1, t = S[e];
+				if (t && (!(u === "alignment" && _ !== V(t)) || w.every((e) => V(e.placement) === _ ? e.overflows[0] > 0 : !0))) return {
+					data: {
+						index: e,
+						overflows: w
+					},
+					reset: { placement: t }
+				};
+				let n = w.filter((e) => e.overflows[0] <= 0).sort((e, t) => e.overflows[1] - t.overflows[1])[0]?.placement;
+				if (!n) switch (f) {
+					case "bestFit": {
+						let e = w.filter((e) => {
+							if (x) {
+								let t = V(e.placement);
+								return t === _ || t === "y";
+							}
+							return !0;
+						}).map((e) => [e.placement, e.overflows.filter((e) => e > 0).reduce((e, t) => e + t, 0)]).sort((e, t) => e[1] - t[1])[0]?.[0];
+						e && (n = e);
+						break;
+					}
+					case "initialPlacement":
+						n = o;
+						break;
+				}
+				if (r !== n) return { reset: { placement: n } };
+			}
+			return {};
+		}
+	};
+}, kt = /*#__PURE__*/ new Set(["left", "top"]);
+async function At(e, t) {
+	let { placement: n, platform: r, elements: i } = e, a = await (r.isRTL == null ? void 0 : r.isRTL(i.floating)), o = B(n), s = st(n), c = V(n) === "y", l = kt.has(o) ? -1 : 1, u = a && c ? -1 : 1, d = ot(t, e), { mainAxis: f, crossAxis: p, alignmentAxis: m } = typeof d == "number" ? {
+		mainAxis: d,
+		crossAxis: 0,
+		alignmentAxis: null
+	} : {
+		mainAxis: d.mainAxis || 0,
+		crossAxis: d.crossAxis || 0,
+		alignmentAxis: d.alignmentAxis
+	};
+	return s && typeof m == "number" && (p = s === "end" ? m * -1 : m), c ? {
+		x: p * u,
+		y: f * l
+	} : {
+		x: f * l,
+		y: p * u
+	};
+}
+var jt = function(e) {
+	return e === void 0 && (e = 0), {
+		name: "offset",
+		options: e,
+		async fn(t) {
+			var n;
+			let { x: r, y: i, placement: a, middlewareData: o } = t, s = await At(t, e);
+			return a === o.offset?.placement && (n = o.arrow) != null && n.alignmentOffset ? {} : {
+				x: r + s.x,
+				y: i + s.y,
+				data: {
+					...s,
+					placement: a
+				}
+			};
+		}
+	};
+}, Mt = function(e) {
+	return e === void 0 && (e = {}), {
+		name: "shift",
+		options: e,
+		async fn(t) {
+			let { x: n, y: r, placement: i, platform: a } = t, { mainAxis: o = !0, crossAxis: s = !1, limiter: c = { fn: (e) => {
+				let { x: t, y: n } = e;
+				return {
+					x: t,
+					y: n
+				};
+			} }, ...l } = ot(e, t), u = {
+				x: n,
+				y: r
+			}, d = await a.detectOverflow(t, l), f = V(B(i)), p = ct(f), m = u[p], h = u[f];
+			if (o) {
+				let e = p === "y" ? "top" : "left", t = p === "y" ? "bottom" : "right", n = m + d[e], r = m - d[t];
+				m = at(n, m, r);
+			}
+			if (s) {
+				let e = f === "y" ? "top" : "left", t = f === "y" ? "bottom" : "right", n = h + d[e], r = h - d[t];
+				h = at(n, h, r);
+			}
+			let g = c.fn({
+				...t,
+				[p]: m,
+				[f]: h
+			});
+			return {
+				...g,
+				data: {
+					x: g.x - n,
+					y: g.y - r,
+					enabled: {
+						[p]: o,
+						[f]: s
+					}
+				}
+			};
+		}
+	};
+};
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function Nt() {
+	return typeof window < "u";
+}
+function H(e) {
+	return Pt(e) ? (e.nodeName || "").toLowerCase() : "#document";
+}
+function U(e) {
+	var t;
+	return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function W(e) {
+	return ((Pt(e) ? e.ownerDocument : e.document) || window.document)?.documentElement;
+}
+function Pt(e) {
+	return Nt() ? e instanceof Node || e instanceof U(e).Node : !1;
+}
+function G(e) {
+	return Nt() ? e instanceof Element || e instanceof U(e).Element : !1;
+}
+function K(e) {
+	return Nt() ? e instanceof HTMLElement || e instanceof U(e).HTMLElement : !1;
+}
+function Ft(e) {
+	return !Nt() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof U(e).ShadowRoot;
+}
+function q(e) {
+	let { overflow: t, overflowX: n, overflowY: r, display: i } = X(e);
+	return /auto|scroll|overlay|hidden|clip/.test(t + r + n) && i !== "inline" && i !== "contents";
+}
+function It(e) {
+	return /^(table|td|th)$/.test(H(e));
+}
+function Lt(e) {
+	try {
+		if (e.matches(":popover-open")) return !0;
+	} catch {}
+	try {
+		return e.matches(":modal");
+	} catch {
+		return !1;
+	}
+}
+var Rt = /transform|translate|scale|rotate|perspective|filter/, zt = /paint|layout|strict|content/, J = (e) => !!e && e !== "none", Bt;
+function Vt(e) {
+	let t = G(e) ? X(e) : e;
+	return J(t.transform) || J(t.translate) || J(t.scale) || J(t.rotate) || J(t.perspective) || !Ut() && (J(t.backdropFilter) || J(t.filter)) || Rt.test(t.willChange || "") || zt.test(t.contain || "");
+}
+function Ht(e) {
+	let t = Z(e);
+	for (; K(t) && !Y(t);) {
+		if (Vt(t)) return t;
+		if (Lt(t)) return null;
+		t = Z(t);
+	}
+	return null;
+}
+function Ut() {
+	return Bt ??= typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none"), Bt;
+}
+function Y(e) {
+	return /^(html|body|#document)$/.test(H(e));
+}
+function X(e) {
+	return U(e).getComputedStyle(e);
+}
+function Wt(e) {
+	return G(e) ? {
+		scrollLeft: e.scrollLeft,
+		scrollTop: e.scrollTop
+	} : {
+		scrollLeft: e.scrollX,
+		scrollTop: e.scrollY
+	};
+}
+function Z(e) {
+	if (H(e) === "html") return e;
+	let t = e.assignedSlot || e.parentNode || Ft(e) && e.host || W(e);
+	return Ft(t) ? t.host : t;
+}
+function Gt(e) {
+	let t = Z(e);
+	return Y(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : K(t) && q(t) ? t : Gt(t);
+}
+function Kt(e, t, n) {
+	t === void 0 && (t = []), n === void 0 && (n = !0);
+	let r = Gt(e), i = r === e.ownerDocument?.body, a = U(r);
+	if (i) {
+		let e = qt(a);
+		return t.concat(a, a.visualViewport || [], q(r) ? r : [], e && n ? Kt(e) : []);
+	} else return t.concat(r, Kt(r, [], n));
+}
+function qt(e) {
+	return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
+}
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+function Jt(e) {
+	let t = X(e), n = parseFloat(t.width) || 0, r = parseFloat(t.height) || 0, i = K(e), a = i ? e.offsetWidth : n, o = i ? e.offsetHeight : r, s = nt(n) !== a || nt(r) !== o;
+	return s && (n = a, r = o), {
+		width: n,
+		height: r,
+		$: s
+	};
+}
+function Yt(e) {
+	return G(e) ? e : e.contextElement;
+}
+function Q(e) {
+	let t = Yt(e);
+	if (!K(t)) return z(1);
+	let n = t.getBoundingClientRect(), { width: r, height: i, $: a } = Jt(t), o = (a ? nt(n.width) : n.width) / r, s = (a ? nt(n.height) : n.height) / i;
+	return (!o || !Number.isFinite(o)) && (o = 1), (!s || !Number.isFinite(s)) && (s = 1), {
+		x: o,
+		y: s
+	};
+}
+var Xt = /*#__PURE__*/ z(0);
+function Zt(e) {
+	let t = U(e);
+	return !Ut() || !t.visualViewport ? Xt : {
+		x: t.visualViewport.offsetLeft,
+		y: t.visualViewport.offsetTop
+	};
+}
+function Qt(e, t, n) {
+	return t === void 0 && (t = !1), !n || t && n !== U(e) ? !1 : t;
+}
+function $(e, t, n, r) {
+	t === void 0 && (t = !1), n === void 0 && (n = !1);
+	let i = e.getBoundingClientRect(), a = Yt(e), o = z(1);
+	t && (r ? G(r) && (o = Q(r)) : o = Q(e));
+	let s = Qt(a, n, r) ? Zt(a) : z(0), c = (i.left + s.x) / o.x, l = (i.top + s.y) / o.y, u = i.width / o.x, d = i.height / o.y;
+	if (a) {
+		let e = U(a), t = r && G(r) ? U(r) : r, n = e, i = qt(n);
+		for (; i && r && t !== n;) {
+			let e = Q(i), t = i.getBoundingClientRect(), r = X(i), a = t.left + (i.clientLeft + parseFloat(r.paddingLeft)) * e.x, o = t.top + (i.clientTop + parseFloat(r.paddingTop)) * e.y;
+			c *= e.x, l *= e.y, u *= e.x, d *= e.y, c += a, l += o, n = U(i), i = qt(n);
+		}
+	}
+	return Ct({
+		width: u,
+		height: d,
+		x: c,
+		y: l
+	});
+}
+function $t(e, t) {
+	let n = Wt(e).scrollLeft;
+	return t ? t.left + n : $(W(e)).left + n;
+}
+function en(e, t) {
+	let n = e.getBoundingClientRect();
+	return {
+		x: n.left + t.scrollLeft - $t(e, n),
+		y: n.top + t.scrollTop
+	};
+}
+function tn(e) {
+	let { elements: t, rect: n, offsetParent: r, strategy: i } = e, a = i === "fixed", o = W(r), s = t ? Lt(t.floating) : !1;
+	if (r === o || s && a) return n;
+	let c = {
+		scrollLeft: 0,
+		scrollTop: 0
+	}, l = z(1), u = z(0), d = K(r);
+	if ((d || !d && !a) && ((H(r) !== "body" || q(o)) && (c = Wt(r)), d)) {
+		let e = $(r);
+		l = Q(r), u.x = e.x + r.clientLeft, u.y = e.y + r.clientTop;
+	}
+	let f = o && !d && !a ? en(o, c) : z(0);
+	return {
+		width: n.width * l.x,
+		height: n.height * l.y,
+		x: n.x * l.x - c.scrollLeft * l.x + u.x + f.x,
+		y: n.y * l.y - c.scrollTop * l.y + u.y + f.y
+	};
+}
+function nn(e) {
+	return Array.from(e.getClientRects());
+}
+function rn(e) {
+	let t = W(e), n = Wt(e), r = e.ownerDocument.body, i = R(t.scrollWidth, t.clientWidth, r.scrollWidth, r.clientWidth), a = R(t.scrollHeight, t.clientHeight, r.scrollHeight, r.clientHeight), o = -n.scrollLeft + $t(e), s = -n.scrollTop;
+	return X(r).direction === "rtl" && (o += R(t.clientWidth, r.clientWidth) - i), {
+		width: i,
+		height: a,
+		x: o,
+		y: s
+	};
+}
+var an = 25;
+function on(e, t) {
+	let n = U(e), r = W(e), i = n.visualViewport, a = r.clientWidth, o = r.clientHeight, s = 0, c = 0;
+	if (i) {
+		a = i.width, o = i.height;
+		let e = Ut();
+		(!e || e && t === "fixed") && (s = i.offsetLeft, c = i.offsetTop);
+	}
+	let l = $t(r);
+	if (l <= 0) {
+		let e = r.ownerDocument, t = e.body, n = getComputedStyle(t), i = e.compatMode === "CSS1Compat" && parseFloat(n.marginLeft) + parseFloat(n.marginRight) || 0, o = Math.abs(r.clientWidth - t.clientWidth - i);
+		o <= an && (a -= o);
+	} else l <= an && (a += l);
+	return {
+		width: a,
+		height: o,
+		x: s,
+		y: c
+	};
+}
+function sn(e, t) {
+	let n = $(e, !0, t === "fixed"), r = n.top + e.clientTop, i = n.left + e.clientLeft, a = K(e) ? Q(e) : z(1);
+	return {
+		width: e.clientWidth * a.x,
+		height: e.clientHeight * a.y,
+		x: i * a.x,
+		y: r * a.y
+	};
+}
+function cn(e, t, n) {
+	let r;
+	if (t === "viewport") r = on(e, n);
+	else if (t === "document") r = rn(W(e));
+	else if (G(t)) r = sn(t, n);
+	else {
+		let n = Zt(e);
+		r = {
+			x: t.x - n.x,
+			y: t.y - n.y,
+			width: t.width,
+			height: t.height
+		};
+	}
+	return Ct(r);
+}
+function ln(e, t) {
+	let n = Z(e);
+	return n === t || !G(n) || Y(n) ? !1 : X(n).position === "fixed" || ln(n, t);
+}
+function un(e, t) {
+	let n = t.get(e);
+	if (n) return n;
+	let r = Kt(e, [], !1).filter((e) => G(e) && H(e) !== "body"), i = null, a = X(e).position === "fixed", o = a ? Z(e) : e;
+	for (; G(o) && !Y(o);) {
+		let t = X(o), n = Vt(o);
+		!n && t.position === "fixed" && (i = null), (a ? !n && !i : !n && t.position === "static" && i && (i.position === "absolute" || i.position === "fixed") || q(o) && !n && ln(e, o)) ? r = r.filter((e) => e !== o) : i = t, o = Z(o);
+	}
+	return t.set(e, r), r;
+}
+function dn(e) {
+	let { element: t, boundary: n, rootBoundary: r, strategy: i } = e, a = [...n === "clippingAncestors" ? Lt(t) ? [] : un(t, this._c) : [].concat(n), r], o = cn(t, a[0], i), s = o.top, c = o.right, l = o.bottom, u = o.left;
+	for (let e = 1; e < a.length; e++) {
+		let n = cn(t, a[e], i);
+		s = R(n.top, s), c = tt(n.right, c), l = tt(n.bottom, l), u = R(n.left, u);
+	}
+	return {
+		width: c - u,
+		height: l - s,
+		x: u,
+		y: s
+	};
+}
+function fn(e) {
+	let { width: t, height: n } = Jt(e);
+	return {
+		width: t,
+		height: n
+	};
+}
+function pn(e, t, n) {
+	let r = K(t), i = W(t), a = n === "fixed", o = $(e, !0, a, t), s = {
+		scrollLeft: 0,
+		scrollTop: 0
+	}, c = z(0);
+	function l() {
+		c.x = $t(i);
+	}
+	if (r || !r && !a) if ((H(t) !== "body" || q(i)) && (s = Wt(t)), r) {
+		let e = $(t, !0, a, t);
+		c.x = e.x + t.clientLeft, c.y = e.y + t.clientTop;
+	} else i && l();
+	a && !r && i && l();
+	let u = i && !r && !a ? en(i, s) : z(0);
+	return {
+		x: o.left + s.scrollLeft - c.x - u.x,
+		y: o.top + s.scrollTop - c.y - u.y,
+		width: o.width,
+		height: o.height
+	};
+}
+function mn(e) {
+	return X(e).position === "static";
+}
+function hn(e, t) {
+	if (!K(e) || X(e).position === "fixed") return null;
+	if (t) return t(e);
+	let n = e.offsetParent;
+	return W(e) === n && (n = n.ownerDocument.body), n;
+}
+function gn(e, t) {
+	let n = U(e);
+	if (Lt(e)) return n;
+	if (!K(e)) {
+		let t = Z(e);
+		for (; t && !Y(t);) {
+			if (G(t) && !mn(t)) return t;
+			t = Z(t);
+		}
+		return n;
+	}
+	let r = hn(e, t);
+	for (; r && It(r) && mn(r);) r = hn(r, t);
+	return r && Y(r) && mn(r) && !Vt(r) ? n : r || Ht(e) || n;
+}
+var _n = async function(e) {
+	let t = this.getOffsetParent || gn, n = this.getDimensions, r = await n(e.floating);
+	return {
+		reference: pn(e.reference, await t(e.floating), e.strategy),
+		floating: {
+			x: 0,
+			y: 0,
+			width: r.width,
+			height: r.height
+		}
+	};
+};
+function vn(e) {
+	return X(e).direction === "rtl";
+}
+var yn = {
+	convertOffsetParentRelativeRectToViewportRelativeRect: tn,
+	getDocumentElement: W,
+	getClippingRect: dn,
+	getOffsetParent: gn,
+	getElementRects: _n,
+	getClientRects: nn,
+	getDimensions: fn,
+	getScale: Q,
+	isElement: G,
+	isRTL: vn
+};
+function bn(e, t) {
+	return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height;
+}
+function xn(e, t) {
+	let n = null, r, i = W(e);
+	function a() {
+		var e;
+		clearTimeout(r), (e = n) == null || e.disconnect(), n = null;
+	}
+	function o(s, c) {
+		s === void 0 && (s = !1), c === void 0 && (c = 1), a();
+		let l = e.getBoundingClientRect(), { left: u, top: d, width: f, height: p } = l;
+		if (s || t(), !f || !p) return;
+		let m = rt(d), h = rt(i.clientWidth - (u + f)), g = rt(i.clientHeight - (d + p)), _ = rt(u), v = {
+			rootMargin: -m + "px " + -h + "px " + -g + "px " + -_ + "px",
+			threshold: R(0, tt(1, c)) || 1
+		}, y = !0;
+		function b(t) {
+			let n = t[0].intersectionRatio;
+			if (n !== c) {
+				if (!y) return o();
+				n ? o(!1, n) : r = setTimeout(() => {
+					o(!1, 1e-7);
+				}, 1e3);
+			}
+			n === 1 && !bn(l, e.getBoundingClientRect()) && o(), y = !1;
+		}
+		try {
+			n = new IntersectionObserver(b, {
+				...v,
+				root: i.ownerDocument
+			});
+		} catch {
+			n = new IntersectionObserver(b, v);
+		}
+		n.observe(e);
+	}
+	return o(!0), a;
+}
+function Sn(e, t, n, r) {
+	r === void 0 && (r = {});
+	let { ancestorScroll: i = !0, ancestorResize: a = !0, elementResize: o = typeof ResizeObserver == "function", layoutShift: s = typeof IntersectionObserver == "function", animationFrame: c = !1 } = r, l = Yt(e), u = i || a ? [...l ? Kt(l) : [], ...t ? Kt(t) : []] : [];
+	u.forEach((e) => {
+		i && e.addEventListener("scroll", n, { passive: !0 }), a && e.addEventListener("resize", n);
+	});
+	let d = l && s ? xn(l, n) : null, f = -1, p = null;
+	o && (p = new ResizeObserver((e) => {
+		let [r] = e;
+		r && r.target === l && p && t && (p.unobserve(t), cancelAnimationFrame(f), f = requestAnimationFrame(() => {
+			var e;
+			(e = p) == null || e.observe(t);
+		})), n();
+	}), l && !c && p.observe(l), t && p.observe(t));
+	let m, h = c ? $(e) : null;
+	c && g();
+	function g() {
+		let t = $(e);
+		h && !bn(h, t) && n(), h = t, m = requestAnimationFrame(g);
+	}
+	return n(), () => {
+		var e;
+		u.forEach((e) => {
+			i && e.removeEventListener("scroll", n), a && e.removeEventListener("resize", n);
+		}), d?.(), (e = p) == null || e.disconnect(), p = null, c && cancelAnimationFrame(m);
+	};
+}
+var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map(), i = {
+		platform: yn,
+		...n
+	}, a = {
+		...i.platform,
+		_c: r
+	};
+	return Dt(e, t, {
+		...i,
+		platform: a
+	});
+}, Dn = N("\n  :host {\n    display: block;\n    width: 100%;\n    --pop-comment-hover: rgba(0, 0, 32, 0.04);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --pop-comment-hover: rgba(255, 255, 255, 0.04);\n    }\n  }\n\n  .comment {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    border-radius: var(--pop-radius-md);\n    outline: 6px solid transparent;\n    text-align: left;\n    transition:\n      background-color 150ms ease,\n      outline-color 150ms ease;\n  }\n\n  :host([data-size=\"sm\"]) .comment,\n  :host:not([data-size]) .comment {\n    --avatar-size: 32px;\n    --width: 32px;\n    gap: 8px;\n  }\n\n  :host([data-size=\"lg\"]) .comment {\n    --avatar-size: 56px;\n    --width: 56px;\n    gap: 12px;\n  }\n\n  .comment--is-selected {\n    background-color: var(--pop-muted);\n    outline-color: var(--pop-muted);\n  }\n\n  :host(.is-signed-in) .comment {\n    cursor: pointer;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .comment:hover .comment__avatar {\n      --avatar-translate-x: 2px;\n    }\n\n    .comment__avatar:hover {\n      /* --avatar-scale: 1.06; */\n    }\n\n    .comment .comment__menu {\n      display: none;\n    }\n\n    .comment:hover .comment__menu {\n      display: flex;\n    }\n  }\n\n  .comment--is-selected .comment__avatar {\n    --avatar-translate-x: 2px;\n  }\n\n  .comment__avatar {\n    --comment-avatar-border-size: 0;\n    --avatar-translate-x: 0px;\n    --avatar-scale: 1;\n    width: var(--avatar-size);\n    height: var(--avatar-size);\n    transform: translateX(var(--avatar-translate-x)) scale(var(--avatar-scale));\n    transition: transform var(--pop-duration-quick) var(--pop-ease-quick);\n  }\n\n  .comment__user {\n    display: flex;\n    width: var(--width);\n    align-items: flex-start;\n    gap: 10px;\n    flex-shrink: 0;\n    align-self: stretch;\n  }\n\n  .comment__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex: 1 0 0;\n    align-self: stretch;\n  }\n\n  .comment__info {\n    display: flex;\n    align-items: flex-start;\n    align-self: stretch;\n  }\n\n  .comment__menu {\n    display: flex;\n    justify-self: flex-end;\n  }\n\n  .comment__menu-trigger {\n    background: none;\n    border: none;\n    cursor: pointer;\n    border-radius: 9999px;\n    aspect-ratio: 1;\n    position: relative;\n  }\n\n  .comment__menu-trigger:before {\n    content: \"\";\n    height: 40px;\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 40px;\n  }\n\n  .comment__user-meta {\n    display: flex;\n    align-items: flex-start;\n    gap: 4px;\n    flex-shrink: 0;\n    align-self: stretch;\n    flex-grow: 1;\n  }\n\n  .comment__user-name {\n    color: var(--pop-foreground);\n    font-feature-settings:\n      \"liga\" off,\n      \"clig\" off;\n    font-family: Inter, sans-serif;\n    font-size: var(--text-widget-base, 13px);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--text-widget-base--line-height, 18px);\n    letter-spacing: -0.08px;\n  }\n\n  .comment__timestamp {\n    color: var(--pop-muted-foreground);\n    font-feature-settings:\n      \"liga\" off,\n      \"clig\" off;\n    font-family: Inter, sans-serif;\n    font-size: var(--text-widget-base, 13px);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--text-widget-base--line-height, 18px);\n    letter-spacing: -0.08px;\n    opacity: 0.5;\n  }\n\n  .comment__text {\n    align-self: stretch;\n    color: var(--pop-foreground);\n    font-feature-settings:\n      \"liga\" off,\n      \"clig\" off;\n    font-family: Inter, sans-serif;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 18px;\n    letter-spacing: -0.08px;\n    text-align: left;\n\n    /* Clamping when not expanded */\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  .comment__text.expanded,\n  .comment--is-selected .comment__text {\n    -webkit-line-clamp: initial;\n    display: block;\n  }\n\n  .comment__mention {\n    color: #155eef;\n    font-weight: 500;\n  }\n\n  .comment__menu {\n    position: relative;\n  }\n\n  .comment__dropdown {\n    background-color: var(--pop-background);\n    border-radius: 6px;\n    box-shadow: var(--pop-shadow-xl);\n    display: none;\n    flex-direction: column;\n    gap: 6px;\n    padding: 6px;\n    pointer-events: auto;\n    position: fixed;\n    width: 120px;\n    z-index: 1000;\n  }\n\n  .comment__dropdown.is-open {\n    display: flex;\n  }\n\n  .comment__dropdown-item {\n    align-items: center;\n    background: none;\n    border-radius: 4px;\n    border: none;\n    color: var(--pop-foreground);\n    cursor: pointer;\n    display: flex;\n    flex: 1 0 0;\n    font-family: Inter, sans-serif;\n    font-size: 14px;\n    font-weight: 500;\n    justify-content: center;\n    min-height: 40px;\n    padding: 0 12px;\n    text-align: left;\n    transition: background-color 100ms ease;\n    width: 100%;\n  }\n\n  .comment__dropdown-item:hover {\n    background-color: var(--pop-comment-hover, rgba(0, 0, 0, 0.04));\n  }\n\n  .comment__dropdown-item--danger {\n    color: #ef4444;\n  }\n\n  .comment__edit-form {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    gap: 8px;\n    margin-top: 4px;\n  }\n\n  .comment__edit-input {\n    width: 100%;\n    background: var(--pop-background, #ffffff);\n    color: var(--pop-foreground, #000000);\n    border: 1px solid var(--pop-border, #e4e4e7);\n    border-radius: var(--pop-radius-sm, 4px);\n    padding: 6px 8px;\n    font-family: Inter, sans-serif;\n    font-size: 13px;\n    line-height: 18px;\n    resize: vertical;\n    outline: none;\n  }\n\n  .comment__edit-input:focus {\n    border-color: var(--pop-ring, #000020);\n  }\n\n  .comment__edit-actions {\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n  }\n\n  .comment__edit-save,\n  .comment__edit-cancel {\n    font-size: 12px;\n    padding: 4px 8px;\n    cursor: pointer;\n  }\n\n  .comment--deleted .comment__text {\n    color: var(--pop-muted-foreground, #697586);\n    font-style: italic;\n    opacity: 0.8;\n  }\n"), On = class extends P {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" }, this._expanded = !1, this._dropdownOpen = !1, this._onOutsideClick = (e) => {
+			let t = e.composedPath(), n = this.getElement(".comment__dropdown"), r = this.getElement(".comment__menu-trigger");
+			n && r && !t.includes(n) && !t.includes(r) && this.closeDropdown();
+		}, this._timeUpdateTimer = null;
+	}
+	static get observedAttributes() {
+		return ["data-size", "comment-id"];
+	}
+	onDataSizeChanged() {
+		this.render();
+	}
+	onCommentIdChanged() {
+		this.render();
+	}
+	get size() {
+		return this.getAttribute("data-size") || "sm";
+	}
+	get commentAvatarSize() {
+		return this.size === "sm" ? "xs" : "sm";
+	}
+	get styleSheets() {
+		return [Dn];
+	}
+	toggleDropdown() {
+		this._dropdownOpen ? this.closeDropdown() : this.openDropdown();
+	}
+	openDropdown() {
+		this._dropdownOpen = !0;
+		let e = this.getElement(".comment__dropdown"), t = this.getElement(".comment__menu-trigger");
+		if (e && t) {
+			e.classList.add("is-open");
+			let n = () => {
+				En(t, e, {
+					placement: "bottom-end",
+					middleware: [
+						Cn(4),
+						Tn(),
+						wn({ padding: 8 })
+					],
+					strategy: "fixed"
+				}).then(({ x: t, y: n }) => {
+					Object.assign(e.style, {
+						left: `${t}px`,
+						top: `${n}px`,
+						position: "fixed"
+					});
+				});
+			};
+			this._floatingCleanup = Sn(t, e, n), document.addEventListener("mousedown", this._onOutsideClick);
+		}
+	}
+	closeDropdown() {
+		this._dropdownOpen = !1;
+		let e = this.getElement(".comment__dropdown");
+		e && e.classList.remove("is-open"), this._floatingCleanup &&= (this._floatingCleanup(), void 0), document.removeEventListener("mousedown", this._onOutsideClick);
+	}
+	async deleteComment() {
+		let e = this.getAttribute("comment-id");
+		e && confirm("Are you sure you want to delete this comment?") && await this.gridStore.deleteComment(e);
+	}
+	async flagComment() {
+		let e = this.getAttribute("comment-id");
+		e && (await this.gridStore.flagComment(e) ? alert("Comment flagged successfully.") : alert("Failed to flag comment."));
+	}
+	onClick(e) {
+		let t = e.target;
+		if (t.closest(".comment__menu-trigger")) {
+			e.stopPropagation(), this.toggleDropdown();
+			return;
+		}
+		let n = t.closest(".comment__dropdown-item");
+		if (n) {
+			e.stopPropagation();
+			let t = n.getAttribute("data-action"), r = this.getAttribute("comment-id");
+			t === "edit" && r ? (this.gridStore.replyingTo.value = null, this.gridStore.editingCommentId.value = r) : t === "delete" ? this.deleteComment() : t === "flag" && this.flagComment(), this.closeDropdown();
+			return;
+		}
+		if (t.closest(".comment__dropdown")) {
+			e.stopPropagation();
+			return;
+		}
+		if (!E.value) return;
+		let r = this.getAttribute("comment-id");
+		r && this.gridStore.comments.value.find((e) => e.id === r)?.status !== "deleted" && (this.gridStore.replyingTo.value === r ? this.gridStore.replyingTo.value = null : this.gridStore.replyingTo.value = r, this.expandText());
+	}
+	expandText() {
+		let e = this.getElement(".comment__text");
+		if (!this._expanded && e) {
+			let t = e.offsetHeight;
+			this._expanded = !0, this.render();
+			let n = this.getElement(".comment__text");
+			if (n) {
+				let e = n.scrollHeight;
+				n.style.height = `${t}px`, n.style.overflow = "hidden", n.offsetHeight, n.style.transition = "height var(--pop-duration-quick) var(--pop-ease-quick)", n.style.height = `${e}px`, setTimeout(() => {
+					n.style.height = "", n.style.overflow = "";
+				}, 300);
+			}
+		}
+	}
+	disconnectedCallback() {
+		this.closeDropdown(), this.stopTimeUpdates(), super.disconnectedCallback();
+	}
+	startTimeUpdates() {
+		this.stopTimeUpdates();
+		let e = this.getAttribute("comment-id");
+		if (!e) return;
+		let t = this.gridStore.comments.value.find((t) => t.id === e);
+		if (!t) return;
+		let n = () => {
+			let e = this.getElement(".comment__timestamp");
+			e && (e.textContent = et(t.createdAt));
+			let r = Date.now() - (typeof t.createdAt == "number" ? t.createdAt : Date.parse(String(t.createdAt))), i = 6e4;
+			i = r < 6e4 ? 5e3 : r < 36e5 ? 6e4 : 18e5, this._timeUpdateTimer = setTimeout(n, i);
+		}, r = Date.now() - (typeof t.createdAt == "number" ? t.createdAt : Date.parse(String(t.createdAt))) < 6e4 ? 5e3 : 6e4;
+		this._timeUpdateTimer = setTimeout(n, r);
+	}
+	stopTimeUpdates() {
+		this._timeUpdateTimer &&= (clearTimeout(this._timeUpdateTimer), null);
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = this.getAttribute("comment-id"), t = E.value, n = this.gridStore.replyingTo.value, r = this.gridStore.editingCommentId.value, i = this.gridStore.scrollingCommentId.value;
+			this.classList.toggle("is-signed-in", t !== null), this.classList.toggle("is-replying", e !== null && n === e), this.classList.toggle("is-editing", e !== null && r === e), this.gridStore.comments.value, this.render(), this.startTimeUpdates(), e && i === e && setTimeout(() => {
+				let t = this.shadowRoot?.querySelector(`#comment-${e}`);
+				t ? t.scrollIntoView({
+					behavior: "smooth",
+					block: "center"
+				}) : this.scrollIntoView({
+					behavior: "smooth",
+					block: "center"
+				}), this.gridStore.scrollingCommentId.value = null;
+			}, 50);
+		});
+	}
+	getTemplate() {
+		let e = this.getAttribute("comment-id");
+		if (!e) return "";
+		let t = this.gridStore.comments.value.find((t) => t.id === e);
+		if (!t) return "";
+		let n = t.status === "deleted", r = t.authorDeleted === !0, i = n || r, a = i ? "" : t.author?.image ? `<img src="${t.author.image}" alt="${t.author.name ?? "User avatar"}" />` : L(t.author?.name), o = this.gridStore.replyingTo.value, s = e !== null && o === e, c = this.size, l = E.value && t.author && E.value.id === t.author.id, u = E.value && !n ? `<div class="comment__menu">
+            <button class="comment__menu-trigger" type="button">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9 9.5C9.27614 9.5 9.5 9.27614 9.5 9C9.5 8.72386 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.72386 8.5 9C8.5 9.27614 8.72386 9.5 9 9.5Z"
+                  fill="white"
+                />
+                <path
+                  d="M12.5 9.5C12.7761 9.5 13 9.27614 13 9C13 8.72386 12.7761 8.5 12.5 8.5C12.2239 8.5 12 8.72386 12 9C12 9.27614 12.2239 9.5 12.5 9.5Z"
+                  fill="white"
+                />
+                <path
+                  d="M5.5 9.5C5.77614 9.5 6 9.27614 6 9C6 8.72386 5.77614 8.5 5.5 8.5C5.22386 8.5 5 8.72386 5 9C5 9.27614 5.22386 9.5 5.5 9.5Z"
+                  fill="white"
+                />
+                <path
+                  d="M9 9.5C9.27614 9.5 9.5 9.27614 9.5 9C9.5 8.72386 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.72386 8.5 9C8.5 9.27614 8.72386 9.5 9 9.5Z"
+                  stroke="#000020"
+                  stroke-opacity="0.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12.5 9.5C12.7761 9.5 13 9.27614 13 9C13 8.72386 12.7761 8.5 12.5 8.5C12.2239 8.5 12 8.72386 12 9C12 9.27614 12.2239 9.5 12.5 9.5Z"
+                  stroke="#000020"
+                  stroke-opacity="0.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M5.5 9.5C5.77614 9.5 6 9.27614 6 9C6 8.72386 5.77614 8.5 5.5 8.5C5.22386 8.5 5 8.72386 5 9C5 9.27614 5.22386 9.5 5.5 9.5Z"
+                  stroke="#000020"
+                  stroke-opacity="0.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+            <div class="comment__dropdown">
+              ${l ? "<button class=\"comment__dropdown-item\" type=\"button\" data-action=\"edit\">Edit</button>\n                     <button class=\"comment__dropdown-item comment__dropdown-item--danger\" type=\"button\" data-action=\"delete\">Delete</button>" : ""}
+              <button class="comment__dropdown-item" type="button" data-action="flag">Flag</button>
+            </div>
+          </div>` : "";
+		return `
+      <div
+        class="comment comment--size-${c}${s ? " comment--is-selected" : ""}${n ? " comment--deleted" : ""}"
+        id="comment-${e}"
+      >
+        <div class="comment__user">
+          <pop-comment-avatar
+            class="comment__avatar"
+            size="${this.commentAvatarSize}"
+            data-color-key="${t.author?.id ?? t.author?.name ?? ""}"
+            ${i ? "deleted" : ""}
+          >
+            ${a}
+          </pop-comment-avatar>
+        </div>
+        <div class="comment__content">
+          <div class="comment__info">
+            <div class="comment__user-meta">
+              <div class="comment__user-name">
+                ${n ? "[Deleted]" : r ? "[Deleted user]" : t.author?.name ?? ""}
+              </div>
+              <div class="comment__timestamp">${et(t.createdAt)}</div>
+            </div>
+            ${u}
+          </div>
+          <div class="comment__text${this._expanded ? " expanded" : ""}">${t.body}</div>
+        </div>
+      </div>
+    `;
+	}
+};
+F([O(k)], On.prototype, "gridStore", void 0), customElements.get("pop-comment") || customElements.define("pop-comment", On);
+//#endregion
+//#region src/components/pop-feed.ts
+var kn = N("\n  :host {\n    display: flex;\n    background: var(--pop-background);\n    border-radius: var(--pop-radius-2xl);\n    border: 1px solid var(--pop-background);\n    box-shadow: var(--pop-shadow-3xl);\n    display: block;\n    left: 0;\n    max-height: 400px;\n    max-width: 400px;\n    min-width: 343px;\n    opacity: 0;\n    overflow: hidden;\n    padding: 0 4px 0 0;\n    pointer-events: none;\n    position: fixed;\n    top: 0;\n    width: 100%;\n    z-index: 9999;\n    transform: scale(0.94);\n    transition:\n      opacity var(--pop-duration-quick) var(--pop-ease-quick),\n      transform var(--pop-duration-quick) var(--pop-ease-quick),\n      display var(--pop-duration-quick) allow-discrete;\n  }\n\n  :host([data-current-placement=\"top-start\"]) {\n    transform-origin: left bottom;\n  }\n\n  :host([data-current-placement=\"bottom-start\"]) {\n    transform-origin: left top;\n  }\n\n  :host([data-current-placement=\"top-end\"]) {\n    transform-origin: right bottom;\n  }\n\n  :host([data-current-placement=\"bottom-end\"]) {\n    transform-origin: right top;\n  }\n\n  :host([data-current-placement=\"top\"]) {\n    transform-origin: bottom;\n  }\n\n  :host([data-current-placement=\"bottom\"]) {\n    transform-origin: top;\n  }\n\n  :host([open]) {\n    opacity: 1;\n    pointer-events: auto;\n    transform: scale(1);\n\n    @starting-style {\n      display: flex;\n      opacity: 0;\n      transform: scale(0.94);\n    }\n  }\n\n  .feed {\n    display: grid;\n    grid-template-rows: 1fr 50px;\n  }\n\n  .feed__content {\n    align-items: flex-start;\n    align-self: stretch;\n    display: flex;\n    gap: 8px;\n    min-height: 80px;\n    max-height: 290px;\n  }\n\n  .feed__empty {\n    padding: 24px 16px 24px 8px;\n    text-align: center;\n    font-family: Inter, sans-serif;\n    font-size: 13px;\n    color: var(--pop-muted-foreground);\n    line-height: 18px;\n  }\n\n  .feed__footer {\n    position: absolute;\n    bottom: 0;\n    min-height: 50px;\n    width: 100%;\n  }\n\n  .feed__main {\n    align-items: stretch;\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    gap: 16px;\n    min-height: 100%;\n    overflow: hidden auto;\n    padding: 8px 10px 8px 8px;\n  }\n\n  .feed__main::-webkit-scrollbar {\n    width: 4px;\n  }\n\n  .feed__main::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .feed__main::-webkit-scrollbar-thumb {\n    background: var(--pop-border);\n    border-radius: 100px;\n  }\n"), An = class extends P {
+	constructor(...e) {
+		super(...e), this._footerChild = null, this._wasOpen = !1;
+	}
+	get styleSheets() {
+		return [kn];
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("mousedown", this), document.addEventListener("keydown", this);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("mousedown", this), document.removeEventListener("keydown", this), super.disconnectedCallback();
+	}
+	handleEvent(e) {
+		if (e.type === "mousedown") {
+			this.onOutsideClick(e);
+			return;
+		}
+		if (e.type === "keydown") {
+			this.onKeyDown(e);
+			return;
+		}
+		super.handleEvent(e);
+	}
+	onOutsideClick(e) {
+		if (!this.gridStore.open.value) return;
+		let t = e.composedPath(), n = this.getRootNode(), r = n instanceof ShadowRoot ? n.host : null;
+		!t.includes(this) && (!r || !t.includes(r)) && (this.gridStore.open.value = !1);
+	}
+	onKeyDown(e) {
+		e.key === "Escape" && (this.gridStore.open.value = !1);
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = this.gridStore.open.value;
+			e && !this._wasOpen && this.gridStore.grid.value && me(this.gridStore.apiUrl, this.gridStore.publicKey), this._wasOpen = e, this.update();
+		});
+	}
+	update() {
+		this.gridStore.open.value ? this.setAttribute("open", "") : this.removeAttribute("open");
+		let e = this.getElement(".feed__main");
+		if (e) {
+			let t = this.gridStore.topLevelComments.value;
+			if (t.length === 0) e.querySelector(".feed__empty") || (e.innerHTML = "<div class=\"feed__empty\">Waiting for your thoughts…</div>");
+			else {
+				let n = Array.from(e.querySelectorAll("pop-comment-thread")).map((e) => e.getAttribute("comment-id")), r = t.map((e) => e.id);
+				(n.length !== r.length || n.some((e, t) => e !== r[t])) && (e.innerHTML = t.map((e) => `<pop-comment-thread comment-id="${e.id}"></pop-comment-thread>`).join(""));
+			}
+		}
+		let t = this.getElement(".feed__footer");
+		if (t) {
+			let e = E.value === null ? "pop-auth-panel" : "pop-comment-bar";
+			this._footerChild !== e && (this._footerChild = e, t.innerHTML = `<${e}></${e}>`);
+		}
+	}
+	getTemplate() {
+		return "\n      <div class=\"feed\">\n        <div class=\"feed__content\">\n          <div class=\"feed__main\"></div>\n        </div>\n        <div class=\"feed__footer\"></div>\n      </div>\n    ";
+	}
+};
+F([O(k)], An.prototype, "gridStore", void 0), customElements.get("pop-feed") || customElements.define("pop-feed", An);
+//#endregion
+//#region node_modules/.pnpm/composed-offset-position@0.0.6_@floating-ui+utils@0.2.11/node_modules/composed-offset-position/dist/composed-offset-position.browser.min.mjs
+function jn(e) {
+	return Nn(e);
+}
+function Mn(e) {
+	return e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode;
+}
+function Nn(e) {
+	for (let t = e; t; t = Mn(t)) if (t instanceof Element && getComputedStyle(t).display === "none") return null;
+	for (let t = Mn(e); t; t = Mn(t)) {
+		if (!(t instanceof Element)) continue;
+		let e = getComputedStyle(t);
+		if (e.display !== "contents" && (e.position !== "static" || Vt(e) || t.tagName === "BODY")) return t;
+	}
+	return null;
+}
+//#endregion
+//#region src/components/pop-grid.ts
+var Pn = "https://www.popgrids.io", Fn = N("\n  :host {\n    display: block;\n    position: relative;\n  }\n\n  .grid {\n    display: flex;\n    height: 100%;\n    position: relative;\n    width: 100%;\n  }\n\n  .grid--align-start {\n    justify-content: flex-start;\n  }\n\n  .grid--align-center {\n    justify-content: center;\n  }\n\n  .grid--align-end {\n    justify-content: flex-end;\n  }\n"), In = class extends P {
+	constructor(...e) {
+		super(...e), this._initialized = !1;
+	}
+	get styleSheets() {
+		return [Fn];
+	}
+	connectedCallback() {
+		if (this._initialized) return;
+		this._initialized = !0;
+		let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? Pn, n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
+		this._store = new k({
+			apiUrl: t,
+			publicKey: e,
+			pageUrl: n,
+			externalId: r
+		}), _e(this, this._store), super.connectedCallback(), this._store.load().then((n) => {
+			n && me(t, e);
+		});
+	}
+	disconnectedCallback() {
+		this._floatingCleanup?.(), this._store.destroy(), ve(this), super.disconnectedCallback();
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = this._store.grid.value, t = this.getElement(".grid");
+			if (!t) return;
+			let n = Array.from(t.classList).filter((e) => e.startsWith("grid--"));
+			if (n.length > 0 && t.classList.remove(...n), e) {
+				e.align && t.classList.add(`grid--align-${e.align}`), e.appearance && t.classList.add(`grid--appearance-${e.appearance}`), e.icon && t.classList.add(`grid--icon-${e.icon}`), e.layout && t.classList.add(`grid--layout-${e.layout}`), e.position && t.classList.add(`grid--position-${e.position}`);
+				let n = e.previewCount ?? this._store.previewCount;
+				t.classList.add(`grid--preview-${n}`);
+			}
+		}), this.addEffect(() => {
+			let e = this._store.open.value;
+			if (this._floatingCleanup &&= (this._floatingCleanup(), void 0), !e) return;
+			let t = this.getElement("pop-widget"), n = this.getElement("pop-feed");
+			if (!t || !n) return;
+			let r = this._store.grid.value;
+			if (!r) return;
+			let i = [];
+			i = [Cn({
+				mainAxis: r.position === "down" ? -16 : -54,
+				crossAxis: -18
+			})], (!r.position || r.position === "auto") && i.push(Tn({
+				fallbackPlacements: ["bottom-start", "top-start"],
+				fallbackStrategy: "bestFit",
+				padding: 16
+			}));
+			let a = (e) => yn.getOffsetParent(e, jn), o = () => {
+				En(t, n, {
+					placement: r.position === "down" ? "bottom-start" : "top-start",
+					middleware: i,
+					strategy: "fixed",
+					platform: {
+						...yn,
+						getOffsetParent: a
+					}
+				}).then(({ x: e, y: t, placement: r }) => {
+					n.setAttribute("data-current-placement", r), Object.assign(n.style, {
+						left: `${e}px`,
+						top: `${t}px`
+					});
+				});
+			};
+			this._floatingCleanup = Sn(t, n, o);
+		});
+	}
+	getTemplate() {
+		return "\n      <div class=\"grid\">\n        <pop-widget></pop-widget>\n        <pop-feed></pop-feed>\n      </div>\n    ";
+	}
+};
+customElements.get("pop-grid") || customElements.define("pop-grid", In);
+//#endregion
+//#region src/components/pop-widget.ts
+var Ln = N("\n  :host {\n    --error-badge-bg: #fef2f2;\n    --error-badge-text: #991b1b;\n    --error-badge-border: #fecaca;\n\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --error-badge-bg: #450a0a;\n      --error-badge-text: #fca5a5;\n      --error-badge-border: #7f1d1d;\n    }\n  }\n\n  :host(.dark) {\n    --error-badge-bg: #450a0a;\n    --error-badge-text: #fca5a5;\n    --error-badge-border: #7f1d1d;\n  }\n\n  :host([data-error]) {\n    cursor: default;\n  }\n\n  .error-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 10px;\n    border-radius: var(--pop-radius-full);\n    border: 1px solid var(--error-badge-border);\n    background: var(--error-badge-bg);\n    color: var(--error-badge-text);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    white-space: nowrap;\n  }\n\n  .widget {\n    display: inline-flex;\n    align-items: flex-start;\n  }\n\n  .widget > :not([hidden]) ~ :not([hidden]) {\n    margin-left: -6px;\n  }\n\n  .skeleton {\n    width: 32px;\n    height: 32px;\n    background: var(--pop-muted);\n    animation: pulse 1.5s ease-in-out infinite;\n  }\n\n  @keyframes pulse {\n    0%,\n    100% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  .count {\n    --count-size: calc(32px + var(--count-border-size));\n    --count-background: var(--pop-background);\n    --count-border-color: rgba(0 0 32 / 16%);\n    --count-border-size: 1px;\n    --count-color: var(--pop-foreground);\n\n    align-items: center;\n    background-color: var(--pop-background);\n    display: flex;\n    flex-shrink: 0;\n    justify-content: center;\n    padding: calc(var(--count-border-size) / 2);\n    position: relative;\n    z-index: 10;\n\n    width: calc(var(--count-size) + (calc(var(--count-border-size))));\n    height: calc(var(--count-size) + (calc(var(--count-border-size))));\n  }\n\n  .count__background {\n    background-color: var(--count-border-color);\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n\n  .count__content {\n    align-items: center;\n    background: var(--count-background);\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    height: var(--count-size);\n    width: var(--count-size);\n  }\n\n  .count__label {\n    color: var(--count-color);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    letter-spacing: -0.96px;\n    line-height: 28px;\n    text-align: center;\n    user-select: none;\n  }\n\n  .count__label-container {\n    align-items: center;\n    background: var(--pop-background);\n    display: flex;\n    height: calc(100% - calc(var(--count-border-size) * 2));\n    justify-content: center;\n    position: relative;\n    text-indent: calc(calc(var(--count-border-size) * 2) * -1);\n    width: calc(100% - calc(var(--count-border-size) * 2));\n    z-index: 20;\n  }\n"), Rn = class extends P {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [Ln];
+	}
+	onClick() {
+		this.gridStore.error.value || (this.gridStore.open.value = !this.gridStore.open.value);
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			this.gridStore.loading.value, this.gridStore.error.value, this.gridStore.previewAvatars.value, this.gridStore.comments.value, this.gridStore.grid.value;
+			let e = !!this.gridStore.error.value;
+			this.toggleAttribute("data-error", e), e && this.gridStore.open.value && (this.gridStore.open.value = !1), this.render();
+		});
+	}
+	getTemplate() {
+		if (this.gridStore.loading.value) return "<div class=\"widget\"><div class=\"skeleton mask mask-squircle\"></div></div>";
+		if (this.gridStore.error.value) return "<div class=\"error-badge\">Error: there was a problem loading the PopGrid</div>";
+		let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length;
+		return `
+      <div class="widget">
+        ${e.map((t, n) => {
+			let r = e.length + n, i = t?.id ?? t?.name ?? "";
+			return t?.image ? `<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
+            <img src="${t.image}" alt="${t.name ?? "User"}" />
+          </pop-comment-avatar>` : `<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
+          ${L(t?.name)}
+        </pop-comment-avatar>`;
+		}).join("")}
+        <div class="count mask mask-squircle">
+          <span class="count__content mask mask-squircle">
+            <div class="count__background mask mask-squircle"></div>
+            <div class="count__label-container mask mask-squircle">
+              <div class="count__label">${t}</div>
+            </div>
+          </span>
+        </div>
+      </div>
+    `;
+	}
+};
+//#endregion
+//#region src/index.ts
+if (F([O(k)], Rn.prototype, "gridStore", void 0), customElements.get("pop-widget") || customElements.define("pop-widget", Rn), typeof document < "u") {
+	let e = "https://rsms.me/inter/inter.css";
+	if (!document.querySelector(`link[href="${e}"]`)) {
+		let t = document.createElement("link");
+		t.rel = "stylesheet", t.href = e, document.head.appendChild(t);
+	}
+}
+//#endregion
+
+//# sourceMappingURL=embed.js.map