@gamention/pulse-elements 0.1.17 → 0.1.18

package/dist/pulse-elements.cjs

@@ -2859,7 +2859,7 @@
           height: 32px;
         }
       }
-    `];j([x({attribute:!1})],R.prototype,"client",2);j([x({type:Boolean})],R.prototype,"collapsed",2);j([x()],R.prototype,"activePanel",2);j([x({type:Boolean})],R.prototype,"pinModeActive",2);j([x({type:Boolean})],R.prototype,"featuresDisabled",2);j([x({type:Boolean})],R.prototype,"drawModeActive",2);j([x()],R.prototype,"followingUserId",2);j([x()],R.prototype,"display",2);j([$()],R.prototype,"users",2);j([$()],R.prototype,"unreadCount",2);R=j([L("pulse-widget-toolbar")],R);class vs{constructor(e){this.container=null,this.unsubs=[],this.enabled=!1,this.pillEls=new Map,this.client=e}enable(){this.enabled||(this.enabled=!0,this.container=document.createElement("div"),this.container.id="pulse-widget-viewports",Object.assign(this.container.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",pointerEvents:"none",zIndex:"9996"}),document.body.appendChild(this.container),this.unsubs.push(this.client.state.on("viewport",()=>{this.render()})),this.unsubs.push(this.client.state.on("presence",()=>{this.render()})),this.render())}disable(){var e;this.enabled&&(this.enabled=!1,this.unsubs.forEach(t=>t()),this.unsubs=[],(e=this.container)==null||e.remove(),this.container=null,this.pillEls.clear())}destroy(){this.disable()}render(){var r;if(!this.container)return;if(document.documentElement.scrollHeight<=window.innerHeight){for(const a of this.pillEls.values())a.remove();this.pillEls.clear();return}const e=window.scrollY,t=window.innerHeight,i=document.documentElement.scrollHeight,s=(r=this.client.state.user)==null?void 0:r.id,n=new Set;for(const[a,l]of this.client.state.viewports){if(a===s)continue;const d=l.scrollY,c=l.scrollY+l.viewportHeight,h=e,p=e+t;if(d>=h&&c<=p){const k=this.pillEls.get(a);k&&(k.style.display="none");continue}n.add(a);const m=this.client.state.presence.find(k=>k.user.id===a);if(!m)continue;const g=l.scrollY+l.viewportHeight/2,y=i>0?g/i:0,b=Math.max(8,Math.min(t-28,y*t));let w=this.pillEls.get(a);w||(w=document.createElement("div"),Object.assign(w.style,{position:"absolute",right:"8px",padding:"2px 6px",borderRadius:"10px",fontSize:"10px",fontWeight:"700",color:"#fff",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",whiteSpace:"nowrap",pointerEvents:"none",transition:"top 0.3s ease"}),this.container.appendChild(w),this.pillEls.set(a,w)),w.style.display="",w.style.background=m.user.color,w.style.top=`${b}px`,w.textContent=this.getInitials(m.user.name)}for(const[a,l]of this.pillEls)!n.has(a)&&!this.client.state.viewports.has(a)&&(l.remove(),this.pillEls.delete(a))}getInitials(e){return e.split(" ").map(t=>t[0]).join("").toUpperCase().slice(0,2)}}var bs=Object.defineProperty,xs=Object.getOwnPropertyDescriptor,A=(o,e,t,i)=>{for(var s=i>1?void 0:i?xs(e,t):e,n=o.length-1,r;n>=0;n--)(r=o[n])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&bs(e,t,s),s};exports.PulseWidget=class extends T{constructor(){super(...arguments),this.apiKey="",this.token="",this.room="",this.position="bottom-right",this.display="floating",this.collapsed=!0,this.activePanel=null,this.pinModeActive=!1,this.highlightThreadId=null,this.settings={...me},this.followingUserId=null,this.drawModeActive=!1,this.connectionState="disconnected",this.showConnectedFlash=!1,this.unsubs=[],this.clientConfigKey="",this._isFollowScrolling=!1,this._viewportThrottleTimer=null,this._selectionThrottleTimer=null,this._connectedFlashTimer=null,this._wasDisconnected=!1,this.handleScroll=()=>{!this.settings.enabled||!this.client||this._isFollowScrolling||(this.followingUserId&&(this.followingUserId=null),!this._viewportThrottleTimer&&(this._viewportThrottleTimer=setTimeout(()=>{var e;this._viewportThrottleTimer=null,(e=this.client)==null||e.updateViewport({scrollX:window.scrollX,scrollY:window.scrollY,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,pageWidth:document.documentElement.scrollWidth,pageHeight:document.documentElement.scrollHeight})},200)))},this.handleSelectionChange=()=>{!this.settings.enabled||!this.settings.showSelections||!this.client||this._selectionThrottleTimer||(this._selectionThrottleTimer=setTimeout(()=>{var i,s;this._selectionThrottleTimer=null;const e=window.getSelection();if(!e||e.isCollapsed){(i=this.client)==null||i.updateSelection(null);return}const t=ls(e);(s=this.client)==null||s.updateSelection(t)},500))},this.handleDocumentClick=e=>{var t;this.settings.enabled&&this.settings.showMyClicks&&(this.contains(e.target)||(t=this.client)==null||t.performClick({x:e.clientX,y:e.clientY,pageX:e.pageX,pageY:e.pageY}))},this.handleKeydown=e=>{var t,i;e.key==="Escape"&&(this.drawModeActive?((t=this.drawingOverlay)==null||t.disableDrawMode(),this.drawModeActive=!1):this.followingUserId?this.followingUserId=null:this.pinModeActive?((i=this.commentPins)==null||i.exitPinMode(),this.pinModeActive=!1):this.activePanel&&(this.activePanel=null,this.highlightThreadId=null))}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("pointerup",this.handleDocumentClick),this.apiKey&&this.token&&this.room&&this.initClient()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("pointerup",this.handleDocumentClick),this.teardownClient()}getConfigKey(){return`${this.apiKey}\0${this.token}\0${this.room}\0${this.endpoint??""}`}initClient(){const e={apiKey:this.apiKey,token:this.token,room:this.room,endpoint:this.endpoint};this.client=new mt(e),this.clientConfigKey=this.getConfigKey(),this.cursorOverlay=new rs(this.client),this.commentPins=new Ji(this.client,{onPinModeExit:()=>{this.pinModeActive=!1}}),this.viewportOverlay=new vs(this.client),this.selectionOverlay=new ds(this.client),this.drawingOverlay=new as(this.client),this.settings=us(this.room),this.applySettings(this.settings),this.unsubs.push(this.client.on("connection",t=>{this.connectionState=t,t==="connected"&&this._wasDisconnected?(this.showConnectedFlash=!0,this._connectedFlashTimer&&clearTimeout(this._connectedFlashTimer),this._connectedFlashTimer=setTimeout(()=>{this.showConnectedFlash=!1,this._connectedFlashTimer=null},2e3),this._wasDisconnected=!1):(t==="connecting"||t==="disconnected")&&(this._wasDisconnected=!0,this.showConnectedFlash=!1,this._connectedFlashTimer&&(clearTimeout(this._connectedFlashTimer),this._connectedFlashTimer=null))})),this.unsubs.push(this.client.state.on("click",({userId:t,position:i})=>{var s;this.settings.showOthersClicks&&((s=this.cursorOverlay)!=null&&s.isEnabled)&&this.cursorOverlay.showClickRipple(t,i)})),this.unsubs.push(this.client.state.on("viewport",({userId:t})=>{if(this.followingUserId===t){const i=this.client.state.getViewport(t);i&&(this._isFollowScrolling=!0,window.scrollTo({top:i.scrollY,left:i.scrollX,behavior:"smooth"}),setTimeout(()=>{this._isFollowScrolling=!1},500))}})),window.addEventListener("scroll",this.handleScroll),document.addEventListener("selectionchange",this.handleSelectionChange),this.client.connect()}teardownClient(){var e,t,i,s,n,r;this.unsubs.forEach(a=>a()),this.unsubs=[],window.removeEventListener("scroll",this.handleScroll),document.removeEventListener("selectionchange",this.handleSelectionChange),this._viewportThrottleTimer&&(clearTimeout(this._viewportThrottleTimer),this._viewportThrottleTimer=null),this._selectionThrottleTimer&&(clearTimeout(this._selectionThrottleTimer),this._selectionThrottleTimer=null),(e=this.cursorOverlay)==null||e.destroy(),(t=this.commentPins)==null||t.destroy(),(i=this.viewportOverlay)==null||i.destroy(),(s=this.selectionOverlay)==null||s.destroy(),(n=this.drawingOverlay)==null||n.destroy(),(r=this.client)==null||r.disconnect(),this.client=void 0,this.cursorOverlay=void 0,this.commentPins=void 0,this.viewportOverlay=void 0,this.selectionOverlay=void 0,this.drawingOverlay=void 0,this.clientConfigKey="",this.followingUserId=null,this.drawModeActive=!1,this.connectionState="disconnected",this.showConnectedFlash=!1,this._wasDisconnected=!1,this._connectedFlashTimer&&(clearTimeout(this._connectedFlashTimer),this._connectedFlashTimer=null)}handlePanelClose(){this.activePanel=null,this.highlightThreadId=null}handleToolbarAction(e){var i,s,n,r;const t=e.detail;if(!(!this.settings.enabled&&t!=="settings"))switch(t){case"comments":this.activePanel=this.activePanel==="comments"?null:"comments",this.highlightThreadId=null;break;case"settings":this.activePanel=this.activePanel==="settings"?null:"settings";break;case"notifications":this.activePanel=this.activePanel==="notifications"?null:"notifications";break;case"activity":this.activePanel=this.activePanel==="activity"?null:"activity";break;case"pin-mode":this.pinModeActive=!this.pinModeActive,this.pinModeActive?(i=this.commentPins)==null||i.enterPinMode():(s=this.commentPins)==null||s.exitPinMode();break;case"draw-mode":this.drawModeActive=!this.drawModeActive,this.drawModeActive?(n=this.drawingOverlay)==null||n.enableDrawMode():(r=this.drawingOverlay)==null||r.disableDrawMode();break}}handleFollow(e){const t=e.detail;this.followingUserId===t?this.followingUserId=null:this.followingUserId=t}handleSettingsChange(e){const t=e.detail;this.settings=t,fs(this.room,t),this.applySettings(t)}applySettings(e){var t,i,s,n,r,a,l,d,c,h,p,m,g,y,b,w,k;if(!e.enabled){(t=this.cursorOverlay)==null||t.disable(),(i=this.viewportOverlay)==null||i.disable(),(s=this.selectionOverlay)==null||s.disable(),(n=this.drawingOverlay)==null||n.disable(),this.drawModeActive&&((r=this.drawingOverlay)==null||r.disableDrawMode(),this.drawModeActive=!1),(a=this.client)==null||a.setAppearOffline(!0),(l=this.commentPins)==null||l.setVisible(!1),this.followingUserId=null,this.pinModeActive&&((d=this.commentPins)==null||d.exitPinMode(),this.pinModeActive=!1),this.activePanel=this.activePanel==="settings"?"settings":null,this.highlightThreadId=null;return}this.applyCursorSettings(e),(c=this.client)==null||c.setAppearOffline(e.appearOffline),(h=this.commentPins)==null||h.setVisible(e.showCommentPins),e.showViewportIndicators?(p=this.viewportOverlay)==null||p.enable():(m=this.viewportOverlay)==null||m.disable(),e.showSelections?(g=this.selectionOverlay)==null||g.enable():(y=this.selectionOverlay)==null||y.disable(),e.showDrawings?(b=this.drawingOverlay)==null||b.enable():((w=this.drawingOverlay)==null||w.disable(),this.drawModeActive&&((k=this.drawingOverlay)==null||k.disableDrawMode(),this.drawModeActive=!1))}applyCursorSettings(e){if(!this.cursorOverlay)return;e.showMyCursor||e.showOthersCursors?(this.cursorOverlay.enable(),this.cursorOverlay.setSending(e.showMyCursor),this.cursorOverlay.setReceiving(e.showOthersCursors)):this.cursorOverlay.disable()}updated(e){(e.has("room")||e.has("token")||e.has("apiKey")||e.has("endpoint"))&&this.apiKey&&this.token&&this.room&&this.getConfigKey()!==this.clientConfigKey&&(this.teardownClient(),this.initClient(),this.activePanel=null,this.highlightThreadId=null,this.pinModeActive=!1),(e.has("activePanel")||e.has("collapsed"))&&requestAnimationFrame(()=>this.positionPopups())}positionPopups(){var y,b,w,k;const e=this.display==="inline",t=(y=this.shadowRoot)==null?void 0:y.querySelector(".inline-trigger"),i=(b=this.shadowRoot)==null?void 0:b.querySelector("pulse-widget-toolbar"),s=e?t:i;if(!s)return;const n=s.getBoundingClientRect(),r=window.innerWidth,a=window.innerHeight,l=8,d=(w=this.shadowRoot)==null?void 0:w.querySelector(".toolbar-popover");if(d){Object.assign(d.style,{top:"auto",left:"auto"});const _=d.getBoundingClientRect(),M=this.computePosition(n,_,r,a,l);d.style.top=`${M.top}px`,d.style.left=`${M.left}px`}const c=(k=this.shadowRoot)==null?void 0:k.querySelector(".panel-container");if(!c)return;Object.assign(c.style,{top:"auto",left:"auto"});const h=d??i;if(!h)return;const p=h.getBoundingClientRect(),m=c.getBoundingClientRect(),g=this.computePosition(p,m,r,a,l);c.style.top=`${g.top}px`,c.style.left=`${g.left}px`}computePosition(e,t,i,s,n){const r=e.top,a=s-e.bottom;let l;r>=t.height+n?l=e.top-t.height-n:a>=t.height+n?l=e.bottom+n:l=r>=a?Math.max(n,e.top-t.height-n):e.bottom+n;let d;const c=e.right-t.width;return c>=n?d=c:e.left+t.width+n<=i?d=e.left:d=Math.max(n,Math.min(i-t.width-n,e.left)),l=Math.max(n,Math.min(s-t.height-n,l)),d=Math.max(n,Math.min(i-t.width-n,d)),{top:l,left:d}}getFollowUserName(){var t;if(!this.followingUserId)return"";const e=(t=this.client)==null?void 0:t.state.presence.find(i=>i.user.id===this.followingUserId);return(e==null?void 0:e.user.name)??"user"}renderConnectionBanner(){return this.showConnectedFlash?u`<div class="connection-banner connected">
+    `];j([x({attribute:!1})],R.prototype,"client",2);j([x({type:Boolean})],R.prototype,"collapsed",2);j([x()],R.prototype,"activePanel",2);j([x({type:Boolean})],R.prototype,"pinModeActive",2);j([x({type:Boolean})],R.prototype,"featuresDisabled",2);j([x({type:Boolean})],R.prototype,"drawModeActive",2);j([x()],R.prototype,"followingUserId",2);j([x()],R.prototype,"display",2);j([$()],R.prototype,"users",2);j([$()],R.prototype,"unreadCount",2);R=j([L("pulse-widget-toolbar")],R);class vs{constructor(e){this.container=null,this.unsubs=[],this.enabled=!1,this.pillEls=new Map,this.client=e}enable(){this.enabled||(this.enabled=!0,this.container=document.createElement("div"),this.container.id="pulse-widget-viewports",Object.assign(this.container.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",pointerEvents:"none",zIndex:"9996"}),document.body.appendChild(this.container),this.unsubs.push(this.client.state.on("viewport",()=>{this.render()})),this.unsubs.push(this.client.state.on("presence",()=>{this.render()})),this.render())}disable(){var e;this.enabled&&(this.enabled=!1,this.unsubs.forEach(t=>t()),this.unsubs=[],(e=this.container)==null||e.remove(),this.container=null,this.pillEls.clear())}destroy(){this.disable()}render(){var r;if(!this.container)return;if(document.documentElement.scrollHeight<=window.innerHeight){for(const a of this.pillEls.values())a.remove();this.pillEls.clear();return}const e=window.scrollY,t=window.innerHeight,i=document.documentElement.scrollHeight,s=(r=this.client.state.user)==null?void 0:r.id,n=new Set;for(const[a,l]of this.client.state.viewports){if(a===s)continue;const d=l.scrollY,c=l.scrollY+l.viewportHeight,h=e,p=e+t;if(d>=h&&c<=p){const k=this.pillEls.get(a);k&&(k.style.display="none");continue}n.add(a);const m=this.client.state.presence.find(k=>k.user.id===a);if(!m)continue;const g=l.scrollY+l.viewportHeight/2,y=i>0?g/i:0,b=Math.max(8,Math.min(t-28,y*t));let w=this.pillEls.get(a);w||(w=document.createElement("div"),Object.assign(w.style,{position:"absolute",right:"8px",padding:"2px 6px",borderRadius:"10px",fontSize:"10px",fontWeight:"700",color:"#fff",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",whiteSpace:"nowrap",pointerEvents:"none",transition:"top 0.3s ease"}),this.container.appendChild(w),this.pillEls.set(a,w)),w.style.display="",w.style.background=m.user.color,w.style.top=`${b}px`,w.textContent=this.getInitials(m.user.name)}for(const[a,l]of this.pillEls)!n.has(a)&&!this.client.state.viewports.has(a)&&(l.remove(),this.pillEls.delete(a))}getInitials(e){return e.split(" ").map(t=>t[0]).join("").toUpperCase().slice(0,2)}}var bs=Object.defineProperty,xs=Object.getOwnPropertyDescriptor,A=(o,e,t,i)=>{for(var s=i>1?void 0:i?xs(e,t):e,n=o.length-1,r;n>=0;n--)(r=o[n])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&bs(e,t,s),s};exports.PulseWidget=class extends T{constructor(){super(...arguments),this.apiKey="",this.token="",this.room="",this.position="bottom-right",this.display="floating",this.collapsed=!0,this.activePanel=null,this.pinModeActive=!1,this.highlightThreadId=null,this.settings={...me},this.followingUserId=null,this.drawModeActive=!1,this.connectionState="disconnected",this.showConnectedFlash=!1,this.unsubs=[],this.clientConfigKey="",this._isFollowScrolling=!1,this._viewportThrottleTimer=null,this._selectionThrottleTimer=null,this._connectedFlashTimer=null,this._wasDisconnected=!1,this.handleScroll=()=>{!this.settings.enabled||!this.client||this._isFollowScrolling||(this.followingUserId&&(this.followingUserId=null),!this._viewportThrottleTimer&&(this._viewportThrottleTimer=setTimeout(()=>{var e;this._viewportThrottleTimer=null,(e=this.client)==null||e.updateViewport({scrollX:window.scrollX,scrollY:window.scrollY,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,pageWidth:document.documentElement.scrollWidth,pageHeight:document.documentElement.scrollHeight})},200)))},this.handleSelectionChange=()=>{!this.settings.enabled||!this.settings.showSelections||!this.client||this._selectionThrottleTimer||(this._selectionThrottleTimer=setTimeout(()=>{var i,s;this._selectionThrottleTimer=null;const e=window.getSelection();if(!e||e.isCollapsed){(i=this.client)==null||i.updateSelection(null);return}const t=ls(e);(s=this.client)==null||s.updateSelection(t)},500))},this.handleDocumentClick=e=>{var t;this.settings.enabled&&this.settings.showMyClicks&&(this.contains(e.target)||(t=this.client)==null||t.performClick({x:e.clientX,y:e.clientY,pageX:e.pageX,pageY:e.pageY}))},this.handleKeydown=e=>{var t,i;e.key==="Escape"&&(this.drawModeActive?((t=this.drawingOverlay)==null||t.disableDrawMode(),this.drawModeActive=!1):this.followingUserId?this.followingUserId=null:this.pinModeActive?((i=this.commentPins)==null||i.exitPinMode(),this.pinModeActive=!1):this.activePanel&&(this.activePanel=null,this.highlightThreadId=null))}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("pointerup",this.handleDocumentClick),this.apiKey&&this.token&&this.room&&this.initClient()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("pointerup",this.handleDocumentClick),this.teardownClient()}getConfigKey(){return`${this.apiKey}\0${this.token}\0${this.room}\0${this.endpoint??""}`}initClient(){const e={apiKey:this.apiKey,token:this.token,room:this.room,endpoint:this.endpoint};this.client=new mt(e),this.clientConfigKey=this.getConfigKey(),this.cursorOverlay=new rs(this.client),this.commentPins=new Ji(this.client,{onPinModeExit:()=>{this.pinModeActive=!1}}),this.viewportOverlay=new vs(this.client),this.selectionOverlay=new ds(this.client),this.drawingOverlay=new as(this.client),this.settings=us(this.room),this.applySettings(this.settings),this.unsubs.push(this.client.on("connection",t=>{this.connectionState=t,t==="connected"&&this._wasDisconnected?(this.showConnectedFlash=!0,this._connectedFlashTimer&&clearTimeout(this._connectedFlashTimer),this._connectedFlashTimer=setTimeout(()=>{this.showConnectedFlash=!1,this._connectedFlashTimer=null},2e3),this._wasDisconnected=!1):(t==="connecting"||t==="disconnected")&&(this._wasDisconnected=!0,this.showConnectedFlash=!1,this._connectedFlashTimer&&(clearTimeout(this._connectedFlashTimer),this._connectedFlashTimer=null))})),this.unsubs.push(this.client.state.on("click",({userId:t,position:i})=>{var s;this.settings.showOthersClicks&&((s=this.cursorOverlay)!=null&&s.isEnabled)&&this.cursorOverlay.showClickRipple(t,i)})),this.unsubs.push(this.client.state.on("viewport",({userId:t})=>{if(this.followingUserId===t){const i=this.client.state.getViewport(t);i&&(this._isFollowScrolling=!0,window.scrollTo({top:i.scrollY,left:i.scrollX,behavior:"smooth"}),setTimeout(()=>{this._isFollowScrolling=!1},500))}})),window.addEventListener("scroll",this.handleScroll),document.addEventListener("selectionchange",this.handleSelectionChange),this.client.connect()}teardownClient(){var e,t,i,s,n,r;this.unsubs.forEach(a=>a()),this.unsubs=[],window.removeEventListener("scroll",this.handleScroll),document.removeEventListener("selectionchange",this.handleSelectionChange),this._viewportThrottleTimer&&(clearTimeout(this._viewportThrottleTimer),this._viewportThrottleTimer=null),this._selectionThrottleTimer&&(clearTimeout(this._selectionThrottleTimer),this._selectionThrottleTimer=null),(e=this.cursorOverlay)==null||e.destroy(),(t=this.commentPins)==null||t.destroy(),(i=this.viewportOverlay)==null||i.destroy(),(s=this.selectionOverlay)==null||s.destroy(),(n=this.drawingOverlay)==null||n.destroy(),(r=this.client)==null||r.disconnect(),this.client=void 0,this.cursorOverlay=void 0,this.commentPins=void 0,this.viewportOverlay=void 0,this.selectionOverlay=void 0,this.drawingOverlay=void 0,this.clientConfigKey="",this.followingUserId=null,this.drawModeActive=!1,this.connectionState="disconnected",this.showConnectedFlash=!1,this._wasDisconnected=!1,this._connectedFlashTimer&&(clearTimeout(this._connectedFlashTimer),this._connectedFlashTimer=null)}handlePanelClose(){this.activePanel=null,this.highlightThreadId=null}handleToolbarAction(e){var s,n,r,a;const t=e.detail;if(!this.settings.enabled&&t!=="settings")return;const i=t==="comments"||t==="settings"||t==="notifications"||t==="activity";switch((i||t==="pin-mode")&&this.drawModeActive&&(this.drawModeActive=!1,(s=this.drawingOverlay)==null||s.disableDrawMode()),(i||t==="draw-mode")&&this.pinModeActive&&(this.pinModeActive=!1,(n=this.commentPins)==null||n.exitPinMode()),(t==="pin-mode"||t==="draw-mode")&&(this.activePanel=null),t){case"comments":this.activePanel=this.activePanel==="comments"?null:"comments",this.highlightThreadId=null;break;case"settings":this.activePanel=this.activePanel==="settings"?null:"settings";break;case"notifications":this.activePanel=this.activePanel==="notifications"?null:"notifications";break;case"activity":this.activePanel=this.activePanel==="activity"?null:"activity";break;case"pin-mode":this.pinModeActive=!this.pinModeActive,this.pinModeActive&&((r=this.commentPins)==null||r.enterPinMode());break;case"draw-mode":this.drawModeActive=!this.drawModeActive,this.drawModeActive&&((a=this.drawingOverlay)==null||a.enableDrawMode());break}}handleFollow(e){const t=e.detail;this.followingUserId===t?this.followingUserId=null:this.followingUserId=t}handleSettingsChange(e){const t=e.detail;this.settings=t,fs(this.room,t),this.applySettings(t)}applySettings(e){var t,i,s,n,r,a,l,d,c,h,p,m,g,y,b,w,k;if(!e.enabled){(t=this.cursorOverlay)==null||t.disable(),(i=this.viewportOverlay)==null||i.disable(),(s=this.selectionOverlay)==null||s.disable(),(n=this.drawingOverlay)==null||n.disable(),this.drawModeActive&&((r=this.drawingOverlay)==null||r.disableDrawMode(),this.drawModeActive=!1),(a=this.client)==null||a.setAppearOffline(!0),(l=this.commentPins)==null||l.setVisible(!1),this.followingUserId=null,this.pinModeActive&&((d=this.commentPins)==null||d.exitPinMode(),this.pinModeActive=!1),this.activePanel=this.activePanel==="settings"?"settings":null,this.highlightThreadId=null;return}this.applyCursorSettings(e),(c=this.client)==null||c.setAppearOffline(e.appearOffline),(h=this.commentPins)==null||h.setVisible(e.showCommentPins),e.showViewportIndicators?(p=this.viewportOverlay)==null||p.enable():(m=this.viewportOverlay)==null||m.disable(),e.showSelections?(g=this.selectionOverlay)==null||g.enable():(y=this.selectionOverlay)==null||y.disable(),e.showDrawings?(b=this.drawingOverlay)==null||b.enable():((w=this.drawingOverlay)==null||w.disable(),this.drawModeActive&&((k=this.drawingOverlay)==null||k.disableDrawMode(),this.drawModeActive=!1))}applyCursorSettings(e){if(!this.cursorOverlay)return;e.showMyCursor||e.showOthersCursors?(this.cursorOverlay.enable(),this.cursorOverlay.setSending(e.showMyCursor),this.cursorOverlay.setReceiving(e.showOthersCursors)):this.cursorOverlay.disable()}updated(e){(e.has("room")||e.has("token")||e.has("apiKey")||e.has("endpoint"))&&this.apiKey&&this.token&&this.room&&this.getConfigKey()!==this.clientConfigKey&&(this.teardownClient(),this.initClient(),this.activePanel=null,this.highlightThreadId=null,this.pinModeActive=!1),(e.has("activePanel")||e.has("collapsed"))&&requestAnimationFrame(()=>this.positionPopups())}positionPopups(){var y,b,w,k;const e=this.display==="inline",t=(y=this.shadowRoot)==null?void 0:y.querySelector(".inline-trigger"),i=(b=this.shadowRoot)==null?void 0:b.querySelector("pulse-widget-toolbar"),s=e?t:i;if(!s)return;const n=s.getBoundingClientRect(),r=window.innerWidth,a=window.innerHeight,l=8,d=(w=this.shadowRoot)==null?void 0:w.querySelector(".toolbar-popover");if(d){Object.assign(d.style,{top:"auto",left:"auto"});const _=d.getBoundingClientRect(),M=this.computePosition(n,_,r,a,l);d.style.top=`${M.top}px`,d.style.left=`${M.left}px`}const c=(k=this.shadowRoot)==null?void 0:k.querySelector(".panel-container");if(!c)return;Object.assign(c.style,{top:"auto",left:"auto"});const h=d??i;if(!h)return;const p=h.getBoundingClientRect(),m=c.getBoundingClientRect(),g=this.computePosition(p,m,r,a,l);c.style.top=`${g.top}px`,c.style.left=`${g.left}px`}computePosition(e,t,i,s,n){const r=e.top,a=s-e.bottom;let l;r>=t.height+n?l=e.top-t.height-n:a>=t.height+n?l=e.bottom+n:l=r>=a?Math.max(n,e.top-t.height-n):e.bottom+n;let d;const c=e.right-t.width;return c>=n?d=c:e.left+t.width+n<=i?d=e.left:d=Math.max(n,Math.min(i-t.width-n,e.left)),l=Math.max(n,Math.min(s-t.height-n,l)),d=Math.max(n,Math.min(i-t.width-n,d)),{top:l,left:d}}getFollowUserName(){var t;if(!this.followingUserId)return"";const e=(t=this.client)==null?void 0:t.state.presence.find(i=>i.user.id===this.followingUserId);return(e==null?void 0:e.user.name)??"user"}renderConnectionBanner(){return this.showConnectedFlash?u`<div class="connection-banner connected">
         <span class="connection-dot"></span>Connected
       </div>`:this.connectionState==="connecting"?u`<div class="connection-banner connecting">
         <span class="connection-dot"></span>Reconnecting...

package/dist/pulse-elements.js

@@ -870,7 +870,7 @@ G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[ne("elementPrope
  */
 const oe = globalThis, tt = (n) => n, Ee = oe.trustedTypes, it = Ee ? Ee.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, Et = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, Ct = "?" + D, Gt = `<${Ct}>`, V = document, ae = () => V.createComment(""), le = (n) => n === null || typeof n != "object" && typeof n != "function", Fe = Array.isArray, Jt = (n) => Fe(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", Ie = `[ 	
 \f\r]`, se = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, st = /-->/g, nt = />/g, B = RegExp(`>|${Ie}(?:([^\\s"'>=/]+)(${Ie}*=${Ie}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ot = /'/g, rt = /"/g, Tt = /^(?:script|style|textarea|title)$/i, St = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), u = St(1), Zt = St(2), W = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ot = /'/g, rt = /"/g, Tt = /^(?:script|style|textarea|title)$/i, St = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), u = St(1), Zt = St(2), W = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), F = V.createTreeWalker(V, 129);
 function At(n, e) {
   if (!Fe(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return it !== void 0 ? it.createHTML(e) : e;
@@ -965,7 +965,7 @@ class me {
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   constructor(e, t, i, s) {
-    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = s, this._$Cv = (s == null ? void 0 : s.isConnected) ?? !0;
+    this.type = 2, this._$AH = v, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = s, this._$Cv = (s == null ? void 0 : s.isConnected) ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -979,7 +979,7 @@ class me {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = J(this, e, t), le(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== W && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Jt(e) ? this.k(e) : this._(e);
+    e = J(this, e, t), le(e) ? e === v || e == null || e === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : e !== this._$AH && e !== W && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Jt(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -988,7 +988,7 @@ class me {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== b && le(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
+    this._$AH !== v && le(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
@@ -1030,7 +1030,7 @@ class Se {
     return this._$AM._$AU;
   }
   constructor(e, t, i, s, o) {
-    this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = b;
+    this.type = 1, this._$AH = v, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = v;
   }
   _$AI(e, t = this, i, s) {
     const o = this.strings;
@@ -1039,12 +1039,12 @@ class Se {
     else {
       const a = e;
       let l, d;
-      for (e = o[0], l = 0; l < o.length - 1; l++) d = J(this, a[i + l], t, l), d === W && (d = this._$AH[l]), r || (r = !le(d) || d !== this._$AH[l]), d === b ? e = b : e !== b && (e += (d ?? "") + o[l + 1]), this._$AH[l] = d;
+      for (e = o[0], l = 0; l < o.length - 1; l++) d = J(this, a[i + l], t, l), d === W && (d = this._$AH[l]), r || (r = !le(d) || d !== this._$AH[l]), d === v ? e = v : e !== v && (e += (d ?? "") + o[l + 1]), this._$AH[l] = d;
     }
     r && !s && this.j(e);
   }
   j(e) {
-    e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === v ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class ti extends Se {
@@ -1052,7 +1052,7 @@ class ti extends Se {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === b ? void 0 : e;
+    this.element[this.name] = e === v ? void 0 : e;
   }
 }
 class ii extends Se {
@@ -1060,7 +1060,7 @@ class ii extends Se {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== b);
+    this.element.toggleAttribute(this.name, !!e && e !== v);
   }
 }
 class si extends Se {
@@ -1068,8 +1068,8 @@ class si extends Se {
     super(e, t, i, s, o), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = J(this, e, t, 0) ?? b) === W) return;
-    const i = this._$AH, s = e === b && i !== b || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== b && (i === b || s);
+    if ((e = J(this, e, t, 0) ?? v) === W) return;
+    const i = this._$AH, s = e === v && i !== v || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== v && (i === v || s);
     s && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -1600,7 +1600,7 @@ let Y = class extends A {
         ${n.comments.map((e, t) => {
       const i = this.getUserForComment(e.userId);
       return u`
-            ${t > 0 ? u`<div class="divider"></div>` : b}
+            ${t > 0 ? u`<div class="divider"></div>` : v}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -1637,7 +1637,7 @@ let Y = class extends A {
                 <input type="text" placeholder="Write a reply..." />
                 <button type="submit">Send</button>
               </form>
-            ` : b}
+            ` : v}
       </div>
     `;
   }
@@ -1877,12 +1877,12 @@ ge([
 Y = ge([
   L("pulse-comments")
 ], Y);
-var gi = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Ve = (n, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? bi(e, t) : e, o = n.length - 1, r; o >= 0; o--)
+var gi = Object.defineProperty, vi = Object.getOwnPropertyDescriptor, Ve = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? vi(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 && gi(e, t, s), s;
 };
-const vi = {
+const bi = {
   "comment:created": "left a comment",
   "comment:mention": "mentioned you",
   "comment:reply": "replied to your comment",
@@ -1946,11 +1946,11 @@ let he = class extends A {
       <div class="header">
         <span class="title">
           Notifications
-          ${n > 0 ? u`<span class="badge">${n}</span>` : b}
+          ${n > 0 ? u`<span class="badge">${n}</span>` : v}
         </span>
         ${n > 0 ? u`<button class="mark-all" @click=${() => this.client.markAllRead()}>
               Mark all read
-            </button>` : b}
+            </button>` : v}
       </div>
       <div class="list">
         ${this.notifications.length === 0 ? u`<div class="empty">
@@ -1966,7 +1966,7 @@ let he = class extends A {
                   <div class="content">
                     <div class="text">
                       <span class="actor">${this.getActorName(e.actorId)}</span>
-                      ${vi[e.type] ?? e.type}
+                      ${bi[e.type] ?? e.type}
                     </div>
                     <div class="time">${this.formatTime(e.createdAt)}</div>
                   </div>
@@ -2204,7 +2204,7 @@ let N = class extends A {
                   `
     )}
               </div>
-            ` : b}
+            ` : v}
       </div>
     `;
   }
@@ -2369,10 +2369,10 @@ class Ci {
  */
 class Re extends Ci {
   constructor(e) {
-    if (super(e), this.it = b, e.type !== ki.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = v, e.type !== ki.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === b || e == null) return this._t = void 0, this.it = e;
+    if (e === v || e == null) return this._t = void 0, this.it = e;
     if (e === W) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
@@ -2551,7 +2551,7 @@ const ji = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const be = [
+const ve = [
   ["path", { d: "M18 6 6 18" }],
   ["path", { d: "m6 6 12 12" }]
 ];
@@ -2631,7 +2631,7 @@ const ie = M`
     --pw-shadow: var(--pulse-shadow);
     --pw-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
   }
-`, ve = M`
+`, be = M`
   .pw-btn {
     display: inline-flex;
     align-items: center;
@@ -2743,7 +2743,7 @@ let K = class extends A {
         <div class="panel-header">
           <span class="panel-title">Activity</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(be, 16)}
+            ${C(ve, 16)}
           </button>
         </div>
 
@@ -2776,7 +2776,7 @@ let K = class extends A {
 };
 K.styles = [
   ie,
-  ve,
+  be,
   Pe,
   M`
       :host {
@@ -3018,11 +3018,11 @@ class je {
       whiteSpace: "nowrap",
       lineHeight: "1"
     });
-    function v() {
+    function b() {
       const E = ht(o), I = ht(s);
       y.textContent = `${E} / ${I}`;
     }
-    v(), p.appendChild(m), p.appendChild(y), a.appendChild(l), a.appendChild(p);
+    b(), p.appendChild(m), p.appendChild(y), a.appendChild(l), a.appendChild(p);
     function w() {
       const E = s > 0 ? o / s : 0, I = Math.floor(E * we);
       for (let z = 0; z < we; z++)
@@ -3034,7 +3034,7 @@ class je {
         1,
         Math.max(0, (E.clientX - I.left) / I.width)
       );
-      r.currentTime = z * s, o = r.currentTime, w(), v();
+      r.currentTime = z * s, o = r.currentTime, w(), b();
     }), l.addEventListener("click", () => {
       i ? r.pause() : r.play().catch(() => {
       });
@@ -3043,13 +3043,13 @@ class je {
     }), r.addEventListener("pause", () => {
       i = !1, c();
     }), r.addEventListener("ended", () => {
-      i = !1, c(), o = 0, w(), v();
+      i = !1, c(), o = 0, w(), b();
     }), r.addEventListener("timeupdate", () => {
-      o = r.currentTime, w(), v();
+      o = r.currentTime, w(), b();
     }), r.addEventListener("loadedmetadata", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, v());
+      r.duration && isFinite(r.duration) && (s = r.duration, b());
     }), r.addEventListener("durationchange", () => {
-      r.duration && isFinite(r.duration) && (s = r.duration, v());
+      r.duration && isFinite(r.duration) && (s = r.duration, b());
     }), a;
   }
 }
@@ -4032,8 +4032,8 @@ class ns {
     const l = this.form.querySelector("textarea"), d = this.form.querySelector(".pulse-close-btn"), c = this.form.querySelector(".pin-submit");
     d.addEventListener("click", () => this.exitPinMode()), this.pendingAttachmentIds = [], this.upload || (this.upload = new re(this.client));
     const h = this.form.querySelector(".pin-attachments-preview"), p = (g, y) => {
-      const v = document.createElement("div");
-      Object.assign(v.style, { position: "relative", display: "inline-block" }), v.appendChild(y);
+      const b = document.createElement("div");
+      Object.assign(b.style, { position: "relative", display: "inline-block" }), b.appendChild(y);
       const w = document.createElement("button");
       w.innerHTML = "×", Object.assign(w.style, {
         position: "absolute",
@@ -4055,17 +4055,17 @@ class ns {
         fontWeight: "700"
       }), w.addEventListener("click", () => {
         const E = this.pendingAttachmentIds.indexOf(g);
-        E !== -1 && this.pendingAttachmentIds.splice(E, 1), v.remove();
-      }), v.appendChild(w), h.appendChild(v);
+        E !== -1 && this.pendingAttachmentIds.splice(E, 1), b.remove();
+      }), b.appendChild(w), h.appendChild(b);
     }, m = 5;
     this.form.querySelector(".attach-img").addEventListener("click", async () => {
       const g = m - this.pendingAttachmentIds.length;
       if (g <= 0) return;
       const y = await this.upload.pickFiles("image/*", g);
-      for (const v of y) {
-        this.pendingAttachmentIds.push(v.id);
+      for (const b of y) {
+        this.pendingAttachmentIds.push(b.id);
         const w = document.createElement("img");
-        w.src = v.thumbnailUrl || v.url, Object.assign(w.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), p(v.id, w);
+        w.src = b.thumbnailUrl || b.url, Object.assign(w.style, { width: "48px", height: "48px", borderRadius: "6px", objectFit: "cover", border: "1px solid #e2e8f0", display: "block" }), p(b.id, w);
       }
     }), this.form.querySelector(".attach-mic").addEventListener("click", async () => {
       if (this.pendingAttachmentIds.length >= m) return;
@@ -4075,8 +4075,8 @@ class ns {
         const y = await this.upload.uploadBlob(g, "audio.webm");
         if (y) {
           this.pendingAttachmentIds.push(y.id);
-          const v = document.createElement("span");
-          Object.assign(v.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), v.textContent = "🎤 Audio", p(y.id, v);
+          const b = document.createElement("span");
+          Object.assign(b.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), b.textContent = "🎤 Audio", p(y.id, b);
         }
       }
     }), this.form.querySelector(".attach-video").addEventListener("click", async () => {
@@ -4087,14 +4087,14 @@ class ns {
         const y = await this.upload.uploadBlob(g.blob, "video.webm");
         if (y) {
           this.pendingAttachmentIds.push(y.id);
-          const v = document.createElement("span");
-          Object.assign(v.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), v.textContent = "🎥 Video", p(y.id, v);
+          const b = document.createElement("span");
+          Object.assign(b.style, { display: "flex", alignItems: "center", padding: "4px 10px", borderRadius: "6px", background: "#f1f5f9", fontSize: "11px", color: "#64748b", height: "48px", boxSizing: "border-box" }), b.textContent = "🎥 Video", p(y.id, b);
         }
       }
     }), c.addEventListener("click", () => {
       const g = l.value.trim();
       if (!g && this.pendingAttachmentIds.length === 0) return;
-      const y = [...(g || "").matchAll(/@(\w+)/g)].map((v) => v[1]);
+      const y = [...(g || "").matchAll(/@(\w+)/g)].map((b) => b[1]);
       this.client.createThread(g, { position: i, mentions: y, attachmentIds: this.pendingAttachmentIds.length > 0 ? [...this.pendingAttachmentIds] : void 0 }), this.pendingAttachmentIds = [], this.exitPinMode();
     }), l.addEventListener("keydown", (g) => {
       g.key === "Escape" && this.exitPinMode(), g.stopPropagation();
@@ -4161,7 +4161,7 @@ class ns {
     }
     const i = (d = this.client.state.user) == null ? void 0 : d.id;
     t.innerHTML = e.comments.map((c) => {
-      const h = this.client.state.getUser(c.userId), p = h ? h.name.split(" ").map((O) => O[0]).join("").toUpperCase().slice(0, 2) : "?", m = (h == null ? void 0 : h.color) ?? "#94a3b8", g = this.escapeHtml((h == null ? void 0 : h.name) ?? "Unknown"), y = this.formatTime(c.createdAt), v = i === c.userId, w = c.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
+      const h = this.client.state.getUser(c.userId), p = h ? h.name.split(" ").map((O) => O[0]).join("").toUpperCase().slice(0, 2) : "?", m = (h == null ? void 0 : h.color) ?? "#94a3b8", g = this.escapeHtml((h == null ? void 0 : h.name) ?? "Unknown"), y = this.formatTime(c.createdAt), b = i === c.userId, w = c.editedAt ? '<span style="font-size:10px;color:#94a3b8;font-style:italic;">(edited)</span>' : "";
       if (this.editingPopoverCommentId === c.id)
         return `
             <div style="margin-bottom:10px;" data-comment-id="${c.id}">
@@ -4189,7 +4189,7 @@ class ns {
             </div>`;
         }
         return O.type === "audio" ? `<div class="popover-attachment-audio" data-url="${this.escapeHtml(O.url)}" data-duration="${O.durationMs ?? ""}" style="margin:4px 0 4px 29px;"></div>` : O.type === "video" ? `<div class="popover-attachment-video" data-url="${this.escapeHtml(O.url)}" data-poster="${this.escapeHtml(O.thumbnailUrl ?? "")}" style="margin:4px 0 4px 29px;"></div>` : "";
-      }).join(""), z = v ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
+      }).join(""), z = b ? `<div class="popover-comment-actions" style="display:flex;gap:2px;margin-top:2px;margin-left:29px;">
               <button class="edit-btn" data-comment-id="${c.id}" style="border:none;background:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:4px;display:flex;align-items:center;transition:all 0.15s;" title="Edit"
                 onmouseover="this.style.color='#6366f1';this.style.background='#eef2ff'"
                 onmouseout="this.style.color='#94a3b8';this.style.background='none'">${is}</button>
@@ -4319,8 +4319,8 @@ class ns {
         padding: "0",
         fontWeight: "700"
       }), y.addEventListener("click", () => {
-        const v = l.indexOf(p);
-        v !== -1 && l.splice(v, 1), g.remove();
+        const b = l.indexOf(p);
+        b !== -1 && l.splice(b, 1), g.remove();
       }), g.appendChild(y), a.appendChild(g);
     }, c = 5;
     t.querySelector(".reply-attach-img").addEventListener("click", async () => {
@@ -4747,14 +4747,14 @@ let P = class extends A {
                     `
     )}
                 </div>
-              ` : b}
+              ` : v}
         </button>
       </div>
     `;
   }
   renderTypingIndicator(n) {
     const e = this.typingByThread.get(n) ?? [];
-    if (e.length === 0) return b;
+    if (e.length === 0) return v;
     const t = e.length === 1 ? `${e[0]} is typing...` : `${e.join(", ")} are typing...`;
     return u`<div class="typing-indicator">${t}</div>`;
   }
@@ -4775,7 +4775,7 @@ let P = class extends A {
             <span class="thread-count">${this.threads.length}</span>
           </span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(be, 16)}
+            ${C(ve, 16)}
           </button>
         </div>
 
@@ -4793,7 +4793,7 @@ let P = class extends A {
     `;
   }
   renderAttachments(n) {
-    if (!n || n.length === 0) return b;
+    if (!n || n.length === 0) return v;
     const e = n.filter((t) => t.type === "image").map((t) => t.url);
     return u`
       ${n.map((t) => {
@@ -4818,7 +4818,7 @@ let P = class extends A {
             <div class="comment-attachment-media" id="video-${t.id}">
               ${this.renderVideoPlayer(t)}
             </div>
-          ` : b;
+          ` : v;
     })}
     `;
   }
@@ -4839,11 +4839,11 @@ let P = class extends A {
         ${n.position ? u`<div class="pin-badge">
               ${C(Pt, 12)}
               Pinned
-            </div>` : b}
+            </div>` : v}
         ${n.comments.map((t, i) => {
       const s = this.getUserForComment(t.userId), o = this.isOwnComment(t), r = this.editingCommentId === t.id;
       return u`
-            ${i > 0 ? u`<div class="comment-divider"></div>` : b}
+            ${i > 0 ? u`<div class="comment-divider"></div>` : v}
             <div class="comment">
               <div class="comment-header">
                 <div
@@ -4854,16 +4854,16 @@ let P = class extends A {
                 </div>
                 <span class="comment-author">${(s == null ? void 0 : s.name) ?? "Unknown"}</span>
                 <span class="comment-time">${this.formatTime(t.createdAt)}</span>
-                ${t.editedAt ? u`<span class="edited-badge">(edited)</span>` : b}
+                ${t.editedAt ? u`<span class="edited-badge">(edited)</span>` : v}
               </div>
               ${r ? this.renderEditForm(t) : u`
-                    ${t.body && t.body !== "(attachment)" ? u`<div class="comment-body">${this.parseMentions(t.body)}</div>` : b}
+                    ${t.body && t.body !== "(attachment)" ? u`<div class="comment-body">${this.parseMentions(t.body)}</div>` : v}
                     ${this.renderAttachments(t.attachments ?? [])}
                   `}
               ${o && !r ? u`<div class="comment-actions">
                     <button @click=${() => this.startEdit(t)} title="Edit">${C(Oi, 14)}</button>
                     <button class="danger" @click=${() => this.deleteComment(t.id)} title="Delete">${C(Li, 14)}</button>
-                  </div>` : b}
+                  </div>` : v}
               ${this.renderReactions(t)}
             </div>
           `;
@@ -4930,14 +4930,14 @@ let P = class extends A {
                   </div>
                 </div>
               </form>
-            ` : b}
+            ` : v}
       </div>
     `;
   }
 };
 P.styles = [
   ie,
-  ve,
+  be,
   Pe,
   M`
       :host {
@@ -5577,14 +5577,14 @@ let pe = class extends A {
         <div class="panel-header">
           <span class="panel-title">
             Notifications
-            ${n > 0 ? u`<span class="unread-badge">${n}</span>` : b}
+            ${n > 0 ? u`<span class="unread-badge">${n}</span>` : v}
           </span>
           <div style="display:flex;align-items:center;gap:4px;">
             ${n > 0 ? u`<button class="mark-all" @click=${() => this.client.markAllRead()}>
                   Mark all read
-                </button>` : b}
+                </button>` : v}
             <button class="close-btn" @click=${this.fireClose} title="Close">
-              ${C(be, 16)}
+              ${C(ve, 16)}
             </button>
           </div>
         </div>
@@ -5618,7 +5618,7 @@ let pe = class extends A {
 };
 pe.styles = [
   ie,
-  ve,
+  be,
   Pe,
   M`
       :host {
@@ -6056,7 +6056,7 @@ class fs {
 }
 function ms(n) {
   if (!n.rangeCount || n.isCollapsed) return null;
-  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = bt(t), o = bt(i);
+  const e = n.getRangeAt(0), t = e.startContainer, i = e.endContainer, s = vt(t), o = vt(i);
   return !s || !o ? null : {
     startSelector: s,
     startOffset: e.startOffset,
@@ -6075,18 +6075,18 @@ function gs(n) {
     return null;
   }
 }
-function bt(n) {
+function vt(n) {
   if (n.nodeType === Node.TEXT_NODE) {
     const e = n.parentElement;
     if (!e) return null;
-    const t = vt(e);
+    const t = bt(e);
     if (!t) return null;
     const i = Array.from(e.childNodes).indexOf(n);
     return `${t}::text(${i})`;
   }
-  return n.nodeType === Node.ELEMENT_NODE ? vt(n) : null;
+  return n.nodeType === Node.ELEMENT_NODE ? bt(n) : null;
 }
-function vt(n) {
+function bt(n) {
   if (!n || n === document.documentElement) return "html";
   if (n === document.body) return "body";
   if (n.id) return `#${CSS.escape(n.id)}`;
@@ -6129,7 +6129,7 @@ function xt(n) {
     return null;
   }
 }
-class bs {
+class vs {
   constructor(e) {
     this.container = null, this.unsubs = [], this.enabled = !1, this.selectionEls = /* @__PURE__ */ new Map(), this.clearTimers = /* @__PURE__ */ new Map(), this.client = e;
   }
@@ -6212,10 +6212,10 @@ class bs {
     }
   }
 }
-var vs = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ye = (n, e, t, i) => {
+var bs = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ye = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? xs(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 && vs(e, t, s), s;
+  return i && s && bs(e, t, s), s;
 };
 let ue = class extends A {
   constructor() {
@@ -6258,7 +6258,7 @@ let ue = class extends A {
         <div class="panel-header">
           <span class="panel-title">Settings</span>
           <button class="close-btn" @click=${this.fireClose} title="Close">
-            ${C(be, 16)}
+            ${C(ve, 16)}
           </button>
         </div>
 
@@ -6305,7 +6305,7 @@ let ue = class extends A {
 };
 ue.styles = [
   ie,
-  ve,
+  be,
   Pe,
   M`
       :host {
@@ -6579,7 +6579,7 @@ let R = class extends A {
         <!-- Presence avatars -->
         ${this.users.length > 0 ? u`
               <div class="presence">
-                ${t > 0 ? u`<div class="presence-overflow">+${t}</div>` : b}
+                ${t > 0 ? u`<div class="presence-overflow">+${t}</div>` : v}
                 ${e.map(
       (i) => u`
                     <div
@@ -6590,13 +6590,13 @@ let R = class extends A {
                     >
                       ${i.user.avatar ? u`<img src="${i.user.avatar}" alt="${i.user.name}" />` : this.getInitials(i.user.name)}
                       <span class="presence-tooltip">${i.user.name}</span>
-                      ${i.deviceType && i.deviceType !== "desktop" ? u`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : b}
+                      ${i.deviceType && i.deviceType !== "desktop" ? u`<span class="device-icon">${i.deviceType === "mobile" ? "📱" : "📲"}</span>` : v}
                     </div>
                   `
     )}
               </div>
               <div class="separator"></div>
-            ` : b}
+            ` : v}
 
         <!-- Pin comment (primary) -->
         <button
@@ -6651,7 +6651,7 @@ let R = class extends A {
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : "position:relative"}"
         >
           ${C(Si)}
-          ${this.unreadCount > 0 ? u`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : b}
+          ${this.unreadCount > 0 ? u`<span class="badge">${this.unreadCount > 9 ? "9+" : this.unreadCount}</span>` : v}
         </button>
 
         <!-- Settings -->
@@ -6671,7 +6671,7 @@ let R = class extends A {
           @click=${this.fireToggle}
           title="Collapse"
         >
-          ${C(be, 14)}
+          ${C(ve, 14)}
         </button>
       </div>
     `;
@@ -6679,7 +6679,7 @@ let R = class extends A {
 };
 R.styles = [
   ie,
-  ve,
+  be,
   M`
       :host {
         display: block;
@@ -6977,7 +6977,7 @@ class Es {
         (E) => E.user.id === a
       );
       if (!m) continue;
-      const g = l.scrollY + l.viewportHeight / 2, y = i > 0 ? g / i : 0, v = Math.max(
+      const g = l.scrollY + l.viewportHeight / 2, y = i > 0 ? g / i : 0, b = Math.max(
         8,
         Math.min(t - 28, y * t)
       );
@@ -6994,7 +6994,7 @@ class Es {
         whiteSpace: "nowrap",
         pointerEvents: "none",
         transition: "top 0.3s ease"
-      }), this.container.appendChild(w), this.pillEls.set(a, w)), w.style.display = "", w.style.background = m.user.color, w.style.top = `${v}px`, w.textContent = this.getInitials(m.user.name);
+      }), this.container.appendChild(w), this.pillEls.set(a, w)), w.style.display = "", w.style.background = m.user.color, w.style.top = `${b}px`, w.textContent = this.getInitials(m.user.name);
     }
     for (const [a, l] of this.pillEls)
       !o.has(a) && !this.client.state.viewports.has(a) && (l.remove(), this.pillEls.delete(a));
@@ -7067,7 +7067,7 @@ let T = class extends A {
       onPinModeExit: () => {
         this.pinModeActive = !1;
       }
-    }), this.viewportOverlay = new Es(this.client), this.selectionOverlay = new bs(this.client), this.drawingOverlay = new fs(this.client), this.settings = ys(this.room), this.applySettings(this.settings), this.unsubs.push(
+    }), this.viewportOverlay = new Es(this.client), this.selectionOverlay = new vs(this.client), this.drawingOverlay = new fs(this.client), this.settings = ys(this.room), this.applySettings(this.settings), this.unsubs.push(
       this.client.on("connection", (e) => {
         this.connectionState = e, e === "connected" && this._wasDisconnected ? (this.showConnectedFlash = !0, this._connectedFlashTimer && clearTimeout(this._connectedFlashTimer), this._connectedFlashTimer = setTimeout(() => {
           this.showConnectedFlash = !1, this._connectedFlashTimer = null;
@@ -7104,29 +7104,30 @@ let T = class extends A {
     this.activePanel = null, this.highlightThreadId = null;
   }
   handleToolbarAction(n) {
-    var t, i, s, o;
+    var i, s, o, r;
     const e = n.detail;
-    if (!(!this.settings.enabled && e !== "settings"))
-      switch (e) {
-        case "comments":
-          this.activePanel = this.activePanel === "comments" ? null : "comments", this.highlightThreadId = null;
-          break;
-        case "settings":
-          this.activePanel = this.activePanel === "settings" ? null : "settings";
-          break;
-        case "notifications":
-          this.activePanel = this.activePanel === "notifications" ? null : "notifications";
-          break;
-        case "activity":
-          this.activePanel = this.activePanel === "activity" ? null : "activity";
-          break;
-        case "pin-mode":
-          this.pinModeActive = !this.pinModeActive, this.pinModeActive ? (t = this.commentPins) == null || t.enterPinMode() : (i = this.commentPins) == null || i.exitPinMode();
-          break;
-        case "draw-mode":
-          this.drawModeActive = !this.drawModeActive, this.drawModeActive ? (s = this.drawingOverlay) == null || s.enableDrawMode() : (o = this.drawingOverlay) == null || o.disableDrawMode();
-          break;
-      }
+    if (!this.settings.enabled && e !== "settings") return;
+    const t = e === "comments" || e === "settings" || e === "notifications" || e === "activity";
+    switch ((t || e === "pin-mode") && this.drawModeActive && (this.drawModeActive = !1, (i = this.drawingOverlay) == null || i.disableDrawMode()), (t || e === "draw-mode") && this.pinModeActive && (this.pinModeActive = !1, (s = this.commentPins) == null || s.exitPinMode()), (e === "pin-mode" || e === "draw-mode") && (this.activePanel = null), e) {
+      case "comments":
+        this.activePanel = this.activePanel === "comments" ? null : "comments", this.highlightThreadId = null;
+        break;
+      case "settings":
+        this.activePanel = this.activePanel === "settings" ? null : "settings";
+        break;
+      case "notifications":
+        this.activePanel = this.activePanel === "notifications" ? null : "notifications";
+        break;
+      case "activity":
+        this.activePanel = this.activePanel === "activity" ? null : "activity";
+        break;
+      case "pin-mode":
+        this.pinModeActive = !this.pinModeActive, this.pinModeActive && ((o = this.commentPins) == null || o.enterPinMode());
+        break;
+      case "draw-mode":
+        this.drawModeActive = !this.drawModeActive, this.drawModeActive && ((r = this.drawingOverlay) == null || r.enableDrawMode());
+        break;
+    }
   }
   handleFollow(n) {
     const e = n.detail;
@@ -7137,12 +7138,12 @@ let T = class extends A {
     this.settings = e, ws(this.room, e), this.applySettings(e);
   }
   applySettings(n) {
-    var e, t, i, s, o, r, a, l, d, c, h, p, m, g, y, v, w;
+    var e, t, i, s, o, r, a, l, d, c, h, p, m, g, y, b, w;
     if (!n.enabled) {
       (e = this.cursorOverlay) == null || e.disable(), (t = this.viewportOverlay) == null || t.disable(), (i = this.selectionOverlay) == null || i.disable(), (s = this.drawingOverlay) == null || s.disable(), this.drawModeActive && ((o = this.drawingOverlay) == null || o.disableDrawMode(), this.drawModeActive = !1), (r = this.client) == null || r.setAppearOffline(!0), (a = this.commentPins) == null || a.setVisible(!1), this.followingUserId = null, this.pinModeActive && ((l = this.commentPins) == null || l.exitPinMode(), this.pinModeActive = !1), this.activePanel = this.activePanel === "settings" ? "settings" : null, this.highlightThreadId = null;
       return;
     }
-    this.applyCursorSettings(n), (d = this.client) == null || d.setAppearOffline(n.appearOffline), (c = this.commentPins) == null || c.setVisible(n.showCommentPins), n.showViewportIndicators ? (h = this.viewportOverlay) == null || h.enable() : (p = this.viewportOverlay) == null || p.disable(), n.showSelections ? (m = this.selectionOverlay) == null || m.enable() : (g = this.selectionOverlay) == null || g.disable(), n.showDrawings ? (y = this.drawingOverlay) == null || y.enable() : ((v = this.drawingOverlay) == null || v.disable(), this.drawModeActive && ((w = this.drawingOverlay) == null || w.disableDrawMode(), this.drawModeActive = !1));
+    this.applyCursorSettings(n), (d = this.client) == null || d.setAppearOffline(n.appearOffline), (c = this.commentPins) == null || c.setVisible(n.showCommentPins), n.showViewportIndicators ? (h = this.viewportOverlay) == null || h.enable() : (p = this.viewportOverlay) == null || p.disable(), n.showSelections ? (m = this.selectionOverlay) == null || m.enable() : (g = this.selectionOverlay) == null || g.disable(), n.showDrawings ? (y = this.drawingOverlay) == null || y.enable() : ((b = this.drawingOverlay) == null || b.disable(), this.drawModeActive && ((w = this.drawingOverlay) == null || w.disableDrawMode(), this.drawModeActive = !1));
   }
   applyCursorSettings(n) {
     if (!this.cursorOverlay) return;
@@ -7156,10 +7157,10 @@ let T = class extends A {
    * the trigger element, flipping vertically/horizontally as needed.
    */
   positionPopups() {
-    var g, y, v, w;
+    var g, y, b, w;
     const n = this.display === "inline", e = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".inline-trigger"), t = (y = this.shadowRoot) == null ? void 0 : y.querySelector("pulse-widget-toolbar"), i = n ? e : t;
     if (!i) return;
-    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, a = 8, l = (v = this.shadowRoot) == null ? void 0 : v.querySelector(".toolbar-popover");
+    const s = i.getBoundingClientRect(), o = window.innerWidth, r = window.innerHeight, a = 8, l = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".toolbar-popover");
     if (l) {
       Object.assign(l.style, { top: "auto", left: "auto" });
       const E = l.getBoundingClientRect(), I = this.computePosition(s, E, o, r, a);
@@ -7196,7 +7197,7 @@ let T = class extends A {
         <span class="connection-dot"></span>Reconnecting...
       </div>` : this.connectionState === "disconnected" && this.client ? u`<div class="connection-banner disconnected">
         <span class="connection-dot"></span>Disconnected
-      </div>` : b;
+      </div>` : v;
   }
   handleToolbarToggle() {
     this.collapsed = !this.collapsed, this.collapsed && (this.activePanel = null, this.highlightThreadId = null);
@@ -7216,25 +7217,25 @@ let T = class extends A {
             ${this.activePanel === "comments" ? u`<pulse-widget-comments-panel
                   .client=${this.client}
                   .highlightThreadId=${this.highlightThreadId}
-                ></pulse-widget-comments-panel>` : b}
+                ></pulse-widget-comments-panel>` : v}
             ${this.activePanel === "settings" ? u`<pulse-widget-settings-panel
                   .settings=${this.settings}
                   .roomId=${this.room}
                   @settings-change=${this.handleSettingsChange}
-                ></pulse-widget-settings-panel>` : b}
+                ></pulse-widget-settings-panel>` : v}
             ${this.activePanel === "notifications" ? u`<pulse-widget-notifications-panel
                   .client=${this.client}
-                ></pulse-widget-notifications-panel>` : b}
+                ></pulse-widget-notifications-panel>` : v}
             ${this.activePanel === "activity" ? u`<pulse-widget-activity-panel
                   .client=${this.client}
-                ></pulse-widget-activity-panel>` : b}
+                ></pulse-widget-activity-panel>` : v}
           </div>
-        ` : b, t = this.followingUserId ? u`<div class="follow-banner">
+        ` : v, t = this.followingUserId ? u`<div class="follow-banner">
           Following ${this.getFollowUserName()}
           <button @click=${() => {
       this.followingUserId = null;
     }}>Stop</button>
-        </div>` : b;
+        </div>` : v;
     return n ? u`
         ${t}
         <div class="widget-root">

package/package.json

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