@gamention/pulse-elements 0.1.21 → 0.1.22

package/dist/pulse-elements.cjs

@@ -1262,22 +1262,25 @@
     background: #e2e8f0;
     color: #0f172a;
   }
-`;function dt(o){return o.toString().padStart(2,"0")}function Zi(o){const e=Math.floor(o/60),t=o%60;return`${dt(e)}:${dt(t)}`}function Qi(){const o=["video/webm;codecs=vp9,opus","video/webm;codecs=vp8,opus","video/webm","video/mp4"];for(const e of o)if(MediaRecorder.isTypeSupported(e))return e;return""}function es(o){return new Promise((e,t)=>{const i=URL.createObjectURL(o),s=document.createElement("video");s.muted=!0,s.playsInline=!0,s.preload="auto",s.src=i,s.addEventListener("loadeddata",()=>{s.currentTime=.01}),s.addEventListener("seeked",()=>{const n=document.createElement("canvas");n.width=s.videoWidth||240,n.height=s.videoHeight||240,n.getContext("2d").drawImage(s,0,0,n.width,n.height),URL.revokeObjectURL(i),n.toBlob(a=>{a?e(a):t(new Error("Failed to generate poster frame"))},"image/jpeg",.85)}),s.addEventListener("error",()=>{URL.revokeObjectURL(i),t(new Error("Failed to load video for poster generation"))}),s.load()})}class Me{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}async startRecording(e){if(this.recording)return null;let t;try{t=await navigator.mediaDevices.getUserMedia({video:!0,audio:!0})}catch{return null}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=Qi(),s={};i&&(s.mimeType=i);const n=new MediaRecorder(t,s);return this.mediaRecorder=n,n.ondataavailable=r=>{r.data.size>0&&this.chunks.push(r.data)},n.onstop=()=>{this.handleRecordingComplete()},n.start(),this.timerInterval=setInterval(()=>{this.elapsed++,this.updateTimer(),this.elapsed>=ct&&this.stopRecording()},1e3),new Promise(r=>{this.resolvePromise=r})}stopRecording(){!this.recording||!this.mediaRecorder||this.mediaRecorder.state==="recording"&&this.mediaRecorder.stop()}cancelRecording(){var e;this.cleanup(),(e=this.resolvePromise)==null||e.call(this,null),this.resolvePromise=null}destroy(){this.cancelRecording()}buildUI(e){this.styleEl=document.createElement("style"),this.styleEl.textContent=Ji,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");i.className="vr-ring",t.appendChild(i);const s=document.createElement("div");s.className="vr-video-circle",this.videoEl=document.createElement("video"),this.videoEl.muted=!0,this.videoEl.playsInline=!0,this.videoEl.setAttribute("playsinline",""),s.appendChild(this.videoEl),t.appendChild(s),this.root.appendChild(t),this.timerEl=document.createElement("span"),this.timerEl.className="vr-timer",this.timerEl.textContent="00:00",this.root.appendChild(this.timerEl);const n=document.createElement("div");n.className="vr-actions";const r=document.createElement("button");r.className="vr-btn vr-btn-stop",r.textContent="Stop",r.addEventListener("click",()=>this.stopRecording()),n.appendChild(r);const a=document.createElement("button");a.className="vr-btn vr-btn-cancel",a.textContent="Cancel",a.addEventListener("click",()=>this.cancelRecording()),n.appendChild(a),this.root.appendChild(n),e.appendChild(this.root)}updateTimer(){if(!this.timerEl)return;const e=ct-this.elapsed;this.timerEl.textContent=Zi(this.elapsed),e<=10?this.timerEl.classList.add("vr-countdown"):this.timerEl.classList.remove("vr-countdown")}async handleRecordingComplete(){var s,n;const e=((s=this.mediaRecorder)==null?void 0:s.mimeType)||"video/webm",t=new Blob(this.chunks,{type:e});let i;try{i=await es(t)}catch{const r=document.createElement("canvas");r.width=1,r.height=1,i=await new Promise(a=>{r.toBlob(l=>a(l),"image/png")})}this.cleanup(),(n=this.resolvePromise)==null||n.call(this,{blob:t,posterBlob:i}),this.resolvePromise=null}cleanup(){if(this.recording=!1,this.timerInterval&&(clearInterval(this.timerInterval),this.timerInterval=null),this.mediaRecorder&&this.mediaRecorder.state!=="inactive")try{this.mediaRecorder.stop()}catch{}if(this.mediaRecorder=null,this.stream){for(const e of this.stream.getTracks())e.stop();this.stream=null}this.videoEl&&(this.videoEl.srcObject=null,this.videoEl=null),this.root&&this.root.parentElement&&this.root.parentElement.removeChild(this.root),this.root=null,this.styleEl&&this.styleEl.parentElement&&this.styleEl.parentElement.removeChild(this.styleEl),this.styleEl=null,this.chunks=[],this.elapsed=0}}const ht={position:"absolute",top:"50%",transform:"translateY(-50%)",width:"44px",height:"44px",border:"none",borderRadius:"50%",background:"rgba(255,255,255,0.15)",color:"#fff",fontSize:"22px",cursor:"pointer",padding:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 150ms ease",zIndex:"1"},m=class m{static open(e,t,i){m.close(),m.urls=t&&t.length>1?t:[e],m.currentIndex=i??0;const s=m.urls.length>1,n=document.createElement("div");n.id="pulse-widget-lightbox",Object.assign(n.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",zIndex:"100000",background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",opacity:"0",transition:"opacity 200ms ease",cursor:"pointer",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const r=document.createElement("button");r.textContent="×",Object.assign(r.style,{position:"absolute",top:"16px",right:"16px",width:"40px",height:"40px",border:"none",borderRadius:"50%",background:"rgba(255,255,255,0.15)",color:"#fff",fontSize:"24px",cursor:"pointer",padding:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 150ms ease",zIndex:"1"}),r.addEventListener("mouseenter",()=>{r.style.background="rgba(255,255,255,0.3)"}),r.addEventListener("mouseleave",()=>{r.style.background="rgba(255,255,255,0.15)"}),r.addEventListener("click",d=>{d.stopPropagation(),m.close()}),n.appendChild(r);const a=document.createElement("img");if(a.src=m.urls[m.currentIndex],a.alt="Lightbox image",Object.assign(a.style,{maxWidth:"90vw",maxHeight:"85vh",borderRadius:"8px",objectFit:"contain",cursor:"default",userSelect:"none",transition:"opacity 150ms ease"}),a.addEventListener("click",d=>d.stopPropagation()),n.appendChild(a),m.imgEl=a,s){const d=document.createElement("button");d.innerHTML='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15,18 9,12 15,6"/></svg>',Object.assign(d.style,{...ht,left:"16px"}),d.addEventListener("mouseenter",()=>{d.style.background="rgba(255,255,255,0.3)"}),d.addEventListener("mouseleave",()=>{d.style.background="rgba(255,255,255,0.15)"}),d.addEventListener("click",u=>{u.stopPropagation(),m.navigate(-1)}),n.appendChild(d),m.prevBtn=d;const c=document.createElement("button");c.innerHTML='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9,18 15,12 9,6"/></svg>',Object.assign(c.style,{...ht,right:"16px"}),c.addEventListener("mouseenter",()=>{c.style.background="rgba(255,255,255,0.3)"}),c.addEventListener("mouseleave",()=>{c.style.background="rgba(255,255,255,0.15)"}),c.addEventListener("click",u=>{u.stopPropagation(),m.navigate(1)}),n.appendChild(c),m.nextBtn=c;const h=document.createElement("span");Object.assign(h.style,{position:"absolute",bottom:"20px",left:"50%",transform:"translateX(-50%)",color:"rgba(255,255,255,0.7)",fontSize:"13px",fontWeight:"500",pointerEvents:"none"}),n.appendChild(h),m.counterEl=h,m.updateNav()}n.addEventListener("click",()=>m.close());const l=d=>{d.key==="Escape"&&m.close(),s&&d.key==="ArrowLeft"&&m.navigate(-1),s&&d.key==="ArrowRight"&&m.navigate(1)};document.addEventListener("keydown",l),m.overlay=n,m.onKeyDown=l,document.body.appendChild(n),requestAnimationFrame(()=>{n.style.opacity="1"})}static navigate(e){const t=m.urls.length;m.currentIndex=(m.currentIndex+e+t)%t,m.imgEl&&(m.imgEl.style.opacity="0",setTimeout(()=>{m.imgEl&&(m.imgEl.src=m.urls[m.currentIndex],m.imgEl.style.opacity="1")},100)),m.updateNav()}static updateNav(){const e=m.currentIndex,t=m.urls.length;m.counterEl&&(m.counterEl.textContent=`${e+1} / ${t}`)}static close(){if(!m.overlay)return;const e=m.overlay;m.onKeyDown&&(document.removeEventListener("keydown",m.onKeyDown),m.onKeyDown=null),e.style.opacity="0",e.addEventListener("transitionend",()=>e.remove()),m.overlay=null,m.imgEl=null,m.prevBtn=null,m.nextBtn=null,m.counterEl=null,m.urls=[],m.currentIndex=0}};m.overlay=null,m.onKeyDown=null,m.urls=[],m.currentIndex=0,m.imgEl=null,m.prevBtn=null,m.nextBtn=null,m.counterEl=null;let xe=m;class te{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)}pickFile(e){return new Promise(t=>{this.input.accept=e,this.input.value="";const i=()=>{n(),t(null)},s=async()=>{var a;n();const r=(a=this.input.files)==null?void 0:a[0];if(!r){t(null);return}this.uploading=!0;try{const l=await this.client.uploadFile(r);t(l)}catch(l){console.error("[Pulse] File upload failed:",l),t(null)}finally{this.uploading=!1}},n=()=>{this.input.removeEventListener("change",s),this.input.removeEventListener("cancel",i)};this.input.addEventListener("change",s,{once:!0}),this.input.addEventListener("cancel",i,{once:!0}),this.input.click()})}pickFiles(e,t){return new Promise(i=>{this.input.accept=e,this.input.multiple=!0,this.input.value="";const s=()=>{r(),i([])},n=async()=>{r();const a=this.input.files;if(!a||a.length===0){i([]);return}const l=Array.from(a).slice(0,t);this.uploading=!0;try{const d=await Promise.all(l.map(async c=>{try{return await this.client.uploadFile(c)}catch(h){return console.error("[Pulse] File upload failed:",h),null}}));i(d.filter(c=>c!==null))}finally{this.uploading=!1,this.input.multiple=!1}},r=()=>{this.input.removeEventListener("change",n),this.input.removeEventListener("cancel",s)};this.input.addEventListener("change",n,{once:!0}),this.input.addEventListener("cancel",s,{once:!0}),this.input.click()})}async uploadBlob(e,t){this.uploading=!0;try{const i=new File([e],t,{type:e.type});return await this.client.uploadFile(i)}catch(i){return console.error("[Pulse] Blob upload failed:",i),null}finally{this.uploading=!1}}destroy(){this.input.remove()}}const ts="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";class Oe{constructor(e){this.dropdown=null,this.target=null,this.mentionStart=-1,this.selectedIndex=0,this.filteredUsers=[],this.handleInput=()=>{var l;if(!this.target)return;const t=this.target.value,i=this.target.selectionStart??t.length,s=t.slice(0,i),n=s.lastIndexOf("@");if(n===-1||n>0&&/\w/.test(s[n-1])){this.close();return}const r=s.slice(n+1).toLowerCase();if(r.includes(" ")){this.close();return}this.mentionStart=n;const a=(l=this.client.state.user)==null?void 0:l.id;if(this.filteredUsers=this.client.state.users.filter(d=>d.id!==a&&d.name.toLowerCase().includes(r)).slice(0,5),this.filteredUsers.length===0){this.close();return}this.selectedIndex=0,this.showDropdown()},this.handleKeydown=t=>{this.dropdown&&(t.key==="ArrowDown"?(t.preventDefault(),this.selectedIndex=Math.min(this.selectedIndex+1,this.filteredUsers.length-1),this.renderItems()):t.key==="ArrowUp"?(t.preventDefault(),this.selectedIndex=Math.max(this.selectedIndex-1,0),this.renderItems()):t.key==="Enter"&&this.dropdown?(t.preventDefault(),t.stopPropagation(),this.selectUser(this.filteredUsers[this.selectedIndex])):t.key==="Escape"&&this.close())},this.handleBlur=()=>{setTimeout(()=>this.close(),150)},this.client=e}attach(e){this.target=e,e.addEventListener("input",this.handleInput),e.addEventListener("keydown",this.handleKeydown),e.addEventListener("blur",this.handleBlur)}detach(){this.target&&(this.target.removeEventListener("input",this.handleInput),this.target.removeEventListener("keydown",this.handleKeydown),this.target.removeEventListener("blur",this.handleBlur),this.target=null),this.close()}selectUser(e){if(!this.target)return;const t=this.target.value,i=this.target.selectionStart??t.length,s=e.name.split(" ")[0],n=t.slice(0,this.mentionStart),r=t.slice(i);this.target.value=`${n}@${s} ${r}`;const a=this.mentionStart+s.length+2;this.target.setSelectionRange(a,a),this.target.focus(),this.target.dispatchEvent(new Event("input",{bubbles:!0})),this.close()}showDropdown(){if(!this.target)return;this.dropdown||(this.dropdown=document.createElement("div"),Object.assign(this.dropdown.style,{position:"absolute",zIndex:"100002",background:"#fff",border:"1px solid #e2e8f0",borderRadius:"8px",boxShadow:"0 4px 16px rgba(0,0,0,0.12)",overflow:"hidden",fontFamily:ts,minWidth:"160px",maxWidth:"220px"}),document.body.appendChild(this.dropdown));const e=this.target.getBoundingClientRect();this.dropdown.style.left=`${e.left}px`,this.dropdown.style.top=`${e.bottom+4}px`,this.renderItems()}renderItems(){this.dropdown&&(this.dropdown.innerHTML=this.filteredUsers.map((e,t)=>{const i=e.name.split(" ").map(n=>n[0]).join("").toUpperCase().slice(0,2),s=t===this.selectedIndex;return`
-          <div class="mention-item" data-index="${t}" style="
+`;function dt(o){return o.toString().padStart(2,"0")}function Zi(o){const e=Math.floor(o/60),t=o%60;return`${dt(e)}:${dt(t)}`}function Qi(){const o=["video/webm;codecs=vp9,opus","video/webm;codecs=vp8,opus","video/webm","video/mp4"];for(const e of o)if(MediaRecorder.isTypeSupported(e))return e;return""}function es(o){return new Promise((e,t)=>{const i=URL.createObjectURL(o),s=document.createElement("video");s.muted=!0,s.playsInline=!0,s.preload="auto",s.src=i,s.addEventListener("loadeddata",()=>{s.currentTime=.01}),s.addEventListener("seeked",()=>{const n=document.createElement("canvas");n.width=s.videoWidth||240,n.height=s.videoHeight||240,n.getContext("2d").drawImage(s,0,0,n.width,n.height),URL.revokeObjectURL(i),n.toBlob(a=>{a?e(a):t(new Error("Failed to generate poster frame"))},"image/jpeg",.85)}),s.addEventListener("error",()=>{URL.revokeObjectURL(i),t(new Error("Failed to load video for poster generation"))}),s.load()})}class Me{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}async startRecording(e){if(this.recording)return null;let t;try{t=await navigator.mediaDevices.getUserMedia({video:!0,audio:!0})}catch{return null}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=Qi(),s={};i&&(s.mimeType=i);const n=new MediaRecorder(t,s);return this.mediaRecorder=n,n.ondataavailable=r=>{r.data.size>0&&this.chunks.push(r.data)},n.onstop=()=>{this.handleRecordingComplete()},n.start(),this.timerInterval=setInterval(()=>{this.elapsed++,this.updateTimer(),this.elapsed>=ct&&this.stopRecording()},1e3),new Promise(r=>{this.resolvePromise=r})}stopRecording(){!this.recording||!this.mediaRecorder||this.mediaRecorder.state==="recording"&&this.mediaRecorder.stop()}cancelRecording(){var e;this.cleanup(),(e=this.resolvePromise)==null||e.call(this,null),this.resolvePromise=null}destroy(){this.cancelRecording()}buildUI(e){this.styleEl=document.createElement("style"),this.styleEl.textContent=Ji,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");i.className="vr-ring",t.appendChild(i);const s=document.createElement("div");s.className="vr-video-circle",this.videoEl=document.createElement("video"),this.videoEl.muted=!0,this.videoEl.playsInline=!0,this.videoEl.setAttribute("playsinline",""),s.appendChild(this.videoEl),t.appendChild(s),this.root.appendChild(t),this.timerEl=document.createElement("span"),this.timerEl.className="vr-timer",this.timerEl.textContent="00:00",this.root.appendChild(this.timerEl);const n=document.createElement("div");n.className="vr-actions";const r=document.createElement("button");r.className="vr-btn vr-btn-stop",r.textContent="Stop",r.addEventListener("click",()=>this.stopRecording()),n.appendChild(r);const a=document.createElement("button");a.className="vr-btn vr-btn-cancel",a.textContent="Cancel",a.addEventListener("click",()=>this.cancelRecording()),n.appendChild(a),this.root.appendChild(n),e.appendChild(this.root)}updateTimer(){if(!this.timerEl)return;const e=ct-this.elapsed;this.timerEl.textContent=Zi(this.elapsed),e<=10?this.timerEl.classList.add("vr-countdown"):this.timerEl.classList.remove("vr-countdown")}async handleRecordingComplete(){var s,n;const e=((s=this.mediaRecorder)==null?void 0:s.mimeType)||"video/webm",t=new Blob(this.chunks,{type:e});let i;try{i=await es(t)}catch{const r=document.createElement("canvas");r.width=1,r.height=1,i=await new Promise(a=>{r.toBlob(l=>a(l),"image/png")})}this.cleanup(),(n=this.resolvePromise)==null||n.call(this,{blob:t,posterBlob:i}),this.resolvePromise=null}cleanup(){if(this.recording=!1,this.timerInterval&&(clearInterval(this.timerInterval),this.timerInterval=null),this.mediaRecorder&&this.mediaRecorder.state!=="inactive")try{this.mediaRecorder.stop()}catch{}if(this.mediaRecorder=null,this.stream){for(const e of this.stream.getTracks())e.stop();this.stream=null}this.videoEl&&(this.videoEl.srcObject=null,this.videoEl=null),this.root&&this.root.parentElement&&this.root.parentElement.removeChild(this.root),this.root=null,this.styleEl&&this.styleEl.parentElement&&this.styleEl.parentElement.removeChild(this.styleEl),this.styleEl=null,this.chunks=[],this.elapsed=0}}const ht={position:"absolute",top:"50%",transform:"translateY(-50%)",width:"44px",height:"44px",border:"none",borderRadius:"50%",background:"rgba(255,255,255,0.15)",color:"#fff",fontSize:"22px",cursor:"pointer",padding:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 150ms ease",zIndex:"1"},m=class m{static open(e,t,i){m.close(),m.urls=t&&t.length>1?t:[e],m.currentIndex=i??0;const s=m.urls.length>1,n=document.createElement("div");n.id="pulse-widget-lightbox",Object.assign(n.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",zIndex:"100000",background:"rgba(0,0,0,0.85)",display:"flex",alignItems:"center",justifyContent:"center",opacity:"0",transition:"opacity 200ms ease",cursor:"pointer",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const r=document.createElement("button");r.textContent="×",Object.assign(r.style,{position:"absolute",top:"16px",right:"16px",width:"40px",height:"40px",border:"none",borderRadius:"50%",background:"rgba(255,255,255,0.15)",color:"#fff",fontSize:"24px",cursor:"pointer",padding:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 150ms ease",zIndex:"1"}),r.addEventListener("mouseenter",()=>{r.style.background="rgba(255,255,255,0.3)"}),r.addEventListener("mouseleave",()=>{r.style.background="rgba(255,255,255,0.15)"}),r.addEventListener("click",d=>{d.stopPropagation(),m.close()}),n.appendChild(r);const a=document.createElement("img");if(a.src=m.urls[m.currentIndex],a.alt="Lightbox image",Object.assign(a.style,{maxWidth:"90vw",maxHeight:"85vh",borderRadius:"8px",objectFit:"contain",cursor:"default",userSelect:"none",transition:"opacity 150ms ease"}),a.addEventListener("click",d=>d.stopPropagation()),n.appendChild(a),m.imgEl=a,s){const d=document.createElement("button");d.innerHTML='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15,18 9,12 15,6"/></svg>',Object.assign(d.style,{...ht,left:"16px"}),d.addEventListener("mouseenter",()=>{d.style.background="rgba(255,255,255,0.3)"}),d.addEventListener("mouseleave",()=>{d.style.background="rgba(255,255,255,0.15)"}),d.addEventListener("click",u=>{u.stopPropagation(),m.navigate(-1)}),n.appendChild(d),m.prevBtn=d;const c=document.createElement("button");c.innerHTML='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9,18 15,12 9,6"/></svg>',Object.assign(c.style,{...ht,right:"16px"}),c.addEventListener("mouseenter",()=>{c.style.background="rgba(255,255,255,0.3)"}),c.addEventListener("mouseleave",()=>{c.style.background="rgba(255,255,255,0.15)"}),c.addEventListener("click",u=>{u.stopPropagation(),m.navigate(1)}),n.appendChild(c),m.nextBtn=c;const h=document.createElement("span");Object.assign(h.style,{position:"absolute",bottom:"20px",left:"50%",transform:"translateX(-50%)",color:"rgba(255,255,255,0.7)",fontSize:"13px",fontWeight:"500",pointerEvents:"none"}),n.appendChild(h),m.counterEl=h,m.updateNav()}n.addEventListener("click",()=>m.close());const l=d=>{d.key==="Escape"&&m.close(),s&&d.key==="ArrowLeft"&&m.navigate(-1),s&&d.key==="ArrowRight"&&m.navigate(1)};document.addEventListener("keydown",l),m.overlay=n,m.onKeyDown=l,document.body.appendChild(n),requestAnimationFrame(()=>{n.style.opacity="1"})}static navigate(e){const t=m.urls.length;m.currentIndex=(m.currentIndex+e+t)%t,m.imgEl&&(m.imgEl.style.opacity="0",setTimeout(()=>{m.imgEl&&(m.imgEl.src=m.urls[m.currentIndex],m.imgEl.style.opacity="1")},100)),m.updateNav()}static updateNav(){const e=m.currentIndex,t=m.urls.length;m.counterEl&&(m.counterEl.textContent=`${e+1} / ${t}`)}static close(){if(!m.overlay)return;const e=m.overlay;m.onKeyDown&&(document.removeEventListener("keydown",m.onKeyDown),m.onKeyDown=null),e.style.opacity="0",e.addEventListener("transitionend",()=>e.remove()),m.overlay=null,m.imgEl=null,m.prevBtn=null,m.nextBtn=null,m.counterEl=null,m.urls=[],m.currentIndex=0}};m.overlay=null,m.onKeyDown=null,m.urls=[],m.currentIndex=0,m.imgEl=null,m.prevBtn=null,m.nextBtn=null,m.counterEl=null;let xe=m;class te{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)}pickFile(e){return new Promise(t=>{this.input.accept=e,this.input.value="";const i=()=>{n(),t(null)},s=async()=>{var a;n();const r=(a=this.input.files)==null?void 0:a[0];if(!r){t(null);return}this.uploading=!0;try{const l=await this.client.uploadFile(r);t(l)}catch(l){console.error("[Pulse] File upload failed:",l),t(null)}finally{this.uploading=!1}},n=()=>{this.input.removeEventListener("change",s),this.input.removeEventListener("cancel",i)};this.input.addEventListener("change",s,{once:!0}),this.input.addEventListener("cancel",i,{once:!0}),this.input.click()})}pickFiles(e,t){return new Promise(i=>{this.input.accept=e,this.input.multiple=!0,this.input.value="";const s=()=>{r(),i([])},n=async()=>{r();const a=this.input.files;if(!a||a.length===0){i([]);return}const l=Array.from(a).slice(0,t);this.uploading=!0;try{const d=await Promise.all(l.map(async c=>{try{return await this.client.uploadFile(c)}catch(h){return console.error("[Pulse] File upload failed:",h),null}}));i(d.filter(c=>c!==null))}finally{this.uploading=!1,this.input.multiple=!1}},r=()=>{this.input.removeEventListener("change",n),this.input.removeEventListener("cancel",s)};this.input.addEventListener("change",n,{once:!0}),this.input.addEventListener("cancel",s,{once:!0}),this.input.click()})}async uploadBlob(e,t){this.uploading=!0;try{const i=new File([e],t,{type:e.type});return await this.client.uploadFile(i)}catch(i){return console.error("[Pulse] Blob upload failed:",i),null}finally{this.uploading=!1}}destroy(){this.input.remove()}}const ts="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";class Oe{constructor(e){this.dropdown=null,this.target=null,this.mentionStart=-1,this.selectedIndex=0,this.filteredUsers=[],this.handleInput=()=>{var d;if(!this.target)return;const t=this.target.value,i=this.target.selectionStart??t.length,s=t.slice(0,i),n=s.lastIndexOf("@");if(n===-1||n>0&&/\w/.test(s[n-1])){this.close();return}const r=s.slice(n+1).toLowerCase();if(r.includes(" ")){this.close();return}this.mentionStart=n;const a=(d=this.client.state.user)==null?void 0:d.id,l=new Set(this.client.state.presence.map(c=>c.user.id));if(this.filteredUsers=this.client.state.users.filter(c=>c.id!==a&&c.name.toLowerCase().includes(r)).sort((c,h)=>{const u=l.has(c.id)?0:1,f=l.has(h.id)?0:1;return u-f||c.name.localeCompare(h.name)}).slice(0,5),this.filteredUsers.length===0){this.close();return}this.selectedIndex=0,this.showDropdown()},this.handleKeydown=t=>{this.dropdown&&(t.key==="ArrowDown"?(t.preventDefault(),this.selectedIndex=Math.min(this.selectedIndex+1,this.filteredUsers.length-1),this.renderItems()):t.key==="ArrowUp"?(t.preventDefault(),this.selectedIndex=Math.max(this.selectedIndex-1,0),this.renderItems()):t.key==="Enter"&&this.dropdown?(t.preventDefault(),t.stopPropagation(),this.selectUser(this.filteredUsers[this.selectedIndex])):t.key==="Escape"&&this.close())},this.handleBlur=()=>{setTimeout(()=>this.close(),150)},this.client=e}attach(e){this.target=e,e.addEventListener("input",this.handleInput),e.addEventListener("keydown",this.handleKeydown),e.addEventListener("blur",this.handleBlur)}detach(){this.target&&(this.target.removeEventListener("input",this.handleInput),this.target.removeEventListener("keydown",this.handleKeydown),this.target.removeEventListener("blur",this.handleBlur),this.target=null),this.close()}selectUser(e){if(!this.target)return;const t=this.target.value,i=this.target.selectionStart??t.length,s=e.name.split(" ")[0],n=t.slice(0,this.mentionStart),r=t.slice(i);this.target.value=`${n}@${s} ${r}`;const a=this.mentionStart+s.length+2;this.target.setSelectionRange(a,a),this.target.focus(),this.target.dispatchEvent(new Event("input",{bubbles:!0})),this.close()}showDropdown(){if(!this.target)return;this.dropdown||(this.dropdown=document.createElement("div"),Object.assign(this.dropdown.style,{position:"absolute",zIndex:"100002",background:"#fff",border:"1px solid #e2e8f0",borderRadius:"8px",boxShadow:"0 4px 16px rgba(0,0,0,0.12)",overflow:"hidden",fontFamily:ts,minWidth:"160px",maxWidth:"220px"}),document.body.appendChild(this.dropdown));const e=this.target.getBoundingClientRect();this.dropdown.style.left=`${e.left}px`,this.dropdown.style.top=`${e.bottom+4}px`,this.renderItems()}renderItems(){if(!this.dropdown)return;const e=new Set(this.client.state.presence.map(t=>t.user.id));this.dropdown.innerHTML=this.filteredUsers.map((t,i)=>{const s=t.name.split(" ").map(a=>a[0]).join("").toUpperCase().slice(0,2),n=i===this.selectedIndex,r=e.has(t.id);return`
+          <div class="mention-item" data-index="${i}" style="
             display:flex;align-items:center;gap:8px;padding:6px 10px;
             cursor:pointer;font-size:13px;
-            background:${s?"#f1f5f9":"#fff"};
+            background:${n?"#f1f5f9":"#fff"};
             transition:background 0.1s;
           ">
-            <div style="
-              width:24px;height:24px;border-radius:50%;
-              background:${e.color};color:#fff;
-              display:flex;align-items:center;justify-content:center;
-              font-size:10px;font-weight:700;flex-shrink:0;
-            ">${e.avatar?`<img src="${e.avatar}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;" />`:i}</div>
-            <span style="color:#0f172a;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${this.escapeHtml(e.name)}</span>
+            <div style="position:relative;flex-shrink:0;">
+              <div style="
+                width:24px;height:24px;border-radius:50%;
+                background:${t.color};color:#fff;
+                display:flex;align-items:center;justify-content:center;
+                font-size:10px;font-weight:700;
+              ">${t.avatar?`<img src="${t.avatar}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;" />`:s}</div>
+              ${r?'<div style="position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#22c55e;border:1.5px solid #fff;"></div>':""}
+            </div>
+            <span style="color:#0f172a;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${this.escapeHtml(t.name)}</span>
           </div>
-        `}).join(""),this.dropdown.querySelectorAll(".mention-item").forEach(e=>{e.addEventListener("mousedown",t=>{t.preventDefault();const i=parseInt(e.dataset.index,10);this.selectUser(this.filteredUsers[i])}),e.addEventListener("mouseenter",()=>{this.selectedIndex=parseInt(e.dataset.index,10),this.renderItems()})}))}close(){var e;(e=this.dropdown)==null||e.remove(),this.dropdown=null,this.mentionStart=-1,this.filteredUsers=[]}escapeHtml(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}}const is=["👍","👎","❤️","🎉","👀","🚀"],pe="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",ss='<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>',ns='<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="
+        `}).join(""),this.dropdown.querySelectorAll(".mention-item").forEach(t=>{t.addEventListener("mousedown",i=>{i.preventDefault();const s=parseInt(t.dataset.index,10);this.selectUser(this.filteredUsers[s])}),t.addEventListener("mouseenter",()=>{this.selectedIndex=parseInt(t.dataset.index,10),this.renderItems()})})}close(){var e;(e=this.dropdown)==null||e.remove(),this.dropdown=null,this.mentionStart=-1,this.filteredUsers=[]}escapeHtml(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}}const is=["👍","👎","❤️","🎉","👀","🚀"],pe="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",ss='<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>',ns='<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="
   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;

package/dist/pulse-elements.js

@@ -3885,7 +3885,7 @@ const ls = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
 class He {
   constructor(e) {
     this.dropdown = null, this.target = null, this.mentionStart = -1, this.selectedIndex = 0, this.filteredUsers = [], this.handleInput = () => {
-      var l;
+      var d;
       if (!this.target) return;
       const t = this.target.value, i = this.target.selectionStart ?? t.length, s = t.slice(0, i), o = s.lastIndexOf("@");
       if (o === -1 || o > 0 && /\w/.test(s[o - 1])) {
@@ -3898,8 +3898,11 @@ class He {
         return;
       }
       this.mentionStart = o;
-      const a = (l = this.client.state.user) == null ? void 0 : l.id;
-      if (this.filteredUsers = this.client.state.users.filter((d) => d.id !== a && d.name.toLowerCase().includes(r)).slice(0, 5), this.filteredUsers.length === 0) {
+      const a = (d = this.client.state.user) == null ? void 0 : d.id, l = new Set(this.client.state.presence.map((c) => c.user.id));
+      if (this.filteredUsers = this.client.state.users.filter((c) => c.id !== a && c.name.toLowerCase().includes(r)).sort((c, h) => {
+        const u = l.has(c.id) ? 0 : 1, f = l.has(h.id) ? 0 : 1;
+        return u - f || c.name.localeCompare(h.name);
+      }).slice(0, 5), this.filteredUsers.length === 0) {
         this.close();
         return;
       }
@@ -3943,33 +3946,38 @@ class He {
     this.dropdown.style.left = `${e.left}px`, this.dropdown.style.top = `${e.bottom + 4}px`, this.renderItems();
   }
   renderItems() {
-    this.dropdown && (this.dropdown.innerHTML = this.filteredUsers.map((e, t) => {
-      const i = e.name.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2), s = t === this.selectedIndex;
+    if (!this.dropdown) return;
+    const e = new Set(this.client.state.presence.map((t) => t.user.id));
+    this.dropdown.innerHTML = this.filteredUsers.map((t, i) => {
+      const s = t.name.split(" ").map((a) => a[0]).join("").toUpperCase().slice(0, 2), o = i === this.selectedIndex, r = e.has(t.id);
       return `
-          <div class="mention-item" data-index="${t}" style="
+          <div class="mention-item" data-index="${i}" style="
             display:flex;align-items:center;gap:8px;padding:6px 10px;
             cursor:pointer;font-size:13px;
-            background:${s ? "#f1f5f9" : "#fff"};
+            background:${o ? "#f1f5f9" : "#fff"};
             transition:background 0.1s;
           ">
-            <div style="
-              width:24px;height:24px;border-radius:50%;
-              background:${e.color};color:#fff;
-              display:flex;align-items:center;justify-content:center;
-              font-size:10px;font-weight:700;flex-shrink:0;
-            ">${e.avatar ? `<img src="${e.avatar}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;" />` : i}</div>
-            <span style="color:#0f172a;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${this.escapeHtml(e.name)}</span>
+            <div style="position:relative;flex-shrink:0;">
+              <div style="
+                width:24px;height:24px;border-radius:50%;
+                background:${t.color};color:#fff;
+                display:flex;align-items:center;justify-content:center;
+                font-size:10px;font-weight:700;
+              ">${t.avatar ? `<img src="${t.avatar}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;" />` : s}</div>
+              ${r ? '<div style="position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#22c55e;border:1.5px solid #fff;"></div>' : ""}
+            </div>
+            <span style="color:#0f172a;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${this.escapeHtml(t.name)}</span>
           </div>
         `;
-    }).join(""), this.dropdown.querySelectorAll(".mention-item").forEach((e) => {
-      e.addEventListener("mousedown", (t) => {
-        t.preventDefault();
-        const i = parseInt(e.dataset.index, 10);
-        this.selectUser(this.filteredUsers[i]);
-      }), e.addEventListener("mouseenter", () => {
-        this.selectedIndex = parseInt(e.dataset.index, 10), this.renderItems();
+    }).join(""), this.dropdown.querySelectorAll(".mention-item").forEach((t) => {
+      t.addEventListener("mousedown", (i) => {
+        i.preventDefault();
+        const s = parseInt(t.dataset.index, 10);
+        this.selectUser(this.filteredUsers[s]);
+      }), t.addEventListener("mouseenter", () => {
+        this.selectedIndex = parseInt(t.dataset.index, 10), this.renderItems();
       });
-    }));
+    });
   }
   close() {
     var e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gamention/pulse-elements",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Drop-in web components for real-time collaboration — comments, cursors, presence, drawing, and more",
   "type": "module",
   "main": "./dist/pulse-elements.cjs",