@q9labsai/chalk-whiteboard 4.0.0

package/dist/chunk-FLUO6BVL.js

@@ -0,0 +1,654 @@
+// src/collab/engine.ts
+import { CaptureUpdateAction as CaptureUpdateAction2, hashElementsVersion, reconcileElements, restoreElements } from "@excalidraw/excalidraw";
+
+// 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) => {
+  if (!value.startsWith("data:")) throw new Error("invalid dataURL");
+  return value;
+};
+var normalizeMimeType = (value) => {
+  const [rawMimeType] = value.split(";", 1);
+  const mimeType = rawMimeType?.trim().toLowerCase();
+  if (mimeType === MIME_TYPES.binary) return MIME_TYPES.binary;
+  if (mimeType?.startsWith("image/")) return mimeType;
+  return MIME_TYPES.binary;
+};
+var updateImageStatus = (excalidrawAPI, fileId, nextStatus) => {
+  const elements = excalidrawAPI.getSceneElementsIncludingDeleted();
+  let changed = false;
+  const next = elements.map((el) => {
+    if (!isImageElement(el) || el.isDeleted || el.fileId !== fileId) return el;
+    if (el.status === nextStatus) return el;
+    changed = true;
+    return newElementWith(el, { status: nextStatus });
+  });
+  if (!changed) return;
+  excalidrawAPI.updateScene({
+    elements: next,
+    captureUpdate: CaptureUpdateAction.NEVER
+  });
+};
+var WhiteboardFilesSync = class {
+  constructor(opts) {
+    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;
+    for (const el of elementsAll) {
+      if (!isImageElement(el) || el.isDeleted) continue;
+      if (!el.fileId) continue;
+      const fileId = String(el.fileId);
+      if (el.status === "pending" && !haveFiles[fileId]) {
+        pendingRemoteUploads += 1;
+        continue;
+      }
+      if (el.status !== "saved") continue;
+      if (haveFiles[fileId]) continue;
+      if (this.downloading.has(fileId)) continue;
+      if (this.downloadQueue.includes(fileId)) continue;
+      this.downloadQueue.push(fileId);
+    }
+    this.remotePendingUploads = pendingRemoteUploads;
+    this.emitState();
+    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(() => {
+      this.downloadTimer = null;
+      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;
+    if (this.downloading.has(fileId)) return;
+    this.downloading.add(fileId);
+    this.emitState();
+    try {
+      let mimeType;
+      let dataURL;
+      if (this.opts.fileTransfer) {
+        const file = await this.opts.fileTransfer.download(fileId);
+        mimeType = normalizeMimeType(file.mimeType);
+        dataURL = toDataURL(file.dataURL);
+      } else {
+        const presignDownload = requireOption(this.opts.presignDownload, "presignDownload");
+        const { downloadUrl } = await presignDownload(fileId);
+        const res = await fetch(downloadUrl);
+        if (res.status === 404) {
+          this.lastErrorAtMs = Date.now();
+          updateImageStatus(this.opts.excalidrawAPI, fileId, "error");
+          return;
+        }
+        if (!res.ok) throw new Error(`download failed: ${res.status}`);
+        mimeType = normalizeMimeType(res.headers.get("content-type") ?? "image/png");
+        dataURL = toDataURL(await blobToDataURL(await res.blob()));
+      }
+      this.opts.excalidrawAPI.addFiles([
+        {
+          id: toFileId(fileId),
+          mimeType,
+          dataURL,
+          created: Date.now(),
+          lastRetrieved: Date.now()
+        }
+      ]);
+    } catch {
+      this.lastErrorAtMs = Date.now();
+    } finally {
+      this.downloading.delete(fileId);
+      this.emitState();
+      if (this.downloadQueue.length > 0) this.scheduleDownload();
+    }
+  }
+  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";
+    this.opts.onStateChange?.({
+      phase,
+      uploading,
+      uploadQueued,
+      remotePendingUploads: this.remotePendingUploads,
+      downloading,
+      downloadQueued,
+      lastErrorAtMs: this.lastErrorAtMs
+    });
+  }
+};
+function requireOption(value, name) {
+  if (value === void 0) throw new Error(`whiteboard file sync requires ${name}`);
+  return value;
+}
+
+// src/collab/presence.ts
+var CURSOR_COLORS = [
+  { stroke: "#FF5D5D", background: "rgba(255, 93, 93, 0.2)" },
+  { stroke: "#4CB9FF", background: "rgba(76, 185, 255, 0.2)" },
+  { stroke: "#8B5CF6", background: "rgba(139, 92, 246, 0.2)" },
+  { stroke: "#10B981", background: "rgba(16, 185, 129, 0.2)" },
+  { stroke: "#F59E0B", background: "rgba(245, 158, 11, 0.2)" },
+  { stroke: "#EC4899", background: "rgba(236, 72, 153, 0.2)" },
+  { stroke: "#22D3EE", background: "rgba(34, 211, 238, 0.2)" },
+  { stroke: "#A3E635", background: "rgba(163, 230, 53, 0.2)" }
+];
+var getCursorColor = (id) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i += 1) {
+    hash = (hash << 5) - hash + id.charCodeAt(i);
+    hash |= 0;
+  }
+  const index = Math.abs(hash) % CURSOR_COLORS.length;
+  return CURSOR_COLORS[index];
+};
+var toSocketId = (value) => value;
+var WhiteboardPresence = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.pruneInterval = setInterval(() => this.pruneStale(), 1e3);
+  }
+  opts;
+  lastCursorSend = 0;
+  collaborators = /* @__PURE__ */ new Map();
+  pruneInterval = null;
+  dispose() {
+    if (this.pruneInterval) clearInterval(this.pruneInterval);
+    this.pruneInterval = null;
+    this.collaborators.clear();
+  }
+  handlePointerUpdate(payload) {
+    const now = Date.now();
+    if (now - this.lastCursorSend < this.opts.throttleMs) return;
+    this.lastCursorSend = now;
+    this.opts.sendCursor(payload.pointer);
+  }
+  handleRemoteCursor(payload) {
+    const ts = payload.timestamp instanceof Date ? payload.timestamp.getTime() : Date.now();
+    this.collaborators.set(payload.participantId, {
+      pointer: { x: payload.x, y: payload.y, tool: "pointer", renderCursor: true },
+      username: payload.displayName,
+      color: getCursorColor(payload.participantId),
+      id: payload.participantId,
+      socketId: toSocketId(payload.participantId),
+      _ts: ts
+    });
+    this.apply();
+  }
+  pruneStale() {
+    const now = Date.now();
+    let changed = false;
+    for (const [id, c] of this.collaborators) {
+      if (now - c._ts > this.opts.staleMs) {
+        this.collaborators.delete(id);
+        changed = true;
+      }
+    }
+    if (changed) this.apply();
+  }
+  apply() {
+    const map = /* @__PURE__ */ new Map();
+    for (const [id, c] of this.collaborators) {
+      const { _ts, ...rest } = c;
+      map.set(toSocketId(id), rest);
+    }
+    this.opts.excalidrawAPI.updateScene({ collaborators: map });
+  }
+};
+
+// src/collab/syncable.ts
+import { isInvisiblySmallElement } from "@excalidraw/excalidraw";
+var filterSyncableElements = (elements) => elements.filter((el) => {
+  if (el.isDeleted) return true;
+  return !isInvisiblySmallElement(el);
+});
+
+// src/collab/wire.ts
+var wireElementKeys = ["id", "type", "version", "version_nonce", "index", "is_deleted", "payload"];
+var wireElementValidators = [
+  (value) => isNonEmptyString(value.id),
+  (value) => isNonEmptyString(value.type),
+  (value) => isNonNegativeSafeInteger(value.version),
+  (value) => isNonNegativeSafeInteger(value.version_nonce),
+  (value) => isNonEmptyString(value.index),
+  (value) => typeof value.is_deleted === "boolean",
+  (value) => isRecord(value.payload) && isJsonValue(value.payload)
+];
+function toWireElement(element) {
+  return {
+    id: element.id,
+    type: element.type,
+    version: element.version,
+    version_nonce: element.versionNonce,
+    index: element.index,
+    is_deleted: element.isDeleted,
+    payload: toJsonRecord(element)
+  };
+}
+function fromWireElement(element) {
+  if (!isWireElement(element)) {
+    throw new Error("invalid whiteboard-v1 element");
+  }
+  return {
+    ...element.payload,
+    id: element.id,
+    type: element.type,
+    version: element.version,
+    versionNonce: element.version_nonce,
+    index: element.index,
+    isDeleted: element.is_deleted
+  };
+}
+function isWireElement(value) {
+  if (!isRecord(value) || !hasExactKeys(value, wireElementKeys)) {
+    return false;
+  }
+  return wireElementValidators.every((validate) => validate(value));
+}
+function toJsonRecord(value) {
+  if (!isRecord(value)) throw new Error("Excalidraw element is not JSON serializable");
+  return normalizeJsonRecord(value, 0);
+}
+function normalizeJsonRecord(value, depth) {
+  assertJsonDepth(depth);
+  const entries = [];
+  for (const [key, item] of Object.entries(value)) {
+    if (item === void 0) continue;
+    entries.push([key, normalizeJsonValue(item, depth + 1)]);
+  }
+  return Object.fromEntries(entries);
+}
+function normalizeJsonValue(value, depth) {
+  assertJsonDepth(depth);
+  if (Array.isArray(value)) return value.map((item) => normalizeJsonValue(item, depth + 1));
+  if (isRecord(value)) return normalizeJsonRecord(value, depth);
+  if (isJsonPrimitive(value)) return value;
+  throw new Error("Excalidraw element is not JSON serializable");
+}
+function assertJsonDepth(depth) {
+  if (depth > 16) throw new Error("Excalidraw element is not JSON serializable");
+}
+function isJsonValue(value, depth = 0) {
+  if (depth > 16) return false;
+  if (Array.isArray(value)) return value.every((item) => isJsonValue(item, depth + 1));
+  if (isRecord(value)) return Object.values(value).every((item) => isJsonValue(item, depth + 1));
+  return isJsonPrimitive(value);
+}
+function isJsonPrimitive(value) {
+  if (value === null) return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  return typeof value === "boolean" || typeof value === "string";
+}
+function isNonEmptyString(value) {
+  return typeof value === "string" && value.length > 0;
+}
+function isNonNegativeSafeInteger(value) {
+  return Number.isSafeInteger(value) && Number(value) >= 0;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function hasExactKeys(value, keys) {
+  return Object.keys(value).length === keys.length && keys.every((key) => Object.hasOwn(value, key));
+}
+
+// src/collab/engine.ts
+var FULL_SYNC_INTERVAL_MS = 2e4;
+var CHANGE_DEBOUNCE_MS = 150;
+var CURSOR_THROTTLE_MS = 16;
+var CURSOR_STALE_MS = 1e4;
+var asArray = (value) => Array.isArray(value) ? value : [];
+var toReconcileRemoteElements = (elements) => elements;
+var ExcalidrawCollabEngine = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.canDraw = opts.canDraw;
+    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
+    });
+    this.presence = new WhiteboardPresence({
+      excalidrawAPI: opts.excalidrawAPI,
+      sendCursor: opts.sendCursor,
+      throttleMs: CURSOR_THROTTLE_MS,
+      staleMs: CURSOR_STALE_MS
+    });
+    this.unsubPointerUp = opts.excalidrawAPI.onPointerUp?.(() => this.flushNow());
+    this.unsubscribe = opts.subscribe((event) => this.handleRemoteEvent(event));
+  }
+  opts;
+  sceneId = null;
+  sceneGeneration = null;
+  canDraw = true;
+  lastBroadcastedOrReceivedElementsHash = 0;
+  broadcastedElementVersions = /* @__PURE__ */ new Map();
+  submissionInFlight = false;
+  dirtyDuringSubmission = false;
+  changeDebounce = null;
+  fullSyncTimer = null;
+  filesSync;
+  presence;
+  unsubPointerUp;
+  unsubscribe;
+  setCanDraw(next) {
+    this.canDraw = next;
+  }
+  async clear() {
+    if (!this.canDraw) throw new Error("whiteboard drawing is not permitted");
+    const commit = await this.opts.clear();
+    this.sceneId = commit.sceneId;
+    this.sceneGeneration = commit.sceneGeneration ?? null;
+    this.broadcastedElementVersions.clear();
+    this.lastBroadcastedOrReceivedElementsHash = 0;
+    this.opts.excalidrawAPI.updateScene({
+      elements: [],
+      captureUpdate: CaptureUpdateAction2.NEVER
+    });
+    return commit;
+  }
+  dispose() {
+    if (this.changeDebounce) clearTimeout(this.changeDebounce);
+    if (this.fullSyncTimer) clearTimeout(this.fullSyncTimer);
+    this.changeDebounce = null;
+    this.fullSyncTimer = null;
+    this.filesSync.dispose();
+    this.presence.dispose();
+    this.unsubscribe();
+    this.unsubPointerUp?.();
+  }
+  handleChange(_elements, _appState, files) {
+    const elementsAll = this.opts.excalidrawAPI.getSceneElementsIncludingDeleted();
+    this.filesSync.handleLocalScene(elementsAll, files);
+    if (!this.canDraw) return;
+    if (this.changeDebounce) clearTimeout(this.changeDebounce);
+    this.changeDebounce = setTimeout(() => {
+      this.changeDebounce = null;
+      this.flushNow();
+    }, CHANGE_DEBOUNCE_MS);
+  }
+  handlePointerUpdate(payload) {
+    this.presence.handlePointerUpdate(payload);
+  }
+  handleRemoteCursor(payload) {
+    this.presence.handleRemoteCursor(payload);
+  }
+  handleRemoteEvent(event) {
+    switch (event.type) {
+      case "snapshot":
+        this.handleRemoteSnapshot({
+          sceneId: event.sceneId,
+          ...event.sceneGeneration ? { sceneGeneration: event.sceneGeneration } : {},
+          elements: event.elements,
+          appState: event.appState
+        });
+        return;
+      case "update":
+        this.handleRemoteData({
+          sceneId: event.sceneId,
+          ...event.sceneGeneration ? { sceneGeneration: event.sceneGeneration } : {},
+          syncAll: false,
+          elements: event.elements
+        });
+        return;
+      case "cursor":
+        this.handleRemoteCursor({
+          participantId: event.participantId,
+          displayName: event.displayName,
+          x: event.x,
+          y: event.y,
+          timestamp: new Date(event.occurredAt)
+        });
+        return;
+      case "reset_required":
+        void this.opts.requestSnapshot().catch(this.opts.onSubmissionError);
+    }
+  }
+  handleRemoteData(payload) {
+    this.applyRemoteElements({
+      sceneId: payload.sceneId,
+      ...payload.sceneGeneration ? { sceneGeneration: payload.sceneGeneration } : {},
+      syncAll: payload.syncAll,
+      remoteElements: payload.elements.map(fromWireElement),
+      isSnapshot: false
+    });
+  }
+  handleRemoteSnapshot(payload) {
+    this.applyRemoteElements({
+      sceneId: payload.sceneId,
+      ...payload.sceneGeneration ? { sceneGeneration: payload.sceneGeneration } : {},
+      syncAll: true,
+      remoteElements: payload.elements.map(fromWireElement),
+      appState: payload.appState,
+      isSnapshot: true
+    });
+  }
+  flushNow() {
+    const context = this.submissionContext();
+    if (!context) return;
+    const elementsHash = hashElementsVersion(context.elements);
+    if (elementsHash === this.lastBroadcastedOrReceivedElementsHash) return;
+    const syncableAll = filterSyncableElements(context.elements);
+    const delta = [];
+    for (const el of syncableAll) {
+      const prev = this.broadcastedElementVersions.get(el.id) ?? 0;
+      if (!prev || el.version > prev) delta.push(el);
+    }
+    if (delta.length === 0) return;
+    this.submit(context.sceneId, context.sceneGeneration ?? null, false, delta, elementsHash);
+  }
+  scheduleFullSync() {
+    if (this.fullSyncTimer) return;
+    this.fullSyncTimer = setTimeout(() => {
+      this.fullSyncTimer = null;
+      this.sendFullSync();
+    }, FULL_SYNC_INTERVAL_MS);
+  }
+  sendFullSync() {
+    const context = this.submissionContext();
+    if (!context) return;
+    const syncableAll = filterSyncableElements(context.elements);
+    this.submit(context.sceneId, context.sceneGeneration ?? null, true, syncableAll, hashElementsVersion(context.elements));
+  }
+  submissionContext() {
+    if (!this.canDraw) return null;
+    if (!this.sceneId) {
+      void this.opts.requestSnapshot().catch(this.opts.onSubmissionError);
+      return null;
+    }
+    if (this.submissionInFlight) {
+      this.dirtyDuringSubmission = true;
+      return null;
+    }
+    return {
+      sceneId: this.sceneId,
+      ...this.sceneGeneration ? { sceneGeneration: this.sceneGeneration } : {},
+      elements: this.opts.excalidrawAPI.getSceneElementsIncludingDeleted()
+    };
+  }
+  submit(sceneId, sceneGeneration, syncAll, elements, elementsHash) {
+    this.submissionInFlight = true;
+    this.dirtyDuringSubmission = false;
+    void this.opts.submitUpdate({
+      sceneId,
+      ...sceneGeneration ? { sceneGeneration } : {},
+      syncAll,
+      elements: elements.map(toWireElement)
+    }).then((commit) => {
+      if (commit.sceneId !== sceneId || this.sceneId !== sceneId || this.sceneGeneration !== sceneGeneration) {
+        void this.opts.requestSnapshot();
+        return;
+      }
+      for (const element of elements) {
+        this.broadcastedElementVersions.set(element.id, element.version);
+      }
+      this.lastBroadcastedOrReceivedElementsHash = elementsHash;
+      this.scheduleFullSync();
+    }).catch(this.opts.onSubmissionError).finally(() => {
+      this.submissionInFlight = false;
+      if (this.dirtyDuringSubmission) this.flushNow();
+    });
+  }
+  applyRemoteElements(args) {
+    const remoteSceneId = args.sceneId;
+    if (!this.sceneId) {
+      this.sceneId = remoteSceneId;
+    } else if (args.isSnapshot) {
+      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 {
+        void this.opts.requestSnapshot().catch(this.opts.onSubmissionError);
+        return;
+      }
+    }
+    if (args.sceneGeneration) this.sceneGeneration = args.sceneGeneration;
+    const excalidrawAPI = this.opts.excalidrawAPI;
+    const local = excalidrawAPI.getSceneElementsIncludingDeleted();
+    const remoteElements = args.remoteElements;
+    const restoredRemote = restoreElements(remoteElements, local);
+    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);
+    }
+    excalidrawAPI.updateScene({
+      elements: reconciled,
+      appState: args.appState,
+      captureUpdate: CaptureUpdateAction2.NEVER
+    });
+    this.filesSync.handleRemoteScene(reconciled);
+  }
+};
+
+export {
+  toWireElement,
+  fromWireElement,
+  isWireElement,
+  ExcalidrawCollabEngine
+};