@gamention/pulse-elements 0.1.19 → 0.1.21

package/dist/pulse-elements.js

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let kt = class extends Event {
+let Et = class extends Event {
   constructor(e, t, i, s) {
     super("context-request", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = t, this.callback = i, this.subscribe = s ?? !1;
   }
@@ -18,7 +18,7 @@ let kt = class extends Event {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let Ge = class {
+let Je = class {
   constructor(e, t, i, s) {
     if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (o, r) => {
       this.unsubscribe && (this.unsubscribe !== r && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = o, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(o, r)), this.unsubscribe = r;
@@ -35,7 +35,7 @@ let Ge = class {
     this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
   }
   dispatchRequest() {
-    this.host.dispatchEvent(new kt(this.context, this.host, this.t, this.subscribe));
+    this.host.dispatchEvent(new Et(this.context, this.host, this.t, this.subscribe));
   }
 };
 /**
@@ -43,7 +43,7 @@ let Ge = class {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let Lt = class {
+let Ut = class {
   get value() {
     return this.o;
   }
@@ -76,11 +76,11 @@ let Lt = class {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let jt = class extends Event {
+let zt = class extends Event {
   constructor(e, t) {
     super("context-provider", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = t;
   }
-}, Je = class extends Lt {
+}, Ze = class extends Ut {
   constructor(e, t, i) {
     var s, o;
     super(t.context !== void 0 ? t.initialValue : i), this.onContextRequest = (r) => {
@@ -90,7 +90,7 @@ let jt = class extends Event {
     }, this.onProviderRequest = (r) => {
       if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
       const a = /* @__PURE__ */ new Set();
-      for (const [l, { consumerHost: d }] of this.subscriptions) a.has(l) || (a.add(l), d.dispatchEvent(new kt(this.context, d, l, !0)));
+      for (const [l, { consumerHost: d }] of this.subscriptions) a.has(l) || (a.add(l), d.dispatchEvent(new Et(this.context, d, l, !0)));
       r.stopPropagation();
     }, this.host = e, t.context !== void 0 ? this.context = t.context : this.context = t, this.attachListeners(), (o = (s = this.host).addController) == null || o.call(s, this);
   }
@@ -98,7 +98,7 @@ let jt = class extends Event {
     this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
   }
   hostConnected() {
-    this.host.dispatchEvent(new jt(this.context, this.host));
+    this.host.dispatchEvent(new zt(this.context, this.host));
   }
 };
 /**
@@ -106,7 +106,7 @@ let jt = class extends Event {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function zt({ context: n }) {
+function Dt({ context: n }) {
   return (e, t) => {
     const i = /* @__PURE__ */ new WeakMap();
     if (typeof t == "object") return { get() {
@@ -114,11 +114,11 @@ function zt({ context: n }) {
     }, set(s) {
       return i.get(this).setValue(s), e.set.call(this, s);
     }, init(s) {
-      return i.set(this, new Je(this, { context: n, initialValue: s })), s;
+      return i.set(this, new Ze(this, { context: n, initialValue: s })), s;
     } };
     {
       e.constructor.addInitializer(((r) => {
-        i.set(r, new Je(r, { context: n }));
+        i.set(r, new Ze(r, { context: n }));
       }));
       const s = Object.getOwnPropertyDescriptor(e, t);
       let o;
@@ -147,17 +147,17 @@ function zt({ context: n }) {
 function fe({ context: n, subscribe: e }) {
   return (t, i) => {
     typeof i == "object" ? i.addInitializer((function() {
-      new Ge(this, { context: n, callback: (s) => {
+      new Je(this, { context: n, callback: (s) => {
         t.set.call(this, s);
       }, subscribe: e });
     })) : t.constructor.addInitializer(((s) => {
-      new Ge(s, { context: n, callback: (o) => {
+      new Je(s, { context: n, callback: (o) => {
         s[i] = o;
       }, subscribe: e });
     }));
   };
 }
-var Ut = Object.defineProperty, Dt = (n, e, t) => e in n ? Ut(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, k = (n, e, t) => Dt(n, typeof e != "symbol" ? e + "" : e, t);
+var Ht = Object.defineProperty, Bt = (n, e, t) => e in n ? Ht(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, E = (n, e, t) => Bt(n, typeof e != "symbol" ? e + "" : e, t);
 const _e = {
   allowImages: !0,
   allowAudio: !0,
@@ -170,10 +170,10 @@ const _e = {
   showCursors: !0,
   showPresence: !0,
   showTypingIndicators: !0
-}, Ht = "ws://localhost:4567", Ze = 50, Nt = 3e4, Bt = 1e3, Ft = 3e4;
-let He = class {
+}, Nt = "ws://localhost:4567", Qe = 50, Ft = 3e4, qt = 1e3, Vt = 3e4;
+let Be = class {
   constructor() {
-    k(this, "handlers", /* @__PURE__ */ new Map());
+    E(this, "handlers", /* @__PURE__ */ new Map());
   }
   on(e, t) {
     this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set());
@@ -191,9 +191,9 @@ let He = class {
   removeAll() {
     this.handlers.clear();
   }
-}, qt = class extends He {
+}, Wt = class extends Be {
   constructor(e) {
-    super(), k(this, "ws", null), k(this, "endpoint"), k(this, "reconnectAttempt", 0), k(this, "reconnectTimer", null), k(this, "_state", "disconnected"), this.endpoint = e ?? Ht;
+    super(), E(this, "ws", null), E(this, "endpoint"), E(this, "reconnectAttempt", 0), E(this, "reconnectTimer", null), E(this, "_state", "disconnected"), this.endpoint = e ?? Nt;
   }
   get state() {
     return this._state;
@@ -221,16 +221,16 @@ let He = class {
   }
   scheduleReconnect() {
     const e = Math.min(
-      Bt * 2 ** this.reconnectAttempt,
-      Ft
+      qt * 2 ** this.reconnectAttempt,
+      Vt
     );
     this.reconnectAttempt++, this.reconnectTimer = setTimeout(() => {
       this.reconnectTimer = null, this.connect();
     }, e);
   }
-}, Vt = class extends He {
+}, Xt = class extends Be {
   constructor() {
-    super(...arguments), k(this, "baseUrl", ""), k(this, "_user", null), k(this, "_config", { ..._e }), k(this, "_users", /* @__PURE__ */ new Map()), k(this, "_presence", /* @__PURE__ */ new Map()), k(this, "_threads", /* @__PURE__ */ new Map()), k(this, "_reactions", /* @__PURE__ */ new Map()), k(this, "_notifications", []), k(this, "_activityLogs", []), k(this, "_typing", /* @__PURE__ */ new Map()), k(this, "_viewports", /* @__PURE__ */ new Map()), k(this, "_selections", /* @__PURE__ */ new Map());
+    super(...arguments), E(this, "baseUrl", ""), E(this, "_user", null), E(this, "_config", { ..._e }), E(this, "_users", /* @__PURE__ */ new Map()), E(this, "_presence", /* @__PURE__ */ new Map()), E(this, "_threads", /* @__PURE__ */ new Map()), E(this, "_reactions", /* @__PURE__ */ new Map()), E(this, "_notifications", []), E(this, "_activityLogs", []), E(this, "_typing", /* @__PURE__ */ new Map()), E(this, "_viewports", /* @__PURE__ */ new Map()), E(this, "_selections", /* @__PURE__ */ new Map());
   }
   get user() {
     return this._user;
@@ -278,6 +278,10 @@ let He = class {
   getUser(e) {
     return this._users.get(e);
   }
+  /** Get all known users (from presence + comment authors). */
+  get users() {
+    return [...this._users.values()];
+  }
   getReactions(e) {
     return this._reactions.get(e) ?? [];
   }
@@ -453,12 +457,12 @@ let He = class {
   reset() {
     this._user = null, this._config = { ..._e }, this._users.clear(), this._presence.clear(), this._threads.clear(), this._reactions.clear(), this._notifications = [], this._activityLogs = [], this._typing.clear(), this._viewports.clear(), this._selections.clear();
   }
-}, Et = class extends He {
+}, Ct = class extends Be {
   constructor(e) {
     var t;
-    super(), k(this, "state"), k(this, "connection"), k(this, "config"), k(this, "heartbeatTimer", null), k(this, "lastCursorSend", 0), k(this, "pendingCursor", null), k(this, "cursorTimer", null), this.config = e, this.state = new Vt(), this.state.baseUrl = (e.endpoint ?? "").replace(/^ws(s?):/, "http$1:").replace(/\/$/, "");
+    super(), E(this, "state"), E(this, "connection"), E(this, "config"), E(this, "heartbeatTimer", null), E(this, "lastCursorSend", 0), E(this, "pendingCursor", null), E(this, "cursorTimer", null), this.config = e, this.state = new Xt(), 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 qt(i), this.connection.on("message", (s) => {
+    this.connection = new Wt(i), this.connection.on("message", (s) => {
       this.state.handleMessage(s), this.emit(s.type, s);
     }), this.connection.on("state", (s) => {
       this.emit("connection", s), s === "connected" ? (this.authenticate(), this.startHeartbeat()) : s === "disconnected" && this.stopHeartbeat();
@@ -488,9 +492,9 @@ let He = class {
   // ── Cursors ──
   moveCursor(e) {
     const t = Date.now();
-    this.pendingCursor = e, t - this.lastCursorSend >= Ze ? this.flushCursor() : this.cursorTimer || (this.cursorTimer = setTimeout(() => {
+    this.pendingCursor = e, t - this.lastCursorSend >= Qe ? this.flushCursor() : this.cursorTimer || (this.cursorTimer = setTimeout(() => {
       this.cursorTimer = null, this.flushCursor();
-    }, Ze));
+    }, Qe));
   }
   flushCursor() {
     this.pendingCursor && (this.send({ type: "cursor:move", position: this.pendingCursor }), this.lastCursorSend = Date.now(), this.pendingCursor = null);
@@ -502,7 +506,7 @@ let He = class {
   startHeartbeat() {
     this.heartbeatTimer = setInterval(() => {
       this.send({ type: "presence:update", status: "online" });
-    }, Nt);
+    }, Ft);
   }
   stopHeartbeat() {
     this.heartbeatTimer && (clearInterval(this.heartbeatTimer), this.heartbeatTimer = null);
@@ -602,10 +606,10 @@ let He = class {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ye = globalThis, Ne = ye.ShadowRoot && (ye.ShadyCSS === void 0 || ye.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Be = Symbol(), Qe = /* @__PURE__ */ new WeakMap();
-let Ct = class {
+const ye = globalThis, Ne = ye.ShadowRoot && (ye.ShadyCSS === void 0 || ye.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Fe = Symbol(), et = /* @__PURE__ */ new WeakMap();
+let Tt = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== Be) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== Fe) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
@@ -613,7 +617,7 @@ let Ct = class {
     const t = this.t;
     if (Ne && e === void 0) {
       const i = t !== void 0 && t.length === 1;
-      i && (e = Qe.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && Qe.set(t, e));
+      i && (e = et.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && et.set(t, e));
     }
     return e;
   }
@@ -621,33 +625,33 @@ let Ct = class {
     return this.cssText;
   }
 };
-const Wt = (n) => new Ct(typeof n == "string" ? n : n + "", void 0, Be), M = (n, ...e) => {
+const Yt = (n) => new Tt(typeof n == "string" ? n : n + "", void 0, Fe), O = (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 Ct(t, n, Be);
-}, Xt = (n, e) => {
+  return new Tt(t, n, Fe);
+}, Kt = (n, e) => {
   if (Ne) n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const i = document.createElement("style"), s = ye.litNonce;
     s !== void 0 && i.setAttribute("nonce", s), i.textContent = t.cssText, n.appendChild(i);
   }
-}, et = Ne ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
+}, tt = Ne ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
-  return Wt(t);
+  return Yt(t);
 })(n) : n;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Yt, defineProperty: Kt, getOwnPropertyDescriptor: Gt, getOwnPropertyNames: Jt, getOwnPropertySymbols: Zt, getPrototypeOf: Qt } = Object, H = globalThis, tt = H.trustedTypes, ei = tt ? tt.emptyScript : "", Ie = H.reactiveElementPolyfillSupport, ne = (n, e) => n, ke = { toAttribute(n, e) {
+const { is: Gt, defineProperty: Jt, getOwnPropertyDescriptor: Zt, getOwnPropertyNames: Qt, getOwnPropertySymbols: ei, getPrototypeOf: ti } = Object, H = globalThis, it = H.trustedTypes, ii = it ? it.emptyScript : "", Ie = H.reactiveElementPolyfillSupport, ne = (n, e) => n, ke = { toAttribute(n, e) {
   switch (e) {
     case Boolean:
-      n = n ? ei : null;
+      n = n ? ii : null;
       break;
     case Object:
     case Array:
@@ -672,7 +676,7 @@ const { is: Yt, defineProperty: Kt, getOwnPropertyDescriptor: Gt, getOwnProperty
       }
   }
   return t;
-} }, Fe = (n, e) => !Yt(n, e), it = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Fe };
+} }, qe = (n, e) => !Gt(n, e), st = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: qe };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), H.litPropertyMetadata ?? (H.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let G = class extends HTMLElement {
   static addInitializer(e) {
@@ -681,14 +685,14 @@ let G = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, t = it) {
+  static createProperty(e, t = st) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
       const i = Symbol(), s = this.getPropertyDescriptor(e, i, t);
-      s !== void 0 && Kt(this.prototype, e, s);
+      s !== void 0 && Jt(this.prototype, e, s);
     }
   }
   static getPropertyDescriptor(e, t, i) {
-    const { get: s, set: o } = Gt(this.prototype, e) ?? { get() {
+    const { get: s, set: o } = Zt(this.prototype, e) ?? { get() {
       return this[t];
     }, set(r) {
       this[t] = r;
@@ -699,17 +703,17 @@ let G = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? it;
+    return this.elementProperties.get(e) ?? st;
   }
   static _$Ei() {
     if (this.hasOwnProperty(ne("elementProperties"))) return;
-    const e = Qt(this);
+    const e = ti(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(ne("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ne("properties"))) {
-      const t = this.properties, i = [...Jt(t), ...Zt(t)];
+      const t = this.properties, i = [...Qt(t), ...ei(t)];
       for (const s of i) this.createProperty(s, t[s]);
     }
     const e = this[Symbol.metadata];
@@ -728,8 +732,8 @@ let G = class extends HTMLElement {
     const t = [];
     if (Array.isArray(e)) {
       const i = new Set(e.flat(1 / 0).reverse());
-      for (const s of i) t.unshift(et(s));
-    } else e !== void 0 && t.push(et(e));
+      for (const s of i) t.unshift(tt(s));
+    } else e !== void 0 && t.push(tt(e));
     return t;
   }
   static _$Eu(e, t) {
@@ -758,7 +762,7 @@ let G = class extends HTMLElement {
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Xt(e, this.constructor.elementStyles), e;
+    return Kt(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     var e;
@@ -801,7 +805,7 @@ let G = class extends HTMLElement {
     var r;
     if (e !== void 0) {
       const a = this.constructor;
-      if (s === !1 && (o = this[e]), i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? Fe)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(a._$Eu(e, i)))) return;
+      if (s === !1 && (o = this[e]), i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? qe)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(a._$Eu(e, i)))) return;
       this.C(e, t, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -883,50 +887,50 @@ G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[ne("elementPrope
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const oe = globalThis, st = (n) => n, Ee = oe.trustedTypes, nt = Ee ? Ee.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, Tt = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, St = "?" + D, ti = `<${St}>`, V = document, ae = () => V.createComment(""), le = (n) => n === null || typeof n != "object" && typeof n != "function", qe = Array.isArray, ii = (n) => qe(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Me = `[ 	
-\f\r]`, se = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ot = /-->/g, rt = />/g, B = RegExp(`>|${Me}(?:([^\\s"'>=/]+)(${Me}*=${Me}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), at = /'/g, lt = /"/g, At = /^(?:script|style|textarea|title)$/i, Pt = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), u = Pt(1), si = Pt(2), W = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), ct = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
-function _t(n, e) {
-  if (!qe(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return nt !== void 0 ? nt.createHTML(e) : e;
+const oe = globalThis, nt = (n) => n, Ee = oe.trustedTypes, ot = Ee ? Ee.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, St = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, At = "?" + D, si = `<${At}>`, V = document, ae = () => V.createComment(""), le = (n) => n === null || typeof n != "object" && typeof n != "function", Ve = Array.isArray, ni = (n) => Ve(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Me = `[ 	
+\f\r]`, se = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, rt = /-->/g, at = />/g, N = RegExp(`>|${Me}(?:([^\\s"'>=/]+)(${Me}*=${Me}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), lt = /'/g, ct = /"/g, Pt = /^(?:script|style|textarea|title)$/i, _t = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), p = _t(1), oi = _t(2), W = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), dt = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
+function It(n, e) {
+  if (!Ve(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ot !== void 0 ? ot.createHTML(e) : e;
 }
-const ni = (n, e) => {
+const ri = (n, e) => {
   const t = n.length - 1, i = [];
   let s, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", r = se;
   for (let a = 0; a < t; a++) {
     const l = n[a];
-    let d, c, h = -1, p = 0;
-    for (; p < l.length && (r.lastIndex = p, c = r.exec(l), c !== null); ) p = r.lastIndex, r === se ? c[1] === "!--" ? r = ot : c[1] !== void 0 ? r = rt : c[2] !== void 0 ? (At.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = B) : c[3] !== void 0 && (r = B) : r === B ? c[0] === ">" ? (r = s ?? se, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, d = c[1], r = c[3] === void 0 ? B : c[3] === '"' ? lt : at) : r === lt || r === at ? r = B : r === ot || r === rt ? r = se : (r = B, s = void 0);
-    const m = r === B && n[a + 1].startsWith("/>") ? " " : "";
-    o += r === se ? l + ti : h >= 0 ? (i.push(d), l.slice(0, h) + Tt + l.slice(h) + D + m) : l + D + (h === -2 ? a : m);
+    let d, c, h = -1, u = 0;
+    for (; u < l.length && (r.lastIndex = u, c = r.exec(l), c !== null); ) u = r.lastIndex, r === se ? c[1] === "!--" ? r = rt : c[1] !== void 0 ? r = at : c[2] !== void 0 ? (Pt.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = N) : c[3] !== void 0 && (r = N) : r === N ? c[0] === ">" ? (r = s ?? se, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, d = c[1], r = c[3] === void 0 ? N : c[3] === '"' ? ct : lt) : r === ct || r === lt ? r = N : r === rt || r === at ? r = se : (r = N, s = void 0);
+    const f = r === N && n[a + 1].startsWith("/>") ? " " : "";
+    o += r === se ? l + si : h >= 0 ? (i.push(d), l.slice(0, h) + St + l.slice(h) + D + f) : l + D + (h === -2 ? a : f);
   }
-  return [_t(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+  return [It(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
 class ce {
   constructor({ strings: e, _$litType$: t }, i) {
     let s;
     this.parts = [];
     let o = 0, r = 0;
-    const a = e.length - 1, l = this.parts, [d, c] = ni(e, t);
+    const a = e.length - 1, l = this.parts, [d, c] = ri(e, t);
     if (this.el = ce.createElement(d, i), F.currentNode = this.el.content, t === 2 || t === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
     }
     for (; (s = F.nextNode()) !== null && l.length < a; ) {
       if (s.nodeType === 1) {
-        if (s.hasAttributes()) for (const h of s.getAttributeNames()) if (h.endsWith(Tt)) {
-          const p = c[r++], m = s.getAttribute(h).split(D), g = /([.?@])?(.*)/.exec(p);
-          l.push({ type: 1, index: o, name: g[2], strings: m, ctor: g[1] === "." ? ri : g[1] === "?" ? ai : g[1] === "@" ? li : Se }), s.removeAttribute(h);
+        if (s.hasAttributes()) for (const h of s.getAttributeNames()) if (h.endsWith(St)) {
+          const u = c[r++], f = s.getAttribute(h).split(D), b = /([.?@])?(.*)/.exec(u);
+          l.push({ type: 1, index: o, name: b[2], strings: f, ctor: b[1] === "." ? li : b[1] === "?" ? ci : b[1] === "@" ? di : Se }), s.removeAttribute(h);
         } else h.startsWith(D) && (l.push({ type: 6, index: o }), s.removeAttribute(h));
-        if (At.test(s.tagName)) {
-          const h = s.textContent.split(D), p = h.length - 1;
-          if (p > 0) {
+        if (Pt.test(s.tagName)) {
+          const h = s.textContent.split(D), u = h.length - 1;
+          if (u > 0) {
             s.textContent = Ee ? Ee.emptyScript : "";
-            for (let m = 0; m < p; m++) s.append(h[m], ae()), F.nextNode(), l.push({ type: 2, index: ++o });
-            s.append(h[p], ae());
+            for (let f = 0; f < u; f++) s.append(h[f], ae()), F.nextNode(), l.push({ type: 2, index: ++o });
+            s.append(h[u], ae());
           }
         }
-      } else if (s.nodeType === 8) if (s.data === St) l.push({ type: 2, index: o });
+      } else if (s.nodeType === 8) if (s.data === At) l.push({ type: 2, index: o });
       else {
         let h = -1;
         for (; (h = s.data.indexOf(D, h + 1)) !== -1; ) l.push({ type: 7, index: o }), h += D.length - 1;
@@ -946,7 +950,7 @@ function J(n, e, t = n, i) {
   const o = le(e) ? void 0 : e._$litDirective$;
   return (s == null ? void 0 : s.constructor) !== o && ((a = s == null ? void 0 : s._$AO) == null || a.call(s, !1), o === void 0 ? s = void 0 : (s = new o(n), s._$AT(n, t, i)), i !== void 0 ? (t._$Co ?? (t._$Co = []))[i] = s : t._$Cl = s), s !== void 0 && (e = J(n, s._$AS(n, e.values), s, i)), e;
 }
-class oi {
+class ai {
   constructor(e, t) {
     this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
   }
@@ -963,7 +967,7 @@ class oi {
     for (; l !== void 0; ) {
       if (r === l.index) {
         let d;
-        l.type === 2 ? d = new me(o, o.nextSibling, this, e) : l.type === 1 ? d = new l.ctor(o, l.name, l.strings, this, e) : l.type === 6 && (d = new ci(o, this, e)), this._$AV.push(d), l = i[++a];
+        l.type === 2 ? d = new me(o, o.nextSibling, this, e) : l.type === 1 ? d = new l.ctor(o, l.name, l.strings, this, e) : l.type === 6 && (d = new hi(o, this, e)), this._$AV.push(d), l = i[++a];
       }
       r !== (l == null ? void 0 : l.index) && (o = F.nextNode(), r++);
     }
@@ -980,7 +984,7 @@ class me {
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   constructor(e, t, i, s) {
-    this.type = 2, this._$AH = v, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = s, this._$Cv = (s == null ? void 0 : s.isConnected) ?? !0;
+    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;
@@ -994,7 +998,7 @@ class me {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = J(this, e, t), le(e) ? e === v || e == null || e === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : e !== this._$AH && e !== W && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ii(e) ? this.k(e) : this._(e);
+    e = J(this, e, t), le(e) ? e === g || e == null || e === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : e !== this._$AH && e !== W && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ni(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -1003,23 +1007,23 @@ class me {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== v && le(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
+    this._$AH !== g && le(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
-    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ce.createElement(_t(i.h, i.h[0]), this.options)), i);
+    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ce.createElement(It(i.h, i.h[0]), this.options)), i);
     if (((o = this._$AH) == null ? void 0 : o._$AD) === s) this._$AH.p(t);
     else {
-      const r = new oi(s, this), a = r.u(this.options);
+      const r = new ai(s, this), a = r.u(this.options);
       r.p(t), this.T(a), this._$AH = r;
     }
   }
   _$AC(e) {
-    let t = ct.get(e.strings);
-    return t === void 0 && ct.set(e.strings, t = new ce(e)), t;
+    let t = dt.get(e.strings);
+    return t === void 0 && dt.set(e.strings, t = new ce(e)), t;
   }
   k(e) {
-    qe(this._$AH) || (this._$AH = [], this._$AR());
+    Ve(this._$AH) || (this._$AH = [], this._$AR());
     const t = this._$AH;
     let i, s = 0;
     for (const o of e) s === t.length ? t.push(i = new me(this.O(ae()), this.O(ae()), this, this.options)) : i = t[s], i._$AI(o), s++;
@@ -1028,8 +1032,8 @@ class me {
   _$AR(e = this._$AA.nextSibling, t) {
     var i;
     for ((i = this._$AP) == null ? void 0 : i.call(this, !1, !0, t); e !== this._$AB; ) {
-      const s = st(e).nextSibling;
-      st(e).remove(), e = s;
+      const s = nt(e).nextSibling;
+      nt(e).remove(), e = s;
     }
   }
   setConnected(e) {
@@ -1045,7 +1049,7 @@ class Se {
     return this._$AM._$AU;
   }
   constructor(e, t, i, s, o) {
-    this.type = 1, this._$AH = v, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = v;
+    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;
@@ -1054,37 +1058,37 @@ class Se {
     else {
       const a = e;
       let l, d;
-      for (e = o[0], l = 0; l < o.length - 1; l++) d = J(this, a[i + l], t, l), d === W && (d = this._$AH[l]), r || (r = !le(d) || d !== this._$AH[l]), d === v ? e = v : e !== v && (e += (d ?? "") + o[l + 1]), this._$AH[l] = d;
+      for (e = o[0], l = 0; l < o.length - 1; l++) d = J(this, a[i + l], t, l), d === W && (d = this._$AH[l]), r || (r = !le(d) || d !== this._$AH[l]), d === g ? e = g : e !== g && (e += (d ?? "") + o[l + 1]), this._$AH[l] = d;
     }
     r && !s && this.j(e);
   }
   j(e) {
-    e === v ? 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 ri extends Se {
+class li extends Se {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === v ? void 0 : e;
+    this.element[this.name] = e === g ? void 0 : e;
   }
 }
-class ai extends Se {
+class ci extends Se {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== v);
+    this.element.toggleAttribute(this.name, !!e && e !== g);
   }
 }
-class li extends Se {
+class di extends Se {
   constructor(e, t, i, s, o) {
     super(e, t, i, s, o), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = J(this, e, t, 0) ?? v) === W) return;
-    const i = this._$AH, s = e === v && i !== v || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== v && (i === v || s);
+    if ((e = J(this, e, t, 0) ?? g) === W) 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) {
@@ -1092,7 +1096,7 @@ class li extends Se {
     typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
-class ci {
+class hi {
   constructor(e, t, i) {
     this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = i;
   }
@@ -1105,7 +1109,7 @@ class ci {
 }
 const Oe = oe.litHtmlPolyfillSupport;
 Oe == null || Oe(ce, me), (oe.litHtmlVersions ?? (oe.litHtmlVersions = [])).push("3.3.2");
-const di = (n, e, t) => {
+const pi = (n, e, t) => {
   const i = (t == null ? void 0 : t.renderBefore) ?? e;
   let s = i._$litPart$;
   if (s === void 0) {
@@ -1120,7 +1124,7 @@ const di = (n, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const q = globalThis;
-let A = class extends G {
+let _ = class extends G {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1131,7 +1135,7 @@ let A = class extends G {
   }
   update(e) {
     const t = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = di(t, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = pi(t, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var e;
@@ -1145,10 +1149,10 @@ let A = class extends G {
     return W;
   }
 };
-var $t;
-A._$litElement$ = !0, A.finalized = !0, ($t = q.litElementHydrateSupport) == null || $t.call(q, { LitElement: A });
+var kt;
+_._$litElement$ = !0, _.finalized = !0, (kt = q.litElementHydrateSupport) == null || kt.call(q, { LitElement: _ });
 const Re = q.litElementPolyfillSupport;
-Re == null || Re({ LitElement: A });
+Re == null || Re({ LitElement: _ });
 (q.litElementVersions ?? (q.litElementVersions = [])).push("4.2.2");
 /**
  * @license
@@ -1165,7 +1169,7 @@ const L = (n) => (e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const hi = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Fe }, pi = (n = hi, e, t) => {
+const ui = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: qe }, fi = (n = ui, e, t) => {
   const { kind: i, metadata: s } = t;
   let o = globalThis.litPropertyMetadata.get(s);
   if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), i === "setter" && ((n = Object.create(n)).wrapped = !0), o.set(t.name, n), i === "accessor") {
@@ -1186,8 +1190,8 @@ const hi = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged
   }
   throw Error("Unsupported decorator location: " + i);
 };
-function x(n) {
-  return (e, t) => typeof t == "object" ? pi(n, e, t) : ((i, s, o) => {
+function w(n) {
+  return (e, t) => typeof t == "object" ? fi(n, e, t) : ((i, s, o) => {
     const r = s.hasOwnProperty(o);
     return s.constructor.createProperty(o, i), r ? Object.getOwnPropertyDescriptor(s, o) : void 0;
   })(n, e, t);
@@ -1197,16 +1201,16 @@ function x(n) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function $(n) {
-  return x({ ...n, state: !0, attribute: !1 });
+function k(n) {
+  return w({ ...n, state: !0, attribute: !1 });
 }
 const Q = "pulse-client";
-var ui = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, ee = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? fi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var mi = Object.defineProperty, gi = Object.getOwnPropertyDescriptor, ee = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? gi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && ui(e, t, s), s;
+  return i && s && mi(e, t, s), s;
 };
-let X = class extends A {
+let X = class extends _ {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "";
   }
@@ -1218,40 +1222,40 @@ let X = class extends A {
       room: this.room,
       endpoint: this.endpoint
     };
-    this.client = new Et(n), this.client.connect();
+    this.client = new Ct(n), this.client.connect();
   }
   disconnectedCallback() {
     var n;
     super.disconnectedCallback(), (n = this.client) == null || n.disconnect();
   }
   render() {
-    return u`<slot></slot>`;
+    return p`<slot></slot>`;
   }
 };
 ee([
-  x({ attribute: "api-key" })
+  w({ attribute: "api-key" })
 ], X.prototype, "apiKey", 2);
 ee([
-  x()
+  w()
 ], X.prototype, "token", 2);
 ee([
-  x()
+  w()
 ], X.prototype, "room", 2);
 ee([
-  x()
+  w()
 ], X.prototype, "endpoint", 2);
 ee([
-  zt({ context: Q })
+  Dt({ context: Q })
 ], X.prototype, "client", 2);
 X = ee([
   L("pulse-provider")
 ], X);
-var mi = Object.defineProperty, gi = Object.getOwnPropertyDescriptor, Ae = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? gi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var vi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Ae = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? bi(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 && mi(e, t, s), s;
+  return i && s && vi(e, t, s), s;
 };
-let Z = class extends A {
+let Z = class extends _ {
   constructor() {
     super(...arguments), this.maxVisible = 5, this.users = [];
   }
@@ -1276,16 +1280,16 @@ let Z = class extends A {
   }
   render() {
     const n = this.users.slice(0, this.maxVisible), e = this.users.length - this.maxVisible;
-    return u`
+    return p`
       <div class="avatars">
-        ${e > 0 ? u`<div class="overflow">+${e}</div>` : null}
+        ${e > 0 ? p`<div class="overflow">+${e}</div>` : null}
         ${n.map(
-      (t) => u`
+      (t) => p`
             <div
               class="avatar"
               style="background:${t.user.color}"
             >
-              ${t.user.avatar ? u`<img src="${t.user.avatar}" alt="${t.user.name}" />` : this.getInitials(t.user.name)}
+              ${t.user.avatar ? p`<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>
@@ -1295,7 +1299,7 @@ let Z = class extends A {
     `;
   }
 };
-Z.styles = M`
+Z.styles = O`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1401,23 +1405,23 @@ Z.styles = M`
   `;
 Ae([
   fe({ context: Q, subscribe: !0 }),
-  x({ attribute: !1 })
+  w({ attribute: !1 })
 ], Z.prototype, "client", 2);
 Ae([
-  x({ type: Number, attribute: "max-visible" })
+  w({ type: Number, attribute: "max-visible" })
 ], Z.prototype, "maxVisible", 2);
 Ae([
-  $()
+  k()
 ], Z.prototype, "users", 2);
 Z = Ae([
   L("pulse-presence")
 ], Z);
-var vi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Ve = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? bi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var xi = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, We = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? yi(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 && vi(e, t, s), s;
+  return i && s && xi(e, t, s), s;
 };
-let de = class extends A {
+let de = class extends _ {
   constructor() {
     super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (n) => {
       var e;
@@ -1471,9 +1475,9 @@ let de = class extends A {
   }
   render() {
     const n = [...this.cursors.values()];
-    return u`
+    return p`
       ${n.map(
-      (e) => u`
+      (e) => p`
           <div
             class="cursor"
             style="transform:translate(${e.position.x}px,${e.position.y}px)"
@@ -1494,7 +1498,7 @@ let de = class extends A {
     `;
   }
 };
-de.styles = M`
+de.styles = O`
     :host {
       position: fixed;
       top: 0;
@@ -1531,22 +1535,22 @@ de.styles = M`
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
   `;
-Ve([
+We([
   fe({ context: Q, subscribe: !0 }),
-  x({ attribute: !1 })
+  w({ attribute: !1 })
 ], de.prototype, "client", 2);
-Ve([
-  $()
+We([
+  k()
 ], de.prototype, "cursors", 2);
-de = Ve([
+de = We([
   L("pulse-cursors")
 ], de);
-var xi = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, ge = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? yi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var wi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, ge = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? $i(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 && xi(e, t, s), s;
+  return i && s && wi(e, t, s), s;
 };
-let Y = class extends A {
+let Y = class extends _ {
   constructor() {
     super(...arguments), this.showResolved = !1, this.threads = [], this.replyingTo = null;
   }
@@ -1568,7 +1572,7 @@ let Y = class extends A {
   }
   parseMentions(n) {
     return n.split(/(@\w+)/g).map(
-      (t) => t.startsWith("@") ? u`<span class="mention">${t}</span>` : t
+      (t) => t.startsWith("@") ? p`<span class="mention">${t}</span>` : t
     );
   }
   getInitials(n) {
@@ -1594,9 +1598,9 @@ let Y = class extends A {
   }
   render() {
     const n = this.showResolved ? this.threads : this.threads.filter((e) => !e.resolved);
-    return u`
+    return p`
       <div class="threads">
-        ${n.length === 0 ? u`<div class="empty">
+        ${n.length === 0 ? p`<div class="empty">
               <div class="empty-icon">&#128172;</div>
               No comments yet.<br>Start a conversation below.
             </div>` : n.map((e) => this.renderThread(e))}
@@ -1610,12 +1614,12 @@ let Y = class extends A {
     `;
   }
   renderThread(n) {
-    return u`
+    return p`
       <div class="thread ${n.resolved ? "resolved" : ""}">
         ${n.comments.map((e, t) => {
       const i = this.getUserForComment(e.userId);
-      return u`
-            ${t > 0 ? u`<div class="divider"></div>` : v}
+      return p`
+            ${t > 0 ? p`<div class="divider"></div>` : g}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -1647,12 +1651,12 @@ let Y = class extends A {
             ${n.resolved ? "Reopen" : "Resolve"}
           </button>
         </div>
-        ${this.replyingTo === n.id ? u`
+        ${this.replyingTo === n.id ? p`
               <form class="reply-form" @submit=${(e) => this.handleReply(n.id, e)}>
                 <input type="text" placeholder="Write a reply..." />
                 <button type="submit">Send</button>
               </form>
-            ` : v}
+            ` : g}
       </div>
     `;
   }
@@ -1664,7 +1668,7 @@ let Y = class extends A {
     return o < 24 ? `${o}h ago` : e.toLocaleDateString();
   }
 };
-Y.styles = M`
+Y.styles = O`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -1878,39 +1882,39 @@ Y.styles = M`
   `;
 ge([
   fe({ context: Q, subscribe: !0 }),
-  x({ attribute: !1 })
+  w({ attribute: !1 })
 ], Y.prototype, "client", 2);
 ge([
-  x({ type: Boolean, attribute: "show-resolved" })
+  w({ type: Boolean, attribute: "show-resolved" })
 ], Y.prototype, "showResolved", 2);
 ge([
-  $()
+  k()
 ], Y.prototype, "threads", 2);
 ge([
-  $()
+  k()
 ], Y.prototype, "replyingTo", 2);
 Y = ge([
   L("pulse-comments")
 ], Y);
-var wi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, We = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? $i(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var ki = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, Xe = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ei(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 && wi(e, t, s), s;
+  return i && s && ki(e, t, s), s;
 };
-const ki = {
+const Ci = {
   "comment:created": "left a comment",
   "comment:mention": "mentioned you",
   "comment:reply": "replied to your comment",
   "thread:resolved": "resolved a thread",
   "reaction:added": "reacted to your comment"
-}, Ei = {
+}, Ti = {
   "comment:created": "💬",
   "comment:mention": "📣",
   "comment:reply": "↩️",
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let he = class extends A {
+let he = class extends _ {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -1957,31 +1961,31 @@ let he = class extends A {
   }
   render() {
     const n = this.notifications.filter((e) => !e.read).length;
-    return u`
+    return p`
       <div class="header">
         <span class="title">
           Notifications
-          ${n > 0 ? u`<span class="badge">${n}</span>` : v}
+          ${n > 0 ? p`<span class="badge">${n}</span>` : g}
         </span>
-        ${n > 0 ? u`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+        ${n > 0 ? p`<button class="mark-all" @click=${() => this.client.markAllRead()}>
               Mark all read
-            </button>` : v}
+            </button>` : g}
       </div>
       <div class="list">
-        ${this.notifications.length === 0 ? u`<div class="empty">
+        ${this.notifications.length === 0 ? p`<div class="empty">
               <div class="empty-icon">&#128276;</div>
               No notifications yet
             </div>` : this.notifications.map(
-      (e) => u`
+      (e) => p`
                 <div
                   class="item ${e.read ? "" : "unread"}"
                   @click=${() => this.handleClick(e)}
                 >
-                  <span class="icon">${Ei[e.type] ?? "🔔"}</span>
+                  <span class="icon">${Ti[e.type] ?? "🔔"}</span>
                   <div class="content">
                     <div class="text">
                       <span class="actor">${this.getActorName(e.actorId)}</span>
-                      ${ki[e.type] ?? e.type}
+                      ${Ci[e.type] ?? e.type}
                     </div>
                     <div class="time">${this.formatTime(e.createdAt)}</div>
                   </div>
@@ -1993,7 +1997,7 @@ let he = class extends A {
     `;
   }
 };
-he.styles = M`
+he.styles = O`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -2134,23 +2138,23 @@ he.styles = M`
       opacity: 0.4;
     }
   `;
-We([
+Xe([
   fe({ context: Q, subscribe: !0 }),
-  x({ attribute: !1 })
+  w({ attribute: !1 })
 ], he.prototype, "client", 2);
-We([
-  $()
+Xe([
+  k()
 ], he.prototype, "notifications", 2);
-he = We([
+he = Xe([
   L("pulse-notifications")
 ], he);
-var Ci = Object.defineProperty, Ti = Object.getOwnPropertyDescriptor, te = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? Ti(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var Si = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, te = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ai(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && Ci(e, t, s), s;
+  return i && s && Si(e, t, s), s;
 };
-const Si = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let N = class extends A {
+const Pi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
+let B = class extends _ {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
   }
@@ -2190,9 +2194,9 @@ let N = class extends A {
   }
   render() {
     const n = this.groupReactions();
-    return u`
+    return p`
       ${n.map(
-      (e) => u`
+      (e) => p`
           <button
             class="reaction ${e.userReactionId ? "active" : ""}"
             @click=${() => this.toggleReaction(e)}
@@ -2209,22 +2213,22 @@ let N = class extends A {
         >
           +
         </button>
-        ${this.showPicker ? u`
+        ${this.showPicker ? p`
               <div class="picker">
-                ${Si.map(
-      (e) => u`
+                ${Pi.map(
+      (e) => p`
                     <button @click=${() => this.addEmoji(e)}>
                       ${e}
                     </button>
                   `
     )}
               </div>
-            ` : v}
+            ` : g}
       </div>
     `;
   }
 };
-N.styles = M`
+B.styles = O`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2338,30 +2342,43 @@ N.styles = M`
   `;
 te([
   fe({ context: Q, subscribe: !0 }),
-  x({ attribute: !1 })
-], N.prototype, "client", 2);
+  w({ attribute: !1 })
+], B.prototype, "client", 2);
 te([
-  x({ attribute: "target-id" })
-], N.prototype, "targetId", 2);
+  w({ attribute: "target-id" })
+], B.prototype, "targetId", 2);
 te([
-  x({ attribute: "target-type" })
-], N.prototype, "targetType", 2);
+  w({ attribute: "target-type" })
+], B.prototype, "targetType", 2);
 te([
-  $()
-], N.prototype, "reactions", 2);
+  k()
+], B.prototype, "reactions", 2);
 te([
-  $()
-], N.prototype, "showPicker", 2);
-N = te([
+  k()
+], B.prototype, "showPicker", 2);
+B = te([
   L("pulse-reactions")
-], N);
+], B);
+const Mt = {
+  allowImages: !0,
+  allowAudio: !0,
+  allowVideo: !0,
+  maxFileSizeMb: 10,
+  maxAttachmentsPerComment: 5,
+  allowReactions: !0,
+  allowDrawing: !0,
+  allowMentions: !0,
+  showCursors: !0,
+  showPresence: !0,
+  showTypingIndicators: !0
+};
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ai = { CHILD: 2 }, Pi = (n) => (...e) => ({ _$litDirective$: n, values: e });
-class _i {
+const _i = { CHILD: 2 }, Ii = (n) => (...e) => ({ _$litDirective$: n, values: e });
+class Mi {
   constructor(e) {
   }
   get _$AU() {
@@ -2382,12 +2399,12 @@ class _i {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Le extends _i {
+class Le extends Mi {
   constructor(e) {
-    if (super(e), this.it = v, e.type !== Ai.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = g, e.type !== _i.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === v || 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 === W) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
@@ -2405,14 +2422,14 @@ Le.directiveName = "unsafeHTML", Le.resultType = 1;
 class je extends Le {
 }
 je.directiveName = "unsafeSVG", je.resultType = 2;
-const Ii = Pi(je);
+const Oi = Ii(je);
 /**
  * @license lucide v0.577.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Mi = [
+const Ri = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0" }],
   [
     "path",
@@ -2427,7 +2444,7 @@ const Mi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Oi = [
+const Li = [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["path", { d: "M12 6v6l4 2" }]
 ];
@@ -2437,7 +2454,7 @@ const Oi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ri = [
+const ji = [
   [
     "path",
     {
@@ -2451,7 +2468,7 @@ const Ri = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Li = [
+const Ui = [
   ["path", { d: "M12 19v3" }],
   ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }],
   ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" }]
@@ -2462,7 +2479,7 @@ const Li = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ji = [
+const zi = [
   [
     "path",
     {
@@ -2476,7 +2493,7 @@ const ji = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const zi = [
+const Di = [
   [
     "path",
     {
@@ -2498,7 +2515,7 @@ const zi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ui = [
+const Hi = [
   [
     "path",
     {
@@ -2513,7 +2530,7 @@ const Ui = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const It = [
+const Ot = [
   ["path", { d: "M12 17v5" }],
   [
     "path",
@@ -2528,7 +2545,7 @@ const It = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Di = [
+const Bi = [
   [
     "path",
     {
@@ -2543,7 +2560,7 @@ const Di = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Hi = [
+const Ni = [
   ["path", { d: "M10 11v6" }],
   ["path", { d: "M14 11v6" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }],
@@ -2556,7 +2573,7 @@ const Hi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ni = [
+const Fi = [
   ["path", { d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" }],
   ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" }]
 ];
@@ -2576,7 +2593,7 @@ const ve = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Bi = [
+const qi = [
   [
     "path",
     {
@@ -2584,14 +2601,14 @@ const Bi = [
     }
   ]
 ];
-function Fi(n) {
+function Vi(n) {
   return n.map(([e, t]) => {
     const i = Object.entries(t).filter(([, s]) => s != null).map(([s, o]) => `${s}="${o}"`).join(" ");
     return `<${e} ${i}/>`;
   }).join("");
 }
-function C(n, e = 18) {
-  return si`<svg
+function S(n, e = 18) {
+  return oi`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="${e}"
     height="${e}"
@@ -2601,9 +2618,9 @@ function C(n, e = 18) {
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-  >${Ii(Fi(n))}</svg>`;
+  >${Oi(Vi(n))}</svg>`;
 }
-const ie = M`
+const ie = O`
   * {
     box-sizing: border-box;
     margin: 0;
@@ -2646,7 +2663,7 @@ const ie = M`
     --pw-shadow: var(--pulse-shadow);
     --pw-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
   }
-`, be = M`
+`, be = O`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2690,7 +2707,7 @@ const ie = M`
     width: 18px;
     height: 18px;
   }
-`, Pe = M`
+`, Pe = O`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2702,12 +2719,12 @@ const ie = M`
     background: transparent;
   }
 `;
-var qi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, Xe = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? Vi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var Wi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, Ye = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Xi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && qi(e, t, s), s;
+  return i && s && Wi(e, t, s), s;
 };
-let K = class extends A {
+let K = class extends _ {
   constructor() {
     super(...arguments), this.items = [], this.unsubs = [], this.counter = 0;
   }
@@ -2753,18 +2770,18 @@ let K = class extends A {
     );
   }
   render() {
-    return u`
+    return p`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Activity</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(ve, 16)}
+            ${S(ve, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${this.items.length === 0 ? u`<div class="empty">No activity yet</div>` : this.items.map(
-      (n) => u`
+          ${this.items.length === 0 ? p`<div class="empty">No activity yet</div>` : this.items.map(
+      (n) => p`
                   <div class="activity-item">
                     <div
                       class="activity-dot"
@@ -2772,7 +2789,7 @@ let K = class extends A {
                     ></div>
                     <div class="activity-content">
                       <div class="activity-text">
-                        ${n.userId ? u`<span class="activity-user"
+                        ${n.userId ? p`<span class="activity-user"
                                 >${this.getUserName(n.userId)}</span
                               >
                               ${n.description}` : n.description}
@@ -2793,7 +2810,7 @@ K.styles = [
   ie,
   be,
   Pe,
-  M`
+  O`
       :host {
         display: block;
       }
@@ -2918,21 +2935,21 @@ K.TYPE_COLORS = {
   comment: "#3b82f6",
   resolve: "#22c55e"
 };
-Xe([
-  x({ attribute: !1 })
+Ye([
+  w({ attribute: !1 })
 ], K.prototype, "client", 2);
-Xe([
-  $()
+Ye([
+  k()
 ], K.prototype, "items", 2);
-K = Xe([
+K = Ye([
   L("pulse-widget-activity-panel")
 ], K);
-const Wi = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", dt = "#6366f1", ht = "#e2e8f0", Xi = "#f8fafc", Yi = "#e2e8f0", pt = "#64748b", we = 28, Ki = Array.from({ length: we }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
-function ut(n) {
+const Yi = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", ht = "#6366f1", pt = "#e2e8f0", Ki = "#f8fafc", Gi = "#e2e8f0", ut = "#64748b", we = 28, Ji = Array.from({ length: we }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
+function ft(n) {
   const e = Math.max(0, Math.floor(n)), t = Math.floor(e / 60), i = e % 60;
   return `${t}:${i.toString().padStart(2, "0")}`;
 }
-class ze {
+class Ue {
   /**
    * Create and return a fully self-contained inline audio player element.
    *
@@ -2953,12 +2970,12 @@ class ze {
       width: "220px",
       height: "44px",
       padding: "0 10px",
-      background: Xi,
+      background: Ki,
       borderRadius: "12px",
-      border: `1px solid ${Yi}`,
-      fontFamily: Wi,
+      border: `1px solid ${Gi}`,
+      fontFamily: Yi,
       fontSize: "11px",
-      color: pt,
+      color: ut,
       userSelect: "none",
       boxSizing: "border-box"
     });
@@ -2969,7 +2986,7 @@ class ze {
       minWidth: "28px",
       borderRadius: "50%",
       border: "none",
-      background: dt,
+      background: ht,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -2997,8 +3014,8 @@ class ze {
       </svg>`;
     }
     c(), l.appendChild(d);
-    const p = document.createElement("div");
-    Object.assign(p.style, {
+    const u = document.createElement("div");
+    Object.assign(u.style, {
       flex: "1",
       display: "flex",
       flexDirection: "column",
@@ -3006,50 +3023,50 @@ class ze {
       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 g = [];
-    for (let E = 0; E < we; E++) {
-      const I = document.createElement("div"), z = Math.round(Ki[E] * 20);
-      Object.assign(I.style, {
+    const b = [];
+    for (let $ = 0; $ < we; $++) {
+      const T = document.createElement("div"), U = Math.round(Ji[$] * 20);
+      Object.assign(T.style, {
         flex: "1",
-        height: `${Math.max(3, z)}px`,
+        height: `${Math.max(3, U)}px`,
         borderRadius: "1px",
-        background: ht,
+        background: pt,
         transition: "background 0.1s ease",
         minWidth: "0"
-      }), g.push(I), m.appendChild(I);
+      }), b.push(T), f.appendChild(T);
     }
-    const y = document.createElement("div");
-    Object.assign(y.style, {
+    const x = document.createElement("div");
+    Object.assign(x.style, {
       fontSize: "10px",
-      color: pt,
+      color: ut,
       whiteSpace: "nowrap",
       lineHeight: "1"
     });
-    function b() {
-      const E = ut(o), I = ut(s);
-      y.textContent = `${E} / ${I}`;
+    function y() {
+      const $ = ft(o), T = ft(s);
+      x.textContent = `${$} / ${T}`;
     }
-    b(), p.appendChild(m), p.appendChild(y), a.appendChild(l), a.appendChild(p);
-    function w() {
-      const E = s > 0 ? o / s : 0, I = Math.floor(E * we);
-      for (let z = 0; z < we; z++)
-        g[z].style.background = z <= I ? dt : ht;
+    y(), u.appendChild(f), u.appendChild(x), a.appendChild(l), a.appendChild(u);
+    function v() {
+      const $ = s > 0 ? o / s : 0, T = Math.floor($ * we);
+      for (let U = 0; U < we; U++)
+        b[U].style.background = U <= T ? ht : pt;
     }
-    return m.addEventListener("click", (E) => {
+    return f.addEventListener("click", ($) => {
       if (s <= 0) return;
-      const I = m.getBoundingClientRect(), z = Math.min(
+      const T = f.getBoundingClientRect(), U = Math.min(
         1,
-        Math.max(0, (E.clientX - I.left) / I.width)
+        Math.max(0, ($.clientX - T.left) / T.width)
       );
-      r.currentTime = z * s, o = r.currentTime, w(), b();
+      r.currentTime = U * s, o = r.currentTime, v(), y();
     }), l.addEventListener("click", () => {
       i ? r.pause() : r.play().catch(() => {
       });
@@ -3058,17 +3075,17 @@ class ze {
     }), r.addEventListener("pause", () => {
       i = !1, c();
     }), r.addEventListener("ended", () => {
-      i = !1, c(), o = 0, w(), b();
+      i = !1, c(), o = 0, v(), y();
     }), r.addEventListener("timeupdate", () => {
-      o = r.currentTime, w(), b();
+      o = r.currentTime, v(), y();
     }), r.addEventListener("loadedmetadata", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, b());
+      r.duration && isFinite(r.duration) && (s = r.duration, y());
     }), r.addEventListener("durationchange", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, b());
+      r.duration && isFinite(r.duration) && (s = r.duration, y());
     }), a;
   }
 }
-class Ue {
+class ze {
   constructor() {
     this.container = null, this.stream = null, this.recorder = null, this.analyser = null, this.audioCtx = null, this.recording = !1, this.animFrame = null, this.startTime = 0, this.maxDuration = 12e4, this.maxTimer = null, this.canvas = null, this.timerEl = null, this.resolve = null, this.animate = () => {
       this.recording && (this.drawWaveform(), this.updateTimer(), this.animFrame = requestAnimationFrame(this.animate));
@@ -3199,8 +3216,8 @@ class Ue {
     this.analyser.getByteFrequencyData(o), e.clearRect(0, 0, t, i);
     const r = s, a = Math.max(2, t / r * 0.7), l = (t - a * r) / (r - 1 || 1);
     for (let d = 0; d < r; d++) {
-      const c = o[d] / 255, h = Math.max(2, c * i * 0.85), p = d * (a + l), m = (i - h) / 2, g = 0.4 + c * 0.6;
-      e.fillStyle = `rgba(99, 102, 241, ${g})`, e.beginPath(), e.roundRect(p, m, a, h, 1), e.fill();
+      const c = o[d] / 255, h = Math.max(2, c * i * 0.85), u = d * (a + l), f = (i - h) / 2, b = 0.4 + c * 0.6;
+      e.fillStyle = `rgba(99, 102, 241, ${b})`, e.beginPath(), e.roundRect(u, f, a, h, 1), e.fill();
     }
   }
   updateTimer() {
@@ -3218,25 +3235,25 @@ class Ue {
     this.recorder = null, this.container && (this.container.remove(), this.container = null), this.canvas = null, this.timerEl = null;
   }
 }
-const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
+const Zi = 180, Qi = 120, es = "#e2e8f0", ts = `
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="14" cy="14" r="14" fill="rgba(0,0,0,0.35)"/>
   <polygon points="11,8 22,14 11,20" fill="rgba(255,255,255,0.9)"/>
-</svg>`, ft = `
+</svg>`, mt = `
 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
   <polygon points="11,5 6,9 2,9 2,15 6,15 11,19"/>
   <line x1="23" y1="9" x2="17" y2="15"/>
   <line x1="17" y1="9" x2="23" y2="15"/>
-</svg>`, es = `
+</svg>`, is = `
 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
   <polygon points="11,5 6,9 2,9 2,15 6,15 11,19"/>
   <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
   <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
-</svg>`, ts = `
+</svg>`, ss = `
 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
   <polyline points="15,3 21,3 21,9"/><line x1="21" y1="3" x2="14" y2="10"/>
   <polyline points="9,21 3,21 3,15"/><line x1="3" y1="21" x2="10" y2="14"/>
-</svg>`, S = class S {
+</svg>`, A = class A {
   /**
    * Renders an inline rectangular video player and returns the root container.
    * @param url - Video source URL
@@ -3248,10 +3265,10 @@ const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
     Object.assign(o.style, {
       position: "relative",
       display: "inline-block",
-      width: `${Gi}px`,
-      height: `${Ji}px`,
+      width: `${Zi}px`,
+      height: `${Qi}px`,
       borderRadius: "8px",
-      border: `1px solid ${Zi}`,
+      border: `1px solid ${es}`,
       boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
       overflow: "hidden",
       cursor: "pointer",
@@ -3281,7 +3298,7 @@ const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
       transition: "opacity 0.25s ease",
       opacity: "1",
       pointerEvents: "none"
-    }), a.innerHTML = Qi, o.appendChild(a);
+    }), a.innerHTML = ts, o.appendChild(a);
     const l = document.createElement("div");
     Object.assign(l.style, {
       position: "absolute",
@@ -3296,7 +3313,7 @@ const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
       justifyContent: "center",
       pointerEvents: "none",
       transition: "opacity 0.2s ease"
-    }), l.innerHTML = ft, o.appendChild(l);
+    }), l.innerHTML = mt, o.appendChild(l);
     const d = document.createElement("div");
     Object.assign(d.style, {
       position: "absolute",
@@ -3312,28 +3329,28 @@ const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
       cursor: "pointer",
       pointerEvents: "auto",
       transition: "opacity 0.2s ease, background 0.15s ease"
-    }), d.innerHTML = ts, d.title = "Fullscreen", d.addEventListener("mouseenter", () => {
+    }), d.innerHTML = ss, d.title = "Fullscreen", d.addEventListener("mouseenter", () => {
       d.style.background = "rgba(0,0,0,0.7)";
     }), d.addEventListener("mouseleave", () => {
       d.style.background = "rgba(0,0,0,0.45)";
-    }), d.addEventListener("click", (p) => {
-      p.stopPropagation(), S.openFullscreen(e, t);
+    }), d.addEventListener("click", (u) => {
+      u.stopPropagation(), A.openFullscreen(e, t);
     }), o.appendChild(d);
     function c() {
       a.style.opacity = i ? "0" : "1";
     }
     function h() {
-      l.style.display = i ? "flex" : "none", l.innerHTML = s ? ft : es, d.style.display = i ? "flex" : "none";
+      l.style.display = i ? "flex" : "none", l.innerHTML = s ? mt : is, d.style.display = i ? "flex" : "none";
     }
-    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(() => {
+    return o.addEventListener("click", (u) => {
+      u.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(), h());
     }), o;
   }
   static openFullscreen(e, t) {
-    S.closeFullscreen();
+    A.closeFullscreen();
     const i = document.createElement("div");
     Object.assign(i.style, {
       position: "fixed",
@@ -3375,7 +3392,7 @@ const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
     }), s.addEventListener("mouseleave", () => {
       s.style.background = "rgba(255,255,255,0.15)";
     }), s.addEventListener("click", (a) => {
-      a.stopPropagation(), S.closeFullscreen();
+      a.stopPropagation(), A.closeFullscreen();
     });
     const o = document.createElement("video");
     Object.assign(o.style, {
@@ -3384,25 +3401,25 @@ const Gi = 180, Ji = 120, Zi = "#e2e8f0", Qi = `
       borderRadius: "8px",
       outline: "none",
       cursor: "default"
-    }), o.src = e, o.controls = !0, o.autoplay = !0, o.playsInline = !0, t && (o.poster = t), o.addEventListener("click", (a) => a.stopPropagation()), i.appendChild(s), i.appendChild(o), i.addEventListener("click", () => S.closeFullscreen());
+    }), o.src = e, o.controls = !0, o.autoplay = !0, o.playsInline = !0, t && (o.poster = t), o.addEventListener("click", (a) => a.stopPropagation()), i.appendChild(s), i.appendChild(o), i.addEventListener("click", () => A.closeFullscreen());
     const r = (a) => {
-      a.key === "Escape" && S.closeFullscreen();
+      a.key === "Escape" && A.closeFullscreen();
     };
-    document.addEventListener("keydown", r), S.fullscreenOverlay = i, S.fullscreenKeyHandler = r, document.body.appendChild(i), requestAnimationFrame(() => {
+    document.addEventListener("keydown", r), A.fullscreenOverlay = i, A.fullscreenKeyHandler = r, document.body.appendChild(i), requestAnimationFrame(() => {
       i.style.opacity = "1";
     });
   }
   static closeFullscreen() {
-    if (!S.fullscreenOverlay) return;
-    const e = S.fullscreenOverlay;
-    S.fullscreenKeyHandler && (document.removeEventListener("keydown", S.fullscreenKeyHandler), S.fullscreenKeyHandler = null);
+    if (!A.fullscreenOverlay) return;
+    const e = A.fullscreenOverlay;
+    A.fullscreenKeyHandler && (document.removeEventListener("keydown", A.fullscreenKeyHandler), A.fullscreenKeyHandler = null);
     const t = e.querySelector("video");
-    t && t.pause(), e.style.opacity = "0", e.addEventListener("transitionend", () => e.remove()), S.fullscreenOverlay = null;
+    t && t.pause(), e.style.opacity = "0", e.addEventListener("transitionend", () => e.remove()), A.fullscreenOverlay = null;
   }
 };
-S.fullscreenOverlay = null, S.fullscreenKeyHandler = null;
-let Ce = S;
-const mt = 60, is = `
+A.fullscreenOverlay = null, A.fullscreenKeyHandler = null;
+let Ce = A;
+const gt = 60, ns = `
   .vr-overlay {
     display: flex;
     flex-direction: column;
@@ -3509,14 +3526,14 @@ const mt = 60, is = `
     color: #0f172a;
   }
 `;
-function gt(n) {
+function vt(n) {
   return n.toString().padStart(2, "0");
 }
-function ss(n) {
+function os(n) {
   const e = Math.floor(n / 60), t = n % 60;
-  return `${gt(e)}:${gt(t)}`;
+  return `${vt(e)}:${vt(t)}`;
 }
-function ns() {
+function rs() {
   const n = [
     "video/webm;codecs=vp9,opus",
     "video/webm;codecs=vp8,opus",
@@ -3527,7 +3544,7 @@ function ns() {
     if (MediaRecorder.isTypeSupported(e)) return e;
   return "";
 }
-function os(n) {
+function as(n) {
   return new Promise((e, t) => {
     const i = URL.createObjectURL(n), s = document.createElement("video");
     s.muted = !0, s.playsInline = !0, s.preload = "auto", s.src = i, s.addEventListener("loadeddata", () => {
@@ -3563,7 +3580,7 @@ class De {
     }
     this.stream = t, this.container = e, this.recording = !0, this.elapsed = 0, this.chunks = [], this.buildUI(e), this.videoEl && (this.videoEl.srcObject = t, this.videoEl.play().catch(() => {
     }));
-    const i = ns(), s = {};
+    const i = rs(), s = {};
     i && (s.mimeType = i);
     const o = new MediaRecorder(t, s);
     return this.mediaRecorder = o, o.ondataavailable = (r) => {
@@ -3571,7 +3588,7 @@ class De {
     }, o.onstop = () => {
       this.handleRecordingComplete();
     }, o.start(), this.timerInterval = setInterval(() => {
-      this.elapsed++, this.updateTimer(), this.elapsed >= mt && this.stopRecording();
+      this.elapsed++, this.updateTimer(), this.elapsed >= gt && this.stopRecording();
     }, 1e3), new Promise((r) => {
       this.resolvePromise = r;
     });
@@ -3588,7 +3605,7 @@ class De {
   }
   // ── Private ──
   buildUI(e) {
-    this.styleEl = document.createElement("style"), this.styleEl.textContent = is, document.head.appendChild(this.styleEl), this.root = document.createElement("div"), this.root.className = "vr-overlay";
+    this.styleEl = document.createElement("style"), this.styleEl.textContent = ns, document.head.appendChild(this.styleEl), this.root = document.createElement("div"), this.root.className = "vr-overlay";
     const t = document.createElement("div");
     t.className = "vr-circle-wrapper";
     const i = document.createElement("div");
@@ -3604,15 +3621,15 @@ class De {
   }
   updateTimer() {
     if (!this.timerEl) return;
-    const e = mt - this.elapsed;
-    this.timerEl.textContent = ss(this.elapsed), e <= 10 ? this.timerEl.classList.add("vr-countdown") : this.timerEl.classList.remove("vr-countdown");
+    const e = gt - this.elapsed;
+    this.timerEl.textContent = os(this.elapsed), e <= 10 ? this.timerEl.classList.add("vr-countdown") : this.timerEl.classList.remove("vr-countdown");
   }
   async handleRecordingComplete() {
     var s, o;
     const e = ((s = this.mediaRecorder) == null ? void 0 : s.mimeType) || "video/webm", t = new Blob(this.chunks, { type: e });
     let i;
     try {
-      i = await os(t);
+      i = await as(t);
     } catch {
       const r = document.createElement("canvas");
       r.width = 1, r.height = 1, i = await new Promise((a) => {
@@ -3635,7 +3652,7 @@ class De {
     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 vt = {
+const bt = {
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
@@ -3653,7 +3670,7 @@ const vt = {
   justifyContent: "center",
   transition: "background 150ms ease",
   zIndex: "1"
-}, f = class f {
+}, m = class m {
   /**
    * Opens a fullscreen lightbox overlay.
    * @param imageUrl - Single image URL (backwards-compatible)
@@ -3661,8 +3678,8 @@ const vt = {
    * @param startIndex - Index in allUrls to start at (default 0)
    */
   static open(e, t, i) {
-    f.close(), f.urls = t && t.length > 1 ? t : [e], f.currentIndex = i ?? 0;
-    const s = f.urls.length > 1, o = document.createElement("div");
+    m.close(), m.urls = t && t.length > 1 ? t : [e], m.currentIndex = i ?? 0;
+    const s = m.urls.length > 1, o = document.createElement("div");
     o.id = "pulse-widget-lightbox", Object.assign(o.style, {
       position: "fixed",
       top: "0",
@@ -3703,10 +3720,10 @@ const vt = {
     }), r.addEventListener("mouseleave", () => {
       r.style.background = "rgba(255,255,255,0.15)";
     }), r.addEventListener("click", (d) => {
-      d.stopPropagation(), f.close();
+      d.stopPropagation(), m.close();
     }), o.appendChild(r);
     const a = document.createElement("img");
-    if (a.src = f.urls[f.currentIndex], a.alt = "Lightbox image", Object.assign(a.style, {
+    if (a.src = m.urls[m.currentIndex], a.alt = "Lightbox image", Object.assign(a.style, {
       maxWidth: "90vw",
       maxHeight: "85vh",
       borderRadius: "8px",
@@ -3714,23 +3731,23 @@ const vt = {
       cursor: "default",
       userSelect: "none",
       transition: "opacity 150ms ease"
-    }), a.addEventListener("click", (d) => d.stopPropagation()), o.appendChild(a), f.imgEl = a, s) {
+    }), a.addEventListener("click", (d) => d.stopPropagation()), o.appendChild(a), m.imgEl = a, s) {
       const d = document.createElement("button");
-      d.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15,18 9,12 15,6"/></svg>', Object.assign(d.style, { ...vt, left: "16px" }), d.addEventListener("mouseenter", () => {
+      d.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15,18 9,12 15,6"/></svg>', Object.assign(d.style, { ...bt, left: "16px" }), d.addEventListener("mouseenter", () => {
         d.style.background = "rgba(255,255,255,0.3)";
       }), d.addEventListener("mouseleave", () => {
         d.style.background = "rgba(255,255,255,0.15)";
-      }), d.addEventListener("click", (p) => {
-        p.stopPropagation(), f.navigate(-1);
-      }), o.appendChild(d), f.prevBtn = d;
+      }), d.addEventListener("click", (u) => {
+        u.stopPropagation(), m.navigate(-1);
+      }), o.appendChild(d), m.prevBtn = d;
       const c = document.createElement("button");
-      c.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9,18 15,12 9,6"/></svg>', Object.assign(c.style, { ...vt, right: "16px" }), c.addEventListener("mouseenter", () => {
+      c.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9,18 15,12 9,6"/></svg>', Object.assign(c.style, { ...bt, right: "16px" }), c.addEventListener("mouseenter", () => {
         c.style.background = "rgba(255,255,255,0.3)";
       }), c.addEventListener("mouseleave", () => {
         c.style.background = "rgba(255,255,255,0.15)";
-      }), c.addEventListener("click", (p) => {
-        p.stopPropagation(), f.navigate(1);
-      }), o.appendChild(c), f.nextBtn = c;
+      }), c.addEventListener("click", (u) => {
+        u.stopPropagation(), m.navigate(1);
+      }), o.appendChild(c), m.nextBtn = c;
       const h = document.createElement("span");
       Object.assign(h.style, {
         position: "absolute",
@@ -3741,35 +3758,35 @@ const vt = {
         fontSize: "13px",
         fontWeight: "500",
         pointerEvents: "none"
-      }), o.appendChild(h), f.counterEl = h, f.updateNav();
+      }), o.appendChild(h), m.counterEl = h, m.updateNav();
     }
-    o.addEventListener("click", () => f.close());
+    o.addEventListener("click", () => m.close());
     const l = (d) => {
-      d.key === "Escape" && f.close(), s && d.key === "ArrowLeft" && f.navigate(-1), s && d.key === "ArrowRight" && f.navigate(1);
+      d.key === "Escape" && m.close(), s && d.key === "ArrowLeft" && m.navigate(-1), s && d.key === "ArrowRight" && m.navigate(1);
     };
-    document.addEventListener("keydown", l), f.overlay = o, f.onKeyDown = l, document.body.appendChild(o), requestAnimationFrame(() => {
+    document.addEventListener("keydown", l), m.overlay = o, m.onKeyDown = l, document.body.appendChild(o), requestAnimationFrame(() => {
       o.style.opacity = "1";
     });
   }
   static navigate(e) {
-    const t = f.urls.length;
-    f.currentIndex = (f.currentIndex + e + t) % t, f.imgEl && (f.imgEl.style.opacity = "0", setTimeout(() => {
-      f.imgEl && (f.imgEl.src = f.urls[f.currentIndex], f.imgEl.style.opacity = "1");
-    }, 100)), f.updateNav();
+    const t = m.urls.length;
+    m.currentIndex = (m.currentIndex + e + t) % t, m.imgEl && (m.imgEl.style.opacity = "0", setTimeout(() => {
+      m.imgEl && (m.imgEl.src = m.urls[m.currentIndex], m.imgEl.style.opacity = "1");
+    }, 100)), m.updateNav();
   }
   static updateNav() {
-    const e = f.currentIndex, t = f.urls.length;
-    f.counterEl && (f.counterEl.textContent = `${e + 1} / ${t}`);
+    const e = m.currentIndex, t = m.urls.length;
+    m.counterEl && (m.counterEl.textContent = `${e + 1} / ${t}`);
   }
   /** Closes the lightbox if open. */
   static close() {
-    if (!f.overlay) return;
-    const e = f.overlay;
-    f.onKeyDown && (document.removeEventListener("keydown", f.onKeyDown), f.onKeyDown = null), e.style.opacity = "0", e.addEventListener("transitionend", () => e.remove()), f.overlay = null, f.imgEl = null, f.prevBtn = null, f.nextBtn = null, f.counterEl = null, f.urls = [], f.currentIndex = 0;
+    if (!m.overlay) return;
+    const e = m.overlay;
+    m.onKeyDown && (document.removeEventListener("keydown", m.onKeyDown), m.onKeyDown = null), e.style.opacity = "0", e.addEventListener("transitionend", () => e.remove()), m.overlay = null, m.imgEl = null, m.prevBtn = null, m.nextBtn = null, m.counterEl = null, m.urls = [], m.currentIndex = 0;
   }
 };
-f.overlay = null, f.onKeyDown = null, f.urls = [], f.currentIndex = 0, f.imgEl = null, f.prevBtn = null, f.nextBtn = null, f.counterEl = null;
-let Te = f;
+m.overlay = null, m.onKeyDown = null, m.urls = [], m.currentIndex = 0, m.imgEl = null, m.prevBtn = null, m.nextBtn = null, m.counterEl = null;
+let Te = m;
 class re {
   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);
@@ -3864,7 +3881,105 @@ class re {
     this.input.remove();
   }
 }
-const rs = ["👍", "👎", "❤️", "🎉", "👀", "🚀"], xe = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", as = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>', ls = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>', bt = `<button class="pulse-close-btn" style="
+const ls = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+class He {
+  constructor(e) {
+    this.dropdown = null, this.target = null, this.mentionStart = -1, this.selectedIndex = 0, this.filteredUsers = [], this.handleInput = () => {
+      var l;
+      if (!this.target) return;
+      const t = this.target.value, i = this.target.selectionStart ?? t.length, s = t.slice(0, i), o = s.lastIndexOf("@");
+      if (o === -1 || o > 0 && /\w/.test(s[o - 1])) {
+        this.close();
+        return;
+      }
+      const r = s.slice(o + 1).toLowerCase();
+      if (r.includes(" ")) {
+        this.close();
+        return;
+      }
+      this.mentionStart = o;
+      const a = (l = this.client.state.user) == null ? void 0 : l.id;
+      if (this.filteredUsers = this.client.state.users.filter((d) => d.id !== a && d.name.toLowerCase().includes(r)).slice(0, 5), this.filteredUsers.length === 0) {
+        this.close();
+        return;
+      }
+      this.selectedIndex = 0, this.showDropdown();
+    }, this.handleKeydown = (t) => {
+      this.dropdown && (t.key === "ArrowDown" ? (t.preventDefault(), this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredUsers.length - 1), this.renderItems()) : t.key === "ArrowUp" ? (t.preventDefault(), this.selectedIndex = Math.max(this.selectedIndex - 1, 0), this.renderItems()) : t.key === "Enter" && this.dropdown ? (t.preventDefault(), t.stopPropagation(), this.selectUser(this.filteredUsers[this.selectedIndex])) : t.key === "Escape" && this.close());
+    }, this.handleBlur = () => {
+      setTimeout(() => this.close(), 150);
+    }, this.client = e;
+  }
+  /** Attach the mention picker to a text input or textarea. */
+  attach(e) {
+    this.target = e, e.addEventListener("input", this.handleInput), e.addEventListener("keydown", this.handleKeydown), e.addEventListener("blur", this.handleBlur);
+  }
+  /** Detach and clean up. */
+  detach() {
+    this.target && (this.target.removeEventListener("input", this.handleInput), this.target.removeEventListener("keydown", this.handleKeydown), this.target.removeEventListener("blur", this.handleBlur), this.target = null), this.close();
+  }
+  selectUser(e) {
+    if (!this.target) return;
+    const t = this.target.value, i = this.target.selectionStart ?? t.length, s = e.name.split(" ")[0], o = t.slice(0, this.mentionStart), r = t.slice(i);
+    this.target.value = `${o}@${s} ${r}`;
+    const a = this.mentionStart + s.length + 2;
+    this.target.setSelectionRange(a, a), this.target.focus(), this.target.dispatchEvent(new Event("input", { bubbles: !0 })), this.close();
+  }
+  showDropdown() {
+    if (!this.target) return;
+    this.dropdown || (this.dropdown = document.createElement("div"), Object.assign(this.dropdown.style, {
+      position: "absolute",
+      zIndex: "100002",
+      background: "#fff",
+      border: "1px solid #e2e8f0",
+      borderRadius: "8px",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+      overflow: "hidden",
+      fontFamily: ls,
+      minWidth: "160px",
+      maxWidth: "220px"
+    }), document.body.appendChild(this.dropdown));
+    const e = this.target.getBoundingClientRect();
+    this.dropdown.style.left = `${e.left}px`, this.dropdown.style.top = `${e.bottom + 4}px`, this.renderItems();
+  }
+  renderItems() {
+    this.dropdown && (this.dropdown.innerHTML = this.filteredUsers.map((e, t) => {
+      const i = e.name.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2), s = t === this.selectedIndex;
+      return `
+          <div class="mention-item" data-index="${t}" style="
+            display:flex;align-items:center;gap:8px;padding:6px 10px;
+            cursor:pointer;font-size:13px;
+            background:${s ? "#f1f5f9" : "#fff"};
+            transition:background 0.1s;
+          ">
+            <div style="
+              width:24px;height:24px;border-radius:50%;
+              background:${e.color};color:#fff;
+              display:flex;align-items:center;justify-content:center;
+              font-size:10px;font-weight:700;flex-shrink:0;
+            ">${e.avatar ? `<img src="${e.avatar}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;" />` : i}</div>
+            <span style="color:#0f172a;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${this.escapeHtml(e.name)}</span>
+          </div>
+        `;
+    }).join(""), this.dropdown.querySelectorAll(".mention-item").forEach((e) => {
+      e.addEventListener("mousedown", (t) => {
+        t.preventDefault();
+        const i = parseInt(e.dataset.index, 10);
+        this.selectUser(this.filteredUsers[i]);
+      }), e.addEventListener("mouseenter", () => {
+        this.selectedIndex = parseInt(e.dataset.index, 10), this.renderItems();
+      });
+    }));
+  }
+  close() {
+    var e;
+    (e = this.dropdown) == null || e.remove(), this.dropdown = null, this.mentionStart = -1, this.filteredUsers = [];
+  }
+  escapeHtml(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+}
+const cs = ["👍", "👎", "❤️", "🎉", "👀", "🚀"], xe = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", ds = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>', hs = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>', xt = `<button class="pulse-close-btn" style="
   border:none;background:none;cursor:pointer;color:#94a3b8;padding:4px;
   border-radius:6px;display:flex;align-items:center;justify-content:center;
   transition:all 0.15s;flex-shrink:0;
@@ -3872,7 +3987,7 @@ const rs = ["👍", "👎", "❤️", "🎉", "👀", "🚀"], xe = "-apple-syst
    onmouseout="this.style.background='none';this.style.color='#94a3b8'">
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
 </button>`;
-class cs {
+class ps {
   constructor(e, t = {}) {
     this.container = null, this.overlay = null, this.form = null, this.popover = null, this.threads = [], this.pinEls = /* @__PURE__ */ new Map(), this._pinModeActive = !1, this.editingPopoverCommentId = null, this.popoverPickerOpen = null, this.lastTypingSendPins = /* @__PURE__ */ new Map(), this.repositionDebounce = null, this.mutationObserver = null, this.upload = null, this.audioRecorder = null, this.videoRecorder = null, this.pendingAttachmentIds = [], this.handleReposition = () => {
       this.repositionDebounce || (this.repositionDebounce = setTimeout(() => {
@@ -4012,7 +4127,7 @@ class cs {
     }), this.form.innerHTML = `
       <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
         <span style="font-size:13px;font-weight:600;color:#0f172a;">Add a comment here</span>
-        ${bt}
+        ${xt}
       </div>
       <textarea
         placeholder="Write a comment..."
@@ -4044,13 +4159,15 @@ class cs {
       </div>
       <div class="pin-attachments-preview" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;"></div>
     `;
-    const l = this.form.querySelector("textarea"), d = this.form.querySelector(".pulse-close-btn"), c = this.form.querySelector(".pin-submit");
-    d.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new re(this.client));
-    const h = this.form.querySelector(".pin-attachments-preview"), p = (g, y) => {
-      const b = document.createElement("div");
-      Object.assign(b.style, { position: "relative", display: "inline-block" }), b.appendChild(y);
-      const w = document.createElement("button");
-      w.innerHTML = "×", Object.assign(w.style, {
+    const l = this.form.querySelector("textarea"), d = this.form.querySelector(".pulse-close-btn"), c = this.form.querySelector(".pin-submit"), h = new He(this.client);
+    h.attach(l), d.addEventListener("click", () => {
+      h.detach(), this.exitPinMode();
+    }), this.pendingAttachmentIds = [], this.upload || (this.upload = new re(this.client));
+    const u = this.form.querySelector(".pin-attachments-preview"), f = (x, y) => {
+      const v = document.createElement("div");
+      Object.assign(v.style, { position: "relative", display: "inline-block" }), v.appendChild(y);
+      const $ = document.createElement("button");
+      $.innerHTML = "×", Object.assign($.style, {
         position: "absolute",
         top: "-4px",
         right: "-4px",
@@ -4068,51 +4185,51 @@ class cs {
         justifyContent: "center",
         padding: "0",
         fontWeight: "700"
-      }), w.addEventListener("click", () => {
-        const E = this.pendingAttachmentIds.indexOf(g);
-        E !== -1 && this.pendingAttachmentIds.splice(E, 1), b.remove();
-      }), b.appendChild(w), h.appendChild(b);
-    }, m = 5;
+      }), $.addEventListener("click", () => {
+        const T = this.pendingAttachmentIds.indexOf(x);
+        T !== -1 && this.pendingAttachmentIds.splice(T, 1), v.remove();
+      }), v.appendChild($), u.appendChild(v);
+    }, b = 5;
     this.form.querySelector(".attach-img").addEventListener("click", async () => {
-      const g = m - this.pendingAttachmentIds.length;
-      if (g <= 0) return;
-      const y = await this.upload.pickFiles("image/*", g);
-      for (const b of y) {
-        this.pendingAttachmentIds.push(b.id);
-        const w = document.createElement("img");
-        w.src = b.thumbnailUrl || b.url, Object.assign(w.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), p(b.id, w);
+      const x = b - this.pendingAttachmentIds.length;
+      if (x <= 0) return;
+      const y = await this.upload.pickFiles("image/*", x);
+      for (const v of y) {
+        this.pendingAttachmentIds.push(v.id);
+        const $ = document.createElement("img");
+        $.src = v.thumbnailUrl || v.url, Object.assign($.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), f(v.id, $);
       }
     }), this.form.querySelector(".attach-mic").addEventListener("click", async () => {
-      if (this.pendingAttachmentIds.length >= m) return;
-      this.audioRecorder || (this.audioRecorder = new Ue());
-      const g = await this.audioRecorder.startRecording(h);
-      if (g) {
-        const y = await this.upload.uploadBlob(g, "audio.webm");
+      if (this.pendingAttachmentIds.length >= b) return;
+      this.audioRecorder || (this.audioRecorder = new ze());
+      const x = await this.audioRecorder.startRecording(u);
+      if (x) {
+        const y = await this.upload.uploadBlob(x, "audio.webm");
         if (y) {
           this.pendingAttachmentIds.push(y.id);
-          const b = document.createElement("span");
-          Object.assign(b.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), b.textContent = "🎤 Audio", p(y.id, b);
+          const v = document.createElement("span");
+          Object.assign(v.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), v.textContent = "🎤 Audio", f(y.id, v);
         }
       }
     }), this.form.querySelector(".attach-video").addEventListener("click", async () => {
-      if (this.pendingAttachmentIds.length >= m) return;
+      if (this.pendingAttachmentIds.length >= b) return;
       this.videoRecorder || (this.videoRecorder = new De());
-      const g = await this.videoRecorder.startRecording(h);
-      if (g) {
-        const y = await this.upload.uploadBlob(g.blob, "video.webm");
+      const x = await this.videoRecorder.startRecording(u);
+      if (x) {
+        const y = await this.upload.uploadBlob(x.blob, "video.webm");
         if (y) {
           this.pendingAttachmentIds.push(y.id);
-          const b = document.createElement("span");
-          Object.assign(b.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), b.textContent = "🎥 Video", p(y.id, b);
+          const v = document.createElement("span");
+          Object.assign(v.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), v.textContent = "🎥 Video", f(y.id, v);
         }
       }
     }), c.addEventListener("click", () => {
-      const g = l.value.trim();
-      if (!g && this.pendingAttachmentIds.length === 0) return;
-      const y = [...(g || "").matchAll(/@(\w+)/g)].map((b) => b[1]);
-      this.client.createThread(g, { position: i, mentions: y, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
-    }), l.addEventListener("keydown", (g) => {
-      g.key === "Escape" && this.exitPinMode(), g.stopPropagation();
+      const x = l.value.trim();
+      if (!x && this.pendingAttachmentIds.length === 0) return;
+      const y = [...(x || "").matchAll(/@(\w+)/g)].map((v) => v[1]);
+      this.client.createThread(x, { position: i, mentions: y, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
+    }), l.addEventListener("keydown", (x) => {
+      x.key === "Escape" && this.exitPinMode(), x.stopPropagation();
     }), document.body.appendChild(this.form), requestAnimationFrame(() => l.focus());
   }
   // ── Inline thread popover (shown when a pin dot is clicked) ──
@@ -4148,7 +4265,7 @@ class cs {
       flexShrink: "0"
     }), l.innerHTML = `
       <span style="font-size:13px;font-weight:700;color:#0f172a;">Thread</span>
-      ${bt}
+      ${xt}
     `, l.querySelector(".pulse-close-btn").addEventListener("click", () => {
       this.closePopover();
     }), this.popover.appendChild(l), this.refreshPopoverComments(e), this.addPopoverReplyForm(e), document.body.appendChild(this.popover);
@@ -4176,13 +4293,13 @@ class cs {
     }
     const i = (d = this.client.state.user) == null ? void 0 : d.id;
     t.innerHTML = e.comments.map((c) => {
-      const h = this.client.state.getUser(c.userId), p = h ? h.name.split(" ").map((O) => O[0]).join("").toUpperCase().slice(0, 2) : "?", m = (h == null ? void 0 : h.color) ?? "#94a3b8", g = this.escapeHtml((h == null ? void 0 : h.name) ?? "Unknown"), y = this.formatTime(c.createdAt), b = i === c.userId, w = c.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
+      const h = this.client.state.getUser(c.userId), u = h ? h.name.split(" ").map((R) => R[0]).join("").toUpperCase().slice(0, 2) : "?", f = (h == null ? void 0 : h.color) ?? "#94a3b8", b = this.escapeHtml((h == null ? void 0 : h.name) ?? "Unknown"), x = this.formatTime(c.createdAt), y = i === c.userId, v = c.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
       if (this.editingPopoverCommentId === c.id)
         return `
             <div style="margin-bottom:10px;" data-comment-id="${c.id}">
               <div style="display:flex;align-items:center;gap:7px;margin-bottom:4px;">
-                <div style="width:22px;height:22px;border-radius:50%;background:${m};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${p}</div>
-                <span style="font-size:12px;font-weight:600;color:#0f172a;">${g}</span>
+                <div style="width:22px;height:22px;border-radius:50%;background:${f};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${u}</div>
+                <span style="font-size:12px;font-weight:600;color:#0f172a;">${b}</span>
               </div>
               <div style="margin-left:29px;">
                 <textarea class="edit-textarea" style="width:100%;padding:6px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;font-family:inherit;outline:none;resize:vertical;min-height:48px;color:#0f172a;box-sizing:border-box;">${this.escapeHtml(c.body)}</textarea>
@@ -4193,37 +4310,37 @@ class cs {
               </div>
             </div>
           `;
-      const E = c.body && c.body !== "(attachment)" ? c.body.replace(
+      const $ = c.body && c.body !== "(attachment)" ? c.body.replace(
         /@(\w+)/g,
         '<span style="color:#6366f1;font-weight:600;background:#eef2ff;padding:0 3px;border-radius:3px;">@$1</span>'
-      ) : "", I = (c.attachments ?? []).map((O) => {
-        if (O.type === "image") {
-          const Rt = O.thumbnailUrl || O.url;
-          return `<div class="popover-attachment-img" data-full-url="${this.escapeHtml(O.url)}" style="margin:4px 0 4px 29px;cursor:pointer;">
-              <img src="${this.escapeHtml(Rt)}" alt="${this.escapeHtml(O.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
+      ) : "", T = (c.attachments ?? []).map((R) => {
+        if (R.type === "image") {
+          const jt = R.thumbnailUrl || R.url;
+          return `<div class="popover-attachment-img" data-full-url="${this.escapeHtml(R.url)}" style="margin:4px 0 4px 29px;cursor:pointer;">
+              <img src="${this.escapeHtml(jt)}" alt="${this.escapeHtml(R.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
             </div>`;
         }
-        return O.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(O.url)}" data-duration="${O.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : O.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(O.url)}" data-poster="${this.escapeHtml(O.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
-      }).join(""), z = b ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
+        return R.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(R.url)}" data-duration="${R.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : R.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(R.url)}" data-poster="${this.escapeHtml(R.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
+      }).join(""), U = y ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
               <button class="edit-btn" data-comment-id="${c.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Edit"
                 onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'"
-                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${as}</button>
+                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${ds}</button>
               <button class="delete-btn" data-comment-id="${c.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Delete"
                 onmouseover="this.style.color='#ef4444';this.style.background='#fef2f2'"
-                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${ls}</button>
-            </div>` : "", Ot = this.buildReactionPillsHtml(c.id);
+                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${hs}</button>
+            </div>` : "", Lt = this.buildReactionPillsHtml(c.id);
       return `
           <div class="popover-comment" style="margin-bottom:10px;" data-comment-id="${c.id}">
             <div style="display:flex;align-items:center;gap:7px;margin-bottom:2px;">
-              <div style="width:22px;height:22px;border-radius:50%;background:${m};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${p}</div>
-              <span style="font-size:12px;font-weight:600;color:#0f172a;">${g}</span>
-              <span style="font-size:10px;color:#94a3b8;">${y}</span>
-              ${w}
+              <div style="width:22px;height:22px;border-radius:50%;background:${f};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${u}</div>
+              <span style="font-size:12px;font-weight:600;color:#0f172a;">${b}</span>
+              <span style="font-size:10px;color:#94a3b8;">${x}</span>
+              ${v}
             </div>
-            ${E ? `<div style="font-size:13px;color:#334155;line-height:1.45;margin-left:29px;word-wrap:break-word;">${E}</div>` : ""}
-            ${I}
-            ${z}
-            ${Ot}
+            ${$ ? `<div style="font-size:13px;color:#334155;line-height:1.45;margin-left:29px;word-wrap:break-word;">${$}</div>` : ""}
+            ${T}
+            ${U}
+            ${Lt}
           </div>
         `;
     }).join(""), t.querySelectorAll(".edit-btn").forEach((c) => {
@@ -4241,7 +4358,7 @@ class cs {
     s && r && s.addEventListener("click", () => {
       const c = r.value.trim();
       if (!c) return;
-      const h = [...c.matchAll(/@(\w+)/g)].map((p) => p[1]);
+      const h = [...c.matchAll(/@(\w+)/g)].map((u) => u[1]);
       this.client.editComment(
         this.editingPopoverCommentId,
         c,
@@ -4252,33 +4369,33 @@ class cs {
     }), t.querySelectorAll("[data-reaction-emoji]").forEach((c) => {
       c.addEventListener("click", (h) => {
         h.stopPropagation();
-        const p = c.dataset.reactionEmoji, m = c.dataset.reactionTarget, g = c.dataset.reactionId;
-        g ? this.client.removeReaction(g) : this.client.addReaction(m, "comment", p);
+        const u = c.dataset.reactionEmoji, f = c.dataset.reactionTarget, b = c.dataset.reactionId;
+        b ? this.client.removeReaction(b) : this.client.addReaction(f, "comment", u);
       });
     }), t.querySelectorAll(".popover-reaction-add").forEach((c) => {
       c.addEventListener("click", (h) => {
         h.stopPropagation();
-        const p = c.dataset.commentId;
-        this.popoverPickerOpen === p ? (this.popoverPickerOpen = null, this.removePickerEl()) : (this.popoverPickerOpen = p, this.showPickerForButton(c, p));
+        const u = c.dataset.commentId;
+        this.popoverPickerOpen === u ? (this.popoverPickerOpen = null, this.removePickerEl()) : (this.popoverPickerOpen = u, this.showPickerForButton(c, u));
       });
     });
     const a = t.querySelectorAll(".popover-attachment-img"), l = Array.from(a).map((c) => c.dataset.fullUrl).filter(Boolean);
     a.forEach((c, h) => {
       c.addEventListener("click", () => {
-        const p = c.dataset.fullUrl;
-        p && Te.open(p, l, h);
+        const u = c.dataset.fullUrl;
+        u && Te.open(u, l, h);
       });
     }), t.querySelectorAll(".popover-attachment-audio").forEach((c) => {
       const h = c.dataset.url;
       if (h) {
-        const p = c.dataset.duration ? parseInt(c.dataset.duration) : void 0, m = ze.render(h, p);
-        c.appendChild(m);
+        const u = c.dataset.duration ? parseInt(c.dataset.duration) : void 0, f = Ue.render(h, u);
+        c.appendChild(f);
       }
     }), t.querySelectorAll(".popover-attachment-video").forEach((c) => {
       const h = c.dataset.url;
       if (h) {
-        const p = c.dataset.poster || void 0, m = Ce.render(h, p);
-        c.appendChild(m);
+        const u = c.dataset.poster || void 0, f = Ce.render(h, u);
+        c.appendChild(f);
       }
     }), t.scrollTop = t.scrollHeight;
   }
@@ -4311,9 +4428,11 @@ class cs {
     `;
     const o = t.querySelector("input"), r = t.querySelector(".reply-send"), a = t.querySelector(".reply-attachments-preview");
     this.upload || (this.upload = new re(this.client));
-    const l = [], d = (p, m) => {
-      const g = document.createElement("span");
-      Object.assign(g.style, { position: "relative", display: "inline-flex", alignItems: "center", padding: "2px 18px 2px 8px", borderRadius: "4px", background: "#f1f5f9", fontSize: "10px", color: "#64748b" }), g.textContent = m;
+    const l = [];
+    new He(this.client).attach(o);
+    const c = (f, b) => {
+      const x = document.createElement("span");
+      Object.assign(x.style, { position: "relative", display: "inline-flex", alignItems: "center", padding: "2px 18px 2px 8px", borderRadius: "4px", background: "#f1f5f9", fontSize: "10px", color: "#64748b" }), x.textContent = b;
       const y = document.createElement("button");
       y.innerHTML = "×", Object.assign(y.style, {
         position: "absolute",
@@ -4334,44 +4453,44 @@ class cs {
         padding: "0",
         fontWeight: "700"
       }), y.addEventListener("click", () => {
-        const b = l.indexOf(p);
-        b !== -1 && l.splice(b, 1), g.remove();
-      }), g.appendChild(y), a.appendChild(g);
-    }, c = 5;
+        const v = l.indexOf(f);
+        v !== -1 && l.splice(v, 1), x.remove();
+      }), x.appendChild(y), a.appendChild(x);
+    }, h = 5;
     t.querySelector(".reply-attach-img").addEventListener("click", async () => {
-      const p = c - l.length;
-      if (p <= 0) return;
-      const m = await this.upload.pickFiles("image/*", p);
-      for (const g of m)
-        l.push(g.id), d(g.id, "📎 Image");
+      const f = h - l.length;
+      if (f <= 0) return;
+      const b = await this.upload.pickFiles("image/*", f);
+      for (const x of b)
+        l.push(x.id), c(x.id, "📎 Image");
     }), t.querySelector(".reply-attach-mic").addEventListener("click", async () => {
-      if (l.length >= c) return;
-      this.audioRecorder || (this.audioRecorder = new Ue());
-      const p = await this.audioRecorder.startRecording(t);
-      if (p) {
-        const m = await this.upload.uploadBlob(p, "audio.webm");
-        m && (l.push(m.id), d(m.id, "🎤 Audio"));
+      if (l.length >= h) return;
+      this.audioRecorder || (this.audioRecorder = new ze());
+      const f = await this.audioRecorder.startRecording(t);
+      if (f) {
+        const b = await this.upload.uploadBlob(f, "audio.webm");
+        b && (l.push(b.id), c(b.id, "🎤 Audio"));
       }
     }), t.querySelector(".reply-attach-video").addEventListener("click", async () => {
-      if (l.length >= c) return;
+      if (l.length >= h) return;
       this.videoRecorder || (this.videoRecorder = new De());
-      const p = await this.videoRecorder.startRecording(t);
-      if (p) {
-        const m = await this.upload.uploadBlob(p.blob, "video.webm");
-        m && (l.push(m.id), d(m.id, "🎥 Video"));
+      const f = await this.videoRecorder.startRecording(t);
+      if (f) {
+        const b = await this.upload.uploadBlob(f.blob, "video.webm");
+        b && (l.push(b.id), c(b.id, "🎥 Video"));
       }
     });
-    const h = () => {
-      const p = o.value.trim();
-      if (!p && l.length === 0) return;
-      const m = [...(p || "").matchAll(/@(\w+)/g)].map((g) => g[1]);
-      this.client.reply(e.id, p, m, l.length > 0 ? [...l] : void 0), o.value = "", l.length = 0, a.innerHTML = "";
+    const u = () => {
+      const f = o.value.trim();
+      if (!f && l.length === 0) return;
+      const b = [...(f || "").matchAll(/@(\w+)/g)].map((x) => x[1]);
+      this.client.reply(e.id, f, b, l.length > 0 ? [...l] : void 0), o.value = "", l.length = 0, a.innerHTML = "";
     };
-    r.addEventListener("click", h), o.addEventListener("input", () => {
-      const p = Date.now(), m = this.lastTypingSendPins.get(e.id) ?? 0;
-      p - m >= 2e3 && (this.client.sendTyping(e.id), this.lastTypingSendPins.set(e.id, p));
-    }), o.addEventListener("keydown", (p) => {
-      p.key === "Enter" && (p.preventDefault(), h()), p.key === "Escape" && this.closePopover(), p.stopPropagation();
+    r.addEventListener("click", u), o.addEventListener("input", () => {
+      const f = Date.now(), b = this.lastTypingSendPins.get(e.id) ?? 0;
+      f - b >= 2e3 && (this.client.sendTyping(e.id), this.lastTypingSendPins.set(e.id, f));
+    }), o.addEventListener("keydown", (f) => {
+      f.key === "Enter" && (f.preventDefault(), u()), f.key === "Escape" && this.closePopover(), f.stopPropagation();
     }), this.popover.appendChild(t);
   }
   removePickerEl() {
@@ -4396,7 +4515,7 @@ class cs {
       zIndex: "10002",
       fontFamily: xe
     });
-    for (const s of rs) {
+    for (const s of cs) {
       const o = document.createElement("button");
       Object.assign(o.style, {
         border: "none",
@@ -4429,8 +4548,8 @@ class cs {
     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 a = '<div style="margin-left:29px;display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">';
     for (const [d, { count: c, ownId: h }] of s) {
-      const p = h ? r : o;
-      a += `<button data-reaction-emoji="${d}" data-reaction-target="${e}" ${h ? `data-reaction-id="${h}"` : ""} style="${p}">
+      const u = h ? r : o;
+      a += `<button data-reaction-emoji="${d}" data-reaction-target="${e}" ${h ? `data-reaction-id="${h}"` : ""} style="${u}">
         <span>${d}</span><span style="font-size:11px;font-weight:600;color:#64748b;">${c}</span>
       </button>`;
     }
@@ -4531,13 +4650,13 @@ class cs {
     });
   }
 }
-var ds = Object.defineProperty, hs = Object.getOwnPropertyDescriptor, U = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? hs(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var us = Object.defineProperty, fs = Object.getOwnPropertyDescriptor, z = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? fs(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 && ds(e, t, s), s;
+  return i && s && us(e, t, s), s;
 };
-const ps = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let P = class extends A {
+const ms = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
+let I = class extends _ {
   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 = [];
   }
@@ -4555,18 +4674,19 @@ let P = class extends A {
     this.client && !this.unsub && this.ensureListener();
   }
   updated(n) {
-    var e, t;
-    (e = this.shadowRoot) == null || e.querySelectorAll(".audio-player-host").forEach((i) => {
-      if (i.children.length > 0) return;
-      const s = i.dataset.url;
-      if (s) {
-        const o = i.dataset.duration ? parseInt(i.dataset.duration) : void 0;
-        i.appendChild(ze.render(s, o));
-      }
-    }), (t = this.shadowRoot) == null || t.querySelectorAll(".video-player-host").forEach((i) => {
-      if (i.children.length > 0) return;
-      const s = i.dataset.url;
-      s && i.appendChild(Ce.render(s, i.dataset.poster || void 0));
+    var t, i, s;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".reply-form input");
+    e && this.client && (this.mentionPicker || (this.mentionPicker = new He(this.client)), e.dataset.mentionAttached || (this.mentionPicker.attach(e), e.dataset.mentionAttached = "1")), (i = this.shadowRoot) == null || i.querySelectorAll(".audio-player-host").forEach((o) => {
+      if (o.children.length > 0) return;
+      const r = o.dataset.url;
+      if (r) {
+        const a = o.dataset.duration ? parseInt(o.dataset.duration) : void 0;
+        o.appendChild(Ue.render(r, a));
+      }
+    }), (s = this.shadowRoot) == null || s.querySelectorAll(".video-player-host").forEach((o) => {
+      if (o.children.length > 0) return;
+      const r = o.dataset.url;
+      r && o.appendChild(Ce.render(r, o.dataset.poster || void 0));
     });
   }
   teardownListeners() {
@@ -4634,7 +4754,7 @@ let P = class extends A {
   }
   parseMentions(n) {
     return n.split(/(@\w+)/g).map(
-      (t) => t.startsWith("@") ? u`<span class="mention">${t}</span>` : t
+      (t) => t.startsWith("@") ? p`<span class="mention">${t}</span>` : t
     );
   }
   getInitials(n) {
@@ -4652,15 +4772,15 @@ let P = class extends A {
   }
   async handleAttachImage() {
     this.upload || (this.upload = new re(this.client));
-    const n = P.MAX_ATTACHMENTS - this.replyAttachmentIds.length;
+    const n = I.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 re(this.client)), this.audioRecorder || (this.audioRecorder = new Ue());
+    if (this.replyAttachmentIds.length >= I.MAX_ATTACHMENTS) return;
+    this.upload || (this.upload = new re(this.client)), this.audioRecorder || (this.audioRecorder = new ze());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
     if (t) {
       const s = await this.upload.uploadBlob(t, "audio.webm");
@@ -4669,7 +4789,7 @@ let P = class extends A {
   }
   async handleRecordVideo(n) {
     var i;
-    if (this.replyAttachmentIds.length >= P.MAX_ATTACHMENTS) return;
+    if (this.replyAttachmentIds.length >= I.MAX_ATTACHMENTS) return;
     this.upload || (this.upload = new re(this.client)), this.videoRecorder || (this.videoRecorder = new De());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4707,7 +4827,7 @@ let P = class extends A {
     this.client.deleteComment(n);
   }
   renderEditForm(n) {
-    return u`
+    return p`
       <div class="edit-form">
         <textarea
           .value=${this.editBody}
@@ -4728,12 +4848,12 @@ let P = class extends A {
     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 u`
+    return p`
       <div class="comment-reactions">
         ${[...i.entries()].map(
       ([o, r]) => {
         const a = r.some((l) => l.userId === t);
-        return u`
+        return p`
               <button
                 class="reaction-pill ${a ? "own" : ""}"
                 @click=${() => this.toggleReaction(n.id, o)}
@@ -4752,26 +4872,26 @@ let P = class extends A {
           title="Add reaction"
         >
           +
-          ${this.pickerOpenForComment === n.id ? u`
+          ${this.pickerOpenForComment === n.id ? p`
                 <div class="emoji-picker">
-                  ${ps.map(
-      (o) => u`
+                  ${ms.map(
+      (o) => p`
                       <button @click=${(r) => {
         r.stopPropagation(), this.toggleReaction(n.id, o);
       }}>${o}</button>
                     `
     )}
                 </div>
-              ` : v}
+              ` : g}
         </button>
       </div>
     `;
   }
   renderTypingIndicator(n) {
     const e = this.typingByThread.get(n) ?? [];
-    if (e.length === 0) return v;
+    if (e.length === 0) return g;
     const t = e.length === 1 ? `${e[0]} is typing...` : `${e.join(", ")} are typing...`;
-    return u`<div class="typing-indicator">${t}</div>`;
+    return p`<div class="typing-indicator">${t}</div>`;
   }
   sortedThreads() {
     return [...this.threads].sort((n, e) => {
@@ -4782,7 +4902,7 @@ let P = class extends A {
   }
   render() {
     const n = this.sortedThreads();
-    return u`
+    return p`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
@@ -4790,12 +4910,12 @@ let P = class extends A {
             <span class="thread-count">${this.threads.length}</span>
           </span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(ve, 16)}
+            ${S(ve, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${n.length === 0 ? u`<div class="empty">
+          ${n.length === 0 ? p`<div class="empty">
                 <div class="empty-icon">&#128172;</div>
                 No comments yet
               </div>` : n.map((e) => this.renderThread(e))}
@@ -4808,13 +4928,13 @@ let P = class extends A {
     `;
   }
   renderAttachments(n) {
-    if (!n || n.length === 0) return v;
+    if (!n || n.length === 0) return g;
     const e = n.filter((t) => t.type === "image").map((t) => t.url);
-    return u`
+    return p`
       ${n.map((t) => {
       if (t.type === "image") {
         const i = t.thumbnailUrl || t.url, s = e.indexOf(t.url);
-        return u`
+        return p`
             <div class="comment-attachment-media">
               <img
                 class="comment-attachment-img"
@@ -4825,40 +4945,40 @@ let P = class extends A {
             </div>
           `;
       }
-      return t.type === "audio" ? u`
+      return t.type === "audio" ? p`
             <div class="comment-attachment-media" id="audio-${t.id}">
               ${this.renderAudioPlayer(t)}
             </div>
-          ` : t.type === "video" ? u`
+          ` : t.type === "video" ? p`
             <div class="comment-attachment-media" id="video-${t.id}">
               ${this.renderVideoPlayer(t)}
             </div>
-          ` : v;
+          ` : g;
     })}
     `;
   }
   renderAudioPlayer(n) {
-    const e = document.createElement("div"), t = ze.render(n.url, n.durationMs);
-    return e.appendChild(t), u`<div class="audio-player-host" data-url=${n.url} data-duration=${n.durationMs ?? ""}></div>`;
+    const e = document.createElement("div"), t = Ue.render(n.url, n.durationMs);
+    return e.appendChild(t), p`<div class="audio-player-host" data-url=${n.url} data-duration=${n.durationMs ?? ""}></div>`;
   }
   renderVideoPlayer(n) {
-    return u`<div class="video-player-host" data-url=${n.url} data-poster=${n.thumbnailUrl ?? ""}></div>`;
+    return p`<div class="video-player-host" data-url=${n.url} data-poster=${n.thumbnailUrl ?? ""}></div>`;
   }
   renderThread(n) {
     const e = this.highlightThreadId === n.id;
-    return u`
+    return p`
       <div
         class="thread ${n.resolved ? "resolved" : ""} ${e ? "highlighted" : ""}"
         data-thread-id=${n.id}
       >
-        ${n.position ? u`<div class="pin-badge">
-              ${C(It, 12)}
+        ${n.position ? p`<div class="pin-badge">
+              ${S(Ot, 12)}
               Pinned
-            </div>` : v}
+            </div>` : g}
         ${n.comments.map((t, i) => {
       const s = this.getUserForComment(t.userId), o = this.isOwnComment(t), r = this.editingCommentId === t.id;
-      return u`
-            ${i > 0 ? u`<div class="comment-divider"></div>` : v}
+      return p`
+            ${i > 0 ? p`<div class="comment-divider"></div>` : g}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -4869,16 +4989,16 @@ let P = class extends A {
                 </div>
                 <span class="comment-author">${(s == null ? void 0 : s.name) ?? "Unknown"}</span>
                 <span class="comment-time">${this.formatTime(t.createdAt)}</span>
-                ${t.editedAt ? u`<span class="edited-badge">(edited)</span>` : v}
+                ${t.editedAt ? p`<span class="edited-badge">(edited)</span>` : g}
               </div>
-              ${r ? this.renderEditForm(t) : u`
-                    ${t.body && t.body !== "(attachment)" ? u`<div class="comment-body">${this.parseMentions(t.body)}</div>` : v}
+              ${r ? this.renderEditForm(t) : p`
+                    ${t.body && t.body !== "(attachment)" ? p`<div class="comment-body">${this.parseMentions(t.body)}</div>` : g}
                     ${this.renderAttachments(t.attachments ?? [])}
                   `}
-              ${o && !r ? u`<div class="comment-actions">
-                    <button @click=${() => this.startEdit(t)} title="Edit">${C(Ui, 14)}</button>
-                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${C(Hi, 14)}</button>
-                  </div>` : v}
+              ${o && !r ? p`<div class="comment-actions">
+                    <button @click=${() => this.startEdit(t)} title="Edit">${S(Hi, 14)}</button>
+                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${S(Ni, 14)}</button>
+                  </div>` : g}
               ${this.renderReactions(t)}
             </div>
           `;
@@ -4899,7 +5019,7 @@ let P = class extends A {
 
         ${this.renderTypingIndicator(n.id)}
 
-        ${this.replyingTo === n.id ? u`
+        ${this.replyingTo === n.id ? p`
               <form
                 class="reply-form"
                 @submit=${(t) => this.handleReply(n.id, t)}
@@ -4918,22 +5038,22 @@ let P = class extends A {
                     class="reply-media-btn"
                     title="Attach image"
                     @click=${() => this.handleAttachImage()}
-                  >${C(ji, 16)}</button>
+                  >${S(zi, 16)}</button>
                   <button
                     type="button"
                     class="reply-media-btn"
                     title="Record audio"
                     @click=${() => this.handleRecordAudio(n.id)}
-                  >${C(Li, 16)}</button>
+                  >${S(Ui, 16)}</button>
                   <button
                     type="button"
                     class="reply-media-btn"
                     title="Record video"
                     @click=${() => this.handleRecordVideo(n.id)}
-                  >${C(Ni, 16)}</button>
+                  >${S(Fi, 16)}</button>
                   <div class="reply-preview">
                     ${this.replyAttachmentIds.map(
-      (t, i) => u`<span class="reply-preview-badge">
+      (t, i) => p`<span class="reply-preview-badge">
                         Attached #${i + 1}
                         <button
                           type="button"
@@ -4945,16 +5065,16 @@ let P = class extends A {
                   </div>
                 </div>
               </form>
-            ` : v}
+            ` : g}
       </div>
     `;
   }
 };
-P.styles = [
+I.styles = [
   ie,
   be,
   Pe,
-  M`
+  O`
       :host {
         display: block;
       }
@@ -5494,56 +5614,56 @@ P.styles = [
       }
     `
 ];
-P.MAX_ATTACHMENTS = 5;
-U([
-  x({ attribute: !1 })
-], P.prototype, "client", 2);
-U([
-  x()
-], P.prototype, "highlightThreadId", 2);
-U([
-  $()
-], P.prototype, "threadsVersion", 2);
-U([
-  $()
-], P.prototype, "replyingTo", 2);
-U([
-  $()
-], P.prototype, "editingCommentId", 2);
-U([
-  $()
-], P.prototype, "editBody", 2);
-U([
-  $()
-], P.prototype, "pickerOpenForComment", 2);
-U([
-  $()
-], P.prototype, "typingByThread", 2);
-U([
-  $()
-], P.prototype, "reactionsVersion", 2);
-P = U([
+I.MAX_ATTACHMENTS = 5;
+z([
+  w({ attribute: !1 })
+], I.prototype, "client", 2);
+z([
+  w()
+], I.prototype, "highlightThreadId", 2);
+z([
+  k()
+], I.prototype, "threadsVersion", 2);
+z([
+  k()
+], I.prototype, "replyingTo", 2);
+z([
+  k()
+], I.prototype, "editingCommentId", 2);
+z([
+  k()
+], I.prototype, "editBody", 2);
+z([
+  k()
+], I.prototype, "pickerOpenForComment", 2);
+z([
+  k()
+], I.prototype, "typingByThread", 2);
+z([
+  k()
+], I.prototype, "reactionsVersion", 2);
+I = z([
   L("pulse-widget-comments-panel")
-], P);
-var us = Object.defineProperty, fs = Object.getOwnPropertyDescriptor, Ye = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? fs(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+], I);
+var gs = Object.defineProperty, vs = Object.getOwnPropertyDescriptor, Ke = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? vs(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 && us(e, t, s), s;
+  return i && s && gs(e, t, s), s;
 };
-const ms = {
+const bs = {
   "comment:created": "left a comment",
   "comment:mention": "mentioned you",
   "comment:reply": "replied to your comment",
   "thread:resolved": "resolved a thread",
   "reaction:added": "reacted to your comment"
-}, gs = {
+}, xs = {
   "comment:created": "💬",
   "comment:mention": "📣",
   "comment:reply": "↩️",
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let pe = class extends A {
+let pe = class extends _ {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -5587,38 +5707,38 @@ let pe = class extends A {
   }
   render() {
     const n = this.notifications.filter((e) => !e.read).length;
-    return u`
+    return p`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
             Notifications
-            ${n > 0 ? u`<span class="unread-badge">${n}</span>` : v}
+            ${n > 0 ? p`<span class="unread-badge">${n}</span>` : g}
           </span>
           <div style="display:flex;align-items:center;gap:4px;">
-            ${n > 0 ? u`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+            ${n > 0 ? p`<button class="mark-all" @click=${() => this.client.markAllRead()}>
                   Mark all read
-                </button>` : v}
+                </button>` : g}
             <button class="close-btn" @click=${this.fireClose} title="Close">
-              ${C(ve, 16)}
+              ${S(ve, 16)}
             </button>
           </div>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${this.notifications.length === 0 ? u`<div class="empty">
+          ${this.notifications.length === 0 ? p`<div class="empty">
                 <div class="empty-icon">&#128276;</div>
                 No notifications
               </div>` : this.notifications.map(
-      (e) => u`
+      (e) => p`
                   <div
                     class="item ${e.read ? "" : "unread"}"
                     @click=${() => this.handleClick(e)}
                   >
-                    <span class="icon">${gs[e.type] ?? "🔔"}</span>
+                    <span class="icon">${xs[e.type] ?? "🔔"}</span>
                     <div class="content">
                       <div class="text">
                         <span class="actor">${this.getActorName(e.actorId)}</span>
-                        ${ms[e.type] ?? e.type}
+                        ${bs[e.type] ?? e.type}
                       </div>
                       <div class="time">${this.formatTime(e.createdAt)}</div>
                     </div>
@@ -5635,7 +5755,7 @@ pe.styles = [
   ie,
   be,
   Pe,
-  M`
+  O`
       :host {
         display: block;
       }
@@ -5828,17 +5948,17 @@ pe.styles = [
       }
     `
 ];
-Ye([
-  x({ attribute: !1 })
+Ke([
+  w({ attribute: !1 })
 ], pe.prototype, "client", 2);
-Ye([
-  $()
+Ke([
+  k()
 ], pe.prototype, "notifications", 2);
-pe = Ye([
+pe = Ke([
   L("pulse-widget-notifications-panel")
 ], pe);
-const vs = 3e3;
-class bs {
+const ys = 3e3;
+class ws {
   constructor(e) {
     this.container = null, this.cursors = /* @__PURE__ */ new Map(), this.cursorEls = /* @__PURE__ */ new Map(), this.cursorLastSeen = /* @__PURE__ */ new Map(), this.unsubs = [], this.enabled = !1, this.sending = !1, this.staleTimer = null, this.handleLocalCursor = (t) => {
       t.pointerType !== "touch" && this.client.moveCursor({
@@ -5890,7 +6010,7 @@ class bs {
     ), this.setSending(!0), this.staleTimer = setInterval(() => {
       const e = Date.now();
       for (const [t, i] of this.cursorLastSeen)
-        if (e - i > vs) {
+        if (e - i > ys) {
           this.cursors.delete(t);
           const s = this.cursorEls.get(t);
           s && s.remove(), this.cursorEls.delete(t), this.cursorLastSeen.delete(t);
@@ -5986,7 +6106,7 @@ class bs {
     i.style.transform = `translate(${t.position.x}px, ${t.position.y}px)`;
   }
 }
-class xs {
+class $s {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.drawMode = !1, this.currentPoints = [], this.currentPath = null, this.lastPoint = null, this.fadeTimers = /* @__PURE__ */ new Map(), this.handlePointerDown = (t) => {
       var a, l, d;
@@ -6069,9 +6189,9 @@ class xs {
     this.fadeTimers.set(e, t);
   }
 }
-function ys(n) {
+function ks(n) {
   if (!n.rangeCount || n.isCollapsed) return null;
-  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = xt(t), o = xt(i);
+  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = yt(t), o = yt(i);
   return !s || !o ? null : {
     startSelector: s,
     startOffset: e.startOffset,
@@ -6079,10 +6199,10 @@ function ys(n) {
     endOffset: e.endOffset
   };
 }
-function ws(n) {
+function Es(n) {
   var e, t;
   try {
-    const i = wt(n.startSelector), s = wt(n.endSelector);
+    const i = $t(n.startSelector), s = $t(n.endSelector);
     if (!i || !s) return null;
     const o = document.createRange(), r = i.nodeType === Node.TEXT_NODE ? ((e = i.textContent) == null ? void 0 : e.length) ?? 0 : i.childNodes.length, a = s.nodeType === Node.TEXT_NODE ? ((t = s.textContent) == null ? void 0 : t.length) ?? 0 : s.childNodes.length;
     return o.setStart(i, Math.min(n.startOffset, r)), o.setEnd(s, Math.min(n.endOffset, a)), o;
@@ -6090,18 +6210,18 @@ function ws(n) {
     return null;
   }
 }
-function xt(n) {
+function yt(n) {
   if (n.nodeType === Node.TEXT_NODE) {
     const e = n.parentElement;
     if (!e) return null;
-    const t = yt(e);
+    const t = wt(e);
     if (!t) return null;
     const i = Array.from(e.childNodes).indexOf(n);
     return `${t}::text(${i})`;
   }
-  return n.nodeType === Node.ELEMENT_NODE ? yt(n) : null;
+  return n.nodeType === Node.ELEMENT_NODE ? wt(n) : null;
 }
-function yt(n) {
+function wt(n) {
   if (!n || n === document.documentElement) return "html";
   if (n === document.body) return "body";
   if (n.id) return `#${CSS.escape(n.id)}`;
@@ -6127,7 +6247,7 @@ function yt(n) {
   }
   return e.length > 0 ? e.join(" > ") : null;
 }
-function wt(n) {
+function $t(n) {
   const e = n.match(/^(.+)::text\((\d+)\)$/);
   if (e) {
     const t = e[1], i = parseInt(e[2], 10);
@@ -6144,7 +6264,7 @@ function wt(n) {
     return null;
   }
 }
-class $s {
+class Cs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.selectionEls = /* @__PURE__ */ new Map(), this.clearTimers = /* @__PURE__ */ new Map(), this.client = e;
   }
@@ -6188,7 +6308,7 @@ class $s {
     if (!this.container) return;
     const i = (a = this.client.state.user) == null ? void 0 : a.id;
     if (e === i || (this.clearSelection(e), !t)) return;
-    const s = ws(t);
+    const s = Es(t);
     if (!s) return;
     const o = this.client.state.presence.find(
       (l) => l.user.id === e
@@ -6196,8 +6316,8 @@ class $s {
     try {
       const l = s.getClientRects(), d = [];
       for (let c = 0; c < l.length; c++) {
-        const h = l[c], p = document.createElement("div");
-        Object.assign(p.style, {
+        const h = l[c], u = document.createElement("div");
+        Object.assign(u.style, {
           position: "absolute",
           left: `${h.left}px`,
           top: `${h.top}px`,
@@ -6207,7 +6327,7 @@ class $s {
           opacity: "0.2",
           borderRadius: "2px",
           pointerEvents: "none"
-        }), this.container.appendChild(p), d.push(p);
+        }), this.container.appendChild(u), d.push(u);
       }
       this.selectionEls.set(e, d);
     } catch {
@@ -6227,12 +6347,12 @@ class $s {
     }
   }
 }
-var ks = Object.defineProperty, Es = Object.getOwnPropertyDescriptor, Ke = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? Es(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var Ts = Object.defineProperty, Ss = Object.getOwnPropertyDescriptor, Ge = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ss(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && ks(e, t, s), s;
+  return i && s && Ts(e, t, s), s;
 };
-let ue = class extends A {
+let ue = class extends _ {
   constructor() {
     super(...arguments), this.roomId = "";
   }
@@ -6252,7 +6372,7 @@ let ue = class extends A {
     );
   }
   renderToggle(n, e) {
-    return u`
+    return p`
       <div class="setting-row">
         <span class="setting-label">${n}</span>
         <label class="toggle">
@@ -6268,12 +6388,12 @@ let ue = class extends A {
   }
   render() {
     const n = !this.settings.enabled;
-    return u`
+    return p`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Settings</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(ve, 16)}
+            ${S(ve, 16)}
           </button>
         </div>
 
@@ -6322,7 +6442,7 @@ ue.styles = [
   ie,
   be,
   Pe,
-  M`
+  O`
       :host {
         display: block;
       }
@@ -6493,13 +6613,13 @@ ue.styles = [
       }
     `
 ];
-Ke([
-  x({ attribute: !1 })
+Ge([
+  w({ attribute: !1 })
 ], ue.prototype, "settings", 2);
-Ke([
-  x()
+Ge([
+  w()
 ], ue.prototype, "roomId", 2);
-ue = Ke([
+ue = Ge([
   L("pulse-widget-settings-panel")
 ], ue);
 const $e = {
@@ -6513,26 +6633,26 @@ const $e = {
   showViewportIndicators: !0,
   showSelections: !0,
   showDrawings: !0
-}, Mt = "pulse:settings:";
-function Cs(n) {
+}, Rt = "pulse:settings:";
+function As(n) {
   try {
-    const e = localStorage.getItem(`${Mt}${n}`);
+    const e = localStorage.getItem(`${Rt}${n}`);
     return e ? { ...$e, ...JSON.parse(e) } : { ...$e };
   } catch {
     return { ...$e };
   }
 }
-function Ts(n, e) {
-  localStorage.setItem(`${Mt}${n}`, JSON.stringify(e));
+function Ps(n, e) {
+  localStorage.setItem(`${Rt}${n}`, JSON.stringify(e));
 }
-var Ss = Object.defineProperty, As = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? As(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var _s = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Is(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 && Ss(e, t, s), s;
+  return i && s && _s(e, t, s), s;
 };
-let R = class extends A {
+let M = class extends _ {
   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;
+    super(...arguments), this.collapsed = !1, this.activePanel = null, this.pinModeActive = !1, this.featuresDisabled = !1, this.drawModeActive = !1, this.followingUserId = null, this.display = "floating", this.envConfig = { ...Mt }, this.users = [], this.unreadCount = 0;
   }
   connectedCallback() {
     super.connectedCallback(), this.setupPresence();
@@ -6583,35 +6703,35 @@ let R = class extends A {
   render() {
     const n = this.display === "inline";
     if (this.collapsed)
-      return u`
+      return p`
         <div class="toolbar collapsed ${n ? "inline" : ""}" @click=${this.fireToggle}>
-          <span class="fab-icon">${C(Bi, n ? 18 : 24)}</span>
+          <span class="fab-icon">${S(qi, n ? 18 : 24)}</span>
         </div>
       `;
     const e = this.users.slice(0, 3), t = this.users.length - 3;
-    return u`
+    return p`
       <div class="toolbar ${n ? "inline" : ""}"
         <!-- Presence avatars -->
-        ${this.users.length > 0 ? u`
+        ${this.users.length > 0 && this.envConfig.showPresence ? p`
               <div class="presence">
-                ${t > 0 ? u`<div class="presence-overflow">+${t}</div>` : v}
+                ${t > 0 ? p`<div class="presence-overflow">+${t}</div>` : g}
                 ${e.map(
-      (i) => u`
+      (i) => p`
                     <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 ? u`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
+                      ${i.user.avatar ? p`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
                       <span class="presence-tooltip">${i.user.name}</span>
-                      ${i.deviceType && i.deviceType !== "desktop" ? u`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : v}
+                      ${i.deviceType && i.deviceType !== "desktop" ? p`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : g}
                     </div>
                   `
     )}
               </div>
               <div class="separator"></div>
-            ` : v}
+            ` : g}
 
         <!-- Pin comment (primary) -->
         <button
@@ -6621,7 +6741,7 @@ let R = class extends A {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(It)}
+          ${S(Ot)}
         </button>
 
         <!-- View comments -->
@@ -6632,7 +6752,7 @@ let R = class extends A {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Ri)}
+          ${S(ji)}
         </button>
 
         <!-- Activity feed -->
@@ -6643,19 +6763,21 @@ let R = class extends A {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Oi)}
+          ${S(Li)}
         </button>
 
         <!-- Draw mode -->
-        <button
-          class="pw-btn pw-btn-icon ${this.drawModeActive ? "active" : ""}"
-          @click=${() => this.fire("draw-mode")}
-          title="Draw on page"
-          ?disabled=${this.featuresDisabled}
-          style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
-        >
-          ${C(zi)}
-        </button>
+        ${this.envConfig.allowDrawing ? p`
+          <button
+            class="pw-btn pw-btn-icon ${this.drawModeActive ? "active" : ""}"
+            @click=${() => this.fire("draw-mode")}
+            title="Draw on page"
+            ?disabled=${this.featuresDisabled}
+            style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
+          >
+            ${S(Di)}
+          </button>
+        ` : g}
 
         <!-- Notifications -->
         <button
@@ -6665,8 +6787,8 @@ let R = class extends A {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : "position:relative"}"
         >
-          ${C(Mi)}
-          ${this.unreadCount > 0 ? u`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : v}
+          ${S(Ri)}
+          ${this.unreadCount > 0 ? p`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : g}
         </button>
 
         <!-- Settings -->
@@ -6675,7 +6797,7 @@ let R = class extends A {
           @click=${() => this.fire("settings")}
           title="Settings"
         >
-          ${C(Di)}
+          ${S(Bi)}
         </button>
 
         <div class="separator"></div>
@@ -6686,16 +6808,16 @@ let R = class extends A {
           @click=${this.fireToggle}
           title="Collapse"
         >
-          ${C(ve, 14)}
+          ${S(ve, 14)}
         </button>
       </div>
     `;
   }
 };
-R.styles = [
+M.styles = [
   ie,
   be,
-  M`
+  O`
       :host {
         display: block;
       }
@@ -6908,39 +7030,42 @@ R.styles = [
     `
 ];
 j([
-  x({ attribute: !1 })
-], R.prototype, "client", 2);
+  w({ attribute: !1 })
+], M.prototype, "client", 2);
 j([
-  x({ type: Boolean })
-], R.prototype, "collapsed", 2);
+  w({ type: Boolean })
+], M.prototype, "collapsed", 2);
 j([
-  x()
-], R.prototype, "activePanel", 2);
+  w()
+], M.prototype, "activePanel", 2);
 j([
-  x({ type: Boolean })
-], R.prototype, "pinModeActive", 2);
+  w({ type: Boolean })
+], M.prototype, "pinModeActive", 2);
 j([
-  x({ type: Boolean })
-], R.prototype, "featuresDisabled", 2);
+  w({ type: Boolean })
+], M.prototype, "featuresDisabled", 2);
 j([
-  x({ type: Boolean })
-], R.prototype, "drawModeActive", 2);
+  w({ type: Boolean })
+], M.prototype, "drawModeActive", 2);
 j([
-  x()
-], R.prototype, "followingUserId", 2);
+  w()
+], M.prototype, "followingUserId", 2);
 j([
-  x()
-], R.prototype, "display", 2);
+  w()
+], M.prototype, "display", 2);
 j([
-  $()
-], R.prototype, "users", 2);
+  w({ attribute: !1 })
+], M.prototype, "envConfig", 2);
 j([
-  $()
-], R.prototype, "unreadCount", 2);
-R = j([
+  k()
+], M.prototype, "users", 2);
+j([
+  k()
+], M.prototype, "unreadCount", 2);
+M = j([
   L("pulse-widget-toolbar")
-], R);
-class Ps {
+], M);
+class Ms {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.pillEls = /* @__PURE__ */ new Map(), this.client = e;
   }
@@ -6981,23 +7106,23 @@ class Ps {
     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 [a, l] of this.client.state.viewports) {
       if (a === s) continue;
-      const d = l.scrollY, c = l.scrollY + l.viewportHeight, h = e, p = e + t;
-      if (d >= h && c <= p) {
-        const E = this.pillEls.get(a);
-        E && (E.style.display = "none");
+      const d = l.scrollY, c = l.scrollY + l.viewportHeight, h = e, u = e + t;
+      if (d >= h && c <= u) {
+        const $ = this.pillEls.get(a);
+        $ && ($.style.display = "none");
         continue;
       }
       o.add(a);
-      const m = this.client.state.presence.find(
-        (E) => E.user.id === a
+      const f = this.client.state.presence.find(
+        ($) => $.user.id === a
       );
-      if (!m) continue;
-      const g = l.scrollY + l.viewportHeight / 2, y = i > 0 ? g / i : 0, b = Math.max(
+      if (!f) continue;
+      const b = l.scrollY + l.viewportHeight / 2, x = i > 0 ? b / i : 0, y = Math.max(
         8,
-        Math.min(t - 28, y * t)
+        Math.min(t - 28, x * t)
       );
-      let w = this.pillEls.get(a);
-      w || (w = document.createElement("div"), Object.assign(w.style, {
+      let v = this.pillEls.get(a);
+      v || (v = document.createElement("div"), Object.assign(v.style, {
         position: "absolute",
         right: "8px",
         padding: "2px 6px",
@@ -7009,7 +7134,7 @@ class Ps {
         whiteSpace: "nowrap",
         pointerEvents: "none",
         transition: "top 0.3s ease"
-      }), this.container.appendChild(w), this.pillEls.set(a, w)), w.style.display = "", w.style.background = m.user.color, w.style.top = `${b}px`, w.textContent = this.getInitials(m.user.name);
+      }), this.container.appendChild(v), this.pillEls.set(a, v)), v.style.display = "", v.style.background = f.user.color, v.style.top = `${y}px`, v.textContent = this.getInitials(f.user.name);
     }
     for (const [a, l] of this.pillEls)
       !o.has(a) && !this.client.state.viewports.has(a) && (l.remove(), this.pillEls.delete(a));
@@ -7018,14 +7143,14 @@ class Ps {
     return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
   }
 }
-var _s = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, _ = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? Is(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var Os = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, P = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Rs(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 && _s(e, t, s), s;
+  return i && s && Os(e, t, s), s;
 };
-let T = class extends A {
+let C = class extends _ {
   constructor() {
-    super(...arguments), this.apiKey = "", this.token = "", this.room = "", this.position = "bottom-right", this.display = "floating", this.collapsed = !0, this.activePanel = null, this.pinModeActive = !1, this.highlightThreadId = null, this.settings = { ...$e }, this.followingUserId = null, this.drawModeActive = !1, this.connectionState = "disconnected", this.showConnectedFlash = !1, this.unsubs = [], this.clientConfigKey = "", this._isFollowScrolling = !1, this._viewportThrottleTimer = null, this._selectionThrottleTimer = null, this._connectedFlashTimer = null, this._wasDisconnected = !1, this.handleScroll = () => {
+    super(...arguments), this.apiKey = "", this.token = "", this.room = "", this.position = "bottom-right", this.display = "floating", this.collapsed = !0, this.activePanel = null, this.pinModeActive = !1, this.highlightThreadId = null, this.settings = { ...$e }, this.followingUserId = null, this.drawModeActive = !1, this.connectionState = "disconnected", this.showConnectedFlash = !1, this.envConfig = { ...Mt }, this.unsubs = [], this.clientConfigKey = "", this._isFollowScrolling = !1, this._viewportThrottleTimer = null, this._selectionThrottleTimer = null, this._connectedFlashTimer = null, this._wasDisconnected = !1, this.handleScroll = () => {
       !this.settings.enabled || !this.client || this._isFollowScrolling || (this.followingUserId && (this.followingUserId = null), !this._viewportThrottleTimer && (this._viewportThrottleTimer = setTimeout(() => {
         var n;
         this._viewportThrottleTimer = null, (n = this.client) == null || n.updateViewport({
@@ -7046,7 +7171,7 @@ let T = class extends A {
           (t = this.client) == null || t.updateSelection(null);
           return;
         }
-        const e = ys(n);
+        const e = ks(n);
         (i = this.client) == null || i.updateSelection(e);
       }, 500));
     }, this.handleDocumentClick = (n) => {
@@ -7078,11 +7203,16 @@ let T = class extends A {
       room: this.room,
       endpoint: this.endpoint
     };
-    this.client = new Et(n), this.clientConfigKey = this.getConfigKey(), this.cursorOverlay = new bs(this.client), this.commentPins = new cs(this.client, {
+    this.client = new Ct(n), this.clientConfigKey = this.getConfigKey(), this.cursorOverlay = new ws(this.client), this.commentPins = new ps(this.client, {
       onPinModeExit: () => {
         this.pinModeActive = !1;
       }
-    }), this.viewportOverlay = new Ps(this.client), this.selectionOverlay = new $s(this.client), this.drawingOverlay = new xs(this.client), this.settings = Cs(this.room), this.applySettings(this.settings), this.unsubs.push(
+    }), this.viewportOverlay = new Ms(this.client), this.selectionOverlay = new Cs(this.client), this.drawingOverlay = new $s(this.client), this.settings = As(this.room), this.applySettings(this.settings), this.unsubs.push(
+      this.client.state.on("auth", () => {
+        var e, t;
+        this.envConfig = this.client.state.config, this.envConfig.showCursors || (e = this.cursorOverlay) == null || e.disable(), !this.envConfig.allowDrawing && this.drawModeActive && ((t = this.drawingOverlay) == null || t.disableDrawMode(), this.drawModeActive = !1);
+      })
+    ), this.unsubs.push(
       this.client.on("connection", (e) => {
         this.connectionState = e, e === "connected" && this._wasDisconnected ? (this.showConnectedFlash = !0, this._connectedFlashTimer && clearTimeout(this._connectedFlashTimer), this._connectedFlashTimer = setTimeout(() => {
           this.showConnectedFlash = !1, this._connectedFlashTimer = null;
@@ -7140,6 +7270,7 @@ let T = class extends A {
         this.pinModeActive = !this.pinModeActive, this.pinModeActive && ((o = this.commentPins) == null || o.enterPinMode());
         break;
       case "draw-mode":
+        if (!this.envConfig.allowDrawing) break;
         this.drawModeActive = !this.drawModeActive, this.drawModeActive && ((r = this.drawingOverlay) == null || r.enableDrawMode());
         break;
     }
@@ -7150,15 +7281,15 @@ let T = class extends A {
   }
   handleSettingsChange(n) {
     const e = n.detail;
-    this.settings = e, Ts(this.room, e), this.applySettings(e);
+    this.settings = e, Ps(this.room, e), this.applySettings(e);
   }
   applySettings(n) {
-    var e, t, i, s, o, r, a, l, d, c, h, p, m, g, y, b, w;
+    var e, t, i, s, o, r, a, l, d, c, h, u, f, b, x, y, v;
     if (!n.enabled) {
       (e = this.cursorOverlay) == null || e.disable(), (t = this.viewportOverlay) == null || t.disable(), (i = this.selectionOverlay) == null || i.disable(), (s = this.drawingOverlay) == null || s.disable(), this.drawModeActive && ((o = this.drawingOverlay) == null || o.disableDrawMode(), this.drawModeActive = !1), (r = this.client) == null || r.setAppearOffline(!0), (a = this.commentPins) == null || a.setVisible(!1), this.followingUserId = null, this.pinModeActive && ((l = this.commentPins) == null || l.exitPinMode(), this.pinModeActive = !1), this.activePanel = this.activePanel === "settings" ? "settings" : null, this.highlightThreadId = null;
       return;
     }
-    this.applyCursorSettings(n), (d = this.client) == null || d.setAppearOffline(n.appearOffline), (c = this.commentPins) == null || c.setVisible(n.showCommentPins), n.showViewportIndicators ? (h = this.viewportOverlay) == null || h.enable() : (p = this.viewportOverlay) == null || p.disable(), n.showSelections ? (m = this.selectionOverlay) == null || m.enable() : (g = this.selectionOverlay) == null || g.disable(), n.showDrawings ? (y = this.drawingOverlay) == null || y.enable() : ((b = this.drawingOverlay) == null || b.disable(), this.drawModeActive && ((w = this.drawingOverlay) == null || w.disableDrawMode(), this.drawModeActive = !1));
+    this.applyCursorSettings(n), (d = this.client) == null || d.setAppearOffline(n.appearOffline), (c = this.commentPins) == null || c.setVisible(n.showCommentPins), n.showViewportIndicators ? (h = this.viewportOverlay) == null || h.enable() : (u = this.viewportOverlay) == null || u.disable(), n.showSelections ? (f = this.selectionOverlay) == null || f.enable() : (b = this.selectionOverlay) == null || b.disable(), n.showDrawings ? (x = this.drawingOverlay) == null || x.enable() : ((y = this.drawingOverlay) == null || y.disable(), this.drawModeActive && ((v = this.drawingOverlay) == null || v.disableDrawMode(), this.drawModeActive = !1));
   }
   applyCursorSettings(n) {
     if (!this.cursorOverlay) return;
@@ -7172,22 +7303,22 @@ let T = class extends A {
    * the trigger element, flipping vertically/horizontally as needed.
    */
   positionPopups() {
-    var g, y, b, w;
-    const n = this.display === "inline", e = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".inline-trigger"), t = (y = this.shadowRoot) == null ? void 0 : y.querySelector("pulse-widget-toolbar"), i = n ? e : t;
+    var b, x, y, v;
+    const n = this.display === "inline", e = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".inline-trigger"), t = (x = this.shadowRoot) == null ? void 0 : x.querySelector("pulse-widget-toolbar"), i = n ? e : t;
     if (!i) return;
-    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, a = 8, l = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".toolbar-popover");
+    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, a = 8, l = (y = this.shadowRoot) == null ? void 0 : y.querySelector(".toolbar-popover");
     if (l) {
       Object.assign(l.style, { top: "auto", left: "auto" });
-      const E = l.getBoundingClientRect(), I = this.computePosition(s, E, o, r, a);
-      l.style.top = `${I.top}px`, l.style.left = `${I.left}px`;
+      const $ = l.getBoundingClientRect(), T = this.computePosition(s, $, o, r, a);
+      l.style.top = `${T.top}px`, l.style.left = `${T.left}px`;
     }
-    const d = (w = this.shadowRoot) == null ? void 0 : w.querySelector(".panel-container");
+    const d = (v = this.shadowRoot) == null ? void 0 : v.querySelector(".panel-container");
     if (!d) return;
     Object.assign(d.style, { top: "auto", left: "auto" });
     const c = l ?? t;
     if (!c) return;
-    const h = c.getBoundingClientRect(), p = d.getBoundingClientRect(), m = this.computePosition(h, p, o, r, a);
-    d.style.top = `${m.top}px`, d.style.left = `${m.left}px`;
+    const h = c.getBoundingClientRect(), u = d.getBoundingClientRect(), f = this.computePosition(h, u, o, r, a);
+    d.style.top = `${f.top}px`, d.style.left = `${f.left}px`;
   }
   computePosition(n, e, t, i, s) {
     const o = n.top, r = i - n.bottom;
@@ -7206,13 +7337,13 @@ let T = class extends A {
     return (n == null ? void 0 : n.user.name) ?? "user";
   }
   renderConnectionBanner() {
-    return this.showConnectedFlash ? u`<div class="connection-banner connected">
+    return this.showConnectedFlash ? p`<div class="connection-banner connected">
         <span class="connection-dot"></span>Connected
-      </div>` : this.connectionState === "connecting" ? u`<div class="connection-banner connecting">
+      </div>` : this.connectionState === "connecting" ? p`<div class="connection-banner connecting">
         <span class="connection-dot"></span>Reconnecting...
-      </div>` : this.connectionState === "disconnected" && this.client ? u`<div class="connection-banner disconnected">
+      </div>` : this.connectionState === "disconnected" && this.client ? p`<div class="connection-banner disconnected">
         <span class="connection-dot"></span>Disconnected
-      </div>` : v;
+      </div>` : g;
   }
   handleToolbarToggle() {
     this.collapsed = !this.collapsed, this.collapsed && (this.activePanel = null, this.highlightThreadId = null);
@@ -7220,38 +7351,38 @@ let T = class extends A {
   render() {
     const n = this.display === "inline";
     if (n && this.collapsed)
-      return u`
+      return p`
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
             <slot>Collaborate</slot>
           </div>
         </div>
       `;
-    const e = this.activePanel ? u`
+    const e = this.activePanel ? p`
           <div class="panel-container anchored" @panel-close=${this.handlePanelClose}>
-            ${this.activePanel === "comments" ? u`<pulse-widget-comments-panel
+            ${this.activePanel === "comments" ? p`<pulse-widget-comments-panel
                   .client=${this.client}
                   .highlightThreadId=${this.highlightThreadId}
-                ></pulse-widget-comments-panel>` : v}
-            ${this.activePanel === "settings" ? u`<pulse-widget-settings-panel
+                ></pulse-widget-comments-panel>` : g}
+            ${this.activePanel === "settings" ? p`<pulse-widget-settings-panel
                   .settings=${this.settings}
                   .roomId=${this.room}
                   @settings-change=${this.handleSettingsChange}
-                ></pulse-widget-settings-panel>` : v}
-            ${this.activePanel === "notifications" ? u`<pulse-widget-notifications-panel
+                ></pulse-widget-settings-panel>` : g}
+            ${this.activePanel === "notifications" ? p`<pulse-widget-notifications-panel
                   .client=${this.client}
-                ></pulse-widget-notifications-panel>` : v}
-            ${this.activePanel === "activity" ? u`<pulse-widget-activity-panel
+                ></pulse-widget-notifications-panel>` : g}
+            ${this.activePanel === "activity" ? p`<pulse-widget-activity-panel
                   .client=${this.client}
-                ></pulse-widget-activity-panel>` : v}
+                ></pulse-widget-activity-panel>` : g}
           </div>
-        ` : v, t = this.followingUserId ? u`<div class="follow-banner">
+        ` : g, t = this.followingUserId ? p`<div class="follow-banner">
           Following ${this.getFollowUserName()}
           <button @click=${() => {
       this.followingUserId = null;
     }}>Stop</button>
-        </div>` : v;
-    return n ? u`
+        </div>` : g;
+    return n ? p`
         ${t}
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
@@ -7268,6 +7399,7 @@ let T = class extends A {
               .drawModeActive=${this.drawModeActive}
               .followingUserId=${this.followingUserId}
               .display=${this.display}
+              .envConfig=${this.envConfig}
               @toolbar-action=${this.handleToolbarAction}
               @toolbar-toggle=${this.handleToolbarToggle}
               @toolbar-follow=${this.handleFollow}
@@ -7275,7 +7407,7 @@ let T = class extends A {
           </div>
           ${e}
         </div>
-      ` : u`
+      ` : p`
       ${t}
       <div class="widget-root">
         ${e}
@@ -7289,6 +7421,7 @@ let T = class extends A {
           .drawModeActive=${this.drawModeActive}
           .followingUserId=${this.followingUserId}
           .display=${this.display}
+          .envConfig=${this.envConfig}
           @toolbar-action=${this.handleToolbarAction}
           @toolbar-toggle=${this.handleToolbarToggle}
           @toolbar-follow=${this.handleFollow}
@@ -7297,9 +7430,9 @@ let T = class extends A {
     `;
   }
 };
-T.styles = [
+C.styles = [
   ie,
-  M`
+  O`
       :host {
         display: block;
       }
@@ -7475,60 +7608,63 @@ T.styles = [
       }
     `
 ];
-_([
-  x({ attribute: "api-key" })
-], T.prototype, "apiKey", 2);
-_([
-  x()
-], T.prototype, "token", 2);
-_([
-  x()
-], T.prototype, "room", 2);
-_([
-  x()
-], T.prototype, "endpoint", 2);
-_([
-  x({ reflect: !0 })
-], T.prototype, "position", 2);
-_([
-  x({ reflect: !0 })
-], T.prototype, "display", 2);
-_([
-  $()
-], T.prototype, "collapsed", 2);
-_([
-  $()
-], T.prototype, "activePanel", 2);
-_([
-  $()
-], T.prototype, "pinModeActive", 2);
-_([
-  $()
-], T.prototype, "highlightThreadId", 2);
-_([
-  $()
-], T.prototype, "settings", 2);
-_([
-  $()
-], T.prototype, "followingUserId", 2);
-_([
-  $()
-], T.prototype, "drawModeActive", 2);
-_([
-  $()
-], T.prototype, "connectionState", 2);
-_([
-  $()
-], T.prototype, "showConnectedFlash", 2);
-T = _([
+P([
+  w({ attribute: "api-key" })
+], C.prototype, "apiKey", 2);
+P([
+  w()
+], C.prototype, "token", 2);
+P([
+  w()
+], C.prototype, "room", 2);
+P([
+  w()
+], C.prototype, "endpoint", 2);
+P([
+  w({ reflect: !0 })
+], C.prototype, "position", 2);
+P([
+  w({ reflect: !0 })
+], C.prototype, "display", 2);
+P([
+  k()
+], C.prototype, "collapsed", 2);
+P([
+  k()
+], C.prototype, "activePanel", 2);
+P([
+  k()
+], C.prototype, "pinModeActive", 2);
+P([
+  k()
+], C.prototype, "highlightThreadId", 2);
+P([
+  k()
+], C.prototype, "settings", 2);
+P([
+  k()
+], C.prototype, "followingUserId", 2);
+P([
+  k()
+], C.prototype, "drawModeActive", 2);
+P([
+  k()
+], C.prototype, "connectionState", 2);
+P([
+  k()
+], C.prototype, "showConnectedFlash", 2);
+P([
+  k()
+], C.prototype, "envConfig", 2);
+C = P([
   L("pulse-widget")
-], T);
+], C);
 export {
   Y as PulseComments,
   de as PulseCursors,
   he as PulseNotifications,
   Z as PulsePresence,
   X as PulseProvider,
-  N as PulseReactions,
-  T as PulseWidget
+  B as PulseReactions,
+  C as PulseWidget
 };