Upload folder using huggingface_hub

.build_counter

@@ -1 +1 @@
-25
+24

public/scripts/ColorRmApp.js

@@ -1080,12 +1080,6 @@ export class ColorRmApp {
                     this.sotaPerf.initialize(item.history);
                 }
 
-                // Recalculate infinite canvas bounds after loading
-                // This ensures the canvas stretches properly even after server restart or for new users
-                if (item.isInfinite && this.recalculateInfiniteCanvasBounds) {
-                    this.recalculateInfiniteCanvasBounds(this.state.idx);
-                }
-
                 resolve();
             };
         });

public/scripts/LiveSync.js

@@ -424,11 +424,7 @@ export class LiveSyncClient {
                         undoStack: [],
                         redoStack: [],
                         isInfinite: meta.isInfinite || false,
-                        vectorGrid: meta.vectorGrid || null,
-                        bounds: meta.bounds || null,
-                        origin: meta.origin || null,
                         templateType: meta.templateType || null,
-                        templateConfig: meta.templateConfig || null,
                         _needsBlobFetch: true // Mark for R2 fetch
                     };
 
@@ -613,7 +609,6 @@ export class LiveSyncClient {
                 pagesHistory: new LiveMap(),
                 pagesModifications: new LiveMap(),
                 pagesMetadata: new LiveMap(),
-                pagesDelta: new LiveMap(),
                 bookmarks: new LiveList([]),
                 colors: new LiveList([])
             }));
@@ -639,10 +634,6 @@ export class LiveSyncClient {
                  console.log('[LiveSync] Adding missing pagesMetadata LiveMap');
                  remoteProject.set("pagesMetadata", new LiveMap());
              }
-             if (!remoteProject.get("pagesDelta")) {
-                 console.log('[LiveSync] Adding missing pagesDelta LiveMap');
-                 remoteProject.set("pagesDelta", new LiveMap());
-             }
         }
 
         await this.syncStorageToLocal();
@@ -1918,10 +1909,6 @@ export class LiveSyncClient {
             this.app.ui.updateProgress(90, 'Finalizing sync...');
             await this._reorderPagesToMatchStructure(remotePageIds);
 
-            // STEP 4.5: Apply page metadata to ensure infinite canvas properties are set
-            // This is critical for new users or after server restart
-            await this._applyPageMetadata(pageMetadata);
-
             // STEP 5: Update UI
             const pt = this.app.getElement('pageTotal');
             if (pt) pt.innerText = '/ ' + this.app.state.images.length;
@@ -2154,68 +2141,6 @@ export class LiveSyncClient {
         }
     }
 
-    /**
-     * Apply page metadata from server to local pages
-     * Critical for restoring infinite canvas properties after server restart or for new users
-     * @param {object} pageMetadata - Map of pageId -> metadata from server
-     */
-    async _applyPageMetadata(pageMetadata) {
-        if (!pageMetadata || Object.keys(pageMetadata).length === 0) return;
-
-        let updated = false;
-
-        for (const page of this.app.state.images) {
-            if (!page || !page.pageId) continue;
-
-            const meta = pageMetadata[page.pageId];
-            if (!meta) continue;
-
-            // Apply infinite canvas properties if missing locally
-            if (meta.isInfinite && !page.isInfinite) {
-                page.isInfinite = true;
-                page.vectorGrid = meta.vectorGrid;
-                page.bounds = meta.bounds;
-                page.origin = meta.origin;
-                updated = true;
-                console.log(`[_applyPageMetadata] Applied infinite canvas props to page ${page.pageId}`);
-            }
-
-            // Update vectorGrid/bounds if they exist in meta but not locally
-            if (meta.isInfinite && page.isInfinite) {
-                if (meta.vectorGrid && !page.vectorGrid) {
-                    page.vectorGrid = meta.vectorGrid;
-                    updated = true;
-                }
-                if (meta.bounds && !page.bounds) {
-                    page.bounds = meta.bounds;
-                    updated = true;
-                }
-                if (meta.origin && !page.origin) {
-                    page.origin = meta.origin;
-                    updated = true;
-                }
-            }
-
-            // Apply template properties if missing locally
-            if (meta.templateType && !page.templateType) {
-                page.templateType = meta.templateType;
-                page.templateConfig = meta.templateConfig;
-                updated = true;
-                console.log(`[_applyPageMetadata] Applied template props to page ${page.pageId}`);
-            }
-        }
-
-        // Persist updates to IndexedDB
-        if (updated) {
-            for (const page of this.app.state.images) {
-                if (page) {
-                    await this.app.dbPut('pages', page);
-                }
-            }
-            console.log(`[_applyPageMetadata] Persisted metadata updates to IndexedDB`);
-        }
-    }
-
     /**
      * Fetches missing pages from backend when remote has more pages than local
      * @param {number} expectedPageCount - The expected total page count from metadata
@@ -2234,58 +2159,125 @@ export class LiveSyncClient {
         const project = this.getProject();
         if (!project || this.isInitializing) return;
 
+        const pagesHistory = project.get("pagesHistory");
         let currentIdxChanged = false;
         const pagesToFetchBase = [];
 
-        // Check for versioned delta system first (new approach)
-        const pagesDelta = project.get("pagesDelta");
-        const usesVersionedDelta = pagesDelta && pagesDelta.size > 0;
-
         // Priority: Update current page immediately
-        const currentPageIdx = this.app.state.idx;
-        const localImg = this.app.state.images[currentPageIdx];
+        const currentRemote = pagesHistory.get(this.app.state.idx.toString());
+        if (currentRemote) {
+            const deltaHist = currentRemote.toArray();
+            const localImg = this.app.state.images[this.app.state.idx];
+            if (localImg) {
+                // Check if we need to fetch base history first
+                const pageMeta = this.getPageMetadata(this.app.state.idx);
+                const needsBase = (pageMeta?.hasBaseHistory || localImg.hasBaseHistory) && !localImg._baseHistory;
+
+                if (needsBase) {
+                    // Queue for base history fetch, use CRDT merge with deltas for now
+                    pagesToFetchBase.push(this.app.state.idx);
+                    // Don't replace - merge to avoid losing local strokes
+                    const mergedHistory = this._crdtMergeHistory(
+                        localImg.history || [],
+                        deltaHist,
+                        Date.now()
+                    );
+                    localImg.history = mergedHistory;
+                } else if (localImg.hasBaseHistory && localImg._baseHistory) {
+                    // If page has base history, merge it with deltas and apply modifications
+                    // Get modifications from Liveblocks + R2 (if large)
+                    const liveblocksModifications = this.getPageModifications(this.app.state.idx);
+                    const r2Modifications = localImg._r2Modifications || {};
+                    const modifications = { ...liveblocksModifications, ...r2Modifications };
+
+                    // Apply modifications to base history
+                    const modifiedBase = localImg._baseHistory.map(item => {
+                        if (modifications[item.id]) {
+                            // Merge modification onto base item
+                            return { ...item, ...modifications[item.id] };
+                        }
+                        return item;
+                    });
+                    // Merge: modified base + deltas from Liveblocks
+                    localImg.history = [...modifiedBase, ...deltaHist];
+                } else {
+                    // CRDT merge: combine local and remote history
+                    const mergedHistory = this._crdtMergeHistory(
+                        localImg.history || [],
+                        deltaHist,
+                        Date.now()
+                    );
+                    localImg.history = mergedHistory;
+                }
+                currentIdxChanged = true;
+                if (this.app.invalidateCache) this.app.invalidateCache();
 
-        if (localImg) {
-            if (usesVersionedDelta) {
-                // Use versioned delta sync
-                currentIdxChanged = this._syncPageWithVersionedDelta(currentPageIdx, localImg, pagesToFetchBase);
-            } else {
-                // Legacy sync (backwards compatible)
-                currentIdxChanged = this._syncPageLegacy(currentPageIdx, localImg, pagesToFetchBase);
+                // SOTA v2: Reinitialize performance manager with updated history
+                if (localImg.history && localImg.history.length > 500 && this.app.sotaPerf) {
+                    this.app.sotaPerf.initialize(localImg.history);
+                }
+
+                // Auto-recalculate infinite canvas bounds from synced strokes
+                if (localImg.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
+                    this.app.recalculateInfiniteCanvasBounds(this.app.state.idx);
+                }
             }
         }
 
         // Background sync all other pages (with null check)
         this.app.state.images.forEach((img, idx) => {
             if (!img) return; // Skip null/undefined pages (gaps)
-            if (idx === currentPageIdx) return; // Already handled
-
-            if (usesVersionedDelta) {
-                this._syncPageWithVersionedDelta(idx, img, pagesToFetchBase);
-            } else {
-                this._syncPageLegacy(idx, img, pagesToFetchBase);
-            }
+            if (idx === this.app.state.idx) return; // Already handled
+            const remote = pagesHistory.get(idx.toString());
+            if (remote) {
+                const deltaHist = remote.toArray();
+
+                // Check if we need to fetch base history first
+                const pageMeta = this.getPageMetadata(idx);
+                const needsBase = (pageMeta?.hasBaseHistory || img.hasBaseHistory) && !img._baseHistory;
+
+                if (needsBase) {
+                    // Queue for base history fetch, use CRDT merge with deltas for now
+                    pagesToFetchBase.push(idx);
+                    // Don't replace - merge to avoid losing local strokes
+                    const mergedHistory = this._crdtMergeHistory(
+                        img.history || [],
+                        deltaHist,
+                        Date.now()
+                    );
+                    img.history = mergedHistory;
+                } else if (img.hasBaseHistory && img._baseHistory) {
+                    // If page has base history, merge it with deltas and apply modifications
+                    // Get modifications from Liveblocks + R2 (if large)
+                    const liveblocksModifications = this.getPageModifications(idx);
+                    const r2Modifications = img._r2Modifications || {};
+                    const modifications = { ...liveblocksModifications, ...r2Modifications };
+
+                    const modifiedBase = img._baseHistory.map(item => {
+                        if (modifications[item.id]) {
+                            return { ...item, ...modifications[item.id] };
+                        }
+                        return item;
+                    });
+                    img.history = [...modifiedBase, ...deltaHist];
+                } else {
+                    // CRDT merge: combine local and remote history
+                    const mergedHistory = this._crdtMergeHistory(
+                        img.history || [],
+                        deltaHist,
+                        Date.now()
+                    );
+                    img.history = mergedHistory;
+                }
 
-            // Auto-recalculate infinite canvas bounds for all infinite pages
-            if (img.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
-                this.app.recalculateInfiniteCanvasBounds(idx);
+                // Auto-recalculate infinite canvas bounds for all infinite pages
+                if (img.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
+                    this.app.recalculateInfiniteCanvasBounds(idx);
+                }
             }
         });
 
-        if (currentIdxChanged) {
-            if (this.app.invalidateCache) this.app.invalidateCache();
-            this.app.render();
-
-            // SOTA v2: Reinitialize performance manager with updated history
-            if (localImg?.history?.length > 500 && this.app.sotaPerf) {
-                this.app.sotaPerf.initialize(localImg.history);
-            }
-
-            // Auto-recalculate infinite canvas bounds from synced strokes
-            if (localImg?.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
-                this.app.recalculateInfiniteCanvasBounds(currentPageIdx);
-            }
-        }
+        if (currentIdxChanged) this.app.render();
 
         // Fetch base history for pages that need it (async, will trigger re-sync)
         if (pagesToFetchBase.length > 0) {
@@ -2293,132 +2285,6 @@ export class LiveSyncClient {
         }
     }
 
-    /**
-     * Sync a page using versioned delta system
-     * R2 stores base history, Liveblocks stores only deltas
-     */
-    _syncPageWithVersionedDelta(pageIdx, localImg, pagesToFetchBase) {
-        const delta = this.getVersionedDelta(pageIdx);
-        if (!delta) return false;
-
-        let changed = false;
-        const pageId = localImg.pageId;
-
-        // Initialize local delta sync state from Liveblocks
-        if (this.app._initPageSyncState) {
-            this.app._initPageSyncState(pageId, null, delta);
-        }
-
-        // Check if we need to fetch R2 base
-        const needsR2Base = delta.r2Version > 0 &&
-                          (!localImg._r2Version || localImg._r2Version < delta.r2Version);
-
-        if (needsR2Base && pageId) {
-            // Queue for R2 fetch
-            pagesToFetchBase.push({ idx: pageIdx, pageId, r2Version: delta.r2Version });
-
-            // Meanwhile, apply deltas to existing history using CRDT merge
-            if (delta.deltas?.length > 0) {
-                const mergedHistory = this._crdtMergeHistory(
-                    localImg.history || [],
-                    delta.deltas,
-                    delta.timestamp
-                );
-                localImg.history = mergedHistory;
-                changed = true;
-            }
-        } else {
-            // We have correct R2 base - reconstruct full history
-            // Start with whatever local history we have that was from R2
-            let baseHistory = localImg.history?.slice(0, delta.r2HistoryCount) || [];
-
-            // Apply modifications
-            if (delta.modifications && Object.keys(delta.modifications).length > 0) {
-                baseHistory = baseHistory.map(item => {
-                    const mod = delta.modifications[item.id];
-                    if (mod) {
-                        return { ...item, ...mod };
-                    }
-                    return item;
-                });
-            }
-
-            // Combine base with deltas
-            const remoteHistory = [...baseHistory, ...(delta.deltas || [])];
-
-            // CRDT merge with any local-only items
-            const mergedHistory = this._crdtMergeHistory(
-                localImg.history || [],
-                remoteHistory,
-                delta.timestamp
-            );
-
-            if (JSON.stringify(mergedHistory) !== JSON.stringify(localImg.history)) {
-                localImg.history = mergedHistory;
-                changed = true;
-            }
-
-            // Track R2 version locally
-            localImg._r2Version = delta.r2Version;
-        }
-
-        return changed;
-    }
-
-    /**
-     * Legacy sync for backwards compatibility
-     * Full history stored in Liveblocks pagesHistory
-     */
-    _syncPageLegacy(pageIdx, localImg, pagesToFetchBase) {
-        const project = this.getProject();
-        const pagesHistory = project.get("pagesHistory");
-        if (!pagesHistory) return false;
-
-        const remote = pagesHistory.get(pageIdx.toString());
-        if (!remote) return false;
-
-        const deltaHist = remote.toArray();
-
-        // Check if we need to fetch base history first
-        const pageMeta = this.getPageMetadata(pageIdx);
-        const needsBase = (pageMeta?.hasBaseHistory || localImg.hasBaseHistory) && !localImg._baseHistory;
-
-        if (needsBase) {
-            // Queue for base history fetch, use CRDT merge with deltas for now
-            pagesToFetchBase.push(pageIdx);
-            const mergedHistory = this._crdtMergeHistory(
-                localImg.history || [],
-                deltaHist,
-                Date.now()
-            );
-            localImg.history = mergedHistory;
-            return true;
-        } else if (localImg.hasBaseHistory && localImg._baseHistory) {
-            // If page has base history, merge it with deltas and apply modifications
-            const liveblocksModifications = this.getPageModifications(pageIdx);
-            const r2Modifications = localImg._r2Modifications || {};
-            const modifications = { ...liveblocksModifications, ...r2Modifications };
-
-            const modifiedBase = localImg._baseHistory.map(item => {
-                if (modifications[item.id]) {
-                    return { ...item, ...modifications[item.id] };
-                }
-                return item;
-            });
-            localImg.history = [...modifiedBase, ...deltaHist];
-            return true;
-        } else {
-            // CRDT merge: combine local and remote history
-            const mergedHistory = this._crdtMergeHistory(
-                localImg.history || [],
-                deltaHist,
-                Date.now()
-            );
-            localImg.history = mergedHistory;
-            return true;
-        }
-    }
-
     /**
      * CRDT-based history merge for multi-user collaboration
      * Implements a Last-Writer-Wins with ID-based merge strategy:
@@ -2516,17 +2382,11 @@ export class LiveSyncClient {
     }
 
     // Fetches base history for multiple pages and re-syncs
-    async _fetchMissingBaseHistories(pageItems) {
-        console.log(`[LiveSync] Fetching base history for ${pageItems.length} pages...`);
+    async _fetchMissingBaseHistories(pageIndices) {
+        console.log(`[LiveSync] Fetching base history for ${pageIndices.length} pages...`);
 
-        for (const pageItem of pageItems) {
-            // Support both old format (just index) and new format (object with pageId and r2Version)
-            if (typeof pageItem === 'object' && pageItem.pageId) {
-                await this._fetchVersionedBaseHistory(pageItem);
-            } else {
-                // Legacy: pageItem is just the page index
-                await this.ensureBaseHistory(pageItem);
-            }
+        for (const pageIdx of pageIndices) {
+            await this.ensureBaseHistory(pageIdx);
         }
 
         // Re-sync history now that base is loaded
@@ -2537,79 +2397,7 @@ export class LiveSyncClient {
         }, 100);
     }
 
-    /**
-     * Fetch versioned base history from R2
-     * Called when we detect a newer R2 version in Liveblocks
-     */
-    async _fetchVersionedBaseHistory(pageInfo) {
-        const { idx, pageId, r2Version } = pageInfo;
-        const localImg = this.app.state.images[idx];
-        if (!localImg || !pageId) return;
-
-        try {
-            const historyUrl = window.Config?.apiUrl(`/api/color_rm/history/${this.app.state.sessionId}/${pageId}`)
-                || `/api/color_rm/history/${this.app.state.sessionId}/${pageId}`;
-
-            const response = await fetch(historyUrl);
-            if (response.ok) {
-                const r2Data = await response.json();
-
-                // R2 response can be array (legacy) or object with version info
-                let history, version, historyCount;
-                if (Array.isArray(r2Data)) {
-                    // Legacy format
-                    history = r2Data;
-                    version = r2Version || 1;
-                    historyCount = history.length;
-                } else {
-                    // Versioned format
-                    history = r2Data.history || [];
-                    version = r2Data.version || r2Version || 1;
-                    historyCount = r2Data.historyCount || history.length;
-                }
-
-                console.log(`[LiveSync] Fetched R2 base v${version}: ${history.length} items for page ${idx}`);
-
-                // Get delta from Liveblocks
-                const delta = this.getVersionedDelta(idx);
-
-                // Apply modifications from delta
-                if (delta?.modifications && Object.keys(delta.modifications).length > 0) {
-                    history = history.map(item => {
-                        const mod = delta.modifications[item.id];
-                        if (mod) {
-                            return { ...item, ...mod };
-                        }
-                        return item;
-                    });
-                }
-
-                // Combine R2 base + Liveblocks deltas + local items
-                const remoteHistory = [...history, ...(delta?.deltas || [])];
-
-                // CRDT merge with local history
-                localImg.history = this._crdtMergeHistory(
-                    localImg.history || [],
-                    remoteHistory,
-                    Date.now()
-                );
-
-                // Track R2 version locally
-                localImg._r2Version = version;
-
-                // Initialize delta sync state
-                if (this.app._initPageSyncState) {
-                    this.app._initPageSyncState(pageId, { version, historyCount }, delta);
-                }
-
-                if (this.app.invalidateCache) this.app.invalidateCache();
-            }
-        } catch (e) {
-            console.error(`[LiveSync] Failed to fetch R2 base for page ${idx}:`, e);
-        }
-    }
-
-    // Fetch and cache base history for a page (called when page is loaded) - LEGACY
+    // Fetch and cache base history for a page (called when page is loaded)
     async ensureBaseHistory(pageIdx) {
         const localImg = this.app.state.images[pageIdx];
         if (!localImg) return;
@@ -3027,7 +2815,7 @@ export class LiveSyncClient {
         const pageMetadata = {};
         for (const page of this.app.state.images) {
             if (page && page.pageId) {
-                const meta = {
+                pageMetadata[page.pageId] = {
                     width: page.width || this.app.state.viewW,
                     height: page.height || this.app.state.viewH,
                     bg: page.bg || '#ffffff',
@@ -3035,20 +2823,6 @@ export class LiveSyncClient {
                     templateType: page.templateType || null,
                     pageIndex: page.pageIndex
                 };
-
-                // Include infinite canvas properties
-                if (page.isInfinite) {
-                    meta.vectorGrid = page.vectorGrid;
-                    meta.bounds = page.bounds;
-                    meta.origin = page.origin;
-                }
-
-                // Include template config
-                if (page.templateType) {
-                    meta.templateConfig = page.templateConfig;
-                }
-
-                pageMetadata[page.pageId] = meta;
             }
         }
 
@@ -3196,248 +2970,4 @@ export class LiveSyncClient {
         console.log('[handlePageStructureChange] Running reconciliation...');
         await this.reconcilePageStructure();
     }
-
-    // =============================================
-    // VERSIONED DELTA SYNC METHODS
-    // =============================================
-    // These methods implement the robust versioned delta sync system:
-    // - R2 stores periodic snapshots (base history) with version tracking
-    // - Liveblocks only stores deltas since last R2 sync
-    // - Keeps Liveblocks data under 1MB even for large histories
-    // =============================================
-
-    /**
-     * Sync versioned delta to Liveblocks
-     * Called by ColorRmStorage.saveCurrentImg() for incremental updates
-     *
-     * @param {number} pageIdx - Page index
-     * @param {object} deltaInfo - Delta information
-     * @param {number} deltaInfo.r2Version - Current R2 version
-     * @param {number} deltaInfo.r2HistoryCount - Items in R2
-     * @param {Array} deltaInfo.deltas - New items since R2 sync
-     * @param {object} deltaInfo.modifications - Changes to R2 base items
-     * @param {number} deltaInfo.timestamp - Sync timestamp
-     */
-    syncVersionedDelta(pageIdx, deltaInfo) {
-        // Beta mode: Use Yjs
-        if (this.useBetaSync) {
-            return this._syncVersionedDeltaYjs(pageIdx, deltaInfo);
-        }
-
-        const project = this.getProject();
-        if (!project || this.isInitializing) return;
-
-        const key = pageIdx.toString();
-
-        // Get or create pagesDelta LiveMap
-        let pagesDelta = project.get("pagesDelta");
-        if (!pagesDelta) {
-            project.set("pagesDelta", new LiveMap());
-            pagesDelta = project.get("pagesDelta");
-        }
-
-        // Store delta info as LiveObject
-        const deltaData = new LiveObject({
-            r2Version: deltaInfo.r2Version,
-            r2HistoryCount: deltaInfo.r2HistoryCount,
-            timestamp: deltaInfo.timestamp,
-            // Store deltas as LiveList for efficient updates
-            deltas: new LiveList(deltaInfo.deltas || []),
-            // Store modifications as nested object
-            modifications: deltaInfo.modifications || {}
-        });
-
-        pagesDelta.set(key, deltaData);
-
-        const deltaCount = deltaInfo.deltas?.length || 0;
-        const modCount = Object.keys(deltaInfo.modifications || {}).length;
-        console.log(`[LiveSync] Synced versioned delta page ${pageIdx}: r2v=${deltaInfo.r2Version}, ${deltaCount} deltas, ${modCount} mods`);
-    }
-
-    /**
-     * Notify that R2 sync completed - clears delta in Liveblocks
-     * Called after successful R2 upload to reset delta state
-     *
-     * @param {number} pageIdx - Page index
-     * @param {object} r2Info - R2 sync info
-     */
-    notifyR2SyncComplete(pageIdx, r2Info) {
-        // Beta mode: Use Yjs
-        if (this.useBetaSync) {
-            return this._notifyR2SyncCompleteYjs(pageIdx, r2Info);
-        }
-
-        const project = this.getProject();
-        if (!project || this.isInitializing) return;
-
-        const key = pageIdx.toString();
-
-        // Update pagesDelta with new R2 version and clear deltas
-        let pagesDelta = project.get("pagesDelta");
-        if (!pagesDelta) {
-            project.set("pagesDelta", new LiveMap());
-            pagesDelta = project.get("pagesDelta");
-        }
-
-        // Reset delta - only store R2 version info
-        pagesDelta.set(key, new LiveObject({
-            r2Version: r2Info.r2Version,
-            r2HistoryCount: r2Info.r2HistoryCount,
-            timestamp: r2Info.timestamp,
-            deltas: new LiveList([]),
-            modifications: {}
-        }));
-
-        // Also update page metadata
-        this.updatePageMetadata(pageIdx, {
-            r2Version: r2Info.r2Version,
-            r2HistoryCount: r2Info.r2HistoryCount,
-            r2SyncTimestamp: r2Info.timestamp
-        });
-
-        console.log(`[LiveSync] R2 sync complete notification: page ${pageIdx}, r2v=${r2Info.r2Version}`);
-    }
-
-    /**
-     * Get versioned delta for a page from Liveblocks
-     * Used when syncing to combine R2 base with Liveblocks deltas
-     *
-     * @param {number} pageIdx - Page index
-     * @returns {object|null} Delta info or null
-     */
-    getVersionedDelta(pageIdx) {
-        // Beta mode: Get from Yjs
-        if (this.useBetaSync) {
-            return this._getVersionedDeltaYjs(pageIdx);
-        }
-
-        const project = this.getProject();
-        if (!project) return null;
-
-        const pagesDelta = project.get("pagesDelta");
-        if (!pagesDelta) return null;
-
-        const key = pageIdx.toString();
-        const delta = pagesDelta.get(key);
-        if (!delta) return null;
-
-        // Convert LiveObject to plain object
-        const deltaObj = delta.toObject ? delta.toObject() : delta;
-        return {
-            r2Version: deltaObj.r2Version || 0,
-            r2HistoryCount: deltaObj.r2HistoryCount || 0,
-            timestamp: deltaObj.timestamp || 0,
-            deltas: deltaObj.deltas?.toArray ? deltaObj.deltas.toArray() : (deltaObj.deltas || []),
-            modifications: deltaObj.modifications || {}
-        };
-    }
-
-    /**
-     * Fetch combined history for a page: R2 base + Liveblocks deltas
-     * Used when loading a page or for new users joining
-     *
-     * @param {number} pageIdx - Page index
-     * @param {string} pageId - Page ID for R2 fetch
-     * @returns {Promise<{history: Array, r2Version: number, r2HistoryCount: number}>}
-     */
-    async fetchCombinedHistory(pageIdx, pageId) {
-        // Get delta info from Liveblocks
-        const delta = this.getVersionedDelta(pageIdx);
-        const r2Version = delta?.r2Version || 0;
-
-        // Fetch R2 base history if version > 0
-        let baseHistory = [];
-        if (r2Version > 0 && pageId) {
-            try {
-                const historyUrl = window.Config?.apiUrl(`/api/color_rm/history/${this.app.state.sessionId}/${pageId}`)
-                    || `/api/color_rm/history/${this.app.state.sessionId}/${pageId}`;
-
-                const response = await fetch(historyUrl);
-                if (response.ok) {
-                    const r2Data = await response.json();
-                    // R2 response could be array or object with history field
-                    baseHistory = Array.isArray(r2Data) ? r2Data : (r2Data.history || []);
-                    console.log(`[LiveSync] Fetched ${baseHistory.length} R2 base items for page ${pageIdx}`);
-                }
-            } catch (e) {
-                console.error('[LiveSync] Failed to fetch R2 base history:', e);
-            }
-        }
-
-        // Apply modifications to base
-        if (delta?.modifications && Object.keys(delta.modifications).length > 0) {
-            baseHistory = baseHistory.map(item => {
-                const mod = delta.modifications[item.id];
-                if (mod) {
-                    return { ...item, ...mod };
-                }
-                return item;
-            });
-        }
-
-        // Combine: base + deltas
-        const combined = [...baseHistory, ...(delta?.deltas || [])];
-
-        return {
-            history: combined,
-            r2Version: r2Version,
-            r2HistoryCount: delta?.r2HistoryCount || 0
-        };
-    }
-
-    // =============================================
-    // YJS VERSIONS OF VERSIONED DELTA SYNC
-    // =============================================
-
-    _syncVersionedDeltaYjs(pageIdx, deltaInfo) {
-        if (!this.yjsRoot) return;
-
-        const key = pageIdx.toString();
-
-        this.yjsDoc.transact(() => {
-            // Ensure pagesDelta map exists
-            if (!this.yjsRoot.pagesDelta) {
-                this.yjsRoot.pagesDelta = new Y.Map();
-            }
-
-            this.yjsRoot.pagesDelta.set(key, {
-                r2Version: deltaInfo.r2Version,
-                r2HistoryCount: deltaInfo.r2HistoryCount,
-                timestamp: deltaInfo.timestamp,
-                deltas: deltaInfo.deltas || [],
-                modifications: deltaInfo.modifications || {}
-            });
-        });
-
-        console.log(`[Yjs] Synced versioned delta page ${pageIdx}`);
-    }
-
-    _notifyR2SyncCompleteYjs(pageIdx, r2Info) {
-        if (!this.yjsRoot) return;
-
-        const key = pageIdx.toString();
-
-        this.yjsDoc.transact(() => {
-            if (!this.yjsRoot.pagesDelta) {
-                this.yjsRoot.pagesDelta = new Y.Map();
-            }
-
-            this.yjsRoot.pagesDelta.set(key, {
-                r2Version: r2Info.r2Version,
-                r2HistoryCount: r2Info.r2HistoryCount,
-                timestamp: r2Info.timestamp,
-                deltas: [],
-                modifications: {}
-            });
-        });
-
-        console.log(`[Yjs] R2 sync complete: page ${pageIdx}, r2v=${r2Info.r2Version}`);
-    }
-
-    _getVersionedDeltaYjs(pageIdx) {
-        if (!this.yjsRoot || !this.yjsRoot.pagesDelta) return null;
-
-        const key = pageIdx.toString();
-        return this.yjsRoot.pagesDelta.get(key) || null;
-    }
 }

public/scripts/modules/ColorRmStorage.js

@@ -1,54 +1,6 @@
 import { fetchWithTimeout, TIMEOUT } from './NetworkUtils.js';
 
-// =============================================
-// VERSIONED DELTA SYNC SYSTEM
-// =============================================
-// R2 stores periodic snapshots (base history)
-// Liveblocks syncs only deltas since last R2 snapshot
-// This keeps Liveblocks under 1MB while supporting large histories
-// =============================================
-
-// Constants for delta sync
-const R2_IDLE_SYNC_DELAY = 1500; // Sync to R2 after 1.5s of inactivity
-const LIVEBLOCKS_MAX_DELTA_SIZE = 200; // Max items in Liveblocks delta before forcing R2 sync
-const R2_SYNC_BATCH_SIZE = 500; // Sync to R2 when history grows by this much
-
 export const ColorRmStorage = {
-    // =============================================
-    // DELTA SYNC STATE (per page)
-    // =============================================
-    // _deltaSyncState[pageId] = {
-    //   r2Version: number,        // Version of history in R2
-    //   r2HistoryCount: number,   // Number of items in R2 snapshot
-    //   lastR2SyncTime: number,   // Timestamp of last R2 sync
-    //   pendingDeltas: [],        // Items added since last R2 sync
-    //   idleTimer: null           // Timer for idle sync
-    // }
-    _deltaSyncState: {},
-
-    /**
-     * Initialize delta sync state for a page
-     */
-    _initDeltaSyncState(pageId) {
-        if (!this._deltaSyncState[pageId]) {
-            this._deltaSyncState[pageId] = {
-                r2Version: 0,
-                r2HistoryCount: 0,
-                lastR2SyncTime: 0,
-                pendingDeltas: [],
-                idleTimer: null
-            };
-        }
-        return this._deltaSyncState[pageId];
-    },
-
-    /**
-     * Get delta sync state for a page (backwards compatible)
-     */
-    _getDeltaSyncState(pageId) {
-        return this._deltaSyncState[pageId] || this._initDeltaSyncState(pageId);
-    },
-
     async dbPut(s, v) {
         return new Promise((resolve, reject) => {
             try {
@@ -148,236 +100,81 @@ export const ColorRmStorage = {
         }
     },
 
-    /**
-     * VERSIONED DELTA SYNC SYSTEM
-     *
-     * Architecture:
-     * - R2 stores periodic snapshots (base history) with version number
-     * - Liveblocks only syncs deltas since last R2 snapshot
-     * - R2 syncs on idle (1500ms) to ensure consistency
-     * - Version tracking: r2Version tracks items synced to R2
-     *
-     * Flow:
-     * 1. On save: calculate deltas (items since r2HistoryCount)
-     * 2. If delta count < LIVEBLOCKS_MAX_DELTA_SIZE: sync to Liveblocks only
-     * 3. Start idle timer (R2_IDLE_SYNC_DELAY) to sync full state to R2
-     * 4. If delta exceeds limit OR idle timer fires: sync to R2, reset deltas
-     * 5. New users: fetch R2 base + Liveblocks deltas, merge
-     */
     async saveCurrentImg(skipRemoteSync = false) {
         // Invalidate cache immediately since history changed in memory
         if (this.invalidateCache) this.invalidateCache();
 
-        if (!this.state.sessionId) return;
-
-        const currentPage = this.state.images[this.state.idx];
-        await this.dbPut('pages', currentPage);
-
-        // Check if sync is enabled
-        if (!this.state.syncEnabled) {
-            console.log('[saveCurrentImg] Sync disabled, skipping remote sync');
-            return;
-        }
-
-        if (skipRemoteSync || !this.liveSync || this.liveSync.isInitializing) {
-            return;
-        }
-
-        const pageId = currentPage.pageId;
-        if (!pageId) {
-            console.warn('[saveCurrentImg] Page has no pageId, skipping sync');
-            return;
-        }
-
-        // Get or initialize delta sync state for this page
-        const syncState = this._getDeltaSyncState(pageId);
-        const history = currentPage.history || [];
-        const historyCount = history.length;
-
-        // Calculate delta: items since last R2 sync
-        const deltaStartIdx = syncState.r2HistoryCount;
-        const deltaItems = history.slice(deltaStartIdx);
-        const deltaCount = deltaItems.length;
-
-        // Also collect modifications to items in R2 base
-        const modifications = {};
-        if (deltaStartIdx > 0) {
-            // Check if any base items were modified
-            for (let i = 0; i < Math.min(deltaStartIdx, history.length); i++) {
-                const item = history[i];
-                if (item && item._modified) {
-                    modifications[item.id] = item;
-                    delete item._modified; // Clear flag after syncing
-                }
-                // Check for deletions
-                if (item && item.deleted && !item._deletionSynced) {
-                    modifications[item.id] = { id: item.id, deleted: true, lastMod: item.lastMod || Date.now() };
-                    item._deletionSynced = true;
-                }
-            }
-        }
-
-        // Decision: Should we force R2 sync?
-        const forceR2Sync = deltaCount > LIVEBLOCKS_MAX_DELTA_SIZE ||
-                           (syncState.r2HistoryCount === 0 && historyCount > LIVEBLOCKS_MAX_DELTA_SIZE);
-
-        if (forceR2Sync) {
-            // Delta too large - sync full history to R2 immediately
-            console.log(`[saveCurrentImg] Delta ${deltaCount} exceeds limit, forcing R2 sync`);
-            this._scheduleR2Sync(pageId, currentPage, true); // immediate=true
-        } else {
-            // Delta is small enough for Liveblocks
-            // Sync delta to Liveblocks
-            this.liveSync.syncVersionedDelta(this.state.idx, {
-                r2Version: syncState.r2Version,
-                r2HistoryCount: syncState.r2HistoryCount,
-                deltas: deltaItems,
-                modifications: modifications,
-                timestamp: Date.now()
-            });
+        if(this.state.sessionId) {
+            const currentPage = this.state.images[this.state.idx];
+            await this.dbPut('pages', currentPage);
 
-            // Schedule idle R2 sync (will reset timer if called again)
-            this._scheduleR2Sync(pageId, currentPage, false);
-        }
-    },
-
-    /**
-     * Schedule R2 sync - debounced with idle timer
-     * @param {string} pageId - Page identifier
-     * @param {object} currentPage - Page data
-     * @param {boolean} immediate - If true, sync immediately without delay
-     */
-    _scheduleR2Sync(pageId, currentPage, immediate = false) {
-        const syncState = this._getDeltaSyncState(pageId);
-
-        // Clear existing timer
-        if (syncState.idleTimer) {
-            clearTimeout(syncState.idleTimer);
-            syncState.idleTimer = null;
-        }
-
-        const doSync = async () => {
-            if (this._r2SyncInProgress?.[pageId]) {
-                console.log(`[R2Sync] Sync already in progress for ${pageId}`);
+            // Check if sync is enabled
+            if (!this.state.syncEnabled) {
+                console.log('[saveCurrentImg] Sync disabled, skipping remote sync');
                 return;
             }
 
-            // Mark sync in progress
-            if (!this._r2SyncInProgress) this._r2SyncInProgress = {};
-            this._r2SyncInProgress[pageId] = true;
-
-            try {
-                const history = currentPage.history || [];
-                const historyCount = history.length;
-
-                // Skip if no history
-                if (historyCount === 0) {
-                    console.log(`[R2Sync] No history to sync for ${pageId}`);
-                    return;
-                }
-
-                // Skip if nothing changed since last R2 sync
-                if (syncState.r2HistoryCount === historyCount) {
-                    console.log(`[R2Sync] No changes since last sync for ${pageId}`);
-                    return;
-                }
-
-                // Upload to R2
-                const historyUrl = window.Config?.apiUrl(`/api/color_rm/history/${this.state.sessionId}/${pageId}`)
-                    || `/api/color_rm/history/${this.state.sessionId}/${pageId}`;
-
-                const newVersion = syncState.r2Version + 1;
-                const payload = {
-                    version: newVersion,
-                    historyCount: historyCount,
-                    history: history,
-                    timestamp: Date.now()
-                };
-
-                console.log(`[R2Sync] Uploading to ${historyUrl}`);
-                console.log(`[R2Sync] Payload: v${newVersion}, ${historyCount} items, ${JSON.stringify(payload).length} bytes`);
-
-                const response = await fetchWithTimeout(historyUrl, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
-                }, TIMEOUT.LONG);
-
-                console.log(`[R2Sync] Response status: ${response.status}`);
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    console.error(`[R2Sync] Upload failed: ${response.status}`, errorText);
-                    throw new Error(`R2 upload failed: ${response.status} - ${errorText}`);
+            if (!skipRemoteSync && this.liveSync && !this.liveSync.isInitializing) {
+                // If page has base history (SVG import), only sync deltas
+                if (currentPage.hasBaseHistory && currentPage._baseHistory) {
+                    // Extract deltas: items not in base history + modified base items
+                    const baseIds = new Set(currentPage._baseHistory.map(item => item.id));
+                    const deltas = [];
+                    const modifications = {};
+
+                    currentPage.history.forEach(item => {
+                        if (!baseIds.has(item.id)) {
+                            // New item (user scribble) - add to deltas
+                            deltas.push(item);
+                        } else {
+                            // Item exists in base - check if modified
+                            const baseItem = currentPage._baseHistory.find(b => b.id === item.id);
+                            if (baseItem && this._isItemModified(baseItem, item)) {
+                                // Store as modification (only changed properties)
+                                modifications[item.id] = item;
+                            }
+                        }
+                    });
+
+                    // Also track deleted base items
+                    currentPage._baseHistory.forEach(baseItem => {
+                        const currentItem = currentPage.history.find(h => h.id === baseItem.id);
+                        if (currentItem && currentItem.deleted && !baseItem.deleted) {
+                            modifications[baseItem.id] = { id: baseItem.id, deleted: true, lastMod: currentItem.lastMod };
+                        }
+                    });
+
+                    // Check if modifications are too large for Liveblocks
+                    const modCount = Object.keys(modifications).length;
+                    const LARGE_MODIFICATION_THRESHOLD = 100;
+
+                    if (modCount > LARGE_MODIFICATION_THRESHOLD) {
+                        // Too many modifications - use R2 instead
+                        console.log(`[saveCurrentImg] ${modCount} modifications exceed threshold, using R2`);
+                        await this._syncLargeModificationsToR2(currentPage, deltas, modifications);
+                    } else {
+                        // Sync deltas and modifications via Liveblocks
+                        this.liveSync.syncPageDeltas(this.state.idx, deltas, modifications);
+                    }
+                } else {
+                    // No base history yet - check if history is too large
+                    const historySize = currentPage.history?.length || 0;
+                    // Use lower threshold for SVG-imported pages (they have base history in R2)
+                    // Regular pages can have more items before triggering R2 upload
+                    const LARGE_HISTORY_THRESHOLD = currentPage.hasBaseHistory ? 400 : 2000;
+
+                    if (historySize > LARGE_HISTORY_THRESHOLD && !this._r2HistoryUploading) {
+                        // Too large for Liveblocks - convert to hybrid approach
+                        // Only trigger once (debounced), subsequent calls will use delta sync
+                        console.log(`[saveCurrentImg] History size ${historySize} exceeds threshold, converting to R2 hybrid`);
+                        this._syncLargeHistoryToR2(currentPage);
+                    } else if (!this._r2HistoryUploading) {
+                        // Sync full history as before
+                        this.liveSync.setHistory(this.state.idx, currentPage.history);
+                    }
+                    // Skip sync if R2 upload is in progress
                 }
-
-                // Update sync state
-                syncState.r2Version = newVersion;
-                syncState.r2HistoryCount = historyCount;
-                syncState.lastR2SyncTime = Date.now();
-                syncState.pendingDeltas = [];
-
-                // Notify Liveblocks of new R2 version (clears delta in Liveblocks)
-                this.liveSync.notifyR2SyncComplete(this.state.idx, {
-                    r2Version: newVersion,
-                    r2HistoryCount: historyCount,
-                    timestamp: syncState.lastR2SyncTime
-                });
-
-                console.log(`[R2Sync] Synced page ${pageId}: v${newVersion}, ${historyCount} items`);
-
-            } catch (e) {
-                console.error(`[R2Sync] Failed for ${pageId}:`, e);
-                // Don't show toast for every failure - will retry on next save
-            } finally {
-                this._r2SyncInProgress[pageId] = false;
             }
-        };
-
-        if (immediate) {
-            doSync();
-        } else {
-            syncState.idleTimer = setTimeout(doSync, R2_IDLE_SYNC_DELAY);
-        }
-    },
-
-    /**
-     * Initialize delta sync state from R2/Liveblocks on page load
-     * Called when loading a page to establish baseline
-     */
-    async _initPageSyncState(pageId, r2Data, liveblocksData) {
-        const syncState = this._getDeltaSyncState(pageId);
-
-        if (r2Data) {
-            syncState.r2Version = r2Data.version || 0;
-            syncState.r2HistoryCount = r2Data.historyCount || r2Data.history?.length || 0;
-            syncState.lastR2SyncTime = r2Data.timestamp || 0;
-        }
-
-        if (liveblocksData) {
-            // Liveblocks has delta info
-            if (liveblocksData.r2Version > syncState.r2Version) {
-                // Liveblocks has newer R2 version info - trust it
-                syncState.r2Version = liveblocksData.r2Version;
-                syncState.r2HistoryCount = liveblocksData.r2HistoryCount || 0;
-            }
-        }
-
-        console.log(`[DeltaSync] Initialized page ${pageId}: r2v=${syncState.r2Version}, count=${syncState.r2HistoryCount}`);
-    },
-
-    /**
-     * Mark an item as modified (for delta tracking)
-     * Call this when modifying existing items (move, resize, delete)
-     */
-    markItemModified(itemId) {
-        const currentPage = this.state.images[this.state.idx];
-        if (!currentPage?.history) return;
-
-        const item = currentPage.history.find(h => h.id === itemId);
-        if (item) {
-            item._modified = true;
-            item.lastMod = Date.now();
         }
     },
 

worker/colorRmAssets.ts

@@ -400,12 +400,10 @@ export async function handleListPages(request: IRequest, env: Env) {
 export async function handleColorRmHistoryUpload(request: IRequest, env: Env) {
     const { roomId, pageId } = request.params
     if (!roomId || !pageId) {
-        console.log(`[HistoryUpload] Missing params: roomId=${roomId}, pageId=${pageId}`)
         return new Response('Missing roomId or pageId', { status: 400 })
     }
 
     if (!request.body) {
-        console.log(`[HistoryUpload] Missing request body for page: ${pageId}`)
         return new Response('Missing request body', { status: 400 })
     }
 
@@ -413,50 +411,22 @@ export async function handleColorRmHistoryUpload(request: IRequest, env: Env) {
 
     try {
         const body = await request.text()
-        console.log(`[HistoryUpload] Received body for page ${pageId}, length: ${body.length}`)
-
+        // Validate it's valid JSON array
         const parsed = JSON.parse(body)
-
-        // Support both legacy (array) and new versioned format (object with history field)
-        let historyArray: any[]
-        let version: number = 1
-        let historyCount: number
-        let storeData: string
-
-        if (Array.isArray(parsed)) {
-            // Legacy format: direct array
-            historyArray = parsed
-            historyCount = parsed.length
-            // Convert to versioned format for storage
-            storeData = JSON.stringify({
-                version: 1,
-                historyCount: historyCount,
-                history: historyArray,
-                timestamp: Date.now()
-            })
-            console.log(`[HistoryUpload] Legacy format: ${historyCount} items`)
-        } else if (parsed && typeof parsed === 'object' && parsed.history) {
-            // New versioned format
-            historyArray = parsed.history
-            version = parsed.version || 1
-            historyCount = parsed.historyCount || historyArray.length
-            storeData = body // Store as-is
-            console.log(`[HistoryUpload] Versioned format: v${version}, ${historyCount} items`)
-        } else {
-            console.log(`[HistoryUpload] Invalid format for page ${pageId}:`, typeof parsed)
-            return new Response('History must be an array or versioned object', { status: 400 })
+        if (!Array.isArray(parsed)) {
+            return new Response('History must be an array', { status: 400 })
         }
 
-        await env.TLDRAW_BUCKET.put(objectKey, storeData, {
+        await env.TLDRAW_BUCKET.put(objectKey, body, {
             httpMetadata: { contentType: 'application/json' }
         })
-        console.log(`[HistoryUpload] Stored v${version} with ${historyCount} items for page: ${pageId}`)
-        return new Response(JSON.stringify({ success: true, version, count: historyCount }), {
+        console.log(`[HistoryUpload] Stored ${parsed.length} items for page: ${pageId}`)
+        return new Response(JSON.stringify({ success: true, count: parsed.length }), {
             status: 200,
             headers: { 'Content-Type': 'application/json' }
         })
     } catch (e: any) {
-        console.error('[HistoryUpload] Error:', e.message, e.stack)
+        console.error('Error uploading page history:', e)
         return new Response(JSON.stringify({ error: e.message }), { status: 500 })
     }
 }
@@ -465,54 +435,29 @@ export async function handleColorRmHistoryUpload(request: IRequest, env: Env) {
 export async function handleColorRmHistoryDownload(request: IRequest, env: Env) {
     const { roomId, pageId } = request.params
     if (!roomId || !pageId) {
-        console.log(`[HistoryDownload] Missing params: roomId=${roomId}, pageId=${pageId}`)
         return new Response('Missing roomId or pageId', { status: 400 })
     }
 
     const objectKey = `color_rm/history/${roomId}/${pageId}`
-    console.log(`[HistoryDownload] Fetching: ${objectKey}`)
 
     try {
         const obj = await env.TLDRAW_BUCKET.get(objectKey)
 
         if (!obj) {
-            // No base history - return empty versioned response
-            console.log(`[HistoryDownload] No history found for page: ${pageId}`)
-            return new Response(JSON.stringify({ version: 0, historyCount: 0, history: [], timestamp: 0 }), {
+            // No base history - return empty array
+            return new Response('[]', {
                 status: 200,
                 headers: { 'Content-Type': 'application/json' }
             })
         }
 
         const data = await obj.text()
-        console.log(`[HistoryDownload] Found history for page ${pageId}, size: ${data.length} bytes`)
-
-        // Check if it's versioned format or legacy array
-        try {
-            const parsed = JSON.parse(data)
-            if (Array.isArray(parsed)) {
-                // Legacy format - convert to versioned for client
-                console.log(`[HistoryDownload] Converting legacy format: ${parsed.length} items`)
-                return new Response(JSON.stringify({
-                    version: 1,
-                    historyCount: parsed.length,
-                    history: parsed,
-                    timestamp: Date.now()
-                }), {
-                    status: 200,
-                    headers: { 'Content-Type': 'application/json' }
-                })
-            }
-        } catch (e) {
-            // Not valid JSON, return as-is
-        }
-
         return new Response(data, {
             status: 200,
             headers: { 'Content-Type': 'application/json' }
         })
     } catch (e: any) {
-        console.error('[HistoryDownload] Error:', e.message, e.stack)
+        console.error('Error downloading page history:', e)
         return new Response(JSON.stringify({ error: e.message }), { status: 500 })
     }
 }