microboard-temp 0.13.59 → 0.13.61

package/dist/esm/browser.js

@@ -5831,17 +5831,50 @@ function getRecordByIdFromList(id, list) {
   return;
 }
 
+// src/Events/identity.ts
+function getBoardEventSessionId(body) {
+  if (body.sessionId) {
+    return body.sessionId;
+  }
+  if (body.userId === undefined || body.userId === null) {
+    return;
+  }
+  return String(body.userId);
+}
+function getConnectionSessionId(connection) {
+  return connection?.getSessionId?.() || connection?.sessionId || String(connection?.connectionId || 0);
+}
+function getConnectionSessionIds(connection) {
+  const ids = new Set;
+  const primary = connection?.getSessionId?.() || connection?.sessionId;
+  if (primary) {
+    ids.add(primary);
+  }
+  if (connection?.connectionId !== undefined) {
+    ids.add(String(connection.connectionId));
+  }
+  if (ids.size === 0) {
+    ids.add("0");
+  }
+  return Array.from(ids);
+}
+function getConnectionAuthorUserId(connection) {
+  return connection?.getAuthorUserId?.() || connection?.authorUserId || connection?.getCurrentUser?.();
+}
+
 // src/Events/Log/shouldSkipEvent.ts
-function shouldSkipEvent(record, userId) {
+function shouldSkipEvent(record, sessionIds) {
   const { operation } = record.event.body;
-  return record.event.body.userId !== userId || operation.method === "updateVideoData" || operation.class === "Audio" && operation.method === "setUrl";
+  const eventSessionId = getBoardEventSessionId(record.event.body);
+  return eventSessionId === undefined || !sessionIds.includes(eventSessionId) || operation.method === "updateVideoData" || operation.class === "Audio" && operation.method === "setUrl";
 }
+var init_shouldSkipEvent = () => {};
 
 // src/Events/Log/getRedoRecordFromList.ts
-function getRedoRecordFromList(userId, list) {
+function getRedoRecordFromList(sessionIds, list) {
   let counter = 0;
   for (const record of list.backwardIterable()) {
-    if (shouldSkipEvent(record, userId)) {
+    if (shouldSkipEvent(record, sessionIds)) {
       continue;
     }
     if (record.event.body.operation.method !== "undo" && record.event.body.operation.method !== "redo") {
@@ -5860,17 +5893,19 @@ function getRedoRecordFromList(userId, list) {
   }
   return null;
 }
-var init_getRedoRecordFromList = () => {};
+var init_getRedoRecordFromList = __esm(() => {
+  init_shouldSkipEvent();
+});
 
 // src/Events/Log/getUndoRecordFromList.ts
-function getUndoRecordFromList(userId, list) {
+function getUndoRecordFromList(sessionIds, list) {
   let counter = 0;
   const isAllEventsConfirmed = list.isAllEventsConfirmed();
   if (!isAllEventsConfirmed) {
     return null;
   }
   for (const record of list.getConfirmedRecords().slice().reverse()) {
-    if (shouldSkipEvent(record, userId)) {
+    if (shouldSkipEvent(record, sessionIds)) {
       continue;
     }
     if (record.event.body.operation.method === "undo") {
@@ -5883,7 +5918,9 @@ function getUndoRecordFromList(userId, list) {
   }
   return null;
 }
-var init_getUndoRecordFromList = () => {};
+var init_getUndoRecordFromList = __esm(() => {
+  init_shouldSkipEvent();
+});
 
 // src/Events/Log/getUnpublishedEventFromList.ts
 function getUnpublishedEventFromList(list) {
@@ -5962,11 +5999,12 @@ function expandEvents(events) {
         order: event.order,
         body: {
           eventId: operation.actualId || bodyWithoutOps.eventId,
+          authorUserId: bodyWithoutOps.authorUserId,
+          sessionId: bodyWithoutOps.sessionId,
           userId: bodyWithoutOps.userId,
           boardId: bodyWithoutOps.boardId,
           operation
         },
-        userId: bodyWithoutOps.userId,
         lastKnownOrder
       }));
     } else {
@@ -6085,7 +6123,6 @@ function deserializeAndApplyToList(events, list, board) {
         const singleEvent = {
           order: event.order,
           lastKnownOrder,
-          userId: bodyWithoutOps.userId,
           body: {
             ...bodyWithoutOps,
             operation: op
@@ -6172,11 +6209,11 @@ class EventsLog {
   getUnorderedRecords() {
     return this.list.getRecordsToSend().concat(this.list.getNewRecords());
   }
-  getUndoRecord(userId) {
-    return getUndoRecordFromList(userId, this.list);
+  getUndoRecord(sessionIds) {
+    return getUndoRecordFromList(sessionIds, this.list);
   }
-  getRedoRecord(userId) {
-    return getRedoRecordFromList(userId, this.list);
+  getRedoRecord(sessionIds) {
+    return getRedoRecordFromList(sessionIds, this.list);
   }
   getRecordById(id) {
     return getRecordByIdFromList(id, this.list);
@@ -14190,10 +14227,13 @@ class Events {
       console.error("[DEBUG] transformMany emitted from Events.emit!", JSON.stringify(operation));
       console.trace("[DEBUG] transformMany stack trace");
     }
-    const userId = this.getUserId();
+    const sessionId = this.getSessionId();
+    const authorUserId = this.getAuthorUserId();
     const body = {
       eventId: this.getNextEventId(),
-      userId,
+      userId: sessionId,
+      authorUserId,
+      sessionId,
       boardId: this.board.getBoardId(),
       operation
     };
@@ -14203,7 +14243,7 @@ class Events {
       command: command || Events.createCommand(this.board, operation)
     };
     this.log.insertNewLocalEventRecordAfterEmit(record);
-    this.setLatestUserEvent(operation, userId);
+    this.setLatestUserEvent(operation, sessionId);
     this.subject.publish(event);
     if (this.board.getBoardId().includes("local")) {
       if (this.log.saveFileTimeout) {
@@ -14224,13 +14264,13 @@ class Events {
     this.emit(operation, cmd);
   }
   undo() {
-    const currentUserId = this.getUserId();
-    const record = this.log.getUndoRecord(currentUserId);
+    const currentSessionIds = this.getSessionIds();
+    const record = this.log.getUndoRecord(currentSessionIds);
     if (!record) {
       return;
     }
-    const { operation, userId, eventId } = record.event.body;
-    const canUndo = this.canUndoEvent(operation, userId);
+    const { operation, eventId } = record.event.body;
+    const canUndo = this.canUndoEvent(operation, getBoardEventSessionId(record.event.body));
     if (!canUndo) {
       return;
     }
@@ -14241,8 +14281,8 @@ class Events {
     });
   }
   redo() {
-    const userId = this.getUserId();
-    const record = this.log.getRedoRecord(userId);
+    const sessionIds = this.getSessionIds();
+    const record = this.log.getRedoRecord(sessionIds);
     if (!record) {
       return;
     }
@@ -14253,22 +14293,22 @@ class Events {
     });
   }
   canUndo() {
-    const userId = this.getUserId();
-    const record = this.log.getUndoRecord(userId);
+    const sessionIds = this.getSessionIds();
+    const record = this.log.getUndoRecord(sessionIds);
     if (!record) {
       return false;
     }
-    return this.canUndoEvent(record.event.body.operation, record.event.body.userId);
+    return this.canUndoEvent(record.event.body.operation, getBoardEventSessionId(record.event.body));
   }
   canRedo() {
-    const userId = this.getUserId();
-    const record = this.log.getRedoRecord(userId);
+    const sessionIds = this.getSessionIds();
+    const record = this.log.getRedoRecord(sessionIds);
     return record !== null;
   }
   sendPresenceEvent(event) {
     conf.connection.publishPresenceEvent(this.board.getBoardId(), event);
   }
-  canUndoEvent(op, byUserId) {
+  canUndoEvent(op, bySessionId) {
     if (op.method === "undo") {
       return false;
     }
@@ -14278,24 +14318,30 @@ class Events {
     }
     const key = this.getOpKey(op);
     const latest = this.latestEvent[key];
-    return byUserId === undefined || byUserId === latest;
+    return bySessionId === undefined || bySessionId === latest;
   }
-  setLatestUserEvent(op, userId) {
+  setLatestUserEvent(op, sessionId) {
     if (op.class !== "Events" && op.method !== "paste" && op.method !== "duplicate") {
       const key = this.getOpKey(op);
-      this.latestEvent[key] = userId;
+      this.latestEvent[key] = sessionId;
     }
   }
   getOpKey(op) {
     return op.method;
   }
-  getUserId() {
-    return this.connection?.connectionId || 0;
+  getSessionId() {
+    return getConnectionSessionId(this.connection);
+  }
+  getSessionIds() {
+    return getConnectionSessionIds(this.connection);
+  }
+  getAuthorUserId() {
+    return getConnectionAuthorUserId(this.connection);
   }
   getNextEventId() {
     const id = ++this.eventCounter;
-    const userId = this.getUserId();
-    return userId + ":" + id;
+    const sessionId = this.getSessionId();
+    return sessionId + ":" + id;
   }
 }
 function createEvents(board, connection, lastIndex) {
@@ -51309,6 +51355,9 @@ function validateItemsMap(parsedObject) {
   }
   return true;
 }
+function isColorValue(v) {
+  return typeof v === "string" || typeof v === "object" && v !== null;
+}
 function validateItemData(itemData) {
   if (typeof itemData !== "object" || itemData === null || !("itemType" in itemData) || typeof itemData.itemType !== "string") {
     return false;
@@ -51321,7 +51370,7 @@ function validateFrameData(data) {
     return false;
   }
   const frameData = data;
-  const isValid = frameData.hasOwnProperty("shapeType") && frameData.hasOwnProperty("backgroundColor") && frameData.hasOwnProperty("backgroundOpacity") && frameData.hasOwnProperty("borderColor") && frameData.hasOwnProperty("borderOpacity") && frameData.hasOwnProperty("borderStyle") && frameData.hasOwnProperty("borderWidth") && frameData.hasOwnProperty("transformation") && frameData.hasOwnProperty("text") && frameData.hasOwnProperty("children") && typeof frameData.shapeType === "string" && typeof frameData.backgroundColor === "string" && typeof frameData.backgroundOpacity === "number" && typeof frameData.borderColor === "string" && typeof frameData.borderOpacity === "number" && typeof frameData.borderStyle === "string" && typeof frameData.borderWidth === "number" && Array.isArray(frameData.children) && validateTransformationData(frameData.transformation) && validateRichTextData(frameData.text);
+  const isValid = frameData.hasOwnProperty("shapeType") && frameData.hasOwnProperty("backgroundColor") && frameData.hasOwnProperty("backgroundOpacity") && frameData.hasOwnProperty("borderColor") && frameData.hasOwnProperty("borderOpacity") && frameData.hasOwnProperty("borderStyle") && frameData.hasOwnProperty("borderWidth") && frameData.hasOwnProperty("transformation") && frameData.hasOwnProperty("text") && frameData.hasOwnProperty("children") && typeof frameData.shapeType === "string" && isColorValue(frameData.backgroundColor) && typeof frameData.backgroundOpacity === "number" && isColorValue(frameData.borderColor) && typeof frameData.borderOpacity === "number" && typeof frameData.borderStyle === "string" && typeof frameData.borderWidth === "number" && Array.isArray(frameData.children) && validateTransformationData(frameData.transformation) && validateRichTextData(frameData.text);
   return isValid;
 }
 function validateShapeData(shapeData) {
@@ -51329,7 +51378,7 @@ function validateShapeData(shapeData) {
     return false;
   }
   const data = shapeData;
-  const isValid = data.hasOwnProperty("shapeType") && data.hasOwnProperty("backgroundColor") && data.hasOwnProperty("backgroundOpacity") && data.hasOwnProperty("borderColor") && data.hasOwnProperty("borderOpacity") && data.hasOwnProperty("borderStyle") && data.hasOwnProperty("borderWidth") && data.hasOwnProperty("transformation") && data.hasOwnProperty("text") && typeof data.shapeType === "string" && typeof data.backgroundColor === "string" && typeof data.backgroundOpacity === "number" && typeof data.borderColor === "string" && typeof data.borderOpacity === "number" && typeof data.borderStyle === "string" && typeof data.borderWidth === "number" && validateTransformationData(data.transformation) && validateRichTextData(data.text);
+  const isValid = data.hasOwnProperty("shapeType") && data.hasOwnProperty("backgroundColor") && data.hasOwnProperty("backgroundOpacity") && data.hasOwnProperty("borderColor") && data.hasOwnProperty("borderOpacity") && data.hasOwnProperty("borderStyle") && data.hasOwnProperty("borderWidth") && data.hasOwnProperty("transformation") && data.hasOwnProperty("text") && typeof data.shapeType === "string" && isColorValue(data.backgroundColor) && typeof data.backgroundOpacity === "number" && isColorValue(data.borderColor) && typeof data.borderOpacity === "number" && typeof data.borderStyle === "string" && typeof data.borderWidth === "number" && validateTransformationData(data.transformation) && validateRichTextData(data.text);
   return isValid;
 }
 function validateStickerData(shapeData) {
@@ -51337,7 +51386,7 @@ function validateStickerData(shapeData) {
     return false;
   }
   const data = shapeData;
-  const isValid = data.hasOwnProperty("itemType") && data.hasOwnProperty("backgroundColor") && data.hasOwnProperty("transformation") && data.hasOwnProperty("text") && typeof data.backgroundColor === "string" && validateTransformationData(data.transformation) && validateRichTextData(data.text);
+  const isValid = data.hasOwnProperty("itemType") && data.hasOwnProperty("backgroundColor") && data.hasOwnProperty("transformation") && data.hasOwnProperty("text") && isColorValue(data.backgroundColor) && validateTransformationData(data.transformation) && validateRichTextData(data.text);
   return isValid;
 }
 function validateTransformationData(transformationData) {
@@ -51361,7 +51410,7 @@ function validateConnectorData(connectorData) {
     return false;
   }
   const data = connectorData;
-  const isValid = data.hasOwnProperty("startPoint") && data.hasOwnProperty("endPoint") && data.hasOwnProperty("startPointerStyle") && data.hasOwnProperty("endPointerStyle") && data.hasOwnProperty("lineStyle") && data.hasOwnProperty("lineColor") && data.hasOwnProperty("lineWidth") && data.hasOwnProperty("transformation") && typeof data.startPoint === "object" && typeof data.endPoint === "object" && typeof data.startPointerStyle === "string" && typeof data.endPointerStyle === "string" && typeof data.lineStyle === "string" && typeof data.lineColor === "string" && typeof data.lineWidth === "number" && validateTransformationData(data.transformation);
+  const isValid = data.hasOwnProperty("startPoint") && data.hasOwnProperty("endPoint") && data.hasOwnProperty("startPointerStyle") && data.hasOwnProperty("endPointerStyle") && data.hasOwnProperty("lineStyle") && data.hasOwnProperty("lineColor") && data.hasOwnProperty("lineWidth") && data.hasOwnProperty("transformation") && typeof data.startPoint === "object" && typeof data.endPoint === "object" && typeof data.startPointerStyle === "string" && typeof data.endPointerStyle === "string" && typeof data.lineStyle === "string" && isColorValue(data.lineColor) && typeof data.lineWidth === "number" && validateTransformationData(data.transformation);
   return isValid;
 }
 function validateChildren(children) {
@@ -55528,9 +55577,9 @@ function handleBoardEventMessage(message, board) {
   if (event.order <= log.getLastIndex()) {
     return;
   }
-  const eventConnectionId = Number(event.body.eventId.split(":")[0]);
-  const currentConnectionId = board.events.connection?.connectionId;
-  const isEventFromCurrentUser = currentConnectionId !== undefined && eventConnectionId === currentConnectionId;
+  const eventSessionId = getBoardEventSessionId(event.body);
+  const currentConnectionId = getConnectionSessionId(board.events.connection);
+  const isEventFromCurrentUser = eventSessionId !== undefined && eventSessionId === currentConnectionId;
   if (isEventFromCurrentUser) {
     return;
   }
@@ -55544,6 +55593,7 @@ function handleBoardEventMessage(message, board) {
     board.events.subject.publish(last);
   }
 }
+var init_handleBoardEventMessage = () => {};
 
 // src/Events/MessageRouter/handleBoardSubscriptionCompletedMsg.ts
 function handleBoardSubscriptionCompletedMsg(msg, board) {
@@ -55652,8 +55702,7 @@ function sendBoardEvent(board, batch, sequenceNumber) {
     type: "BoardEvent",
     boardId: board.getBoardId(),
     event: toSend,
-    sequenceNumber,
-    userId: conf.connection.getCurrentUser()
+    sequenceNumber
   });
   const date = Date.now();
   log.pendingEvent = {
@@ -55789,6 +55838,7 @@ function handleUserJoinMessage(message, board) {
 var messageRouter;
 var init_messageRouter = __esm(() => {
   init_handleAiChatMassage();
+  init_handleBoardEventMessage();
   init_handleBoardSubscriptionCompletedMsg();
   init_handleConfirmation();
   init_handleCreateSnapshotRequestMessage();
@@ -57063,6 +57113,15 @@ var PRESENCE_CLEANUP_USER_TIMER = 180000;
 var PRESENCE_CLEANUP_IDLE_TIMER = 60000;
 var CURSORS_IDLE_CLEANUP_DELAY = 1e4;
 var PING_CLEANUP = 15000;
+function getPresenceSessionId(message) {
+  if (message.sessionId) {
+    return message.sessionId;
+  }
+  if (message.userId === undefined || message.userId === null) {
+    return;
+  }
+  return String(message.userId);
+}
 var cleanupInterval = null;
 
 class Presence {
@@ -57072,7 +57131,6 @@ class Presence {
   trackedUser = null;
   cursorsEnabled = true;
   drawingContext = null;
-  currentUserId = null;
   users = new Map;
   followers = [];
   svgImageCache = {};
@@ -57098,7 +57156,7 @@ class Presence {
       throttleSelectionEvent(this.board.selection);
     });
     if (typeof window !== "undefined") {
-      window.addEventListener("storage", this.updateCurrentUser.bind(this));
+      window.addEventListener("storage", this.onStorageChange);
     }
   }
   clear() {
@@ -57137,19 +57195,30 @@ class Presence {
     }
     return !this.board.camera.matrix.compare(new Matrix(trackedUser.camera.translateX, trackedUser.camera.translateY, trackedUser.camera.scaleX, trackedUser.camera.scaleY, trackedUser.camera.shearX, trackedUser.camera.shearY));
   }
-  setCurrentUser(userId) {
-    this.currentUserId = userId;
+  onStorageChange = (_event) => {};
+  getCurrentSessionId() {
+    return this.events?.connection?.getSessionId?.() || this.events?.connection?.sessionId || null;
   }
-  updateCurrentUser(event) {
-    if (event.key === "currentUser") {
-      if (event.newValue) {
-        this.setCurrentUser(event.newValue);
-      }
+  getLegacyCurrentUserId() {
+    if (typeof localStorage === "undefined") {
+      return null;
     }
+    return localStorage.getItem("currentUser");
+  }
+  isCurrentSessionTarget(value) {
+    if (value === undefined || value === null) {
+      return false;
+    }
+    const currentSessionId = this.getCurrentSessionId();
+    if (currentSessionId && String(value) === currentSessionId) {
+      return true;
+    }
+    const currentUser = this.getLegacyCurrentUserId();
+    return currentUser !== null && String(value) === currentUser;
   }
   cleanup() {
     if (typeof window !== "undefined") {
-      window.removeEventListener("storage", this.updateCurrentUser.bind(this));
+      window.removeEventListener("storage", this.onStorageChange);
     }
     this.drawingContext = null;
     this.clear();
@@ -57189,24 +57258,25 @@ class Presence {
   }
   join(msg) {
     Object.entries(msg.snapshots).map(([userId, snapshot]) => {
-      this.users.set(userId, snapshot);
+      const sessionId = snapshot.sessionId || userId;
+      this.users.set(sessionId, {
+        ...snapshot,
+        userId: snapshot.userId || sessionId,
+        sessionId,
+        authorUserId: snapshot.authorUserId || null
+      });
     });
     this.subject.publish(this);
   }
   getUsers(boardId, excludeSelf = false) {
     let filteredUsers = Array.from(this.users.values()).filter((user) => user.boardId === boardId && (user.lastPing > Date.now() - PING_CLEANUP || user.lastActivity > Date.now() - PING_CLEANUP));
     if (excludeSelf) {
-      const currentUser = localStorage.getItem("currentUser");
-      if (currentUser) {
-        filteredUsers = filteredUsers.filter((user) => user.userId !== currentUser);
+      const currentSessionId = this.getCurrentSessionId();
+      if (currentSessionId) {
+        filteredUsers = filteredUsers.filter((user) => user.sessionId !== currentSessionId);
       }
     }
-    const uniqueUsers = new Map;
-    filteredUsers.forEach((user) => {
-      const key = user.hardId === null ? Symbol() : user.hardId;
-      uniqueUsers.set(key, user);
-    });
-    return Array.from(uniqueUsers.values());
+    return filteredUsers;
   }
   getColors() {
     return Array.from(this.users.values()).map((user) => user.color);
@@ -57215,8 +57285,12 @@ class Presence {
     if (!this.drawingContext) {
       return;
     }
-    const { userId, event: eventData } = event;
-    let user = this.users.get(userId);
+    const sessionId = getPresenceSessionId(event);
+    if (!sessionId) {
+      return;
+    }
+    const { event: eventData } = event;
+    let user = this.users.get(sessionId);
     if (!user) {
       let color2 = null;
       const storageColor = localStorage.getItem(`userColor`);
@@ -57227,8 +57301,10 @@ class Presence {
       } else {
         color2 = this.generateUserColor();
       }
-      this.users.set(userId.toString(), {
-        userId: userId.toString(),
+      this.users.set(sessionId, {
+        userId: sessionId,
+        sessionId,
+        authorUserId: event.authorUserId || null,
         softId: event.softId,
         hardId: event.hardId,
         color: color2,
@@ -57243,7 +57319,7 @@ class Presence {
         boardId: this.board.getBoardId(),
         lastPointerActivity: eventData.timestamp
       });
-      user = this.users.get(userId.toString());
+      user = this.users.get(sessionId);
     }
     switch (eventData.method) {
       case "PointerMove":
@@ -57286,6 +57362,9 @@ class Presence {
     if (msg.color) {
       userCopy.color = msg.color;
     }
+    if (msg.authorUserId) {
+      userCopy.authorUserId = msg.authorUserId;
+    }
     userCopy.nickname = msg.nickname;
     userCopy.boardId = msg.boardId;
     if (shouldUpdateActivity) {
@@ -57293,107 +57372,113 @@ class Presence {
     }
   }
   processFollowEvent(msg) {
-    const currentUser = localStorage.getItem(`currentUser`);
-    if (!currentUser) {
-      return;
-    }
-    if (msg.event.user === currentUser) {
-      this.followers.push(msg.userId.toString());
+    if (this.isCurrentSessionTarget(msg.event.user)) {
+      const sessionId = getPresenceSessionId(msg);
+      if (!sessionId) {
+        return;
+      }
+      this.followers.push(sessionId);
       this.followers = Array.from(new Set(this.followers));
     }
   }
   processBringToMe(msg) {
-    const currentUser = localStorage.getItem(`currentUser`);
-    if (!currentUser) {
-      return;
-    }
-    if (msg.event.users.includes(currentUser)) {
-      const bringerId = msg.userId.toString();
+    if (msg.event.users.some((user) => this.isCurrentSessionTarget(user))) {
+      const bringerId = getPresenceSessionId(msg);
+      if (!bringerId) {
+        return;
+      }
       const userToTrack = this.users.get(bringerId);
       if (userToTrack) {
         this.trackedUser = userToTrack;
-        this.enableTracking(userToTrack.userId);
+        this.enableTracking(userToTrack.sessionId || userToTrack.userId);
       }
     }
   }
   processStopFollowing(msg) {
-    const currentUser = localStorage.getItem(`currentUser`);
-    if (!currentUser) {
+    const sessionId = getPresenceSessionId(msg);
+    if (!sessionId) {
       return;
     }
-    if (msg.event.users.includes(currentUser)) {
-      this.followers = this.followers.filter((follower) => follower !== msg.userId.toString());
+    if (msg.event.users.some((user) => this.isCurrentSessionTarget(user))) {
+      this.followers = this.followers.filter((follower) => follower !== sessionId);
     }
     if (!this.trackedUser) {
       return;
     }
-    if (this.trackedUser.userId !== msg.userId) {
+    if (this.trackedUser.sessionId !== sessionId) {
       return;
     }
-    if (msg.event.users.includes(currentUser) && this.trackedUser.userId === msg.userId) {
+    if (msg.event.users.some((user) => this.isCurrentSessionTarget(user))) {
       this.disableTracking();
     }
   }
   processPing(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     user.lastPing = msg.event.timestamp;
     const userCopy = { ...user };
     this.updateUserMetaInfo(msg, userCopy, false);
-    this.users.set(msg.userId.toString(), userCopy);
+    this.users.set(sessionId, userCopy);
   }
   processCameraEvent(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     const eventData = msg.event;
     const userCopy = { ...user };
     userCopy.camera = eventData;
     this.updateUserMetaInfo(msg, userCopy);
-    this.users.set(msg.userId.toString(), userCopy);
-    if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
+    this.users.set(sessionId, userCopy);
+    if (this.trackedUser && this.trackedUser.sessionId === sessionId) {
       this.trackedUser.camera = eventData;
       this.board.camera.animateToMatrix(new Matrix(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
     }
   }
   processDrawSelect(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     const eventData = msg.event;
     const userCopy = { ...user };
     this.updateUserMetaInfo(msg, userCopy);
     userCopy.select = eventData.size;
-    this.users.set(msg.userId.toString(), userCopy);
+    this.users.set(sessionId, userCopy);
   }
   processCancelDrawSelect(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     const userCopy = { ...user };
     this.updateUserMetaInfo(msg, userCopy);
     userCopy.select = undefined;
-    this.users.set(msg.userId.toString(), userCopy);
+    this.users.set(sessionId, userCopy);
   }
   processPointerMove(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     const eventData = msg.event;
     const userCopy = { ...user };
     this.updateUserMetaInfo(msg, userCopy);
     userCopy.lastPointerActivity = Date.now();
     userCopy.pointer = { x: eventData.position.x, y: eventData.position.y };
-    this.users.set(msg.userId.toString(), userCopy);
+    this.users.set(sessionId, userCopy);
   }
   processSelection(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     const eventData = msg.event;
     const userCopy = { ...user };
     this.updateUserMetaInfo(msg, userCopy);
     userCopy.selection = eventData.selectedItems;
-    this.users.set(msg.userId.toString(), userCopy);
+    this.users.set(sessionId, userCopy);
   }
   processSetColor(msg) {
-    const user = this.users.get(msg.userId.toString());
+    const sessionId = getPresenceSessionId(msg);
+    const user = this.users.get(sessionId);
     const userCopy = { ...user };
     userCopy.colorChangeable = false;
     this.updateUserMetaInfo(msg, userCopy);
-    this.users.set(msg.userId.toString(), userCopy);
+    this.users.set(sessionId, userCopy);
   }
-  enableTracking(userId) {
-    const user = this.users.get(userId);
+  enableTracking(sessionId) {
+    const user = this.users.get(sessionId);
     if (!user) {
       this.trackedUser = null;
     } else {
@@ -57403,7 +57488,7 @@ class Presence {
       }
       this.emit({
         method: "Follow",
-        user: userId,
+        user: sessionId,
         timestamp: Date.now()
       });
     }
@@ -57416,7 +57501,7 @@ class Presence {
     this.emit({
       method: "StopFollowing",
       timestamp: Date.now(),
-      users: [this.trackedUser?.userId]
+      users: [this.trackedUser.sessionId || this.trackedUser.userId]
     });
     this.trackedUser = null;
   }
@@ -57435,18 +57520,12 @@ class Presence {
     return this.cursorsEnabled;
   }
   getSelects() {
-    const uniqueUsers = new Map;
+    const selects = [];
+    const currentSessionId = this.getCurrentSessionId();
     this.users.forEach((user) => {
-      if (user.userId !== this.currentUserId) {
-        const key = user.hardId !== null ? `hardId:${user.hardId}` : `softId:${user.userId}`;
-        const existingUser = uniqueUsers.get(key);
-        if (!existingUser || user.lastActivity > existingUser.lastActivity) {
-          uniqueUsers.set(key, user);
-        }
+      if (currentSessionId && user.sessionId === currentSessionId) {
+        return;
       }
-    });
-    const selects = [];
-    uniqueUsers.forEach((user) => {
       if (user.select && Date.now() - user.lastActivity <= CURSORS_IDLE_CLEANUP_DELAY) {
         selects.push({
           ...user.select,
@@ -57460,42 +57539,29 @@ class Presence {
   getCursors() {
     const currentBoardId = this.board.getBoardId();
     const now = Date.now();
-    const uniqueUsers = new Map;
+    const cursors = [];
+    const currentSessionId = this.getCurrentSessionId();
     this.users.forEach((user) => {
-      if (user.userId !== this.currentUserId && user.boardId === currentBoardId && now - user.lastPointerActivity <= CURSORS_IDLE_CLEANUP_DELAY) {
-        const key = user.hardId !== null ? `hardId:${user.hardId}` : `softId:${user.userId}`;
-        const existingUser = uniqueUsers.get(key);
-        if (!existingUser || user.lastActivity > existingUser.lastActivity) {
-          uniqueUsers.set(key, user);
-        }
+      if (currentSessionId !== user.sessionId && user.boardId === currentBoardId && now - user.lastPointerActivity <= CURSORS_IDLE_CLEANUP_DELAY) {
+        cursors.push({
+          ...user.pointer,
+          userId: user.sessionId || user.userId,
+          color: user.color,
+          nickname: user.nickname
+        });
       }
     });
-    const cursors = [];
-    uniqueUsers.forEach((user) => {
-      cursors.push({
-        ...user.pointer,
-        userId: user.userId,
-        color: user.color,
-        nickname: user.nickname
-      });
-    });
     return cursors;
   }
   getSelections() {
     const currentBoardId = this.board.getBoardId();
     const now = Date.now();
-    const uniqueUsers = new Map;
+    const selections = [];
+    const currentSessionId = this.getCurrentSessionId();
     this.users.forEach((user) => {
-      if (user.userId !== this.currentUserId && user.boardId === currentBoardId && now - user.lastPointerActivity <= CURSORS_IDLE_CLEANUP_DELAY) {
-        const key = user.hardId !== null ? `hardId:${user.hardId}` : `softId:${user.userId}`;
-        const existingUser = uniqueUsers.get(key);
-        if (!existingUser || user.lastActivity > existingUser.lastActivity) {
-          uniqueUsers.set(key, user);
-        }
+      if (currentSessionId === user.sessionId || user.boardId !== currentBoardId || now - user.lastPointerActivity > CURSORS_IDLE_CLEANUP_DELAY) {
+        return;
       }
-    });
-    const selections = [];
-    uniqueUsers.forEach((user) => {
       if (Date.now() - user.lastActivity >= CURSORS_IDLE_CLEANUP_DELAY) {
         return;
       }