Upload folder using huggingface_hub

color_rm_performance_plan.md

@@ -0,0 +1,369 @@
+# ColorRM Performance Optimization Plan
+
+## Problem Summary
+The ColorRM app becomes unstable on Android (Capacitor) when:
+- **~500 history items** are present in a session
+- **~90 on-page items** (box/clipboard items)
+
+## Root Cause Analysis
+
+### 1. **Render Loop Bottleneck** (`ColorRmApp.js:316-325`)
+```javascript
+currentImg.history.forEach((st, idx) => {
+    if (st.deleted) return;
+    this.renderObject(ctx, st, dx, dy);
+});
+```
+- **Issue**: Every `render()` call iterates through ALL history items
+- **Impact**: At 500 items, each frame processes 500 objects
+- **Frequency**: Called on every mouse move, touch event, state change
+
+### 2. **Soft Deletion Never Cleans Up** (`ColorRmApp.js:779, 1168`)
+```javascript
+st.deleted = true;
+```
+- **Issue**: Deleted items remain in the array forever
+- **Impact**: Array grows unbounded, iteration cost increases
+- **Example**: After erasing 400 strokes, still iterating through 500 items
+
+### 3. **Full History Sync on Every Change** (`LiveSync.js:309-314`)
+```javascript
+setHistory(pageIdx, history) {
+    pagesHistory.set(pageIdx.toString(), new LiveList(history || []));
+}
+```
+- **Issue**: Creates NEW LiveList with full array on every stroke
+- **Impact**: Massive memory churn, GC pressure
+
+### 4. **No Rendering Cache/Layers**
+- **Issue**: No separation between static content and active drawing
+- **Impact**: Redrawing 500+ strokes when only painting 1 new stroke
+
+### 5. **Box Items Stored as Base64 DataURLs** (`ColorRmApp.js:1499`)
+```javascript
+this.state.clipboardBox.push({
+    src: tmp.toDataURL(),  // Full base64 string
+    ...
+});
+```
+- **Issue**: 90 full-page screenshots as base64 strings
+- **Impact**: Each item can be 1-5MB, totaling 100-450MB in memory
+
+### 6. **IndexedDB Write Blocking** (`ColorRmApp.js:1212`)
+```javascript
+await this.dbPut('pages', this.state.images[this.state.idx]);
+```
+- **Issue**: Writes full page object (with 500 history items) to DB
+- **Impact**: UI freezes during write operations
+
+### 7. **Thumbnail Blob URL Leaks** (`ColorRmApp.js:1346`)
+```javascript
+const im = new Image(); im.src = URL.createObjectURL(img.blob);
+```
+- **Issue**: Blob URLs created but never revoked
+- **Impact**: Memory leak proportional to navigation frequency
+
+---
+
+## Implementation Plan
+
+### Phase 1: Immediate Performance Fixes (Critical)
+
+#### 1.1 Add Offscreen Canvas Caching
+**Files**: `ColorRmApp.js`
+**Goal**: Cache committed strokes to avoid re-rendering
+
+```javascript
+// Add to state
+this.cache = {
+    currentImg: null,
+    lab: null,
+    committedCanvas: null,  // NEW: cached static strokes
+    dirtyRange: { start: 0, end: 0 }  // Track what needs re-caching
+};
+```
+
+**Implementation**:
+- Create offscreen canvas that holds all committed strokes
+- Only re-render to offscreen when history changes
+- Main `render()` just draws: background → cached canvas → active stroke
+
+#### 1.2 Implement History Compaction
+**Files**: `ColorRmApp.js`
+**Goal**: Remove soft-deleted items periodically
+
+```javascript
+compactHistory() {
+    const img = this.state.images[this.state.idx];
+    if (!img.history) return;
+
+    const before = img.history.length;
+    img.history = img.history.filter(st => !st.deleted);
+
+    // Update selection indices
+    this.state.selection = [];
+
+    if (before !== img.history.length) {
+        this.invalidateCache();
+        this.saveCurrentImg();
+    }
+}
+```
+
+**Trigger Points**:
+- On page change
+- Every 50 strokes
+- On export
+- Manual button in debug panel
+
+#### 1.3 Throttle Render Calls
+**Files**: `ColorRmApp.js`
+**Goal**: Limit render frequency to 60fps max
+
+```javascript
+requestRender() {
+    if (this.renderPending) return;
+    this.renderPending = true;
+    requestAnimationFrame(() => {
+        this.render();
+        this.renderPending = false;
+    });
+}
+```
+
+#### 1.4 Debounce IndexedDB Writes
+**Files**: `ColorRmApp.js`
+**Goal**: Batch writes instead of per-stroke
+
+```javascript
+scheduleSave() {
+    if (this.saveTimeout) clearTimeout(this.saveTimeout);
+    this.saveTimeout = setTimeout(() => {
+        this.saveCurrentImg();
+    }, 500);  // Save 500ms after last change
+}
+```
+
+---
+
+### Phase 2: Memory Optimization
+
+#### 2.1 Convert Box Items to Blobs
+**Files**: `ColorRmApp.js`
+**Goal**: Store box items as Blobs instead of base64
+
+**Before**:
+```javascript
+this.state.clipboardBox.push({ src: tmp.toDataURL(), ... });
+```
+
+**After**:
+```javascript
+tmp.toBlob(blob => {
+    this.state.clipboardBox.push({
+        blob: blob,  // ~10x smaller in memory
+        url: null,   // Lazy-create URL when rendering
+        ...
+    });
+}, 'image/jpeg', 0.8);
+```
+
+**Rendering Update**:
+```javascript
+renderBox() {
+    item.url = item.url || URL.createObjectURL(item.blob);
+    // Use item.url for display
+}
+```
+
+#### 2.2 Implement Blob URL Cleanup
+**Files**: `ColorRmApp.js`
+**Goal**: Revoke blob URLs when not visible
+
+```javascript
+renderPageSidebar() {
+    // Revoke old URLs
+    if (this.pageThumbnailUrls) {
+        this.pageThumbnailUrls.forEach(url => URL.revokeObjectURL(url));
+    }
+    this.pageThumbnailUrls = [];
+
+    // ... create new URLs and track them
+    const url = URL.createObjectURL(img.blob);
+    this.pageThumbnailUrls.push(url);
+}
+```
+
+#### 2.3 Lazy-Load Page History
+**Files**: `ColorRmApp.js`, `LiveSync.js`
+**Goal**: Only load current page's history into memory
+
+```javascript
+async loadPage(i) {
+    // Clear previous page's non-essential data to free memory
+    if (this.state.idx !== i && this.state.images[this.state.idx]) {
+        // Keep history but clear any cached rendering
+        delete this.state.images[this.state.idx]._cachedRender;
+    }
+    // ... rest of loadPage
+}
+```
+
+---
+
+### Phase 3: LiveSync Optimization
+
+#### 3.1 Incremental History Updates
+**Files**: `LiveSync.js`
+**Goal**: Push individual strokes instead of full history
+
+**Current** (expensive):
+```javascript
+setHistory(pageIdx, history) {
+    pagesHistory.set(pageIdx.toString(), new LiveList(history || []));
+}
+```
+
+**Optimized** (incremental):
+```javascript
+// For single stroke addition (already exists but underused)
+addStroke(pageIdx, stroke) {
+    // ... push single item
+}
+
+// For bulk updates (compaction, delete)
+syncHistoryDeltas(pageIdx, operations) {
+    // Only sync the changes, not full array
+}
+```
+
+#### 3.2 Throttle LiveSync Updates
+**Files**: `LiveSync.js`
+**Goal**: Batch presence/cursor updates
+
+```javascript
+updateCursor(pt) {
+    this.pendingCursor = pt;
+    if (!this.cursorThrottle) {
+        this.cursorThrottle = setTimeout(() => {
+            this.room.updatePresence({ cursor: this.pendingCursor });
+            this.cursorThrottle = null;
+        }, 50);  // 20fps max for cursor updates
+    }
+}
+```
+
+---
+
+### Phase 4: Android-Specific Optimizations
+
+#### 4.1 Reduce Touch Event Frequency
+**Files**: `ColorRmApp.js`
+**Goal**: Skip intermediate points during fast drawing
+
+```javascript
+const onPointerMove = e => {
+    // Skip if too soon since last point (for touch devices)
+    const now = performance.now();
+    if (this.lastPointTime && (now - this.lastPointTime) < 8) {
+        return;  // Skip points faster than 120fps
+    }
+    this.lastPointTime = now;
+    // ... rest of handler
+};
+```
+
+#### 4.2 Use Passive Event Listeners Where Possible
+**Files**: `ColorRmApp.js`
+**Goal**: Improve scroll/touch responsiveness
+
+Already using `{ passive: false }` where needed, but ensure non-blocking handlers use:
+```javascript
+element.addEventListener('touchmove', handler, { passive: true });
+```
+
+#### 4.3 Limit Maximum History Items
+**Files**: `ColorRmApp.js`
+**Goal**: Prevent runaway growth
+
+```javascript
+const MAX_HISTORY_ITEMS = 1000;  // Per page
+
+saveCurrentImg() {
+    const img = this.state.images[this.state.idx];
+
+    // Auto-compact if too many items
+    if (img.history.length > MAX_HISTORY_ITEMS) {
+        this.compactHistory();
+    }
+
+    // ... rest of save
+}
+```
+
+---
+
+### Phase 5: UI/UX Improvements
+
+#### 5.1 Add Performance Warning
+**Files**: `ColorRmApp.js`, `UI.js`
+**Goal**: Warn user before problems occur
+
+```javascript
+renderDebug() {
+    const histCount = currentImg?.history?.length || 0;
+    const boxCount = this.state.clipboardBox?.length || 0;
+
+    if (histCount > 300 || boxCount > 50) {
+        this.ui.showToast("⚠️ High object count. Consider compacting.");
+    }
+}
+```
+
+#### 5.2 Add Manual Compact Button
+**Files**: `color_rm.html`, `ColorRmApp.js`
+**Goal**: Let user manually trigger cleanup
+
+In debug/trace panel:
+```html
+<button onclick="window.App.compactHistory()">Compact History</button>
+<button onclick="window.App.clearDeletedItems()">Clear Deleted</button>
+```
+
+---
+
+## Implementation Priority
+
+| Priority | Task | Impact | Effort |
+|----------|------|--------|--------|
+| 🔴 P0 | Offscreen canvas caching | High | Medium |
+| 🔴 P0 | History compaction | High | Low |
+| 🔴 P0 | Throttle render calls | High | Low |
+| 🟠 P1 | Debounce DB writes | Medium | Low |
+| 🟠 P1 | Box items as blobs | High | Medium |
+| 🟠 P1 | Blob URL cleanup | Medium | Low |
+| 🟡 P2 | Incremental LiveSync | Medium | Medium |
+| 🟡 P2 | Touch event throttling | Medium | Low |
+| 🟢 P3 | Performance warnings | Low | Low |
+| 🟢 P3 | Manual compact button | Low | Low |
+
+---
+
+## Testing Plan
+
+1. **Load test**: Create session with 600+ strokes, verify stability
+2. **Box test**: Add 100+ items to box, verify memory usage
+3. **Navigation test**: Rapid page switching, verify no memory leak
+4. **Android test**: Run on low-end Android device (2GB RAM)
+5. **Sync test**: Verify LiveSync still works with optimizations
+
+---
+
+## Expected Outcomes
+
+| Metric | Before | After |
+|--------|--------|-------|
+| Render time (500 items) | ~50ms | ~5ms |
+| Memory usage (90 box items) | ~400MB | ~40MB |
+| UI responsiveness | Laggy | Smooth |
+| Crash threshold | ~500 items | >2000 items |

public/color_rm.html

@@ -708,6 +708,9 @@
                         <button class="btn btn-outline" style="justify-content:center; font-size:0.7rem; padding:10px;" onclick="window.App.render()">Redraw</button>
                         <button class="btn btn-outline" style="justify-content:center; font-size:0.7rem; padding:10px;" onclick="window.LiveSync.syncHistory(); window.App.render();">Sync Now</button>
                     </div>
+                    <button class="btn" style="width:100%; justify-content:center; margin-top:8px; font-size:0.7rem; padding:10px; border-color:#22c55e; color:#22c55e;" onclick="window.App.compactAllHistory()">
+                        <i class="bi bi-arrow-repeat"></i> Compact History
+                    </button>
                     <button class="btn btn-danger" style="width:100%; justify-content:center; margin-top:8px; font-size:0.7rem; padding:10px;" onclick="location.reload()">Force Hard Reload</button>
                 </div>
             </div>

public/scripts/ColorRmApp.js

@@ -25,8 +25,20 @@ export class ColorRmApp {
             zoom: 1, pan: { x: 0, y: 0 }
         };
 
-        this.cache = { currentImg: null, lab: null };
+        this.cache = {
+            currentImg: null,
+            lab: null,
+            // Offscreen canvas for caching committed strokes
+            committedCanvas: null,
+            committedCtx: null,
+            lastHistoryLength: 0,  // Track when to invalidate cache
+            isDirty: true  // Flag to rebuild cache
+        };
         this.db = null;
+
+        // Performance flags
+        this.renderPending = false;
+        this.saveTimeout = null;
         this.ui = null;
         this.liveSync = null;
         this.registry = null;
@@ -204,6 +216,14 @@ export class ColorRmApp {
     async loadPage(i, broadcast = true) {
         if(i<0 || i>=this.state.images.length) return;
 
+        // Auto-compact current page before switching (if leaving a page)
+        if (this.state.idx !== i && this.state.images[this.state.idx]) {
+            this.checkAutoCompact();
+        }
+
+        // Invalidate cache when loading new page
+        this.invalidateCache();
+
         if (this.liveSync) {
             const project = this.liveSync.getProject();
             if (project) {
@@ -234,8 +254,15 @@ export class ColorRmApp {
         this.renderBookmarks();
 
         if(!item.history) item.history = [];
+
+        // Revoke old page blob URL to prevent memory leak
+        if (this.currentPageBlobUrl) {
+            URL.revokeObjectURL(this.currentPageBlobUrl);
+        }
+
         const img = new Image();
-        img.src = URL.createObjectURL(item.blob);
+        this.currentPageBlobUrl = URL.createObjectURL(item.blob);
+        img.src = this.currentPageBlobUrl;
         return new Promise((resolve) => {
             img.onload = () => {
                 this.cache.currentImg = img;
@@ -265,6 +292,53 @@ export class ColorRmApp {
         });
     }
 
+    // Invalidate the cached canvas (call when history changes)
+    invalidateCache() {
+        this.cache.isDirty = true;
+    }
+
+    // Request a render on next animation frame (throttled to 60fps)
+    requestRender() {
+        if (this.renderPending) return;
+        this.renderPending = true;
+        requestAnimationFrame(() => {
+            this.render();
+            this.renderPending = false;
+        });
+    }
+
+    // Build the cached canvas with all committed strokes
+    buildCommittedCache(ctx, currentImg) {
+        if (!this.cache.isDirty && this.cache.committedCanvas) {
+            return;  // Cache is valid
+        }
+
+        const activeHistory = currentImg?.history?.filter(st => !st.deleted) || [];
+
+        // Create or resize offscreen canvas
+        if (!this.cache.committedCanvas ||
+            this.cache.committedCanvas.width !== this.state.viewW ||
+            this.cache.committedCanvas.height !== this.state.viewH) {
+            this.cache.committedCanvas = document.createElement('canvas');
+            this.cache.committedCanvas.width = this.state.viewW;
+            this.cache.committedCanvas.height = this.state.viewH;
+            this.cache.committedCtx = this.cache.committedCanvas.getContext('2d');
+        }
+
+        const cacheCtx = this.cache.committedCtx;
+        cacheCtx.clearRect(0, 0, this.state.viewW, this.state.viewH);
+
+        // Draw all non-selected, committed strokes to cache
+        activeHistory.forEach((st, idx) => {
+            // Skip items being dragged (they'll be drawn live)
+            if (this.state.selection.includes(idx)) return;
+            this.renderObject(cacheCtx, st, 0, 0);
+        });
+
+        this.cache.isDirty = false;
+        this.cache.lastHistoryLength = currentImg?.history?.length || 0;
+    }
+
     render() {
         if(!this.cache.currentImg) return;
         const c = this.getElement('canvas');
@@ -313,18 +387,30 @@ export class ColorRmApp {
         }
 
         const currentImg = this.state.images[this.state.idx];
-        if (currentImg && currentImg.history) {
-            currentImg.history.forEach((st, idx) => {
-                if (st.deleted) return;
-                let dx=0, dy=0;
-                if(this.state.selection.includes(idx) && this.dragOffset) {
-                    dx = this.dragOffset.x; dy = this.dragOffset.y;
+
+        // Build cached canvas if needed (only rebuilds when dirty)
+        this.buildCommittedCache(ctx, currentImg);
+
+        // Draw the cached committed strokes
+        if (this.cache.committedCanvas) {
+            ctx.drawImage(this.cache.committedCanvas, 0, 0);
+        }
+
+        // Draw selected items with drag offset (these are live, not cached)
+        if (currentImg && currentImg.history && this.state.selection.length > 0) {
+            this.state.selection.forEach(idx => {
+                const st = currentImg.history[idx];
+                if (!st || st.deleted) return;
+                let dx = 0, dy = 0;
+                if (this.dragOffset) {
+                    dx = this.dragOffset.x;
+                    dy = this.dragOffset.y;
                 }
                 this.renderObject(ctx, st, dx, dy);
             });
         }
 
-        // Active stroke
+        // Active stroke (being drawn right now)
         if (this.isDragging && this.currentStroke && this.currentStroke.length > 1 && ['pen','eraser'].includes(this.state.tool)) {
             ctx.save();
             ctx.lineCap='round'; ctx.lineJoin='round';
@@ -778,7 +864,7 @@ export class ColorRmApp {
                         }
                         if (hit) { st.deleted = true; st.lastMod = Date.now(); changed = true; }
                     }
-                    if (changed) { this.saveCurrentImg(); this.render(); }
+                    if (changed) { this.invalidateCache(); this.scheduleSave(); this.render(); }
                     return;
                 }
 
@@ -1173,6 +1259,7 @@ export class ColorRmApp {
         const tb = this.getElement('contextToolbar');
         if(tb) tb.style.display = 'none';
 
+        this.invalidateCache();
         this.saveCurrentImg();
         this.render();
     }
@@ -1214,6 +1301,64 @@ export class ColorRmApp {
                 this.liveSync.setHistory(this.state.idx, this.state.images[this.state.idx].history);
             }
         }
+        // Invalidate cache since history changed
+        this.invalidateCache();
+    }
+
+    // Debounced save - call this instead of saveCurrentImg for frequent updates
+    scheduleSave(skipRemoteSync = false) {
+        if (this.saveTimeout) clearTimeout(this.saveTimeout);
+        this.saveTimeout = setTimeout(() => {
+            this.saveCurrentImg(skipRemoteSync);
+        }, 300);  // Save 300ms after last change
+    }
+
+    // Compact history by removing soft-deleted items
+    compactHistory(pageIdx = null) {
+        const idx = pageIdx !== null ? pageIdx : this.state.idx;
+        const img = this.state.images[idx];
+        if (!img || !img.history) return 0;
+
+        const before = img.history.length;
+        img.history = img.history.filter(st => !st.deleted);
+        const removed = before - img.history.length;
+
+        if (removed > 0) {
+            console.log(`Compacted history: removed ${removed} deleted items`);
+            // Clear selection since indices changed
+            this.state.selection = [];
+            this.invalidateCache();
+            this.saveCurrentImg();
+        }
+
+        return removed;
+    }
+
+    // Compact all pages
+    compactAllHistory() {
+        let totalRemoved = 0;
+        this.state.images.forEach((_, idx) => {
+            totalRemoved += this.compactHistory(idx);
+        });
+        if (totalRemoved > 0) {
+            this.ui.showToast(`Cleaned up ${totalRemoved} items`);
+        }
+        return totalRemoved;
+    }
+
+    // Auto-compact if history is getting large
+    checkAutoCompact() {
+        const img = this.state.images[this.state.idx];
+        if (!img || !img.history) return;
+
+        const deletedCount = img.history.filter(st => st.deleted).length;
+        const totalCount = img.history.length;
+
+        // Auto-compact if more than 100 deleted items or >30% are deleted
+        if (deletedCount > 100 || (totalCount > 50 && deletedCount / totalCount > 0.3)) {
+            console.log('Auto-compacting history...');
+            this.compactHistory();
+        }
     }
 
     saveBlobNative(blob, filename) {
@@ -1338,12 +1483,24 @@ export class ColorRmApp {
     renderPageSidebar() {
         const el = this.getElement('sbPageList');
         if (!el) return;
+
+        // Revoke old blob URLs to prevent memory leaks
+        if (this.pageThumbnailUrls) {
+            this.pageThumbnailUrls.forEach(url => URL.revokeObjectURL(url));
+        }
+        this.pageThumbnailUrls = [];
+
         el.innerHTML = '';
         this.state.images.forEach((img, i) => {
             const d = document.createElement('div');
             d.className = `sb-page-item ${i === this.state.idx ? 'active' : ''}`;
             d.onclick = () => this.loadPage(i);
-            const im = new Image(); im.src = URL.createObjectURL(img.blob);
+
+            const im = new Image();
+            const url = URL.createObjectURL(img.blob);
+            this.pageThumbnailUrls.push(url);
+            im.src = url;
+
             d.appendChild(im);
             const n = document.createElement('div');
             n.className = 'sb-page-num'; n.innerText = i + 1;
@@ -1483,29 +1640,49 @@ export class ColorRmApp {
     }
 
     // --- The Clipboard Box Feature ---
-    addToBox(x, y, w, h, src=null, pageIdx=null) {
-        let finalSrc = src;
-        if(!finalSrc) {
-            const cvs = this.getElement('canvas');
-            const ctx = cvs.getContext('2d');
-            const id = ctx.getImageData(x, y, w, h);
-            const tmp = document.createElement('canvas');
-            tmp.width = w; tmp.height = h;
-            tmp.getContext('2d').putImageData(id, 0, 0);
-            finalSrc = tmp.toDataURL();
-        }
-
-        if(!this.state.clipboardBox) this.state.clipboardBox = [];
-        this.state.clipboardBox.push({
-            id: Date.now() + Math.random(),
-            src: finalSrc,
-            w: w, h: h,
-            pageIdx: (pageIdx !== null) ? pageIdx : this.state.idx
-        });
+    // Now uses Blobs instead of base64 for ~10x memory savings
+    addToBox(x, y, w, h, srcOrBlob=null, pageIdx=null) {
+        const createItem = (blob) => {
+            if(!this.state.clipboardBox) this.state.clipboardBox = [];
+            this.state.clipboardBox.push({
+                id: Date.now() + Math.random(),
+                blob: blob,  // Store as Blob, not base64
+                blobUrl: null,  // Lazy-create URL when rendering
+                w: w, h: h,
+                pageIdx: (pageIdx !== null) ? pageIdx : this.state.idx
+            });
 
-        this.ui.showToast("Added to Box!");
-        this.saveSessionState();
-        if(this.state.activeSideTab === 'box') this.renderBox();
+            this.ui.showToast("Added to Box!");
+            this.saveSessionState();
+            if(this.state.activeSideTab === 'box') this.renderBox();
+        };
+
+        // If a Blob was passed directly
+        if (srcOrBlob instanceof Blob) {
+            createItem(srcOrBlob);
+            return;
+        }
+
+        // If a base64 dataURL was passed (legacy support), convert to Blob
+        if (srcOrBlob && typeof srcOrBlob === 'string' && srcOrBlob.startsWith('data:')) {
+            fetch(srcOrBlob)
+                .then(res => res.blob())
+                .then(blob => createItem(blob));
+            return;
+        }
+
+        // Capture from canvas
+        const cvs = this.getElement('canvas');
+        const ctx = cvs.getContext('2d');
+        const id = ctx.getImageData(x, y, w, h);
+        const tmp = document.createElement('canvas');
+        tmp.width = w; tmp.height = h;
+        tmp.getContext('2d').putImageData(id, 0, 0);
+
+        // Use toBlob instead of toDataURL
+        tmp.toBlob(blob => {
+            createItem(blob);
+        }, 'image/jpeg', 0.85);
     }
 
     captureFullPage() {
@@ -1568,7 +1745,9 @@ export class ColorRmApp {
                 });
             }
 
-            this.addToBox(0, 0, cvs.width, cvs.height, cvs.toDataURL(), idx);
+            // Use toBlob instead of toDataURL for memory efficiency
+            const blob = await new Promise(r => cvs.toBlob(r, 'image/jpeg', 0.85));
+            this.addToBox(0, 0, cvs.width, cvs.height, blob, idx);
             await new Promise(r => setTimeout(r, 0));
         }
 
@@ -1579,6 +1758,13 @@ export class ColorRmApp {
     renderBox() {
         const el = this.getElement('boxList');
         if (!el) return;
+
+        // Revoke old blob URLs to prevent memory leaks
+        if (this.boxBlobUrls) {
+            this.boxBlobUrls.forEach(url => URL.revokeObjectURL(url));
+        }
+        this.boxBlobUrls = [];
+
         el.innerHTML = '';
         const countEl = this.getElement('boxCount');
         if (countEl) countEl.innerText = (this.state.clipboardBox || []).length;
@@ -1591,13 +1777,27 @@ export class ColorRmApp {
         this.state.clipboardBox.forEach((item, idx) => {
             const div = document.createElement('div');
             div.className = 'box-item';
-            const im = new Image(); im.src = item.src;
+            const im = new Image();
+
+            // Support both new Blob format and legacy base64 src format
+            if (item.blob) {
+                const url = URL.createObjectURL(item.blob);
+                this.boxBlobUrls.push(url);
+                im.src = url;
+            } else if (item.src) {
+                im.src = item.src;  // Legacy base64 support
+            }
+
             div.appendChild(im);
 
             const btn = document.createElement('button');
             btn.className = 'box-del';
             btn.innerHTML = '<i class="bi bi-trash"></i>';
             btn.onclick = () => {
+                // Revoke the URL for this item if it has one
+                if (item.blob && item.blobUrl) {
+                    URL.revokeObjectURL(item.blobUrl);
+                }
                 this.state.clipboardBox.splice(idx, 1);
                 this.saveSessionState();
                 this.renderBox();
@@ -1609,6 +1809,11 @@ export class ColorRmApp {
 
     clearBox() {
         if(confirm("Clear all items in Box?")) {
+            // Revoke all blob URLs
+            if (this.boxBlobUrls) {
+                this.boxBlobUrls.forEach(url => URL.revokeObjectURL(url));
+                this.boxBlobUrls = [];
+            }
             this.state.clipboardBox = [];
             this.saveSessionState();
             this.renderBox();
@@ -1721,8 +1926,18 @@ export class ColorRmApp {
                     else { imgY = currentY; labelY = currentY + finalH + 40; }
                 }
 
-                const img = new Image(); img.src = item.src;
+                const img = new Image();
+                // Support both Blob and legacy base64 src formats
+                if (item.blob) {
+                    img.src = URL.createObjectURL(item.blob);
+                } else if (item.src) {
+                    img.src = item.src;
+                }
                 await new Promise(r => img.onload = r);
+                // Revoke blob URL after loading
+                if (item.blob) {
+                    URL.revokeObjectURL(img.src);
+                }
 
                 ctx.drawImage(img, x, imgY, effectiveImgW, finalH);