@gamention/pulse-elements 0.1.23 → 0.1.24

package/dist/pulse-elements.cjs

@@ -1262,7 +1262,7 @@
     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.isSelecting=!1,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.length>30){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"||t.key==="Tab")&&this.filteredUsers.length>0?(t.preventDefault(),t.stopPropagation(),this.selectUser(this.filteredUsers[this.selectedIndex])):t.key==="Escape"&&(t.preventDefault(),this.close()))},this.handleBlur=()=>{this.isSelecting||setTimeout(()=>{this.isSelecting||this.close()},200)},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.replace(/\s+/g,"_"),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.isSelecting=!1,this.close()}showDropdown(){if(!this.target)return;this.dropdown||(this.dropdown=document.createElement("div"),Object.assign(this.dropdown.style,{position:"fixed",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:"180px",maxWidth:"240px"}),document.body.appendChild(this.dropdown));const e=this.target.getBoundingClientRect(),t=this.filteredUsers.length*36+4,i=e.top,s=window.innerHeight-e.bottom;s>=t+4||s>i?(this.dropdown.style.top=`${e.bottom+4}px`,this.dropdown.style.bottom=""):(this.dropdown.style.bottom=`${window.innerHeight-e.top+4}px`,this.dropdown.style.top=""),this.dropdown.style.left=`${e.left}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`
+`;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.isSelecting=!1,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.length>30){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"||t.key==="Tab")&&this.filteredUsers.length>0?(t.preventDefault(),t.stopPropagation(),this.selectUser(this.filteredUsers[this.selectedIndex])):t.key==="Escape"&&(t.preventDefault(),this.close()))},this.handleBlur=()=>{this.isSelecting||setTimeout(()=>{this.isSelecting||this.close()},200)},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.replace(/\s+/g,"_"),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.isSelecting=!1,this.close()}showDropdown(){if(!this.target)return;this.dropdown||(this.dropdown=document.createElement("div"),this.dropdown.classList.add("pulse-mention-picker"),Object.assign(this.dropdown.style,{position:"fixed",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:"180px",maxWidth:"240px"}),this.dropdown.addEventListener("pointerdown",n=>n.stopPropagation()),this.dropdown.addEventListener("mousedown",n=>n.stopPropagation()),document.body.appendChild(this.dropdown));const e=this.target.getBoundingClientRect(),t=this.filteredUsers.length*36+4,i=e.top,s=window.innerHeight-e.bottom;s>=t+4||s>i?(this.dropdown.style.top=`${e.bottom+4}px`,this.dropdown.style.bottom=""):(this.dropdown.style.bottom=`${window.innerHeight-e.top+4}px`,this.dropdown.style.top=""),this.dropdown.style.left=`${e.left}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:8px 12px;
             cursor:pointer;font-size:13px;

package/dist/pulse-elements.js

@@ -887,9 +887,9 @@ G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[ne("elementPrope
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const oe = globalThis, nt = (n) => n, Ee = oe.trustedTypes, ot = Ee ? Ee.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, St = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, At = "?" + D, si = `<${At}>`, V = document, ae = () => V.createComment(""), le = (n) => n === null || typeof n != "object" && typeof n != "function", Ve = Array.isArray, ni = (n) => Ve(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Me = `[ 	
+const oe = globalThis, nt = (n) => n, Ee = oe.trustedTypes, ot = Ee ? Ee.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, St = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, Pt = "?" + D, si = `<${Pt}>`, V = document, ae = () => V.createComment(""), le = (n) => n === null || typeof n != "object" && typeof n != "function", Ve = Array.isArray, ni = (n) => Ve(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Me = `[ 	
 \f\r]`, se = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, rt = /-->/g, at = />/g, N = RegExp(`>|${Me}(?:([^\\s"'>=/]+)(${Me}*=${Me}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), lt = /'/g, ct = /"/g, Pt = /^(?:script|style|textarea|title)$/i, _t = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), p = _t(1), oi = _t(2), W = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), dt = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), lt = /'/g, ct = /"/g, At = /^(?:script|style|textarea|title)$/i, _t = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), p = _t(1), oi = _t(2), W = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), dt = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
 function It(n, e) {
   if (!Ve(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ot !== void 0 ? ot.createHTML(e) : e;
@@ -900,7 +900,7 @@ const ri = (n, e) => {
   for (let a = 0; a < t; a++) {
     const l = n[a];
     let d, c, h = -1, u = 0;
-    for (; u < l.length && (r.lastIndex = u, c = r.exec(l), c !== null); ) u = r.lastIndex, r === se ? c[1] === "!--" ? r = rt : c[1] !== void 0 ? r = at : c[2] !== void 0 ? (Pt.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = N) : c[3] !== void 0 && (r = N) : r === N ? c[0] === ">" ? (r = s ?? se, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, d = c[1], r = c[3] === void 0 ? N : c[3] === '"' ? ct : lt) : r === ct || r === lt ? r = N : r === rt || r === at ? r = se : (r = N, s = void 0);
+    for (; u < l.length && (r.lastIndex = u, c = r.exec(l), c !== null); ) u = r.lastIndex, r === se ? c[1] === "!--" ? r = rt : c[1] !== void 0 ? r = at : c[2] !== void 0 ? (At.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = N) : c[3] !== void 0 && (r = N) : r === N ? c[0] === ">" ? (r = s ?? se, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, d = c[1], r = c[3] === void 0 ? N : c[3] === '"' ? ct : lt) : r === ct || r === lt ? r = N : r === rt || r === at ? r = se : (r = N, s = void 0);
     const f = r === N && n[a + 1].startsWith("/>") ? " " : "";
     o += r === se ? l + si : h >= 0 ? (i.push(d), l.slice(0, h) + St + l.slice(h) + D + f) : l + D + (h === -2 ? a : f);
   }
@@ -922,7 +922,7 @@ class ce {
           const u = c[r++], f = s.getAttribute(h).split(D), b = /([.?@])?(.*)/.exec(u);
           l.push({ type: 1, index: o, name: b[2], strings: f, ctor: b[1] === "." ? li : b[1] === "?" ? ci : b[1] === "@" ? di : Se }), s.removeAttribute(h);
         } else h.startsWith(D) && (l.push({ type: 6, index: o }), s.removeAttribute(h));
-        if (Pt.test(s.tagName)) {
+        if (At.test(s.tagName)) {
           const h = s.textContent.split(D), u = h.length - 1;
           if (u > 0) {
             s.textContent = Ee ? Ee.emptyScript : "";
@@ -930,7 +930,7 @@ class ce {
             s.append(h[u], ae());
           }
         }
-      } else if (s.nodeType === 8) if (s.data === At) l.push({ type: 2, index: o });
+      } else if (s.nodeType === 8) if (s.data === Pt) l.push({ type: 2, index: o });
       else {
         let h = -1;
         for (; (h = s.data.indexOf(D, h + 1)) !== -1; ) l.push({ type: 7, index: o }), h += D.length - 1;
@@ -1250,7 +1250,7 @@ ee([
 X = ee([
   L("pulse-provider")
 ], X);
-var vi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Ae = (n, e, t, i) => {
+var vi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Pe = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? bi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && vi(e, t, s), s;
@@ -1403,17 +1403,17 @@ Z.styles = O`
       opacity: 1;
     }
   `;
-Ae([
+Pe([
   fe({ context: Q, subscribe: !0 }),
   w({ attribute: !1 })
 ], Z.prototype, "client", 2);
-Ae([
+Pe([
   w({ type: Number, attribute: "max-visible" })
 ], Z.prototype, "maxVisible", 2);
-Ae([
+Pe([
   k()
 ], Z.prototype, "users", 2);
-Z = Ae([
+Z = Pe([
   L("pulse-presence")
 ], Z);
 var xi = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, We = (n, e, t, i) => {
@@ -2148,12 +2148,12 @@ Xe([
 he = Xe([
   L("pulse-notifications")
 ], he);
-var Si = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, te = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? Ai(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var Si = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, te = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Pi(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 && Si(e, t, s), s;
 };
-const Pi = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
+const Ai = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
 let B = class extends _ {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
@@ -2215,7 +2215,7 @@ let B = class extends _ {
         </button>
         ${this.showPicker ? p`
               <div class="picker">
-                ${Pi.map(
+                ${Ai.map(
       (e) => p`
                     <button @click=${() => this.addEmoji(e)}>
                       ${e}
@@ -2707,7 +2707,7 @@ const ie = O`
     width: 18px;
     height: 18px;
   }
-`, Pe = O`
+`, Ae = O`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2809,7 +2809,7 @@ let K = class extends _ {
 K.styles = [
   ie,
   be,
-  Pe,
+  Ae,
   O`
       :host {
         display: block;
@@ -3253,7 +3253,7 @@ const Zi = 180, Qi = 120, es = "#e2e8f0", ts = `
 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
   <polyline points="15,3 21,3 21,9"/><line x1="21" y1="3" x2="14" y2="10"/>
   <polyline points="9,21 3,21 3,15"/><line x1="3" y1="21" x2="10" y2="14"/>
-</svg>`, A = class A {
+</svg>`, P = class P {
   /**
    * Renders an inline rectangular video player and returns the root container.
    * @param url - Video source URL
@@ -3334,7 +3334,7 @@ const Zi = 180, Qi = 120, es = "#e2e8f0", ts = `
     }), d.addEventListener("mouseleave", () => {
       d.style.background = "rgba(0,0,0,0.45)";
     }), d.addEventListener("click", (u) => {
-      u.stopPropagation(), A.openFullscreen(e, t);
+      u.stopPropagation(), P.openFullscreen(e, t);
     }), o.appendChild(d);
     function c() {
       a.style.opacity = i ? "0" : "1";
@@ -3350,7 +3350,7 @@ const Zi = 180, Qi = 120, es = "#e2e8f0", ts = `
     }), o;
   }
   static openFullscreen(e, t) {
-    A.closeFullscreen();
+    P.closeFullscreen();
     const i = document.createElement("div");
     Object.assign(i.style, {
       position: "fixed",
@@ -3392,7 +3392,7 @@ const Zi = 180, Qi = 120, es = "#e2e8f0", ts = `
     }), s.addEventListener("mouseleave", () => {
       s.style.background = "rgba(255,255,255,0.15)";
     }), s.addEventListener("click", (a) => {
-      a.stopPropagation(), A.closeFullscreen();
+      a.stopPropagation(), P.closeFullscreen();
     });
     const o = document.createElement("video");
     Object.assign(o.style, {
@@ -3401,24 +3401,24 @@ const Zi = 180, Qi = 120, es = "#e2e8f0", ts = `
       borderRadius: "8px",
       outline: "none",
       cursor: "default"
-    }), o.src = e, o.controls = !0, o.autoplay = !0, o.playsInline = !0, t && (o.poster = t), o.addEventListener("click", (a) => a.stopPropagation()), i.appendChild(s), i.appendChild(o), i.addEventListener("click", () => A.closeFullscreen());
+    }), o.src = e, o.controls = !0, o.autoplay = !0, o.playsInline = !0, t && (o.poster = t), o.addEventListener("click", (a) => a.stopPropagation()), i.appendChild(s), i.appendChild(o), i.addEventListener("click", () => P.closeFullscreen());
     const r = (a) => {
-      a.key === "Escape" && A.closeFullscreen();
+      a.key === "Escape" && P.closeFullscreen();
     };
-    document.addEventListener("keydown", r), A.fullscreenOverlay = i, A.fullscreenKeyHandler = r, document.body.appendChild(i), requestAnimationFrame(() => {
+    document.addEventListener("keydown", r), P.fullscreenOverlay = i, P.fullscreenKeyHandler = r, document.body.appendChild(i), requestAnimationFrame(() => {
       i.style.opacity = "1";
     });
   }
   static closeFullscreen() {
-    if (!A.fullscreenOverlay) return;
-    const e = A.fullscreenOverlay;
-    A.fullscreenKeyHandler && (document.removeEventListener("keydown", A.fullscreenKeyHandler), A.fullscreenKeyHandler = null);
+    if (!P.fullscreenOverlay) return;
+    const e = P.fullscreenOverlay;
+    P.fullscreenKeyHandler && (document.removeEventListener("keydown", P.fullscreenKeyHandler), P.fullscreenKeyHandler = null);
     const t = e.querySelector("video");
-    t && t.pause(), e.style.opacity = "0", e.addEventListener("transitionend", () => e.remove()), A.fullscreenOverlay = null;
+    t && t.pause(), e.style.opacity = "0", e.addEventListener("transitionend", () => e.remove()), P.fullscreenOverlay = null;
   }
 };
-A.fullscreenOverlay = null, A.fullscreenKeyHandler = null;
-let Ce = A;
+P.fullscreenOverlay = null, P.fullscreenKeyHandler = null;
+let Ce = P;
 const gt = 60, ns = `
   .vr-overlay {
     display: flex;
@@ -3932,7 +3932,7 @@ class He {
   }
   showDropdown() {
     if (!this.target) return;
-    this.dropdown || (this.dropdown = document.createElement("div"), Object.assign(this.dropdown.style, {
+    this.dropdown || (this.dropdown = document.createElement("div"), this.dropdown.classList.add("pulse-mention-picker"), Object.assign(this.dropdown.style, {
       position: "fixed",
       zIndex: "100002",
       background: "#fff",
@@ -3943,7 +3943,7 @@ class He {
       fontFamily: ls,
       minWidth: "180px",
       maxWidth: "240px"
-    }), document.body.appendChild(this.dropdown));
+    }), this.dropdown.addEventListener("pointerdown", (o) => o.stopPropagation()), this.dropdown.addEventListener("mousedown", (o) => o.stopPropagation()), document.body.appendChild(this.dropdown));
     const e = this.target.getBoundingClientRect(), t = this.filteredUsers.length * 36 + 4, i = e.top, s = window.innerHeight - e.bottom;
     s >= t + 4 || s > i ? (this.dropdown.style.top = `${e.bottom + 4}px`, this.dropdown.style.bottom = "") : (this.dropdown.style.bottom = `${window.innerHeight - e.top + 4}px`, this.dropdown.style.top = ""), this.dropdown.style.left = `${e.left}px`, this.renderItems();
   }
@@ -5083,7 +5083,7 @@ let I = class extends _ {
 I.styles = [
   ie,
   be,
-  Pe,
+  Ae,
   O`
       :host {
         display: block;
@@ -5764,7 +5764,7 @@ let pe = class extends _ {
 pe.styles = [
   ie,
   be,
-  Pe,
+  Ae,
   O`
       :host {
         display: block;
@@ -6451,7 +6451,7 @@ let ue = class extends _ {
 ue.styles = [
   ie,
   be,
-  Pe,
+  Ae,
   O`
       :host {
         display: block;
@@ -6644,7 +6644,7 @@ const $e = {
   showSelections: !0,
   showDrawings: !0
 }, Rt = "pulse:settings:";
-function As(n) {
+function Ps(n) {
   try {
     const e = localStorage.getItem(`${Rt}${n}`);
     return e ? { ...$e, ...JSON.parse(e) } : { ...$e };
@@ -6652,7 +6652,7 @@ function As(n) {
     return { ...$e };
   }
 }
-function Ps(n, e) {
+function As(n, e) {
   localStorage.setItem(`${Rt}${n}`, JSON.stringify(e));
 }
 var _s = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
@@ -7153,7 +7153,7 @@ class Ms {
     return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
   }
 }
-var Os = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, P = (n, e, t, i) => {
+var Os = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, A = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? Rs(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Os(e, t, s), s;
@@ -7217,7 +7217,7 @@ let C = class extends _ {
       onPinModeExit: () => {
         this.pinModeActive = !1;
       }
-    }), this.viewportOverlay = new Ms(this.client), this.selectionOverlay = new Cs(this.client), this.drawingOverlay = new $s(this.client), this.settings = As(this.room), this.applySettings(this.settings), this.unsubs.push(
+    }), this.viewportOverlay = new Ms(this.client), this.selectionOverlay = new Cs(this.client), this.drawingOverlay = new $s(this.client), this.settings = Ps(this.room), this.applySettings(this.settings), this.unsubs.push(
       this.client.state.on("auth", () => {
         var e, t;
         this.envConfig = this.client.state.config, this.envConfig.showCursors || (e = this.cursorOverlay) == null || e.disable(), !this.envConfig.allowDrawing && this.drawModeActive && ((t = this.drawingOverlay) == null || t.disableDrawMode(), this.drawModeActive = !1);
@@ -7291,7 +7291,7 @@ let C = class extends _ {
   }
   handleSettingsChange(n) {
     const e = n.detail;
-    this.settings = e, Ps(this.room, e), this.applySettings(e);
+    this.settings = e, As(this.room, e), this.applySettings(e);
   }
   applySettings(n) {
     var e, t, i, s, o, r, a, l, d, c, h, u, f, b, x, y, v;
@@ -7618,55 +7618,55 @@ C.styles = [
       }
     `
 ];
-P([
+A([
   w({ attribute: "api-key" })
 ], C.prototype, "apiKey", 2);
-P([
+A([
   w()
 ], C.prototype, "token", 2);
-P([
+A([
   w()
 ], C.prototype, "room", 2);
-P([
+A([
   w()
 ], C.prototype, "endpoint", 2);
-P([
+A([
   w({ reflect: !0 })
 ], C.prototype, "position", 2);
-P([
+A([
   w({ reflect: !0 })
 ], C.prototype, "display", 2);
-P([
+A([
   k()
 ], C.prototype, "collapsed", 2);
-P([
+A([
   k()
 ], C.prototype, "activePanel", 2);
-P([
+A([
   k()
 ], C.prototype, "pinModeActive", 2);
-P([
+A([
   k()
 ], C.prototype, "highlightThreadId", 2);
-P([
+A([
   k()
 ], C.prototype, "settings", 2);
-P([
+A([
   k()
 ], C.prototype, "followingUserId", 2);
-P([
+A([
   k()
 ], C.prototype, "drawModeActive", 2);
-P([
+A([
   k()
 ], C.prototype, "connectionState", 2);
-P([
+A([
   k()
 ], C.prototype, "showConnectedFlash", 2);
-P([
+A([
   k()
 ], C.prototype, "envConfig", 2);
-C = P([
+C = A([
   L("pulse-widget")
 ], C);
 export {

package/package.json

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