canvu-react 0.3.39 → 0.4.0

package/dist/realtime.cjs

@@ -4,10 +4,30 @@ var lucideReact = require('lucide-react');
 var getStroke = require('perfect-freehand');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var Y = require('yjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var getStroke__default = /*#__PURE__*/_interopDefault(getStroke);
+var Y__namespace = /*#__PURE__*/_interopNamespace(Y);
 
 // src/react/presence/map-placement-preview.ts
 function remoteMarkupStrokeFromPlacementPreview(preview) {
@@ -155,6 +175,30 @@ function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware =
     simulatePressure: true
   };
 }
+function dashArrayForDrawStroke(strokeWidth) {
+  const dash = Math.max(strokeWidth * 1.8, 4);
+  const gap = Math.max(strokeWidth * 1.4, 3);
+  return `${dash} ${gap}`;
+}
+function buildSmoothedCenterlinePath(points) {
+  if (points.length < 2) return null;
+  const first = points[0];
+  if (!first) return null;
+  let d = `M ${first.x} ${first.y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    d += ` Q ${a.x} ${a.y} ${midX} ${midY}`;
+  }
+  const last = points[points.length - 1];
+  if (last) {
+    d += ` L ${last.x} ${last.y}`;
+  }
+  return d;
+}
 function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeComplete = true) {
   if (pathPointsLocal.length === 0) return null;
   if (pathPointsLocal.length === 1) {
@@ -169,6 +213,18 @@ function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeCompl
       fillOpacity: style.strokeOpacity
     };
   }
+  if (style.strokeDash === "dashed" && (toolKind === "draw" || toolKind === "pencil")) {
+    const d2 = buildSmoothedCenterlinePath(pathPointsLocal);
+    if (!d2) return null;
+    return {
+      kind: "strokePath",
+      d: d2,
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      strokeOpacity: style.strokeOpacity,
+      strokeDasharray: dashArrayForDrawStroke(style.strokeWidth)
+    };
+  }
   const hasPressure = pathPointsLocal.some(
     (p) => p.pressure != null && Number.isFinite(p.pressure)
   );
@@ -1956,8 +2012,241 @@ function useRealtimePeerFollow(options) {
     lastAppliedCameraKeyRef.current = nextCameraKey;
   }, [followedPeerId, onFollowEnd, sessionPeers, viewportRef]);
 }
+var ITEMS_KEY = "items";
+var SERVER_ADD_RACE_WINDOW_MS = 2e3;
+function createYjsBoardDoc() {
+  const doc = new Y__namespace.Doc();
+  const yItems = doc.getArray(ITEMS_KEY);
+  return {
+    doc,
+    yItems,
+    lastServerConfirmedIds: /* @__PURE__ */ new Set(),
+    serverItemSeenAt: /* @__PURE__ */ new Map()
+  };
+}
+function getItemId(item) {
+  if (item instanceof Y__namespace.Map) {
+    const id2 = item.get("id");
+    return typeof id2 === "string" ? id2 : null;
+  }
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function vectorItemToYMap(item) {
+  const yMap = new Y__namespace.Map();
+  for (const [key, value] of Object.entries(item)) {
+    if (value === void 0) continue;
+    yMap.set(key, value);
+  }
+  return yMap;
+}
+function yMapToVectorItem(yMap) {
+  const obj = {};
+  for (const [key, value] of yMap.entries()) {
+    obj[key] = value;
+  }
+  return obj;
+}
+function readVectorItems(yItems) {
+  const result = [];
+  for (let i = 0; i < yItems.length; i++) {
+    const yMap = yItems.get(i);
+    if (yMap) result.push(yMapToVectorItem(yMap));
+  }
+  return result;
+}
+function indexYItemsById(yItems) {
+  const result = /* @__PURE__ */ new Map();
+  for (let i = 0; i < yItems.length; i++) {
+    const yMap = yItems.get(i);
+    if (!yMap) continue;
+    const id = getItemId(yMap);
+    if (!id) continue;
+    result.set(id, { yMap, index: i });
+  }
+  return result;
+}
+function valuesEqual(left, right) {
+  if (left === right) return true;
+  if (typeof left !== typeof right) return false;
+  if (left === null || right === null) return false;
+  if (typeof left !== "object") return false;
+  try {
+    return JSON.stringify(left) === JSON.stringify(right);
+  } catch {
+    return false;
+  }
+}
+function updateYMapInPlace(yMap, next) {
+  const nextKeys = /* @__PURE__ */ new Set();
+  for (const [key, value] of Object.entries(next)) {
+    if (value === void 0) continue;
+    nextKeys.add(key);
+    const current = yMap.get(key);
+    if (!valuesEqual(current, value)) {
+      yMap.set(key, value);
+    }
+  }
+  for (const key of Array.from(yMap.keys())) {
+    if (!nextKeys.has(key)) yMap.delete(key);
+  }
+}
+function applyLocalItemsToYDoc(board, options) {
+  const { items, origin } = options;
+  const addedIds = [];
+  const removedIds = [];
+  const now = Date.now();
+  board.doc.transact(() => {
+    const currentIndex = indexYItemsById(board.yItems);
+    const nextIds = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      const id = getItemId(item);
+      if (!id) continue;
+      nextIds.add(id);
+    }
+    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;
+      }
+      toDelete.push({ id, index: entry.index });
+    }
+    toDelete.sort((a, b) => b.index - a.index);
+    for (const { id, index } of toDelete) {
+      board.yItems.delete(index, 1);
+      board.serverItemSeenAt.delete(id);
+      removedIds.push(id);
+    }
+    const refreshedIndex = indexYItemsById(board.yItems);
+    for (let nextOrder = 0; nextOrder < items.length; nextOrder++) {
+      const item = items[nextOrder];
+      if (!item) continue;
+      const id = getItemId(item);
+      if (!id) continue;
+      const existing = refreshedIndex.get(id);
+      if (existing) {
+        updateYMapInPlace(existing.yMap, item);
+        continue;
+      }
+      const yMap = vectorItemToYMap(item);
+      board.yItems.push([yMap]);
+      addedIds.push(id);
+    }
+  }, origin);
+  return { addedIds, removedIds };
+}
+function applyServerSnapshotToYDoc(board, options) {
+  const { items: snapshotItems, origin } = options;
+  const now = Date.now();
+  board.doc.transact(() => {
+    const snapshotIds = /* @__PURE__ */ new Set();
+    const snapshotById = /* @__PURE__ */ new Map();
+    for (const item of snapshotItems) {
+      const id = getItemId(item);
+      if (!id) continue;
+      snapshotIds.add(id);
+      snapshotById.set(id, item);
+    }
+    const currentIndex = indexYItemsById(board.yItems);
+    const toDeleteIds = [];
+    for (const [id] of currentIndex) {
+      if (snapshotIds.has(id)) continue;
+      if (board.lastServerConfirmedIds.has(id)) {
+        toDeleteIds.push(id);
+      }
+    }
+    if (toDeleteIds.length > 0) {
+      const refreshed = indexYItemsById(board.yItems);
+      const sortedIndices = toDeleteIds.map((id) => ({ id, index: refreshed.get(id)?.index })).filter(
+        (entry) => entry.index != null
+      ).sort((a, b) => b.index - a.index);
+      for (const { id, index } of sortedIndices) {
+        board.yItems.delete(index, 1);
+        board.serverItemSeenAt.delete(id);
+      }
+    }
+    for (const item of snapshotItems) {
+      const id = getItemId(item);
+      if (!id) continue;
+      const existing = indexYItemsById(board.yItems).get(id);
+      if (existing) {
+        updateYMapInPlace(existing.yMap, item);
+        board.serverItemSeenAt.set(id, now);
+        continue;
+      }
+      const yMap = vectorItemToYMap(item);
+      board.yItems.push([yMap]);
+      board.serverItemSeenAt.set(id, now);
+    }
+  }, origin);
+  board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+  for (const item of snapshotItems) {
+    const id = getItemId(item);
+    if (id) board.lastServerConfirmedIds.add(id);
+  }
+}
+function replaceYDocWithSnapshot(board, options) {
+  const { items: snapshotItems, origin } = options;
+  const now = Date.now();
+  board.doc.transact(() => {
+    if (board.yItems.length > 0) {
+      board.yItems.delete(0, board.yItems.length);
+    }
+    for (const item of snapshotItems) {
+      board.yItems.push([vectorItemToYMap(item)]);
+    }
+  }, origin);
+  board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+  board.serverItemSeenAt = /* @__PURE__ */ new Map();
+  for (const item of snapshotItems) {
+    const id = getItemId(item);
+    if (id) {
+      board.lastServerConfirmedIds.add(id);
+      board.serverItemSeenAt.set(id, now);
+    }
+  }
+}
+function getLocallyPendingItemIds(board) {
+  const pending = /* @__PURE__ */ new Set();
+  for (let i = 0; i < board.yItems.length; i++) {
+    const yMap = board.yItems.get(i);
+    if (!yMap) continue;
+    const id = getItemId(yMap);
+    if (!id) continue;
+    if (!board.lastServerConfirmedIds.has(id)) {
+      pending.add(id);
+    }
+  }
+  return pending;
+}
+function encodeYDocState(board) {
+  const update = Y__namespace.encodeStateAsUpdate(board.doc);
+  let binary = "";
+  for (let i = 0; i < update.length; i++) {
+    binary += String.fromCharCode(update[i]);
+  }
+  return btoa(binary);
+}
+function decodeYDocState(board, encoded) {
+  try {
+    const binary = atob(encoded);
+    const update = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      update[i] = binary.charCodeAt(i);
+    }
+    Y__namespace.applyUpdate(board.doc, update);
+    return true;
+  } catch {
+    return false;
+  }
+}
 
 // src/react/plugins/realtime/use-realtime-session.ts
+var ORIGIN_LOCAL = /* @__PURE__ */ Symbol("canvu/realtime/local");
+var ORIGIN_REMOTE = /* @__PURE__ */ Symbol("canvu/realtime/remote");
+var ORIGIN_BOOTSTRAP = /* @__PURE__ */ Symbol("canvu/realtime/bootstrap");
 var DRAFT_STORAGE_PREFIX = "canvu-realtime-draft:";
 var DOCUMENT_FLUSH_DEBOUNCE_MS = 120;
 var DRAFT_PERSIST_DEBOUNCE_MS = 420;
@@ -2044,7 +2333,16 @@ function draftStorageKey(roomId) {
 function isRealtimeOfflineDraft(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   const record = value;
-  return typeof record.roomId === "string" && typeof record.baseRevision === "number" && typeof record.updatedAt === "number" && Array.isArray(record.items);
+  if (typeof record.roomId !== "string" || typeof record.baseRevision !== "number" || typeof record.updatedAt !== "number" || !Array.isArray(record.items)) {
+    return false;
+  }
+  if (record.yDocState != null && typeof record.yDocState !== "string") {
+    return false;
+  }
+  if (record.pendingIds != null && !Array.isArray(record.pendingIds)) {
+    return false;
+  }
+  return true;
 }
 function readRealtimeOfflineDraft(roomId) {
   if (typeof window === "undefined" || !roomId) return null;
@@ -2082,14 +2380,6 @@ function removeRealtimeOfflineDraft(roomId) {
   } catch {
   }
 }
-function buildDraftSnapshot(draft, clientId) {
-  return {
-    revision: draft.baseRevision,
-    items: draft.items,
-    updatedAt: draft.updatedAt,
-    updatedByClientId: clientId
-  };
-}
 function getViewportCameraSnapshot(viewport) {
   if (!viewport) return null;
   const camera = viewport.getCamera();
@@ -2140,8 +2430,13 @@ function useRealtimeSession(options) {
   const retryCountRef = react.useRef(0);
   const currentRevisionRef = react.useRef(0);
   const outboundInFlightRef = react.useRef(null);
-  const queuedItemsRef = react.useRef(null);
+  const queuedDirtyRef = react.useRef(false);
+  const pendingLocalItemsRef = react.useRef(null);
   const subscriberRefs = react.useRef(/* @__PURE__ */ new Set());
+  const boardRef = react.useRef(null);
+  if (boardRef.current == null) {
+    boardRef.current = createYjsBoardDoc();
+  }
   const lastCursorRef = react.useRef(null);
   const lastMarkupStrokeRef = react.useRef(null);
   const lastCameraRef = react.useRef(
@@ -2236,11 +2531,30 @@ function useRealtimeSession(options) {
       if (currentSnapshot && currentSnapshot.revision === snapshot.revision && currentSnapshot.updatedByClientId === snapshot.updatedByClientId && sameSerializedItems(currentSnapshot.items, snapshot.items)) {
         return;
       }
+      const board = boardRef.current;
+      if (board) {
+        if (options2?.replace) {
+          replaceYDocWithSnapshot(board, {
+            items: snapshot.items,
+            origin: ORIGIN_REMOTE
+          });
+        } else {
+          applyServerSnapshotToYDoc(board, {
+            items: snapshot.items,
+            origin: ORIGIN_REMOTE
+          });
+        }
+      }
+      const mergedItems = board ? readVectorItems(board.yItems) : snapshot.items;
+      const mergedSnapshot = {
+        ...snapshot,
+        items: mergedItems
+      };
       currentRevisionRef.current = snapshot.revision;
-      latestDocumentRef.current = snapshot;
-      setDocument(snapshot);
+      latestDocumentRef.current = mergedSnapshot;
+      setDocument(mergedSnapshot);
       if (!options2?.suppressSubscriberNotify) {
-        notifySubscribers(snapshot.items);
+        notifySubscribers(mergedItems);
       }
     },
     [notifySubscribers]
@@ -2350,13 +2664,23 @@ function useRealtimeSession(options) {
   );
   const flushQueuedDocument = react.useCallback(() => {
     clearDocumentFlushSchedule();
-    if (conflictRef.current) return;
-    const next = queuedItemsRef.current;
-    if (!next || outboundInFlightRef.current) return;
+    const board = boardRef.current;
+    if (!board) return;
+    if (!queuedDirtyRef.current && pendingLocalItemsRef.current == null) return;
+    if (outboundInFlightRef.current) return;
+    const pendingLocal = pendingLocalItemsRef.current;
+    if (pendingLocal) {
+      pendingLocalItemsRef.current = null;
+      applyLocalItemsToYDoc(board, {
+        items: pendingLocal,
+        origin: ORIGIN_LOCAL
+      });
+    }
     const baseRevision = currentRevisionRef.current;
-    const preparedItems = prepareRealtimeItems(next);
+    const mergedItems = readVectorItems(board.yItems);
+    const preparedItems = prepareRealtimeItems(mergedItems);
     if (!preparedItems) return;
-    queuedItemsRef.current = null;
+    queuedDirtyRef.current = false;
     outboundInFlightRef.current = {
       baseRevision,
       items: preparedItems.items,
@@ -2369,8 +2693,20 @@ function useRealtimeSession(options) {
       baseRevision,
       items: preparedItems.items
     });
+    const pendingIds = getLocallyPendingItemIds(board);
+    if (pendingIds.size > 0) {
+      setLocalDraftRef.current({
+        roomId,
+        baseRevision,
+        items: mergedItems,
+        updatedAt: nowMs(),
+        yDocState: encodeYDocState(board),
+        pendingIds: Array.from(pendingIds)
+      });
+      scheduleDraftPersistenceRef.current?.();
+    }
     if (!didSend) {
-      queuedItemsRef.current = next;
+      queuedDirtyRef.current = true;
       outboundInFlightRef.current = null;
       setHasPendingDocumentSync(true);
     }
@@ -2385,66 +2721,103 @@ function useRealtimeSession(options) {
       }, DOCUMENT_FLUSH_DEBOUNCE_MS);
     }, DOCUMENT_FLUSH_DEBOUNCE_MS);
   }, [clearDocumentFlushSchedule, flushQueuedDocument]);
-  const queueDocumentSend = react.useCallback(
-    (items) => {
-      setLocalDraft({
-        roomId,
-        baseRevision: currentRevisionRef.current,
-        items,
-        updatedAt: nowMs()
-      });
-      scheduleDraftPersistence();
-      queuedItemsRef.current = items;
-      setHasPendingDocumentSync(true);
-      if (conflictRef.current) return;
-      scheduleDocumentFlushRef.current();
-    },
-    [roomId, scheduleDraftPersistence, setLocalDraft]
-  );
+  const queueDocumentSend = react.useCallback((items) => {
+    pendingLocalItemsRef.current = items;
+    queuedDirtyRef.current = true;
+    setHasPendingDocumentSync(true);
+    setHasLocalOfflineDraft(true);
+    scheduleDocumentFlushRef.current();
+  }, []);
   const applyDraftSnapshot = react.useCallback(
     (draft, options2) => {
-      applyDocument(buildDraftSnapshot(draft, clientIdRef.current), options2);
+      const board = boardRef.current;
+      if (board) {
+        let restoredFromBinary = false;
+        if (draft.yDocState) {
+          if (board.yItems.length > 0) {
+            board.doc.transact(() => {
+              board.yItems.delete(0, board.yItems.length);
+            }, ORIGIN_BOOTSTRAP);
+          }
+          restoredFromBinary = decodeYDocState(board, draft.yDocState);
+          if (restoredFromBinary) {
+            const allIds = /* @__PURE__ */ new Set();
+            for (let i = 0; i < board.yItems.length; i++) {
+              const yMap = board.yItems.get(i);
+              if (!yMap) continue;
+              const id = yMap.get("id");
+              if (typeof id === "string") allIds.add(id);
+            }
+            const pendingIds = new Set(draft.pendingIds ?? []);
+            board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+            for (const id of allIds) {
+              if (!pendingIds.has(id)) {
+                board.lastServerConfirmedIds.add(id);
+              }
+            }
+          }
+        }
+        if (!restoredFromBinary) {
+          replaceYDocWithSnapshot(board, {
+            items: draft.items,
+            origin: ORIGIN_BOOTSTRAP
+          });
+          board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+        }
+      }
+      const items = board ? readVectorItems(board.yItems) : draft.items;
+      const snapshot = {
+        revision: draft.baseRevision,
+        items,
+        updatedAt: draft.updatedAt,
+        updatedByClientId: clientIdRef.current
+      };
+      currentRevisionRef.current = snapshot.revision;
+      latestDocumentRef.current = snapshot;
+      setDocument(snapshot);
+      if (!options2?.suppressSubscriberNotify) {
+        notifySubscribers(items);
+      }
     },
-    [applyDocument]
+    [notifySubscribers]
   );
   const resolveAuthoritativeDocument = react.useCallback(
     (serverDocument, options2) => {
-      const localDraft = localDraftRef.current;
-      if (!localDraft) {
-        setConflictState(null);
+      const board = boardRef.current;
+      const hadLocalContent = localDraftRef.current != null || board != null && board.yItems.length > 0;
+      applyDocument(serverDocument, {
+        ...options2,
+        replace: !hadLocalContent
+      });
+      if (!board) {
         setHasPendingDocumentSync(false);
-        applyDocument(serverDocument, options2);
+        clearLocalDraftRef.current();
         return false;
       }
-      if (sameSerializedItems(localDraft.items, serverDocument.items)) {
+      const pendingIds = getLocallyPendingItemIds(board);
+      if (pendingIds.size === 0) {
         clearLocalDraftRef.current();
         setHasPendingDocumentSync(false);
-        setConflictState(null);
-        applyDocument(serverDocument, options2);
-        return true;
-      }
-      if (serverDocument.revision === localDraft.baseRevision) {
-        setConflictState(null);
-        applyDraftSnapshot(localDraft, {
-          suppressSubscriberNotify: options2?.suppressSubscriberNotify ?? sameSerializedItems(latestDocumentRef.current?.items, localDraft.items)
-        });
         outboundInFlightRef.current = null;
-        queuedItemsRef.current = localDraft.items;
-        setHasPendingDocumentSync(true);
-        scheduleDocumentFlush();
-        return true;
+        queuedDirtyRef.current = false;
+        return false;
       }
-      setConflictState({
-        serverRevision: serverDocument.revision,
-        serverItems: serverDocument.items,
-        localItems: localDraft.items
-      });
-      applyDraftSnapshot(localDraft, {
-        suppressSubscriberNotify: options2?.suppressSubscriberNotify ?? sameSerializedItems(latestDocumentRef.current?.items, localDraft.items)
+      const mergedItems = readVectorItems(board.yItems);
+      setLocalDraft({
+        roomId,
+        baseRevision: serverDocument.revision,
+        items: mergedItems,
+        updatedAt: nowMs(),
+        yDocState: encodeYDocState(board),
+        pendingIds: Array.from(pendingIds)
       });
+      outboundInFlightRef.current = null;
+      queuedDirtyRef.current = true;
+      setHasPendingDocumentSync(true);
+      scheduleDocumentFlush();
       return true;
     },
-    [applyDocument, applyDraftSnapshot, scheduleDocumentFlush, setConflictState]
+    [applyDocument, roomId, scheduleDocumentFlush, setLocalDraft]
   );
   const sendPresenceUpdate = react.useCallback(() => {
     sendRaw({
@@ -2483,54 +2856,8 @@ function useRealtimeSession(options) {
     reconnect,
     updateConnection
   ]);
-  const resolveConflict = react.useCallback(
-    (action) => {
-      const activeConflict = conflictRef.current;
-      if (!activeConflict) return;
-      if (action === "use-server") {
-        clearLocalDraft();
-        queuedItemsRef.current = null;
-        outboundInFlightRef.current = null;
-        setConflictState(null);
-        applyDocument({
-          revision: activeConflict.serverRevision,
-          items: activeConflict.serverItems,
-          updatedAt: nowMs()
-        });
-        return;
-      }
-      const nextDraft = {
-        roomId,
-        baseRevision: activeConflict.serverRevision,
-        items: activeConflict.localItems,
-        updatedAt: nowMs()
-      };
-      setLocalDraft(nextDraft);
-      scheduleDraftPersistence();
-      setConflictState(null);
-      applyDraftSnapshot(nextDraft, {
-        suppressSubscriberNotify: sameSerializedItems(
-          latestDocumentRef.current?.items,
-          nextDraft.items
-        )
-      });
-      currentRevisionRef.current = activeConflict.serverRevision;
-      queuedItemsRef.current = nextDraft.items;
-      outboundInFlightRef.current = null;
-      setHasPendingDocumentSync(true);
-      scheduleDocumentFlush();
-    },
-    [
-      applyDocument,
-      applyDraftSnapshot,
-      clearLocalDraft,
-      roomId,
-      scheduleDocumentFlush,
-      scheduleDraftPersistence,
-      setConflictState,
-      setLocalDraft
-    ]
-  );
+  const resolveConflict = react.useCallback((_action) => {
+  }, []);
   const setConflictStateRef = react.useRef(setConflictState);
   setConflictStateRef.current = setConflictState;
   const updateConnectionRef = react.useRef(updateConnection);
@@ -2551,7 +2878,15 @@ function useRealtimeSession(options) {
   scheduleReconnectRef.current = scheduleReconnect;
   const sendRawRef = react.useRef(sendRaw);
   sendRawRef.current = sendRaw;
+  const setLocalDraftRef = react.useRef(setLocalDraft);
+  setLocalDraftRef.current = setLocalDraft;
+  const scheduleDraftPersistenceRef = react.useRef(scheduleDraftPersistence);
+  scheduleDraftPersistenceRef.current = scheduleDraftPersistence;
   react.useEffect(() => {
+    if (boardRef.current) {
+      boardRef.current.doc.destroy();
+    }
+    boardRef.current = createYjsBoardDoc();
     if (!roomId) {
       clearDocumentFlushSchedule();
       clearDraftPersistSchedule();
@@ -2559,7 +2894,8 @@ function useRealtimeSession(options) {
       setHasLocalOfflineDraft(false);
       setHasPendingDocumentSync(false);
       setConflictState(null);
-      queuedItemsRef.current = null;
+      queuedDirtyRef.current = false;
+      pendingLocalItemsRef.current = null;
       outboundInFlightRef.current = null;
       latestDocumentRef.current = null;
       setDocument(null);
@@ -2570,7 +2906,8 @@ function useRealtimeSession(options) {
     setLocalDraft(localDraft);
     setHasPendingDocumentSync(localDraft != null);
     setConflictState(null);
-    queuedItemsRef.current = localDraft?.items ?? null;
+    queuedDirtyRef.current = localDraft != null;
+    pendingLocalItemsRef.current = null;
     outboundInFlightRef.current = null;
     if (localDraft) {
       applyDraftSnapshot(localDraft, {
@@ -2601,7 +2938,7 @@ function useRealtimeSession(options) {
       clearDocumentFlushSchedule();
       wsRef.current?.close();
       wsRef.current = null;
-      queuedItemsRef.current = localDraftRef.current?.items ?? null;
+      queuedDirtyRef.current = localDraftRef.current != null;
       outboundInFlightRef.current = null;
       setHasPendingDocumentSync(localDraftRef.current != null);
       collapsePeersToSelfRef.current("offline");
@@ -2716,7 +3053,7 @@ function useRealtimeSession(options) {
           }
         );
         if (!handledByDraft) {
-          queuedItemsRef.current = null;
+          queuedDirtyRef.current = false;
           outboundInFlightRef.current = null;
           setHasPendingDocumentSync(false);
         }
@@ -2767,8 +3104,6 @@ function useRealtimeSession(options) {
         const isSelfAck = parsed.document.updatedByClientId === selfClientId;
         if (!isSelfAck) {
           outboundInFlightRef.current = null;
-          queuedItemsRef.current = localDraftRef.current?.items ?? null;
-          setHasPendingDocumentSync(queuedItemsRef.current != null);
           resolveAuthoritativeDocumentRef.current(
             sanitizeRealtimeSnapshot(parsed.document)
           );
@@ -2779,24 +3114,33 @@ function useRealtimeSession(options) {
         applyDocumentRef.current(sanitizeRealtimeSnapshot(parsed.document), {
           suppressSubscriberNotify: shouldSuppress
         });
-        if (queuedItemsRef.current) {
-          if (sameSerializedItems(queuedItemsRef.current, parsed.document.items)) {
-            queuedItemsRef.current = null;
-          } else {
-            scheduleDocumentFlushRef.current();
-          }
-        }
-        if (!queuedItemsRef.current) {
+        const board = boardRef.current;
+        const stillPending = board ? getLocallyPendingItemIds(board).size > 0 : false;
+        if (stillPending) {
+          const mergedItems = board ? readVectorItems(board.yItems) : [];
+          setLocalDraftRef.current({
+            roomId,
+            baseRevision: currentRevisionRef.current,
+            items: mergedItems,
+            updatedAt: nowMs(),
+            yDocState: board ? encodeYDocState(board) : void 0,
+            pendingIds: board ? Array.from(getLocallyPendingItemIds(board)) : void 0
+          });
+          queuedDirtyRef.current = true;
+          setHasPendingDocumentSync(true);
+          scheduleDocumentFlushRef.current();
+        } else {
+          queuedDirtyRef.current = false;
           clearLocalDraftRef.current();
+          setHasPendingDocumentSync(false);
         }
-        setHasPendingDocumentSync(queuedItemsRef.current != null);
         setConflictStateRef.current(null);
         return;
       }
       if (parsed.type === "document:resync-required") {
         outboundInFlightRef.current = null;
-        queuedItemsRef.current = localDraftRef.current?.items ?? null;
-        setHasPendingDocumentSync(queuedItemsRef.current != null);
+        queuedDirtyRef.current = localDraftRef.current != null;
+        setHasPendingDocumentSync(queuedDirtyRef.current);
         updateConnectionRef.current((prev) => ({
           ...prev,
           lastError: parsed.reason
@@ -2871,14 +3215,39 @@ function useRealtimeSession(options) {
     () => () => {
       clearDocumentFlushSchedule();
       clearDraftPersistSchedule();
+      if (boardRef.current) {
+        boardRef.current.doc.destroy();
+        boardRef.current = null;
+      }
     },
     [clearDocumentFlushSchedule, clearDraftPersistSchedule]
   );
   const flushDocumentSync = react.useCallback(async () => {
+    const board = boardRef.current;
+    const pendingLocal = pendingLocalItemsRef.current;
+    if (board && pendingLocal) {
+      pendingLocalItemsRef.current = null;
+      applyLocalItemsToYDoc(board, {
+        items: pendingLocal,
+        origin: ORIGIN_LOCAL
+      });
+      const mergedItems = readVectorItems(board.yItems);
+      const pendingIds = getLocallyPendingItemIds(board);
+      if (pendingIds.size > 0) {
+        setLocalDraftRef.current({
+          roomId,
+          baseRevision: currentRevisionRef.current,
+          items: mergedItems,
+          updatedAt: nowMs(),
+          yDocState: encodeYDocState(board),
+          pendingIds: Array.from(pendingIds)
+        });
+      }
+    }
     persistLocalDraft();
     if (!connection.connected) return;
     flushQueuedDocument();
-  }, [connection.connected, flushQueuedDocument, persistLocalDraft]);
+  }, [connection.connected, flushQueuedDocument, persistLocalDraft, roomId]);
   const remoteAdapter = react.useMemo(
     () => ({
       subscribe(onItems) {