@gamention/pulse-elements 0.1.10 → 0.1.12

package/dist/pulse-elements.js

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 let vt = class extends Event {
-  constructor(e, t, i, n) {
-    super("context-request", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = t, this.callback = i, this.subscribe = n ?? !1;
+  constructor(e, t, i, s) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = t, this.callback = i, this.subscribe = s ?? !1;
   }
 };
 /**
@@ -19,13 +19,13 @@ let vt = class extends Event {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 let We = class {
-  constructor(e, t, i, n) {
+  constructor(e, t, i, s) {
     if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (o, r) => {
       this.unsubscribe && (this.unsubscribe !== r && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = o, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(o, r)), this.unsubscribe = r;
     }, this.host = e, t.context !== void 0) {
       const o = t;
       this.context = o.context, this.callback = o.callback, this.subscribe = o.subscribe ?? !1;
-    } else this.context = t, this.callback = i, this.subscribe = n ?? !1;
+    } else this.context = t, this.callback = i, this.subscribe = s ?? !1;
     this.host.addController(this);
   }
   hostConnected() {
@@ -64,8 +64,8 @@ let At = class {
     this.subscriptions.has(e) || this.subscriptions.set(e, { disposer: () => {
       this.subscriptions.delete(e);
     }, consumerHost: t });
-    const { disposer: n } = this.subscriptions.get(e);
-    e(this.value, n);
+    const { disposer: s } = this.subscriptions.get(e);
+    e(this.value, s);
   }
   clearCallbacks() {
     this.subscriptions.clear();
@@ -82,7 +82,7 @@ let It = class extends Event {
   }
 }, Xe = class extends At {
   constructor(e, t, i) {
-    var n, o;
+    var s, o;
     super(t.context !== void 0 ? t.initialValue : i), this.onContextRequest = (r) => {
       if (r.context !== this.context) return;
       const l = r.contextTarget ?? r.composedPath()[0];
@@ -92,7 +92,7 @@ let It = class extends Event {
       const l = /* @__PURE__ */ new Set();
       for (const [a, { consumerHost: c }] of this.subscriptions) l.has(a) || (l.add(a), c.dispatchEvent(new vt(this.context, c, a, !0)));
       r.stopPropagation();
-    }, this.host = e, t.context !== void 0 ? this.context = t.context : this.context = t, this.attachListeners(), (o = (n = this.host).addController) == null || o.call(n, this);
+    }, this.host = e, t.context !== void 0 ? this.context = t.context : this.context = t, this.attachListeners(), (o = (s = this.host).addController) == null || o.call(s, this);
   }
   attachListeners() {
     this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
@@ -106,23 +106,23 @@ let It = class extends Event {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function Mt({ context: s }) {
+function Mt({ context: n }) {
   return (e, t) => {
     const i = /* @__PURE__ */ new WeakMap();
     if (typeof t == "object") return { get() {
       return e.get.call(this);
-    }, set(n) {
-      return i.get(this).setValue(n), e.set.call(this, n);
-    }, init(n) {
-      return i.set(this, new Xe(this, { context: s, initialValue: n })), n;
+    }, set(s) {
+      return i.get(this).setValue(s), e.set.call(this, s);
+    }, init(s) {
+      return i.set(this, new Xe(this, { context: n, initialValue: s })), s;
     } };
     {
       e.constructor.addInitializer(((r) => {
-        i.set(r, new Xe(r, { context: s }));
+        i.set(r, new Xe(r, { context: n }));
       }));
-      const n = Object.getOwnPropertyDescriptor(e, t);
+      const s = Object.getOwnPropertyDescriptor(e, t);
       let o;
-      if (n === void 0) {
+      if (s === void 0) {
         const r = /* @__PURE__ */ new WeakMap();
         o = { get() {
           return r.get(this);
@@ -130,8 +130,8 @@ function Mt({ context: s }) {
           i.get(this).setValue(l), r.set(this, l);
         }, configurable: !0, enumerable: !0 };
       } else {
-        const r = n.set;
-        o = { ...n, set(l) {
+        const r = s.set;
+        o = { ...s, set(l) {
           i.get(this).setValue(l), r == null || r.call(this, l);
         } };
       }
@@ -144,24 +144,24 @@ function Mt({ context: s }) {
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function pe({ context: s, subscribe: e }) {
+function pe({ context: n, subscribe: e }) {
   return (t, i) => {
     typeof i == "object" ? i.addInitializer((function() {
-      new We(this, { context: s, callback: (n) => {
-        t.set.call(this, n);
+      new We(this, { context: n, callback: (s) => {
+        t.set.call(this, s);
       }, subscribe: e });
-    })) : t.constructor.addInitializer(((n) => {
-      new We(n, { context: s, callback: (o) => {
-        n[i] = o;
+    })) : t.constructor.addInitializer(((s) => {
+      new We(s, { context: n, callback: (o) => {
+        s[i] = o;
       }, subscribe: e });
     }));
   };
 }
-var Ot = Object.defineProperty, Rt = (s, e, t) => e in s ? Ot(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => Rt(s, typeof e != "symbol" ? e + "" : e, t);
+var Ot = Object.defineProperty, Rt = (n, e, t) => e in n ? Ot(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, x = (n, e, t) => Rt(n, typeof e != "symbol" ? e + "" : e, t);
 const Lt = "ws://localhost:4567";
 let je = class {
   constructor() {
-    y(this, "handlers", /* @__PURE__ */ new Map());
+    x(this, "handlers", /* @__PURE__ */ new Map());
   }
   on(e, t) {
     this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set());
@@ -174,14 +174,14 @@ let je = class {
   }
   emit(e, t) {
     var i;
-    (i = this.handlers.get(e)) == null || i.forEach((n) => n(t));
+    (i = this.handlers.get(e)) == null || i.forEach((s) => s(t));
   }
   removeAll() {
     this.handlers.clear();
   }
 }, jt = class extends je {
   constructor(e) {
-    super(), y(this, "ws", null), y(this, "endpoint"), y(this, "reconnectAttempt", 0), y(this, "reconnectTimer", null), y(this, "_state", "disconnected"), this.endpoint = e ?? Lt;
+    super(), x(this, "ws", null), x(this, "endpoint"), x(this, "reconnectAttempt", 0), x(this, "reconnectTimer", null), x(this, "_state", "disconnected"), this.endpoint = e ?? Lt;
   }
   get state() {
     return this._state;
@@ -216,13 +216,23 @@ let je = class {
       this.reconnectTimer = null, this.connect();
     }, e);
   }
-}, zt = class extends je {
+}, Ut = class extends je {
   constructor() {
-    super(...arguments), y(this, "_user", null), y(this, "_users", /* @__PURE__ */ new Map()), y(this, "_presence", /* @__PURE__ */ new Map()), y(this, "_threads", /* @__PURE__ */ new Map()), y(this, "_reactions", /* @__PURE__ */ new Map()), y(this, "_notifications", []), y(this, "_activityLogs", []), y(this, "_typing", /* @__PURE__ */ new Map()), y(this, "_viewports", /* @__PURE__ */ new Map()), y(this, "_selections", /* @__PURE__ */ new Map());
+    super(...arguments), x(this, "baseUrl", ""), x(this, "_user", null), x(this, "_users", /* @__PURE__ */ new Map()), x(this, "_presence", /* @__PURE__ */ new Map()), x(this, "_threads", /* @__PURE__ */ new Map()), x(this, "_reactions", /* @__PURE__ */ new Map()), x(this, "_notifications", []), x(this, "_activityLogs", []), x(this, "_typing", /* @__PURE__ */ new Map()), x(this, "_viewports", /* @__PURE__ */ new Map()), x(this, "_selections", /* @__PURE__ */ new Map());
   }
   get user() {
     return this._user;
   }
+  /** Optimistically remove a comment from local state (before server round-trip). */
+  removeComment(e) {
+    for (const [t, i] of this._threads) {
+      const s = i.comments.findIndex((o) => o.id === e);
+      if (s !== -1) {
+        i.comments.splice(s, 1), i.comments.length === 0 && this._threads.delete(t), this.emit("threads", this.threads);
+        return;
+      }
+    }
+  }
   get presence() {
     return [...this._presence.values()];
   }
@@ -247,10 +257,10 @@ let je = class {
   getTypingUsers(e) {
     const t = this._typing.get(e);
     if (!t) return [];
-    const i = Date.now(), n = [];
+    const i = Date.now(), s = [];
     for (const [o, r] of t)
-      i - r < 3e3 && n.push(o);
-    return n;
+      i - r < 3e3 && s.push(o);
+    return s;
   }
   get viewports() {
     return this._viewports;
@@ -261,6 +271,26 @@ let je = class {
   get selections() {
     return this._selections;
   }
+  /** Resolve a relative URL to absolute using baseUrl. */
+  resolveUrl(e) {
+    return !this.baseUrl || !e || e.startsWith("http://") || e.startsWith("https://") ? e : `${this.baseUrl}${e}`;
+  }
+  resolveAttachments(e) {
+    return e.map((t) => ({
+      ...t,
+      url: this.resolveUrl(t.url),
+      thumbnailUrl: t.thumbnailUrl ? this.resolveUrl(t.thumbnailUrl) : void 0
+    }));
+  }
+  resolveComment(e) {
+    return !e.attachments || e.attachments.length === 0 ? e : { ...e, attachments: this.resolveAttachments(e.attachments) };
+  }
+  resolveThread(e) {
+    return {
+      ...e,
+      comments: e.comments.map((t) => this.resolveComment(t))
+    };
+  }
   handleMessage(e) {
     switch (e.type) {
       case "auth:ok":
@@ -270,7 +300,7 @@ let je = class {
         for (const t of e.presence)
           this._presence.set(t.user.id, t), this._users.set(t.user.id, t.user);
         this._users.set(e.user.id, e.user), this._threads.clear();
-        for (const t of e.threads) this._threads.set(t.id, t);
+        for (const t of e.threads) this._threads.set(t.id, this.resolveThread(t));
         this._notifications = e.notifications, this._reactions.clear();
         for (const t of e.reactions) {
           const i = this._reactions.get(t.targetId) ?? [];
@@ -299,18 +329,18 @@ let je = class {
         this.emit("click", { userId: e.userId, position: e.position });
         break;
       case "thread:created":
-        this._threads.set(e.thread.id, e.thread), this.emit("threads", this.threads);
+        this._threads.set(e.thread.id, this.resolveThread(e.thread)), this.emit("threads", this.threads);
         break;
       case "comment:created": {
         const t = this._threads.get(e.threadId);
-        t && (t.comments.push(e.comment), t.updatedAt = e.comment.createdAt, this.emit("threads", this.threads));
+        t && (t.comments.push(this.resolveComment(e.comment)), t.updatedAt = e.comment.createdAt, this.emit("threads", this.threads));
         break;
       }
       case "comment:edited": {
         const t = this._threads.get(e.threadId);
         if (t) {
-          const i = t.comments.findIndex((n) => n.id === e.comment.id);
-          i !== -1 && (t.comments[i] = e.comment), this.emit("threads", this.threads);
+          const i = t.comments.findIndex((s) => s.id === e.comment.id);
+          i !== -1 && (t.comments[i] = this.resolveComment(e.comment)), this.emit("threads", this.threads);
         }
         break;
       }
@@ -338,7 +368,7 @@ let je = class {
       case "reaction:removed": {
         const t = this._reactions.get(e.targetId);
         if (t) {
-          const i = t.filter((n) => n.id !== e.reactionId);
+          const i = t.filter((s) => s.id !== e.reactionId);
           this._reactions.set(e.targetId, i), this.emit("reactions", {
             targetId: e.targetId,
             reactions: i
@@ -399,12 +429,12 @@ let je = class {
 }, xt = class extends je {
   constructor(e) {
     var t;
-    super(), y(this, "state"), y(this, "connection"), y(this, "config"), y(this, "heartbeatTimer", null), y(this, "lastCursorSend", 0), y(this, "pendingCursor", null), y(this, "cursorTimer", null), this.config = e, this.state = new zt();
+    super(), x(this, "state"), x(this, "connection"), x(this, "config"), x(this, "heartbeatTimer", null), x(this, "lastCursorSend", 0), x(this, "pendingCursor", null), x(this, "cursorTimer", null), this.config = e, this.state = new Ut(), this.state.baseUrl = (e.endpoint ?? "").replace(/^ws(s?):/, "http$1:").replace(/\/$/, "");
     const i = ((t = e.endpoint) == null ? void 0 : t.replace(/^http/, "ws")) ?? void 0;
-    this.connection = new jt(i), this.connection.on("message", (n) => {
-      this.state.handleMessage(n), this.emit(n.type, n);
-    }), this.connection.on("state", (n) => {
-      this.emit("connection", n), n === "connected" ? (this.authenticate(), this.startHeartbeat()) : n === "disconnected" && this.stopHeartbeat();
+    this.connection = new jt(i), this.connection.on("message", (s) => {
+      this.state.handleMessage(s), this.emit(s.type, s);
+    }), this.connection.on("state", (s) => {
+      this.emit("connection", s), s === "connected" ? (this.authenticate(), this.startHeartbeat()) : s === "disconnected" && this.stopHeartbeat();
     });
   }
   /** Current WebSocket connection state. */
@@ -462,15 +492,15 @@ let je = class {
       attachmentIds: t.attachmentIds
     }), i;
   }
-  reply(e, t, i = [], n) {
+  reply(e, t, i = [], s) {
     const o = crypto.randomUUID();
-    return this.send({ type: "comment:create", threadId: e, id: o, body: t, mentions: i, attachmentIds: n }), o;
+    return this.send({ type: "comment:create", threadId: e, id: o, body: t, mentions: i, attachmentIds: s }), o;
   }
   editComment(e, t, i = []) {
     this.send({ type: "comment:edit", commentId: e, body: t, mentions: i });
   }
   deleteComment(e) {
-    this.send({ type: "comment:delete", commentId: e });
+    this.state.removeComment(e), this.send({ type: "comment:delete", commentId: e });
   }
   resolveThread(e, t = !0) {
     this.send({ type: "thread:resolve", threadId: e, resolved: t });
@@ -520,7 +550,7 @@ let je = class {
   async uploadFile(e) {
     const t = (this.config.endpoint ?? window.location.origin).replace(/^ws(s?):/, "http$1:"), i = new FormData();
     i.append("file", e);
-    const n = await fetch(`${t}/api/v1/upload`, {
+    const s = await fetch(`${t}/api/v1/upload`, {
       method: "POST",
       headers: {
         "X-Pulse-Key": this.config.apiKey,
@@ -528,11 +558,12 @@ let je = class {
       },
       body: i
     });
-    if (!n.ok) {
-      const o = await n.json().catch(() => ({ error: "Upload failed" }));
-      throw new Error(o.error ?? "Upload failed");
+    if (!s.ok) {
+      const r = await s.json().catch(() => ({ error: "Upload failed" }));
+      throw new Error(r.error ?? "Upload failed");
     }
-    return n.json();
+    const o = await s.json();
+    return o.url && !o.url.startsWith("http") && (o.url = `${t}${o.url}`), o.thumbnailUrl && !o.thumbnailUrl.startsWith("http") && (o.thumbnailUrl = `${t}${o.thumbnailUrl}`), o;
   }
   // ── Presence control ──
   setAppearOffline(e) {
@@ -544,16 +575,16 @@ let je = class {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ve = globalThis, ze = ve.ShadowRoot && (ve.ShadyCSS === void 0 || ve.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ue = Symbol(), Ye = /* @__PURE__ */ new WeakMap();
+const ve = globalThis, Ue = ve.ShadowRoot && (ve.ShadyCSS === void 0 || ve.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ze = Symbol(), Ye = /* @__PURE__ */ new WeakMap();
 let yt = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== Ue) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== ze) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
     let e = this.o;
     const t = this.t;
-    if (ze && e === void 0) {
+    if (Ue && e === void 0) {
       const i = t !== void 0 && t.length === 1;
       i && (e = Ye.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && Ye.set(t, e));
     }
@@ -563,59 +594,59 @@ let yt = class {
     return this.cssText;
   }
 };
-const Ut = (s) => new yt(typeof s == "string" ? s : s + "", void 0, Ue), I = (s, ...e) => {
-  const t = s.length === 1 ? s[0] : e.reduce((i, n, o) => i + ((r) => {
+const zt = (n) => new yt(typeof n == "string" ? n : n + "", void 0, ze), A = (n, ...e) => {
+  const t = n.length === 1 ? n[0] : e.reduce((i, s, o) => i + ((r) => {
     if (r._$cssResult$ === !0) return r.cssText;
     if (typeof r == "number") return r;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(n) + s[o + 1], s[0]);
-  return new yt(t, s, Ue);
-}, Dt = (s, e) => {
-  if (ze) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  })(s) + n[o + 1], n[0]);
+  return new yt(t, n, ze);
+}, Dt = (n, e) => {
+  if (Ue) n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
-    const i = document.createElement("style"), n = ve.litNonce;
-    n !== void 0 && i.setAttribute("nonce", n), i.textContent = t.cssText, s.appendChild(i);
+    const i = document.createElement("style"), s = ve.litNonce;
+    s !== void 0 && i.setAttribute("nonce", s), i.textContent = t.cssText, n.appendChild(i);
   }
-}, Ke = ze ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
+}, Ke = Ue ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
-  return Ut(t);
-})(s) : s;
+  return zt(t);
+})(n) : n;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Ht, defineProperty: Bt, getOwnPropertyDescriptor: Nt, getOwnPropertyNames: Ft, getOwnPropertySymbols: qt, getPrototypeOf: Vt } = Object, U = globalThis, Ge = U.trustedTypes, Wt = Ge ? Ge.emptyScript : "", Te = U.reactiveElementPolyfillSupport, ie = (s, e) => s, we = { toAttribute(s, e) {
+const { is: Ht, defineProperty: Nt, getOwnPropertyDescriptor: Bt, getOwnPropertyNames: Ft, getOwnPropertySymbols: Vt, getPrototypeOf: qt } = Object, z = globalThis, Ge = z.trustedTypes, Wt = Ge ? Ge.emptyScript : "", Te = z.reactiveElementPolyfillSupport, ie = (n, e) => n, we = { toAttribute(n, e) {
   switch (e) {
     case Boolean:
-      s = s ? Wt : null;
+      n = n ? Wt : null;
       break;
     case Object:
     case Array:
-      s = s == null ? s : JSON.stringify(s);
+      n = n == null ? n : JSON.stringify(n);
   }
-  return s;
-}, fromAttribute(s, e) {
-  let t = s;
+  return n;
+}, fromAttribute(n, e) {
+  let t = n;
   switch (e) {
     case Boolean:
-      t = s !== null;
+      t = n !== null;
       break;
     case Number:
-      t = s === null ? null : Number(s);
+      t = n === null ? null : Number(n);
       break;
     case Object:
     case Array:
       try {
-        t = JSON.parse(s);
+        t = JSON.parse(n);
       } catch {
         t = null;
       }
   }
   return t;
-} }, De = (s, e) => !Ht(s, e), Ze = { attribute: !0, type: String, converter: we, reflect: !1, useDefault: !1, hasChanged: De };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), U.litPropertyMetadata ?? (U.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+} }, De = (n, e) => !Ht(n, e), Ze = { attribute: !0, type: String, converter: we, reflect: !1, useDefault: !1, hasChanged: De };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), z.litPropertyMetadata ?? (z.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let Y = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
@@ -625,18 +656,18 @@ let Y = class extends HTMLElement {
   }
   static createProperty(e, t = Ze) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
-      const i = Symbol(), n = this.getPropertyDescriptor(e, i, t);
-      n !== void 0 && Bt(this.prototype, e, n);
+      const i = Symbol(), s = this.getPropertyDescriptor(e, i, t);
+      s !== void 0 && Nt(this.prototype, e, s);
     }
   }
   static getPropertyDescriptor(e, t, i) {
-    const { get: n, set: o } = Nt(this.prototype, e) ?? { get() {
+    const { get: s, set: o } = Bt(this.prototype, e) ?? { get() {
       return this[t];
     }, set(r) {
       this[t] = r;
     } };
-    return { get: n, set(r) {
-      const l = n == null ? void 0 : n.call(this);
+    return { get: s, set(r) {
+      const l = s == null ? void 0 : s.call(this);
       o == null || o.call(this, r), this.requestUpdate(e, l, i);
     }, configurable: !0, enumerable: !0 };
   }
@@ -645,24 +676,24 @@ let Y = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(ie("elementProperties"))) return;
-    const e = Vt(this);
+    const e = qt(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(ie("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ie("properties"))) {
-      const t = this.properties, i = [...Ft(t), ...qt(t)];
-      for (const n of i) this.createProperty(n, t[n]);
+      const t = this.properties, i = [...Ft(t), ...Vt(t)];
+      for (const s of i) this.createProperty(s, t[s]);
     }
     const e = this[Symbol.metadata];
     if (e !== null) {
       const t = litPropertyMetadata.get(e);
-      if (t !== void 0) for (const [i, n] of t) this.elementProperties.set(i, n);
+      if (t !== void 0) for (const [i, s] of t) this.elementProperties.set(i, s);
     }
     this._$Eh = /* @__PURE__ */ new Map();
     for (const [t, i] of this.elementProperties) {
-      const n = this._$Eu(t, i);
-      n !== void 0 && this._$Eh.set(n, t);
+      const s = this._$Eu(t, i);
+      s !== void 0 && this._$Eh.set(s, t);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
@@ -670,7 +701,7 @@ let Y = class extends HTMLElement {
     const t = [];
     if (Array.isArray(e)) {
       const i = new Set(e.flat(1 / 0).reverse());
-      for (const n of i) t.unshift(Ke(n));
+      for (const s of i) t.unshift(Ke(s));
     } else e !== void 0 && t.push(Ke(e));
     return t;
   }
@@ -723,33 +754,33 @@ let Y = class extends HTMLElement {
   }
   _$ET(e, t) {
     var o;
-    const i = this.constructor.elementProperties.get(e), n = this.constructor._$Eu(e, i);
-    if (n !== void 0 && i.reflect === !0) {
+    const i = this.constructor.elementProperties.get(e), s = this.constructor._$Eu(e, i);
+    if (s !== void 0 && i.reflect === !0) {
       const r = (((o = i.converter) == null ? void 0 : o.toAttribute) !== void 0 ? i.converter : we).toAttribute(t, i.type);
-      this._$Em = e, r == null ? this.removeAttribute(n) : this.setAttribute(n, r), this._$Em = null;
+      this._$Em = e, r == null ? this.removeAttribute(s) : this.setAttribute(s, r), this._$Em = null;
     }
   }
   _$AK(e, t) {
     var o, r;
-    const i = this.constructor, n = i._$Eh.get(e);
-    if (n !== void 0 && this._$Em !== n) {
-      const l = i.getPropertyOptions(n), a = typeof l.converter == "function" ? { fromAttribute: l.converter } : ((o = l.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? l.converter : we;
-      this._$Em = n;
+    const i = this.constructor, s = i._$Eh.get(e);
+    if (s !== void 0 && this._$Em !== s) {
+      const l = i.getPropertyOptions(s), a = typeof l.converter == "function" ? { fromAttribute: l.converter } : ((o = l.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? l.converter : we;
+      this._$Em = s;
       const c = a.fromAttribute(t, l.type);
-      this[n] = c ?? ((r = this._$Ej) == null ? void 0 : r.get(n)) ?? c, this._$Em = null;
+      this[s] = c ?? ((r = this._$Ej) == null ? void 0 : r.get(s)) ?? c, this._$Em = null;
     }
   }
-  requestUpdate(e, t, i, n = !1, o) {
+  requestUpdate(e, t, i, s = !1, o) {
     var r;
     if (e !== void 0) {
       const l = this.constructor;
-      if (n === !1 && (o = this[e]), i ?? (i = l.getPropertyOptions(e)), !((i.hasChanged ?? De)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(l._$Eu(e, i)))) return;
+      if (s === !1 && (o = this[e]), i ?? (i = l.getPropertyOptions(e)), !((i.hasChanged ?? De)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(l._$Eu(e, i)))) return;
       this.C(e, t, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(e, t, { useDefault: i, reflect: n, wrapped: o }, r) {
-    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, r ?? t ?? this[e]), o !== !0 || r !== void 0) || (this._$AL.has(e) || (this.hasUpdated || i || (t = void 0), this._$AL.set(e, t)), n === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
+  C(e, t, { useDefault: i, reflect: s, wrapped: o }, r) {
+    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, r ?? t ?? this[e]), o !== !0 || r !== void 0) || (this._$AL.has(e) || (this.hasUpdated || i || (t = void 0), this._$AL.set(e, t)), s === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
   }
   async _$EP() {
     this.isUpdatePending = !0;
@@ -772,8 +803,8 @@ let Y = class extends HTMLElement {
         for (const [o, r] of this._$Ep) this[o] = r;
         this._$Ep = void 0;
       }
-      const n = this.constructor.elementProperties;
-      if (n.size > 0) for (const [o, r] of n) {
+      const s = this.constructor.elementProperties;
+      if (s.size > 0) for (const [o, r] of s) {
         const { wrapped: l } = r, a = this[o];
         l !== !0 || this._$AL.has(o) || a === void 0 || this.C(o, void 0, r, a);
       }
@@ -781,12 +812,12 @@ let Y = class extends HTMLElement {
     let e = !1;
     const t = this._$AL;
     try {
-      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (i = this._$EO) == null || i.forEach((n) => {
+      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (i = this._$EO) == null || i.forEach((s) => {
         var o;
-        return (o = n.hostUpdate) == null ? void 0 : o.call(n);
+        return (o = s.hostUpdate) == null ? void 0 : o.call(s);
       }), this.update(t)) : this._$EM();
-    } catch (n) {
-      throw e = !1, this._$EM(), n;
+    } catch (s) {
+      throw e = !1, this._$EM(), s;
     }
     e && this._$AE(t);
   }
@@ -795,8 +826,8 @@ let Y = class extends HTMLElement {
   _$AE(e) {
     var t;
     (t = this._$EO) == null || t.forEach((i) => {
-      var n;
-      return (n = i.hostUpdated) == null ? void 0 : n.call(i);
+      var s;
+      return (s = i.hostUpdated) == null ? void 0 : s.call(i);
     }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
   }
   _$EM() {
@@ -819,59 +850,59 @@ let Y = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-Y.elementStyles = [], Y.shadowRootOptions = { mode: "open" }, Y[ie("elementProperties")] = /* @__PURE__ */ new Map(), Y[ie("finalized")] = /* @__PURE__ */ new Map(), Te == null || Te({ ReactiveElement: Y }), (U.reactiveElementVersions ?? (U.reactiveElementVersions = [])).push("2.1.2");
+Y.elementStyles = [], Y.shadowRootOptions = { mode: "open" }, Y[ie("elementProperties")] = /* @__PURE__ */ new Map(), Y[ie("finalized")] = /* @__PURE__ */ new Map(), Te == null || Te({ ReactiveElement: Y }), (z.reactiveElementVersions ?? (z.reactiveElementVersions = [])).push("2.1.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const se = globalThis, Je = (s) => s, $e = se.trustedTypes, Qe = $e ? $e.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, wt = "$lit$", z = `lit$${Math.random().toFixed(9).slice(2)}$`, $t = "?" + z, Xt = `<${$t}>`, F = document, oe = () => F.createComment(""), re = (s) => s === null || typeof s != "object" && typeof s != "function", He = Array.isArray, Yt = (s) => He(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", Se = `[ 	
+const se = globalThis, Je = (n) => n, $e = se.trustedTypes, Qe = $e ? $e.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, wt = "$lit$", U = `lit$${Math.random().toFixed(9).slice(2)}$`, $t = "?" + U, Xt = `<${$t}>`, F = document, oe = () => F.createComment(""), re = (n) => n === null || typeof n != "object" && typeof n != "function", He = Array.isArray, Yt = (n) => He(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Se = `[ 	
 \f\r]`, te = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, et = /-->/g, tt = />/g, H = RegExp(`>|${Se}(?:([^\\s"'>=/]+)(${Se}*=${Se}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), it = /'/g, st = /"/g, kt = /^(?:script|style|textarea|title)$/i, Et = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), h = Et(1), Kt = Et(2), q = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), nt = /* @__PURE__ */ new WeakMap(), B = F.createTreeWalker(F, 129);
-function Ct(s, e) {
-  if (!He(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+\f\r"'\`<>=]|("|')|))|$)`, "g"), it = /'/g, st = /"/g, kt = /^(?:script|style|textarea|title)$/i, Et = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), h = Et(1), Kt = Et(2), V = Symbol.for("lit-noChange"), f = Symbol.for("lit-nothing"), nt = /* @__PURE__ */ new WeakMap(), N = F.createTreeWalker(F, 129);
+function Ct(n, e) {
+  if (!He(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Qe !== void 0 ? Qe.createHTML(e) : e;
 }
-const Gt = (s, e) => {
-  const t = s.length - 1, i = [];
-  let n, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", r = te;
+const Gt = (n, e) => {
+  const t = n.length - 1, i = [];
+  let s, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", r = te;
   for (let l = 0; l < t; l++) {
-    const a = s[l];
+    const a = n[l];
     let c, p, d = -1, u = 0;
-    for (; u < a.length && (r.lastIndex = u, p = r.exec(a), p !== null); ) u = r.lastIndex, r === te ? p[1] === "!--" ? r = et : p[1] !== void 0 ? r = tt : p[2] !== void 0 ? (kt.test(p[2]) && (n = RegExp("</" + p[2], "g")), r = H) : p[3] !== void 0 && (r = H) : r === H ? p[0] === ">" ? (r = n ?? te, d = -1) : p[1] === void 0 ? d = -2 : (d = r.lastIndex - p[2].length, c = p[1], r = p[3] === void 0 ? H : p[3] === '"' ? st : it) : r === st || r === it ? r = H : r === et || r === tt ? r = te : (r = H, n = void 0);
-    const f = r === H && s[l + 1].startsWith("/>") ? " " : "";
-    o += r === te ? a + Xt : d >= 0 ? (i.push(c), a.slice(0, d) + wt + a.slice(d) + z + f) : a + z + (d === -2 ? l : f);
+    for (; u < a.length && (r.lastIndex = u, p = r.exec(a), p !== null); ) u = r.lastIndex, r === te ? p[1] === "!--" ? r = et : p[1] !== void 0 ? r = tt : p[2] !== void 0 ? (kt.test(p[2]) && (s = RegExp("</" + p[2], "g")), r = H) : p[3] !== void 0 && (r = H) : r === H ? p[0] === ">" ? (r = s ?? te, d = -1) : p[1] === void 0 ? d = -2 : (d = r.lastIndex - p[2].length, c = p[1], r = p[3] === void 0 ? H : p[3] === '"' ? st : it) : r === st || r === it ? r = H : r === et || r === tt ? r = te : (r = H, s = void 0);
+    const m = r === H && n[l + 1].startsWith("/>") ? " " : "";
+    o += r === te ? a + Xt : d >= 0 ? (i.push(c), a.slice(0, d) + wt + a.slice(d) + U + m) : a + U + (d === -2 ? l : m);
   }
-  return [Ct(s, o + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+  return [Ct(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
 class ae {
   constructor({ strings: e, _$litType$: t }, i) {
-    let n;
+    let s;
     this.parts = [];
     let o = 0, r = 0;
     const l = e.length - 1, a = this.parts, [c, p] = Gt(e, t);
-    if (this.el = ae.createElement(c, i), B.currentNode = this.el.content, t === 2 || t === 3) {
+    if (this.el = ae.createElement(c, i), N.currentNode = this.el.content, t === 2 || t === 3) {
       const d = this.el.content.firstChild;
       d.replaceWith(...d.childNodes);
     }
-    for (; (n = B.nextNode()) !== null && a.length < l; ) {
-      if (n.nodeType === 1) {
-        if (n.hasAttributes()) for (const d of n.getAttributeNames()) if (d.endsWith(wt)) {
-          const u = p[r++], f = n.getAttribute(d).split(z), b = /([.?@])?(.*)/.exec(u);
-          a.push({ type: 1, index: o, name: b[2], strings: f, ctor: b[1] === "." ? Jt : b[1] === "?" ? Qt : b[1] === "@" ? ei : Ee }), n.removeAttribute(d);
-        } else d.startsWith(z) && (a.push({ type: 6, index: o }), n.removeAttribute(d));
-        if (kt.test(n.tagName)) {
-          const d = n.textContent.split(z), u = d.length - 1;
+    for (; (s = N.nextNode()) !== null && a.length < l; ) {
+      if (s.nodeType === 1) {
+        if (s.hasAttributes()) for (const d of s.getAttributeNames()) if (d.endsWith(wt)) {
+          const u = p[r++], m = s.getAttribute(d).split(U), b = /([.?@])?(.*)/.exec(u);
+          a.push({ type: 1, index: o, name: b[2], strings: m, ctor: b[1] === "." ? Jt : b[1] === "?" ? Qt : b[1] === "@" ? ei : Ee }), s.removeAttribute(d);
+        } else d.startsWith(U) && (a.push({ type: 6, index: o }), s.removeAttribute(d));
+        if (kt.test(s.tagName)) {
+          const d = s.textContent.split(U), u = d.length - 1;
           if (u > 0) {
-            n.textContent = $e ? $e.emptyScript : "";
-            for (let f = 0; f < u; f++) n.append(d[f], oe()), B.nextNode(), a.push({ type: 2, index: ++o });
-            n.append(d[u], oe());
+            s.textContent = $e ? $e.emptyScript : "";
+            for (let m = 0; m < u; m++) s.append(d[m], oe()), N.nextNode(), a.push({ type: 2, index: ++o });
+            s.append(d[u], oe());
           }
         }
-      } else if (n.nodeType === 8) if (n.data === $t) a.push({ type: 2, index: o });
+      } else if (s.nodeType === 8) if (s.data === $t) a.push({ type: 2, index: o });
       else {
         let d = -1;
-        for (; (d = n.data.indexOf(z, d + 1)) !== -1; ) a.push({ type: 7, index: o }), d += z.length - 1;
+        for (; (d = s.data.indexOf(U, d + 1)) !== -1; ) a.push({ type: 7, index: o }), d += U.length - 1;
       }
       o++;
     }
@@ -881,12 +912,12 @@ class ae {
     return i.innerHTML = e, i;
   }
 }
-function K(s, e, t = s, i) {
+function K(n, e, t = n, i) {
   var r, l;
-  if (e === q) return e;
-  let n = i !== void 0 ? (r = t._$Co) == null ? void 0 : r[i] : t._$Cl;
+  if (e === V) return e;
+  let s = i !== void 0 ? (r = t._$Co) == null ? void 0 : r[i] : t._$Cl;
   const o = re(e) ? void 0 : e._$litDirective$;
-  return (n == null ? void 0 : n.constructor) !== o && ((l = n == null ? void 0 : n._$AO) == null || l.call(n, !1), o === void 0 ? n = void 0 : (n = new o(s), n._$AT(s, t, i)), i !== void 0 ? (t._$Co ?? (t._$Co = []))[i] = n : t._$Cl = n), n !== void 0 && (e = K(s, n._$AS(s, e.values), n, i)), e;
+  return (s == null ? void 0 : s.constructor) !== o && ((l = s == null ? void 0 : s._$AO) == null || l.call(s, !1), o === void 0 ? s = void 0 : (s = new o(n), s._$AT(n, t, i)), i !== void 0 ? (t._$Co ?? (t._$Co = []))[i] = s : t._$Cl = s), s !== void 0 && (e = K(n, s._$AS(n, e.values), s, i)), e;
 }
 class Zt {
   constructor(e, t) {
@@ -899,17 +930,17 @@ class Zt {
     return this._$AM._$AU;
   }
   u(e) {
-    const { el: { content: t }, parts: i } = this._$AD, n = ((e == null ? void 0 : e.creationScope) ?? F).importNode(t, !0);
-    B.currentNode = n;
-    let o = B.nextNode(), r = 0, l = 0, a = i[0];
+    const { el: { content: t }, parts: i } = this._$AD, s = ((e == null ? void 0 : e.creationScope) ?? F).importNode(t, !0);
+    N.currentNode = s;
+    let o = N.nextNode(), r = 0, l = 0, a = i[0];
     for (; a !== void 0; ) {
       if (r === a.index) {
         let c;
         a.type === 2 ? c = new ue(o, o.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(o, a.name, a.strings, this, e) : a.type === 6 && (c = new ti(o, this, e)), this._$AV.push(c), a = i[++l];
       }
-      r !== (a == null ? void 0 : a.index) && (o = B.nextNode(), r++);
+      r !== (a == null ? void 0 : a.index) && (o = N.nextNode(), r++);
     }
-    return B.currentNode = F, n;
+    return N.currentNode = F, s;
   }
   p(e) {
     let t = 0;
@@ -921,8 +952,8 @@ class ue {
     var e;
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
-  constructor(e, t, i, n) {
-    this.type = 2, this._$AH = m, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = n, this._$Cv = (n == null ? void 0 : n.isConnected) ?? !0;
+  constructor(e, t, i, s) {
+    this.type = 2, this._$AH = f, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = s, this._$Cv = (s == null ? void 0 : s.isConnected) ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -936,7 +967,7 @@ class ue {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = K(this, e, t), re(e) ? e === m || e == null || e === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : e !== this._$AH && e !== q && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Yt(e) ? this.k(e) : this._(e);
+    e = K(this, e, t), re(e) ? e === f || e == null || e === "" ? (this._$AH !== f && this._$AR(), this._$AH = f) : e !== this._$AH && e !== V && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Yt(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -945,14 +976,14 @@ class ue {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== m && re(this._$AH) ? this._$AA.nextSibling.data = e : this.T(F.createTextNode(e)), this._$AH = e;
+    this._$AH !== f && re(this._$AH) ? this._$AA.nextSibling.data = e : this.T(F.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
-    const { values: t, _$litType$: i } = e, n = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ae.createElement(Ct(i.h, i.h[0]), this.options)), i);
-    if (((o = this._$AH) == null ? void 0 : o._$AD) === n) this._$AH.p(t);
+    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ae.createElement(Ct(i.h, i.h[0]), this.options)), i);
+    if (((o = this._$AH) == null ? void 0 : o._$AD) === s) this._$AH.p(t);
     else {
-      const r = new Zt(n, this), l = r.u(this.options);
+      const r = new Zt(s, this), l = r.u(this.options);
       r.p(t), this.T(l), this._$AH = r;
     }
   }
@@ -963,15 +994,15 @@ class ue {
   k(e) {
     He(this._$AH) || (this._$AH = [], this._$AR());
     const t = this._$AH;
-    let i, n = 0;
-    for (const o of e) n === t.length ? t.push(i = new ue(this.O(oe()), this.O(oe()), this, this.options)) : i = t[n], i._$AI(o), n++;
-    n < t.length && (this._$AR(i && i._$AB.nextSibling, n), t.length = n);
+    let i, s = 0;
+    for (const o of e) s === t.length ? t.push(i = new ue(this.O(oe()), this.O(oe()), this, this.options)) : i = t[s], i._$AI(o), s++;
+    s < t.length && (this._$AR(i && i._$AB.nextSibling, s), t.length = s);
   }
   _$AR(e = this._$AA.nextSibling, t) {
     var i;
     for ((i = this._$AP) == null ? void 0 : i.call(this, !1, !0, t); e !== this._$AB; ) {
-      const n = Je(e).nextSibling;
-      Je(e).remove(), e = n;
+      const s = Je(e).nextSibling;
+      Je(e).remove(), e = s;
     }
   }
   setConnected(e) {
@@ -986,22 +1017,22 @@ class Ee {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(e, t, i, n, o) {
-    this.type = 1, this._$AH = m, this._$AN = void 0, this.element = e, this.name = t, this._$AM = n, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = m;
+  constructor(e, t, i, s, o) {
+    this.type = 1, this._$AH = f, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = f;
   }
-  _$AI(e, t = this, i, n) {
+  _$AI(e, t = this, i, s) {
     const o = this.strings;
     let r = !1;
-    if (o === void 0) e = K(this, e, t, 0), r = !re(e) || e !== this._$AH && e !== q, r && (this._$AH = e);
+    if (o === void 0) e = K(this, e, t, 0), r = !re(e) || e !== this._$AH && e !== V, r && (this._$AH = e);
     else {
       const l = e;
       let a, c;
-      for (e = o[0], a = 0; a < o.length - 1; a++) c = K(this, l[i + a], t, a), c === q && (c = this._$AH[a]), r || (r = !re(c) || c !== this._$AH[a]), c === m ? e = m : e !== m && (e += (c ?? "") + o[a + 1]), this._$AH[a] = c;
+      for (e = o[0], a = 0; a < o.length - 1; a++) c = K(this, l[i + a], t, a), c === V && (c = this._$AH[a]), r || (r = !re(c) || c !== this._$AH[a]), c === f ? e = f : e !== f && (e += (c ?? "") + o[a + 1]), this._$AH[a] = c;
     }
-    r && !n && this.j(e);
+    r && !s && this.j(e);
   }
   j(e) {
-    e === m ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === f ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class Jt extends Ee {
@@ -1009,7 +1040,7 @@ class Jt extends Ee {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === m ? void 0 : e;
+    this.element[this.name] = e === f ? void 0 : e;
   }
 }
 class Qt extends Ee {
@@ -1017,17 +1048,17 @@ class Qt extends Ee {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== m);
+    this.element.toggleAttribute(this.name, !!e && e !== f);
   }
 }
 class ei extends Ee {
-  constructor(e, t, i, n, o) {
-    super(e, t, i, n, o), this.type = 5;
+  constructor(e, t, i, s, o) {
+    super(e, t, i, s, o), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = K(this, e, t, 0) ?? m) === q) return;
-    const i = this._$AH, n = e === m && i !== m || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== m && (i === m || n);
-    n && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
+    if ((e = K(this, e, t, 0) ?? f) === V) return;
+    const i = this._$AH, s = e === f && i !== f || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== f && (i === f || s);
+    s && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
     var t;
@@ -1047,22 +1078,22 @@ class ti {
 }
 const Pe = se.litHtmlPolyfillSupport;
 Pe == null || Pe(ae, ue), (se.litHtmlVersions ?? (se.litHtmlVersions = [])).push("3.3.2");
-const ii = (s, e, t) => {
+const ii = (n, e, t) => {
   const i = (t == null ? void 0 : t.renderBefore) ?? e;
-  let n = i._$litPart$;
-  if (n === void 0) {
+  let s = i._$litPart$;
+  if (s === void 0) {
     const o = (t == null ? void 0 : t.renderBefore) ?? null;
-    i._$litPart$ = n = new ue(e.insertBefore(oe(), o), o, void 0, t ?? {});
+    i._$litPart$ = s = new ue(e.insertBefore(oe(), o), o, void 0, t ?? {});
   }
-  return n._$AI(s), n;
+  return s._$AI(n), s;
 };
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const N = globalThis;
-let S = class extends Y {
+const B = globalThis;
+let T = class extends Y {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1084,87 +1115,87 @@ let S = class extends Y {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return q;
+    return V;
   }
 };
 var bt;
-S._$litElement$ = !0, S.finalized = !0, (bt = N.litElementHydrateSupport) == null || bt.call(N, { LitElement: S });
-const Ae = N.litElementPolyfillSupport;
-Ae == null || Ae({ LitElement: S });
-(N.litElementVersions ?? (N.litElementVersions = [])).push("4.2.2");
+T._$litElement$ = !0, T.finalized = !0, (bt = B.litElementHydrateSupport) == null || bt.call(B, { LitElement: T });
+const Ae = B.litElementPolyfillSupport;
+Ae == null || Ae({ LitElement: T });
+(B.litElementVersions ?? (B.litElementVersions = [])).push("4.2.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const R = (s) => (e, t) => {
+const R = (n) => (e, t) => {
   t !== void 0 ? t.addInitializer(() => {
-    customElements.define(s, e);
-  }) : customElements.define(s, e);
+    customElements.define(n, e);
+  }) : customElements.define(n, e);
 };
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const si = { attribute: !0, type: String, converter: we, reflect: !1, hasChanged: De }, ni = (s = si, e, t) => {
-  const { kind: i, metadata: n } = t;
-  let o = globalThis.litPropertyMetadata.get(n);
-  if (o === void 0 && globalThis.litPropertyMetadata.set(n, o = /* @__PURE__ */ new Map()), i === "setter" && ((s = Object.create(s)).wrapped = !0), o.set(t.name, s), i === "accessor") {
+const si = { attribute: !0, type: String, converter: we, reflect: !1, hasChanged: De }, ni = (n = si, e, t) => {
+  const { kind: i, metadata: s } = t;
+  let o = globalThis.litPropertyMetadata.get(s);
+  if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), i === "setter" && ((n = Object.create(n)).wrapped = !0), o.set(t.name, n), i === "accessor") {
     const { name: r } = t;
     return { set(l) {
       const a = e.get.call(this);
-      e.set.call(this, l), this.requestUpdate(r, a, s, !0, l);
+      e.set.call(this, l), this.requestUpdate(r, a, n, !0, l);
     }, init(l) {
-      return l !== void 0 && this.C(r, void 0, s, l), l;
+      return l !== void 0 && this.C(r, void 0, n, l), l;
     } };
   }
   if (i === "setter") {
     const { name: r } = t;
     return function(l) {
       const a = this[r];
-      e.call(this, l), this.requestUpdate(r, a, s, !0, l);
+      e.call(this, l), this.requestUpdate(r, a, n, !0, l);
     };
   }
   throw Error("Unsupported decorator location: " + i);
 };
-function g(s) {
-  return (e, t) => typeof t == "object" ? ni(s, e, t) : ((i, n, o) => {
-    const r = n.hasOwnProperty(o);
-    return n.constructor.createProperty(o, i), r ? Object.getOwnPropertyDescriptor(n, o) : void 0;
-  })(s, e, t);
+function g(n) {
+  return (e, t) => typeof t == "object" ? ni(n, e, t) : ((i, s, o) => {
+    const r = s.hasOwnProperty(o);
+    return s.constructor.createProperty(o, i), r ? Object.getOwnPropertyDescriptor(s, o) : void 0;
+  })(n, e, t);
 }
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function v(s) {
-  return g({ ...s, state: !0, attribute: !1 });
+function v(n) {
+  return g({ ...n, state: !0, attribute: !1 });
 }
 const Z = "pulse-client";
-var oi = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, J = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ri(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && oi(e, t, n), n;
+var oi = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, J = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? ri(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && oi(e, t, s), s;
 };
-let V = class extends S {
+let q = class extends T {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "";
   }
   connectedCallback() {
     super.connectedCallback();
-    const s = {
+    const n = {
       apiKey: this.apiKey,
       token: this.token,
       room: this.room,
       endpoint: this.endpoint
     };
-    this.client = new xt(s), this.client.connect();
+    this.client = new xt(n), this.client.connect();
   }
   disconnectedCallback() {
-    var s;
-    super.disconnectedCallback(), (s = this.client) == null || s.disconnect();
+    var n;
+    super.disconnectedCallback(), (n = this.client) == null || n.disconnect();
   }
   render() {
     return h`<slot></slot>`;
@@ -1172,28 +1203,28 @@ let V = class extends S {
 };
 J([
   g({ attribute: "api-key" })
-], V.prototype, "apiKey", 2);
+], q.prototype, "apiKey", 2);
 J([
   g()
-], V.prototype, "token", 2);
+], q.prototype, "token", 2);
 J([
   g()
-], V.prototype, "room", 2);
+], q.prototype, "room", 2);
 J([
   g()
-], V.prototype, "endpoint", 2);
+], q.prototype, "endpoint", 2);
 J([
   Mt({ context: Z })
-], V.prototype, "client", 2);
-V = J([
+], q.prototype, "client", 2);
+q = J([
   R("pulse-provider")
-], V);
-var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Ce = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? li(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ai(e, t, n), n;
+], q);
+var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Ce = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? li(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && ai(e, t, s), s;
 };
-let G = class extends S {
+let G = class extends T {
   constructor() {
     super(...arguments), this.maxVisible = 5, this.users = [];
   }
@@ -1201,27 +1232,27 @@ let G = class extends S {
     super.connectedCallback(), this.setupListener();
   }
   disconnectedCallback() {
-    var s;
-    super.disconnectedCallback(), (s = this.unsub) == null || s.call(this);
+    var n;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this);
   }
-  updated(s) {
+  updated(n) {
     var e;
-    s.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
   }
   setupListener() {
-    this.client && (this.users = this.client.state.presence, this.unsub = this.client.state.on("presence", (s) => {
-      this.users = s;
+    this.client && (this.users = this.client.state.presence, this.unsub = this.client.state.on("presence", (n) => {
+      this.users = n;
     }));
   }
-  getInitials(s) {
-    return s.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
+  getInitials(n) {
+    return n.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
   }
   render() {
-    const s = this.users.slice(0, this.maxVisible), e = this.users.length - this.maxVisible;
+    const n = this.users.slice(0, this.maxVisible), e = this.users.length - this.maxVisible;
     return h`
       <div class="avatars">
         ${e > 0 ? h`<div class="overflow">+${e}</div>` : null}
-        ${s.map(
+        ${n.map(
       (t) => h`
             <div
               class="avatar"
@@ -1237,7 +1268,7 @@ let G = class extends S {
     `;
   }
 };
-G.styles = I`
+G.styles = A`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1354,20 +1385,20 @@ Ce([
 G = Ce([
   R("pulse-presence")
 ], G);
-var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, Be = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? di(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ci(e, t, n), n;
+var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, Ne = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? di(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && ci(e, t, s), s;
 };
-let le = class extends S {
+let le = class extends T {
   constructor() {
-    super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (s) => {
+    super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (n) => {
       var e;
       (e = this.client) == null || e.moveCursor({
-        x: s.clientX,
-        y: s.clientY,
-        pageX: s.pageX,
-        pageY: s.pageY
+        x: n.clientX,
+        y: n.clientY,
+        pageX: n.pageX,
+        pageY: n.pageY
       });
     };
   }
@@ -1375,25 +1406,25 @@ let le = class extends S {
     super.connectedCallback(), this.setupListeners();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.unsubs.forEach((s) => s()), this.unsubs = [], document.removeEventListener("mousemove", this.handleLocalCursor);
+    super.disconnectedCallback(), this.unsubs.forEach((n) => n()), this.unsubs = [], document.removeEventListener("mousemove", this.handleLocalCursor);
   }
-  updated(s) {
-    s.has("client") && this.client && (this.unsubs.forEach((e) => e()), this.unsubs = [], this.setupListeners());
+  updated(n) {
+    n.has("client") && this.client && (this.unsubs.forEach((e) => e()), this.unsubs = [], this.setupListeners());
   }
   setupListeners() {
     this.client && (this.unsubs.push(
       this.client.state.on(
         "cursor",
-        ({ userId: s, position: e }) => {
-          const t = this.cursors.get(s);
+        ({ userId: n, position: e }) => {
+          const t = this.cursors.get(n);
           if (t)
             t.position = e;
           else {
             const i = this.client.state.presence.find(
-              (n) => n.user.id === s
+              (s) => s.user.id === n
             );
-            i && this.cursors.set(s, {
-              userId: s,
+            i && this.cursors.set(n, {
+              userId: n,
               name: i.user.name,
               color: i.user.color,
               position: e
@@ -1403,8 +1434,8 @@ let le = class extends S {
         }
       )
     ), this.unsubs.push(
-      this.client.state.on("presence", (s) => {
-        const e = new Set(s.map((t) => t.user.id));
+      this.client.state.on("presence", (n) => {
+        const e = new Set(n.map((t) => t.user.id));
         for (const t of this.cursors.keys())
           e.has(t) || this.cursors.delete(t);
         this.requestUpdate();
@@ -1412,9 +1443,9 @@ let le = class extends S {
     ), document.addEventListener("mousemove", this.handleLocalCursor));
   }
   render() {
-    const s = [...this.cursors.values()];
+    const n = [...this.cursors.values()];
     return h`
-      ${s.map(
+      ${n.map(
       (e) => h`
           <div
             class="cursor"
@@ -1436,7 +1467,7 @@ let le = class extends S {
     `;
   }
 };
-le.styles = I`
+le.styles = A`
     :host {
       position: fixed;
       top: 0;
@@ -1473,22 +1504,22 @@ le.styles = I`
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
   `;
-Be([
+Ne([
   pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
 ], le.prototype, "client", 2);
-Be([
+Ne([
   v()
 ], le.prototype, "cursors", 2);
-le = Be([
+le = Ne([
   R("pulse-cursors")
 ], le);
-var hi = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, fe = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? pi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && hi(e, t, n), n;
+var hi = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, fe = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? pi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && hi(e, t, s), s;
 };
-let W = class extends S {
+let W = class extends T {
   constructor() {
     super(...arguments), this.showResolved = !1, this.threads = [], this.replyingTo = null;
   }
@@ -1496,52 +1527,52 @@ let W = class extends S {
     super.connectedCallback(), this.setupListener();
   }
   disconnectedCallback() {
-    var s;
-    super.disconnectedCallback(), (s = this.unsub) == null || s.call(this);
+    var n;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this);
   }
-  updated(s) {
+  updated(n) {
     var e;
-    s.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
   }
   setupListener() {
-    this.client && (this.threads = this.client.state.threads, this.unsub = this.client.state.on("threads", (s) => {
-      this.threads = [...s];
+    this.client && (this.threads = this.client.state.threads, this.unsub = this.client.state.on("threads", (n) => {
+      this.threads = [...n];
     }));
   }
-  parseMentions(s) {
-    return s.split(/(@\w+)/g).map(
+  parseMentions(n) {
+    return n.split(/(@\w+)/g).map(
       (t) => t.startsWith("@") ? h`<span class="mention">${t}</span>` : t
     );
   }
-  getInitials(s) {
-    return s.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
+  getInitials(n) {
+    return n.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
   }
-  getUserForComment(s) {
+  getUserForComment(n) {
     var e;
-    return (e = this.client.state.presence.find((t) => t.user.id === s)) == null ? void 0 : e.user;
+    return (e = this.client.state.presence.find((t) => t.user.id === n)) == null ? void 0 : e.user;
   }
-  handleNewThread(s) {
-    s.preventDefault();
-    const t = s.target.querySelector("textarea"), i = t.value.trim();
+  handleNewThread(n) {
+    n.preventDefault();
+    const t = n.target.querySelector("textarea"), i = t.value.trim();
     if (!i) return;
-    const n = [...i.matchAll(/@(\w+)/g)].map((o) => o[1]);
-    this.client.createThread(i, { mentions: n }), t.value = "";
+    const s = [...i.matchAll(/@(\w+)/g)].map((o) => o[1]);
+    this.client.createThread(i, { mentions: s }), t.value = "";
   }
-  handleReply(s, e) {
+  handleReply(n, e) {
     e.preventDefault();
-    const i = e.target.querySelector("input"), n = i.value.trim();
-    if (!n) return;
-    const o = [...n.matchAll(/@(\w+)/g)].map((r) => r[1]);
-    this.client.reply(s, n, o), i.value = "", this.replyingTo = null;
+    const i = e.target.querySelector("input"), s = i.value.trim();
+    if (!s) return;
+    const o = [...s.matchAll(/@(\w+)/g)].map((r) => r[1]);
+    this.client.reply(n, s, o), i.value = "", this.replyingTo = null;
   }
   render() {
-    const s = this.showResolved ? this.threads : this.threads.filter((e) => !e.resolved);
+    const n = this.showResolved ? this.threads : this.threads.filter((e) => !e.resolved);
     return h`
       <div class="threads">
-        ${s.length === 0 ? h`<div class="empty">
+        ${n.length === 0 ? h`<div class="empty">
               <div class="empty-icon">&#128172;</div>
               No comments yet.<br>Start a conversation below.
-            </div>` : s.map((e) => this.renderThread(e))}
+            </div>` : n.map((e) => this.renderThread(e))}
       </div>
       <div class="new-thread">
         <form @submit=${this.handleNewThread}>
@@ -1551,13 +1582,13 @@ let W = class extends S {
       </div>
     `;
   }
-  renderThread(s) {
+  renderThread(n) {
     return h`
-      <div class="thread ${s.resolved ? "resolved" : ""}">
-        ${s.comments.map((e, t) => {
+      <div class="thread ${n.resolved ? "resolved" : ""}">
+        ${n.comments.map((e, t) => {
       const i = this.getUserForComment(e.userId);
       return h`
-            ${t > 0 ? h`<div class="divider"></div>` : m}
+            ${t > 0 ? h`<div class="divider"></div>` : f}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -1579,34 +1610,34 @@ let W = class extends S {
     })}
         <div class="thread-actions">
           <button
-            @click=${() => this.replyingTo = this.replyingTo === s.id ? null : s.id}
+            @click=${() => this.replyingTo = this.replyingTo === n.id ? null : n.id}
           >
             Reply
           </button>
           <button
-            @click=${() => this.client.resolveThread(s.id, !s.resolved)}
+            @click=${() => this.client.resolveThread(n.id, !n.resolved)}
           >
-            ${s.resolved ? "Reopen" : "Resolve"}
+            ${n.resolved ? "Reopen" : "Resolve"}
           </button>
         </div>
-        ${this.replyingTo === s.id ? h`
-              <form class="reply-form" @submit=${(e) => this.handleReply(s.id, e)}>
+        ${this.replyingTo === n.id ? h`
+              <form class="reply-form" @submit=${(e) => this.handleReply(n.id, e)}>
                 <input type="text" placeholder="Write a reply..." />
                 <button type="submit">Send</button>
               </form>
-            ` : m}
+            ` : f}
       </div>
     `;
   }
-  formatTime(s) {
-    const e = new Date(s), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(i / 6e4);
-    if (n < 1) return "just now";
-    if (n < 60) return `${n}m ago`;
-    const o = Math.floor(n / 60);
+  formatTime(n) {
+    const e = new Date(n), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), s = Math.floor(i / 6e4);
+    if (s < 1) return "just now";
+    if (s < 60) return `${s}m ago`;
+    const o = Math.floor(s / 60);
     return o < 24 ? `${o}h ago` : e.toLocaleDateString();
   }
 };
-W.styles = I`
+W.styles = A`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -1834,10 +1865,10 @@ fe([
 W = fe([
   R("pulse-comments")
 ], W);
-var ui = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, Ne = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? fi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ui(e, t, n), n;
+var ui = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, Be = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? fi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && ui(e, t, s), s;
 };
 const mi = {
   "comment:created": "left a comment",
@@ -1852,7 +1883,7 @@ const mi = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let ce = class extends S {
+let ce = class extends T {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -1860,54 +1891,54 @@ let ce = class extends S {
     super.connectedCallback(), this.setupListener();
   }
   disconnectedCallback() {
-    var s;
-    super.disconnectedCallback(), (s = this.unsub) == null || s.call(this);
+    var n;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this);
   }
-  updated(s) {
+  updated(n) {
     var e;
-    s.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
   }
   setupListener() {
     this.client && (this.notifications = this.client.state.notifications, this.unsub = this.client.state.on(
       "notifications",
-      (s) => {
-        this.notifications = [...s];
+      (n) => {
+        this.notifications = [...n];
       }
     ));
   }
-  handleClick(s) {
-    s.read || this.client.markRead(s.id), this.dispatchEvent(
+  handleClick(n) {
+    n.read || this.client.markRead(n.id), this.dispatchEvent(
       new CustomEvent("pulse-notification-click", {
-        detail: s,
+        detail: n,
         bubbles: !0,
         composed: !0
       })
     );
   }
-  getActorName(s) {
+  getActorName(n) {
     const e = this.client.state.presence.find(
-      (t) => t.user.id === s
+      (t) => t.user.id === n
     );
     return (e == null ? void 0 : e.user.name) ?? "Someone";
   }
-  formatTime(s) {
-    const e = new Date(s), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(i / 6e4);
-    if (n < 1) return "just now";
-    if (n < 60) return `${n}m ago`;
-    const o = Math.floor(n / 60);
+  formatTime(n) {
+    const e = new Date(n), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), s = Math.floor(i / 6e4);
+    if (s < 1) return "just now";
+    if (s < 60) return `${s}m ago`;
+    const o = Math.floor(s / 60);
     return o < 24 ? `${o}h ago` : e.toLocaleDateString();
   }
   render() {
-    const s = this.notifications.filter((e) => !e.read).length;
+    const n = this.notifications.filter((e) => !e.read).length;
     return h`
       <div class="header">
         <span class="title">
           Notifications
-          ${s > 0 ? h`<span class="badge">${s}</span>` : m}
+          ${n > 0 ? h`<span class="badge">${n}</span>` : f}
         </span>
-        ${s > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+        ${n > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
               Mark all read
-            </button>` : m}
+            </button>` : f}
       </div>
       <div class="list">
         ${this.notifications.length === 0 ? h`<div class="empty">
@@ -1935,7 +1966,7 @@ let ce = class extends S {
     `;
   }
 };
-ce.styles = I`
+ce.styles = A`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -2076,23 +2107,23 @@ ce.styles = I`
       opacity: 0.4;
     }
   `;
-Ne([
+Be([
   pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
 ], ce.prototype, "client", 2);
-Ne([
+Be([
   v()
 ], ce.prototype, "notifications", 2);
-ce = Ne([
+ce = Be([
   R("pulse-notifications")
 ], ce);
-var bi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Q = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? vi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && bi(e, t, n), n;
+var bi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Q = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? vi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && bi(e, t, s), s;
 };
 const xi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let D = class extends S {
+let D = class extends T {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
   }
@@ -2100,40 +2131,40 @@ let D = class extends S {
     super.connectedCallback(), this.setupListener();
   }
   disconnectedCallback() {
-    var s;
-    super.disconnectedCallback(), (s = this.unsub) == null || s.call(this);
+    var n;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this);
   }
-  updated(s) {
+  updated(n) {
     var e;
-    s.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
   }
   setupListener() {
-    this.client && (this.reactions = this.client.state.getReactions(this.targetId), this.unsub = this.client.state.on("reactions", (s) => {
-      s.targetId === this.targetId && (this.reactions = [...s.reactions]);
+    this.client && (this.reactions = this.client.state.getReactions(this.targetId), this.unsub = this.client.state.on("reactions", (n) => {
+      n.targetId === this.targetId && (this.reactions = [...n.reactions]);
     }));
   }
   groupReactions() {
     var t, i;
-    const s = /* @__PURE__ */ new Map(), e = (i = (t = this.client) == null ? void 0 : t.state.user) == null ? void 0 : i.id;
-    for (const n of this.reactions) {
-      const o = s.get(n.emoji) ?? { count: 0, userReactionId: null };
-      o.count++, n.userId === e && (o.userReactionId = n.id), s.set(n.emoji, o);
+    const n = /* @__PURE__ */ new Map(), e = (i = (t = this.client) == null ? void 0 : t.state.user) == null ? void 0 : i.id;
+    for (const s of this.reactions) {
+      const o = n.get(s.emoji) ?? { count: 0, userReactionId: null };
+      o.count++, s.userId === e && (o.userReactionId = s.id), n.set(s.emoji, o);
     }
-    return [...s.entries()].map(([n, o]) => ({
-      emoji: n,
+    return [...n.entries()].map(([s, o]) => ({
+      emoji: s,
       ...o
     }));
   }
-  toggleReaction(s) {
-    s.userReactionId ? this.client.removeReaction(s.userReactionId) : this.client.addReaction(this.targetId, this.targetType, s.emoji);
+  toggleReaction(n) {
+    n.userReactionId ? this.client.removeReaction(n.userReactionId) : this.client.addReaction(this.targetId, this.targetType, n.emoji);
   }
-  addEmoji(s) {
-    this.client.addReaction(this.targetId, this.targetType, s), this.showPicker = !1;
+  addEmoji(n) {
+    this.client.addReaction(this.targetId, this.targetType, n), this.showPicker = !1;
   }
   render() {
-    const s = this.groupReactions();
+    const n = this.groupReactions();
     return h`
-      ${s.map(
+      ${n.map(
       (e) => h`
           <button
             class="reaction ${e.userReactionId ? "active" : ""}"
@@ -2161,12 +2192,12 @@ let D = class extends S {
                   `
     )}
               </div>
-            ` : m}
+            ` : f}
       </div>
     `;
   }
 };
-D.styles = I`
+D.styles = A`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2302,7 +2333,7 @@ D = Q([
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const yi = { CHILD: 2 }, wi = (s) => (...e) => ({ _$litDirective$: s, values: e });
+const yi = { CHILD: 2 }, wi = (n) => (...e) => ({ _$litDirective$: n, values: e });
 class $i {
   constructor(e) {
   }
@@ -2326,11 +2357,11 @@ class $i {
  */
 class Ie extends $i {
   constructor(e) {
-    if (super(e), this.it = m, e.type !== yi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = f, e.type !== yi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === m || e == null) return this._t = void 0, this.it = e;
-    if (e === q) return e;
+    if (e === f || e == null) return this._t = void 0, this.it = e;
+    if (e === V) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
     this.it = e;
@@ -2526,13 +2557,13 @@ const Ri = [
     }
   ]
 ];
-function Li(s) {
-  return s.map(([e, t]) => {
-    const i = Object.entries(t).filter(([, n]) => n != null).map(([n, o]) => `${n}="${o}"`).join(" ");
+function Li(n) {
+  return n.map(([e, t]) => {
+    const i = Object.entries(t).filter(([, s]) => s != null).map(([s, o]) => `${s}="${o}"`).join(" ");
     return `<${e} ${i}/>`;
   }).join("");
 }
-function E(s, e = 18) {
+function k(n, e = 18) {
   return Kt`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="${e}"
@@ -2543,9 +2574,9 @@ function E(s, e = 18) {
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-  >${ki(Li(s))}</svg>`;
+  >${ki(Li(n))}</svg>`;
 }
-const ee = I`
+const ee = A`
   * {
     box-sizing: border-box;
     margin: 0;
@@ -2588,7 +2619,7 @@ const ee = I`
     --pw-shadow: var(--pulse-shadow);
     --pw-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
   }
-`, ge = I`
+`, ge = A`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2632,7 +2663,7 @@ const ee = I`
     width: 18px;
     height: 18px;
   }
-`, _e = I`
+`, _e = A`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2644,12 +2675,12 @@ const ee = I`
     background: transparent;
   }
 `;
-var ji = Object.defineProperty, zi = Object.getOwnPropertyDescriptor, Fe = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? zi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ji(e, t, n), n;
+var ji = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, Fe = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ui(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && ji(e, t, s), s;
 };
-let X = class extends S {
+let X = class extends T {
   constructor() {
     super(...arguments), this.items = [], this.unsubs = [], this.counter = 0;
   }
@@ -2657,36 +2688,36 @@ let X = class extends S {
     super.connectedCallback(), this.setupListeners();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.unsubs.forEach((s) => s()), this.unsubs = [];
+    super.disconnectedCallback(), this.unsubs.forEach((n) => n()), this.unsubs = [];
   }
-  updated(s) {
-    s.has("client") && this.client && (this.unsubs.forEach((e) => e()), this.unsubs = [], this.setupListeners());
+  updated(n) {
+    n.has("client") && this.client && (this.unsubs.forEach((e) => e()), this.unsubs = [], this.setupListeners());
   }
   setupListeners() {
     if (!this.client) return;
-    const s = this.client.state.activityLogs;
-    s.length > 0 && (this.items = s.map((e) => this.logToItem(e)), this.counter = this.items.length), this.unsubs.push(
+    const n = this.client.state.activityLogs;
+    n.length > 0 && (this.items = n.map((e) => this.logToItem(e)), this.counter = this.items.length), this.unsubs.push(
       this.client.state.on("activity-logs", (e) => {
         this.items = e.map((t) => this.logToItem(t));
       })
     );
   }
-  logToItem(s) {
+  logToItem(n) {
     return {
-      id: s.id,
-      type: s.type,
-      userId: s.userId,
-      description: s.description,
-      timestamp: new Date(s.createdAt).getTime(),
-      color: X.TYPE_COLORS[s.type] ?? "#94a3b8"
+      id: n.id,
+      type: n.type,
+      userId: n.userId,
+      description: n.description,
+      timestamp: new Date(n.createdAt).getTime(),
+      color: X.TYPE_COLORS[n.type] ?? "#94a3b8"
     };
   }
-  getUserName(s) {
+  getUserName(n) {
     var e;
-    return ((e = this.client.state.getUser(s)) == null ? void 0 : e.name) ?? "Someone";
+    return ((e = this.client.state.getUser(n)) == null ? void 0 : e.name) ?? "Someone";
   }
-  formatRelativeTime(s) {
-    const e = Math.floor((Date.now() - s) / 1e3);
+  formatRelativeTime(n) {
+    const e = Math.floor((Date.now() - n) / 1e3);
     return e < 5 ? "just now" : e < 60 ? `${e}s ago` : e < 3600 ? `${Math.floor(e / 60)}m ago` : `${Math.floor(e / 3600)}h ago`;
   }
   fireClose() {
@@ -2700,27 +2731,27 @@ let X = class extends S {
         <div class="panel-header">
           <span class="panel-title">Activity</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${E(me, 16)}
+            ${k(me, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
           ${this.items.length === 0 ? h`<div class="empty">No activity yet</div>` : this.items.map(
-      (s) => h`
+      (n) => h`
                   <div class="activity-item">
                     <div
                       class="activity-dot"
-                      style="background:${s.color}"
+                      style="background:${n.color}"
                     ></div>
                     <div class="activity-content">
                       <div class="activity-text">
-                        ${s.userId ? h`<span class="activity-user"
-                                >${this.getUserName(s.userId)}</span
+                        ${n.userId ? h`<span class="activity-user"
+                                >${this.getUserName(n.userId)}</span
                               >
-                              ${s.description}` : s.description}
+                              ${n.description}` : n.description}
                       </div>
                       <div class="activity-time">
-                        ${this.formatRelativeTime(s.timestamp)}
+                        ${this.formatRelativeTime(n.timestamp)}
                       </div>
                     </div>
                   </div>
@@ -2735,7 +2766,7 @@ X.styles = [
   ee,
   ge,
   _e,
-  I`
+  A`
       :host {
         display: block;
       }
@@ -2869,9 +2900,9 @@ Fe([
 X = Fe([
   R("pulse-widget-activity-panel")
 ], X);
-const Ui = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", ot = "#6366f1", rt = "#e2e8f0", Di = "#f8fafc", Hi = "#e2e8f0", at = "#64748b", xe = 28, Bi = Array.from({ length: xe }, (s, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
-function lt(s) {
-  const e = Math.max(0, Math.floor(s)), t = Math.floor(e / 60), i = e % 60;
+const zi = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", ot = "#6366f1", rt = "#e2e8f0", Di = "#f8fafc", Hi = "#e2e8f0", at = "#64748b", xe = 28, Ni = Array.from({ length: xe }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
+function lt(n) {
+  const e = Math.max(0, Math.floor(n)), t = Math.floor(e / 60), i = e % 60;
   return `${t}:${i.toString().padStart(2, "0")}`;
 }
 class Oe {
@@ -2884,7 +2915,7 @@ class Oe {
    *                     element once metadata has loaded.
    */
   static render(e, t) {
-    let i = !1, n = t != null ? t / 1e3 : 0, o = 0;
+    let i = !1, s = t != null ? t / 1e3 : 0, o = 0;
     const r = document.createElement("audio");
     r.preload = "metadata", r.src = e;
     const l = document.createElement("div");
@@ -2898,7 +2929,7 @@ class Oe {
       background: Di,
       borderRadius: "12px",
       border: `1px solid ${Hi}`,
-      fontFamily: Ui,
+      fontFamily: zi,
       fontSize: "11px",
       color: at,
       userSelect: "none",
@@ -2948,8 +2979,8 @@ class Oe {
       overflow: "hidden",
       minWidth: "0"
     });
-    const f = document.createElement("div");
-    Object.assign(f.style, {
+    const m = document.createElement("div");
+    Object.assign(m.style, {
       display: "flex",
       alignItems: "center",
       gap: "1.5px",
@@ -2957,41 +2988,41 @@ class Oe {
       cursor: "pointer"
     });
     const b = [];
-    for (let k = 0; k < xe; k++) {
-      const A = document.createElement("div"), w = Math.round(Bi[k] * 20);
-      Object.assign(A.style, {
+    for (let $ = 0; $ < xe; $++) {
+      const P = document.createElement("div"), y = Math.round(Ni[$] * 20);
+      Object.assign(P.style, {
         flex: "1",
-        height: `${Math.max(3, w)}px`,
+        height: `${Math.max(3, y)}px`,
         borderRadius: "1px",
         background: rt,
         transition: "background 0.1s ease",
         minWidth: "0"
-      }), b.push(A), f.appendChild(A);
+      }), b.push(P), m.appendChild(P);
     }
-    const x = document.createElement("div");
-    Object.assign(x.style, {
+    const I = document.createElement("div");
+    Object.assign(I.style, {
       fontSize: "10px",
       color: at,
       whiteSpace: "nowrap",
       lineHeight: "1"
     });
-    function _() {
-      const k = lt(o), A = lt(n);
-      x.textContent = `${k} / ${A}`;
-    }
-    _(), u.appendChild(f), u.appendChild(x), l.appendChild(a), l.appendChild(u);
-    function $() {
-      const k = n > 0 ? o / n : 0, A = Math.floor(k * xe);
-      for (let w = 0; w < xe; w++)
-        b[w].style.background = w <= A ? ot : rt;
-    }
-    return f.addEventListener("click", (k) => {
-      if (n <= 0) return;
-      const A = f.getBoundingClientRect(), w = Math.min(
+    function C() {
+      const $ = lt(o), P = lt(s);
+      I.textContent = `${$} / ${P}`;
+    }
+    C(), u.appendChild(m), u.appendChild(I), l.appendChild(a), l.appendChild(u);
+    function w() {
+      const $ = s > 0 ? o / s : 0, P = Math.floor($ * xe);
+      for (let y = 0; y < xe; y++)
+        b[y].style.background = y <= P ? ot : rt;
+    }
+    return m.addEventListener("click", ($) => {
+      if (s <= 0) return;
+      const P = m.getBoundingClientRect(), y = Math.min(
         1,
-        Math.max(0, (k.clientX - A.left) / A.width)
+        Math.max(0, ($.clientX - P.left) / P.width)
       );
-      r.currentTime = w * n, o = r.currentTime, $(), _();
+      r.currentTime = y * s, o = r.currentTime, w(), C();
     }), a.addEventListener("click", () => {
       i ? r.pause() : r.play().catch(() => {
       });
@@ -3000,13 +3031,13 @@ class Oe {
     }), r.addEventListener("pause", () => {
       i = !1, p();
     }), r.addEventListener("ended", () => {
-      i = !1, p(), o = 0, $(), _();
+      i = !1, p(), o = 0, w(), C();
     }), r.addEventListener("timeupdate", () => {
-      o = r.currentTime, $(), _();
+      o = r.currentTime, w(), C();
     }), r.addEventListener("loadedmetadata", () => {
-      r.duration && isFinite(r.duration) && (n = r.duration, _());
+      r.duration && isFinite(r.duration) && (s = r.duration, C());
     }), r.addEventListener("durationchange", () => {
-      r.duration && isFinite(r.duration) && (n = r.duration, _());
+      r.duration && isFinite(r.duration) && (s = r.duration, C());
     }), l;
   }
 }
@@ -3024,8 +3055,8 @@ class Re {
     this.destroy(), this.stream = await navigator.mediaDevices.getUserMedia({ audio: !0 }), this.audioCtx = new AudioContext();
     const t = this.audioCtx.createMediaStreamSource(this.stream);
     this.analyser = this.audioCtx.createAnalyser(), this.analyser.fftSize = 64, t.connect(this.analyser);
-    const i = this.detectMimeType(), n = {};
-    i && (n.mimeType = i), this.recorder = new MediaRecorder(this.stream, n);
+    const i = this.detectMimeType(), s = {};
+    i && (s.mimeType = i), this.recorder = new MediaRecorder(this.stream, s);
     const o = [];
     this.recorder.ondataavailable = (l) => {
       l.data.size > 0 && o.push(l.data);
@@ -3137,18 +3168,18 @@ class Re {
     if (!this.canvas || !this.analyser) return;
     const e = this.canvas.getContext("2d");
     if (!e) return;
-    const t = this.canvas.width, i = this.canvas.height, n = this.analyser.frequencyBinCount, o = new Uint8Array(n);
+    const t = this.canvas.width, i = this.canvas.height, s = this.analyser.frequencyBinCount, o = new Uint8Array(s);
     this.analyser.getByteFrequencyData(o), e.clearRect(0, 0, t, i);
-    const r = n, l = Math.max(2, t / r * 0.7), a = (t - l * r) / (r - 1 || 1);
+    const r = s, l = Math.max(2, t / r * 0.7), a = (t - l * r) / (r - 1 || 1);
     for (let c = 0; c < r; c++) {
-      const p = o[c] / 255, d = Math.max(2, p * i * 0.85), u = c * (l + a), f = (i - d) / 2, b = 0.4 + p * 0.6;
-      e.fillStyle = `rgba(99, 102, 241, ${b})`, e.beginPath(), e.roundRect(u, f, l, d, 1), e.fill();
+      const p = o[c] / 255, d = Math.max(2, p * i * 0.85), u = c * (l + a), m = (i - d) / 2, b = 0.4 + p * 0.6;
+      e.fillStyle = `rgba(99, 102, 241, ${b})`, e.beginPath(), e.roundRect(u, m, l, d, 1), e.fill();
     }
   }
   updateTimer() {
     if (!this.timerEl) return;
-    const e = Date.now() - this.startTime, t = Math.floor(e / 1e3), i = Math.floor(t / 60), n = t % 60;
-    this.timerEl.textContent = `${String(i).padStart(2, "0")}:${String(n).padStart(2, "0")}`;
+    const e = Date.now() - this.startTime, t = Math.floor(e / 1e3), i = Math.floor(t / 60), s = t % 60;
+    this.timerEl.textContent = `${String(i).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
   }
   cleanupResources() {
     if (this.animFrame !== null && (cancelAnimationFrame(this.animFrame), this.animFrame = null), this.maxTimer !== null && (clearTimeout(this.maxTimer), this.maxTimer = null), this.audioCtx && (this.audioCtx.close().catch(() => {
@@ -3160,7 +3191,7 @@ class Re {
     this.recorder = null, this.container && (this.container.remove(), this.container = null), this.canvas = null, this.timerEl = null;
   }
 }
-const ct = 80, Ni = "#e2e8f0", Fi = `
+const ct = 80, Bi = "#e2e8f0", Fi = `
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="14" cy="14" r="14" fill="rgba(0,0,0,0.35)"/>
   <polygon points="11,8 22,14 11,20" fill="rgba(255,255,255,0.9)"/>
@@ -3169,7 +3200,7 @@ const ct = 80, Ni = "#e2e8f0", Fi = `
   <polygon points="11,5 6,9 2,9 2,15 6,15 11,19"/>
   <line x1="23" y1="9" x2="17" y2="15"/>
   <line x1="17" y1="9" x2="23" y2="15"/>
-</svg>`, qi = `
+</svg>`, Vi = `
 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
   <polygon points="11,5 6,9 2,9 2,15 6,15 11,19"/>
   <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
@@ -3182,7 +3213,7 @@ class Tt {
    * @param posterUrl - Optional poster/thumbnail image URL
    */
   static render(e, t) {
-    let i = !1, n = !0;
+    let i = !1, s = !0;
     const o = document.createElement("div");
     Object.assign(o.style, {
       position: "relative",
@@ -3190,7 +3221,7 @@ class Tt {
       width: `${ct}px`,
       height: `${ct}px`,
       borderRadius: "50%",
-      border: `2px solid ${Ni}`,
+      border: `2px solid ${Bi}`,
       boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
       overflow: "hidden",
       cursor: "pointer",
@@ -3240,17 +3271,17 @@ class Tt {
       l.style.opacity = i ? "0" : "1";
     }
     function p() {
-      a.style.display = i ? "flex" : "none", a.innerHTML = n ? dt : qi;
+      a.style.display = i ? "flex" : "none", a.innerHTML = s ? dt : Vi;
     }
     return o.addEventListener("click", (d) => {
-      d.stopPropagation(), i ? n ? (r.muted = !1, n = !1) : (r.pause(), i = !1, n = !0, r.muted = !0) : (r.muted = !0, n = !0, r.play().catch(() => {
+      d.stopPropagation(), i ? s ? (r.muted = !1, s = !1) : (r.pause(), i = !1, s = !0, r.muted = !0) : (r.muted = !0, s = !0, r.play().catch(() => {
       }), i = !0), c(), p();
     }), r.addEventListener("pause", () => {
-      i && (i = !1, n = !0, r.muted = !0, c(), p());
+      i && (i = !1, s = !0, r.muted = !0, c(), p());
     }), o;
   }
 }
-const ht = 60, Vi = `
+const ht = 60, qi = `
   .vr-overlay {
     display: flex;
     flex-direction: column;
@@ -3357,41 +3388,41 @@ const ht = 60, Vi = `
     color: #0f172a;
   }
 `;
-function pt(s) {
-  return s.toString().padStart(2, "0");
+function pt(n) {
+  return n.toString().padStart(2, "0");
 }
-function Wi(s) {
-  const e = Math.floor(s / 60), t = s % 60;
+function Wi(n) {
+  const e = Math.floor(n / 60), t = n % 60;
   return `${pt(e)}:${pt(t)}`;
 }
 function Xi() {
-  const s = [
+  const n = [
     "video/webm;codecs=vp9,opus",
     "video/webm;codecs=vp8,opus",
     "video/webm",
     "video/mp4"
   ];
-  for (const e of s)
+  for (const e of n)
     if (MediaRecorder.isTypeSupported(e)) return e;
   return "";
 }
-function Yi(s) {
+function Yi(n) {
   return new Promise((e, t) => {
-    const i = URL.createObjectURL(s), n = document.createElement("video");
-    n.muted = !0, n.playsInline = !0, n.preload = "auto", n.src = i, n.addEventListener("loadeddata", () => {
-      n.currentTime = 0.01;
-    }), n.addEventListener("seeked", () => {
+    const i = URL.createObjectURL(n), s = document.createElement("video");
+    s.muted = !0, s.playsInline = !0, s.preload = "auto", s.src = i, s.addEventListener("loadeddata", () => {
+      s.currentTime = 0.01;
+    }), s.addEventListener("seeked", () => {
       const o = document.createElement("canvas");
-      o.width = n.videoWidth || 240, o.height = n.videoHeight || 240, o.getContext("2d").drawImage(n, 0, 0, o.width, o.height), URL.revokeObjectURL(i), o.toBlob(
+      o.width = s.videoWidth || 240, o.height = s.videoHeight || 240, o.getContext("2d").drawImage(s, 0, 0, o.width, o.height), URL.revokeObjectURL(i), o.toBlob(
         (l) => {
           l ? e(l) : t(new Error("Failed to generate poster frame"));
         },
         "image/jpeg",
         0.85
       );
-    }), n.addEventListener("error", () => {
+    }), s.addEventListener("error", () => {
       URL.revokeObjectURL(i), t(new Error("Failed to load video for poster generation"));
-    }), n.load();
+    }), s.load();
   });
 }
 class Le {
@@ -3411,9 +3442,9 @@ class Le {
     }
     this.stream = t, this.container = e, this.recording = !0, this.elapsed = 0, this.chunks = [], this.buildUI(e), this.videoEl && (this.videoEl.srcObject = t, this.videoEl.play().catch(() => {
     }));
-    const i = Xi(), n = {};
-    i && (n.mimeType = i);
-    const o = new MediaRecorder(t, n);
+    const i = Xi(), s = {};
+    i && (s.mimeType = i);
+    const o = new MediaRecorder(t, s);
     return this.mediaRecorder = o, o.ondataavailable = (r) => {
       r.data.size > 0 && this.chunks.push(r.data);
     }, o.onstop = () => {
@@ -3436,13 +3467,13 @@ class Le {
   }
   // ── Private ──
   buildUI(e) {
-    this.styleEl = document.createElement("style"), this.styleEl.textContent = Vi, document.head.appendChild(this.styleEl), this.root = document.createElement("div"), this.root.className = "vr-overlay";
+    this.styleEl = document.createElement("style"), this.styleEl.textContent = qi, document.head.appendChild(this.styleEl), this.root = document.createElement("div"), this.root.className = "vr-overlay";
     const t = document.createElement("div");
     t.className = "vr-circle-wrapper";
     const i = document.createElement("div");
     i.className = "vr-ring", t.appendChild(i);
-    const n = document.createElement("div");
-    n.className = "vr-video-circle", this.videoEl = document.createElement("video"), this.videoEl.muted = !0, this.videoEl.playsInline = !0, this.videoEl.setAttribute("playsinline", ""), n.appendChild(this.videoEl), t.appendChild(n), this.root.appendChild(t), this.timerEl = document.createElement("span"), this.timerEl.className = "vr-timer", this.timerEl.textContent = "00:00", this.root.appendChild(this.timerEl);
+    const s = document.createElement("div");
+    s.className = "vr-video-circle", this.videoEl = document.createElement("video"), this.videoEl.muted = !0, this.videoEl.playsInline = !0, this.videoEl.setAttribute("playsinline", ""), s.appendChild(this.videoEl), t.appendChild(s), this.root.appendChild(t), this.timerEl = document.createElement("span"), this.timerEl.className = "vr-timer", this.timerEl.textContent = "00:00", this.root.appendChild(this.timerEl);
     const o = document.createElement("div");
     o.className = "vr-actions";
     const r = document.createElement("button");
@@ -3456,8 +3487,8 @@ class Le {
     this.timerEl.textContent = Wi(this.elapsed), e <= 10 ? this.timerEl.classList.add("vr-countdown") : this.timerEl.classList.remove("vr-countdown");
   }
   async handleRecordingComplete() {
-    var n, o;
-    const e = ((n = this.mediaRecorder) == null ? void 0 : n.mimeType) || "video/webm", t = new Blob(this.chunks, { type: e });
+    var s, o;
+    const e = ((s = this.mediaRecorder) == null ? void 0 : s.mimeType) || "video/webm", t = new Blob(this.chunks, { type: e });
     let i;
     try {
       i = await Yi(t);
@@ -3483,10 +3514,10 @@ class Le {
     this.videoEl && (this.videoEl.srcObject = null, this.videoEl = null), this.root && this.root.parentElement && this.root.parentElement.removeChild(this.root), this.root = null, this.styleEl && this.styleEl.parentElement && this.styleEl.parentElement.removeChild(this.styleEl), this.styleEl = null, this.chunks = [], this.elapsed = 0;
   }
 }
-const T = class T {
+const _ = class _ {
   /** Opens a fullscreen lightbox overlay showing the image. */
   static open(e) {
-    T.close();
+    _.close();
     const t = document.createElement("div");
     t.id = "pulse-widget-lightbox", Object.assign(t.style, {
       position: "fixed",
@@ -3530,39 +3561,39 @@ const T = class T {
     }), i.addEventListener("mouseleave", () => {
       i.style.background = "rgba(255,255,255,0.15)";
     }), i.addEventListener("click", (r) => {
-      r.stopPropagation(), T.close();
+      r.stopPropagation(), _.close();
     });
-    const n = document.createElement("img");
-    n.src = e, n.alt = "Lightbox image", Object.assign(n.style, {
+    const s = document.createElement("img");
+    s.src = e, s.alt = "Lightbox image", Object.assign(s.style, {
       maxWidth: "90vw",
       maxHeight: "90vh",
       borderRadius: "8px",
       objectFit: "contain",
       cursor: "default",
       userSelect: "none"
-    }), n.addEventListener("click", (r) => {
+    }), s.addEventListener("click", (r) => {
       r.stopPropagation();
-    }), t.appendChild(i), t.appendChild(n), t.addEventListener("click", () => {
-      T.close();
+    }), t.appendChild(i), t.appendChild(s), t.addEventListener("click", () => {
+      _.close();
     });
     const o = (r) => {
-      r.key === "Escape" && T.close();
+      r.key === "Escape" && _.close();
     };
-    document.addEventListener("keydown", o), T.overlay = t, T.onKeyDown = o, document.body.appendChild(t), requestAnimationFrame(() => {
+    document.addEventListener("keydown", o), _.overlay = t, _.onKeyDown = o, document.body.appendChild(t), requestAnimationFrame(() => {
       t.style.opacity = "1";
     });
   }
   /** Closes the lightbox if open. */
   static close() {
-    if (!T.overlay) return;
-    const e = T.overlay;
-    T.onKeyDown && (document.removeEventListener("keydown", T.onKeyDown), T.onKeyDown = null), e.style.opacity = "0", e.addEventListener("transitionend", () => {
+    if (!_.overlay) return;
+    const e = _.overlay;
+    _.onKeyDown && (document.removeEventListener("keydown", _.onKeyDown), _.onKeyDown = null), e.style.opacity = "0", e.addEventListener("transitionend", () => {
       e.remove();
-    }), T.overlay = null;
+    }), _.overlay = null;
   }
 };
-T.overlay = null, T.onKeyDown = null;
-let ke = T;
+_.overlay = null, _.onKeyDown = null;
+let ke = _;
 class ne {
   constructor(e) {
     this.uploading = !1, this.client = e, this.input = document.createElement("input"), this.input.type = "file", this.input.style.display = "none", document.body.appendChild(this.input);
@@ -3576,7 +3607,7 @@ class ne {
       this.input.accept = e, this.input.value = "";
       const i = () => {
         o(), t(null);
-      }, n = async () => {
+      }, s = async () => {
         var l;
         o();
         const r = (l = this.input.files) == null ? void 0 : l[0];
@@ -3594,9 +3625,9 @@ class ne {
           this.uploading = !1;
         }
       }, o = () => {
-        this.input.removeEventListener("change", n), this.input.removeEventListener("cancel", i);
+        this.input.removeEventListener("change", s), this.input.removeEventListener("cancel", i);
       };
-      this.input.addEventListener("change", n, { once: !0 }), this.input.addEventListener("cancel", i, { once: !0 }), this.input.click();
+      this.input.addEventListener("change", s, { once: !0 }), this.input.addEventListener("cancel", i, { once: !0 }), this.input.click();
     });
   }
   /**
@@ -3638,15 +3669,15 @@ class Ji {
     }, this.handlePopoverEscape = (i) => {
       i.key === "Escape" && this.closePopover();
     }, this.handlePopoverOutsideClick = (i) => {
-      var n, o;
+      var s, o;
       if (this.popover && !this.popover.contains(i.target)) {
-        if ((n = this.container) != null && n.contains(i.target) || (o = this.pickerEl) != null && o.contains(i.target)) return;
+        if ((s = this.container) != null && s.contains(i.target) || (o = this.pickerEl) != null && o.contains(i.target)) return;
         this.closePopover();
       }
     }, this.handleOverlayClick = (i) => {
       this.form && (this.form.remove(), this.form = null);
-      const n = window.innerWidth, o = window.innerHeight, r = {
-        x: i.clientX / n,
+      const s = window.innerWidth, o = window.innerHeight, r = {
+        x: i.clientX / s,
         y: i.clientY / o,
         scrollX: window.scrollX,
         scrollY: window.scrollY
@@ -3716,8 +3747,8 @@ class Ji {
     this.container && (this.container.style.display = e ? "" : "none");
   }
   destroy() {
-    var e, t, i, n, o, r;
-    this.exitPinMode(), this.closePopover(), this.removePickerEl(), (e = this.unsub) == null || e.call(this), (t = this.threadUnsub) == null || t.call(this), (i = this.reactionUnsub) == null || i.call(this), (n = this.typingUnsub2) == null || n.call(this), window.removeEventListener("scroll", this.handleReposition, !0), window.removeEventListener("resize", this.handleReposition), (o = this.mutationObserver) == null || o.disconnect(), this.mutationObserver = null, this.repositionDebounce && (clearTimeout(this.repositionDebounce), this.repositionDebounce = null), (r = this.container) == null || r.remove(), this.container = null, this.pinEls.clear();
+    var e, t, i, s, o, r;
+    this.exitPinMode(), this.closePopover(), this.removePickerEl(), (e = this.unsub) == null || e.call(this), (t = this.threadUnsub) == null || t.call(this), (i = this.reactionUnsub) == null || i.call(this), (s = this.typingUnsub2) == null || s.call(this), window.removeEventListener("scroll", this.handleReposition, !0), window.removeEventListener("resize", this.handleReposition), (o = this.mutationObserver) == null || o.disconnect(), this.mutationObserver = null, this.repositionDebounce && (clearTimeout(this.repositionDebounce), this.repositionDebounce = null), (r = this.container) == null || r.remove(), this.container = null, this.pinEls.clear();
   }
   closePopover() {
     var e;
@@ -3734,8 +3765,8 @@ class Ji {
         t.unshift(`#${i.id}`);
         break;
       }
-      const n = i.tagName.toLowerCase(), o = [...i.classList].filter((a) => !a.startsWith("pulse-")).slice(0, 2);
-      let r = o.length > 0 ? `${n}.${o.join(".")}` : n;
+      const s = i.tagName.toLowerCase(), o = [...i.classList].filter((a) => !a.startsWith("pulse-")).slice(0, 2);
+      let r = o.length > 0 ? `${s}.${o.join(".")}` : s;
       const l = i.parentElement;
       if (l) {
         const a = [...l.children].filter((c) => c.tagName === i.tagName);
@@ -3750,13 +3781,13 @@ class Ji {
   }
   showPinForm(e, t, i) {
     this.form = document.createElement("div");
-    const n = Math.min(280, window.innerWidth - 32), o = 120;
+    const s = Math.min(280, window.innerWidth - 32), o = 120;
     let r = e + 16, l = t - 10;
-    r + n > window.innerWidth - 16 && (r = e - n - 16), l + o > window.innerHeight - 16 && (l = window.innerHeight - o - 16), l < 16 && (l = 16), Object.assign(this.form.style, {
+    r + s > window.innerWidth - 16 && (r = e - s - 16), l + o > window.innerHeight - 16 && (l = window.innerHeight - o - 16), l < 16 && (l = 16), Object.assign(this.form.style, {
       position: "fixed",
       left: `${r}px`,
       top: `${l}px`,
-      width: `${n}px`,
+      width: `${s}px`,
       zIndex: "10001",
       background: "#fff",
       borderRadius: "12px",
@@ -3790,11 +3821,6 @@ class Ji {
           </button>
         </div>
         <div style="display:flex;gap:6px;">
-          <button class="pin-cancel" style="
-            padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;
-            font-size:12px;font-weight:500;cursor:pointer;background:#fff;
-            font-family:inherit;color:#64748b;
-          ">Cancel</button>
           <button class="pin-submit" style="
             padding:6px 14px;background:#6366f1;color:#fff;border:none;
             border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
@@ -3804,57 +3830,57 @@ class Ji {
       </div>
       <div class="pin-attachments-preview" style="margin-top:6px;"></div>
     `;
-    const a = this.form.querySelector("textarea"), c = this.form.querySelector(".pulse-close-btn"), p = this.form.querySelector(".pin-cancel"), d = this.form.querySelector(".pin-submit");
-    c.addEventListener("click", () => this.exitPinMode()), p.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new ne(this.client));
-    const u = this.form.querySelector(".pin-attachments-preview");
+    const a = this.form.querySelector("textarea"), c = this.form.querySelector(".pulse-close-btn"), p = this.form.querySelector(".pin-submit");
+    c.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new ne(this.client));
+    const d = this.form.querySelector(".pin-attachments-preview");
     this.form.querySelector(".attach-img").addEventListener("click", async () => {
-      const f = await this.upload.pickFile("image/*");
-      if (f) {
-        this.pendingAttachmentIds.push(f.id);
-        const b = document.createElement("img");
-        b.src = f.thumbnailUrl || f.url, Object.assign(b.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0" }), u.appendChild(b);
+      const u = await this.upload.pickFile("image/*");
+      if (u) {
+        this.pendingAttachmentIds.push(u.id);
+        const m = document.createElement("img");
+        m.src = u.thumbnailUrl || u.url, Object.assign(m.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0" }), d.appendChild(m);
       }
     }), this.form.querySelector(".attach-mic").addEventListener("click", async () => {
       this.audioRecorder || (this.audioRecorder = new Re());
-      const f = await this.audioRecorder.startRecording(u);
-      if (f) {
-        const b = await this.upload.uploadBlob(f, "audio.webm");
-        if (b) {
-          this.pendingAttachmentIds.push(b.id);
-          const x = document.createElement("span");
-          Object.assign(x.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), x.textContent = "🎤 Audio attached", u.appendChild(x);
+      const u = await this.audioRecorder.startRecording(d);
+      if (u) {
+        const m = await this.upload.uploadBlob(u, "audio.webm");
+        if (m) {
+          this.pendingAttachmentIds.push(m.id);
+          const b = document.createElement("span");
+          Object.assign(b.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), b.textContent = "🎤 Audio attached", d.appendChild(b);
         }
       }
     }), this.form.querySelector(".attach-video").addEventListener("click", async () => {
       this.videoRecorder || (this.videoRecorder = new Le());
-      const f = await this.videoRecorder.startRecording(u);
-      if (f) {
-        const b = await this.upload.uploadBlob(f.blob, "video.webm");
-        if (b) {
-          this.pendingAttachmentIds.push(b.id);
-          const x = document.createElement("span");
-          Object.assign(x.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), x.textContent = "🎥 Video attached", u.appendChild(x);
+      const u = await this.videoRecorder.startRecording(d);
+      if (u) {
+        const m = await this.upload.uploadBlob(u.blob, "video.webm");
+        if (m) {
+          this.pendingAttachmentIds.push(m.id);
+          const b = document.createElement("span");
+          Object.assign(b.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), b.textContent = "🎥 Video attached", d.appendChild(b);
         }
       }
-    }), d.addEventListener("click", () => {
-      const f = a.value.trim();
-      if (!f && this.pendingAttachmentIds.length === 0) return;
-      const b = [...(f || "").matchAll(/@(\w+)/g)].map((x) => x[1]);
-      this.client.createThread(f || "(attachment)", { position: i, mentions: b, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
-    }), a.addEventListener("keydown", (f) => {
-      f.key === "Escape" && this.exitPinMode(), f.stopPropagation();
+    }), p.addEventListener("click", () => {
+      const u = a.value.trim();
+      if (!u && this.pendingAttachmentIds.length === 0) return;
+      const m = [...(u || "").matchAll(/@(\w+)/g)].map((b) => b[1]);
+      this.client.createThread(u, { position: i, mentions: m, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
+    }), a.addEventListener("keydown", (u) => {
+      u.key === "Escape" && this.exitPinMode(), u.stopPropagation();
     }), document.body.appendChild(this.form), requestAnimationFrame(() => a.focus());
   }
   // ── Inline thread popover (shown when a pin dot is clicked) ──
   showThreadPopover(e, t) {
     this.closePopover(), this.popover = document.createElement("div"), this.popover.dataset.threadId = e.id;
-    const i = window.innerWidth <= 480, n = i ? window.innerWidth : 300, o = t.getBoundingClientRect();
+    const i = window.innerWidth <= 480, s = i ? window.innerWidth : 300, o = t.getBoundingClientRect();
     let r, l;
-    i ? (r = 0, l = window.innerHeight * 0.4) : (r = o.right + 10, l = o.top - 8, r + n > window.innerWidth - 16 && (r = o.left - n - 10), l < 16 && (l = 16)), Object.assign(this.popover.style, {
+    i ? (r = 0, l = window.innerHeight * 0.4) : (r = o.right + 10, l = o.top - 8, r + s > window.innerWidth - 16 && (r = o.left - s - 10), l < 16 && (l = 16)), Object.assign(this.popover.style, {
       position: "fixed",
       left: `${r}px`,
       top: `${l}px`,
-      width: i ? "100vw" : `${n}px`,
+      width: i ? "100vw" : `${s}px`,
       maxHeight: i ? "60vh" : "360px",
       zIndex: "10001",
       background: "#fff",
@@ -3906,7 +3932,7 @@ class Ji {
     }
     const i = (l = this.client.state.user) == null ? void 0 : l.id;
     t.innerHTML = e.comments.map((a) => {
-      const c = this.client.state.getUser(a.userId), p = c ? c.name.split(" ").map((w) => w[0]).join("").toUpperCase().slice(0, 2) : "?", d = (c == null ? void 0 : c.color) ?? "#94a3b8", u = this.escapeHtml((c == null ? void 0 : c.name) ?? "Unknown"), f = this.formatTime(a.createdAt), b = i === a.userId, x = a.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
+      const c = this.client.state.getUser(a.userId), p = c ? c.name.split(" ").map((y) => y[0]).join("").toUpperCase().slice(0, 2) : "?", d = (c == null ? void 0 : c.color) ?? "#94a3b8", u = this.escapeHtml((c == null ? void 0 : c.name) ?? "Unknown"), m = this.formatTime(a.createdAt), b = i === a.userId, I = a.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
       if (this.editingPopoverCommentId === a.id)
         return `
             <div style="margin-bottom:10px;" data-comment-id="${a.id}">
@@ -3923,37 +3949,37 @@ class Ji {
               </div>
             </div>
           `;
-      const _ = a.body.replace(
+      const C = a.body && a.body !== "(attachment)" ? a.body.replace(
         /@(\w+)/g,
         '<span style="color:#6366f1;font-weight:600;background:#eef2ff;padding:0 3px;border-radius:3px;">@$1</span>'
-      ), $ = (a.attachments ?? []).map((w) => {
-        if (w.type === "image") {
-          const Pt = w.thumbnailUrl || w.url;
-          return `<div class="popover-attachment-img" data-full-url="${this.escapeHtml(w.url)}" style="margin:4px 0 4px 29px;cursor:pointer;">
-              <img src="${this.escapeHtml(Pt)}" alt="${this.escapeHtml(w.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
+      ) : "", w = (a.attachments ?? []).map((y) => {
+        if (y.type === "image") {
+          const Pt = y.thumbnailUrl || y.url;
+          return `<div class="popover-attachment-img" data-full-url="${this.escapeHtml(y.url)}" style="margin:4px 0 4px 29px;cursor:pointer;">
+              <img src="${this.escapeHtml(Pt)}" alt="${this.escapeHtml(y.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
             </div>`;
         }
-        return w.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(w.url)}" data-duration="${w.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : w.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(w.url)}" data-poster="${this.escapeHtml(w.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
-      }).join(""), k = b ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
+        return y.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(y.url)}" data-duration="${y.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : y.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(y.url)}" data-poster="${this.escapeHtml(y.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
+      }).join(""), $ = b ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
               <button class="edit-btn" data-comment-id="${a.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Edit"
                 onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'"
                 onmouseout="this.style.color='#94a3b8';this.style.background='none'">${Gi}</button>
               <button class="delete-btn" data-comment-id="${a.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Delete"
                 onmouseover="this.style.color='#ef4444';this.style.background='#fef2f2'"
                 onmouseout="this.style.color='#94a3b8';this.style.background='none'">${Zi}</button>
-            </div>` : "", A = this.buildReactionPillsHtml(a.id);
+            </div>` : "", P = this.buildReactionPillsHtml(a.id);
       return `
           <div class="popover-comment" style="margin-bottom:10px;" data-comment-id="${a.id}">
             <div style="display:flex;align-items:center;gap:7px;margin-bottom:2px;">
               <div style="width:22px;height:22px;border-radius:50%;background:${d};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${p}</div>
               <span style="font-size:12px;font-weight:600;color:#0f172a;">${u}</span>
-              <span style="font-size:10px;color:#94a3b8;">${f}</span>
-              ${x}
+              <span style="font-size:10px;color:#94a3b8;">${m}</span>
+              ${I}
             </div>
-            <div style="font-size:13px;color:#334155;line-height:1.45;margin-left:29px;word-wrap:break-word;">${_}</div>
+            ${C ? `<div style="font-size:13px;color:#334155;line-height:1.45;margin-left:29px;word-wrap:break-word;">${C}</div>` : ""}
+            ${w}
             ${$}
-            ${k}
-            ${A}
+            ${P}
           </div>
         `;
     }).join(""), t.querySelectorAll(".edit-btn").forEach((a) => {
@@ -3965,10 +3991,10 @@ class Ji {
         this.client.deleteComment(a.dataset.commentId);
       });
     });
-    const n = t.querySelector(".edit-save"), o = t.querySelector(".edit-cancel"), r = t.querySelector(
+    const s = t.querySelector(".edit-save"), o = t.querySelector(".edit-cancel"), r = t.querySelector(
       ".edit-textarea"
     );
-    n && r && n.addEventListener("click", () => {
+    s && r && s.addEventListener("click", () => {
       const a = r.value.trim();
       if (!a) return;
       const c = [...a.matchAll(/@(\w+)/g)].map((p) => p[1]);
@@ -4017,7 +4043,7 @@ class Ji {
       padding: "8px 14px 12px",
       borderTop: "1px solid #f1f5f9"
     });
-    const i = "border:none;background:none;cursor:pointer;color:#94a3b8;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;transition:all 0.15s;", n = 'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+    const i = "border:none;background:none;cursor:pointer;color:#94a3b8;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;transition:all 0.15s;", s = 'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
     t.innerHTML = `
       <div style="display:flex;align-items:center;gap:4px;margin-bottom:6px;">
         <input type="text" placeholder="Reply..."
@@ -4026,13 +4052,13 @@ class Ji {
       </div>
       <div style="display:flex;align-items:center;gap:2px;">
         <button class="reply-attach-img" title="Attach image" style="${i}" onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'" onmouseout="this.style.color='#94a3b8';this.style.background='none'">
-          <svg ${n}><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+          <svg ${s}><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
         </button>
         <button class="reply-attach-mic" title="Record audio" style="${i}" onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'" onmouseout="this.style.color='#94a3b8';this.style.background='none'">
-          <svg ${n}><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
+          <svg ${s}><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
         </button>
         <button class="reply-attach-video" title="Record video" style="${i}" onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'" onmouseout="this.style.color='#94a3b8';this.style.background='none'">
-          <svg ${n}><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
+          <svg ${s}><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
         </button>
         <div class="reply-attachments-preview" style="flex:1;display:flex;gap:4px;flex-wrap:wrap;margin-left:4px;"></div>
       </div>
@@ -4064,8 +4090,8 @@ class Ji {
     const p = () => {
       const d = o.value.trim();
       if (!d && a.length === 0) return;
-      const u = [...(d || "").matchAll(/@(\w+)/g)].map((f) => f[1]);
-      this.client.reply(e.id, d || "(attachment)", u, a.length > 0 ? [...a] : void 0), o.value = "", a.length = 0, l.innerHTML = "";
+      const u = [...(d || "").matchAll(/@(\w+)/g)].map((m) => m[1]);
+      this.client.reply(e.id, d, u, a.length > 0 ? [...a] : void 0), o.value = "", a.length = 0, l.innerHTML = "";
     };
     r.addEventListener("click", p), o.addEventListener("input", () => {
       const d = Date.now(), u = this.lastTypingSendPins.get(e.id) ?? 0;
@@ -4096,7 +4122,7 @@ class Ji {
       zIndex: "10002",
       fontFamily: be
     });
-    for (const n of Ki) {
+    for (const s of Ki) {
       const o = document.createElement("button");
       Object.assign(o.style, {
         border: "none",
@@ -4106,29 +4132,29 @@ class Ji {
         padding: "4px",
         borderRadius: "4px",
         lineHeight: "1"
-      }), o.textContent = n, o.addEventListener("click", (r) => {
+      }), o.textContent = s, o.addEventListener("click", (r) => {
         r.stopPropagation();
         const a = this.client.state.getReactions(t).find(
           (c) => {
             var p;
-            return c.emoji === n && c.userId === ((p = this.client.state.user) == null ? void 0 : p.id);
+            return c.emoji === s && c.userId === ((p = this.client.state.user) == null ? void 0 : p.id);
           }
         );
-        a ? this.client.removeReaction(a.id) : this.client.addReaction(t, "comment", n), this.popoverPickerOpen = null, this.removePickerEl();
+        a ? this.client.removeReaction(a.id) : this.client.addReaction(t, "comment", s), this.popoverPickerOpen = null, this.removePickerEl();
       }), this.pickerEl.appendChild(o);
     }
     document.body.appendChild(this.pickerEl);
   }
   buildReactionPillsHtml(e) {
     var a;
-    const t = this.client.state.getReactions(e), i = (a = this.client.state.user) == null ? void 0 : a.id, n = /* @__PURE__ */ new Map();
+    const t = this.client.state.getReactions(e), i = (a = this.client.state.user) == null ? void 0 : a.id, s = /* @__PURE__ */ new Map();
     for (const c of t) {
-      const p = n.get(c.emoji) ?? { count: 0, ownId: null };
-      p.count++, c.userId === i && (p.ownId = c.id), n.set(c.emoji, p);
+      const p = s.get(c.emoji) ?? { count: 0, ownId: null };
+      p.count++, c.userId === i && (p.ownId = c.id), s.set(c.emoji, p);
     }
     const o = "display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:12px;cursor:pointer;transition:all 0.15s;line-height:1.4;", r = o + "background:#eef2ff;border-color:#6366f1;";
     let l = '<div style="margin-left:29px;display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">';
-    for (const [c, { count: p, ownId: d }] of n) {
+    for (const [c, { count: p, ownId: d }] of s) {
       const u = d ? r : o;
       l += `<button data-reaction-emoji="${c}" data-reaction-target="${e}" ${d ? `data-reaction-id="${d}"` : ""} style="${u}">
         <span>${c}</span><span style="font-size:11px;font-weight:600;color:#64748b;">${p}</span>
@@ -4147,20 +4173,20 @@ class Ji {
         fontStyle: "italic",
         minHeight: "16px"
       });
-      const n = this.popover.lastElementChild;
-      n && this.popover.insertBefore(t, n);
+      const s = this.popover.lastElementChild;
+      s && this.popover.insertBefore(t, s);
     }
-    const i = this.client.state.getTypingUsers(e).filter((n) => {
+    const i = this.client.state.getTypingUsers(e).filter((s) => {
       var o;
-      return n !== ((o = this.client.state.user) == null ? void 0 : o.id);
-    }).map((n) => {
-      const o = this.client.state.presence.find((r) => r.user.id === n);
+      return s !== ((o = this.client.state.user) == null ? void 0 : o.id);
+    }).map((s) => {
+      const o = this.client.state.presence.find((r) => r.user.id === s);
       return (o == null ? void 0 : o.user.name) ?? "Someone";
     });
     i.length === 0 ? t.textContent = "" : i.length === 1 ? t.textContent = `${i[0]} is typing...` : t.textContent = `${i.join(", ")} are typing...`;
   }
   formatTime(e) {
-    const t = new Date(e), n = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), o = Math.floor(n / 6e4);
+    const t = new Date(e), s = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), o = Math.floor(s / 6e4);
     if (o < 1) return "now";
     if (o < 60) return `${o}m`;
     const r = Math.floor(o / 60);
@@ -4189,9 +4215,9 @@ class Ji {
   renderPins() {
     if (!this.container) return;
     const e = this.threads.filter((i) => i.position && !i.resolved), t = new Set(e.map((i) => i.id));
-    for (const [i, n] of this.pinEls)
-      t.has(i) || (n.remove(), this.pinEls.delete(i));
-    e.forEach((i, n) => {
+    for (const [i, s] of this.pinEls)
+      t.has(i) || (s.remove(), this.pinEls.delete(i));
+    e.forEach((i, s) => {
       const o = i.position;
       let r = this.pinEls.get(i.id);
       r || (r = document.createElement("div"), Object.assign(r.style, {
@@ -4225,19 +4251,19 @@ class Ji {
         }
         const a = this.threads.find((c) => c.id === i.id);
         a && this.showThreadPopover(a, r);
-      }), this.container.appendChild(r), this.pinEls.set(i.id, r)), r.textContent = `${n + 1}`;
+      }), this.container.appendChild(r), this.pinEls.set(i.id, r)), r.textContent = `${s + 1}`;
       const l = this.resolvePosition(o);
       r.style.left = `${l.x}px`, r.style.top = `${l.y}px`;
     });
   }
 }
-var Qi = Object.defineProperty, es = Object.getOwnPropertyDescriptor, j = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? es(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && Qi(e, t, n), n;
+var Qi = Object.defineProperty, es = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? es(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && Qi(e, t, s), s;
 };
 const ts = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let O = class extends S {
+let O = class extends T {
   constructor() {
     super(...arguments), this.highlightThreadId = null, this.threadsVersion = 0, this.replyingTo = null, this.editingCommentId = null, this.editBody = "", this.pickerOpenForComment = null, this.typingByThread = /* @__PURE__ */ new Map(), this.reactionsVersion = 0, this.typingTimers = /* @__PURE__ */ new Map(), this.lastTypingSend = /* @__PURE__ */ new Map(), this.replyAttachmentIds = [];
   }
@@ -4251,28 +4277,28 @@ let O = class extends S {
   disconnectedCallback() {
     super.disconnectedCallback(), this.teardownListeners();
   }
-  willUpdate(s) {
+  willUpdate(n) {
     this.client && !this.unsub && this.ensureListener();
   }
-  updated(s) {
+  updated(n) {
     var e, t;
     (e = this.shadowRoot) == null || e.querySelectorAll(".audio-player-host").forEach((i) => {
       if (i.children.length > 0) return;
-      const n = i.dataset.url;
-      if (n) {
+      const s = i.dataset.url;
+      if (s) {
         const o = i.dataset.duration ? parseInt(i.dataset.duration) : void 0;
-        i.appendChild(Oe.render(n, o));
+        i.appendChild(Oe.render(s, o));
       }
     }), (t = this.shadowRoot) == null || t.querySelectorAll(".video-player-host").forEach((i) => {
       if (i.children.length > 0) return;
-      const n = i.dataset.url;
-      n && i.appendChild(Tt.render(n, i.dataset.poster || void 0));
+      const s = i.dataset.url;
+      s && i.appendChild(Tt.render(s, i.dataset.poster || void 0));
     });
   }
   teardownListeners() {
-    var s, e, t;
-    (s = this.unsub) == null || s.call(this), this.unsub = void 0, (e = this.reactionUnsub) == null || e.call(this), this.reactionUnsub = void 0, (t = this.typingUnsub) == null || t.call(this), this.typingUnsub = void 0;
-    for (const i of this.typingTimers.values()) clearTimeout(i);
+    var n, e, t, i;
+    (n = this.unsub) == null || n.call(this), this.unsub = void 0, (e = this.authUnsub) == null || e.call(this), this.authUnsub = void 0, (t = this.reactionUnsub) == null || t.call(this), this.reactionUnsub = void 0, (i = this.typingUnsub) == null || i.call(this), this.typingUnsub = void 0;
+    for (const s of this.typingTimers.values()) clearTimeout(s);
     this.typingTimers.clear();
   }
   ensureListener() {
@@ -4281,123 +4307,125 @@ let O = class extends S {
   setupListener() {
     this.client && (this.unsub = this.client.state.on("threads", () => {
       this.threadsVersion++;
+    }), this.authUnsub = this.client.state.on("auth", () => {
+      this.threadsVersion++;
     }), this.reactionUnsub = this.client.state.on("reactions", () => {
       this.reactionsVersion++;
     }), this.typingUnsub = this.client.state.on(
       "typing",
-      ({ threadId: s }) => {
-        this.refreshTyping(s);
+      ({ threadId: n }) => {
+        this.refreshTyping(n);
       }
     ));
   }
-  refreshTyping(s) {
-    const t = this.client.state.getTypingUsers(s).filter((n) => {
+  refreshTyping(n) {
+    const t = this.client.state.getTypingUsers(n).filter((s) => {
       var o;
-      return n !== ((o = this.client.state.user) == null ? void 0 : o.id);
-    }).map((n) => {
-      const o = this.client.state.presence.find((r) => r.user.id === n);
+      return s !== ((o = this.client.state.user) == null ? void 0 : o.id);
+    }).map((s) => {
+      const o = this.client.state.presence.find((r) => r.user.id === s);
       return (o == null ? void 0 : o.user.name) ?? "Someone";
     }), i = new Map(this.typingByThread);
-    i.set(s, t), this.typingByThread = i, this.typingTimers.has(s) && clearTimeout(this.typingTimers.get(s)), this.typingTimers.set(
-      s,
+    i.set(n, t), this.typingByThread = i, this.typingTimers.has(n) && clearTimeout(this.typingTimers.get(n)), this.typingTimers.set(
+      n,
       setTimeout(() => {
-        this.refreshTyping(s);
+        this.refreshTyping(n);
       }, 3500)
     );
   }
-  handleTypingInput(s) {
-    const e = Date.now(), t = this.lastTypingSend.get(s) ?? 0;
-    e - t >= 2e3 && (this.client.sendTyping(s), this.lastTypingSend.set(s, e));
+  handleTypingInput(n) {
+    const e = Date.now(), t = this.lastTypingSend.get(n) ?? 0;
+    e - t >= 2e3 && (this.client.sendTyping(n), this.lastTypingSend.set(n, e));
   }
-  toggleReaction(s, e) {
+  toggleReaction(n, e) {
     var o;
-    const t = this.client.state.getReactions(s), i = (o = this.client.state.user) == null ? void 0 : o.id, n = t.find(
+    const t = this.client.state.getReactions(n), i = (o = this.client.state.user) == null ? void 0 : o.id, s = t.find(
       (r) => r.emoji === e && r.userId === i
     );
-    n ? this.client.removeReaction(n.id) : this.client.addReaction(s, "comment", e), this.pickerOpenForComment = null;
+    s ? this.client.removeReaction(s.id) : this.client.addReaction(n, "comment", e), this.pickerOpenForComment = null;
   }
   fireClose() {
     this.dispatchEvent(
       new CustomEvent("panel-close", { bubbles: !0, composed: !0 })
     );
   }
-  scrollToThread(s) {
+  scrollToThread(n) {
     this.updateComplete.then(() => {
       var t;
       const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-        `[data-thread-id="${s}"]`
+        `[data-thread-id="${n}"]`
       );
       e == null || e.scrollIntoView({ behavior: "smooth", block: "center" });
     });
   }
-  parseMentions(s) {
-    return s.split(/(@\w+)/g).map(
+  parseMentions(n) {
+    return n.split(/(@\w+)/g).map(
       (t) => t.startsWith("@") ? h`<span class="mention">${t}</span>` : t
     );
   }
-  getInitials(s) {
-    return s.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
+  getInitials(n) {
+    return n.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
   }
-  getUserForComment(s) {
-    return this.client.state.getUser(s);
+  getUserForComment(n) {
+    return this.client.state.getUser(n);
   }
-  formatTime(s) {
-    const e = new Date(s), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(i / 6e4);
-    if (n < 1) return "now";
-    if (n < 60) return `${n}m`;
-    const o = Math.floor(n / 60);
+  formatTime(n) {
+    const e = new Date(n), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), s = Math.floor(i / 6e4);
+    if (s < 1) return "now";
+    if (s < 60) return `${s}m`;
+    const o = Math.floor(s / 60);
     return o < 24 ? `${o}h` : e.toLocaleDateString();
   }
   async handleAttachImage() {
     this.upload || (this.upload = new ne(this.client));
-    const s = await this.upload.pickFile("image/*");
-    s && (this.replyAttachmentIds.push(s.id), this.requestUpdate());
+    const n = await this.upload.pickFile("image/*");
+    n && (this.replyAttachmentIds.push(n.id), this.requestUpdate());
   }
-  async handleRecordAudio(s) {
+  async handleRecordAudio(n) {
     var i;
     this.upload || (this.upload = new ne(this.client)), this.audioRecorder || (this.audioRecorder = new Re());
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${s}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
     if (t) {
-      const n = await this.upload.uploadBlob(t, "audio.webm");
-      n && (this.replyAttachmentIds.push(n.id), this.requestUpdate());
+      const s = await this.upload.uploadBlob(t, "audio.webm");
+      s && (this.replyAttachmentIds.push(s.id), this.requestUpdate());
     }
   }
-  async handleRecordVideo(s) {
+  async handleRecordVideo(n) {
     var i;
     this.upload || (this.upload = new ne(this.client)), this.videoRecorder || (this.videoRecorder = new Le());
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${s}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
     if (t) {
-      const n = await this.upload.uploadBlob(t.blob, "video.webm");
-      n && (this.replyAttachmentIds.push(n.id), this.requestUpdate());
+      const s = await this.upload.uploadBlob(t.blob, "video.webm");
+      s && (this.replyAttachmentIds.push(s.id), this.requestUpdate());
     }
   }
-  handleReply(s, e) {
+  handleReply(n, e) {
     e.preventDefault();
-    const i = e.target.querySelector("input"), n = i.value.trim();
-    if (!n && this.replyAttachmentIds.length === 0) return;
-    const o = [...(n || "").matchAll(/@(\w+)/g)].map((r) => r[1]);
-    this.client.reply(s, n || "(attachment)", o, this.replyAttachmentIds.length > 0 ? [...this.replyAttachmentIds] : void 0), i.value = "", this.replyAttachmentIds = [], this.replyingTo = null;
+    const i = e.target.querySelector("input"), s = i.value.trim();
+    if (!s && this.replyAttachmentIds.length === 0) return;
+    const o = [...(s || "").matchAll(/@(\w+)/g)].map((r) => r[1]);
+    this.client.reply(n, s, o, this.replyAttachmentIds.length > 0 ? [...this.replyAttachmentIds] : void 0), i.value = "", this.replyAttachmentIds = [], this.replyingTo = null;
   }
-  isOwnComment(s) {
+  isOwnComment(n) {
     var e, t;
-    return ((t = (e = this.client) == null ? void 0 : e.state.user) == null ? void 0 : t.id) === s.userId;
+    return ((t = (e = this.client) == null ? void 0 : e.state.user) == null ? void 0 : t.id) === n.userId;
   }
-  startEdit(s) {
-    this.editingCommentId = s.id, this.editBody = s.body;
+  startEdit(n) {
+    this.editingCommentId = n.id, this.editBody = n.body;
   }
   cancelEdit() {
     this.editingCommentId = null, this.editBody = "";
   }
-  saveEdit(s) {
+  saveEdit(n) {
     const e = this.editBody.trim();
     if (!e) return;
     const t = [...e.matchAll(/@(\w+)/g)].map((i) => i[1]);
-    this.client.editComment(s, e, t), this.editingCommentId = null, this.editBody = "";
+    this.client.editComment(n, e, t), this.editingCommentId = null, this.editBody = "";
   }
-  deleteComment(s) {
-    this.client.deleteComment(s);
+  deleteComment(n) {
+    this.client.deleteComment(n);
   }
-  renderEditForm(s) {
+  renderEditForm(n) {
     return h`
       <div class="edit-form">
         <textarea
@@ -4407,16 +4435,16 @@ let O = class extends S {
     }}
         ></textarea>
         <div class="edit-actions">
-          <button class="pw-btn pw-btn-primary" @click=${() => this.saveEdit(s.id)}>Save</button>
+          <button class="pw-btn pw-btn-primary" @click=${() => this.saveEdit(n.id)}>Save</button>
           <button class="pw-btn" @click=${this.cancelEdit}>Cancel</button>
         </div>
       </div>
     `;
   }
-  renderReactions(s) {
-    var n;
+  renderReactions(n) {
+    var s;
     this.reactionsVersion;
-    const e = this.client.state.getReactions(s.id), t = (n = this.client.state.user) == null ? void 0 : n.id, i = /* @__PURE__ */ new Map();
+    const e = this.client.state.getReactions(n.id), t = (s = this.client.state.user) == null ? void 0 : s.id, i = /* @__PURE__ */ new Map();
     for (const o of e)
       i.has(o.emoji) || i.set(o.emoji, []), i.get(o.emoji).push(o);
     return h`
@@ -4427,7 +4455,7 @@ let O = class extends S {
         return h`
               <button
                 class="reaction-pill ${l ? "own" : ""}"
-                @click=${() => this.toggleReaction(s.id, o)}
+                @click=${() => this.toggleReaction(n.id, o)}
               >
                 <span>${o}</span>
                 <span class="count">${r.length}</span>
@@ -4438,41 +4466,41 @@ let O = class extends S {
         <button
           class="reaction-add-btn"
           @click=${() => {
-      this.pickerOpenForComment = this.pickerOpenForComment === s.id ? null : s.id;
+      this.pickerOpenForComment = this.pickerOpenForComment === n.id ? null : n.id;
     }}
           title="Add reaction"
         >
           +
-          ${this.pickerOpenForComment === s.id ? h`
+          ${this.pickerOpenForComment === n.id ? h`
                 <div class="emoji-picker">
                   ${ts.map(
       (o) => h`
                       <button @click=${(r) => {
-        r.stopPropagation(), this.toggleReaction(s.id, o);
+        r.stopPropagation(), this.toggleReaction(n.id, o);
       }}>${o}</button>
                     `
     )}
                 </div>
-              ` : m}
+              ` : f}
         </button>
       </div>
     `;
   }
-  renderTypingIndicator(s) {
-    const e = this.typingByThread.get(s) ?? [];
-    if (e.length === 0) return m;
+  renderTypingIndicator(n) {
+    const e = this.typingByThread.get(n) ?? [];
+    if (e.length === 0) return f;
     const t = e.length === 1 ? `${e[0]} is typing...` : `${e.join(", ")} are typing...`;
     return h`<div class="typing-indicator">${t}</div>`;
   }
   sortedThreads() {
-    return [...this.threads].sort((s, e) => {
-      if (s.resolved !== e.resolved) return s.resolved ? 1 : -1;
-      const t = s.comments.length ? new Date(s.comments[s.comments.length - 1].createdAt).getTime() : 0;
+    return [...this.threads].sort((n, e) => {
+      if (n.resolved !== e.resolved) return n.resolved ? 1 : -1;
+      const t = n.comments.length ? new Date(n.comments[n.comments.length - 1].createdAt).getTime() : 0;
       return (e.comments.length ? new Date(e.comments[e.comments.length - 1].createdAt).getTime() : 0) - t;
     });
   }
   render() {
-    const s = this.sortedThreads();
+    const n = this.sortedThreads();
     return h`
       <div class="panel">
         <div class="panel-header">
@@ -4481,15 +4509,15 @@ let O = class extends S {
             <span class="thread-count">${this.threads.length}</span>
           </span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${E(me, 16)}
+            ${k(me, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${s.length === 0 ? h`<div class="empty">
+          ${n.length === 0 ? h`<div class="empty">
                 <div class="empty-icon">&#128172;</div>
                 No comments yet
-              </div>` : s.map((e) => this.renderThread(e))}
+              </div>` : n.map((e) => this.renderThread(e))}
         </div>
 
         <div class="pin-hint">
@@ -4498,9 +4526,9 @@ let O = class extends S {
       </div>
     `;
   }
-  renderAttachments(s) {
-    return !s || s.length === 0 ? m : h`
-      ${s.map((e) => {
+  renderAttachments(n) {
+    return !n || n.length === 0 ? f : h`
+      ${n.map((e) => {
       if (e.type === "image") {
         const t = e.thumbnailUrl || e.url;
         return h`
@@ -4522,52 +4550,52 @@ let O = class extends S {
             <div class="comment-attachment-media" id="video-${e.id}">
               ${this.renderVideoPlayer(e)}
             </div>
-          ` : m;
+          ` : f;
     })}
     `;
   }
-  renderAudioPlayer(s) {
-    const e = document.createElement("div"), t = Oe.render(s.url, s.durationMs);
-    return e.appendChild(t), h`<div class="audio-player-host" data-url=${s.url} data-duration=${s.durationMs ?? ""}></div>`;
+  renderAudioPlayer(n) {
+    const e = document.createElement("div"), t = Oe.render(n.url, n.durationMs);
+    return e.appendChild(t), h`<div class="audio-player-host" data-url=${n.url} data-duration=${n.durationMs ?? ""}></div>`;
   }
-  renderVideoPlayer(s) {
-    return h`<div class="video-player-host" data-url=${s.url} data-poster=${s.thumbnailUrl ?? ""}></div>`;
+  renderVideoPlayer(n) {
+    return h`<div class="video-player-host" data-url=${n.url} data-poster=${n.thumbnailUrl ?? ""}></div>`;
   }
-  renderThread(s) {
-    const e = this.highlightThreadId === s.id;
+  renderThread(n) {
+    const e = this.highlightThreadId === n.id;
     return h`
       <div
-        class="thread ${s.resolved ? "resolved" : ""} ${e ? "highlighted" : ""}"
-        data-thread-id=${s.id}
+        class="thread ${n.resolved ? "resolved" : ""} ${e ? "highlighted" : ""}"
+        data-thread-id=${n.id}
       >
-        ${s.position ? h`<div class="pin-badge">
-              ${E(_t, 12)}
+        ${n.position ? h`<div class="pin-badge">
+              ${k(_t, 12)}
               Pinned
-            </div>` : m}
-        ${s.comments.map((t, i) => {
-      const n = this.getUserForComment(t.userId), o = this.isOwnComment(t), r = this.editingCommentId === t.id;
+            </div>` : f}
+        ${n.comments.map((t, i) => {
+      const s = this.getUserForComment(t.userId), o = this.isOwnComment(t), r = this.editingCommentId === t.id;
       return h`
-            ${i > 0 ? h`<div class="comment-divider"></div>` : m}
+            ${i > 0 ? h`<div class="comment-divider"></div>` : f}
             <div class="comment">
               <div class="comment-header">
                 <div
                   class="comment-avatar"
-                  style="background:${(n == null ? void 0 : n.color) ?? "#94a3b8"}"
+                  style="background:${(s == null ? void 0 : s.color) ?? "#94a3b8"}"
                 >
-                  ${n ? this.getInitials(n.name) : "?"}
+                  ${s ? this.getInitials(s.name) : "?"}
                 </div>
-                <span class="comment-author">${(n == null ? void 0 : n.name) ?? "Unknown"}</span>
+                <span class="comment-author">${(s == null ? void 0 : s.name) ?? "Unknown"}</span>
                 <span class="comment-time">${this.formatTime(t.createdAt)}</span>
-                ${t.editedAt ? h`<span class="edited-badge">(edited)</span>` : m}
+                ${t.editedAt ? h`<span class="edited-badge">(edited)</span>` : f}
               </div>
               ${r ? this.renderEditForm(t) : h`
-                    <div class="comment-body">${this.parseMentions(t.body)}</div>
+                    ${t.body && t.body !== "(attachment)" ? h`<div class="comment-body">${this.parseMentions(t.body)}</div>` : f}
                     ${this.renderAttachments(t.attachments ?? [])}
                   `}
               ${o && !r ? h`<div class="comment-actions">
-                    <button @click=${() => this.startEdit(t)} title="Edit">${E(Ai, 14)}</button>
-                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${E(Mi, 14)}</button>
-                  </div>` : m}
+                    <button @click=${() => this.startEdit(t)} title="Edit">${k(Ai, 14)}</button>
+                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${k(Mi, 14)}</button>
+                  </div>` : f}
               ${this.renderReactions(t)}
             </div>
           `;
@@ -4575,29 +4603,29 @@ let O = class extends S {
 
         <div class="thread-actions">
           <button
-            @click=${() => this.replyingTo = this.replyingTo === s.id ? null : s.id}
+            @click=${() => this.replyingTo = this.replyingTo === n.id ? null : n.id}
           >
             Reply
           </button>
           <button
-            @click=${() => this.client.resolveThread(s.id, !s.resolved)}
+            @click=${() => this.client.resolveThread(n.id, !n.resolved)}
           >
-            ${s.resolved ? "Reopen" : "Resolve"}
+            ${n.resolved ? "Reopen" : "Resolve"}
           </button>
         </div>
 
-        ${this.renderTypingIndicator(s.id)}
+        ${this.renderTypingIndicator(n.id)}
 
-        ${this.replyingTo === s.id ? h`
+        ${this.replyingTo === n.id ? h`
               <form
                 class="reply-form"
-                @submit=${(t) => this.handleReply(s.id, t)}
+                @submit=${(t) => this.handleReply(n.id, t)}
               >
                 <div class="reply-input-row">
                   <input
                     type="text"
                     placeholder="Reply..."
-                    @input=${() => this.handleTypingInput(s.id)}
+                    @input=${() => this.handleTypingInput(n.id)}
                   />
                   <button class="pw-btn pw-btn-primary" type="submit">Send</button>
                 </div>
@@ -4607,19 +4635,19 @@ let O = class extends S {
                     class="reply-media-btn"
                     title="Attach image"
                     @click=${() => this.handleAttachImage()}
-                  >${E(Si, 16)}</button>
+                  >${k(Si, 16)}</button>
                   <button
                     type="button"
                     class="reply-media-btn"
                     title="Record audio"
-                    @click=${() => this.handleRecordAudio(s.id)}
-                  >${E(Ti, 16)}</button>
+                    @click=${() => this.handleRecordAudio(n.id)}
+                  >${k(Ti, 16)}</button>
                   <button
                     type="button"
                     class="reply-media-btn"
                     title="Record video"
-                    @click=${() => this.handleRecordVideo(s.id)}
-                  >${E(Oi, 16)}</button>
+                    @click=${() => this.handleRecordVideo(n.id)}
+                  >${k(Oi, 16)}</button>
                   <div class="reply-preview">
                     ${this.replyAttachmentIds.map(
       (t, i) => h`<span class="reply-preview-badge">Attached #${i + 1}</span>`
@@ -4627,7 +4655,7 @@ let O = class extends S {
                   </div>
                 </div>
               </form>
-            ` : m}
+            ` : f}
       </div>
     `;
   }
@@ -4636,7 +4664,7 @@ O.styles = [
   ee,
   ge,
   _e,
-  I`
+  A`
       :host {
         display: block;
       }
@@ -5185,10 +5213,10 @@ j([
 O = j([
   R("pulse-widget-comments-panel")
 ], O);
-var is = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, qe = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ss(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && is(e, t, n), n;
+var is = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, Ve = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? ss(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && is(e, t, s), s;
 };
 const ns = {
   "comment:created": "left a comment",
@@ -5203,7 +5231,7 @@ const ns = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let de = class extends S {
+let de = class extends T {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -5211,18 +5239,18 @@ let de = class extends S {
     super.connectedCallback(), this.setupListener();
   }
   disconnectedCallback() {
-    var s;
-    super.disconnectedCallback(), (s = this.unsub) == null || s.call(this);
+    var n;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this);
   }
-  updated(s) {
+  updated(n) {
     var e;
-    s.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), this.setupListener());
   }
   setupListener() {
     this.client && (this.notifications = this.client.state.notifications, this.unsub = this.client.state.on(
       "notifications",
-      (s) => {
-        this.notifications = [...s];
+      (n) => {
+        this.notifications = [...n];
       }
     ));
   }
@@ -5231,35 +5259,35 @@ let de = class extends S {
       new CustomEvent("panel-close", { bubbles: !0, composed: !0 })
     );
   }
-  handleClick(s) {
-    s.read || this.client.markRead(s.id);
+  handleClick(n) {
+    n.read || this.client.markRead(n.id);
   }
-  getActorName(s) {
+  getActorName(n) {
     var e;
-    return ((e = this.client.state.getUser(s)) == null ? void 0 : e.name) ?? "Someone";
+    return ((e = this.client.state.getUser(n)) == null ? void 0 : e.name) ?? "Someone";
   }
-  formatTime(s) {
-    const e = new Date(s), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(i / 6e4);
-    if (n < 1) return "now";
-    if (n < 60) return `${n}m`;
-    const o = Math.floor(n / 60);
+  formatTime(n) {
+    const e = new Date(n), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), s = Math.floor(i / 6e4);
+    if (s < 1) return "now";
+    if (s < 60) return `${s}m`;
+    const o = Math.floor(s / 60);
     return o < 24 ? `${o}h` : e.toLocaleDateString();
   }
   render() {
-    const s = this.notifications.filter((e) => !e.read).length;
+    const n = this.notifications.filter((e) => !e.read).length;
     return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
             Notifications
-            ${s > 0 ? h`<span class="unread-badge">${s}</span>` : m}
+            ${n > 0 ? h`<span class="unread-badge">${n}</span>` : f}
           </span>
           <div style="display:flex;align-items:center;gap:4px;">
-            ${s > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+            ${n > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
                   Mark all read
-                </button>` : m}
+                </button>` : f}
             <button class="close-btn" @click=${this.fireClose} title="Close">
-              ${E(me, 16)}
+              ${k(me, 16)}
             </button>
           </div>
         </div>
@@ -5295,7 +5323,7 @@ de.styles = [
   ee,
   ge,
   _e,
-  I`
+  A`
       :host {
         display: block;
       }
@@ -5488,13 +5516,13 @@ de.styles = [
       }
     `
 ];
-qe([
+Ve([
   g({ attribute: !1 })
 ], de.prototype, "client", 2);
-qe([
+Ve([
   v()
 ], de.prototype, "notifications", 2);
-de = qe([
+de = Ve([
   R("pulse-widget-notifications-panel")
 ], de);
 const rs = 3e3;
@@ -5527,13 +5555,13 @@ class as {
           if (i)
             i.position = t;
           else {
-            const n = this.client.state.presence.find(
+            const s = this.client.state.presence.find(
               (o) => o.user.id === e
             );
-            n && this.cursors.set(e, {
+            s && this.cursors.set(e, {
               userId: e,
-              name: n.user.name,
-              color: n.user.color,
+              name: s.user.name,
+              color: s.user.color,
               position: t
             });
           }
@@ -5543,17 +5571,17 @@ class as {
     ), this.unsubs.push(
       this.client.state.on("presence", (e) => {
         var i;
-        const t = new Set(e.map((n) => n.user.id));
-        for (const n of this.cursors.keys())
-          t.has(n) || (this.cursors.delete(n), (i = this.cursorEls.get(n)) == null || i.remove(), this.cursorEls.delete(n), this.cursorLastSeen.delete(n));
+        const t = new Set(e.map((s) => s.user.id));
+        for (const s of this.cursors.keys())
+          t.has(s) || (this.cursors.delete(s), (i = this.cursorEls.get(s)) == null || i.remove(), this.cursorEls.delete(s), this.cursorLastSeen.delete(s));
       })
     ), this.setSending(!0), this.staleTimer = setInterval(() => {
       const e = Date.now();
       for (const [t, i] of this.cursorLastSeen)
         if (e - i > rs) {
           this.cursors.delete(t);
-          const n = this.cursorEls.get(t);
-          n && n.remove(), this.cursorEls.delete(t), this.cursorLastSeen.delete(t);
+          const s = this.cursorEls.get(t);
+          s && s.remove(), this.cursorEls.delete(t), this.cursorLastSeen.delete(t);
         }
     }, 1e3));
   }
@@ -5577,7 +5605,7 @@ class as {
     if (!this.container) return;
     const i = this.client.state.presence.find(
       (r) => r.user.id === e
-    ), n = (i == null ? void 0 : i.user.color) ?? "#6366f1", o = document.createElement("div");
+    ), s = (i == null ? void 0 : i.user.color) ?? "#6366f1", o = document.createElement("div");
     Object.assign(o.style, {
       position: "absolute",
       left: `${t.x}px`,
@@ -5585,7 +5613,7 @@ class as {
       width: "0px",
       height: "0px",
       borderRadius: "50%",
-      border: `3px solid ${n}`,
+      border: `3px solid ${s}`,
       transform: "translate(-50%, -50%)",
       pointerEvents: "none",
       opacity: "1",
@@ -5596,8 +5624,8 @@ class as {
   }
   showEmojiDrop(e, t, i) {
     if (!this.container) return;
-    const n = document.createElement("div");
-    Object.assign(n.style, {
+    const s = document.createElement("div");
+    Object.assign(s.style, {
       position: "absolute",
       left: `${i.x}px`,
       top: `${i.y}px`,
@@ -5607,9 +5635,9 @@ class as {
       transform: "translate(-50%, 0)",
       zIndex: "10",
       lineHeight: "1"
-    }), n.textContent = t, this.container.appendChild(n), requestAnimationFrame(() => {
-      n.style.transform = "translate(-50%, -80px)", n.style.opacity = "0";
-    }), setTimeout(() => n.remove(), 2e3);
+    }), s.textContent = t, this.container.appendChild(s), requestAnimationFrame(() => {
+      s.style.transform = "translate(-50%, -80px)", s.style.opacity = "0";
+    }), setTimeout(() => s.remove(), 2e3);
   }
   destroy() {
     this.disable();
@@ -5626,9 +5654,9 @@ class as {
         willChange: "transform",
         pointerEvents: "none"
       });
-      const n = t.color || "#e74c3c";
+      const s = t.color || "#e74c3c";
       i.innerHTML = `
-        <svg width="24" height="24" viewBox="0 0 16 16" fill="${n}" style="filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))">
+        <svg width="24" height="24" viewBox="0 0 16 16" fill="${s}" style="filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))">
           <path d="M0 0l6.5 16L8 9l7-2.5z" stroke="#fff" stroke-width="1"/>
         </svg>
         <span style="
@@ -5637,7 +5665,7 @@ class as {
           font-size:12px;font-weight:700;
           font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
           color:#fff;white-space:nowrap;
-          background:${n};
+          background:${s};
           box-shadow:0 2px 10px rgba(0,0,0,0.25);
           letter-spacing:0.01em;
         ">${t.name}</span>
@@ -5651,26 +5679,26 @@ class ls {
     this.container = null, this.unsubs = [], this.enabled = !1, this.drawMode = !1, this.currentPoints = [], this.currentPath = null, this.lastPoint = null, this.fadeTimers = /* @__PURE__ */ new Map(), this.handlePointerDown = (t) => {
       var l, a, c;
       t.preventDefault(), (a = (l = t.target) == null ? void 0 : l.setPointerCapture) == null || a.call(l, t.pointerId), this.currentPoints = [{ x: t.clientX, y: t.clientY }], this.lastPoint = { x: t.clientX, y: t.clientY };
-      const i = this.client.state.user, n = (i == null ? void 0 : i.color) ?? "#6366f1", r = 2 + (t.pressure > 0 ? t.pressure : 0.5) * 4;
+      const i = this.client.state.user, s = (i == null ? void 0 : i.color) ?? "#6366f1", r = 2 + (t.pressure > 0 ? t.pressure : 0.5) * 4;
       this.currentPath = document.createElementNS(
         "http://www.w3.org/2000/svg",
         "polyline"
-      ), this.currentPath.setAttribute("fill", "none"), this.currentPath.setAttribute("stroke", n), this.currentPath.setAttribute("stroke-width", String(r)), this.currentPath.setAttribute("stroke-linecap", "round"), this.currentPath.setAttribute("stroke-linejoin", "round"), this.currentPath.setAttribute(
+      ), this.currentPath.setAttribute("fill", "none"), this.currentPath.setAttribute("stroke", s), this.currentPath.setAttribute("stroke-width", String(r)), this.currentPath.setAttribute("stroke-linecap", "round"), this.currentPath.setAttribute("stroke-linejoin", "round"), this.currentPath.setAttribute(
         "points",
         `${t.clientX},${t.clientY}`
       ), (c = this.container) == null || c.appendChild(this.currentPath), document.addEventListener("pointermove", this.handlePointerMove), document.addEventListener("pointerup", this.handlePointerUp);
     }, this.handlePointerMove = (t) => {
       if (!this.currentPath || !this.lastPoint) return;
-      const i = t.clientX - this.lastPoint.x, n = t.clientY - this.lastPoint.y;
-      if (i * i + n * n < 4) return;
+      const i = t.clientX - this.lastPoint.x, s = t.clientY - this.lastPoint.y;
+      if (i * i + s * s < 4) return;
       this.currentPoints.push({ x: t.clientX, y: t.clientY }), this.lastPoint = { x: t.clientX, y: t.clientY };
       const o = this.currentPoints.map((r) => `${r.x},${r.y}`).join(" ");
       this.currentPath.setAttribute("points", o);
     }, this.handlePointerUp = () => {
       var t;
       if (document.removeEventListener("pointermove", this.handlePointerMove), document.removeEventListener("pointerup", this.handlePointerUp), this.currentPoints.length > 1) {
-        const i = this.client.state.user, n = (i == null ? void 0 : i.color) ?? "#6366f1";
-        this.client.drawStroke(this.currentPoints, n, 3), this.currentPath && this.scheduleFade(this.currentPath);
+        const i = this.client.state.user, s = (i == null ? void 0 : i.color) ?? "#6366f1";
+        this.client.drawStroke(this.currentPoints, s, 3), this.currentPath && this.scheduleFade(this.currentPath);
       } else
         (t = this.currentPath) == null || t.remove();
       this.currentPoints = [], this.currentPath = null, this.lastPoint = null;
@@ -5684,8 +5712,8 @@ class ls {
       "style",
       "position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9989;"
     ), document.body.appendChild(this.container), this.unsubs.push(
-      this.client.state.on("draw-stroke", ({ userId: e, points: t, color: i, width: n }) => {
-        this.renderStroke(t, i, n);
+      this.client.state.on("draw-stroke", ({ userId: e, points: t, color: i, width: s }) => {
+        this.renderStroke(t, i, s);
       })
     ), this.unsubs.push(
       this.client.state.on("draw-clear", ({ userId: e }) => {
@@ -5711,14 +5739,14 @@ class ls {
   }
   renderStroke(e, t, i) {
     if (!this.container || e.length < 2) return;
-    const n = document.createElementNS(
+    const s = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "polyline"
     );
-    n.setAttribute("fill", "none"), n.setAttribute("stroke", t), n.setAttribute("stroke-width", String(i)), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n.setAttribute(
+    s.setAttribute("fill", "none"), s.setAttribute("stroke", t), s.setAttribute("stroke-width", String(i)), s.setAttribute("stroke-linecap", "round"), s.setAttribute("stroke-linejoin", "round"), s.setAttribute(
       "points",
       e.map((o) => `${o.x},${o.y}`).join(" ")
-    ), n.style.willChange = "opacity", this.container.appendChild(n), this.scheduleFade(n);
+    ), s.style.willChange = "opacity", this.container.appendChild(s), this.scheduleFade(s);
   }
   scheduleFade(e) {
     const t = setTimeout(() => {
@@ -5729,48 +5757,48 @@ class ls {
     this.fadeTimers.set(e, t);
   }
 }
-function cs(s) {
-  if (!s.rangeCount || s.isCollapsed) return null;
-  const e = s.getRangeAt(0), t = e.startContainer, i = e.endContainer, n = ft(t), o = ft(i);
-  return !n || !o ? null : {
-    startSelector: n,
+function cs(n) {
+  if (!n.rangeCount || n.isCollapsed) return null;
+  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = ft(t), o = ft(i);
+  return !s || !o ? null : {
+    startSelector: s,
     startOffset: e.startOffset,
     endSelector: o,
     endOffset: e.endOffset
   };
 }
-function ds(s) {
+function ds(n) {
   var e, t;
   try {
-    const i = gt(s.startSelector), n = gt(s.endSelector);
-    if (!i || !n) return null;
-    const o = document.createRange(), r = i.nodeType === Node.TEXT_NODE ? ((e = i.textContent) == null ? void 0 : e.length) ?? 0 : i.childNodes.length, l = n.nodeType === Node.TEXT_NODE ? ((t = n.textContent) == null ? void 0 : t.length) ?? 0 : n.childNodes.length;
-    return o.setStart(i, Math.min(s.startOffset, r)), o.setEnd(n, Math.min(s.endOffset, l)), o;
+    const i = gt(n.startSelector), s = gt(n.endSelector);
+    if (!i || !s) return null;
+    const o = document.createRange(), r = i.nodeType === Node.TEXT_NODE ? ((e = i.textContent) == null ? void 0 : e.length) ?? 0 : i.childNodes.length, l = s.nodeType === Node.TEXT_NODE ? ((t = s.textContent) == null ? void 0 : t.length) ?? 0 : s.childNodes.length;
+    return o.setStart(i, Math.min(n.startOffset, r)), o.setEnd(s, Math.min(n.endOffset, l)), o;
   } catch {
     return null;
   }
 }
-function ft(s) {
-  if (s.nodeType === Node.TEXT_NODE) {
-    const e = s.parentElement;
+function ft(n) {
+  if (n.nodeType === Node.TEXT_NODE) {
+    const e = n.parentElement;
     if (!e) return null;
     const t = mt(e);
     if (!t) return null;
-    const i = Array.from(e.childNodes).indexOf(s);
+    const i = Array.from(e.childNodes).indexOf(n);
     return `${t}::text(${i})`;
   }
-  return s.nodeType === Node.ELEMENT_NODE ? mt(s) : null;
+  return n.nodeType === Node.ELEMENT_NODE ? mt(n) : null;
 }
-function mt(s) {
-  if (!s || s === document.documentElement) return "html";
-  if (s === document.body) return "body";
-  if (s.id) return `#${CSS.escape(s.id)}`;
+function mt(n) {
+  if (!n || n === document.documentElement) return "html";
+  if (n === document.body) return "body";
+  if (n.id) return `#${CSS.escape(n.id)}`;
   const e = [];
-  let t = s, i = 0;
+  let t = n, i = 0;
   for (; t && t !== document.body && i < 10; ) {
-    const n = t.parentElement;
-    if (!n) break;
-    const o = t.tagName.toLowerCase(), r = t.tagName, l = Array.from(n.children).filter(
+    const s = t.parentElement;
+    if (!s) break;
+    const o = t.tagName.toLowerCase(), r = t.tagName, l = Array.from(s.children).filter(
       (a) => a.tagName === r
     );
     if (l.length === 1)
@@ -5779,27 +5807,27 @@ function mt(s) {
       const a = l.indexOf(t) + 1;
       e.unshift(`${o}:nth-of-type(${a})`);
     }
-    if (n.id) {
-      e.unshift(`#${CSS.escape(n.id)}`);
+    if (s.id) {
+      e.unshift(`#${CSS.escape(s.id)}`);
       break;
     }
-    t = n, i++;
+    t = s, i++;
   }
   return e.length > 0 ? e.join(" > ") : null;
 }
-function gt(s) {
-  const e = s.match(/^(.+)::text\((\d+)\)$/);
+function gt(n) {
+  const e = n.match(/^(.+)::text\((\d+)\)$/);
   if (e) {
     const t = e[1], i = parseInt(e[2], 10);
     try {
-      const n = document.querySelector(t);
-      return n ? n.childNodes[i] ?? null : null;
+      const s = document.querySelector(t);
+      return s ? s.childNodes[i] ?? null : null;
     } catch {
       return null;
     }
   }
   try {
-    return document.querySelector(s);
+    return document.querySelector(n);
   } catch {
     return null;
   }
@@ -5848,13 +5876,13 @@ class hs {
     if (!this.container) return;
     const i = (l = this.client.state.user) == null ? void 0 : l.id;
     if (e === i || (this.clearSelection(e), !t)) return;
-    const n = ds(t);
-    if (!n) return;
+    const s = ds(t);
+    if (!s) return;
     const o = this.client.state.presence.find(
       (a) => a.user.id === e
     ), r = (o == null ? void 0 : o.user.color) ?? "#6366f1";
     try {
-      const a = n.getClientRects(), c = [];
+      const a = s.getClientRects(), c = [];
       for (let p = 0; p < a.length; p++) {
         const d = a[p], u = document.createElement("div");
         Object.assign(u.style, {
@@ -5887,12 +5915,12 @@ class hs {
     }
   }
 }
-var ps = Object.defineProperty, us = Object.getOwnPropertyDescriptor, Ve = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? us(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ps(e, t, n), n;
+var ps = Object.defineProperty, us = Object.getOwnPropertyDescriptor, qe = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? us(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && ps(e, t, s), s;
 };
-let he = class extends S {
+let he = class extends T {
   constructor() {
     super(...arguments), this.roomId = "";
   }
@@ -5901,8 +5929,8 @@ let he = class extends S {
       new CustomEvent("panel-close", { bubbles: !0, composed: !0 })
     );
   }
-  toggle(s) {
-    const e = { ...this.settings, [s]: !this.settings[s] };
+  toggle(n) {
+    const e = { ...this.settings, [n]: !this.settings[n] };
     this.dispatchEvent(
       new CustomEvent("settings-change", {
         detail: e,
@@ -5911,10 +5939,10 @@ let he = class extends S {
       })
     );
   }
-  renderToggle(s, e) {
+  renderToggle(n, e) {
     return h`
       <div class="setting-row">
-        <span class="setting-label">${s}</span>
+        <span class="setting-label">${n}</span>
         <label class="toggle">
           <input
             type="checkbox"
@@ -5927,13 +5955,13 @@ let he = class extends S {
     `;
   }
   render() {
-    const s = !this.settings.enabled;
+    const n = !this.settings.enabled;
     return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Settings</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${E(me, 16)}
+            ${k(me, 16)}
           </button>
         </div>
 
@@ -5952,7 +5980,7 @@ let he = class extends S {
           </label>
         </div>
 
-        <div class="panel-body pw-scrollable ${s ? "settings-disabled" : ""}">
+        <div class="panel-body pw-scrollable ${n ? "settings-disabled" : ""}">
           <div class="section-label">Cursors</div>
           ${this.renderToggle("Show my cursor to others", "showMyCursor")}
           ${this.renderToggle("Show others' cursors", "showOthersCursors")}
@@ -5982,7 +6010,7 @@ he.styles = [
   ee,
   ge,
   _e,
-  I`
+  A`
       :host {
         display: block;
       }
@@ -6153,13 +6181,13 @@ he.styles = [
       }
     `
 ];
-Ve([
+qe([
   g({ attribute: !1 })
 ], he.prototype, "settings", 2);
-Ve([
+qe([
   g()
 ], he.prototype, "roomId", 2);
-he = Ve([
+he = qe([
   R("pulse-widget-settings-panel")
 ], he);
 const ye = {
@@ -6174,23 +6202,23 @@ const ye = {
   showSelections: !0,
   showDrawings: !0
 }, St = "pulse:settings:";
-function fs(s) {
+function fs(n) {
   try {
-    const e = localStorage.getItem(`${St}${s}`);
+    const e = localStorage.getItem(`${St}${n}`);
     return e ? { ...ye, ...JSON.parse(e) } : { ...ye };
   } catch {
     return { ...ye };
   }
 }
-function ms(s, e) {
-  localStorage.setItem(`${St}${s}`, JSON.stringify(e));
+function ms(n, e) {
+  localStorage.setItem(`${St}${n}`, JSON.stringify(e));
 }
-var gs = Object.defineProperty, bs = Object.getOwnPropertyDescriptor, L = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? bs(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && gs(e, t, n), n;
+var gs = Object.defineProperty, bs = Object.getOwnPropertyDescriptor, L = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? bs(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && gs(e, t, s), s;
 };
-let M = class extends S {
+let M = class extends T {
   constructor() {
     super(...arguments), this.collapsed = !1, this.activePanel = null, this.pinModeActive = !1, this.featuresDisabled = !1, this.drawModeActive = !1, this.followingUserId = null, this.display = "floating", this.users = [], this.unreadCount = 0;
   }
@@ -6198,36 +6226,36 @@ let M = class extends S {
     super.connectedCallback(), this.setupPresence();
   }
   disconnectedCallback() {
-    var s, e;
-    super.disconnectedCallback(), (s = this.unsub) == null || s.call(this), (e = this.notifUnsub) == null || e.call(this);
+    var n, e;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this), (e = this.notifUnsub) == null || e.call(this);
   }
-  updated(s) {
+  updated(n) {
     var e, t;
-    s.has("client") && this.client && ((e = this.unsub) == null || e.call(this), (t = this.notifUnsub) == null || t.call(this), this.setupPresence());
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), (t = this.notifUnsub) == null || t.call(this), this.setupPresence());
   }
   setupPresence() {
-    this.client && (this.users = this.client.state.presence, this.unreadCount = this.client.state.unreadCount, this.unsub = this.client.state.on("presence", (s) => {
-      this.users = s;
+    this.client && (this.users = this.client.state.presence, this.unreadCount = this.client.state.unreadCount, this.unsub = this.client.state.on("presence", (n) => {
+      this.users = n;
     }), this.notifUnsub = this.client.state.on("notifications", () => {
       this.unreadCount = this.client.state.unreadCount;
     }));
   }
-  getInitials(s) {
-    return s.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
+  getInitials(n) {
+    return n.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
   }
-  fire(s) {
+  fire(n) {
     this.dispatchEvent(
       new CustomEvent("toolbar-action", {
-        detail: s,
+        detail: n,
         bubbles: !0,
         composed: !0
       })
     );
   }
-  fireFollow(s) {
+  fireFollow(n) {
     this.dispatchEvent(
       new CustomEvent("toolbar-follow", {
-        detail: s,
+        detail: n,
         bubbles: !0,
         composed: !0
       })
@@ -6239,20 +6267,20 @@ let M = class extends S {
     );
   }
   render() {
-    const s = this.display === "inline";
+    const n = this.display === "inline";
     if (this.collapsed)
       return h`
-        <div class="toolbar collapsed ${s ? "inline" : ""}" @click=${this.fireToggle}>
-          <span class="fab-icon">${E(Ri, s ? 18 : 24)}</span>
+        <div class="toolbar collapsed ${n ? "inline" : ""}" @click=${this.fireToggle}>
+          <span class="fab-icon">${k(Ri, n ? 18 : 24)}</span>
         </div>
       `;
     const e = this.users.slice(0, 3), t = this.users.length - 3;
     return h`
-      <div class="toolbar ${s ? "inline" : ""}"
+      <div class="toolbar ${n ? "inline" : ""}"
         <!-- Presence avatars -->
         ${this.users.length > 0 ? h`
               <div class="presence">
-                ${t > 0 ? h`<div class="presence-overflow">+${t}</div>` : m}
+                ${t > 0 ? h`<div class="presence-overflow">+${t}</div>` : f}
                 ${e.map(
       (i) => h`
                     <div
@@ -6263,13 +6291,13 @@ let M = class extends S {
                     >
                       ${i.user.avatar ? h`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
                       <span class="presence-tooltip">${i.user.name}</span>
-                      ${i.deviceType && i.deviceType !== "desktop" ? h`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : m}
+                      ${i.deviceType && i.deviceType !== "desktop" ? h`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : f}
                     </div>
                   `
     )}
               </div>
               <div class="separator"></div>
-            ` : m}
+            ` : f}
 
         <!-- Pin comment (primary) -->
         <button
@@ -6279,7 +6307,7 @@ let M = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${E(_t)}
+          ${k(_t)}
         </button>
 
         <!-- View comments -->
@@ -6290,7 +6318,7 @@ let M = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${E(_i)}
+          ${k(_i)}
         </button>
 
         <!-- Activity feed -->
@@ -6301,7 +6329,7 @@ let M = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${E(Ci)}
+          ${k(Ci)}
         </button>
 
         <!-- Draw mode -->
@@ -6312,7 +6340,7 @@ let M = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${E(Pi)}
+          ${k(Pi)}
         </button>
 
         <!-- Notifications -->
@@ -6323,8 +6351,8 @@ let M = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : "position:relative"}"
         >
-          ${E(Ei)}
-          ${this.unreadCount > 0 ? h`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : m}
+          ${k(Ei)}
+          ${this.unreadCount > 0 ? h`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : f}
         </button>
 
         <!-- Settings -->
@@ -6333,7 +6361,7 @@ let M = class extends S {
           @click=${() => this.fire("settings")}
           title="Settings"
         >
-          ${E(Ii)}
+          ${k(Ii)}
         </button>
 
         <div class="separator"></div>
@@ -6344,7 +6372,7 @@ let M = class extends S {
           @click=${this.fireToggle}
           title="Collapse"
         >
-          ${E(me, 14)}
+          ${k(me, 14)}
         </button>
       </div>
     `;
@@ -6353,7 +6381,7 @@ let M = class extends S {
 M.styles = [
   ee,
   ge,
-  I`
+  A`
       :host {
         display: block;
       }
@@ -6636,26 +6664,26 @@ class vs {
       this.pillEls.clear();
       return;
     }
-    const e = window.scrollY, t = window.innerHeight, i = document.documentElement.scrollHeight, n = (r = this.client.state.user) == null ? void 0 : r.id, o = /* @__PURE__ */ new Set();
+    const e = window.scrollY, t = window.innerHeight, i = document.documentElement.scrollHeight, s = (r = this.client.state.user) == null ? void 0 : r.id, o = /* @__PURE__ */ new Set();
     for (const [l, a] of this.client.state.viewports) {
-      if (l === n) continue;
+      if (l === s) continue;
       const c = a.scrollY, p = a.scrollY + a.viewportHeight, d = e, u = e + t;
       if (c >= d && p <= u) {
-        const k = this.pillEls.get(l);
-        k && (k.style.display = "none");
+        const $ = this.pillEls.get(l);
+        $ && ($.style.display = "none");
         continue;
       }
       o.add(l);
-      const f = this.client.state.presence.find(
-        (k) => k.user.id === l
+      const m = this.client.state.presence.find(
+        ($) => $.user.id === l
       );
-      if (!f) continue;
-      const b = a.scrollY + a.viewportHeight / 2, x = i > 0 ? b / i : 0, _ = Math.max(
+      if (!m) continue;
+      const b = a.scrollY + a.viewportHeight / 2, I = i > 0 ? b / i : 0, C = Math.max(
         8,
-        Math.min(t - 28, x * t)
+        Math.min(t - 28, I * t)
       );
-      let $ = this.pillEls.get(l);
-      $ || ($ = document.createElement("div"), Object.assign($.style, {
+      let w = this.pillEls.get(l);
+      w || (w = document.createElement("div"), Object.assign(w.style, {
         position: "absolute",
         right: "8px",
         padding: "2px 6px",
@@ -6667,7 +6695,7 @@ class vs {
         whiteSpace: "nowrap",
         pointerEvents: "none",
         transition: "top 0.3s ease"
-      }), this.container.appendChild($), this.pillEls.set(l, $)), $.style.display = "", $.style.background = f.user.color, $.style.top = `${_}px`, $.textContent = this.getInitials(f.user.name);
+      }), this.container.appendChild(w), this.pillEls.set(l, w)), w.style.display = "", w.style.background = m.user.color, w.style.top = `${C}px`, w.textContent = this.getInitials(m.user.name);
     }
     for (const [l, a] of this.pillEls)
       !o.has(l) && !this.client.state.viewports.has(l) && (a.remove(), this.pillEls.delete(l));
@@ -6676,17 +6704,17 @@ class vs {
     return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
   }
 }
-var xs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, P = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ys(e, t) : e, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && xs(e, t, n), n;
+var xs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, S = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? ys(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+    (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && xs(e, t, s), s;
 };
-let C = class extends S {
+let E = class extends T {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "", this.position = "bottom-right", this.display = "floating", this.collapsed = !0, this.activePanel = null, this.pinModeActive = !1, this.highlightThreadId = null, this.settings = { ...ye }, this.followingUserId = null, this.drawModeActive = !1, this.connectionState = "disconnected", this.showConnectedFlash = !1, this.unsubs = [], this.clientConfigKey = "", this._isFollowScrolling = !1, this._viewportThrottleTimer = null, this._selectionThrottleTimer = null, this._connectedFlashTimer = null, this._wasDisconnected = !1, this.handleScroll = () => {
       !this.settings.enabled || !this.client || this._isFollowScrolling || (this.followingUserId && (this.followingUserId = null), !this._viewportThrottleTimer && (this._viewportThrottleTimer = setTimeout(() => {
-        var s;
-        this._viewportThrottleTimer = null, (s = this.client) == null || s.updateViewport({
+        var n;
+        this._viewportThrottleTimer = null, (n = this.client) == null || n.updateViewport({
           scrollX: window.scrollX,
           scrollY: window.scrollY,
           viewportWidth: window.innerWidth,
@@ -6699,25 +6727,25 @@ let C = class extends S {
       !this.settings.enabled || !this.settings.showSelections || !this.client || this._selectionThrottleTimer || (this._selectionThrottleTimer = setTimeout(() => {
         var t, i;
         this._selectionThrottleTimer = null;
-        const s = window.getSelection();
-        if (!s || s.isCollapsed) {
+        const n = window.getSelection();
+        if (!n || n.isCollapsed) {
           (t = this.client) == null || t.updateSelection(null);
           return;
         }
-        const e = cs(s);
+        const e = cs(n);
         (i = this.client) == null || i.updateSelection(e);
       }, 500));
-    }, this.handleDocumentClick = (s) => {
+    }, this.handleDocumentClick = (n) => {
       var e;
-      this.settings.enabled && this.settings.showMyClicks && (this.contains(s.target) || (e = this.client) == null || e.performClick({
-        x: s.clientX,
-        y: s.clientY,
-        pageX: s.pageX,
-        pageY: s.pageY
+      this.settings.enabled && this.settings.showMyClicks && (this.contains(n.target) || (e = this.client) == null || e.performClick({
+        x: n.clientX,
+        y: n.clientY,
+        pageX: n.pageX,
+        pageY: n.pageY
       }));
-    }, this.handleKeydown = (s) => {
+    }, this.handleKeydown = (n) => {
       var e, t;
-      s.key === "Escape" && (this.drawModeActive ? ((e = this.drawingOverlay) == null || e.disableDrawMode(), this.drawModeActive = !1) : this.followingUserId ? this.followingUserId = null : this.pinModeActive ? ((t = this.commentPins) == null || t.exitPinMode(), this.pinModeActive = !1) : this.activePanel && (this.activePanel = null, this.highlightThreadId = null));
+      n.key === "Escape" && (this.drawModeActive ? ((e = this.drawingOverlay) == null || e.disableDrawMode(), this.drawModeActive = !1) : this.followingUserId ? this.followingUserId = null : this.pinModeActive ? ((t = this.commentPins) == null || t.exitPinMode(), this.pinModeActive = !1) : this.activePanel && (this.activePanel = null, this.highlightThreadId = null));
     };
   }
   connectedCallback() {
@@ -6730,13 +6758,13 @@ let C = class extends S {
     return `${this.apiKey}\0${this.token}\0${this.room}\0${this.endpoint ?? ""}`;
   }
   initClient() {
-    const s = {
+    const n = {
       apiKey: this.apiKey,
       token: this.token,
       room: this.room,
       endpoint: this.endpoint
     };
-    this.client = new xt(s), this.clientConfigKey = this.getConfigKey(), this.cursorOverlay = new as(this.client), this.commentPins = new Ji(this.client, {
+    this.client = new xt(n), this.clientConfigKey = this.getConfigKey(), this.cursorOverlay = new as(this.client), this.commentPins = new Ji(this.client, {
       onPinModeExit: () => {
         this.pinModeActive = !1;
       }
@@ -6770,15 +6798,15 @@ let C = class extends S {
     ), window.addEventListener("scroll", this.handleScroll), document.addEventListener("selectionchange", this.handleSelectionChange), this.client.connect();
   }
   teardownClient() {
-    var s, e, t, i, n, o;
-    this.unsubs.forEach((r) => r()), this.unsubs = [], window.removeEventListener("scroll", this.handleScroll), document.removeEventListener("selectionchange", this.handleSelectionChange), this._viewportThrottleTimer && (clearTimeout(this._viewportThrottleTimer), this._viewportThrottleTimer = null), this._selectionThrottleTimer && (clearTimeout(this._selectionThrottleTimer), this._selectionThrottleTimer = null), (s = this.cursorOverlay) == null || s.destroy(), (e = this.commentPins) == null || e.destroy(), (t = this.viewportOverlay) == null || t.destroy(), (i = this.selectionOverlay) == null || i.destroy(), (n = this.drawingOverlay) == null || n.destroy(), (o = this.client) == null || o.disconnect(), this.client = void 0, this.cursorOverlay = void 0, this.commentPins = void 0, this.viewportOverlay = void 0, this.selectionOverlay = void 0, this.drawingOverlay = void 0, this.clientConfigKey = "", this.followingUserId = null, this.drawModeActive = !1, this.connectionState = "disconnected", this.showConnectedFlash = !1, this._wasDisconnected = !1, this._connectedFlashTimer && (clearTimeout(this._connectedFlashTimer), this._connectedFlashTimer = null);
+    var n, e, t, i, s, o;
+    this.unsubs.forEach((r) => r()), this.unsubs = [], window.removeEventListener("scroll", this.handleScroll), document.removeEventListener("selectionchange", this.handleSelectionChange), this._viewportThrottleTimer && (clearTimeout(this._viewportThrottleTimer), this._viewportThrottleTimer = null), this._selectionThrottleTimer && (clearTimeout(this._selectionThrottleTimer), this._selectionThrottleTimer = null), (n = this.cursorOverlay) == null || n.destroy(), (e = this.commentPins) == null || e.destroy(), (t = this.viewportOverlay) == null || t.destroy(), (i = this.selectionOverlay) == null || i.destroy(), (s = this.drawingOverlay) == null || s.destroy(), (o = this.client) == null || o.disconnect(), this.client = void 0, this.cursorOverlay = void 0, this.commentPins = void 0, this.viewportOverlay = void 0, this.selectionOverlay = void 0, this.drawingOverlay = void 0, this.clientConfigKey = "", this.followingUserId = null, this.drawModeActive = !1, this.connectionState = "disconnected", this.showConnectedFlash = !1, this._wasDisconnected = !1, this._connectedFlashTimer && (clearTimeout(this._connectedFlashTimer), this._connectedFlashTimer = null);
   }
   handlePanelClose() {
     this.activePanel = null, this.highlightThreadId = null;
   }
-  handleToolbarAction(s) {
-    var t, i, n, o;
-    const e = s.detail;
+  handleToolbarAction(n) {
+    var t, i, s, o;
+    const e = n.detail;
     if (!(!this.settings.enabled && e !== "settings"))
       switch (e) {
         case "comments":
@@ -6797,70 +6825,70 @@ let C = class extends S {
           this.pinModeActive = !this.pinModeActive, this.pinModeActive ? (t = this.commentPins) == null || t.enterPinMode() : (i = this.commentPins) == null || i.exitPinMode();
           break;
         case "draw-mode":
-          this.drawModeActive = !this.drawModeActive, this.drawModeActive ? (n = this.drawingOverlay) == null || n.enableDrawMode() : (o = this.drawingOverlay) == null || o.disableDrawMode();
+          this.drawModeActive = !this.drawModeActive, this.drawModeActive ? (s = this.drawingOverlay) == null || s.enableDrawMode() : (o = this.drawingOverlay) == null || o.disableDrawMode();
           break;
       }
   }
-  handleFollow(s) {
-    const e = s.detail;
+  handleFollow(n) {
+    const e = n.detail;
     this.followingUserId === e ? this.followingUserId = null : this.followingUserId = e;
   }
-  handleSettingsChange(s) {
-    const e = s.detail;
+  handleSettingsChange(n) {
+    const e = n.detail;
     this.settings = e, ms(this.room, e), this.applySettings(e);
   }
-  applySettings(s) {
-    var e, t, i, n, o, r, l, a, c, p, d, u, f, b, x, _, $;
-    if (!s.enabled) {
-      (e = this.cursorOverlay) == null || e.disable(), (t = this.viewportOverlay) == null || t.disable(), (i = this.selectionOverlay) == null || i.disable(), (n = this.drawingOverlay) == null || n.disable(), this.drawModeActive && ((o = this.drawingOverlay) == null || o.disableDrawMode(), this.drawModeActive = !1), (r = this.client) == null || r.setAppearOffline(!0), (l = this.commentPins) == null || l.setVisible(!1), this.followingUserId = null, this.pinModeActive && ((a = this.commentPins) == null || a.exitPinMode(), this.pinModeActive = !1), this.activePanel = this.activePanel === "settings" ? "settings" : null, this.highlightThreadId = null;
+  applySettings(n) {
+    var e, t, i, s, o, r, l, a, c, p, d, u, m, b, I, C, w;
+    if (!n.enabled) {
+      (e = this.cursorOverlay) == null || e.disable(), (t = this.viewportOverlay) == null || t.disable(), (i = this.selectionOverlay) == null || i.disable(), (s = this.drawingOverlay) == null || s.disable(), this.drawModeActive && ((o = this.drawingOverlay) == null || o.disableDrawMode(), this.drawModeActive = !1), (r = this.client) == null || r.setAppearOffline(!0), (l = this.commentPins) == null || l.setVisible(!1), this.followingUserId = null, this.pinModeActive && ((a = this.commentPins) == null || a.exitPinMode(), this.pinModeActive = !1), this.activePanel = this.activePanel === "settings" ? "settings" : null, this.highlightThreadId = null;
       return;
     }
-    this.applyCursorSettings(s), (c = this.client) == null || c.setAppearOffline(s.appearOffline), (p = this.commentPins) == null || p.setVisible(s.showCommentPins), s.showViewportIndicators ? (d = this.viewportOverlay) == null || d.enable() : (u = this.viewportOverlay) == null || u.disable(), s.showSelections ? (f = this.selectionOverlay) == null || f.enable() : (b = this.selectionOverlay) == null || b.disable(), s.showDrawings ? (x = this.drawingOverlay) == null || x.enable() : ((_ = this.drawingOverlay) == null || _.disable(), this.drawModeActive && (($ = this.drawingOverlay) == null || $.disableDrawMode(), this.drawModeActive = !1));
+    this.applyCursorSettings(n), (c = this.client) == null || c.setAppearOffline(n.appearOffline), (p = this.commentPins) == null || p.setVisible(n.showCommentPins), n.showViewportIndicators ? (d = this.viewportOverlay) == null || d.enable() : (u = this.viewportOverlay) == null || u.disable(), n.showSelections ? (m = this.selectionOverlay) == null || m.enable() : (b = this.selectionOverlay) == null || b.disable(), n.showDrawings ? (I = this.drawingOverlay) == null || I.enable() : ((C = this.drawingOverlay) == null || C.disable(), this.drawModeActive && ((w = this.drawingOverlay) == null || w.disableDrawMode(), this.drawModeActive = !1));
   }
-  applyCursorSettings(s) {
+  applyCursorSettings(n) {
     if (!this.cursorOverlay) return;
-    s.showMyCursor || s.showOthersCursors ? (this.cursorOverlay.enable(), this.cursorOverlay.setSending(s.showMyCursor), this.cursorOverlay.setReceiving(s.showOthersCursors)) : this.cursorOverlay.disable();
+    n.showMyCursor || n.showOthersCursors ? (this.cursorOverlay.enable(), this.cursorOverlay.setSending(n.showMyCursor), this.cursorOverlay.setReceiving(n.showOthersCursors)) : this.cursorOverlay.disable();
   }
-  updated(s) {
-    (s.has("room") || s.has("token") || s.has("apiKey") || s.has("endpoint")) && this.apiKey && this.token && this.room && this.getConfigKey() !== this.clientConfigKey && (this.teardownClient(), this.initClient(), this.activePanel = null, this.highlightThreadId = null, this.pinModeActive = !1), (s.has("activePanel") || s.has("collapsed")) && requestAnimationFrame(() => this.positionPopups());
+  updated(n) {
+    (n.has("room") || n.has("token") || n.has("apiKey") || n.has("endpoint")) && this.apiKey && this.token && this.room && this.getConfigKey() !== this.clientConfigKey && (this.teardownClient(), this.initClient(), this.activePanel = null, this.highlightThreadId = null, this.pinModeActive = !1), (n.has("activePanel") || n.has("collapsed")) && requestAnimationFrame(() => this.positionPopups());
   }
   /**
    * Smart-position all fixed popups (toolbar popover + panel) relative to
    * the trigger element, flipping vertically/horizontally as needed.
    */
   positionPopups() {
-    var b, x, _, $;
-    const s = this.display === "inline", e = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".inline-trigger"), t = (x = this.shadowRoot) == null ? void 0 : x.querySelector("pulse-widget-toolbar"), i = s ? e : t;
+    var b, I, C, w;
+    const n = this.display === "inline", e = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".inline-trigger"), t = (I = this.shadowRoot) == null ? void 0 : I.querySelector("pulse-widget-toolbar"), i = n ? e : t;
     if (!i) return;
-    const n = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, l = 8, a = (_ = this.shadowRoot) == null ? void 0 : _.querySelector(".toolbar-popover");
+    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, l = 8, a = (C = this.shadowRoot) == null ? void 0 : C.querySelector(".toolbar-popover");
     if (a) {
       Object.assign(a.style, { top: "auto", left: "auto" });
-      const k = a.getBoundingClientRect(), A = this.computePosition(n, k, o, r, l);
-      a.style.top = `${A.top}px`, a.style.left = `${A.left}px`;
+      const $ = a.getBoundingClientRect(), P = this.computePosition(s, $, o, r, l);
+      a.style.top = `${P.top}px`, a.style.left = `${P.left}px`;
     }
-    const c = ($ = this.shadowRoot) == null ? void 0 : $.querySelector(".panel-container");
+    const c = (w = this.shadowRoot) == null ? void 0 : w.querySelector(".panel-container");
     if (!c) return;
     Object.assign(c.style, { top: "auto", left: "auto" });
     const p = a ?? t;
     if (!p) return;
-    const d = p.getBoundingClientRect(), u = c.getBoundingClientRect(), f = this.computePosition(d, u, o, r, l);
-    c.style.top = `${f.top}px`, c.style.left = `${f.left}px`;
+    const d = p.getBoundingClientRect(), u = c.getBoundingClientRect(), m = this.computePosition(d, u, o, r, l);
+    c.style.top = `${m.top}px`, c.style.left = `${m.left}px`;
   }
-  computePosition(s, e, t, i, n) {
-    const o = s.top, r = i - s.bottom;
+  computePosition(n, e, t, i, s) {
+    const o = n.top, r = i - n.bottom;
     let l;
-    o >= e.height + n ? l = s.top - e.height - n : r >= e.height + n ? l = s.bottom + n : l = o >= r ? Math.max(n, s.top - e.height - n) : s.bottom + n;
+    o >= e.height + s ? l = n.top - e.height - s : r >= e.height + s ? l = n.bottom + s : l = o >= r ? Math.max(s, n.top - e.height - s) : n.bottom + s;
     let a;
-    const c = s.right - e.width;
-    return c >= n ? a = c : s.left + e.width + n <= t ? a = s.left : a = Math.max(n, Math.min(t - e.width - n, s.left)), l = Math.max(n, Math.min(i - e.height - n, l)), a = Math.max(n, Math.min(t - e.width - n, a)), { top: l, left: a };
+    const c = n.right - e.width;
+    return c >= s ? a = c : n.left + e.width + s <= t ? a = n.left : a = Math.max(s, Math.min(t - e.width - s, n.left)), l = Math.max(s, Math.min(i - e.height - s, l)), a = Math.max(s, Math.min(t - e.width - s, a)), { top: l, left: a };
   }
   getFollowUserName() {
     var e;
     if (!this.followingUserId) return "";
-    const s = (e = this.client) == null ? void 0 : e.state.presence.find(
+    const n = (e = this.client) == null ? void 0 : e.state.presence.find(
       (t) => t.user.id === this.followingUserId
     );
-    return (s == null ? void 0 : s.user.name) ?? "user";
+    return (n == null ? void 0 : n.user.name) ?? "user";
   }
   renderConnectionBanner() {
     return this.showConnectedFlash ? h`<div class="connection-banner connected">
@@ -6869,14 +6897,14 @@ let C = class extends S {
         <span class="connection-dot"></span>Reconnecting...
       </div>` : this.connectionState === "disconnected" && this.client ? h`<div class="connection-banner disconnected">
         <span class="connection-dot"></span>Disconnected
-      </div>` : m;
+      </div>` : f;
   }
   handleToolbarToggle() {
     this.collapsed = !this.collapsed, this.collapsed && (this.activePanel = null, this.highlightThreadId = null);
   }
   render() {
-    const s = this.display === "inline";
-    if (s && this.collapsed)
+    const n = this.display === "inline";
+    if (n && this.collapsed)
       return h`
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
@@ -6889,26 +6917,26 @@ let C = class extends S {
             ${this.activePanel === "comments" ? h`<pulse-widget-comments-panel
                   .client=${this.client}
                   .highlightThreadId=${this.highlightThreadId}
-                ></pulse-widget-comments-panel>` : m}
+                ></pulse-widget-comments-panel>` : f}
             ${this.activePanel === "settings" ? h`<pulse-widget-settings-panel
                   .settings=${this.settings}
                   .roomId=${this.room}
                   @settings-change=${this.handleSettingsChange}
-                ></pulse-widget-settings-panel>` : m}
+                ></pulse-widget-settings-panel>` : f}
             ${this.activePanel === "notifications" ? h`<pulse-widget-notifications-panel
                   .client=${this.client}
-                ></pulse-widget-notifications-panel>` : m}
+                ></pulse-widget-notifications-panel>` : f}
             ${this.activePanel === "activity" ? h`<pulse-widget-activity-panel
                   .client=${this.client}
-                ></pulse-widget-activity-panel>` : m}
+                ></pulse-widget-activity-panel>` : f}
           </div>
-        ` : m, t = this.followingUserId ? h`<div class="follow-banner">
+        ` : f, t = this.followingUserId ? h`<div class="follow-banner">
           Following ${this.getFollowUserName()}
           <button @click=${() => {
       this.followingUserId = null;
     }}>Stop</button>
-        </div>` : m;
-    return s ? h`
+        </div>` : f;
+    return n ? h`
         ${t}
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
@@ -6954,9 +6982,9 @@ let C = class extends S {
     `;
   }
 };
-C.styles = [
+E.styles = [
   ee,
-  I`
+  A`
       :host {
         display: block;
       }
@@ -7132,60 +7160,60 @@ C.styles = [
       }
     `
 ];
-P([
+S([
   g({ attribute: "api-key" })
-], C.prototype, "apiKey", 2);
-P([
+], E.prototype, "apiKey", 2);
+S([
   g()
-], C.prototype, "token", 2);
-P([
+], E.prototype, "token", 2);
+S([
   g()
-], C.prototype, "room", 2);
-P([
+], E.prototype, "room", 2);
+S([
   g()
-], C.prototype, "endpoint", 2);
-P([
+], E.prototype, "endpoint", 2);
+S([
   g({ reflect: !0 })
-], C.prototype, "position", 2);
-P([
+], E.prototype, "position", 2);
+S([
   g({ reflect: !0 })
-], C.prototype, "display", 2);
-P([
+], E.prototype, "display", 2);
+S([
   v()
-], C.prototype, "collapsed", 2);
-P([
+], E.prototype, "collapsed", 2);
+S([
   v()
-], C.prototype, "activePanel", 2);
-P([
+], E.prototype, "activePanel", 2);
+S([
   v()
-], C.prototype, "pinModeActive", 2);
-P([
+], E.prototype, "pinModeActive", 2);
+S([
   v()
-], C.prototype, "highlightThreadId", 2);
-P([
+], E.prototype, "highlightThreadId", 2);
+S([
   v()
-], C.prototype, "settings", 2);
-P([
+], E.prototype, "settings", 2);
+S([
   v()
-], C.prototype, "followingUserId", 2);
-P([
+], E.prototype, "followingUserId", 2);
+S([
   v()
-], C.prototype, "drawModeActive", 2);
-P([
+], E.prototype, "drawModeActive", 2);
+S([
   v()
-], C.prototype, "connectionState", 2);
-P([
+], E.prototype, "connectionState", 2);
+S([
   v()
-], C.prototype, "showConnectedFlash", 2);
-C = P([
+], E.prototype, "showConnectedFlash", 2);
+E = S([
   R("pulse-widget")
-], C);
+], E);
 export {
   W as PulseComments,
   le as PulseCursors,
   ce as PulseNotifications,
   G as PulsePresence,
-  V as PulseProvider,
+  q as PulseProvider,
   D as PulseReactions,
-  C as PulseWidget
+  E as PulseWidget
 };