@gamention/pulse-elements 0.1.8 → 0.1.10

package/dist/pulse-elements.js

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let bt = class extends Event {
+let vt = class extends Event {
   constructor(e, t, i, n) {
     super("context-request", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = t, this.callback = i, this.subscribe = n ?? !1;
   }
@@ -35,7 +35,7 @@ let We = class {
     this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
   }
   dispatchRequest() {
-    this.host.dispatchEvent(new bt(this.context, this.host, this.t, this.subscribe));
+    this.host.dispatchEvent(new vt(this.context, this.host, this.t, this.subscribe));
   }
 };
 /**
@@ -43,7 +43,7 @@ let We = class {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let Pt = class {
+let At = class {
   get value() {
     return this.o;
   }
@@ -76,11 +76,11 @@ let Pt = class {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let At = class extends Event {
+let It = class extends Event {
   constructor(e, t) {
     super("context-provider", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = t;
   }
-}, Ve = class extends Pt {
+}, Xe = class extends At {
   constructor(e, t, i) {
     var n, o;
     super(t.context !== void 0 ? t.initialValue : i), this.onContextRequest = (r) => {
@@ -90,7 +90,7 @@ let At = class extends Event {
     }, this.onProviderRequest = (r) => {
       if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
       const l = /* @__PURE__ */ new Set();
-      for (const [a, { consumerHost: c }] of this.subscriptions) l.has(a) || (l.add(a), c.dispatchEvent(new bt(this.context, c, a, !0)));
+      for (const [a, { consumerHost: c }] of this.subscriptions) l.has(a) || (l.add(a), c.dispatchEvent(new vt(this.context, c, a, !0)));
       r.stopPropagation();
     }, this.host = e, t.context !== void 0 ? this.context = t.context : this.context = t, this.attachListeners(), (o = (n = this.host).addController) == null || o.call(n, this);
   }
@@ -98,7 +98,7 @@ let At = class extends Event {
     this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
   }
   hostConnected() {
-    this.host.dispatchEvent(new At(this.context, this.host));
+    this.host.dispatchEvent(new It(this.context, this.host));
   }
 };
 /**
@@ -114,11 +114,11 @@ function Mt({ context: s }) {
     }, set(n) {
       return i.get(this).setValue(n), e.set.call(this, n);
     }, init(n) {
-      return i.set(this, new Ve(this, { context: s, initialValue: n })), n;
+      return i.set(this, new Xe(this, { context: s, initialValue: n })), n;
     } };
     {
       e.constructor.addInitializer(((r) => {
-        i.set(r, new Ve(r, { context: s }));
+        i.set(r, new Xe(r, { context: s }));
       }));
       const n = Object.getOwnPropertyDescriptor(e, t);
       let o;
@@ -144,7 +144,7 @@ function Mt({ context: s }) {
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function he({ context: s, subscribe: e }) {
+function pe({ context: s, subscribe: e }) {
   return (t, i) => {
     typeof i == "object" ? i.addInitializer((function() {
       new We(this, { context: s, callback: (n) => {
@@ -157,9 +157,9 @@ function he({ context: s, subscribe: e }) {
     }));
   };
 }
-var It = Object.defineProperty, Ot = (s, e, t) => e in s ? It(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => Ot(s, typeof e != "symbol" ? e + "" : e, t);
-const Rt = "ws://localhost:4567";
-let Le = class {
+var Ot = Object.defineProperty, Rt = (s, e, t) => e in s ? Ot(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => Rt(s, typeof e != "symbol" ? e + "" : e, t);
+const Lt = "ws://localhost:4567";
+let je = class {
   constructor() {
     y(this, "handlers", /* @__PURE__ */ new Map());
   }
@@ -179,9 +179,9 @@ let Le = class {
   removeAll() {
     this.handlers.clear();
   }
-}, Lt = class extends Le {
+}, jt = class extends je {
   constructor(e) {
-    super(), y(this, "ws", null), y(this, "endpoint"), y(this, "reconnectAttempt", 0), y(this, "reconnectTimer", null), y(this, "_state", "disconnected"), this.endpoint = e ?? Rt;
+    super(), y(this, "ws", null), y(this, "endpoint"), y(this, "reconnectAttempt", 0), y(this, "reconnectTimer", null), y(this, "_state", "disconnected"), this.endpoint = e ?? Lt;
   }
   get state() {
     return this._state;
@@ -216,7 +216,7 @@ let Le = class {
       this.reconnectTimer = null, this.connect();
     }, e);
   }
-}, jt = class extends Le {
+}, zt = class extends je {
   constructor() {
     super(...arguments), y(this, "_user", null), y(this, "_users", /* @__PURE__ */ new Map()), y(this, "_presence", /* @__PURE__ */ new Map()), y(this, "_threads", /* @__PURE__ */ new Map()), y(this, "_reactions", /* @__PURE__ */ new Map()), y(this, "_notifications", []), y(this, "_activityLogs", []), y(this, "_typing", /* @__PURE__ */ new Map()), y(this, "_viewports", /* @__PURE__ */ new Map()), y(this, "_selections", /* @__PURE__ */ new Map());
   }
@@ -396,12 +396,12 @@ let Le = class {
   reset() {
     this._user = null, 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();
   }
-}, vt = class extends Le {
+}, xt = class extends je {
   constructor(e) {
     var t;
-    super(), y(this, "state"), y(this, "connection"), y(this, "config"), y(this, "heartbeatTimer", null), y(this, "lastCursorSend", 0), y(this, "pendingCursor", null), y(this, "cursorTimer", null), this.config = e, this.state = new jt();
+    super(), y(this, "state"), y(this, "connection"), y(this, "config"), y(this, "heartbeatTimer", null), y(this, "lastCursorSend", 0), y(this, "pendingCursor", null), y(this, "cursorTimer", null), this.config = e, this.state = new zt();
     const i = ((t = e.endpoint) == null ? void 0 : t.replace(/^http/, "ws")) ?? void 0;
-    this.connection = new Lt(i), this.connection.on("message", (n) => {
+    this.connection = new jt(i), this.connection.on("message", (n) => {
       this.state.handleMessage(n), this.emit(n.type, n);
     }), this.connection.on("state", (n) => {
       this.emit("connection", n), n === "connected" ? (this.authenticate(), this.startHeartbeat()) : n === "disconnected" && this.stopHeartbeat();
@@ -458,12 +458,13 @@ let Le = class {
       id: i,
       body: e,
       mentions: t.mentions ?? [],
-      position: t.position ?? null
+      position: t.position ?? null,
+      attachmentIds: t.attachmentIds
     }), i;
   }
-  reply(e, t, i = []) {
-    const n = crypto.randomUUID();
-    return this.send({ type: "comment:create", threadId: e, id: n, body: t, mentions: i }), n;
+  reply(e, t, i = [], n) {
+    const o = crypto.randomUUID();
+    return this.send({ type: "comment:create", threadId: e, id: o, body: t, mentions: i, attachmentIds: n }), o;
   }
   editComment(e, t, i = []) {
     this.send({ type: "comment:edit", commentId: e, body: t, mentions: i });
@@ -543,18 +544,18 @@ let Le = class {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const be = globalThis, je = be.ShadowRoot && (be.ShadyCSS === void 0 || be.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ze = Symbol(), Xe = /* @__PURE__ */ new WeakMap();
-let xt = class {
+const ve = globalThis, ze = ve.ShadowRoot && (ve.ShadyCSS === void 0 || ve.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ue = Symbol(), Ye = /* @__PURE__ */ new WeakMap();
+let yt = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== ze) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== Ue) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
     let e = this.o;
     const t = this.t;
-    if (je && e === void 0) {
+    if (ze && e === void 0) {
       const i = t !== void 0 && t.length === 1;
-      i && (e = Xe.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && Xe.set(t, e));
+      i && (e = Ye.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && Ye.set(t, e));
     }
     return e;
   }
@@ -562,30 +563,30 @@ let xt = class {
     return this.cssText;
   }
 };
-const zt = (s) => new xt(typeof s == "string" ? s : s + "", void 0, ze), M = (s, ...e) => {
+const Ut = (s) => new yt(typeof s == "string" ? s : s + "", void 0, Ue), I = (s, ...e) => {
   const t = s.length === 1 ? s[0] : e.reduce((i, n, o) => i + ((r) => {
     if (r._$cssResult$ === !0) return r.cssText;
     if (typeof r == "number") return r;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(n) + s[o + 1], s[0]);
-  return new xt(t, s, ze);
-}, Ut = (s, e) => {
-  if (je) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  return new yt(t, s, Ue);
+}, Dt = (s, e) => {
+  if (ze) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
-    const i = document.createElement("style"), n = be.litNonce;
+    const i = document.createElement("style"), n = ve.litNonce;
     n !== void 0 && i.setAttribute("nonce", n), i.textContent = t.cssText, s.appendChild(i);
   }
-}, Ye = je ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
+}, Ke = ze ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
-  return zt(t);
+  return Ut(t);
 })(s) : s;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Dt, defineProperty: Ht, getOwnPropertyDescriptor: Nt, getOwnPropertyNames: Bt, getOwnPropertySymbols: Ft, getPrototypeOf: qt } = Object, U = globalThis, Ke = U.trustedTypes, Wt = Ke ? Ke.emptyScript : "", Te = U.reactiveElementPolyfillSupport, ie = (s, e) => s, ye = { toAttribute(s, e) {
+const { is: Ht, defineProperty: Bt, getOwnPropertyDescriptor: Nt, getOwnPropertyNames: Ft, getOwnPropertySymbols: qt, getPrototypeOf: Vt } = Object, U = globalThis, Ge = U.trustedTypes, Wt = Ge ? Ge.emptyScript : "", Te = U.reactiveElementPolyfillSupport, ie = (s, e) => s, we = { toAttribute(s, e) {
   switch (e) {
     case Boolean:
       s = s ? Wt : null;
@@ -613,7 +614,7 @@ const { is: Dt, defineProperty: Ht, getOwnPropertyDescriptor: Nt, getOwnProperty
       }
   }
   return t;
-} }, Ue = (s, e) => !Dt(s, e), Ge = { attribute: !0, type: String, converter: ye, reflect: !1, useDefault: !1, hasChanged: Ue };
+} }, De = (s, e) => !Ht(s, e), Ze = { attribute: !0, type: String, converter: we, reflect: !1, useDefault: !1, hasChanged: De };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), U.litPropertyMetadata ?? (U.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let Y = class extends HTMLElement {
   static addInitializer(e) {
@@ -622,10 +623,10 @@ let Y = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, t = Ge) {
+  static createProperty(e, t = Ze) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
       const i = Symbol(), n = this.getPropertyDescriptor(e, i, t);
-      n !== void 0 && Ht(this.prototype, e, n);
+      n !== void 0 && Bt(this.prototype, e, n);
     }
   }
   static getPropertyDescriptor(e, t, i) {
@@ -640,17 +641,17 @@ let Y = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? Ge;
+    return this.elementProperties.get(e) ?? Ze;
   }
   static _$Ei() {
     if (this.hasOwnProperty(ie("elementProperties"))) return;
-    const e = qt(this);
+    const e = Vt(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(ie("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(ie("properties"))) {
-      const t = this.properties, i = [...Bt(t), ...Ft(t)];
+      const t = this.properties, i = [...Ft(t), ...qt(t)];
       for (const n of i) this.createProperty(n, t[n]);
     }
     const e = this[Symbol.metadata];
@@ -669,8 +670,8 @@ let Y = class extends HTMLElement {
     const t = [];
     if (Array.isArray(e)) {
       const i = new Set(e.flat(1 / 0).reverse());
-      for (const n of i) t.unshift(Ye(n));
-    } else e !== void 0 && t.push(Ye(e));
+      for (const n of i) t.unshift(Ke(n));
+    } else e !== void 0 && t.push(Ke(e));
     return t;
   }
   static _$Eu(e, t) {
@@ -699,7 +700,7 @@ let Y = class extends HTMLElement {
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Ut(e, this.constructor.elementStyles), e;
+    return Dt(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     var e;
@@ -724,7 +725,7 @@ let Y = class extends HTMLElement {
     var o;
     const i = this.constructor.elementProperties.get(e), n = this.constructor._$Eu(e, i);
     if (n !== void 0 && i.reflect === !0) {
-      const r = (((o = i.converter) == null ? void 0 : o.toAttribute) !== void 0 ? i.converter : ye).toAttribute(t, i.type);
+      const r = (((o = i.converter) == null ? void 0 : o.toAttribute) !== void 0 ? i.converter : we).toAttribute(t, i.type);
       this._$Em = e, r == null ? this.removeAttribute(n) : this.setAttribute(n, r), this._$Em = null;
     }
   }
@@ -732,7 +733,7 @@ let Y = class extends HTMLElement {
     var o, r;
     const i = this.constructor, n = i._$Eh.get(e);
     if (n !== void 0 && this._$Em !== n) {
-      const l = i.getPropertyOptions(n), a = typeof l.converter == "function" ? { fromAttribute: l.converter } : ((o = l.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? l.converter : ye;
+      const l = i.getPropertyOptions(n), a = typeof l.converter == "function" ? { fromAttribute: l.converter } : ((o = l.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? l.converter : we;
       this._$Em = n;
       const c = a.fromAttribute(t, l.type);
       this[n] = c ?? ((r = this._$Ej) == null ? void 0 : r.get(n)) ?? c, this._$Em = null;
@@ -742,7 +743,7 @@ let Y = class extends HTMLElement {
     var r;
     if (e !== void 0) {
       const l = this.constructor;
-      if (n === !1 && (o = this[e]), i ?? (i = l.getPropertyOptions(e)), !((i.hasChanged ?? Ue)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(l._$Eu(e, i)))) return;
+      if (n === !1 && (o = this[e]), i ?? (i = l.getPropertyOptions(e)), !((i.hasChanged ?? De)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(l._$Eu(e, i)))) return;
       this.C(e, t, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -824,53 +825,53 @@ Y.elementStyles = [], Y.shadowRootOptions = { mode: "open" }, Y[ie("elementPrope
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const se = globalThis, Je = (s) => s, we = se.trustedTypes, Ze = we ? we.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, yt = "$lit$", z = `lit$${Math.random().toFixed(9).slice(2)}$`, wt = "?" + z, Vt = `<${wt}>`, F = document, ne = () => F.createComment(""), oe = (s) => s === null || typeof s != "object" && typeof s != "function", De = Array.isArray, Xt = (s) => De(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", Se = `[ 	
-\f\r]`, te = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Qe = /-->/g, et = />/g, H = RegExp(`>|${Se}(?:([^\\s"'>=/]+)(${Se}*=${Se}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), tt = /'/g, it = /"/g, $t = /^(?:script|style|textarea|title)$/i, kt = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), d = kt(1), Yt = kt(2), q = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), st = /* @__PURE__ */ new WeakMap(), N = F.createTreeWalker(F, 129);
-function Et(s, e) {
-  if (!De(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return Ze !== void 0 ? Ze.createHTML(e) : e;
+const se = globalThis, Je = (s) => s, $e = se.trustedTypes, Qe = $e ? $e.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, wt = "$lit$", z = `lit$${Math.random().toFixed(9).slice(2)}$`, $t = "?" + z, Xt = `<${$t}>`, F = document, oe = () => F.createComment(""), re = (s) => s === null || typeof s != "object" && typeof s != "function", He = Array.isArray, Yt = (s) => He(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", Se = `[ 	
+\f\r]`, te = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, et = /-->/g, tt = />/g, H = RegExp(`>|${Se}(?:([^\\s"'>=/]+)(${Se}*=${Se}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), it = /'/g, st = /"/g, kt = /^(?:script|style|textarea|title)$/i, Et = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), h = Et(1), Kt = Et(2), q = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), nt = /* @__PURE__ */ new WeakMap(), B = F.createTreeWalker(F, 129);
+function Ct(s, e) {
+  if (!He(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Qe !== void 0 ? Qe.createHTML(e) : e;
 }
-const Kt = (s, e) => {
+const Gt = (s, e) => {
   const t = s.length - 1, i = [];
   let n, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", r = te;
   for (let l = 0; l < t; l++) {
     const a = s[l];
-    let c, h, p = -1, m = 0;
-    for (; m < a.length && (r.lastIndex = m, h = r.exec(a), h !== null); ) m = r.lastIndex, r === te ? h[1] === "!--" ? r = Qe : h[1] !== void 0 ? r = et : h[2] !== void 0 ? ($t.test(h[2]) && (n = RegExp("</" + h[2], "g")), r = H) : h[3] !== void 0 && (r = H) : r === H ? h[0] === ">" ? (r = n ?? te, p = -1) : h[1] === void 0 ? p = -2 : (p = r.lastIndex - h[2].length, c = h[1], r = h[3] === void 0 ? H : h[3] === '"' ? it : tt) : r === it || r === tt ? r = H : r === Qe || r === et ? r = te : (r = H, n = void 0);
+    let c, p, d = -1, u = 0;
+    for (; u < a.length && (r.lastIndex = u, p = r.exec(a), p !== null); ) u = r.lastIndex, r === te ? p[1] === "!--" ? r = et : p[1] !== void 0 ? r = tt : p[2] !== void 0 ? (kt.test(p[2]) && (n = RegExp("</" + p[2], "g")), r = H) : p[3] !== void 0 && (r = H) : r === H ? p[0] === ">" ? (r = n ?? te, d = -1) : p[1] === void 0 ? d = -2 : (d = r.lastIndex - p[2].length, c = p[1], r = p[3] === void 0 ? H : p[3] === '"' ? st : it) : r === st || r === it ? r = H : r === et || r === tt ? r = te : (r = H, n = void 0);
     const f = r === H && s[l + 1].startsWith("/>") ? " " : "";
-    o += r === te ? a + Vt : p >= 0 ? (i.push(c), a.slice(0, p) + yt + a.slice(p) + z + f) : a + z + (p === -2 ? l : f);
+    o += r === te ? a + Xt : d >= 0 ? (i.push(c), a.slice(0, d) + wt + a.slice(d) + z + f) : a + z + (d === -2 ? l : f);
   }
-  return [Et(s, o + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+  return [Ct(s, o + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
-class re {
+class ae {
   constructor({ strings: e, _$litType$: t }, i) {
     let n;
     this.parts = [];
     let o = 0, r = 0;
-    const l = e.length - 1, a = this.parts, [c, h] = Kt(e, t);
-    if (this.el = re.createElement(c, i), N.currentNode = this.el.content, t === 2 || t === 3) {
-      const p = this.el.content.firstChild;
-      p.replaceWith(...p.childNodes);
+    const l = e.length - 1, a = this.parts, [c, p] = Gt(e, t);
+    if (this.el = ae.createElement(c, i), B.currentNode = this.el.content, t === 2 || t === 3) {
+      const d = this.el.content.firstChild;
+      d.replaceWith(...d.childNodes);
     }
-    for (; (n = N.nextNode()) !== null && a.length < l; ) {
+    for (; (n = B.nextNode()) !== null && a.length < l; ) {
       if (n.nodeType === 1) {
-        if (n.hasAttributes()) for (const p of n.getAttributeNames()) if (p.endsWith(yt)) {
-          const m = h[r++], f = n.getAttribute(p).split(z), b = /([.?@])?(.*)/.exec(m);
-          a.push({ type: 1, index: o, name: b[2], strings: f, ctor: b[1] === "." ? Jt : b[1] === "?" ? Zt : b[1] === "@" ? Qt : Ee }), n.removeAttribute(p);
-        } else p.startsWith(z) && (a.push({ type: 6, index: o }), n.removeAttribute(p));
-        if ($t.test(n.tagName)) {
-          const p = n.textContent.split(z), m = p.length - 1;
-          if (m > 0) {
-            n.textContent = we ? we.emptyScript : "";
-            for (let f = 0; f < m; f++) n.append(p[f], ne()), N.nextNode(), a.push({ type: 2, index: ++o });
-            n.append(p[m], ne());
+        if (n.hasAttributes()) for (const d of n.getAttributeNames()) if (d.endsWith(wt)) {
+          const u = p[r++], f = n.getAttribute(d).split(z), b = /([.?@])?(.*)/.exec(u);
+          a.push({ type: 1, index: o, name: b[2], strings: f, ctor: b[1] === "." ? Jt : b[1] === "?" ? Qt : b[1] === "@" ? ei : Ee }), n.removeAttribute(d);
+        } else d.startsWith(z) && (a.push({ type: 6, index: o }), n.removeAttribute(d));
+        if (kt.test(n.tagName)) {
+          const d = n.textContent.split(z), u = d.length - 1;
+          if (u > 0) {
+            n.textContent = $e ? $e.emptyScript : "";
+            for (let f = 0; f < u; f++) n.append(d[f], oe()), B.nextNode(), a.push({ type: 2, index: ++o });
+            n.append(d[u], oe());
           }
         }
-      } else if (n.nodeType === 8) if (n.data === wt) a.push({ type: 2, index: o });
+      } else if (n.nodeType === 8) if (n.data === $t) a.push({ type: 2, index: o });
       else {
-        let p = -1;
-        for (; (p = n.data.indexOf(z, p + 1)) !== -1; ) a.push({ type: 7, index: o }), p += z.length - 1;
+        let d = -1;
+        for (; (d = n.data.indexOf(z, d + 1)) !== -1; ) a.push({ type: 7, index: o }), d += z.length - 1;
       }
       o++;
     }
@@ -884,10 +885,10 @@ function K(s, e, t = s, i) {
   var r, l;
   if (e === q) return e;
   let n = i !== void 0 ? (r = t._$Co) == null ? void 0 : r[i] : t._$Cl;
-  const o = oe(e) ? void 0 : e._$litDirective$;
+  const o = re(e) ? void 0 : e._$litDirective$;
   return (n == null ? void 0 : n.constructor) !== o && ((l = n == null ? void 0 : n._$AO) == null || l.call(n, !1), o === void 0 ? n = void 0 : (n = new o(s), n._$AT(s, t, i)), i !== void 0 ? (t._$Co ?? (t._$Co = []))[i] = n : t._$Cl = n), n !== void 0 && (e = K(s, n._$AS(s, e.values), n, i)), e;
 }
-class Gt {
+class Zt {
   constructor(e, t) {
     this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
   }
@@ -899,29 +900,29 @@ class Gt {
   }
   u(e) {
     const { el: { content: t }, parts: i } = this._$AD, n = ((e == null ? void 0 : e.creationScope) ?? F).importNode(t, !0);
-    N.currentNode = n;
-    let o = N.nextNode(), r = 0, l = 0, a = i[0];
+    B.currentNode = n;
+    let o = B.nextNode(), r = 0, l = 0, a = i[0];
     for (; a !== void 0; ) {
       if (r === a.index) {
         let c;
-        a.type === 2 ? c = new pe(o, o.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(o, a.name, a.strings, this, e) : a.type === 6 && (c = new ei(o, this, e)), this._$AV.push(c), a = i[++l];
+        a.type === 2 ? c = new ue(o, o.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(o, a.name, a.strings, this, e) : a.type === 6 && (c = new ti(o, this, e)), this._$AV.push(c), a = i[++l];
       }
-      r !== (a == null ? void 0 : a.index) && (o = N.nextNode(), r++);
+      r !== (a == null ? void 0 : a.index) && (o = B.nextNode(), r++);
     }
-    return N.currentNode = F, n;
+    return B.currentNode = F, n;
   }
   p(e) {
     let t = 0;
     for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, t), t += i.strings.length - 2) : i._$AI(e[t])), t++;
   }
 }
-class pe {
+class ue {
   get _$AU() {
     var e;
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   constructor(e, t, i, n) {
-    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = n, this._$Cv = (n == null ? void 0 : n.isConnected) ?? !0;
+    this.type = 2, this._$AH = m, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = n, this._$Cv = (n == null ? void 0 : n.isConnected) ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -935,7 +936,7 @@ class pe {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = K(this, e, t), oe(e) ? e === u || e == null || e === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : e !== this._$AH && e !== q && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Xt(e) ? this.k(e) : this._(e);
+    e = K(this, e, t), re(e) ? e === m || e == null || e === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : e !== this._$AH && e !== q && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Yt(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -944,26 +945,26 @@ class pe {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== u && oe(this._$AH) ? this._$AA.nextSibling.data = e : this.T(F.createTextNode(e)), this._$AH = e;
+    this._$AH !== m && re(this._$AH) ? this._$AA.nextSibling.data = e : this.T(F.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
-    const { values: t, _$litType$: i } = e, n = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = re.createElement(Et(i.h, i.h[0]), this.options)), i);
+    const { values: t, _$litType$: i } = e, n = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ae.createElement(Ct(i.h, i.h[0]), this.options)), i);
     if (((o = this._$AH) == null ? void 0 : o._$AD) === n) this._$AH.p(t);
     else {
-      const r = new Gt(n, this), l = r.u(this.options);
+      const r = new Zt(n, this), l = r.u(this.options);
       r.p(t), this.T(l), this._$AH = r;
     }
   }
   _$AC(e) {
-    let t = st.get(e.strings);
-    return t === void 0 && st.set(e.strings, t = new re(e)), t;
+    let t = nt.get(e.strings);
+    return t === void 0 && nt.set(e.strings, t = new ae(e)), t;
   }
   k(e) {
-    De(this._$AH) || (this._$AH = [], this._$AR());
+    He(this._$AH) || (this._$AH = [], this._$AR());
     const t = this._$AH;
     let i, n = 0;
-    for (const o of e) n === t.length ? t.push(i = new pe(this.O(ne()), this.O(ne()), this, this.options)) : i = t[n], i._$AI(o), n++;
+    for (const o of e) n === t.length ? t.push(i = new ue(this.O(oe()), this.O(oe()), this, this.options)) : i = t[n], i._$AI(o), n++;
     n < t.length && (this._$AR(i && i._$AB.nextSibling, n), t.length = n);
   }
   _$AR(e = this._$AA.nextSibling, t) {
@@ -986,21 +987,21 @@ class Ee {
     return this._$AM._$AU;
   }
   constructor(e, t, i, n, o) {
-    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = t, this._$AM = n, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = u;
+    this.type = 1, this._$AH = m, this._$AN = void 0, this.element = e, this.name = t, this._$AM = n, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = m;
   }
   _$AI(e, t = this, i, n) {
     const o = this.strings;
     let r = !1;
-    if (o === void 0) e = K(this, e, t, 0), r = !oe(e) || e !== this._$AH && e !== q, r && (this._$AH = e);
+    if (o === void 0) e = K(this, e, t, 0), r = !re(e) || e !== this._$AH && e !== q, r && (this._$AH = e);
     else {
       const l = e;
       let a, c;
-      for (e = o[0], a = 0; a < o.length - 1; a++) c = K(this, l[i + a], t, a), c === q && (c = this._$AH[a]), r || (r = !oe(c) || c !== this._$AH[a]), c === u ? e = u : e !== u && (e += (c ?? "") + o[a + 1]), this._$AH[a] = c;
+      for (e = o[0], a = 0; a < o.length - 1; a++) c = K(this, l[i + a], t, a), c === q && (c = this._$AH[a]), r || (r = !re(c) || c !== this._$AH[a]), c === m ? e = m : e !== m && (e += (c ?? "") + o[a + 1]), this._$AH[a] = c;
     }
     r && !n && this.j(e);
   }
   j(e) {
-    e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === m ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class Jt extends Ee {
@@ -1008,24 +1009,24 @@ class Jt extends Ee {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === u ? void 0 : e;
+    this.element[this.name] = e === m ? void 0 : e;
   }
 }
-class Zt extends Ee {
+class Qt extends Ee {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== u);
+    this.element.toggleAttribute(this.name, !!e && e !== m);
   }
 }
-class Qt extends Ee {
+class ei extends Ee {
   constructor(e, t, i, n, o) {
     super(e, t, i, n, o), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = K(this, e, t, 0) ?? u) === q) return;
-    const i = this._$AH, n = e === u && i !== u || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== u && (i === u || n);
+    if ((e = K(this, e, t, 0) ?? m) === q) return;
+    const i = this._$AH, n = e === m && i !== m || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== m && (i === m || n);
     n && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -1033,7 +1034,7 @@ class Qt extends Ee {
     typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
-class ei {
+class ti {
   constructor(e, t, i) {
     this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = i;
   }
@@ -1045,13 +1046,13 @@ class ei {
   }
 }
 const Pe = se.litHtmlPolyfillSupport;
-Pe == null || Pe(re, pe), (se.litHtmlVersions ?? (se.litHtmlVersions = [])).push("3.3.2");
-const ti = (s, e, t) => {
+Pe == null || Pe(ae, ue), (se.litHtmlVersions ?? (se.litHtmlVersions = [])).push("3.3.2");
+const ii = (s, e, t) => {
   const i = (t == null ? void 0 : t.renderBefore) ?? e;
   let n = i._$litPart$;
   if (n === void 0) {
     const o = (t == null ? void 0 : t.renderBefore) ?? null;
-    i._$litPart$ = n = new pe(e.insertBefore(ne(), o), o, void 0, t ?? {});
+    i._$litPart$ = n = new ue(e.insertBefore(oe(), o), o, void 0, t ?? {});
   }
   return n._$AI(s), n;
 };
@@ -1060,7 +1061,7 @@ const ti = (s, e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const B = globalThis;
+const N = globalThis;
 let S = class extends Y {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
@@ -1072,7 +1073,7 @@ let S = class extends Y {
   }
   update(e) {
     const t = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = ti(t, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = ii(t, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var e;
@@ -1086,11 +1087,11 @@ let S = class extends Y {
     return q;
   }
 };
-var gt;
-S._$litElement$ = !0, S.finalized = !0, (gt = B.litElementHydrateSupport) == null || gt.call(B, { LitElement: S });
-const Ae = B.litElementPolyfillSupport;
+var bt;
+S._$litElement$ = !0, S.finalized = !0, (bt = N.litElementHydrateSupport) == null || bt.call(N, { LitElement: S });
+const Ae = N.litElementPolyfillSupport;
 Ae == null || Ae({ LitElement: S });
-(B.litElementVersions ?? (B.litElementVersions = [])).push("4.2.2");
+(N.litElementVersions ?? (N.litElementVersions = [])).push("4.2.2");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1106,7 +1107,7 @@ const R = (s) => (e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ii = { attribute: !0, type: String, converter: ye, reflect: !1, hasChanged: Ue }, si = (s = ii, e, t) => {
+const si = { attribute: !0, type: String, converter: we, reflect: !1, hasChanged: De }, ni = (s = si, e, t) => {
   const { kind: i, metadata: n } = t;
   let o = globalThis.litPropertyMetadata.get(n);
   if (o === void 0 && globalThis.litPropertyMetadata.set(n, o = /* @__PURE__ */ new Map()), i === "setter" && ((s = Object.create(s)).wrapped = !0), o.set(t.name, s), i === "accessor") {
@@ -1128,7 +1129,7 @@ const ii = { attribute: !0, type: String, converter: ye, reflect: !1, hasChanged
   throw Error("Unsupported decorator location: " + i);
 };
 function g(s) {
-  return (e, t) => typeof t == "object" ? si(s, e, t) : ((i, n, o) => {
+  return (e, t) => typeof t == "object" ? ni(s, e, t) : ((i, n, o) => {
     const r = n.hasOwnProperty(o);
     return n.constructor.createProperty(o, i), r ? Object.getOwnPropertyDescriptor(n, o) : void 0;
   })(s, e, t);
@@ -1141,13 +1142,13 @@ function g(s) {
 function v(s) {
   return g({ ...s, state: !0, attribute: !1 });
 }
-const J = "pulse-client";
-var ni = Object.defineProperty, oi = Object.getOwnPropertyDescriptor, Z = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? oi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+const Z = "pulse-client";
+var oi = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, J = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? ri(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ni(e, t, n), n;
+  return i && n && oi(e, t, n), n;
 };
-let W = class extends S {
+let V = class extends S {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "";
   }
@@ -1159,38 +1160,38 @@ let W = class extends S {
       room: this.room,
       endpoint: this.endpoint
     };
-    this.client = new vt(s), this.client.connect();
+    this.client = new xt(s), this.client.connect();
   }
   disconnectedCallback() {
     var s;
     super.disconnectedCallback(), (s = this.client) == null || s.disconnect();
   }
   render() {
-    return d`<slot></slot>`;
+    return h`<slot></slot>`;
   }
 };
-Z([
+J([
   g({ attribute: "api-key" })
-], W.prototype, "apiKey", 2);
-Z([
+], V.prototype, "apiKey", 2);
+J([
   g()
-], W.prototype, "token", 2);
-Z([
+], V.prototype, "token", 2);
+J([
   g()
-], W.prototype, "room", 2);
-Z([
+], V.prototype, "room", 2);
+J([
   g()
-], W.prototype, "endpoint", 2);
-Z([
-  Mt({ context: J })
-], W.prototype, "client", 2);
-W = Z([
+], V.prototype, "endpoint", 2);
+J([
+  Mt({ context: Z })
+], V.prototype, "client", 2);
+V = J([
   R("pulse-provider")
-], W);
-var ri = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, Ce = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ai(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+], V);
+var ai = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Ce = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? li(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ri(e, t, n), n;
+  return i && n && ai(e, t, n), n;
 };
 let G = class extends S {
   constructor() {
@@ -1217,16 +1218,16 @@ let G = class extends S {
   }
   render() {
     const s = this.users.slice(0, this.maxVisible), e = this.users.length - this.maxVisible;
-    return d`
+    return h`
       <div class="avatars">
-        ${e > 0 ? d`<div class="overflow">+${e}</div>` : null}
+        ${e > 0 ? h`<div class="overflow">+${e}</div>` : null}
         ${s.map(
-      (t) => d`
+      (t) => h`
             <div
               class="avatar"
               style="background:${t.user.color}"
             >
-              ${t.user.avatar ? d`<img src="${t.user.avatar}" alt="${t.user.name}" />` : this.getInitials(t.user.name)}
+              ${t.user.avatar ? h`<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>
@@ -1236,7 +1237,7 @@ let G = class extends S {
     `;
   }
 };
-G.styles = M`
+G.styles = I`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1341,7 +1342,7 @@ G.styles = M`
     }
   `;
 Ce([
-  he({ context: J, subscribe: !0 }),
+  pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
 ], G.prototype, "client", 2);
 Ce([
@@ -1353,12 +1354,12 @@ Ce([
 G = Ce([
   R("pulse-presence")
 ], G);
-var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, He = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ci(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, Be = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? di(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && li(e, t, n), n;
+  return i && n && ci(e, t, n), n;
 };
-let ae = class extends S {
+let le = class extends S {
   constructor() {
     super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (s) => {
       var e;
@@ -1412,9 +1413,9 @@ let ae = class extends S {
   }
   render() {
     const s = [...this.cursors.values()];
-    return d`
+    return h`
       ${s.map(
-      (e) => d`
+      (e) => h`
           <div
             class="cursor"
             style="transform:translate(${e.position.x}px,${e.position.y}px)"
@@ -1435,7 +1436,7 @@ let ae = class extends S {
     `;
   }
 };
-ae.styles = M`
+le.styles = I`
     :host {
       position: fixed;
       top: 0;
@@ -1472,22 +1473,22 @@ ae.styles = M`
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
   `;
-He([
-  he({ context: J, subscribe: !0 }),
+Be([
+  pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
-], ae.prototype, "client", 2);
-He([
+], le.prototype, "client", 2);
+Be([
   v()
-], ae.prototype, "cursors", 2);
-ae = He([
+], le.prototype, "cursors", 2);
+le = Be([
   R("pulse-cursors")
-], ae);
-var di = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, ue = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? hi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+], le);
+var hi = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, fe = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? pi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && di(e, t, n), n;
+  return i && n && hi(e, t, n), n;
 };
-let V = class extends S {
+let W = class extends S {
   constructor() {
     super(...arguments), this.showResolved = !1, this.threads = [], this.replyingTo = null;
   }
@@ -1509,7 +1510,7 @@ let V = class extends S {
   }
   parseMentions(s) {
     return s.split(/(@\w+)/g).map(
-      (t) => t.startsWith("@") ? d`<span class="mention">${t}</span>` : t
+      (t) => t.startsWith("@") ? h`<span class="mention">${t}</span>` : t
     );
   }
   getInitials(s) {
@@ -1535,9 +1536,9 @@ let V = class extends S {
   }
   render() {
     const s = this.showResolved ? this.threads : this.threads.filter((e) => !e.resolved);
-    return d`
+    return h`
       <div class="threads">
-        ${s.length === 0 ? d`<div class="empty">
+        ${s.length === 0 ? h`<div class="empty">
               <div class="empty-icon">&#128172;</div>
               No comments yet.<br>Start a conversation below.
             </div>` : s.map((e) => this.renderThread(e))}
@@ -1551,12 +1552,12 @@ let V = class extends S {
     `;
   }
   renderThread(s) {
-    return d`
+    return h`
       <div class="thread ${s.resolved ? "resolved" : ""}">
         ${s.comments.map((e, t) => {
       const i = this.getUserForComment(e.userId);
-      return d`
-            ${t > 0 ? d`<div class="divider"></div>` : u}
+      return h`
+            ${t > 0 ? h`<div class="divider"></div>` : m}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -1588,12 +1589,12 @@ let V = class extends S {
             ${s.resolved ? "Reopen" : "Resolve"}
           </button>
         </div>
-        ${this.replyingTo === s.id ? d`
+        ${this.replyingTo === s.id ? h`
               <form class="reply-form" @submit=${(e) => this.handleReply(s.id, e)}>
                 <input type="text" placeholder="Write a reply..." />
                 <button type="submit">Send</button>
               </form>
-            ` : u}
+            ` : m}
       </div>
     `;
   }
@@ -1605,7 +1606,7 @@ let V = class extends S {
     return o < 24 ? `${o}h ago` : e.toLocaleDateString();
   }
 };
-V.styles = M`
+W.styles = I`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -1817,41 +1818,41 @@ V.styles = M`
       opacity: 0.4;
     }
   `;
-ue([
-  he({ context: J, subscribe: !0 }),
+fe([
+  pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
-], V.prototype, "client", 2);
-ue([
+], W.prototype, "client", 2);
+fe([
   g({ type: Boolean, attribute: "show-resolved" })
-], V.prototype, "showResolved", 2);
-ue([
+], W.prototype, "showResolved", 2);
+fe([
   v()
-], V.prototype, "threads", 2);
-ue([
+], W.prototype, "threads", 2);
+fe([
   v()
-], V.prototype, "replyingTo", 2);
-V = ue([
+], W.prototype, "replyingTo", 2);
+W = fe([
   R("pulse-comments")
-], V);
-var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, Ne = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ui(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+], W);
+var ui = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, Ne = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? fi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && pi(e, t, n), n;
+  return i && n && ui(e, t, n), n;
 };
-const fi = {
+const mi = {
   "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"
-}, mi = {
+}, gi = {
   "comment:created": "💬",
   "comment:mention": "📣",
   "comment:reply": "↩️",
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let le = class extends S {
+let ce = class extends S {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -1898,31 +1899,31 @@ let le = class extends S {
   }
   render() {
     const s = this.notifications.filter((e) => !e.read).length;
-    return d`
+    return h`
       <div class="header">
         <span class="title">
           Notifications
-          ${s > 0 ? d`<span class="badge">${s}</span>` : u}
+          ${s > 0 ? h`<span class="badge">${s}</span>` : m}
         </span>
-        ${s > 0 ? d`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+        ${s > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
               Mark all read
-            </button>` : u}
+            </button>` : m}
       </div>
       <div class="list">
-        ${this.notifications.length === 0 ? d`<div class="empty">
+        ${this.notifications.length === 0 ? h`<div class="empty">
               <div class="empty-icon">&#128276;</div>
               No notifications yet
             </div>` : this.notifications.map(
-      (e) => d`
+      (e) => h`
                 <div
                   class="item ${e.read ? "" : "unread"}"
                   @click=${() => this.handleClick(e)}
                 >
-                  <span class="icon">${mi[e.type] ?? "🔔"}</span>
+                  <span class="icon">${gi[e.type] ?? "🔔"}</span>
                   <div class="content">
                     <div class="text">
                       <span class="actor">${this.getActorName(e.actorId)}</span>
-                      ${fi[e.type] ?? e.type}
+                      ${mi[e.type] ?? e.type}
                     </div>
                     <div class="time">${this.formatTime(e.createdAt)}</div>
                   </div>
@@ -1934,7 +1935,7 @@ let le = class extends S {
     `;
   }
 };
-le.styles = M`
+ce.styles = I`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -2076,21 +2077,21 @@ le.styles = M`
     }
   `;
 Ne([
-  he({ context: J, subscribe: !0 }),
+  pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
-], le.prototype, "client", 2);
+], ce.prototype, "client", 2);
 Ne([
   v()
-], le.prototype, "notifications", 2);
-le = Ne([
+], ce.prototype, "notifications", 2);
+ce = Ne([
   R("pulse-notifications")
-], le);
-var gi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Q = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? bi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+], ce);
+var bi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Q = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? vi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && gi(e, t, n), n;
+  return i && n && bi(e, t, n), n;
 };
-const vi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
+const xi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
 let D = class extends S {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
@@ -2131,9 +2132,9 @@ let D = class extends S {
   }
   render() {
     const s = this.groupReactions();
-    return d`
+    return h`
       ${s.map(
-      (e) => d`
+      (e) => h`
           <button
             class="reaction ${e.userReactionId ? "active" : ""}"
             @click=${() => this.toggleReaction(e)}
@@ -2150,22 +2151,22 @@ let D = class extends S {
         >
           +
         </button>
-        ${this.showPicker ? d`
+        ${this.showPicker ? h`
               <div class="picker">
-                ${vi.map(
-      (e) => d`
+                ${xi.map(
+      (e) => h`
                     <button @click=${() => this.addEmoji(e)}>
                       ${e}
                     </button>
                   `
     )}
               </div>
-            ` : u}
+            ` : m}
       </div>
     `;
   }
 };
-D.styles = M`
+D.styles = I`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2278,7 +2279,7 @@ D.styles = M`
     }
   `;
 Q([
-  he({ context: J, subscribe: !0 }),
+  pe({ context: Z, subscribe: !0 }),
   g({ attribute: !1 })
 ], D.prototype, "client", 2);
 Q([
@@ -2301,8 +2302,8 @@ D = Q([
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const xi = { CHILD: 2 }, yi = (s) => (...e) => ({ _$litDirective$: s, values: e });
-class wi {
+const yi = { CHILD: 2 }, wi = (s) => (...e) => ({ _$litDirective$: s, values: e });
+class $i {
   constructor(e) {
   }
   get _$AU() {
@@ -2323,12 +2324,12 @@ class wi {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Me extends wi {
+class Ie extends $i {
   constructor(e) {
-    if (super(e), this.it = u, e.type !== xi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = m, e.type !== yi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === u || e == null) return this._t = void 0, this.it = e;
+    if (e === m || e == null) return this._t = void 0, this.it = e;
     if (e === q) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
@@ -2337,23 +2338,23 @@ class Me extends wi {
     return t.raw = t, this._t = { _$litType$: this.constructor.resultType, strings: t, values: [] };
   }
 }
-Me.directiveName = "unsafeHTML", Me.resultType = 1;
+Ie.directiveName = "unsafeHTML", Ie.resultType = 1;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Ie extends Me {
+class Me extends Ie {
 }
-Ie.directiveName = "unsafeSVG", Ie.resultType = 2;
-const $i = yi(Ie);
+Me.directiveName = "unsafeSVG", Me.resultType = 2;
+const ki = wi(Me);
 /**
  * @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 ki = [
+const Ei = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0" }],
   [
     "path",
@@ -2368,7 +2369,7 @@ const ki = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ei = [
+const Ci = [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["path", { d: "M12 6v6l4 2" }]
 ];
@@ -2378,7 +2379,7 @@ const Ei = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ci = [
+const _i = [
   [
     "path",
     {
@@ -2392,7 +2393,7 @@ const Ci = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const _i = [
+const Ti = [
   ["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" }]
@@ -2403,7 +2404,7 @@ const _i = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ti = [
+const Si = [
   [
     "path",
     {
@@ -2417,7 +2418,7 @@ const Ti = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Si = [
+const Pi = [
   [
     "path",
     {
@@ -2439,7 +2440,7 @@ const Si = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pi = [
+const Ai = [
   [
     "path",
     {
@@ -2454,7 +2455,7 @@ const Pi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ct = [
+const _t = [
   ["path", { d: "M12 17v5" }],
   [
     "path",
@@ -2469,7 +2470,7 @@ const Ct = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ai = [
+const Ii = [
   [
     "path",
     {
@@ -2497,7 +2498,17 @@ const Mi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const fe = [
+const Oi = [
+  ["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" }]
+];
+/**
+ * @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 me = [
   ["path", { d: "M18 6 6 18" }],
   ["path", { d: "m6 6 12 12" }]
 ];
@@ -2507,7 +2518,7 @@ const fe = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ii = [
+const Ri = [
   [
     "path",
     {
@@ -2515,14 +2526,14 @@ const Ii = [
     }
   ]
 ];
-function Oi(s) {
+function Li(s) {
   return s.map(([e, t]) => {
     const i = Object.entries(t).filter(([, n]) => n != null).map(([n, o]) => `${n}="${o}"`).join(" ");
     return `<${e} ${i}/>`;
   }).join("");
 }
-function C(s, e = 18) {
-  return Yt`<svg
+function E(s, e = 18) {
+  return Kt`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="${e}"
     height="${e}"
@@ -2532,9 +2543,9 @@ function C(s, e = 18) {
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-  >${$i(Oi(s))}</svg>`;
+  >${ki(Li(s))}</svg>`;
 }
-const ee = M`
+const ee = I`
   * {
     box-sizing: border-box;
     margin: 0;
@@ -2577,7 +2588,7 @@ const ee = 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);
   }
-`, me = M`
+`, ge = I`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2621,7 +2632,7 @@ const ee = M`
     width: 18px;
     height: 18px;
   }
-`, _e = M`
+`, _e = I`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2633,10 +2644,10 @@ const ee = M`
     background: transparent;
   }
 `;
-var Ri = Object.defineProperty, Li = Object.getOwnPropertyDescriptor, Be = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? Li(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var ji = Object.defineProperty, zi = Object.getOwnPropertyDescriptor, Fe = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? zi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && Ri(e, t, n), n;
+  return i && n && ji(e, t, n), n;
 };
 let X = class extends S {
   constructor() {
@@ -2684,18 +2695,18 @@ let X = class extends S {
     );
   }
   render() {
-    return d`
+    return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Activity</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(fe, 16)}
+            ${E(me, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${this.items.length === 0 ? d`<div class="empty">No activity yet</div>` : this.items.map(
-      (s) => d`
+          ${this.items.length === 0 ? h`<div class="empty">No activity yet</div>` : this.items.map(
+      (s) => h`
                   <div class="activity-item">
                     <div
                       class="activity-dot"
@@ -2703,7 +2714,7 @@ let X = class extends S {
                     ></div>
                     <div class="activity-content">
                       <div class="activity-text">
-                        ${s.userId ? d`<span class="activity-user"
+                        ${s.userId ? h`<span class="activity-user"
                                 >${this.getUserName(s.userId)}</span
                               >
                               ${s.description}` : s.description}
@@ -2722,9 +2733,9 @@ let X = class extends S {
 };
 X.styles = [
   ee,
-  me,
+  ge,
   _e,
-  M`
+  I`
       :host {
         display: block;
       }
@@ -2849,17 +2860,17 @@ X.TYPE_COLORS = {
   comment: "#3b82f6",
   resolve: "#22c55e"
 };
-Be([
+Fe([
   g({ attribute: !1 })
 ], X.prototype, "client", 2);
-Be([
+Fe([
   v()
 ], X.prototype, "items", 2);
-X = Be([
+X = Fe([
   R("pulse-widget-activity-panel")
 ], X);
-const ji = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", nt = "#6366f1", ot = "#e2e8f0", zi = "#f8fafc", Ui = "#e2e8f0", rt = "#64748b", ve = 28, Di = Array.from({ length: ve }, (s, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
-function at(s) {
+const Ui = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", ot = "#6366f1", rt = "#e2e8f0", Di = "#f8fafc", Hi = "#e2e8f0", at = "#64748b", xe = 28, Bi = Array.from({ length: xe }, (s, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
+function lt(s) {
   const e = Math.max(0, Math.floor(s)), t = Math.floor(e / 60), i = e % 60;
   return `${t}:${i.toString().padStart(2, "0")}`;
 }
@@ -2884,12 +2895,12 @@ class Oe {
       width: "220px",
       height: "44px",
       padding: "0 10px",
-      background: zi,
+      background: Di,
       borderRadius: "12px",
-      border: `1px solid ${Ui}`,
-      fontFamily: ji,
+      border: `1px solid ${Hi}`,
+      fontFamily: Ui,
       fontSize: "11px",
-      color: rt,
+      color: at,
       userSelect: "none",
       boxSizing: "border-box"
     });
@@ -2900,7 +2911,7 @@ class Oe {
       minWidth: "28px",
       borderRadius: "50%",
       border: "none",
-      background: nt,
+      background: ot,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -2916,20 +2927,20 @@ class Oe {
       height: "12px",
       lineHeight: "0"
     });
-    function h() {
+    function p() {
       c.innerHTML = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1 1L9 6L1 11V1Z" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round"/>
       </svg>`;
     }
-    function p() {
+    function d() {
       c.innerHTML = `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="1" y="1" width="2.5" height="10" rx="0.5" fill="white"/>
         <rect x="6.5" y="1" width="2.5" height="10" rx="0.5" fill="white"/>
       </svg>`;
     }
-    h(), a.appendChild(c);
-    const m = document.createElement("div");
-    Object.assign(m.style, {
+    p(), a.appendChild(c);
+    const u = document.createElement("div");
+    Object.assign(u.style, {
       flex: "1",
       display: "flex",
       flexDirection: "column",
@@ -2946,13 +2957,13 @@ class Oe {
       cursor: "pointer"
     });
     const b = [];
-    for (let k = 0; k < ve; k++) {
-      const A = document.createElement("div"), w = Math.round(Di[k] * 20);
+    for (let k = 0; k < xe; k++) {
+      const A = document.createElement("div"), w = Math.round(Bi[k] * 20);
       Object.assign(A.style, {
         flex: "1",
         height: `${Math.max(3, w)}px`,
         borderRadius: "1px",
-        background: ot,
+        background: rt,
         transition: "background 0.1s ease",
         minWidth: "0"
       }), b.push(A), f.appendChild(A);
@@ -2960,19 +2971,19 @@ class Oe {
     const x = document.createElement("div");
     Object.assign(x.style, {
       fontSize: "10px",
-      color: rt,
+      color: at,
       whiteSpace: "nowrap",
       lineHeight: "1"
     });
     function _() {
-      const k = at(o), A = at(n);
+      const k = lt(o), A = lt(n);
       x.textContent = `${k} / ${A}`;
     }
-    _(), m.appendChild(f), m.appendChild(x), l.appendChild(a), l.appendChild(m);
+    _(), u.appendChild(f), u.appendChild(x), l.appendChild(a), l.appendChild(u);
     function $() {
-      const k = n > 0 ? o / n : 0, A = Math.floor(k * ve);
-      for (let w = 0; w < ve; w++)
-        b[w].style.background = w <= A ? nt : ot;
+      const k = n > 0 ? o / n : 0, A = Math.floor(k * xe);
+      for (let w = 0; w < xe; w++)
+        b[w].style.background = w <= A ? ot : rt;
     }
     return f.addEventListener("click", (k) => {
       if (n <= 0) return;
@@ -2985,11 +2996,11 @@ class Oe {
       i ? r.pause() : r.play().catch(() => {
       });
     }), r.addEventListener("play", () => {
-      i = !0, p();
+      i = !0, d();
     }), r.addEventListener("pause", () => {
-      i = !1, h();
+      i = !1, p();
     }), r.addEventListener("ended", () => {
-      i = !1, h(), o = 0, $(), _();
+      i = !1, p(), o = 0, $(), _();
     }), r.addEventListener("timeupdate", () => {
       o = r.currentTime, $(), _();
     }), r.addEventListener("loadedmetadata", () => {
@@ -3023,9 +3034,9 @@ class Re {
       this.resolve = l;
     });
     return this.recorder.onstop = () => {
-      var c, h;
+      var c, p;
       const l = ((c = this.recorder) == null ? void 0 : c.mimeType) || i || "audio/webm", a = new Blob(o, { type: l });
-      (h = this.resolve) == null || h.call(this, a), this.resolve = null, this.cleanupResources();
+      (p = this.resolve) == null || p.call(this, a), this.resolve = null, this.cleanupResources();
     }, this.recorder.start(), this.recording = !0, this.startTime = Date.now(), this.maxTimer = setTimeout(() => {
       this.stopRecording();
     }, this.maxDuration), this.animate(), r;
@@ -3130,8 +3141,8 @@ class Re {
     this.analyser.getByteFrequencyData(o), e.clearRect(0, 0, t, i);
     const r = n, l = Math.max(2, t / r * 0.7), a = (t - l * r) / (r - 1 || 1);
     for (let c = 0; c < r; c++) {
-      const h = o[c] / 255, p = Math.max(2, h * i * 0.85), m = c * (l + a), f = (i - p) / 2, b = 0.4 + h * 0.6;
-      e.fillStyle = `rgba(99, 102, 241, ${b})`, e.beginPath(), e.roundRect(m, f, l, p, 1), e.fill();
+      const p = o[c] / 255, d = Math.max(2, p * i * 0.85), u = c * (l + a), f = (i - d) / 2, b = 0.4 + p * 0.6;
+      e.fillStyle = `rgba(99, 102, 241, ${b})`, e.beginPath(), e.roundRect(u, f, l, d, 1), e.fill();
     }
   }
   updateTimer() {
@@ -3149,22 +3160,22 @@ class Re {
     this.recorder = null, this.container && (this.container.remove(), this.container = null), this.canvas = null, this.timerEl = null;
   }
 }
-const lt = 80, Hi = "#e2e8f0", Ni = `
+const ct = 80, Ni = "#e2e8f0", Fi = `
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="14" cy="14" r="14" fill="rgba(0,0,0,0.35)"/>
   <polygon points="11,8 22,14 11,20" fill="rgba(255,255,255,0.9)"/>
-</svg>`, ct = `
+</svg>`, dt = `
 <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>`, Bi = `
+</svg>`, qi = `
 <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>`;
-class _t {
+class Tt {
   /**
    * Renders an inline circular video player and returns the root container.
    * @param url - Video source URL
@@ -3176,10 +3187,10 @@ class _t {
     Object.assign(o.style, {
       position: "relative",
       display: "inline-block",
-      width: `${lt}px`,
-      height: `${lt}px`,
+      width: `${ct}px`,
+      height: `${ct}px`,
       borderRadius: "50%",
-      border: `2px solid ${Hi}`,
+      border: `2px solid ${Ni}`,
       boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
       overflow: "hidden",
       cursor: "pointer",
@@ -3209,7 +3220,7 @@ class _t {
       transition: "opacity 0.25s ease",
       opacity: "1",
       pointerEvents: "none"
-    }), l.innerHTML = Ni, o.appendChild(l);
+    }), l.innerHTML = Fi, o.appendChild(l);
     const a = document.createElement("div");
     Object.assign(a.style, {
       position: "absolute",
@@ -3224,22 +3235,22 @@ class _t {
       justifyContent: "center",
       pointerEvents: "none",
       transition: "opacity 0.2s ease"
-    }), a.innerHTML = ct, o.appendChild(a);
+    }), a.innerHTML = dt, o.appendChild(a);
     function c() {
       l.style.opacity = i ? "0" : "1";
     }
-    function h() {
-      a.style.display = i ? "flex" : "none", a.innerHTML = n ? ct : Bi;
+    function p() {
+      a.style.display = i ? "flex" : "none", a.innerHTML = n ? dt : qi;
     }
-    return o.addEventListener("click", (p) => {
-      p.stopPropagation(), i ? n ? (r.muted = !1, n = !1) : (r.pause(), i = !1, n = !0, r.muted = !0) : (r.muted = !0, n = !0, r.play().catch(() => {
-      }), i = !0), c(), h();
+    return o.addEventListener("click", (d) => {
+      d.stopPropagation(), i ? n ? (r.muted = !1, n = !1) : (r.pause(), i = !1, n = !0, r.muted = !0) : (r.muted = !0, n = !0, r.play().catch(() => {
+      }), i = !0), c(), p();
     }), r.addEventListener("pause", () => {
-      i && (i = !1, n = !0, r.muted = !0, c(), h());
+      i && (i = !1, n = !0, r.muted = !0, c(), p());
     }), o;
   }
 }
-const dt = 60, Fi = `
+const ht = 60, Vi = `
   .vr-overlay {
     display: flex;
     flex-direction: column;
@@ -3346,14 +3357,14 @@ const dt = 60, Fi = `
     color: #0f172a;
   }
 `;
-function ht(s) {
+function pt(s) {
   return s.toString().padStart(2, "0");
 }
-function qi(s) {
+function Wi(s) {
   const e = Math.floor(s / 60), t = s % 60;
-  return `${ht(e)}:${ht(t)}`;
+  return `${pt(e)}:${pt(t)}`;
 }
-function Wi() {
+function Xi() {
   const s = [
     "video/webm;codecs=vp9,opus",
     "video/webm;codecs=vp8,opus",
@@ -3364,7 +3375,7 @@ function Wi() {
     if (MediaRecorder.isTypeSupported(e)) return e;
   return "";
 }
-function Vi(s) {
+function Yi(s) {
   return new Promise((e, t) => {
     const i = URL.createObjectURL(s), n = document.createElement("video");
     n.muted = !0, n.playsInline = !0, n.preload = "auto", n.src = i, n.addEventListener("loadeddata", () => {
@@ -3383,7 +3394,7 @@ function Vi(s) {
     }), n.load();
   });
 }
-class Xi {
+class Le {
   constructor() {
     this.recording = !1, this.container = null, this.stream = null, this.mediaRecorder = null, this.chunks = [], this.timerInterval = null, this.elapsed = 0, this.resolvePromise = null, this.root = null, this.styleEl = null, this.videoEl = null, this.timerEl = null;
   }
@@ -3400,7 +3411,7 @@ class Xi {
     }
     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 = Wi(), n = {};
+    const i = Xi(), n = {};
     i && (n.mimeType = i);
     const o = new MediaRecorder(t, n);
     return this.mediaRecorder = o, o.ondataavailable = (r) => {
@@ -3408,7 +3419,7 @@ class Xi {
     }, o.onstop = () => {
       this.handleRecordingComplete();
     }, o.start(), this.timerInterval = setInterval(() => {
-      this.elapsed++, this.updateTimer(), this.elapsed >= dt && this.stopRecording();
+      this.elapsed++, this.updateTimer(), this.elapsed >= ht && this.stopRecording();
     }, 1e3), new Promise((r) => {
       this.resolvePromise = r;
     });
@@ -3425,7 +3436,7 @@ class Xi {
   }
   // ── Private ──
   buildUI(e) {
-    this.styleEl = document.createElement("style"), this.styleEl.textContent = Fi, document.head.appendChild(this.styleEl), this.root = document.createElement("div"), this.root.className = "vr-overlay";
+    this.styleEl = document.createElement("style"), this.styleEl.textContent = Vi, 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");
@@ -3441,15 +3452,15 @@ class Xi {
   }
   updateTimer() {
     if (!this.timerEl) return;
-    const e = dt - this.elapsed;
-    this.timerEl.textContent = qi(this.elapsed), e <= 10 ? this.timerEl.classList.add("vr-countdown") : this.timerEl.classList.remove("vr-countdown");
+    const e = ht - this.elapsed;
+    this.timerEl.textContent = Wi(this.elapsed), e <= 10 ? this.timerEl.classList.add("vr-countdown") : this.timerEl.classList.remove("vr-countdown");
   }
   async handleRecordingComplete() {
     var n, o;
     const e = ((n = this.mediaRecorder) == null ? void 0 : n.mimeType) || "video/webm", t = new Blob(this.chunks, { type: e });
     let i;
     try {
-      i = await Vi(t);
+      i = await Yi(t);
     } catch {
       const r = document.createElement("canvas");
       r.width = 1, r.height = 1, i = await new Promise((l) => {
@@ -3551,8 +3562,8 @@ const T = class T {
   }
 };
 T.overlay = null, T.onKeyDown = null;
-let $e = T;
-class ke {
+let ke = T;
+class ne {
   constructor(e) {
     this.uploading = !1, this.client = e, this.input = document.createElement("input"), this.input.type = "file", this.input.style.display = "none", document.body.appendChild(this.input);
   }
@@ -3608,7 +3619,7 @@ class ke {
     this.input.remove();
   }
 }
-const Yi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"], ge = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", Ki = '<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>', Gi = '<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>', pt = `<button class="pulse-close-btn" style="
+const Ki = ["👍", "👎", "❤️", "🎉", "👀", "🚀"], be = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", Gi = '<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>', Zi = '<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>', ut = `<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;
@@ -3752,11 +3763,11 @@ class Ji {
       boxShadow: "0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08)",
       border: "1px solid #e2e8f0",
       padding: "14px",
-      fontFamily: ge
+      fontFamily: be
     }), 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>
-        ${pt}
+        ${ut}
       </div>
       <textarea
         placeholder="Write a comment..."
@@ -3793,43 +3804,43 @@ class Ji {
       </div>
       <div class="pin-attachments-preview" style="margin-top:6px;"></div>
     `;
-    const a = this.form.querySelector("textarea"), c = this.form.querySelector(".pulse-close-btn"), h = this.form.querySelector(".pin-cancel"), p = this.form.querySelector(".pin-submit");
-    c.addEventListener("click", () => this.exitPinMode()), h.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new ke(this.client));
-    const m = this.form.querySelector(".pin-attachments-preview");
+    const a = this.form.querySelector("textarea"), c = this.form.querySelector(".pulse-close-btn"), p = this.form.querySelector(".pin-cancel"), d = this.form.querySelector(".pin-submit");
+    c.addEventListener("click", () => this.exitPinMode()), p.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new ne(this.client));
+    const u = this.form.querySelector(".pin-attachments-preview");
     this.form.querySelector(".attach-img").addEventListener("click", async () => {
       const f = await this.upload.pickFile("image/*");
       if (f) {
         this.pendingAttachmentIds.push(f.id);
         const b = document.createElement("img");
-        b.src = f.thumbnailUrl || f.url, Object.assign(b.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0" }), m.appendChild(b);
+        b.src = f.thumbnailUrl || f.url, Object.assign(b.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0" }), u.appendChild(b);
       }
     }), this.form.querySelector(".attach-mic").addEventListener("click", async () => {
       this.audioRecorder || (this.audioRecorder = new Re());
-      const f = await this.audioRecorder.startRecording(m);
+      const f = await this.audioRecorder.startRecording(u);
       if (f) {
         const b = await this.upload.uploadBlob(f, "audio.webm");
         if (b) {
           this.pendingAttachmentIds.push(b.id);
           const x = document.createElement("span");
-          Object.assign(x.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), x.textContent = "🎤 Audio attached", m.appendChild(x);
+          Object.assign(x.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), x.textContent = "🎤 Audio attached", u.appendChild(x);
         }
       }
     }), this.form.querySelector(".attach-video").addEventListener("click", async () => {
-      this.videoRecorder || (this.videoRecorder = new Xi());
-      const f = await this.videoRecorder.startRecording(m);
+      this.videoRecorder || (this.videoRecorder = new Le());
+      const f = await this.videoRecorder.startRecording(u);
       if (f) {
         const b = await this.upload.uploadBlob(f.blob, "video.webm");
         if (b) {
           this.pendingAttachmentIds.push(b.id);
           const x = document.createElement("span");
-          Object.assign(x.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), x.textContent = "🎥 Video attached", m.appendChild(x);
+          Object.assign(x.style, { display: "inline-block", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b" }), x.textContent = "🎥 Video attached", u.appendChild(x);
         }
       }
-    }), p.addEventListener("click", () => {
+    }), d.addEventListener("click", () => {
       const f = a.value.trim();
       if (!f && this.pendingAttachmentIds.length === 0) return;
       const b = [...(f || "").matchAll(/@(\w+)/g)].map((x) => x[1]);
-      this.client.createThread(f || "(attachment)", { position: i, mentions: b }), this.pendingAttachmentIds = [], this.exitPinMode();
+      this.client.createThread(f || "(attachment)", { position: i, mentions: b, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
     }), a.addEventListener("keydown", (f) => {
       f.key === "Escape" && this.exitPinMode(), f.stopPropagation();
     }), document.body.appendChild(this.form), requestAnimationFrame(() => a.focus());
@@ -3850,7 +3861,7 @@ class Ji {
       borderRadius: i ? "16px 16px 0 0" : "12px",
       boxShadow: "0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08)",
       border: "1px solid #e2e8f0",
-      fontFamily: ge,
+      fontFamily: be,
       display: "flex",
       flexDirection: "column",
       overflow: "hidden",
@@ -3867,7 +3878,7 @@ class Ji {
       flexShrink: "0"
     }), a.innerHTML = `
       <span style="font-size:13px;font-weight:700;color:#0f172a;">Thread</span>
-      ${pt}
+      ${ut}
     `, a.querySelector(".pulse-close-btn").addEventListener("click", () => {
       this.closePopover();
     }), this.popover.appendChild(a), this.refreshPopoverComments(e), this.addPopoverReplyForm(e), document.body.appendChild(this.popover);
@@ -3895,13 +3906,13 @@ class Ji {
     }
     const i = (l = this.client.state.user) == null ? void 0 : l.id;
     t.innerHTML = e.comments.map((a) => {
-      const c = this.client.state.getUser(a.userId), h = c ? c.name.split(" ").map((w) => w[0]).join("").toUpperCase().slice(0, 2) : "?", p = (c == null ? void 0 : c.color) ?? "#94a3b8", m = this.escapeHtml((c == null ? void 0 : c.name) ?? "Unknown"), f = this.formatTime(a.createdAt), b = i === a.userId, x = a.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
+      const c = this.client.state.getUser(a.userId), p = c ? c.name.split(" ").map((w) => w[0]).join("").toUpperCase().slice(0, 2) : "?", d = (c == null ? void 0 : c.color) ?? "#94a3b8", u = this.escapeHtml((c == null ? void 0 : c.name) ?? "Unknown"), f = this.formatTime(a.createdAt), b = i === a.userId, x = a.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
       if (this.editingPopoverCommentId === a.id)
         return `
             <div style="margin-bottom:10px;" data-comment-id="${a.id}">
               <div style="display:flex;align-items:center;gap:7px;margin-bottom:4px;">
-                <div style="width:22px;height:22px;border-radius:50%;background:${p};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${h}</div>
-                <span style="font-size:12px;font-weight:600;color:#0f172a;">${m}</span>
+                <div style="width:22px;height:22px;border-radius:50%;background:${d};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${p}</div>
+                <span style="font-size:12px;font-weight:600;color:#0f172a;">${u}</span>
               </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(a.body)}</textarea>
@@ -3917,25 +3928,25 @@ class Ji {
         '<span style="color:#6366f1;font-weight:600;background:#eef2ff;padding:0 3px;border-radius:3px;">@$1</span>'
       ), $ = (a.attachments ?? []).map((w) => {
         if (w.type === "image") {
-          const St = w.thumbnailUrl || w.url;
+          const Pt = w.thumbnailUrl || w.url;
           return `<div class="popover-attachment-img" data-full-url="${this.escapeHtml(w.url)}" style="margin:4px 0 4px 29px;cursor:pointer;">
-              <img src="${this.escapeHtml(St)}" alt="${this.escapeHtml(w.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
+              <img src="${this.escapeHtml(Pt)}" alt="${this.escapeHtml(w.filename)}" style="max-width:180px;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;display:block;" />
             </div>`;
         }
         return w.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(w.url)}" data-duration="${w.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : w.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(w.url)}" data-poster="${this.escapeHtml(w.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
       }).join(""), k = b ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
               <button class="edit-btn" data-comment-id="${a.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Edit"
                 onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'"
-                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${Ki}</button>
+                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${Gi}</button>
               <button class="delete-btn" data-comment-id="${a.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Delete"
                 onmouseover="this.style.color='#ef4444';this.style.background='#fef2f2'"
-                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${Gi}</button>
+                onmouseout="this.style.color='#94a3b8';this.style.background='none'">${Zi}</button>
             </div>` : "", A = this.buildReactionPillsHtml(a.id);
       return `
           <div class="popover-comment" style="margin-bottom:10px;" data-comment-id="${a.id}">
             <div style="display:flex;align-items:center;gap:7px;margin-bottom:2px;">
-              <div style="width:22px;height:22px;border-radius:50%;background:${p};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${h}</div>
-              <span style="font-size:12px;font-weight:600;color:#0f172a;">${m}</span>
+              <div style="width:22px;height:22px;border-radius:50%;background:${d};color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;">${p}</div>
+              <span style="font-size:12px;font-weight:600;color:#0f172a;">${u}</span>
               <span style="font-size:10px;color:#94a3b8;">${f}</span>
               ${x}
             </div>
@@ -3960,7 +3971,7 @@ class Ji {
     n && r && n.addEventListener("click", () => {
       const a = r.value.trim();
       if (!a) return;
-      const c = [...a.matchAll(/@(\w+)/g)].map((h) => h[1]);
+      const c = [...a.matchAll(/@(\w+)/g)].map((p) => p[1]);
       this.client.editComment(
         this.editingPopoverCommentId,
         a,
@@ -3971,31 +3982,31 @@ class Ji {
     }), t.querySelectorAll("[data-reaction-emoji]").forEach((a) => {
       a.addEventListener("click", (c) => {
         c.stopPropagation();
-        const h = a.dataset.reactionEmoji, p = a.dataset.reactionTarget, m = a.dataset.reactionId;
-        m ? this.client.removeReaction(m) : this.client.addReaction(p, "comment", h);
+        const p = a.dataset.reactionEmoji, d = a.dataset.reactionTarget, u = a.dataset.reactionId;
+        u ? this.client.removeReaction(u) : this.client.addReaction(d, "comment", p);
       });
     }), t.querySelectorAll(".popover-reaction-add").forEach((a) => {
       a.addEventListener("click", (c) => {
         c.stopPropagation();
-        const h = a.dataset.commentId;
-        this.popoverPickerOpen === h ? (this.popoverPickerOpen = null, this.removePickerEl()) : (this.popoverPickerOpen = h, this.showPickerForButton(a, h));
+        const p = a.dataset.commentId;
+        this.popoverPickerOpen === p ? (this.popoverPickerOpen = null, this.removePickerEl()) : (this.popoverPickerOpen = p, this.showPickerForButton(a, p));
       });
     }), t.querySelectorAll(".popover-attachment-img").forEach((a) => {
       a.addEventListener("click", () => {
         const c = a.dataset.fullUrl;
-        c && $e.open(c);
+        c && ke.open(c);
       });
     }), t.querySelectorAll(".popover-attachment-audio").forEach((a) => {
       const c = a.dataset.url;
       if (c) {
-        const h = a.dataset.duration ? parseInt(a.dataset.duration) : void 0, p = Oe.render(c, h);
-        a.appendChild(p);
+        const p = a.dataset.duration ? parseInt(a.dataset.duration) : void 0, d = Oe.render(c, p);
+        a.appendChild(d);
       }
     }), t.querySelectorAll(".popover-attachment-video").forEach((a) => {
       const c = a.dataset.url;
       if (c) {
-        const h = a.dataset.poster || void 0, p = _t.render(c, h);
-        a.appendChild(p);
+        const p = a.dataset.poster || void 0, d = Tt.render(c, p);
+        a.appendChild(d);
       }
     }), t.scrollTop = t.scrollHeight;
   }
@@ -4004,43 +4015,63 @@ class Ji {
     const t = document.createElement("div");
     Object.assign(t.style, {
       padding: "8px 14px 12px",
-      borderTop: "1px solid #f1f5f9",
-      display: "flex",
-      gap: "6px"
-    }), t.innerHTML = `
-      <div style="display:flex;gap:6px;width:100%;">
+      borderTop: "1px solid #f1f5f9"
+    });
+    const i = "border:none;background:none;cursor:pointer;color:#94a3b8;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;transition:all 0.15s;", n = 'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+    t.innerHTML = `
+      <div style="display:flex;align-items:center;gap:4px;margin-bottom:6px;">
         <input type="text" placeholder="Reply..."
-          style="flex:1;padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:12px;font-family:inherit;outline:none;color:#0f172a;min-width:0;" />
-        <div style="display:flex;gap:1px;align-items:center;flex-shrink:0;">
-          <button class="reply-attach-img" title="Image" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;" onmouseover="this.style.color='#6366f1'" onmouseout="this.style.color='#94a3b8'">
-            <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="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
-          </button>
-          <button class="reply-attach-mic" title="Audio" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;" onmouseover="this.style.color='#6366f1'" onmouseout="this.style.color='#94a3b8'">
-            <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="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
-          </button>
-        </div>
-        <button class="reply-send" style="padding:7px 14px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;">Send</button>
+          style="flex:1;padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;outline:none;color:#0f172a;min-width:0;min-height:36px;transition:border-color 0.15s;" />
+        <button class="reply-send" style="padding:8px 14px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;min-height:36px;transition:background 0.15s;" onmouseover="this.style.background='#4f46e5'" onmouseout="this.style.background='#6366f1'">Send</button>
+      </div>
+      <div style="display:flex;align-items:center;gap:2px;">
+        <button class="reply-attach-img" title="Attach image" style="${i}" onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'" onmouseout="this.style.color='#94a3b8';this.style.background='none'">
+          <svg ${n}><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+        </button>
+        <button class="reply-attach-mic" title="Record audio" style="${i}" onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'" onmouseout="this.style.color='#94a3b8';this.style.background='none'">
+          <svg ${n}><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
+        </button>
+        <button class="reply-attach-video" title="Record video" style="${i}" onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'" onmouseout="this.style.color='#94a3b8';this.style.background='none'">
+          <svg ${n}><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
+        </button>
+        <div class="reply-attachments-preview" style="flex:1;display:flex;gap:4px;flex-wrap:wrap;margin-left:4px;"></div>
       </div>
     `;
-    const i = t.querySelector("input"), n = t.querySelector(".reply-send");
-    this.upload || (this.upload = new ke(this.client)), t.querySelector(".reply-attach-img").addEventListener("click", async () => {
-      await this.upload.pickFile("image/*") && this.client.reply(e.id, "(image)");
+    const o = t.querySelector("input"), r = t.querySelector(".reply-send"), l = t.querySelector(".reply-attachments-preview");
+    this.upload || (this.upload = new ne(this.client));
+    const a = [], c = (d) => {
+      const u = document.createElement("span");
+      Object.assign(u.style, { display: "inline-block", padding: "2px 8px", borderRadius: "4px", background: "#f1f5f9", fontSize: "10px", color: "#64748b" }), u.textContent = d, l.appendChild(u);
+    };
+    t.querySelector(".reply-attach-img").addEventListener("click", async () => {
+      const d = await this.upload.pickFile("image/*");
+      d && (a.push(d.id), c("📎 Image"));
     }), t.querySelector(".reply-attach-mic").addEventListener("click", async () => {
       this.audioRecorder || (this.audioRecorder = new Re());
-      const r = await this.audioRecorder.startRecording(t);
-      r && await this.upload.uploadBlob(r, "audio.webm") && this.client.reply(e.id, "(audio note)");
+      const d = await this.audioRecorder.startRecording(t);
+      if (d) {
+        const u = await this.upload.uploadBlob(d, "audio.webm");
+        u && (a.push(u.id), c("🎤 Audio"));
+      }
+    }), t.querySelector(".reply-attach-video").addEventListener("click", async () => {
+      this.videoRecorder || (this.videoRecorder = new Le());
+      const d = await this.videoRecorder.startRecording(t);
+      if (d) {
+        const u = await this.upload.uploadBlob(d.blob, "video.webm");
+        u && (a.push(u.id), c("🎥 Video"));
+      }
     });
-    const o = () => {
-      const r = i.value.trim();
-      if (!r) return;
-      const l = [...r.matchAll(/@(\w+)/g)].map((a) => a[1]);
-      this.client.reply(e.id, r, l), i.value = "";
+    const p = () => {
+      const d = o.value.trim();
+      if (!d && a.length === 0) return;
+      const u = [...(d || "").matchAll(/@(\w+)/g)].map((f) => f[1]);
+      this.client.reply(e.id, d || "(attachment)", u, a.length > 0 ? [...a] : void 0), o.value = "", a.length = 0, l.innerHTML = "";
     };
-    n.addEventListener("click", o), i.addEventListener("input", () => {
-      const r = Date.now(), l = this.lastTypingSendPins.get(e.id) ?? 0;
-      r - l >= 2e3 && (this.client.sendTyping(e.id), this.lastTypingSendPins.set(e.id, r));
-    }), i.addEventListener("keydown", (r) => {
-      r.key === "Enter" && (r.preventDefault(), o()), r.key === "Escape" && this.closePopover(), r.stopPropagation();
+    r.addEventListener("click", p), o.addEventListener("input", () => {
+      const d = Date.now(), u = this.lastTypingSendPins.get(e.id) ?? 0;
+      d - u >= 2e3 && (this.client.sendTyping(e.id), this.lastTypingSendPins.set(e.id, d));
+    }), o.addEventListener("keydown", (d) => {
+      d.key === "Enter" && (d.preventDefault(), p()), d.key === "Escape" && this.closePopover(), d.stopPropagation();
     }), this.popover.appendChild(t);
   }
   removePickerEl() {
@@ -4063,9 +4094,9 @@ class Ji {
       borderRadius: "8px",
       boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
       zIndex: "10002",
-      fontFamily: ge
+      fontFamily: be
     });
-    for (const n of Yi) {
+    for (const n of Ki) {
       const o = document.createElement("button");
       Object.assign(o.style, {
         border: "none",
@@ -4079,8 +4110,8 @@ class Ji {
         r.stopPropagation();
         const a = this.client.state.getReactions(t).find(
           (c) => {
-            var h;
-            return c.emoji === n && c.userId === ((h = this.client.state.user) == null ? void 0 : h.id);
+            var p;
+            return c.emoji === n && c.userId === ((p = this.client.state.user) == null ? void 0 : p.id);
           }
         );
         a ? this.client.removeReaction(a.id) : this.client.addReaction(t, "comment", n), this.popoverPickerOpen = null, this.removePickerEl();
@@ -4092,15 +4123,15 @@ class Ji {
     var a;
     const t = this.client.state.getReactions(e), i = (a = this.client.state.user) == null ? void 0 : a.id, n = /* @__PURE__ */ new Map();
     for (const c of t) {
-      const h = n.get(c.emoji) ?? { count: 0, ownId: null };
-      h.count++, c.userId === i && (h.ownId = c.id), n.set(c.emoji, h);
+      const p = n.get(c.emoji) ?? { count: 0, ownId: null };
+      p.count++, c.userId === i && (p.ownId = c.id), n.set(c.emoji, p);
     }
     const o = "display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:12px;cursor:pointer;transition:all 0.15s;line-height:1.4;", r = o + "background:#eef2ff;border-color:#6366f1;";
     let l = '<div style="margin-left:29px;display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">';
-    for (const [c, { count: h, ownId: p }] of n) {
-      const m = p ? r : o;
-      l += `<button data-reaction-emoji="${c}" data-reaction-target="${e}" ${p ? `data-reaction-id="${p}"` : ""} style="${m}">
-        <span>${c}</span><span style="font-size:11px;font-weight:600;color:#64748b;">${h}</span>
+    for (const [c, { count: p, ownId: d }] of n) {
+      const u = d ? r : o;
+      l += `<button data-reaction-emoji="${c}" data-reaction-target="${e}" ${d ? `data-reaction-id="${d}"` : ""} style="${u}">
+        <span>${c}</span><span style="font-size:11px;font-weight:600;color:#64748b;">${p}</span>
       </button>`;
     }
     return l += `<button class="popover-reaction-add" data-comment-id="${e}" style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px dashed #e2e8f0;background:none;cursor:pointer;color:#94a3b8;font-size:14px;">+</button>`, l += "</div>", l;
@@ -4175,7 +4206,7 @@ class Ji {
         justifyContent: "center",
         fontSize: "11px",
         fontWeight: "700",
-        fontFamily: ge,
+        fontFamily: be,
         cursor: "pointer",
         pointerEvents: "auto",
         boxShadow: "0 2px 8px rgba(99,102,241,0.4)",
@@ -4200,15 +4231,19 @@ class Ji {
     });
   }
 }
-var Zi = Object.defineProperty, Qi = Object.getOwnPropertyDescriptor, j = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? Qi(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var Qi = Object.defineProperty, es = Object.getOwnPropertyDescriptor, j = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? es(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && Zi(e, t, n), n;
+  return i && n && Qi(e, t, n), n;
 };
-const es = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
+const ts = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
 let O = class extends S {
   constructor() {
-    super(...arguments), this.highlightThreadId = null, this.threads = [], 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();
+    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 = [];
+  }
+  /** Read threads directly from state — threadsVersion triggers re-renders. */
+  get threads() {
+    return this.threadsVersion, this.client ? [...this.client.state.threads] : [];
   }
   connectedCallback() {
     super.connectedCallback(), this.ensureListener();
@@ -4231,7 +4266,7 @@ let O = class extends S {
     }), (t = this.shadowRoot) == null || t.querySelectorAll(".video-player-host").forEach((i) => {
       if (i.children.length > 0) return;
       const n = i.dataset.url;
-      n && i.appendChild(_t.render(n, i.dataset.poster || void 0));
+      n && i.appendChild(Tt.render(n, i.dataset.poster || void 0));
     });
   }
   teardownListeners() {
@@ -4241,11 +4276,11 @@ let O = class extends S {
     this.typingTimers.clear();
   }
   ensureListener() {
-    this.client && (this.teardownListeners(), this.threads = [...this.client.state.threads], this.setupListener());
+    this.client && (this.teardownListeners(), this.threadsVersion++, this.setupListener());
   }
   setupListener() {
-    this.client && (this.threads = this.client.state.threads, this.unsub = this.client.state.on("threads", (s) => {
-      this.threads = [...s];
+    this.client && (this.unsub = this.client.state.on("threads", () => {
+      this.threadsVersion++;
     }), this.reactionUnsub = this.client.state.on("reactions", () => {
       this.reactionsVersion++;
     }), this.typingUnsub = this.client.state.on(
@@ -4297,7 +4332,7 @@ let O = class extends S {
   }
   parseMentions(s) {
     return s.split(/(@\w+)/g).map(
-      (t) => t.startsWith("@") ? d`<span class="mention">${t}</span>` : t
+      (t) => t.startsWith("@") ? h`<span class="mention">${t}</span>` : t
     );
   }
   getInitials(s) {
@@ -4313,21 +4348,35 @@ let O = class extends S {
     const o = Math.floor(n / 60);
     return o < 24 ? `${o}h` : e.toLocaleDateString();
   }
-  async handleAttachImage(s) {
-    this.upload || (this.upload = new ke(this.client)), await this.upload.pickFile("image/*") && this.client.reply(s, "(image)");
+  async handleAttachImage() {
+    this.upload || (this.upload = new ne(this.client));
+    const s = await this.upload.pickFile("image/*");
+    s && (this.replyAttachmentIds.push(s.id), this.requestUpdate());
   }
   async handleRecordAudio(s) {
     var i;
-    this.upload || (this.upload = new ke(this.client)), this.audioRecorder || (this.audioRecorder = new Re());
+    this.upload || (this.upload = new ne(this.client)), this.audioRecorder || (this.audioRecorder = new Re());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${s}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
-    t && await this.upload.uploadBlob(t, "audio.webm") && this.client.reply(s, "(audio note)");
+    if (t) {
+      const n = await this.upload.uploadBlob(t, "audio.webm");
+      n && (this.replyAttachmentIds.push(n.id), this.requestUpdate());
+    }
+  }
+  async handleRecordVideo(s) {
+    var i;
+    this.upload || (this.upload = new ne(this.client)), this.videoRecorder || (this.videoRecorder = new Le());
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${s}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
+    if (t) {
+      const n = await this.upload.uploadBlob(t.blob, "video.webm");
+      n && (this.replyAttachmentIds.push(n.id), this.requestUpdate());
+    }
   }
   handleReply(s, e) {
     e.preventDefault();
     const i = e.target.querySelector("input"), n = i.value.trim();
-    if (!n) return;
-    const o = [...n.matchAll(/@(\w+)/g)].map((r) => r[1]);
-    this.client.reply(s, n, o), i.value = "", this.replyingTo = null;
+    if (!n && this.replyAttachmentIds.length === 0) return;
+    const o = [...(n || "").matchAll(/@(\w+)/g)].map((r) => r[1]);
+    this.client.reply(s, n || "(attachment)", o, this.replyAttachmentIds.length > 0 ? [...this.replyAttachmentIds] : void 0), i.value = "", this.replyAttachmentIds = [], this.replyingTo = null;
   }
   isOwnComment(s) {
     var e, t;
@@ -4349,7 +4398,7 @@ let O = class extends S {
     this.client.deleteComment(s);
   }
   renderEditForm(s) {
-    return d`
+    return h`
       <div class="edit-form">
         <textarea
           .value=${this.editBody}
@@ -4370,12 +4419,12 @@ let O = class extends S {
     const e = this.client.state.getReactions(s.id), t = (n = this.client.state.user) == null ? void 0 : n.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 d`
+    return h`
       <div class="comment-reactions">
         ${[...i.entries()].map(
       ([o, r]) => {
         const l = r.some((a) => a.userId === t);
-        return d`
+        return h`
               <button
                 class="reaction-pill ${l ? "own" : ""}"
                 @click=${() => this.toggleReaction(s.id, o)}
@@ -4394,26 +4443,26 @@ let O = class extends S {
           title="Add reaction"
         >
           +
-          ${this.pickerOpenForComment === s.id ? d`
+          ${this.pickerOpenForComment === s.id ? h`
                 <div class="emoji-picker">
-                  ${es.map(
-      (o) => d`
+                  ${ts.map(
+      (o) => h`
                       <button @click=${(r) => {
         r.stopPropagation(), this.toggleReaction(s.id, o);
       }}>${o}</button>
                     `
     )}
                 </div>
-              ` : u}
+              ` : m}
         </button>
       </div>
     `;
   }
   renderTypingIndicator(s) {
     const e = this.typingByThread.get(s) ?? [];
-    if (e.length === 0) return u;
+    if (e.length === 0) return m;
     const t = e.length === 1 ? `${e[0]} is typing...` : `${e.join(", ")} are typing...`;
-    return d`<div class="typing-indicator">${t}</div>`;
+    return h`<div class="typing-indicator">${t}</div>`;
   }
   sortedThreads() {
     return [...this.threads].sort((s, e) => {
@@ -4424,7 +4473,7 @@ let O = class extends S {
   }
   render() {
     const s = this.sortedThreads();
-    return d`
+    return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
@@ -4432,12 +4481,12 @@ let O = class extends S {
             <span class="thread-count">${this.threads.length}</span>
           </span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(fe, 16)}
+            ${E(me, 16)}
           </button>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${s.length === 0 ? d`<div class="empty">
+          ${s.length === 0 ? h`<div class="empty">
                 <div class="empty-icon">&#128172;</div>
                 No comments yet
               </div>` : s.map((e) => this.renderThread(e))}
@@ -4450,55 +4499,55 @@ let O = class extends S {
     `;
   }
   renderAttachments(s) {
-    return !s || s.length === 0 ? u : d`
+    return !s || s.length === 0 ? m : h`
       ${s.map((e) => {
       if (e.type === "image") {
         const t = e.thumbnailUrl || e.url;
-        return d`
+        return h`
             <div class="comment-attachment-media">
               <img
                 class="comment-attachment-img"
                 src=${t}
                 alt=${e.filename}
-                @click=${() => $e.open(e.url)}
+                @click=${() => ke.open(e.url)}
               />
             </div>
           `;
       }
-      return e.type === "audio" ? d`
+      return e.type === "audio" ? h`
             <div class="comment-attachment-media" id="audio-${e.id}">
               ${this.renderAudioPlayer(e)}
             </div>
-          ` : e.type === "video" ? d`
+          ` : e.type === "video" ? h`
             <div class="comment-attachment-media" id="video-${e.id}">
               ${this.renderVideoPlayer(e)}
             </div>
-          ` : u;
+          ` : m;
     })}
     `;
   }
   renderAudioPlayer(s) {
     const e = document.createElement("div"), t = Oe.render(s.url, s.durationMs);
-    return e.appendChild(t), d`<div class="audio-player-host" data-url=${s.url} data-duration=${s.durationMs ?? ""}></div>`;
+    return e.appendChild(t), h`<div class="audio-player-host" data-url=${s.url} data-duration=${s.durationMs ?? ""}></div>`;
   }
   renderVideoPlayer(s) {
-    return d`<div class="video-player-host" data-url=${s.url} data-poster=${s.thumbnailUrl ?? ""}></div>`;
+    return h`<div class="video-player-host" data-url=${s.url} data-poster=${s.thumbnailUrl ?? ""}></div>`;
   }
   renderThread(s) {
     const e = this.highlightThreadId === s.id;
-    return d`
+    return h`
       <div
         class="thread ${s.resolved ? "resolved" : ""} ${e ? "highlighted" : ""}"
         data-thread-id=${s.id}
       >
-        ${s.position ? d`<div class="pin-badge">
-              ${C(Ct, 12)}
+        ${s.position ? h`<div class="pin-badge">
+              ${E(_t, 12)}
               Pinned
-            </div>` : u}
+            </div>` : m}
         ${s.comments.map((t, i) => {
       const n = this.getUserForComment(t.userId), o = this.isOwnComment(t), r = this.editingCommentId === t.id;
-      return d`
-            ${i > 0 ? d`<div class="comment-divider"></div>` : u}
+      return h`
+            ${i > 0 ? h`<div class="comment-divider"></div>` : m}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -4509,16 +4558,16 @@ let O = class extends S {
                 </div>
                 <span class="comment-author">${(n == null ? void 0 : n.name) ?? "Unknown"}</span>
                 <span class="comment-time">${this.formatTime(t.createdAt)}</span>
-                ${t.editedAt ? d`<span class="edited-badge">(edited)</span>` : u}
+                ${t.editedAt ? h`<span class="edited-badge">(edited)</span>` : m}
               </div>
-              ${r ? this.renderEditForm(t) : d`
+              ${r ? this.renderEditForm(t) : h`
                     <div class="comment-body">${this.parseMentions(t.body)}</div>
                     ${this.renderAttachments(t.attachments ?? [])}
                   `}
-              ${o && !r ? d`<div class="comment-actions">
-                    <button @click=${() => this.startEdit(t)} title="Edit">${C(Pi, 14)}</button>
-                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${C(Mi, 14)}</button>
-                  </div>` : u}
+              ${o && !r ? h`<div class="comment-actions">
+                    <button @click=${() => this.startEdit(t)} title="Edit">${E(Ai, 14)}</button>
+                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${E(Mi, 14)}</button>
+                  </div>` : m}
               ${this.renderReactions(t)}
             </div>
           `;
@@ -4539,42 +4588,55 @@ let O = class extends S {
 
         ${this.renderTypingIndicator(s.id)}
 
-        ${this.replyingTo === s.id ? d`
+        ${this.replyingTo === s.id ? h`
               <form
                 class="reply-form"
                 @submit=${(t) => this.handleReply(s.id, t)}
               >
-                <input
-                  type="text"
-                  placeholder="Reply..."
-                  @input=${() => this.handleTypingInput(s.id)}
-                />
-                <button
-                  type="button"
-                  class="pw-btn pw-btn-icon"
-                  title="Attach image"
-                  style="padding:4px;color:var(--pw-text-muted)"
-                  @click=${() => this.handleAttachImage(s.id)}
-                >${C(Ti, 14)}</button>
-                <button
-                  type="button"
-                  class="pw-btn pw-btn-icon"
-                  title="Record audio"
-                  style="padding:4px;color:var(--pw-text-muted)"
-                  @click=${() => this.handleRecordAudio(s.id)}
-                >${C(_i, 14)}</button>
-                <button class="pw-btn pw-btn-primary" type="submit">Send</button>
+                <div class="reply-input-row">
+                  <input
+                    type="text"
+                    placeholder="Reply..."
+                    @input=${() => this.handleTypingInput(s.id)}
+                  />
+                  <button class="pw-btn pw-btn-primary" type="submit">Send</button>
+                </div>
+                <div class="reply-media-row">
+                  <button
+                    type="button"
+                    class="reply-media-btn"
+                    title="Attach image"
+                    @click=${() => this.handleAttachImage()}
+                  >${E(Si, 16)}</button>
+                  <button
+                    type="button"
+                    class="reply-media-btn"
+                    title="Record audio"
+                    @click=${() => this.handleRecordAudio(s.id)}
+                  >${E(Ti, 16)}</button>
+                  <button
+                    type="button"
+                    class="reply-media-btn"
+                    title="Record video"
+                    @click=${() => this.handleRecordVideo(s.id)}
+                  >${E(Oi, 16)}</button>
+                  <div class="reply-preview">
+                    ${this.replyAttachmentIds.map(
+      (t, i) => h`<span class="reply-preview-badge">Attached #${i + 1}</span>`
+    )}
+                  </div>
+                </div>
               </form>
-            ` : u}
+            ` : m}
       </div>
     `;
   }
 };
 O.styles = [
   ee,
-  me,
+  ge,
   _e,
-  M`
+  I`
       :host {
         display: block;
       }
@@ -4749,23 +4811,29 @@ O.styles = [
 
       /* Reply form */
       .reply-form {
-        display: flex;
-        gap: 6px;
         margin-top: 8px;
         margin-left: 32px;
       }
 
+      .reply-input-row {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+      }
+
       .reply-form input {
         flex: 1;
-        padding: 6px 10px;
+        padding: 8px 12px;
         border: 1.5px solid var(--pw-border);
-        border-radius: 6px;
-        font-size: 12px;
+        border-radius: 8px;
+        font-size: 13px;
         font-family: inherit;
         outline: none;
         transition: border-color 0.15s, box-shadow 0.15s;
         color: var(--pw-text);
         background: var(--pw-surface);
+        min-height: 36px;
+        min-width: 0;
       }
 
       .reply-form input:focus {
@@ -4773,9 +4841,54 @@ O.styles = [
         box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
       }
 
-      .reply-form button {
-        padding: 6px 12px;
+      .reply-media-row {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        margin-top: 6px;
+      }
+
+      .reply-media-btn {
+        border: none;
+        background: none;
+        cursor: pointer;
+        color: var(--pw-text-muted);
+        padding: 6px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        min-height: 32px;
+        transition: all 0.15s;
+      }
+
+      .reply-media-btn:hover {
+        color: var(--pw-accent);
+        background: var(--pw-accent-light);
+      }
+
+      .reply-preview {
+        flex: 1;
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+        margin-left: 4px;
+      }
+
+      .reply-preview-badge {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 4px;
+        background: var(--pw-surface-hover);
+        font-size: 10px;
+        color: var(--pw-text-muted);
+      }
+
+      .reply-form .pw-btn-primary {
+        padding: 8px 14px;
         font-size: 12px;
+        min-height: 36px;
       }
 
       .pin-hint {
@@ -4818,8 +4931,17 @@ O.styles = [
           border-radius: 16px 16px 0 0;
         }
 
-        .reply-form input,
-        .reply-form button {
+        .reply-form input {
+          min-height: 44px;
+          font-size: 16px; /* prevents zoom on iOS */
+        }
+
+        .reply-form .pw-btn-primary {
+          min-height: 44px;
+        }
+
+        .reply-media-btn {
+          min-width: 44px;
           min-height: 44px;
         }
 
@@ -5041,7 +5163,7 @@ j([
 ], O.prototype, "highlightThreadId", 2);
 j([
   v()
-], O.prototype, "threads", 2);
+], O.prototype, "threadsVersion", 2);
 j([
   v()
 ], O.prototype, "replyingTo", 2);
@@ -5063,25 +5185,25 @@ j([
 O = j([
   R("pulse-widget-comments-panel")
 ], O);
-var ts = Object.defineProperty, is = Object.getOwnPropertyDescriptor, Fe = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? is(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var is = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, qe = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? ss(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ts(e, t, n), n;
+  return i && n && is(e, t, n), n;
 };
-const ss = {
+const ns = {
   "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"
-}, ns = {
+}, os = {
   "comment:created": "💬",
   "comment:mention": "📣",
   "comment:reply": "↩️",
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let ce = class extends S {
+let de = class extends S {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -5125,38 +5247,38 @@ let ce = class extends S {
   }
   render() {
     const s = this.notifications.filter((e) => !e.read).length;
-    return d`
+    return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">
             Notifications
-            ${s > 0 ? d`<span class="unread-badge">${s}</span>` : u}
+            ${s > 0 ? h`<span class="unread-badge">${s}</span>` : m}
           </span>
           <div style="display:flex;align-items:center;gap:4px;">
-            ${s > 0 ? d`<button class="mark-all" @click=${() => this.client.markAllRead()}>
+            ${s > 0 ? h`<button class="mark-all" @click=${() => this.client.markAllRead()}>
                   Mark all read
-                </button>` : u}
+                </button>` : m}
             <button class="close-btn" @click=${this.fireClose} title="Close">
-              ${C(fe, 16)}
+              ${E(me, 16)}
             </button>
           </div>
         </div>
 
         <div class="panel-body pw-scrollable">
-          ${this.notifications.length === 0 ? d`<div class="empty">
+          ${this.notifications.length === 0 ? h`<div class="empty">
                 <div class="empty-icon">&#128276;</div>
                 No notifications
               </div>` : this.notifications.map(
-      (e) => d`
+      (e) => h`
                   <div
                     class="item ${e.read ? "" : "unread"}"
                     @click=${() => this.handleClick(e)}
                   >
-                    <span class="icon">${ns[e.type] ?? "🔔"}</span>
+                    <span class="icon">${os[e.type] ?? "🔔"}</span>
                     <div class="content">
                       <div class="text">
                         <span class="actor">${this.getActorName(e.actorId)}</span>
-                        ${ss[e.type] ?? e.type}
+                        ${ns[e.type] ?? e.type}
                       </div>
                       <div class="time">${this.formatTime(e.createdAt)}</div>
                     </div>
@@ -5169,11 +5291,11 @@ let ce = class extends S {
     `;
   }
 };
-ce.styles = [
+de.styles = [
   ee,
-  me,
+  ge,
   _e,
-  M`
+  I`
       :host {
         display: block;
       }
@@ -5366,17 +5488,17 @@ ce.styles = [
       }
     `
 ];
-Fe([
+qe([
   g({ attribute: !1 })
-], ce.prototype, "client", 2);
-Fe([
+], de.prototype, "client", 2);
+qe([
   v()
-], ce.prototype, "notifications", 2);
-ce = Fe([
+], de.prototype, "notifications", 2);
+de = qe([
   R("pulse-widget-notifications-panel")
-], ce);
-const os = 3e3;
-class rs {
+], de);
+const rs = 3e3;
+class as {
   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({
@@ -5428,7 +5550,7 @@ class rs {
     ), this.setSending(!0), this.staleTimer = setInterval(() => {
       const e = Date.now();
       for (const [t, i] of this.cursorLastSeen)
-        if (e - i > os) {
+        if (e - i > rs) {
           this.cursors.delete(t);
           const n = this.cursorEls.get(t);
           n && n.remove(), this.cursorEls.delete(t), this.cursorLastSeen.delete(t);
@@ -5524,7 +5646,7 @@ class rs {
     i.style.transform = `translate(${t.position.x}px, ${t.position.y}px)`;
   }
 }
-class as {
+class ls {
   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 l, a, c;
@@ -5607,9 +5729,9 @@ class as {
     this.fadeTimers.set(e, t);
   }
 }
-function ls(s) {
+function cs(s) {
   if (!s.rangeCount || s.isCollapsed) return null;
-  const e = s.getRangeAt(0), t = e.startContainer, i = e.endContainer, n = ut(t), o = ut(i);
+  const e = s.getRangeAt(0), t = e.startContainer, i = e.endContainer, n = ft(t), o = ft(i);
   return !n || !o ? null : {
     startSelector: n,
     startOffset: e.startOffset,
@@ -5617,10 +5739,10 @@ function ls(s) {
     endOffset: e.endOffset
   };
 }
-function cs(s) {
+function ds(s) {
   var e, t;
   try {
-    const i = mt(s.startSelector), n = mt(s.endSelector);
+    const i = gt(s.startSelector), n = gt(s.endSelector);
     if (!i || !n) return null;
     const o = document.createRange(), r = i.nodeType === Node.TEXT_NODE ? ((e = i.textContent) == null ? void 0 : e.length) ?? 0 : i.childNodes.length, l = n.nodeType === Node.TEXT_NODE ? ((t = n.textContent) == null ? void 0 : t.length) ?? 0 : n.childNodes.length;
     return o.setStart(i, Math.min(s.startOffset, r)), o.setEnd(n, Math.min(s.endOffset, l)), o;
@@ -5628,18 +5750,18 @@ function cs(s) {
     return null;
   }
 }
-function ut(s) {
+function ft(s) {
   if (s.nodeType === Node.TEXT_NODE) {
     const e = s.parentElement;
     if (!e) return null;
-    const t = ft(e);
+    const t = mt(e);
     if (!t) return null;
     const i = Array.from(e.childNodes).indexOf(s);
     return `${t}::text(${i})`;
   }
-  return s.nodeType === Node.ELEMENT_NODE ? ft(s) : null;
+  return s.nodeType === Node.ELEMENT_NODE ? mt(s) : null;
 }
-function ft(s) {
+function mt(s) {
   if (!s || s === document.documentElement) return "html";
   if (s === document.body) return "body";
   if (s.id) return `#${CSS.escape(s.id)}`;
@@ -5665,7 +5787,7 @@ function ft(s) {
   }
   return e.length > 0 ? e.join(" > ") : null;
 }
-function mt(s) {
+function gt(s) {
   const e = s.match(/^(.+)::text\((\d+)\)$/);
   if (e) {
     const t = e[1], i = parseInt(e[2], 10);
@@ -5682,7 +5804,7 @@ function mt(s) {
     return null;
   }
 }
-class ds {
+class hs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.selectionEls = /* @__PURE__ */ new Map(), this.clearTimers = /* @__PURE__ */ new Map(), this.client = e;
   }
@@ -5726,26 +5848,26 @@ class ds {
     if (!this.container) return;
     const i = (l = this.client.state.user) == null ? void 0 : l.id;
     if (e === i || (this.clearSelection(e), !t)) return;
-    const n = cs(t);
+    const n = ds(t);
     if (!n) return;
     const o = this.client.state.presence.find(
       (a) => a.user.id === e
     ), r = (o == null ? void 0 : o.user.color) ?? "#6366f1";
     try {
       const a = n.getClientRects(), c = [];
-      for (let h = 0; h < a.length; h++) {
-        const p = a[h], m = document.createElement("div");
-        Object.assign(m.style, {
+      for (let p = 0; p < a.length; p++) {
+        const d = a[p], u = document.createElement("div");
+        Object.assign(u.style, {
           position: "absolute",
-          left: `${p.left}px`,
-          top: `${p.top}px`,
-          width: `${p.width}px`,
-          height: `${p.height}px`,
+          left: `${d.left}px`,
+          top: `${d.top}px`,
+          width: `${d.width}px`,
+          height: `${d.height}px`,
           background: r,
           opacity: "0.2",
           borderRadius: "2px",
           pointerEvents: "none"
-        }), this.container.appendChild(m), c.push(m);
+        }), this.container.appendChild(u), c.push(u);
       }
       this.selectionEls.set(e, c);
     } catch {
@@ -5765,12 +5887,12 @@ class ds {
     }
   }
 }
-var hs = Object.defineProperty, ps = Object.getOwnPropertyDescriptor, qe = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? ps(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var ps = Object.defineProperty, us = Object.getOwnPropertyDescriptor, Ve = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? us(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && hs(e, t, n), n;
+  return i && n && ps(e, t, n), n;
 };
-let de = class extends S {
+let he = class extends S {
   constructor() {
     super(...arguments), this.roomId = "";
   }
@@ -5790,7 +5912,7 @@ let de = class extends S {
     );
   }
   renderToggle(s, e) {
-    return d`
+    return h`
       <div class="setting-row">
         <span class="setting-label">${s}</span>
         <label class="toggle">
@@ -5806,12 +5928,12 @@ let de = class extends S {
   }
   render() {
     const s = !this.settings.enabled;
-    return d`
+    return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">Settings</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(fe, 16)}
+            ${E(me, 16)}
           </button>
         </div>
 
@@ -5856,11 +5978,11 @@ let de = class extends S {
     `;
   }
 };
-de.styles = [
+he.styles = [
   ee,
-  me,
+  ge,
   _e,
-  M`
+  I`
       :host {
         display: block;
       }
@@ -6031,16 +6153,16 @@ de.styles = [
       }
     `
 ];
-qe([
+Ve([
   g({ attribute: !1 })
-], de.prototype, "settings", 2);
-qe([
+], he.prototype, "settings", 2);
+Ve([
   g()
-], de.prototype, "roomId", 2);
-de = qe([
+], he.prototype, "roomId", 2);
+he = Ve([
   R("pulse-widget-settings-panel")
-], de);
-const xe = {
+], he);
+const ye = {
   enabled: !0,
   showMyCursor: !0,
   showOthersCursors: !0,
@@ -6051,24 +6173,24 @@ const xe = {
   showViewportIndicators: !0,
   showSelections: !0,
   showDrawings: !0
-}, Tt = "pulse:settings:";
-function us(s) {
+}, St = "pulse:settings:";
+function fs(s) {
   try {
-    const e = localStorage.getItem(`${Tt}${s}`);
-    return e ? { ...xe, ...JSON.parse(e) } : { ...xe };
+    const e = localStorage.getItem(`${St}${s}`);
+    return e ? { ...ye, ...JSON.parse(e) } : { ...ye };
   } catch {
-    return { ...xe };
+    return { ...ye };
   }
 }
-function fs(s, e) {
-  localStorage.setItem(`${Tt}${s}`, JSON.stringify(e));
+function ms(s, e) {
+  localStorage.setItem(`${St}${s}`, JSON.stringify(e));
 }
-var ms = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, L = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? gs(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var gs = Object.defineProperty, bs = Object.getOwnPropertyDescriptor, L = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? bs(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && ms(e, t, n), n;
+  return i && n && gs(e, t, n), n;
 };
-let I = class extends S {
+let M = class extends S {
   constructor() {
     super(...arguments), this.collapsed = !1, this.activePanel = null, this.pinModeActive = !1, this.featuresDisabled = !1, this.drawModeActive = !1, this.followingUserId = null, this.display = "floating", this.users = [], this.unreadCount = 0;
   }
@@ -6119,35 +6241,35 @@ let I = class extends S {
   render() {
     const s = this.display === "inline";
     if (this.collapsed)
-      return d`
+      return h`
         <div class="toolbar collapsed ${s ? "inline" : ""}" @click=${this.fireToggle}>
-          <span class="fab-icon">${C(Ii, s ? 18 : 24)}</span>
+          <span class="fab-icon">${E(Ri, s ? 18 : 24)}</span>
         </div>
       `;
     const e = this.users.slice(0, 3), t = this.users.length - 3;
-    return d`
+    return h`
       <div class="toolbar ${s ? "inline" : ""}"
         <!-- Presence avatars -->
-        ${this.users.length > 0 ? d`
+        ${this.users.length > 0 ? h`
               <div class="presence">
-                ${t > 0 ? d`<div class="presence-overflow">+${t}</div>` : u}
+                ${t > 0 ? h`<div class="presence-overflow">+${t}</div>` : m}
                 ${e.map(
-      (i) => d`
+      (i) => h`
                     <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 ? d`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
+                      ${i.user.avatar ? h`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
                       <span class="presence-tooltip">${i.user.name}</span>
-                      ${i.deviceType && i.deviceType !== "desktop" ? d`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : u}
+                      ${i.deviceType && i.deviceType !== "desktop" ? h`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : m}
                     </div>
                   `
     )}
               </div>
               <div class="separator"></div>
-            ` : u}
+            ` : m}
 
         <!-- Pin comment (primary) -->
         <button
@@ -6157,7 +6279,7 @@ let I = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Ct)}
+          ${E(_t)}
         </button>
 
         <!-- View comments -->
@@ -6168,7 +6290,7 @@ let I = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Ci)}
+          ${E(_i)}
         </button>
 
         <!-- Activity feed -->
@@ -6179,7 +6301,7 @@ let I = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Ei)}
+          ${E(Ci)}
         </button>
 
         <!-- Draw mode -->
@@ -6190,7 +6312,7 @@ let I = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Si)}
+          ${E(Pi)}
         </button>
 
         <!-- Notifications -->
@@ -6201,8 +6323,8 @@ let I = class extends S {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : "position:relative"}"
         >
-          ${C(ki)}
-          ${this.unreadCount > 0 ? d`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : u}
+          ${E(Ei)}
+          ${this.unreadCount > 0 ? h`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : m}
         </button>
 
         <!-- Settings -->
@@ -6211,7 +6333,7 @@ let I = class extends S {
           @click=${() => this.fire("settings")}
           title="Settings"
         >
-          ${C(Ai)}
+          ${E(Ii)}
         </button>
 
         <div class="separator"></div>
@@ -6222,16 +6344,16 @@ let I = class extends S {
           @click=${this.fireToggle}
           title="Collapse"
         >
-          ${C(fe, 14)}
+          ${E(me, 14)}
         </button>
       </div>
     `;
   }
 };
-I.styles = [
+M.styles = [
   ee,
-  me,
-  M`
+  ge,
+  I`
       :host {
         display: block;
       }
@@ -6445,38 +6567,38 @@ I.styles = [
 ];
 L([
   g({ attribute: !1 })
-], I.prototype, "client", 2);
+], M.prototype, "client", 2);
 L([
   g({ type: Boolean })
-], I.prototype, "collapsed", 2);
+], M.prototype, "collapsed", 2);
 L([
   g()
-], I.prototype, "activePanel", 2);
+], M.prototype, "activePanel", 2);
 L([
   g({ type: Boolean })
-], I.prototype, "pinModeActive", 2);
+], M.prototype, "pinModeActive", 2);
 L([
   g({ type: Boolean })
-], I.prototype, "featuresDisabled", 2);
+], M.prototype, "featuresDisabled", 2);
 L([
   g({ type: Boolean })
-], I.prototype, "drawModeActive", 2);
+], M.prototype, "drawModeActive", 2);
 L([
   g()
-], I.prototype, "followingUserId", 2);
+], M.prototype, "followingUserId", 2);
 L([
   g()
-], I.prototype, "display", 2);
+], M.prototype, "display", 2);
 L([
   v()
-], I.prototype, "users", 2);
+], M.prototype, "users", 2);
 L([
   v()
-], I.prototype, "unreadCount", 2);
-I = L([
+], M.prototype, "unreadCount", 2);
+M = L([
   R("pulse-widget-toolbar")
-], I);
-class bs {
+], M);
+class vs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.pillEls = /* @__PURE__ */ new Map(), this.client = e;
   }
@@ -6517,8 +6639,8 @@ class bs {
     const e = window.scrollY, t = window.innerHeight, i = document.documentElement.scrollHeight, n = (r = this.client.state.user) == null ? void 0 : r.id, o = /* @__PURE__ */ new Set();
     for (const [l, a] of this.client.state.viewports) {
       if (l === n) continue;
-      const c = a.scrollY, h = a.scrollY + a.viewportHeight, p = e, m = e + t;
-      if (c >= p && h <= m) {
+      const c = a.scrollY, p = a.scrollY + a.viewportHeight, d = e, u = e + t;
+      if (c >= d && p <= u) {
         const k = this.pillEls.get(l);
         k && (k.style.display = "none");
         continue;
@@ -6554,14 +6676,14 @@ class bs {
     return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
   }
 }
-var vs = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, P = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? xs(e, t) : e, o = s.length - 1, r; o >= 0; o--)
+var xs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, P = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? ys(e, t) : e, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (n = (i ? r(e, t, n) : r(n)) || n);
-  return i && n && vs(e, t, n), n;
+  return i && n && xs(e, t, n), n;
 };
-let E = class extends S {
+let C = class extends S {
   constructor() {
-    super(...arguments), this.apiKey = "", this.token = "", this.room = "", this.position = "bottom-right", this.display = "floating", this.collapsed = !0, this.activePanel = null, this.pinModeActive = !1, this.highlightThreadId = null, this.settings = { ...xe }, 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 = { ...ye }, this.followingUserId = null, this.drawModeActive = !1, this.connectionState = "disconnected", this.showConnectedFlash = !1, this.unsubs = [], this.clientConfigKey = "", this._isFollowScrolling = !1, this._viewportThrottleTimer = null, this._selectionThrottleTimer = null, this._connectedFlashTimer = null, this._wasDisconnected = !1, this.handleScroll = () => {
       !this.settings.enabled || !this.client || this._isFollowScrolling || (this.followingUserId && (this.followingUserId = null), !this._viewportThrottleTimer && (this._viewportThrottleTimer = setTimeout(() => {
         var s;
         this._viewportThrottleTimer = null, (s = this.client) == null || s.updateViewport({
@@ -6582,7 +6704,7 @@ let E = class extends S {
           (t = this.client) == null || t.updateSelection(null);
           return;
         }
-        const e = ls(s);
+        const e = cs(s);
         (i = this.client) == null || i.updateSelection(e);
       }, 500));
     }, this.handleDocumentClick = (s) => {
@@ -6614,11 +6736,11 @@ let E = class extends S {
       room: this.room,
       endpoint: this.endpoint
     };
-    this.client = new vt(s), this.clientConfigKey = this.getConfigKey(), this.cursorOverlay = new rs(this.client), this.commentPins = new Ji(this.client, {
+    this.client = new xt(s), this.clientConfigKey = this.getConfigKey(), this.cursorOverlay = new as(this.client), this.commentPins = new Ji(this.client, {
       onPinModeExit: () => {
         this.pinModeActive = !1;
       }
-    }), this.viewportOverlay = new bs(this.client), this.selectionOverlay = new ds(this.client), this.drawingOverlay = new as(this.client), this.settings = us(this.room), this.applySettings(this.settings), this.unsubs.push(
+    }), this.viewportOverlay = new vs(this.client), this.selectionOverlay = new hs(this.client), this.drawingOverlay = new ls(this.client), this.settings = fs(this.room), this.applySettings(this.settings), this.unsubs.push(
       this.client.on("connection", (e) => {
         this.connectionState = e, e === "connected" && this._wasDisconnected ? (this.showConnectedFlash = !0, this._connectedFlashTimer && clearTimeout(this._connectedFlashTimer), this._connectedFlashTimer = setTimeout(() => {
           this.showConnectedFlash = !1, this._connectedFlashTimer = null;
@@ -6685,15 +6807,15 @@ let E = class extends S {
   }
   handleSettingsChange(s) {
     const e = s.detail;
-    this.settings = e, fs(this.room, e), this.applySettings(e);
+    this.settings = e, ms(this.room, e), this.applySettings(e);
   }
   applySettings(s) {
-    var e, t, i, n, o, r, l, a, c, h, p, m, f, b, x, _, $;
+    var e, t, i, n, o, r, l, a, c, p, d, u, f, b, x, _, $;
     if (!s.enabled) {
       (e = this.cursorOverlay) == null || e.disable(), (t = this.viewportOverlay) == null || t.disable(), (i = this.selectionOverlay) == null || i.disable(), (n = this.drawingOverlay) == null || n.disable(), this.drawModeActive && ((o = this.drawingOverlay) == null || o.disableDrawMode(), this.drawModeActive = !1), (r = this.client) == null || r.setAppearOffline(!0), (l = this.commentPins) == null || l.setVisible(!1), this.followingUserId = null, this.pinModeActive && ((a = this.commentPins) == null || a.exitPinMode(), this.pinModeActive = !1), this.activePanel = this.activePanel === "settings" ? "settings" : null, this.highlightThreadId = null;
       return;
     }
-    this.applyCursorSettings(s), (c = this.client) == null || c.setAppearOffline(s.appearOffline), (h = this.commentPins) == null || h.setVisible(s.showCommentPins), s.showViewportIndicators ? (p = this.viewportOverlay) == null || p.enable() : (m = this.viewportOverlay) == null || m.disable(), s.showSelections ? (f = this.selectionOverlay) == null || f.enable() : (b = this.selectionOverlay) == null || b.disable(), s.showDrawings ? (x = this.drawingOverlay) == null || x.enable() : ((_ = this.drawingOverlay) == null || _.disable(), this.drawModeActive && (($ = this.drawingOverlay) == null || $.disableDrawMode(), this.drawModeActive = !1));
+    this.applyCursorSettings(s), (c = this.client) == null || c.setAppearOffline(s.appearOffline), (p = this.commentPins) == null || p.setVisible(s.showCommentPins), s.showViewportIndicators ? (d = this.viewportOverlay) == null || d.enable() : (u = this.viewportOverlay) == null || u.disable(), s.showSelections ? (f = this.selectionOverlay) == null || f.enable() : (b = this.selectionOverlay) == null || b.disable(), s.showDrawings ? (x = this.drawingOverlay) == null || x.enable() : ((_ = this.drawingOverlay) == null || _.disable(), this.drawModeActive && (($ = this.drawingOverlay) == null || $.disableDrawMode(), this.drawModeActive = !1));
   }
   applyCursorSettings(s) {
     if (!this.cursorOverlay) return;
@@ -6719,9 +6841,9 @@ let E = class extends S {
     const c = ($ = this.shadowRoot) == null ? void 0 : $.querySelector(".panel-container");
     if (!c) return;
     Object.assign(c.style, { top: "auto", left: "auto" });
-    const h = a ?? t;
-    if (!h) return;
-    const p = h.getBoundingClientRect(), m = c.getBoundingClientRect(), f = this.computePosition(p, m, o, r, l);
+    const p = a ?? t;
+    if (!p) return;
+    const d = p.getBoundingClientRect(), u = c.getBoundingClientRect(), f = this.computePosition(d, u, o, r, l);
     c.style.top = `${f.top}px`, c.style.left = `${f.left}px`;
   }
   computePosition(s, e, t, i, n) {
@@ -6741,13 +6863,13 @@ let E = class extends S {
     return (s == null ? void 0 : s.user.name) ?? "user";
   }
   renderConnectionBanner() {
-    return this.showConnectedFlash ? d`<div class="connection-banner connected">
+    return this.showConnectedFlash ? h`<div class="connection-banner connected">
         <span class="connection-dot"></span>Connected
-      </div>` : this.connectionState === "connecting" ? d`<div class="connection-banner connecting">
+      </div>` : this.connectionState === "connecting" ? h`<div class="connection-banner connecting">
         <span class="connection-dot"></span>Reconnecting...
-      </div>` : this.connectionState === "disconnected" && this.client ? d`<div class="connection-banner disconnected">
+      </div>` : this.connectionState === "disconnected" && this.client ? h`<div class="connection-banner disconnected">
         <span class="connection-dot"></span>Disconnected
-      </div>` : u;
+      </div>` : m;
   }
   handleToolbarToggle() {
     this.collapsed = !this.collapsed, this.collapsed && (this.activePanel = null, this.highlightThreadId = null);
@@ -6755,38 +6877,38 @@ let E = class extends S {
   render() {
     const s = this.display === "inline";
     if (s && this.collapsed)
-      return d`
+      return h`
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
             <slot>Collaborate</slot>
           </div>
         </div>
       `;
-    const e = this.activePanel ? d`
+    const e = this.activePanel ? h`
           <div class="panel-container anchored" @panel-close=${this.handlePanelClose}>
-            ${this.activePanel === "comments" ? d`<pulse-widget-comments-panel
+            ${this.activePanel === "comments" ? h`<pulse-widget-comments-panel
                   .client=${this.client}
                   .highlightThreadId=${this.highlightThreadId}
-                ></pulse-widget-comments-panel>` : u}
-            ${this.activePanel === "settings" ? d`<pulse-widget-settings-panel
+                ></pulse-widget-comments-panel>` : m}
+            ${this.activePanel === "settings" ? h`<pulse-widget-settings-panel
                   .settings=${this.settings}
                   .roomId=${this.room}
                   @settings-change=${this.handleSettingsChange}
-                ></pulse-widget-settings-panel>` : u}
-            ${this.activePanel === "notifications" ? d`<pulse-widget-notifications-panel
+                ></pulse-widget-settings-panel>` : m}
+            ${this.activePanel === "notifications" ? h`<pulse-widget-notifications-panel
                   .client=${this.client}
-                ></pulse-widget-notifications-panel>` : u}
-            ${this.activePanel === "activity" ? d`<pulse-widget-activity-panel
+                ></pulse-widget-notifications-panel>` : m}
+            ${this.activePanel === "activity" ? h`<pulse-widget-activity-panel
                   .client=${this.client}
-                ></pulse-widget-activity-panel>` : u}
+                ></pulse-widget-activity-panel>` : m}
           </div>
-        ` : u, t = this.followingUserId ? d`<div class="follow-banner">
+        ` : m, t = this.followingUserId ? h`<div class="follow-banner">
           Following ${this.getFollowUserName()}
           <button @click=${() => {
       this.followingUserId = null;
     }}>Stop</button>
-        </div>` : u;
-    return s ? d`
+        </div>` : m;
+    return s ? h`
         ${t}
         <div class="widget-root">
           <div class="inline-trigger" @click=${this.handleToolbarToggle}>
@@ -6810,7 +6932,7 @@ let E = class extends S {
           </div>
           ${e}
         </div>
-      ` : d`
+      ` : h`
       ${t}
       <div class="widget-root">
         ${e}
@@ -6832,9 +6954,9 @@ let E = class extends S {
     `;
   }
 };
-E.styles = [
+C.styles = [
   ee,
-  M`
+  I`
       :host {
         display: block;
       }
@@ -7012,58 +7134,58 @@ E.styles = [
 ];
 P([
   g({ attribute: "api-key" })
-], E.prototype, "apiKey", 2);
+], C.prototype, "apiKey", 2);
 P([
   g()
-], E.prototype, "token", 2);
+], C.prototype, "token", 2);
 P([
   g()
-], E.prototype, "room", 2);
+], C.prototype, "room", 2);
 P([
   g()
-], E.prototype, "endpoint", 2);
+], C.prototype, "endpoint", 2);
 P([
   g({ reflect: !0 })
-], E.prototype, "position", 2);
+], C.prototype, "position", 2);
 P([
   g({ reflect: !0 })
-], E.prototype, "display", 2);
+], C.prototype, "display", 2);
 P([
   v()
-], E.prototype, "collapsed", 2);
+], C.prototype, "collapsed", 2);
 P([
   v()
-], E.prototype, "activePanel", 2);
+], C.prototype, "activePanel", 2);
 P([
   v()
-], E.prototype, "pinModeActive", 2);
+], C.prototype, "pinModeActive", 2);
 P([
   v()
-], E.prototype, "highlightThreadId", 2);
+], C.prototype, "highlightThreadId", 2);
 P([
   v()
-], E.prototype, "settings", 2);
+], C.prototype, "settings", 2);
 P([
   v()
-], E.prototype, "followingUserId", 2);
+], C.prototype, "followingUserId", 2);
 P([
   v()
-], E.prototype, "drawModeActive", 2);
+], C.prototype, "drawModeActive", 2);
 P([
   v()
-], E.prototype, "connectionState", 2);
+], C.prototype, "connectionState", 2);
 P([
   v()
-], E.prototype, "showConnectedFlash", 2);
-E = P([
+], C.prototype, "showConnectedFlash", 2);
+C = P([
   R("pulse-widget")
-], E);
+], C);
 export {
-  V as PulseComments,
-  ae as PulseCursors,
-  le as PulseNotifications,
+  W as PulseComments,
+  le as PulseCursors,
+  ce as PulseNotifications,
   G as PulsePresence,
-  W as PulseProvider,
+  V as PulseProvider,
   D as PulseReactions,
-  E as PulseWidget
+  C as PulseWidget
 };