@gamention/pulse-elements 0.1.16 → 0.1.18

package/dist/pulse-elements.js

@@ -245,6 +245,18 @@ let De = class {
   get unreadCount() {
     return this._notifications.filter((e) => !e.read).length;
   }
+  /** Optimistically mark a single notification as read. */
+  markNotificationRead(e) {
+    const t = this._notifications.find((i) => i.id === e);
+    t && !t.read && (t.read = !0, this.emit("notifications", this._notifications));
+  }
+  /** Optimistically mark all notifications as read. */
+  markAllNotificationsRead() {
+    let e = !1;
+    for (const t of this._notifications)
+      t.read || (t.read = !0, e = !0);
+    e && this.emit("notifications", this._notifications);
+  }
   get activityLogs() {
     return this._activityLogs;
   }
@@ -514,10 +526,10 @@ let De = class {
   }
   // ── Notifications ──
   markRead(e) {
-    this.send({ type: "notification:read", notificationId: e });
+    this.state.markNotificationRead(e), this.send({ type: "notification:read", notificationId: e });
   }
   markAllRead() {
-    this.send({ type: "notification:read-all" });
+    this.state.markAllNotificationsRead(), this.send({ type: "notification:read-all" });
   }
   // ── Clicks ──
   performClick(e) {
@@ -575,10 +587,10 @@ let De = class {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ye = globalThis, He = ye.ShadowRoot && (ye.ShadyCSS === void 0 || ye.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Be = Symbol(), Je = /* @__PURE__ */ new WeakMap();
+const ye = globalThis, He = ye.ShadowRoot && (ye.ShadyCSS === void 0 || ye.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ne = Symbol(), Je = /* @__PURE__ */ new WeakMap();
 let kt = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== Be) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== Ne) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
@@ -594,14 +606,14 @@ let kt = class {
     return this.cssText;
   }
 };
-const Bt = (n) => new kt(typeof n == "string" ? n : n + "", void 0, Be), M = (n, ...e) => {
+const Nt = (n) => new kt(typeof n == "string" ? n : n + "", void 0, Ne), M = (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.");
   })(s) + n[o + 1], n[0]);
-  return new kt(t, n, Be);
-}, Nt = (n, e) => {
+  return new kt(t, n, Ne);
+}, Bt = (n, e) => {
   if (He) n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const i = document.createElement("style"), s = ye.litNonce;
@@ -610,7 +622,7 @@ const Bt = (n) => new kt(typeof n == "string" ? n : n + "", void 0, Be), M = (n,
 }, Ze = He ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
-  return Bt(t);
+  return Nt(t);
 })(n) : n;
 /**
  * @license
@@ -645,7 +657,7 @@ const { is: Ft, defineProperty: qt, getOwnPropertyDescriptor: Vt, getOwnProperty
       }
   }
   return t;
-} }, Ne = (n, e) => !Ft(n, e), et = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Ne };
+} }, Be = (n, e) => !Ft(n, e), et = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Be };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), H.litPropertyMetadata ?? (H.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let G = class extends HTMLElement {
   static addInitializer(e) {
@@ -731,7 +743,7 @@ let G = class extends HTMLElement {
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Nt(e, this.constructor.elementStyles), e;
+    return Bt(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     var e;
@@ -774,7 +786,7 @@ let G = class extends HTMLElement {
     var r;
     if (e !== void 0) {
       const a = this.constructor;
-      if (s === !1 && (o = this[e]), i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? Ne)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(a._$Eu(e, i)))) return;
+      if (s === !1 && (o = this[e]), i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? Be)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(a._$Eu(e, i)))) return;
       this.C(e, t, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -857,9 +869,9 @@ G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[ne("elementPrope
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const oe = globalThis, tt = (n) => n, Ee = oe.trustedTypes, it = Ee ? Ee.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, Et = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, Ct = "?" + D, Gt = `<${Ct}>`, V = document, ae = () => V.createComment(""), le = (n) => n === null || typeof n != "object" && typeof n != "function", Fe = Array.isArray, Jt = (n) => Fe(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Ie = `[ 	
-\f\r]`, se = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, st = /-->/g, nt = />/g, N = RegExp(`>|${Ie}(?:([^\\s"'>=/]+)(${Ie}*=${Ie}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ot = /'/g, rt = /"/g, Tt = /^(?:script|style|textarea|title)$/i, St = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), u = St(1), Zt = St(2), W = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
-function Pt(n, e) {
+\f\r]`, se = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, st = /-->/g, nt = />/g, B = RegExp(`>|${Ie}(?:([^\\s"'>=/]+)(${Ie}*=${Ie}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ot = /'/g, rt = /"/g, Tt = /^(?:script|style|textarea|title)$/i, St = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), u = St(1), Zt = St(2), W = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
+function At(n, e) {
   if (!Fe(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return it !== void 0 ? it.createHTML(e) : e;
 }
@@ -869,11 +881,11 @@ const Qt = (n, e) => {
   for (let a = 0; a < t; a++) {
     const l = n[a];
     let d, c, h = -1, p = 0;
-    for (; p < l.length && (r.lastIndex = p, c = r.exec(l), c !== null); ) p = r.lastIndex, r === se ? c[1] === "!--" ? r = st : c[1] !== void 0 ? r = nt : c[2] !== void 0 ? (Tt.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = N) : c[3] !== void 0 && (r = N) : r === N ? c[0] === ">" ? (r = s ?? se, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, d = c[1], r = c[3] === void 0 ? N : c[3] === '"' ? rt : ot) : r === rt || r === ot ? r = N : r === st || r === nt ? r = se : (r = N, s = void 0);
-    const m = r === N && n[a + 1].startsWith("/>") ? " " : "";
+    for (; p < l.length && (r.lastIndex = p, c = r.exec(l), c !== null); ) p = r.lastIndex, r === se ? c[1] === "!--" ? r = st : c[1] !== void 0 ? r = nt : c[2] !== void 0 ? (Tt.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = B) : c[3] !== void 0 && (r = B) : r === B ? c[0] === ">" ? (r = s ?? se, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, d = c[1], r = c[3] === void 0 ? B : c[3] === '"' ? rt : ot) : r === rt || r === ot ? r = B : r === st || r === nt ? r = se : (r = B, s = void 0);
+    const m = r === B && n[a + 1].startsWith("/>") ? " " : "";
     o += r === se ? l + Gt : h >= 0 ? (i.push(d), l.slice(0, h) + Et + l.slice(h) + D + m) : l + D + (h === -2 ? a : m);
   }
-  return [Pt(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+  return [At(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
 class ce {
   constructor({ strings: e, _$litType$: t }, i) {
@@ -953,7 +965,7 @@ class me {
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   constructor(e, t, i, s) {
-    this.type = 2, this._$AH = b, 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;
+    this.type = 2, this._$AH = v, 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;
@@ -967,7 +979,7 @@ class me {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = J(this, e, t), le(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== W && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Jt(e) ? this.k(e) : this._(e);
+    e = J(this, e, t), le(e) ? e === v || e == null || e === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : e !== this._$AH && e !== W && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Jt(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -976,11 +988,11 @@ class me {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== b && le(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
+    this._$AH !== v && le(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
-    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ce.createElement(Pt(i.h, i.h[0]), this.options)), i);
+    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ce.createElement(At(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 ei(s, this), a = r.u(this.options);
@@ -1018,7 +1030,7 @@ class Se {
     return this._$AM._$AU;
   }
   constructor(e, t, i, s, o) {
-    this.type = 1, this._$AH = b, 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 = b;
+    this.type = 1, this._$AH = v, 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 = v;
   }
   _$AI(e, t = this, i, s) {
     const o = this.strings;
@@ -1027,12 +1039,12 @@ class Se {
     else {
       const a = e;
       let l, d;
-      for (e = o[0], l = 0; l < o.length - 1; l++) d = J(this, a[i + l], t, l), d === W && (d = this._$AH[l]), r || (r = !le(d) || d !== this._$AH[l]), d === b ? e = b : e !== b && (e += (d ?? "") + o[l + 1]), this._$AH[l] = d;
+      for (e = o[0], l = 0; l < o.length - 1; l++) d = J(this, a[i + l], t, l), d === W && (d = this._$AH[l]), r || (r = !le(d) || d !== this._$AH[l]), d === v ? e = v : e !== v && (e += (d ?? "") + o[l + 1]), this._$AH[l] = d;
     }
     r && !s && this.j(e);
   }
   j(e) {
-    e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === v ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class ti extends Se {
@@ -1040,7 +1052,7 @@ class ti extends Se {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === b ? void 0 : e;
+    this.element[this.name] = e === v ? void 0 : e;
   }
 }
 class ii extends Se {
@@ -1048,7 +1060,7 @@ class ii extends Se {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== b);
+    this.element.toggleAttribute(this.name, !!e && e !== v);
   }
 }
 class si extends Se {
@@ -1056,8 +1068,8 @@ class si extends Se {
     super(e, t, i, s, o), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = J(this, e, t, 0) ?? b) === W) return;
-    const i = this._$AH, s = e === b && i !== b || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== b && (i === b || s);
+    if ((e = J(this, e, t, 0) ?? v) === W) return;
+    const i = this._$AH, s = e === v && i !== v || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== v && (i === v || s);
     s && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -1093,7 +1105,7 @@ const oi = (n, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const q = globalThis;
-let P = class extends G {
+let A = class extends G {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1119,9 +1131,9 @@ let P = class extends G {
   }
 };
 var yt;
-P._$litElement$ = !0, P.finalized = !0, (yt = q.litElementHydrateSupport) == null || yt.call(q, { LitElement: P });
+A._$litElement$ = !0, A.finalized = !0, (yt = q.litElementHydrateSupport) == null || yt.call(q, { LitElement: A });
 const Oe = q.litElementPolyfillSupport;
-Oe == null || Oe({ LitElement: P });
+Oe == null || Oe({ LitElement: A });
 (q.litElementVersions ?? (q.litElementVersions = [])).push("4.2.2");
 /**
  * @license
@@ -1138,7 +1150,7 @@ const L = (n) => (e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ri = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Ne }, ai = (n = ri, e, t) => {
+const ri = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Be }, ai = (n = ri, 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") {
@@ -1179,7 +1191,7 @@ var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, ee = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && li(e, t, s), s;
 };
-let X = class extends P {
+let X = class extends A {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "";
   }
@@ -1219,12 +1231,12 @@ ee([
 X = ee([
   L("pulse-provider")
 ], X);
-var di = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, Pe = (n, e, t, i) => {
+var di = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, Ae = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? hi(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 && di(e, t, s), s;
 };
-let Z = class extends P {
+let Z = class extends A {
   constructor() {
     super(...arguments), this.maxVisible = 5, this.users = [];
   }
@@ -1372,17 +1384,17 @@ Z.styles = M`
       opacity: 1;
     }
   `;
-Pe([
+Ae([
   fe({ context: Q, subscribe: !0 }),
   x({ attribute: !1 })
 ], Z.prototype, "client", 2);
-Pe([
+Ae([
   x({ type: Number, attribute: "max-visible" })
 ], Z.prototype, "maxVisible", 2);
-Pe([
+Ae([
   $()
 ], Z.prototype, "users", 2);
-Z = Pe([
+Z = Ae([
   L("pulse-presence")
 ], Z);
 var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, qe = (n, e, t, i) => {
@@ -1390,7 +1402,7 @@ var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, qe = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && pi(e, t, s), s;
 };
-let de = class extends P {
+let de = class extends A {
   constructor() {
     super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (n) => {
       var e;
@@ -1519,7 +1531,7 @@ var fi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, ge = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && fi(e, t, s), s;
 };
-let Y = class extends P {
+let Y = class extends A {
   constructor() {
     super(...arguments), this.showResolved = !1, this.threads = [], this.replyingTo = null;
   }
@@ -1588,7 +1600,7 @@ let Y = class extends P {
         ${n.comments.map((e, t) => {
       const i = this.getUserForComment(e.userId);
       return u`
-            ${t > 0 ? u`<div class="divider"></div>` : b}
+            ${t > 0 ? u`<div class="divider"></div>` : v}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -1625,7 +1637,7 @@ let Y = class extends P {
                 <input type="text" placeholder="Write a reply..." />
                 <button type="submit">Send</button>
               </form>
-            ` : b}
+            ` : v}
       </div>
     `;
   }
@@ -1865,12 +1877,12 @@ ge([
 Y = ge([
   L("pulse-comments")
 ], Y);
-var gi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Ve = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? bi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var gi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Ve = (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 && gi(e, t, s), s;
 };
-const vi = {
+const bi = {
   "comment:created": "left a comment",
   "comment:mention": "mentioned you",
   "comment:reply": "replied to your comment",
@@ -1883,7 +1895,7 @@ const vi = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let he = class extends P {
+let he = class extends A {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -1934,11 +1946,11 @@ let he = class extends P {
       <div class="header">
         <span class="title">
           Notifications
-          ${n > 0 ? u`<span class="badge">${n}</span>` : b}
+          ${n > 0 ? u`<span class="badge">${n}</span>` : v}
         </span>
         ${n > 0 ? u`<button class="mark-all" @click=${() => this.client.markAllRead()}>
               Mark all read
-            </button>` : b}
+            </button>` : v}
       </div>
       <div class="list">
         ${this.notifications.length === 0 ? u`<div class="empty">
@@ -1954,7 +1966,7 @@ let he = class extends P {
                   <div class="content">
                     <div class="text">
                       <span class="actor">${this.getActorName(e.actorId)}</span>
-                      ${vi[e.type] ?? e.type}
+                      ${bi[e.type] ?? e.type}
                     </div>
                     <div class="time">${this.formatTime(e.createdAt)}</div>
                   </div>
@@ -2123,7 +2135,7 @@ var yi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, te = (n, e
   return i && s && yi(e, t, s), s;
 };
 const $i = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let B = class extends P {
+let N = class extends A {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
   }
@@ -2192,12 +2204,12 @@ let B = class extends P {
                   `
     )}
               </div>
-            ` : b}
+            ` : v}
       </div>
     `;
   }
 };
-B.styles = M`
+N.styles = M`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2312,22 +2324,22 @@ B.styles = M`
 te([
   fe({ context: Q, subscribe: !0 }),
   x({ attribute: !1 })
-], B.prototype, "client", 2);
+], N.prototype, "client", 2);
 te([
   x({ attribute: "target-id" })
-], B.prototype, "targetId", 2);
+], N.prototype, "targetId", 2);
 te([
   x({ attribute: "target-type" })
-], B.prototype, "targetType", 2);
+], N.prototype, "targetType", 2);
 te([
   $()
-], B.prototype, "reactions", 2);
+], N.prototype, "reactions", 2);
 te([
   $()
-], B.prototype, "showPicker", 2);
-B = te([
+], N.prototype, "showPicker", 2);
+N = te([
   L("pulse-reactions")
-], B);
+], N);
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -2357,10 +2369,10 @@ class Ci {
  */
 class Re extends Ci {
   constructor(e) {
-    if (super(e), this.it = b, e.type !== ki.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = v, e.type !== ki.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === b || e == null) return this._t = void 0, this.it = e;
+    if (e === v || e == null) return this._t = void 0, this.it = e;
     if (e === W) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
@@ -2400,7 +2412,7 @@ const Si = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pi = [
+const Ai = [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["path", { d: "M12 6v6l4 2" }]
 ];
@@ -2410,7 +2422,7 @@ const Pi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ai = [
+const Pi = [
   [
     "path",
     {
@@ -2486,7 +2498,7 @@ const Oi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const At = [
+const Pt = [
   ["path", { d: "M12 17v5" }],
   [
     "path",
@@ -2539,7 +2551,7 @@ const ji = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const be = [
+const ve = [
   ["path", { d: "M18 6 6 18" }],
   ["path", { d: "m6 6 12 12" }]
 ];
@@ -2619,7 +2631,7 @@ const ie = M`
     --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);
   }
-`, ve = M`
+`, be = M`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2663,7 +2675,7 @@ const ie = M`
     width: 18px;
     height: 18px;
   }
-`, Ae = M`
+`, Pe = M`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2680,7 +2692,7 @@ var Di = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, We = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Di(e, t, s), s;
 };
-let K = class extends P {
+let K = class extends A {
   constructor() {
     super(...arguments), this.items = [], this.unsubs = [], this.counter = 0;
   }
@@ -2731,7 +2743,7 @@ let K = class extends P {
         <div class="panel-header">
           <span class="panel-title">Activity</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(be, 16)}
+            ${C(ve, 16)}
           </button>
         </div>
 
@@ -2764,8 +2776,8 @@ let K = class extends P {
 };
 K.styles = [
   ie,
-  ve,
-  Ae,
+  be,
+  Pe,
   M`
       :host {
         display: block;
@@ -2900,7 +2912,7 @@ We([
 K = We([
   L("pulse-widget-activity-panel")
 ], K);
-const Bi = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lt = "#6366f1", ct = "#e2e8f0", Ni = "#f8fafc", Fi = "#e2e8f0", dt = "#64748b", we = 28, qi = Array.from({ length: we }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
+const Ni = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lt = "#6366f1", ct = "#e2e8f0", Bi = "#f8fafc", Fi = "#e2e8f0", dt = "#64748b", we = 28, qi = Array.from({ length: we }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
 function ht(n) {
   const e = Math.max(0, Math.floor(n)), t = Math.floor(e / 60), i = e % 60;
   return `${t}:${i.toString().padStart(2, "0")}`;
@@ -2926,10 +2938,10 @@ class je {
       width: "220px",
       height: "44px",
       padding: "0 10px",
-      background: Ni,
+      background: Bi,
       borderRadius: "12px",
       border: `1px solid ${Fi}`,
-      fontFamily: Bi,
+      fontFamily: Ni,
       fontSize: "11px",
       color: dt,
       userSelect: "none",
@@ -3006,11 +3018,11 @@ class je {
       whiteSpace: "nowrap",
       lineHeight: "1"
     });
-    function v() {
+    function b() {
       const E = ht(o), I = ht(s);
       y.textContent = `${E} / ${I}`;
     }
-    v(), p.appendChild(m), p.appendChild(y), a.appendChild(l), a.appendChild(p);
+    b(), p.appendChild(m), p.appendChild(y), a.appendChild(l), a.appendChild(p);
     function w() {
       const E = s > 0 ? o / s : 0, I = Math.floor(E * we);
       for (let z = 0; z < we; z++)
@@ -3022,7 +3034,7 @@ class je {
         1,
         Math.max(0, (E.clientX - I.left) / I.width)
       );
-      r.currentTime = z * s, o = r.currentTime, w(), v();
+      r.currentTime = z * s, o = r.currentTime, w(), b();
     }), l.addEventListener("click", () => {
       i ? r.pause() : r.play().catch(() => {
       });
@@ -3031,13 +3043,13 @@ class je {
     }), r.addEventListener("pause", () => {
       i = !1, c();
     }), r.addEventListener("ended", () => {
-      i = !1, c(), o = 0, w(), v();
+      i = !1, c(), o = 0, w(), b();
     }), r.addEventListener("timeupdate", () => {
-      o = r.currentTime, w(), v();
+      o = r.currentTime, w(), b();
     }), r.addEventListener("loadedmetadata", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, v());
+      r.duration && isFinite(r.duration) && (s = r.duration, b());
     }), r.addEventListener("durationchange", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, v());
+      r.duration && isFinite(r.duration) && (s = r.duration, b());
     }), a;
   }
 }
@@ -4020,8 +4032,8 @@ class ns {
     const l = this.form.querySelector("textarea"), d = this.form.querySelector(".pulse-close-btn"), c = this.form.querySelector(".pin-submit");
     d.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new re(this.client));
     const h = this.form.querySelector(".pin-attachments-preview"), p = (g, y) => {
-      const v = document.createElement("div");
-      Object.assign(v.style, { position: "relative", display: "inline-block" }), v.appendChild(y);
+      const b = document.createElement("div");
+      Object.assign(b.style, { position: "relative", display: "inline-block" }), b.appendChild(y);
       const w = document.createElement("button");
       w.innerHTML = "×", Object.assign(w.style, {
         position: "absolute",
@@ -4043,17 +4055,17 @@ class ns {
         fontWeight: "700"
       }), w.addEventListener("click", () => {
         const E = this.pendingAttachmentIds.indexOf(g);
-        E !== -1 && this.pendingAttachmentIds.splice(E, 1), v.remove();
-      }), v.appendChild(w), h.appendChild(v);
+        E !== -1 && this.pendingAttachmentIds.splice(E, 1), b.remove();
+      }), b.appendChild(w), h.appendChild(b);
     }, m = 5;
     this.form.querySelector(".attach-img").addEventListener("click", async () => {
       const g = m - this.pendingAttachmentIds.length;
       if (g <= 0) return;
       const y = await this.upload.pickFiles("image/*", g);
-      for (const v of y) {
-        this.pendingAttachmentIds.push(v.id);
+      for (const b of y) {
+        this.pendingAttachmentIds.push(b.id);
         const w = document.createElement("img");
-        w.src = v.thumbnailUrl || v.url, Object.assign(w.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), p(v.id, w);
+        w.src = b.thumbnailUrl || b.url, Object.assign(w.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), p(b.id, w);
       }
     }), this.form.querySelector(".attach-mic").addEventListener("click", async () => {
       if (this.pendingAttachmentIds.length >= m) return;
@@ -4063,8 +4075,8 @@ class ns {
         const y = await this.upload.uploadBlob(g, "audio.webm");
         if (y) {
           this.pendingAttachmentIds.push(y.id);
-          const v = document.createElement("span");
-          Object.assign(v.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), v.textContent = "🎤 Audio", p(y.id, v);
+          const b = document.createElement("span");
+          Object.assign(b.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), b.textContent = "🎤 Audio", p(y.id, b);
         }
       }
     }), this.form.querySelector(".attach-video").addEventListener("click", async () => {
@@ -4075,14 +4087,14 @@ class ns {
         const y = await this.upload.uploadBlob(g.blob, "video.webm");
         if (y) {
           this.pendingAttachmentIds.push(y.id);
-          const v = document.createElement("span");
-          Object.assign(v.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), v.textContent = "🎥 Video", p(y.id, v);
+          const b = document.createElement("span");
+          Object.assign(b.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), b.textContent = "🎥 Video", p(y.id, b);
         }
       }
     }), c.addEventListener("click", () => {
       const g = l.value.trim();
       if (!g && this.pendingAttachmentIds.length === 0) return;
-      const y = [...(g || "").matchAll(/@(\w+)/g)].map((v) => v[1]);
+      const y = [...(g || "").matchAll(/@(\w+)/g)].map((b) => b[1]);
       this.client.createThread(g, { position: i, mentions: y, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
     }), l.addEventListener("keydown", (g) => {
       g.key === "Escape" && this.exitPinMode(), g.stopPropagation();
@@ -4149,7 +4161,7 @@ class ns {
     }
     const i = (d = this.client.state.user) == null ? void 0 : d.id;
     t.innerHTML = e.comments.map((c) => {
-      const h = this.client.state.getUser(c.userId), p = h ? h.name.split(" ").map((O) => O[0]).join("").toUpperCase().slice(0, 2) : "?", m = (h == null ? void 0 : h.color) ?? "#94a3b8", g = this.escapeHtml((h == null ? void 0 : h.name) ?? "Unknown"), y = this.formatTime(c.createdAt), v = i === c.userId, w = c.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
+      const h = this.client.state.getUser(c.userId), p = h ? h.name.split(" ").map((O) => O[0]).join("").toUpperCase().slice(0, 2) : "?", m = (h == null ? void 0 : h.color) ?? "#94a3b8", g = this.escapeHtml((h == null ? void 0 : h.name) ?? "Unknown"), y = this.formatTime(c.createdAt), b = i === c.userId, w = c.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
       if (this.editingPopoverCommentId === c.id)
         return `
             <div style="margin-bottom:10px;" data-comment-id="${c.id}">
@@ -4177,7 +4189,7 @@ class ns {
             </div>`;
         }
         return O.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(O.url)}" data-duration="${O.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : O.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(O.url)}" data-poster="${this.escapeHtml(O.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
-      }).join(""), z = v ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
+      }).join(""), z = b ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
               <button class="edit-btn" data-comment-id="${c.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'">${is}</button>
@@ -4307,8 +4319,8 @@ class ns {
         padding: "0",
         fontWeight: "700"
       }), y.addEventListener("click", () => {
-        const v = l.indexOf(p);
-        v !== -1 && l.splice(v, 1), g.remove();
+        const b = l.indexOf(p);
+        b !== -1 && l.splice(b, 1), g.remove();
       }), g.appendChild(y), a.appendChild(g);
     }, c = 5;
     t.querySelector(".reply-attach-img").addEventListener("click", async () => {
@@ -4510,7 +4522,7 @@ var os = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, U = (n, e,
   return i && s && os(e, t, s), s;
 };
 const as = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let A = class extends P {
+let P = class extends A {
   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 = [];
   }
@@ -4625,14 +4637,14 @@ let A = class extends P {
   }
   async handleAttachImage() {
     this.upload || (this.upload = new re(this.client));
-    const n = A.MAX_ATTACHMENTS - this.replyAttachmentIds.length;
+    const n = P.MAX_ATTACHMENTS - this.replyAttachmentIds.length;
     if (n <= 0) return;
     const e = await this.upload.pickFiles("image/*", n);
     e.length > 0 && (this.replyAttachmentIds.push(...e.map((t) => t.id)), this.requestUpdate());
   }
   async handleRecordAudio(n) {
     var i;
-    if (this.replyAttachmentIds.length >= A.MAX_ATTACHMENTS) return;
+    if (this.replyAttachmentIds.length >= P.MAX_ATTACHMENTS) return;
     this.upload || (this.upload = new re(this.client)), this.audioRecorder || (this.audioRecorder = new ze());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4642,7 +4654,7 @@ let A = class extends P {
   }
   async handleRecordVideo(n) {
     var i;
-    if (this.replyAttachmentIds.length >= A.MAX_ATTACHMENTS) return;
+    if (this.replyAttachmentIds.length >= P.MAX_ATTACHMENTS) return;
     this.upload || (this.upload = new re(this.client)), this.videoRecorder || (this.videoRecorder = new Ue());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4735,14 +4747,14 @@ let A = class extends P {
                     `
     )}
                 </div>
-              ` : b}
+              ` : v}
         </button>
       </div>
     `;
   }
   renderTypingIndicator(n) {
     const e = this.typingByThread.get(n) ?? [];
-    if (e.length === 0) return b;
+    if (e.length === 0) return v;
     const t = e.length === 1 ? `${e[0]} is typing...` : `${e.join(", ")} are typing...`;
     return u`<div class="typing-indicator">${t}</div>`;
   }
@@ -4763,7 +4775,7 @@ let A = class extends P {
             <span class="thread-count">${this.threads.length}</span>
           </span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(be, 16)}
+            ${C(ve, 16)}
           </button>
         </div>
 
@@ -4781,7 +4793,7 @@ let A = class extends P {
     `;
   }
   renderAttachments(n) {
-    if (!n || n.length === 0) return b;
+    if (!n || n.length === 0) return v;
     const e = n.filter((t) => t.type === "image").map((t) => t.url);
     return u`
       ${n.map((t) => {
@@ -4806,7 +4818,7 @@ let A = class extends P {
             <div class="comment-attachment-media" id="video-${t.id}">
               ${this.renderVideoPlayer(t)}
             </div>
-          ` : b;
+          ` : v;
     })}
     `;
   }
@@ -4825,13 +4837,13 @@ let A = class extends P {
         data-thread-id=${n.id}
       >
         ${n.position ? u`<div class="pin-badge">
-              ${C(At, 12)}
+              ${C(Pt, 12)}
               Pinned
-            </div>` : b}
+            </div>` : v}
         ${n.comments.map((t, i) => {
       const s = this.getUserForComment(t.userId), o = this.isOwnComment(t), r = this.editingCommentId === t.id;
       return u`
-            ${i > 0 ? u`<div class="comment-divider"></div>` : b}
+            ${i > 0 ? u`<div class="comment-divider"></div>` : v}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -4842,16 +4854,16 @@ let A = class extends P {
                 </div>
                 <span class="comment-author">${(s == null ? void 0 : s.name) ?? "Unknown"}</span>
                 <span class="comment-time">${this.formatTime(t.createdAt)}</span>
-                ${t.editedAt ? u`<span class="edited-badge">(edited)</span>` : b}
+                ${t.editedAt ? u`<span class="edited-badge">(edited)</span>` : v}
               </div>
               ${r ? this.renderEditForm(t) : u`
-                    ${t.body && t.body !== "(attachment)" ? u`<div class="comment-body">${this.parseMentions(t.body)}</div>` : b}
+                    ${t.body && t.body !== "(attachment)" ? u`<div class="comment-body">${this.parseMentions(t.body)}</div>` : v}
                     ${this.renderAttachments(t.attachments ?? [])}
                   `}
               ${o && !r ? u`<div class="comment-actions">
                     <button @click=${() => this.startEdit(t)} title="Edit">${C(Oi, 14)}</button>
                     <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${C(Li, 14)}</button>
-                  </div>` : b}
+                  </div>` : v}
               ${this.renderReactions(t)}
             </div>
           `;
@@ -4918,15 +4930,15 @@ let A = class extends P {
                   </div>
                 </div>
               </form>
-            ` : b}
+            ` : v}
       </div>
     `;
   }
 };
-A.styles = [
+P.styles = [
   ie,
-  ve,
-  Ae,
+  be,
+  Pe,
   M`
       :host {
         display: block;
@@ -5467,37 +5479,37 @@ A.styles = [
       }
     `
 ];
-A.MAX_ATTACHMENTS = 5;
+P.MAX_ATTACHMENTS = 5;
 U([
   x({ attribute: !1 })
-], A.prototype, "client", 2);
+], P.prototype, "client", 2);
 U([
   x()
-], A.prototype, "highlightThreadId", 2);
+], P.prototype, "highlightThreadId", 2);
 U([
   $()
-], A.prototype, "threadsVersion", 2);
+], P.prototype, "threadsVersion", 2);
 U([
   $()
-], A.prototype, "replyingTo", 2);
+], P.prototype, "replyingTo", 2);
 U([
   $()
-], A.prototype, "editingCommentId", 2);
+], P.prototype, "editingCommentId", 2);
 U([
   $()
-], A.prototype, "editBody", 2);
+], P.prototype, "editBody", 2);
 U([
   $()
-], A.prototype, "pickerOpenForComment", 2);
+], P.prototype, "pickerOpenForComment", 2);
 U([
   $()
-], A.prototype, "typingByThread", 2);
+], P.prototype, "typingByThread", 2);
 U([
   $()
-], A.prototype, "reactionsVersion", 2);
-A = U([
+], P.prototype, "reactionsVersion", 2);
+P = U([
   L("pulse-widget-comments-panel")
-], A);
+], P);
 var ls = Object.defineProperty, cs = Object.getOwnPropertyDescriptor, Xe = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? cs(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
@@ -5516,7 +5528,7 @@ const ds = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let pe = class extends P {
+let pe = class extends A {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -5565,14 +5577,14 @@ let pe = class extends P {
         <div class="panel-header">
           <span class="panel-title">
             Notifications
-            ${n > 0 ? u`<span class="unread-badge">${n}</span>` : b}
+            ${n > 0 ? u`<span class="unread-badge">${n}</span>` : v}
           </span>
           <div style="display:flex;align-items:center;gap:4px;">
             ${n > 0 ? u`<button class="mark-all" @click=${() => this.client.markAllRead()}>
                   Mark all read
-                </button>` : b}
+                </button>` : v}
             <button class="close-btn" @click=${this.fireClose} title="Close">
-              ${C(be, 16)}
+              ${C(ve, 16)}
             </button>
           </div>
         </div>
@@ -5606,8 +5618,8 @@ let pe = class extends P {
 };
 pe.styles = [
   ie,
-  ve,
-  Ae,
+  be,
+  Pe,
   M`
       :host {
         display: block;
@@ -6044,7 +6056,7 @@ class fs {
 }
 function ms(n) {
   if (!n.rangeCount || n.isCollapsed) return null;
-  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = bt(t), o = bt(i);
+  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = vt(t), o = vt(i);
   return !s || !o ? null : {
     startSelector: s,
     startOffset: e.startOffset,
@@ -6063,18 +6075,18 @@ function gs(n) {
     return null;
   }
 }
-function bt(n) {
+function vt(n) {
   if (n.nodeType === Node.TEXT_NODE) {
     const e = n.parentElement;
     if (!e) return null;
-    const t = vt(e);
+    const t = bt(e);
     if (!t) return null;
     const i = Array.from(e.childNodes).indexOf(n);
     return `${t}::text(${i})`;
   }
-  return n.nodeType === Node.ELEMENT_NODE ? vt(n) : null;
+  return n.nodeType === Node.ELEMENT_NODE ? bt(n) : null;
 }
-function vt(n) {
+function bt(n) {
   if (!n || n === document.documentElement) return "html";
   if (n === document.body) return "body";
   if (n.id) return `#${CSS.escape(n.id)}`;
@@ -6117,7 +6129,7 @@ function xt(n) {
     return null;
   }
 }
-class bs {
+class vs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.selectionEls = /* @__PURE__ */ new Map(), this.clearTimers = /* @__PURE__ */ new Map(), this.client = e;
   }
@@ -6200,12 +6212,12 @@ class bs {
     }
   }
 }
-var vs = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ye = (n, e, t, i) => {
+var bs = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ye = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? xs(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 && vs(e, t, s), s;
+  return i && s && bs(e, t, s), s;
 };
-let ue = class extends P {
+let ue = class extends A {
   constructor() {
     super(...arguments), this.roomId = "";
   }
@@ -6246,7 +6258,7 @@ let ue = class extends P {
         <div class="panel-header">
           <span class="panel-title">Settings</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(be, 16)}
+            ${C(ve, 16)}
           </button>
         </div>
 
@@ -6293,8 +6305,8 @@ let ue = class extends P {
 };
 ue.styles = [
   ie,
-  ve,
-  Ae,
+  be,
+  Pe,
   M`
       :host {
         display: block;
@@ -6503,7 +6515,7 @@ var $s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, j = (n, e,
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && $s(e, t, s), s;
 };
-let R = class extends P {
+let R = class extends A {
   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;
   }
@@ -6511,16 +6523,18 @@ let R = class extends P {
     super.connectedCallback(), this.setupPresence();
   }
   disconnectedCallback() {
-    var n, e;
-    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this), (e = this.notifUnsub) == null || e.call(this);
+    var n, e, t;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this), (e = this.authUnsub) == null || e.call(this), (t = this.notifUnsub) == null || t.call(this);
   }
   updated(n) {
-    var e, t;
-    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), (t = this.notifUnsub) == null || t.call(this), this.setupPresence());
+    var e, t, i;
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), (t = this.authUnsub) == null || t.call(this), (i = this.notifUnsub) == null || i.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", (n) => {
-      this.users = n;
+      this.users = [...n];
+    }), this.authUnsub = this.client.state.on("auth", () => {
+      this.users = this.client.state.presence, this.unreadCount = this.client.state.unreadCount;
     }), this.notifUnsub = this.client.state.on("notifications", () => {
       this.unreadCount = this.client.state.unreadCount;
     }));
@@ -6565,7 +6579,7 @@ let R = class extends P {
         <!-- Presence avatars -->
         ${this.users.length > 0 ? u`
               <div class="presence">
-                ${t > 0 ? u`<div class="presence-overflow">+${t}</div>` : b}
+                ${t > 0 ? u`<div class="presence-overflow">+${t}</div>` : v}
                 ${e.map(
       (i) => u`
                     <div
@@ -6576,13 +6590,13 @@ let R = class extends P {
                     >
                       ${i.user.avatar ? u`<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" ? u`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : b}
+                      ${i.deviceType && i.deviceType !== "desktop" ? u`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : v}
                     </div>
                   `
     )}
               </div>
               <div class="separator"></div>
-            ` : b}
+            ` : v}
 
         <!-- Pin comment (primary) -->
         <button
@@ -6592,7 +6606,7 @@ let R = class extends P {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(At)}
+          ${C(Pt)}
         </button>
 
         <!-- View comments -->
@@ -6603,7 +6617,7 @@ let R = class extends P {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Ai)}
+          ${C(Pi)}
         </button>
 
         <!-- Activity feed -->
@@ -6614,7 +6628,7 @@ let R = class extends P {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Pi)}
+          ${C(Ai)}
         </button>
 
         <!-- Draw mode -->
@@ -6637,7 +6651,7 @@ let R = class extends P {
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : "position:relative"}"
         >
           ${C(Si)}
-          ${this.unreadCount > 0 ? u`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : b}
+          ${this.unreadCount > 0 ? u`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : v}
         </button>
 
         <!-- Settings -->
@@ -6657,7 +6671,7 @@ let R = class extends P {
           @click=${this.fireToggle}
           title="Collapse"
         >
-          ${C(be, 14)}
+          ${C(ve, 14)}
         </button>
       </div>
     `;
@@ -6665,7 +6679,7 @@ let R = class extends P {
 };
 R.styles = [
   ie,
-  ve,
+  be,
   M`
       :host {
         display: block;
@@ -6963,7 +6977,7 @@ class Es {
         (E) => E.user.id === a
       );
       if (!m) continue;
-      const g = l.scrollY + l.viewportHeight / 2, y = i > 0 ? g / i : 0, v = Math.max(
+      const g = l.scrollY + l.viewportHeight / 2, y = i > 0 ? g / i : 0, b = Math.max(
         8,
         Math.min(t - 28, y * t)
       );
@@ -6980,7 +6994,7 @@ class Es {
         whiteSpace: "nowrap",
         pointerEvents: "none",
         transition: "top 0.3s ease"
-      }), this.container.appendChild(w), this.pillEls.set(a, w)), w.style.display = "", w.style.background = m.user.color, w.style.top = `${v}px`, w.textContent = this.getInitials(m.user.name);
+      }), this.container.appendChild(w), this.pillEls.set(a, w)), w.style.display = "", w.style.background = m.user.color, w.style.top = `${b}px`, w.textContent = this.getInitials(m.user.name);
     }
     for (const [a, l] of this.pillEls)
       !o.has(a) && !this.client.state.viewports.has(a) && (l.remove(), this.pillEls.delete(a));
@@ -6994,7 +7008,7 @@ var Cs = Object.defineProperty, Ts = Object.getOwnPropertyDescriptor, _ = (n, e,
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Cs(e, t, s), s;
 };
-let T = class extends P {
+let T = class extends A {
   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 = { ...$e }, 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(() => {
@@ -7053,7 +7067,7 @@ let T = class extends P {
       onPinModeExit: () => {
         this.pinModeActive = !1;
       }
-    }), this.viewportOverlay = new Es(this.client), this.selectionOverlay = new bs(this.client), this.drawingOverlay = new fs(this.client), this.settings = ys(this.room), this.applySettings(this.settings), this.unsubs.push(
+    }), this.viewportOverlay = new Es(this.client), this.selectionOverlay = new vs(this.client), this.drawingOverlay = new fs(this.client), this.settings = ys(this.room), this.applySettings(this.settings), this.unsubs.push(
       this.client.on("connection", (e) => {
         this.connectionState = e, e === "connected" && this._wasDisconnected ? (this.showConnectedFlash = !0, this._connectedFlashTimer && clearTimeout(this._connectedFlashTimer), this._connectedFlashTimer = setTimeout(() => {
           this.showConnectedFlash = !1, this._connectedFlashTimer = null;
@@ -7090,29 +7104,30 @@ let T = class extends P {
     this.activePanel = null, this.highlightThreadId = null;
   }
   handleToolbarAction(n) {
-    var t, i, s, o;
+    var i, s, o, r;
     const e = n.detail;
-    if (!(!this.settings.enabled && e !== "settings"))
-      switch (e) {
-        case "comments":
-          this.activePanel = this.activePanel === "comments" ? null : "comments", this.highlightThreadId = null;
-          break;
-        case "settings":
-          this.activePanel = this.activePanel === "settings" ? null : "settings";
-          break;
-        case "notifications":
-          this.activePanel = this.activePanel === "notifications" ? null : "notifications";
-          break;
-        case "activity":
-          this.activePanel = this.activePanel === "activity" ? null : "activity";
-          break;
-        case "pin-mode":
-          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 ? (s = this.drawingOverlay) == null || s.enableDrawMode() : (o = this.drawingOverlay) == null || o.disableDrawMode();
-          break;
-      }
+    if (!this.settings.enabled && e !== "settings") return;
+    const t = e === "comments" || e === "settings" || e === "notifications" || e === "activity";
+    switch ((t || e === "pin-mode") && this.drawModeActive && (this.drawModeActive = !1, (i = this.drawingOverlay) == null || i.disableDrawMode()), (t || e === "draw-mode") && this.pinModeActive && (this.pinModeActive = !1, (s = this.commentPins) == null || s.exitPinMode()), (e === "pin-mode" || e === "draw-mode") && (this.activePanel = null), e) {
+      case "comments":
+        this.activePanel = this.activePanel === "comments" ? null : "comments", this.highlightThreadId = null;
+        break;
+      case "settings":
+        this.activePanel = this.activePanel === "settings" ? null : "settings";
+        break;
+      case "notifications":
+        this.activePanel = this.activePanel === "notifications" ? null : "notifications";
+        break;
+      case "activity":
+        this.activePanel = this.activePanel === "activity" ? null : "activity";
+        break;
+      case "pin-mode":
+        this.pinModeActive = !this.pinModeActive, this.pinModeActive && ((o = this.commentPins) == null || o.enterPinMode());
+        break;
+      case "draw-mode":
+        this.drawModeActive = !this.drawModeActive, this.drawModeActive && ((r = this.drawingOverlay) == null || r.enableDrawMode());
+        break;
+    }
   }
   handleFollow(n) {
     const e = n.detail;
@@ -7123,12 +7138,12 @@ let T = class extends P {
     this.settings = e, ws(this.room, e), this.applySettings(e);
   }
   applySettings(n) {
-    var e, t, i, s, o, r, a, l, d, c, h, p, m, g, y, v, w;
+    var e, t, i, s, o, r, a, l, d, c, h, p, m, g, y, b, 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), (a = this.commentPins) == null || a.setVisible(!1), this.followingUserId = null, this.pinModeActive && ((l = this.commentPins) == null || l.exitPinMode(), this.pinModeActive = !1), this.activePanel = this.activePanel === "settings" ? "settings" : null, this.highlightThreadId = null;
       return;
     }
-    this.applyCursorSettings(n), (d = this.client) == null || d.setAppearOffline(n.appearOffline), (c = this.commentPins) == null || c.setVisible(n.showCommentPins), n.showViewportIndicators ? (h = this.viewportOverlay) == null || h.enable() : (p = this.viewportOverlay) == null || p.disable(), n.showSelections ? (m = this.selectionOverlay) == null || m.enable() : (g = this.selectionOverlay) == null || g.disable(), n.showDrawings ? (y = this.drawingOverlay) == null || y.enable() : ((v = this.drawingOverlay) == null || v.disable(), this.drawModeActive && ((w = this.drawingOverlay) == null || w.disableDrawMode(), this.drawModeActive = !1));
+    this.applyCursorSettings(n), (d = this.client) == null || d.setAppearOffline(n.appearOffline), (c = this.commentPins) == null || c.setVisible(n.showCommentPins), n.showViewportIndicators ? (h = this.viewportOverlay) == null || h.enable() : (p = this.viewportOverlay) == null || p.disable(), n.showSelections ? (m = this.selectionOverlay) == null || m.enable() : (g = this.selectionOverlay) == null || g.disable(), n.showDrawings ? (y = this.drawingOverlay) == null || y.enable() : ((b = this.drawingOverlay) == null || b.disable(), this.drawModeActive && ((w = this.drawingOverlay) == null || w.disableDrawMode(), this.drawModeActive = !1));
   }
   applyCursorSettings(n) {
     if (!this.cursorOverlay) return;
@@ -7142,10 +7157,10 @@ let T = class extends P {
    * the trigger element, flipping vertically/horizontally as needed.
    */
   positionPopups() {
-    var g, y, v, w;
+    var g, y, b, w;
     const n = this.display === "inline", e = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".inline-trigger"), t = (y = this.shadowRoot) == null ? void 0 : y.querySelector("pulse-widget-toolbar"), i = n ? e : t;
     if (!i) return;
-    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, a = 8, l = (v = this.shadowRoot) == null ? void 0 : v.querySelector(".toolbar-popover");
+    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, a = 8, l = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".toolbar-popover");
     if (l) {
       Object.assign(l.style, { top: "auto", left: "auto" });
       const E = l.getBoundingClientRect(), I = this.computePosition(s, E, o, r, a);
@@ -7182,7 +7197,7 @@ let T = class extends P {
         <span class="connection-dot"></span>Reconnecting...
       </div>` : this.connectionState === "disconnected" && this.client ? u`<div class="connection-banner disconnected">
         <span class="connection-dot"></span>Disconnected
-      </div>` : b;
+      </div>` : v;
   }
   handleToolbarToggle() {
     this.collapsed = !this.collapsed, this.collapsed && (this.activePanel = null, this.highlightThreadId = null);
@@ -7202,25 +7217,25 @@ let T = class extends P {
             ${this.activePanel === "comments" ? u`<pulse-widget-comments-panel
                   .client=${this.client}
                   .highlightThreadId=${this.highlightThreadId}
-                ></pulse-widget-comments-panel>` : b}
+                ></pulse-widget-comments-panel>` : v}
             ${this.activePanel === "settings" ? u`<pulse-widget-settings-panel
                   .settings=${this.settings}
                   .roomId=${this.room}
                   @settings-change=${this.handleSettingsChange}
-                ></pulse-widget-settings-panel>` : b}
+                ></pulse-widget-settings-panel>` : v}
             ${this.activePanel === "notifications" ? u`<pulse-widget-notifications-panel
                   .client=${this.client}
-                ></pulse-widget-notifications-panel>` : b}
+                ></pulse-widget-notifications-panel>` : v}
             ${this.activePanel === "activity" ? u`<pulse-widget-activity-panel
                   .client=${this.client}
-                ></pulse-widget-activity-panel>` : b}
+                ></pulse-widget-activity-panel>` : v}
           </div>
-        ` : b, t = this.followingUserId ? u`<div class="follow-banner">
+        ` : v, t = this.followingUserId ? u`<div class="follow-banner">
           Following ${this.getFollowUserName()}
           <button @click=${() => {
       this.followingUserId = null;
     }}>Stop</button>
-        </div>` : b;
+        </div>` : v;
     return n ? u`
         ${t}
         <div class="widget-root">
@@ -7499,6 +7514,6 @@ export {
   he as PulseNotifications,
   Z as PulsePresence,
   X as PulseProvider,
-  B as PulseReactions,
+  N as PulseReactions,
   T as PulseWidget
 };