Upload folder using huggingface_hub

.build_counter

@@ -1 +1 @@
-28
+24

public/scripts/LiveSync.js

@@ -1,9 +1,22 @@
 
 import { createClient, LiveObject, LiveMap, LiveList } from 'https://cdn.jsdelivr.net/npm/@liveblocks/client@3.12.1/+esm';
 
+// Yjs imports - lazy loaded only when beta mode is used
+let Y = null;
+let WebsocketProvider = null;
+async function loadYjs() {
+    if (!Y) {
+        Y = await import('https://cdn.jsdelivr.net/npm/yjs@13.6.10/+esm');
+        const ywsModule = await import('https://cdn.jsdelivr.net/npm/y-websocket@2.0.4/+esm');
+        WebsocketProvider = ywsModule.WebsocketProvider;
+        console.log('[LiveSync] Yjs modules loaded');
+    }
+}
+
 export class LiveSyncClient {
     constructor(appInstance) {
         this.app = appInstance;
+        this.useBetaSync = appInstance.config.useBetaSync || false; // Beta mode flag
         this.client = null;
         this.room = null;
         this.userId = localStorage.getItem('color_rm_user_id');
@@ -13,6 +26,11 @@ export class LiveSyncClient {
         this.isInitializing = true;
         this.root = null;
 
+        // Yjs-specific (only used when useBetaSync=true)
+        this.yjsDoc = null;
+        this.yjsProvider = null;
+        this.yjsRoot = null;
+
         // Track recent local page changes to prevent sync conflicts
         this.lastLocalPageChange = 0;
         this.PAGE_CHANGE_GRACE_PERIOD = 500; // 500ms grace period for fluid sync
@@ -45,6 +63,11 @@ export class LiveSyncClient {
         this.ownerId = ownerId;
         this.projectId = projectId;
 
+        // Beta mode: Use Yjs instead of Liveblocks
+        if (this.useBetaSync) {
+            return this._initYjs(ownerId, projectId);
+        }
+
         const roomId = `room_${ownerId}`;
 
         // Update URL only if this is the main app (hacky check? or let the app handle it)
@@ -2137,111 +2160,128 @@ export class LiveSyncClient {
         if (!project || this.isInitializing) return;
 
         const pagesHistory = project.get("pagesHistory");
-        const pagesR2Keys = project.get("pagesR2Keys");
         let currentIdxChanged = false;
-        const pagesToFetchFromR2 = [];
-
-        // Helper to sync a single page
-        const syncPage = (pageIdx, localImg) => {
-            if (!localImg) return false;
-
-            // Check if this page uses R2 storage
-            const r2Info = pagesR2Keys?.get(pageIdx.toString());
-            if (r2Info) {
-                const r2Data = r2Info.toObject ? r2Info.toObject() : r2Info;
-                // Check if we need to fetch from R2
-                if (!localImg._r2Fetched || localImg._r2Timestamp < r2Data.timestamp) {
-                    pagesToFetchFromR2.push({ idx: pageIdx, pageId: r2Data.r2Key, timestamp: r2Data.timestamp });
-                }
-                return false; // Will be updated after R2 fetch
-            }
-
-            // Normal Liveblocks sync
-            const remote = pagesHistory?.get(pageIdx.toString());
-            if (remote) {
-                const remoteHist = remote.toArray();
-                if (remoteHist.length > 0) {
+        const pagesToFetchBase = [];
+
+        // Priority: Update current page immediately
+        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 || [],
-                        remoteHist,
+                        deltaHist,
                         Date.now()
                     );
                     localImg.history = mergedHistory;
-                    return true;
                 }
-            }
-            return false;
-        };
-
-        // Sync current page first (priority)
-        const currentImg = this.app.state.images[this.app.state.idx];
-        if (currentImg) {
-            currentIdxChanged = syncPage(this.app.state.idx, currentImg);
-
-            if (currentIdxChanged) {
+                currentIdxChanged = true;
                 if (this.app.invalidateCache) this.app.invalidateCache();
 
                 // SOTA v2: Reinitialize performance manager with updated history
-                if (currentImg.history?.length > 500 && this.app.sotaPerf) {
-                    this.app.sotaPerf.initialize(currentImg.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 (currentImg.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
+                if (localImg.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
                     this.app.recalculateInfiniteCanvasBounds(this.app.state.idx);
                 }
             }
         }
 
-        // Background sync all other pages
+        // Background sync all other pages (with null check)
         this.app.state.images.forEach((img, idx) => {
-            if (!img) return;
+            if (!img) return; // Skip null/undefined pages (gaps)
             if (idx === this.app.state.idx) return; // Already handled
-            syncPage(idx, img);
+            const remote = pagesHistory.get(idx.toString());
+            if (remote) {
+                const deltaHist = remote.toArray();
 
-            if (img.isInfinite && this.app.recalculateInfiniteCanvasBounds) {
-                this.app.recalculateInfiniteCanvasBounds(idx);
+                // 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);
+                }
             }
         });
 
         if (currentIdxChanged) this.app.render();
 
-        // Fetch from R2 for pages that need it
-        if (pagesToFetchFromR2.length > 0) {
-            this._fetchHistoriesFromR2(pagesToFetchFromR2);
-        }
-    }
-
-    /**
-     * Fetch histories from R2 for multiple pages
-     */
-    async _fetchHistoriesFromR2(pageInfos) {
-        console.log(`[LiveSync] Fetching history from R2 for ${pageInfos.length} pages...`);
-
-        for (const { idx, pageId, timestamp } of pageInfos) {
-            const localImg = this.app.state.images[idx];
-            if (!localImg) continue;
-
-            const history = await this.fetchHistoryFromR2(pageId);
-            if (history.length > 0) {
-                // CRDT merge with local
-                localImg.history = this._crdtMergeHistory(
-                    localImg.history || [],
-                    history,
-                    Date.now()
-                );
-                localImg._r2Fetched = true;
-                localImg._r2Timestamp = timestamp;
-
-                console.log(`[LiveSync] Applied R2 history for page ${idx}: ${history.length} items`);
-
-                // Render if current page
-                if (idx === this.app.state.idx) {
-                    if (this.app.invalidateCache) this.app.invalidateCache();
-                    this.app.render();
-                }
-            }
+        // Fetch base history for pages that need it (async, will trigger re-sync)
+        if (pagesToFetchBase.length > 0) {
+            this._fetchMissingBaseHistories(pagesToFetchBase);
         }
     }
 
@@ -2457,90 +2497,6 @@ export class LiveSyncClient {
         if (!project) return;
         const pagesHistory = project.get("pagesHistory");
         pagesHistory.set(pageIdx.toString(), new LiveList(history || []));
-
-        // Clear R2 key if we're setting inline history
-        const pagesR2Keys = project.get("pagesR2Keys");
-        if (pagesR2Keys && pagesR2Keys.has(pageIdx.toString())) {
-            pagesR2Keys.delete(pageIdx.toString());
-        }
-    }
-
-    /**
-     * Set R2 key for a page's history (for large histories > 500 items)
-     * Instead of storing history in Liveblocks, store just the R2 reference
-     */
-    setHistoryR2Key(pageIdx, r2Info) {
-        // Beta mode: Not supported yet
-        if (this.useBetaSync) {
-            console.warn('[setHistoryR2Key] Not supported in beta mode');
-            return;
-        }
-
-        const project = this.getProject();
-        if (!project) return;
-
-        const key = pageIdx.toString();
-
-        // Store R2 key in a separate LiveMap
-        let pagesR2Keys = project.get("pagesR2Keys");
-        if (!pagesR2Keys) {
-            project.set("pagesR2Keys", new LiveMap());
-            pagesR2Keys = project.get("pagesR2Keys");
-        }
-
-        pagesR2Keys.set(key, new LiveObject({
-            r2Key: r2Info.r2Key,
-            count: r2Info.count,
-            timestamp: r2Info.timestamp
-        }));
-
-        // Clear inline history since we're using R2
-        const pagesHistory = project.get("pagesHistory");
-        if (pagesHistory.has(key)) {
-            pagesHistory.set(key, new LiveList([]));
-        }
-
-        console.log(`[LiveSync] Set R2 key for page ${pageIdx}: ${r2Info.r2Key} (${r2Info.count} items)`);
-    }
-
-    /**
-     * Get R2 key for a page (if history is stored in R2)
-     */
-    getHistoryR2Key(pageIdx) {
-        if (this.useBetaSync) return null;
-
-        const project = this.getProject();
-        if (!project) return null;
-
-        const pagesR2Keys = project.get("pagesR2Keys");
-        if (!pagesR2Keys) return null;
-
-        const r2Info = pagesR2Keys.get(pageIdx.toString());
-        return r2Info ? r2Info.toObject() : null;
-    }
-
-    /**
-     * Fetch history from R2 for a page
-     */
-    async fetchHistoryFromR2(pageId) {
-        if (!this.app.state.sessionId || !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}`;
-
-            console.log(`[LiveSync] Fetching history from R2: ${pageId}`);
-            const response = await fetch(historyUrl);
-
-            if (response.ok) {
-                const history = await response.json();
-                console.log(`[LiveSync] Fetched ${history.length} items from R2 for page ${pageId}`);
-                return history;
-            }
-        } catch (e) {
-            console.error('[LiveSync] Failed to fetch history from R2:', e);
-        }
-        return [];
     }
 
     /**

public/scripts/modules/ColorRmInput.js

@@ -107,16 +107,12 @@ export const ColorRmInput = {
             // Undo Creation: Mark items as deleted
             // Save 'create' action to redo stack (Redo will un-delete)
             img.redoStack.push(action);
-
+            
             action.ids.forEach(id => {
                 const item = img.history.find(i => i.id === id);
                 if (item) {
                     item.deleted = true;
                     item.lastMod = Date.now();
-                    // Update SOTA spatial index
-                    if (this.sotaPerf) {
-                        this.sotaPerf.deleteStroke(item);
-                    }
                 }
             });
         } else if (action.type === 'modify') {
@@ -167,16 +163,12 @@ export const ColorRmInput = {
         if (action.type === 'create') {
             // Redo Creation: Mark items as NOT deleted
             img.undoStack.push(action);
-
+            
             action.ids.forEach(id => {
                 const item = img.history.find(i => i.id === id);
                 if (item) {
                     item.deleted = false;
                     item.lastMod = Date.now();
-                    // Update SOTA spatial index - re-add the stroke
-                    if (this.sotaPerf) {
-                        this.sotaPerf.addStroke(item);
-                    }
                 }
             });
         } else if (action.type === 'modify') {
@@ -297,10 +289,6 @@ export const ColorRmInput = {
             if (item) {
                 item.deleted = true;
                 item.lastMod = Date.now();
-                // Update SOTA spatial index for deleted item
-                if (this.sotaPerf) {
-                    this.sotaPerf.deleteStroke(item);
-                }
             }
         });
         this.state.selection = [];
@@ -326,10 +314,6 @@ export const ColorRmInput = {
                 else { item.x+=20; item.y+=20; }
             }
             img.history.push(item);
-            // Update SOTA spatial index for copied item
-            if (this.sotaPerf) {
-                this.sotaPerf.addStroke(item);
-            }
             newIds.push(img.history.length-1);
         });
         if(cut) this.deleteSelected();
@@ -1328,23 +1312,19 @@ export const ColorRmInput = {
                         if (hit) {
                             // 1. Initialize array if this is the first item hit in this gesture
                             if (!this._eraserSessionState) this._eraserSessionState = [];
-
+                            
                             // 2. Snapshot the state BEFORE deleting (if we haven't already for this stroke)
                             if (!this._eraserSessionState.some(item => item.idx === i)) {
                                 this._eraserSessionState.push({
                                     idx: i,
                                     // JSON.stringify creates a deep copy of the object state (including pts, color, x, y, deleted=false)
-                                    state: JSON.parse(JSON.stringify(st))
+                                    state: JSON.parse(JSON.stringify(st)) 
                                 });
                             }
 
                             // 3. Apply the deletion (mutation)
                             st.deleted = true;
                             st.lastMod = Date.now();
-                            // Update SOTA spatial index
-                            if (this.sotaPerf) {
-                                this.sotaPerf.deleteStroke(st);
-                            }
                             changed = true;
                         }
                     }
@@ -1664,10 +1644,6 @@ export const ColorRmInput = {
 
                     this.state.images[this.state.idx].history.push(newShape);
                     this.recordCreation(newShape);
-                    // Update SOTA spatial index for new shape
-                    if (this.sotaPerf) {
-                        this.sotaPerf.addStroke(newShape);
-                    }
                     this.saveCurrentImg();
                     this.state.selection=[this.state.images[this.state.idx].history.length-1];
                     this.setTool('lasso');
@@ -1701,10 +1677,6 @@ export const ColorRmInput = {
                         this._clearRedoStack(); // Clear redo when adding new item
                         this.state.images[this.state.idx].history.push(shapeObj);
                         this.recordCreation(shapeObj);
-                        // Update SOTA spatial index
-                        if (this.sotaPerf) {
-                            this.sotaPerf.addStroke(shapeObj);
-                        }
                         this.saveCurrentImg(true);
                         if (this.liveSync && !this.liveSync.isInitializing) {
                             this.liveSync.addStroke(this.state.idx, shapeObj);
@@ -1720,10 +1692,6 @@ export const ColorRmInput = {
                 const newStroke = {id: Date.now() + Math.random(), lastMod: Date.now(), tool:this.state.tool, pts:this.currentStroke, color:this.state.penColor, size:this.state.tool==='eraser'?this.state.eraserSize:this.state.penSize, deleted: false};
                 this.state.images[this.state.idx].history.push(newStroke);
                 this.recordCreation(newStroke);
-                // Update SOTA spatial index for new stroke
-                if (this.sotaPerf) {
-                    this.sotaPerf.addStroke(newStroke);
-                }
                 this.saveCurrentImg(true);
                 if (this.liveSync && !this.liveSync.isInitializing) {
                     this.liveSync.addStroke(this.state.idx, newStroke);
@@ -1797,10 +1765,6 @@ export const ColorRmInput = {
                         const st = img.history[i];
                         st.deleted = true;
                         st.lastMod = Date.now();
-                        // Update SOTA spatial index
-                        if (this.sotaPerf) {
-                            this.sotaPerf.deleteStroke(st);
-                        }
                     });
 
                     this.invalidateCache();
@@ -2789,14 +2753,10 @@ export const ColorRmInput = {
             existingItem.w = textWidth;
             existingItem.h = textHeight;
             existingItem.lastMod = Date.now();
-            // Update SOTA spatial index for modified text
-            if (this.sotaPerf) {
-                this.sotaPerf.modifyStroke(existingItem, { w: textWidth, h: textHeight });
-            }
         } else {
             // Add new text
             this._clearRedoStack(); // Clear redo when adding new item
-            const newTextItem = {
+            img.history.push({
                 id: Date.now() + Math.random(),
                 lastMod: Date.now(),
                 tool: 'text',
@@ -2808,12 +2768,7 @@ export const ColorRmInput = {
                 rotation: 0,
                 w: textWidth,
                 h: textHeight
-            };
-            img.history.push(newTextItem);
-            // Update SOTA spatial index for new text
-            if (this.sotaPerf) {
-                this.sotaPerf.addStroke(newTextItem);
-            }
+            });
             // Select the new text
             this.state.selection = [img.history.length - 1];
         }
@@ -2918,19 +2873,11 @@ export const ColorRmInput = {
         sortedSelection.forEach(i => {
             history[i].deleted = true;
             history[i].lastMod = Date.now();
-            // Update SOTA spatial index for deleted item
-            if (this.sotaPerf) {
-                this.sotaPerf.deleteStroke(history[i]);
-            }
         });
 
         // Add group to history
         this._clearRedoStack(); // Clear redo when adding new item
         history.push(groupObj);
-        // Update SOTA spatial index for new group
-        if (this.sotaPerf) {
-            this.sotaPerf.addStroke(groupObj);
-        }
 
         // Select the new group
         this.state.selection = [history.length - 1];
@@ -2996,20 +2943,12 @@ export const ColorRmInput = {
             }
 
             history.push(newItem);
-            // Update SOTA spatial index for ungrouped item
-            if (this.sotaPerf) {
-                this.sotaPerf.addStroke(newItem);
-            }
             newIndices.push(history.length - 1);
         });
 
         // Mark group as deleted
         groupObj.deleted = true;
         groupObj.lastMod = Date.now();
-        // Update SOTA spatial index for deleted group
-        if (this.sotaPerf) {
-            this.sotaPerf.deleteStroke(groupObj);
-        }
 
         // Select the ungrouped items
         this.state.selection = newIndices;
@@ -3479,10 +3418,6 @@ export const ColorRmInput = {
             }
 
             img.history.push(newItem);
-            // Update SOTA spatial index for pasted item
-            if (this.sotaPerf) {
-                this.sotaPerf.addStroke(newItem);
-            }
             newIndices.push(img.history.length - 1);
 
             // Sync with liveblocks

public/scripts/modules/ColorRmRenderer.js

@@ -439,8 +439,7 @@ export const ColorRmRenderer = {
             const activeHistory = currentImg?.history?.filter(st => !st.deleted) || [];
 
             // SOTA v2: Use optimized rendering for large history (8000+ items)
-            // TEMPORARILY DISABLED: Force render all strokes to debug visibility issues
-            const useSOTAv2Rendering = false; // this.sotaPerf && activeHistory.length > 500;
+            const useSOTAv2Rendering = this.sotaPerf && activeHistory.length > 500;
 
             // HYBRID RENDERING: Use cache when idle, render live when interacting
             const isInteracting = this.isDragging || this.state.selection.length > 0;

public/scripts/modules/ColorRmSOTAPerformance.js

@@ -1064,8 +1064,8 @@ export class SOTAPerformanceManager {
             this.incrementalSync.addStroke(stroke);
         }
 
-        // Update spatial index (insert even if index is empty)
-        if (this.config.useSpatialIndex && this.spatialIndex) {
+        // Update spatial index
+        if (this.config.useSpatialIndex && this.spatialIndex.itemCount > 0) {
             const bounds = this._getItemBounds(stroke);
             this.spatialIndex.insert(stroke, bounds);
         }

public/scripts/modules/ColorRmStorage.js

@@ -104,87 +104,216 @@ export const ColorRmStorage = {
         // Invalidate cache immediately since history changed in memory
         if (this.invalidateCache) this.invalidateCache();
 
-        if (!this.state.sessionId) return;
+        if(this.state.sessionId) {
+            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;
+            }
 
-        const currentPage = this.state.images[this.state.idx];
-        if (!currentPage) return;
+            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
+                }
+            }
+        }
+    },
 
-        await this.dbPut('pages', currentPage);
+    /**
+     * Sync large modifications to R2 instead of Liveblocks
+     * Used when modification count exceeds threshold
+     * Debounced to avoid too many uploads
+     */
+    async _syncLargeModificationsToR2(currentPage, deltas, modifications) {
+        const pageId = currentPage.pageId;
+        if (!pageId || !this.state.sessionId) return;
 
-        // Check if sync is enabled
-        if (!this.state.syncEnabled) {
-            return;
+        // Debounce R2 uploads (500ms)
+        if (this._r2ModUploadTimeout) {
+            clearTimeout(this._r2ModUploadTimeout);
         }
 
-        if (skipRemoteSync || !this.liveSync || this.liveSync.isInitializing) {
-            return;
-        }
+        // Store pending data
+        this._pendingR2Mods = { currentPage, deltas, modifications };
 
-        const pageId = currentPage.pageId;
-        if (!pageId) {
-            console.warn('[saveCurrentImg] Page has no pageId, skipping sync');
-            return;
-        }
+        this._r2ModUploadTimeout = setTimeout(async () => {
+            const { currentPage: page, deltas: d, modifications: m } = this._pendingR2Mods;
+            this._pendingR2Mods = null;
 
-        const history = currentPage.history || [];
-        const historySize = history.length;
+            try {
+                // Upload modifications to R2
+                const modsUrl = window.Config?.apiUrl(`/api/color_rm/modifications/${this.state.sessionId}/${page.pageId}`)
+                    || `/api/color_rm/modifications/${this.state.sessionId}/${page.pageId}`;
 
-        // Simple threshold: 500 items
-        const R2_THRESHOLD = 500;
+                const response = await fetchWithTimeout(modsUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        modifications: m,
+                        timestamp: Date.now()
+                    })
+                }, TIMEOUT.MEDIUM);
 
-        if (historySize > R2_THRESHOLD) {
-            // Large history - upload to R2, send key via Liveblocks
-            this._uploadHistoryToR2(pageId, history);
-        } else {
-            // Small history - send directly via Liveblocks
-            this.liveSync.setHistory(this.state.idx, history);
-        }
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${response.status}`);
+                }
+
+                // Only sync deltas via Liveblocks (usually small)
+                // Also notify that modifications are in R2
+                this.liveSync.syncPageDeltas(this.state.idx, d, {});
+                this.liveSync.updatePageMetadata(this.state.idx, {
+                    hasR2Modifications: true,
+                    r2ModTimestamp: Date.now()
+                });
+
+                console.log(`[_syncLargeModificationsToR2] Uploaded ${Object.keys(m).length} modifications to R2`);
+            } catch (e) {
+                console.error('[_syncLargeModificationsToR2] Failed:', e);
+                this.ui.showToast('Sync failed - modifications too large');
+            }
+        }, 500);
     },
 
     /**
-     * Upload history to R2 and notify Liveblocks with the R2 key
-     * Simple approach: full history in R2, Liveblocks just has the reference
+     * Sync large history to R2 with only a reference in Liveblocks
+     * Used for pages with very many strokes
+     * Debounced to avoid excessive uploads
      */
-    async _uploadHistoryToR2(pageId, history) {
-        // Debounce to avoid spamming R2
-        if (this._r2UploadTimers?.[pageId]) {
-            clearTimeout(this._r2UploadTimers[pageId]);
+    async _syncLargeHistoryToR2(currentPage) {
+        const pageId = currentPage.pageId;
+        if (!pageId || !this.state.sessionId) return;
+
+        // Prevent duplicate uploads
+        if (this._r2HistoryUploading) {
+            console.log('[_syncLargeHistoryToR2] Upload already in progress, skipping');
+            return;
         }
-        if (!this._r2UploadTimers) this._r2UploadTimers = {};
 
-        this._r2UploadTimers[pageId] = setTimeout(async () => {
+        // Debounce R2 history uploads (1s)
+        if (this._r2HistoryUploadTimeout) {
+            clearTimeout(this._r2HistoryUploadTimeout);
+        }
+
+        this._r2HistoryUploadTimeout = setTimeout(async () => {
+            // Mark as uploading to prevent duplicates
+            this._r2HistoryUploading = true;
+
             try {
+                // Upload full history to R2
                 const historyUrl = window.Config?.apiUrl(`/api/color_rm/history/${this.state.sessionId}/${pageId}`)
                     || `/api/color_rm/history/${this.state.sessionId}/${pageId}`;
 
-                console.log(`[R2Upload] Uploading ${history.length} items for page ${pageId}`);
-
                 const response = await fetchWithTimeout(historyUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(history)
+                    body: JSON.stringify(currentPage.history)
                 }, TIMEOUT.LONG);
 
                 if (!response.ok) {
-                    throw new Error(`R2 upload failed: ${response.status}`);
+                    throw new Error(`Upload failed: ${response.status}`);
                 }
 
-                const result = await response.json();
-                console.log(`[R2Upload] Success: ${result.count} items stored`);
+                // Mark page as having base history in R2
+                currentPage.hasBaseHistory = true;
+                currentPage._baseHistory = [...currentPage.history];
 
-                // Tell Liveblocks to use R2 key instead of inline history
-                this.liveSync.setHistoryR2Key(this.state.idx, {
-                    r2Key: pageId,
-                    count: history.length,
-                    timestamp: Date.now()
+                // Notify via Liveblocks (metadata only)
+                this.liveSync.setHistory(this.state.idx, []); // Clear Liveblocks history
+                this.liveSync.updatePageMetadata(this.state.idx, {
+                    hasBaseHistory: true,
+                    baseHistoryCount: currentPage.history.length,
+                    r2SyncTimestamp: Date.now()
                 });
 
+                console.log(`[_syncLargeHistoryToR2] Uploaded ${currentPage.history.length} items to R2`);
             } catch (e) {
-                console.error('[R2Upload] Failed:', e);
-                // Fallback: try to send via Liveblocks anyway (may fail for large data)
-                this.liveSync.setHistory(this.state.idx, history);
+                console.error('[_syncLargeHistoryToR2] Failed:', e);
+                this.ui.showToast('Sync failed - history too large');
+            } finally {
+                this._r2HistoryUploading = false;
+            }
+        }, 1000);
+    },
+
+    // Check if an item has been modified from its base version
+    _isItemModified(baseItem, currentItem) {
+        // Check key properties that indicate modification
+        if (currentItem.deleted !== baseItem.deleted) return true;
+        if (currentItem.x !== baseItem.x || currentItem.y !== baseItem.y) return true;
+        if (currentItem.w !== baseItem.w || currentItem.h !== baseItem.h) return true;
+        if (currentItem.rotation !== baseItem.rotation) return true;
+
+        // For pen strokes, check if points changed
+        if (currentItem.pts && baseItem.pts) {
+            if (currentItem.pts.length !== baseItem.pts.length) return true;
+            // Quick check: compare first and last points
+            if (currentItem.pts.length > 0) {
+                const first = currentItem.pts[0];
+                const basefirst = baseItem.pts[0];
+                if (first.x !== basefirst.x || first.y !== basefirst.y) return true;
             }
-        }, 500); // 500ms debounce
+        }
+
+        return false;
     },
 
     // Debounced save - call this instead of saveCurrentImg for frequent updates