@popgrids/embed 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,1071 +1,1272 @@
-var _t=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Tt=Object.getPrototypeOf;var Mt=Reflect.get;var i=(s,a,t,e)=>{for(var r=e>1?void 0:e?Et(a,t):a,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(e?o(a,t,r):o(r))||r);return e&&r&&_t(a,t,r),r};var l=(s,a,t)=>Mt(Tt(s),t,a);import{PopElement as Ht}from"@popgrids/ui";import{html as $t}from"lit";import{customElement as Bt}from"lit/decorators.js";import{classMap as zt}from"lit/directives/class-map.js";import{css as qt,unsafeCSS as Lt}from"lit";var F="./swirling-ovals-ZDTHSA3L.gif";var Z=qt`
-  :host {
-    display: flex;
-    width: 100%;
-  }
-
-  .auth-join {
-    background-image: url("${Lt(F)}"), none;
-    background-color: lightgray;
-    background-position: 79% center;
-    background-size:
-      8.215% 59.149%,
-      auto;
-    background-repeat: no-repeat, repeat;
-    background-color: var(--color-surface-bg-default, #fff);
-    border: none;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: var(--spacing-sm, 6px);
-    justify-content: flex-end;
-    padding: var(--spacing-xl, 16px) var(--spacing-md, 8px);
-    width: 100%;
-  }
-
-  .auth-join__actions {
-    color: var(--color-text-text-default, #000);
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
-    display: flex;
-    padding: 0px var(--spacing-md, 8px);
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 600;
-  }
-
-  .auth-join__logo {
-    display: flex;
-    width: 75px;
-    height: 12px;
-    padding: 0px var(--spacing-none, 0px);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: var(--color-text-text-default, #000);
-  }
-`;var j=class extends Ht{handleClick(){this.emit("pop-click")}render(){return $t` <button
-      class=${zt({"auth-join":!0})}
-      part="base"
-      type="button"
-      @click=${this.handleClick}
-    >
-      <div class="auth-join__actions">
-        Join the Conversation
-        <svg
-          class="auth-join__logo"
-          width="75"
-          height="12"
-          viewBox="0 0 75 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4.58333 0.265686C1.0463 0.265686 0 2.5714 0 5.47711C0 6.55283 0.115741 7.6114 0.25 8.67426C0.300926 9.08997 0.282407 9.54854 0.365741 9.96426C0.583333 11.0571 1.69444 11.5628 2.77315 11.5628C4.25 11.5628 5.23148 10.7014 5.23148 9.3214C5.23148 8.52426 4.94907 8.0014 4.13426 7.69283C4.08333 7.67569 4.03241 7.66283 4.03241 7.59854C4.03241 7.4914 4.21759 7.41426 4.33333 7.41426C4.73148 7.41426 5.36111 7.78283 5.91204 7.78283C8.06944 7.78283 9.26389 5.86283 9.26389 4.06283C9.26389 1.44854 7.18518 0.265686 4.58333 0.265686ZM4.56481 5.91854C4.43056 5.91854 4.31481 5.8114 4.31481 5.68711C4.31481 5.51997 4.56481 5.39569 4.64815 5.25854C4.8287 4.94997 4.87963 4.42711 4.87963 4.07569C4.87963 3.65997 4.76389 2.89283 4.48148 2.58426C4.39815 2.49426 4.28241 2.44711 4.28241 2.32283C4.28241 2.19854 4.41667 2.0914 4.5463 2.0914C5.11111 2.0914 5.39352 3.62997 5.39352 4.02854C5.39352 4.45711 5.24537 5.91854 4.56481 5.91854Z"
-            fill="currentColor"
-          />
-          <path
-            d="M14.9259 0.527108C11.4074 0.527108 9.2963 2.83282 9.2963 5.99568C9.2963 9.15854 11.4028 11.4643 14.9259 11.4643C18.4491 11.4643 20.537 9.12854 20.537 5.99568C20.537 2.86282 18.412 0.527108 14.9259 0.527108ZM15.0787 9.89997C15.0232 9.96425 14.912 10.0843 14.7778 10.0843C14.6435 10.0843 14.5139 9.97711 14.5139 9.85282C14.5139 9.80568 14.9445 9.20568 15.0139 9.02139C15.2778 8.29711 15.3287 7.51282 15.3287 6.74568C15.3287 5.71711 15.1296 4.39282 14.4491 3.54854C14.3148 3.39425 13.9028 3.10282 13.9028 2.93568C13.9028 2.81139 14.0185 2.70425 14.1528 2.70425C14.2685 2.70425 14.3843 2.79854 14.4676 2.85854C15.5278 3.67282 15.8472 5.53282 15.8472 6.74568C15.8472 7.69711 15.8056 9.08568 15.0833 9.89568L15.0787 9.89997Z"
-            fill="currentColor"
-          />
-          <path
-            d="M25.375 0.265686C21.838 0.265686 20.7917 2.5714 20.7917 5.47711C20.7917 6.55283 20.9074 7.6114 21.0417 8.67426C21.0926 9.08997 21.0741 9.54854 21.1574 9.96426C21.375 11.0571 22.4861 11.5628 23.5648 11.5628C25.0417 11.5628 26.0231 10.7014 26.0231 9.3214C26.0231 8.52426 25.7407 8.0014 24.9259 7.69283C24.875 7.67569 24.8241 7.66283 24.8241 7.59854C24.8241 7.4914 25.0092 7.41426 25.125 7.41426C25.5231 7.41426 26.1528 7.78283 26.7037 7.78283C28.8611 7.78283 30.0555 5.86283 30.0555 4.06283C30.0555 1.44854 27.9815 0.265686 25.375 0.265686ZM25.3611 5.91854C25.2268 5.91854 25.1111 5.8114 25.1111 5.68711C25.1111 5.51997 25.3611 5.39569 25.4444 5.25854C25.625 4.94997 25.6759 4.42711 25.6759 4.07569C25.6759 3.65997 25.5602 2.89283 25.2778 2.58426C25.1944 2.49426 25.0787 2.44711 25.0787 2.32283C25.0787 2.19854 25.213 2.0914 25.3426 2.0914C25.9074 2.0914 26.1898 3.62997 26.1898 4.02854C26.1898 4.45711 26.0417 5.91854 25.3611 5.91854Z"
-            fill="currentColor"
-          />
-          <path
-            d="M37.3843 4.81284C36.1898 4.81284 34.5278 5.31855 34.5278 6.64284C34.5278 7.39713 35.125 8.5157 36.0741 8.5157C36.6713 8.5157 37.0556 8.08713 37.2546 8.08713C37.3056 8.08713 37.3519 8.11713 37.3519 8.16427C37.3519 8.60998 36.4213 8.81141 36.0556 8.81141C34.7778 8.81141 34.0972 7.7957 34.0972 6.71998C34.0972 5.39998 35.4398 4.38427 36.8009 4.38427C37.1991 4.38427 37.6158 4.49141 38.0139 4.49141C39.1945 4.49141 40.0371 3.50998 40.0371 2.46427C40.0371 0.728554 37.8148 0.329982 36.3333 0.329982C32.3982 0.329982 30.1065 2.6957 30.1065 6.29141C30.1065 9.61284 31.9676 11.73 35.6528 11.73C38.0417 11.73 40.6482 10.7786 40.6482 8.19427C40.6482 6.42855 39.4028 4.81284 37.3796 4.81284H37.3843Z"
-            fill="currentColor"
-          />
-          <path
-            d="M48.3611 7.42711C48.0602 7.42711 47.8148 7.53426 47.5648 7.53426C47.5139 7.53426 47.5 7.48711 47.5 7.45712C47.5 7.34997 47.5509 7.30283 47.6342 7.27283C47.9167 7.18283 48.2176 7.11854 48.4954 6.99426C49.7592 6.4414 50.5046 5.45569 50.5046 4.15283C50.5046 1.79997 48.3287 0.372829 45.9398 0.372829C45.0741 0.372829 44.2315 0.604257 43.5 0.972829C41.5092 1.9714 41.125 3.40283 41.0092 5.35283C40.9583 6.11997 40.9583 6.8914 40.9583 7.65854V9.51854C40.9583 10.6843 41.787 11.6228 43.0972 11.6228C44.0416 11.6228 44.8889 10.9928 45.1065 10.1614C45.2222 9.66854 45.1574 9.08569 45.1574 8.60997C45.1574 8.56283 45.1759 8.54997 45.2222 8.54997C45.2685 8.54997 45.3241 8.57997 45.3565 8.59711C45.9398 9.90426 46.7361 11.5628 48.5417 11.5628C49.787 11.5628 50.8148 10.7485 50.8148 9.56569C50.8148 8.38283 49.6204 7.4314 48.3565 7.4314L48.3611 7.42711ZM45.6574 5.91854C45.5231 5.91854 45.4074 5.8114 45.4074 5.68711C45.4074 5.51997 45.6574 5.39569 45.7407 5.25854C45.9213 4.94997 45.9722 4.42711 45.9722 4.07569C45.9722 3.65997 45.8565 2.89283 45.5741 2.58426C45.4907 2.49426 45.3935 2.44711 45.3935 2.32283C45.3935 2.19854 45.5092 2.0914 45.6435 2.0914C46.2083 2.0914 46.4907 3.62997 46.4907 4.02854C46.4907 4.45711 46.3565 5.91854 45.662 5.91854H45.6574Z"
-            fill="currentColor"
-          />
-          <path
-            d="M54.8056 0.865677C54.4074 0.621391 53.8426 0.497105 53.3611 0.497105C52.3148 0.497105 51.4167 1.26425 51.3009 2.21996C51.2685 2.49853 51.2824 2.75996 51.2824 3.05139V5.66139L51.2315 8.41282V9.77996C51.2315 10.8557 52.2269 11.7 53.375 11.7C54.2222 11.7 55.1528 11.2071 55.4676 10.47C55.6482 10.0542 55.6667 9.47139 55.6667 9.02568V7.82568L55.6852 5.42996V3.03425C55.6852 2.14282 55.6667 1.43568 54.8056 0.865677Z"
-            fill="currentColor"
-          />
-          <path
-            d="M58.9445 0.402828C57.25 0.402828 56.4028 1.13997 56.4028 2.7214V3.3514L56.4213 4.59426V5.22426C56.4213 5.69997 56.4213 6.14568 56.4028 6.6214C56.3704 7.1914 56.287 7.75711 56.287 8.34426C56.287 10.4957 57.4815 11.5414 59.7917 11.5414C63.3426 11.5414 65.75 10.1271 65.75 6.60854C65.75 2.36568 63.5417 0.398542 58.9445 0.398542V0.402828ZM60.537 8.9014C60.4028 8.9014 60.287 8.79426 60.287 8.66997C60.287 8.62283 60.3056 8.59283 60.338 8.54568C60.7685 7.88568 60.8843 6.96426 60.8843 6.20997C60.8843 5.50283 60.8009 4.45711 60.3194 3.90426C60.2361 3.77997 60.0695 3.68997 60.0695 3.53569C60.0695 3.4114 60.1852 3.30426 60.3194 3.30426C60.5694 3.30426 60.9167 3.88711 61.0185 4.08854C61.3333 4.76569 61.3843 5.50283 61.3843 6.22283C61.3843 6.66854 61.1343 8.89711 60.537 8.89711V8.9014Z"
-            fill="currentColor"
-          />
-          <path
-            d="M73.5046 5.85855C72.5417 5.78141 71.162 5.47284 70.4167 4.88998C70.3194 4.81284 70.1528 4.7057 70.1528 4.56855C70.1528 4.52141 70.1713 4.44427 70.2361 4.44427C70.4167 4.44427 71.5787 5.3057 72.5787 5.3057C73.8426 5.3057 75 4.39713 75 3.20141C75 1.23427 72.1806 0.437125 70.4676 0.437125C67.9259 0.437125 66.037 1.95855 66.037 4.37141C66.037 4.89427 66.1204 5.61427 66.537 6.01713C66.7361 6.21855 67.0694 6.21855 67.3333 6.21855C68.3287 6.21855 69.5926 6.50998 70.1204 7.35427C70.1713 7.43141 70.2176 7.5557 70.2176 7.6457C70.2176 7.6757 70.2176 7.72284 70.1852 7.7057C70.088 7.6757 70.0046 7.59855 69.9352 7.53855C69.3519 7.0157 68.5555 6.49284 67.713 6.49284C66.4491 6.49284 66.0046 7.6157 66.0046 8.59713C66.0046 10.5771 67.9306 11.67 69.8889 11.67C72.213 11.67 75 10.2557 75 7.84284C75 6.95141 74.5833 5.95284 73.5046 5.86284V5.85855Z"
-            fill="currentColor"
-          />
-        </svg>
+import { computed as e, effect as t, signal as n, untracked as r } from "@preact/signals-core";
+import { autoUpdate as i, computePosition as a, flip as o, offset as s, platform as c, shift as l } from "@floating-ui/dom";
+var u = "/embed/auth/login", d = "popgrids-auth", f = "popup,width=480,height=640", ee = 300 * 1e3, te = 250, p = class extends Error {
+	constructor(e) {
+		super(e), this.name = "PopupAuthError";
+	}
+}, m = (e, t, n) => {
+	let r = new URL(u, e);
+	return r.searchParams.set("publicKey", t), r.searchParams.set("returnOrigin", n), r.toString();
+}, ne = (e, t) => {
+	let n = window.open(m(e, t, window.location.origin), d, f);
+	if (!n) throw new p("Popup blocked. Allow popups for this site and try again.");
+	return n;
+}, h = (e, t) => typeof e == "object" && !!e && "type" in e && "source" in e && e.type === t && e.source === "popgrids-embed", re = (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;
+}, ie = (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, m(), e === "resolve") {
+				r();
+				return;
+			}
+			i(t ?? new p("Sign-in failed"));
+		}
+	}, u = (e) => {
+		if (e.origin === a) {
+			if (h(e.data, "popgrids:auth:success")) {
+				s = !0;
+				let t = re(e.data);
+				t && n?.onAuthUser?.(t), l("resolve");
+				return;
+			}
+			h(e.data, "popgrids:auth:error") && (s = !0, l("reject", new p(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, te)), !(s || o)) {
+				if (n?.verifySignedIn && await n.verifySignedIn()) {
+					l("resolve");
+					return;
+				}
+				l("reject", new p("Sign-in was cancelled"));
+			}
+		})()));
+	}, 300), f = window.setTimeout(() => {
+		try {
+			t.close();
+		} catch {}
+		l("reject", new p("Sign-in timed out"));
+	}, ee), m = () => {
+		window.removeEventListener("message", u), clearInterval(d), clearTimeout(f);
+	};
+	window.addEventListener("message", u);
+}), ae = async (e, t, n) => {
+	await ie(e, ne(e, t), n);
+}, g = n(null), _ = n(null), v = n(!1), oe = [
+	0,
+	150,
+	400
+], y = [
+	0,
+	100,
+	200,
+	400,
+	800,
+	1500,
+	2500,
+	4e3
+];
+async function b(e, t, n = oe) {
+	if (!e || !t) return g.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 (g.value = (await e.json()).user ?? null, g.value !== null) return !0;
+		} catch {}
+	}
+	return g.value = null, !1;
+}
+async function x(e, t) {
+	_.value = null, v.value = !0;
+	try {
+		return await ae(e, t, {
+			onAuthUser: (e) => {
+				g.value = e;
+			},
+			verifySignedIn: () => b(e, t, y)
+		}), g.value ? !0 : await b(e, t, y);
+	} catch (e) {
+		return _.value = e instanceof Error ? e.message : "Sign-in failed", !1;
+	} finally {
+		v.value = !1;
+	}
+}
+function se() {
+	_.value = null;
+}
+//#endregion
+//#region src/store/registry.ts
+var S = /* @__PURE__ */ new WeakMap(), ce = (e, t, n = t.constructor) => {
+	let r = S.get(e);
+	r || (r = /* @__PURE__ */ new Map(), S.set(e, r)), r.set(n, t);
+}, le = (e) => {
+	S.delete(e);
+}, ue = (e, t) => {
+	let n = e;
+	for (; n;) {
+		let e = S.get(n)?.get(t);
+		if (e) return e;
+		let r = n.getRootNode();
+		if (!(r instanceof ShadowRoot)) break;
+		n = r.host;
+	}
+	return null;
+};
+function C(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 = ue(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 de = 3e4, w = 3, T = (e) => {
+	let t = typeof e.createdAt == "number" ? e.createdAt : Date.parse(String(e.createdAt));
+	return Number.isFinite(t) ? t : 0;
+}, E = (e, t) => {
+	let n = e?.previewCount ?? t;
+	return n > 0 ? n : w;
+}, D = class {
+	constructor(t) {
+		this.previewCount = w, this.grid = n(null), this.comments = n([]), this.loading = n(!0), this.error = n(null), this.open = n(!1), this.replyingTo = n(null), this.editingCommentId = n(null), this.scrollingCommentId = n(null), this.socket = null, this.reconnectAttempt = 0, this.reconnectTimer = null, this.disposed = !1, this.topLevelComments = e(() => this.comments.value.filter((e) => e.parentCommentId === null).sort((e, t) => String(e.sortKey).localeCompare(String(t.sortKey)))), this.replyingToComment = e(() => {
+			let e = this.replyingTo.value;
+			return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
+		}), this.editingComment = e(() => {
+			let e = this.editingCommentId.value;
+			return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
+		}), this.previewComments = e(() => this.topLevelComments.value.slice(0, E(this.grid.value, this.previewCount))), this.previewAvatars = e(() => {
+			let e = E(this.grid.value, this.previewCount), t = /* @__PURE__ */ new Set(), n = [], r = [...this.comments.value].sort((e, t) => T(t) - T(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 = t.apiUrl, this.publicKey = t.publicKey, this.pageUrl = t.pageUrl, this.externalId = t.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 x(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 && !g.value && (g.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, de);
+		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 x(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 x(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 x(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);
+	}
+}, fe = "@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}}", pe = "@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}}", me = "@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\")}}", O = !1, k = /* @__PURE__ */ new Set(), A = null, j = null;
+function M() {
+	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 : (j ||= window.matchMedia("(prefers-color-scheme: dark)"), j.matches);
+}
+function N() {
+	let e = M();
+	e !== O && (O = e, k.forEach((e) => {
+		let t = O || !!e.closest(".dark");
+		e.classList.toggle("dark", t);
+	}));
+}
+var P = () => {
+	N();
+};
+function he(e) {
+	if (typeof window > "u" || typeof document > "u") return;
+	k.size === 0 && (O = M(), A = new MutationObserver(() => {
+		N();
+	}), A.observe(document.documentElement, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), A.observe(document.body, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), j = window.matchMedia("(prefers-color-scheme: dark)"), j.addEventListener("change", P)), k.add(e);
+	let t = O || !!e.closest(".dark");
+	e.classList.toggle("dark", t);
+}
+function ge(e) {
+	k.delete(e), k.size === 0 && (A &&= (A.disconnect(), null), j &&= (j.removeEventListener("change", P), null));
+}
+//#endregion
+//#region src/components/base-element.ts
+function F(e) {
+	let t = new CSSStyleSheet();
+	return t.replaceSync(e), t;
+}
+var _e = F(fe), ve = F(pe), ye = F(me), I = class extends HTMLElement {
+	get styleSheets() {
+		return [];
+	}
+	constructor() {
+		super(), this.baseStyleSheets = [
+			_e,
+			ve,
+			ye
+		], 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(t(e));
+	}
+	connectedCallback() {
+		he(this), r(() => {
+			this.render(), this._bindEvents(), this.setupEffects();
+		});
+	}
+	disconnectedCallback() {
+		ge(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 L(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 be = F("\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"), R = class extends I {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [be];
+	}
+	onClick(e) {
+		e.target.closest(".join-btn") && this.handleJoin();
+	}
+	setupEffects() {
+		this.addEffect(() => {
+			let e = v.value, t = _.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() {
+		se(), await x(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    ";
+	}
+};
+L([C(D)], R.prototype, "gridStore", void 0), customElements.get("pop-auth-panel") || customElements.define("pop-auth-panel", R);
+//#endregion
+//#region src/assets/popgrids-letter-p.png?inline
+var xe = "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=", z = /* @__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("."), Se = (e) => typeof e == "number" ? z[e % z.length] ?? "#e5e7eb" : z[Math.floor(Math.random() * z.length)];
+function Ce(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 we(e) {
+	return z[Ce(e) % z.length] ?? "#e5e7eb";
+}
+//#endregion
+//#region src/components/pop-comment-avatar.ts
+var Te = F("\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"), Ee = class extends I {
+	constructor() {
+		super(), this._backgroundColor = Se() ?? "#e5e7eb";
+	}
+	static get observedAttributes() {
+		return [
+			"size",
+			"data-color-key",
+			"deleted"
+		];
+	}
+	onSizeChanged() {
+		this.render();
+	}
+	onDataColorKeyChanged() {
+		this.render();
+	}
+	onDeletedChanged() {
+		this.render();
+	}
+	get styleSheets() {
+		return [Te];
+	}
+	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 ? we(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="${xe}" alt="Deleted user" /></div>` : `<slot
+          class="comment-avatar__content mask mask-squircle"
+          part="content"
+          style="background-color: ${r};"
+        ></slot>`}
       </div>
-    </button>`}};j.styles=[l(j,j,"styles"),Z],j=i([Bt("pop-auth-join")],j);var It=j;import{consume as Kt}from"@lit/context";import{PopElement as Nt}from"@popgrids/ui";import{html as $}from"lit";import{customElement as Qt,query as G,state as P}from"lit/decorators.js";import{classMap as Jt}from"lit/directives/class-map.js";import{ifDefined as Ft}from"lit/directives/if-defined.js";import{createContext as Rt}from"@lit/context";var D=Rt(Symbol("pop-auth-context"));import{css as Ut}from"lit";var Y=Ut`
-  :host {
-    display: flex;
-    width: 100%;
-  }
-
-  .auth-panel {
-    display: flex;
-    border-top: 1px solid var(--color-surface-alpha-singular-alpha-input-bar, rgba(0, 0, 32, 0.04));
-    flex-direction: column;
-    height: 50px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition: height 150ms ease-in-out;
-    width: 100%;
-    overflow: hidden;
-    background-color: var(--color-surface-bg-default, #fff);
-    backdrop-filter: blur(var(--blur-2xl));
-  }
-
-  .auth-panel--is-open {
-    /* Dynamic height will be set via JS */
-    /* The max-height provides a constraint */
-    max-height: 340px;
-    transition: height var(--duration-quick) var(--ease-quick);
-  }
-
-  .auth-panel__content {
-    position: relative;
-    top: 0;
-    left: 0;
-    right: 0;
-
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-`;var u=class extends Nt{constructor(){super(...arguments);this._email="";this._open=!1;this._resizeObserver=null;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._authPanel)&&(this._open=!1)}}handleJoinClick(){this._open=!0}async connectedCallback(){super.connectedCallback(),await this.updateComplete,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown),this.setupResizeObserver()}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this._resizeObserver?.disconnect(),super.disconnectedCallback()}setupResizeObserver(){this._resizeObserver=new ResizeObserver(t=>{requestAnimationFrame(()=>{for(let e of t)if(e.target===this._authPanelContent){let r=this._authPanelContent.offsetHeight;this._open?this._authPanel.style.height=`${r}px`:this._authPanel.style.height="50px"}})}),this._authPanelContent&&this._resizeObserver.observe(this._authPanelContent)}updated(t){super.updated(t),(t.has("_open")||t.has("authContext"))&&(t.has("_open")&&!this._open?this._authPanel.style.height="50px":this._open&&this._authPanelContent&&requestAnimationFrame(()=>{let e=this._authPanelContent.offsetHeight;this._authPanel.style.height=`${e}px`}),!this._resizeObserver&&this._authPanelContent&&this.setupResizeObserver())}handleSignInSuccess(t){t.detail?.email&&(this._email=t.detail.email)}handleCodeVerificationSuccess(){this._open=!1}renderAuthenticated(){return $`Authenticated`}renderJoinButton(){return $`<pop-auth-join @pop-click=${this.handleJoinClick}></pop-auth-join>`}renderSignInForm(){return $`<pop-auth-sign-in @pop-success=${this.handleSignInSuccess}></pop-auth-sign-in>`}renderVerifyCodeForm(){return $`
-      <pop-auth-verify-code
-        email=${Ft(this._email)}
-        @pop-success=${this.handleCodeVerificationSuccess}
-      ></pop-auth-verify-code>
-    `}renderUnauthenticated(){return this._open?this.authContext?.isVerifying?this.renderVerifyCodeForm():this.renderSignInForm():this.renderJoinButton()}render(){return $`
-      <div
-        class=${Jt({"auth-panel":!0,"auth-panel--is-open":this._open})}
-      >
-        <div class="auth-panel__content">
-          ${this.authContext?.isAuthenticated?this.renderAuthenticated():this.renderUnauthenticated()}
+    `;
+	}
+};
+customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar", Ee);
+//#endregion
+//#region src/helpers/author.ts
+function B(e) {
+	return e ? e.split(" ").map((e) => e[0] ?? "").join("").toUpperCase().slice(0, 2) : "?";
+}
+//#endregion
+//#region src/components/pop-comment-bar.ts
+var De = F("\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"), V = "<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>", H = class extends I {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [De];
+	}
+	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 = g.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}">${B(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}">${B(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}">${B(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}">${B(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">${V}</div>
+      <div class="bar">
+        <div class="bar__user">
+          <pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user">?</pop-comment-avatar>
         </div>
-      </div>
-    `}};u.styles=[l(u,u,"styles"),Y],i([Kt({context:D,subscribe:!0})],u.prototype,"authContext",2),i([G(".auth-panel")],u.prototype,"_authPanel",2),i([G(".auth-panel__content")],u.prototype,"_authPanelContent",2),i([P()],u.prototype,"_email",2),i([P()],u.prototype,"_open",2),u=i([Qt("pop-auth-panel")],u);var Zt=u;import{consume as Pt,provide as Wt}from"@lit/context";import{PopElement as Xt}from"@popgrids/ui";import{html as Ot}from"lit";import{customElement as te,property as ee,state as q}from"lit/decorators.js";import{createContext as Yt}from"@lit/context";var E=Yt(Symbol("pop-api-context"));import{css as Gt}from"lit";var W=Gt`
-  :host {
-    display: block;
-  }
-`;var U="popgrids_token",f=class extends Xt{constructor(){super(...arguments);this.error=null;this.isAuthenticated=!1;this.currentAccount=null;this.isVerifying=!1;this.token=null;this.verificationExpiresAt=null;this.contextData={currentAccount:null,error:null,isAuthenticated:!1,isVerifying:!1,signIn:this.signIn.bind(this),signOut:this.signOut.bind(this),token:null,verificationExpiresAt:null,verifyCode:this.verifyCode.bind(this)}}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(U);t&&(this.token=t,this.fetchCurrentAccount())}async fetchCurrentAccount(){if(!(!this.token||!this.apiState?.client)){console.log("fetchCurrentAccount",this.token);try{let{data:t,error:e}=await this.apiState.client.GET("/api/v1/users/me",{headers:{Authorization:`Bearer ${this.token}`,"Content-Type":"application/json",Accept:"application/json"}});e&&this.signOut(),t?(this.currentAccount=t,this.isAuthenticated=!0,this.updateContextData()):this.signOut()}catch(t){console.error("Failed to fetch current account:",t),this.signOut()}}}async signIn(t){if(!this.apiState?.client)throw new Error("API client not available");try{let{data:e,error:r}=await this.apiState.client.POST("/api/v1/session",{params:{query:{email:t.email}}});if(r&&(this.error=r,this.updateContextData()),e)return this.isVerifying=!0,this.verificationExpiresAt=e.expires,this.updateContextData(),e;throw new Error("Authentication failed")}catch(e){throw console.error("Sign in failed:",e),e}}async verifyCode(t,e){if(this.apiState?.client)try{let{data:r,error:n}=await this.apiState.client.PUT("/api/v1/session",{params:{query:{code:t,email:e}}});if(n&&(this.error=n,this.updateContextData()),r)this.token=`${r.token}`,localStorage.setItem(U,this.token),this.isVerifying=!1,this.verificationExpiresAt=null,await this.fetchCurrentAccount();else throw new Error("Verification failed")}catch(r){throw console.error("Verification failed:",r),r}}signOut(){this.token=null,this.currentAccount=null,this.isAuthenticated=!1,this.isVerifying=!1,this.verificationExpiresAt=null,localStorage.removeItem(U),this.updateContextData()}updateContextData(){this.contextData={...this.contextData,error:this.error,isAuthenticated:this.isAuthenticated,isVerifying:this.isVerifying,currentAccount:this.currentAccount,token:this.token,verificationExpiresAt:this.verificationExpiresAt}}render(){return Ot`<slot part="base"></slot>`}};f.styles=[W],i([Pt({context:E})],f.prototype,"apiState",2),i([q()],f.prototype,"error",2),i([q()],f.prototype,"isAuthenticated",2),i([q()],f.prototype,"currentAccount",2),i([q()],f.prototype,"isVerifying",2),i([q()],f.prototype,"token",2),i([q()],f.prototype,"verificationExpiresAt",2),i([Wt({context:D}),ee({attribute:!1})],f.prototype,"contextData",2),f=i([te("pop-auth-provider")],f);var ie=f;import{consume as se}from"@lit/context";import{PopElement as oe}from"@popgrids/ui";import{html as le}from"lit";import{customElement as de,state as B}from"lit/decorators.js";import{classMap as pe}from"lit/directives/class-map.js";var X="./apple-IX52EWYN.png";var O="./google-Q3MFTU5A.png";import{css as ne}from"lit";var tt=ne`
-  :host {
-    display: block;
-  }
-
-  .auth-sign-in {
-    display: flex;
-    padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
-  }
-
-  .auth-sign-in__footer {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl, 16px);
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 500;
-  }
-
-  .auth-sign-in__form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl, 16px);
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-  }
-
-  .auth-sign-in__apple-icon,
-  .auth-sign-in__google-icon {
-    border: none;
-    background-color: transparent;
-    display: flex;
-    width: 32px;
-    height: 32px;
-    justify-content: center;
-    align-items: center;
-    transition: transform 300ms ease-out;
-  }
-
-  .auth-sign-in__apple-icon:hover,
-  .auth-sign-in__google-icon:hover {
-    transform: scale(1.125);
-  }
-
-  .auth-sign-in__social-login {
-    display: flex;
-    padding: 0px var(--spacing-2xl, 20px);
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-4xl, 32px);
-    align-self: stretch;
-  }
-
-  .auth-sign-in__title {
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 600;
-  }
-
-  .auth-sign-in__submit-button {
-    width: 100%;
-    height: 40px;
-    color: var(--color-text-text-default);
-  }
-
-  .auth-sign-in__email-input {
-    width: 100%;
-    height: 40px;
-    color: var(--color-text-text-default);
-  }
-`;var ce=O,me=X,h=class extends oe{constructor(){super(...arguments);this.email="";this.emailError="";this.isSubmitting=!1;this.isValid=!1}validateEmail(t){return t?!0:(this.emailError="Please enter an email address",this.isValid=!1,!1)}handleBlur(){this.email&&this.validateEmail(this.email)}handleEmailChange(t){this.email=t.target.value,this.email?this.validateEmail(this.email):(this.emailError="",this.isValid=!1)}handleInvalid(t){let{valid:e,validationMessage:r,validity:n}=t.detail;e||(console.log("Validation failed:",r),n.typeMismatch&&console.log("Invalid email format"),n.patternMismatch&&console.log("Pattern mismatch")),this.isValid=e}async handleSubmit(t){if(t.preventDefault(),!(!this.validateEmail(this.email)||this.isSubmitting)){if(!this.authContext?.signIn)throw new Error("Authentication context not available");this.isSubmitting=!0;try{let e=await this.authContext.signIn({email:this.email});this.onSuccess(e)}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(t){this.emit("pop-success",{email:t.email,expires:t.expires})}onFailure(){console.log("failure"),this.emit("pop-error",{error:"Creating a session failed",success:!1})}render(){return le`<div
-      class=${pe({"auth-sign-in":!0})}
-      part="base"
-    >
-      <form class="auth-sign-in__form" @submit=${this.handleSubmit}>
-        <pop-logo variant="logo" theme="white" style="width: 100px; height: 16px;"></pop-logo>
-        <h2 class="auth-sign-in__title">Small communities, big connections 👋</h2>
-        <pop-form-input-simple
-          aria-invalid=${this.emailError?"true":"false"}
-          aria-describedby="email-error"
-          autocomplete="off"
-          errorMessage=${this.emailError}
-          name="email"
-          type="email"
-          placeholder="Email"
-          pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+.[a-zA-Z]{2,}"
-          .value=${this.email}
-          .disabled=${this.isSubmitting}
-          ?required=${!0}
-          ?error=${!!this.emailError}
-          @input=${this.handleEmailChange}
-          @blur=${this.handleBlur}
-          @pop-invalid=${this.handleInvalid}
-        ></pop-form-input-simple>
-        <pop-button
-          class="auth-sign-in__submit-button"
-          theme="brand"
-          variant="primary"
-          current
-          ?disabled=${this.isSubmitting||!this.isValid}
-        >
-          ${this.isSubmitting?"Submitting...":"Continue"}
-        </pop-button>
-      </form>
-      <div class="auth-sign-in__social-login">
-        <button class="auth-sign-in__google-icon" type="button">
-          <img src=${ce} alt="Google" />
-        </button>
-        <button class="auth-sign-in__apple-icon" type="button">
-          <img src=${me} alt="Apple" />
+        <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>
-      <div class="auth-sign-in__footer">
-        <pop-button-link ?primary=${!0} size="sm">What's Popgrids?</pop-button-link>
-      </div>
-    </div>`}};h.styles=[l(h,h,"styles"),tt],i([se({context:D,subscribe:!0})],h.prototype,"authContext",2),i([B()],h.prototype,"email",2),i([B()],h.prototype,"emailError",2),i([B()],h.prototype,"isSubmitting",2),i([B()],h.prototype,"isValid",2),h=i([de("pop-auth-sign-in")],h);var ue=h;import{consume as he}from"@lit/context";import{PopElement as ge}from"@popgrids/ui";import{html as z}from"lit";import{customElement as xe,property as ve,query as ye,queryAll as be,state as L}from"lit/decorators.js";import{classMap as Ce}from"lit/directives/class-map.js";import{when as it}from"lit/directives/when.js";import{css as fe}from"lit";var et=fe`
-  :host {
-    display: block;
-  }
-
-  .auth-verify-code {
-    display: flex;
-    padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
-    position: relative;
-  }
-
-  .auth-verify-code__toast {
-    position: absolute;
-  }
-
-  .auth-verify-code__body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-md, 8px);
-    align-self: stretch;
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    text-align: center;
-  }
-
-  .auth-verify-code__help .auth-verify-code__body {
-    text-align: left;
-  }
-
-  .auth-verify-code__body strong {
-    font-weight: 600;
-  }
-
-  .auth-verify-code__footer {
-    display: flex;
-    color: var(--color-text-text-default);
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-2xl, 20px);
-  }
-
-  .auth-verify-code__form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
-  }
-
-  .auth-verify-code__help {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
-  }
-
-  .auth-verify-code__title {
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 600;
-  }
-
-  .auth-verify-code__code-input-fields {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-xl, 16px);
-    margin-bottom: var(--spacing-xs, 4px);
-  }
-
-  .auth-verify-code__code-input-group {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm, 6px);
-  }
-`;var p=class extends ge{constructor(){super(...arguments);this.email="";this.code="";this.isSubmitting=!1;this.error="";this._showingHelp=!1;this._showingToast=!1;this._toastMessage=""}getCodeInput(t){return this.codeInputs[t]}closeToast(){this._showingToast=!1}handleContactSupport(){console.log("handleContactSupport")}async handleResendCode(){console.log("handleResendCode");try{let t=await this.authContext?.signIn({email:this.email});this._showingHelp=!1}catch(t){console.error(t)}finally{this.isSubmitting=!1}}handleInput(t){let e=t.target,r=/^\d$/.test(e.value);if(r||e.value===""){if(r){let n=Array.from(this.codeInputs).indexOf(t.currentTarget);n<this.codeInputs.length-1&&this.getCodeInput(n+1)?.focus()}this.updateCodeValue()}else e.value=""}handleKeyDown(t){let e=t.target,r=Array.from(this.codeInputs).indexOf(t.currentTarget);if(t.key==="Backspace"&&e.value===""&&r>0){let n=this.getCodeInput(r-1);n?.focus(),n?.select()}if(t.key==="ArrowLeft"&&r>0){let n=this.getCodeInput(r-1);n?.focus(),n?.select()}if(t.key==="ArrowRight"&&r<this.codeInputs.length-1){let n=this.getCodeInput(r+1);n?.focus(),n?.select()}}handleFocus(t){t.target.select()}showToast(t){this._showingToast=!0,this._toastMessage=t}toggleHelp(){this._showingHelp=!this._showingHelp,console.log("handleNeedHelpClick")}handleSubmit(t){t.preventDefault(),this.submitForm()}handlePaste(t){t.preventDefault();let e=t.clipboardData;if(!e)return;e.getData("text").replace(/\D/g,"").substring(0,this.codeInputs.length).split("").forEach((_,d)=>{if(d<this.codeInputs.length){let c=this.getCodeInput(d);c&&(c.value=_)}});let o=Array.from(this.codeInputs).findIndex(_=>!_.value),M=o!==-1?o:this.codeInputs.length-1;this.getCodeInput(M)?.focus(),this.updateCodeValue()}updateCodeValue(){let t=Array.from(this.codeInputs).map(r=>r.value);this.code=t.join(""),this.hiddenInput&&(this.hiddenInput.value=this.code),t.length===6&&t.every(r=>/^\d$/.test(r))&&setTimeout(()=>this.submitForm(),0)}async submitForm(){if(!(!this.authContext?.verifyCode||this.isSubmitting||!this.email||this.code.length!==6)){this.isSubmitting=!0,this.error="";try{await this.authContext.verifyCode(this.code,this.email),this.onSuccess()}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(){this.emit("pop-success")}onFailure(){this.showToast("Verification failed. Please try again."),Array.from(this.codeInputs).forEach(t=>{t.value=""}),this.codeInputs.length&&this.getCodeInput(0)?.focus(),this.code=""}render(){return z`<div
-      class=${Ce({"auth-verify-code":!0})}
-      part="base"
-    >
-      ${it(this._showingToast,()=>z`<pop-toast class="auth-verify-code__toast" theme="transparent" @pop-close=${this.closeToast}
-            >${this._toastMessage}</pop-toast
-          >`)}
-      ${it(!this._showingHelp,()=>z`
-          <form class="auth-verify-code__form" @submit=${this.handleSubmit}>
-            <input type="hidden" name="code" value=${this.code} />
-            <h2 class="auth-verify-code__title">Enter Verification Code</h2>
-            <div class="auth-verify-code__code-input-fields">
-              <div class="auth-verify-code__code-input-group">
-                <pop-code-input-field
-                  name="code_1"
-                  autofocus
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_2"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_3"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-              </div>
-              <div class="auth-verify-code__code-input-group">
-                <pop-code-input-field
-                  name="code_4"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_5"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_6"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-              </div>
-            </div>
-
-            <div class="auth-verify-code__body">
-              <p>A verification code has been sent to your email. Enter code to continue.</p>
-              <p>
-                Code expires in
-                <pop-timestamp-countdown>${this.authContext?.verificationExpiresAt}</pop-timestamp-countdown>.
-              </p>
-            </div>
-
-            <div class="auth-verify-code__footer">
-              <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.toggleHelp}>
-                No verification code?
-              </pop-button-link>
-            </div>
-          </form>
-        `,()=>z`
-          <div class="auth-verify-code__help">
-            <h2 class="auth-verify-code__title">Steps to Take</h2>
-            <div class="auth-verify-code__body">
-              <ul>
-                <li><strong>Check spam/junk</strong> – it might be there.</li>
-                <li><strong>Verify email</strong> – check your email for typos.</li>
-                <li><strong>Wait a moment</strong> – emails take a few mins.</li>
-                <li><strong>Whitelist us</strong> – it may be blocked.</li>
-              </ul>
-            </div>
-            <div class="auth-verify-code__footer">
-              <pop-button-link size="sm" theme="default" @click=${this.handleContactSupport}>
-                Contact Support
-              </pop-button-link>
-              <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.handleResendCode}>
-                Resend Code
-              </pop-button-link>
-            </div>
-          </div>
-        `)}
-    </div>`}};p.styles=[l(p,p,"styles"),et],i([he({context:D,subscribe:!0})],p.prototype,"authContext",2),i([ve({type:String})],p.prototype,"email",2),i([L()],p.prototype,"code",2),i([L()],p.prototype,"isSubmitting",2),i([L()],p.prototype,"error",2),i([L()],p.prototype,"_showingHelp",2),i([L()],p.prototype,"_showingToast",2),i([L()],p.prototype,"_toastMessage",2),i([ye('input[name="code"]')],p.prototype,"hiddenInput",2),i([be("pop-code-input-field")],p.prototype,"codeInputs",2),p=i([xe("pop-auth-verify-code")],p);var we=p;import{PopElement as ke}from"@popgrids/ui";import{html as je}from"lit";import{customElement as De}from"lit/decorators.js";import{classMap as Ae}from"lit/directives/class-map.js";import{css as Se}from"lit";var rt=Se`
-  :host {
-    display: block;
-  }
-
-  .comment-bar {
-    align-items: flex-start;
-    background: var(--color-border-singular-border-island);
-    border-top: 1px solid var(--color-surface-alpha-alpha-input-bar);
-    padding: var(--spacing-sm, 6px) var(--spacing-sm, 6px) var(--spacing-md, 8px) var(--spacing-sm, 6px);
-    position: relative;
-    transition: all var(--duration-quick) var(--ease-quick);
-  }
-
-  .comment-bar__actions {
-    position: relative;
-    display: grid;
-    grid-template-columns: auto 1fr 0px;
-    gap: 6px;
-    align-items: start;
-    transition: all var(--duration-quick) var(--ease-quick);
-  }
-  .comment-bar--has-content {
-    grid-template-columns: auto 1fr 32px;
-  }
-
-  .comment-bar__avatars {
-    display: flex;
-    align-items: center;
-    padding-top: 2px;
-  }
-
-  .comment-bar__avatars > *:not(:last-child) {
-    margin-right: -4px;
-  }
-
-  .comment-bar__avatars > pop-comment-avatar {
-    transition: transform var(--duration-pop-hover) var(--ease-pop-hover);
-  }
-  .comment-bar__avatars > pop-comment-avatar:hover {
-    transform: scale(1.1875);
-  }
-
-  .comment-bar__send-icon {
-    position: absolute;
-    right: 0;
-    bottom: 0.5px;
-    transition: opacity var(--duration-150) var(--ease-linear);
-    opacity: 0;
-  }
-  .comment-bar--has-content .comment-bar__send-icon {
-    opacity: 1;
-  }
-`;var A=class extends ke{render(){return je`
-      <div
-        class=${Ae({"comment-bar":!0})}
+    `;
+	}
+};
+L([C(D)], H.prototype, "gridStore", void 0), customElements.get("pop-comment-bar") || customElements.define("pop-comment-bar", H);
+//#endregion
+//#region src/components/pop-comment-icon.ts
+var Oe = F("\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"), ke = class extends I {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [Oe];
+	}
+	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}
       >
-        <div class="comment-bar__actions">
-          <div>
-            <div class="comment-bar__avatars">
-              <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
-                <img src="https://i.pravatar.cc/90" alt="User avatar" />
-              </pop-comment-avatar>
-              <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
-                <img src="https://i.pravatar.cc/100" alt="User avatar" />
-              </pop-comment-avatar>
-            </div>
-          </div>
-          <pop-comment-input></pop-comment-input>
-          <pop-comment-icon class="comment-bar__send-icon" theme="neutral" variant="send" size="sm"></pop-comment-icon>
+        <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", ke);
+//#endregion
+//#region src/components/pop-comment-input.ts
+var Ae = F("\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"), U = class extends I {
+	constructor(...e) {
+		super(...e), this.events = {
+			input: "onInput",
+			keydown: "onKeyDown"
+		};
+	}
+	get styleSheets() {
+		return [Ae];
+	}
+	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    ";
+	}
+};
+L([C(D)], U.prototype, "gridStore", void 0), customElements.get("pop-comment-input") || customElements.define("pop-comment-input", U);
+//#endregion
+//#region src/components/pop-comment-thread.ts
+var je = F("\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"), W = 2, G = class extends I {
+	constructor(...e) {
+		super(...e), this._showAll = !1, this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [je];
+	}
+	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 <= W ? t : t.slice(0, W), 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>
-    `}};A.styles=[l(A,A,"styles"),rt],A=i([De("pop-comment-bar")],A);var _e=A;import{computePosition as Me,flip as Ve,offset as qe,shift as Le}from"@floating-ui/dom";import{consume as nt}from"@lit/context";import{PopElement as He}from"@popgrids/ui";import{Editor as $e,mergeAttributes as Be}from"@tiptap/core";import ze from"@tiptap/extension-document";import{Mention as Ie}from"@tiptap/extension-mention";import Re from"@tiptap/extension-paragraph";import Ue from"@tiptap/extension-placeholder";import Ke from"@tiptap/extension-text";import Ne from"@tiptap/extension-typography";import{html as st}from"lit";import{customElement as Qe,property as Je,query as Fe,state as ot}from"lit/decorators.js";import{classMap as Ze}from"lit/directives/class-map.js";import{createContext as Ee}from"@lit/context";var C=Ee(Symbol("pop-grid-context"));import{css as Te}from"lit";var at=Te`
-  :host {
-    display: flex;
-    position: relative;
-  }
-
-  .comment-input {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    max-height: 280px;
-    width: 100%;
-    padding-top: 4px;
-    padding-right: 8px;
-    padding-bottom: 4px;
-    padding-left: 12px;
-    background-color: var(--color-surface-alpha-singular-alpha-input-bar);
-    transition: all var(--duration-quick) var(--ease-quick);
-    border-radius: 18px;
-    min-height: 36px;
-    flex: 1 0 0;
-  }
-
-  .comment-input--has-error {
-    border-color: var(--color-border-conditional-border-error);
-    background-color: var(--color-surface-alpha-alpha-error);
-  }
-
-  .comment-input__input {
-    display: flex;
-    padding: 5px 0;
-    align-items: flex-end;
-    gap: 2px;
-    flex: 1 0 0;
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    white-space: pre-wrap;
-  }
-
-  .tiptap__editor {
-    color: var(--color-text-text-default);
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    max-height: 264px;
-    outline: none;
-    overflow-y: auto;
-    position: relative;
-    width: 100%;
-  }
-
-  .tiptap__mention {
-    color: var(--color-text-singular-text-link);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .tiptap__mention-popup {
-    background: var(--color-surface-bg-default);
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border-border-edge-strong);
-    box-shadow: var(--shadow-lg);
-    position: absolute;
-    z-index: 1000;
-    transition: opacity 0.1s ease-in-out;
-  }
-
-  .tiptap__mention-popup ul {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-sm);
-  }
-
-  .tiptap__mention-popup li {
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    align-items: center;
-    align-self: stretch;
-    background: var(--color-surface-buttons-secondary-bg-blank-resting);
-    border-radius: var(--radius-sm);
-    color: var(--color-text-text-default);
-    cursor: pointer;
-    display: -webkit-box;
-    display: flex;
-    flex: 1 0 0;
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 400;
-    gap: 12px;
-    padding: 8px;
-  }
-
-  .tiptap__mention-popup li:hover {
-    background: #f0f0f0;
-  }
-
-  .tiptap__mention-popup li[data-selected] {
-    background: var(--color-surface-buttons-secondary-bg-blank-hover);
-  }
-
-  .is-editor-empty:first-child::before {
-    color: var(--color-text-text-placeholder);
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
-`;var m=class extends He{constructor(){super(...arguments);this.variant="text";this._content="";this._error=null}createMentionSuggestion(){return{items:async({query:t})=>{if(!t||t.trim().length===0)return[];let e=this.apiState?.client;if(!e)return[];let{data:r,error:n}=await e.GET("/api/v1/accounts",{params:{query:{by_name:t}}});return n?[]:r?r.map(o=>({id:o.id,label:o.name,href:o.url})):[]},render:()=>{let t,e,r,n,o=0,M=()=>{let d=n.querySelectorAll("li");d.forEach((c,S)=>{S===o?c.setAttribute("data-selected","true"):c.removeAttribute("data-selected")}),d.length>0?(e.style.visibility="visible",e.style.opacity="1"):(e.style.visibility="hidden",e.style.opacity="0")},R=async d=>{if(!e||!d)return;let c={getBoundingClientRect(){return d}},{x:S,y:k}=await Me(c,e,{placement:"top-start",middleware:[qe(6),Ve(),Le({padding:8})]});Object.assign(e.style,{position:"absolute",left:`${S}px`,top:`${k}px`})},_=()=>{e&&(e.style.opacity="0",e.style.visibility="hidden",setTimeout(()=>{e?.remove(),e=void 0,n=void 0},150))};return{onStart:d=>{t=d.command;let c=this.shadowRoot?.querySelector(".tiptap__mention-popup");if(c&&c.remove(),e=document.createElement("div"),e.className="tiptap__mention-popup",e.style.opacity="0",e.style.transition="opacity 150ms ease-in-out",e.style.visibility="hidden",this.shadowRoot?.appendChild(e),r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,n=document.createElement("ul");for(let k of r){let V=document.createElement("li");V.textContent=k.label,V.addEventListener("click",J=>{J.preventDefault(),J.stopPropagation(),t({id:k.id,label:k.label,href:k.href}),_()}),n.appendChild(V)}e.appendChild(n),M();let S=d.clientRect?.();S&&R(S)},onUpdate:d=>{if(t=d.command,r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,n?n.innerHTML="":(n=document.createElement("ul"),e.appendChild(n));for(let S of r){let k=document.createElement("li");k.textContent=S.label,k.addEventListener("click",V=>{V.preventDefault(),V.stopPropagation(),t({id:S.id,label:S.label,href:S.href}),_()}),n.appendChild(k)}M();let c=d.clientRect?.();c&&R(c)},onKeyDown:d=>{if(d.event?.key==="Escape")return _(),!0;if(d.event?.key==="ArrowDown")return o=(o+1)%r.length,M(),!0;if(d.event?.key==="ArrowUp")return o=(o-1+r.length)%r.length,M(),!0;if(d.event?.key==="Enter"){let c=r[o];if(c)return t({id:c.id,label:c.label,href:c.href}),_(),!0}return!1},onExit:()=>{_()}}}}}async firstUpdated(){await this.updateComplete,this.initializeEditor()}disconnectedCallback(){this.editor?.destroy(),super.disconnectedCallback()}initializeEditor(){if(!this._editor)return;let t=this.createMentionSuggestion();this.editor=new $e({element:this._editor,content:this._content,editable:!0,editorProps:{attributes:{class:"tiptap__editor"}},extensions:[ze,Ie.configure({HTMLAttributes:{class:"tiptap__mention"},renderText({options:e,node:r}){return`${e.suggestion.char}${r.attrs.label??r.attrs.id}`},renderHTML({options:e,node:r}){return["a",Be({href:`${r.attrs.href}`},e.HTMLAttributes),`${e.suggestion.char}${r.attrs.label??r.attrs.id}`]},suggestion:t}).extend({addAttributes(){return{id:{default:null,parseHTML:e=>e.getAttribute("data-id"),renderHTML:e=>({"data-id":e.id})},label:{default:null,parseHTML:e=>e.getAttribute("data-label"),renderHTML:e=>({"data-label":e.label})},href:{default:null,parseHTML:e=>e.getAttribute("href"),renderHTML:e=>({href:e.href})}}}}),Re,Ue.configure({placeholder:"Try mentioning someone using @ symbol"}),Ke,Ne],onUpdate:({editor:e})=>{this._content=e.getHTML(),this.emit("pop-content-change",this._content)}})}render(){return st`<div
-      class=${Ze({"comment-input":!0,[`comment-input--variant-${this.variant}`]:!0,"comment-input--has-error":!!this._error})}
-      part="base"
-    >
-      <div class="comment-input__input"></div>
-      ${this._error?st`<div class="comment-input__error">${this._error.message}</div>`:""}
-    </div>`}};m.styles=[l(m,m,"styles"),at],i([nt({context:E,subscribe:!0})],m.prototype,"apiState",2),i([nt({context:C,subscribe:!0})],m.prototype,"gridContext",2),i([Je({type:String})],m.prototype,"variant",2),i([Fe(".comment-input__input")],m.prototype,"_editor",2),i([ot()],m.prototype,"_content",2),i([ot()],m.prototype,"_error",2),m=i([Qe("pop-comment-input")],m);var Ye=m;import{consume as Pe}from"@lit/context";import{PopElement as We}from"@popgrids/ui";import{html as K}from"lit";import{customElement as Xe,property as Oe}from"lit/decorators.js";import{classMap as ti}from"lit/directives/class-map.js";import{when as ei}from"lit/directives/when.js";import{css as Ge}from"lit";var lt=Ge`
-  :host {
-    display: block;
-  }
-
-  .comment-thread {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-  }
-
-  .comment-thread--size-sm {
-  }
-
-  .comment-thread--size-md {
-  }
-
-  .comment-thread__replies {
-    display: flex;
-    padding-left: var(--spacing-3xl, 24px);
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-lg, 12px);
-  }
-`;var w=class extends We{get comment(){return this.gridContext?.comments.find(a=>a.id===this.id)}render(){return K`
-      <div
-        class=${ti({"comment-thread":!0})}
-      >
-        <pop-comment id=${this.id}></pop-comment>
-        ${ei((this.comment?.repliesCount??0)>0,()=>K`
-            <div class="comment-thread__replies">
-              ${this.comment?.replies.map(a=>K`<pop-comment id=${a.id}></pop-comment>`)}
+    `;
+	}
+};
+L([C(D)], G.prototype, "gridStore", void 0), customElements.get("pop-comment-thread") || customElements.define("pop-comment-thread", G);
+//#endregion
+//#region src/helpers/time.ts
+function K(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 src/components/pop-comment.ts
+var Me = F("\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"), q = class extends I {
+	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 [Me];
+	}
+	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 = () => {
+				a(t, e, {
+					placement: "bottom-end",
+					middleware: [
+						s(4),
+						o(),
+						l({ padding: 8 })
+					],
+					strategy: "fixed"
+				}).then(({ x: t, y: n }) => {
+					Object.assign(e.style, {
+						left: `${t}px`,
+						top: `${n}px`,
+						position: "fixed"
+					});
+				});
+			};
+			this._floatingCleanup = i(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 (!g.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 = K(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 = g.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"}" />` : B(t.author?.name), o = this.gridStore.replyingTo.value, s = e !== null && o === e, c = this.size, l = g.value && t.author && g.value.id === t.author.id, u = g.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>
-    `}};w.styles=[l(w,w,"styles"),lt],i([Pe({context:C,subscribe:!0})],w.prototype,"gridContext",2),i([Oe({type:String})],w.prototype,"id",2),w=i([Xe("pop-comment-thread")],w);var ii=w;import{consume as ai}from"@lit/context";import{PopElement as ni}from"@popgrids/ui";import{html as si}from"lit";import{customElement as oi,property as li,query as di,state as ct}from"lit/decorators.js";import{classMap as mt}from"lit/directives/class-map.js";import{styleMap as pi}from"lit/directives/style-map.js";import{sampleColor as ci}from"@popgrids/ui";function dt(s){let a=(Date.now()-s.getTime())/1e3;return a<60?`${Math.floor(a)}s`:a<3600?`${Math.floor(a/60)}m`:a<86400?`${Math.floor(a/3600)}h`:`${Math.floor(a/86400)}d`}import{ifDefined as mi}from"lit/directives/if-defined.js";import{css as ri}from"lit";var pt=ri`
-  :host {
-    display: block;
-  }
-
-  .comment {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    background-color: transparent;
-
-    border: none;
-    padding: 0;
-    border-radius: var(--radius-md);
-    outline: 6px solid transparent;
-    transition:
-      background-color 0.2s ease,
-      outline-color 0.2s ease;
-  }
-
-  .comment--size-sm {
-    --avatar-size: 32px;
-    --width: 32px;
-
-    gap: 8px;
-  }
-
-  .comment--size-lg {
-    --avatar-size: 56px;
-    --width: 56px;
-
-    gap: 12px;
-  }
-
-  .comment--is-selected {
-    background-color: var(--color-black-alpha-900);
-    outline-color: var(--color-black-alpha-900);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .comment:hover .comment__avatar {
-      transform: translateX(2px);
-    }
-  }
-
-  .comment--is-selected .comment__avatar {
-    transform: translateX(2px);
-  }
-
-  .comment__avatar {
-    --border-size: 0;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-  }
-
-  .comment__user {
-    display: flex;
-    width: var(--width);
-    align-items: flex-start;
-    gap: 10px;
-    flex-shrink: 0;
-    align-self: stretch;
-  }
-
-  .comment__content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 1 0 0;
-    align-self: stretch;
-  }
-
-  .comment__info {
-    display: flex;
-    align-items: flex-start;
-    align-self: stretch;
-  }
-
-  .comment__user-name {
-    color: var(--color-text-text-default, #000);
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
-    font-family: Inter;
-    font-size: var(--text-widget-base, 13px);
-    font-style: normal;
-    font-weight: 500;
-    line-height: var(--text-widget-base--line-height, 18px);
-    letter-spacing: -0.08px;
-  }
-
-  .comment__timestamp {
-    color: var(--color-text-text-default-dim-light, #697586);
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
-    /* Widget/Regular */
-    font-family: Inter;
-    font-size: var(--text-widget-base, 13px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--text-widget-base--line-height, 18px);
-    letter-spacing: -0.08px;
-  }
-
-  .comment__text {
-    /* Base styles */
-    align-self: stretch;
-    color: var(--color-text-text-default-dim);
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
-    font-family: Inter;
-    font-size: var(--text-widget-base, 13px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--text-widget-base--line-height, 18px);
-    letter-spacing: -0.08px;
-    text-align: left;
-
-    /* Clamping when not expanded */
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .comment__text.expanded {
-    /* Remove line clamping */
-    -webkit-line-clamp: initial;
-    display: block;
-  }
-`;var g=class extends ni{constructor(){super(...arguments);this._randomColor=ci();this._expanded=!1}handleClick(){let t=this.selected;if(t?this.gridContext?.selectComment(null):this.gridContext?.selectComment(this.id),this.emit("pop-click",{id:this.id,selected:!t}),!this._expanded&&this._text){let e=this._text.offsetHeight;this._expanded=!0,this.requestUpdate(),this.updateComplete.then(()=>{let r=this._text.scrollHeight;this._text.style.height=`${e}px`,this._text.style.overflow="hidden",this._text.offsetHeight,this._text.style.transition="height var(--duration-quick) var(--ease-quick)",this._text.style.height=`${r}px`,setTimeout(()=>{this._text.style.height="",this._text.style.overflow=""},300)})}}get comment(){return this.findCommentOrReply(this.gridContext?.comments??[],this.id)}get commentAvatarSize(){return this.gridContext?.grid?.layout==="sm"?"xs":"sm"}get selected(){return this.gridContext?.selectedCommentId===this.id}findCommentOrReply(t,e){let r=[...t];for(;r.length>0;){let n=r.pop();if(n){if(n.id===e)return n;n.replies&&n.replies.length>0&&r.push(...n.replies)}}return null}render(){return si`
-      <button
-        class=${mt({comment:!0,[`comment--size-${this.gridContext?.grid?.layout??"sm"}`]:!0,"comment--is-selected":this.selected})}
-        part="base"
-        type="button"
-        @click=${this.handleClick}
+          </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}
-            style="--comment-avatar-border-size: 0;"
+            size="${this.commentAvatarSize}"
+            data-color-key="${t.author?.id ?? t.author?.name ?? ""}"
+            ${i ? "deleted" : ""}
           >
-            <img
-              src=${mi(this.comment?.account?.avatar?.url)}
-              alt="${this.comment?.account?.name}'s avatar"
-              style=${pi({backgroundColor:this._randomColor})}
-            />
+            ${a}
           </pop-comment-avatar>
         </div>
         <div class="comment__content">
           <div class="comment__info">
-            <div class="comment__user">
-              <div class="comment__user-name">${this.comment?.account?.name}</div>
-              <div class="comment__timestamp">
-                ${this.comment?dt(new Date(this.comment.createdAt??"")):""}
+            <div class="comment__user-meta">
+              <div class="comment__user-name">
+                ${n ? "[Deleted]" : r ? "[Deleted user]" : t.author?.name ?? ""}
               </div>
+              <div class="comment__timestamp">${K(t.createdAt)}</div>
             </div>
+            ${u}
           </div>
-          <div
-            class=${mt({comment__text:!0,expanded:this._expanded})}
-          >
-            ${this.comment?.content}
-          </div>
-        </div>
-      </button>
-    `}};g.styles=[l(g,g,"styles"),pt],i([ai({context:C,subscribe:!0})],g.prototype,"gridContext",2),i([li({type:String})],g.prototype,"id",2),i([ct()],g.prototype,"_randomColor",2),i([ct()],g.prototype,"_expanded",2),i([di(".comment__text")],g.prototype,"_text",2),g=i([oi("pop-comment")],g);var ui=g;import{consume as ft}from"@lit/context";import{PopElement as hi}from"@popgrids/ui";import{html as H}from"lit";import{customElement as gi,property as ht}from"lit/decorators.js";import{classMap as xi}from"lit/directives/class-map.js";import{css as fi}from"lit";var ut=fi`
-  :host {
-    display: flex;
-  }
-
-  .feed {
-    align-items: flex-start;
-    background: var(--color-border-singular-border-island, #fff);
-    border-radius: var(--border-radius-2xl, 16px);
-    border: 1px solid var(--color-border-singular-border-island, #fff);
-    box-shadow: var(--shadow-3xl);
-    display: grid;
-    grid-template-rows: 1fr 50px;
-    max-height: 400px;
-    max-width: 400px;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .feed__footer {
-    position: absolute;
-    bottom: 0;
-    min-height: 50px;
-    width: 100%;
-  }
-
-  .feed__comment-bar {
-  }
-
-  .feed__content {
-    align-items: flex-start;
-    align-self: stretch;
-    display: flex;
-    gap: var(--spacing-md, 8px);
-    min-height: 80px;
-    max-height: 290px;
-    overflow: hidden auto;
-    padding: var(--spacing-md, 8px) 20px var(--spacing-xl, 16px) var(--spacing-md, 8px);
-  }
-
-  .feed__main {
-    align-items: stretch;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 0;
-    gap: var(--spacing-xl, 16px);
-    min-height: 100%;
-  }
-
-  .feed--size-md .feed__main {
-    gap: var(--spacing-lg, 12px);
-  }
-`;var v=class extends hi{constructor(){super(...arguments);this.open=!1;this.size="sm"}render(){return this.gridContext?this.gridContext.comments.length===0?H`<div class="feed__empty">No comments yet</div>`:H`
-      <div
-        class=${xi({feed:!0,"feed--is-open":this.open,[`feed--size-${this.gridContext.grid?.layout??"sm"}`]:!0})}
-        part="base"
-      >
-        <div class="feed__content">
-          <div class="feed__main">
-            ${this.gridContext.comments.map(t=>H`<pop-comment-thread id=${t.id}></pop-comment-thread> `)}
-          </div>
-        </div>
-        <div class="feed__footer">
-          ${this.authContext?.isAuthenticated?H`<pop-comment-bar class="feed__comment-bar"></pop-comment-bar>`:H` <pop-auth-panel class="feed__auth-panel"></pop-auth-panel> `}
+          <div class="comment__text${this._expanded ? " expanded" : ""}">${t.body}</div>
         </div>
       </div>
-    `:H``}};v.styles=[l(v,v,"styles"),ut],i([ft({context:D,subscribe:!0})],v.prototype,"authContext",2),i([ft({context:C,subscribe:!0})],v.prototype,"gridContext",2),i([ht({type:Boolean,reflect:!0})],v.prototype,"open",2),i([ht({type:String})],v.prototype,"size",2),v=i([gi("pop-feed")],v);var vi=v;import{consume as yi,provide as bi}from"@lit/context";import{PopElement as Ci}from"@popgrids/ui";import{html as wi}from"lit";import{customElement as Si,property as gt,state as N}from"lit/decorators.js";var y=class extends Ci{constructor(){super(...arguments);this.grid=null;this.comments=[];this.loading=!1;this.contextData=this.initializeContextData()}initializeContextData(){return{grid:null,comments:[],loading:this.loading,fetchGrid:this.fetchGrid.bind(this),fetchReplies:this.fetchReplies.bind(this),selectedCommentId:null,selectComment:this.selectComment.bind(this)}}updateState(t){this.contextData={...this.contextData,...t},this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.id?this.fetchGrid(this.id):console.error("ID not provided.")}async fetchGrid(t){if(!this.apiState?.client){console.error("No API client provided.");return}this.updateState({loading:!0});let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{id}",{params:{path:{id:t}}});if(e){let n=e;this.grid=n.grid,this.updateState({grid:this.grid,loading:!1}),this.fetchComments(this.id)}if(r){console.error("Failed to fetch grid:",r),this.loading=!1,this.updateState({loading:this.loading});return}}async fetchComments(t){if(!this.apiState?.client)return;let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments",{params:{path:{grid_id:t}}});if(this.loading=!1,e){let n=e;this.comments=n.comments,this.updateState({comments:this.comments,loading:this.loading})}if(r){console.error("Failed to fetch comments:",r),this.updateState({loading:this.loading});return}}async fetchReplies(t){if(this.apiState?.client)try{let e=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments/{id}/replies",{params:{path:{grid_id:this.id,id:t}}});if(e.data){let n=e.data.replies||[];this.comments=this.comments.map(o=>o.id===t?{...o,replies:[...o.replies||[],...n]}:o),this.updateState({comments:this.comments})}}catch(e){console.error(`Failed to fetch replies for comment ${t}:`,e)}}selectComment(t){this.updateState({selectedCommentId:t})}render(){return wi`<slot></slot>`}};y.styles=[],i([yi({context:E})],y.prototype,"apiState",2),i([gt({type:String})],y.prototype,"id",2),i([N()],y.prototype,"grid",2),i([N()],y.prototype,"comments",2),i([N()],y.prototype,"loading",2),i([bi({context:C}),gt({attribute:!1})],y.prototype,"contextData",2),y=i([Si("pop-grid-provider")],y);var ki=y;import{PopElement as Di}from"@popgrids/ui";import{html as Ai}from"lit";import{customElement as _i,property as vt}from"lit/decorators.js";import{css as ji}from"lit";var xt=ji`
-  :host {
-    display: flex;
-    align-items: center;
-  }
-`;var b=class extends Di{constructor(){super(...arguments);this.apiUrl="https://api.popgrids.com";this.gridId=""}render(){return Ai`
-      <pop-api-provider api-url=${this.apiUrl}>
-        <pop-grid-provider id=${this.gridId}>
-          <pop-auth-provider>
-            <pop-widget></pop-widget>
-          </pop-auth-provider>
-        </pop-grid-provider>
-      </pop-api-provider>
-    `}};b.styles=[l(b,b,"styles"),xt],i([vt({type:String,attribute:"api-url",reflect:!0})],b.prototype,"apiUrl",2),i([vt({type:String,attribute:"data-grid-id"})],b.prototype,"gridId",2),b=i([_i("pop-grid")],b);var Ei=b;customElements.get("pop-grid")||customElements.define("pop-grid",b);function yt(){let s=document.querySelectorAll("pop-grid[grid-id]:not([initialized])");for(let a of Array.from(s)){let t=a.getAttribute("grid-id");t&&(a.setAttribute("data-grid-id",t),a.setAttribute("initialized","true"))}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",yt):yt();import{autoUpdate as $i,computePosition as Bi,flip as zi,offset as Ii,platform as kt}from"@floating-ui/dom";import{consume as Ri}from"@lit/context";import{PopElement as Ui}from"@popgrids/ui";function Ti(){return typeof window<"u"}function bt(s){var a;return(s==null||(a=s.ownerDocument)==null?void 0:a.defaultView)||window}function Mi(s){return Ti()?s instanceof Element||s instanceof bt(s).Element:!1}function Ct(s){let a=Vi(),t=Mi(s)?qi(s):s;return["transform","translate","scale","rotate","perspective"].some(e=>t[e]?t[e]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!a&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!a&&(t.filter?t.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(e=>(t.willChange||"").includes(e))||["paint","layout","strict","content"].some(e=>(t.contain||"").includes(e))}function Vi(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function qi(s){return bt(s).getComputedStyle(s)}function wt(s){return Li(s)}function Q(s){return s.assignedSlot?s.assignedSlot:s.parentNode instanceof ShadowRoot?s.parentNode.host:s.parentNode}function Li(s){for(let a=s;a;a=Q(a))if(a instanceof Element&&getComputedStyle(a).display==="none")return null;for(let a=Q(s);a;a=Q(a)){if(!(a instanceof Element))continue;let t=getComputedStyle(a);if(t.display!=="contents"&&(t.position!=="static"||Ct(t)||a.tagName==="BODY"))return a}return null}import{html as I}from"lit";import{customElement as Ki,query as jt,state as Ni}from"lit/decorators.js";import{classMap as Dt}from"lit/directives/class-map.js";import{ifDefined as Qi}from"lit/directives/if-defined.js";import{css as Hi}from"lit";var St=Hi`
-  :host {
-    display: block;
-  }
-
-  .grid-widget {
-    display: flex;
-    height: 100%;
-    position: relative;
-    width: 100%;
-  }
-
-  .grid-widget--align-left {
-    justify-content: flex-start;
-  }
-
-  .grid-widget--align-center {
-    justify-content: center;
-  }
-
-  .grid-widget--align-right {
-    justify-content: flex-end;
-  }
-
-  .grid-widget__feed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2147483647;
-    display: none;
-    opacity: 0;
-    transform: scale(0.94);
-    transition:
-      opacity var(--duration-quick) var(--ease-quick),
-      transform var(--duration-quick) var(--ease-quick),
-      display var(--duration-quick) allow-discrete;
-  }
-
-  .grid-widget__feed[data-current-placement="top-start"] {
-    transform-origin: left bottom;
-  }
-
-  .grid-widget__feed[data-current-placement="bottom-start"] {
-    transform-origin: left top;
-  }
-
-  .grid-widget__feed[data-current-placement="top-end"] {
-    transform-origin: right bottom;
-  }
-
-  .grid-widget__feed[data-current-placement="bottom-end"] {
-    transform-origin: right top;
-  }
-
-  .grid-widget__feed[data-current-placement="top"] {
-    transform-origin: bottom;
-  }
-
-  .grid-widget__feed[data-current-placement="bottom"] {
-    transform-origin: top;
-  }
-
-  .grid-widget__feed--open {
-    display: flex;
-    opacity: 1;
-    transform: scale(1);
-
-    @starting-style {
-      display: flex;
-      opacity: 0;
-      transform: scale(0.94);
-    }
-  }
-
-  .grid-widget__loader {
-    align-items: center;
-    display: flex;
-    min-height: 30px;
-  }
-
-  .grid-widget__previews {
-    display: inline-flex;
-    align-items: flex-start;
-  }
-
-  .grid-widget__previews > :not([hidden]) ~ :not([hidden]) {
-    margin-left: -4px;
-  }
-
-  .grid-widget__preview-avatar,
-  .grid-widget__preview-sum {
-    transition: transform var(--ease-quick) 600ms;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .grid-widget__preview-avatar:hover,
-    .grid-widget__preview-sum:hover {
-      cursor: pointer;
-      transform: scale(1.1875);
-    }
-  }
-
-  .grid-widget__preview-avatar:active,
-  .grid-widget__preview-sum:active {
-    cursor: pointer;
-    transform: scale(0.875);
-  }
-`;var Ji={default:1,md:3,lg:5},x=class extends Ui{constructor(){super(...arguments);this._open=!1;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._feed)&&(this._open=!1)};this.reposition=()=>{if(!this._open||!this._previews||!this._feed||!this.gridContext?.grid)return;let t=[];t=[Ii({mainAxis:this.gridContext.grid.position==="down"?-16:-48,crossAxis:-13})],(!this.gridContext.grid.position||this.gridContext.grid.position==="smart")&&t.push(zi({fallbackPlacements:["bottom-start","top-start"],fallbackStrategy:"bestFit",padding:16}));let e=r=>kt.getOffsetParent(r,wt);Bi(this._previews,this._feed,{placement:this.gridContext.grid.position==="down"?"bottom-start":"top-start",middleware:t,strategy:"fixed",platform:{...kt,getOffsetParent:e}}).then(({x:r,y:n,placement:o})=>{this._feed.setAttribute("data-current-placement",o),Object.assign(this._feed.style,{left:`${r}px`,top:`${n}px`})})}}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.start(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.stop()}handlePopClick(){this._open||(this._open=!0)}start(){this._previews&&(this.cleanup=$i(this._previews,this._feed,()=>{this.reposition()}))}async stop(){return new Promise(t=>{this.cleanup?(this.cleanup(),this.cleanup=void 0,this.removeAttribute("data-current-placement"),this.style.removeProperty("--auto-size-available-width"),this.style.removeProperty("--auto-size-available-height"),requestAnimationFrame(()=>t())):t()})}async updated(t){super.updated(t),t.has("_open")&&(this._open?this.start():this.stop()),t.has("position")&&(this.gridContext?.grid?.position==="smart"&&this._open?this.start():this.stop()),this._open&&(await this.updateComplete,this.reposition())}get previewComments(){return this.gridContext?.comments.filter(t=>t.parentCommentId===null).sort((t,e)=>new Date(e.createdAt??"").getTime()-new Date(t.createdAt??"").getTime()).slice(0,Ji[this.gridContext.grid?.preview??"default"])}render(){return this.gridContext?.loading?I`<div class="grid-widget">
-        <pop-loader class="grid-widget__loader" variant="spinner"></pop-loader>
-      </div>`:this.gridContext?.grid?I`
-      <div
-        class=${Dt({"grid-widget":!0,[`grid-widget--align-${this.gridContext.grid.align}`]:!0,[`grid-widget--appearance-${this.gridContext.grid.appearance}`]:!0,[`grid-widget--icon-${this.gridContext.grid.icon}`]:!0,[`grid-widget--layout-${this.gridContext.grid.layout}`]:!0,[`grid-widget--position-${this.gridContext.grid.position}`]:!0,[`grid-widget--preview-${this.gridContext.grid.preview}`]:!0})}
-      >
-        <div class="grid-widget__previews">
-          ${(this.previewComments??[]).map(t=>I`
-              <pop-comment-avatar class="grid-widget__preview-avatar" size="xs" @click=${this.handlePopClick}>
-                <img src=${Qi(t.account?.avatar?.url)} alt="${t.account?.name}’s avatar" />
-              </pop-comment-avatar>
-            `)}
-          <pop-sum class="grid-widget__preview-sum">${this.gridContext.grid.commentsCount}</pop-sum>
-          <pop-comment-icon
-            size="sm"
-            theme=${this.gridContext.grid?.customAddIcon?"brand":"neutral"}
-            variant="add"
-            .iconUrl=${this.gridContext.grid?.customAddIcon||void 0}
-          ></pop-comment-icon>
-        </div>
-        <div
-          class=${Dt({"grid-widget__feed":!0,"grid-widget__feed--open":this._open})}
-          part="feed"
-        >
-          <pop-feed ?open=${this._open}></pop-feed>
+    `;
+	}
+};
+L([C(D)], q.prototype, "gridStore", void 0), customElements.get("pop-comment") || customElements.define("pop-comment", q);
+//#endregion
+//#region src/components/pop-feed.ts
+var Ne = F("\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"), J = class extends I {
+	constructor(...e) {
+		super(...e), this._footerChild = null, this._wasOpen = !1;
+	}
+	get styleSheets() {
+		return [Ne];
+	}
+	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 && b(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 = g.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    ";
+	}
+};
+L([C(D)], J.prototype, "gridStore", void 0), customElements.get("pop-feed") || customElements.define("pop-feed", J);
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function Pe() {
+	return typeof window < "u";
+}
+function Y(e) {
+	var t;
+	return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function Fe(e) {
+	return Pe() ? e instanceof Element || e instanceof Y(e).Element : !1;
+}
+var Ie = /transform|translate|scale|rotate|perspective|filter/, Le = /paint|layout|strict|content/, X = (e) => !!e && e !== "none", Z;
+function Re(e) {
+	let t = Fe(e) ? Be(e) : e;
+	return X(t.transform) || X(t.translate) || X(t.scale) || X(t.rotate) || X(t.perspective) || !ze() && (X(t.backdropFilter) || X(t.filter)) || Ie.test(t.willChange || "") || Le.test(t.contain || "");
+}
+function ze() {
+	return Z ??= typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none"), Z;
+}
+function Be(e) {
+	return Y(e).getComputedStyle(e);
+}
+//#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 Ve(e) {
+	return He(e);
+}
+function Q(e) {
+	return e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode;
+}
+function He(e) {
+	for (let t = e; t; t = Q(t)) if (t instanceof Element && getComputedStyle(t).display === "none") return null;
+	for (let t = Q(e); t; t = Q(t)) {
+		if (!(t instanceof Element)) continue;
+		let e = getComputedStyle(t);
+		if (e.display !== "contents" && (e.position !== "static" || Re(e) || t.tagName === "BODY")) return t;
+	}
+	return null;
+}
+//#endregion
+//#region src/components/pop-grid.ts
+var Ue = F("\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"), We = class extends I {
+	constructor(...e) {
+		super(...e), this._initialized = !1;
+	}
+	get styleSheets() {
+		return [Ue];
+	}
+	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") ?? "", n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
+		this._store = new D({
+			apiUrl: t,
+			publicKey: e,
+			pageUrl: n,
+			externalId: r
+		}), ce(this, this._store), super.connectedCallback(), this._store.load().then((n) => {
+			n && b(t, e);
+		});
+	}
+	disconnectedCallback() {
+		this._floatingCleanup?.(), this._store.destroy(), le(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 l = [];
+			l = [s({
+				mainAxis: r.position === "down" ? -16 : -54,
+				crossAxis: -18
+			})], (!r.position || r.position === "auto") && l.push(o({
+				fallbackPlacements: ["bottom-start", "top-start"],
+				fallbackStrategy: "bestFit",
+				padding: 16
+			}));
+			let u = (e) => c.getOffsetParent(e, Ve), d = () => {
+				a(t, n, {
+					placement: r.position === "down" ? "bottom-start" : "top-start",
+					middleware: l,
+					strategy: "fixed",
+					platform: {
+						...c,
+						getOffsetParent: u
+					}
+				}).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 = i(t, n, d);
+		});
+	}
+	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", We);
+//#endregion
+//#region src/components/pop-widget.ts
+var Ge = F("\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"), $ = class extends I {
+	constructor(...e) {
+		super(...e), this.events = { click: "onClick" };
+	}
+	get styleSheets() {
+		return [Ge];
+	}
+	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}">
+          ${B(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>
-    `:I`<p>No grid found.</p>`}};x.styles=[l(x,x,"styles"),St],i([Ri({context:C,subscribe:!0})],x.prototype,"gridContext",2),i([Ni()],x.prototype,"_open",2),i([jt(".grid-widget__previews")],x.prototype,"_previews",2),i([jt(".grid-widget__feed")],x.prototype,"_feed",2),x=i([Ki("pop-widget")],x);var Fi=x;import{provide as Yi}from"@lit/context";import{LitElement as Gi,html as Pi}from"lit";import{customElement as Wi,property as Xi,state as Oi}from"lit/decorators.js";import Zi from"openapi-fetch";var At=s=>Zi({baseUrl:s});var T=class extends Gi{constructor(){super(...arguments);this.apiState={baseUrl:"",client:null}}connectedCallback(){super.connectedCallback(),this.apiUrl?(this.apiState={...this.apiState,baseUrl:this.apiUrl,client:At(this.apiUrl)},this.requestUpdate()):console.error("API URL or ID not provided.")}render(){return Pi`<slot></slot>`}};i([Xi({type:String,attribute:"api-url"})],T.prototype,"apiUrl",2),i([Yi({context:E}),Oi()],T.prototype,"apiState",2),T=i([Wi("pop-api-provider")],T);var tr=T;export{tr as PopApiProvider,It as PopAuthJoin,Zt as PopAuthPanel,ie as PopAuthProvider,ue as PopAuthSignIn,we as PopAuthVerifyCode,ui as PopComment,_e as PopCommentBar,Ye as PopCommentInput,ii as PopCommentThread,vi as PopFeed,Ei as PopGrid,ki as PopGridProvider,Fi as PopWidget};
+    `;
+	}
+};
+//#endregion
+//#region src/index.ts
+if (L([C(D)], $.prototype, "gridStore", void 0), customElements.get("pop-widget") || customElements.define("pop-widget", $), 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=index.js.map