@gamention/pulse-elements 0.1.3 → 0.1.4

package/dist/pulse-elements.cjs

@@ -1299,7 +1299,7 @@
         </div>
       </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 ge(this.client));const m=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)}}),this.form.querySelector(".attach-mic").addEventListener("click",async()=>{this.audioRecorder||(this.audioRecorder=new _e);const f=await this.audioRecorder.startRecording(m);if(f){const b=await this.upload.uploadBlob(f,"audio.webm");if(b){this.pendingAttachmentIds.push(b.id);const y=document.createElement("span");Object.assign(y.style,{display:"inline-block",padding:"4px 10px",borderRadius:"6px",background:"#f1f5f9",fontSize:"11px",color:"#64748b"}),y.textContent="🎤 Audio attached",m.appendChild(y)}}}),this.form.querySelector(".attach-video").addEventListener("click",async()=>{this.videoRecorder||(this.videoRecorder=new Ni);const f=await this.videoRecorder.startRecording(m);if(f){const b=await this.upload.uploadBlob(f.blob,"video.webm");if(b){this.pendingAttachmentIds.push(b.id);const y=document.createElement("span");Object.assign(y.style,{display:"inline-block",padding:"4px 10px",borderRadius:"6px",background:"#f1f5f9",fontSize:"11px",color:"#64748b"}),y.textContent="🎥 Video attached",m.appendChild(y)}}}),p.addEventListener("click",()=>{const f=a.value.trim();if(!f&&this.pendingAttachmentIds.length===0)return;const b=[...(f||"").matchAll(/@(\w+)/g)].map(y=>y[1]);this.client.send({type:"thread:create",id:crypto.randomUUID(),body:f||"(attachment)",mentions:b,position:i,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())}showThreadPopover(e,t){this.closePopover(),this.popover=document.createElement("div"),this.popover.dataset.threadId=e.id;const i=window.innerWidth<=480,s=i?window.innerWidth:300,r=t.getBoundingClientRect();let o,l;i?(o=0,l=window.innerHeight*.4):(o=r.right+10,l=r.top-8,o+s>window.innerWidth-16&&(o=r.left-s-10),l<16&&(l=16)),Object.assign(this.popover.style,{position:"fixed",left:`${o}px`,top:`${l}px`,width:i?"100vw":`${s}px`,maxHeight:i?"60vh":"360px",zIndex:"10001",background:"#fff",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:ce,display:"flex",flexDirection:"column",overflow:"hidden",pointerEvents:"auto",...i?{bottom:"0",top:"auto"}:{}});const a=document.createElement("div");Object.assign(a.style,{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 14px",borderBottom:"1px solid #f1f5f9",flexShrink:"0"}),a.innerHTML=`
+    `;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 ge(this.client));const m=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)}}),this.form.querySelector(".attach-mic").addEventListener("click",async()=>{this.audioRecorder||(this.audioRecorder=new _e);const f=await this.audioRecorder.startRecording(m);if(f){const b=await this.upload.uploadBlob(f,"audio.webm");if(b){this.pendingAttachmentIds.push(b.id);const y=document.createElement("span");Object.assign(y.style,{display:"inline-block",padding:"4px 10px",borderRadius:"6px",background:"#f1f5f9",fontSize:"11px",color:"#64748b"}),y.textContent="🎤 Audio attached",m.appendChild(y)}}}),this.form.querySelector(".attach-video").addEventListener("click",async()=>{this.videoRecorder||(this.videoRecorder=new Ni);const f=await this.videoRecorder.startRecording(m);if(f){const b=await this.upload.uploadBlob(f.blob,"video.webm");if(b){this.pendingAttachmentIds.push(b.id);const y=document.createElement("span");Object.assign(y.style,{display:"inline-block",padding:"4px 10px",borderRadius:"6px",background:"#f1f5f9",fontSize:"11px",color:"#64748b"}),y.textContent="🎥 Video attached",m.appendChild(y)}}}),p.addEventListener("click",()=>{const f=a.value.trim();if(!f&&this.pendingAttachmentIds.length===0)return;const b=[...(f||"").matchAll(/@(\w+)/g)].map(y=>y[1]);this.client.createThread(f||"(attachment)",{position:i,mentions:b}),this.pendingAttachmentIds=[],this.exitPinMode()}),a.addEventListener("keydown",f=>{f.key==="Escape"&&this.exitPinMode(),f.stopPropagation()}),document.body.appendChild(this.form),requestAnimationFrame(()=>a.focus())}showThreadPopover(e,t){this.closePopover(),this.popover=document.createElement("div"),this.popover.dataset.threadId=e.id;const i=window.innerWidth<=480,s=i?window.innerWidth:300,r=t.getBoundingClientRect();let o,l;i?(o=0,l=window.innerHeight*.4):(o=r.right+10,l=r.top-8,o+s>window.innerWidth-16&&(o=r.left-s-10),l<16&&(l=16)),Object.assign(this.popover.style,{position:"fixed",left:`${o}px`,top:`${l}px`,width:i?"100vw":`${s}px`,maxHeight:i?"60vh":"360px",zIndex:"10001",background:"#fff",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:ce,display:"flex",flexDirection:"column",overflow:"hidden",pointerEvents:"auto",...i?{bottom:"0",top:"auto"}:{}});const a=document.createElement("div");Object.assign(a.style,{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 14px",borderBottom:"1px solid #f1f5f9",flexShrink:"0"}),a.innerHTML=`
       <span style="font-size:13px;font-weight:700;color:#0f172a;">Thread</span>
       ${ot}
     `,a.querySelector(".pulse-close-btn").addEventListener("click",()=>{this.closePopover()}),this.popover.appendChild(a),this.refreshPopoverComments(e),this.addPopoverReplyForm(e),document.body.appendChild(this.popover);const c=this.popover.getBoundingClientRect();c.bottom>window.innerHeight-16&&(this.popover.style.top=`${Math.max(16,window.innerHeight-c.height-16)}px`),requestAnimationFrame(()=>{document.addEventListener("pointerdown",this.handlePopoverOutsideClick),document.addEventListener("keydown",this.handlePopoverEscape)})}refreshPopoverComments(e){var l;if(!this.popover)return;this.removePickerEl(),this.editingPopoverCommentId&&!e.comments.find(a=>a.id===this.editingPopoverCommentId)&&(this.editingPopoverCommentId=null);let t=this.popover.querySelector(".popover-comments");if(!t){t=document.createElement("div"),t.className="popover-comments",Object.assign(t.style,{flex:"1",overflowY:"auto",padding:"12px 14px",minHeight:"0"});const a=this.popover.firstElementChild;a&&a.nextSibling?this.popover.insertBefore(t,a.nextSibling):this.popover.appendChild(t)}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(x=>x[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,y=a.editedAt?'<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>':"";if(this.editingPopoverCommentId===a.id)return`
@@ -1352,9 +1352,9 @@
         </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>
       </div>
-    `;const i=t.querySelector("input"),s=t.querySelector(".reply-send");this.upload||(this.upload=new ge(this.client)),t.querySelector(".reply-attach-img").addEventListener("click",async()=>{const o=await this.upload.pickFile("image/*");o&&this.client.send({type:"comment:create",threadId:e.id,id:crypto.randomUUID(),body:"(image)",mentions:[],attachmentIds:[o.id]})}),t.querySelector(".reply-attach-mic").addEventListener("click",async()=>{this.audioRecorder||(this.audioRecorder=new _e);const o=await this.audioRecorder.startRecording(t);if(o){const l=await this.upload.uploadBlob(o,"audio.webm");l&&this.client.send({type:"comment:create",threadId:e.id,id:crypto.randomUUID(),body:"(audio note)",mentions:[],attachmentIds:[l.id]})}});const r=()=>{const o=i.value.trim();if(!o)return;const l=[...o.matchAll(/@(\w+)/g)].map(a=>a[1]);this.client.reply(e.id,o,l),i.value=""};s.addEventListener("click",r),i.addEventListener("input",()=>{const o=Date.now(),l=this.lastTypingSendPins.get(e.id)??0;o-l>=2e3&&(this.client.sendTyping(e.id),this.lastTypingSendPins.set(e.id,o))}),i.addEventListener("keydown",o=>{o.key==="Enter"&&(o.preventDefault(),r()),o.key==="Escape"&&this.closePopover(),o.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:ce});for(const s of Hi){const r=document.createElement("button");Object.assign(r.style,{border:"none",background:"none",cursor:"pointer",fontSize:"16px",padding:"4px",borderRadius:"4px",lineHeight:"1"}),r.textContent=s,r.addEventListener("click",o=>{o.stopPropagation();const a=this.client.state.getReactions(t).find(c=>{var h;return c.emoji===s&&c.userId===((h=this.client.state.user)==null?void 0:h.id)});a?this.client.removeReaction(a.id):this.client.addReaction(t,"comment",s),this.popoverPickerOpen=null,this.removePickerEl()}),this.pickerEl.appendChild(r)}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 h=s.get(c.emoji)??{count:0,ownId:null};h.count++,c.userId===i&&(h.ownId=c.id),s.set(c.emoji,h)}const r="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;",o=r+"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 s){const m=p?o:r;l+=`<button data-reaction-emoji="${c}" data-reaction-target="${e}" ${p?`data-reaction-id="${p}"`:""} style="${m}">
+    `;const i=t.querySelector("input"),s=t.querySelector(".reply-send");this.upload||(this.upload=new ge(this.client)),t.querySelector(".reply-attach-img").addEventListener("click",async()=>{await this.upload.pickFile("image/*")&&this.client.reply(e.id,"(image)")}),t.querySelector(".reply-attach-mic").addEventListener("click",async()=>{this.audioRecorder||(this.audioRecorder=new _e);const o=await this.audioRecorder.startRecording(t);o&&await this.upload.uploadBlob(o,"audio.webm")&&this.client.reply(e.id,"(audio note)")});const r=()=>{const o=i.value.trim();if(!o)return;const l=[...o.matchAll(/@(\w+)/g)].map(a=>a[1]);this.client.reply(e.id,o,l),i.value=""};s.addEventListener("click",r),i.addEventListener("input",()=>{const o=Date.now(),l=this.lastTypingSendPins.get(e.id)??0;o-l>=2e3&&(this.client.sendTyping(e.id),this.lastTypingSendPins.set(e.id,o))}),i.addEventListener("keydown",o=>{o.key==="Enter"&&(o.preventDefault(),r()),o.key==="Escape"&&this.closePopover(),o.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:ce});for(const s of Hi){const r=document.createElement("button");Object.assign(r.style,{border:"none",background:"none",cursor:"pointer",fontSize:"16px",padding:"4px",borderRadius:"4px",lineHeight:"1"}),r.textContent=s,r.addEventListener("click",o=>{o.stopPropagation();const a=this.client.state.getReactions(t).find(c=>{var h;return c.emoji===s&&c.userId===((h=this.client.state.user)==null?void 0:h.id)});a?this.client.removeReaction(a.id):this.client.addReaction(t,"comment",s),this.popoverPickerOpen=null,this.removePickerEl()}),this.pickerEl.appendChild(r)}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 h=s.get(c.emoji)??{count:0,ownId:null};h.count++,c.userId===i&&(h.ownId=c.id),s.set(c.emoji,h)}const r="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;",o=r+"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 s){const m=p?o:r;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>
-      </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 r;return s!==((r=this.client.state.user)==null?void 0:r.id)}).map(s=>{const r=this.client.state.presence.find(o=>o.user.id===s);return(r==null?void 0:r.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(),r=Math.floor(s/6e4);if(r<1)return"now";if(r<60)return`${r}m`;const o=Math.floor(r/60);return o<24?`${o}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 r=i.position;let o=this.pinEls.get(i.id);o||(o=document.createElement("div"),Object.assign(o.style,{position:"fixed",width:"24px",height:"24px",borderRadius:"50%",background:"#6366f1",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"11px",fontWeight:"700",fontFamily:ce,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%)"}),o.addEventListener("mouseenter",()=>{o.style.transform="translate(-50%, -50%) scale(1.15)"}),o.addEventListener("mouseleave",()=>{o.style.transform="translate(-50%, -50%)"}),o.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,o)}),this.container.appendChild(o),this.pinEls.set(i.id,o)),o.textContent=`${s+1}`;const l=this.resolvePosition(r);o.style.left=`${l.x}px`,o.style.top=`${l.y}px`})}}var qi=Object.defineProperty,Vi=Object.getOwnPropertyDescriptor,L=(n,e,t,i)=>{for(var s=i>1?void 0:i?Vi(e,t):e,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(e,t,s):o(s))||s);return i&&s&&qi(e,t,s),s};const Xi=["👍","👎","❤️","🎉","👀","🚀"];let I=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}connectedCallback(){super.connectedCallback(),this.setupListener()}disconnectedCallback(){var n,e,t;super.disconnectedCallback(),(n=this.unsub)==null||n.call(this),(e=this.reactionUnsub)==null||e.call(this),(t=this.typingUnsub)==null||t.call(this);for(const i of this.typingTimers.values())clearTimeout(i);this.typingTimers.clear()}updated(n){var e,t,i,s,r;n.has("client")&&this.client&&((e=this.unsub)==null||e.call(this),(t=this.reactionUnsub)==null||t.call(this),(i=this.typingUnsub)==null||i.call(this),this.setupListener()),(s=this.shadowRoot)==null||s.querySelectorAll(".audio-player-host").forEach(o=>{if(o.children.length>0)return;const l=o.dataset.url;if(l){const a=o.dataset.duration?parseInt(o.dataset.duration):void 0;o.appendChild(Pe.render(l,a))}}),(r=this.shadowRoot)==null||r.querySelectorAll(".video-player-host").forEach(o=>{if(o.children.length>0)return;const l=o.dataset.url;l&&o.appendChild(xt.render(l,o.dataset.poster||void 0))})}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 r;return s!==((r=this.client.state.user)==null?void 0:r.id)}).map(s=>{const r=this.client.state.presence.find(o=>o.user.id===s);return(r==null?void 0:r.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 r;const t=this.client.state.getReactions(n),i=(r=this.client.state.user)==null?void 0:r.id,s=t.find(o=>o.emoji===e&&o.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("@")?d`<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 r=Math.floor(s/60);return r<24?`${r}h`:e.toLocaleDateString()}async handleAttachImage(n){this.upload||(this.upload=new ge(this.client));const e=await this.upload.pickFile("image/*");e&&this.client.send({type:"comment:create",threadId:n,id:crypto.randomUUID(),body:"(image)",mentions:[],attachmentIds:[e.id]})}async handleRecordAudio(n){var i;this.upload||(this.upload=new ge(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.client.send({type:"comment:create",threadId:n,id:crypto.randomUUID(),body:"(audio note)",mentions:[],attachmentIds:[s.id]})}}handleReply(n,e){e.preventDefault();const i=e.target.querySelector("input"),s=i.value.trim();if(!s)return;const r=[...s.matchAll(/@(\w+)/g)].map(o=>o[1]);this.client.reply(n,s,r),i.value="",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 d`
+      </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 r;return s!==((r=this.client.state.user)==null?void 0:r.id)}).map(s=>{const r=this.client.state.presence.find(o=>o.user.id===s);return(r==null?void 0:r.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(),r=Math.floor(s/6e4);if(r<1)return"now";if(r<60)return`${r}m`;const o=Math.floor(r/60);return o<24?`${o}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 r=i.position;let o=this.pinEls.get(i.id);o||(o=document.createElement("div"),Object.assign(o.style,{position:"fixed",width:"24px",height:"24px",borderRadius:"50%",background:"#6366f1",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"11px",fontWeight:"700",fontFamily:ce,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%)"}),o.addEventListener("mouseenter",()=>{o.style.transform="translate(-50%, -50%) scale(1.15)"}),o.addEventListener("mouseleave",()=>{o.style.transform="translate(-50%, -50%)"}),o.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,o)}),this.container.appendChild(o),this.pinEls.set(i.id,o)),o.textContent=`${s+1}`;const l=this.resolvePosition(r);o.style.left=`${l.x}px`,o.style.top=`${l.y}px`})}}var qi=Object.defineProperty,Vi=Object.getOwnPropertyDescriptor,L=(n,e,t,i)=>{for(var s=i>1?void 0:i?Vi(e,t):e,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(e,t,s):o(s))||s);return i&&s&&qi(e,t,s),s};const Xi=["👍","👎","❤️","🎉","👀","🚀"];let I=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}connectedCallback(){super.connectedCallback(),this.setupListener()}disconnectedCallback(){var n,e,t;super.disconnectedCallback(),(n=this.unsub)==null||n.call(this),(e=this.reactionUnsub)==null||e.call(this),(t=this.typingUnsub)==null||t.call(this);for(const i of this.typingTimers.values())clearTimeout(i);this.typingTimers.clear()}updated(n){var e,t,i,s,r;n.has("client")&&this.client&&((e=this.unsub)==null||e.call(this),(t=this.reactionUnsub)==null||t.call(this),(i=this.typingUnsub)==null||i.call(this),this.setupListener()),(s=this.shadowRoot)==null||s.querySelectorAll(".audio-player-host").forEach(o=>{if(o.children.length>0)return;const l=o.dataset.url;if(l){const a=o.dataset.duration?parseInt(o.dataset.duration):void 0;o.appendChild(Pe.render(l,a))}}),(r=this.shadowRoot)==null||r.querySelectorAll(".video-player-host").forEach(o=>{if(o.children.length>0)return;const l=o.dataset.url;l&&o.appendChild(xt.render(l,o.dataset.poster||void 0))})}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 r;return s!==((r=this.client.state.user)==null?void 0:r.id)}).map(s=>{const r=this.client.state.presence.find(o=>o.user.id===s);return(r==null?void 0:r.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 r;const t=this.client.state.getReactions(n),i=(r=this.client.state.user)==null?void 0:r.id,s=t.find(o=>o.emoji===e&&o.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("@")?d`<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 r=Math.floor(s/60);return r<24?`${r}h`:e.toLocaleDateString()}async handleAttachImage(n){this.upload||(this.upload=new ge(this.client)),await this.upload.pickFile("image/*")&&this.client.reply(n,"(image)")}async handleRecordAudio(n){var i;this.upload||(this.upload=new ge(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);t&&await this.upload.uploadBlob(t,"audio.webm")&&this.client.reply(n,"(audio note)")}handleReply(n,e){e.preventDefault();const i=e.target.querySelector("input"),s=i.value.trim();if(!s)return;const r=[...s.matchAll(/@(\w+)/g)].map(o=>o[1]);this.client.reply(n,s,r),i.value="",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 d`
       <div class="edit-form">
         <textarea
           .value=${this.editBody}

package/dist/pulse-elements.js

@@ -106,7 +106,7 @@ let At = class extends Event {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function It({ context: s }) {
+function Mt({ context: s }) {
   return (e, t) => {
     const i = /* @__PURE__ */ new WeakMap();
     if (typeof t == "object") return { get() {
@@ -157,7 +157,7 @@ function he({ context: s, subscribe: e }) {
     }));
   };
 }
-var Mt = Object.defineProperty, Ot = (s, e, t) => e in s ? Mt(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);
+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 {
   constructor() {
@@ -561,7 +561,7 @@ let xt = class {
     return this.cssText;
   }
 };
-const zt = (s) => new xt(typeof s == "string" ? s : s + "", void 0, ze), I = (s, ...e) => {
+const zt = (s) => new xt(typeof s == "string" ? s : s + "", void 0, ze), M = (s, ...e) => {
   const t = s.length === 1 ? s[0] : e.reduce((i, n, r) => i + ((o) => {
     if (o._$cssResult$ === !0) return o.cssText;
     if (typeof o == "number") return o;
@@ -1181,7 +1181,7 @@ Z([
   g()
 ], W.prototype, "endpoint", 2);
 Z([
-  It({ context: J })
+  Mt({ context: J })
 ], W.prototype, "client", 2);
 W = Z([
   R("pulse-provider")
@@ -1235,7 +1235,7 @@ let G = class extends S {
     `;
   }
 };
-G.styles = I`
+G.styles = M`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1434,7 +1434,7 @@ let ae = class extends S {
     `;
   }
 };
-ae.styles = I`
+ae.styles = M`
     :host {
       position: fixed;
       top: 0;
@@ -1604,7 +1604,7 @@ let V = class extends S {
     return r < 24 ? `${r}h ago` : e.toLocaleDateString();
   }
 };
-V.styles = I`
+V.styles = M`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -1933,7 +1933,7 @@ let le = class extends S {
     `;
   }
 };
-le.styles = I`
+le.styles = M`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -2164,7 +2164,7 @@ let D = class extends S {
     `;
   }
 };
-D.styles = I`
+D.styles = M`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2322,7 +2322,7 @@ class wi {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Ie extends wi {
+class Me extends wi {
   constructor(e) {
     if (super(e), this.it = u, e.type !== xi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
@@ -2336,16 +2336,16 @@ class Ie extends wi {
     return t.raw = t, this._t = { _$litType$: this.constructor.resultType, strings: t, values: [] };
   }
 }
-Ie.directiveName = "unsafeHTML", Ie.resultType = 1;
+Me.directiveName = "unsafeHTML", Me.resultType = 1;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Me extends Ie {
+class Ie extends Me {
 }
-Me.directiveName = "unsafeSVG", Me.resultType = 2;
-const $i = yi(Me);
+Ie.directiveName = "unsafeSVG", Ie.resultType = 2;
+const $i = yi(Ie);
 /**
  * @license lucide v0.577.0 - ISC
  *
@@ -2483,7 +2483,7 @@ const Ai = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ii = [
+const Mi = [
   ["path", { d: "M10 11v6" }],
   ["path", { d: "M14 11v6" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }],
@@ -2506,7 +2506,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 Mi = [
+const Ii = [
   [
     "path",
     {
@@ -2533,7 +2533,7 @@ function C(s, e = 18) {
     stroke-linejoin="round"
   >${$i(Oi(s))}</svg>`;
 }
-const ee = I`
+const ee = M`
   * {
     box-sizing: border-box;
     margin: 0;
@@ -2576,7 +2576,7 @@ const ee = I`
     --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 = I`
+`, me = M`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2620,7 +2620,7 @@ const ee = I`
     width: 18px;
     height: 18px;
   }
-`, _e = I`
+`, _e = M`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2723,7 +2723,7 @@ X.styles = [
   ee,
   me,
   _e,
-  I`
+  M`
       :host {
         display: block;
       }
@@ -3828,14 +3828,7 @@ class Ji {
       const f = a.value.trim();
       if (!f && this.pendingAttachmentIds.length === 0) return;
       const b = [...(f || "").matchAll(/@(\w+)/g)].map((x) => x[1]);
-      this.client.send({
-        type: "thread:create",
-        id: crypto.randomUUID(),
-        body: f || "(attachment)",
-        mentions: b,
-        position: i,
-        attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0
-      }), this.pendingAttachmentIds = [], this.exitPinMode();
+      this.client.createThread(f || "(attachment)", { position: i, mentions: b }), this.pendingAttachmentIds = [], this.exitPinMode();
     }), a.addEventListener("keydown", (f) => {
       f.key === "Escape" && this.exitPinMode(), f.stopPropagation();
     }), document.body.appendChild(this.form), requestAnimationFrame(() => a.focus());
@@ -4030,29 +4023,11 @@ class Ji {
     `;
     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 () => {
-      const o = await this.upload.pickFile("image/*");
-      o && this.client.send({
-        type: "comment:create",
-        threadId: e.id,
-        id: crypto.randomUUID(),
-        body: "(image)",
-        mentions: [],
-        attachmentIds: [o.id]
-      });
+      await this.upload.pickFile("image/*") && this.client.reply(e.id, "(image)");
     }), t.querySelector(".reply-attach-mic").addEventListener("click", async () => {
       this.audioRecorder || (this.audioRecorder = new Re());
       const o = await this.audioRecorder.startRecording(t);
-      if (o) {
-        const l = await this.upload.uploadBlob(o, "audio.webm");
-        l && this.client.send({
-          type: "comment:create",
-          threadId: e.id,
-          id: crypto.randomUUID(),
-          body: "(audio note)",
-          mentions: [],
-          attachmentIds: [l.id]
-        });
-      }
+      o && await this.upload.uploadBlob(o, "audio.webm") && this.client.reply(e.id, "(audio note)");
     });
     const r = () => {
       const o = i.value.trim();
@@ -4329,32 +4304,13 @@ let O = class extends S {
     return r < 24 ? `${r}h` : e.toLocaleDateString();
   }
   async handleAttachImage(s) {
-    this.upload || (this.upload = new ke(this.client));
-    const e = await this.upload.pickFile("image/*");
-    e && this.client.send({
-      type: "comment:create",
-      threadId: s,
-      id: crypto.randomUUID(),
-      body: "(image)",
-      mentions: [],
-      attachmentIds: [e.id]
-    });
+    this.upload || (this.upload = new ke(this.client)), await this.upload.pickFile("image/*") && this.client.reply(s, "(image)");
   }
   async handleRecordAudio(s) {
     var i;
     this.upload || (this.upload = new ke(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);
-    if (t) {
-      const n = await this.upload.uploadBlob(t, "audio.webm");
-      n && this.client.send({
-        type: "comment:create",
-        threadId: s,
-        id: crypto.randomUUID(),
-        body: "(audio note)",
-        mentions: [],
-        attachmentIds: [n.id]
-      });
-    }
+    t && await this.upload.uploadBlob(t, "audio.webm") && this.client.reply(s, "(audio note)");
   }
   handleReply(s, e) {
     e.preventDefault();
@@ -4551,7 +4507,7 @@ let O = class extends S {
                   `}
               ${r && !o ? 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(Ii, 14)}</button>
+                    <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${C(Mi, 14)}</button>
                   </div>` : u}
               ${this.renderReactions(t)}
             </div>
@@ -4608,7 +4564,7 @@ O.styles = [
   ee,
   me,
   _e,
-  I`
+  M`
       :host {
         display: block;
       }
@@ -5207,7 +5163,7 @@ ce.styles = [
   ee,
   me,
   _e,
-  I`
+  M`
       :host {
         display: block;
       }
@@ -5894,7 +5850,7 @@ de.styles = [
   ee,
   me,
   _e,
-  I`
+  M`
       :host {
         display: block;
       }
@@ -6102,7 +6058,7 @@ var ms = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, L = (s, e,
     (o = s[r]) && (n = (i ? o(e, t, n) : o(n)) || n);
   return i && n && ms(e, t, n), n;
 };
-let M = class extends S {
+let I = 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;
   }
@@ -6155,7 +6111,7 @@ let M = class extends S {
     if (this.collapsed)
       return d`
         <div class="toolbar collapsed ${s ? "inline" : ""}" @click=${this.fireToggle}>
-          <span class="fab-icon">${C(Mi, s ? 18 : 24)}</span>
+          <span class="fab-icon">${C(Ii, s ? 18 : 24)}</span>
         </div>
       `;
     const e = this.users.slice(0, 3), t = this.users.length - 3;
@@ -6262,10 +6218,10 @@ let M = class extends S {
     `;
   }
 };
-M.styles = [
+I.styles = [
   ee,
   me,
-  I`
+  M`
       :host {
         display: block;
       }
@@ -6479,37 +6435,37 @@ M.styles = [
 ];
 L([
   g({ attribute: !1 })
-], M.prototype, "client", 2);
+], I.prototype, "client", 2);
 L([
   g({ type: Boolean })
-], M.prototype, "collapsed", 2);
+], I.prototype, "collapsed", 2);
 L([
   g()
-], M.prototype, "activePanel", 2);
+], I.prototype, "activePanel", 2);
 L([
   g({ type: Boolean })
-], M.prototype, "pinModeActive", 2);
+], I.prototype, "pinModeActive", 2);
 L([
   g({ type: Boolean })
-], M.prototype, "featuresDisabled", 2);
+], I.prototype, "featuresDisabled", 2);
 L([
   g({ type: Boolean })
-], M.prototype, "drawModeActive", 2);
+], I.prototype, "drawModeActive", 2);
 L([
   g()
-], M.prototype, "followingUserId", 2);
+], I.prototype, "followingUserId", 2);
 L([
   g()
-], M.prototype, "display", 2);
+], I.prototype, "display", 2);
 L([
   v()
-], M.prototype, "users", 2);
+], I.prototype, "users", 2);
 L([
   v()
-], M.prototype, "unreadCount", 2);
-M = L([
+], I.prototype, "unreadCount", 2);
+I = L([
   R("pulse-widget-toolbar")
-], M);
+], I);
 class bs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.pillEls = /* @__PURE__ */ new Map(), this.client = e;
@@ -6868,7 +6824,7 @@ let E = class extends S {
 };
 E.styles = [
   ee,
-  I`
+  M`
       :host {
         display: block;
       }

package/package.json

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