canvu-react 0.4.79 → 0.4.81

package/dist/realtime.cjs

@@ -526,12 +526,16 @@ function parseDocumentSnapshot(value) {
   const updatedAt = getNumber(value.updatedAt);
   const items = parseItems(value.items);
   if (revision == null || updatedAt == null || items == null) return void 0;
+  const deletedItemIds = Array.isArray(value.deletedItemIds) ? value.deletedItemIds.filter(
+    (entry) => typeof entry === "string"
+  ) : void 0;
   return {
     revision,
     updatedAt,
     items,
     ...getString(value.updatedByClientId) ? { updatedByClientId: getString(value.updatedByClientId) } : {},
-    ...getNumber(value.persistedRevision) != null ? { persistedRevision: getNumber(value.persistedRevision) } : {}
+    ...getNumber(value.persistedRevision) != null ? { persistedRevision: getNumber(value.persistedRevision) } : {},
+    ...deletedItemIds ? { deletedItemIds } : {}
   };
 }
 function parseRealtimeSessionPeer(value) {
@@ -2029,6 +2033,16 @@ var CLIENT_ONLY_IMAGE_KEYS = /* @__PURE__ */ new Set([
   "imageThumbnailHref"
 ]);
 var SERVER_ADD_RACE_WINDOW_MS = 2e3;
+var LOCAL_DELETE_TOMBSTONE_TTL_MS = 1e4;
+function isLocalDeleteTombstoneActive(board, id, now) {
+  const deletedAt = board.locallyDeletedItemIds.get(id);
+  if (deletedAt == null) return false;
+  if (now - deletedAt >= LOCAL_DELETE_TOMBSTONE_TTL_MS) {
+    board.locallyDeletedItemIds.delete(id);
+    return false;
+  }
+  return true;
+}
 function createYjsBoardDoc() {
   const doc = new Y__namespace.Doc();
   const yItems = doc.getArray(ITEMS_KEY);
@@ -2037,9 +2051,22 @@ function createYjsBoardDoc() {
     yItems,
     lastServerConfirmedIds: /* @__PURE__ */ new Set(),
     lastServerConfirmedItemSerializations: /* @__PURE__ */ new Map(),
-    serverItemSeenAt: /* @__PURE__ */ new Map()
+    serverItemSeenAt: /* @__PURE__ */ new Map(),
+    serverDeletedItemIds: /* @__PURE__ */ new Set(),
+    locallyDeletedItemIds: /* @__PURE__ */ new Map(),
+    consumerSeenItemIds: /* @__PURE__ */ new Set()
   };
 }
+function getRealtimeDeletedItemIds(board) {
+  const now = Date.now();
+  const result = new Set(board.serverDeletedItemIds);
+  for (const id of Array.from(board.locallyDeletedItemIds.keys())) {
+    if (isLocalDeleteTombstoneActive(board, id, now)) {
+      result.add(id);
+    }
+  }
+  return result;
+}
 function getItemId(item) {
   if (item instanceof Y__namespace.Map) {
     const id2 = item.get("id");
@@ -2120,6 +2147,38 @@ function normalizeRealtimeItem(item) {
   normalized.childrenSvg = "";
   return normalized;
 }
+function reorderYItemsToMatchLocalItems(yItems, items) {
+  const currentItems = readVectorItems(yItems);
+  const currentItemsById = /* @__PURE__ */ new Map();
+  for (const currentItem of currentItems) {
+    const id = getItemId(currentItem);
+    if (id) currentItemsById.set(id, currentItem);
+  }
+  const orderedItems = [];
+  const orderedIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const id = getItemId(item);
+    if (!id) continue;
+    const currentItem = currentItemsById.get(id);
+    if (!currentItem) continue;
+    orderedItems.push(currentItem);
+    orderedIds.add(id);
+  }
+  for (const currentItem of currentItems) {
+    const id = getItemId(currentItem);
+    if (!id || !orderedIds.has(id)) orderedItems.push(currentItem);
+  }
+  const alreadyOrdered = currentItems.length === orderedItems.length && currentItems.every((currentItem, index) => {
+    const nextItem = orderedItems[index];
+    return nextItem ? getItemId(currentItem) === getItemId(nextItem) : false;
+  });
+  if (alreadyOrdered) return;
+  if (yItems.length > 0) yItems.delete(0, yItems.length);
+  yItems.insert(
+    0,
+    orderedItems.map((item) => vectorItemToYMap(item))
+  );
+}
 function applyLocalItemsToYDoc(board, options) {
   const { items, origin } = options;
   const addedIds = [];
@@ -2136,9 +2195,11 @@ function applyLocalItemsToYDoc(board, options) {
     const toDelete = [];
     for (const [id, entry] of currentIndex) {
       if (nextIds.has(id)) continue;
-      const serverSeenAt = board.serverItemSeenAt.get(id);
-      if (serverSeenAt != null && now - serverSeenAt < SERVER_ADD_RACE_WINDOW_MS) {
-        continue;
+      if (!board.consumerSeenItemIds.has(id)) {
+        const serverSeenAt = board.serverItemSeenAt.get(id);
+        if (serverSeenAt != null && now - serverSeenAt < SERVER_ADD_RACE_WINDOW_MS) {
+          continue;
+        }
       }
       toDelete.push({ id, index: entry.index });
     }
@@ -2146,6 +2207,7 @@ function applyLocalItemsToYDoc(board, options) {
     for (const { id, index } of toDelete) {
       board.yItems.delete(index, 1);
       board.serverItemSeenAt.delete(id);
+      board.locallyDeletedItemIds.set(id, now);
       removedIds.push(id);
     }
     const refreshedIndex = indexYItemsById(board.yItems);
@@ -2154,6 +2216,9 @@ function applyLocalItemsToYDoc(board, options) {
       if (!item) continue;
       const id = getItemId(item);
       if (!id) continue;
+      board.consumerSeenItemIds.add(id);
+      if (board.serverDeletedItemIds.has(id)) continue;
+      board.locallyDeletedItemIds.delete(id);
       const existing = refreshedIndex.get(id);
       if (existing) {
         updateYMapInPlace(existing.yMap, item);
@@ -2163,16 +2228,38 @@ function applyLocalItemsToYDoc(board, options) {
       board.yItems.push([yMap]);
       addedIds.push(id);
     }
+    reorderYItemsToMatchLocalItems(board.yItems, items);
   }, origin);
   return { addedIds, removedIds };
 }
 function applyServerSnapshotToYDoc(board, options) {
-  const { items: snapshotItems, origin } = options;
+  const { items: snapshotItems, deletedItemIds, origin } = options;
   const now = Date.now();
+  const snapshotItemIds = /* @__PURE__ */ new Set();
+  for (const item of snapshotItems) {
+    const id = getItemId(item);
+    if (id) snapshotItemIds.add(id);
+  }
   board.doc.transact(() => {
+    if (deletedItemIds) {
+      for (const id of deletedItemIds) {
+        if (snapshotItemIds.has(id)) continue;
+        board.serverDeletedItemIds.add(id);
+        board.locallyDeletedItemIds.delete(id);
+        board.serverItemSeenAt.delete(id);
+        const existing = indexYItemsById(board.yItems).get(id);
+        if (existing) {
+          board.yItems.delete(existing.index, 1);
+        }
+      }
+    }
     for (const item of snapshotItems) {
       const id = getItemId(item);
       if (!id) continue;
+      if (board.serverDeletedItemIds.has(id)) continue;
+      if (isLocalDeleteTombstoneActive(board, id, now)) {
+        continue;
+      }
       const existing = indexYItemsById(board.yItems).get(id);
       if (existing) {
         const currentSerialized = serializeItem(existing.yMap);
@@ -2203,7 +2290,7 @@ function applyServerSnapshotToYDoc(board, options) {
   }
 }
 function replaceYDocWithSnapshot(board, options) {
-  const { items: snapshotItems, origin } = options;
+  const { items: snapshotItems, deletedItemIds, origin } = options;
   const now = Date.now();
   board.doc.transact(() => {
     if (board.yItems.length > 0) {
@@ -2216,6 +2303,12 @@ function replaceYDocWithSnapshot(board, options) {
   board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
   board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
   board.serverItemSeenAt = /* @__PURE__ */ new Map();
+  board.locallyDeletedItemIds = /* @__PURE__ */ new Map();
+  if (deletedItemIds) {
+    for (const id of deletedItemIds) {
+      board.serverDeletedItemIds.add(id);
+    }
+  }
   for (const item of snapshotItems) {
     const id = getItemId(item);
     if (id) {
@@ -2578,7 +2671,7 @@ function useRealtimeSession(options) {
   const applyDocument = react.useCallback(
     (snapshot, options2) => {
       const currentSnapshot = latestDocumentRef.current;
-      if (currentSnapshot && currentSnapshot.revision === snapshot.revision && currentSnapshot.updatedByClientId === snapshot.updatedByClientId && currentSnapshot.persistedRevision === snapshot.persistedRevision && sameSerializedItems(currentSnapshot.items, snapshot.items)) {
+      if (currentSnapshot && currentSnapshot.revision === snapshot.revision && currentSnapshot.updatedByClientId === snapshot.updatedByClientId && currentSnapshot.persistedRevision === snapshot.persistedRevision && (currentSnapshot.deletedItemIds?.length ?? 0) === (snapshot.deletedItemIds?.length ?? 0) && sameSerializedItems(currentSnapshot.items, snapshot.items)) {
         return;
       }
       const board = boardRef.current;
@@ -2597,11 +2690,13 @@ function useRealtimeSession(options) {
         if (options2?.replace) {
           replaceYDocWithSnapshot(board, {
             items: snapshot.items,
+            deletedItemIds: snapshot.deletedItemIds,
             origin: ORIGIN_REMOTE
           });
         } else {
           applyServerSnapshotToYDoc(board, {
             items: snapshot.items,
+            deletedItemIds: snapshot.deletedItemIds,
             origin: ORIGIN_REMOTE
           });
         }
@@ -2609,7 +2704,11 @@ function useRealtimeSession(options) {
       const mergedItems = board ? readVectorItems(board.yItems) : snapshot.items;
       const mergedSnapshot = {
         ...snapshot,
-        items: mergedItems
+        items: mergedItems,
+        // Expose the accumulated tombstones (server-confirmed + pending
+        // local deletes) so document consumers can prune stale local
+        // views instead of re-sending deleted items.
+        ...board ? { deletedItemIds: Array.from(getRealtimeDeletedItemIds(board)) } : {}
       };
       currentRevisionRef.current = snapshot.revision;
       latestDocumentRef.current = mergedSnapshot;
@@ -3734,6 +3833,7 @@ function useRealtimeCanvasDocument(options) {
   const realtimeEnabled = enabled && session != null;
   const documentRevision = session?.document?.revision ?? null;
   const documentItems = session?.document?.items;
+  const documentDeletedItemIds = session?.document?.deletedItemIds;
   const documentUpdatedByClientId = session?.document?.updatedByClientId ?? null;
   const connectionClientId = session?.connection.clientId ?? null;
   const hasLocalOfflineDraft = session?.hasLocalOfflineDraft ?? false;
@@ -3786,15 +3886,22 @@ function useRealtimeCanvasDocument(options) {
       if (cancelled) return;
       if (inFlightRevisionRef.current !== documentRevision) return;
       lastAppliedRevisionRef.current = documentRevision;
-      const localItems = latestItemsRef.current;
+      const rawLocalItems = latestItemsRef.current;
+      const deletedIds = new Set(documentDeletedItemIds ?? []);
+      const localItems = deletedIds.size > 0 ? rawLocalItems.filter((item) => {
+        const id = getSceneItemId(item);
+        return !id || !deletedIds.has(id);
+      }) : rawLocalItems;
       const hasLocalItems = localItems.length > 0;
       const hasPendingLocalChanges = hasLocalOfflineDraft || hasPendingDocumentSync || hasLocalChangeInFlightRef.current;
       if (resolvedItems.length === 0 && (hasEverPropagatedItemsRef.current || hasLocalItems || hasPendingLocalChanges)) {
         if (hasLocalItems) {
           const normalizedLocalItems = normalizeItems ? normalizeItems(localItems) : [...localItems];
           session.remoteAdapter.send?.(normalizedLocalItems);
+          return;
         }
-        return;
+        const emptinessExplainedByDeletes = rawLocalItems.length > 0 && localItems.length === 0;
+        if (!emptinessExplainedByDeletes) return;
       }
       if (shouldPreserveLocalRealtimeItems({
         localItems,
@@ -3822,6 +3929,7 @@ function useRealtimeCanvasDocument(options) {
   }, [
     applyIncomingItems,
     connectionClientId,
+    documentDeletedItemIds,
     documentItems,
     documentRevision,
     documentUpdatedByClientId,