@q9labsai/chalk-whiteboard 4.1.16 → 5.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Q9Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM,
+OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/{chunk-F4B4ANIZ.js → chunk-6ZV7GBAC.js}

@@ -1,5 +1,5 @@
 // src/collab/engine.ts
-import { CaptureUpdateAction as CaptureUpdateAction2, hashElementsVersion, reconcileElements, restoreElements } from "@excalidraw/excalidraw";
+import { CaptureUpdateAction as CaptureUpdateAction2, reconcileElements, restoreElements } from "@excalidraw/excalidraw";
 
 // src/collab/camera.ts
 function getWhiteboardCamera(appState) {
@@ -18,23 +18,12 @@ function withLocalWhiteboardCamera(sharedAppState, localAppState) {
 
 // src/collab/files.ts
 import { CaptureUpdateAction, MIME_TYPES, newElementWith } from "@excalidraw/excalidraw";
-import { sha256 } from "@noble/hashes/sha2.js";
-import { bytesToHex } from "@noble/hashes/utils.js";
-var dataURLToBlob = (dataURL) => {
-  const [header, base64] = dataURL.split(",", 2);
-  if (!header || !base64) throw new Error("invalid dataURL");
-  const match = /data:(.+?)(;base64)?$/i.exec(header);
-  const mimeType = match?.[1] ?? "application/octet-stream";
-  const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
-  return new Blob([bytes], { type: mimeType });
-};
 var blobToDataURL = (blob) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.onerror = () => reject(new Error("failed to read blob"));
   reader.onload = () => resolve(String(reader.result));
   reader.readAsDataURL(blob);
 });
-var sha256Hex = async (blob) => bytesToHex(sha256(new Uint8Array(await blob.arrayBuffer())));
 var isImageElement = (el) => el.type === "image";
 var toFileId = (value) => value;
 var toDataURL = (value) => {
@@ -68,29 +57,11 @@ var WhiteboardFilesSync = class {
     this.opts = opts;
   }
   opts;
-  uploadTimer = null;
   downloadTimer = null;
-  uploadQueue = [];
   downloadQueue = [];
-  uploading = /* @__PURE__ */ new Set();
   downloading = /* @__PURE__ */ new Set();
   remotePendingUploads = 0;
   lastErrorAtMs = null;
-  handleLocalScene(elementsAll, files) {
-    for (const el of elementsAll) {
-      if (!isImageElement(el) || el.isDeleted) continue;
-      if (el.status !== "pending") continue;
-      if (!el.fileId) continue;
-      const fileId = String(el.fileId);
-      if (this.uploading.has(fileId)) continue;
-      if (this.uploadQueue.includes(fileId)) continue;
-      const file = files[fileId];
-      if (!file?.dataURL || !file?.mimeType) continue;
-      this.uploadQueue.push(fileId);
-    }
-    this.emitState();
-    if (this.uploadQueue.length > 0) this.scheduleUpload();
-  }
   handleRemoteScene(elementsAll) {
     const haveFiles = this.opts.excalidrawAPI.getFiles();
     let pendingRemoteUploads = 0;
@@ -113,25 +84,14 @@ var WhiteboardFilesSync = class {
     if (this.downloadQueue.length > 0) this.scheduleDownload();
   }
   dispose() {
-    if (this.uploadTimer) clearTimeout(this.uploadTimer);
     if (this.downloadTimer) clearTimeout(this.downloadTimer);
-    this.uploadTimer = null;
     this.downloadTimer = null;
-    this.uploadQueue = [];
     this.downloadQueue = [];
-    this.uploading.clear();
     this.downloading.clear();
     this.remotePendingUploads = 0;
     this.lastErrorAtMs = null;
     this.emitState();
   }
-  scheduleUpload() {
-    if (this.uploadTimer) return;
-    this.uploadTimer = setTimeout(() => {
-      this.uploadTimer = null;
-      void this.processNextUpload();
-    }, this.opts.uploadThrottleMs ?? 300);
-  }
   scheduleDownload() {
     if (this.downloadTimer) return;
     this.downloadTimer = setTimeout(() => {
@@ -139,50 +99,6 @@ var WhiteboardFilesSync = class {
       void this.processNextDownload();
     }, this.opts.downloadThrottleMs ?? 500);
   }
-  async processNextUpload() {
-    const fileId = this.uploadQueue.shift();
-    if (!fileId) return;
-    if (this.uploading.has(fileId)) return;
-    const files = this.opts.excalidrawAPI.getFiles();
-    const file = files[fileId];
-    if (!file?.dataURL || !file?.mimeType) {
-      if (this.uploadQueue.length > 0) this.scheduleUpload();
-      return;
-    }
-    this.uploading.add(fileId);
-    this.emitState();
-    try {
-      const blob = dataURLToBlob(file.dataURL);
-      const metadata = {
-        fileId,
-        mimeType: file.mimeType,
-        byteLength: blob.size,
-        sha256: await sha256Hex(blob)
-      };
-      if (this.opts.fileTransfer) {
-        await this.opts.fileTransfer.upload({ ...metadata, dataURL: file.dataURL });
-      } else {
-        const initiateUpload = requireOption(this.opts.initiateUpload, "initiateUpload");
-        const finalizeUpload = requireOption(this.opts.finalizeUpload, "finalizeUpload");
-        const instructions = await initiateUpload(metadata);
-        const res = await fetch(instructions.uploadUrl, {
-          method: instructions.method,
-          headers: instructions.headers,
-          body: blob
-        });
-        if (!res.ok) throw new Error(`upload failed: ${res.status}`);
-        await finalizeUpload(instructions.uploadId);
-      }
-      updateImageStatus(this.opts.excalidrawAPI, fileId, "saved");
-    } catch {
-      this.lastErrorAtMs = Date.now();
-      updateImageStatus(this.opts.excalidrawAPI, fileId, "error");
-    } finally {
-      this.uploading.delete(fileId);
-      this.emitState();
-      if (this.uploadQueue.length > 0) this.scheduleUpload();
-    }
-  }
   async processNextDownload() {
     const fileId = this.downloadQueue.shift();
     if (!fileId) return;
@@ -227,15 +143,11 @@ var WhiteboardFilesSync = class {
     }
   }
   emitState() {
-    const uploadQueued = this.uploadQueue.length;
-    const uploading = this.uploading.size;
     const downloadQueued = this.downloadQueue.length;
     const downloading = this.downloading.size;
-    const phase = uploading > 0 || uploadQueued > 0 ? "uploading" : this.remotePendingUploads > 0 ? "awaiting_remote_upload" : downloading > 0 || downloadQueued > 0 ? "downloading" : this.lastErrorAtMs && Date.now() - this.lastErrorAtMs < 4e3 ? "error" : "idle";
+    const phase = this.remotePendingUploads > 0 ? "awaiting_remote_upload" : downloading > 0 || downloadQueued > 0 ? "downloading" : this.lastErrorAtMs && Date.now() - this.lastErrorAtMs < 4e3 ? "error" : "idle";
     this.opts.onStateChange?.({
       phase,
-      uploading,
-      uploadQueued,
       remotePendingUploads: this.remotePendingUploads,
       downloading,
       downloadQueued,
@@ -248,6 +160,15 @@ function requireOption(value, name) {
   return value;
 }
 
+// src/collab/order.ts
+function compareCodeUnits(left, right) {
+  if (left === right) return 0;
+  return left < right ? -1 : 1;
+}
+function compareElementOrder(left, right) {
+  return compareCodeUnits(left.index ?? "", right.index ?? "") || compareCodeUnits(left.id, right.id);
+}
+
 // src/collab/presence.ts
 var CURSOR_COLORS = [
   { stroke: "#FF5D5D", background: "rgba(255, 93, 93, 0.2)" },
@@ -328,8 +249,12 @@ var filterSyncableElements = (elements) => elements.filter((el) => {
   if (el.isDeleted) return true;
   return !isInvisiblySmallElement(el);
 });
+var remoteImageFileIds = (elements) => elements.flatMap((element) => element.type === "image" && element.fileId ? [element.fileId] : []);
+var retainStoredImages = (elements, storedFileIds) => elements.filter((element) => element.type !== "image" || element.fileId !== null && storedFileIds.has(element.fileId));
 
 // src/collab/wire.ts
+var ELEMENT_ENCODED_BYTES_LIMIT = 16384 - 64;
+var encoder = new TextEncoder();
 var wireElementKeys = ["id", "type", "version", "version_nonce", "index", "is_deleted", "payload"];
 var wireElementValidators = [
   (value) => isNonEmptyString(value.id),
@@ -351,6 +276,47 @@ function toWireElement(element) {
     payload: toJsonRecord(element)
   };
 }
+function toFittedWireElement(element) {
+  const wire = toWireElement(element);
+  if (fits(wire)) return wire;
+  const payload = fitPoints(element, wire);
+  if (!payload) throw new Error("Whiteboard element exceeds the whiteboard-v1 element size");
+  return { ...wire, payload };
+}
+function fitPoints(element, wire) {
+  if (!("points" in element) || isElbowArrow(element)) return void 0;
+  const points = element.points.map((point) => point.map(roundCoordinate));
+  const pressures = element.type === "freedraw" ? element.pressures.map(roundCoordinate) : void 0;
+  const sample = (stride) => ({ ...wire.payload, points: sampleValues(points, stride), ...pressures ? { pressures: sampleValues(pressures, stride) } : {} });
+  const lastStride = Math.max(1, points.length - 1);
+  if (!fits({ ...wire, payload: sample(lastStride) })) return void 0;
+  for (let stride = 1; stride < lastStride; stride++) {
+    const reduced = sample(stride);
+    if (fits({ ...wire, payload: reduced })) return reduced;
+  }
+  return sample(lastStride);
+}
+function isElbowArrow(element) {
+  return element.type === "arrow" && "elbowed" in element && element.elbowed;
+}
+var exponentWithoutFraction = /(^|[^\d.])\d[eE][+-]?\d/g;
+function fits(element) {
+  const json = JSON.stringify(element);
+  return encoder.encode(json).byteLength + 2 * (json.match(exponentWithoutFraction)?.length ?? 0) <= ELEMENT_ENCODED_BYTES_LIMIT;
+}
+function roundCoordinate(value) {
+  return Number(value.toFixed(2));
+}
+function sampleValues(values, stride) {
+  const sampled = [];
+  for (let index = 0; index < values.length - 1; index += stride) {
+    const value = values[index];
+    if (value !== void 0) sampled.push(value);
+  }
+  const last = values.at(-1);
+  if (last !== void 0) sampled.push(last);
+  return sampled;
+}
 function fromWireElement(element) {
   if (!isWireElement(element)) {
     throw new Error("invalid whiteboard-v1 element");
@@ -419,12 +385,16 @@ function hasExactKeys(value, keys) {
 }
 
 // src/collab/engine.ts
-var FULL_SYNC_INTERVAL_MS = 2e4;
+var SUBMISSION_RETRY_DELAY_MS = 1e3;
+var MAX_SUBMISSION_RETRY_DELAY_MS = 16e3;
 var CHANGE_DEBOUNCE_MS = 150;
+var CHANGE_MAX_WAIT_MS = 1e3;
 var CURSOR_THROTTLE_MS = 16;
 var CURSOR_STALE_MS = 1e4;
 var asArray = (value) => Array.isArray(value) ? value : [];
 var toReconcileRemoteElements = (elements) => elements;
+var isNewerVersion = (element, previous) => element.version > previous.version || element.version === previous.version && element.versionNonce < previous.versionNonce;
+var editingElementIds = (appState) => [appState.newElement?.id, appState.resizingElement?.id, appState.editingTextElement?.id];
 var ExcalidrawCollabEngine = class {
   constructor(opts) {
     this.opts = opts;
@@ -432,10 +402,7 @@ var ExcalidrawCollabEngine = class {
     this.filesSync = new WhiteboardFilesSync({
       excalidrawAPI: opts.excalidrawAPI,
       fileTransfer: opts.fileTransfer,
-      initiateUpload: opts.initiateUpload,
-      finalizeUpload: opts.finalizeUpload,
       presignDownload: opts.presignDownload,
-      uploadThrottleMs: 300,
       downloadThrottleMs: 500,
       onStateChange: opts.onFileSyncStateChange
     });
@@ -452,13 +419,17 @@ var ExcalidrawCollabEngine = class {
   sceneId = null;
   sceneGeneration = null;
   canDraw = true;
-  lastBroadcastedOrReceivedElementsHash = 0;
+  storedImageFileIds = /* @__PURE__ */ new Set();
   broadcastedElementVersions = /* @__PURE__ */ new Map();
+  rejectedElementVersions = /* @__PURE__ */ new Map();
+  deferredRemoteElements = /* @__PURE__ */ new Map();
   submissionInFlight = false;
   dirtyDuringSubmission = false;
   disposed = false;
   changeDebounce = null;
-  fullSyncTimer = null;
+  changeDebounceDeadline = null;
+  submissionRetryTimer = null;
+  submissionRetries = 0;
   filesSync;
   presence;
   unsubPointerUp;
@@ -469,10 +440,13 @@ var ExcalidrawCollabEngine = class {
   async clear() {
     if (!this.canDraw) throw new Error("whiteboard drawing is not permitted");
     const commit = await this.opts.clear();
+    this.storedImageFileIds.clear();
     this.sceneId = commit.sceneId;
     this.sceneGeneration = commit.sceneGeneration ?? null;
     this.broadcastedElementVersions.clear();
-    this.lastBroadcastedOrReceivedElementsHash = 0;
+    this.rejectedElementVersions.clear();
+    this.deferredRemoteElements.clear();
+    this.resetSubmissionRetries();
     this.opts.excalidrawAPI.updateScene({
       elements: [],
       captureUpdate: CaptureUpdateAction2.NEVER
@@ -481,29 +455,36 @@ var ExcalidrawCollabEngine = class {
   }
   dispose() {
     if (this.disposed) return;
-    const hasPendingChange = this.changeDebounce !== null || this.dirtyDuringSubmission;
+    const hasPendingChange = this.changeDebounce !== null || this.dirtyDuringSubmission || this.submissionRetryTimer !== null;
     this.disposed = true;
-    if (this.changeDebounce) clearTimeout(this.changeDebounce);
-    this.changeDebounce = null;
+    this.clearChangeDebounce();
     if (hasPendingChange) this.flushOnDispose();
-    if (this.fullSyncTimer) clearTimeout(this.fullSyncTimer);
-    this.fullSyncTimer = null;
+    if (this.submissionRetryTimer) clearTimeout(this.submissionRetryTimer);
+    this.submissionRetryTimer = null;
     this.dirtyDuringSubmission = false;
+    this.deferredRemoteElements.clear();
     this.filesSync.dispose();
     this.presence.dispose();
     this.unsubscribe();
     this.unsubPointerUp?.();
   }
-  handleChange(_elements, _appState, files) {
+  handleChange(_elements, _appState, _files) {
     if (this.disposed) return;
-    const elementsAll = this.opts.excalidrawAPI.getSceneElementsIncludingDeleted();
-    this.filesSync.handleLocalScene(elementsAll, files);
+    this.applyDeferredRemoteElements();
+    this.stripUnstoredImages();
     if (!this.canDraw) return;
-    if (this.changeDebounce) clearTimeout(this.changeDebounce);
-    this.changeDebounce = setTimeout(() => {
-      this.changeDebounce = null;
-      this.flushNow();
-    }, CHANGE_DEBOUNCE_MS);
+    const now = Date.now();
+    const deadline = this.changeDebounceDeadline ?? now + CHANGE_MAX_WAIT_MS;
+    const wait = Math.min(CHANGE_DEBOUNCE_MS, deadline - now);
+    this.clearChangeDebounce();
+    this.changeDebounceDeadline = deadline;
+    this.changeDebounce = setTimeout(
+      () => {
+        this.clearChangeDebounce();
+        this.flushNow(wait < CHANGE_DEBOUNCE_MS);
+      },
+      Math.max(0, wait)
+    );
   }
   handlePointerUpdate(payload) {
     this.presence.handlePointerUpdate(payload);
@@ -561,49 +542,72 @@ var ExcalidrawCollabEngine = class {
       isSnapshot: true
     });
   }
-  flushNow() {
-    if (this.disposed) return;
+  stripUnstoredImages() {
+    const elements = this.opts.excalidrawAPI.getSceneElementsIncludingDeleted();
+    const retained = retainStoredImages(elements, this.storedImageFileIds);
+    if (retained.length === elements.length) return;
+    this.opts.excalidrawAPI.updateScene({ elements: retained, captureUpdate: CaptureUpdateAction2.NEVER });
+  }
+  flushNow(skipEditing = false) {
+    if (this.disposed || this.submissionRetryTimer !== null) return;
     const context = this.submissionContext();
     if (!context) return;
-    const elementsHash = hashElementsVersion(context.elements);
-    if (elementsHash === this.lastBroadcastedOrReceivedElementsHash) return;
-    const syncableAll = filterSyncableElements(context.elements);
+    const editing = skipEditing ? editingElementIds(this.opts.excalidrawAPI.getAppState()) : [];
+    const syncableAll = filterSyncableElements(retainStoredImages(context.elements, this.storedImageFileIds));
     const delta = [];
     for (const el of syncableAll) {
-      const prev = this.broadcastedElementVersions.get(el.id) ?? 0;
-      if (!prev || el.version > prev) delta.push(el);
+      if (this.isUnsubmitted(el) && !editing.includes(el.id)) delta.push(el);
     }
     if (delta.length === 0) return;
-    this.submit(context.sceneId, context.sceneGeneration ?? null, false, delta, elementsHash);
+    this.submit(context.sceneId, context.sceneGeneration ?? null, delta);
   }
   flushOnDispose() {
     const context = this.submissionContext({ allowDisposed: true, allowInFlight: true });
     if (!context) return;
-    const elementsHash = hashElementsVersion(context.elements);
-    if (elementsHash === this.lastBroadcastedOrReceivedElementsHash) return;
-    const syncableAll = filterSyncableElements(context.elements);
+    const syncableAll = filterSyncableElements(retainStoredImages(context.elements, this.storedImageFileIds));
     const delta = [];
     for (const element of syncableAll) {
-      const previousVersion = this.broadcastedElementVersions.get(element.id) ?? 0;
-      if (!previousVersion || element.version > previousVersion) delta.push(element);
+      if (this.isUnsubmitted(element)) delta.push(element);
     }
     if (delta.length === 0) return;
     this.submitFinalUpdate(context.sceneId, context.sceneGeneration ?? null, delta);
   }
-  scheduleFullSync() {
-    if (this.disposed || this.fullSyncTimer) return;
-    this.fullSyncTimer = setTimeout(() => {
-      this.fullSyncTimer = null;
-      if (this.disposed) return;
-      this.sendFullSync();
-    }, FULL_SYNC_INTERVAL_MS);
+  isUnsubmitted(element) {
+    const rejected = this.rejectedElementVersions.get(element.id);
+    if (rejected?.version === element.version && rejected.versionNonce === element.versionNonce) return false;
+    const previous = this.broadcastedElementVersions.get(element.id);
+    return !previous || isNewerVersion(element, previous);
+  }
+  applyDeferredRemoteElements() {
+    if (!this.sceneId || this.deferredRemoteElements.size === 0) return;
+    const editing = editingElementIds(this.opts.excalidrawAPI.getAppState());
+    const elements = [];
+    for (const [id, element] of this.deferredRemoteElements) {
+      if (editing.includes(id)) continue;
+      this.deferredRemoteElements.delete(id);
+      elements.push(element);
+    }
+    if (elements.length === 0) return;
+    this.applyRemoteElements({ sceneId: this.sceneId, ...this.sceneGeneration ? { sceneGeneration: this.sceneGeneration } : {}, syncAll: false, remoteElements: elements, isSnapshot: false });
   }
-  sendFullSync() {
-    if (this.disposed) return;
-    const context = this.submissionContext();
-    if (!context) return;
-    const syncableAll = filterSyncableElements(context.elements);
-    this.submit(context.sceneId, context.sceneGeneration ?? null, true, syncableAll, hashElementsVersion(context.elements));
+  clearChangeDebounce() {
+    if (this.changeDebounce !== null) clearTimeout(this.changeDebounce);
+    this.changeDebounce = null;
+    this.changeDebounceDeadline = null;
+  }
+  resetSubmissionRetries() {
+    if (this.submissionRetryTimer !== null) clearTimeout(this.submissionRetryTimer);
+    this.submissionRetryTimer = null;
+    this.submissionRetries = 0;
+  }
+  scheduleSubmissionRetry() {
+    if (this.disposed || this.submissionRetryTimer !== null) return;
+    const delay = Math.min(SUBMISSION_RETRY_DELAY_MS * 2 ** this.submissionRetries, MAX_SUBMISSION_RETRY_DELAY_MS);
+    this.submissionRetries += 1;
+    this.submissionRetryTimer = setTimeout(() => {
+      this.submissionRetryTimer = null;
+      this.flushNow();
+    }, delay);
   }
   submissionContext(options = {}) {
     if (this.disposed && !options.allowDisposed) return null;
@@ -622,41 +626,54 @@ var ExcalidrawCollabEngine = class {
       elements: this.opts.excalidrawAPI.getSceneElementsIncludingDeleted()
     };
   }
-  submit(sceneId, sceneGeneration, syncAll, elements, elementsHash) {
+  submit(sceneId, sceneGeneration, elements) {
+    const submittedElements = this.toSubmissionElements(elements);
+    if (submittedElements.length === 0) return;
     this.submissionInFlight = true;
     this.dirtyDuringSubmission = false;
-    void this.opts.submitUpdate({
-      sceneId,
-      ...sceneGeneration ? { sceneGeneration } : {},
-      syncAll,
-      elements: elements.map(toWireElement)
-    }).then((commit) => {
+    let acknowledged = false;
+    void Promise.resolve().then(
+      () => this.opts.submitUpdate({
+        sceneId,
+        ...sceneGeneration ? { sceneGeneration } : {},
+        syncAll: false,
+        elements: submittedElements
+      })
+    ).then((commit) => {
       if (this.disposed) return;
       if (commit.sceneId !== sceneId || this.sceneId !== sceneId || this.sceneGeneration !== sceneGeneration) {
         this.requestSnapshot();
         return;
       }
-      for (const element of elements) {
-        this.broadcastedElementVersions.set(element.id, element.version);
+      for (const element of submittedElements) {
+        const previous = this.broadcastedElementVersions.get(element.id);
+        const submittedVersion = { version: element.version, versionNonce: element.version_nonce };
+        if (!previous || isNewerVersion(submittedVersion, previous)) this.broadcastedElementVersions.set(element.id, submittedVersion);
       }
-      this.lastBroadcastedOrReceivedElementsHash = elementsHash;
-      this.scheduleFullSync();
-    }).catch(this.opts.onSubmissionError).finally(() => {
+      this.submissionRetries = 0;
+      acknowledged = true;
+    }).catch((cause) => {
+      if (this.sceneId === sceneId && this.sceneGeneration === sceneGeneration) this.scheduleSubmissionRetry();
+      this.opts.onSubmissionError?.(cause);
+    }).finally(() => {
       if (this.disposed) return;
       this.submissionInFlight = false;
       const shouldFlush = this.dirtyDuringSubmission;
       this.dirtyDuringSubmission = false;
-      if (!this.disposed && shouldFlush) this.flushNow();
+      if (shouldFlush) this.flushNow();
+      else if (acknowledged && this.changeDebounce === null) this.flushNow(true);
     });
   }
   submitFinalUpdate(sceneId, sceneGeneration, elements) {
+    const submittedElements = this.toSubmissionElements(elements);
+    if (submittedElements.length === 0) return;
     let submission;
     try {
       submission = this.opts.submitUpdate({
         sceneId,
         ...sceneGeneration ? { sceneGeneration } : {},
         syncAll: false,
-        elements: elements.map(toWireElement)
+        elements: submittedElements
       });
     } catch (cause) {
       this.opts.onSubmissionError?.(cause);
@@ -664,6 +681,20 @@ var ExcalidrawCollabEngine = class {
     }
     void submission.catch((cause) => this.opts.onSubmissionError?.(cause));
   }
+  toSubmissionElements(elements) {
+    const submitted = [];
+    for (const element of elements) {
+      try {
+        submitted.push(toFittedWireElement(element));
+        this.rejectedElementVersions.delete(element.id);
+      } catch (cause) {
+        const reported = this.rejectedElementVersions.has(element.id);
+        this.rejectedElementVersions.set(element.id, { version: element.version, versionNonce: element.versionNonce });
+        if (!reported) this.opts.onSubmissionError?.(new Error("One whiteboard item could not be shared. If it is very large, make it smaller or split it.", { cause }));
+      }
+    }
+    return submitted;
+  }
   applyRemoteElements(args) {
     const remoteSceneId = args.sceneId;
     const replacingScene = this.sceneId !== null && remoteSceneId !== this.sceneId;
@@ -673,43 +704,58 @@ var ExcalidrawCollabEngine = class {
       if (remoteSceneId !== this.sceneId) {
         this.sceneId = remoteSceneId;
         this.broadcastedElementVersions.clear();
-        this.lastBroadcastedOrReceivedElementsHash = 0;
       }
     } else if (remoteSceneId !== this.sceneId) {
       if (args.syncAll && asArray(args.remoteElements).length === 0) {
         this.sceneId = remoteSceneId;
         this.broadcastedElementVersions.clear();
-        this.lastBroadcastedOrReceivedElementsHash = 0;
       } else {
         this.requestSnapshot();
         return;
       }
     }
     if (replacingScene) {
-      if (this.changeDebounce !== null) clearTimeout(this.changeDebounce);
-      this.changeDebounce = null;
+      this.storedImageFileIds.clear();
+      this.rejectedElementVersions.clear();
+      this.clearChangeDebounce();
       this.dirtyDuringSubmission = false;
       this.sceneGeneration = null;
+      this.deferredRemoteElements.clear();
+      this.resetSubmissionRetries();
     }
     if (args.sceneGeneration) this.sceneGeneration = args.sceneGeneration;
     const excalidrawAPI = this.opts.excalidrawAPI;
     if (replacingScene) excalidrawAPI.history.clear();
     const local = replacingScene ? [] : excalidrawAPI.getSceneElementsIncludingDeleted();
-    const remoteElements = args.remoteElements;
-    const restoredRemote = restoreElements(remoteElements, local);
+    const remoteElements = [...args.remoteElements].sort(compareElementOrder);
+    const restoredRemote = restoreElements(remoteElements, null);
+    this.storedImageFileIds = /* @__PURE__ */ new Set([...this.storedImageFileIds, ...remoteImageFileIds(restoredRemote)]);
     const remoteForReconcile = toReconcileRemoteElements(restoredRemote);
-    const reconciled = reconcileElements(local, remoteForReconcile, excalidrawAPI.getAppState());
-    this.lastBroadcastedOrReceivedElementsHash = hashElementsVersion(reconciled);
-    this.broadcastedElementVersions.clear();
-    for (const el of reconciled) {
-      this.broadcastedElementVersions.set(el.id, el.version);
+    const appState = excalidrawAPI.getAppState();
+    const editing = editingElementIds(appState);
+    const reconciled = retainStoredImages(reconcileElements(local, remoteForReconcile, appState), this.storedImageFileIds);
+    if (args.isSnapshot) {
+      this.broadcastedElementVersions.clear();
+      this.resetSubmissionRetries();
+    }
+    const remoteById = new Map(restoredRemote.map((element) => [element.id, element]));
+    for (const element of reconciled) {
+      const remote = remoteById.get(element.id);
+      if (remote?.version === element.version && remote.versionNonce === element.versionNonce) {
+        this.broadcastedElementVersions.set(element.id, { version: element.version, versionNonce: element.versionNonce });
+      } else if (remote && editing.includes(element.id) && isNewerVersion(remote, element)) {
+        const previous = this.deferredRemoteElements.get(element.id);
+        if (!previous || isNewerVersion(remote, previous)) this.deferredRemoteElements.set(element.id, remote);
+      }
     }
+    const hasUnsubmittedElements = reconciled.some((element) => this.isUnsubmitted(element));
     excalidrawAPI.updateScene({
       elements: reconciled,
       appState: withLocalWhiteboardCamera(args.appState, excalidrawAPI.getAppState()),
       captureUpdate: CaptureUpdateAction2.NEVER
     });
     this.filesSync.handleRemoteScene(reconciled);
+    if (args.isSnapshot && hasUnsubmittedElements) queueMicrotask(() => this.flushNow());
   }
   requestSnapshot() {
     if (this.disposed) return;
@@ -721,6 +767,7 @@ var ExcalidrawCollabEngine = class {
 };
 
 export {
+  compareElementOrder,
   toWireElement,
   fromWireElement,
   isWireElement,

package/dist/{chunk-4XG2ABSP.js → chunk-W4FLPXAX.js}

@@ -1,3 +1,7 @@
+import {
+  compareElementOrder
+} from "./chunk-6ZV7GBAC.js";
+
 // src/collab/reducer.ts
 function mergeWhiteboardElements(current, incoming) {
   const merged = new Map(current.map((element) => [element.id, element]));
@@ -13,10 +17,6 @@ function wins(candidate, existing) {
   if (candidate.version !== existing.version) return candidate.version > existing.version;
   return candidate.version_nonce < existing.version_nonce;
 }
-function compareElementOrder(left, right) {
-  const byIndex = left.index.localeCompare(right.index);
-  return byIndex === 0 ? left.id.localeCompare(right.id) : byIndex;
-}
 
 export {
   mergeWhiteboardElements