@gamention/pulse-elements 0.1.16 → 0.1.17

package/dist/pulse-elements.cjs

@@ -26,7 +26,7 @@
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function ae({context:o,subscribe:e}){return(t,i)=>{typeof i=="object"?i.addInitializer((function(){new Be(this,{context:o,callback:s=>{t.set.call(this,s)},subscribe:e})})):t.constructor.addInitializer((s=>{new Be(s,{context:o,callback:n=>{s[i]=n},subscribe:e})}))}}var At=Object.defineProperty,_t=(o,e,t)=>e in o?At(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,E=(o,e,t)=>_t(o,typeof e!="symbol"?e+"":e,t);const It="ws://localhost:4567";let Me=class{constructor(){E(this,"handlers",new Map)}on(e,t){this.handlers.has(e)||this.handlers.set(e,new Set);const i=this.handlers.get(e);return i.add(t),()=>i.delete(t)}off(e,t){var i;(i=this.handlers.get(e))==null||i.delete(t)}emit(e,t){var i;(i=this.handlers.get(e))==null||i.forEach(s=>s(t))}removeAll(){this.handlers.clear()}},Mt=class extends Me{constructor(e){super(),E(this,"ws",null),E(this,"endpoint"),E(this,"reconnectAttempt",0),E(this,"reconnectTimer",null),E(this,"_state","disconnected"),this.endpoint=e??It}get state(){return this._state}connect(){this.ws||(this._state="connecting",this.emit("state",this._state),this.ws=new WebSocket(this.endpoint),this.ws.addEventListener("open",()=>{this._state="connected",this.reconnectAttempt=0,this.emit("state",this._state)}),this.ws.addEventListener("message",e=>{const t=JSON.parse(e.data);this.emit("message",t)}),this.ws.addEventListener("close",()=>{this.ws=null,this._state="disconnected",this.emit("state",this._state),this.scheduleReconnect()}),this.ws.addEventListener("error",()=>{var e;(e=this.ws)==null||e.close()}))}disconnect(){var e;this.reconnectTimer&&(clearTimeout(this.reconnectTimer),this.reconnectTimer=null),this.reconnectAttempt=0,(e=this.ws)==null||e.close(),this.ws=null,this._state="disconnected",this.emit("state",this._state)}send(e){var t;((t=this.ws)==null?void 0:t.readyState)===WebSocket.OPEN&&this.ws.send(JSON.stringify(e))}scheduleReconnect(){const e=Math.min(1e3*2**this.reconnectAttempt,3e4);this.reconnectAttempt++,this.reconnectTimer=setTimeout(()=>{this.reconnectTimer=null,this.connect()},e)}},Ot=class extends Me{constructor(){super(...arguments),E(this,"baseUrl",""),E(this,"_user",null),E(this,"_users",new Map),E(this,"_presence",new Map),E(this,"_threads",new Map),E(this,"_reactions",new Map),E(this,"_notifications",[]),E(this,"_activityLogs",[]),E(this,"_typing",new Map),E(this,"_viewports",new Map),E(this,"_selections",new Map)}get user(){return this._user}removeComment(e){for(const[t,i]of this._threads){const s=i.comments.findIndex(n=>n.id===e);if(s!==-1){i.comments.splice(s,1),i.comments.length===0&&this._threads.delete(t),this.emit("threads",this.threads);return}}}get presence(){return[...this._presence.values()]}get threads(){return[...this._threads.values()]}get notifications(){return this._notifications}get unreadCount(){return this._notifications.filter(e=>!e.read).length}get activityLogs(){return this._activityLogs}getUser(e){return this._users.get(e)}getReactions(e){return this._reactions.get(e)??[]}getTypingUsers(e){const t=this._typing.get(e);if(!t)return[];const i=Date.now(),s=[];for(const[n,r]of t)i-r<3e3&&s.push(n);return s}get viewports(){return this._viewports}getViewport(e){return this._viewports.get(e)}get selections(){return this._selections}resolveUrl(e){return!this.baseUrl||!e||e.startsWith("http://")||e.startsWith("https://")?e:`${this.baseUrl}${e}`}resolveAttachments(e){return e.map(t=>({...t,url:this.resolveUrl(t.url),thumbnailUrl:t.thumbnailUrl?this.resolveUrl(t.thumbnailUrl):void 0}))}resolveComment(e){return!e.attachments||e.attachments.length===0?e:{...e,attachments:this.resolveAttachments(e.attachments)}}resolveThread(e){return{...e,comments:e.comments.map(t=>this.resolveComment(t))}}handleMessage(e){switch(e.type){case"auth:ok":this._user=e.user,this._users.clear();for(const t of e.users)this._users.set(t.id,t);this._presence.clear();for(const t of e.presence)this._presence.set(t.user.id,t),this._users.set(t.user.id,t.user);this._users.set(e.user.id,e.user),this._threads.clear();for(const t of e.threads)this._threads.set(t.id,this.resolveThread(t));this._notifications=e.notifications,this._reactions.clear();for(const t of e.reactions){const i=this._reactions.get(t.targetId)??[];i.push(t),this._reactions.set(t.targetId,i)}this._activityLogs=[...e.activityLogs],this.emit("auth",e.user),this.emit("presence",this.presence),this.emit("threads",this.threads),this.emit("notifications",this._notifications),this.emit("reactions",null),this.emit("activity-logs",this._activityLogs);break;case"presence:join":this._presence.set(e.user.user.id,e.user),this._users.set(e.user.user.id,e.user.user),this.emit("presence",this.presence);break;case"presence:leave":this._presence.delete(e.userId),this._viewports.delete(e.userId),this._selections.delete(e.userId);for(const t of this._typing.values())t.delete(e.userId);this.emit("presence",this.presence);break;case"presence:update":{const t=this._presence.get(e.userId);t&&(t.status=e.status,this.emit("presence",this.presence));break}case"cursor:move":this.emit("cursor",{userId:e.userId,position:e.position});break;case"click:perform":this.emit("click",{userId:e.userId,position:e.position});break;case"thread:created":this._threads.set(e.thread.id,this.resolveThread(e.thread)),this.emit("threads",this.threads);break;case"comment:created":{const t=this._threads.get(e.threadId);t&&(t.comments.push(this.resolveComment(e.comment)),t.updatedAt=e.comment.createdAt,this.emit("threads",this.threads));break}case"comment:edited":{const t=this._threads.get(e.threadId);if(t){const i=t.comments.findIndex(s=>s.id===e.comment.id);i!==-1&&(t.comments[i]=this.resolveComment(e.comment)),this.emit("threads",this.threads)}break}case"comment:deleted":{const t=this._threads.get(e.threadId);t&&(t.comments=t.comments.filter(i=>i.id!==e.commentId),t.comments.length===0&&this._threads.delete(e.threadId),this.emit("threads",this.threads));break}case"thread:resolved":{const t=this._threads.get(e.threadId);t&&(t.resolved=e.resolved,this.emit("threads",this.threads));break}case"thread:deleted":this._threads.delete(e.threadId),this.emit("threads",this.threads);break;case"reaction:added":{const t=this._reactions.get(e.reaction.targetId)??[];t.push(e.reaction),this._reactions.set(e.reaction.targetId,t),this.emit("reactions",{targetId:e.reaction.targetId,reactions:t});break}case"reaction:removed":{const t=this._reactions.get(e.targetId);if(t){const i=t.filter(s=>s.id!==e.reactionId);this._reactions.set(e.targetId,i),this.emit("reactions",{targetId:e.targetId,reactions:i})}break}case"notification":this._notifications.unshift(e.notification),this.emit("notifications",this._notifications);break;case"typing:indicator":{this._typing.has(e.threadId)||this._typing.set(e.threadId,new Map),this._typing.get(e.threadId).set(e.userId,Date.now()),this.emit("typing",{threadId:e.threadId,userId:e.userId});break}case"viewport:update":{this._viewports.set(e.userId,{scrollX:e.scrollX,scrollY:e.scrollY,viewportWidth:e.viewportWidth,viewportHeight:e.viewportHeight,pageWidth:e.pageWidth,pageHeight:e.pageHeight}),this.emit("viewport",{userId:e.userId});break}case"selection:update":this._selections.set(e.userId,e.selection),this.emit("selection",{userId:e.userId,selection:e.selection});break;case"emoji:drop":this.emit("emoji-drop",{userId:e.userId,emoji:e.emoji,position:e.position});break;case"draw:stroke":this.emit("draw-stroke",{userId:e.userId,points:e.points,color:e.color,width:e.width});break;case"draw:clear":this.emit("draw-clear",{userId:e.userId});break;case"activity:logged":this._activityLogs.unshift(e.activityLog),this._activityLogs.length>100&&(this._activityLogs=this._activityLogs.slice(0,100)),this.emit("activity-logs",this._activityLogs);break;case"error":this.emit("error",e);break}}reset(){this._user=null,this._users.clear(),this._presence.clear(),this._threads.clear(),this._reactions.clear(),this._notifications=[],this._activityLogs=[],this._typing.clear(),this._viewports.clear(),this._selections.clear()}},mt=class extends Me{constructor(e){var t;super(),E(this,"state"),E(this,"connection"),E(this,"config"),E(this,"heartbeatTimer",null),E(this,"lastCursorSend",0),E(this,"pendingCursor",null),E(this,"cursorTimer",null),this.config=e,this.state=new Ot,this.state.baseUrl=(e.endpoint??"").replace(/^ws(s?):/,"http$1:").replace(/\/$/,"");const i=((t=e.endpoint)==null?void 0:t.replace(/^http/,"ws"))??void 0;this.connection=new Mt(i),this.connection.on("message",s=>{this.state.handleMessage(s),this.emit(s.type,s)}),this.connection.on("state",s=>{this.emit("connection",s),s==="connected"?(this.authenticate(),this.startHeartbeat()):s==="disconnected"&&this.stopHeartbeat()})}get connectionState(){return this.connection.state}connect(){this.connection.connect()}disconnect(){this.stopHeartbeat(),this.connection.disconnect(),this.state.reset()}authenticate(){this.send({type:"auth",apiKey:this.config.apiKey,token:this.config.token,room:this.config.room})}send(e){this.connection.send(e)}moveCursor(e){const t=Date.now();this.pendingCursor=e,t-this.lastCursorSend>=50?this.flushCursor():this.cursorTimer||(this.cursorTimer=setTimeout(()=>{this.cursorTimer=null,this.flushCursor()},50))}flushCursor(){this.pendingCursor&&(this.send({type:"cursor:move",position:this.pendingCursor}),this.lastCursorSend=Date.now(),this.pendingCursor=null)}updatePresence(e){this.send({type:"presence:update",status:e})}startHeartbeat(){this.heartbeatTimer=setInterval(()=>{this.send({type:"presence:update",status:"online"})},3e4)}stopHeartbeat(){this.heartbeatTimer&&(clearInterval(this.heartbeatTimer),this.heartbeatTimer=null)}createThread(e,t={}){const i=crypto.randomUUID();return this.send({type:"thread:create",id:i,body:e,mentions:t.mentions??[],position:t.position??null,attachmentIds:t.attachmentIds}),i}reply(e,t,i=[],s){const n=crypto.randomUUID();return this.send({type:"comment:create",threadId:e,id:n,body:t,mentions:i,attachmentIds:s}),n}editComment(e,t,i=[]){this.send({type:"comment:edit",commentId:e,body:t,mentions:i})}deleteComment(e){this.state.removeComment(e),this.send({type:"comment:delete",commentId:e})}resolveThread(e,t=!0){this.send({type:"thread:resolve",threadId:e,resolved:t})}addReaction(e,t,i){this.send({type:"reaction:add",targetId:e,targetType:t,emoji:i})}removeReaction(e){this.send({type:"reaction:remove",reactionId:e})}markRead(e){this.send({type:"notification:read",notificationId:e})}markAllRead(){this.send({type:"notification:read-all"})}performClick(e){this.send({type:"click:perform",position:e})}sendTyping(e){this.send({type:"typing:start",threadId:e})}updateViewport(e){this.send({type:"viewport:update",...e})}updateSelection(e){this.send({type:"selection:update",selection:e})}dropEmoji(e,t){this.send({type:"emoji:drop",emoji:e,position:t})}drawStroke(e,t,i){this.send({type:"draw:stroke",points:e,color:t,width:i})}clearDrawing(){this.send({type:"draw:clear"})}async uploadFile(e){const t=(this.config.endpoint??window.location.origin).replace(/^ws(s?):/,"http$1:"),i=new FormData;i.append("file",e);const s=await fetch(`${t}/api/v1/upload`,{method:"POST",headers:{"X-Pulse-Key":this.config.apiKey,"X-Pulse-Token":this.config.token},body:i});if(!s.ok){const r=await s.json().catch(()=>({error:"Upload failed"}));throw new Error(r.error??"Upload failed")}const n=await s.json();return n.url&&!n.url.startsWith("http")&&(n.url=`${t}${n.url}`),n.thumbnailUrl&&!n.thumbnailUrl.startsWith("http")&&(n.thumbnailUrl=`${t}${n.thumbnailUrl}`),n}setAppearOffline(e){e?(this.stopHeartbeat(),this.send({type:"presence:update",status:"idle"})):(this.startHeartbeat(),this.send({type:"presence:update",status:"online"}))}};/**
+ */function ae({context:o,subscribe:e}){return(t,i)=>{typeof i=="object"?i.addInitializer((function(){new Be(this,{context:o,callback:s=>{t.set.call(this,s)},subscribe:e})})):t.constructor.addInitializer((s=>{new Be(s,{context:o,callback:n=>{s[i]=n},subscribe:e})}))}}var At=Object.defineProperty,_t=(o,e,t)=>e in o?At(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,E=(o,e,t)=>_t(o,typeof e!="symbol"?e+"":e,t);const It="ws://localhost:4567";let Me=class{constructor(){E(this,"handlers",new Map)}on(e,t){this.handlers.has(e)||this.handlers.set(e,new Set);const i=this.handlers.get(e);return i.add(t),()=>i.delete(t)}off(e,t){var i;(i=this.handlers.get(e))==null||i.delete(t)}emit(e,t){var i;(i=this.handlers.get(e))==null||i.forEach(s=>s(t))}removeAll(){this.handlers.clear()}},Mt=class extends Me{constructor(e){super(),E(this,"ws",null),E(this,"endpoint"),E(this,"reconnectAttempt",0),E(this,"reconnectTimer",null),E(this,"_state","disconnected"),this.endpoint=e??It}get state(){return this._state}connect(){this.ws||(this._state="connecting",this.emit("state",this._state),this.ws=new WebSocket(this.endpoint),this.ws.addEventListener("open",()=>{this._state="connected",this.reconnectAttempt=0,this.emit("state",this._state)}),this.ws.addEventListener("message",e=>{const t=JSON.parse(e.data);this.emit("message",t)}),this.ws.addEventListener("close",()=>{this.ws=null,this._state="disconnected",this.emit("state",this._state),this.scheduleReconnect()}),this.ws.addEventListener("error",()=>{var e;(e=this.ws)==null||e.close()}))}disconnect(){var e;this.reconnectTimer&&(clearTimeout(this.reconnectTimer),this.reconnectTimer=null),this.reconnectAttempt=0,(e=this.ws)==null||e.close(),this.ws=null,this._state="disconnected",this.emit("state",this._state)}send(e){var t;((t=this.ws)==null?void 0:t.readyState)===WebSocket.OPEN&&this.ws.send(JSON.stringify(e))}scheduleReconnect(){const e=Math.min(1e3*2**this.reconnectAttempt,3e4);this.reconnectAttempt++,this.reconnectTimer=setTimeout(()=>{this.reconnectTimer=null,this.connect()},e)}},Ot=class extends Me{constructor(){super(...arguments),E(this,"baseUrl",""),E(this,"_user",null),E(this,"_users",new Map),E(this,"_presence",new Map),E(this,"_threads",new Map),E(this,"_reactions",new Map),E(this,"_notifications",[]),E(this,"_activityLogs",[]),E(this,"_typing",new Map),E(this,"_viewports",new Map),E(this,"_selections",new Map)}get user(){return this._user}removeComment(e){for(const[t,i]of this._threads){const s=i.comments.findIndex(n=>n.id===e);if(s!==-1){i.comments.splice(s,1),i.comments.length===0&&this._threads.delete(t),this.emit("threads",this.threads);return}}}get presence(){return[...this._presence.values()]}get threads(){return[...this._threads.values()]}get notifications(){return this._notifications}get unreadCount(){return this._notifications.filter(e=>!e.read).length}markNotificationRead(e){const t=this._notifications.find(i=>i.id===e);t&&!t.read&&(t.read=!0,this.emit("notifications",this._notifications))}markAllNotificationsRead(){let e=!1;for(const t of this._notifications)t.read||(t.read=!0,e=!0);e&&this.emit("notifications",this._notifications)}get activityLogs(){return this._activityLogs}getUser(e){return this._users.get(e)}getReactions(e){return this._reactions.get(e)??[]}getTypingUsers(e){const t=this._typing.get(e);if(!t)return[];const i=Date.now(),s=[];for(const[n,r]of t)i-r<3e3&&s.push(n);return s}get viewports(){return this._viewports}getViewport(e){return this._viewports.get(e)}get selections(){return this._selections}resolveUrl(e){return!this.baseUrl||!e||e.startsWith("http://")||e.startsWith("https://")?e:`${this.baseUrl}${e}`}resolveAttachments(e){return e.map(t=>({...t,url:this.resolveUrl(t.url),thumbnailUrl:t.thumbnailUrl?this.resolveUrl(t.thumbnailUrl):void 0}))}resolveComment(e){return!e.attachments||e.attachments.length===0?e:{...e,attachments:this.resolveAttachments(e.attachments)}}resolveThread(e){return{...e,comments:e.comments.map(t=>this.resolveComment(t))}}handleMessage(e){switch(e.type){case"auth:ok":this._user=e.user,this._users.clear();for(const t of e.users)this._users.set(t.id,t);this._presence.clear();for(const t of e.presence)this._presence.set(t.user.id,t),this._users.set(t.user.id,t.user);this._users.set(e.user.id,e.user),this._threads.clear();for(const t of e.threads)this._threads.set(t.id,this.resolveThread(t));this._notifications=e.notifications,this._reactions.clear();for(const t of e.reactions){const i=this._reactions.get(t.targetId)??[];i.push(t),this._reactions.set(t.targetId,i)}this._activityLogs=[...e.activityLogs],this.emit("auth",e.user),this.emit("presence",this.presence),this.emit("threads",this.threads),this.emit("notifications",this._notifications),this.emit("reactions",null),this.emit("activity-logs",this._activityLogs);break;case"presence:join":this._presence.set(e.user.user.id,e.user),this._users.set(e.user.user.id,e.user.user),this.emit("presence",this.presence);break;case"presence:leave":this._presence.delete(e.userId),this._viewports.delete(e.userId),this._selections.delete(e.userId);for(const t of this._typing.values())t.delete(e.userId);this.emit("presence",this.presence);break;case"presence:update":{const t=this._presence.get(e.userId);t&&(t.status=e.status,this.emit("presence",this.presence));break}case"cursor:move":this.emit("cursor",{userId:e.userId,position:e.position});break;case"click:perform":this.emit("click",{userId:e.userId,position:e.position});break;case"thread:created":this._threads.set(e.thread.id,this.resolveThread(e.thread)),this.emit("threads",this.threads);break;case"comment:created":{const t=this._threads.get(e.threadId);t&&(t.comments.push(this.resolveComment(e.comment)),t.updatedAt=e.comment.createdAt,this.emit("threads",this.threads));break}case"comment:edited":{const t=this._threads.get(e.threadId);if(t){const i=t.comments.findIndex(s=>s.id===e.comment.id);i!==-1&&(t.comments[i]=this.resolveComment(e.comment)),this.emit("threads",this.threads)}break}case"comment:deleted":{const t=this._threads.get(e.threadId);t&&(t.comments=t.comments.filter(i=>i.id!==e.commentId),t.comments.length===0&&this._threads.delete(e.threadId),this.emit("threads",this.threads));break}case"thread:resolved":{const t=this._threads.get(e.threadId);t&&(t.resolved=e.resolved,this.emit("threads",this.threads));break}case"thread:deleted":this._threads.delete(e.threadId),this.emit("threads",this.threads);break;case"reaction:added":{const t=this._reactions.get(e.reaction.targetId)??[];t.push(e.reaction),this._reactions.set(e.reaction.targetId,t),this.emit("reactions",{targetId:e.reaction.targetId,reactions:t});break}case"reaction:removed":{const t=this._reactions.get(e.targetId);if(t){const i=t.filter(s=>s.id!==e.reactionId);this._reactions.set(e.targetId,i),this.emit("reactions",{targetId:e.targetId,reactions:i})}break}case"notification":this._notifications.unshift(e.notification),this.emit("notifications",this._notifications);break;case"typing:indicator":{this._typing.has(e.threadId)||this._typing.set(e.threadId,new Map),this._typing.get(e.threadId).set(e.userId,Date.now()),this.emit("typing",{threadId:e.threadId,userId:e.userId});break}case"viewport:update":{this._viewports.set(e.userId,{scrollX:e.scrollX,scrollY:e.scrollY,viewportWidth:e.viewportWidth,viewportHeight:e.viewportHeight,pageWidth:e.pageWidth,pageHeight:e.pageHeight}),this.emit("viewport",{userId:e.userId});break}case"selection:update":this._selections.set(e.userId,e.selection),this.emit("selection",{userId:e.userId,selection:e.selection});break;case"emoji:drop":this.emit("emoji-drop",{userId:e.userId,emoji:e.emoji,position:e.position});break;case"draw:stroke":this.emit("draw-stroke",{userId:e.userId,points:e.points,color:e.color,width:e.width});break;case"draw:clear":this.emit("draw-clear",{userId:e.userId});break;case"activity:logged":this._activityLogs.unshift(e.activityLog),this._activityLogs.length>100&&(this._activityLogs=this._activityLogs.slice(0,100)),this.emit("activity-logs",this._activityLogs);break;case"error":this.emit("error",e);break}}reset(){this._user=null,this._users.clear(),this._presence.clear(),this._threads.clear(),this._reactions.clear(),this._notifications=[],this._activityLogs=[],this._typing.clear(),this._viewports.clear(),this._selections.clear()}},mt=class extends Me{constructor(e){var t;super(),E(this,"state"),E(this,"connection"),E(this,"config"),E(this,"heartbeatTimer",null),E(this,"lastCursorSend",0),E(this,"pendingCursor",null),E(this,"cursorTimer",null),this.config=e,this.state=new Ot,this.state.baseUrl=(e.endpoint??"").replace(/^ws(s?):/,"http$1:").replace(/\/$/,"");const i=((t=e.endpoint)==null?void 0:t.replace(/^http/,"ws"))??void 0;this.connection=new Mt(i),this.connection.on("message",s=>{this.state.handleMessage(s),this.emit(s.type,s)}),this.connection.on("state",s=>{this.emit("connection",s),s==="connected"?(this.authenticate(),this.startHeartbeat()):s==="disconnected"&&this.stopHeartbeat()})}get connectionState(){return this.connection.state}connect(){this.connection.connect()}disconnect(){this.stopHeartbeat(),this.connection.disconnect(),this.state.reset()}authenticate(){this.send({type:"auth",apiKey:this.config.apiKey,token:this.config.token,room:this.config.room})}send(e){this.connection.send(e)}moveCursor(e){const t=Date.now();this.pendingCursor=e,t-this.lastCursorSend>=50?this.flushCursor():this.cursorTimer||(this.cursorTimer=setTimeout(()=>{this.cursorTimer=null,this.flushCursor()},50))}flushCursor(){this.pendingCursor&&(this.send({type:"cursor:move",position:this.pendingCursor}),this.lastCursorSend=Date.now(),this.pendingCursor=null)}updatePresence(e){this.send({type:"presence:update",status:e})}startHeartbeat(){this.heartbeatTimer=setInterval(()=>{this.send({type:"presence:update",status:"online"})},3e4)}stopHeartbeat(){this.heartbeatTimer&&(clearInterval(this.heartbeatTimer),this.heartbeatTimer=null)}createThread(e,t={}){const i=crypto.randomUUID();return this.send({type:"thread:create",id:i,body:e,mentions:t.mentions??[],position:t.position??null,attachmentIds:t.attachmentIds}),i}reply(e,t,i=[],s){const n=crypto.randomUUID();return this.send({type:"comment:create",threadId:e,id:n,body:t,mentions:i,attachmentIds:s}),n}editComment(e,t,i=[]){this.send({type:"comment:edit",commentId:e,body:t,mentions:i})}deleteComment(e){this.state.removeComment(e),this.send({type:"comment:delete",commentId:e})}resolveThread(e,t=!0){this.send({type:"thread:resolve",threadId:e,resolved:t})}addReaction(e,t,i){this.send({type:"reaction:add",targetId:e,targetType:t,emoji:i})}removeReaction(e){this.send({type:"reaction:remove",reactionId:e})}markRead(e){this.state.markNotificationRead(e),this.send({type:"notification:read",notificationId:e})}markAllRead(){this.state.markAllNotificationsRead(),this.send({type:"notification:read-all"})}performClick(e){this.send({type:"click:perform",position:e})}sendTyping(e){this.send({type:"typing:start",threadId:e})}updateViewport(e){this.send({type:"viewport:update",...e})}updateSelection(e){this.send({type:"selection:update",selection:e})}dropEmoji(e,t){this.send({type:"emoji:drop",emoji:e,position:t})}drawStroke(e,t,i){this.send({type:"draw:stroke",points:e,color:t,width:i})}clearDrawing(){this.send({type:"draw:clear"})}async uploadFile(e){const t=(this.config.endpoint??window.location.origin).replace(/^ws(s?):/,"http$1:"),i=new FormData;i.append("file",e);const s=await fetch(`${t}/api/v1/upload`,{method:"POST",headers:{"X-Pulse-Key":this.config.apiKey,"X-Pulse-Token":this.config.token},body:i});if(!s.ok){const r=await s.json().catch(()=>({error:"Upload failed"}));throw new Error(r.error??"Upload failed")}const n=await s.json();return n.url&&!n.url.startsWith("http")&&(n.url=`${t}${n.url}`),n.thumbnailUrl&&!n.thumbnailUrl.startsWith("http")&&(n.thumbnailUrl=`${t}${n.thumbnailUrl}`),n}setAppearOffline(e){e?(this.stopHeartbeat(),this.send({type:"presence:update",status:"idle"})):(this.startHeartbeat(),this.send({type:"presence:update",status:"online"}))}};/**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -2547,7 +2547,7 @@
           min-height: 44px;
         }
       }
-    `];Ne([x({attribute:!1})],re.prototype,"settings",2);Ne([x()],re.prototype,"roomId",2);re=Ne([L("pulse-widget-settings-panel")],re);const me={enabled:!0,showMyCursor:!0,showOthersCursors:!0,showMyClicks:!0,showOthersClicks:!0,appearOffline:!1,showCommentPins:!0,showViewportIndicators:!0,showSelections:!0,showDrawings:!0},kt="pulse:settings:";function us(o){try{const e=localStorage.getItem(`${kt}${o}`);return e?{...me,...JSON.parse(e)}:{...me}}catch{return{...me}}}function fs(o,e){localStorage.setItem(`${kt}${o}`,JSON.stringify(e))}var ms=Object.defineProperty,gs=Object.getOwnPropertyDescriptor,j=(o,e,t,i)=>{for(var s=i>1?void 0:i?gs(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&&ms(e,t,s),s};let R=class extends T{constructor(){super(...arguments),this.collapsed=!1,this.activePanel=null,this.pinModeActive=!1,this.featuresDisabled=!1,this.drawModeActive=!1,this.followingUserId=null,this.display="floating",this.users=[],this.unreadCount=0}connectedCallback(){super.connectedCallback(),this.setupPresence()}disconnectedCallback(){var o,e;super.disconnectedCallback(),(o=this.unsub)==null||o.call(this),(e=this.notifUnsub)==null||e.call(this)}updated(o){var e,t;o.has("client")&&this.client&&((e=this.unsub)==null||e.call(this),(t=this.notifUnsub)==null||t.call(this),this.setupPresence())}setupPresence(){this.client&&(this.users=this.client.state.presence,this.unreadCount=this.client.state.unreadCount,this.unsub=this.client.state.on("presence",o=>{this.users=o}),this.notifUnsub=this.client.state.on("notifications",()=>{this.unreadCount=this.client.state.unreadCount}))}getInitials(o){return o.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}fire(o){this.dispatchEvent(new CustomEvent("toolbar-action",{detail:o,bubbles:!0,composed:!0}))}fireFollow(o){this.dispatchEvent(new CustomEvent("toolbar-follow",{detail:o,bubbles:!0,composed:!0}))}fireToggle(){this.dispatchEvent(new CustomEvent("toolbar-toggle",{bubbles:!0,composed:!0}))}render(){const o=this.display==="inline";if(this.collapsed)return u`
+    `];Ne([x({attribute:!1})],re.prototype,"settings",2);Ne([x()],re.prototype,"roomId",2);re=Ne([L("pulse-widget-settings-panel")],re);const me={enabled:!0,showMyCursor:!0,showOthersCursors:!0,showMyClicks:!0,showOthersClicks:!0,appearOffline:!1,showCommentPins:!0,showViewportIndicators:!0,showSelections:!0,showDrawings:!0},kt="pulse:settings:";function us(o){try{const e=localStorage.getItem(`${kt}${o}`);return e?{...me,...JSON.parse(e)}:{...me}}catch{return{...me}}}function fs(o,e){localStorage.setItem(`${kt}${o}`,JSON.stringify(e))}var ms=Object.defineProperty,gs=Object.getOwnPropertyDescriptor,j=(o,e,t,i)=>{for(var s=i>1?void 0:i?gs(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&&ms(e,t,s),s};let R=class extends T{constructor(){super(...arguments),this.collapsed=!1,this.activePanel=null,this.pinModeActive=!1,this.featuresDisabled=!1,this.drawModeActive=!1,this.followingUserId=null,this.display="floating",this.users=[],this.unreadCount=0}connectedCallback(){super.connectedCallback(),this.setupPresence()}disconnectedCallback(){var o,e,t;super.disconnectedCallback(),(o=this.unsub)==null||o.call(this),(e=this.authUnsub)==null||e.call(this),(t=this.notifUnsub)==null||t.call(this)}updated(o){var e,t,i;o.has("client")&&this.client&&((e=this.unsub)==null||e.call(this),(t=this.authUnsub)==null||t.call(this),(i=this.notifUnsub)==null||i.call(this),this.setupPresence())}setupPresence(){this.client&&(this.users=this.client.state.presence,this.unreadCount=this.client.state.unreadCount,this.unsub=this.client.state.on("presence",o=>{this.users=[...o]}),this.authUnsub=this.client.state.on("auth",()=>{this.users=this.client.state.presence,this.unreadCount=this.client.state.unreadCount}),this.notifUnsub=this.client.state.on("notifications",()=>{this.unreadCount=this.client.state.unreadCount}))}getInitials(o){return o.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}fire(o){this.dispatchEvent(new CustomEvent("toolbar-action",{detail:o,bubbles:!0,composed:!0}))}fireFollow(o){this.dispatchEvent(new CustomEvent("toolbar-follow",{detail:o,bubbles:!0,composed:!0}))}fireToggle(){this.dispatchEvent(new CustomEvent("toolbar-toggle",{bubbles:!0,composed:!0}))}render(){const o=this.display==="inline";if(this.collapsed)return u`
         <div class="toolbar collapsed ${o?"inline":""}" @click=${this.fireToggle}>
           <span class="fab-icon">${C(_i,o?18:24)}</span>
         </div>

package/dist/pulse-elements.js

@@ -245,6 +245,18 @@ let De = class {
   get unreadCount() {
     return this._notifications.filter((e) => !e.read).length;
   }
+  /** Optimistically mark a single notification as read. */
+  markNotificationRead(e) {
+    const t = this._notifications.find((i) => i.id === e);
+    t && !t.read && (t.read = !0, this.emit("notifications", this._notifications));
+  }
+  /** Optimistically mark all notifications as read. */
+  markAllNotificationsRead() {
+    let e = !1;
+    for (const t of this._notifications)
+      t.read || (t.read = !0, e = !0);
+    e && this.emit("notifications", this._notifications);
+  }
   get activityLogs() {
     return this._activityLogs;
   }
@@ -514,10 +526,10 @@ let De = class {
   }
   // ── Notifications ──
   markRead(e) {
-    this.send({ type: "notification:read", notificationId: e });
+    this.state.markNotificationRead(e), this.send({ type: "notification:read", notificationId: e });
   }
   markAllRead() {
-    this.send({ type: "notification:read-all" });
+    this.state.markAllNotificationsRead(), this.send({ type: "notification:read-all" });
   }
   // ── Clicks ──
   performClick(e) {
@@ -575,10 +587,10 @@ let De = class {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ye = globalThis, He = ye.ShadowRoot && (ye.ShadyCSS === void 0 || ye.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Be = Symbol(), Je = /* @__PURE__ */ new WeakMap();
+const ye = globalThis, He = ye.ShadowRoot && (ye.ShadyCSS === void 0 || ye.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ne = Symbol(), Je = /* @__PURE__ */ new WeakMap();
 let kt = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== Be) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== Ne) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
@@ -594,14 +606,14 @@ let kt = class {
     return this.cssText;
   }
 };
-const Bt = (n) => new kt(typeof n == "string" ? n : n + "", void 0, Be), M = (n, ...e) => {
+const Nt = (n) => new kt(typeof n == "string" ? n : n + "", void 0, Ne), M = (n, ...e) => {
   const t = n.length === 1 ? n[0] : e.reduce((i, s, o) => i + ((r) => {
     if (r._$cssResult$ === !0) return r.cssText;
     if (typeof r == "number") return r;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(s) + n[o + 1], n[0]);
-  return new kt(t, n, Be);
-}, Nt = (n, e) => {
+  return new kt(t, n, Ne);
+}, Bt = (n, e) => {
   if (He) n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const i = document.createElement("style"), s = ye.litNonce;
@@ -610,7 +622,7 @@ const Bt = (n) => new kt(typeof n == "string" ? n : n + "", void 0, Be), M = (n,
 }, Ze = He ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
-  return Bt(t);
+  return Nt(t);
 })(n) : n;
 /**
  * @license
@@ -645,7 +657,7 @@ const { is: Ft, defineProperty: qt, getOwnPropertyDescriptor: Vt, getOwnProperty
       }
   }
   return t;
-} }, Ne = (n, e) => !Ft(n, e), et = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Ne };
+} }, Be = (n, e) => !Ft(n, e), et = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Be };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), H.litPropertyMetadata ?? (H.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let G = class extends HTMLElement {
   static addInitializer(e) {
@@ -731,7 +743,7 @@ let G = class extends HTMLElement {
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Nt(e, this.constructor.elementStyles), e;
+    return Bt(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     var e;
@@ -774,7 +786,7 @@ let G = class extends HTMLElement {
     var r;
     if (e !== void 0) {
       const a = this.constructor;
-      if (s === !1 && (o = this[e]), i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? Ne)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(a._$Eu(e, i)))) return;
+      if (s === !1 && (o = this[e]), i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? Be)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(a._$Eu(e, i)))) return;
       this.C(e, t, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -857,9 +869,9 @@ G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[ne("elementPrope
  * SPDX-License-Identifier: BSD-3-Clause
  */
 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, N = RegExp(`>|${Ie}(?:([^\\s"'>=/]+)(${Ie}*=${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);
-function Pt(n, e) {
+function At(n, e) {
   if (!Fe(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return it !== void 0 ? it.createHTML(e) : e;
 }
@@ -869,11 +881,11 @@ const Qt = (n, e) => {
   for (let a = 0; a < t; a++) {
     const l = n[a];
     let d, c, h = -1, p = 0;
-    for (; p < l.length && (r.lastIndex = p, c = r.exec(l), c !== null); ) p = r.lastIndex, r === se ? c[1] === "!--" ? r = st : c[1] !== void 0 ? r = nt : c[2] !== void 0 ? (Tt.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] === '"' ? rt : ot) : r === rt || r === ot ? r = N : r === st || r === nt ? r = se : (r = N, s = void 0);
-    const m = r === N && n[a + 1].startsWith("/>") ? " " : "";
+    for (; p < l.length && (r.lastIndex = p, c = r.exec(l), c !== null); ) p = r.lastIndex, r === se ? c[1] === "!--" ? r = st : c[1] !== void 0 ? r = nt : c[2] !== void 0 ? (Tt.test(c[2]) && (s = RegExp("</" + c[2], "g")), r = B) : c[3] !== void 0 && (r = B) : r === B ? 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 ? B : c[3] === '"' ? rt : ot) : r === rt || r === ot ? r = B : r === st || r === nt ? r = se : (r = B, s = void 0);
+    const m = r === B && n[a + 1].startsWith("/>") ? " " : "";
     o += r === se ? l + Gt : h >= 0 ? (i.push(d), l.slice(0, h) + Et + l.slice(h) + D + m) : l + D + (h === -2 ? a : m);
   }
-  return [Pt(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+  return [At(n, o + (n[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
 class ce {
   constructor({ strings: e, _$litType$: t }, i) {
@@ -980,7 +992,7 @@ class me {
   }
   $(e) {
     var o;
-    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ce.createElement(Pt(i.h, i.h[0]), this.options)), i);
+    const { values: t, _$litType$: i } = e, s = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = ce.createElement(At(i.h, i.h[0]), this.options)), i);
     if (((o = this._$AH) == null ? void 0 : o._$AD) === s) this._$AH.p(t);
     else {
       const r = new ei(s, this), a = r.u(this.options);
@@ -1093,7 +1105,7 @@ const oi = (n, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const q = globalThis;
-let P = class extends G {
+let A = class extends G {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1119,9 +1131,9 @@ let P = class extends G {
   }
 };
 var yt;
-P._$litElement$ = !0, P.finalized = !0, (yt = q.litElementHydrateSupport) == null || yt.call(q, { LitElement: P });
+A._$litElement$ = !0, A.finalized = !0, (yt = q.litElementHydrateSupport) == null || yt.call(q, { LitElement: A });
 const Oe = q.litElementPolyfillSupport;
-Oe == null || Oe({ LitElement: P });
+Oe == null || Oe({ LitElement: A });
 (q.litElementVersions ?? (q.litElementVersions = [])).push("4.2.2");
 /**
  * @license
@@ -1138,7 +1150,7 @@ const L = (n) => (e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ri = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Ne }, ai = (n = ri, e, t) => {
+const ri = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Be }, ai = (n = ri, e, t) => {
   const { kind: i, metadata: s } = t;
   let o = globalThis.litPropertyMetadata.get(s);
   if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), i === "setter" && ((n = Object.create(n)).wrapped = !0), o.set(t.name, n), i === "accessor") {
@@ -1179,7 +1191,7 @@ var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, ee = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && li(e, t, s), s;
 };
-let X = class extends P {
+let X = class extends A {
   constructor() {
     super(...arguments), this.apiKey = "", this.token = "", this.room = "";
   }
@@ -1219,12 +1231,12 @@ ee([
 X = ee([
   L("pulse-provider")
 ], X);
-var di = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, Pe = (n, e, t, i) => {
+var di = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, Ae = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? hi(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 && di(e, t, s), s;
 };
-let Z = class extends P {
+let Z = class extends A {
   constructor() {
     super(...arguments), this.maxVisible = 5, this.users = [];
   }
@@ -1372,17 +1384,17 @@ Z.styles = M`
       opacity: 1;
     }
   `;
-Pe([
+Ae([
   fe({ context: Q, subscribe: !0 }),
   x({ attribute: !1 })
 ], Z.prototype, "client", 2);
-Pe([
+Ae([
   x({ type: Number, attribute: "max-visible" })
 ], Z.prototype, "maxVisible", 2);
-Pe([
+Ae([
   $()
 ], Z.prototype, "users", 2);
-Z = Pe([
+Z = Ae([
   L("pulse-presence")
 ], Z);
 var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, qe = (n, e, t, i) => {
@@ -1390,7 +1402,7 @@ var pi = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, qe = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && pi(e, t, s), s;
 };
-let de = class extends P {
+let de = class extends A {
   constructor() {
     super(...arguments), this.cursors = /* @__PURE__ */ new Map(), this.unsubs = [], this.handleLocalCursor = (n) => {
       var e;
@@ -1519,7 +1531,7 @@ var fi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, ge = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && fi(e, t, s), s;
 };
-let Y = class extends P {
+let Y = class extends A {
   constructor() {
     super(...arguments), this.showResolved = !1, this.threads = [], this.replyingTo = null;
   }
@@ -1883,7 +1895,7 @@ const vi = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let he = class extends P {
+let he = class extends A {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -2123,7 +2135,7 @@ var yi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, te = (n, e
   return i && s && yi(e, t, s), s;
 };
 const $i = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let B = class extends P {
+let N = class extends A {
   constructor() {
     super(...arguments), this.targetId = "", this.targetType = "comment", this.reactions = [], this.showPicker = !1;
   }
@@ -2197,7 +2209,7 @@ let B = class extends P {
     `;
   }
 };
-B.styles = M`
+N.styles = M`
     :host {
       display: inline-flex;
       align-items: center;
@@ -2312,22 +2324,22 @@ B.styles = M`
 te([
   fe({ context: Q, subscribe: !0 }),
   x({ attribute: !1 })
-], B.prototype, "client", 2);
+], N.prototype, "client", 2);
 te([
   x({ attribute: "target-id" })
-], B.prototype, "targetId", 2);
+], N.prototype, "targetId", 2);
 te([
   x({ attribute: "target-type" })
-], B.prototype, "targetType", 2);
+], N.prototype, "targetType", 2);
 te([
   $()
-], B.prototype, "reactions", 2);
+], N.prototype, "reactions", 2);
 te([
   $()
-], B.prototype, "showPicker", 2);
-B = te([
+], N.prototype, "showPicker", 2);
+N = te([
   L("pulse-reactions")
-], B);
+], N);
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -2400,7 +2412,7 @@ const Si = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pi = [
+const Ai = [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["path", { d: "M12 6v6l4 2" }]
 ];
@@ -2410,7 +2422,7 @@ const Pi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ai = [
+const Pi = [
   [
     "path",
     {
@@ -2486,7 +2498,7 @@ const Oi = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const At = [
+const Pt = [
   ["path", { d: "M12 17v5" }],
   [
     "path",
@@ -2663,7 +2675,7 @@ const ie = M`
     width: 18px;
     height: 18px;
   }
-`, Ae = M`
+`, Pe = M`
   .pw-scrollable::-webkit-scrollbar {
     width: 4px;
   }
@@ -2680,7 +2692,7 @@ var Di = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, We = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Di(e, t, s), s;
 };
-let K = class extends P {
+let K = class extends A {
   constructor() {
     super(...arguments), this.items = [], this.unsubs = [], this.counter = 0;
   }
@@ -2765,7 +2777,7 @@ let K = class extends P {
 K.styles = [
   ie,
   ve,
-  Ae,
+  Pe,
   M`
       :host {
         display: block;
@@ -2900,7 +2912,7 @@ We([
 K = We([
   L("pulse-widget-activity-panel")
 ], K);
-const Bi = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lt = "#6366f1", ct = "#e2e8f0", Ni = "#f8fafc", Fi = "#e2e8f0", dt = "#64748b", we = 28, qi = Array.from({ length: we }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
+const Ni = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lt = "#6366f1", ct = "#e2e8f0", Bi = "#f8fafc", Fi = "#e2e8f0", dt = "#64748b", we = 28, qi = Array.from({ length: we }, (n, e) => 0.2 + Math.abs(Math.sin(e * 12.9898 + 78.233) * 43758.5453) % 1 * 0.8);
 function ht(n) {
   const e = Math.max(0, Math.floor(n)), t = Math.floor(e / 60), i = e % 60;
   return `${t}:${i.toString().padStart(2, "0")}`;
@@ -2926,10 +2938,10 @@ class je {
       width: "220px",
       height: "44px",
       padding: "0 10px",
-      background: Ni,
+      background: Bi,
       borderRadius: "12px",
       border: `1px solid ${Fi}`,
-      fontFamily: Bi,
+      fontFamily: Ni,
       fontSize: "11px",
       color: dt,
       userSelect: "none",
@@ -4510,7 +4522,7 @@ var os = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, U = (n, e,
   return i && s && os(e, t, s), s;
 };
 const as = ["👍", "👎", "❤️", "🎉", "👀", "🚀"];
-let A = class extends P {
+let P = class extends A {
   constructor() {
     super(...arguments), this.highlightThreadId = null, this.threadsVersion = 0, this.replyingTo = null, this.editingCommentId = null, this.editBody = "", this.pickerOpenForComment = null, this.typingByThread = /* @__PURE__ */ new Map(), this.reactionsVersion = 0, this.typingTimers = /* @__PURE__ */ new Map(), this.lastTypingSend = /* @__PURE__ */ new Map(), this.replyAttachmentIds = [];
   }
@@ -4625,14 +4637,14 @@ let A = class extends P {
   }
   async handleAttachImage() {
     this.upload || (this.upload = new re(this.client));
-    const n = A.MAX_ATTACHMENTS - this.replyAttachmentIds.length;
+    const n = P.MAX_ATTACHMENTS - this.replyAttachmentIds.length;
     if (n <= 0) return;
     const e = await this.upload.pickFiles("image/*", n);
     e.length > 0 && (this.replyAttachmentIds.push(...e.map((t) => t.id)), this.requestUpdate());
   }
   async handleRecordAudio(n) {
     var i;
-    if (this.replyAttachmentIds.length >= A.MAX_ATTACHMENTS) return;
+    if (this.replyAttachmentIds.length >= P.MAX_ATTACHMENTS) return;
     this.upload || (this.upload = new re(this.client)), this.audioRecorder || (this.audioRecorder = new ze());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.audioRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4642,7 +4654,7 @@ let A = class extends P {
   }
   async handleRecordVideo(n) {
     var i;
-    if (this.replyAttachmentIds.length >= A.MAX_ATTACHMENTS) return;
+    if (this.replyAttachmentIds.length >= P.MAX_ATTACHMENTS) return;
     this.upload || (this.upload = new re(this.client)), this.videoRecorder || (this.videoRecorder = new Ue());
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(`[data-thread-id="${n}"]`), t = await this.videoRecorder.startRecording(e ?? document.body);
     if (t) {
@@ -4825,7 +4837,7 @@ let A = class extends P {
         data-thread-id=${n.id}
       >
         ${n.position ? u`<div class="pin-badge">
-              ${C(At, 12)}
+              ${C(Pt, 12)}
               Pinned
             </div>` : b}
         ${n.comments.map((t, i) => {
@@ -4923,10 +4935,10 @@ let A = class extends P {
     `;
   }
 };
-A.styles = [
+P.styles = [
   ie,
   ve,
-  Ae,
+  Pe,
   M`
       :host {
         display: block;
@@ -5467,37 +5479,37 @@ A.styles = [
       }
     `
 ];
-A.MAX_ATTACHMENTS = 5;
+P.MAX_ATTACHMENTS = 5;
 U([
   x({ attribute: !1 })
-], A.prototype, "client", 2);
+], P.prototype, "client", 2);
 U([
   x()
-], A.prototype, "highlightThreadId", 2);
+], P.prototype, "highlightThreadId", 2);
 U([
   $()
-], A.prototype, "threadsVersion", 2);
+], P.prototype, "threadsVersion", 2);
 U([
   $()
-], A.prototype, "replyingTo", 2);
+], P.prototype, "replyingTo", 2);
 U([
   $()
-], A.prototype, "editingCommentId", 2);
+], P.prototype, "editingCommentId", 2);
 U([
   $()
-], A.prototype, "editBody", 2);
+], P.prototype, "editBody", 2);
 U([
   $()
-], A.prototype, "pickerOpenForComment", 2);
+], P.prototype, "pickerOpenForComment", 2);
 U([
   $()
-], A.prototype, "typingByThread", 2);
+], P.prototype, "typingByThread", 2);
 U([
   $()
-], A.prototype, "reactionsVersion", 2);
-A = U([
+], P.prototype, "reactionsVersion", 2);
+P = U([
   L("pulse-widget-comments-panel")
-], A);
+], P);
 var ls = Object.defineProperty, cs = Object.getOwnPropertyDescriptor, Xe = (n, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? cs(e, t) : e, o = n.length - 1, r; o >= 0; o--)
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
@@ -5516,7 +5528,7 @@ const ds = {
   "thread:resolved": "✅",
   "reaction:added": "🎉"
 };
-let pe = class extends P {
+let pe = class extends A {
   constructor() {
     super(...arguments), this.notifications = [];
   }
@@ -5607,7 +5619,7 @@ let pe = class extends P {
 pe.styles = [
   ie,
   ve,
-  Ae,
+  Pe,
   M`
       :host {
         display: block;
@@ -6205,7 +6217,7 @@ var vs = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ye = (n, e
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && vs(e, t, s), s;
 };
-let ue = class extends P {
+let ue = class extends A {
   constructor() {
     super(...arguments), this.roomId = "";
   }
@@ -6294,7 +6306,7 @@ let ue = class extends P {
 ue.styles = [
   ie,
   ve,
-  Ae,
+  Pe,
   M`
       :host {
         display: block;
@@ -6503,7 +6515,7 @@ var $s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, j = (n, e,
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && $s(e, t, s), s;
 };
-let R = class extends P {
+let R = class extends A {
   constructor() {
     super(...arguments), this.collapsed = !1, this.activePanel = null, this.pinModeActive = !1, this.featuresDisabled = !1, this.drawModeActive = !1, this.followingUserId = null, this.display = "floating", this.users = [], this.unreadCount = 0;
   }
@@ -6511,16 +6523,18 @@ let R = class extends P {
     super.connectedCallback(), this.setupPresence();
   }
   disconnectedCallback() {
-    var n, e;
-    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this), (e = this.notifUnsub) == null || e.call(this);
+    var n, e, t;
+    super.disconnectedCallback(), (n = this.unsub) == null || n.call(this), (e = this.authUnsub) == null || e.call(this), (t = this.notifUnsub) == null || t.call(this);
   }
   updated(n) {
-    var e, t;
-    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), (t = this.notifUnsub) == null || t.call(this), this.setupPresence());
+    var e, t, i;
+    n.has("client") && this.client && ((e = this.unsub) == null || e.call(this), (t = this.authUnsub) == null || t.call(this), (i = this.notifUnsub) == null || i.call(this), this.setupPresence());
   }
   setupPresence() {
     this.client && (this.users = this.client.state.presence, this.unreadCount = this.client.state.unreadCount, this.unsub = this.client.state.on("presence", (n) => {
-      this.users = n;
+      this.users = [...n];
+    }), this.authUnsub = this.client.state.on("auth", () => {
+      this.users = this.client.state.presence, this.unreadCount = this.client.state.unreadCount;
     }), this.notifUnsub = this.client.state.on("notifications", () => {
       this.unreadCount = this.client.state.unreadCount;
     }));
@@ -6592,7 +6606,7 @@ let R = class extends P {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(At)}
+          ${C(Pt)}
         </button>
 
         <!-- View comments -->
@@ -6603,7 +6617,7 @@ let R = class extends P {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Ai)}
+          ${C(Pi)}
         </button>
 
         <!-- Activity feed -->
@@ -6614,7 +6628,7 @@ let R = class extends P {
           ?disabled=${this.featuresDisabled}
           style="${this.featuresDisabled ? "opacity:0.35;pointer-events:none" : ""}"
         >
-          ${C(Pi)}
+          ${C(Ai)}
         </button>
 
         <!-- Draw mode -->
@@ -6994,7 +7008,7 @@ var Cs = Object.defineProperty, Ts = Object.getOwnPropertyDescriptor, _ = (n, e,
     (r = n[o]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Cs(e, t, s), s;
 };
-let T = class extends P {
+let T = class extends A {
   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 = { ...$e }, 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(() => {
@@ -7499,6 +7513,6 @@ export {
   he as PulseNotifications,
   Z as PulsePresence,
   X as PulseProvider,
-  B as PulseReactions,
+  N as PulseReactions,
   T as PulseWidget
 };

package/package.json

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