@gamention/pulse-elements 0.1.9 → 0.1.10

package/dist/pulse-elements.cjs

@@ -1363,7 +1363,7 @@
       </div>
     `;const o=t.querySelector("input"),r=t.querySelector(".reply-send"),l=t.querySelector(".reply-attachments-preview");this.upload||(this.upload=new Q(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 _e);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 Te);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 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=""};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(){var e;(e=this.pickerEl)==null||e.remove(),this.pickerEl=null}showPickerForButton(e,t){this.removePickerEl();const i=e.getBoundingClientRect();this.pickerEl=document.createElement("div"),Object.assign(this.pickerEl.style,{position:"fixed",left:`${i.left}px`,top:`${i.top-4}px`,transform:"translateY(-100%)",display:"flex",gap:"2px",padding:"4px 6px",background:"#fff",border:"1px solid #e2e8f0",borderRadius:"8px",boxShadow:"0 4px 24px rgba(0,0,0,0.12)",zIndex:"10002",fontFamily:de});for(const s of Bi){const o=document.createElement("button");Object.assign(o.style,{border:"none",background:"none",cursor:"pointer",fontSize:"16px",padding:"4px",borderRadius:"4px",lineHeight:"1"}),o.textContent=s,o.addEventListener("click",r=>{r.stopPropagation();const a=this.client.state.getReactions(t).find(c=>{var p;return c.emoji===s&&c.userId===((p=this.client.state.user)==null?void 0:p.id)});a?this.client.removeReaction(a.id):this.client.addReaction(t,"comment",s),this.popoverPickerOpen=null,this.removePickerEl()}),this.pickerEl.appendChild(o)}document.body.appendChild(this.pickerEl)}buildReactionPillsHtml(e){var a;const t=this.client.state.getReactions(e),i=(a=this.client.state.user)==null?void 0:a.id,s=new Map;for(const c of t){const p=s.get(c.emoji)??{count:0,ownId:null};p.count++,c.userId===i&&(p.ownId=c.id),s.set(c.emoji,p)}const o="display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:12px;cursor:pointer;transition:all 0.15s;line-height:1.4;",r=o+"background:#eef2ff;border-color:#6366f1;";let l='<div style="margin-left:29px;display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">';for(const[c,{count:p,ownId:d}]of s){const u=d?r:o;l+=`<button data-reaction-emoji="${c}" data-reaction-target="${e}" ${d?`data-reaction-id="${d}"`:""} style="${u}">
         <span>${c}</span><span style="font-size:11px;font-weight:600;color:#64748b;">${p}</span>
-      </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}updatePopoverTyping(e){if(!this.popover)return;let t=this.popover.querySelector(".popover-typing");if(!t){t=document.createElement("div"),t.className="popover-typing",Object.assign(t.style,{padding:"0 14px 4px",fontSize:"11px",color:"#94a3b8",fontStyle:"italic",minHeight:"16px"});const s=this.popover.lastElementChild;s&&this.popover.insertBefore(t,s)}const i=this.client.state.getTypingUsers(e).filter(s=>{var o;return s!==((o=this.client.state.user)==null?void 0:o.id)}).map(s=>{const o=this.client.state.presence.find(r=>r.user.id===s);return(o==null?void 0:o.user.name)??"Someone"});i.length===0?t.textContent="":i.length===1?t.textContent=`${i[0]} is typing...`:t.textContent=`${i.join(", ")} are typing...`}formatTime(e){const t=new Date(e),s=new Date().getTime()-t.getTime(),o=Math.floor(s/6e4);if(o<1)return"now";if(o<60)return`${o}m`;const r=Math.floor(o/60);return r<24?`${r}h`:t.toLocaleDateString()}resolvePosition(e){if(e.selector&&e.elementOffsetX!=null&&e.elementOffsetY!=null)try{const t=document.querySelector(e.selector);if(t){const i=t.getBoundingClientRect();return{x:i.left+e.elementOffsetX*i.width,y:i.top+e.elementOffsetY*i.height}}}catch{}return{x:e.x*window.innerWidth,y:e.y*window.innerHeight}}renderPins(){if(!this.container)return;const e=this.threads.filter(i=>i.position&&!i.resolved),t=new Set(e.map(i=>i.id));for(const[i,s]of this.pinEls)t.has(i)||(s.remove(),this.pinEls.delete(i));e.forEach((i,s)=>{const o=i.position;let r=this.pinEls.get(i.id);r||(r=document.createElement("div"),Object.assign(r.style,{position:"fixed",width:"24px",height:"24px",borderRadius:"50%",background:"#6366f1",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"11px",fontWeight:"700",fontFamily:de,cursor:"pointer",pointerEvents:"auto",boxShadow:"0 2px 8px rgba(99,102,241,0.4)",border:"2px solid #fff",transition:"left 0.15s ease, top 0.15s ease, transform 0.15s ease",zIndex:"9997",transform:"translate(-50%, -50%)"}),r.addEventListener("mouseenter",()=>{r.style.transform="translate(-50%, -50%) scale(1.15)"}),r.addEventListener("mouseleave",()=>{r.style.transform="translate(-50%, -50%)"}),r.addEventListener("click",()=>{if(this.popover&&this.popover.dataset.threadId===i.id){this.closePopover();return}const a=this.threads.find(c=>c.id===i.id);a&&this.showThreadPopover(a,r)}),this.container.appendChild(r),this.pinEls.set(i.id,r)),r.textContent=`${s+1}`;const l=this.resolvePosition(o);r.style.left=`${l.x}px`,r.style.top=`${l.y}px`})}}var Vi=Object.defineProperty,Xi=Object.getOwnPropertyDescriptor,L=(n,e,t,i)=>{for(var s=i>1?void 0:i?Xi(e,t):e,o=n.length-1,r;o>=0;o--)(r=n[o])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&Vi(e,t,s),s};const Yi=["👍","👎","❤️","🎉","👀","🚀"];let M=class extends _{constructor(){super(...arguments),this.highlightThreadId=null,this.threads=[],this.replyingTo=null,this.editingCommentId=null,this.editBody="",this.pickerOpenForComment=null,this.typingByThread=new Map,this.reactionsVersion=0,this.typingTimers=new Map,this.lastTypingSend=new Map,this.replyAttachmentIds=[]}connectedCallback(){super.connectedCallback(),this.ensureListener()}disconnectedCallback(){super.disconnectedCallback(),this.teardownListeners()}willUpdate(n){this.client&&!this.unsub&&this.ensureListener()}updated(n){var e,t;(e=this.shadowRoot)==null||e.querySelectorAll(".audio-player-host").forEach(i=>{if(i.children.length>0)return;const s=i.dataset.url;if(s){const o=i.dataset.duration?parseInt(i.dataset.duration):void 0;i.appendChild(Pe.render(s,o))}}),(t=this.shadowRoot)==null||t.querySelectorAll(".video-player-host").forEach(i=>{if(i.children.length>0)return;const s=i.dataset.url;s&&i.appendChild(yt.render(s,i.dataset.poster||void 0))})}teardownListeners(){var n,e,t;(n=this.unsub)==null||n.call(this),this.unsub=void 0,(e=this.reactionUnsub)==null||e.call(this),this.reactionUnsub=void 0,(t=this.typingUnsub)==null||t.call(this),this.typingUnsub=void 0;for(const i of this.typingTimers.values())clearTimeout(i);this.typingTimers.clear()}ensureListener(){this.client&&(this.teardownListeners(),this.threads=[...this.client.state.threads],this.setupListener())}setupListener(){this.client&&(this.threads=this.client.state.threads,this.unsub=this.client.state.on("threads",n=>{this.threads=[...n]}),this.reactionUnsub=this.client.state.on("reactions",()=>{this.reactionsVersion++}),this.typingUnsub=this.client.state.on("typing",({threadId:n})=>{this.refreshTyping(n)}))}refreshTyping(n){const t=this.client.state.getTypingUsers(n).filter(s=>{var o;return s!==((o=this.client.state.user)==null?void 0:o.id)}).map(s=>{const o=this.client.state.presence.find(r=>r.user.id===s);return(o==null?void 0:o.user.name)??"Someone"}),i=new Map(this.typingByThread);i.set(n,t),this.typingByThread=i,this.typingTimers.has(n)&&clearTimeout(this.typingTimers.get(n)),this.typingTimers.set(n,setTimeout(()=>{this.refreshTyping(n)},3500))}handleTypingInput(n){const e=Date.now(),t=this.lastTypingSend.get(n)??0;e-t>=2e3&&(this.client.sendTyping(n),this.lastTypingSend.set(n,e))}toggleReaction(n,e){var o;const t=this.client.state.getReactions(n),i=(o=this.client.state.user)==null?void 0:o.id,s=t.find(r=>r.emoji===e&&r.userId===i);s?this.client.removeReaction(s.id):this.client.addReaction(n,"comment",e),this.pickerOpenForComment=null}fireClose(){this.dispatchEvent(new CustomEvent("panel-close",{bubbles:!0,composed:!0}))}scrollToThread(n){this.updateComplete.then(()=>{var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(`[data-thread-id="${n}"]`);e==null||e.scrollIntoView({behavior:"smooth",block:"center"})})}parseMentions(n){return n.split(/(@\w+)/g).map(t=>t.startsWith("@")?h`<span class="mention">${t}</span>`:t)}getInitials(n){return n.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}getUserForComment(n){return this.client.state.getUser(n)}formatTime(n){const e=new Date(n),i=new Date().getTime()-e.getTime(),s=Math.floor(i/6e4);if(s<1)return"now";if(s<60)return`${s}m`;const o=Math.floor(s/60);return o<24?`${o}h`:e.toLocaleDateString()}async handleAttachImage(){this.upload||(this.upload=new Q(this.client));const n=await this.upload.pickFile("image/*");n&&(this.replyAttachmentIds.push(n.id),this.requestUpdate())}async handleRecordAudio(n){var i;this.upload||(this.upload=new Q(this.client)),this.audioRecorder||(this.audioRecorder=new _e);const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`[data-thread-id="${n}"]`),t=await this.audioRecorder.startRecording(e??document.body);if(t){const s=await this.upload.uploadBlob(t,"audio.webm");s&&(this.replyAttachmentIds.push(s.id),this.requestUpdate())}}async handleRecordVideo(n){var i;this.upload||(this.upload=new Q(this.client)),this.videoRecorder||(this.videoRecorder=new Te);const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`[data-thread-id="${n}"]`),t=await this.videoRecorder.startRecording(e??document.body);if(t){const s=await this.upload.uploadBlob(t.blob,"video.webm");s&&(this.replyAttachmentIds.push(s.id),this.requestUpdate())}}handleReply(n,e){e.preventDefault();const i=e.target.querySelector("input"),s=i.value.trim();if(!s&&this.replyAttachmentIds.length===0)return;const o=[...(s||"").matchAll(/@(\w+)/g)].map(r=>r[1]);this.client.reply(n,s||"(attachment)",o,this.replyAttachmentIds.length>0?[...this.replyAttachmentIds]:void 0),i.value="",this.replyAttachmentIds=[],this.replyingTo=null}isOwnComment(n){var e,t;return((t=(e=this.client)==null?void 0:e.state.user)==null?void 0:t.id)===n.userId}startEdit(n){this.editingCommentId=n.id,this.editBody=n.body}cancelEdit(){this.editingCommentId=null,this.editBody=""}saveEdit(n){const e=this.editBody.trim();if(!e)return;const t=[...e.matchAll(/@(\w+)/g)].map(i=>i[1]);this.client.editComment(n,e,t),this.editingCommentId=null,this.editBody=""}deleteComment(n){this.client.deleteComment(n)}renderEditForm(n){return h`
+      </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}updatePopoverTyping(e){if(!this.popover)return;let t=this.popover.querySelector(".popover-typing");if(!t){t=document.createElement("div"),t.className="popover-typing",Object.assign(t.style,{padding:"0 14px 4px",fontSize:"11px",color:"#94a3b8",fontStyle:"italic",minHeight:"16px"});const s=this.popover.lastElementChild;s&&this.popover.insertBefore(t,s)}const i=this.client.state.getTypingUsers(e).filter(s=>{var o;return s!==((o=this.client.state.user)==null?void 0:o.id)}).map(s=>{const o=this.client.state.presence.find(r=>r.user.id===s);return(o==null?void 0:o.user.name)??"Someone"});i.length===0?t.textContent="":i.length===1?t.textContent=`${i[0]} is typing...`:t.textContent=`${i.join(", ")} are typing...`}formatTime(e){const t=new Date(e),s=new Date().getTime()-t.getTime(),o=Math.floor(s/6e4);if(o<1)return"now";if(o<60)return`${o}m`;const r=Math.floor(o/60);return r<24?`${r}h`:t.toLocaleDateString()}resolvePosition(e){if(e.selector&&e.elementOffsetX!=null&&e.elementOffsetY!=null)try{const t=document.querySelector(e.selector);if(t){const i=t.getBoundingClientRect();return{x:i.left+e.elementOffsetX*i.width,y:i.top+e.elementOffsetY*i.height}}}catch{}return{x:e.x*window.innerWidth,y:e.y*window.innerHeight}}renderPins(){if(!this.container)return;const e=this.threads.filter(i=>i.position&&!i.resolved),t=new Set(e.map(i=>i.id));for(const[i,s]of this.pinEls)t.has(i)||(s.remove(),this.pinEls.delete(i));e.forEach((i,s)=>{const o=i.position;let r=this.pinEls.get(i.id);r||(r=document.createElement("div"),Object.assign(r.style,{position:"fixed",width:"24px",height:"24px",borderRadius:"50%",background:"#6366f1",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"11px",fontWeight:"700",fontFamily:de,cursor:"pointer",pointerEvents:"auto",boxShadow:"0 2px 8px rgba(99,102,241,0.4)",border:"2px solid #fff",transition:"left 0.15s ease, top 0.15s ease, transform 0.15s ease",zIndex:"9997",transform:"translate(-50%, -50%)"}),r.addEventListener("mouseenter",()=>{r.style.transform="translate(-50%, -50%) scale(1.15)"}),r.addEventListener("mouseleave",()=>{r.style.transform="translate(-50%, -50%)"}),r.addEventListener("click",()=>{if(this.popover&&this.popover.dataset.threadId===i.id){this.closePopover();return}const a=this.threads.find(c=>c.id===i.id);a&&this.showThreadPopover(a,r)}),this.container.appendChild(r),this.pinEls.set(i.id,r)),r.textContent=`${s+1}`;const l=this.resolvePosition(o);r.style.left=`${l.x}px`,r.style.top=`${l.y}px`})}}var Vi=Object.defineProperty,Xi=Object.getOwnPropertyDescriptor,L=(n,e,t,i)=>{for(var s=i>1?void 0:i?Xi(e,t):e,o=n.length-1,r;o>=0;o--)(r=n[o])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&Vi(e,t,s),s};const Yi=["👍","👎","❤️","🎉","👀","🚀"];let M=class extends _{constructor(){super(...arguments),this.highlightThreadId=null,this.threadsVersion=0,this.replyingTo=null,this.editingCommentId=null,this.editBody="",this.pickerOpenForComment=null,this.typingByThread=new Map,this.reactionsVersion=0,this.typingTimers=new Map,this.lastTypingSend=new Map,this.replyAttachmentIds=[]}get threads(){return this.threadsVersion,this.client?[...this.client.state.threads]:[]}connectedCallback(){super.connectedCallback(),this.ensureListener()}disconnectedCallback(){super.disconnectedCallback(),this.teardownListeners()}willUpdate(n){this.client&&!this.unsub&&this.ensureListener()}updated(n){var e,t;(e=this.shadowRoot)==null||e.querySelectorAll(".audio-player-host").forEach(i=>{if(i.children.length>0)return;const s=i.dataset.url;if(s){const o=i.dataset.duration?parseInt(i.dataset.duration):void 0;i.appendChild(Pe.render(s,o))}}),(t=this.shadowRoot)==null||t.querySelectorAll(".video-player-host").forEach(i=>{if(i.children.length>0)return;const s=i.dataset.url;s&&i.appendChild(yt.render(s,i.dataset.poster||void 0))})}teardownListeners(){var n,e,t;(n=this.unsub)==null||n.call(this),this.unsub=void 0,(e=this.reactionUnsub)==null||e.call(this),this.reactionUnsub=void 0,(t=this.typingUnsub)==null||t.call(this),this.typingUnsub=void 0;for(const i of this.typingTimers.values())clearTimeout(i);this.typingTimers.clear()}ensureListener(){this.client&&(this.teardownListeners(),this.threadsVersion++,this.setupListener())}setupListener(){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("typing",({threadId:n})=>{this.refreshTyping(n)}))}refreshTyping(n){const t=this.client.state.getTypingUsers(n).filter(s=>{var o;return s!==((o=this.client.state.user)==null?void 0:o.id)}).map(s=>{const o=this.client.state.presence.find(r=>r.user.id===s);return(o==null?void 0:o.user.name)??"Someone"}),i=new Map(this.typingByThread);i.set(n,t),this.typingByThread=i,this.typingTimers.has(n)&&clearTimeout(this.typingTimers.get(n)),this.typingTimers.set(n,setTimeout(()=>{this.refreshTyping(n)},3500))}handleTypingInput(n){const e=Date.now(),t=this.lastTypingSend.get(n)??0;e-t>=2e3&&(this.client.sendTyping(n),this.lastTypingSend.set(n,e))}toggleReaction(n,e){var o;const t=this.client.state.getReactions(n),i=(o=this.client.state.user)==null?void 0:o.id,s=t.find(r=>r.emoji===e&&r.userId===i);s?this.client.removeReaction(s.id):this.client.addReaction(n,"comment",e),this.pickerOpenForComment=null}fireClose(){this.dispatchEvent(new CustomEvent("panel-close",{bubbles:!0,composed:!0}))}scrollToThread(n){this.updateComplete.then(()=>{var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(`[data-thread-id="${n}"]`);e==null||e.scrollIntoView({behavior:"smooth",block:"center"})})}parseMentions(n){return n.split(/(@\w+)/g).map(t=>t.startsWith("@")?h`<span class="mention">${t}</span>`:t)}getInitials(n){return n.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}getUserForComment(n){return this.client.state.getUser(n)}formatTime(n){const e=new Date(n),i=new Date().getTime()-e.getTime(),s=Math.floor(i/6e4);if(s<1)return"now";if(s<60)return`${s}m`;const o=Math.floor(s/60);return o<24?`${o}h`:e.toLocaleDateString()}async handleAttachImage(){this.upload||(this.upload=new Q(this.client));const n=await this.upload.pickFile("image/*");n&&(this.replyAttachmentIds.push(n.id),this.requestUpdate())}async handleRecordAudio(n){var i;this.upload||(this.upload=new Q(this.client)),this.audioRecorder||(this.audioRecorder=new _e);const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`[data-thread-id="${n}"]`),t=await this.audioRecorder.startRecording(e??document.body);if(t){const s=await this.upload.uploadBlob(t,"audio.webm");s&&(this.replyAttachmentIds.push(s.id),this.requestUpdate())}}async handleRecordVideo(n){var i;this.upload||(this.upload=new Q(this.client)),this.videoRecorder||(this.videoRecorder=new Te);const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`[data-thread-id="${n}"]`),t=await this.videoRecorder.startRecording(e??document.body);if(t){const s=await this.upload.uploadBlob(t.blob,"video.webm");s&&(this.replyAttachmentIds.push(s.id),this.requestUpdate())}}handleReply(n,e){e.preventDefault();const i=e.target.querySelector("input"),s=i.value.trim();if(!s&&this.replyAttachmentIds.length===0)return;const o=[...(s||"").matchAll(/@(\w+)/g)].map(r=>r[1]);this.client.reply(n,s||"(attachment)",o,this.replyAttachmentIds.length>0?[...this.replyAttachmentIds]:void 0),i.value="",this.replyAttachmentIds=[],this.replyingTo=null}isOwnComment(n){var e,t;return((t=(e=this.client)==null?void 0:e.state.user)==null?void 0:t.id)===n.userId}startEdit(n){this.editingCommentId=n.id,this.editBody=n.body}cancelEdit(){this.editingCommentId=null,this.editBody=""}saveEdit(n){const e=this.editBody.trim();if(!e)return;const t=[...e.matchAll(/@(\w+)/g)].map(i=>i[1]);this.client.editComment(n,e,t),this.editingCommentId=null,this.editBody=""}deleteComment(n){this.client.deleteComment(n)}renderEditForm(n){return h`
       <div class="edit-form">
         <textarea
           .value=${this.editBody}
@@ -2048,7 +2048,7 @@
         background: var(--pw-surface-hover);
         color: var(--pw-text);
       }
-    `];L([g({attribute:!1})],M.prototype,"client",2);L([g()],M.prototype,"highlightThreadId",2);L([v()],M.prototype,"threads",2);L([v()],M.prototype,"replyingTo",2);L([v()],M.prototype,"editingCommentId",2);L([v()],M.prototype,"editBody",2);L([v()],M.prototype,"pickerOpenForComment",2);L([v()],M.prototype,"typingByThread",2);L([v()],M.prototype,"reactionsVersion",2);M=L([O("pulse-widget-comments-panel")],M);var Ki=Object.defineProperty,Gi=Object.getOwnPropertyDescriptor,ze=(n,e,t,i)=>{for(var s=i>1?void 0:i?Gi(e,t):e,o=n.length-1,r;o>=0;o--)(r=n[o])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&Ki(e,t,s),s};const Zi={"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"},Ji={"comment:created":"💬","comment:mention":"📣","comment:reply":"↩️","thread:resolved":"✅","reaction:added":"🎉"};let se=class extends _{constructor(){super(...arguments),this.notifications=[]}connectedCallback(){super.connectedCallback(),this.setupListener()}disconnectedCallback(){var n;super.disconnectedCallback(),(n=this.unsub)==null||n.call(this)}updated(n){var e;n.has("client")&&this.client&&((e=this.unsub)==null||e.call(this),this.setupListener())}setupListener(){this.client&&(this.notifications=this.client.state.notifications,this.unsub=this.client.state.on("notifications",n=>{this.notifications=[...n]}))}fireClose(){this.dispatchEvent(new CustomEvent("panel-close",{bubbles:!0,composed:!0}))}handleClick(n){n.read||this.client.markRead(n.id)}getActorName(n){var e;return((e=this.client.state.getUser(n))==null?void 0:e.name)??"Someone"}formatTime(n){const e=new Date(n),i=new Date().getTime()-e.getTime(),s=Math.floor(i/6e4);if(s<1)return"now";if(s<60)return`${s}m`;const o=Math.floor(s/60);return o<24?`${o}h`:e.toLocaleDateString()}render(){const n=this.notifications.filter(e=>!e.read).length;return h`
+    `];L([g({attribute:!1})],M.prototype,"client",2);L([g()],M.prototype,"highlightThreadId",2);L([v()],M.prototype,"threadsVersion",2);L([v()],M.prototype,"replyingTo",2);L([v()],M.prototype,"editingCommentId",2);L([v()],M.prototype,"editBody",2);L([v()],M.prototype,"pickerOpenForComment",2);L([v()],M.prototype,"typingByThread",2);L([v()],M.prototype,"reactionsVersion",2);M=L([O("pulse-widget-comments-panel")],M);var Ki=Object.defineProperty,Gi=Object.getOwnPropertyDescriptor,ze=(n,e,t,i)=>{for(var s=i>1?void 0:i?Gi(e,t):e,o=n.length-1,r;o>=0;o--)(r=n[o])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&Ki(e,t,s),s};const Zi={"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"},Ji={"comment:created":"💬","comment:mention":"📣","comment:reply":"↩️","thread:resolved":"✅","reaction:added":"🎉"};let se=class extends _{constructor(){super(...arguments),this.notifications=[]}connectedCallback(){super.connectedCallback(),this.setupListener()}disconnectedCallback(){var n;super.disconnectedCallback(),(n=this.unsub)==null||n.call(this)}updated(n){var e;n.has("client")&&this.client&&((e=this.unsub)==null||e.call(this),this.setupListener())}setupListener(){this.client&&(this.notifications=this.client.state.notifications,this.unsub=this.client.state.on("notifications",n=>{this.notifications=[...n]}))}fireClose(){this.dispatchEvent(new CustomEvent("panel-close",{bubbles:!0,composed:!0}))}handleClick(n){n.read||this.client.markRead(n.id)}getActorName(n){var e;return((e=this.client.state.getUser(n))==null?void 0:e.name)??"Someone"}formatTime(n){const e=new Date(n),i=new Date().getTime()-e.getTime(),s=Math.floor(i/6e4);if(s<1)return"now";if(s<60)return`${s}m`;const o=Math.floor(s/60);return o<24?`${o}h`:e.toLocaleDateString()}render(){const n=this.notifications.filter(e=>!e.read).length;return h`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">

package/dist/pulse-elements.js

@@ -4239,7 +4239,11 @@ var Qi = Object.defineProperty, es = Object.getOwnPropertyDescriptor, j = (s, e,
 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(), this.replyAttachmentIds = [];
+    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();
@@ -4272,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(
@@ -5159,7 +5163,7 @@ j([
 ], O.prototype, "highlightThreadId", 2);
 j([
   v()
-], O.prototype, "threads", 2);
+], O.prototype, "threadsVersion", 2);
 j([
   v()
 ], O.prototype, "replyingTo", 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gamention/pulse-elements",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Drop-in web components for real-time collaboration — comments, cursors, presence, drawing, and more",
   "type": "module",
   "main": "./dist/pulse-elements.cjs",
@@ -41,8 +41,8 @@
     "@lit/context": "^1.1.0",
     "lit": "^3.2.0",
     "lucide": "^0.577.0",
-    "@gamention/pulse-core": "0.1.9",
-    "@gamention/pulse-shared": "0.1.9"
+    "@gamention/pulse-core": "0.1.10",
+    "@gamention/pulse-shared": "0.1.10"
   },
   "devDependencies": {
     "typescript": "^5.7.0",