@gamention/pulse-elements 0.1.12 → 0.1.14

package/dist/pulse-elements.js

@@ -157,11 +157,11 @@ function pe({ context: n, subscribe: e }) {
     }));
   };
 }
-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);
+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, $ = (n, e, t) => Rt(n, typeof e != "symbol" ? e + "" : e, t);
 const Lt = "ws://localhost:4567";
 let je = class {
   constructor() {
-    x(this, "handlers", /* @__PURE__ */ new Map());
+    $(this, "handlers", /* @__PURE__ */ new Map());
   }
   on(e, t) {
     this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set());
@@ -181,7 +181,7 @@ let je = class {
   }
 }, jt = class extends je {
   constructor(e) {
-    super(), x(this, "ws", null), x(this, "endpoint"), x(this, "reconnectAttempt", 0), x(this, "reconnectTimer", null), x(this, "_state", "disconnected"), this.endpoint = e ?? Lt;
+    super(), $(this, "ws", null), $(this, "endpoint"), $(this, "reconnectAttempt", 0), $(this, "reconnectTimer", null), $(this, "_state", "disconnected"), this.endpoint = e ?? Lt;
   }
   get state() {
     return this._state;
@@ -216,9 +216,9 @@ let je = class {
       this.reconnectTimer = null, this.connect();
     }, e);
   }
-}, Ut = class extends je {
+}, zt = class extends je {
   constructor() {
-    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());
+    super(...arguments), $(this, "baseUrl", ""), $(this, "_user", null), $(this, "_users", /* @__PURE__ */ new Map()), $(this, "_presence", /* @__PURE__ */ new Map()), $(this, "_threads", /* @__PURE__ */ new Map()), $(this, "_reactions", /* @__PURE__ */ new Map()), $(this, "_notifications", []), $(this, "_activityLogs", []), $(this, "_typing", /* @__PURE__ */ new Map()), $(this, "_viewports", /* @__PURE__ */ new Map()), $(this, "_selections", /* @__PURE__ */ new Map());
   }
   get user() {
     return this._user;
@@ -429,7 +429,7 @@ let je = class {
 }, xt = class extends je {
   constructor(e) {
     var t;
-    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(/\/$/, "");
+    super(), $(this, "state"), $(this, "connection"), $(this, "config"), $(this, "heartbeatTimer", null), $(this, "lastCursorSend", 0), $(this, "pendingCursor", null), $(this, "cursorTimer", null), this.config = e, this.state = new zt(), 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", (s) => {
       this.state.handleMessage(s), this.emit(s.type, s);
@@ -575,16 +575,16 @@ let je = class {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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();
+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();
 let yt = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== ze) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== Ue) 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 (Ue && e === void 0) {
+    if (ze && 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));
     }
@@ -594,30 +594,30 @@ let yt = class {
     return this.cssText;
   }
 };
-const zt = (n) => new yt(typeof n == "string" ? n : n + "", void 0, ze), A = (n, ...e) => {
+const Ut = (n) => new yt(typeof n == "string" ? n : n + "", void 0, Ue), 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 yt(t, n, ze);
+  return new yt(t, n, Ue);
 }, Dt = (n, e) => {
-  if (Ue) n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  if (ze) n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const i = document.createElement("style"), s = ve.litNonce;
     s !== void 0 && i.setAttribute("nonce", s), i.textContent = t.cssText, n.appendChild(i);
   }
-}, Ke = Ue ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
+}, Ke = ze ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
-  return zt(t);
+  return Ut(t);
 })(n) : n;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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) {
+const { is: Ht, defineProperty: Nt, getOwnPropertyDescriptor: Bt, getOwnPropertyNames: Ft, getOwnPropertySymbols: Vt, getPrototypeOf: qt } = Object, U = globalThis, Ge = U.trustedTypes, Wt = Ge ? Ge.emptyScript : "", Te = U.reactiveElementPolyfillSupport, ie = (n, e) => n, we = { toAttribute(n, e) {
   switch (e) {
     case Boolean:
       n = n ? Wt : null;
@@ -646,7 +646,7 @@ const { is: Ht, defineProperty: Nt, getOwnPropertyDescriptor: Bt, getOwnProperty
   }
   return t;
 } }, 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());
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), U.litPropertyMetadata ?? (U.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let Y = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
@@ -850,15 +850,15 @@ 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 }), (z.reactiveElementVersions ?? (z.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 }), (U.reactiveElementVersions ?? (U.reactiveElementVersions = [])).push("2.1.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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 = `[ 	
+const se = globalThis, Je = (n) => n, $e = se.trustedTypes, Qe = $e ? $e.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, wt = "$lit$", z = `lit$${Math.random().toFixed(9).slice(2)}$`, $t = "?" + z, 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 = (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);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), it = /'/g, st = /"/g, kt = /^(?:script|style|textarea|title)$/i, Et = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), d = Et(1), Kt = Et(2), V = Symbol.for("lit-noChange"), g = 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;
@@ -868,10 +868,10 @@ const Gt = (n, e) => {
   let s, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", r = te;
   for (let l = 0; l < t; 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]) && (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);
+    let c, h, p = -1, u = 0;
+    for (; u < a.length && (r.lastIndex = u, h = r.exec(a), h !== null); ) u = r.lastIndex, r === te ? h[1] === "!--" ? r = et : h[1] !== void 0 ? r = tt : h[2] !== void 0 ? (kt.test(h[2]) && (s = RegExp("</" + h[2], "g")), r = H) : h[3] !== void 0 && (r = H) : r === H ? h[0] === ">" ? (r = s ?? te, p = -1) : h[1] === void 0 ? p = -2 : (p = r.lastIndex - h[2].length, c = h[1], r = h[3] === void 0 ? H : h[3] === '"' ? st : it) : r === st || r === it ? r = H : r === et || r === tt ? r = te : (r = H, s = void 0);
+    const f = r === H && n[l + 1].startsWith("/>") ? " " : "";
+    o += r === te ? a + Xt : p >= 0 ? (i.push(c), a.slice(0, p) + wt + a.slice(p) + z + f) : a + z + (p === -2 ? l : f);
   }
   return [Ct(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
@@ -880,29 +880,29 @@ class ae {
     let s;
     this.parts = [];
     let o = 0, r = 0;
-    const l = e.length - 1, a = this.parts, [c, p] = Gt(e, t);
+    const l = e.length - 1, a = this.parts, [c, h] = Gt(e, t);
     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);
+      const p = this.el.content.firstChild;
+      p.replaceWith(...p.childNodes);
     }
     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 (s.hasAttributes()) for (const p of s.getAttributeNames()) if (p.endsWith(wt)) {
+          const u = h[r++], f = s.getAttribute(p).split(z), m = /([.?@])?(.*)/.exec(u);
+          a.push({ type: 1, index: o, name: m[2], strings: f, ctor: m[1] === "." ? Jt : m[1] === "?" ? Qt : m[1] === "@" ? ei : Ee }), s.removeAttribute(p);
+        } else p.startsWith(z) && (a.push({ type: 6, index: o }), s.removeAttribute(p));
         if (kt.test(s.tagName)) {
-          const d = s.textContent.split(U), u = d.length - 1;
+          const p = s.textContent.split(z), u = p.length - 1;
           if (u > 0) {
             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());
+            for (let f = 0; f < u; f++) s.append(p[f], oe()), N.nextNode(), a.push({ type: 2, index: ++o });
+            s.append(p[u], oe());
           }
         }
       } else if (s.nodeType === 8) if (s.data === $t) a.push({ type: 2, index: o });
       else {
-        let d = -1;
-        for (; (d = s.data.indexOf(U, d + 1)) !== -1; ) a.push({ type: 7, index: o }), d += U.length - 1;
+        let p = -1;
+        for (; (p = s.data.indexOf(z, p + 1)) !== -1; ) a.push({ type: 7, index: o }), p += z.length - 1;
       }
       o++;
     }
@@ -953,7 +953,7 @@ class ue {
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   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;
+    this.type = 2, this._$AH = g, 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 +967,7 @@ class ue {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    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);
+    e = K(this, e, t), re(e) ? e === g || e == null || e === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : 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);
@@ -976,7 +976,7 @@ class ue {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== f && re(this._$AH) ? this._$AA.nextSibling.data = e : this.T(F.createTextNode(e)), this._$AH = e;
+    this._$AH !== g && re(this._$AH) ? this._$AA.nextSibling.data = e : this.T(F.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
@@ -1018,7 +1018,7 @@ class Ee {
     return this._$AM._$AU;
   }
   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;
+    this.type = 1, this._$AH = g, 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 = g;
   }
   _$AI(e, t = this, i, s) {
     const o = this.strings;
@@ -1027,12 +1027,12 @@ class Ee {
     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 === 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;
+      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 === g ? e = g : e !== g && (e += (c ?? "") + o[a + 1]), this._$AH[a] = c;
     }
     r && !s && this.j(e);
   }
   j(e) {
-    e === f ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === g ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class Jt extends Ee {
@@ -1040,7 +1040,7 @@ class Jt extends Ee {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === f ? void 0 : e;
+    this.element[this.name] = e === g ? void 0 : e;
   }
 }
 class Qt extends Ee {
@@ -1048,7 +1048,7 @@ class Qt extends Ee {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== f);
+    this.element.toggleAttribute(this.name, !!e && e !== g);
   }
 }
 class ei extends Ee {
@@ -1056,8 +1056,8 @@ class ei extends Ee {
     super(e, t, i, s, o), this.type = 5;
   }
   _$AI(e, t = this) {
-    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);
+    if ((e = K(this, e, t, 0) ?? g) === V) return;
+    const i = this._$AH, s = e === g && i !== g || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== g && (i === g || s);
     s && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -1093,7 +1093,7 @@ const ii = (n, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const B = globalThis;
-let T = class extends Y {
+let S = class extends Y {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1119,9 +1119,9 @@ let T = class extends Y {
   }
 };
 var bt;
-T._$litElement$ = !0, T.finalized = !0, (bt = B.litElementHydrateSupport) == null || bt.call(B, { LitElement: T });
+S._$litElement$ = !0, S.finalized = !0, (bt = B.litElementHydrateSupport) == null || bt.call(B, { LitElement: S });
 const Ae = B.litElementPolyfillSupport;
-Ae == null || Ae({ LitElement: T });
+Ae == null || Ae({ LitElement: S });
 (B.litElementVersions ?? (B.litElementVersions = [])).push("4.2.2");
 /**
  * @license
@@ -1159,7 +1159,7 @@ const si = { attribute: !0, type: String, converter: we, reflect: !1, hasChanged
   }
   throw Error("Unsupported decorator location: " + i);
 };
-function g(n) {
+function v(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;
@@ -1170,8 +1170,8 @@ function g(n) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function v(n) {
-  return g({ ...n, state: !0, attribute: !1 });
+function w(n) {
+  return v({ ...n, state: !0, attribute: !1 });
 }
 const Z = "pulse-client";
 var oi = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, J = (n, e, t, i) => {
@@ -1179,7 +1179,7 @@ var oi = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, J = (n, e,
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && oi(e, t, s), s;
 };
-let q = class extends T {
+let q = class extends S {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "";
   }
@@ -1198,20 +1198,20 @@ let q = class extends T {
     super.disconnectedCallback(), (n = this.client) == null || n.disconnect();
   }
   render() {
-    return h`<slot></slot>`;
+    return d`<slot></slot>`;
   }
 };
 J([
-  g({ attribute: "api-key" })
+  v({ attribute: "api-key" })
 ], q.prototype, "apiKey", 2);
 J([
-  g()
+  v()
 ], q.prototype, "token", 2);
 J([
-  g()
+  v()
 ], q.prototype, "room", 2);
 J([
-  g()
+  v()
 ], q.prototype, "endpoint", 2);
 J([
   Mt({ context: Z })
@@ -1224,7 +1224,7 @@ var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Ce = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && ai(e, t, s), s;
 };
-let G = class extends T {
+let G = class extends S {
   constructor() {
     super(...arguments), this.maxVisible = 5, this.users = [];
   }
@@ -1249,16 +1249,16 @@ let G = class extends T {
   }
   render() {
     const n = this.users.slice(0, this.maxVisible), e = this.users.length - this.maxVisible;
-    return h`
+    return d`
       <div class="avatars">
-        ${e > 0 ? h`<div class="overflow">+${e}</div>` : null}
+        ${e > 0 ? d`<div class="overflow">+${e}</div>` : null}
         ${n.map(
-      (t) => h`
+      (t) => d`
             <div
               class="avatar"
               style="background:${t.user.color}"
             >
-              ${t.user.avatar ? h`<img src="${t.user.avatar}" alt="${t.user.name}" />` : this.getInitials(t.user.name)}
+              ${t.user.avatar ? d`<img src="${t.user.avatar}" alt="${t.user.name}" />` : this.getInitials(t.user.name)}
               <span class="status-ring ${t.status}"></span>
               <span class="tooltip">${t.user.name}</span>
             </div>
@@ -1268,7 +1268,7 @@ let G = class extends T {
     `;
   }
 };
-G.styles = A`
+G.styles = M`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1374,13 +1374,13 @@ G.styles = A`
   `;
 Ce([
   pe({ context: Z, subscribe: !0 }),
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], G.prototype, "client", 2);
 Ce([
-  g({ type: Number, attribute: "max-visible" })
+  v({ type: Number, attribute: "max-visible" })
 ], G.prototype, "maxVisible", 2);
 Ce([
-  v()
+  w()
 ], G.prototype, "users", 2);
 G = Ce([
   R("pulse-presence")
@@ -1390,7 +1390,7 @@ var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, Ne = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && ci(e, t, s), s;
 };
-let le = class extends T {
+let le = class extends S {
   constructor() {
     super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (n) => {
       var e;
@@ -1444,9 +1444,9 @@ let le = class extends T {
   }
   render() {
     const n = [...this.cursors.values()];
-    return h`
+    return d`
       ${n.map(
-      (e) => h`
+      (e) => d`
           <div
             class="cursor"
             style="transform:translate(${e.position.x}px,${e.position.y}px)"
@@ -1467,7 +1467,7 @@ let le = class extends T {
     `;
   }
 };
-le.styles = A`
+le.styles = M`
     :host {
       position: fixed;
       top: 0;
@@ -1506,10 +1506,10 @@ le.styles = A`
   `;
 Ne([
   pe({ context: Z, subscribe: !0 }),
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], le.prototype, "client", 2);
 Ne([
-  v()
+  w()
 ], le.prototype, "cursors", 2);
 le = Ne([
   R("pulse-cursors")
@@ -1519,7 +1519,7 @@ var hi = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, fe = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && hi(e, t, s), s;
 };
-let W = class extends T {
+let W = class extends S {
   constructor() {
     super(...arguments), this.showResolved = !1, this.threads = [], this.replyingTo = null;
   }
@@ -1541,7 +1541,7 @@ let W = class extends T {
   }
   parseMentions(n) {
     return n.split(/(@\w+)/g).map(
-      (t) => t.startsWith("@") ? h`<span class="mention">${t}</span>` : t
+      (t) => t.startsWith("@") ? d`<span class="mention">${t}</span>` : t
     );
   }
   getInitials(n) {
@@ -1567,9 +1567,9 @@ let W = class extends T {
   }
   render() {
     const n = this.showResolved ? this.threads : this.threads.filter((e) => !e.resolved);
-    return h`
+    return d`
       <div class="threads">
-        ${n.length === 0 ? h`<div class="empty">
+        ${n.length === 0 ? d`<div class="empty">
               <div class="empty-icon">&#128172;</div>
               No comments yet.<br>Start a conversation below.
             </div>` : n.map((e) => this.renderThread(e))}
@@ -1583,12 +1583,12 @@ let W = class extends T {
     `;
   }
   renderThread(n) {
-    return h`
+    return d`
       <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>` : f}
+      return d`
+            ${t > 0 ? d`<div class="divider"></div>` : g}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -1620,12 +1620,12 @@ let W = class extends T {
             ${n.resolved ? "Reopen" : "Resolve"}
           </button>
         </div>
-        ${this.replyingTo === n.id ? h`
+        ${this.replyingTo === n.id ? d`
               <form class="reply-form" @submit=${(e) => this.handleReply(n.id, e)}>
                 <input type="text" placeholder="Write a reply..." />
                 <button type="submit">Send</button>
               </form>
-            ` : f}
+            ` : g}
       </div>
     `;
   }
@@ -1637,7 +1637,7 @@ let W = class extends T {
     return o < 24 ? `${o}h ago` : e.toLocaleDateString();
   }
 };
-W.styles = A`
+W.styles = M`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -1851,16 +1851,16 @@ W.styles = A`
   `;
 fe([
   pe({ context: Z, subscribe: !0 }),
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], W.prototype, "client", 2);
 fe([
-  g({ type: Boolean, attribute: "show-resolved" })
+  v({ type: Boolean, attribute: "show-resolved" })
 ], W.prototype, "showResolved", 2);
 fe([
-  v()
+  w()
 ], W.prototype, "threads", 2);
 fe([
-  v()
+  w()
 ], W.prototype, "replyingTo", 2);
 W = fe([
   R("pulse-comments")
@@ -1883,7 +1883,7 @@ const mi = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let ce = class extends T {
+let ce = class extends S {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -1930,22 +1930,22 @@ let ce = class extends T {
   }
   render() {
     const n = this.notifications.filter((e) => !e.read).length;
-    return h`
+    return d`
       <div class="header">
         <span class="title">
           Notifications
-          ${n > 0 ? h`<span class="badge">${n}</span>` : f}
+          ${n > 0 ? d`<span class="badge">${n}</span>` : g}
         </span>
-        ${n > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+        ${n > 0 ? d`<button class="mark-all" @click=${() => this.client.markAllRead()}>
               Mark all read
-            </button>` : f}
+            </button>` : g}
       </div>
       <div class="list">
-        ${this.notifications.length === 0 ? h`<div class="empty">
+        ${this.notifications.length === 0 ? d`<div class="empty">
               <div class="empty-icon">&#128276;</div>
               No notifications yet
             </div>` : this.notifications.map(
-      (e) => h`
+      (e) => d`
                 <div
                   class="item ${e.read ? "" : "unread"}"
                   @click=${() => this.handleClick(e)}
@@ -1966,7 +1966,7 @@ let ce = class extends T {
     `;
   }
 };
-ce.styles = A`
+ce.styles = M`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -2109,10 +2109,10 @@ ce.styles = A`
   `;
 Be([
   pe({ context: Z, subscribe: !0 }),
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], ce.prototype, "client", 2);
 Be([
-  v()
+  w()
 ], ce.prototype, "notifications", 2);
 ce = Be([
   R("pulse-notifications")
@@ -2123,7 +2123,7 @@ var bi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Q = (n, e,
   return i && s && bi(e, t, s), s;
 };
 const xi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let D = class extends T {
+let D = class extends S {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
   }
@@ -2163,9 +2163,9 @@ let D = class extends T {
   }
   render() {
     const n = this.groupReactions();
-    return h`
+    return d`
       ${n.map(
-      (e) => h`
+      (e) => d`
           <button
             class="reaction ${e.userReactionId ? "active" : ""}"
             @click=${() => this.toggleReaction(e)}
@@ -2182,22 +2182,22 @@ let D = class extends T {
         >
           +
         </button>
-        ${this.showPicker ? h`
+        ${this.showPicker ? d`
               <div class="picker">
                 ${xi.map(
-      (e) => h`
+      (e) => d`
                     <button @click=${() => this.addEmoji(e)}>
                       ${e}
                     </button>
                   `
     )}
               </div>
-            ` : f}
+            ` : g}
       </div>
     `;
   }
 };
-D.styles = A`
+D.styles = M`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2311,19 +2311,19 @@ D.styles = A`
   `;
 Q([
   pe({ context: Z, subscribe: !0 }),
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], D.prototype, "client", 2);
 Q([
-  g({ attribute: "target-id" })
+  v({ attribute: "target-id" })
 ], D.prototype, "targetId", 2);
 Q([
-  g({ attribute: "target-type" })
+  v({ attribute: "target-type" })
 ], D.prototype, "targetType", 2);
 Q([
-  v()
+  w()
 ], D.prototype, "reactions", 2);
 Q([
-  v()
+  w()
 ], D.prototype, "showPicker", 2);
 D = Q([
   R("pulse-reactions")
@@ -2357,10 +2357,10 @@ class $i {
  */
 class Ie extends $i {
   constructor(e) {
-    if (super(e), this.it = f, e.type !== yi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = g, e.type !== yi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === f || e == null) return this._t = void 0, this.it = e;
+    if (e === g || 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;
@@ -2563,7 +2563,7 @@ function Li(n) {
     return `<${e} ${i}/>`;
   }).join("");
 }
-function k(n, e = 18) {
+function C(n, e = 18) {
   return Kt`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="${e}"
@@ -2576,7 +2576,7 @@ function k(n, e = 18) {
     stroke-linejoin="round"
   >${ki(Li(n))}</svg>`;
 }
-const ee = A`
+const ee = M`
   * {
     box-sizing: border-box;
     margin: 0;
@@ -2619,7 +2619,7 @@ const ee = A`
     --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 = A`
+`, ge = M`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2663,7 +2663,7 @@ const ee = A`
     width: 18px;
     height: 18px;
   }
-`, _e = A`
+`, _e = M`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2675,12 +2675,12 @@ const ee = A`
     background: transparent;
   }
 `;
-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--)
+var ji = Object.defineProperty, zi = Object.getOwnPropertyDescriptor, Fe = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? zi(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 T {
+let X = class extends S {
   constructor() {
     super(...arguments), this.items = [], this.unsubs = [], this.counter = 0;
   }
@@ -2726,18 +2726,18 @@ let X = class extends T {
     );
   }
   render() {
-    return h`
+    return d`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Activity</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${k(me, 16)}
+            ${C(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(
-      (n) => h`
+          ${this.items.length === 0 ? d`<div class="empty">No activity yet</div>` : this.items.map(
+      (n) => d`
                   <div class="activity-item">
                     <div
                       class="activity-dot"
@@ -2745,7 +2745,7 @@ let X = class extends T {
                     ></div>
                     <div class="activity-content">
                       <div class="activity-text">
-                        ${n.userId ? h`<span class="activity-user"
+                        ${n.userId ? d`<span class="activity-user"
                                 >${this.getUserName(n.userId)}</span
                               >
                               ${n.description}` : n.description}
@@ -2766,7 +2766,7 @@ X.styles = [
   ee,
   ge,
   _e,
-  A`
+  M`
       :host {
         display: block;
       }
@@ -2892,15 +2892,15 @@ X.TYPE_COLORS = {
   resolve: "#22c55e"
 };
 Fe([
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], X.prototype, "client", 2);
 Fe([
-  v()
+  w()
 ], X.prototype, "items", 2);
 X = Fe([
   R("pulse-widget-activity-panel")
 ], X);
-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);
+const Ui = "-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")}`;
@@ -2929,7 +2929,7 @@ class Oe {
       background: Di,
       borderRadius: "12px",
       border: `1px solid ${Hi}`,
-      fontFamily: zi,
+      fontFamily: Ui,
       fontSize: "11px",
       color: at,
       userSelect: "none",
@@ -2958,18 +2958,18 @@ class Oe {
       height: "12px",
       lineHeight: "0"
     });
-    function p() {
+    function h() {
       c.innerHTML = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1 1L9 6L1 11V1Z" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round"/>
       </svg>`;
     }
-    function d() {
+    function p() {
       c.innerHTML = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="1" y="1" width="2.5" height="10" rx="0.5" fill="white"/>
         <rect x="6.5" y="1" width="2.5" height="10" rx="0.5" fill="white"/>
       </svg>`;
     }
-    p(), a.appendChild(c);
+    h(), a.appendChild(c);
     const u = document.createElement("div");
     Object.assign(u.style, {
       flex: "1",
@@ -2979,65 +2979,65 @@ class Oe {
       overflow: "hidden",
       minWidth: "0"
     });
-    const m = document.createElement("div");
-    Object.assign(m.style, {
+    const f = document.createElement("div");
+    Object.assign(f.style, {
       display: "flex",
       alignItems: "center",
       gap: "1.5px",
       height: "22px",
       cursor: "pointer"
     });
-    const b = [];
-    for (let $ = 0; $ < xe; $++) {
-      const P = document.createElement("div"), y = Math.round(Ni[$] * 20);
-      Object.assign(P.style, {
+    const m = [];
+    for (let E = 0; E < xe; E++) {
+      const I = document.createElement("div"), k = Math.round(Ni[E] * 20);
+      Object.assign(I.style, {
         flex: "1",
-        height: `${Math.max(3, y)}px`,
+        height: `${Math.max(3, k)}px`,
         borderRadius: "1px",
         background: rt,
         transition: "background 0.1s ease",
         minWidth: "0"
-      }), b.push(P), m.appendChild(P);
+      }), m.push(I), f.appendChild(I);
     }
-    const I = document.createElement("div");
-    Object.assign(I.style, {
+    const x = document.createElement("div");
+    Object.assign(x.style, {
       fontSize: "10px",
       color: at,
       whiteSpace: "nowrap",
       lineHeight: "1"
     });
-    function C() {
-      const $ = lt(o), P = lt(s);
-      I.textContent = `${$} / ${P}`;
+    function b() {
+      const E = lt(o), I = lt(s);
+      x.textContent = `${E} / ${I}`;
     }
-    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;
+    b(), u.appendChild(f), u.appendChild(x), l.appendChild(a), l.appendChild(u);
+    function y() {
+      const E = s > 0 ? o / s : 0, I = Math.floor(E * xe);
+      for (let k = 0; k < xe; k++)
+        m[k].style.background = k <= I ? ot : rt;
     }
-    return m.addEventListener("click", ($) => {
+    return f.addEventListener("click", (E) => {
       if (s <= 0) return;
-      const P = m.getBoundingClientRect(), y = Math.min(
+      const I = f.getBoundingClientRect(), k = Math.min(
         1,
-        Math.max(0, ($.clientX - P.left) / P.width)
+        Math.max(0, (E.clientX - I.left) / I.width)
       );
-      r.currentTime = y * s, o = r.currentTime, w(), C();
+      r.currentTime = k * s, o = r.currentTime, y(), b();
     }), a.addEventListener("click", () => {
       i ? r.pause() : r.play().catch(() => {
       });
     }), r.addEventListener("play", () => {
-      i = !0, d();
+      i = !0, p();
     }), r.addEventListener("pause", () => {
-      i = !1, p();
+      i = !1, h();
     }), r.addEventListener("ended", () => {
-      i = !1, p(), o = 0, w(), C();
+      i = !1, h(), o = 0, y(), b();
     }), r.addEventListener("timeupdate", () => {
-      o = r.currentTime, w(), C();
+      o = r.currentTime, y(), b();
     }), r.addEventListener("loadedmetadata", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, C());
+      r.duration && isFinite(r.duration) && (s = r.duration, b());
     }), r.addEventListener("durationchange", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, C());
+      r.duration && isFinite(r.duration) && (s = r.duration, b());
     }), l;
   }
 }
@@ -3065,9 +3065,9 @@ class Re {
       this.resolve = l;
     });
     return this.recorder.onstop = () => {
-      var c, p;
+      var c, h;
       const l = ((c = this.recorder) == null ? void 0 : c.mimeType) || i || "audio/webm", a = new Blob(o, { type: l });
-      (p = this.resolve) == null || p.call(this, a), this.resolve = null, this.cleanupResources();
+      (h = this.resolve) == null || h.call(this, a), this.resolve = null, this.cleanupResources();
     }, this.recorder.start(), this.recording = !0, this.startTime = Date.now(), this.maxTimer = setTimeout(() => {
       this.stopRecording();
     }, this.maxDuration), this.animate(), r;
@@ -3172,8 +3172,8 @@ class Re {
     this.analyser.getByteFrequencyData(o), e.clearRect(0, 0, t, i);
     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), 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();
+      const h = o[c] / 255, p = Math.max(2, h * i * 0.85), u = c * (l + a), f = (i - p) / 2, m = 0.4 + h * 0.6;
+      e.fillStyle = `rgba(99, 102, 241, ${m})`, e.beginPath(), e.roundRect(u, f, l, p, 1), e.fill();
     }
   }
   updateTimer() {
@@ -3270,14 +3270,14 @@ class Tt {
     function c() {
       l.style.opacity = i ? "0" : "1";
     }
-    function p() {
+    function h() {
       a.style.display = i ? "flex" : "none", a.innerHTML = s ? dt : Vi;
     }
-    return o.addEventListener("click", (d) => {
-      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();
+    return o.addEventListener("click", (p) => {
+      p.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(), h();
     }), r.addEventListener("pause", () => {
-      i && (i = !1, s = !0, r.muted = !0, c(), p());
+      i && (i = !1, s = !0, r.muted = !0, c(), h());
     }), o;
   }
 }
@@ -3514,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 _ = class _ {
+const T = class T {
   /** Opens a fullscreen lightbox overlay showing the image. */
   static open(e) {
-    _.close();
+    T.close();
     const t = document.createElement("div");
     t.id = "pulse-widget-lightbox", Object.assign(t.style, {
       position: "fixed",
@@ -3561,7 +3561,7 @@ const _ = class _ {
     }), i.addEventListener("mouseleave", () => {
       i.style.background = "rgba(255,255,255,0.15)";
     }), i.addEventListener("click", (r) => {
-      r.stopPropagation(), _.close();
+      r.stopPropagation(), T.close();
     });
     const s = document.createElement("img");
     s.src = e, s.alt = "Lightbox image", Object.assign(s.style, {
@@ -3574,26 +3574,26 @@ const _ = class _ {
     }), s.addEventListener("click", (r) => {
       r.stopPropagation();
     }), t.appendChild(i), t.appendChild(s), t.addEventListener("click", () => {
-      _.close();
+      T.close();
     });
     const o = (r) => {
-      r.key === "Escape" && _.close();
+      r.key === "Escape" && T.close();
     };
-    document.addEventListener("keydown", o), _.overlay = t, _.onKeyDown = o, document.body.appendChild(t), requestAnimationFrame(() => {
+    document.addEventListener("keydown", o), T.overlay = t, T.onKeyDown = o, document.body.appendChild(t), requestAnimationFrame(() => {
       t.style.opacity = "1";
     });
   }
   /** Closes the lightbox if open. */
   static close() {
-    if (!_.overlay) return;
-    const e = _.overlay;
-    _.onKeyDown && (document.removeEventListener("keydown", _.onKeyDown), _.onKeyDown = null), e.style.opacity = "0", e.addEventListener("transitionend", () => {
+    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", () => {
       e.remove();
-    }), _.overlay = null;
+    }), T.overlay = null;
   }
 };
-_.overlay = null, _.onKeyDown = null;
-let ke = _;
+T.overlay = null, T.onKeyDown = null;
+let ke = T;
 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);
@@ -3630,6 +3630,44 @@ class ne {
       this.input.addEventListener("change", s, { once: !0 }), this.input.addEventListener("cancel", i, { once: !0 }), this.input.click();
     });
   }
+  /**
+   * Opens the native file picker with multi-select enabled.
+   * Uploads up to `maxFiles` files in parallel and returns the results.
+   */
+  pickFiles(e, t) {
+    return new Promise((i) => {
+      this.input.accept = e, this.input.multiple = !0, this.input.value = "";
+      const s = () => {
+        r(), i([]);
+      }, o = async () => {
+        r();
+        const l = this.input.files;
+        if (!l || l.length === 0) {
+          i([]);
+          return;
+        }
+        const a = Array.from(l).slice(0, t);
+        this.uploading = !0;
+        try {
+          const c = await Promise.all(
+            a.map(async (h) => {
+              try {
+                return await this.client.uploadFile(h);
+              } catch (p) {
+                return console.error("[Pulse] File upload failed:", p), null;
+              }
+            })
+          );
+          i(c.filter((h) => h !== null));
+        } finally {
+          this.uploading = !1, this.input.multiple = !1;
+        }
+      }, r = () => {
+        this.input.removeEventListener("change", o), this.input.removeEventListener("cancel", s);
+      };
+      this.input.addEventListener("change", o, { once: !0 }), this.input.addEventListener("cancel", s, { once: !0 }), this.input.click();
+    });
+  }
   /**
    * Uploads a Blob directly (useful for recorded audio/video).
    * Wraps the blob as a File so PulseClient.uploadFile can handle it.
@@ -3828,47 +3866,77 @@ class Ji {
           ">Pin Comment</button>
         </div>
       </div>
-      <div class="pin-attachments-preview" style="margin-top:6px;"></div>
+      <div class="pin-attachments-preview" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;"></div>
     `;
-    const a = this.form.querySelector("textarea"), c = this.form.querySelector(".pulse-close-btn"), p = this.form.querySelector(".pin-submit");
+    const a = this.form.querySelector("textarea"), c = this.form.querySelector(".pulse-close-btn"), h = 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");
+    const p = this.form.querySelector(".pin-attachments-preview"), u = (m, x) => {
+      const b = document.createElement("div");
+      Object.assign(b.style, { position: "relative", display: "inline-block" }), b.appendChild(x);
+      const y = document.createElement("button");
+      y.innerHTML = "×", Object.assign(y.style, {
+        position: "absolute",
+        top: "-4px",
+        right: "-4px",
+        width: "16px",
+        height: "16px",
+        borderRadius: "50%",
+        background: "#ef4444",
+        color: "#fff",
+        border: "none",
+        fontSize: "11px",
+        lineHeight: "1",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        fontWeight: "700"
+      }), y.addEventListener("click", () => {
+        const E = this.pendingAttachmentIds.indexOf(m);
+        E !== -1 && this.pendingAttachmentIds.splice(E, 1), b.remove();
+      }), b.appendChild(y), p.appendChild(b);
+    }, f = 5;
     this.form.querySelector(".attach-img").addEventListener("click", async () => {
-      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);
+      const m = f - this.pendingAttachmentIds.length;
+      if (m <= 0) return;
+      const x = await this.upload.pickFiles("image/*", m);
+      for (const b of x) {
+        this.pendingAttachmentIds.push(b.id);
+        const y = document.createElement("img");
+        y.src = b.thumbnailUrl || b.url, Object.assign(y.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), u(b.id, y);
       }
     }), this.form.querySelector(".attach-mic").addEventListener("click", async () => {
+      if (this.pendingAttachmentIds.length >= f) return;
       this.audioRecorder || (this.audioRecorder = new Re());
-      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 m = await this.audioRecorder.startRecording(p);
+      if (m) {
+        const x = await this.upload.uploadBlob(m, "audio.webm");
+        if (x) {
+          this.pendingAttachmentIds.push(x.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);
+          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", u(x.id, b);
         }
       }
     }), this.form.querySelector(".attach-video").addEventListener("click", async () => {
+      if (this.pendingAttachmentIds.length >= f) return;
       this.videoRecorder || (this.videoRecorder = new Le());
-      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 m = await this.videoRecorder.startRecording(p);
+      if (m) {
+        const x = await this.upload.uploadBlob(m.blob, "video.webm");
+        if (x) {
+          this.pendingAttachmentIds.push(x.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);
+          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", u(x.id, b);
         }
       }
-    }), 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();
+    }), h.addEventListener("click", () => {
+      const m = a.value.trim();
+      if (!m && this.pendingAttachmentIds.length === 0) return;
+      const x = [...(m || "").matchAll(/@(\w+)/g)].map((b) => b[1]);
+      this.client.createThread(m, { position: i, mentions: x, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
+    }), a.addEventListener("keydown", (m) => {
+      m.key === "Escape" && this.exitPinMode(), m.stopPropagation();
     }), document.body.appendChild(this.form), requestAnimationFrame(() => a.focus());
   }
   // ── Inline thread popover (shown when a pin dot is clicked) ──
@@ -3932,12 +4000,12 @@ 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((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>' : "";
+      const c = this.client.state.getUser(a.userId), h = c ? c.name.split(" ").map((k) => k[0]).join("").toUpperCase().slice(0, 2) : "?", p = (c == null ? void 0 : c.color) ?? "#94a3b8", u = this.escapeHtml((c == null ? void 0 : c.name) ?? "Unknown"), f = this.formatTime(a.createdAt), m = i === a.userId, x = 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}">
               <div style="display:flex;align-items:center;gap:7px;margin-bottom:4px;">
-                <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>
+                <div style="width:22px;height:22px;border-radius:50%;background:${p};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${h}</div>
                 <span style="font-size:12px;font-weight:600;color:#0f172a;">${u}</span>
               </div>
               <div style="margin-left:29px;">
@@ -3949,37 +4017,37 @@ class Ji {
               </div>
             </div>
           `;
-      const C = a.body && a.body !== "(attachment)" ? a.body.replace(
+      const b = 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>'
-      ) : "", 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;" />
+      ) : "", y = (a.attachments ?? []).map((k) => {
+        if (k.type === "image") {
+          const Pt = k.thumbnailUrl || k.url;
+          return `<div class="popover-attachment-img" data-full-url="${this.escapeHtml(k.url)}" style="margin:4px 0 4px 29px;cursor:pointer;">
+              <img src="${this.escapeHtml(Pt)}" alt="${this.escapeHtml(k.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
             </div>`;
         }
-        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;">
+        return k.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(k.url)}" data-duration="${k.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : k.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(k.url)}" data-poster="${this.escapeHtml(k.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
+      }).join(""), E = m ? `<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>` : "", P = this.buildReactionPillsHtml(a.id);
+            </div>` : "", I = 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>
+              <div style="width:22px;height:22px;border-radius:50%;background:${p};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${h}</div>
               <span style="font-size:12px;font-weight:600;color:#0f172a;">${u}</span>
-              <span style="font-size:10px;color:#94a3b8;">${m}</span>
-              ${I}
+              <span style="font-size:10px;color:#94a3b8;">${f}</span>
+              ${x}
             </div>
-            ${C ? `<div style="font-size:13px;color:#334155;line-height:1.45;margin-left:29px;word-wrap:break-word;">${C}</div>` : ""}
-            ${w}
-            ${$}
-            ${P}
+            ${b ? `<div style="font-size:13px;color:#334155;line-height:1.45;margin-left:29px;word-wrap:break-word;">${b}</div>` : ""}
+            ${y}
+            ${E}
+            ${I}
           </div>
         `;
     }).join(""), t.querySelectorAll(".edit-btn").forEach((a) => {
@@ -3997,7 +4065,7 @@ class Ji {
     s && r && s.addEventListener("click", () => {
       const a = r.value.trim();
       if (!a) return;
-      const c = [...a.matchAll(/@(\w+)/g)].map((p) => p[1]);
+      const c = [...a.matchAll(/@(\w+)/g)].map((h) => h[1]);
       this.client.editComment(
         this.editingPopoverCommentId,
         a,
@@ -4008,14 +4076,14 @@ class Ji {
     }), t.querySelectorAll("[data-reaction-emoji]").forEach((a) => {
       a.addEventListener("click", (c) => {
         c.stopPropagation();
-        const p = a.dataset.reactionEmoji, d = a.dataset.reactionTarget, u = a.dataset.reactionId;
-        u ? this.client.removeReaction(u) : this.client.addReaction(d, "comment", p);
+        const h = a.dataset.reactionEmoji, p = a.dataset.reactionTarget, u = a.dataset.reactionId;
+        u ? this.client.removeReaction(u) : this.client.addReaction(p, "comment", h);
       });
     }), t.querySelectorAll(".popover-reaction-add").forEach((a) => {
       a.addEventListener("click", (c) => {
         c.stopPropagation();
-        const p = a.dataset.commentId;
-        this.popoverPickerOpen === p ? (this.popoverPickerOpen = null, this.removePickerEl()) : (this.popoverPickerOpen = p, this.showPickerForButton(a, p));
+        const h = a.dataset.commentId;
+        this.popoverPickerOpen === h ? (this.popoverPickerOpen = null, this.removePickerEl()) : (this.popoverPickerOpen = h, this.showPickerForButton(a, h));
       });
     }), t.querySelectorAll(".popover-attachment-img").forEach((a) => {
       a.addEventListener("click", () => {
@@ -4025,14 +4093,14 @@ class Ji {
     }), t.querySelectorAll(".popover-attachment-audio").forEach((a) => {
       const c = a.dataset.url;
       if (c) {
-        const p = a.dataset.duration ? parseInt(a.dataset.duration) : void 0, d = Oe.render(c, p);
-        a.appendChild(d);
+        const h = a.dataset.duration ? parseInt(a.dataset.duration) : void 0, p = Oe.render(c, h);
+        a.appendChild(p);
       }
     }), t.querySelectorAll(".popover-attachment-video").forEach((a) => {
       const c = a.dataset.url;
       if (c) {
-        const p = a.dataset.poster || void 0, d = Tt.render(c, p);
-        a.appendChild(d);
+        const h = a.dataset.poster || void 0, p = Tt.render(c, h);
+        a.appendChild(p);
       }
     }), t.scrollTop = t.scrollHeight;
   }
@@ -4065,39 +4133,67 @@ class Ji {
     `;
     const o = t.querySelector("input"), r = t.querySelector(".reply-send"), l = t.querySelector(".reply-attachments-preview");
     this.upload || (this.upload = new ne(this.client));
-    const a = [], c = (d) => {
-      const u = document.createElement("span");
-      Object.assign(u.style, { display: "inline-block", padding: "2px 8px", borderRadius: "4px", background: "#f1f5f9", fontSize: "10px", color: "#64748b" }), u.textContent = d, l.appendChild(u);
-    };
+    const a = [], c = (u, f) => {
+      const m = document.createElement("span");
+      Object.assign(m.style, { position: "relative", display: "inline-flex", alignItems: "center", padding: "2px 18px 2px 8px", borderRadius: "4px", background: "#f1f5f9", fontSize: "10px", color: "#64748b" }), m.textContent = f;
+      const x = document.createElement("button");
+      x.innerHTML = "×", Object.assign(x.style, {
+        position: "absolute",
+        top: "-3px",
+        right: "-3px",
+        width: "14px",
+        height: "14px",
+        borderRadius: "50%",
+        background: "#ef4444",
+        color: "#fff",
+        border: "none",
+        fontSize: "10px",
+        lineHeight: "1",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        fontWeight: "700"
+      }), x.addEventListener("click", () => {
+        const b = a.indexOf(u);
+        b !== -1 && a.splice(b, 1), m.remove();
+      }), m.appendChild(x), l.appendChild(m);
+    }, h = 5;
     t.querySelector(".reply-attach-img").addEventListener("click", async () => {
-      const d = await this.upload.pickFile("image/*");
-      d && (a.push(d.id), c("📎 Image"));
+      const u = h - a.length;
+      if (u <= 0) return;
+      const f = await this.upload.pickFiles("image/*", u);
+      for (const m of f)
+        a.push(m.id), c(m.id, "📎 Image");
     }), t.querySelector(".reply-attach-mic").addEventListener("click", async () => {
+      if (a.length >= h) return;
       this.audioRecorder || (this.audioRecorder = new Re());
-      const d = await this.audioRecorder.startRecording(t);
-      if (d) {
-        const u = await this.upload.uploadBlob(d, "audio.webm");
-        u && (a.push(u.id), c("🎤 Audio"));
+      const u = await this.audioRecorder.startRecording(t);
+      if (u) {
+        const f = await this.upload.uploadBlob(u, "audio.webm");
+        f && (a.push(f.id), c(f.id, "🎤 Audio"));
       }
     }), t.querySelector(".reply-attach-video").addEventListener("click", async () => {
+      if (a.length >= h) return;
       this.videoRecorder || (this.videoRecorder = new Le());
-      const d = await this.videoRecorder.startRecording(t);
-      if (d) {
-        const u = await this.upload.uploadBlob(d.blob, "video.webm");
-        u && (a.push(u.id), c("🎥 Video"));
+      const u = await this.videoRecorder.startRecording(t);
+      if (u) {
+        const f = await this.upload.uploadBlob(u.blob, "video.webm");
+        f && (a.push(f.id), c(f.id, "🎥 Video"));
       }
     });
     const p = () => {
-      const d = o.value.trim();
-      if (!d && a.length === 0) return;
-      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 = "";
+      const u = o.value.trim();
+      if (!u && a.length === 0) return;
+      const f = [...(u || "").matchAll(/@(\w+)/g)].map((m) => m[1]);
+      this.client.reply(e.id, u, f, 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;
-      d - u >= 2e3 && (this.client.sendTyping(e.id), this.lastTypingSendPins.set(e.id, d));
-    }), o.addEventListener("keydown", (d) => {
-      d.key === "Enter" && (d.preventDefault(), p()), d.key === "Escape" && this.closePopover(), d.stopPropagation();
+      const u = Date.now(), f = this.lastTypingSendPins.get(e.id) ?? 0;
+      u - f >= 2e3 && (this.client.sendTyping(e.id), this.lastTypingSendPins.set(e.id, u));
+    }), o.addEventListener("keydown", (u) => {
+      u.key === "Enter" && (u.preventDefault(), p()), u.key === "Escape" && this.closePopover(), u.stopPropagation();
     }), this.popover.appendChild(t);
   }
   removePickerEl() {
@@ -4136,8 +4232,8 @@ class Ji {
         r.stopPropagation();
         const a = this.client.state.getReactions(t).find(
           (c) => {
-            var p;
-            return c.emoji === s && c.userId === ((p = this.client.state.user) == null ? void 0 : p.id);
+            var h;
+            return c.emoji === s && c.userId === ((h = this.client.state.user) == null ? void 0 : h.id);
           }
         );
         a ? this.client.removeReaction(a.id) : this.client.addReaction(t, "comment", s), this.popoverPickerOpen = null, this.removePickerEl();
@@ -4149,15 +4245,15 @@ class Ji {
     var a;
     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 = s.get(c.emoji) ?? { count: 0, ownId: null };
-      p.count++, c.userId === i && (p.ownId = c.id), s.set(c.emoji, p);
+      const h = s.get(c.emoji) ?? { count: 0, ownId: null };
+      h.count++, c.userId === i && (h.ownId = c.id), s.set(c.emoji, h);
     }
     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 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>
+    for (const [c, { count: h, ownId: p }] of s) {
+      const u = p ? r : o;
+      l += `<button data-reaction-emoji="${c}" data-reaction-target="${e}" ${p ? `data-reaction-id="${p}"` : ""} style="${u}">
+        <span>${c}</span><span style="font-size:11px;font-weight:600;color:#64748b;">${h}</span>
       </button>`;
     }
     return l += `<button class="popover-reaction-add" data-comment-id="${e}" style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px dashed #e2e8f0;background:none;cursor:pointer;color:#94a3b8;font-size:14px;">+</button>`, l += "</div>", l;
@@ -4263,7 +4359,7 @@ var Qi = Object.defineProperty, es = Object.getOwnPropertyDescriptor, j = (n, e,
   return i && s && Qi(e, t, s), s;
 };
 const ts = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let O = class extends T {
+let P = class extends S {
   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 = [];
   }
@@ -4360,7 +4456,7 @@ let O = class extends T {
   }
   parseMentions(n) {
     return n.split(/(@\w+)/g).map(
-      (t) => t.startsWith("@") ? h`<span class="mention">${t}</span>` : t
+      (t) => t.startsWith("@") ? d`<span class="mention">${t}</span>` : t
     );
   }
   getInitials(n) {
@@ -4378,11 +4474,14 @@ let O = class extends T {
   }
   async handleAttachImage() {
     this.upload || (this.upload = new ne(this.client));
-    const n = await this.upload.pickFile("image/*");
-    n && (this.replyAttachmentIds.push(n.id), this.requestUpdate());
+    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 >= P.MAX_ATTACHMENTS) return;
     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="${n}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4392,6 +4491,7 @@ let O = class extends T {
   }
   async handleRecordVideo(n) {
     var i;
+    if (this.replyAttachmentIds.length >= P.MAX_ATTACHMENTS) return;
     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="${n}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4399,6 +4499,9 @@ let O = class extends T {
       s && (this.replyAttachmentIds.push(s.id), this.requestUpdate());
     }
   }
+  removeReplyAttachment(n) {
+    this.replyAttachmentIds = this.replyAttachmentIds.filter((e) => e !== n), this.requestUpdate();
+  }
   handleReply(n, e) {
     e.preventDefault();
     const i = e.target.querySelector("input"), s = i.value.trim();
@@ -4426,7 +4529,7 @@ let O = class extends T {
     this.client.deleteComment(n);
   }
   renderEditForm(n) {
-    return h`
+    return d`
       <div class="edit-form">
         <textarea
           .value=${this.editBody}
@@ -4447,12 +4550,12 @@ let O = class extends T {
     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`
+    return d`
       <div class="comment-reactions">
         ${[...i.entries()].map(
       ([o, r]) => {
         const l = r.some((a) => a.userId === t);
-        return h`
+        return d`
               <button
                 class="reaction-pill ${l ? "own" : ""}"
                 @click=${() => this.toggleReaction(n.id, o)}
@@ -4471,26 +4574,26 @@ let O = class extends T {
           title="Add reaction"
         >
           +
-          ${this.pickerOpenForComment === n.id ? h`
+          ${this.pickerOpenForComment === n.id ? d`
                 <div class="emoji-picker">
                   ${ts.map(
-      (o) => h`
+      (o) => d`
                       <button @click=${(r) => {
         r.stopPropagation(), this.toggleReaction(n.id, o);
       }}>${o}</button>
                     `
     )}
                 </div>
-              ` : f}
+              ` : g}
         </button>
       </div>
     `;
   }
   renderTypingIndicator(n) {
     const e = this.typingByThread.get(n) ?? [];
-    if (e.length === 0) return f;
+    if (e.length === 0) return g;
     const t = e.length === 1 ? `${e[0]} is typing...` : `${e.join(", ")} are typing...`;
-    return h`<div class="typing-indicator">${t}</div>`;
+    return d`<div class="typing-indicator">${t}</div>`;
   }
   sortedThreads() {
     return [...this.threads].sort((n, e) => {
@@ -4501,7 +4604,7 @@ let O = class extends T {
   }
   render() {
     const n = this.sortedThreads();
-    return h`
+    return d`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
@@ -4509,12 +4612,12 @@ let O = class extends T {
             <span class="thread-count">${this.threads.length}</span>
           </span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${k(me, 16)}
+            ${C(me, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${n.length === 0 ? h`<div class="empty">
+          ${n.length === 0 ? d`<div class="empty">
                 <div class="empty-icon">&#128172;</div>
                 No comments yet
               </div>` : n.map((e) => this.renderThread(e))}
@@ -4527,11 +4630,11 @@ let O = class extends T {
     `;
   }
   renderAttachments(n) {
-    return !n || n.length === 0 ? f : h`
+    return !n || n.length === 0 ? g : d`
       ${n.map((e) => {
       if (e.type === "image") {
         const t = e.thumbnailUrl || e.url;
-        return h`
+        return d`
             <div class="comment-attachment-media">
               <img
                 class="comment-attachment-img"
@@ -4542,40 +4645,40 @@ let O = class extends T {
             </div>
           `;
       }
-      return e.type === "audio" ? h`
+      return e.type === "audio" ? d`
             <div class="comment-attachment-media" id="audio-${e.id}">
               ${this.renderAudioPlayer(e)}
             </div>
-          ` : e.type === "video" ? h`
+          ` : e.type === "video" ? d`
             <div class="comment-attachment-media" id="video-${e.id}">
               ${this.renderVideoPlayer(e)}
             </div>
-          ` : f;
+          ` : g;
     })}
     `;
   }
   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>`;
+    return e.appendChild(t), d`<div class="audio-player-host" data-url=${n.url} data-duration=${n.durationMs ?? ""}></div>`;
   }
   renderVideoPlayer(n) {
-    return h`<div class="video-player-host" data-url=${n.url} data-poster=${n.thumbnailUrl ?? ""}></div>`;
+    return d`<div class="video-player-host" data-url=${n.url} data-poster=${n.thumbnailUrl ?? ""}></div>`;
   }
   renderThread(n) {
     const e = this.highlightThreadId === n.id;
-    return h`
+    return d`
       <div
         class="thread ${n.resolved ? "resolved" : ""} ${e ? "highlighted" : ""}"
         data-thread-id=${n.id}
       >
-        ${n.position ? h`<div class="pin-badge">
-              ${k(_t, 12)}
+        ${n.position ? d`<div class="pin-badge">
+              ${C(_t, 12)}
               Pinned
-            </div>` : f}
+            </div>` : g}
         ${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>` : f}
+      return d`
+            ${i > 0 ? d`<div class="comment-divider"></div>` : g}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -4586,16 +4689,16 @@ let O = class extends T {
                 </div>
                 <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>` : f}
+                ${t.editedAt ? d`<span class="edited-badge">(edited)</span>` : g}
               </div>
-              ${r ? this.renderEditForm(t) : h`
-                    ${t.body && t.body !== "(attachment)" ? h`<div class="comment-body">${this.parseMentions(t.body)}</div>` : f}
+              ${r ? this.renderEditForm(t) : d`
+                    ${t.body && t.body !== "(attachment)" ? d`<div class="comment-body">${this.parseMentions(t.body)}</div>` : g}
                     ${this.renderAttachments(t.attachments ?? [])}
                   `}
-              ${o && !r ? h`<div class="comment-actions">
-                    <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}
+              ${o && !r ? d`<div class="comment-actions">
+                    <button @click=${() => this.startEdit(t)} title="Edit">${C(Ai, 14)}</button>
+                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${C(Mi, 14)}</button>
+                  </div>` : g}
               ${this.renderReactions(t)}
             </div>
           `;
@@ -4616,7 +4719,7 @@ let O = class extends T {
 
         ${this.renderTypingIndicator(n.id)}
 
-        ${this.replyingTo === n.id ? h`
+        ${this.replyingTo === n.id ? d`
               <form
                 class="reply-form"
                 @submit=${(t) => this.handleReply(n.id, t)}
@@ -4635,36 +4738,43 @@ let O = class extends T {
                     class="reply-media-btn"
                     title="Attach image"
                     @click=${() => this.handleAttachImage()}
-                  >${k(Si, 16)}</button>
+                  >${C(Si, 16)}</button>
                   <button
                     type="button"
                     class="reply-media-btn"
                     title="Record audio"
                     @click=${() => this.handleRecordAudio(n.id)}
-                  >${k(Ti, 16)}</button>
+                  >${C(Ti, 16)}</button>
                   <button
                     type="button"
                     class="reply-media-btn"
                     title="Record video"
                     @click=${() => this.handleRecordVideo(n.id)}
-                  >${k(Oi, 16)}</button>
+                  >${C(Oi, 16)}</button>
                   <div class="reply-preview">
                     ${this.replyAttachmentIds.map(
-      (t, i) => h`<span class="reply-preview-badge">Attached #${i + 1}</span>`
+      (t, i) => d`<span class="reply-preview-badge">
+                        Attached #${i + 1}
+                        <button
+                          type="button"
+                          class="reply-preview-remove"
+                          @click=${() => this.removeReplyAttachment(t)}
+                        >×</button>
+                      </span>`
     )}
                   </div>
                 </div>
               </form>
-            ` : f}
+            ` : g}
       </div>
     `;
   }
 };
-O.styles = [
+P.styles = [
   ee,
   ge,
   _e,
-  A`
+  M`
       :host {
         display: block;
       }
@@ -4905,7 +5015,10 @@ O.styles = [
       }
 
       .reply-preview-badge {
-        display: inline-block;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
         padding: 2px 8px;
         border-radius: 4px;
         background: var(--pw-surface-hover);
@@ -4913,6 +5026,24 @@ O.styles = [
         color: var(--pw-text-muted);
       }
 
+      .reply-preview-remove {
+        border: none;
+        background: var(--pw-danger, #ef4444);
+        color: #fff;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        font-size: 10px;
+        line-height: 1;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        font-weight: 700;
+        flex-shrink: 0;
+      }
+
       .reply-form .pw-btn-primary {
         padding: 8px 14px;
         font-size: 12px;
@@ -5183,36 +5314,37 @@ O.styles = [
       }
     `
 ];
+P.MAX_ATTACHMENTS = 5;
 j([
-  g({ attribute: !1 })
-], O.prototype, "client", 2);
-j([
-  g()
-], O.prototype, "highlightThreadId", 2);
+  v({ attribute: !1 })
+], P.prototype, "client", 2);
 j([
   v()
-], O.prototype, "threadsVersion", 2);
+], P.prototype, "highlightThreadId", 2);
 j([
-  v()
-], O.prototype, "replyingTo", 2);
+  w()
+], P.prototype, "threadsVersion", 2);
 j([
-  v()
-], O.prototype, "editingCommentId", 2);
+  w()
+], P.prototype, "replyingTo", 2);
 j([
-  v()
-], O.prototype, "editBody", 2);
+  w()
+], P.prototype, "editingCommentId", 2);
 j([
-  v()
-], O.prototype, "pickerOpenForComment", 2);
+  w()
+], P.prototype, "editBody", 2);
 j([
-  v()
-], O.prototype, "typingByThread", 2);
+  w()
+], P.prototype, "pickerOpenForComment", 2);
 j([
-  v()
-], O.prototype, "reactionsVersion", 2);
-O = j([
+  w()
+], P.prototype, "typingByThread", 2);
+j([
+  w()
+], P.prototype, "reactionsVersion", 2);
+P = j([
   R("pulse-widget-comments-panel")
-], O);
+], P);
 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);
@@ -5231,7 +5363,7 @@ const ns = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let de = class extends T {
+let de = class extends S {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -5275,29 +5407,29 @@ let de = class extends T {
   }
   render() {
     const n = this.notifications.filter((e) => !e.read).length;
-    return h`
+    return d`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
             Notifications
-            ${n > 0 ? h`<span class="unread-badge">${n}</span>` : f}
+            ${n > 0 ? d`<span class="unread-badge">${n}</span>` : g}
           </span>
           <div style="display:flex;align-items:center;gap:4px;">
-            ${n > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+            ${n > 0 ? d`<button class="mark-all" @click=${() => this.client.markAllRead()}>
                   Mark all read
-                </button>` : f}
+                </button>` : g}
             <button class="close-btn" @click=${this.fireClose} title="Close">
-              ${k(me, 16)}
+              ${C(me, 16)}
             </button>
           </div>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${this.notifications.length === 0 ? h`<div class="empty">
+          ${this.notifications.length === 0 ? d`<div class="empty">
                 <div class="empty-icon">&#128276;</div>
                 No notifications
               </div>` : this.notifications.map(
-      (e) => h`
+      (e) => d`
                   <div
                     class="item ${e.read ? "" : "unread"}"
                     @click=${() => this.handleClick(e)}
@@ -5323,7 +5455,7 @@ de.styles = [
   ee,
   ge,
   _e,
-  A`
+  M`
       :host {
         display: block;
       }
@@ -5517,10 +5649,10 @@ de.styles = [
     `
 ];
 Ve([
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], de.prototype, "client", 2);
 Ve([
-  v()
+  w()
 ], de.prototype, "notifications", 2);
 de = Ve([
   R("pulse-widget-notifications-panel")
@@ -5883,14 +6015,14 @@ class hs {
     ), r = (o == null ? void 0 : o.user.color) ?? "#6366f1";
     try {
       const a = s.getClientRects(), c = [];
-      for (let p = 0; p < a.length; p++) {
-        const d = a[p], u = document.createElement("div");
+      for (let h = 0; h < a.length; h++) {
+        const p = a[h], u = document.createElement("div");
         Object.assign(u.style, {
           position: "absolute",
-          left: `${d.left}px`,
-          top: `${d.top}px`,
-          width: `${d.width}px`,
-          height: `${d.height}px`,
+          left: `${p.left}px`,
+          top: `${p.top}px`,
+          width: `${p.width}px`,
+          height: `${p.height}px`,
           background: r,
           opacity: "0.2",
           borderRadius: "2px",
@@ -5920,7 +6052,7 @@ var ps = Object.defineProperty, us = Object.getOwnPropertyDescriptor, qe = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && ps(e, t, s), s;
 };
-let he = class extends T {
+let he = class extends S {
   constructor() {
     super(...arguments), this.roomId = "";
   }
@@ -5940,7 +6072,7 @@ let he = class extends T {
     );
   }
   renderToggle(n, e) {
-    return h`
+    return d`
       <div class="setting-row">
         <span class="setting-label">${n}</span>
         <label class="toggle">
@@ -5956,12 +6088,12 @@ let he = class extends T {
   }
   render() {
     const n = !this.settings.enabled;
-    return h`
+    return d`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Settings</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${k(me, 16)}
+            ${C(me, 16)}
           </button>
         </div>
 
@@ -6010,7 +6142,7 @@ he.styles = [
   ee,
   ge,
   _e,
-  A`
+  M`
       :host {
         display: block;
       }
@@ -6182,10 +6314,10 @@ he.styles = [
     `
 ];
 qe([
-  g({ attribute: !1 })
+  v({ attribute: !1 })
 ], he.prototype, "settings", 2);
 qe([
-  g()
+  v()
 ], he.prototype, "roomId", 2);
 he = qe([
   R("pulse-widget-settings-panel")
@@ -6218,7 +6350,7 @@ var gs = Object.defineProperty, bs = Object.getOwnPropertyDescriptor, L = (n, e,
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && gs(e, t, s), s;
 };
-let M = class extends T {
+let O = class extends S {
   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;
   }
@@ -6269,35 +6401,35 @@ let M = class extends T {
   render() {
     const n = this.display === "inline";
     if (this.collapsed)
-      return h`
+      return d`
         <div class="toolbar collapsed ${n ? "inline" : ""}" @click=${this.fireToggle}>
-          <span class="fab-icon">${k(Ri, n ? 18 : 24)}</span>
+          <span class="fab-icon">${C(Ri, n ? 18 : 24)}</span>
         </div>
       `;
     const e = this.users.slice(0, 3), t = this.users.length - 3;
-    return h`
+    return d`
       <div class="toolbar ${n ? "inline" : ""}"
         <!-- Presence avatars -->
-        ${this.users.length > 0 ? h`
+        ${this.users.length > 0 ? d`
               <div class="presence">
-                ${t > 0 ? h`<div class="presence-overflow">+${t}</div>` : f}
+                ${t > 0 ? d`<div class="presence-overflow">+${t}</div>` : g}
                 ${e.map(
-      (i) => h`
+      (i) => d`
                     <div
                       class="presence-avatar clickable ${this.followingUserId === i.user.id ? "following" : ""}"
                       style="background:${i.user.color}"
                       @click=${() => this.fireFollow(i.user.id)}
                       title="Click to follow ${i.user.name}"
                     >
-                      ${i.user.avatar ? h`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
+                      ${i.user.avatar ? d`<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>` : f}
+                      ${i.deviceType && i.deviceType !== "desktop" ? d`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : g}
                     </div>
                   `
     )}
               </div>
               <div class="separator"></div>
-            ` : f}
+            ` : g}
 
         <!-- Pin comment (primary) -->
         <button
@@ -6307,7 +6439,7 @@ let M = class extends T {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${k(_t)}
+          ${C(_t)}
         </button>
 
         <!-- View comments -->
@@ -6318,7 +6450,7 @@ let M = class extends T {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${k(_i)}
+          ${C(_i)}
         </button>
 
         <!-- Activity feed -->
@@ -6329,7 +6461,7 @@ let M = class extends T {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${k(Ci)}
+          ${C(Ci)}
         </button>
 
         <!-- Draw mode -->
@@ -6340,7 +6472,7 @@ let M = class extends T {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${k(Pi)}
+          ${C(Pi)}
         </button>
 
         <!-- Notifications -->
@@ -6351,8 +6483,8 @@ let M = class extends T {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : "position:relative"}"
         >
-          ${k(Ei)}
-          ${this.unreadCount > 0 ? h`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : f}
+          ${C(Ei)}
+          ${this.unreadCount > 0 ? d`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : g}
         </button>
 
         <!-- Settings -->
@@ -6361,7 +6493,7 @@ let M = class extends T {
           @click=${() => this.fire("settings")}
           title="Settings"
         >
-          ${k(Ii)}
+          ${C(Ii)}
         </button>
 
         <div class="separator"></div>
@@ -6372,16 +6504,16 @@ let M = class extends T {
           @click=${this.fireToggle}
           title="Collapse"
         >
-          ${k(me, 14)}
+          ${C(me, 14)}
         </button>
       </div>
     `;
   }
 };
-M.styles = [
+O.styles = [
   ee,
   ge,
-  A`
+  M`
       :host {
         display: block;
       }
@@ -6594,38 +6726,38 @@ M.styles = [
     `
 ];
 L([
-  g({ attribute: !1 })
-], M.prototype, "client", 2);
-L([
-  g({ type: Boolean })
-], M.prototype, "collapsed", 2);
-L([
-  g()
-], M.prototype, "activePanel", 2);
+  v({ attribute: !1 })
+], O.prototype, "client", 2);
 L([
-  g({ type: Boolean })
-], M.prototype, "pinModeActive", 2);
+  v({ type: Boolean })
+], O.prototype, "collapsed", 2);
 L([
-  g({ type: Boolean })
-], M.prototype, "featuresDisabled", 2);
+  v()
+], O.prototype, "activePanel", 2);
 L([
-  g({ type: Boolean })
-], M.prototype, "drawModeActive", 2);
+  v({ type: Boolean })
+], O.prototype, "pinModeActive", 2);
 L([
-  g()
-], M.prototype, "followingUserId", 2);
+  v({ type: Boolean })
+], O.prototype, "featuresDisabled", 2);
 L([
-  g()
-], M.prototype, "display", 2);
+  v({ type: Boolean })
+], O.prototype, "drawModeActive", 2);
 L([
   v()
-], M.prototype, "users", 2);
+], O.prototype, "followingUserId", 2);
 L([
   v()
-], M.prototype, "unreadCount", 2);
-M = L([
+], O.prototype, "display", 2);
+L([
+  w()
+], O.prototype, "users", 2);
+L([
+  w()
+], O.prototype, "unreadCount", 2);
+O = L([
   R("pulse-widget-toolbar")
-], M);
+], O);
 class vs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.pillEls = /* @__PURE__ */ new Map(), this.client = e;
@@ -6667,23 +6799,23 @@ class vs {
     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 === s) continue;
-      const c = a.scrollY, p = a.scrollY + a.viewportHeight, d = e, u = e + t;
-      if (c >= d && p <= u) {
-        const $ = this.pillEls.get(l);
-        $ && ($.style.display = "none");
+      const c = a.scrollY, h = a.scrollY + a.viewportHeight, p = e, u = e + t;
+      if (c >= p && h <= u) {
+        const E = this.pillEls.get(l);
+        E && (E.style.display = "none");
         continue;
       }
       o.add(l);
-      const m = this.client.state.presence.find(
-        ($) => $.user.id === l
+      const f = this.client.state.presence.find(
+        (E) => E.user.id === l
       );
-      if (!m) continue;
-      const b = a.scrollY + a.viewportHeight / 2, I = i > 0 ? b / i : 0, C = Math.max(
+      if (!f) continue;
+      const m = a.scrollY + a.viewportHeight / 2, x = i > 0 ? m / i : 0, b = Math.max(
         8,
-        Math.min(t - 28, I * t)
+        Math.min(t - 28, x * t)
       );
-      let w = this.pillEls.get(l);
-      w || (w = document.createElement("div"), Object.assign(w.style, {
+      let y = this.pillEls.get(l);
+      y || (y = document.createElement("div"), Object.assign(y.style, {
         position: "absolute",
         right: "8px",
         padding: "2px 6px",
@@ -6695,7 +6827,7 @@ class vs {
         whiteSpace: "nowrap",
         pointerEvents: "none",
         transition: "top 0.3s ease"
-      }), 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);
+      }), this.container.appendChild(y), this.pillEls.set(l, y)), y.style.display = "", y.style.background = f.user.color, y.style.top = `${b}px`, y.textContent = this.getInitials(f.user.name);
     }
     for (const [l, a] of this.pillEls)
       !o.has(l) && !this.client.state.viewports.has(l) && (a.remove(), this.pillEls.delete(l));
@@ -6704,12 +6836,12 @@ class vs {
     return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
   }
 }
-var xs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, S = (n, e, t, i) => {
+var xs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, A = (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 E = class extends T {
+let _ = class extends S {
   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(() => {
@@ -6838,12 +6970,12 @@ let E = class extends T {
     this.settings = e, ms(this.room, e), this.applySettings(e);
   }
   applySettings(n) {
-    var e, t, i, s, o, r, l, a, c, p, d, u, m, b, I, C, w;
+    var e, t, i, s, o, r, l, a, c, h, p, u, f, m, x, b, y;
     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(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));
+    this.applyCursorSettings(n), (c = this.client) == null || c.setAppearOffline(n.appearOffline), (h = this.commentPins) == null || h.setVisible(n.showCommentPins), n.showViewportIndicators ? (p = this.viewportOverlay) == null || p.enable() : (u = this.viewportOverlay) == null || u.disable(), n.showSelections ? (f = this.selectionOverlay) == null || f.enable() : (m = this.selectionOverlay) == null || m.disable(), n.showDrawings ? (x = this.drawingOverlay) == null || x.enable() : ((b = this.drawingOverlay) == null || b.disable(), this.drawModeActive && ((y = this.drawingOverlay) == null || y.disableDrawMode(), this.drawModeActive = !1));
   }
   applyCursorSettings(n) {
     if (!this.cursorOverlay) return;
@@ -6857,22 +6989,22 @@ let E = class extends T {
    * the trigger element, flipping vertically/horizontally as needed.
    */
   positionPopups() {
-    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;
+    var m, x, b, y;
+    const n = this.display === "inline", e = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".inline-trigger"), t = (x = this.shadowRoot) == null ? void 0 : x.querySelector("pulse-widget-toolbar"), i = n ? e : t;
     if (!i) return;
-    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, l = 8, a = (C = this.shadowRoot) == null ? void 0 : C.querySelector(".toolbar-popover");
+    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, l = 8, a = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".toolbar-popover");
     if (a) {
       Object.assign(a.style, { top: "auto", left: "auto" });
-      const $ = a.getBoundingClientRect(), P = this.computePosition(s, $, o, r, l);
-      a.style.top = `${P.top}px`, a.style.left = `${P.left}px`;
+      const E = a.getBoundingClientRect(), I = this.computePosition(s, E, o, r, l);
+      a.style.top = `${I.top}px`, a.style.left = `${I.left}px`;
     }
-    const c = (w = this.shadowRoot) == null ? void 0 : w.querySelector(".panel-container");
+    const c = (y = this.shadowRoot) == null ? void 0 : y.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(), m = this.computePosition(d, u, o, r, l);
-    c.style.top = `${m.top}px`, c.style.left = `${m.left}px`;
+    const h = a ?? t;
+    if (!h) return;
+    const p = h.getBoundingClientRect(), u = c.getBoundingClientRect(), f = this.computePosition(p, u, o, r, l);
+    c.style.top = `${f.top}px`, c.style.left = `${f.left}px`;
   }
   computePosition(n, e, t, i, s) {
     const o = n.top, r = i - n.bottom;
@@ -6891,13 +7023,13 @@ let E = class extends T {
     return (n == null ? void 0 : n.user.name) ?? "user";
   }
   renderConnectionBanner() {
-    return this.showConnectedFlash ? h`<div class="connection-banner connected">
+    return this.showConnectedFlash ? d`<div class="connection-banner connected">
         <span class="connection-dot"></span>Connected
-      </div>` : this.connectionState === "connecting" ? h`<div class="connection-banner connecting">
+      </div>` : this.connectionState === "connecting" ? d`<div class="connection-banner connecting">
         <span class="connection-dot"></span>Reconnecting...
-      </div>` : this.connectionState === "disconnected" && this.client ? h`<div class="connection-banner disconnected">
+      </div>` : this.connectionState === "disconnected" && this.client ? d`<div class="connection-banner disconnected">
         <span class="connection-dot"></span>Disconnected
-      </div>` : f;
+      </div>` : g;
   }
   handleToolbarToggle() {
     this.collapsed = !this.collapsed, this.collapsed && (this.activePanel = null, this.highlightThreadId = null);
@@ -6905,38 +7037,38 @@ let E = class extends T {
   render() {
     const n = this.display === "inline";
     if (n && this.collapsed)
-      return h`
+      return d`
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
             <slot>Collaborate</slot>
           </div>
         </div>
       `;
-    const e = this.activePanel ? h`
+    const e = this.activePanel ? d`
           <div class="panel-container anchored" @panel-close=${this.handlePanelClose}>
-            ${this.activePanel === "comments" ? h`<pulse-widget-comments-panel
+            ${this.activePanel === "comments" ? d`<pulse-widget-comments-panel
                   .client=${this.client}
                   .highlightThreadId=${this.highlightThreadId}
-                ></pulse-widget-comments-panel>` : f}
-            ${this.activePanel === "settings" ? h`<pulse-widget-settings-panel
+                ></pulse-widget-comments-panel>` : g}
+            ${this.activePanel === "settings" ? d`<pulse-widget-settings-panel
                   .settings=${this.settings}
                   .roomId=${this.room}
                   @settings-change=${this.handleSettingsChange}
-                ></pulse-widget-settings-panel>` : f}
-            ${this.activePanel === "notifications" ? h`<pulse-widget-notifications-panel
+                ></pulse-widget-settings-panel>` : g}
+            ${this.activePanel === "notifications" ? d`<pulse-widget-notifications-panel
                   .client=${this.client}
-                ></pulse-widget-notifications-panel>` : f}
-            ${this.activePanel === "activity" ? h`<pulse-widget-activity-panel
+                ></pulse-widget-notifications-panel>` : g}
+            ${this.activePanel === "activity" ? d`<pulse-widget-activity-panel
                   .client=${this.client}
-                ></pulse-widget-activity-panel>` : f}
+                ></pulse-widget-activity-panel>` : g}
           </div>
-        ` : f, t = this.followingUserId ? h`<div class="follow-banner">
+        ` : g, t = this.followingUserId ? d`<div class="follow-banner">
           Following ${this.getFollowUserName()}
           <button @click=${() => {
       this.followingUserId = null;
     }}>Stop</button>
-        </div>` : f;
-    return n ? h`
+        </div>` : g;
+    return n ? d`
         ${t}
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
@@ -6960,7 +7092,7 @@ let E = class extends T {
           </div>
           ${e}
         </div>
-      ` : h`
+      ` : d`
       ${t}
       <div class="widget-root">
         ${e}
@@ -6982,9 +7114,9 @@ let E = class extends T {
     `;
   }
 };
-E.styles = [
+_.styles = [
   ee,
-  A`
+  M`
       :host {
         display: block;
       }
@@ -7160,54 +7292,54 @@ E.styles = [
       }
     `
 ];
-S([
-  g({ attribute: "api-key" })
-], E.prototype, "apiKey", 2);
-S([
-  g()
-], E.prototype, "token", 2);
-S([
-  g()
-], E.prototype, "room", 2);
-S([
-  g()
-], E.prototype, "endpoint", 2);
-S([
-  g({ reflect: !0 })
-], E.prototype, "position", 2);
-S([
-  g({ reflect: !0 })
-], E.prototype, "display", 2);
-S([
-  v()
-], E.prototype, "collapsed", 2);
-S([
-  v()
-], E.prototype, "activePanel", 2);
-S([
-  v()
-], E.prototype, "pinModeActive", 2);
-S([
-  v()
-], E.prototype, "highlightThreadId", 2);
-S([
-  v()
-], E.prototype, "settings", 2);
-S([
-  v()
-], E.prototype, "followingUserId", 2);
-S([
+A([
+  v({ attribute: "api-key" })
+], _.prototype, "apiKey", 2);
+A([
   v()
-], E.prototype, "drawModeActive", 2);
-S([
+], _.prototype, "token", 2);
+A([
   v()
-], E.prototype, "connectionState", 2);
-S([
+], _.prototype, "room", 2);
+A([
   v()
-], E.prototype, "showConnectedFlash", 2);
-E = S([
+], _.prototype, "endpoint", 2);
+A([
+  v({ reflect: !0 })
+], _.prototype, "position", 2);
+A([
+  v({ reflect: !0 })
+], _.prototype, "display", 2);
+A([
+  w()
+], _.prototype, "collapsed", 2);
+A([
+  w()
+], _.prototype, "activePanel", 2);
+A([
+  w()
+], _.prototype, "pinModeActive", 2);
+A([
+  w()
+], _.prototype, "highlightThreadId", 2);
+A([
+  w()
+], _.prototype, "settings", 2);
+A([
+  w()
+], _.prototype, "followingUserId", 2);
+A([
+  w()
+], _.prototype, "drawModeActive", 2);
+A([
+  w()
+], _.prototype, "connectionState", 2);
+A([
+  w()
+], _.prototype, "showConnectedFlash", 2);
+_ = A([
   R("pulse-widget")
-], E);
+], _);
 export {
   W as PulseComments,
   le as PulseCursors,
@@ -7215,5 +7347,5 @@ export {
   G as PulsePresence,
   q as PulseProvider,
   D as PulseReactions,
-  E as PulseWidget
+  _ as PulseWidget
 };