@q9labsai/chalk-whiteboard 4.1.17 → 5.0.0

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

@@ -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,
@@ -337,6 +249,8 @@ 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;
@@ -488,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
     });
@@ -508,6 +419,7 @@ var ExcalidrawCollabEngine = class {
   sceneId = null;
   sceneGeneration = null;
   canDraw = true;
+  storedImageFileIds = /* @__PURE__ */ new Set();
   broadcastedElementVersions = /* @__PURE__ */ new Map();
   rejectedElementVersions = /* @__PURE__ */ new Map();
   deferredRemoteElements = /* @__PURE__ */ new Map();
@@ -528,6 +440,7 @@ 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();
@@ -555,11 +468,10 @@ var ExcalidrawCollabEngine = class {
     this.unsubscribe();
     this.unsubPointerUp?.();
   }
-  handleChange(_elements, _appState, files) {
+  handleChange(_elements, _appState, _files) {
     if (this.disposed) return;
     this.applyDeferredRemoteElements();
-    const elementsAll = this.opts.excalidrawAPI.getSceneElementsIncludingDeleted();
-    this.filesSync.handleLocalScene(elementsAll, files);
+    this.stripUnstoredImages();
     if (!this.canDraw) return;
     const now = Date.now();
     const deadline = this.changeDebounceDeadline ?? now + CHANGE_MAX_WAIT_MS;
@@ -630,12 +542,18 @@ var ExcalidrawCollabEngine = class {
       isSnapshot: true
     });
   }
+  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 editing = skipEditing ? editingElementIds(this.opts.excalidrawAPI.getAppState()) : [];
-    const syncableAll = filterSyncableElements(context.elements);
+    const syncableAll = filterSyncableElements(retainStoredImages(context.elements, this.storedImageFileIds));
     const delta = [];
     for (const el of syncableAll) {
       if (this.isUnsubmitted(el) && !editing.includes(el.id)) delta.push(el);
@@ -646,7 +564,7 @@ var ExcalidrawCollabEngine = class {
   flushOnDispose() {
     const context = this.submissionContext({ allowDisposed: true, allowInFlight: true });
     if (!context) return;
-    const syncableAll = filterSyncableElements(context.elements);
+    const syncableAll = filterSyncableElements(retainStoredImages(context.elements, this.storedImageFileIds));
     const delta = [];
     for (const element of syncableAll) {
       if (this.isUnsubmitted(element)) delta.push(element);
@@ -797,6 +715,7 @@ var ExcalidrawCollabEngine = class {
       }
     }
     if (replacingScene) {
+      this.storedImageFileIds.clear();
       this.rejectedElementVersions.clear();
       this.clearChangeDebounce();
       this.dirtyDuringSubmission = false;
@@ -810,10 +729,11 @@ var ExcalidrawCollabEngine = class {
     const local = replacingScene ? [] : excalidrawAPI.getSceneElementsIncludingDeleted();
     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 appState = excalidrawAPI.getAppState();
     const editing = editingElementIds(appState);
-    const reconciled = reconcileElements(local, remoteForReconcile, appState);
+    const reconciled = retainStoredImages(reconcileElements(local, remoteForReconcile, appState), this.storedImageFileIds);
     if (args.isSnapshot) {
       this.broadcastedElementVersions.clear();
       this.resetSubmissionRetries();

package/dist/{chunk-EPSMA2DY.js → chunk-W4FLPXAX.js}

@@ -1,6 +1,6 @@
 import {
   compareElementOrder
-} from "./chunk-6Q65ADBK.js";
+} from "./chunk-6ZV7GBAC.js";
 
 // src/collab/reducer.ts
 function mergeWhiteboardElements(current, incoming) {

package/dist/collab/engine.d.ts

@@ -51,6 +51,7 @@ export declare class ExcalidrawCollabEngine {
     private sceneId;
     private sceneGeneration;
     private canDraw;
+    private storedImageFileIds;
     private broadcastedElementVersions;
     private rejectedElementVersions;
     private deferredRemoteElements;
@@ -69,7 +70,7 @@ export declare class ExcalidrawCollabEngine {
     setCanDraw(next: boolean): void;
     clear(): Promise<WhiteboardCommit>;
     dispose(): void;
-    handleChange(_elements: readonly OrderedExcalidrawElement[], _appState: AppState, files: BinaryFiles): void;
+    handleChange(_elements: readonly OrderedExcalidrawElement[], _appState: AppState, _files: BinaryFiles): void;
     handlePointerUpdate(payload: {
         pointer: {
             x: number;
@@ -96,6 +97,7 @@ export declare class ExcalidrawCollabEngine {
         elements: readonly WhiteboardWireElement[];
         appState?: SharedWhiteboardAppState;
     }): void;
+    private stripUnstoredImages;
     private flushNow;
     private flushOnDispose;
     private isUnsubmitted;

package/dist/collab/files.d.ts

@@ -1,23 +1,13 @@
-import type { BinaryFiles, ExcalidrawImperativeAPI, OrderedExcalidrawElement } from "./types.js";
-import type { WhiteboardUploadInstructions } from "./wire.js";
-export type WhiteboardFileSyncPhase = "idle" | "uploading" | "awaiting_remote_upload" | "downloading" | "error";
+import type { ExcalidrawImperativeAPI, OrderedExcalidrawElement } from "./types.js";
+export type WhiteboardFileSyncPhase = "idle" | "awaiting_remote_upload" | "downloading" | "error";
 export interface WhiteboardFileSyncState {
     phase: WhiteboardFileSyncPhase;
-    uploading: number;
-    uploadQueued: number;
     remotePendingUploads: number;
     downloading: number;
     downloadQueued: number;
     lastErrorAtMs: number | null;
 }
 export interface WhiteboardFileTransfer {
-    readonly upload: (input: {
-        readonly fileId: string;
-        readonly mimeType: string;
-        readonly byteLength: number;
-        readonly sha256: string;
-        readonly dataURL: string;
-    }) => Promise<void>;
     readonly download: (fileId: string) => Promise<{
         readonly mimeType: string;
         readonly dataURL: string;
@@ -25,40 +15,26 @@ export interface WhiteboardFileTransfer {
 }
 export interface WhiteboardFileTransferOptions {
     fileTransfer?: WhiteboardFileTransfer;
-    initiateUpload?: (input: {
-        fileId: string;
-        mimeType: string;
-        byteLength: number;
-        sha256: string;
-    }) => Promise<WhiteboardUploadInstructions>;
-    finalizeUpload?: (uploadId: string) => Promise<void>;
     presignDownload?: (fileId: string) => Promise<{
         downloadUrl: string;
     }>;
 }
 interface WhiteboardFilesSyncOptions extends WhiteboardFileTransferOptions {
     excalidrawAPI: ExcalidrawImperativeAPI;
-    uploadThrottleMs?: number;
     downloadThrottleMs?: number;
     onStateChange?: (state: WhiteboardFileSyncState) => void;
 }
 export declare class WhiteboardFilesSync {
     private readonly opts;
-    private uploadTimer;
     private downloadTimer;
-    private uploadQueue;
     private downloadQueue;
-    private uploading;
     private downloading;
     constructor(opts: WhiteboardFilesSyncOptions);
     private remotePendingUploads;
     private lastErrorAtMs;
-    handleLocalScene(elementsAll: readonly OrderedExcalidrawElement[], files: BinaryFiles): void;
     handleRemoteScene(elementsAll: readonly OrderedExcalidrawElement[]): void;
     dispose(): void;
-    private scheduleUpload;
     private scheduleDownload;
-    private processNextUpload;
     private processNextDownload;
     private emitState;
 }

package/dist/collab/index.js

@@ -1,12 +1,12 @@
 import {
   mergeWhiteboardElements
-} from "../chunk-EPSMA2DY.js";
+} from "../chunk-W4FLPXAX.js";
 import {
   ExcalidrawCollabEngine,
   fromWireElement,
   isWireElement,
   toWireElement
-} from "../chunk-6Q65ADBK.js";
+} from "../chunk-6ZV7GBAC.js";
 export {
   ExcalidrawCollabEngine,
   fromWireElement,

package/dist/collab/syncable.d.ts

@@ -1,2 +1,4 @@
 import type { OrderedExcalidrawElement } from "./types.js";
 export declare const filterSyncableElements: (elements: readonly OrderedExcalidrawElement[]) => OrderedExcalidrawElement[];
+export declare const remoteImageFileIds: (elements: readonly OrderedExcalidrawElement[]) => string[];
+export declare const retainStoredImages: (elements: readonly OrderedExcalidrawElement[], storedFileIds: ReadonlySet<string>) => OrderedExcalidrawElement[];

package/dist/embedded/chalk-whiteboard/asset-manifest.json

@@ -1216,8 +1216,8 @@
     },
     {
       "path": "renderer.js",
-      "bytes": 8504846,
-      "sha256": "20644a73c951091c36858684c83bd579c6894f986bf461cf21289f0ccef4ea59"
+      "bytes": 8497928,
+      "sha256": "7f754073f20cee4b3adceb40731faf75d94849f6ce01a0b2e30fdad10867a5d9"
     },
     {
       "path": "THIRD_PARTY_NOTICES.json",